@nectary/components 2.4.0

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

@@ -0,0 +1,82 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block;outline:0}#wrapper{position:relative;width:56px;height:32px;padding:3px 16px;box-sizing:border-box;background-color:var(--sinch-local-color-background);cursor:pointer;--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-default-icon-initial);--sinch-global-size-icon:var(--sinch-comp-segmented-control-size-icon);--sinch-local-shape-radius:var(--sinch-comp-segmented-control-shape-radius);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-default-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-initial)}:host(:hover){--sinch-local-color-background:var(--sinch-comp-segmented-control-color-default-background-hover)}:host(:first-child) #wrapper{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #wrapper{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host([data-checked]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-checked-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-checked-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-checked-background-initial)}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-segmented-control-color-disabled-icon-initial);--sinch-local-color-border:var(--sinch-comp-segmented-control-color-disabled-border-initial);--sinch-local-color-background:var(--sinch-comp-segmented-control-color-disabled-background-initial);cursor:initial}#border{position:absolute;inset:0;border:1px solid var(--sinch-local-color-border);pointer-events:none;box-sizing:border-box}:host(:first-child) #border{border-top-left-radius:var(--sinch-local-shape-radius);border-bottom-left-radius:var(--sinch-local-shape-radius)}:host(:last-child) #border{border-top-right-radius:var(--sinch-local-shape-radius);border-bottom-right-radius:var(--sinch-local-shape-radius)}:host(:not(:first-child)) #border{border-left-width:0}:host([data-checked]) #border{border-width:2px}:host([data-checked]:not(:first-child)) #border{left:-1px}#outline{display:none;position:absolute;inset:-3px;border:2px solid var(--sinch-comp-segmented-control-color-default-outline-focus);pointer-events:none;box-sizing:border-box;z-index:1}:host(:focus-visible) #outline{display:block}:host(:first-child) #outline{border-top-left-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-left-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:last-child) #outline{border-top-right-radius:calc(var(--sinch-local-shape-radius) + 3px);border-bottom-right-radius:calc(var(--sinch-local-shape-radius) + 3px)}:host(:not(:first-child)) #outline{left:-4px}::slotted(*){display:block;pointer-events:none}</style><div id="wrapper"><slot name="icon"></slot><div id="border"></div><div id="outline"></div></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-segmented-icon-control-option', class extends NectaryElement {
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.role = 'tab';
+    this.addEventListener('focus', this.#onButtonFocus, options);
+    this.addEventListener('blur', this.#onButtonBlur, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
+    this.#updateTabIndex();
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['data-checked', 'disabled'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'data-checked':
+        {
+          updateExplicitBooleanAttribute(this, 'aria-selected', isAttrTrue(newVal));
+          break;
+        }
+      case 'disabled':
+        {
+          if (isAttrEqual(oldVal, newVal)) {
+            break;
+          }
+          this.#updateTabIndex();
+          updateBooleanAttribute(this, name, 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');
+  }
+  get focusable() {
+    return true;
+  }
+  #updateTabIndex() {
+    this.tabIndex = this.disabled ? -1 : 0;
+  }
+  #onButtonFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onButtonBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+});

package/segmented-icon-control-option/types.d.ts

@@ -0,0 +1,16 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchSegmentedIconControlOptionElement = HTMLElement & {
+    value: string;
+    disabled: boolean;
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    setAttribute(name: 'value', value: string): void;
+    setAttribute(name: 'disabled', value: ''): void;
+};
+export type TSinchSegmentedIconControlOptionReact = TSinchElementReact<TSinchSegmentedIconControlOptionElement> & {
+    value: string;
+    disabled?: boolean;
+    'aria-label': string;
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    'on-blur'?: (e: CustomEvent<void>) => void;
+};

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

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

package/select-button/index.d.ts

@@ -0,0 +1,13 @@
+import '../text';
+import '../icon';
+import type { TSinchSelectButtonElement, TSinchSelectButtonReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-select-button': TSinchSelectButtonReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-select-button': TSinchSelectButtonElement;
+    }
+}

package/select-button/index.js

@@ -0,0 +1,200 @@
+import '../text';
+import '../icon';
+import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute, updateLiteralAttribute, Context, isAttrEqual } from '../utils';
+import { DEFAULT_SIZE, sizeValues } from '../utils/size';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0;cursor:pointer}:host([disabled]){cursor:initial}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:var(--sinch-local-size);padding:0 8px 0 12px;background-color:var(--sinch-comp-select-button-color-default-background-initial);border-radius:var(--sinch-local-shape-radius);--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m);--sinch-global-color-icon:var(--sinch-comp-select-button-color-default-icon-initial)}:host([data-size="l"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-l);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-l);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-l)}:host([data-size="m"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-m);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-m);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-m)}:host([data-size="s"])>#wrapper{--sinch-local-size:var(--sinch-comp-select-button-size-container-s);--sinch-global-size-icon:var(--sinch-comp-select-button-size-icon-s);--sinch-local-shape-radius:var(--sinch-comp-select-button-shape-radius-size-s)}:host([data-size="l"]) #wrapper{padding:0 12px}:host([data-size="m"]) #wrapper{padding:0 8px 0 12px}:host([data-size="s"]) #wrapper{padding:0 4px 0 12px}:host([disabled]) #wrapper{--sinch-global-color-icon:var(--sinch-comp-select-button-color-disabled-icon-initial)}#text{flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-input);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-text-initial)}#text:empty{display:none}#placeholder{display:none;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-select-button-font-placeholder);--sinch-global-color-text:var(--sinch-comp-select-button-color-default-placeholder-initial)}#text:empty+#placeholder{display:block}#border{position:absolute;border:1px solid var(--sinch-comp-select-button-color-default-border-initial);border-radius:var(--sinch-local-shape-radius);inset:0;pointer-events:none}:host(:focus-visible) #border{border-color:var(--sinch-comp-select-button-color-default-border-focus);border-width:2px}:host([invalid]) #border{border-color:var(--sinch-comp-select-button-color-invalid-border-initial)}:host([disabled]) #border{border-color:var(--sinch-comp-select-button-color-disabled-border-initial)}:host([disabled]) #text{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-text-initial)}:host([disabled]) #placeholder{--sinch-global-color-text:var(--sinch-comp-select-button-color-disabled-placeholder-initial)}#left{display:flex;flex-direction:row;align-self:stretch;align-items:center;gap:4px;margin-left:-4px}#left.empty{display:none}#dropdown-icon{margin-left:-4px}</style><div id="wrapper" inert><div id="border"></div><div id="left"><slot name="left"></slot></div><slot name="icon"></slot><sinch-text id="text" type="m" ellipsis></sinch-text><sinch-text id="placeholder" type="m" ellipsis></sinch-text><sinch-icon id="dropdown-icon" name="keyboard_arrow_down"></sinch-icon></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-select-button', class extends NectaryElement {
+  #$text;
+  #$placeholder;
+  #$leftSlot;
+  #$leftWrapper;
+  #$wrapper;
+  #controller = null;
+  #sizeContext;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$text = shadowRoot.querySelector('#text');
+    this.#$placeholder = shadowRoot.querySelector('#placeholder');
+    this.#$leftSlot = shadowRoot.querySelector('slot[name="left"]');
+    this.#$leftWrapper = shadowRoot.querySelector('#left');
+    this.#$wrapper = shadowRoot.querySelector('#wrapper');
+    this.#sizeContext = new Context(this.#$wrapper, 'size');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.role = 'button';
+    this.tabIndex = 0;
+    this.addEventListener('click', this.#onButtonClick, {
+      signal
+    });
+    this.addEventListener('focus', this.#onButtonFocus, {
+      signal
+    });
+    this.addEventListener('blur', this.#onButtonBlur, {
+      signal
+    });
+    this.addEventListener('keydown', this.#onButtonKeydown, {
+      signal
+    });
+    this.addEventListener('-click', this.#onClickReactHandler, {
+      signal
+    });
+    this.addEventListener('-focus', this.#onFocusReactHandler, {
+      signal
+    });
+    this.addEventListener('-blur', this.#onBlurReactHandler, {
+      signal
+    });
+    this.#$leftSlot.addEventListener('slotchange', this.#onLeftSlotChange, {
+      signal
+    });
+    this.#sizeContext.listen(this.#controller.signal);
+    subscribeContext(this, 'size', this.#onContextSize, signal);
+    this.#onLeftSlotChange();
+    this.#onSizeUpdate();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['text', 'placeholder', 'invalid', 'disabled', 'size', 'data-size'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'placeholder':
+        {
+          this.#$placeholder.textContent = newVal;
+          break;
+        }
+      case 'invalid':
+        {
+          const isInvalid = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-invalid', isInvalid);
+          updateBooleanAttribute(this, 'invalid', isInvalid);
+          break;
+        }
+      case 'disabled':
+        {
+          updateBooleanAttribute(this, 'disabled', isAttrTrue(newVal));
+          break;
+        }
+      case 'size':
+        {
+          updateAttribute(this, 'data-size', newVal);
+          break;
+        }
+      case 'data-size':
+        {
+          this.#onSizeUpdate();
+          break;
+        }
+    }
+  }
+  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');
+  }
+  set size(size) {
+    updateLiteralAttribute(this, sizeValues, 'size', size);
+  }
+  get size() {
+    return getLiteralAttribute(this, sizeValues, 'size', DEFAULT_SIZE);
+  }
+  get focusable() {
+    return true;
+  }
+  #onContextSize = e => {
+    if (this.hasAttribute('size')) {
+      return;
+    }
+    switch (e.detail) {
+      case 'l':
+        {
+          this.setAttribute('data-size', 'm');
+          break;
+        }
+      default:
+        {
+          this.setAttribute('data-size', 's');
+        }
+    }
+  };
+  #onSizeUpdate() {
+    if (!this.isDomConnected) {
+      return;
+    }
+    const size = this.getAttribute('data-size') ?? DEFAULT_SIZE;
+    this.#sizeContext.dispatch(size);
+  }
+  #onLeftSlotChange = () => {
+    setClass(this.#$leftWrapper, 'empty', this.#$leftSlot.assignedElements().length === 0);
+  };
+  #onButtonFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onButtonBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onButtonKeydown = e => {
+    switch (e.code) {
+      case 'Space':
+      case 'Enter':
+        {
+          e.preventDefault();
+          this.click();
+        }
+    }
+  };
+  #onButtonClick = () => {
+    if (!this.disabled) {
+      this.dispatchEvent(new CustomEvent('-click'));
+    }
+  };
+  #onClickReactHandler = e => {
+    getReactEventHandler(this, 'on-click')?.(e);
+  };
+  #onFocusReactHandler = () => {
+    getReactEventHandler(this, 'on-focus')?.();
+  };
+  #onBlurReactHandler = () => {
+    getReactEventHandler(this, 'on-blur')?.();
+  };
+});

