@nectary/components 2.4.0

package/textarea/types.d.ts

@@ -0,0 +1,57 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTextareaElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text that appears in the text field when it has no value set */
+    placeholder: string | null;
+    /** Disabled */
+    disabled: boolean;
+    /** Invalid state */
+    invalid: boolean;
+    selectionStart: HTMLTextAreaElement['selectionStart'];
+    selectionEnd: HTMLTextAreaElement['selectionEnd'];
+    selectionDirection: HTMLTextAreaElement['selectionDirection'];
+    /** Number of rows */
+    rows: HTMLTextAreaElement['rows'];
+    /** Whether the text field is resizable */
+    resizable: boolean;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text that appears in the text field when it has no value set */
+    setAttribute(name: 'placeholder', value: string): void;
+    /** Invalid state */
+    setAttribute(name: 'invalid', value: ''): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+    /** Number of rows */
+    setAttribute(name: 'rows', value: string): void;
+    /** Whether the text field is resizable */
+    setAttribute(name: 'resizable', value: ''): void;
+};
+export type TSinchTextareaReact = TSinchElementReact<TSinchTextareaElement> & {
+    /** Value */
+    value: string;
+    /** Text that appears in the text field when it has no value set */
+    placeholder?: string;
+    /** Disabled */
+    disabled?: boolean;
+    /** Invalid state */
+    invalid?: boolean;
+    'aria-label': string;
+    /** Number of rows */
+    rows?: number;
+    /** Whether the text field is resizable */
+    resizable?: boolean;
+    /** Change value handler */
+    'on-change'?: (e: CustomEvent<string>) => void;
+    /** Focus handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+};

package/textarea/types.js

@@ -0,0 +1 @@
+export {};

package/tile-control/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTileControlElement, TSinchTileControlReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tile-control': TSinchTileControlReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tile-control': TSinchTileControlElement;
+    }
+}

package/tile-control/index.js

@@ -0,0 +1,110 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, unpackCsv, getFirstCsvValue, getIntegerAttribute, getReactEventHandler, NectaryElement, updateAttribute, updateBooleanAttribute, updateCsv, updateIntegerAttribute, isAttrTrue, isAttrEqual } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0;--sinch-grid-num-columns:1}#wrapper{display:grid;grid-template-columns:repeat(var(--sinch-grid-num-columns),auto);gap:16px;width:fit-content}:host([small]) #wrapper{gap:8px}:host([cols="2"]){--sinch-grid-num-columns:2}:host([cols="3"]){--sinch-grid-num-columns:3}:host([cols="4"]){--sinch-grid-num-columns:4}:host([cols="5"]){--sinch-grid-num-columns:5}:host([cols="6"]){--sinch-grid-num-columns:6}:host([cols="7"]){--sinch-grid-num-columns:7}:host([cols="8"]){--sinch-grid-num-columns:8}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tile-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', 'small', 'multiple'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'value':
+        {
+          this.#onValueChange(newVal ?? '');
+          break;
+        }
+      case 'small':
+        {
+          this.#onSmallChange();
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+      case 'multiple':
+        {
+          this.#onValueChange(this.value);
+        }
+    }
+  }
+  set value(value) {
+    updateAttribute(this, 'value', value);
+  }
+  get value() {
+    return getAttribute(this, 'value', '');
+  }
+  set small(isSmall) {
+    updateBooleanAttribute(this, 'small', isSmall);
+  }
+  get small() {
+    return getBooleanAttribute(this, 'small');
+  }
+  set multiple(isMultiple) {
+    updateBooleanAttribute(this, 'multiple', isMultiple);
+  }
+  get multiple() {
+    return getBooleanAttribute(this, 'multiple');
+  }
+  set cols(value) {
+    updateIntegerAttribute(this, 'cols', value);
+  }
+  get cols() {
+    return getIntegerAttribute(this, 'cols', 1);
+  }
+  #onSlotChange = () => {
+    this.#onValueChange(this.value);
+    this.#onSmallChange();
+  };
+  #onOptionChange = e => {
+    e.stopPropagation();
+    const $elem = e.target;
+    const value = e.detail;
+    const detail = this.multiple ? updateCsv(this.value, value, !getBooleanAttribute($elem, 'data-checked')) : value;
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail
+    }));
+  };
+  #onValueChange(csv) {
+    if (this.multiple) {
+      const values = unpackCsv(csv);
+      for (const $option of this.#$slot.assignedElements()) {
+        const isChecked = !getBooleanAttribute($option, 'disabled') && values.includes(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);
+      }
+    }
+  }
+  #onSmallChange() {
+    const isSmall = this.small;
+    for (const $opt of this.#$slot.assignedElements()) {
+      updateBooleanAttribute($opt, 'data-small', isSmall);
+    }
+  }
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+});

package/tile-control/types.d.ts

@@ -0,0 +1,35 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTileControlElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Small */
+    small: boolean;
+    /** Multiple */
+    multiple: boolean;
+    /** Number of columns from 1 to 8 */
+    cols: number;
+    /** Change value event */
+    addEventListener(type: '-change', listener: (e: CustomEvent<string>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Small */
+    setAttribute(name: 'small', value: ''): void;
+    /** Multiple */
+    setAttribute(name: 'multiple', value: ''): void;
+    /** Number of columns from 1 to 8 */
+    setAttribute(name: 'cols', value: string): void;
+};
+export type TSinchTileControlReact = TSinchElementReact<TSinchTileControlElement> & {
+    /** Value */
+    value: string;
+    /** Multiple */
+    multiple?: boolean;
+    /** Small */
+    small?: boolean;
+    /** Number of columns from 1 to 8 */
+    cols: number;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Change value handler */
+    'on-change'?: (e: CustomEvent<string>) => void;
+};

package/tile-control/types.js

@@ -0,0 +1 @@
+export {};

package/tile-control-option/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchTileControlOptionElement, TSinchTileControlOptionReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tile-control-option': TSinchTileControlOptionReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tile-control-option': TSinchTileControlOptionElement;
+    }
+}

