@nectary/components 0.39.0 → 0.41.0

package/dialog/index.js

@@ -1,16 +1,3 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$dialog, _$closeButton, _$caption, _isConnected, _prevOverflowValue, _onCancel, _onCloseClick, _onBackdropClick, _onCloseReactHandler, _dispatchCloseEvent, _setOpen;
-
-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 '../icon-button';
 import '../icons/close';
@@ -20,119 +7,40 @@ import { defineCustomElement, getAttribute, getBooleanAttribute, getRect, isAttr
 const templateHTML = '<style>:host{display:inline-block}dialog{position:fixed;left:0;right:0;margin:auto;display:flex;flex-direction:column;padding:24px;max-width:var(--sinch-dialog-max-width,512px);max-height:unset;border-radius:var(--sinch-shape-radius-l);box-sizing:border-box;contain:content;background-color:var(--sinch-color-snow-100);color:var(--sinch-color-text-default);font:var(--sinch-font-body);border:none;box-shadow:var(--sinch-elevation-level-3)}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#000;opacity:.55}dialog::backdrop{background-color:#000;opacity:.55}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}#header{display:flex;flex-direction:row;justify-content:space-between;align-items:flex-start;margin-bottom:16px}#caption{color:var(--sinch-color-text-default)}#content{min-height:0;overflow:auto;max-height:var(--sinch-dialog-max-height,50vh)}#buttons{display:flex;flex-direction:row;justify-content:flex-end;gap:16px;margin-top:24px}sinch-icon-button{transform:translate(4px,-4px)}</style><dialog><div id="header"><sinch-title id="caption" type="m" level="3" ellipsis></sinch-title><sinch-icon-button id="close" small tabindex="0"><sinch-icon-close slot="icon"></sinch-icon-close></sinch-icon-button></div><div id="content"><sinch-stop-events events="close"><slot name="content"></slot></sinch-stop-events></div><div id="buttons"><sinch-stop-events events="close"><slot name="buttons"></slot></sinch-stop-events></div></dialog>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = new WeakMap(), _$caption = new WeakMap(), _isConnected = new WeakMap(), _prevOverflowValue = new WeakMap(), _onCancel = new WeakMap(), _onCloseClick = new WeakMap(), _onBackdropClick = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _setOpen = new WeakSet(), class extends NectaryElement {
+defineCustomElement('sinch-dialog', class extends NectaryElement {
+  #$dialog;
+  #$closeButton;
+  #$caption;
+  #isConnected = false;
+  #prevOverflowValue = '';
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _setOpen);
-
-    _classPrivateMethodInitSpec(this, _dispatchCloseEvent);
-
-    _classPrivateFieldInitSpec(this, _$dialog, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$closeButton, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$caption, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _isConnected, {
-      writable: true,
-      value: false
-    });
-
-    _classPrivateFieldInitSpec(this, _prevOverflowValue, {
-      writable: true,
-      value: ''
-    });
-
-    _classPrivateFieldInitSpec(this, _onCancel, {
-      writable: true,
-      value: e => {
-        e.preventDefault();
-
-        _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCloseClick, {
-      writable: true,
-      value: () => {
-        _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBackdropClick, {
-      writable: true,
-      value: e => {
-        if (e.target !== _classPrivateFieldGet(this, _$dialog)) {
-          return;
-        }
-
-        const rect = this.dialogRect;
-        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, _onCloseReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'onClose')?.();
-        getReactEventHandler(this, 'on-close')?.(e);
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$dialog, shadowRoot.querySelector('dialog'));
-
-    _classPrivateFieldSet(this, _$closeButton, shadowRoot.querySelector('#close'));
-
-    _classPrivateFieldSet(this, _$caption, shadowRoot.querySelector('#caption'));
-
-    dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
+    this.#$dialog = shadowRoot.querySelector('dialog');
+    this.#$closeButton = shadowRoot.querySelector('#close');
+    this.#$caption = shadowRoot.querySelector('#caption');
+    dialogPolyfill.registerDialog(this.#$dialog);
   }
 
   connectedCallback() {
     this.setAttribute('role', 'dialog');
-
-    _classPrivateFieldGet(this, _$closeButton).addEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
-
-    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
-
-    _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    this.addEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
-
-    _classPrivateFieldSet(this, _isConnected, true);
-
-    _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, getBooleanAttribute(this, 'open'));
+    this.#$closeButton.addEventListener('click', this.#onCloseClick);
+    this.#$dialog.addEventListener('mousedown', this.#onBackdropClick);
+    this.#$dialog.addEventListener('cancel', this.#onCancel);
+    this.addEventListener('-close', this.#onCloseReactHandler);
+    this.#isConnected = true;
+    this.#setOpen(getBooleanAttribute(this, 'open'));
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$closeButton).removeEventListener('click', _classPrivateFieldGet(this, _onCloseClick));
-
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropClick));
-
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    this.removeEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
-
-    _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, false);
-
-    _classPrivateFieldSet(this, _isConnected, false);
+    this.#$closeButton.removeEventListener('click', this.#onCloseClick);
+    this.#$dialog.removeEventListener('mousedown', this.#onBackdropClick);
+    this.#$dialog.removeEventListener('cancel', this.#onCancel);
+    this.removeEventListener('-close', this.#onCloseReactHandler);
+    this.#setOpen(false);
+    this.#isConnected = false;
   }
 
   static get observedAttributes() {
@@ -143,23 +51,21 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     switch (name) {
       case 'caption':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$caption), 'text', newVal);
+          updateAttribute(this.#$caption, 'text', newVal);
           break;
         }
 
       case 'open':
         {
           const shouldOpen = isAttrTrue(newVal);
-
-          _classPrivateMethodGet(this, _setOpen, _setOpen2).call(this, shouldOpen);
-
+          this.#setOpen(shouldOpen);
           updateBooleanAttribute(this, 'open', shouldOpen);
           break;
         }
 
       case 'close-aria-label':
         {
-          updateAttribute(_classPrivateFieldGet(this, _$closeButton), 'aria-label', newVal);
+          updateAttribute(this.#$closeButton, 'aria-label', newVal);
           break;
         }
     }
@@ -173,31 +79,53 @@ defineCustomElement('sinch-dialog', (_$dialog = new WeakMap(), _$closeButton = n
     return getAttribute(this, 'caption', '');
   }
 
-  get dialogRect() {
-    return getRect(_classPrivateFieldGet(this, _$dialog));
-  }
-
-  get closeButtonRect() {
-    return getRect(_classPrivateFieldGet(this, _$closeButton));
-  }
+  #onCancel = e => {
+    e.preventDefault();
+    this.#dispatchCloseEvent();
+  };
+  #onCloseClick = () => {
+    this.#dispatchCloseEvent();
+  };
+  #onBackdropClick = e => {
+    if (e.target !== this.#$dialog) {
+      return;
+    }
 
-}));
+    const rect = this.dialogRect;
+    const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
 
