@nectary/components 2.9.0 → 2.10.0

package/skeleton-item/types.js

@@ -0,0 +1 @@
+export {};

package/spinner/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchSpinnerElement, TSinchSpinnerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-spinner': TSinchSpinnerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-spinner': TSinchSpinnerElement;
+    }
+}

package/spinner/index.js

@@ -0,0 +1,58 @@
+import { defineCustomElement, getLiteralAttribute, NectaryElement, subscribeContext, updateAttribute, updateLiteralAttribute } from '../utils';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}:host{display:block}:host([data-size="l"]){width:50px;height:50px;contain:strict}:host([data-size="m"]){width:24px;height:24px;contain:strict}:host([data-size="s"]){width:16px;height:16px;contain:strict}#spinner-size-l,#spinner-size-m,#spinner-size-s{display:none;will-change:transform}:host([data-size="l"])>#spinner-size-l{display:block;animation:1s linear infinite spinner}:host([data-size="m"])>#spinner-size-m{display:block;animation:1s linear infinite spinner}:host([data-size="s"])>#spinner-size-s{display:block;animation:1s linear infinite spinner}.bg{opacity:.3;stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}.fg{stroke:var(--sinch-global-color-icon,var(--sinch-sys-color-text-default))}</style><svg id="spinner-size-l" width="50" height="50" fill="none"><circle class="bg" cx="25" cy="25" r="22" stroke-width="6"/><path class="fg" d="M25 3a22 22 0 0 1 22 22" stroke-width="6" stroke-linecap="round"/></svg><svg id="spinner-size-m" width="24" height="24" fill="none"><circle class="bg" cx="12" cy="12" r="9" stroke-width="4"/><path class="fg" d="M21 12a9 9 0 0 0-9-9" stroke-width="4" stroke-linecap="round"/></svg><svg id="spinner-size-s" width="16" height="16" fill="none"><circle class="bg" cx="8" cy="8" r="6" stroke-width="2"/><path class="fg" d="M14 8a6 6 0 0 0-6-6" stroke-width="2" stroke-linecap="round"/></svg>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-spinner', class extends NectaryElement {
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    this.setAttribute('aria-live', 'polite');
+    this.setAttribute('aria-busy', 'true');
+    subscribeContext(this, 'size', this.#onContextSize, this.#controller.signal);
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['size'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
+    }
+  }
+  set size(size) {
+    updateLiteralAttribute(this, sizeValues, 'size', size);
+  }
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
+  }
+  #onContextSize = e => {
+    if (this.hasAttribute('size')) {
+      return;
+    }
+    switch (e.detail) {
+      case 'l':
+      case 'm':
+        {
+          this.setAttribute('data-size', 'm');
+          break;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 's');
+        }
+    }
+  };
+});

package/spinner/types.d.ts

@@ -0,0 +1,12 @@
+import type { TSinchElementReact } from '../types';
+import type { TSinchSize } from '../utils/size';
+export type TSinchSpinnerElement = HTMLElement & {
+    /** Spinner size */
+    size: TSinchSize;
+    /** Spinner size */
+    setAttribute(name: 'size', value: TSinchSize): void;
+};
+export type TSinchSpinnerReact = TSinchElementReact<TSinchSpinnerElement> & {
+    /** Spinner size */
+    size?: TSinchSize;
+};

package/spinner/types.js

@@ -0,0 +1 @@
+export {};

package/standalone.d.ts

