@nectary/components 0.19.0 → 0.21.0

package/dropdown/index.js

@@ -1,7 +1,7 @@
 import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
 import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
 
-var _$button, _$optionSlot, _$listbox, _onButtonClick, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _setOpen, _onExpand, _onCollapse, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _getEnabledOptionElements, _dispatchChangeEvent;
+var _$target, _$optionSlot, _$listbox, _isConnected, _onListboxClick, _onListboxKeyPress, _onListboxKeyDown, _onOptionSlotChange, _onExpand, _onCollapse, _isOpen, _updateOrientation, _onValueChange, _getFirstOption, _getLastOption, _getNextOption, _getPrevOption, _selectOption, _getOptionWithValue, _getOptionElements, _getEnabledOptionElements, _dispatchChangeEvent, _dispatchCloseEvent, _onCancel, _onCloseReactHandler;
 
 function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
 
@@ -11,9 +11,10 @@ function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollect
 
 function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
 
+import dialogPolyfill from 'dialog-polyfill';
 import { isDropdownOptionElement } from '../dropdown-option';
-import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getRect, updateAttribute, updateBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box}dialog{outline:0;border:none;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgb(0 0 0 / 15%);overflow-y:auto;contain:content;padding:0;border-radius:4px;cursor:pointer}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}::slotted(*){display:block}</style><div id="wrapper"><div id="button" aria-haspopup="listbox" aria-expanded="false"><slot name="target"></slot></div><dialog id="listbox" tabindex="-1"><slot name="option"></slot></dialog></div>';
+import { attrValueToPixels, defineCustomElement, getAttribute, getBooleanAttribute, getIntegerAttribute, getLiteralAttribute, getReactEventHandler, getRect, isAttrTrue, updateAttribute, updateBooleanAttribute, updateIntegerAttribute, updateLiteralAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;width:100%;box-sizing:border-box}dialog{outline:0;border:none;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 4px rgba(0,0,0,.15);overflow-y:auto;contain:content;padding:0;border-radius:4px;cursor:pointer}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}::slotted(*){display:block}</style><div id="wrapper"><div id="target" aria-haspopup="listbox" aria-expanded="false"><slot name="target"></slot></div><dialog id="listbox" tabindex="-1"><slot name="option"></slot></dialog></div>';
 const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
 const ITEM_HEIGHT = 40;
 
