@nectary/components 0.39.0 → 0.41.0

package/accordion/index.js

@@ -1,66 +1,15 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$slot, _onSlotChange, _onOptionChange, _onValueChange, _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 { defineCustomElement, getAttribute, getBooleanAttribute, getCsvSet, getFirstCsvValue, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv } from '../utils';
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:column;box-sizing:border-box;width:100%;height:100%}::slotted(sinch-accordion-item){flex-shrink:1}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-accordion', class extends NectaryElement {
+  #$slot;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _onValueChange);
-
-    _classPrivateFieldInitSpec(this, _$slot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onSlotChange, {
-      writable: true,
-      value: () => {
-        _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onOptionChange, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        const $elem = e.target;
-        const value = e.detail;
-        const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : getBooleanAttribute($elem, 'data-checked') ? '' : value;
-        this.dispatchEvent(new CustomEvent('change', {
-          detail: result,
-          bubbles: true
-        }));
-        this.dispatchEvent(new CustomEvent('-change', {
-          detail: result
-        }));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onChangeReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-change')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
+    this.#$slot = shadowRoot.querySelector('slot');
   }
 
   static get observedAttributes() {
@@ -69,20 +18,15 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
 
   connectedCallback() {
     this.setAttribute('aria-label', 'accordion');
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
+    this.#$slot.addEventListener('option-change', this.#onOptionChange);
+    this.addEventListener('-change', this.#onChangeReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    _classPrivateFieldGet(this, _$slot).removeEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
+    this.#$slot.removeEventListener('option-change', this.#onOptionChange);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
   }
 
   get nodeName() {
@@ -113,29 +57,48 @@ defineCustomElement('sinch-accordion', (_$slot = new WeakMap(), _onSlotChange =
     switch (name) {
       case 'value':
         {
-          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
-
+          this.#onValueChange(newVal ?? '');
           break;
         }
     }
   }
 
-}));
-
-function _onValueChange2(csv) {
-  if (this.multiple) {
-    const values = getCsvSet(csv);
-
-    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-      const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
-      updateBooleanAttribute($option, 'data-checked', isChecked);
-    }
-  } else {
-    const value = getFirstCsvValue(csv);
+  #onSlotChange = () => {
+    this.#onValueChange(this.value);
+  };
+  #onOptionChange = e => {
+    e.stopPropagation();
+    const $elem = e.target;
+    const value = e.detail;
+    const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : getBooleanAttribute($elem, 'data-checked') ? '' : value;
+    this.dispatchEvent(new CustomEvent('change', {
+      detail: result,
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: result
+    }));
+  };
+
+  #onValueChange(csv) {
+    if (this.multiple) {
+      const values = getCsvSet(csv);
+
+      for (const $option of this.#$slot.assignedElements()) {
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
+        updateBooleanAttribute($option, 'data-checked', isChecked);
+      }
+    } else {
+      const value = getFirstCsvValue(csv);
 
-    for (const $option of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-      const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
-      updateBooleanAttribute($option, 'data-checked', isChecked);
+      for (const $option of this.#$slot.assignedElements()) {
+        const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
+        updateBooleanAttribute($option, 'data-checked', isChecked);
+      }
     }
   }
-}
+
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/accordion-item/index.js

@@ -1,64 +1,29 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$button, _$buttonContent, _$optionalText, _onButtonClick;
-
-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/keyboard-arrow-down';
 import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0;min-height:48px}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;height:100%;box-sizing:border-box;overflow:hidden;border-bottom:1px solid var(--sinch-color-stormy-200);--sinch-size-icon:16px}#button{all:initial;cursor:pointer;display:flex;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:48px;padding:12px 8px;font:var(--sinch-font-title-s);color:var(--sinch-color-text-default);fill:var(--sinch-color-stormy-500)}#button>*{pointer-events:none}#button:disabled{cursor:initial;color:var(--sinch-color-stormy-100);fill:var(--sinch-color-stormy-100)}#button::before{width:8px;height:8px;border-radius:50%;margin-left:2px;margin-right:8px}:host([status=success]) #button::before{content:"";background-color:var(--sinch-color-success-500)}:host([status=warn]) #button::before{content:"";background-color:var(--sinch-color-warning-500)}:host([status=error]) #button::before{content:"";background-color:var(--sinch-color-error-500)}:host([status=info]) #button::before{content:"";background-color:var(--sinch-color-informative-500)}#title{flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}#content{display:none;overflow-y:auto;flex-shrink:1;min-height:0;padding:0 8px 18px;font:var(--sinch-font-body);color:var(--sinch-color-text-default)}#dropdown-icon{--sinch-size-icon:24px}#button[aria-expanded=true]>#dropdown-icon{transform:rotate(180deg)}#button[aria-expanded=true]+#content{display:block}#optional{font:var(--sinch-font-small-text);color:var(--sinch-color-stormy-300)}</style><div id="wrapper"><button id="button" aria-controls="content" aria-expanded="false"><slot name="icon"></slot><span id="title"></span><span id="optional"></span><sinch-icon-keyboard-arrow-down id="dropdown-icon"></sinch-icon-keyboard-arrow-down></button><div id="content" role="region" aria-labelledby="button"><slot name="content"></slot></div></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonContent = new WeakMap(), _$optionalText = new WeakMap(), _onButtonClick = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-accordion-item', class extends NectaryElement {
