@nectary/components 2.8.7 → 2.9.0

package/spinner/index.d.ts

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

package/spinner/index.js

@@ -1,58 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

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

package/standalone.d.ts

@@ -1,85 +0,0 @@
-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

@@ -1,87 +0,0 @@
-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

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

package/stop-events/index.js

@@ -1,27 +0,0 @@
-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

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

package/table/index.js

@@ -1,14 +0,0 @@
-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

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

package/table/types.js

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

package/table-body/index.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

package/table-body/types.js

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

package/table-cell/index.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

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

package/table-cell/utils.d.ts

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

package/table-cell/utils.js

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

package/table-head/index.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

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

package/table-head/types.js

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

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

@@ -1,12 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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

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

package/table-row/index.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

package/tabs/index.d.ts

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