@nectary/components 0.8.0

package/select/index.js

@@ -0,0 +1,492 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$button, _$buttonContent, _$label, _$optionalText, _$additionalText, _$invalidText, _$selectSlot, _$listbox, _onButtonClick, _onListboxClick, _onListboxKeyUp, _onListboxKeyDown, _onSlotChange, _onListboxBlur;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { isSelectOptionElement } from '../select-option';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateIntegerAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box}#button{all:initial;display:flex;align-items:center;gap:8px;border:1px solid var(--sinch-color-stormy-200);border-radius:2px;box-sizing:border-box;width:100%;height:48px;margin:2px 0;padding:8px 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button[data-unselected]{color:var(--sinch-color-text-muted)}#button:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button:focus{border-color:var(--sinch-color-stormy-300)}:host([invalidtext]:not([invalidtext=""])) #button:not(:disabled){border-color:var(--sinch-color-text-invalid)}#content{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#bottom,#top{display:flex;align-items:baseline}#top{height:24px}#bottom{height:20px}#additional,#invalid,#label,#optional{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#label{font:var(--sinch-font-title-4);color:var(--sinch-color-text-default)}#optional{flex:1;text-align:right;font:var(--sinch-font-small-text);color:var(--sinch-color-text-muted)}#additional{flex:1;text-align:right;font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-muted)}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid)}::slotted(sinch-help-tooltip){align-self:center;margin:0 8px}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])) ::slotted(sinch-help-tooltip){fill:var(--sinch-color-stormy-100)}#listbox{position:absolute;left:0;top:0;padding-top:74px;width:100%;display:none;list-style:none;outline:0}#listbox>*{font:var(--sinch-font-body);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-stormy-500);border-top-width:0;border-bottom-left-radius:2px;border-bottom-right-radius:2px;width:100%;box-sizing:border-box;box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto}#button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}#button[aria-expanded=true]~#listbox{display:block}</style><div id="wrapper"><div id="top"><label id="label" for="button"></label><slot name="tooltip"></slot><span id="optional"></span></div><button id="button" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="label button"><span id="content"></span> <svg id="dropdown-icon" width="12" height="8"><path d="M1.41.59 6 5.17 10.59.59 12 2 6 8 0 2 1.41.59Z"/></svg></button><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div><div id="listbox" tabindex="-1"><div><slot name="select"></slot></div></div></div>';
+const ITEM_HEIGHT = 36;
+
+const getEnabledOptionElements = $slot => {
+  return $slot.assignedElements().filter(opt => isSelectOptionElement(opt) && opt.disabled !== true);
+};
+
+const findSelectedOption = elements => {
+  return elements.find(el => el.selected) ?? null;
+};
+
+const getOptionWithValue = ($slot, value) => {
+  for (const $option of $slot.assignedElements()) {
+    if (isSelectOptionElement($option) && $option.disabled !== true && $option.value === value) {
+      return $option;
+    }
+  }
+
+  return null;
+};
+
+const getFirstOption = $slot => {
+  for (const $option of $slot.assignedElements()) {
+    if (isSelectOptionElement($option) && $option.disabled !== true) {
+      return $option;
+    }
+  }
+
+  return null;
+};
+
+const getLastOption = $slot => {
+  for (const $option of $slot.assignedElements().reverse()) {
+    if (isSelectOptionElement($option) && $option.disabled !== true) {
+      return $option;
+    }
+  }
+
+  return null;
+};
+
+const getNextOption = $slot => {
+  const $options = getEnabledOptionElements($slot);
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return getFirstOption($slot);
+  }
+
+  return $options[(currentIndex + 1) % $options.length];
+};
+
+const getPrevOption = $slot => {
+  const $options = getEnabledOptionElements($slot);
+  const $selectedOption = findSelectedOption($options);
+  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
+
+  if (currentIndex < 0) {
+    return getLastOption($slot);
+  }
+
+  return $options[(currentIndex - 1 + $options.length) % $options.length];
+};
+
+const selectOption = ($slot, $option) => {
+  for (const $op of $slot.assignedElements()) {
+    if (isSelectOptionElement($op)) {
+      const isSelected = $op === $option;
+      $op.selected = isSelected;
+
+      if (isSelected) {
+        $op.scrollIntoView?.({
+          block: 'nearest'
+        });
+      }
+    }
+  }
+};
+
+const dispatchChangeEvent = ($root, $opt) => {
+  if ($opt != null && $root.value !== $opt.value) {
+    $root.dispatchEvent(new CustomEvent('change', {
+      detail: $opt.value,
+      bubbles: true
+    }));
+  }
+};
+
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-select', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$selectSlot = new WeakMap(), _$listbox = new WeakMap(), _onButtonClick = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyUp = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onSlotChange = new WeakMap(), _onListboxBlur = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$button, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$buttonContent, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$label, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$optionalText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$additionalText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$invalidText, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$selectSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$listbox, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _onButtonClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+
+        if (_classPrivateFieldGet(this, _$button).getAttribute('aria-expanded') !== 'true') {
+          this.onExpand();
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onListboxClick, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        const $elem = e.target;
+
+        if ($elem !== _classPrivateFieldGet(this, _$listbox) && isSelectOptionElement($elem) && $elem.disabled !== true) {
+          dispatchChangeEvent(this, $elem);
+        }
+
+        this.onCollapse();
+
+        _classPrivateFieldGet(this, _$button).focus();
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onListboxKeyUp, {
+      writable: true,
+      value: e => {
+        switch (e.code) {
+          case 'Space':
+          case 'Enter':
+            {
+              e.preventDefault();
+              dispatchChangeEvent(this, findSelectedOption(getEnabledOptionElements(_classPrivateFieldGet(this, _$selectSlot))));
+              this.onCollapse();
+
+              _classPrivateFieldGet(this, _$button).focus();
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onListboxKeyDown, {
+      writable: true,
+      value: e => {
+        switch (e.code) {
+          case 'ArrowUp':
+          case 'ArrowLeft':
+            {
+              e.preventDefault();
+              selectOption(_classPrivateFieldGet(this, _$selectSlot), getPrevOption(_classPrivateFieldGet(this, _$selectSlot)));
+              break;
+            }
+
+          case 'ArrowDown':
+          case 'ArrowRight':
+            {
+              e.preventDefault();
+              selectOption(_classPrivateFieldGet(this, _$selectSlot), getNextOption(_classPrivateFieldGet(this, _$selectSlot)));
+              break;
+            }
+
+          case 'Escape':
+            {
+              e.preventDefault();
+              this.onCollapse();
+
+              _classPrivateFieldGet(this, _$button).focus();
+
+              break;
+            }
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onSlotChange, {
+      writable: true,
+      value: () => {
+        this.onCollapse();
+        this.onValueChange(this.value);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onListboxBlur, {
+      writable: true,
+      value: e => {
+        e.stopPropagation();
+        this.onCollapse();
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
+
+    _classPrivateFieldSet(this, _$buttonContent, shadowRoot.querySelector('#content'));
+
+    _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
+
+    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
+
+    _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
+
+    _classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
+
+    _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
+
+    _classPrivateFieldSet(this, _$selectSlot, shadowRoot.querySelector('slot[name="select"]'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'listbox');
+
+    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+
+    _classPrivateFieldGet(this, _$listbox).addEventListener('blur', _classPrivateFieldGet(this, _onListboxBlur));
+
+    _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
+
+    _classPrivateFieldGet(this, _$listbox).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+
+    _classPrivateFieldGet(this, _$listbox).addEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyUp));
+
+    _classPrivateFieldGet(this, _$selectSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('blur', _classPrivateFieldGet(this, _onListboxBlur));
+
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
+
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
+
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyUp));
+
+    _classPrivateFieldGet(this, _$selectSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
+  }
+
+  static get observedAttributes() {
+    return ['value', 'label', 'optionaltext', 'additionaltext', 'invalidtext', 'disabled', 'maxvisibleitems'];
+  }
+
+  get nodeName() {
+    return 'select';
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set placeholder(value) {
+    updateAttribute(this, 'placeholder', value);
+  }
+
+  get placeholder() {
+    return getAttribute(this, 'placeholder', null);
+  }
+
+  set label(value) {
+    updateAttribute(this, 'label', value);
+  }
+
+  get label() {
+    return getAttribute(this, 'label', '');
+  }
+
+  set optionalText(value) {
+    updateAttribute(this, 'optionaltext', value);
+  }
+
+  get optionalText() {
+    return getAttribute(this, 'optionaltext', null);
+  }
+
+  set additionalText(value) {
+    updateAttribute(this, 'additionaltext', value);
+  }
+
+  get additionalText() {
+    return getAttribute(this, 'additionaltext', null);
+  }
+
+  set invalidText(value) {
+    updateAttribute(this, 'invalidtext', value);
+  }
+
+  get invalidText() {
+    return getAttribute(this, 'placeholder', null);
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set maxVisibleItems(value) {
+    updateIntegerAttribute(this, 'maxvisibleitems', value);
+  }
+
+  get maxVisibleItems() {
+    return getIntegerAttribute(this, 'maxvisibleitems', null);
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'value':
+        {
+          this.onValueChange(newVal ?? '');
+          break;
+        }
+
+      case 'placeholder':
+        {
+          this.onValueChange(this.value);
+          break;
+        }
+
+      case 'label':
+        {
+          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          updateAttribute(this, 'aria-label', newVal ?? '');
+          break;
+        }
+
+      case 'optionaltext':
+        {
+          _classPrivateFieldGet(this, _$optionalText).textContent = newVal;
+          break;
+        }
+
+      case 'additionaltext':
+        {
+          _classPrivateFieldGet(this, _$additionalText).textContent = newVal;
+          break;
+        }
+
+      case 'invalidtext':
+        {
+          _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
+          break;
+        }
+
+      case 'disabled':
+        {
+          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
+
+          if (_classPrivateFieldGet(this, _$button).disabled) {
+            this.onCollapse();
+          }
+
+          break;
+        }
+
+      case 'maxvisibleitems':
+        {
+          const $list = _classPrivateFieldGet(this, _$listbox).firstElementChild;
+
+          $list.style.maxHeight = attrValueToPixels(newVal, {
+            min: 2,
+            multiplier: ITEM_HEIGHT
+          });
+          break;
+        }
+    }
+  }
+
+  onExpand() {
+    _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'true');
+
+    _classPrivateFieldGet(this, _$listbox).focus();
+
+    selectOption(_classPrivateFieldGet(this, _$selectSlot), getOptionWithValue(_classPrivateFieldGet(this, _$selectSlot), this.value) ?? getFirstOption(_classPrivateFieldGet(this, _$selectSlot)));
+  }
+
+  onCollapse() {
+    _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'false');
+  }
+
+  onValueChange(value) {
+    let $checkedOption = null;
+
+    for (const $option of _classPrivateFieldGet(this, _$selectSlot).assignedElements()) {
+      if (isSelectOptionElement($option)) {
+        const isChecked = $checkedOption === null && $option.disabled !== true && $option.value === value;
+        $option.checked = isChecked;
+
+        if (isChecked) {
+          $checkedOption = $option;
+
+          _classPrivateFieldGet(this, _$listbox).setAttribute('aria-activedescendant', $option.id);
+        }
+      }
+    }
+
+    this.updateButtonContent($checkedOption);
+  }
+
+  updateButtonContent($option) {
+    if (_classPrivateFieldGet(this, _$button).firstElementChild !== _classPrivateFieldGet(this, _$buttonContent)) {
+      _classPrivateFieldGet(this, _$button).removeChild(_classPrivateFieldGet(this, _$button).firstElementChild);
+    }
+
+    if ($option === null) {
+      _classPrivateFieldGet(this, _$button).setAttribute('data-unselected', '');
+
+      _classPrivateFieldGet(this, _$buttonContent).textContent = this.placeholder ?? '';
+    } else {
+      _classPrivateFieldGet(this, _$button).removeAttribute('data-unselected');
+
+      _classPrivateFieldGet(this, _$buttonContent).textContent = $option.text;
+      const $icon = $option.icon?.cloneNode(true);
+
+      if ($icon != null) {
+        _classPrivateFieldGet(this, _$button).prepend($icon);
+      }
+    }
+  }
+
+  focus() {
+    _classPrivateFieldGet(this, _$button).focus();
+  }
+
+  blur() {
+    _classPrivateFieldGet(this, _$button).blur();
+
+    _classPrivateFieldGet(this, _$listbox).blur();
+  }
+
+}));

package/select-option/index.d.ts

@@ -0,0 +1,27 @@
+import type { TSinchElementReact } from '../types';
+export declare const isSelectOptionElement: (element: EventTarget | Element | null) => element is TSinchSelectOptionElement;
+export declare type TSinchSelectOptionElement = HTMLElement & {
+    value: string;
+    text: string;
+    checked: boolean;
+    selected: boolean;
+    disabled: boolean;
+    readonly icon: Element | null;
+};
+export declare type TSinchSelectOptionReact = TSinchElementReact<TSinchSelectOptionElement> & {
+    value: string;
+    text: string;
+    checked?: boolean;
+    selected?: boolean;
+    disabled?: boolean;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-select-option': TSinchSelectOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-select-option': TSinchSelectOptionElement;
+    }
+}

package/select-option/index.js

@@ -0,0 +1,107 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$iconSlot, _$content;
+
+function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
+
+function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
+
+import { defineCustomElement, getAttribute, getBooleanAttribute, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}*{pointer-events:none}#wrapper{display:flex;position:relative;box-sizing:border-box;padding:6px 12px;width:100%;align-items:center}#content{flex-shrink:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}::slotted(*){margin-right:12px}:host(:hover)>#wrapper,:host([selected])>#wrapper{background-color:var(--sinch-color-snow-500)}:host([checked])>#wrapper{padding-right:36px}:host([checked])>#wrapper::after{content:"";position:absolute;top:10px;right:11px;width:18px;height:14px;background-image:url("data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cpath d=\'M6 11.17 1.83 7 .41 8.41 6 14 18 2 16.59.59 6 11.17Z\' fill=\'%230A273D\'/%3E%3C/svg%3E");background-size:cover;background-repeat:no-repeat}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span></div>';
+export const isSelectOptionElement = element => {
+  return element instanceof Element && element.tagName === 'SINCH-SELECT-OPTION';
+};
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-select-option', (_$iconSlot = new WeakMap(), _$content = new WeakMap(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateFieldInitSpec(this, _$iconSlot, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$content, {
+      writable: true,
+      value: void 0
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$iconSlot, shadowRoot.querySelector('slot'));
+
+    _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('span'));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'option');
+  }
+
+  static get observedAttributes() {
+    return ['text'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'text':
+        {
+          _classPrivateFieldGet(this, _$content).textContent = newVal;
+          break;
+        }
+    }
+  }
+
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+
+  set text(value) {
+    updateAttribute(this, 'text', value);
+  }
+
+  get text() {
+    return getAttribute(this, 'text', '');
+  }
+
+  set disabled(isDisabled) {
+    updateBooleanAttribute(this, 'disabled', isDisabled);
+  }
+
+  get disabled() {
+    return getBooleanAttribute(this, 'disabled');
+  }
+
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+
+  set selected(isSelected) {
+    updateBooleanAttribute(this, 'selected', isSelected);
+  }
+
+  get selected() {
+    return getBooleanAttribute(this, 'selected');
+  }
+
+  get icon() {
+    return _classPrivateFieldGet(this, _$iconSlot).assignedElements()[0] ?? null;
+  }
+
+}));

