@nectary/components 0.38.0 → 0.40.0

package/vertical-stepper/index.js

@@ -1,68 +1,27 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$itemsSlot, _updateItems;
-
-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/check';
 import '../icons/error-outline';
 import { clampNumber, defineCustomElement, getAttribute, getIntegerAttribute, NectaryElement, updateAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;display:flex;flex-direction:column;width:100%}#progress{position:absolute;height:1px;background-color:var(--sinch-color-snow-700);left:72px;right:72px;top:16px;transform:translateY(-50%)}#bar{position:absolute;height:1px;background-color:var(--sinch-color-stormy-400);left:0;top:0}</style><div id="wrapper"><slot></slot></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-vertical-stepper', (_$itemsSlot = new WeakMap(), _updateItems = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-vertical-stepper', class extends NectaryElement {
+  #$itemsSlot;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$itemsSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _updateItems, {
-      writable: true,
-      value: () => {
-        const $items = _classPrivateFieldGet(this, _$itemsSlot).assignedElements();
-
-        const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
-
-        for (let i = 0; i < $items.length; i++) {
-          const $el = $items[i];
-          const itemIndex = i + 1;
-          $el.setAttribute('data-index', String(itemIndex));
-
-          if (itemIndex === activeIndex) {
-            $el.setAttribute('data-progress', 'active');
-          } else if (itemIndex < activeIndex) {
-            $el.setAttribute('data-progress', 'done');
-          } else {
-            $el.removeAttribute('data-progress');
-          }
-        }
-
-        this.setAttribute('aria-valuemax', String($items.length));
-        this.setAttribute('aria-valuenow', String(clampNumber(activeIndex, 0, $items.length)));
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$itemsSlot, shadowRoot.querySelector('slot'));
+    this.#$itemsSlot = shadowRoot.querySelector('slot');
   }
 
   connectedCallback() {
     this.setAttribute('role', 'progressbar');
     this.setAttribute('aria-valuemin', '0');
-
-    _classPrivateFieldGet(this, _$itemsSlot).addEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+    this.#$itemsSlot.addEventListener('slotchange', this.#updateItems);
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$itemsSlot).removeEventListener('slotchange', _classPrivateFieldGet(this, _updateItems));
+    this.#$itemsSlot.removeEventListener('slotchange', this.#updateItems);
   }
 
   static get observedAttributes() {
@@ -77,8 +36,7 @@ defineCustomElement('sinch-vertical-stepper', (_$itemsSlot = new WeakMap(), _upd
     switch (name) {
       case 'index':
         {
-          _classPrivateFieldGet(this, _updateItems).call(this);
-
+          this.#updateItems();
           break;
         }
     }
@@ -92,4 +50,25 @@ defineCustomElement('sinch-vertical-stepper', (_$itemsSlot = new WeakMap(), _upd
     return getAttribute(this, 'index', '1');
   }
 
-}));
+  #updateItems = () => {
+    const $items = this.#$itemsSlot.assignedElements();
+    const activeIndex = clampNumber(getIntegerAttribute(this, 'index', 0), 0, $items.length + 1);
+
+    for (let i = 0; i < $items.length; i++) {
+      const $el = $items[i];
+      const itemIndex = i + 1;
+      $el.setAttribute('data-index', String(itemIndex));
+
+      if (itemIndex === activeIndex) {
+        $el.setAttribute('data-progress', 'active');
+      } else if (itemIndex < activeIndex) {
+        $el.setAttribute('data-progress', 'done');
+      } else {
+        $el.removeAttribute('data-progress');
+      }
+    }
+
+    this.setAttribute('aria-valuemax', String($items.length));
+    this.setAttribute('aria-valuenow', String(clampNumber(activeIndex, 0, $items.length)));
+  };
+});

package/vertical-stepper-item/index.js

@@ -1,46 +1,22 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$label, _$description, _$circleText;
-
-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/check';
 import '../icons/exclamation';
 import { defineCustomElement, getAttribute, getLiteralAttribute, NectaryElement, updateAttribute, updateLiteralAttribute } from '../utils';
