@nectary/components 4.12.0 → 4.12.1

package/tile-control/index.js

@@ -0,0 +1,111 @@
+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}:host([cols="9"]){--sinch-grid-num-columns:9}:host([cols="10"]){--sinch-grid-num-columns:10}</style><div id="wrapper"><slot></slot></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+export class TileControl 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);
+  };
+}
+defineCustomElement('sinch-tile-control', TileControl);

package/tile-control/types.d.ts

@@ -0,0 +1,29 @@
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+/** Number of coumns from 1 to 10 */
+export type TSinchTileControlColumns = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | number;
+export type TSinchTileControlProps = {
+    /** Value */
+    value: string;
+    /** Multiple */
+    multiple?: boolean;
+    /** Small */
+    small?: boolean;
+    /** Number of columns from 1 to 10 */
+    cols: TSinchTileControlColumns;
+    /** Label that is used for a11y */
+    'aria-label': string;
+};
+export type TSinchTileControlEvents = {
+    /** Change value handler */
+    '-change'?: (e: CustomEvent<string>) => void;
+};
+export type TSinchTileControlStyle = {
+    '--sinch-grid-num-columns'?: string;
+};
+export type TSinchTileControl = {
+    props: TSinchTileControlProps;
+    events: TSinchTileControlEvents;
+    style: TSinchTileControlStyle;
+};
+export type TSinchTileControlElement = NectaryComponentVanillaByType<TSinchTileControl>;
+export type TSinchTileControlReact = NectaryComponentReactByType<TSinchTileControl>;

package/tile-control/types.js

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

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

@@ -0,0 +1,40 @@
+import { NectaryElement } from '../utils';
+import type { TSinchTileControlOption } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla } from '../types';
+export declare class TileControlOption extends NectaryElement {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: string, oldVal: string | null, newVal: string | null): void;
+    set value(value: string);
+    get value(): string;
+    set disabled(isDisabled: boolean);
+    get disabled(): boolean;
+    set text(value: string);
+    get text(): string;
+    get focusable(): boolean;
+    focus(): void;
+    blur(): void;
+}
+declare global {
+    interface NectaryComponentMap {
+        'sinch-tile-control-option': TSinchTileControlOption;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tile-control-option': NectaryComponentVanilla<'sinch-tile-control-option'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tile-control-option': NectaryComponentReact<'sinch-tile-control-option'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-tile-control-option': NectaryComponentReact<'sinch-tile-control-option'>;
+        }
+    }
+}

package/tile-control-option/index.js

@@ -0,0 +1,99 @@
+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;
+export class TileControlOption 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')?.();
+  };
+}
+defineCustomElement('sinch-tile-control-option', TileControlOption);

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

@@ -0,0 +1,52 @@
+import type { NectaryComponentReactByType, NectaryComponentVanillaByType } from '../types';
+export type TSinchTileControlOptionProps = {
+    /** Value */
+    value: string;
+    /** Text content */
+    text: string;
+    /** Label that is used for a11y */
+    'aria-label': string;
+    /** Disabled */
+    disabled?: boolean;
+};
+export type TSinchTileControlOptionEvents = {
+    /** Focus handler */
+    '-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
+    '-blur'?: (e: CustomEvent<void>) => void;
+};
+export type TSinchTileControlOptionStyle = {
+    '--sinch-comp-tile-control-shape-radius-l'?: string;
+    '--sinch-comp-tile-control-shape-radius-s'?: string;
+    '--sinch-comp-tile-control-font-label'?: string;
+    '--sinch-comp-tile-control-size-m-icon'?: string;
+    '--sinch-comp-tile-control-size-s-icon'?: string;
+    '--sinch-comp-tile-control-color-default-background-initial'?: string;
+    '--sinch-comp-tile-control-color-default-border-initial'?: string;
+    '--sinch-comp-tile-control-color-default-text-initial'?: string;
+    '--sinch-comp-tile-control-color-default-icon-initial'?: string;
+    '--sinch-comp-tile-control-color-default-background-hover'?: string;
+    '--sinch-comp-tile-control-color-default-border-hover'?: string;
+    '--sinch-comp-tile-control-color-default-outline-focus'?: string;
+    '--sinch-comp-tile-control-color-checked-background-initial'?: string;
+    '--sinch-comp-tile-control-color-checked-border-initial'?: string;
+    '--sinch-comp-tile-control-color-checked-text-initial'?: string;
+    '--sinch-comp-tile-control-color-checked-icon-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-background-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-border-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-text-initial'?: string;
+    '--sinch-comp-tile-control-color-disabled-icon-initial'?: string;
+    '--sinch-comp-tile-control-shadow-initial'?: string;
+    '--sinch-comp-tile-control-shadow-hover'?: string;
+    '--sinch-comp-tile-control-shadow-active'?: string;
+    '--sinch-comp-tile-control-shadow-disabled'?: string;
+    '--sinch-global-size-icon'?: string;
+    '--sinch-global-color-icon'?: string;
+};
+export type TSinchTileControlOption = {
+    props: TSinchTileControlOptionProps;
+    events: TSinchTileControlOptionEvents;
+    style: TSinchTileControlOptionStyle;
+};
+export type TSinchTileControlOptionElement = NectaryComponentVanillaByType<TSinchTileControlOption>;
+export type TSinchTileControlOptionReact = NectaryComponentReactByType<TSinchTileControlOption>;

package/tile-control-option/types.js

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

package/time-picker/index.d.ts

@@ -2,8 +2,8 @@ import '../icon';
 import '../segmented-control';
 import '../segmented-control-option';
 import { NectaryElement } from '../utils';
-import type { TRect } from '../types';
-export * from './types';
+import type { TSinchTimePicker } from './types';
+import type { NectaryComponentReact, NectaryComponentVanilla, TRect } from '../types';
 export declare class TimePicker extends NectaryElement {
     #private;
     constructor();
@@ -23,3 +23,23 @@ export declare class TimePicker extends NectaryElement {
     hourDigitRect(hour: number): TRect | null;
     minuteDigitRect(minute: number): TRect | null;
 }
+declare global {
+    interface NectaryComponentMap {
+        'sinch-time-picker': TSinchTimePicker;
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-time-picker': NectaryComponentVanilla<'sinch-time-picker'>;
+    }
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-time-picker': NectaryComponentReact<'sinch-time-picker'>;
+        }
+    }
+}
+declare module 'react' {
+    namespace JSX {
+        interface IntrinsicElements extends globalThis.JSX.IntrinsicElements {
+            'sinch-time-picker': NectaryComponentReact<'sinch-time-picker'>;
+        }
+    }
+}