@nectary/components 0.38.0 → 0.40.0

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,30 +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;
-    onClose?: () => void;
-    'on-close'?: (e: CustomEvent<void>) => void;
-    onChange?: (e: SyntheticEvent<TSinchDropdownElement, CustomEvent<string>>) => void;
-    'on-change'?: (e: CustomEvent<string>) => void;
-};

package/dropdown-text-option/index.js

@@ -1,104 +0,0 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-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 { defineCustomElement, getAttribute, getBooleanAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;position:relative;box-sizing:border-box;height:40px;padding:8px 16px;align-items:center;gap:10px;user-select:none;cursor:pointer;--sinch-color-icon:var(--sinch-color-stormy-500);--sinch-size-icon:24px}#content{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:hover)>#wrapper,:host([data-selected])>#wrapper{background-color:var(--sinch-color-snow-500)}#check{display:none;margin-right:-6px}:host([data-checked]) #check{display:block}:host([disabled]:not([disabled=false]))>#wrapper{color:var(--sinch-color-stormy-100);cursor:initial;--sinch-color-icon:var(--sinch-color-stormy-100)}::slotted(*){margin-left:-6px}</style><div id="wrapper"><slot name="icon"></slot><span id="content"></span><sinch-icon-check id="check"></sinch-icon-check></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-
-var _$iconSlot = new WeakMap();
-
-var _$content = new WeakMap();
-
-export class DropdownTextOption extends NectaryElement {
-  constructor() {
-    super();
-
-    _classPrivateFieldInitSpec(this, _$iconSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$content, {
-      writable: true,
-      value: void 0
-    });
-
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$iconSlot, shadowRoot.querySelector('slot'));
-
-    _classPrivateFieldSet(this, _$content, shadowRoot.querySelector('#content'));
-  }
-
-  connectedCallback() {
-    this.setAttribute('role', 'option');
-  }
-
-  static get observedAttributes() {
-    return ['text', 'checked'];
-  }
-
-  attributeChangedCallback(name, oldVal, newVal) {
-    if (oldVal === newVal) {
-      return;
-    }
-
-    switch (name) {
-      case 'text':
-        {
-          _classPrivateFieldGet(this, _$content).textContent = newVal;
-          break;
-        }
-
-      case 'checked':
-        {
-          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
-        }
-    }
-  }
-
-  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');
-  }
-
-  get icon() {
-    return _classPrivateFieldGet(this, _$iconSlot).assignedElements()[0] ?? null;
-  }
-
-}
-defineCustomElement('sinch-dropdown-text-option', DropdownTextOption);

package/dropdown-text-option/types.d.ts

@@ -1,16 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchDropdownTextOptionElement = HTMLElement & {
-    value: string;
-    text: string;
-    disabled: boolean;
-    readonly icon: Element | null;
-    setAttribute(name: 'value', value: string): void;
-    setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export declare type TSinchDropdownTextOptionReact = TSinchElementReact<TSinchDropdownTextOptionElement> & {
-    value: string;
-    text: string;
-    disabled?: boolean;
-    'aria-label': string;
-};

package/search/index.d.ts

@@ -1,14 +0,0 @@
-import '../icons/search';
-import '../icons/close';
-import '../icon-button';
-import type { TSinchSearchElement, TSinchSearchReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-search': TSinchSearchReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-search': TSinchSearchElement;
-    }
-}