@nectary/components 2.4.0

package/toast/index.js

@@ -0,0 +1,87 @@
+import '../icon';
+import '../title';
+import '../text';
+import { defineCustomElement, getAttribute, getLiteralAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, getReactEventHandler, getBooleanAttribute, updateBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;padding:16px;box-sizing:border-box;border-radius:var(--sinch-comp-toast-shape-radius);box-shadow:var(--sinch-comp-toast-shadow)}:host([type=success]) #wrapper{background-color:var(--sinch-comp-toast-color-success-default-background)}:host([type=warn]) #wrapper{background-color:var(--sinch-comp-toast-color-warning-default-background)}:host([type=error]) #wrapper{background-color:var(--sinch-comp-toast-color-error-default-background)}:host([type=info]) #wrapper{background-color:var(--sinch-comp-toast-color-info-default-background)}#text{padding:4px 0 4px 4px;flex:1;min-width:0;--sinch-comp-text-font:var(--sinch-comp-toast-font-body)}:host([type=success]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-success-default-text)}:host([type=warn]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-warning-default-text)}:host([type=error]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-error-default-text)}:host([type=info]) #text{--sinch-global-color-text:var(--sinch-comp-toast-color-info-default-text)}#icon{align-self:flex-start;margin:4px 0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none}#icon-success{--sinch-global-color-icon:var(--sinch-comp-toast-color-success-default-icon)}#icon-warn{--sinch-global-color-icon:var(--sinch-comp-toast-color-warning-default-icon)}#icon-error{--sinch-global-color-icon:var(--sinch-comp-toast-color-error-default-icon)}#icon-info{--sinch-global-color-icon:var(--sinch-comp-toast-color-info-default-icon)}:host([type=error]) #icon-error,:host([type=info]) #icon-info,:host([type=success]) #icon-success,:host([type=warn]) #icon-warn{display:block}</style><div id="wrapper"><sinch-icon id="icon-info" name="info"></sinch-icon><sinch-icon id="icon-success" name="check_circle"></sinch-icon><sinch-icon id="icon-warn" name="report_problem"></sinch-icon><sinch-icon id="icon-error" name="report"></sinch-icon><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
+import { typeValues } from './utils';
+const TIMEOUT = 5000;
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-toast', class extends NectaryElement {
+  #$text;
+  #tid = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$text = shadowRoot.querySelector('#text');
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('aria-atomic', 'true');
+    this.setAttribute('aria-live', 'polite');
+    this.addEventListener('-timeout', this.#onTimeoutReactHandler);
+    this.#updateTimeout();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.removeEventListener('-timeout', this.#onTimeoutReactHandler);
+    this.#clearTimeout();
+  }
+  static get observedAttributes() {
+    return ['text', 'persistent'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    switch (name) {
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+      case 'persistent':
+        {
+          this.#updateTimeout();
+          break;
+        }
+    }
+  }
+  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);
+  }
+  get persistent() {
+    return getBooleanAttribute(this, 'persistent');
+  }
+  set persistent(isPersistent) {
+    updateBooleanAttribute(this, 'persistent', isPersistent);
+  }
+  #updateTimeout() {
+    if (this.persistent) {
+      this.#clearTimeout();
+      return;
+    }
+    if (this.#tid === null) {
+      this.#tid = window.setTimeout(this.#onTimeout, TIMEOUT);
+    }
+  }
+  #onTimeout = () => {
+    this.dispatchEvent(new CustomEvent('-timeout'));
+  };
+  #clearTimeout() {
+    if (this.#tid !== null) {
+      window.clearTimeout(this.#tid);
+      this.#tid = null;
+    }
+  }
+  #onTimeoutReactHandler = e => {
+    getReactEventHandler(this, 'on-timeout')?.(e);
+  };
+});

package/toast/types.d.ts

