@nectary/components 0.39.0 → 0.41.0

package/tile-control/index.js

@@ -1,88 +1,28 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$slot, _onSlotChange, _onOptionChange, _onValueChange, _onSmallChange, _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, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]:not([small=false])) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tile-control', (_$slot = new WeakMap(), _onSlotChange = new WeakMap(), _onOptionChange = new WeakMap(), _onValueChange = new WeakSet(), _onSmallChange = new WeakSet(), _onChangeReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-tile-control', class extends NectaryElement {
+  #$slot;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _onSmallChange);
-
-    _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);
-
-        _classPrivateMethodGet(this, _onSmallChange, _onSmallChange2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onOptionChange, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        const $elem = e.target;
-        const value = e.detail;
-        const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : value;
-        this.dispatchEvent(new CustomEvent('change', {
-          detail,
-          bubbles: true
-        }));
-        this.dispatchEvent(new CustomEvent('-change', {
-          detail
-        }));
-      }
-    });
-
-    _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');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tablist');
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
-
-    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    this.addEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$slot.addEventListener('option-change', this.#onOptionChange);
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
+    this.addEventListener('-change', this.#onChangeReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$slot).removeEventListener('option-change', _classPrivateFieldGet(this, _onOptionChange));
-
-    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    this.removeEventListener('-change', _classPrivateFieldGet(this, _onChangeReactHandler));
+    this.#$slot.removeEventListener('option-change', this.#onOptionChange);
+    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
+    this.removeEventListener('-change', this.#onChangeReactHandler);
   }
 
   static get observedAttributes() {
@@ -133,49 +73,68 @@ defineCustomElement('sinch-tile-control', (_$slot = new WeakMap(), _onSlotChange
     switch (name) {
       case 'value':
         {
-          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, newVal ?? '');
-
+          this.#onValueChange(newVal ?? '');
           break;
         }
 
       case 'small':
         {
-          _classPrivateMethodGet(this, _onSmallChange, _onSmallChange2).call(this);
-
+          this.#onSmallChange();
           break;
         }
 
       case 'multiple':
         {
-          _classPrivateMethodGet(this, _onValueChange, _onValueChange2).call(this, this.value);
+          this.#onValueChange(this.value);
         }
     }
   }
 
-}));
-
-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);
+    this.#onSmallChange();
+  };
+  #onOptionChange = e => {
+    e.stopPropagation();
+    const $elem = e.target;
+    const value = e.detail;
+    const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : value;
+    this.dispatchEvent(new CustomEvent('change', {
+      detail,
+      bubbles: true
+    }));
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail
+    }));
+  };
+
+  #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);
+      }
     }
   }
-}
 
-function _onSmallChange2() {
-  const isSmall = this.small;
+  #onSmallChange() {
+    const isSmall = this.small;
 
-  for (const $opt of _classPrivateFieldGet(this, _$slot).assignedElements()) {
-    updateBooleanAttribute($opt, 'data-small', isSmall);
+    for (const $opt of this.#$slot.assignedElements()) {
+      updateBooleanAttribute($opt, 'data-small', isSmall);
+    }
   }
-}
+
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/tile-control-option/index.js