@@ -29,10 +30,12 @@ const findSelectedOption = elements => {
 
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _onButtonClick = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _setOpen = new WeakSet(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), class extends HTMLElement {
+defineCustomElement('sinch-dropdown', (_$target = new WeakMap(), _$optionSlot = new WeakMap(), _$listbox = new WeakMap(), _isConnected = new WeakMap(), _onListboxClick = new WeakMap(), _onListboxKeyPress = new WeakMap(), _onListboxKeyDown = new WeakMap(), _onOptionSlotChange = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = new WeakSet(), _onValueChange = new WeakSet(), _getFirstOption = new WeakSet(), _getLastOption = new WeakSet(), _getNextOption = new WeakSet(), _getPrevOption = new WeakSet(), _selectOption = new WeakSet(), _getOptionWithValue = new WeakSet(), _getOptionElements = new WeakSet(), _getEnabledOptionElements = new WeakSet(), _dispatchChangeEvent = new WeakSet(), _dispatchCloseEvent = new WeakSet(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), class extends HTMLElement {
   constructor() {
     super();
 
+    _classPrivateMethodInitSpec(this, _dispatchCloseEvent);
+
     _classPrivateMethodInitSpec(this, _dispatchChangeEvent);
 
     _classPrivateMethodInitSpec(this, _getEnabledOptionElements);
@@ -53,13 +56,15 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
     _classPrivateMethodInitSpec(this, _onValueChange);
 
+    _classPrivateMethodInitSpec(this, _updateOrientation);
+
+    _classPrivateMethodInitSpec(this, _isOpen);
+
     _classPrivateMethodInitSpec(this, _onCollapse);
 
     _classPrivateMethodInitSpec(this, _onExpand);
 
-    _classPrivateMethodInitSpec(this, _setOpen);
-
-    _classPrivateFieldInitSpec(this, _$button, {
+    _classPrivateFieldInitSpec(this, _$target, {
       writable: true,
       value: void 0
     });
@@ -74,32 +79,30 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
       value: void 0
     });
 
-    _classPrivateFieldInitSpec(this, _onButtonClick, {
+    _classPrivateFieldInitSpec(this, _isConnected, {
       writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        if (this.disabled) {
-          return;
-        }
-
-        if (_classPrivateFieldGet(this, _$button).getAttribute('aria-expanded') !== 'true') {
-          _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-        }
-      }
+      value: false
     });
 
     _classPrivateFieldInitSpec(this, _onListboxClick, {
       writable: true,
       value: e => {
-        e.stopPropagation();
+        const rect = this.dropdownRect;
+        const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
+
+        if (!isInside) {
+          _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+
+          return;
+        }
+
         const $elem = e.target;
 
-        if ($elem !== _classPrivateFieldGet(this, _$listbox) && isDropdownOptionElement($elem) && $elem.disabled !== true) {
+        if ($elem !== _classPrivateFieldGet(this, _$listbox) && isDropdownOptionElement($elem)) {
+          e.stopPropagation();
+
           _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, $elem);
         }
-
-        _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
       }
     });
 
@@ -114,8 +117,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
               _classPrivateMethodGet(this, _dispatchChangeEvent, _dispatchChangeEvent2).call(this, findSelectedOption(_classPrivateMethodGet(this, _getEnabledOptionElements, _getEnabledOptionElements2).call(this)));
 
-              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-
               break;
             }
         }
@@ -143,15 +144,6 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
               _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getNextOption, _getNextOption2).call(this));
 
-              break;
-            }
-
-          case 'Escape':
-            {
-              e.preventDefault();
-
-              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-
               break;
             }
         }
@@ -161,29 +153,47 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
     _classPrivateFieldInitSpec(this, _onOptionSlotChange, {
       writable: true,
       value: () => {
-        _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-
         _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
       }
     });
 
+    _classPrivateFieldInitSpec(this, _onCancel, {
+      writable: true,
+      value: e => {
+        e.preventDefault();
+
+        _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'onClose')?.();
+      }
+    });
+
     const shadowRoot = this.attachShadow({
       mode: 'closed',
       delegatesFocus: true
     });
     shadowRoot.appendChild(template.content.cloneNode(true));
 
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
+    _classPrivateFieldSet(this, _$target, shadowRoot.querySelector('#target'));
 
     _classPrivateFieldSet(this, _$listbox, shadowRoot.querySelector('#listbox'));
 
     _classPrivateFieldSet(this, _$optionSlot, shadowRoot.querySelector('slot[name="option"]'));
+
+    dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$listbox));
   }
 
   connectedCallback() {
+    _classPrivateFieldSet(this, _isConnected, true);
+
     this.setAttribute('role', 'listbox');
 
-    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+    _classPrivateFieldGet(this, _$listbox).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
     _classPrivateFieldGet(this, _$listbox).addEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
 
@@ -192,10 +202,20 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
     _classPrivateFieldGet(this, _$listbox).addEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
 
     _classPrivateFieldGet(this, _$optionSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
+
+    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+
+    if (getBooleanAttribute(this, 'open')) {
+      _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+    } else {
+      _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+    }
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+    _classPrivateFieldSet(this, _isConnected, false);
+
+    _classPrivateFieldGet(this, _$listbox).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
 
     _classPrivateFieldGet(this, _$listbox).removeEventListener('click', _classPrivateFieldGet(this, _onListboxClick));
 
@@ -204,10 +224,12 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
     _classPrivateFieldGet(this, _$listbox).removeEventListener('keypress', _classPrivateFieldGet(this, _onListboxKeyPress));
 
     _classPrivateFieldGet(this, _$optionSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onOptionSlotChange));
+
+    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
   }
 
   static get observedAttributes() {
-    return ['value', 'maxvisibleitems'];
+    return ['value', 'maxvisibleitems', 'open', 'orientation'];
   }
 
   get nodeName() {
@@ -238,12 +260,12 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
     updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
 
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
+  set open(isOpen) {
+    updateBooleanAttribute(this, 'open', isOpen);
   }
 
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
+  get open() {
+    return getBooleanAttribute(this, 'open');
   }
 
   get dropdownRect() {
@@ -252,6 +274,28 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
+      case 'open':
+        {
+          if (_classPrivateFieldGet(this, _isConnected)) {
+            if (isAttrTrue(newVal)) {
+              _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+            } else {
+              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+            }
+          }
+
+          break;
+        }
+
+      case 'orientation':
+        {
+          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+            _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+          }
+
+          break;
+        }
+
       case 'value':
         {
           _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
@@ -283,22 +327,35 @@ defineCustomElement('sinch-dropdown', (_$button = new WeakMap(), _$optionSlot =
 
 }));
 
-function _setOpen2(isOpen) {
-  if (isOpen) {
-    if (!getBooleanAttribute(_classPrivateFieldGet(this, _$listbox), 'open')) {
-      _classPrivateFieldGet(this, _$listbox).showModal();
-    }
-  } else {
-    _classPrivateFieldGet(this, _$listbox).close();
+function _onExpand2() {
+  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+
+  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    _classPrivateFieldGet(this, _$listbox).showModal();
   }
+
+  _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+
+  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, this.value) ?? _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
 }
 
-function _onExpand2() {
-  _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'true');
+function _onCollapse2() {
+  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
 
-  _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, true);
+  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    _classPrivateFieldGet(this, _$listbox).close?.();
+  }
+}
 
