@nectary/components 0.38.0 → 0.40.0

package/time-picker/types.d.ts

@@ -5,6 +5,8 @@ export declare type TSinchTimePickerElement = HTMLElement & {
     value: string;
     /** AM/PM 12-hour clock system, `false` by default */
     ampm: boolean;
+    /** Submit button label that is used for a11y */
+    submitAriaLabel: string;
     readonly submitButtonRect: TRect;
     readonly amButtonRect: TRect | null;
     readonly pmButtonRect: TRect | null;
@@ -16,6 +18,8 @@ export declare type TSinchTimePickerElement = HTMLElement & {
     setAttribute(name: 'value', value: string): void;
     /** AM/PM 12-hour clock system, `false` by default */
     setAttribute(name: 'ampm', value: boolean): void;
+    /** Submit button label that is used for a11y */
+    setAttribute(name: 'submit-aria-label', value: string): void;
 };
 export declare type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerElement> & {
     /** Time value in ISO 8601 format */
@@ -26,7 +30,7 @@ export declare type TSinchTimePickerReact = TSinchElementReact<TSinchTimePickerE
     'aria-label': string;
     /** Submit button label that is used for a11y */
     'submit-aria-label': string;
-    /** Change value handler, return time in ISO 8601 format */
+    /** @deprecated Change value handler, return time in ISO 8601 format */
     onChange?: (e: SyntheticEvent<TSinchTimePickerElement, CustomEvent<string>>) => void;
     /** Change value handler, return time in ISO 8601 format */
     'on-change'?: (e: CustomEvent<string>) => void;

package/title/index.js

@@ -1,31 +1,17 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$text;
-
-function _classPrivateFieldInitSpec(obj, privateMap, value) { _checkPrivateRedeclaration(obj, privateMap); privateMap.set(obj, value); }
-
-function _checkPrivateRedeclaration(obj, privateCollection) { if (privateCollection.has(obj)) { throw new TypeError("Cannot initialize the same private elements twice on an object"); } }
-
 import '../icons/cancel';
 import { defineCustomElement, getAttribute, updateAttribute, updateLiteralAttribute, getLiteralAttribute, NectaryElement, updateBooleanAttribute, getBooleanAttribute } from '../utils';
 const templateHTML = '<style>:host{display:block}:host([type=xl]) #text{font:var(--sinch-font-title-xl)}:host([type="l"]) #text{font:var(--sinch-font-title-l)}:host([type="m"]) #text{font:var(--sinch-font-title-m)}:host([type="s"]) #text{font:var(--sinch-font-title-s)}:host([type=xs]) #text{font:var(--sinch-font-title-xs)}:host([ellipsis]:not([ellipsis=false])) #text{display:block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
 import { assertLevel, assertType, typeValues } from './utils';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-title', class extends NectaryElement {
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+    this.#$text = shadowRoot.querySelector('#text');
   }
 
   connectedCallback() {
@@ -64,7 +50,7 @@ defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends Nectar
     switch (name) {
       case 'text':
         {
-          _classPrivateFieldGet(this, _$text).textContent = newVal;
+          this.#$text.textContent = newVal;
           break;
         }
 
@@ -83,4 +69,4 @@ defineCustomElement('sinch-title', (_$text = new WeakMap(), class extends Nectar
     }
   }
 
-}));
+});

package/toast/index.d.ts

@@ -0,0 +1,17 @@
+import '../icons/report-problem';
+import '../icons/report';
+import '../icons/check-circle';
+import '../icons/info';
+import '../title';
+import '../text';
+import type { TSinchToastElement, TSinchToastReact } from './types';
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            'sinch-toast': TSinchToastReact;
+        }
+    }
+    interface HTMLElementTagNameMap {
+        'sinch-toast': TSinchToastElement;
+    }
+}

package/toast/index.js

