@nectary/components 0.39.0 → 0.41.0

package/title/index.js

@@ -1,31 +1,17 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$text;
-
-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/cancel';
 import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}:host([type=xl]) #text{font:var(--sinch-font-title-xl)}:host([type="l"]) #text{font:var(--sinch-font-title-l)}:host([type="m"]) #text{font:var(--sinch-font-title-m)}:host([type="s"]) #text{font:var(--sinch-font-title-s)}:host([type=xs]) #text{font:var(--sinch-font-title-xs)}:host([ellipsis]:not([ellipsis=false])) #text{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
 import { assertLevel, assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-title', class extends NectaryElement {
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+    this.#$text = shadowRoot.querySelector('#text');
   }
 
   connectedCallback() {
@@ -64,7 +50,7 @@ defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends Nectar
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
 
@@ -83,4 +69,4 @@ defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends Nectar
     }
   }
 
-}));
+});

package/toast/index.js

@@ -1,16 +1,3 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$text, _tid, _updateTimeout, _onTimeout, _clearTimeout, _onTimeoutReactHandler;
-
-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 '../icons/report-problem';
 import '../icons/report';
 import '../icons/check-circle';
@@ -23,56 +10,27 @@ import { assertType, typeValues } from './utils';
 const TIMEOUT = 5000;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-toast', (_$text = new WeakMap(), _tid = new WeakMap(), _updateTimeout = new WeakSet(), _onTimeout = new WeakMap(), _clearTimeout = new WeakSet(), _onTimeoutReactHandler = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-toast', class extends NectaryElement {
+  #$text;
+  #tid = null;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _clearTimeout);
-
-    _classPrivateMethodInitSpec(this, _updateTimeout);
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _tid, {
-      writable: true,
-      value: null
-    });
-
-    _classPrivateFieldInitSpec(this, _onTimeout, {
-      writable: true,
-      value: () => {
-        this.dispatchEvent(new CustomEvent('-timeout'));
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onTimeoutReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'on-timeout')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+    this.#$text = shadowRoot.querySelector('#text');
   }
 
   connectedCallback() {
     this.setAttribute('aria-atomic', 'true');
     this.setAttribute('aria-live', 'polite');
-    this.addEventListener('-timeout', _classPrivateFieldGet(this, _onTimeoutReactHandler));
-
-    _classPrivateMethodGet(this, _updateTimeout, _updateTimeout2).call(this);
+    this.addEventListener('-timeout', this.#onTimeoutReactHandler);
+    this.#updateTimeout();
   }
 
   disconnectedCallback() {
-    this.removeEventListener('-timeout', _classPrivateFieldGet(this, _onTimeoutReactHandler));
-
-    _classPrivateMethodGet(this, _clearTimeout, _clearTimeout2).call(this);
+    this.removeEventListener('-timeout', this.#onTimeoutReactHandler);
+    this.#clearTimeout();
   }
 
   get type() {
@@ -117,37 +75,41 @@ defineCustomElement('sinch-toast', (_$text = new WeakMap(), _tid = new WeakMap()
 
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
 
       case 'persistent':
         {
-          _classPrivateMethodGet(this, _updateTimeout, _updateTimeout2).call(this);
-
+          this.#updateTimeout();
           break;
         }
     }
   }
 
-}));
-
-function _updateTimeout2() {
-  if (this.persistent) {
-    _classPrivateMethodGet(this, _clearTimeout, _clearTimeout2).call(this);
-
-    return;
-  }
+  #updateTimeout() {
+    if (this.persistent) {
+      this.#clearTimeout();
+      return;
+    }
 
-  if (_classPrivateFieldGet(this, _tid) === null) {
-    _classPrivateFieldSet(this, _tid, window.setTimeout(_classPrivateFieldGet(this, _onTimeout), TIMEOUT));
+    if (this.#tid === null) {
+      this.#tid = window.setTimeout(this.#onTimeout, TIMEOUT);
+    }
   }
-}
 
-function _clearTimeout2() {
-  if (_classPrivateFieldGet(this, _tid) !== null) {
-    window.clearTimeout(_classPrivateFieldGet(this, _tid));
+  #onTimeout = () => {
+    this.dispatchEvent(new CustomEvent('-timeout'));
+  };
 
-    _classPrivateFieldSet(this, _tid, null);
+  #clearTimeout() {
+    if (this.#tid !== null) {
+      window.clearTimeout(this.#tid);
+      this.#tid = null;
+    }
   }
-}
+
+  #onTimeoutReactHandler = e => {
+    getReactEventHandler(this, 'on-timeout')?.(e);
+  };
+});

package/toast-manager/index.js

