@nectary/components 0.39.0 → 0.40.0

package/vertical-stepper/index.js

@@ -1,68 +1,27 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$itemsSlot, _updateItems;
-
-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 '../icons/check';
 import '../icons/error-outline';
 import { clampNumber, defineCustomElement, getAttribute, getIntegerAttribute, NectaryElement, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;width:100%}#progress{position:absolute;height:1px;background-color:var(--sinch-color-snow-700);left:72px;right:72px;top:16px;transform:translateY(-50%)}#bar{position:absolute;height:1px;background-color:var(--sinch-color-stormy-400);left:0;top:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-vertical-stepper', (_$itemsSlot = new WeakMap(), _updateItems = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-vertical-stepper', class extends NectaryElement {
+  #$itemsSlot;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$itemsSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _updateItems, {
-      writable: true,
-      value: () => {
-        const $items = _classPrivateFieldGet(this, _$itemsSlot).assignedElements();
-
-        const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
-
-        for (let i = 0; i < $items.length; i++) {
-          const $el = $items[i];
-          const itemIndex = i + 1;
-          $el.setAttribute('data-index', String(itemIndex));
-
-          if (itemIndex === activeIndex) {
-            $el.setAttribute('data-progress', 'active');
-          } else if (itemIndex < activeIndex) {
-            $el.setAttribute('data-progress', 'done');
-          } else {
-            $el.removeAttribute('data-progress');
-          }
-        }
-
-        this.setAttribute('aria-valuemax', String($items.length));
-        this.setAttribute('aria-valuenow', String(clampNumber(activeIndex, 0, $items.length)));
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$itemsSlot, shadowRoot.querySelector('slot'));
+    this.#$itemsSlot = shadowRoot.querySelector('slot');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'progressbar');
     this.setAttribute('aria-valuemin', '0');
-
-    _classPrivateFieldGet(this, _$itemsSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+    this.#$itemsSlot.addEventListener('slotchange', this.#updateItems);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$itemsSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+    this.#$itemsSlot.removeEventListener('slotchange', this.#updateItems);
   }
 
   static get observedAttributes() {
@@ -77,8 +36,7 @@ defineCustomElement('sinch-vertical-stepper', (_$itemsSlot = new WeakMap(), _upd
     switch (name) {
       case 'index':
         {
-          _classPrivateFieldGet(this, _updateItems).call(this);
-
+          this.#updateItems();
           break;
         }
     }
@@ -92,4 +50,25 @@ defineCustomElement('sinch-vertical-stepper', (_$itemsSlot = new WeakMap(), _upd
     return getAttribute(this, 'index', '1');
   }
 
-}));
+  #updateItems = () => {
+    const $items = this.#$itemsSlot.assignedElements();
+    const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
+
+    for (let i = 0; i < $items.length; i++) {
+      const $el = $items[i];
+      const itemIndex = i + 1;
+      $el.setAttribute('data-index', String(itemIndex));
+
+      if (itemIndex === activeIndex) {
+        $el.setAttribute('data-progress', 'active');
+      } else if (itemIndex < activeIndex) {
+        $el.setAttribute('data-progress', 'done');
+      } else {
+        $el.removeAttribute('data-progress');
+      }
+    }
+
+    this.setAttribute('aria-valuemax', String($items.length));
+    this.setAttribute('aria-valuenow', String(clampNumber(activeIndex, 0, $items.length)));
+  };
+});

package/vertical-stepper-item/index.js