+  #$button;
+  #$buttonContent;
+  #$optionalText;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$button, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$buttonContent, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$optionalText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        this.dispatchEvent(new CustomEvent('option-change', {
-          bubbles: true,
-          detail: this.value
-        }));
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('#button'));
-
-    _classPrivateFieldSet(this, _$buttonContent, shadowRoot.querySelector('#title'));
-
-    _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
+    this.#$button = shadowRoot.querySelector('#button');
+    this.#$buttonContent = shadowRoot.querySelector('#title');
+    this.#$optionalText = shadowRoot.querySelector('#optional');
   }
 
   connectedCallback() {
-    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+    this.#$button.addEventListener('click', this.#onButtonClick);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
+    this.#$button.removeEventListener('click', this.#onButtonClick);
   }
 
   static get observedAttributes() {
@@ -102,7 +67,7 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
   }
 
   get optionalText() {
-    return getAttribute(this, 'optionaltext', null);
+    return getAttribute(this, 'optionaltext');
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
@@ -113,36 +78,48 @@ defineCustomElement('sinch-accordion-item', (_$button = new WeakMap(), _$buttonC
     switch (name) {
       case 'label':
         {
-          _classPrivateFieldGet(this, _$buttonContent).textContent = newVal;
+          this.#$buttonContent.textContent = newVal;
           break;
         }
 
       case 'disabled':
         {
-          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
+          this.#$button.disabled = isAttrTrue(newVal);
           break;
         }
 
       case 'data-checked':
         {
-          updateExplicitBooleanAttribute(_classPrivateFieldGet(this, _$button), 'aria-expanded', isAttrTrue(newVal));
+          updateExplicitBooleanAttribute(this.#$button, 'aria-expanded', isAttrTrue(newVal));
           break;
         }
 
       case 'optionaltext':
         {
-          _classPrivateFieldGet(this, _$optionalText).textContent = newVal;
+          this.#$optionalText.textContent = newVal;
           break;
         }
     }
   }
 
+  #onButtonClick = e => {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('option-change', {
+      bubbles: true,
+      detail: this.value
+    }));
+  };
+
+  get focusable() {
+    return true;
+  }
+
   focus() {
-    _classPrivateFieldGet(this, _$button).focus();
+    this.#$button.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$button).blur();
+    this.#$button.blur();
   }
 
-}));
+});

package/action-menu/index.d.ts

@@ -1,4 +1,3 @@
-import '../popover';
 import type { TSinchActionMenuElement, TSinchActionMenuReact } from './types';
 declare global {
     namespace JSX {