@@ -0,0 +1,115 @@
+import '../icons/report-problem';
+import '../icons/report';
+import '../icons/check-circle';
+import '../icons/info';
+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:8px 16px;box-sizing:border-box;border-radius:var(--sinch-shape-radius-l);box-shadow:var(--sinch-elevation-level-3)}#text{color:var(--sinch-color-stormy-500);padding:4px 0 4px 4px;flex:1;min-width:0}#icon-error,#icon-info,#icon-success,#icon-warn{display:none;align-self:flex-start;margin:4px 0}:host([type=success]) #wrapper{background-color:var(--sinch-color-success-200)}:host([type=warn]) #wrapper{background-color:var(--sinch-color-warning-200)}:host([type=error]) #wrapper{background-color:var(--sinch-color-error-200)}:host([type=info]) #wrapper{background-color:var(--sinch-color-informative-200)}:host([type=success]) #icon-success{display:block;--sinch-color-icon:var(--sinch-color-success-500)}:host([type=warn]) #icon-warn{display:block;--sinch-color-icon:var(--sinch-color-warning-500)}:host([type=error]) #icon-error{display:block;--sinch-color-icon:var(--sinch-color-error-500)}:host([type=info]) #icon-info{display:block;--sinch-color-icon:var(--sinch-color-informative-500)}</style><div id="wrapper"><sinch-icon-info id="icon-info"></sinch-icon-info><sinch-icon-check-circle id="icon-success"></sinch-icon-check-circle><sinch-icon-report-problem id="icon-warn"></sinch-icon-report-problem><sinch-icon-report id="icon-error"></sinch-icon-report><sinch-text id="text" type="m"></sinch-text><slot name="action"></slot><slot name="close"></slot></div>';
+import { assertType, 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() {
+    this.setAttribute('aria-atomic', 'true');
+    this.setAttribute('aria-live', 'polite');
+    this.addEventListener('-timeout', this.#onTimeoutReactHandler);
+    this.#updateTimeout();
+  }
+
+  disconnectedCallback() {
+    this.removeEventListener('-timeout', this.#onTimeoutReactHandler);
+    this.#clearTimeout();
+  }
+
+  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);
+  }
+
+  static get observedAttributes() {
+    return ['text', 'type', 'persistent'];
+  }
+
+  attributeChangedCallback(name, oldVal, newVal) {
+    if (oldVal === newVal) {
+      return;
+    }
+
+    switch (name) {
+      case 'type':
+        {
+          assertType(newVal);
+          break;
+        }
+
+      case 'text':
+        {
+          this.#$text.textContent = newVal;
+          break;
+        }
+
+      case 'persistent':
+        {
+          this.#updateTimeout();
+          break;
+        }
+    }
+  }
+
+  #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 declare type TSinchToastType = 'info' | 'warn' | 'error' | 'success';
+export declare 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 declare 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/utils.d.ts

@@ -0,0 +1,5 @@
+import type { TSinchToastType } from './types';
+export declare const typeValues: readonly TSinchToastType[];
+declare type TAssertType = (value: string | null) => asserts value is TSinchToastType;
+export declare const assertType: TAssertType;
+export {};

package/toast/utils.js

@@ -0,0 +1,6 @@
+export const typeValues = ['info', 'success', 'warn', 'error'];
+export const assertType = value => {
+  if (value === null || !typeValues.includes(value)) {
+    throw new Error(`sinch-toast: invalid type attribute: ${value}`);
+  }
+};

package/toast-manager/index.d.ts

@@ -0,0 +1,17 @@
+import '../icons/report-problem';
+import '../icons/report';
+import '../icons/check-circle';
+import '../icons/info';
+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,195 @@
+import '../icons/report-problem';
+import '../icons/report';
+import '../icons/check-circle';
+import '../icons/info';
+import '../title';
+import '../text';
+import { cloneNode, defineCustomElement, getRect, NectaryElement } 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;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 = false;
+  #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');
+  }
+
+  connectedCallback() {
+    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
+    this.#shouldReduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  }
+
+  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 declare type TSinchToastManagerElement = HTMLElement & {
+    readonly containerRect: TRect;
+    nthActionRect: (nth: number) => TRect | null;
+    nthCloseRect: (nth: number) => TRect | null;
+};
+export declare type TSinchToastManagerReact = TSinchElementReact<TSinchToastManagerElement> & {};