@@ -1,46 +1,22 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$label, _$description, _$circleText;
-
-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 '../icons/check';
 import '../icons/exclamation';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;min-height:68px}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-icon-size:20px}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}#content{display:none;padding:16px 0 16px 40px}#progress{position:absolute;width:1px;left:16px;top:32px;bottom:0;background-color:var(--sinch-color-snow-700);transform:translateX(-50%)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-color-stormy-400);left:0;top:0}:host(:last-of-type) #progress{display:none}:host([data-progress=active]) #content{display:block}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-error-200);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}:host([data-progress=done]) #bar{height:100%}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><div id="label-wrapper"><div id="label"></div><div id="description"></div></div></div><div id="content"><slot></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;min-height:68px}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-size-icon:20px}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}#content{display:none;padding:16px 0 16px 40px}#progress{position:absolute;width:1px;left:16px;top:32px;bottom:0;background-color:var(--sinch-color-snow-700);transform:translateX(-50%)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-color-stormy-400);left:0;top:0}:host(:last-of-type) #progress{display:none}:host([data-progress=active]) #content{display:block}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-error-200);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}:host([data-progress=done]) #bar{height:100%}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><div id="label-wrapper"><div id="label"></div><div id="description"></div></div></div><div id="content"><slot></slot></div></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-vertical-stepper-item', (_$label = new WeakMap(), _$description = new WeakMap(), _$circleText = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement {
+  #$label;
+  #$description;
+  #$circleText;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$description, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$circleText, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
-
-    _classPrivateFieldSet(this, _$description, shadowRoot.querySelector('#description'));
-
-    _classPrivateFieldSet(this, _$circleText, shadowRoot.querySelector('#circle-text'));
+    this.#$label = shadowRoot.querySelector('#label');
+    this.#$description = shadowRoot.querySelector('#description');
+    this.#$circleText = shadowRoot.querySelector('#circle-text');
   }
 
   connectedCallback() {}
@@ -55,19 +31,19 @@ defineCustomElement('sinch-vertical-stepper-item', (_$label = new WeakMap(), _$d
     switch (name) {
       case 'label':
         {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          this.#$label.textContent = newVal;
           break;
         }
 
       case 'description':
         {
-          _classPrivateFieldGet(this, _$description).textContent = newVal;
+          this.#$description.textContent = newVal;
           break;
         }
 
       case 'data-index':
         {
-          _classPrivateFieldGet(this, _$circleText).textContent = newVal;
+          this.#$circleText.textContent = newVal;
           break;
         }
     }
@@ -97,4 +73,4 @@ defineCustomElement('sinch-vertical-stepper-item', (_$label = new WeakMap(), _$d
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
 
-}));
+});

package/dropdown/index.d.ts

@@ -1,12 +0,0 @@
-import '../popover';
-import type { TSinchDropdownElement, TSinchDropdownReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-dropdown': TSinchDropdownReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-dropdown': TSinchDropdownElement;
-    }
-}

package/dropdown/index.js