package/spinner/index.d.ts

@@ -0,0 +1,21 @@
+import type { TSinchElementReact } from '../types';
+declare const spinnerTypes: readonly ["large", "medium", "small"];
+export declare type TSinchSpinnerType = typeof spinnerTypes[number];
+export declare type TSinchSpinnerElement = HTMLElement & {
+    type: TSinchSpinnerType;
+};
+export declare type TSinchSpinnerReact = TSinchElementReact<TSinchSpinnerElement> & {
+    type?: TSinchSpinnerType;
+    static?: boolean;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-spinner': TSinchSpinnerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-spinner': TSinchSpinnerElement;
+    }
+}
+export {};

package/spinner/index.js

@@ -0,0 +1,23 @@
+import { defineCustomElement, getLiteralAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}@keyframes spinner{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}div{animation:1.5s linear infinite spinner;animation-play-state:running;border:solid 3px var(--sinch-color-spinner-bg,#d4dadd);border-bottom-color:var(--sinch-color-spinner-fg,#0a273d);border-radius:50%;height:20px;width:20px;box-sizing:border-box;will-change:transform}:host([type=large]) div{height:46px;width:46px;border-width:4px}:host([type=small]) div{height:14px;width:14px;border-width:2px}:host([static]:not([static=false])) div{animation-play-state:paused}</style><div></div>';
+const spinnerTypes = ['large', 'medium', 'small'];
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-spinner', class extends HTMLElement {
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow({
+      mode: 'production' === 'development' ? 'open' : 'closed'
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+
+  set type(value) {
+    updateLiteralAttribute(this, spinnerTypes, 'type', value);
+  }
+
+  get type() {
+    return getLiteralAttribute(this, spinnerTypes, 'type', 'medium');
+  }
+
+});

package/table/index.d.ts

@@ -0,0 +1,13 @@
+import type { TSinchElementReact } from '../types';
+export declare type TSinchTableElement = HTMLElement;
+export declare type TSinchTableReact = TSinchElementReact<TSinchTableElement>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-table': TSinchTableReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-table': TSinchTableElement;
+    }
+}