@nectary/components 0.41.0 → 0.42.0

package/accordion/index.js

@@ -4,56 +4,45 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-accordion', class extends NectaryElement {
   #$slot;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$slot = shadowRoot.querySelector('slot');
   }
-
   static get observedAttributes() {
     return ['value'];
   }
-
   connectedCallback() {
     this.setAttribute('aria-label', 'accordion');
     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);
   }
-
   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-accordion', class extends NectaryElement {
         }
     }
   }
-
   #onSlotChange = () => {
     this.#onValueChange(this.value);
   };
@@ -79,25 +67,21 @@ defineCustomElement('sinch-accordion', class extends NectaryElement {
       detail: result
     }));
   };
-
   #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/accordion/types.d.ts

@@ -1,16 +1,24 @@
 import type { TSinchElementReact } from '../types';
 import type { SyntheticEvent } from 'react';
 export declare type TSinchAccordionElement = HTMLElement & {
+    /** Value */
     value: string;
+    /** Allows to expand multiple items simultanously */
     multiple: boolean;
+    /** Change value event */
     addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Value */
     setAttribute(name: 'value', value: string): void;
+    /** Allows to expand multiple items simultanously */
     setAttribute(name: 'multiple', value: ''): void;
 };
 export declare type TSinchAccordionReact = TSinchElementReact<TSinchAccordionElement> & {
-    multiple?: boolean;
+    /** Value */
     value: string;
+    multiple?: boolean;
+    /** Allows to expand multiple items simultanously */
     /** @deprecated */
     onChange?: (e: SyntheticEvent<TSinchAccordionElement, CustomEvent<string>>) => void;
+    /** Change value handler */
     'on-change'?: (e: CustomEvent<string>) => void;
 };

package/accordion-item/index.js

@@ -8,7 +8,6 @@ defineCustomElement('sinch-accordion-item', class extends NectaryElement {
   #$button;
   #$buttonContent;
   #$optionalText;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -17,83 +16,65 @@ defineCustomElement('sinch-accordion-item', class extends NectaryElement {
     this.#$buttonContent = shadowRoot.querySelector('#title');
     this.#$optionalText = shadowRoot.querySelector('#optional');
   }
-
   connectedCallback() {
     this.#$button.addEventListener('click', this.#onButtonClick);
   }
-
   disconnectedCallback() {
     this.#$button.removeEventListener('click', this.#onButtonClick);
   }
-
   static get observedAttributes() {
     return ['label', 'disabled', 'data-checked', 'optionaltext'];
   }
-
   set value(value) {
     updateAttribute(this, 'value', value);
   }
-
   get value() {
     return getAttribute(this, 'value', '');
   }
-
   set label(value) {
     updateAttribute(this, 'label', value);
   }
-
   get label() {
     return getAttribute(this, 'label', '');
   }
-
   set disabled(isDisabled) {
     updateBooleanAttribute(this, 'disabled', isDisabled);
   }
-
   get disabled() {
     return getBooleanAttribute(this, 'disabled');
   }
-
   get status() {
     return getLiteralAttribute(this, statusValues, 'status', null);
   }
-
   set status(value) {
     updateLiteralAttribute(this, statusValues, 'status', value);
   }
-
   set optionalText(value) {
     updateAttribute(this, 'optionaltext', value);
   }
-
   get optionalText() {
     return getAttribute(this, 'optionaltext');
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'label':
         {
           this.#$buttonContent.textContent = newVal;
           break;
         }
-
       case 'disabled':
         {
           this.#$button.disabled = isAttrTrue(newVal);
           break;
         }
-
       case 'data-checked':
         {
           updateExplicitBooleanAttribute(this.#$button, 'aria-expanded', isAttrTrue(newVal));
           break;
         }
-
       case 'optionaltext':
         {
           this.#$optionalText.textContent = newVal;
@@ -101,7 +82,6 @@ defineCustomElement('sinch-accordion-item', class extends NectaryElement {
         }
     }
   }
-
   #onButtonClick = e => {
     e.stopPropagation();
     this.dispatchEvent(new CustomEvent('option-change', {
@@ -109,17 +89,13 @@ defineCustomElement('sinch-accordion-item', class extends NectaryElement {
       detail: this.value
     }));
   };
-
   get focusable() {
     return true;
   }
-
   focus() {
     this.#$button.focus();
   }
-
   blur() {
     this.#$button.blur();
   }
-
 });

package/accordion-item/types.d.ts

@@ -1,21 +1,36 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchAccordionStatusType = 'info' | 'success' | 'warn' | 'error';
 export declare type TSinchAccordionItemElement = HTMLElement & {
+    /** Value */
     value: string;
+    /** Label */
     label: string;
+    /** Optional text on the right side */
     optionalText: string | null;
-    disabled: boolean;
+    /** Status */
     status: TSinchAccordionStatusType | null;
+    /** Disabled */
+    disabled: boolean;
+    /** Value */
     setAttribute(name: 'value', value: string): void;
+    /** Label */
     setAttribute(name: 'label', value: string): void;
+    /** Optional text on the right side */
     setAttribute(name: 'optionaltext', value: string): void;
-    setAttribute(name: 'disabled', value: ''): void;
+    /** Status */
     setAttribute(name: 'status', value: TSinchAccordionStatusType): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
 };
 export declare type TSinchAccordionItemReact = TSinchElementReact<TSinchAccordionItemElement> & {
+    /** Value */
     value: string;
+    /** Label */
     label: string;
+    /** Optional text on the right side */
     optionalText?: string;
-    disabled?: boolean;
+    /** Status */
     status?: TSinchAccordionStatusType;
+    /** Disabled */
+    disabled?: boolean;
 };

package/action-menu/index.js

@@ -9,7 +9,6 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
   #$optionSlot;
   #$listbox;
   #controller = null;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -17,7 +16,6 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
     this.#$optionSlot = shadowRoot.querySelector('slot');
     this.#$listbox = shadowRoot.querySelector('#listbox');
   }
-
   connectedCallback() {
     this.#controller = new AbortController();
     const {
@@ -43,30 +41,24 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
     dispatchContextConnectEvent(this, 'keydown');
     dispatchContextConnectEvent(this, 'visibility');
   }
-
   disconnectedCallback() {
     dispatchContextDisconnectEvent(this, 'keydown');
     dispatchContextDisconnectEvent(this, 'visibility');
     this.#controller.abort();
   }
-
   static get observedAttributes() {
     return ['rows'];
   }
-
   set rows(value) {
     updateIntegerAttribute(this, 'rows', value);
   }
-
   get rows() {
     return getIntegerAttribute(this, 'rows', null);
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'rows':
         {
@@ -78,7 +70,6 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
         }
     }
   }
-
   #onListboxBlur = () => {
     this.#selectOption(null);
   };
