@nectary/components 0.37.0 → 0.39.0

package/search/index.js

@@ -1,523 +0,0 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$label, _$input, _selectionStart, _selectionEnd, _$optionSlot, _$listbox, _$clear, _isPendingDk, _sh, _onCompositionStart, _onInput, _onValueChange, _onClearMouseDown, _onClear, _onInputFocus, _onInputBlur, _onListboxClick, _onListboxKeyUp, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _findSelectedOption;
-
-function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
-
-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"); } }
-
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getRect, NectaryElement, 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;--sinch-size-icon:24px}#label{display:none;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;height:24px;margin-bottom:2px}#input{all:initial;display:block;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;padding:0 44px;padding-right:12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#input:focus{border-color:var(--sinch-color-stormy-600)}#icon-search{position:absolute;left:12px;top:12px;pointer-events:none;--sinch-color-icon:var(--sinch-color-stormy-500)}#clear{position:absolute;right:8px;top:8px;display:none;--sinch-color-icon:red}#clear:focus{--sinch-color-icon:var(--sinch-color-stormy-500)}:host([value]:not([value=""])) #clear{display:flex}:host([value]:not([value=""])) #input{padding-right:44px}#listbox{display:none;position:absolute;z-index:1;left:0;top:calc(100% + 8px);width:100%;box-sizing:border-box;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);overflow-y:auto}:host([aria-expanded=true]) #listbox{display:block}:host([label]:not([label=""])) #label{display:block}</style><label id="label" for="input"></label><div id="wrapper"><input id="input" type="text"/><sinch-icon-search id="icon-search"></sinch-icon-search><sinch-icon-button id="clear" small><sinch-icon-close id="icon-close" slot="icon"></sinch-icon-close></sinch-icon-button><div id="listbox"><slot name="option"></slot></div></div>';
-import '../icons/search';
-import '../icons/close';
-import '../icon-button';
-const ITEM_HEIGHT = 40;
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-search', (_$label = new WeakMap(), _$input = new WeakMap(), _selectionStart = new WeakMap(), _selectionEnd = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$clear = new WeakMap(), _isPendingDk = new WeakMap(), _sh = new WeakMap(), _onCompositionStart = new WeakMap(), _onInput = new WeakMap(), _onValueChange = new WeakSet(), _onClearMouseDown = new WeakMap(), _onClear = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyUp = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _findSelectedOption = new WeakSet(), class extends NectaryElement {
-  constructor() {
-    super();
-
-    _classPrivateMethodInitSpec(this, _findSelectedOption);
-
-    _classPrivateMethodInitSpec(this, _selectOption);
-
-    _classPrivateMethodInitSpec(this, _getPrevOption);
-
-    _classPrivateMethodInitSpec(this, _getNextOption);
-
-    _classPrivateMethodInitSpec(this, _getLastOption);
-
-    _classPrivateMethodInitSpec(this, _getFirstOption);
-
-    _classPrivateMethodInitSpec(this, _onCollapse);
-
-    _classPrivateMethodInitSpec(this, _onExpand);
-
-    _classPrivateMethodInitSpec(this, _onValueChange);
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$input, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _selectionStart, {
-      writable: true,
-      value: null
-    });
-
-    _classPrivateFieldInitSpec(this, _selectionEnd, {
-      writable: true,
-      value: null
-    });
-
-    _classPrivateFieldInitSpec(this, _$optionSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$listbox, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$clear, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _isPendingDk, {
-      writable: true,
-      value: false
-    });
-
-    _classPrivateFieldInitSpec(this, _sh, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onCompositionStart, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldSet(this, _isPendingDk, true);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInput, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, _classPrivateFieldGet(this, _$input).value, true);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onClearMouseDown, {
-      writable: true,
-      value: e => {
-        e.preventDefault();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onClear, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, '');
-
-        _classPrivateFieldGet(this, _$input).focus();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInputFocus, {
-      writable: true,
-      value: () => {
-        _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInputBlur, {
-      writable: true,
-      value: () => {
-        _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onListboxClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        const $elem = e.target;
-
-        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, $elem.text);
-
-        _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onListboxKeyUp, {
-      writable: true,
-      value: e => {
-        switch (e.code) {
-          case 'Enter':
-            {
-              e.preventDefault();
-
-              const $opt = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this);
-
-              if ($opt != null) {
-                _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, $opt.text);
-              }
-
-              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-
-              break;
-            }
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onListboxKeyDown, {
-      writable: true,
-      value: e => {
-        switch (e.code) {
-          case 'ArrowUp':
-            {
-              e.preventDefault();
-              e.stopPropagation();
-
-              _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this));
-
-              break;
-            }
-
-          case 'ArrowDown':
-            {
-              e.preventDefault();
-              e.stopPropagation();
-
-              _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this));
-
-              break;
-            }
-
-          case 'Escape':
-            {
-              e.preventDefault();
-
-              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-
-              break;
-            }
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onOptionSlotChange, {
-      writable: true,
-      value: () => {
-        const $opts = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
-
-        if ($opts.length === 0) {
-          return _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-        }
-
-        _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-      }
-    });
-
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _sh, shadowRoot);
-
-    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
-
-    _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
-
-    _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
-
-    _classPrivateFieldSet(this, _$clear, shadowRoot.querySelector('#clear'));
-  }
-
-  connectedCallback() {
-    this.setAttribute('role', 'listbox');
-    this.setAttribute('autocomplete', 'off');
-    this.setAttribute('aria-expanded', 'false');
-
-    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('keyup', _classPrivateFieldGet(this, _onListboxKeyUp));
-
-    _classPrivateFieldGet(this, _$listbox).addEventListener('mousedown', _classPrivateFieldGet(this, _onListboxClick));
-
-    _classPrivateFieldGet(this, _$optionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
-
-    _classPrivateFieldGet(this, _$clear).addEventListener('mousedown', _classPrivateFieldGet(this, _onClearMouseDown));
-
-    _classPrivateFieldGet(this, _$clear).addEventListener('click', _classPrivateFieldGet(this, _onClear));
-  }
-
-  disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('keyup', _classPrivateFieldGet(this, _onListboxKeyUp));
-
-    _classPrivateFieldGet(this, _$listbox).removeEventListener('mousedown', _classPrivateFieldGet(this, _onListboxClick));
-
-    _classPrivateFieldGet(this, _$optionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
-
-    _classPrivateFieldGet(this, _$clear).removeEventListener('mousedown', _classPrivateFieldGet(this, _onClearMouseDown));
-
-    _classPrivateFieldGet(this, _$clear).removeEventListener('click', _classPrivateFieldGet(this, _onClear));
-  }
-
-  static get observedAttributes() {
-    return ['label', 'value', 'placeholder', 'maxvisibleitems', 'clear-aria-label'];
-  }
-
-  get type() {
-    return 'text';
-  }
-
-  get nodeName() {
-    return 'input';
-  }
-
-  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', null);
-  }
-
-  set maxVisibleItems(value) {
-    updateIntegerAttribute(this, 'maxvisibleitems', value);
-  }
-
-  get maxVisibleItems() {
-    return getIntegerAttribute(this, 'maxvisibleitems', null);
-  }
-
-  get dropdownRect() {
-    return getRect(_classPrivateFieldGet(this, _$listbox));
-  }
-
-  get selectionStart() {
-    return _classPrivateFieldGet(this, _$input).selectionStart;
-  }
-
-  set selectionStart(value) {
-    _classPrivateFieldGet(this, _$input).selectionStart = value;
-  }
-
-  get selectionEnd() {
-    return _classPrivateFieldGet(this, _$input).selectionEnd;
-  }
-
-  set selectionEnd(value) {
-    _classPrivateFieldGet(this, _$input).selectionEnd = value;
-  }
-
-  get selectionDirection() {
-    return _classPrivateFieldGet(this, _$input).selectionDirection;
-  }
-
-  set selectionDirection(value) {
-    _classPrivateFieldGet(this, _$input).selectionDirection = value;
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'value':
-        {
-          const nextVal = newVal ?? '';
-
-          if (nextVal !== _classPrivateFieldGet(this, _$input).value) {
-            _classPrivateFieldGet(this, _$input).value = nextVal;
-            const isNextCursorEnd = _classPrivateFieldGet(this, _selectionStart) === null || _classPrivateFieldGet(this, _selectionStart) === nextVal.length;
-
-            if (!isNextCursorEnd) {
-              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _selectionStart), _classPrivateFieldGet(this, _selectionEnd));
-            }
-          }
-
-          break;
-        }
-
-      case 'label':
-        {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
-          break;
-        }
-
-      case 'placeholder':
-        {
-          _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
-          updateAttribute(this, 'aria-placeholder', newVal);
-          break;
-        }
-
-      case 'maxvisibleitems':
-        {
-          _classPrivateFieldGet(this, _$listbox).style.maxHeight = attrValueToPixels(newVal, {
-            min: 2,
-            multiplier: ITEM_HEIGHT
-          });
-          break;
-        }
-
-      case 'clear-aria-label':
-        {
-          updateAttribute(_classPrivateFieldGet(this, _$clear), 'aria-label', newVal);
-        }
-    }
-  }
-
-  focus() {
-    _classPrivateFieldGet(this, _$input).focus();
-  }
-
-  blur() {
-    _classPrivateFieldGet(this, _$input).blur();
-  }
-
-}));
-
-function _onValueChange2(nextValue) {
-  let preserveCursorPosition = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-  const prevValue = this.value;
-
-  if (prevValue !== nextValue) {
-    const nextSelectionStart = preserveCursorPosition ? _classPrivateFieldGet(this, _$input).selectionStart : nextValue.length;
-    const nextSelectionEnd = preserveCursorPosition ? _classPrivateFieldGet(this, _$input).selectionEnd : nextValue.length;
-
-    const prevSelectionStart = _classPrivateFieldGet(this, _selectionStart);
-
-    const prevSelectionEnd = _classPrivateFieldGet(this, _selectionEnd);
-
-    const isPrevCursorEnd = prevSelectionStart === prevSelectionEnd && prevSelectionStart === prevValue.length;
-
-    if (!_classPrivateFieldGet(this, _isPendingDk)) {
-      _classPrivateFieldGet(this, _$input).value = prevValue;
-    }
-
-    _classPrivateFieldSet(this, _isPendingDk, false);
-
-    if (!isPrevCursorEnd) {
-      _classPrivateFieldGet(this, _$input).setSelectionRange(prevSelectionStart, prevSelectionEnd);
-    }
-
-    _classPrivateFieldSet(this, _selectionStart, nextSelectionStart);
-
-    _classPrivateFieldSet(this, _selectionEnd, nextSelectionEnd);
-
-    this.dispatchEvent(new CustomEvent('change', {
-      detail: nextValue,
-      bubbles: true
-    }));
-  }
-}
-
-function _onExpand2() {
-  const isOpen = getBooleanAttribute(this, 'aria-expanded');
-
-  const $opts = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
-
-  if (!isOpen && $opts.length > 0 && _classPrivateFieldGet(this, _sh).activeElement === _classPrivateFieldGet(this, _$input)) {
-    const opt = _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
-
-    _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, opt);
-
-    this.setAttribute('aria-expanded', 'true');
-  }
-}
-
-function _onCollapse2() {
-  this.setAttribute('aria-expanded', 'false');
-}
-
-function _getFirstOption2() {
-  return _classPrivateFieldGet(this, _$optionSlot).assignedElements()[0] ?? null;
-}
-
-function _getLastOption2() {
-  return _classPrivateFieldGet(this, _$optionSlot).assignedElements().reverse()[0] ?? null;
-}
-
-function _getNextOption2() {
-  const $options = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
-
-  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this);
-
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-
-  if (currentIndex < 0) {
-    return _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this);
-  }
-
-  return $options[(currentIndex + 1) % $options.length];
-}
-
-function _getPrevOption2() {
-  const $options = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
-
-  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this);
-
-  const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-
-  if (currentIndex < 0) {
-    return _classPrivateMethodGet(this, _getLastOption, _getLastOption2).call(this);
-  }
-
-  return $options[(currentIndex - 1 + $options.length) % $options.length];
-}
-
-function _selectOption2($option) {
-  for (const $op of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
-    const isSelected = $op === $option;
-    updateBooleanAttribute($op, 'data-selected', isSelected);
-
-    if (isSelected) {
-      $op.scrollIntoView?.({
-        block: 'nearest'
-      });
-    }
-  }
-}
-
-function _findSelectedOption2() {
-  for (const $option of _classPrivateFieldGet(this, _$optionSlot).assignedElements()) {
-    if (getBooleanAttribute($option, 'data-selected')) {
-      return $option;
-    }
-  }
-
-  return null;
-}

