@nectary/components 2.8.8 → 2.9.0

package/tooltip/index.js

@@ -1,264 +0,0 @@
-import '../text';
-import '../pop';
-import { defineCustomElement, getAttribute, getLiteralAttribute, updateBooleanAttribute, updateAttribute, updateLiteralAttribute, NectaryElement, setClass, rectOverlap, getReactEventHandler, shouldReduceMotion } from '../utils';
-const templateHTML = '<style>:host{display:contents}#content-wrapper{padding-bottom:8px;filter:drop-shadow(var(--sinch-comp-tooltip-shadow))}:host([orientation=left]) #content-wrapper{padding-bottom:0;padding-right:8px}:host([orientation=right]) #content-wrapper{padding-bottom:0;padding-left:8px}:host([orientation^=bottom]) #content-wrapper{padding-bottom:0;padding-top:8px}#content{position:relative;display:block;max-width:300px;padding:2px 6px;box-sizing:border-box;background-color:var(--sinch-local-color-background);border-radius:var(--sinch-comp-tooltip-shape-radius);pointer-events:none;opacity:0;--sinch-local-color-background:var(--sinch-comp-tooltip-color-background);--sinch-global-color-text:var(--sinch-comp-tooltip-color-text)}#text{word-break:break-word;pointer-events:none;--sinch-comp-text-font:var(--sinch-comp-tooltip-font-body)}#tip{position:absolute;left:50%;top:100%;transform:translateX(-50%) rotate(0);transform-origin:top center;fill:var(--sinch-local-color-background);pointer-events:none}#tip.hidden{display:none}:host([orientation=left]) #tip{transform:translateX(-50%) rotate(270deg);top:50%;left:100%}:host([orientation=right]) #tip{transform:translateX(-50%) rotate(90deg);top:50%;left:0}:host([orientation^=bottom]) #tip{transform:translateX(-50%) rotate(180deg);top:0}</style><sinch-pop id="pop"><slot id="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><sinch-text id="text" type="s"></sinch-text><svg id="tip" width="8" height="4" aria-hidden="true"><path d="m4 4 4-4h-8l4 4Z"/></svg></div></div></sinch-pop>';
-import { TooltipState } from './tooltip-state';
-import { getPopOrientation, orientationValues, typeValues } from './utils';
-const TIP_SIZE = 8;
-const SHOW_DELAY_SLOW = 1000;
-const SHOW_DELAY_FAST = 250;
-const HIDE_DELAY = 0;
-const ANIMATION_DURATION = 100;
-const template = document.createElement('template');
-template.innerHTML = templateHTML;
-defineCustomElement('sinch-tooltip', class extends NectaryElement {
-  #$pop;
-  #$tooltipText;
-  #$content;
-  #$contentWrapper;
-  #$tip;
-  #$target;
-  #controller = null;
-  #tooltipState;
-  #animation = null;
-  #shouldReduceMotion = false;
-  #isSubscribed = false;
-  constructor() {
-    super();
-    const shadowRoot = this.attachShadow();
-    shadowRoot.appendChild(template.content.cloneNode(true));
-    this.#$pop = shadowRoot.querySelector('#pop');
-    this.#$tooltipText = shadowRoot.querySelector('#text');
-    this.#$content = shadowRoot.querySelector('#content');
-    this.#$contentWrapper = shadowRoot.querySelector('#content-wrapper');
-    this.#$tip = shadowRoot.querySelector('#tip');
-    this.#$target = shadowRoot.querySelector('#target');
-    this.#shouldReduceMotion = shouldReduceMotion();
-    this.#tooltipState = new TooltipState({
-      showDelay: SHOW_DELAY_SLOW,
-      hideDelay: this.#shouldReduceMotion ? HIDE_DELAY + ANIMATION_DURATION : HIDE_DELAY,
-      hideAnimationDuration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
-      onShowStart: this.#onStateShowStart,
-      onShowEnd: this.#onStateShowEnd,
-      onHideStart: this.#onStateHideStart,
-      onHideEnd: this.#onStateHideEnd
-    });
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this.#controller = new AbortController();
-    const options = {
-      signal: this.#controller.signal
-    };
-    this.#$pop.addEventListener('-close', this.#onPopClose, options);
-    this.addEventListener('-show', this.#onShowReactHandler, options);
-    this.addEventListener('-hide', this.#onHideReactHandler, options);
-    updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
-    this.#updateText();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#tooltipState.destroy();
-    this.#controller.abort();
-    this.#controller = null;
-  }
-  static get observedAttributes() {
-    return ['text', 'orientation', 'type', 'aria-label', 'aria-description'];
-  }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#updateText();
-          break;
-        }
-      case 'orientation':
-        {
-          updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
-          if (this.#isOpen()) {
-            this.#resetTipOrientation();
-            this.#updateTipOrientation();
-          }
-          break;
-        }
-      case 'type':
-        {
-          this.#tooltipState.updateOptions({
-            showDelay: newVal === 'fast' ? SHOW_DELAY_FAST : SHOW_DELAY_SLOW
-          });
-          break;
-        }
-      case 'aria-label':
-      case 'aria-description':
-        {
-          updateAttribute(this.#$pop, name, newVal);
-          break;
-        }
-    }
-  }
-  get text() {
-    return getAttribute(this, 'text', '');
-  }
-  set text(value) {
-    updateAttribute(this, 'text', value);
-  }
-  get orientation() {
-    return getLiteralAttribute(this, orientationValues, 'orientation', 'top');
-  }
-  set orientation(value) {
-    updateLiteralAttribute(this, orientationValues, 'orientation', value);
-  }
-  get type() {
-    return getLiteralAttribute(this, typeValues, 'type', 'slow');
-  }
-  set type(value) {
-    updateLiteralAttribute(this, typeValues, 'type', value);
-  }
-  get footprintRect() {
-    return this.#$pop.footprintRect;
-  }
-  get tooltipRect() {
-    return this.#$pop.popoverRect;
-  }
-  #onMouseDown = () => {
-    this.#tooltipState.destroy();
-  };
-  #onPopClose = () => {
-    this.#tooltipState.destroy();
-  };
-  #onMouseEnter = () => {
-    this.#tooltipState.show();
-  };
-  #onMouseLeave = e => {
-    if (!this.#isOpen() || e.relatedTarget !== this.#$contentWrapper && e.relatedTarget !== this.#$target) {
-      this.#tooltipState.hide();
-    }
-  };
-  #onScroll = () => {
-    this.#tooltipState.destroy();
-  };
-  #onStateShowStart = () => {
-    this.#subscribeScroll();
-    this.#subscribeMouseLeaveEvents();
-  };
-  #onStateShowEnd = () => {
-    this.#dispatchShowEvent();
-    updateBooleanAttribute(this.#$pop, 'open', true);
-    requestAnimationFrame(this.#updateTipOrientation);
-    if (this.#animation !== null) {
-      this.#animation.updatePlaybackRate(1);
-      this.#animation.play();
-    } else {
-      this.#animation = this.#$content.animate({
-        opacity: [0, 1]
-      }, {
-        duration: this.#shouldReduceMotion ? 0 : ANIMATION_DURATION,
-        iterations: 1,
-        fill: 'forwards'
-      });
-    }
-  };
-  #onStateHideStart = () => {
-    this.#animation.updatePlaybackRate(-1);
-    this.#animation.play();
-  };
-  #onStateHideEnd = () => {
-    if (this.#isOpen()) {
-      this.#animation.finish();
-      this.#dispatchHideEvent();
-      updateBooleanAttribute(this.#$pop, 'open', false);
-    }
-    this.#resetTipOrientation();
-    this.#unsubscribeMouseLeaveEvents();
-    this.#unsubscribeScroll();
-  };
-  #resetTipOrientation() {
-    this.#$tip.style.top = '';
-    this.#$tip.style.left = '';
-  }
-  #updateTipOrientation = () => {
-    const orient = this.orientation;
-    const targetRect = this.#$pop.footprintRect;
-    const contentRect = this.#$content.getBoundingClientRect();
-    const diffX = targetRect.x - contentRect.x;
-    const diffY = targetRect.y - contentRect.y;
-    if (orient === 'left' || orient === 'right') {
-      const yPos = Math.max(TIP_SIZE, Math.min(diffY + targetRect.height / 2, contentRect.height - TIP_SIZE));
-      this.#$tip.style.top = `${yPos}px`;
-    } else {
-      let xPos = Math.max(TIP_SIZE, Math.min(diffX + targetRect.width / 2, contentRect.width - TIP_SIZE));
-      if (orient === 'bottom-left' || orient === 'top-left') {
-        xPos = Math.max(xPos, contentRect.width * 0.75);
-      }
-      if (orient === 'bottom-right' || orient === 'top-right') {
-        xPos = Math.min(xPos, contentRect.width * 0.25);
-      }
-      this.#$tip.style.left = `${xPos}px`;
-    }
-    setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
-  };
-  #updateText() {
-    if (!this.isDomConnected) {
-      return;
-    }
-    const text = this.text;
-    this.#$tooltipText.textContent = text;
-    if (text.length === 0) {
-      if (this.#isSubscribed) {
-        this.#tooltipState.destroy();
-        this.#unsubscribeMouseEnterEvent();
-      }
-    } else {
-      this.#subscribeMouseEnterEvent();
-    }
-  }
-  #subscribeMouseEnterEvent() {
-    if (!this.isDomConnected || this.#isSubscribed) {
-      return;
-    }
-    this.#$target.addEventListener('mouseenter', this.#onMouseEnter, {
-      signal: this.#controller.signal
-    });
-    this.#isSubscribed = true;
-  }
-  #unsubscribeMouseEnterEvent() {
-    this.#$target.removeEventListener('mouseenter', this.#onMouseEnter);
-    this.#isSubscribed = false;
-  }
-  #subscribeMouseLeaveEvents() {
-    const options = {
-      signal: this.#controller.signal
-    };
-    this.#$target.addEventListener('mousedown', this.#onMouseDown, options);
-    this.#$target.addEventListener('mouseleave', this.#onMouseLeave, options);
-    this.#$contentWrapper.addEventListener('mouseenter', this.#onMouseEnter, options);
-    this.#$contentWrapper.addEventListener('mouseleave', this.#onMouseLeave, options);
-  }
-  #unsubscribeMouseLeaveEvents() {
-    this.#$target.removeEventListener('mousedown', this.#onMouseDown);
-    this.#$target.removeEventListener('mouseleave', this.#onMouseLeave);
-    this.#$contentWrapper.removeEventListener('mouseenter', this.#onMouseEnter);
-    this.#$contentWrapper.removeEventListener('mouseleave', this.#onMouseLeave);
-  }
-  #subscribeScroll() {
-    window.addEventListener('wheel', this.#onScroll, true);
-  }
-  #unsubscribeScroll() {
-    window.removeEventListener('wheel', this.#onScroll, true);
-  }
-  #isOpen() {
-    return this.#$pop.hasAttribute('open');
-  }
-  #dispatchShowEvent() {
-    this.dispatchEvent(new CustomEvent('-show'));
-  }
-  #dispatchHideEvent() {
-    this.dispatchEvent(new CustomEvent('-hide'));
-  }
-  #onShowReactHandler = () => {
-    getReactEventHandler(this, 'on-show')?.();
-  };
-  #onHideReactHandler = () => {
-    getReactEventHandler(this, 'on-hide')?.();
-  };
-});