@@ -0,0 +1,28 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchToastType = 'info' | 'warn' | 'error' | 'success';
+export type TSinchToastElement = HTMLElement & {
+    /** Type */
+    type: TSinchToastType;
+    /** Text */
+    text: string;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    persistent: boolean;
+    /** Timeout event */
+    addEventListener(type: '-timeout', listener: (e: CustomEvent<void>) => void): void;
+    /** Type */
+    setAttribute(name: 'type', value: TSinchToastType): void;
+    /** Text */
+    setAttribute(name: 'text', value: string): void;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    setAttribute(name: 'persistent', value: ''): void;
+};
+export type TSinchToastReact = TSinchElementReact<TSinchToastElement> & {
+    /** Type */
+    type: TSinchToastType;
+    /** Text */
+    text: string;
+    /** Persistent, i.e. doesn't automatically dissapear after 5s */
+    persistent?: boolean;
+    /** Timeout handler */
+    'on-timeout'?: (e: CustomEvent<void>) => void;
+};

package/toast/types.js

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

package/toast/utils.d.ts

@@ -0,0 +1,2 @@
+import type { TSinchToastType } from './types';
+export declare const typeValues: readonly TSinchToastType[];

package/toast/utils.js

@@ -0,0 +1 @@
+export const typeValues = ['info', 'success', 'warn', 'error'];

package/toast-manager/index.d.ts

@@ -0,0 +1,13 @@
+import '../title';
+import '../text';
+import type { TSinchToastManagerElement, TSinchToastManagerReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast-manager': TSinchToastManagerReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast-manager': TSinchToastManagerElement;
+    }
+}

package/toast-manager/index.js