package/search/types.d.ts

@@ -1,25 +0,0 @@
-import type { TRect, TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
-export declare type TSinchSearchElement = HTMLElement & {
-    value: string;
-    label: string | null;
-    placeholder: string | null;
-    maxVisibleItems: number | null;
-    selectionStart: HTMLInputElement['selectionStart'];
-    selectionEnd: HTMLInputElement['selectionEnd'];
-    selectionDirection: HTMLInputElement['selectionDirection'];
-    readonly dropdownRect: TRect;
-    setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'label', value: string): void;
-    setAttribute(name: 'placeholder', value: string): void;
-    setAttribute(name: 'maxvisibleitems', value: string): void;
-};
-export declare type TSinchSearchReact = TSinchElementReact<TSinchSearchElement> & {
-    value: string;
-    label?: string;
-    placeholder?: string;
-    maxVisibleItems?: number;
-    'aria-label': string;
-    'clear-aria-label': string;
-    onChange: (e: SyntheticEvent<TSinchSearchElement, CustomEvent<string>>) => void;
-};

package/search-option/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchSearchOptionElement, TSinchSearchOptionReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-search-option': TSinchSearchOptionReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-search-option': TSinchSearchOptionElement;
-    }
-}

package/search-option/index.js

@@ -1,55 +0,0 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$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, NectaryElement, updateAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:block;box-sizing:border-box;line-height:40px;padding:0 12px;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}</style><div id="wrapper"></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-search-option', (_$content = new WeakMap(), class extends NectaryElement {
-  constructor() {
-    super();
-
-    _classPrivateFieldInitSpec(this, _$content, {
-      writable: true,
-      value: void 0
-    });
-
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('#wrapper'));
-  }
-
-  connectedCallback() {
-    this.setAttribute('role', 'option');
-  }
-
-  static get observedAttributes() {
-    return ['text'];
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          _classPrivateFieldGet(this, _$content).textContent = newVal;
-          break;
-        }
-    }
-  }
-
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-
-}));

package/search-option/types.d.ts

@@ -1,9 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchSearchOptionElement = HTMLElement & {
-    text: string;
-    setAttribute(name: 'text', value: string): void;
-};
-export declare type TSinchSearchOptionReact = TSinchElementReact<TSinchSearchOptionElement> & {
-    text: string;
-    'aria-label': string;
-};