-  const buttonRect = _classPrivateFieldGet(this, _$button).getBoundingClientRect();
+function _isOpen2() {
+  return _classPrivateFieldGet(this, _isConnected) && getBooleanAttribute(_classPrivateFieldGet(this, _$listbox), 'open');
+}
+
+function _updateOrientation2() {
+  _classPrivateFieldGet(this, _$listbox).style.transform = `initial`;
+  _classPrivateFieldGet(this, _$listbox).style.width = `max-content`;
+
+  const buttonRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
 
   const modalRect = _classPrivateFieldGet(this, _$listbox).getBoundingClientRect();
 
@@ -326,17 +383,6 @@ function _onExpand2() {
 
   _classPrivateFieldGet(this, _$listbox).style.transform = `translateX(${leftOffset}px) translateY(${topOffset}px)`;
   _classPrivateFieldGet(this, _$listbox).style.width = `${width}px`;
-
-  _classPrivateMethodGet(this, _selectOption, _selectOption2).call(this, _classPrivateMethodGet(this, _getOptionWithValue, _getOptionWithValue2).call(this, this.value) ?? _classPrivateMethodGet(this, _getFirstOption, _getFirstOption2).call(this));
-}
-
-function _onCollapse2() {
-  _classPrivateFieldGet(this, _$button).setAttribute('aria-expanded', 'false');
-
-  _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, false);
-
-  _classPrivateFieldGet(this, _$listbox).style.transform = `initial`;
-  _classPrivateFieldGet(this, _$listbox).style.width = `max-content`;
 }
 
 function _onValueChange2(value) {
@@ -430,4 +476,10 @@ function _dispatchChangeEvent2($opt) {
       bubbles: true
     }));
   }
+}
+
+function _dispatchCloseEvent2() {
+  this.dispatchEvent(new CustomEvent('close', {
+    bubbles: true
+  }));
 }

package/index.d.ts

@@ -8,6 +8,7 @@ import './button';
 import './card';
 import './card-button';
 import './card-link';
+import './card-container';
 import './checkbox';
 import './input';
 import './help-tooltip';
@@ -139,7 +140,11 @@ import './search-option';
 import './segment';
 import './segment-collapse';
 import './avatar';
+import './avatar-badge';
+import './avatar-status';
 import './chat-avatar';
 import './chat-bubble';
 import './chat-block';
 import './chat';
+import './title';
+import './popover';

package/index.js

@@ -8,6 +8,7 @@ import './button';
 import './card';
 import './card-button';
 import './card-link';
+import './card-container';
 import './checkbox';
 import './input';
 import './help-tooltip';
@@ -139,7 +140,11 @@ import './search-option';
 import './segment';
 import './segment-collapse';
 import './avatar';
+import './avatar-badge';
+import './avatar-status';
 import './chat-avatar';
 import './chat-bubble';
 import './chat-block';
-import './chat';
+import './chat';
+import './title';
+import './popover';

package/input/index.js