package/tile-control-option/index.js

@@ -0,0 +1,98 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}button{all:initial;position:relative;display:flex;flex-direction:column;justify-content:space-between;box-sizing:border-box;width:var(--sinch-local-size);height:var(--sinch-local-size);padding:16px 8px 8px;border-radius:var(--sinch-local-shape-radius);background-color:var(--sinch-local-color-background);box-shadow:var(--sinch-local-shadow);cursor:pointer;--sinch-local-color-background:var(--sinch-comp-tile-control-color-default-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-default-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-default-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-default-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-initial);--sinch-local-shape-radius:var(--sinch-comp-tile-control-shape-radius-l);--sinch-local-size:88px;--sinch-local-size-icon:var(--sinch-comp-tile-control-size-m-icon)}button::before{content:"";position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);border-radius:var(--sinch-local-shape-radius);pointer-events:none}button:focus-visible::after{position:absolute;content:"";inset:-4px;padding:2px;border:2px solid var(--sinch-comp-tile-control-color-default-outline-focus);border-radius:calc(var(--sinch-local-shape-radius) + 4px);pointer-events:none}:host([data-small])>button{padding:12px 4px 4px;--sinch-local-shape-radius:var(--sinch-comp-tile-control-shape-radius-s);--sinch-local-size:64px;--sinch-local-size-icon:var(--sinch-comp-tile-control-size-s-icon)}button:enabled:hover{--sinch-local-color-background:var(--sinch-comp-tile-control-color-default-background-hover);--sinch-local-color-border:var(--sinch-comp-tile-control-color-default-border-hover);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-hover)}:host([data-checked])>button:enabled,button:enabled:active{--sinch-local-color-background:var(--sinch-comp-tile-control-color-checked-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-checked-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-checked-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-checked-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-active)}:host([data-checked])>button:enabled::before,button:enabled:active::before{border-width:2px}button:disabled{cursor:initial;--sinch-local-color-background:var(--sinch-comp-tile-control-color-disabled-background-initial);--sinch-local-color-border:var(--sinch-comp-tile-control-color-disabled-border-initial);--sinch-local-color-text:var(--sinch-comp-tile-control-color-disabled-text-initial);--sinch-local-color-icon:var(--sinch-comp-tile-control-color-disabled-icon-initial);--sinch-local-shadow:var(--sinch-comp-tile-control-shadow-disabled)}#text{display:inline-block;min-height:20px;text-align:center;font:var(--sinch-comp-tile-control-font-label);color:var(--sinch-local-color-text);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}#icon{width:var(--sinch-local-size-icon);height:var(--sinch-local-size-icon);align-self:center;--sinch-global-size-icon:var(--sinch-local-size-icon);--sinch-global-color-icon:var(--sinch-local-color-icon)}</style><button><div id="icon"><slot name="icon"></slot></div><span id="text"></span></button>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-tile-control-option', class extends NectaryElement {
+  #$button;
+  #$text;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$button = shadowRoot.querySelector('button');
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+  connectedCallback() {
+    this.setAttribute('role', 'tab');
+    this.#$button.addEventListener('click', this.#onButtonClick);
+    this.#$button.addEventListener('focus', this.#onButtonFocus);
+    this.#$button.addEventListener('blur', this.#onButtonBlur);
+    this.addEventListener('-focus', this.#onFocusReactHandler);
+    this.addEventListener('-blur', this.#onBlurReactHandler);
+  }
+  disconnectedCallback() {
+    this.#$button.removeEventListener('click', this.#onButtonClick);
+    this.#$button.removeEventListener('focus', this.#onButtonFocus);
+    this.#$button.removeEventListener('blur', this.#onButtonBlur);
+    this.removeEventListener('-focus', this.#onFocusReactHandler);
+    this.removeEventListener('-blur', this.#onBlurReactHandler);
+  }
+  static get observedAttributes() {
+    return ['data-checked', 'text', 'disabled'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          this.#$button.disabled = isAttrTrue(newVal);
+          break;
+        }
+    }
+  }
+  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', '');
+  }
+  get focusable() {
+    return true;
+  }
+  focus() {
+    this.#$button.focus();
+  }
+  blur() {
+    this.#$button.blur();
+  }
+  #onButtonClick = e => {
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('option-change', {
+      detail: this.value,
+      bubbles: true
+    }));
+  };
+  #onButtonFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onButtonBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+});

package/tile-control-option/types.d.ts

@@ -0,0 +1,37 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchTileControlOptionElement = HTMLElement & {
+    /** Value */
+    value: string;
+    /** Text content */
+    text: string;
+    /** Disabled */
+    disabled: boolean;
+    /** Small */
+    small: boolean;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Value */
+    setAttribute(name: 'value', value: string): void;
+    /** Text content */
+    setAttribute(attr: 'text', value: string): void;
+    /** Disabled */
+    setAttribute(name: 'disabled', value: ''): void;
+    /** Small */
+    setAttribute(name: 'small', value: ''): void;
+};
+export type TSinchTileControlOptionReact = TSinchElementReact<TSinchTileControlOptionElement> & {
+    /** Value */
+    value: string;
+    /** Text content */
+    text: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+    /** Focus handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+};

package/tile-control-option/types.js

@@ -0,0 +1 @@
+export {};

package/time-picker/index.d.ts

@@ -0,0 +1,15 @@
+import '../icon-button';
+import '../icon';
+import '../segmented-control';
+import '../segmented-control-option';
+import type { TSinchTimePickerElement, TSinchTimePickerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-time-picker': TSinchTimePickerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-time-picker': TSinchTimePickerElement;
+    }
+}