@nectary/components 2.8.7 → 2.9.0

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

@@ -1,82 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

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

package/select-button/index.d.ts

@@ -1,13 +0,0 @@
-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

@@ -1,202 +0,0 @@
-import '../text';
-import '../icon';
-import { defineCustomElement, getAttribute, getBooleanAttribute, getLiteralAttribute, getReactEventHandler, isAttrTrue, NectaryElement, setClass, subscribeContext, updateAttribute, updateBooleanAttribute, 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);
-          this.ariaInvalid = isInvalid.toString();
-          updateBooleanAttribute(this, 'invalid', isInvalid);
-          break;
-        }
-      case 'disabled':
-        {
-          const isDisabled = isAttrTrue(newVal);
-          this.ariaDisabled = isDisabled.toString();
-          updateBooleanAttribute(this, 'disabled', isDisabled);
-          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

@@ -1,50 +0,0 @@
-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

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

package/select-menu/index.d.ts

@@ -1,15 +0,0 @@
-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;
-    }
-}