@@ -8,7 +8,7 @@ function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedec
 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, getLiteralAttribute, isAttrTrue, updateAttribute, updateBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#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])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;--sinch-color-icon:var(--sinch-color-stormy-500)}#wrapper{width:100%;box-sizing:border-box}#input{all:initial;border:1px solid var(--sinch-color-stormy-200);box-sizing:border-box;border-radius:4px;width:100%;height:48px;margin:2px 0;padding:0 12px;font:var(--sinch-font-body);color:var(--sinch-color-text-default);caret-color:var(--sinch-caret-color,auto)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted)}#input:disabled{border-color:var(--sinch-color-snow-500);color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:focus{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}:host([invalidtext]:not([invalidtext=""])) #input:not(:disabled){border-color:var(--sinch-color-text-invalid)}#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-s);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])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><slot name="tooltip"></slot><span id="optional"></span></div><input id="input" type="text"/><div id="bottom"><span id="invalid"></span> <span id="additional"></span></div></div>';
 const inputTypes = ['text', 'password'];
 const template = document.createElement('template');
 template.innerHTML = templateHTML;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nectary/components",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "files": [
     "theme.css",
     "**/*/*.js",

package/popover/index.d.ts

@@ -0,0 +1,26 @@
+import type { TRect, TSinchElementReact } from '../types';
+import type { SyntheticEvent } from 'react';
+declare const orientationValues: readonly ["top-left", "top-right", "bottom-left", "bottom-right"];
+export declare type TSinchPopoverOrientation = typeof orientationValues[number];
+export declare type TSinchPopoverElement = HTMLElement & {
+    open: boolean;
+    orientation: TSinchPopoverOrientation;
+    readonly popoverRect: TRect;
+};
+export declare type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
+    open: boolean;
+    orientation?: TSinchPopoverOrientation;
+    'aria-label': string;
+    onClose: (event: SyntheticEvent<TSinchPopoverElement, CustomEvent<void>>) => void;
+};
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-popover': TSinchPopoverReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-popover': TSinchPopoverElement;
+    }
+}
+export {};

package/popover/index.js

