@nectary/components 0.41.1 → 0.42.1

package/icon-button/index.js

@@ -7,7 +7,6 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
   #$button;
   #$tooltip;
   #controller = null;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -15,7 +14,6 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     this.#$button = shadowRoot.querySelector('#button');
     this.#$tooltip = shadowRoot.querySelector('#tooltip');
   }
-
   connectedCallback() {
     this.#controller = new AbortController();
     const options = {
@@ -29,15 +27,12 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
     this.addEventListener('-focus', this.#onFocusReactHandler, options);
     this.addEventListener('-blur', this.#onBlurReactHandler, options);
   }
-
   disconnectedCallback() {
     this.#controller.abort();
   }
-
   static get observedAttributes() {
     return ['disabled', 'aria-label'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'disabled':
@@ -47,7 +42,6 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
-
       case 'aria-label':
         {
           updateAttribute(this.#$tooltip, 'text', newVal);
@@ -55,39 +49,30 @@ defineCustomElement('sinch-icon-button', class extends NectaryElement {
         }
     }
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   set small(isSmall) {
     updateBooleanAttribute(this, 'small', isSmall);
   }
-
   get small() {
     return getBooleanAttribute(this, 'small');
   }
-
   get tooltipRect() {
     return this.#$tooltip.tooltipRect;
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$button.focus();
   }
-
   blur() {
     this.#$button.blur();
   }
-
   #onButtonClick = () => {
     this.dispatchEvent(new CustomEvent('-click'));
   };

package/icons/create-icon-class.js

@@ -10,10 +10,8 @@ export const createIconClass = templateHTML => {
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');
     }
-
     connectedCallback() {
       updateAttribute(this.$svg, 'preserveAspectRatio', 'xMinYMin meet');
     }
-
   };
 };

package/icons-branded/create-icon-class.js

@@ -13,31 +13,24 @@ export const createIconClass = templateHTML => {
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');
     }
-
     static get observedAttributes() {
       return ['size'];
     }
-
     set size(value) {
       updateAttribute(this, 'size', value);
     }
-
     get size() {
       return getIntegerAttribute(this, 'size', DEFAULT_SIZE);
     }
-
     set inverted(isInverted) {
       updateBooleanAttribute(this, 'inverted', isInverted);
     }
-
     get inverted() {
       return getBooleanAttribute(this, 'inverted');
     }
-
     connectedCallback() {
       updateAttribute(this.$svg, 'preserveAspectRatio', 'xMinYMin meet');
     }
-
     attributeChangedCallback(name, _, newVal) {
       switch (name) {
         case 'size':
@@ -50,6 +43,5 @@ export const createIconClass = templateHTML => {
           }
       }
     }
-
   };
 };

package/icons-channel/create-icon-class.js

@@ -13,23 +13,18 @@ export const createIconClass = templateHTML => {
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');
     }
-
     static get observedAttributes() {
       return ['size'];
     }
-
     set size(value) {
       updateAttribute(this, 'size', value);
     }
-
     get size() {
       return getIntegerAttribute(this, 'size', DEFAULT_SIZE);
     }
-
     connectedCallback() {
       updateAttribute(this.$svg, 'preserveAspectRatio', 'xMinYMin meet');
     }
-
     attributeChangedCallback(name, _, newVal) {
       switch (name) {
         case 'size':
@@ -42,6 +37,5 @@ export const createIconClass = templateHTML => {
           }
       }
     }
-
   };
 };

package/illustrations/create-illustration-class.js

@@ -14,43 +14,33 @@ export const createIllustrationClass = templateHTML => {
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');
     }
-
     static get observedAttributes() {
       return ['size'];
     }
-
     set size(value) {
       updateAttribute(this, 'size', value);
     }
-
     get size() {
       return getIntegerAttribute(this, 'size', DEFAULT_SIZE);
     }
-
     get background() {
       return getLiteralAttribute(this, backgroundValues, 'background', null);
     }
-
     set background(value) {
       updateLiteralAttribute(this, backgroundValues, 'background', value);
     }
-
     get valign() {
       return getLiteralAttribute(this, valignValues, 'valign', null);
     }
-
     set valign(value) {
       updateLiteralAttribute(this, valignValues, 'valign', value);
     }
-
     connectedCallback() {
       updateAttribute(this.$svg, 'preserveAspectRatio', 'xMinYMin meet');
-
       if (!this.hasAttribute('size')) {
         updateAttribute(this, 'size', DEFAULT_SIZE);
       }
     }
-
     attributeChangedCallback(name, _, newVal) {
       switch (name) {
         case 'size':
@@ -63,6 +53,5 @@ export const createIllustrationClass = templateHTML => {
           }
       }
     }
-
   };
 };

package/inline-alert/index.js

@@ -16,7 +16,6 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
   #$closeSlot;
   #$actionWrapper;
   #$actionSlot;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -28,7 +27,6 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
     this.#$actionWrapper = shadowRoot.querySelector('#action');
     this.#$actionSlot = shadowRoot.querySelector('slot[name="action"]');
   }
