@nectary/components 0.41.1 → 0.42.1

package/progress/index.js

@@ -11,7 +11,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-progress', class extends NectaryElement {
   #$bar;
   #$text;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -19,36 +18,28 @@ defineCustomElement('sinch-progress', class extends NectaryElement {
     this.#$bar = shadowRoot.querySelector('#bar');
     this.#$text = shadowRoot.querySelector('#text');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'progressbar');
   }
-
   get value() {
     return getIntegerAttribute(this, 'value', 0);
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get detailed() {
     return getBooleanAttribute(this, 'detailed');
   }
-
   set detailed(isDetailed) {
     updateBooleanAttribute(this, 'detailed', isDetailed);
   }
-
   static get observedAttributes() {
     return ['value'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'value':
         {
@@ -64,5 +55,4 @@ defineCustomElement('sinch-progress', class extends NectaryElement {
         }
     }
   }
-
 });

package/radio/index.js

@@ -4,14 +4,12 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-radio', 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', 'radiogroup');
     this.#$slot.addEventListener('slotchange', this.#onSlotChange);
@@ -19,35 +17,28 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
     this.#$slot.addEventListener('option-change', this.#onOptionChange);
     this.addEventListener('-change', this.#onChangeReactHandler);
   }
-
   disconnectedCallback() {
     this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
     this.#$slot.removeEventListener('keydown', this.#onOptionKeyDown);
     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', '');
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'value':
         {
@@ -56,7 +47,6 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
         }
     }
   }
-
   #onOptionKeyDown = e => {
     switch (e.code) {
       case 'ArrowUp':
@@ -64,26 +54,21 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
         {
           e.preventDefault();
           const $option = this.#getPrevOption();
-
           if ($option !== null) {
             $option.focus();
             this.#dispatchChangeEvent($option.value);
           }
-
           break;
         }
-
       case 'ArrowDown':
       case 'ArrowRight':
         {
           e.preventDefault();
           const $option = this.#getNextOption();
-
           if ($option !== null) {
             $option.focus();
             this.#dispatchChangeEvent($option.value);
           }
-
           break;
         }
     }
@@ -95,14 +80,12 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
     e.stopPropagation();
     this.#dispatchChangeEvent(e.detail);
   };
-
   #onValueChange(value) {
     for (const $option of this.#$slot.assignedElements()) {
       const isChecked = !getBooleanAttribute($option, 'disabled') && value === getAttribute($option, 'value', '');
       updateBooleanAttribute($option, 'checked', isChecked);
     }
   }
-
   #dispatchChangeEvent(value) {
     this.dispatchEvent(new CustomEvent('change', {
       detail: value,
@@ -112,59 +95,46 @@ defineCustomElement('sinch-radio', class extends NectaryElement {
       detail: value
     }));
   }
-
   #getFirstOption() {
     for (const $option of this.#$slot.assignedElements()) {
       if ($option.disabled !== true) {
         return $option;
       }
     }
-
     return null;
   }
-
   #getLastOption() {
     for (const $option of this.#$slot.assignedElements().reverse()) {
       if ($option.disabled !== true) {
         return $option;
       }
     }
-
     return null;
   }
-
   #getNextOption() {
     const $options = this.#getEnabledRadioElements();
     const $selectedOption = this.#findSelectedOption($options);
     const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-
     if (currentIndex < 0) {
       return this.#getFirstOption();
     }
-
     return $options[(currentIndex + 1) % $options.length];
   }
-
   #getPrevOption() {
     const $options = this.#getEnabledRadioElements();
     const $selectedOption = this.#findSelectedOption($options);
     const currentIndex = $selectedOption !== null ? $options.indexOf($selectedOption) : -1;
-
     if (currentIndex < 0) {
       return this.#getLastOption();
     }
-
     return $options[(currentIndex - 1 + $options.length) % $options.length];
   }
-
   #getEnabledRadioElements() {
     return this.#$slot.assignedElements().filter(el => el.disabled !== true);
   }
-
   #findSelectedOption(elements) {
     return elements.find(el => el.checked) ?? null;
   }
-
   #onChangeReactHandler = e => {
     getReactEventHandler(this, 'on-change')?.(e);
   };

package/radio-option/index.js