@@ -1,415 +0,0 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$optionSlot, _$listbox, _$popover, _onListboxClick, _onListboxKeyDown, _onOptionSlotChange, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _findSelectedOption, _getEnabledOptionElements, _dispatchChangeEvent, _onClose, _onCloseReactHandler, _onChangeReactHandler;
-
-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 { orientationValues } from '../popover/utils';
-import '../popover';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{width:100%;--sinch-popover-shape-radius:var(--sinch-shape-radius-s)}#listbox{overflow-y:auto}</style><sinch-popover id="wrapper" modal><slot name="target" slot="target"></slot><div id="listbox" slot="content"><slot name="option"></slot></div></sinch-popover>';
-const ITEM_HEIGHT = 40;
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-dropdown', (_$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _$popover = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _findSelectedOption = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _onClose = new WeakMap(), _onCloseReactHandler = new WeakMap(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
-  constructor() {
-    super();
-
-    _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
-
-    _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
-
-    _classPrivateMethodInitSpec(this, _findSelectedOption);
-
-    _classPrivateMethodInitSpec(this, _getOptionElements);
-
-    _classPrivateMethodInitSpec(this, _getOptionWithValue);
-
-    _classPrivateMethodInitSpec(this, _selectOption);
-
-    _classPrivateMethodInitSpec(this, _getPrevOption);
-
-    _classPrivateMethodInitSpec(this, _getNextOption);
-
-    _classPrivateMethodInitSpec(this, _getLastOption);
-
-    _classPrivateMethodInitSpec(this, _getFirstOption);
-
-    _classPrivateMethodInitSpec(this, _onValueChange);
-
-    _classPrivateFieldInitSpec(this, _$optionSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$listbox, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$popover, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onListboxClick, {
-      writable: true,
-      value: e => {
-        const $elem = e.target;
-
-        if (getBooleanAttribute($elem, 'disabled')) {
-          return;
-        }
-
-        e.stopPropagation();
-
-        _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $elem);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onListboxKeyDown, {
-      writable: true,
-      value: e => {
-        switch (e.code) {
-          case 'Space':
-          case 'Enter':
-            {
-              const $option = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this));
-
-              if ($option !== null) {
-                e.preventDefault();
-
-                _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $option);
-              }
-
-              break;
-            }
-
-          case 'ArrowUp':
-          case 'ArrowLeft':
-            {
-              e.preventDefault();
-
-              _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getPrevOption, _getPrevOption2).call(this));
-
-              break;
-            }
-
-          case 'ArrowDown':
-          case 'ArrowRight':
-            {
-              e.preventDefault();
-
-              _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this));
-
-              break;
-            }
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onOptionSlotChange, {
-      writable: true,
-      value: () => {
-        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onClose, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-close'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'onClose')?.();
-        getReactEventHandler(this, 'on-close')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
-
-    _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
-
-    _classPrivateFieldSet(this, _$popover, shadowRoot.querySelector('sinch-popover'));
-  }
-
-  connectedCallback() {
-    this.setAttribute('role', 'listbox');
-
-    _classPrivateFieldGet(this, _$optionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
-
-    this.addEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-  }
-
-  disconnectedCallback() {
-    _classPrivateFieldGet(this, _$optionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
-
-    this.removeEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-  }
-
-  static get observedAttributes() {
-    return ['open', 'value', 'orientation', 'maxvisibleitems', 'multiple'];
-  }
-
-  get nodeName() {
-    return 'select';
-  }
-
-  set value(value) {
-    updateAttribute(this, 'value', value);
-  }
-
-  get value() {
-    return getAttribute(this, 'value', '');
-  }
-
-  set maxVisibleItems(value) {
-    updateIntegerAttribute(this, 'maxvisibleitems', value);
-  }
-
-  get maxVisibleItems() {
-    return getIntegerAttribute(this, 'maxvisibleitems', null);
-  }
-
-  get orientation() {
-    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-right');
-  }
-
-  set orientation(value) {
-    updateLiteralAttribute(this, orientationValues, 'orientation', value);
-  }
-
-  set open(isOpen) {
-    updateBooleanAttribute(this, 'open', isOpen);
-  }
-
-  get open() {
-    return getBooleanAttribute(this, 'open');
-  }
-
-  set multiple(isMultiple) {
-    updateBooleanAttribute(this, 'multiple', isMultiple);
-  }
-
-  get multiple() {
-    return getBooleanAttribute(this, 'multiple');
-  }
-
-  get dropdownRect() {
-    return _classPrivateFieldGet(this, _$popover).popoverRect;
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
-
-    switch (name) {
-      case 'open':
-        {
-          updateAttribute(_classPrivateFieldGet(this, _$popover), 'open', newVal);
-
-          if (isAttrTrue(newVal)) {
-            _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, getFirstCsvValue(this.value)) ?? _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
-
-            _classPrivateFieldGet(this, _$popover).addEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
-
-            _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
-
-            _classPrivateFieldGet(this, _$popover).addEventListener('-close', _classPrivateFieldGet(this, _onClose));
-          } else {
-            _classPrivateFieldGet(this, _$popover).removeEventListener('keydown', _classPrivateFieldGet(this, _onListboxKeyDown));
-
-            _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
-
-            _classPrivateFieldGet(this, _$popover).removeEventListener('-close', _classPrivateFieldGet(this, _onClose));
-          }
-
-          break;
-        }
-
-      case 'multiple':
-        {
-          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
-
-          break;
-        }
-
-      case 'orientation':
-        {
-          updateAttribute(_classPrivateFieldGet(this, _$popover), 'orientation', newVal);
-          break;
-        }
-
-      case 'value':
-        {
-          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
-
-          break;
-        }
-
-      case 'maxvisibleitems':
-        {
-          const $list = _classPrivateFieldGet(this, _$listbox);
-
-          if (newVal === '0') {
-            $list.style.maxHeight = 'unset';
-          } else {
-            $list.style.maxHeight = attrValueToPixels(newVal, {
-              min: 2,
-              multiplier: ITEM_HEIGHT
-            });
-          }
-
-          break;
-        }
-    }
-  }
-
-}));
-
-function _onValueChange2(csv) {
-  if (this.multiple) {
-    const values = getCsvSet(csv);
-
-    for (const $option of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
-      const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
-      updateBooleanAttribute($option, 'data-checked', isChecked);
-    }
-  } else {
-    const value = getFirstCsvValue(csv);
-
-    for (const $option of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
-      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-      updateBooleanAttribute($option, 'data-checked', isChecked);
-    }
-  }
-}
-
-function _getFirstOption2() {
-  return _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this)[0] ?? null;
-}
-
-function _getLastOption2() {
-  return _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this).reverse()[0] ?? null;
-}
-
-function _getNextOption2() {
-  const $options = _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this);
-
-  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
-
-  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 = _classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this);
-
-  const $selectedOption = _classPrivateMethodGet(this, _findSelectedOption, _findSelectedOption2).call(this, $options);
-
-  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) {
-  const hasMaxVisibleItems = this.hasAttribute('maxvisibleitems');
-
-  for (const $op of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
-    const isSelected = $op === $option;
-    updateBooleanAttribute($op, 'data-selected', isSelected);
-
-    if (isSelected && hasMaxVisibleItems) {
-      $op.scrollIntoView?.({
-        block: 'nearest'
-      });
-    }
-  }
-}
-
-function _getOptionWithValue2(value) {
-  if (value === null) {
-    return null;
-  }
-
-  for (const $option of _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this)) {
-    if ($option.disabled !== true && $option.value === value) {
-      return $option;
-    }
-  }
-
-  return null;
-}
-
-function _getOptionElements2() {
-  let $elements = _classPrivateFieldGet(this, _$optionSlot).assignedElements();
-
-  if ($elements.length === 1 && $elements[0].tagName === 'SLOT') {
-    $elements = $elements[0].assignedElements();
-  }
-
-  return $elements;
-}
-
-function _findSelectedOption2(elements) {
-  for (const el of elements) {
-    if (getBooleanAttribute(el, 'data-selected')) {
-      return el;
-    }
-  }
-
-  return null;
-}
-
-function _getEnabledOptionElements2() {
-  return _classPrivateMethodGet(this, _getOptionElements, _getOptionElements2).call(this).filter(opt => opt.disabled !== true);
-}
-
-function _dispatchChangeEvent2($opt) {
-  if ($opt === null) {
-    return;
-  }
-
-  const value = $opt.value;
-  const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($opt, 'data-checked')) : value;
-  this.dispatchEvent(new CustomEvent('change', {
-    detail: result,
-    bubbles: true
-  }));
-  this.dispatchEvent(new CustomEvent('-change', {
-    detail: result
-  }));
-}

package/dropdown/types.d.ts

@@ -1,32 +0,0 @@
-import type { TSinchPopoverOrientation } from '../popover/types';
-import type { TRect, TSinchElementReact } from '../types';
-import type { SyntheticEvent } from 'react';
-export declare type TSinchDropdownElement = HTMLElement & {
-    open: boolean;
-    multiple: boolean;
-    orientation: TSinchPopoverOrientation;
-    value: string;
-    maxVisibleItems: number | null;
-    readonly dropdownRect: TRect;
-    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
-    addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
-    setAttribute(name: 'open', value: ''): void;
-    setAttribute(name: 'multiple', value: ''): void;
-    setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
-    setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'maxvisibleitems', value: string): void;
-};
-export declare type TSinchDropdownReact = TSinchElementReact<TSinchDropdownElement> & {
-    open: boolean;
-    multiple?: boolean;
-    orientation?: TSinchPopoverOrientation;
-    value: string;
-    maxVisibleItems?: number;
-    'aria-label': string;
-    /** @deprecated */
-    onClose?: () => void;
-    'on-close'?: (e: CustomEvent<void>) => void;
-    /** @deprecated */
-    onChange?: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
-    'on-change'?: (e: CustomEvent<string>) => void;
-};