@nectary/components 0.41.1 → 0.42.0

package/file-drop/index.js

@@ -9,7 +9,6 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
   #$filePicker;
   #$dropArea;
   #$placeholder;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -18,7 +17,6 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
     this.#$placeholder = shadowRoot.querySelector('#placeholder');
     this.#$filePicker = shadowRoot.querySelector('#file-picker');
   }
-
   connectedCallback() {
     this.addEventListener('-change', this.#onChangeReactHandler);
     this.addEventListener('-invalid', this.#onInvalidReactHandler);
@@ -29,7 +27,6 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
     this.#$filePicker.addEventListener('-change', this.#onFilePickerChange);
     this.#$filePicker.addEventListener('-invalid', this.#onFilePickerInvalid);
   }
-
   disconnectedCallback() {
     this.removeEventListener('-change', this.#onChangeReactHandler);
     this.removeEventListener('-invalid', this.#onInvalidReactHandler);
@@ -40,48 +37,40 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
     this.#$filePicker.removeEventListener('-change', this.#onFilePickerChange);
     this.#$filePicker.removeEventListener('-invalid', this.#onFilePickerInvalid);
   }
-
   static get observedAttributes() {
     return ['accept', 'multiple', 'placeholder', 'disabled', 'invalid', 'size'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (newVal === oldVal) {
       return;
     }
-
     switch (name) {
       case 'multiple':
         {
           updateAttribute(this.#$filePicker, 'multiple', newVal);
           break;
         }
-
       case 'accept':
         {
           updateAttribute(this.#$filePicker, 'accept', newVal);
           break;
         }
-
       case 'placeholder':
         {
           this.#$placeholder.textContent = newVal;
           break;
         }
-
       case 'disabled':
         {
           updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
           this.#setDragEffect(false);
           break;
         }
-
       case 'invalid':
         {
           updateBooleanAttribute(this, 'invalid', isAttrTrue(newVal));
           break;
         }
-
       case 'size':
         {
           updateAttribute(this.#$filePicker, 'size', newVal);
@@ -89,67 +78,51 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
         }
     }
   }
-
   set multiple(isMultiple) {
     updateBooleanAttribute(this, 'multiple', isMultiple);
   }
-
   get multiple() {
     return getBooleanAttribute(this, 'multiple');
   }
-
   set accept(value) {
     updateAttribute(this, 'accept', value);
   }
-
   get accept() {
     return getAttribute(this, 'accept');
   }
-
   get size() {
     return getIntegerAttribute(this, 'size', null);
   }
-
   set size(value) {
     updateAttribute(this, 'size', value);
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   set placeholder(value) {
     updateAttribute(this, 'placeholder', value);
   }
-
   get placeholder() {
     return getAttribute(this, 'placeholder', '');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   set invalid(isInvalid) {
     updateBooleanAttribute(this, 'invalid', isInvalid);
   }
-
   get invalid() {
     return getBooleanAttribute(this, 'invalid');
   }
-
   #setDragEffect(shouldEnable) {
     let isValid = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     const isElementEnabled = !this.disabled;
-
     if (shouldEnable) {
       if (isElementEnabled) {
         setClass(this.#$dropArea, 'drop', true);
@@ -160,7 +133,6 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
       setClass(this.#$dropArea, 'valid', false);
     }
   }
-
   #onDragEnter = e => {
     e.stopPropagation();
     e.preventDefault();
@@ -181,38 +153,29 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
     e.stopPropagation();
     e.preventDefault();
     this.#setDragEffect(false);
-
     if (this.disabled) {
       return;
     }
-
     const dt = e.dataTransfer;
-
     if (dt === null) {
       return;
     }
-
     if (dt.files.length === 0) {
       return;
     }
-
     if (!this.multiple && dt.files.length > 1) {
       this.#dispatchInvalidEvent('multiple');
       return;
     }
-
     const files = Array.from(dt.files);
-
     if (!areFilesAccepted(files, this.accept)) {
       this.#dispatchInvalidEvent('accept');
       return;
     }
-
     if (!doFilesSatisfySize(files, this.size)) {
       this.#dispatchInvalidEvent('size');
       return;
     }
-
     this.#dispatchChangeEvent(files);
   };
   #onFilePickerChange = e => {
@@ -227,17 +190,14 @@ defineCustomElement('sinch-file-drop', class extends NectaryElement {
   #onInvalidReactHandler = e => {
     getReactEventHandler(this, 'on-invalid')?.(e);
   };
-
   #dispatchChangeEvent(files) {
     this.dispatchEvent(new CustomEvent('-change', {
       detail: files
     }));
   }
-
   #dispatchInvalidEvent(type) {
     this.dispatchEvent(new CustomEvent('-invalid', {
       detail: type
     }));
   }
-
 });

package/file-drop/utils.js

@@ -2,26 +2,21 @@ export const areFilesAccepted = (files, accept) => {
   if (accept === null) {
     return true;
   }
-
   const acceptValues = accept.split(/\s*,\s*/);
   return files.every(file => {
     return acceptValues.some(acceptValue => {
       if (acceptValue.startsWith('.')) {
         return file.name.endsWith(acceptValue);
       }
-
       if (acceptValue === 'image/*') {
         return file.type.startsWith('image/');
       }
-
       if (acceptValue === 'video/*') {
         return file.type.startsWith('video/');
       }
-
       if (acceptValue === 'audio/*') {
         return file.type.startsWith('audio/');
       }
-
       return acceptValue === file.type;
     });
   });
@@ -30,7 +25,6 @@ export const doFilesSatisfySize = (files, size) => {
   if (size === null || size <= 0) {
     return true;
   }
-
   return files.every(file => {
     return file.size <= size;
   });

package/file-picker/index.js

@@ -7,7 +7,6 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
   #$input;
   #$targetSlot;
   #$target = null;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -16,7 +15,6 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
     this.#$input.type = 'file';
     this.#$targetSlot = shadowRoot.querySelector('slot');
   }
-
   connectedCallback() {
     this.#$targetSlot.addEventListener('slotchange', this.#onTargetSlotChange);
     this.#$input.addEventListener('change', this.#onInputChange);
@@ -24,7 +22,6 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
     this.addEventListener('-invalid', this.#onInvalidReactHandler);
     this.#onTargetSlotChange();
   }
-
   disconnectedCallback() {
     this.#$targetSlot.removeEventListener('slotchange', this.#onTargetSlotChange);
     this.#$input.removeEventListener('change', this.#onInputChange);
@@ -33,47 +30,37 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
     this.#$target?.removeEventListener('-click', this.#onTargetClick);
     this.#$target = null;
   }
-
   static get observedAttributes() {
     return ['accept', 'multiple'];
   }
-
   set multiple(isMultiple) {
     updateBooleanAttribute(this, 'multiple', isMultiple);
   }
-
   get multiple() {
     return getBooleanAttribute(this, 'multiple');
   }
-
   set accept(value) {
     updateAttribute(this, 'accept', value);
   }
-
   get accept() {
     return getAttribute(this, 'accept');
   }
-
   get size() {
     return getIntegerAttribute(this, 'size', null);
   }
-
   set size(value) {
     updateAttribute(this, 'size', value);
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (newVal === oldVal) {
       return;
     }
-
     switch (name) {
       case 'multiple':
         {
           updateBooleanAttribute(this.#$input, 'multiple', isAttrTrue(newVal));
           break;
         }
-
       case 'accept':
         {
           updateAttribute(this.#$input, 'accept', newVal);
@@ -81,7 +68,6 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
         }
     }
   }
-
   #onTargetSlotChange = () => {
     this.#$target?.removeEventListener('-click', this.#onTargetClick);
     this.#$target = getFirstSlotElement(this.#$targetSlot, true);
@@ -94,16 +80,13 @@ defineCustomElement('sinch-file-picker', class extends NectaryElement {
     if (this.#$input.files === null) {
       return;
     }
-
     const files = Array.from(this.#$input.files);
-
     if (!doFilesSatisfySize(files, this.size)) {
       this.dispatchEvent(new CustomEvent('-invalid', {
         detail: 'size'
       }));
       return;
     }
-
     this.dispatchEvent(new CustomEvent('-change', {
       detail: files
     }));

package/file-picker/utils.js

@@ -2,7 +2,6 @@ export const doFilesSatisfySize = (files, size) => {
   if (size === null || size <= 0) {
     return true;
   }
-
   return files.every(file => {
     return file.size <= size;
   });

package/file-status/index.js

@@ -12,7 +12,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-file-status', class extends NectaryElement {
   #$filename;
   #$contentSlot;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -20,48 +19,38 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
     this.#$filename = shadowRoot.querySelector('#filename');
     this.#$contentSlot = shadowRoot.querySelector('slot[name="content"]');
   }
-
   connectedCallback() {
     this.#$contentSlot.addEventListener('slotchange', this.#onContentSlotChange);
     this.#onContentSlotChange();
   }
-
   disconnectedCallback() {
     this.#$contentSlot.removeEventListener('slotchange', this.#onContentSlotChange);
   }
-
   get type() {
     return getLiteralAttribute(this, typeValues, 'type');
   }
-
   set type(value) {
     updateLiteralAttribute(this, typeValues, 'type', value);
   }
-
   get filename() {
     return getAttribute(this, 'filename', '');
   }
-
   set filename(value) {
     updateAttribute(this, 'filename', value);
   }
-
   static get observedAttributes() {
     return ['filename', 'type'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'type':
         {
           assertType(newVal);
           break;
         }
-
       case 'filename':
         {
           this.#$filename.textContent = newVal;
@@ -69,7 +58,6 @@ defineCustomElement('sinch-file-status', class extends NectaryElement {
         }
     }
   }
-
   #onContentSlotChange = () => {
     updateBooleanAttribute(this.#$filename, 'emphasized', this.#$contentSlot.assignedElements().length > 0);
   };

package/grid/index.js

@@ -8,5 +8,4 @@ defineCustomElement('sinch-grid', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
 });

package/grid-item/index.js

@@ -8,37 +8,28 @@ defineCustomElement('sinch-grid-item', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
   get s() {
     return getIntegerAttribute(this, 's', null);
   }
-
   set s(value) {
     updateIntegerAttribute(this, 's', value);
   }
-
   get m() {
     return getIntegerAttribute(this, 'm', null);
   }
-
   set m(value) {
     updateIntegerAttribute(this, 'm', value);
   }
-
   get l() {
     return getIntegerAttribute(this, 'l', null);
   }
-
   set l(value) {
     updateIntegerAttribute(this, 'l', value);
   }
-
   get xl() {
     return getIntegerAttribute(this, 'xl', null);
   }
-
   set xl(value) {
     updateIntegerAttribute(this, 'xl', value);
   }
-
 });

package/help-tooltip/index.js

@@ -6,60 +6,46 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-help-tooltip', class extends NectaryElement {
   #$tooltip;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$tooltip = shadowRoot.querySelector('sinch-tooltip');
   }
-
   static get observedAttributes() {
     return ['text', 'width', 'orientation', 'inverted'];
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get width() {
     return getIntegerAttribute(this, 'width');
   }
-
   set width(value) {
     updateIntegerAttribute(this, 'width', value);
   }
-
   get inverted() {
     return getBooleanAttribute(this, 'inverted');
   }
-
   set inverted(isInverted) {
     updateBooleanAttribute(this, 'inverted', isInverted);
   }
-
   get orientation() {
     return getAttribute(this, 'orientation', 'top');
   }
-
   set orientation(value) {
     updateAttribute(this, 'orientation', value);
   }
-
   get footprintRect() {
     return this.#$tooltip.footprintRect;
   }
-
   get tooltipRect() {
     return this.#$tooltip.tooltipRect;
   }
-
   attributeChangedCallback(name, _, newVal) {
     updateAttribute(this.#$tooltip, name, newVal);
   }
-
 });

package/horizontal-stepper/index.js

@@ -7,7 +7,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-horizontal-stepper', class extends NectaryElement {
   #$itemsSlot;
   #$progressBar;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -15,26 +14,21 @@ defineCustomElement('sinch-horizontal-stepper', class extends NectaryElement {
     this.#$itemsSlot = shadowRoot.querySelector('slot');
     this.#$progressBar = shadowRoot.querySelector('#bar');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'progressbar');
     this.setAttribute('aria-valuemin', '0');
     this.#$itemsSlot.addEventListener('slotchange', this.#updateItems);
   }
-
   disconnectedCallback() {
     this.#$itemsSlot.removeEventListener('slotchange', this.#updateItems);
   }
-
   static get observedAttributes() {
     return ['index'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'index':
         {
@@ -43,24 +37,19 @@ defineCustomElement('sinch-horizontal-stepper', class extends NectaryElement {
         }
     }
   }
-
   set index(value) {
     updateAttribute(this, 'index', value);
   }
-
   get index() {
     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) {
@@ -69,7 +58,6 @@ defineCustomElement('sinch-horizontal-stepper', class extends NectaryElement {
         $el.removeAttribute('data-progress');
       }
     }
-
     const valueIndex = clampNumber(activeIndex - 1, 0, $items.length - 1);
     this.#$progressBar.style.width = `${Math.floor(valueIndex / Math.max(1, $items.length - 1) * 100)}%`;
     this.setAttribute('aria-valuemax', String($items.length));

package/horizontal-stepper-item/index.js

@@ -9,7 +9,6 @@ defineCustomElement('sinch-horizontal-stepper-item', class extends NectaryElemen
   #$label;
   #$description;
   #$circleText;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -18,15 +17,11 @@ defineCustomElement('sinch-horizontal-stepper-item', class extends NectaryElemen
     this.#$description = shadowRoot.querySelector('#description');
     this.#$circleText = shadowRoot.querySelector('#circle-text');
   }
-
   connectedCallback() {}
-
   disconnectedCallback() {}
-
   static get observedAttributes() {
     return ['label', 'description', 'data-index'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case 'label':
@@ -34,13 +29,11 @@ defineCustomElement('sinch-horizontal-stepper-item', class extends NectaryElemen
           this.#$label.textContent = newVal;
           break;
         }
-
       case 'description':
         {
           this.#$description.textContent = newVal;
           break;
         }
-
       case 'data-index':
         {
           this.#$circleText.textContent = newVal;
@@ -48,29 +41,22 @@ defineCustomElement('sinch-horizontal-stepper-item', class extends NectaryElemen
         }
     }
   }
-
   set label(value) {
     updateAttribute(this, 'label', value);
   }
-
   get label() {
     return getAttribute(this, 'label', '');
   }
-
   set description(value) {
     updateAttribute(this, 'description', value);
   }
-
   get description() {
     return getAttribute(this, 'description', '');
   }
-
   get status() {
     return getLiteralAttribute(this, statusValues, 'status', null);
   }
-
   set status(value) {
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
-
 });