@nectary/components 2.12.1 → 2.12.3

package/lib/cjs/tooltip/index.js

@@ -0,0 +1,277 @@
+"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

@@ -0,0 +1,133 @@
+"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

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

package/lib/cjs/tooltip/utils.js

@@ -0,0 +1,25 @@
+"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

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

package/lib/cjs/utils/context.js

@@ -0,0 +1,92 @@
+"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

@@ -0,0 +1,9 @@
+"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

@@ -0,0 +1,32 @@
+"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

@@ -0,0 +1,29 @@
+"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);