@nectary/components 3.3.0 → 3.3.2

package/lib/cjs/tooltip/index.js

@@ -1,277 +0,0 @@
-"use strict";
-
-require('../text');
-require('../pop');
-var _utils = require('../utils');
-var _tooltipState = require('./tooltip-state');
-var _utils2 = require('./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}:host([text-align=right]) #text{--sinch-comp-text-align:right}:host([text-align=center]) #text{--sinch-comp-text-align:center}:host([text-align=left]) #text{--sinch-comp-text-align:left}</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>';
-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;
-(0, _utils.defineCustomElement)('sinch-tooltip', class extends _utils.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 = (0, _utils.shouldReduceMotion)();
-    this.#tooltipState = new _tooltipState.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);
-    (0, _utils.updateAttribute)(this.#$pop, 'orientation', (0, _utils2.getPopOrientation)(this.orientation));
-    this.#updateText();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.#tooltipState.destroy();
-    this.#controller.abort();
-    this.#controller = null;
-  }
-  static get observedAttributes() {
-    return ['text', 'orientation', 'text-align', 'type', 'aria-label', 'aria-description'];
-  }
-  attributeChangedCallback(name, _, newVal) {
-    switch (name) {
-      case 'text':
-        {
-          this.#updateText();
-          break;
-        }
-      case 'orientation':
-        {
-          (0, _utils.updateAttribute)(this.#$pop, 'orientation', (0, _utils2.getPopOrientation)(this.orientation));
-          if (this.#isOpen()) {
-            this.#resetTipOrientation();
-            this.#updateTipOrientation();
-          }
-          break;
-        }
-      case 'text-align':
-        {
-          (0, _utils.updateAttribute)(this.#$pop, 'text-align', newVal);
-          break;
-        }
-      case 'type':
-        {
-          this.#tooltipState.updateOptions({
-            showDelay: newVal === 'fast' ? SHOW_DELAY_FAST : SHOW_DELAY_SLOW
-          });
-          break;
-        }
-      case 'aria-label':
-      case 'aria-description':
-        {
-          (0, _utils.updateAttribute)(this.#$pop, name, newVal);
-          break;
-        }
-    }
-  }
-  get text() {
-    return (0, _utils.getAttribute)(this, 'text', '');
-  }
-  set text(value) {
-    (0, _utils.updateAttribute)(this, 'text', value);
-  }
-  get orientation() {
-    return (0, _utils.getLiteralAttribute)(this, _utils2.orientationValues, 'orientation', 'top');
-  }
-  set orientation(value) {
-    (0, _utils.updateLiteralAttribute)(this, _utils2.orientationValues, 'orientation', value);
-  }
-  get 'text-align'() {
-    return (0, _utils.getLiteralAttribute)(this, _utils2.textAlignValues, 'text-align', 'left');
-  }
-  set 'text-align'(value) {
-    (0, _utils.updateLiteralAttribute)(this, _utils2.textAlignValues, 'text-align', value);
-  }
-  get type() {
-    return (0, _utils.getLiteralAttribute)(this, _utils2.typeValues, 'type', 'slow');
-  }
-  set type(value) {
-    (0, _utils.updateLiteralAttribute)(this, _utils2.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();
-    (0, _utils.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();
-      (0, _utils.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`;
-    }
-    (0, _utils.setClass)(this.#$tip, 'hidden', (0, _utils.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 = () => {
-    (0, _utils.getReactEventHandler)(this, 'on-show')?.();
-  };
-  #onHideReactHandler = () => {
-    (0, _utils.getReactEventHandler)(this, 'on-hide')?.();
-  };
-});

package/lib/cjs/tooltip/tooltip-state.js

@@ -1,133 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TooltipState = void 0;
-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;
-    }
-  }
-}
-exports.TooltipState = TooltipState;

package/lib/cjs/tooltip/types.js

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

package/lib/cjs/tooltip/utils.js

@@ -1,25 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.typeValues = exports.textAlignValues = exports.orientationValues = exports.getPopOrientation = void 0;
-const typeValues = exports.typeValues = ['fast', 'slow'];
-const orientationValues = exports.orientationValues = ['top', 'bottom', 'left', 'right', 'top-left', 'top-right', 'bottom-left', 'bottom-right'];
-const textAlignValues = exports.textAlignValues = ['right', 'center', 'left'];
-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;
-};
-exports.getPopOrientation = getPopOrientation;

package/lib/cjs/types.d.js

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

package/lib/cjs/utils/context.js

@@ -1,92 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.subscribeContext = exports.Context = void 0;
-const contextNameToEventMap = {
-  keydown: '-keydown',
-  visibility: '-visibility',
-  size: '-size'
-};
-const shouldPersistContextValue = {
-  keydown: false,
-  visibility: true,
-  size: true
-};
-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);
-  };
-}
-exports.Context = Context;
-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
-  });
-};
-exports.subscribeContext = subscribeContext;

package/lib/cjs/utils/countries.js

@@ -1,9 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require('@babel/runtime/helpers/interopRequireDefault');
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.countries = void 0;
-var _countries = _interopRequireDefault(require('./countries.json'));
-const countries = exports.countries = _countries.default;

package/lib/cjs/utils/csv.js

@@ -1,32 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.updateCsv = exports.unpackCsv = exports.packCsv = exports.getFirstCsvValue = exports.CSV_DELIMITER = void 0;
-const CSV_DELIMITER = exports.CSV_DELIMITER = ',';
-const packCsv = values => {
-  return values.join(CSV_DELIMITER);
-};
-exports.packCsv = packCsv;
-const unpackCsv = csv => {
-  return csv.length === 0 ? [] : csv.split(CSV_DELIMITER);
-};
-exports.unpackCsv = unpackCsv;
-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);
-};
-exports.updateCsv = updateCsv;
-const getFirstCsvValue = acc => {
-  return acc.length === 0 ? null : unpackCsv(acc)[0];
-};
-exports.getFirstCsvValue = getFirstCsvValue;

package/lib/cjs/utils/debounce.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.debounceTimeout = exports.debounceAnimationFrame = void 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);
-      }
-    }
-  };
-};
-const debounceTimeout = ms => createDebounce(cb => globalThis.setTimeout(cb, ms), globalThis.clearTimeout);
-exports.debounceTimeout = debounceTimeout;
-const debounceAnimationFrame = exports.debounceAnimationFrame = createDebounce(globalThis.requestAnimationFrame, globalThis.cancelAnimationFrame);