@nectary/components 0.41.0 → 0.42.0

package/segmented-icon-control/index.js

@@ -4,56 +4,45 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement {
   #$slot;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$slot = shadowRoot.querySelector('slot');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'tablist');
     this.#$slot.addEventListener('slotchange', this.#onSlotChange);
     this.#$slot.addEventListener('option-change', this.#onOptionChange);
     this.addEventListener('-change', this.#onChangeReactHandler);
   }
-
   disconnectedCallback() {
     this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
     this.#$slot.removeEventListener('option-change', this.#onOptionChange);
     this.removeEventListener('-change', this.#onChangeReactHandler);
   }
-
   static get observedAttributes() {
     return ['value'];
   }
-
   get nodeName() {
     return 'select';
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
     return getAttribute(this, 'value', '');
   }
-
   set multiple(isMultiple) {
     updateBooleanAttribute(this, 'multiple', isMultiple);
   }
-
   get multiple() {
     return getBooleanAttribute(this, 'multiple');
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'value':
         {
@@ -62,7 +51,6 @@ defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement
         }
     }
   }
-
   #onSlotChange = () => {
     this.#onValueChange(this.value);
   };
@@ -79,25 +67,21 @@ defineCustomElement('sinch-segmented-icon-control', class extends NectaryElement
       detail
     }));
   };
