@nectary/components 3.3.1 → 3.3.2

package/lib/cjs/title/index.js

@@ -1,62 +0,0 @@
-"use strict";
-
-var _utils = require('../utils');
-var _utils2 = require('./utils');
-const templateHTML = '<style>:host{display:block;--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type=xl]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xl)}:host([type="l"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-l)}:host([type="m"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-m)}:host([type="s"]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-s)}:host([type=xs]){--sinch-comp-title-font:var(--sinch-sys-font-desktop-title-xs)}#text{letter-spacing:-2%;color:var(--sinch-global-color-text,var(--sinch-sys-color-text-default));font:var(--sinch-comp-title-font)}:host([ellipsis]) #text{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}</style><span id="text"></span>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-(0, _utils.defineCustomElement)('sinch-title', class extends _utils.NectaryElement {
-  #$text;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$text = shadowRoot.querySelector('#text');
-  }
-  connectedCallback() {
-    this.setAttribute('role', 'heading');
-  }
-  static get observedAttributes() {
-    return ['text', 'level', 'ellipsis'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#$text.textContent = newVal;
-          break;
-        }
-      case 'level':
-        {
-          (0, _utils.updateAttribute)(this, 'aria-level', newVal);
-          break;
-        }
-      case 'ellipsis':
-        {
-          if ((0, _utils.isAttrEqual)(oldVal, newVal)) {
-            break;
-          }
-          (0, _utils.updateBooleanAttribute)(this, 'ellipsis', (0, _utils.isAttrTrue)(newVal));
-          break;
-        }
-    }
-  }
-  get text() {
-    return (0, _utils.getAttribute)(this, 'text', '');
-  }
-  set text(value) {
-    (0, _utils.updateAttribute)(this, 'text', value);
-  }
-  set type(value) {
-    (0, _utils.updateLiteralAttribute)(this, _utils2.typeValues, 'type', value);
-  }
-  get type() {
-    return (0, _utils.getLiteralAttribute)(this, _utils2.typeValues, 'type');
-  }
-  set ellipsis(isEllipsis) {
-    (0, _utils.updateBooleanAttribute)(this, 'ellipsis', isEllipsis);
-  }
-  get ellipsis() {
-    return (0, _utils.getBooleanAttribute)(this, 'ellipsis');
-  }
-});

package/lib/cjs/title/types.js

@@ -1 +0,0 @@
-"use strict";

package/lib/cjs/title/utils.js

@@ -1,24 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.typeValues = exports.getTitleLevelFromType = void 0;
-const typeValues = exports.typeValues = ['xl', 'l', 'm', 's', 'xs'];
-const getTitleLevelFromType = type => {
-  switch (type) {
-    case 'xl':
-      return '1';
-    case 'l':
-      return '2';
-    case 'm':
-      return '3';
-    case 's':
-      return '4';
-    case 'xs':
-      return '5';
-    default:
-      return '';
-  }
-};
-exports.getTitleLevelFromType = getTitleLevelFromType;

package/lib/cjs/toast/index.js

@@ -1,88 +0,0 @@
-"use strict";
-
-require('../icon');
-require('../rich-text');
-var _utils = require('../utils');
-var _utils2 = require('./utils');
-const templateHTML = '<style>:host{display:block}#wrapper{display:flex;flex-direction:row;align-items:center;gap:8px;width:328px;max-width:90vw;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;word-wrap:break-word;--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-rich-text id="text" size="m"></sinch-rich-text><slot name="action"></slot><slot name="close"></slot></div>';
-const TIMEOUT = 5000;
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-(0, _utils.defineCustomElement)('sinch-toast', class extends _utils.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':
-        {
-          (0, _utils.updateAttribute)(this.#$text, name, newVal);
-          break;
-        }
-      case 'persistent':
-        {
-          this.#updateTimeout();
-          break;
-        }
-    }
-  }
-  get type() {
-    return (0, _utils.getLiteralAttribute)(this, _utils2.typeValues, 'type');
-  }
-  set type(value) {
-    (0, _utils.updateLiteralAttribute)(this, _utils2.typeValues, 'type', value);
-  }
-  get text() {
-    return (0, _utils.getAttribute)(this, 'text', '');
-  }
-  set text(value) {
-    (0, _utils.updateAttribute)(this, 'text', value);
-  }
-  get persistent() {
-    return (0, _utils.getBooleanAttribute)(this, 'persistent');
-  }
-  set persistent(isPersistent) {
-    (0, _utils.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 => {
-    (0, _utils.getReactEventHandler)(this, 'on-timeout')?.(e);
-  };
-});

