@nectary/components 0.39.0 → 0.40.0

package/input/index.js

@@ -1,220 +1,57 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$input, _$iconSlot, _$iconWrapper, _$rightSlot, _$rightWrapper, _cursorPos, _isPendingDk, _onCompositionStart, _onSelectionChange, _onInput, _onIconSlotChange, _onRightSlotChange, _onInputFocus, _onInputBlur, _onChangeReactHandler, _onFocusReactHandler, _onBlurReactHandler;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 12px 0 44px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#border{position:absolute;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);left:0;right:0;top:0;bottom:0;pointer-events:none}:host([invalid]:not([invalid=false]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#input:focus+#border{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon{display:flex;position:absolute;left:12px;top:12px;pointer-events:none;--sinch-icon-size:24px}#icon.empty{display:none}#icon.empty~#input{padding-left:12px}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:8px}#right.empty{display:none}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="input-wrapper"><div id="icon"><slot name="icon"></slot></div><input id="input" type="text"/><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#input-wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;border-radius:var(--sinch-shape-radius-s);width:100%;height:48px;background-color:var(--sinch-color-snow-100);--sinch-color-icon:var(--sinch-color-stormy-500)}#input{all:initial;flex:1;min-width:0;height:48px;padding:0 12px 0 44px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#input::placeholder{font:var(--sinch-font-body);color:var(--sinch-color-text-muted);opacity:1}#border{position:absolute;border:1px solid var(--sinch-color-stormy-200);border-radius:var(--sinch-shape-radius-s);left:0;right:0;top:0;bottom:0;pointer-events:none}:host([invalid]:not([invalid=false]):not([disabled])) #border{border-color:var(--sinch-color-text-invalid)}#input:disabled{color:var(--sinch-color-stormy-100)}#input:disabled::placeholder{color:var(--sinch-color-snow-500)}#input:disabled+#border{border-color:var(--sinch-color-snow-500)}#input:focus+#border{border-color:var(--sinch-color-stormy-600)}#input[type=password]{font-size:1.5em;letter-spacing:.1em}#icon{display:flex;position:absolute;left:12px;top:12px;pointer-events:none;--sinch-size-icon:24px}#icon.empty{display:none}#icon.empty~#input{padding-left:12px}#right{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;padding-right:8px}#right.empty{display:none}:host([disabled]:not([disabled=false])){--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="input-wrapper"><div id="icon"><slot name="icon"></slot></div><input id="input" type="text"/><div id="border"></div><div id="right"><slot name="right"></slot></div></div>';
 import { inputTypes } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-input', (_$input = new WeakMap(), _$iconSlot = new WeakMap(), _$iconWrapper = new WeakMap(), _$rightSlot = new WeakMap(), _$rightWrapper = new WeakMap(), _cursorPos = new WeakMap(), _isPendingDk = new WeakMap(), _onCompositionStart = new WeakMap(), _onSelectionChange = new WeakMap(), _onInput = new WeakMap(), _onIconSlotChange = new WeakMap(), _onRightSlotChange = new WeakMap(), _onInputFocus = new WeakMap(), _onInputBlur = new WeakMap(), _onChangeReactHandler = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-input', class extends NectaryElement {
+  #$input;
+  #$iconSlot;
+  #$iconWrapper;
+  #$rightSlot;
+  #$rightWrapper;
+  #cursorPos = null;
+  #isPendingDk = false;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$input, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$iconSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$iconWrapper, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$rightSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$rightWrapper, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _cursorPos, {
-      writable: true,
-      value: null
-    });
-
-    _classPrivateFieldInitSpec(this, _isPendingDk, {
-      writable: true,
-      value: false
-    });
-
-    _classPrivateFieldInitSpec(this, _onCompositionStart, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldSet(this, _isPendingDk, true);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onSelectionChange, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldSet(this, _cursorPos, _classPrivateFieldGet(this, _$input).selectionEnd);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInput, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        const nextValue = _classPrivateFieldGet(this, _$input).value;
-
-        const prevValue = this.value;
-
-        if (prevValue !== nextValue) {
-          const nextCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
-
-          if (!_classPrivateFieldGet(this, _isPendingDk)) {
-            _classPrivateFieldGet(this, _$input).value = prevValue;
-
-            const prevCursorPos = _classPrivateFieldGet(this, _cursorPos);
-
-            const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
-
-            if (!isPrevCursorEnd) {
-              _classPrivateFieldGet(this, _$input).setSelectionRange(prevCursorPos, prevCursorPos);
-            }
-          }
-
-          _classPrivateFieldSet(this, _isPendingDk, false);
-
-          _classPrivateFieldSet(this, _cursorPos, nextCursorPos);
-
-          this.dispatchEvent(new CustomEvent('change', {
-            detail: nextValue,
-            bubbles: true
-          }));
-          this.dispatchEvent(new CustomEvent('-change', {
-            detail: nextValue
-          }));
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onIconSlotChange, {
-      writable: true,
-      value: () => {
-        setClass(_classPrivateFieldGet(this, _$iconWrapper), 'empty', _classPrivateFieldGet(this, _$iconSlot).assignedElements().length === 0);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onRightSlotChange, {
-      writable: true,
-      value: () => {
-        setClass(_classPrivateFieldGet(this, _$rightWrapper), 'empty', _classPrivateFieldGet(this, _$rightSlot).assignedElements().length === 0);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInputFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onInputBlur, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-blur'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-focus')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-blur')?.();
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$input, shadowRoot.querySelector('#input'));
-
-    _classPrivateFieldSet(this, _$iconSlot, shadowRoot.querySelector('slot[name="icon"]'));
-
-    _classPrivateFieldSet(this, _$iconWrapper, shadowRoot.querySelector('#icon'));
-
-    _classPrivateFieldSet(this, _$rightSlot, shadowRoot.querySelector('slot[name="right"]'));
-
-    _classPrivateFieldSet(this, _$rightWrapper, shadowRoot.querySelector('#right'));
+    this.#$input = shadowRoot.querySelector('#input');
+    this.#$iconSlot = shadowRoot.querySelector('slot[name="icon"]');
+    this.#$iconWrapper = shadowRoot.querySelector('#icon');
+    this.#$rightSlot = shadowRoot.querySelector('slot[name="right"]');
+    this.#$rightWrapper = shadowRoot.querySelector('#right');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'textbox');
-
-    _classPrivateFieldGet(this, _$input).addEventListener('input', _classPrivateFieldGet(this, _onInput));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
-
-    _classPrivateFieldGet(this, _$input).addEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
-
-    _classPrivateFieldGet(this, _$iconSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onIconSlotChange));
-
-    _classPrivateFieldGet(this, _$rightSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
-
-    _classPrivateFieldGet(this, _onIconSlotChange).call(this);
-
-    _classPrivateFieldGet(this, _onRightSlotChange).call(this);
+    this.#$input.addEventListener('input', this.#onInput);
+    this.#$input.addEventListener('compositionstart', this.#onCompositionStart);
+    this.#$input.addEventListener('mousedown', this.#onSelectionChange);
+    this.#$input.addEventListener('keydown', this.#onSelectionChange);
+    this.#$input.addEventListener('focus', this.#onInputFocus);
+    this.#$input.addEventListener('blur', this.#onInputBlur);
+    this.#$iconSlot.addEventListener('slotchange', this.#onIconSlotChange);
+    this.#$rightSlot.addEventListener('slotchange', this.#onRightSlotChange);
+    this.addEventListener('-change', this.#onChangeReactHandler);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
+    this.#onIconSlotChange();
+    this.#onRightSlotChange();
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$input).removeEventListener('input', _classPrivateFieldGet(this, _onInput));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('compositionstart', _classPrivateFieldGet(this, _onCompositionStart));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('mousedown', _classPrivateFieldGet(this, _onSelectionChange));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('keydown', _classPrivateFieldGet(this, _onSelectionChange));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('focus', _classPrivateFieldGet(this, _onInputFocus));
-
-    _classPrivateFieldGet(this, _$input).removeEventListener('blur', _classPrivateFieldGet(this, _onInputBlur));
-
-    _classPrivateFieldGet(this, _$iconSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onIconSlotChange));
-
-    _classPrivateFieldGet(this, _$rightSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onRightSlotChange));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$input.removeEventListener('input', this.#onInput);
+    this.#$input.removeEventListener('compositionstart', this.#onCompositionStart);
+    this.#$input.removeEventListener('mousedown', this.#onSelectionChange);
+    this.#$input.removeEventListener('keydown', this.#onSelectionChange);
+    this.#$input.removeEventListener('focus', this.#onInputFocus);
+    this.#$input.removeEventListener('blur', this.#onInputBlur);
+    this.#$iconSlot.removeEventListener('slotchange', this.#onIconSlotChange);
+    this.#$rightSlot.removeEventListener('slotchange', this.#onRightSlotChange);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
 
   static get observedAttributes() {
@@ -246,7 +83,7 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$iconSlot = new We
   }
 
   get placeholder() {
-    return getAttribute(this, 'placeholder', null);
+    return getAttribute(this, 'placeholder');
   }
 
   set invalid(isInvalid) {
@@ -266,51 +103,49 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$iconSlot = new We
   }
 
   get selectionStart() {
-    return _classPrivateFieldGet(this, _$input).selectionStart;
+    return this.#$input.selectionStart;
   }
 
   set selectionStart(value) {
-    _classPrivateFieldGet(this, _$input).selectionStart = value;
+    this.#$input.selectionStart = value;
   }
 
   get selectionEnd() {
-    return _classPrivateFieldGet(this, _$input).selectionEnd;
+    return this.#$input.selectionEnd;
   }
 
   set selectionEnd(value) {
-    _classPrivateFieldGet(this, _$input).selectionEnd = value;
+    this.#$input.selectionEnd = value;
   }
 
   get selectionDirection() {
-    return _classPrivateFieldGet(this, _$input).selectionDirection;
+    return this.#$input.selectionDirection;
   }
 
   set selectionDirection(value) {
-    _classPrivateFieldGet(this, _$input).selectionDirection = value;
+    this.#$input.selectionDirection = value;
   }
 
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'type':
         {
-          updateLiteralAttribute(_classPrivateFieldGet(this, _$input), inputTypes, 'type', newVal);
+          updateLiteralAttribute(this.#$input, inputTypes, 'type', newVal);
           break;
         }
 
       case 'value':
         {
           const nextVal = newVal ?? '';
-
-          const prevVal = _classPrivateFieldGet(this, _$input).value;
+          const prevVal = this.#$input.value;
 
           if (nextVal !== prevVal) {
-            const prevCursorPos = _classPrivateFieldGet(this, _$input).selectionEnd;
-
+            const prevCursorPos = this.#$input.selectionEnd;
             const isPrevCursorEnd = prevCursorPos === prevVal.length;
-            _classPrivateFieldGet(this, _$input).value = nextVal;
+            this.#$input.value = nextVal;
 
             if (!isPrevCursorEnd) {
-              _classPrivateFieldGet(this, _$input).setSelectionRange(_classPrivateFieldGet(this, _cursorPos), _classPrivateFieldGet(this, _cursorPos));
+              this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
             }
           }
 
@@ -319,7 +154,7 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$iconSlot = new We
 
       case 'placeholder':
         {
-          _classPrivateFieldGet(this, _$input).placeholder = newVal ?? '';
+          this.#$input.placeholder = newVal ?? '';
           updateAttribute(this, 'aria-placeholder', newVal);
           break;
         }
@@ -333,7 +168,7 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$iconSlot = new We
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
-          _classPrivateFieldGet(this, _$input).disabled = isDisabled;
+          this.#$input.disabled = isDisabled;
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
@@ -341,11 +176,67 @@ defineCustomElement('sinch-input', (_$input = new WeakMap(), _$iconSlot = new We
   }
 
   focus() {
-    _classPrivateFieldGet(this, _$input).focus();
+    this.#$input.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$input).blur();
-  }
+    this.#$input.blur();
+  }
+
+  #onCompositionStart = () => {
+    this.#isPendingDk = true;
+  };
+  #onSelectionChange = () => {
+    this.#cursorPos = this.#$input.selectionEnd;
+  };
+  #onInput = e => {
+    e.stopPropagation();
+    const nextValue = this.#$input.value;
+    const prevValue = this.value;
+
+    if (prevValue !== nextValue) {
+      const nextCursorPos = this.#$input.selectionEnd;
+
+      if (!this.#isPendingDk) {
+        this.#$input.value = prevValue;
+        const prevCursorPos = this.#cursorPos;
+        const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
+
+        if (!isPrevCursorEnd) {
+          this.#$input.setSelectionRange(prevCursorPos, prevCursorPos);
+        }
+      }
 
-}));
+      this.#isPendingDk = false;
+      this.#cursorPos = nextCursorPos;
+      this.dispatchEvent(new CustomEvent('change', {
+        detail: nextValue,
+        bubbles: true
+      }));
+      this.dispatchEvent(new CustomEvent('-change', {
+        detail: nextValue
+      }));
+    }
+  };
+  #onIconSlotChange = () => {
+    setClass(this.#$iconWrapper, 'empty', this.#$iconSlot.assignedElements().length === 0);
+  };
+  #onRightSlotChange = () => {
+    setClass(this.#$rightWrapper, 'empty', this.#$rightSlot.assignedElements().length === 0);
+  };
+  #onInputFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onInputBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+});