-function _dispatchCloseEvent2() {
-  this.dispatchEvent(new CustomEvent('-close'));
-}
+    if (!isInside) {
+      this.#dispatchCloseEvent();
+    }
+  };
+  #onCloseReactHandler = e => {
+    getReactEventHandler(this, 'onClose')?.();
+    getReactEventHandler(this, 'on-close')?.(e);
+  };
+
+  #dispatchCloseEvent() {
+    this.dispatchEvent(new CustomEvent('-close'));
+  }
 
-function _setOpen2(shouldOpen) {
-  if (shouldOpen) {
-    if (_classPrivateFieldGet(this, _isConnected) && !getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open')) {
-      _classPrivateFieldSet(this, _prevOverflowValue, document.body.style.overflow);
+  #setOpen(shouldOpen) {
+    if (shouldOpen) {
+      if (this.#isConnected && !getBooleanAttribute(this.#$dialog, 'open')) {
+        this.#prevOverflowValue = document.body.style.overflow;
+        document.body.style.overflow = 'hidden';
+        this.#$dialog.showModal();
+      }
+    } else {
+      this.#$dialog.close?.();
+      document.body.style.overflow = this.#prevOverflowValue;
+    }
+  }
 
-      document.body.style.overflow = 'hidden';
+  get dialogRect() {
+    return getRect(this.#$dialog);
+  }
 
-      _classPrivateFieldGet(this, _$dialog).showModal();
-    }
-  } else {
-    _classPrivateFieldGet(this, _$dialog).close?.();
-    document.body.style.overflow = _classPrivateFieldGet(this, _prevOverflowValue);
+  get closeButtonRect() {
+    return getRect(this.#$closeButton);
   }
-}
+
+});

package/field/index.js

