src/partials/widgets/orbit-index-select-community.hbs

+{{#if (hasComponent "registering")}}
+<solid-widget name='orbit-index-select-community'>
+  <template>
+    <solid-link class="segment full sm-three-quarter button text-xsmall text-bold text-uppercase color-secondary bordered padding-bottom xlarge padding-top xlarge margin-top-xsmall community-button community-button-flex-container" next='join-community' data-src='${src}'>
+      <solid-display
+        data-src='${src}'
+        fields='logo, name'
+        widget-logo='orbit-index-community-logo'
+        widget-name='orbit-index-community-text'></solid-display>
+    </solid-link>
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-menu-contact-removed.hbs

+{{#if (hasComponent "chat")}}
+<solid-widget name="orbit-menu-contact-removed">
+  <template>
+    ${value != "" ? `
+      <solid-delete class="menu-delete-button button-remove icon children-icon-close" data-src='${value}' data-label="d" confirmation-type="confirm" confirmation-message="test" confirmation-message="test" confirmation-submit-text="test" confirmation-cancel-text="test" data-trans="confirmation-message=chat.removeContact.question;confirmation-submit-text=chat.removeContact.yes;confirmation-cancel-text=chat.removeContact.no" confirmation-submit-class="segment sm-full text-center button text-xsmall text-bold text-uppercase reversed color-primary bordered padding-right-medium padding-left-medium margin-right-xsmall sm-margin-right-none sm-margin-bottom-medium" confirmation-cancel-class="segment sm-full text-center button text-xsmall text-bold text-uppercase color-primary bordered padding-right-medium padding-left-medium margin-left-xsmall sm-margin-left-none"></solid-delete>` : ""}
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-menu-empty.hbs

+{{#if (hasComponent "chat" "circles" "directory" "projects")}}
+<solid-widget name="orbit-menu-empty">
+  <template>
+      <p class="segment full empty whitespace-normal" style='display:block!important; color:#D0D4DA'>
+        <span data-trans="menuLeft.emptyCircleProjectContact.empty"></span>
+      </p>
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-menu-fix-url-circle.hbs

+{{#if (hasComponent "circles")}}
+<solid-widget name="orbit-menu-fix-url-circle">
+  <template>
+    ${value != "" ? `
+      <solid-link class="segment full" data-src="${value}" next="{{getRoute 'circles' true}}">
+        <solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(public, circle(name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall"  class-public='segment text-top sub-menu-icon'  class-circle='segment three-quarter sub-menu-name'  class-name='ellipsis-content'  class-badge='segment badge'  value-badge='${value}' widget-public='orbit-menu-publicprivate' widget-badge='orbit-counter' widget-jabberID='orbit-menu-jabberid' widget-name='solid-display-div' order-asc="name"></solid-display>
+      </solid-link>` : ""}
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-menu-fix-url-contact.hbs

+{{#if (hasComponent "chat")}}
+<solid-widget name="orbit-menu-fix-url-contact">
+  <template>
+    ${value != "" ? `
+      <solid-link class="segment full" data-src="${value}" next="{{getRoute 'chat' true}}">
+        <solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(message(name, chatProfile.jabberID), badge)'  class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall" class-message='segment three-quarter sub-menu-name' class-badge='segment badge'  value-badge='${value}' widget-badge='orbit-counter' widget-chatProfile.jabberID='orbit-menu-jabberid' widget-name='solid-display-div' order-asc='username'></solid-display>
+      </solid-link>` : ""}
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-menu-fix-url-project.hbs

+{{#if (hasComponent "projects")}}
+<solid-widget name="orbit-menu-fix-url-project">
+  <template>
+    ${value != "" ? `
+      <solid-link class="segment full" data-src="${value}" next="{{getRoute 'projects' true}}">
+        <solid-display class="segment full text-color-white heading-active bg-color-heading transparent-background hover active" data-src='${value}' fields='segment(project(customer.name, name, jabberID), badge)' class-segment="segment full padding-top-xxsmall padding-bottom-xxsmall padding-right-xsmall padding-left-xsmall"  class-project='segment three-quarter sub-menu-name'  class-customer.name='ellipsis-content' class-name='ellipsis-content'  class-badge='segment badge text-top'  value-badge='${value}' widget-jabberID='orbit-menu-jabberid' widget-badge='orbit-counter' widget-name='solid-display-div' order-asc="customer.name"></solid-display>
+      </solid-link>` : ""}
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-menu-jabberid.hbs

+{{#if (hasComponent "chat" "circles" "projects" "spaces")}}
+<solid-widget name="orbit-menu-jabberid">
+  <template>
+    <div class="hidden" data-jabberID="${value}"></div>
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-menu-publicprivate.hbs

+{{#if (hasComponent "circles" "projects")}}
+<solid-widget name="orbit-menu-publicprivate">
+  <template>
+    <div class="${value == 'true' ? 'text-large': 'text-simple-line-icons text-xsmall'}">
+      ${value == 'true' ? '#' : ''}
+    </div>
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-project-admins.hbs

+{{#if (hasComponentAll "projects" "admin")}}
+<solid-widget name="orbit-project-admins">
+  <template>
+    <solid-display
+      data-src="${value}"
+      fields="user"
+      filtered-by="orbit_project_is_admin"
+      widget-user="orbit-project-captain"
+    ></solid-display>
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-project-businessprovider.hbs

+{{#if (hasComponentAll "projects" "invoices")}}
+<solid-widget name="orbit-project-businessprovider">
+  <template> 
+      <solid-form class="segment three-quarter sm-full margin-right-medium margin-bottom-smalll"
+        data-src="${value}"
+        data-holder=""
+        naked=""
+        fields="name, fee"
+        label-name=""
+        label-fee=""
+        class-name="segment two-third padding-right-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
+        class-fee="segment third padding-left-small sm-padding-none text-small text-semibold text-uppercase text-color-heading"
+         data-trans="label-name=project.create.labelBusinessproviderName;label-fee=project.create.labelBusinessproviderFee"
+      ></solid-form>
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-project-captain.hbs

+{{#if (hasComponentAll "projects" "admin")}}
+<solid-widget name="orbit-project-captain">
+  <template> 
+      <solid-display class="segment margin-top-xxsmall margin-bottom-xxsmall labelled-avatar two-lines block"
+        data-src="${await value}"
+        fields="segment1(account.picture), segment2(line1(name), line2(at, username))"
+        class-segment1="segment"
+        class-account.picture="avatar"
+        class-segment2="segment three-quarter margin-left-xsmall"
+        class-line1="segment block"
+        class-name="text-small text-semibold text-color-heading text-sub"
+        class-line2="segment block text-xsmall"
+        widget-account.picture="orbit-user-avatar"
+        value-at="@"
+      ></solid-display>
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-project-edit-admin.hbs

+{{#if (hasComponent "projects")}}
+<solid-widget name="orbit-project-edit-admin">
+  <template> 
+    ${value == "true" ? `<div data-trans="circle.list.admin"></div>` : ""}
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-project-edit-members-delete.hbs

+{{#if (hasComponent "projects")}}
+<solid-widget name="orbit-project-edit-members-delete">
+  <template> 
+    <solid-ac-checker permission="acl:Delete" data-src="${src}">
+      <solid-delete
+        class='segment text-xsmall children-link-text-bold children-link-text-uppercase children-link-button children-link-color-secondary bordered'
+        data-src="${src}"
+        data-label=''
+        data-trans='data-label=project.edit.buttonDelete'
+      ></solid-delete>
+    </solid-ac-checker>
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-project-team-contact.hbs

+{{#if (hasComponent "projects")}}
+<solid-widget name="orbit-project-team-contact">
+  <template> 
+    <solid-link class="icon icon-secondary hover icon-speech margin-left-xsmall margin-right-medium" data-src="${value}" next="{{getRoute 'chat' true}}"></solid-link>
+  </template>
+</solid-widget>
+{{/if}}

src/partials/widgets/orbit-user-avatar.hbs

+<solid-widget name='orbit-user-avatar'>
+  <template>
+    ${value != "" ? `<img src="${value}" />` : `<img src="{{#if @root.client.defaultAvatar}}{{@root.client.defaultAvatar}}{{else}}/images/alien.webp{{/if}}" />`}
+  </template>
+</solid-widget>

src/partials/widgets/orbit-username-field.hbs

+{{#if (hasComponent "chat")}}
+<solid-widget name="orbit-username-field">
+  <template>
+    <label>${label}</label>
+    <input type="text" title="" pattern="[a-zA-Z0-9]+" label="${label}" data-trans="title=user.create.labelUsernameTitle" name="username" required value="${value}" data-holder>
+  </template>
+</solid-widget>
+{{/if}}

src/scripts/component-orbit-auto-login.js

+import { importCore } from "@helpers/utils";
+importCore().then((core) => {
+  core.Sib.register({
+    name: "orbit-auto-login",
+    created() {
+      if (window.location.pathname === "/login") {
+        for (const el of document.querySelectorAll(".loggedIn-loader")) {
+          el.style.display = "flex";
+        }
+        window.dispatchEvent(
+          new CustomEvent("requestNavigation", {
+            detail: {
+              route: window.orbit.getRoute(
+                window.orbit.defaultRoute || "dashboard",
+                true,
+              ),
+            },
+          }),
+        );
+        if (!new URLSearchParams(window.location.search).get("code"))
+          document.querySelector("sib-auth").login();
+      }
+    },
+  });
+});

src/scripts/component-orbit-circle-headline.js

+import { LitElement, html, nothing } from "lit";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import markdownit from "markdown-it";
+import mila from "markdown-it-link-attributes";
+
+import { truncate } from "@helpers/utils";
+
+customElements.define(
+  "orbit-circle-headline",
+  class OrbitCircleHeadline extends LitElement {
+    static properties = {
+      name: { attribute: "name" },
+      value: { attribute: "value" },
+      maxlength: { attribute: "maxlength", type: Number },
+    };
+
+    createRenderRoot() {
+      return this;
+    }
+
+    component = this; // Workaround to trick sib-core that this is a valid widget
+
+    render() {
+      if (!this.name || !this.value) return nothing;
+
+      const md = markdownit({
+        breaks: true,
+        html: false,
+        linkify: true,
+      });
+
+      md.use(mila, {
+        attrs: {
+          target: "_blank",
+          rel: "noopener",
+        },
+      });
+
+      let value = md.render(this.value);
+
+      if (this.maxlength > 0) {
+        const trimmed = this.truncateValue(value, this.maxlength);
+        if (trimmed.length < value.length) {
+          value = trimmed.replace(
+            /<\/p>$/,
+            ' <solid-link bind-resources next="circles-information">(...)</solid-link></p>',
+          );
+        }
+      }
+
+      return html`${unsafeHTML(value)}`;
+    }
+
+    /**
+     * Truncate an HTML string to a given limit (omitting tags).
+     *
+     * @param {string} value
+     * @param {number} limit
+     * @returns {string}
+     */
+    truncateValue(value, limit) {
+      const fragment = document.createElement("div");
+      fragment.innerHTML = value;
+      truncate(fragment, limit);
+      return fragment.innerHTML;
+    }
+  },
+);

src/scripts/component-orbit-loader.js

+import { LitElement, css, html, nothing } from "lit";
+
+// Custom widget for wholesale
+customElements.define(
+  "solid-loader",
+  class extends LitElement {
+
+    static properties = {
+      position: { attribute: "position" },
+      hidden: { attribute: "hidden" },
+    };
+
+    static styles = css`
+      .loader {
+        margin: 0 auto;
+        position: relative;
+        width: 80px;
+        height: 20px;
+      }
+      .loader.loader-top {
+        top: 30px;
+      }
+      .loader div {
+        position: absolute;
+        width: 13px;
+        height: 13px;
+        border-radius: 50%;
+        background: var(--color-heading);
+        animation-timing-function: cubic-bezier(0, 1, 1, 0);
+      }
+      .loader.loader-menu div {
+        width: 8px;
+        height: 8px;
+        background: white;
+      }
+      .loader div:nth-child(1) {
+        left: 8px;
+        animation: lds-ellipsis1 0.6s infinite;
+      }
+      .loader div:nth-child(2) {
+        left: 8px;
+        animation: lds-ellipsis2 0.6s infinite;
+      }
+      .loader div:nth-child(3) {
+        left: 32px;
+        animation: lds-ellipsis2 0.6s infinite;
+      }
+      .loader div:nth-child(4) {
+        left: 56px;
+        animation: lds-ellipsis3 0.6s infinite;
+      }
+      @keyframes lds-ellipsis1 {
+        0% {
+          transform: scale(0);
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+      @keyframes lds-ellipsis3 {
+        0% {
+          transform: scale(1);
+        }
+        100% {
+          transform: scale(0);
+        }
+      }
+      @keyframes lds-ellipsis2 {
+        0% {
+          transform: translate(0, 0);
+        }
+        100% {
+          transform: translate(24px, 0);
+        }
+      }
+    `;
+
+    render() {
+      if (this.hidden) return nothing;
+      return html`<div class="loader loader-${this.position || "top"}" id="loader-users-create">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>`;
+    }
+  },
+);

src/scripts/component-orbit-reactivity.js

+import { importCore } from "@helpers/utils";
+importCore().then((core) => {
+  core.Sib.register({
+    name: "orbit-reactivity",
+    use: [core.StoreMixin],
+    attributes: {
+      targetSrc: {
+        type: String,
+        default: "",
+        callback: function () {
+          this.subscribe();
+        },
+      },
+    },
+    async fetchData(value) {
+      this.resourceId = null;
+      if (this.nestedField) {
+        const resource =
+          core.store.get(value) ||
+          (await core.store.getData(value, this.context));
+        const nestedResource = await resource[this.nestedField];
+        this.resourceId = nestedResource ? nestedResource["@id"] : null;
+      } else {
+        this.resourceId = value;
+      }
+      await this.replaceAttributesData();
+      this.subscribe();
+    },
+    unsubscribe(resourceId, targetSrc) {
+      const resourcesSub =
+        core.store.subscriptionVirtualContainersIndex.get(resourceId);
+      const targetSub =
+        core.store.subscriptionVirtualContainersIndex.get(targetSrc);
+      const newResourceSub = resourcesSub.filter((r) => r !== targetSrc);
+      const newTargetSub = targetSub.filter((r) => r !== resourceId);
+      core.store.subscriptionVirtualContainersIndex.set(
+        resourceId,
+        newResourceSub,
+      );
+      core.store.subscriptionVirtualContainersIndex.set(
+        targetSrc,
+        newTargetSub,
+      );
+    },
+    detached() {
+      this.unsubscribe(this.resourceId, this.targetSrc);
+    },
+    subscribe() {
+      if (
+        this.oldResourceId &&
+        this.oldTargetSrc &&
+        (this.oldResourceId !== this.resourceId ||
+          this.oldTargetSrc !== this.targetSrc)
+      ) {
+        this.unsubscribe(this.oldResourceId, this.oldTargetSrc);
+      }
+      if (this.resourceId && this.targetSrc) {
+        core.store.subscribeVirtualContainerTo(this.resourceId, this.targetSrc);
+        core.store.subscribeVirtualContainerTo(this.targetSrc, this.resourceId);
+        this.oldResourceId = this.resourceId;
+        this.oldTargetSrc = this.targetSrc;
+      }
+    },
+  });
+});