-
   connectedCallback() {
     this.setAttribute('aria-atomic', 'true');
     this.setAttribute('aria-live', 'polite');
@@ -37,40 +35,31 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
     this.#onCloseSlotChange();
     this.#onActionSlotChange();
   }
-
   disconnectedCallback() {
     this.#$closeSlot.removeEventListener('slotchange', this.#onCloseSlotChange);
     this.#$actionSlot.removeEventListener('slotchange', this.#onActionSlotChange);
   }
-
   get type() {
     return getLiteralAttribute(this, typeValues, 'type');
   }
-
   set type(value) {
     updateLiteralAttribute(this, typeValues, 'type', value);
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get caption() {
     return getAttribute(this, 'caption', '');
   }
-
   set caption(value) {
     updateAttribute(this, 'caption', value);
   }
-
   static get observedAttributes() {
     return ['text', 'caption', 'type'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'type':
@@ -78,13 +67,11 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
           assertType(newVal);
           break;
         }
-
       case 'text':
         {
           this.#$text.textContent = newVal;
           break;
         }
-
       case 'caption':
         {
           updateAttribute(this.#$caption, 'text', newVal);
@@ -92,7 +79,6 @@ defineCustomElement('sinch-inline-alert', class extends NectaryElement {
         }
     }
   }
-
   #onCloseSlotChange = () => {
     setClass(this.#$closeWrapper, 'empty', this.#$closeSlot.assignedElements().length === 0);
   };

package/input/index.js

@@ -11,7 +11,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
   #$rightWrapper;
   #cursorPos = null;
   #isPendingDk = false;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -22,7 +21,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#$rightSlot = shadowRoot.querySelector('slot[name="right"]');
     this.#$rightWrapper = shadowRoot.querySelector('#right');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'textbox');
     this.#$input.addEventListener('input', this.#onInput);
@@ -39,7 +37,6 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.#onIconSlotChange();
     this.#onRightSlotChange();
   }
-
   disconnectedCallback() {
     this.#$input.removeEventListener('input', this.#onInput);
     this.#$input.removeEventListener('compositionstart', this.#onCompositionStart);
@@ -53,79 +50,60 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     this.removeEventListener('-focus', this.#onFocusReactHandler);
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
-
   static get observedAttributes() {
     return ['type', 'value', 'placeholder', 'invalid', 'disabled'];
   }
-
   get nodeName() {
     return 'input';
   }
-
   set type(value) {
     updateAttribute(this, 'type', value);
   }
-
   get type() {
     return getLiteralAttribute(this, inputTypes, 'type', 'text');
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
     return getAttribute(this, 'value', '');
   }
-
   set placeholder(value) {
     updateAttribute(this, 'placeholder', value);
   }
-
   get placeholder() {
     return getAttribute(this, 'placeholder');
   }
-
   set invalid(isInvalid) {
     updateBooleanAttribute(this, 'invalid', isInvalid);
   }
-
   get invalid() {
     return getBooleanAttribute(this, 'invalid');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   get selectionStart() {
     return this.#$input.selectionStart;
   }
-
   set selectionStart(value) {
     this.#$input.selectionStart = value;
   }
-
   get selectionEnd() {
     return this.#$input.selectionEnd;
   }
-
   set selectionEnd(value) {
     this.#$input.selectionEnd = value;
   }
-
   get selectionDirection() {
     return this.#$input.selectionDirection;
   }
-
   set selectionDirection(value) {
     this.#$input.selectionDirection = value;
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'type':
@@ -133,38 +111,31 @@ defineCustomElement('sinch-input', class extends NectaryElement {
           updateLiteralAttribute(this.#$input, inputTypes, 'type', newVal);
           break;
         }
-
       case 'value':
         {
           const nextVal = newVal ?? '';
           const prevVal = this.#$input.value;
-
           if (nextVal !== prevVal) {
             const prevCursorPos = this.#$input.selectionEnd;
             const isPrevCursorEnd = prevCursorPos === prevVal.length;
             this.#$input.value = nextVal;
-
             if (!isPrevCursorEnd) {
               this.#$input.setSelectionRange(this.#cursorPos, this.#cursorPos);
             }
           }
-
           break;
         }
-
       case 'placeholder':
         {
           this.#$input.placeholder = newVal ?? '';
           updateAttribute(this, 'aria-placeholder', newVal);
           break;
         }
-
       case 'invalid':
         {
           updateExplicitBooleanAttribute(this, 'aria-invalid', isAttrTrue(newVal));
           break;
         }
-
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
@@ -174,19 +145,15 @@ defineCustomElement('sinch-input', class extends NectaryElement {
         }
     }
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$input.focus();
   }
-
   blur() {
     this.#$input.blur();
   }
-
   #onCompositionStart = () => {
     this.#isPendingDk = true;
   };
@@ -197,20 +164,16 @@ defineCustomElement('sinch-input', class extends NectaryElement {
     e.stopPropagation();
     const nextValue = this.#$input.value;
     const prevValue = this.value;
-
     if (prevValue !== nextValue) {
       const nextCursorPos = this.#$input.selectionEnd;
-
       if (!this.#isPendingDk) {
         this.#$input.value = prevValue;
         const prevCursorPos = this.#cursorPos;
         const isPrevCursorEnd = prevCursorPos === null || prevCursorPos === prevValue.length;
-
         if (!isPrevCursorEnd) {
           this.#$input.setSelectionRange(prevCursorPos, prevCursorPos);
         }
       }
-
       this.#isPendingDk = false;
       this.#cursorPos = nextCursorPos;
       this.dispatchEvent(new CustomEvent('change', {

package/link/index.js

@@ -7,7 +7,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-link', class extends NectaryElement {
   #$anchor;
   #$text;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -15,7 +14,6 @@ defineCustomElement('sinch-link', class extends NectaryElement {
     this.#$anchor = shadowRoot.querySelector('a');
     this.#$text = shadowRoot.querySelector('#content');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'link');
     this.#$anchor.addEventListener('click', this.#onAnchorClick);
@@ -25,7 +23,6 @@ defineCustomElement('sinch-link', class extends NectaryElement {
     this.addEventListener('-focus', this.#onFocusReactHandler);
     this.addEventListener('-blur', this.#onBlurReactHandler);
   }
-
   disconnectedCallback() {
     this.#$anchor.removeEventListener('click', this.#onAnchorClick);
     this.#$anchor.removeEventListener('focus', this.#onAnchorFocus);
@@ -34,77 +31,60 @@ defineCustomElement('sinch-link', class extends NectaryElement {
     this.removeEventListener('-focus', this.#onFocusReactHandler);
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
-
   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');
   }
-
   set standalone(isstandalone) {
     updateBooleanAttribute(this, 'standalone', isstandalone);
   }
-
   get standalone() {
     return getBooleanAttribute(this, 'standalone');
   }
-
   set preventDefault(isPrevented) {
     updateBooleanAttribute(this, 'preventdefault', isPrevented);
   }
-
   get preventDefault() {
     return getBooleanAttribute(this, 'preventdefault');
   }
-
   static get observedAttributes() {
     return ['text', 'href', 'external'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'text':
         {
           this.#$text.textContent = newVal;
           break;
         }
-
       case 'href':
         {
           updateAttribute(this.#$anchor, 'href', newVal);
           break;
         }
-
       case 'external':
         {
           updateAttribute(this.#$anchor, 'target', isAttrTrue(newVal) ? '_blank' : null);
@@ -112,24 +92,19 @@ defineCustomElement('sinch-link', class extends NectaryElement {
         }
     }
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$anchor.focus();
   }
-
   blur() {
     this.#$anchor.blur();
   }
-
   #onAnchorClick = e => {
     if (this.preventDefault) {
       e.preventDefault();
     }
-
     this.dispatchEvent(new CustomEvent('-click'));
   };
   #onAnchorFocus = () => {

package/list/index.js

@@ -8,9 +8,7 @@ defineCustomElement('sinch-list', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
   connectedCallback() {
     this.setAttribute('role', 'list');
   }
-
 });

package/list-item/index.js

@@ -9,9 +9,7 @@ defineCustomElement('sinch-list-item', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
   connectedCallback() {
     this.setAttribute('role', 'listitem');
   }
-
 });

package/logo/create-logo-class.js

@@ -13,37 +13,29 @@ export const createLogoClass = templateHTML => {
       shadowRoot.appendChild(template.content.cloneNode(true));
       this.$svg = shadowRoot.querySelector('svg');
     }
-
     static get observedAttributes() {
       return ['size'];
     }
-
     set size(value) {
       updateAttribute(this, 'size', value);
     }
-
     get size() {
       return getIntegerAttribute(this, 'size', DEFAULT_SIZE);
     }
-
     set inverted(isInverted) {
       updateBooleanAttribute(this, 'inverted', isInverted);
     }
-
     get inverted() {
       return getBooleanAttribute(this, 'inverted');
     }
-
     connectedCallback() {
       if (!this.$svg.hasAttribute('preserveAspectRatio')) {
         this.$svg.setAttribute('preserveAspectRatio', 'xMinYMin meet');
       }
-
       if (!this.hasAttribute('size')) {
         this.size = DEFAULT_SIZE;
       }
     }
-
     attributeChangedCallback(name, _, newVal) {
       switch (name) {
         case 'size':
@@ -56,6 +48,5 @@ export const createLogoClass = templateHTML => {
           }
       }
     }
-
   };
 };

package/package.json

@@ -1,8 +1,10 @@
 {
   "name": "@nectary/components",
-  "version": "0.41.1",
+  "version": "0.42.1",
   "files": [
     "theme.css",
+    "theme/*.css",
+    "theme/fonts.json",
     "**/*/*.js",
     "**/*/*.d.ts",
     "types.d.ts",