@@ -1,72 +1,45 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$label, _$optionalText, _$additionalText, _$invalidText, _$inputSlot, _onLabelClick;
-
-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, NectaryElement, updateAttribute, updateBooleanAttribute } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px;--sinch-color-icon:var(--sinch-color-stormy-500)}#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);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}::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])) #top{--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><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getFirstSlotElement, NectaryElement, setClass, updateAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle}#wrapper{display:flex;flex-direction:column;width:100%}#bottom,#top{display:flex;align-items:baseline}#top{height:24px;margin-bottom:2px;--sinch-color-icon:var(--sinch-color-stormy-500)}#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);line-height:20px;margin-top:2px}#additional:empty{display:none}#invalid{font:var(--sinch-font-extra-small-text);color:var(--sinch-color-text-invalid);line-height:20px;margin-top:2px}#invalid:empty{display:none}#tooltip{align-self:center;margin:0 8px;display:flex}#tooltip.empty{display:none}:host([disabled]:not([disabled=false])) :is(#label,#additional,#optional,#invalid){color:var(--sinch-color-stormy-100)}:host([disabled]:not([disabled=false])) #top{--sinch-color-icon:var(--sinch-color-stormy-100)}</style><div id="wrapper"><div id="top"><label id="label" for="input"></label><div id="tooltip"><slot name="tooltip"></slot></div><span id="optional"></span></div><slot name="input"></slot><div id="bottom"><div id="invalid"></div><div id="additional"></div></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-field', (_$label = new WeakMap(), _$optionalText = new WeakMap(), _$additionalText = new WeakMap(), _$invalidText = new WeakMap(), _$inputSlot = new WeakMap(), _onLabelClick = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-field', class extends NectaryElement {
+  #$label;
+  #$optionalText;
+  #$additionalText;
+  #$invalidText;
+  #$inputSlot;
+  #$tooltipWrapper;
+  #$tooltipSlot;
+  #controller = null;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$optionalText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$additionalText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$invalidText, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$inputSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onLabelClick, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldGet(this, _$inputSlot).assignedElements()[0]?.focus?.();
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
-
-    _classPrivateFieldSet(this, _$optionalText, shadowRoot.querySelector('#optional'));
-
-    _classPrivateFieldSet(this, _$additionalText, shadowRoot.querySelector('#additional'));
-
-    _classPrivateFieldSet(this, _$invalidText, shadowRoot.querySelector('#invalid'));
-
-    _classPrivateFieldSet(this, _$inputSlot, shadowRoot.querySelector('slot[name="input"]'));
+    this.#$label = shadowRoot.querySelector('#label');
+    this.#$optionalText = shadowRoot.querySelector('#optional');
+    this.#$additionalText = shadowRoot.querySelector('#additional');
+    this.#$invalidText = shadowRoot.querySelector('#invalid');
+    this.#$inputSlot = shadowRoot.querySelector('slot[name="input"]');
+    this.#$tooltipSlot = shadowRoot.querySelector('slot[name="tooltip"]');
+    this.#$tooltipWrapper = shadowRoot.querySelector('#tooltip');
   }
 
   connectedCallback() {
-    _classPrivateFieldGet(this, _$label).addEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.#$label.addEventListener('click', this.#onLabelClick, {
+      signal
+    });
+    this.#$tooltipSlot.addEventListener('slotchange', this.#onTooltipSlotChange, {
+      signal
+    });
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$label).removeEventListener('click', _classPrivateFieldGet(this, _onLabelClick));
+    this.#controller.abort();
   }
 
   static get observedAttributes() {
@@ -86,7 +59,7 @@ defineCustomElement('sinch-field', (_$label = new WeakMap(), _$optionalText = ne
   }
 
   get optionalText() {
-    return getAttribute(this, 'optionaltext', null);
+    return getAttribute(this, 'optionaltext');
   }
 
   set additionalText(value) {
@@ -94,7 +67,7 @@ defineCustomElement('sinch-field', (_$label = new WeakMap(), _$optionalText = ne
   }
 
   get additionalText() {
-    return getAttribute(this, 'additionaltext', null);
+    return getAttribute(this, 'additionaltext');
   }
 
   set invalidText(value) {
@@ -102,7 +75,7 @@ defineCustomElement('sinch-field', (_$label = new WeakMap(), _$optionalText = ne
   }
 
   get invalidText() {
-    return getAttribute(this, 'invalidtext', null);
+    return getAttribute(this, 'invalidtext');
   }
 
   set disabled(isDisabled) {
@@ -117,28 +90,34 @@ defineCustomElement('sinch-field', (_$label = new WeakMap(), _$optionalText = ne
     switch (name) {
       case 'label':
         {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          this.#$label.textContent = newVal;
           break;
         }
 
       case 'optionaltext':
         {
-          _classPrivateFieldGet(this, _$optionalText).textContent = newVal;
+          this.#$optionalText.textContent = newVal;
           break;
         }
 
       case 'additionaltext':
         {
-          _classPrivateFieldGet(this, _$additionalText).textContent = newVal;
+          this.#$additionalText.textContent = newVal;
           break;
         }
 
       case 'invalidtext':
         {
-          _classPrivateFieldGet(this, _$invalidText).textContent = newVal;
+          this.#$invalidText.textContent = newVal;
           break;
         }
     }
   }
 
-}));
+  #onLabelClick = () => {
+    getFirstSlotElement(this.#$inputSlot)?.focus?.();
+  };
+  #onTooltipSlotChange = () => {
+    setClass(this.#$tooltipWrapper, 'empty', this.#$tooltipSlot.assignedElements().length === 0);
+  };
+});