package/select-button/types.d.ts

@@ -0,0 +1,50 @@
+import type { TSinchElementReact } from '../types';
+import type { TSinchSize } from '../utils/size';
+export type TSinchSelectButtonElement = HTMLElement & {
+    /** Text */
+    text: string;
+    /** Text that appears in the text field when it has no text set */
+    placeholder: string;
+    /** Invalid state */
+    invalid: boolean;
+    /** Disabled */
+    disabled: boolean;
+    /** Size, `m` by default */
+    size: TSinchSize;
+    /** Click event */
+    addEventListener(type: '-click', listener: (e: CustomEvent<void>) => void): void;
+    /** Focus event */
+    addEventListener(type: '-focus', listener: (e: CustomEvent<void>) => void): void;
+    /** Blur event */
+    addEventListener(type: '-blur', listener: (e: CustomEvent<void>) => void): void;
+    /** Text */
+    setAttribute(name: 'text', 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;
+    /** Size, `m` by default */
+    setAttribute(name: 'size', value: TSinchSize): void;
+};
+export type TSinchSelectButtonReact = TSinchElementReact<TSinchSelectButtonElement> & {
+    /** Text */
+    text: string;
+    /** Label that is used for a11y` */
+    'aria-label': string;
+    /** Text that appears in the text field when it has no text set */
+    placeholder: string;
+    /** Invalid state */
+    invalid?: boolean;
+    /** Disabled */
+    disabled?: boolean;
+    /** Size, `m` by default */
+    size?: TSinchSize;
+    /** Click handler */
+    'on-click': (e: CustomEvent<void>) => void;
+    /** Focus handler */
+    'on-focus'?: (e: CustomEvent<void>) => void;
+    /** Blur handler */
+    'on-blur'?: (e: CustomEvent<void>) => void;
+};

package/select-button/types.js

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

package/select-menu/index.d.ts

@@ -0,0 +1,15 @@
+import '../input';
+import '../icon-button';
+import '../icon';
+import '../text';
+import type { TSinchSelectMenuElement, TSinchSelectMenuReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-select-menu': TSinchSelectMenuReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-select-menu': TSinchSelectMenuElement;
+    }
+}