@@ -0,0 +1,85 @@
+import './accordion-item/index.js';
+import './accordion/index.js';
+import './action-menu-option/index.js';
+import './action-menu/index.js';
+import './alert/index.js';
+import './avatar/index.js';
+import './badge/index.js';
+import './button/index.js';
+import './card-container/index.js';
+import './card/index.js';
+import './chat-block/index.js';
+import './chat-bubble/index.js';
+import './chat/index.js';
+import './checkbox/index.js';
+import './chip/index.js';
+import './code-tag/index.js';
+import './color-menu-option/index.js';
+import './color-menu/index.js';
+import './color-swatch/index.js';
+import './date-picker/index.js';
+import './dialog/index.js';
+import './emoji-picker/index.js';
+import './emoji/index.js';
+import './field/index.js';
+import './file-drop/index.js';
+import './file-picker/index.js';
+import './file-status/index.js';
+import './flag/index.js';
+import './grid-item/index.js';
+import './grid/index.js';
+import './help-tooltip/index.js';
+import './horizontal-stepper-item/index.js';
+import './horizontal-stepper/index.js';
+import './icon-button/index.js';
+import './icon/index.js';
+import './inline-alert/index.js';
+import './input/index.js';
+import './link/index.js';
+import './list-item/index.js';
+import './list/index.js';
+import './pagination/index.js';
+import './pop/index.js';
+import './popover/index.js';
+import './progress-stepper-item/index.js';
+import './progress-stepper/index.js';
+import './progress/index.js';
+import './radio-option/index.js';
+import './radio/index.js';
+import './rich-text/index.js';
+import './rich-textarea/index.js';
+import './segment-collapse/index.js';
+import './segment/index.js';
+import './segmented-control-option/index.js';
+import './segmented-control/index.js';
+import './segmented-icon-control-option/index.js';
+import './segmented-icon-control/index.js';
+import './select-button/index.js';
+import './select-menu-option/index.js';
+import './select-menu/index.js';
+import './skeleton-item/index.js';
+import './skeleton/index.js';
+import './spinner/index.js';
+import './stop-events/index.js';
+import './table-body/index.js';
+import './table-cell/index.js';
+import './table-head-cell/index.js';
+import './table-head/index.js';
+import './table-row/index.js';
+import './table/index.js';
+import './tabs-icon-option/index.js';
+import './tabs-option/index.js';
+import './tabs/index.js';
+import './tag/index.js';
+import './text/index.js';
+import './textarea/index.js';
+import './tile-control-option/index.js';
+import './tile-control/index.js';
+import './time-picker/index.js';
+import './title/index.js';
+import './toast-manager/index.js';
+import './toast/index.js';
+import './toggle/index.js';
+import './tooltip/index.js';
+import './vertical-stepper-item/index.js';
+import './vertical-stepper/index.js';

package/standalone.js

@@ -0,0 +1,87 @@
+import { setNectaryRegistry } from './utils';
+setNectaryRegistry(window.customElements);
+import './accordion-item/index.js';
+import './accordion/index.js';
+import './action-menu-option/index.js';
+import './action-menu/index.js';
+import './alert/index.js';
+import './avatar/index.js';
+import './badge/index.js';
+import './button/index.js';
+import './card-container/index.js';
+import './card/index.js';
+import './chat-block/index.js';
+import './chat-bubble/index.js';
+import './chat/index.js';
+import './checkbox/index.js';
+import './chip/index.js';
+import './code-tag/index.js';
+import './color-menu-option/index.js';
+import './color-menu/index.js';
+import './color-swatch/index.js';
+import './date-picker/index.js';
+import './dialog/index.js';
+import './emoji-picker/index.js';
+import './emoji/index.js';
+import './field/index.js';
+import './file-drop/index.js';
+import './file-picker/index.js';
+import './file-status/index.js';
+import './flag/index.js';
+import './grid-item/index.js';
+import './grid/index.js';
+import './help-tooltip/index.js';
+import './horizontal-stepper-item/index.js';
+import './horizontal-stepper/index.js';
+import './icon-button/index.js';
+import './icon/index.js';
+import './inline-alert/index.js';
+import './input/index.js';
+import './link/index.js';
+import './list-item/index.js';
+import './list/index.js';
+import './pagination/index.js';
+import './pop/index.js';
+import './popover/index.js';
+import './progress-stepper-item/index.js';
+import './progress-stepper/index.js';
+import './progress/index.js';
+import './radio-option/index.js';
+import './radio/index.js';
+import './rich-text/index.js';
+import './rich-textarea/index.js';
+import './segment-collapse/index.js';
+import './segment/index.js';
+import './segmented-control-option/index.js';
+import './segmented-control/index.js';
+import './segmented-icon-control-option/index.js';
+import './segmented-icon-control/index.js';
+import './select-button/index.js';
+import './select-menu-option/index.js';
+import './select-menu/index.js';
+import './skeleton-item/index.js';
+import './skeleton/index.js';
+import './spinner/index.js';
+import './stop-events/index.js';
+import './table-body/index.js';
+import './table-cell/index.js';
+import './table-head-cell/index.js';
+import './table-head/index.js';
+import './table-row/index.js';
+import './table/index.js';
+import './tabs-icon-option/index.js';
+import './tabs-option/index.js';
+import './tabs/index.js';
+import './tag/index.js';
+import './text/index.js';
+import './textarea/index.js';
+import './tile-control-option/index.js';
+import './tile-control/index.js';
+import './time-picker/index.js';
+import './title/index.js';
+import './toast-manager/index.js';
+import './toast/index.js';
+import './toggle/index.js';
+import './tooltip/index.js';
+import './vertical-stepper-item/index.js';
+import './vertical-stepper/index.js';