package/lib/cjs/toast/types.js

@@ -1 +0,0 @@
-"use strict";

package/lib/cjs/toast/utils.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.typeValues = void 0;
-const typeValues = exports.typeValues = ['info', 'success', 'warn', 'error'];

package/lib/cjs/toast-manager/index.js

@@ -1,172 +0,0 @@
-"use strict";
-
-require('../title');
-require('../text');
-var _utils = require('../utils');
-var _utils2 = require('./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}:host([origin=top-right]) #list{flex-direction:column-reverse;bottom:unset;top: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;
-(0, _utils.defineCustomElement)('sinch-toast-manager', class extends _utils.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 = (0, _utils.shouldReduceMotion)();
-  }
-  connectedCallback() {
-    this.#$slot.addEventListener('slotchange', this.#onSlotChange);
-  }
-  disconnectedCallback() {
-    this.#$slot.removeEventListener('slotchange', this.#onSlotChange);
-    this.#clear();
-  }
-  get origin() {
-    return (0, _utils.getLiteralAttribute)(this, _utils2.originValues, 'origin', 'bottom-right');
-  }
-  set origin(value) {
-    (0, _utils.updateLiteralAttribute)(this, _utils2.originValues, 'origin', value);
-  }
-  get containerRect() {
-    return (0, _utils.getRect)(this.#$list);
-  }
-  nthActionRect(nth) {
-    const item = this.#$list.children[nth]?.querySelector('[slot=action]');
-    return item != null ? (0, _utils.getRect)(item) : null;
-  }
-  nthCloseRect(nth) {
-    const item = this.#$list.children[nth]?.querySelector('[slot=close]');
-    return item != null ? (0, _utils.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 = (0, _utils.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/lib/cjs/toast-manager/types.js

@@ -1 +0,0 @@
-"use strict";

package/lib/cjs/toast-manager/utils.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.originValues = void 0;
-const originValues = exports.originValues = ['bottom-right', 'top-right'];

package/lib/cjs/toggle/index.js

@@ -1,143 +0,0 @@
-"use strict";
-
-var _utils = require('../utils');
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative;display:flex;flex-direction:row;gap:8px;width:100%;height:var(--sinch-local-size);cursor:pointer;user-select:none;--sinch-local-size:20px}:host([small]) #wrapper{--sinch-local-size:16px}:host([disabled]) #wrapper{cursor:initial}#knob-container{position:relative;width:40px;height:var(--sinch-local-size);border-radius:calc(var(--sinch-local-size) * .5);background-color:var(--sinch-comp-toggle-color-default-background-initial);pointer-events:none;transition:background-color .15s ease-in-out}:host([small]) #knob-container{width:32px;height:var(--sinch-local-size)}: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;width:16px;height:16px;left:2px;top:2px;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 .15s 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;position:absolute;top:0;padding:0 1px;opacity:0;transition:opacity .15s ease-in-out;user-select:none}#knob::before{content:"on";right:100%}#knob::after{content:"off";left:100%}:host([labeled]:not([small]):not([checked])) #knob::after{opacity:1}:host([labeled]:not([small])[checked]) #knob::before{opacity:1}@media (prefers-reduced-motion){#knob,#knob-container,#knob::after,#knob::before{transition:none}}#outline{display:none;position:absolute;left:-3px;top:-3px;right:-3px;bottom:-3px;border:2px solid var(--sinch-comp-toggle-color-default-outline-focus);border-radius:17px;pointer-events:none}:host(:focus-visible) #outline{display:block}#label{flex:1;min-width:0;align-self:center;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:var(--sinch-comp-toggle-font-size-m-label);color:var(--sinch-comp-toggle-color-default-label-initial)}#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)}</style><div id="wrapper"><div id="knob-container"><div id="outline"></div><div id="knob"></div></div><span id="label"></span></div>';
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-(0, _utils.defineCustomElement)('sinch-toggle', class extends _utils.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.addEventListener('click', this.#onClick, options);
-    this.addEventListener('keydown', this.#onKeydown, 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);
-    this.#updateTabIndex();
-  }
-  disconnectedCallback() {
-    this.#controller.abort();
-    this.#controller = null;
-  }
-  static get observedAttributes() {
-    return ['checked', 'disabled', 'text', 'labeled', 'small'];
-  }
-  attributeChangedCallback(name, oldVal, newVal) {
-    if ((0, _utils.isAttrEqual)(oldVal, newVal)) {
-      return;
-    }
-    switch (name) {
-      case 'text':
-        {
-          this.#$label.textContent = newVal;
-          break;
-        }
-      case 'checked':
-        {
-          const isChecked = (0, _utils.isAttrTrue)(newVal);
-          (0, _utils.updateExplicitBooleanAttribute)(this, 'aria-checked', isChecked);
-          (0, _utils.updateBooleanAttribute)(this, name, isChecked);
-          break;
-        }
-      case 'disabled':
-        {
-          const isDisabled = (0, _utils.isAttrTrue)(newVal);
-          this.#updateTabIndex();
-          (0, _utils.updateExplicitBooleanAttribute)(this, 'aria-disabled', isDisabled);
-          (0, _utils.updateBooleanAttribute)(this, name, isDisabled);
-          break;
-        }
-      case 'small':
-      case 'labeled':
-        {
-          (0, _utils.updateBooleanAttribute)(this, name, (0, _utils.isAttrTrue)(newVal));
-          break;
-        }
-    }
-  }
-  set checked(isChecked) {
-    (0, _utils.updateBooleanAttribute)(this, 'checked', isChecked);
-  }
-  get checked() {
-    return (0, _utils.getBooleanAttribute)(this, 'checked');
-  }
-  set small(isSmall) {
-    (0, _utils.updateBooleanAttribute)(this, 'small', isSmall);
-  }
-  get small() {
-    return (0, _utils.getBooleanAttribute)(this, 'small');
-  }
-  set labeled(isLabeled) {
-    (0, _utils.updateBooleanAttribute)(this, 'labeled', isLabeled);
-  }
-  get labeled() {
-    return (0, _utils.getBooleanAttribute)(this, 'labeled');
-  }
-  set disabled(isDisabled) {
-    (0, _utils.updateBooleanAttribute)(this, 'disabled', isDisabled);
-  }
-  get disabled() {
-    return (0, _utils.getBooleanAttribute)(this, 'disabled');
-  }
-  set text(value) {
-    (0, _utils.updateAttribute)(this, 'text', value);
-  }
-  get text() {
-    return (0, _utils.getAttribute)(this, 'text');
-  }
-  get focusable() {
-    return true;
-  }
-  #onClick = () => {
-    if (this.disabled) {
-      return;
-    }
-    this.dispatchEvent(new CustomEvent('-change', {
-      detail: !this.checked
-    }));
-  };
-  #onKeydown = e => {
-    switch (e.code) {
-      case 'Space':
-      case 'Enter':
-        {
-          e.preventDefault();
-          this.click();
-        }
-    }
-  };
-  #updateTabIndex() {
-    this.tabIndex = this.disabled ? -1 : 0;
-  }
-  #onFocus = () => {
-    this.dispatchEvent(new CustomEvent('-focus'));
-  };
-  #onBlur = () => {
-    this.dispatchEvent(new CustomEvent('-blur'));
-  };
-  #onChangeReactHandler = e => {
-    (0, _utils.getReactEventHandler)(this, 'on-change')?.(e);
-  };
-  #onFocusReactHandler = e => {
-    (0, _utils.getReactEventHandler)(this, 'on-focus')?.(e);
-  };
-  #onBlurReactHandler = e => {
-    (0, _utils.getReactEventHandler)(this, 'on-blur')?.(e);
-  };
-});

package/lib/cjs/toggle/types.js

@@ -1 +0,0 @@
-"use strict";