package/link/index.js

@@ -1,110 +1,38 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$anchor, _$text, _onAnchorClick, _onAnchorFocus, _onAnchorBlur, _onFocusReactHandler, _onBlurReactHandler, _onClickReactHandler;
-
-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/open-in-new';
 import '../icons/arrow-forward';
 import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement, isAttrTrue, getReactEventHandler } from '../utils';
 const templateHTML = '<style>:host{display:inline}a{font:var(--sinch-font-text-m);font-size:inherit;line-height:inherit;color:var(--sinch-color-tropical-500);border-radius:.5em;--sinch-size-icon:1em;--sinch-color-icon:var(--sinch-color-tropical-500)}a:hover{color:var(--sinch-color-tropical-600);--sinch-color-icon:var(--sinch-color-tropical-600)}a:focus-visible{outline:2px solid var(--sinch-color-aqua-400);outline-offset:2px}@supports not selector(:focus-visible){a:focus{outline:2px solid var(--sinch-color-aqua-400);outline-offset:2px}}#external-icon{display:none;margin-right:.2em;vertical-align:-.2em}#standalone-icon{display:none}:host([external]:not([external=false])) #external-icon{display:inline-block}:host([standalone]:not([standalone=false])){display:block}:host([standalone]:not([standalone=false])) a{display:block;font:var(--sinch-font-text-m);font-weight:var(--sinch-font-weight-emphasized);text-decoration:none;border-radius:var(--sinch-shape-radius-m);width:fit-content;--sinch-size-icon:24px}:host([standalone]:not([standalone=false])) #external-icon{margin-right:8px;vertical-align:-7px}:host([standalone]:not([standalone=false]):is([external=false],:not([external]))) #standalone-icon{display:inline-block;vertical-align:-7px;margin-left:8px}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-200);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-200)}</style><a referrerpolicy="no-referer" aria-hidden="true"><sinch-icon-open-in-new id="external-icon"></sinch-icon-open-in-new><span id="content"></span><sinch-icon-arrow-forward id="standalone-icon"></sinch-icon-arrow-forward></a>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), _onAnchorClick = new WeakMap(), _onAnchorFocus = new WeakMap(), _onAnchorBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), _onClickReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-link', class extends NectaryElement {
+  #$anchor;
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$anchor, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onAnchorClick, {
-      writable: true,
-      value: e => {
-        if (this.preventDefault) {
-          e.preventDefault();
-        }
-
-        this.dispatchEvent(new CustomEvent('-click'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onAnchorFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onAnchorBlur, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-blur'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onFocusReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-focus')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBlurReactHandler, {
-      writable: true,
-      value: () => {
-        getReactEventHandler(this, 'on-blur')?.();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onClickReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-click')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$anchor, shadowRoot.querySelector('a'));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#content'));
+    this.#$anchor = shadowRoot.querySelector('a');
+    this.#$text = shadowRoot.querySelector('#content');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'link');
-
-    _classPrivateFieldGet(this, _$anchor).addEventListener('click', _classPrivateFieldGet(this, _onAnchorClick));
-
-    _classPrivateFieldGet(this, _$anchor).addEventListener('focus', _classPrivateFieldGet(this, _onAnchorFocus));
-
-    _classPrivateFieldGet(this, _$anchor).addEventListener('blur', _classPrivateFieldGet(this, _onAnchorBlur));
-
-    this.addEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$anchor.addEventListener('click', this.#onAnchorClick);
+    this.#$anchor.addEventListener('focus', this.#onAnchorFocus);
+    this.#$anchor.addEventListener('blur', this.#onAnchorBlur);
+    this.addEventListener('-click', this.#onClickReactHandler);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$anchor).removeEventListener('click', _classPrivateFieldGet(this, _onAnchorClick));
-
-    _classPrivateFieldGet(this, _$anchor).removeEventListener('focus', _classPrivateFieldGet(this, _onAnchorFocus));
-
-    _classPrivateFieldGet(this, _$anchor).removeEventListener('blur', _classPrivateFieldGet(this, _onAnchorBlur));
-
-    this.removeEventListener('-click', _classPrivateFieldGet(this, _onClickReactHandler));
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$anchor.removeEventListener('click', this.#onAnchorClick);
+    this.#$anchor.removeEventListener('focus', this.#onAnchorFocus);
+    this.#$anchor.removeEventListener('blur', this.#onAnchorBlur);
+    this.removeEventListener('-click', this.#onClickReactHandler);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
 
   get text() {
@@ -167,30 +95,52 @@ defineCustomElement('sinch-link', (_$anchor = new WeakMap(), _$text = new WeakMa
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
 
       case 'href':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$anchor), 'href', newVal);
+          updateAttribute(this.#$anchor, 'href', newVal);
           break;
         }
 
       case 'external':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$anchor), 'target', isAttrTrue(newVal) ? '_blank' : null);
+          updateAttribute(this.#$anchor, 'target', isAttrTrue(newVal) ? '_blank' : null);
           break;
         }
     }
   }
 
   focus() {
-    _classPrivateFieldGet(this, _$anchor).focus();
+    this.#$anchor.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$anchor).blur();
+    this.#$anchor.blur();
   }
 
-}));
+  #onAnchorClick = e => {
+    if (this.preventDefault) {
+      e.preventDefault();
+    }
+
+    this.dispatchEvent(new CustomEvent('-click'));
+  };
+  #onAnchorFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onAnchorBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
+  };
+});