-
   #onValueChange(csv) {
     if (this.multiple) {
       const values = getCsvSet(csv);
-
       for (const $option of this.#$slot.assignedElements()) {
         const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {
       const value = getFirstCsvValue(csv);
-
       for (const $option of this.#$slot.assignedElements()) {
         const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     }
   }
-
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/segmented-icon-control-option/index.js

@@ -4,14 +4,12 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-icon-control-option', class extends NectaryElement {
   #$button;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$button = shadowRoot.querySelector('#button');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'tab');
     this.#$button.addEventListener('click', this.#onButtonClick);
@@ -20,7 +18,6 @@ defineCustomElement('sinch-segmented-icon-control-option', class extends Nectary
     this.addEventListener('-focus', this.#onFocusReactHandler);
     this.addEventListener('-blur', this.#onBlurReactHandler);
   }
-
   disconnectedCallback() {
     this.#$button.removeEventListener('click', this.#onButtonClick);
     this.#$button.removeEventListener('focus', this.#onButtonFocus);
@@ -28,27 +25,21 @@ defineCustomElement('sinch-segmented-icon-control-option', class extends Nectary
     this.removeEventListener('-focus', this.#onFocusReactHandler);
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
-
   static get observedAttributes() {
     return ['data-checked', 'disabled'];
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
     return getAttribute(this, 'value', '');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'data-checked':
@@ -56,7 +47,6 @@ defineCustomElement('sinch-segmented-icon-control-option', class extends Nectary
           updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
-
       case 'disabled':
         {
           this.#$button.disabled = isAttrTrue(newVal);
@@ -64,19 +54,15 @@ defineCustomElement('sinch-segmented-icon-control-option', class extends Nectary
         }
     }
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$button.focus();
   }
-
   blur() {
     this.#$button.blur();
   }
-
   #onButtonClick = e => {
     e.stopPropagation();
     this.dispatchEvent(new CustomEvent('option-change', {

package/select-button/index.js

@@ -8,7 +8,6 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
   #$button;
   #$text;
   #controller = null;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -16,7 +15,6 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
     this.#$button = shadowRoot.querySelector('#button');
     this.#$text = shadowRoot.querySelector('#text');
   }
-
   connectedCallback() {
     this.#controller = new AbortController();
     const {
@@ -42,52 +40,40 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
       signal
     });
   }
-
   disconnectedCallback() {
     this.#controller.abort();
   }
-
   static get observedAttributes() {
     return ['text', 'placeholder', 'invalid', 'disabled'];
   }
-
   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 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');
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'text':
         {
@@ -95,18 +81,14 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
           this.#$text.textContent = value.length > 0 ? value : this.placeholder;
           break;
         }
-
       case 'placeholder':
         {
           const value = this.text;
-
           if (value.length === 0) {
             this.#$text.textContent = newVal ?? '';
           }
-
           break;
         }
-
       case 'invalid':
         {
           const isInvalid = isAttrTrue(newVal);
@@ -114,7 +96,6 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
           updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
           break;
         }
-
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
@@ -124,19 +105,15 @@ defineCustomElement('sinch-select-button', class extends NectaryElement {
         }
     }
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$button.focus();
   }
-
   blur() {
     this.#$button.blur();
   }
-
   #onButtonFocus = () => {
     this.dispatchEvent(new CustomEvent('-focus'));
   };

package/select-menu/index.js

@@ -8,7 +8,6 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #$optionSlot;
   #$listbox;
   #controller = null;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -16,7 +15,6 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     this.#$optionSlot = shadowRoot.querySelector('slot');
     this.#$listbox = shadowRoot.querySelector('#listbox');
   }
-
   connectedCallback() {
     this.#controller = new AbortController();
     const {
@@ -51,46 +49,36 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
     dispatchContextConnectEvent(this, 'keydown');
     dispatchContextConnectEvent(this, 'visibility');
   }
-
   disconnectedCallback() {
     dispatchContextDisconnectEvent(this, 'keydown');
     dispatchContextDisconnectEvent(this, 'visibility');
     this.#controller.abort();
   }
-
   static get observedAttributes() {
     return ['value', 'rows', 'multiple'];
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
     return getAttribute(this, 'value', '');
   }
-
   set rows(value) {
     updateIntegerAttribute(this, 'rows', value);
   }
-
   get rows() {
     return getIntegerAttribute(this, 'rows', null);
   }
-
   set multiple(isMultiple) {
     updateBooleanAttribute(this, 'multiple', isMultiple);
   }
-
   get multiple() {
     return getBooleanAttribute(this, 'multiple');
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'multiple':
         {
@@ -98,13 +86,11 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
           updateExplicitBooleanAttribute(this, 'aria-multiselectable', isAttrTrue(newVal));
           break;
         }
-
       case 'value':
         {
           this.#onValueChange(newVal ?? '');
           break;
         }
-
       case 'rows':
         {
           this.#$listbox.style.maxHeight = attrValueToPixels(newVal, {
@@ -115,10 +101,8 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
         }
     }
   }
-
   #onListboxMousedown = e => {
     const $elem = e.target;
-
     if (!getBooleanAttribute($elem, 'disabled')) {
       this.#dispatchChangeEvent($elem);
     }
@@ -128,7 +112,6 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   };
   #onListboxClick = e => {
     const $elem = e.target;
-
     if (!getBooleanAttribute($elem, 'disabled')) {
       this.#selectOption($elem);
     }
@@ -146,29 +129,24 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
   #onListboxKeyDown = e => {
     this.#handleKeydown(e);
   };
-
   #handleKeydown(e) {
     switch (e.code) {
       case 'Space':
       case 'Enter':
         {
           const $option = this.#findSelectedOption();
-
           if ($option !== null) {
             e.preventDefault();
             this.#dispatchChangeEvent($option);
           }
-
           break;
         }
-
       case 'ArrowUp':
         {
           e.preventDefault();
           this.#selectOption(this.#getPrevOption());
           break;
         }
-
       case 'ArrowDown':
         {
           e.preventDefault();
@@ -177,100 +155,76 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
         }
     }
   }
-
   #onOptionSlotChange = () => {
     this.#onValueChange(this.value);
   };
-
   #onValueChange(csv) {
     if (this.multiple) {
       const values = getCsvSet(csv);
-
       for (const $option of this.#getOptionElements()) {
         const isChecked = !getBooleanAttribute($option, 'disabled') && values.has(getAttribute($option, 'value', ''));
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     } else {
       const value = getFirstCsvValue(csv);
-
       for (const $option of this.#getOptionElements()) {
         const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
         updateBooleanAttribute($option, 'data-checked', isChecked);
       }
     }
   }
-
   #getFirstOption() {
     const $options = this.#getOptionElements();
-
     for (let i = 0; i < $options.length; i++) {
       const el = $options[i];
-
       if (!getBooleanAttribute(el, 'disabled')) {
         return el;
       }
     }
-
     return null;
   }
-
   #getLastOption() {
     const $options = this.#getOptionElements();
-
     for (let i = $options.length - 1; i >= 0; i--) {
       const el = $options[i];
-
       if (!getBooleanAttribute(el, 'disabled')) {
         return el;
       }
     }
-
     return null;
   }
-
   #getNextOption() {
     const index = this.#getSelectedOptionIndex();
-
     if (index !== null) {
       const $options = this.#getOptionElements();
-
       for (let i = 1; i <= $options.length; i++) {
         const el = $options[(i + index) % $options.length];
-
         if (!getBooleanAttribute(el, 'disabled')) {
           return el;
         }
       }
     }