package/tooltip/tooltip-state.d.ts

@@ -1,19 +0,0 @@
-type TTooltipStateOptions = {
-    showDelay: number;
-    hideDelay: number;
-    hideAnimationDuration: number;
-    onShowStart(): void;
-    onShowEnd(): void;
-    onHideStart(): void;
-    onHideEnd(): void;
-};
-export declare class TooltipState {
-    #private;
-    constructor(options: TTooltipStateOptions);
-    updateOptions(options: Partial<TTooltipStateOptions>): void;
-    show(): void;
-    hide(): void;
-    interrupt(): void;
-    destroy(): void;
-}
-export {};

package/tooltip/tooltip-state.js

@@ -1,126 +0,0 @@
-export class TooltipState {
-  #timerId = null;
-  #state = 'hide';
-  #options;
-  constructor(options) {
-    this.#options = options;
-  }
-  updateOptions(options) {
-    this.#options = {
-      ...this.#options,
-      ...options
-    };
-  }
-  show() {
-    switch (this.#state) {
-      case 'hide':
-        {
-          this.#switchToHideToShow();
-          break;
-        }
-      case 'show-to-hide':
-        {
-          this.#switchToState('show');
-          break;
-        }
-    }
-  }
-  hide() {
-    switch (this.#state) {
-      case 'hide-to-show':
-        {
-          this.#onHideAnimationEnd();
-          break;
-        }
-      case 'show':
-        {
-          this.#switchToShowToHide();
-          break;
-        }
-    }
-  }
-  interrupt() {
-    switch (this.#state) {
-      case 'hide-to-show':
-        {
-          this.#onHideAnimationEnd();
-          break;
-        }
-      case 'show':
-        {
-          this.#switchToShowToHide(true, false);
-          break;
-        }
-      case 'show-to-hide':
-        {
-          this.#switchToShowToHide(true, false);
-          break;
-        }
-    }
-  }
-  destroy() {
-    switch (this.#state) {
-      case 'hide-to-show':
-        {
-          this.#onHideAnimationEnd();
-          break;
-        }
-      case 'show':
-        {
-          this.#switchToShowToHide(true, true);
-          break;
-        }
-      case 'show-to-hide':
-        {
-          this.#switchToShowToHide(true, true);
-          break;
-        }
-      case 'hide':
-        {
-          this.#onHideAnimationEnd();
-          break;
-        }
-    }
-  }
-  #switchToHideToShow() {
-    this.#switchToState('hide-to-show');
-    this.#options.onShowStart();
-    if (this.#options.showDelay === 0) {
-      this.#onSwitchToShow();
-    } else {
-      this.#timerId = window.setTimeout(this.#onSwitchToShow, this.#options.showDelay);
-    }
-  }
-  #switchToShowToHide(skipDelay, skipHideAnimation) {
-    this.#switchToState('show-to-hide');
-    if (skipDelay === true || this.#options.hideDelay === 0) {
-      this.#onShowToHideEnd(skipHideAnimation);
-    } else {
-      this.#timerId = window.setTimeout(this.#onShowToHideEnd, this.#options.hideDelay);
-    }
-  }
-  #onSwitchToShow = () => {
-    this.#switchToState('show');
-    this.#options.onShowEnd();
-  };
-  #onShowToHideEnd = skipHideAnimation => {
-    this.#switchToState('hide');
-    this.#options.onHideStart();
-    if (skipHideAnimation === true || this.#options.hideAnimationDuration === 0) {
-      this.#onHideAnimationEnd();
-    } else {
-      this.#timerId = window.setTimeout(this.#onHideAnimationEnd, this.#options.hideAnimationDuration);
-    }
-  };
-  #onHideAnimationEnd = () => {
-    this.#switchToState('hide');
-    this.#options.onHideEnd();
-  };
-  #switchToState(nextState) {
-    this.#state = nextState;
-    if (this.#timerId !== null) {
-      clearTimeout(this.#timerId);
-      this.#timerId = null;
-    }
-  }
-}