-const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;min-height:68px}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-icon-size:20px}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}#content{display:none;padding:16px 0 16px 40px}#progress{position:absolute;width:1px;left:16px;top:32px;bottom:0;background-color:var(--sinch-color-snow-700);transform:translateX(-50%)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-color-stormy-400);left:0;top:0}:host(:last-of-type) #progress{display:none}:host([data-progress=active]) #content{display:block}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-error-200);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}:host([data-progress=done]) #bar{height:100%}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><div id="label-wrapper"><div id="label"></div><div id="description"></div></div></div><div id="content"><slot></slot></div></div>';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{display:flex;flex-direction:column;position:relative;width:100%;min-height:68px}#circle-wrapper{display:flex;flex-direction:row;align-items:flex-start;gap:8px;min-width:0}#circle{display:flex;align-items:center;justify-content:center;width:32px;height:32px;background-color:var(--sinch-color-snow-700);font:var(--sinch-font-title-s);line-height:32px;text-align:center;color:var(--sinch-color-stormy-500);border:1px solid transparent;border-radius:50%;box-sizing:border-box;--sinch-size-icon:20px}#label-wrapper{margin-top:4px;min-width:0;flex:1}#label{font:var(--sinch-font-title-s);color:var(--sinch-color-stormy-500);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#description{font:var(--sinch-font-text-xs);color:var(--sinch-color-stormy-300);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon-error,#icon-success{display:none}#content{display:none;padding:16px 0 16px 40px}#progress{position:absolute;width:1px;left:16px;top:32px;bottom:0;background-color:var(--sinch-color-snow-700);transform:translateX(-50%)}#bar{position:absolute;width:1px;height:0;background-color:var(--sinch-color-stormy-400);left:0;top:0}:host(:last-of-type) #progress{display:none}:host([data-progress=active]) #content{display:block}:host([data-progress=active]) #circle{color:var(--sinch-color-snow-100);background-color:var(--sinch-color-stormy-400)}:host([data-progress=done]) #circle{border-color:var(--sinch-color-stormy-400)}:host([data-progress=done]:not([status])) #icon-success{display:block}:host([data-progress=done][status=error]) #circle{background-color:var(--sinch-color-error-200);border-color:var(--sinch-color-stormy-400)}:host([data-progress=done][status=error]) #icon-error{display:block}:host([data-progress=done]:not([status=skip])) #circle-text{display:none}:host([data-progress=done]) #bar{height:100%}</style><div id="wrapper"><div id="progress"><div id="bar"></div></div><div id="circle-wrapper"><div id="circle" aria-hidden="true"><sinch-icon-check id="icon-success"></sinch-icon-check><sinch-icon-exclamation id="icon-error"></sinch-icon-exclamation><span id="circle-text"></span></div><div id="label-wrapper"><div id="label"></div><div id="description"></div></div></div><div id="content"><slot></slot></div></div>';
 import { statusValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-vertical-stepper-item', (_$label = new WeakMap(), _$description = new WeakMap(), _$circleText = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-vertical-stepper-item', class extends NectaryElement {
+  #$label;
+  #$description;
+  #$circleText;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$label, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$description, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$circleText, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$label, shadowRoot.querySelector('#label'));
-
-    _classPrivateFieldSet(this, _$description, shadowRoot.querySelector('#description'));
-
-    _classPrivateFieldSet(this, _$circleText, shadowRoot.querySelector('#circle-text'));
+    this.#$label = shadowRoot.querySelector('#label');
+    this.#$description = shadowRoot.querySelector('#description');
+    this.#$circleText = shadowRoot.querySelector('#circle-text');
   }
 
   connectedCallback() {}
@@ -55,19 +31,19 @@ defineCustomElement('sinch-vertical-stepper-item', (_$label = new WeakMap(), _$d
     switch (name) {
       case 'label':
         {
-          _classPrivateFieldGet(this, _$label).textContent = newVal;
+          this.#$label.textContent = newVal;
           break;
         }
 
       case 'description':
         {
-          _classPrivateFieldGet(this, _$description).textContent = newVal;
+          this.#$description.textContent = newVal;
           break;
         }
 
       case 'data-index':
         {
-          _classPrivateFieldGet(this, _$circleText).textContent = newVal;
+          this.#$circleText.textContent = newVal;
           break;
         }
     }
@@ -97,4 +73,4 @@ defineCustomElement('sinch-vertical-stepper-item', (_$label = new WeakMap(), _$d
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
 
-}));
+});

package/card-button/index.d.ts

@@ -1,11 +0,0 @@
-import type { TSinchCardButtonElement, TSinchCardButtonReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-card-button': TSinchCardButtonReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-card-button': TSinchCardButtonElement;
-    }
-}

package/card-button/index.js

@@ -1,77 +0,0 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$button;
-
-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, getBooleanAttribute, getAttribute, updateAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;outline:0}sinch-button{display:block}</style><sinch-button type="primary" small></sinch-button>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-card-button', (_$button = new WeakMap(), class extends NectaryElement {
-  constructor() {
-    super();
-
-    _classPrivateFieldInitSpec(this, _$button, {
-      writable: true,
-      value: void 0
-    });
-
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$button, shadowRoot.querySelector('sinch-button'));
-  }
-
-  connectedCallback() {
-    this.setAttribute('role', 'button');
-  }
-
-  static get observedAttributes() {
-    return ['text', 'disabled'];
-  }
-
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          updateAttribute(_classPrivateFieldGet(this, _$button), 'text', newVal);
-          break;
-        }
-
-      case 'disabled':
-        {
-          updateAttribute(_classPrivateFieldGet(this, _$button), 'disabled', newVal);
-          break;
-        }
-    }
-  }
-
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-
-  set disabled(isDisabled) {
-    updateAttribute(this, 'disabled', isDisabled);
-  }
-
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
-
-  focus() {
-    _classPrivateFieldGet(this, _$button).focus();
-  }
-
-  blur() {
-    _classPrivateFieldGet(this, _$button).blur();
-  }
-
-}));