-
     return this.#getFirstOption();
   }
-
   #getPrevOption() {
     const index = this.#getSelectedOptionIndex();
-
     if (index !== null) {
       const $options = this.#getOptionElements();
-
       for (let i = 1; i <= $options.length; i++) {
         const el = $options[(index - i + $options.length) % $options.length];
-
         if (!getBooleanAttribute(el, 'disabled')) {
           return el;
         }
       }
     }
-
     return this.#getLastOption();
   }
-
   #selectOption($option) {
     const hasRows = this.hasAttribute('rows');
-
     for (const $op of this.#getOptionElements()) {
       const isSelected = $op === $option;
-      updateBooleanAttribute($op, 'data-selected', isSelected);
 
+      updateBooleanAttribute($op, 'data-selected', isSelected);
       if (isSelected && hasRows) {
         $op.scrollIntoView?.({
           block: 'nearest'
@@ -278,68 +232,52 @@ defineCustomElement('sinch-select-menu', class extends NectaryElement {
       }
     }
   }
-
   #getOptionElements() {
     return this.#$optionSlot.assignedElements();
   }
-
   #getSelectedOptionIndex() {
     const elements = this.#getOptionElements();
-
     for (let i = 0; i < elements.length; i++) {
       const el = elements[i];
-
       if (!getBooleanAttribute(el, 'disabled') && getBooleanAttribute(el, 'data-selected')) {
         return i;
       }
     }
-
     return null;
   }
-
   #findSelectedOption() {
     const elements = this.#getOptionElements();
-
     for (const el of elements) {
       if (!getBooleanAttribute(el, 'disabled') && getBooleanAttribute(el, 'data-selected')) {
         return el;
       }
     }
-
     return null;
   }
-
   #findCheckedOption() {
     const elements = this.#getOptionElements();
     const value = this.multiple ? getFirstCsvValue(this.value) : this.value;
-
     for (const $el of elements) {
       if (!getBooleanAttribute($el, 'disabled') && getAttribute($el, 'value') === value) {
         return $el;
       }
     }
-
     return null;
   }
-
   #dispatchChangeEvent($opt) {
     if ($opt === null) {
       return;
     }
-
     const value = $opt.value;
     const result = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($opt, 'data-checked')) : value;
     this.dispatchEvent(new CustomEvent('-change', {
       detail: result
     }));
   }
-
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };
-
   get focusable() {
     return true;
   }
-
 });

package/select-menu-option/index.js

@@ -6,40 +6,33 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 export class SelectMenuOption extends NectaryElement {
   #$content;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$content = shadowRoot.querySelector('#content');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'option');
   }
-
   static get observedAttributes() {
     return ['text', 'data-checked', 'disabled'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'text':
         {
           this.#$content.textContent = newVal;
           break;
         }
-
       case 'data-checked':
         {
           updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
-
       case 'disabled':
         {
           updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
@@ -47,30 +40,23 @@ export class SelectMenuOption extends NectaryElement {
         }
     }
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
     return getAttribute(this, 'value', '');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
 }
 defineCustomElement('sinch-select-menu-option', SelectMenuOption);

package/spinner/index.js

@@ -9,18 +9,14 @@ defineCustomElement('sinch-spinner', class extends NectaryElement {
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
   }
-
   connectedCallback() {
     this.setAttribute('aria-live', 'polite');
     this.setAttribute('aria-busy', 'true');
   }
-
   set type(value) {
     updateLiteralAttribute(this, spinnerTypes, 'type', value);
   }
-
   get type() {
     return getLiteralAttribute(this, spinnerTypes, 'type', 'medium');
   }
-
 });

package/stop-events/index.js

@@ -4,23 +4,18 @@ defineCustomElement('sinch-stop-events', class extends HTMLElement {
     super();
     this.style.display = 'contents';
   }
-
   connectedCallback() {
     const events = getCsvSet(this.getAttribute('events'));
-
     for (const event of events) {
       this.addEventListener(event, this.#stopEvent);
     }
   }
-
   disconnectedCallback() {
     const events = getCsvSet(this.getAttribute('events'));
-
     for (const event of events) {
       this.removeEventListener(event, this.#stopEvent);
     }
   }
-
   #stopEvent = e => {
     e.stopPropagation();
   };

package/table/index.js

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