@@ -0,0 +1,163 @@
+import '../title';
+import '../text';
+import { cloneNode, defineCustomElement, getRect, NectaryElement, shouldReduceMotion } from '../utils';
+const templateHTML = '<style>:host{display:block}#items{display:block;width:0;height:0;visibility:hidden;overflow:hidden}#list{display:flex;flex-direction:column;position:fixed;z-index:1;bottom:0;right:16px}.item-wrapper{height:0;opacity:0;position:relative}.item-wrapper[data-deleting]::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0}</style><slot id="items"></slot><div id="list"></div>';
+const DURATION_ADD = 250;
+const DURATION_REMOVE = 250;
+const ITEMS_GAP = 16;
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-toast-manager', class extends NectaryElement {
+  #$slot;
+  #$list;
+  #map = new WeakMap();
+  #shouldReduceMotion;
+  #animations = new Set();
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$slot = shadowRoot.querySelector('slot');
+    this.#$list = shadowRoot.querySelector('#list');
+    this.#shouldReduceMotion = shouldReduceMotion();
+  }
+  connectedCallback() {
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
+  }
+  disconnectedCallback() {
+    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
+    this.#clear();
+  }
+  get containerRect() {
+    return getRect(this.#$list);
+  }
+  nthActionRect(nth) {
+    const item = this.#$list.children[nth]?.querySelector('[slot=action]');
+    return item != null ? getRect(item) : null;
+  }
+  nthCloseRect(nth) {
+    const item = this.#$list.children[nth]?.querySelector('[slot=close]');
+    return item != null ? getRect(item) : null;
+  }
+  #onAnimateAdd(item, index, height) {
+    const duration = this.#shouldReduceMotion ? 0 : DURATION_ADD;
+    const addAnim = item.animate({
+      height: ['0', `${height + ITEMS_GAP}px`],
+      opacity: [0, 1]
+    }, {
+      delay: index * duration,
+      duration,
+      iterations: 1,
+      fill: 'forwards'
+    });
+    this.#storeAnimation(addAnim);
+  }
+  #onAnimateRemove(item, index) {
+    const rect = item.getBoundingClientRect();
+    const duration = this.#shouldReduceMotion ? 0 : DURATION_REMOVE;
+    const indexInQueue = item.hasAttribute('data-delete-now') ? 0 : index;
+    const heightAnim = item.animate({
+      height: [`${rect.height}px`, '0']
+    }, {
+      delay: duration + indexInQueue * duration,
+      duration,
+      iterations: 1,
+      fill: 'forwards'
+    });
+    const opacityAnim = item.animate({
+      opacity: [1, 0]
+    }, {
+      delay: indexInQueue * duration,
+      duration,
+      iterations: 1,
+      fill: 'forwards'
+    });
+    item.setAttribute('data-deleting', '');
+    this.#storeAnimation(heightAnim, () => item.remove());
+    this.#storeAnimation(opacityAnim);
+  }
+  #onSlotChange = () => {
+    const slotItems = this.#$slot.assignedElements();
+    const listItems = Array.from(this.#$list.children);
+    let removeIndex = 0;
+    for (const item of listItems) {
+      if (item.hasAttribute('data-deleting')) {
+        ++removeIndex;
+        continue;
+      }
+      const orig = this.#map.get(item);
+      if (orig != null && slotItems.includes(orig)) {
+        continue;
+      }
+      this.#map.delete(item);
+      if (orig != null) {
+        this.#map.delete(orig);
+      }
+      this.#unsubscribeChildren(item);
+      this.#onAnimateRemove(item, removeIndex);
+      ++removeIndex;
+    }
+    let addIndex = 0;
+    for (const item of slotItems) {
+      if (this.#map.has(item)) {
+        continue;
+      }
+      const cloned = cloneNode(item, true);
+      const rect = item.getBoundingClientRect();
+      const wrapper = document.createElement('div');
+      wrapper.className = 'item-wrapper';
+      wrapper.appendChild(cloned);
+      this.#$list.appendChild(wrapper);
+      this.#map.set(item, wrapper);
+      this.#map.set(wrapper, item);
+      this.#subscribeChildren(cloned);
+      this.#onAnimateAdd(wrapper, addIndex, rect.height);
+      addIndex++;
+    }
+  };
+  #storeAnimation(anim, cb) {
+    const onAnimEnd = () => {
+      this.#animations.delete(anim);
+      cb?.();
+      anim.removeEventListener('finish', onAnimEnd);
+      anim.removeEventListener('remove', onAnimEnd);
+      anim.removeEventListener('cancel', onAnimEnd);
+    };
+    anim.addEventListener('finish', onAnimEnd);
+    anim.addEventListener('remove', onAnimEnd);
+    anim.addEventListener('cancel', onAnimEnd);
+    this.#animations.add(anim);
+  }
+  #clear() {
+    const listItems = Array.from(this.#$list.children);
+    for (const item of listItems) {
+      this.#map.delete(item);
+      this.#unsubscribeChildren(item);
+      item.remove();
+    }
+    for (const anim of this.#animations) {
+      anim.cancel();
+    }
+  }
+  #subscribeChildren(item) {
+    item.querySelector('[slot=close]')?.addEventListener('-click', this.#onCloneCloseClick);
+    item.querySelector('[slot=action]')?.addEventListener('-click', this.#onCloneActionClick);
+  }
+  #unsubscribeChildren(item) {
+    item.querySelector('[slot=close]')?.removeEventListener('-click', this.#onCloneCloseClick);
+    item.querySelector('[slot=action]')?.removeEventListener('-click', this.#onCloneActionClick);
+  }
+  #onCloneCloseClick = e => {
+    const item = e.target.parentElement?.parentElement;
+    if (item != null) {
+      item.setAttribute('data-delete-now', '');
+      this.#map.get(item)?.querySelector('[slot=close]')?.dispatchEvent(new CustomEvent('-click'));
+    }
+  };
+  #onCloneActionClick = e => {
+    const item = e.target.parentElement?.parentElement;
+    if (item != null) {
+      this.#map.get(item)?.querySelector('[slot=action]')?.dispatchEvent(new CustomEvent('-click'));
+    }
+  };
+});

package/toast-manager/types.d.ts

@@ -0,0 +1,7 @@
+import type { TRect, TSinchElementReact } from '../types';
+export type TSinchToastManagerElement = HTMLElement & {
+    readonly containerRect: TRect;
+    nthActionRect: (nth: number) => TRect | null;
+    nthCloseRect: (nth: number) => TRect | null;
+};
+export type TSinchToastManagerReact = TSinchElementReact<TSinchToastManagerElement> & {};