package/tooltip/types.d.ts

@@ -1,35 +0,0 @@
-import type { TRect, TSinchElementReact } from '../types';
-export type TSinchTooltipOrientation = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-export type TSinchTooltipType = 'slow' | 'fast';
-export type TSinchTooltipElement = HTMLElement & {
-    /** Text */
-    text: string;
-    /** Orientation, where it *points to* from origin */
-    orientation: TSinchTooltipOrientation;
-    /** Type */
-    type: TSinchTooltipType;
-    readonly footprintRect: TRect;
-    readonly tooltipRect: TRect;
-    /** Show event */
-    addEventListener(type: '-show', listener: (e: CustomEvent<void>) => void): void;
-    /** Hide event */
-    addEventListener(type: '-hide', listener: (e: CustomEvent<void>) => void): void;
-    /** Text */
-    setAttribute(name: 'text', value: string): void;
-    /** Orientation, where it *points to* from origin */
-    setAttribute(name: 'orientation', value: TSinchTooltipOrientation): void;
-    /** Type */
-    setAttribute(name: 'type', value: TSinchTooltipType): void;
-};
-export type TSinchTooltipReact = TSinchElementReact<TSinchTooltipElement> & {
-    /** Text */
-    text: string;
-    /** Orientation, where it *points to* from origin */
-    orientation?: TSinchTooltipOrientation;
-    /** Type */
-    type?: TSinchTooltipType;
-    /** Show event handler */
-    'on-show'?: (e: CustomEvent<void>) => void;
-    /** Hide event handler */
-    'on-hide'?: (e: CustomEvent<void>) => void;
-};