@@ -102,28 +93,23 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
       });
     }
   };
-
   #handleKeydown(e) {
     switch (e.code) {
       case 'Enter':
         {
           const $opt = this.#findSelectedOption();
-
           if ($opt !== null) {
             e.preventDefault();
             $opt.click();
           }
-
           break;
         }
-
       case 'ArrowUp':
         {
           e.preventDefault();
           this.#selectOption(this.#getPrevOption());
           break;
         }
-
       case 'ArrowDown':
         {
           e.preventDefault();
@@ -132,78 +118,58 @@ defineCustomElement('sinch-action-menu', class extends NectaryElement {
         }
     }
   }
-
   #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'
@@ -211,39 +177,29 @@ defineCustomElement('sinch-action-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, 'data-selected')) {
         return el;
       }
     }
-
     return null;
   }
-
   get focusable() {
     return true;
   }
-
 });

package/action-menu-option/index.js

@@ -7,7 +7,6 @@ defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends N
   #$wrapper;
   #$content;
   #controller = null;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
@@ -15,7 +14,6 @@ defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends N
     this.#$wrapper = shadowRoot.querySelector('#wrapper');
     this.#$content = shadowRoot.querySelector('#content');
   }
-
   connectedCallback() {
     this.#controller = new AbortController();
     const {
@@ -29,76 +27,60 @@ defineCustomElement('sinch-action-menu-option', class ActionMenuOption extends N
       signal
     });
   }
-
   disconnectedCallback() {
     this.#controller.abort();
   }
-
   static get observedAttributes() {
     return ['text', 'disabled', 'data-selected'];
   }
-
   attributeChangedCallback(name, oldVal, newVal) {
     if (oldVal === newVal) {
       return;
     }
-
     switch (name) {
       case 'text':
         {
           this.#$content.textContent = newVal;
           break;
         }
-
       case 'disabled':
         {
           updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
           break;
         }
-
       case 'data-selected':
         {
           const isDisabled = getBooleanAttribute(this, 'disabled');
-
           if (isDisabled) {
             updateBooleanAttribute(this, 'aria-selected', false);
           } else {
             updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
           }
-
           break;
         }
     }
   }
-
   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');
   }
-
   click() {
     this.#dispatchClickEvent();
   }
-
   #onMouseDown = () => {
     this.#dispatchClickEvent();
   };
-
   #dispatchClickEvent() {
     this.dispatchEvent(new CustomEvent('-click'));
   }
-
   #onClickReactHandler = e => {
     getReactEventHandler(this, 'on-click')?.(e);
   };

package/alert/index.js

@@ -9,38 +9,30 @@ const template = document.createElement('template');
 template.innerHTML = templateHTML;
 defineCustomElement('sinch-alert', class extends NectaryElement {
   #$text;
-
   constructor() {
     super();
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
     this.#$text = shadowRoot.querySelector('#text');
   }
-
   connectedCallback() {
     this.setAttribute('role', 'alert');
   }
-
   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);
   }
-
   static get observedAttributes() {
     return ['text', 'type'];
   }
-
   attributeChangedCallback(name, _, newVal) {
     switch (name) {
       case 'type':
@@ -48,7 +40,6 @@ defineCustomElement('sinch-alert', class extends NectaryElement {
           assertType(newVal);
           break;
         }
-
       case 'text':
         {
           this.#$text.textContent = newVal;
@@ -56,5 +47,4 @@ defineCustomElement('sinch-alert', class extends NectaryElement {
         }
     }
   }
-
 });

package/alert/types.d.ts

@@ -1,12 +1,18 @@
 import type { TSinchElementReact } from '../types';
 export declare type TSinchAlertType = 'info' | 'warn' | 'error';
 export declare type TSinchAlertElement = HTMLElement & {
+    /** Type */
     type: TSinchAlertType;
+    /** Text */
     text: string;
+    /** Type */
     setAttribute(name: 'type', value: TSinchAlertType): void;
+    /** Text */
     setAttribute(name: 'text', value: string): void;
 };
 export declare type TSinchAlertReact = TSinchElementReact<TSinchAlertElement> & {
+    /** Type */
     type: TSinchAlertType;
+    /** Text */
     text: string;
 };