package/toast-manager/types.js

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

package/toggle/index.d.ts

@@ -0,0 +1,11 @@
+import type { TSinchToggleElement, TSinchToggleReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toggle': TSinchToggleReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toggle': TSinchToggleElement;
+    }
+}

package/toggle/index.js

@@ -0,0 +1,126 @@
+import { defineCustomElement, getAttribute, getBooleanAttribute, getReactEventHandler, isAttrEqual, isAttrTrue, NectaryElement, updateAttribute, updateBooleanAttribute, updateExplicitBooleanAttribute } from '../utils';
+const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;align-items:center;box-sizing:border-box;width:100%;height:var(--sinch-local-size);--sinch-local-size:24px}:host([small]) #wrapper{--sinch-local-size:22px}#input{all:initial;display:block;position:absolute;left:0;top:2px;width:40px;height:20px;cursor:pointer;pointer-events:initial}:host([disabled]) #input{cursor:initial}:host(:focus-visible) #input::after{position:absolute;content:"";left:-4px;top:-4px;right:-4px;bottom:-4px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:18px;pointer-events:none}:host([small]) #input{width:32px;height:16px;top:3px}#knob-container{position:relative;box-sizing:border-box;width:40px;height:20px;border-radius:10px;pointer-events:none;padding:2px;background-color:var(--sinch-comp-toggle-color-default-background-initial);overflow:hidden}:host([small]) #knob-container{width:32px;height:16px;border-radius:8px}:host([checked]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-background-initial)}:host([disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-disabled-background-initial)}:host([checked][disabled]) #knob-container{background-color:var(--sinch-comp-toggle-color-checked-disabled-background-initial)}#knob{position:relative;box-sizing:border-box;width:16px;height:16px;border-radius:50%;background-color:var(--sinch-comp-toggle-color-default-knob-background-initial);box-shadow:var(--sinch-comp-toggle-shadow-knob-default);transform:translateX(0);transition:transform .1s ease-in-out;will-change:transform}:host([small]) #knob{width:12px;height:12px}:host([disabled]) #knob-container>#knob{box-shadow:var(--sinch-comp-toggle-shadow-knob-disabled)}:host([checked]) #knob-container>#knob{transform:translateX(20px)}:host([small][checked]) #knob-container>#knob{transform:translateX(16px)}#knob::after,#knob::before{font:var(--sinch-comp-toggle-font-size-m-inside-text);color:var(--sinch-comp-toggle-color-default-text-inside-initial);text-transform:uppercase;font-size:8px;line-height:16px;display:none;position:absolute;top:0;padding:0 3px}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small])) #knob::after,:host([labeled]:not([small])) #knob::before{display:block}@media (prefers-reduced-motion){#knob{transition:none}}#label{flex:1;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-left:8px;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial);cursor:pointer}#label:empty{display:none}:host([small]) #label{font:var(--sinch-comp-toggle-font-size-s-label)}:host([disabled]) #label{color:var(--sinch-comp-toggle-color-disabled-label-initial);cursor:initial}</style><div id="wrapper"><div id="input"></div><div id="knob-container"><div id="knob"></div></div><span id="label"></span></div>';
+const template = document.createElement('template');
+template.innerHTML = templateHTML;
+defineCustomElement('sinch-toggle', class extends NectaryElement {
+  #$label;
+  #controller = null;
+  constructor() {
+    super();
+    const shadowRoot = this.attachShadow();
+    shadowRoot.appendChild(template.content.cloneNode(true));
+    this.#$label = shadowRoot.querySelector('#label');
+  }
+  connectedCallback() {
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    const options = {
+      signal
+    };
+    this.role = 'checkbox';
+    this.tabIndex = 0;
+    this.addEventListener('click', this.#onClick, options);
+    this.addEventListener('focus', this.#onFocus, options);
+    this.addEventListener('blur', this.#onBlur, options);
+    this.addEventListener('-change', this.#onChangeReactHandler, options);
+    this.addEventListener('-focus', this.#onFocusReactHandler, options);
+    this.addEventListener('-blur', this.#onBlurReactHandler, options);
+  }
+  disconnectedCallback() {
+    this.#controller.abort();
+    this.#controller = null;
+  }
+  static get observedAttributes() {
+    return ['checked', 'disabled', 'text', 'labeled', 'small'];
+  }
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (isAttrEqual(oldVal, newVal)) {
+      return;
+    }
+    switch (name) {
+      case 'text':
+        {
+          this.#$label.textContent = newVal;
+          break;
+        }
+      case 'checked':
+        {
+          const isChecked = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-checked', isChecked);
+          updateBooleanAttribute(this, name, isChecked);
+          break;
+        }
+      case 'disabled':
+        {
+          const isDisabled = isAttrTrue(newVal);
+          updateExplicitBooleanAttribute(this, 'aria-disabled', isDisabled);
+          updateBooleanAttribute(this, name, isDisabled);
+          break;
+        }
+      case 'small':
+      case 'labeled':
+        {
+          updateBooleanAttribute(this, name, isAttrTrue(newVal));
+          break;
+        }
+    }
+  }
+  set checked(isChecked) {
+    updateBooleanAttribute(this, 'checked', isChecked);
+  }
+  get checked() {
+    return getBooleanAttribute(this, 'checked');
+  }
+  set small(isSmall) {
+    updateBooleanAttribute(this, 'small', isSmall);
+  }
+  get small() {
+    return getBooleanAttribute(this, 'small');
+  }
+  set labeled(isLabeled) {
+    updateBooleanAttribute(this, 'labeled', isLabeled);
+  }
+  get labeled() {
+    return getBooleanAttribute(this, 'labeled');
+  }
+  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;
+  }
+  #onClick = () => {
+    if (this.disabled) {
+      return;
+    }
+    this.dispatchEvent(new CustomEvent('-change', {
+      detail: !this.checked
+    }));
+  };
+  #onFocus = () => {
+    this.dispatchEvent(new CustomEvent('-focus'));
+  };
+  #onBlur = () => {
+    this.dispatchEvent(new CustomEvent('-blur'));
+  };
+  #onChangeReactHandler = e => {
+    getReactEventHandler(this, 'on-change')?.(e);
+  };
+  #onFocusReactHandler = e => {
+    getReactEventHandler(this, 'on-focus')?.(e);
+  };
+  #onBlurReactHandler = e => {
+    getReactEventHandler(this, 'on-blur')?.(e);
+  };
+});