package/tooltip/types.js

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

package/tooltip/utils.d.ts

@@ -1,5 +0,0 @@
-import type { TSinchTooltipOrientation, TSinchTooltipType } from './types';
-import type { TSinchPopOrientation } from '../pop/types';
-export declare const typeValues: readonly TSinchTooltipType[];
-export declare const orientationValues: readonly TSinchTooltipOrientation[];
-export declare const getPopOrientation: (orientation: TSinchTooltipOrientation) => TSinchPopOrientation;

package/tooltip/utils.js

@@ -1,17 +0,0 @@
-export const typeValues = ['fast', 'slow'];
-export const orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
-export const getPopOrientation = orientation => {
-  if (orientation === 'top') {
-    return 'top-center';
-  }
-  if (orientation === 'bottom') {
-    return 'bottom-center';
-  }
-  if (orientation === 'left') {
-    return 'center-left';
-  }
-  if (orientation === 'right') {
-    return 'center-right';
-  }
-  return orientation;
-};

package/utils/context.d.ts

@@ -1,20 +0,0 @@
-export type TContextName = 'visibility' | 'keydown' | 'size';
-export type TContextKeydown = {
-    code: string;
-    preventDefault: () => void;
-};
-export type TContextVisibility = boolean;
-export type TContextSize = string;
-type TContextDataType = {
-    visibility: TContextVisibility;
-    keydown: TContextKeydown;
-    size: TContextSize;
-};
-export declare class Context<T extends TContextName> {
-    #private;
-    constructor($element: Element, name: T);
-    listen(signal: AbortSignal): void;
-    dispatch(contextValue: TContextDataType[T]): void;
-}
-export declare const subscribeContext: <T extends TContextName>($el: Element, name: T, cb: (e: CustomEvent<TContextDataType[T]>) => void, signal: AbortSignal) => void;
-export {};