package/stop-events/index.d.ts

@@ -0,0 +1 @@
+export {};

package/stop-events/index.js

@@ -0,0 +1,27 @@
+import { defineCustomElement, unpackCsv } from '../utils';
+defineCustomElement('sinch-stop-events', class extends HTMLElement {
+  #controller = null;
+  constructor() {
+    super();
+    this.style.display = 'contents';
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    const events = unpackCsv(this.getAttribute('events'));
+    for (const event of events) {
+      this.addEventListener(event, this.#stopEvent, {
+        signal
+      });
+    }
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  #stopEvent = e => {
+    e.stopPropagation();
+  };
+});

package/table/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTableElement, TSinchTableReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table': TSinchTableReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table': TSinchTableElement;
+    }
+}

package/table/index.js

@@ -0,0 +1,14 @@
+import { defineCustomElement, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:table}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'table');
+  }
+});

package/table/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTableElement = HTMLElement;
+export type TSinchTableReact = TSinchElementReact<TSinchTableElement>;

package/table/types.js

@@ -0,0 +1 @@
+export {};

package/table-body/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTableBodyElement, TSinchTableBodyReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-body': TSinchTableBodyReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-body': TSinchTableBodyElement;
+    }
+}

package/table-body/index.js

@@ -0,0 +1,14 @@
+import { defineCustomElement, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:table-row-group}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-body', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'rowgroup');
+  }
+});

package/table-body/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTableBodyElement = HTMLElement;
+export type TSinchTableBodyReact = TSinchElementReact<TSinchTableBodyElement>;

package/table-body/types.js

@@ -0,0 +1 @@
+export {};

package/table-cell/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTableCellElement, TSinchTableCellReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-cell': TSinchTableCellReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-cell': TSinchTableCellElement;
+    }
+}

package/table-cell/index.js

@@ -0,0 +1,21 @@
+import { defineCustomElement, getLiteralAttribute, NectaryElement, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:table-cell;vertical-align:top;border-bottom:1px solid var(--sinch-comp-table-color-cell-default-border-initial)}#wrapper{display:flex;flex-direction:column;justify-content:center;min-height:48px;box-sizing:border-box;padding:8px}:host([align=end]) #wrapper{text-align:end;align-items:flex-end}:host([align=center]) #wrapper{text-align:center;align-items:center}</style><div id="wrapper"><slot></slot></div>';
+import { alignValues } from './utils';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-cell', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'cell');
+  }
+  set align(value) {
+    updateLiteralAttribute(this, alignValues, 'align', value);
+  }
+  get align() {
+    return getLiteralAttribute(this, alignValues, 'align', 'start');
+  }
+});

package/table-cell/types.d.ts

@@ -0,0 +1,9 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTableAlignType = 'start' | 'center' | 'end';
+export type TSinchTableCellElement = HTMLElement & {
+    align: TSinchTableAlignType;
+    setAttribute(name: 'align', value: TSinchTableAlignType): void;
+};
+export type TSinchTableCellReact = TSinchElementReact<TSinchTableCellElement> & {
+    align?: TSinchTableAlignType;
+};

package/table-cell/types.js

@@ -0,0 +1 @@
+export {};

package/table-cell/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchTableAlignType } from './types';
+export declare const alignValues: readonly TSinchTableAlignType[];

package/table-cell/utils.js

@@ -0,0 +1 @@
+export const alignValues = ['start', 'center', 'end'];

package/table-head/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTableHeadElement, TSinchTableHeadReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-head': TSinchTableHeadReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-head': TSinchTableHeadElement;
+    }
+}

package/table-head/index.js

@@ -0,0 +1,14 @@
+import { defineCustomElement, NectaryElement } from '../utils';
+const templateHTML = '<style>:host{display:table-header-group}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-head', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'rowgroup');
+  }
+});

package/table-head/types.d.ts

@@ -0,0 +1,3 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTableHeadElement = HTMLElement;
+export type TSinchTableHeadReact = TSinchElementReact<TSinchTableHeadElement>;

package/table-head/types.js

@@ -0,0 +1 @@
+export {};

package/table-head-cell/index.d.ts

@@ -0,0 +1,12 @@
+import '../text';
+import type { TSinchTableHeaderCellElement, TSinchTableHeaderCellReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-head-cell': TSinchTableHeaderCellReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-head-cell': TSinchTableHeaderCellElement;
+    }
+}

package/table-head-cell/index.js