package/toggle/types.d.ts

@@ -0,0 +1,23 @@
+import type { TSinchElementReact } from '../types';
+export type TSinchToggleElement = HTMLElement & {
+    checked: boolean;
+    small: boolean;
+    labeled: boolean;
+    disabled: boolean;
+    text: string | null;
+    addEventListener(type: '-change', listener: (e: CustomEvent<boolean>) => void): void;
+    setAttribute(name: 'checked', value: ''): void;
+    setAttribute(name: 'small', value: ''): void;
+    setAttribute(name: 'labeled', value: ''): void;
+    setAttribute(name: 'disabled', value: ''): void;
+    setAttribute(name: 'text', value: string): void;
+};
+export type TSinchToggleReact = TSinchElementReact<TSinchToggleElement> & {
+    checked?: boolean;
+    small?: boolean;
+    labeled?: boolean;
+    disabled?: boolean;
+    text?: string;
+    'aria-label': string;
+    'on-change'?: (e: CustomEvent<boolean>) => void;
+};

package/toggle/types.js

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

package/tooltip/index.d.ts

@@ -0,0 +1,13 @@
+import '../text';
+import '../pop';
+import type { TSinchTooltipElement, TSinchTooltipReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-tooltip': TSinchTooltipReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-tooltip': TSinchTooltipElement;
+    }
+}