package/utils/context.js

@@ -1,84 +0,0 @@
-const contextNameToEventMap = {
-  keydown: '-keydown',
-  visibility: '-visibility',
-  size: '-size'
-};
-const shouldPersistContextValue = {
-  keydown: false,
-  visibility: true,
-  size: true
-};
-export class Context {
-  #$root;
-  #listeners = new Set();
-  #name;
-  #isListening = false;
-  #lastContextValue = null;
-  constructor($element, name) {
-    this.#$root = $element;
-    this.#name = name;
-  }
-  listen(signal) {
-    if (this.#isListening) {
-      return;
-    }
-    this.#$root.addEventListener(`-context-connect-${this.#name}`, this.#onListenerConnect, {
-      signal
-    });
-    this.#$root.addEventListener(`-context-disconnect-${this.#name}`, this.#onListenerDisconnect, {
-      signal
-    });
-    this.#isListening = true;
-    signal.addEventListener('abort', () => {
-      this.#listeners.clear();
-      this.#isListening = false;
-      this.#lastContextValue = null;
-    }, {
-      once: true
-    });
-  }
-  dispatch(contextValue) {
-    for (const el of this.#listeners) {
-      el.dispatchEvent(new CustomEvent(contextNameToEventMap[this.#name], {
-        detail: contextValue
-      }));
-    }
-    if (shouldPersistContextValue[this.#name]) {
-      this.#lastContextValue = contextValue;
-    }
-  }
-  #onListenerConnect = e => {
-    e.stopPropagation();
-    this.#listeners.add(e.detail);
-    if (this.#lastContextValue !== null) {
-      e.detail.dispatchEvent(new CustomEvent(contextNameToEventMap[this.#name], {
-        detail: this.#lastContextValue
-      }));
-    }
-  };
-  #onListenerDisconnect = e => {
-    e.stopPropagation();
-    this.#listeners.delete(e.detail);
-  };
-}
-export const subscribeContext = ($el, name, cb, signal) => {
-  requestAnimationFrame(() => {
-    $el.dispatchEvent(new CustomEvent(`-context-connect-${name}`, {
-      bubbles: true,
-      composed: true,
-      detail: $el
-    }));
-  });
-  $el.addEventListener(contextNameToEventMap[name], cb, {
-    signal
-  });
-  signal.addEventListener('abort', () => {
-    $el.dispatchEvent(new CustomEvent(`-context-disconnect-${name}`, {
-      bubbles: true,
-      composed: true,
-      detail: $el
-    }));
-  }, {
-    once: true
-  });
-};