@@ -0,0 +1,57 @@
+import '../text';
+import { alignValues } from '../table-cell/utils';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:table-cell;border-bottom:1px solid var(--sinch-comp-table-color-head-cell-default-border-initial);vertical-align:middle}#wrapper{position:relative;display:flex;align-items:center;gap:8px;width:100%;height:100%;padding:8px;box-sizing:border-box;--sinch-global-color-icon:var(--sinch-comp-table-color-head-cell-default-icon-initial)}#text{flex-shrink:1;min-width:0;--sinch-global-color-text:var(--sinch-comp-table-color-head-cell-default-text-initial)}#text:empty{display:none}:host([align=center])>#wrapper{justify-content:center}:host([align=end])>#wrapper{justify-content:flex-end}:host([fit]){width:1px}</style><div id="wrapper"><slot name="checkbox"></slot><slot name="left"></slot><sinch-text id="text" type="m"></sinch-text><slot name="tooltip"></slot><slot name="right"></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-head-cell', class extends NectaryElement {
+  #$text;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'columnheader');
+    this.setAttribute('scope', 'col');
+  }
+  static get observedAttributes() {
+    return ['text', 'fit'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'fit':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+  get text() {
+    return getAttribute(this, 'text');
+  }
+  set align(value) {
+    updateLiteralAttribute(this, alignValues, 'align', value);
+  }
+  get align() {
+    return getLiteralAttribute(this, alignValues, 'align', 'start');
+  }
+  set fit(isFit) {
+    updateBooleanAttribute(this, 'fit', isFit);
+  }
+  get fit() {
+    return getBooleanAttribute(this, 'fit');
+  }
+});

package/table-head-cell/types.d.ts

@@ -0,0 +1,15 @@
+import type { TSinchTableAlignType } from '../table-cell/types';
+import type { TSinchElementReact } from '../types';
+export type TSinchTableHeaderCellElement = HTMLElement & {
+    text: string | null;
+    align: TSinchTableAlignType;
+    fit: boolean;
+    setAttribute(name: 'text', value: string): void;
+    setAttribute(name: 'align', value: TSinchTableAlignType): void;
+    setAttribute(name: 'fit', value: ''): void;
+};
+export type TSinchTableHeaderCellReact = TSinchElementReact<TSinchTableHeaderCellElement> & {
+    text?: string;
+    fit?: boolean;
+    align?: TSinchTableAlignType;
+};

package/table-head-cell/types.js

@@ -0,0 +1 @@
+export {};

package/table-row/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTableRowElement, TSinchTableRowReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table-row': TSinchTableRowReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table-row': TSinchTableRowElement;
+    }
+}

package/table-row/index.js

@@ -0,0 +1,42 @@
+import { defineCustomElement, getBooleanAttribute, isAttrEqual, isAttrTrue, NectaryElement, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:table-row;background-color:var(--sinch-comp-table-color-row-default-background-initial)}:host([selected]){background-color:var(--sinch-comp-table-color-row-checked-background-initial)}:host(:hover){background-color:var(--sinch-comp-table-color-row-default-background-hover)}:host([sticky]) ::slotted(sinch-table-head-cell){position:sticky;top:0;z-index:1;background-color:var(--sinch-comp-table-color-row-default-background-sticky)}:host(:last-child) ::slotted(sinch-table-cell){border-bottom:none}</style><slot></slot>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-table-row', class extends NectaryElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'row');
+  }
+  static get observedAttributes() {
+    return ['sticky', 'selected'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'sticky':
+      case 'selected':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  set sticky(isSticky) {
+    updateBooleanAttribute(this, 'sticky', isSticky);
+  }
+  get sticky() {
+    return getBooleanAttribute(this, 'sticky');
+  }
+  set selected(isSelected) {
+    updateBooleanAttribute(this, 'selected', isSelected);
+  }
+  get selected() {
+    return getBooleanAttribute(this, 'selected');
+  }
+});

package/table-row/types.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTableRowElement = HTMLElement & {
+    sticky: boolean;
+    selected: boolean;
+    setAttribute(name: 'sticky', value: ''): void;
+    setAttribute(name: 'selected', value: ''): void;
+};
+export type TSinchTableRowReact = TSinchElementReact<TSinchTableRowElement> & {
+    sticky?: boolean;
+    selected?: boolean;
+};

package/table-row/types.js

@@ -0,0 +1 @@
+export {};

package/tabs/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTabsElement, TSinchTabsReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tabs': TSinchTabsReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tabs': TSinchTabsElement;
+    }
+}