@@ -5,7 +5,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-radio-option', class extends NectaryElement {
   #$input;
   #$label;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -13,52 +12,40 @@ defineCustomElement('sinch-radio-option', class extends NectaryElement {
     this.#$input = shadowRoot.querySelector('input');
     this.#$label = shadowRoot.querySelector('label');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'radio');
     this.#$input.addEventListener('input', this.#onInput);
   }
-
   disconnectedCallback() {
     this.#$input.removeEventListener('input', this.#onInput);
   }
-
   static get observedAttributes() {
     return ['checked', 'disabled', 'text', 'value'];
   }
-
   set checked(isChecked) {
     updateBooleanAttribute(this, 'checked', isChecked);
   }
-
   get checked() {
     return getBooleanAttribute(this, 'checked');
   }
-
   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');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'text':
@@ -66,14 +53,12 @@ defineCustomElement('sinch-radio-option', class extends NectaryElement {
           this.#$label.textContent = newVal;
           break;
         }
-
       case 'checked':
         {
           this.#$input.checked = isAttrTrue(newVal);
           updateAttribute(this, 'aria-checked', isAttrTrue(newVal));
           break;
         }
-
       case 'disabled':
         {
           const isDisabled = isAttrTrue(newVal);
@@ -81,7 +66,6 @@ defineCustomElement('sinch-radio-option', class extends NectaryElement {
           updateBooleanAttribute(this, 'disabled', isDisabled);
           break;
         }
-
       case 'value':
         {
           this.#$input.value = newVal ?? '';
@@ -89,19 +73,15 @@ defineCustomElement('sinch-radio-option', class extends NectaryElement {
         }
     }
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$input.focus();
   }
-
   blur() {
     this.#$input.blur();
   }
-
   #onInput = e => {
     e.stopPropagation();
     this.#$input.checked = false;

package/segment/index.js

@@ -15,7 +15,6 @@ defineCustomElement('sinch-segment', class extends NectaryElement {
   #$collapseWrapper;
   #$actionSlot;
   #$actionWrapper;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -30,7 +29,6 @@ defineCustomElement('sinch-segment', class extends NectaryElement {
     this.#$collapseWrapper = shadowRoot.querySelector('#collapse');
     this.#$actionWrapper = shadowRoot.querySelector('#action');
   }
-
   connectedCallback() {
     this.#$previewSlot.addEventListener('slotchange', this.#onPreviewSlotChange);
     this.#$infoSlot.addEventListener('slotchange', this.#onInfoSlotChange);
@@ -41,18 +39,15 @@ defineCustomElement('sinch-segment', class extends NectaryElement {
     this.#onCollapseSlotChange();
     this.#onActionSlotChange();
   }
-
   disconnectedCallback() {
     this.#$previewSlot.removeEventListener('slotchange', this.#onPreviewSlotChange);
     this.#$infoSlot.removeEventListener('slotchange', this.#onInfoSlotChange);
     this.#$collapseSlot.removeEventListener('slotchange', this.#onCollapseSlotChange);
     this.#$actionSlot.removeEventListener('slotchange', this.#onActionSlotChange);
   }
-
   static get observedAttributes() {
     return ['caption', 'collapsed', 'size'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'caption':
@@ -60,13 +55,11 @@ defineCustomElement('sinch-segment', class extends NectaryElement {
           updateAttribute(this.#$caption, 'text', newVal);
           break;
         }
-
       case 'collapsed':
         {
           updateBooleanAttribute(this, 'collapsed', isAttrTrue(newVal));
           break;
         }
-
       case 'size':
         {
           assertSize(newVal);
@@ -76,36 +69,28 @@ defineCustomElement('sinch-segment', class extends NectaryElement {
         }
     }
   }
-
   set caption(caption) {
     updateAttribute(this, 'caption', caption);
   }
-
   get caption() {
     return getAttribute(this, 'caption', '');
   }
-
   set collapsed(isChecked) {
     updateBooleanAttribute(this, 'collapsed', isChecked);
   }
-
   get collapsed() {
     return getBooleanAttribute(this, 'collapsed');
   }
-
   get size() {
     return getLiteralAttribute(this, sizeValues, 'size', 'm');
   }
-
   set size(value) {
     updateLiteralAttribute(this, sizeValues, 'size', value);
   }
-
   get collapseButtonRect() {
     const $collapseButton = this.#$collapseSlot.assignedElements()[0];
     return $collapseButton != null ? getRect($collapseButton) : null;
   }
-
   #onPreviewSlotChange = () => {
     setClass(this.#$previewWrapper, 'empty', this.#$previewSlot.assignedElements().length === 0);
   };

package/segment-collapse/index.js

@@ -7,29 +7,24 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segment-collapse', 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', 'checkbox');
     this.#$button.addEventListener('click', this.#onClick);
     this.addEventListener('-change', this.#onChangeReactHandler);
   }
-
   disconnectedCallback() {
     this.#$button.removeEventListener('click', this.#onClick);
     this.removeEventListener('-change', this.#onChangeReactHandler);
   }
-
   static get observedAttributes() {
     return ['value'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     switch (name) {
       case 'value':
@@ -39,35 +34,27 @@ defineCustomElement('sinch-segment-collapse', class extends NectaryElement {
         }
     }
   }
-
   get type() {
     return 'text';
   }
-
   get nodeName() {
     return 'input';
   }
-
   set value(isChecked) {
     updateBooleanAttribute(this, 'value', isChecked);
   }
-
   get value() {
     return getBooleanAttribute(this, 'value');
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$button.focus();
   }
-
   blur() {
     this.#$button.blur();
   }
-
   #onClick = () => {
     const detail = !this.value;
     this.dispatchEvent(new CustomEvent('change', {

package/segmented-control/index.js

@@ -4,48 +4,39 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-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('option-change', this.#onOptionChange);
     this.#$slot.addEventListener('slotchange', this.#onSlotChange);
     this.addEventListener('-change', this.#onChangeReactHandler);
   }
-
   disconnectedCallback() {
     this.#$slot.removeEventListener('option-change', this.#onOptionChange);
     this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
     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', '');
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'value':
         {
@@ -54,7 +45,6 @@ defineCustomElement('sinch-segmented-control', class extends NectaryElement {
         }
     }
   }
-
   #onSlotChange = () => {
     this.#onValueChange(this.value);
   };
@@ -69,14 +59,12 @@ defineCustomElement('sinch-segmented-control', class extends NectaryElement {
       detail
     }));
   };
-
   #onValueChange(value) {
     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-control-option/index.js

@@ -5,7 +5,6 @@ template.innerHTML = templateHTML;
 defineCustomElement('sinch-segmented-control-option', class extends NectaryElement {
   #$button;
   #$label;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -13,7 +12,6 @@ defineCustomElement('sinch-segmented-control-option', class extends NectaryEleme
     this.#$button = shadowRoot.querySelector('#button');
     this.#$label = shadowRoot.querySelector('#content');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'tab');
     this.#$button.addEventListener('click', this.#onButtonClick);
@@ -22,7 +20,6 @@ defineCustomElement('sinch-segmented-control-option', class extends NectaryEleme
     this.addEventListener('-focus', this.#onFocusReactHandler);
     this.addEventListener('-blur', this.#onBlurReactHandler);
   }
-
   disconnectedCallback() {
     this.#$button.removeEventListener('click', this.#onButtonClick);
     this.#$button.removeEventListener('focus', this.#onButtonFocus);
@@ -30,53 +27,42 @@ defineCustomElement('sinch-segmented-control-option', class extends NectaryEleme
     this.removeEventListener('-focus', this.#onFocusReactHandler);
     this.removeEventListener('-blur', this.#onBlurReactHandler);
   }
-
   static get observedAttributes() {
     return ['data-checked', 'disabled', 'text'];
   }
-
   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');
   }
-
   set text(value) {
     updateAttribute(this, 'text', value);
   }
-
   get text() {
     return getAttribute(this, 'text', '');
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'text':
         {
           this.#$label.textContent = newVal;
           break;
         }
-
       case 'data-checked':
         {
           updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           break;
         }
-
       case 'disabled':
         {
           this.#$button.disabled = isAttrTrue(newVal);
@@ -84,19 +70,15 @@ defineCustomElement('sinch-segmented-control-option', class extends NectaryEleme
         }
     }
   }
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$button.focus();
   }
-
   blur() {
     this.#$button.blur();
   }
-
   #onButtonClick = e => {
     e.stopPropagation();
     this.dispatchEvent(new CustomEvent('option-change', {