@@ -1,99 +1,34 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$button, _$text, _onButtonClick, _onButtonFocus, _onButtonBlur, _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, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:88px;height:88px;padding:16px 8px 8px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-leve-1);cursor:pointer}:host([data-small])>button{width:64px;height:64px;border-radius:var(--sinch-shape-radius-m);padding:12px 4px 4px}button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-small])>button::before{border-radius:var(--sinch-shape-radius-m)}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-shape-radius-l) + 4px);pointer-events:none}:host([data-small])>button:focus-visible::after{border-radius:calc(var(--sinch-shape-radius-m) + 4px)}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-aqua-400);border-radius:calc(var(--sinch-shape-radius-l) + 4px)}:host([data-small])>button:focus::after{border-radius:calc(var(--sinch-shape-radius-m) + 4px)}}button:enabled:hover{background-color:var(--sinch-color-tropical-100)}button:enabled:hover::before{border-color:var(--sinch-color-tropical-100)}:host([data-checked])>button:enabled,button:enabled:active{box-shadow:var(--sinch-elevation-level-0)}:host([data-checked])>button:enabled::before,button:enabled:active::before{border-width:2px;border-color:var(--sinch-color-stormy-500)}button:disabled{cursor:initial}button:disabled>#icon,button:disabled>#text{opacity:.5}#text{display:inline-block;min-height:20px;text-align:center;font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon{width:32px;height:32px;align-self:center;--sinch-size-icon:32px;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([data-small]) #icon{width:24px;height:24px;--sinch-size-icon:24px}button>*{pointer-events:none}</style><button><div id="icon"><slot name="icon"></slot></div><span id="text"></span></button>';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:88px;height:88px;padding:16px 8px 8px;border-radius:var(--sinch-shape-radius-l);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-leve-1);cursor:pointer}:host([data-small])>button{width:64px;height:64px;border-radius:var(--sinch-shape-radius-m);padding:12px 4px 4px}button::before{content:"";position:absolute;left:0;top:0;bottom:0;right:0;border:1px solid var(--sinch-color-snow-700);border-radius:var(--sinch-shape-radius-l);pointer-events:none}:host([data-small])>button::before{border-radius:var(--sinch-shape-radius-m)}button:focus-visible::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius-l) + 4px);pointer-events:none}:host([data-small])>button:focus-visible::after{border-radius:calc(var(--sinch-shape-radius-m) + 4px)}@supports not selector(:focus-visible){button:focus::after{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;padding:2px;border:2px solid var(--sinch-color-border-focus);border-radius:calc(var(--sinch-shape-radius-l) + 4px)}:host([data-small])>button:focus::after{border-radius:calc(var(--sinch-shape-radius-m) + 4px)}}button:enabled:hover{background-color:var(--sinch-color-tropical-100)}button:enabled:hover::before{border-color:var(--sinch-color-tropical-100)}:host([data-checked])>button:enabled,button:enabled:active{box-shadow:var(--sinch-elevation-level-0)}:host([data-checked])>button:enabled::before,button:enabled:active::before{border-width:2px;border-color:var(--sinch-color-stormy-500)}button:disabled{cursor:initial}button:disabled>#icon,button:disabled>#text{opacity:.5}#text{display:inline-block;min-height:20px;text-align:center;font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon{width:32px;height:32px;align-self:center;--sinch-size-icon:32px;--sinch-color-icon:var(--sinch-color-stormy-500)}:host([data-small]) #icon{width:24px;height:24px;--sinch-size-icon:24px}button>*{pointer-events:none}</style><button><div id="icon"><slot name="icon"></slot></div><span id="text"></span></button>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-tile-control-option', (_$button = new WeakMap(), _$text = new WeakMap(), _onButtonClick = new WeakMap(), _onButtonFocus = new WeakMap(), _onButtonBlur = new WeakMap(), _onFocusReactHandler = new WeakMap(), _onBlurReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-tile-control-option', class extends NectaryElement {
+  #$button;
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$button, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonClick, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-        this.dispatchEvent(new CustomEvent('option-change', {
-          detail: this.value,
-          bubbles: true
-        }));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonFocus, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-focus'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onButtonBlur, {
-      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')?.();
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('button'));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+    this.#$button = shadowRoot.querySelector('button');
+    this.#$text = shadowRoot.querySelector('#text');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'tab');
-
-    _classPrivateFieldGet(this, _$button).addEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    _classPrivateFieldGet(this, _$button).addEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
-
-    _classPrivateFieldGet(this, _$button).addEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
-
-    this.addEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.addEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$button.addEventListener('click', this.#onButtonClick);
+    this.#$button.addEventListener('focus', this.#onButtonFocus);
+    this.#$button.addEventListener('blur', this.#onButtonBlur);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$button).removeEventListener('click', _classPrivateFieldGet(this, _onButtonClick));
-
-    _classPrivateFieldGet(this, _$button).removeEventListener('focus', _classPrivateFieldGet(this, _onButtonFocus));
-
-    _classPrivateFieldGet(this, _$button).removeEventListener('blur', _classPrivateFieldGet(this, _onButtonBlur));
-
-    this.removeEventListener('-focus', _classPrivateFieldGet(this, _onFocusReactHandler));
-    this.removeEventListener('-blur', _classPrivateFieldGet(this, _onBlurReactHandler));
+    this.#$button.removeEventListener('click', this.#onButtonClick);
+    this.#$button.removeEventListener('focus', this.#onButtonFocus);
+    this.#$button.removeEventListener('blur', this.#onButtonBlur);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
 
   static get observedAttributes() {
@@ -108,7 +43,7 @@ defineCustomElement('sinch-tile-control-option', (_$button = new WeakMap(), _$te
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
 
@@ -120,7 +55,7 @@ defineCustomElement('sinch-tile-control-option', (_$button = new WeakMap(), _$te
 
       case 'disabled':
         {
-          _classPrivateFieldGet(this, _$button).disabled = isAttrTrue(newVal);
+          this.#$button.disabled = isAttrTrue(newVal);
           break;
         }
     }
@@ -150,12 +85,35 @@ defineCustomElement('sinch-tile-control-option', (_$button = new WeakMap(), _$te
     return getAttribute(this, 'text', '');
   }
 
+  get focusable() {
+    return true;
+  }
+
   focus() {
-    _classPrivateFieldGet(this, _$button).focus();
+    this.#$button.focus();
   }
 
   blur() {
-    _classPrivateFieldGet(this, _$button).blur();
+    this.#$button.blur();
   }
 
-}));
+  #onButtonClick = e => {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('option-change', {
+      detail: this.value,
+      bubbles: true
+    }));
+  };
+  #onButtonFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onButtonBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+});