package/list-item/index.js

@@ -1,6 +1,6 @@
 import '../icons/keyboard-arrow-down';
 import { defineCustomElement, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;border-bottom:1px solid var(--sinch-color-snow-600)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-color-snow-500)}</style><div id="wrapper"><slot name="content"></slot></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{width:100%;height:100%;box-sizing:border-box;overflow:hidden;padding:8px 0;border-bottom:1px solid var(--sinch-color-snow-500)}:host(:last-child)>#wrapper{border-bottom:none}:host(:hover)>#wrapper{background-color:var(--sinch-color-snow-400)}</style><div id="wrapper"><slot name="content"></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-list-item', class extends NectaryElement {

package/package.json

@@ -1,12 +1,10 @@
 {
   "name": "@nectary/components",
-  "version": "0.39.0",
+  "version": "0.40.0",
   "files": [
     "theme.css",
     "**/*/*.js",
     "**/*/*.d.ts",
-    "utils.js",
-    "utils.d.ts",
     "types.d.ts",
     "colors.json"
   ],
@@ -14,19 +12,19 @@
     "build": "NODE_ENV=production babel . --extensions '.ts' --out-dir . && tsc --declaration --emitDeclarationOnly"
   },
   "dependencies": {
-    "@babel/runtime": "^7.17.0",
+    "@babel/runtime": "^7.19.0",
     "dialog-polyfill": "^0.5.6"
   },
   "devDependencies": {
-    "@babel/cli": "^7.17.0",
-    "@babel/core": "^7.17.0",
-    "@babel/plugin-transform-runtime": "^7.17.0",
-    "@babel/preset-env": "^7.16.0",
-    "@babel/preset-typescript": "^7.16.0",
-    "@types/node": "^17.0.14",
-    "@types/react": "^17.0.0",
-    "babel-plugin-html-inline-minifier": "workspace:babel-plugin-html-inline-minifier@*",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.3",
-    "typescript": "^4.4.2"
+    "@babel/cli": "^7.19.3",
+    "@babel/core": "^7.19.3",
+    "@babel/plugin-transform-runtime": "^7.19.1",
+    "@babel/preset-env": "^7.19.3",
+    "@babel/preset-typescript": "^7.18.6",
+    "@types/node": "^17.0.45",
+    "@types/react": "^17.0.50",
+    "babel-plugin-html-inline-minifier": "workspace:^0.0.0",
+    "babel-plugin-transform-inline-environment-variables": "^0.4.4",
+    "typescript": "^4.8.4"
   }
 }