@@ -0,0 +1,230 @@
+import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
+import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
+
+var _$target, _$dialog, _isConnected, _onExpand, _onCollapse, _isOpen, _updateOrientation, _onBackdropClick, _onCancel, _onCloseReactHandler, _dispatchCloseEvent;
+
+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 dialogPolyfill from 'dialog-polyfill';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{outline:0;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:1px 2px 6px rgba(0,0,0,.15);border:1px solid var(--sinch-color-snow-500);border-radius:4px;overflow-y:auto;contain:content;padding:12px;box-sizing:border-box}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog" tabindex="-1"><slot name="content"></slot></dialog></div>';
+const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right'];
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _updateOrientation = new WeakSet(), _onBackdropClick = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), class extends HTMLElement {
+  constructor() {
+    super();
+
+    _classPrivateMethodInitSpec(this, _dispatchCloseEvent);
+
+    _classPrivateMethodInitSpec(this, _updateOrientation);
+
+    _classPrivateMethodInitSpec(this, _isOpen);
+
+    _classPrivateMethodInitSpec(this, _onCollapse);
+
+    _classPrivateMethodInitSpec(this, _onExpand);
+
+    _classPrivateFieldInitSpec(this, _$target, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _$dialog, {
+      writable: true,
+      value: void 0
+    });
+
+    _classPrivateFieldInitSpec(this, _isConnected, {
+      writable: true,
+      value: false
+    });
+
+    _classPrivateFieldInitSpec(this, _onBackdropClick, {
+      writable: true,
+      value: e => {
+        const rect = this.popoverRect;
+        const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
+
+        if (!isInside) {
+          _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+        }
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCancel, {
+      writable: true,
+      value: e => {
+        e.preventDefault();
+
+        _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
+      }
+    });
+
+    _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
+      writable: true,
+      value: () => {
+        getReactEventHandler(this, 'onClose')?.();
+      }
+    });
+
+    const shadowRoot = this.attachShadow({
+      mode: 'closed',
+      delegatesFocus: true
+    });
+    shadowRoot.appendChild(template.content.cloneNode(true));
+
+    _classPrivateFieldSet(this, _$target, shadowRoot.querySelector('#target'));
+
+    _classPrivateFieldSet(this, _$dialog, shadowRoot.querySelector('#dialog'));
+
+    dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
+  }
+
+  connectedCallback() {
+    this.setAttribute('role', 'dialog');
+
+    _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
+
+    _classPrivateFieldGet(this, _$dialog).addEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+
+    this.addEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+
+    _classPrivateFieldSet(this, _isConnected, true);
+
+    if (getBooleanAttribute(this, 'open')) {
+      _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+    } else {
+      _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+    }
+  }
+
+  disconnectedCallback() {
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
+
+    _classPrivateFieldGet(this, _$dialog).removeEventListener('click', _classPrivateFieldGet(this, _onBackdropClick));
+
+    this.removeEventListener('close', _classPrivateFieldGet(this, _onCloseReactHandler));
+
+    _classPrivateFieldSet(this, _isConnected, false);
+  }
+
+  static get observedAttributes() {
+    return ['open', 'orientation'];
+  }
+
+  set open(isOpen) {
+    updateBooleanAttribute(this, 'open', isOpen);
+  }
+
+  get open() {
+    return getBooleanAttribute(this, 'open');
+  }
+
+  get orientation() {
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-right');
+  }
+
+  set orientation(value) {
+    updateLiteralAttribute(this, orientationValues, 'orientation', value);
+  }
+
+  get popoverRect() {
+    return getRect(_classPrivateFieldGet(this, _$dialog));
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'open':
+        {
+          if (_classPrivateFieldGet(this, _isConnected)) {
+            if (isAttrTrue(newVal)) {
+              _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
+            } else {
+              _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+            }
+          }
+
+          break;
+        }
+
+      case 'orientation':
+        {
+          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+            _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+          }
+
+          break;
+        }
+    }
+  }
+
+}));
+
+function _onExpand2() {
+  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
+
+  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    _classPrivateFieldGet(this, _$dialog).showModal();
+  }
+
+  _classPrivateMethodGet(this, _updateOrientation, _updateOrientation2).call(this);
+}
+
+function _onCollapse2() {
+  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
+
+  if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
+    _classPrivateFieldGet(this, _$dialog).close?.();
+  }
+}
+
+function _isOpen2() {
+  return _classPrivateFieldGet(this, _isConnected) && getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open');
+}
+
+function _updateOrientation2() {
+  _classPrivateFieldGet(this, _$dialog).style.transform = `initial`;
+  _classPrivateFieldGet(this, _$dialog).style.width = `max-content`;
+
+  const buttonRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
+
+  const modalRect = _classPrivateFieldGet(this, _$dialog).getBoundingClientRect();
+
+  const width = Math.max(modalRect.width, buttonRect.width);
+  const widthDiff = Math.max(buttonRect.width - modalRect.width, 0);
+  let leftOffset = 0;
+  let topOffset = 0;
+  const orient = this.orientation;
+
+  if (orient === 'bottom-right' || orient === 'top-right') {
+    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x - modalRect.x + widthDiff * 0.5));
+  }
+
+  if (orient === 'bottom-left' || orient === 'top-left') {
+    leftOffset = Math.min(modalRect.x, Math.max(-modalRect.x, buttonRect.x + buttonRect.width - modalRect.x - modalRect.width - widthDiff * 0.5));
+  }
+
+  if (orient === 'bottom-left' || orient === 'bottom-right') {
+    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y + buttonRect.height - modalRect.y + 8));
+  }
+
+  if (orient === 'top-left' || orient === 'top-right') {
+    topOffset = Math.min(modalRect.y, Math.max(-modalRect.y, buttonRect.y - modalRect.y - modalRect.height - 8));
+  }
+
+  _classPrivateFieldGet(this, _$dialog).style.transform = `translateX(${leftOffset}px) translateY(${topOffset}px)`;
+  _classPrivateFieldGet(this, _$dialog).style.width = `${width}px`;
+}
+
+function _dispatchCloseEvent2() {
+  this.dispatchEvent(new CustomEvent('close', {
+    bubbles: true
+  }));
+}

package/search/index.d.ts

@@ -8,6 +8,9 @@ export declare type TSinchSearchElement = HTMLElement & {
     label: string | null;
     placeholder: string | null;
     maxVisibleItems: number | null;
+    selectionStart: HTMLInputElement['selectionStart'];
+    selectionEnd: HTMLInputElement['selectionEnd'];
+    selectionDirection: HTMLInputElement['selectionDirection'];
     readonly dropdownRect: TRect;
     focus(): void;
     blur(): void;