package/utils/countries.d.ts

@@ -1,6 +0,0 @@
-export type TSinchCountry = {
-    name: string;
-    phoneCode: string;
-    phoneMask: string | null;
-};
-export declare const countries: Record<string, TSinchCountry>;

package/utils/countries.js

@@ -1,2 +0,0 @@
-import countriesJson from './countries.json';
-export const countries = countriesJson;

package/utils/csv.d.ts

@@ -1,5 +0,0 @@
-export declare const CSV_DELIMITER = ",";
-export declare const packCsv: (values: string[]) => string;
-export declare const unpackCsv: (csv: string) => string[];
-export declare const updateCsv: (csv: string, value: string, setActive: boolean) => string;
-export declare const getFirstCsvValue: (acc: string) => string | null;

package/utils/csv.js

@@ -1,22 +0,0 @@
-export const CSV_DELIMITER = ',';
-export const packCsv = values => {
-  return values.join(CSV_DELIMITER);
-};
-export const unpackCsv = csv => {
-  return csv.length === 0 ? [] : csv.split(CSV_DELIMITER);
-};
-export const updateCsv = (csv, value, setActive) => {
-  const values = unpackCsv(csv);
-  const index = values.indexOf(value);
-  if (setActive) {
-    if (index < 0) {
-      values.push(value);
-    }
-  } else if (index >= 0) {
-    values.splice(index, 1);
-  }
-  return packCsv(values);
-};
-export const getFirstCsvValue = acc => {
-  return acc.length === 0 ? null : unpackCsv(acc)[0];
-};

package/utils/debounce.d.ts

@@ -1,8 +0,0 @@
-export declare const debounceTimeout: (ms: number) => (cb: () => void) => {
-    fn: () => void;
-    cancel: () => void;
-};
-export declare const debounceAnimationFrame: (cb: () => void) => {
-    fn: () => void;
-    cancel: () => void;
-};

package/utils/debounce.js

@@ -1,22 +0,0 @@
-const createDebounce = (delayFn, cancelFn) => cb => {
-  let id = null;
-  const delayCallback = () => {
-    id = null;
-    cb();
-  };
-  return {
-    fn: () => {
-      if (id !== null) {
-        cancelFn(id);
-      }
-      id = delayFn(delayCallback);
-    },
-    cancel: () => {
-      if (id !== null) {
-        cancelFn(id);
-      }
-    }
-  };
-};
-export const debounceTimeout = ms => createDebounce(cb => globalThis.setTimeout(cb, ms), globalThis.clearTimeout);
-export const debounceAnimationFrame = createDebounce(globalThis.requestAnimationFrame, globalThis.cancelAnimationFrame);