package/card-button/types.d.ts

@@ -1,12 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchCardButtonElement = HTMLElement & {
-    text: string;
-    disabled: boolean;
-    setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export declare type TSinchCardButtonReact = TSinchElementReact<TSinchCardButtonElement> & {
-    text: string;
-    'aria-label': string;
-    disabled?: boolean;
-};

package/card-link/index.d.ts

@@ -1,12 +0,0 @@
-import '../icons/arrow-forward';
-import type { TSinchCardLinkElement, TSinchCardLinkReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-card-link': TSinchCardLinkReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-card-link': TSinchCardLinkElement;
-    }
-}

package/card-link/index.js

@@ -1,115 +0,0 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$anchor, _$text, _onClick;
-
-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/arrow-forward';
-import { defineCustomElement, getBooleanAttribute, getAttribute, updateBooleanAttribute, updateAttribute, NectaryElement } from '../utils';
-const templateHTML = '<style>:host{display:inline;outline:0}a{display:flex;flex-direction:row;gap:8px;font:var(--sinch-font-emphasized-body);color:var(--sinch-color-tropical-500);text-decoration:none;outline:0;--sinch-color-icon:var(--sinch-color-tropical-500);--sinch-size-icon:24px}a:hover{color:var(--sinch-color-tropical-600);fill:var(--sinch-color-tropical-600)}:host([disabled]:not([disabled=false])) a{color:var(--sinch-color-tropical-300);pointer-events:none;cursor:initial;--sinch-color-icon:var(--sinch-color-tropical-300)}span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex-shrink:1}</style><a><span></span><sinch-icon-arrow-forward></sinch-icon-arrow-forward></a>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-card-link', (_$anchor = new WeakMap(), _$text = new WeakMap(), _onClick = new WeakMap(), class extends NectaryElement {
-  constructor() {
-    super();
-
-    _classPrivateFieldInitSpec(this, _$anchor, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _onClick, {
-      writable: true,
-      value: e => {
-        if (this.disabled) {
-          e.preventDefault();
-          e.stopPropagation();
-        }
-      }
-    });
-
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$anchor, shadowRoot.querySelector('a'));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('span'));
-  }
-
-  connectedCallback() {
-    _classPrivateFieldGet(this, _$anchor).addEventListener('click', _classPrivateFieldGet(this, _onClick));
-  }
-
-  disconnectedCallback() {
-    _classPrivateFieldGet(this, _$anchor).removeEventListener('click', _classPrivateFieldGet(this, _onClick));
-  }
-
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-
-  get href() {
-    return getAttribute(this, 'href', '');
-  }
-
-  set href(value) {
-    updateAttribute(this, 'href', value);
-  }
-
-  set disabled(isDisabled) {
-    updateBooleanAttribute(this, 'disabled', isDisabled);
-  }
-
-  get disabled() {
-    return getBooleanAttribute(this, 'disabled');
-  }
-
-  set external(isExternal) {
-    updateBooleanAttribute(this, 'external', isExternal);
-  }
-
-  get external() {
-    return getBooleanAttribute(this, 'external');
-  }
-
-  static get observedAttributes() {
-    return ['text', 'href'];
-  }
-
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
-          break;
-        }
-
-      case 'href':
-        {
-          updateAttribute(_classPrivateFieldGet(this, _$anchor), 'href', newVal);
-          break;
-        }
-    }
-  }
-
-  focus() {
-    _classPrivateFieldGet(this, _$anchor).focus();
-  }
-
-  blur() {
-    _classPrivateFieldGet(this, _$anchor).blur();
-  }
-
-}));

package/card-link/types.d.ts

@@ -1,14 +0,0 @@
-import type { TSinchElementReact } from '../types';
-export declare type TSinchCardLinkElement = HTMLElement & {
-    text: string;
-    href: string;
-    disabled: boolean;
-    setAttribute(name: 'text', value: string): void;
-    setAttribute(name: 'href', value: string): void;
-    setAttribute(name: 'disabled', value: ''): void;
-};
-export declare type TSinchCardLinkReact = TSinchElementReact<TSinchCardLinkElement> & {
-    text: string;
-    href: string;
-    disabled?: boolean;
-};

package/dropdown/index.d.ts

@@ -1,12 +0,0 @@
-import '../popover';
-import type { TSinchDropdownElement, TSinchDropdownReact } from './types';
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            'sinch-dropdown': TSinchDropdownReact;
-        }
-    }
-    interface HTMLElementTagNameMap {
-        'sinch-dropdown': TSinchDropdownElement;
-    }
-}