@@ -1,16 +1,3 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$slot, _$list, _map, _shouldReduceMotion, _animations, _onAnimateAdd, _onAnimateRemove, _onSlotChange, _storeAnimation, _clear, _subscribeChildren, _unsubscribeChildren, _onCloneCloseClick, _onCloneActionClick;
-
-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 '../icons/report-problem';
 import '../icons/report';
 import '../icons/check-circle';
@@ -24,248 +11,185 @@ const DURATION_REMOVE = 250;
 const ITEMS_GAP = 16;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-toast-manager', (_$slot = new WeakMap(), _$list = new WeakMap(), _map = new WeakMap(), _shouldReduceMotion = new WeakMap(), _animations = new WeakMap(), _onAnimateAdd = new WeakSet(), _onAnimateRemove = new WeakSet(), _onSlotChange = new WeakMap(), _storeAnimation = new WeakSet(), _clear = new WeakSet(), _subscribeChildren = new WeakSet(), _unsubscribeChildren = new WeakSet(), _onCloneCloseClick = new WeakMap(), _onCloneActionClick = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-toast-manager', class extends NectaryElement {
+  #$slot;
+  #$list;
+  #map = new WeakMap();
+  #shouldReduceMotion = false;
+  #animations = new Set();
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _unsubscribeChildren);
-
-    _classPrivateMethodInitSpec(this, _subscribeChildren);
-
-    _classPrivateMethodInitSpec(this, _clear);
-
-    _classPrivateMethodInitSpec(this, _storeAnimation);
-
-    _classPrivateMethodInitSpec(this, _onAnimateRemove);
-
-    _classPrivateMethodInitSpec(this, _onAnimateAdd);
-
-    _classPrivateFieldInitSpec(this, _$slot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$list, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _map, {
-      writable: true,
-      value: new WeakMap()
-    });
-
-    _classPrivateFieldInitSpec(this, _shouldReduceMotion, {
-      writable: true,
-      value: false
-    });
-
-    _classPrivateFieldInitSpec(this, _animations, {
-      writable: true,
-      value: new Set()
-    });
-
-    _classPrivateFieldInitSpec(this, _onSlotChange, {
-      writable: true,
-      value: () => {
-        const slotItems = _classPrivateFieldGet(this, _$slot).assignedElements();
-
-        const listItems = Array.from(_classPrivateFieldGet(this, _$list).children);
-        let removeIndex = 0;
-
-        for (const item of listItems) {
-          if (item.hasAttribute('data-deleting')) {
-            ++removeIndex;
-            continue;
-          }
-
-          const orig = _classPrivateFieldGet(this, _map).get(item);
-
-          if (orig != null && slotItems.includes(orig)) {
-            continue;
-          }
-
-          _classPrivateFieldGet(this, _map).delete(item);
-
-          if (orig != null) {
-            _classPrivateFieldGet(this, _map).delete(orig);
-          }
-
-          _classPrivateMethodGet(this, _unsubscribeChildren, _unsubscribeChildren2).call(this, item);
-
-          _classPrivateMethodGet(this, _onAnimateRemove, _onAnimateRemove2).call(this, item, removeIndex);
-
-          ++removeIndex;
-        }
-
-        let addIndex = 0;
-
-        for (const item of slotItems) {
-          if (_classPrivateFieldGet(this, _map).has(item)) {
-            continue;
-          }
-
-          const cloned = cloneNode(item, true);
-          const rect = item.getBoundingClientRect();
-          const wrapper = document.createElement('div');
-          wrapper.className = 'item-wrapper';
-          wrapper.appendChild(cloned);
-
-          _classPrivateFieldGet(this, _$list).appendChild(wrapper);
-
-          _classPrivateFieldGet(this, _map).set(item, wrapper);
-
-          _classPrivateFieldGet(this, _map).set(wrapper, item);
-
-          _classPrivateMethodGet(this, _subscribeChildren, _subscribeChildren2).call(this, cloned);
-
-          _classPrivateMethodGet(this, _onAnimateAdd, _onAnimateAdd2).call(this, wrapper, addIndex, rect.height);
-
-          addIndex++;
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCloneCloseClick, {
-      writable: true,
-      value: e => {
-        const item = e.target.parentElement?.parentElement;
-
-        if (item != null) {
-          item.setAttribute('data-delete-now', '');
-          _classPrivateFieldGet(this, _map).get(item)?.querySelector('[slot=close]')?.dispatchEvent(new CustomEvent('-click'));
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCloneActionClick, {
-      writable: true,
-      value: e => {
-        const item = e.target.parentElement?.parentElement;
-
-        if (item != null) {
-          _classPrivateFieldGet(this, _map).get(item)?.querySelector('[slot=action]')?.dispatchEvent(new CustomEvent('-click'));
-        }
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$slot, shadowRoot.querySelector('slot'));
-
-    _classPrivateFieldSet(this, _$list, shadowRoot.querySelector('#list'));
+    this.#$slot = shadowRoot.querySelector('slot');
+    this.#$list = shadowRoot.querySelector('#list');
   }
 
   connectedCallback() {
-    _classPrivateFieldGet(this, _$slot).addEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    _classPrivateFieldSet(this, _shouldReduceMotion, window.matchMedia('(prefers-reduced-motion: reduce)').matches);
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
+    this.#shouldReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$slot).removeEventListener('slotchange', _classPrivateFieldGet(this, _onSlotChange));
-
-    _classPrivateMethodGet(this, _clear, _clear2).call(this);
+    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
+    this.#clear();
   }
 
   get containerRect() {
-    return getRect(_classPrivateFieldGet(this, _$list));
+    return getRect(this.#$list);
   }
 
   nthActionRect(nth) {
-    const item = _classPrivateFieldGet(this, _$list).children[nth]?.querySelector('[slot=action]');
+    const item = this.#$list.children[nth]?.querySelector('[slot=action]');
     return item != null ? getRect(item) : null;
   }
 
   nthCloseRect(nth) {
-    const item = _classPrivateFieldGet(this, _$list).children[nth]?.querySelector('[slot=close]');
+    const item = this.#$list.children[nth]?.querySelector('[slot=close]');
     return item != null ? getRect(item) : null;
   }
 
-}));
+  #onAnimateAdd(item, index, height) {
+    const duration = this.#shouldReduceMotion ? 0 : DURATION_ADD;
+    const addAnim = item.animate({
+      height: ['0', `${height + ITEMS_GAP}px`],
+      opacity: [0, 1]
+    }, {
+      delay: index * duration,
+      duration,
+      iterations: 1,
+      fill: 'forwards'
+    });
+    this.#storeAnimation(addAnim);
+  }
 
-function _onAnimateAdd2(item, index, height) {
-  const duration = _classPrivateFieldGet(this, _shouldReduceMotion) ? 0 : DURATION_ADD;
-  const addAnim = item.animate({
-    height: ['0', `${height + ITEMS_GAP}px`],
-    opacity: [0, 1]
-  }, {
-    delay: index * duration,
-    duration,
-    iterations: 1,
-    fill: 'forwards'
-  });
+  #onAnimateRemove(item, index) {
+    const rect = item.getBoundingClientRect();
+    const duration = this.#shouldReduceMotion ? 0 : DURATION_REMOVE;
+    const indexInQueue = item.hasAttribute('data-delete-now') ? 0 : index;
+    const heightAnim = item.animate({
+      height: [`${rect.height}px`, '0']
+    }, {
+      delay: duration + indexInQueue * duration,
+      duration,
+      iterations: 1,
+      fill: 'forwards'
+    });
+    const opacityAnim = item.animate({
+      opacity: [1, 0]
+    }, {
+      delay: indexInQueue * duration,
+      duration,
+      iterations: 1,
+      fill: 'forwards'
+    });
+    item.setAttribute('data-deleting', '');
+    this.#storeAnimation(heightAnim, () => item.remove());
+    this.#storeAnimation(opacityAnim);
+  }
 
-  _classPrivateMethodGet(this, _storeAnimation, _storeAnimation2).call(this, addAnim);
-}
+  #onSlotChange = () => {
+    const slotItems = this.#$slot.assignedElements();
+    const listItems = Array.from(this.#$list.children);
+    let removeIndex = 0;
 
-function _onAnimateRemove2(item, index) {
-  const rect = item.getBoundingClientRect();
-  const duration = _classPrivateFieldGet(this, _shouldReduceMotion) ? 0 : DURATION_REMOVE;
-  const indexInQueue = item.hasAttribute('data-delete-now') ? 0 : index;
-  const heightAnim = item.animate({
-    height: [`${rect.height}px`, '0']
-  }, {
-    delay: duration + indexInQueue * duration,
-    duration,
-    iterations: 1,
-    fill: 'forwards'
-  });
-  const opacityAnim = item.animate({
-    opacity: [1, 0]
-  }, {
-    delay: indexInQueue * duration,
-    duration,
-    iterations: 1,
-    fill: 'forwards'
-  });
-  item.setAttribute('data-deleting', '');
+    for (const item of listItems) {
+      if (item.hasAttribute('data-deleting')) {
+        ++removeIndex;
+        continue;
+      }
 
-  _classPrivateMethodGet(this, _storeAnimation, _storeAnimation2).call(this, heightAnim, () => item.remove());
+      const orig = this.#map.get(item);
 
-  _classPrivateMethodGet(this, _storeAnimation, _storeAnimation2).call(this, opacityAnim);
-}
+      if (orig != null && slotItems.includes(orig)) {
+        continue;
+      }
 
-function _storeAnimation2(anim, cb) {
-  const onAnimEnd = () => {
-    _classPrivateFieldGet(this, _animations).delete(anim);
+      this.#map.delete(item);
 
-    cb?.();
-    anim.removeEventListener('finish', onAnimEnd);
-    anim.removeEventListener('remove', onAnimEnd);
-    anim.removeEventListener('cancel', onAnimEnd);
-  };
+      if (orig != null) {
+        this.#map.delete(orig);
+      }
 
-  anim.addEventListener('finish', onAnimEnd);
-  anim.addEventListener('remove', onAnimEnd);
-  anim.addEventListener('cancel', onAnimEnd);
+      this.#unsubscribeChildren(item);
+      this.#onAnimateRemove(item, removeIndex);
+      ++removeIndex;
+    }
 
-  _classPrivateFieldGet(this, _animations).add(anim);
-}
+    let addIndex = 0;
 
-function _clear2() {
-  const listItems = Array.from(_classPrivateFieldGet(this, _$list).children);
+    for (const item of slotItems) {
+      if (this.#map.has(item)) {
+        continue;
+      }
 
-  for (const item of listItems) {
-    _classPrivateFieldGet(this, _map).delete(item);
+      const cloned = cloneNode(item, true);
+      const rect = item.getBoundingClientRect();
+      const wrapper = document.createElement('div');
+      wrapper.className = 'item-wrapper';
+      wrapper.appendChild(cloned);
+      this.#$list.appendChild(wrapper);
+      this.#map.set(item, wrapper);
+      this.#map.set(wrapper, item);
+      this.#subscribeChildren(cloned);
+      this.#onAnimateAdd(wrapper, addIndex, rect.height);
+      addIndex++;
+    }
+  };
+
+  #storeAnimation(anim, cb) {
+    const onAnimEnd = () => {
+      this.#animations.delete(anim);
+      cb?.();
+      anim.removeEventListener('finish', onAnimEnd);
+      anim.removeEventListener('remove', onAnimEnd);
+      anim.removeEventListener('cancel', onAnimEnd);
+    };
+
+    anim.addEventListener('finish', onAnimEnd);
+    anim.addEventListener('remove', onAnimEnd);
+    anim.addEventListener('cancel', onAnimEnd);
+    this.#animations.add(anim);
+  }
 
-    _classPrivateMethodGet(this, _unsubscribeChildren, _unsubscribeChildren2).call(this, item);
+  #clear() {
+    const listItems = Array.from(this.#$list.children);
 
-    item.remove();
+    for (const item of listItems) {
+      this.#map.delete(item);
+      this.#unsubscribeChildren(item);
+      item.remove();
+    }
+
+    for (const anim of this.#animations) {
+      anim.cancel();
+    }
   }
 
-  for (const anim of _classPrivateFieldGet(this, _animations)) {
-    anim.cancel();
+  #subscribeChildren(item) {
+    item.querySelector('[slot=close]')?.addEventListener('-click', this.#onCloneCloseClick);
+    item.querySelector('[slot=action]')?.addEventListener('-click', this.#onCloneActionClick);
   }
-}
 
-function _subscribeChildren2(item) {
-  item.querySelector('[slot=close]')?.addEventListener('-click', _classPrivateFieldGet(this, _onCloneCloseClick));
-  item.querySelector('[slot=action]')?.addEventListener('-click', _classPrivateFieldGet(this, _onCloneActionClick));
-}
+  #unsubscribeChildren(item) {
+    item.querySelector('[slot=close]')?.removeEventListener('-click', this.#onCloneCloseClick);
+    item.querySelector('[slot=action]')?.removeEventListener('-click', this.#onCloneActionClick);
+  }
 
-function _unsubscribeChildren2(item) {
-  item.querySelector('[slot=close]')?.removeEventListener('-click', _classPrivateFieldGet(this, _onCloneCloseClick));
-  item.querySelector('[slot=action]')?.removeEventListener('-click', _classPrivateFieldGet(this, _onCloneActionClick));
-}
+  #onCloneCloseClick = e => {
+    const item = e.target.parentElement?.parentElement;
+
+    if (item != null) {
+      item.setAttribute('data-delete-now', '');
+      this.#map.get(item)?.querySelector('[slot=close]')?.dispatchEvent(new CustomEvent('-click'));
+    }
+  };
+  #onCloneActionClick = e => {
+    const item = e.target.parentElement?.parentElement;
+
+    if (item != null) {
+      this.#map.get(item)?.querySelector('[slot=action]')?.dispatchEvent(new CustomEvent('-click'));
+    }
+  };
+});