@nectary/components 0.39.0 → 0.41.0

package/popover/index.js

@@ -1,234 +1,63 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$target, _$dialog, _isConnected, _resizeThrottle, _originalOverflowValue, _$targetSlot, _$targetOpenSlot, _$targetOpenWrapper, _targetActiveElement, _onExpand, _onCollapse, _isOpen, _onResize, _updateOrientation, _onBackdropMouseDown, _onCancel, _onCloseReactHandler, _dispatchCloseEvent, _captureActiveElement, _stopPropagation;
-
-function _classPrivateMethodInitSpec(obj, privateSet) { _checkPrivateRedeclaration(obj, privateSet); privateSet.add(obj); }
-
-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"); } }
-
-function _classPrivateMethodGet(receiver, privateSet, fn) { if (!privateSet.has(receiver)) { throw new TypeError("attempted to get private field on non-instance"); } return fn; }
-
-import dialogPolyfill from 'dialog-polyfill';
-import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, getRect, isAttrTrue, updateLiteralAttribute, getReactEventHandler, updateBooleanAttribute, NectaryElement, throttleAnimationFrame } from '../utils';
-const templateHTML = '<style>:host{display:inline-block;vertical-align:middle;outline:0}#wrapper{position:relative}dialog{position:fixed;top:0;left:0;margin:0;outline:0;padding:0;border:none;box-sizing:border-box;max-width:unset;max-height:unset;z-index:1;background:0 0;overflow:visible}dialog:not([open]){display:none}dialog::backdrop{background-color:transparent}dialog+.backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background-color:transparent}dialog.fixed{position:fixed;top:50%;transform:translate(0,-50%)}._dialog_overlay{position:fixed;top:0;right:0;bottom:0;left:0}#target{display:flex;flex-direction:column}#content{position:relative;font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);box-shadow:var(--sinch-elevation-level-2);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-popover-shape-radius,var(--sinch-shape-radius-l));outline:0}#target-open{display:flex;flex-direction:column;position:absolute;left:0;top:0}</style><div id="wrapper"><div id="target" aria-haspopup="dialog" aria-expanded="false"><slot name="target"></slot></div><dialog id="dialog"><div id="target-open"><slot name="target-open"></slot></div><div id="content" tabindex="-1"><slot name="content"></slot></div></dialog></div>';
-import { orientationValues } from './utils';
+import '../pop';
+import { defineCustomElement, getBooleanAttribute, getLiteralAttribute, updateLiteralAttribute, updateBooleanAttribute, NectaryElement, updateAttribute, getReactEventHandler, isAttrTrue, setClass, rectOverlap } from '../utils';
+import { dispatchContextConnectEvent, dispatchContextDisconnectEvent } from '../utils/context';
+const templateHTML = '<style>:host{display:contents}#content-wrapper{position:relative;padding-top:4px}#content{font:var(--sinch-font-body);color:var(--sinch-color-text-default);background-color:var(--sinch-color-snow-100);border:1px solid var(--sinch-color-snow-500);border-radius:var(--sinch-shape-radius-m);box-shadow:var(--sinch-elevation-level-2);overflow:hidden}#tip{position:absolute;left:50%;top:13px;transform:translateX(-50%) rotate(180deg);transform-origin:top center;fill:var(--sinch-color-snow-100);stroke:var(--sinch-color-snow-500);stroke-linecap:square;pointer-events:none;display:none}:host([orientation^=top]) #tip{transform:translateX(-50%) rotate(0);top:calc(100% - 13px)}:host([tip]) #tip:not(.hidden){display:block}:host([tip]) #content{box-shadow:none}:host([tip]) #content-wrapper{padding-top:12px;filter:drop-shadow(var(--sinch-elevation-level-2))}:host([orientation^=top]) #content-wrapper{padding-top:0;padding-bottom:4px}:host([orientation^=top][tip]) #content-wrapper{padding-top:0;padding-bottom:12px}</style><sinch-pop id="pop" inset="4"><slot name="target" slot="target"></slot><div id="content-wrapper" slot="content"><div id="content"><slot name="content"></slot></div><svg id="tip" width="16" height="9" aria-hidden="true"><path d="m0 0 8 8 8 -8"/></svg></div></sinch-pop>';
+import { assertOrientation, getPopOrientation, orientationValues } from './utils';
+const TIP_SIZE = 16;
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-const POPOVER_OFFSET = 4;
-defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new WeakMap(), _isConnected = new WeakMap(), _resizeThrottle = new WeakMap(), _originalOverflowValue = new WeakMap(), _$targetSlot = new WeakMap(), _$targetOpenSlot = new WeakMap(), _$targetOpenWrapper = new WeakMap(), _targetActiveElement = new WeakMap(), _onExpand = new WeakSet(), _onCollapse = new WeakSet(), _isOpen = new WeakSet(), _onResize = new WeakMap(), _updateOrientation = new WeakMap(), _onBackdropMouseDown = new WeakMap(), _onCancel = new WeakMap(), _onCloseReactHandler = new WeakMap(), _dispatchCloseEvent = new WeakSet(), _captureActiveElement = new WeakMap(), _stopPropagation = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-popover', class extends NectaryElement {
+  #$pop;
+  #$content;
+  #$tip;
+  #controller = null;
+
   constructor() {
     super();
-
-    _classPrivateMethodInitSpec(this, _dispatchCloseEvent);
-
-    _classPrivateMethodInitSpec(this, _isOpen);
-
-    _classPrivateMethodInitSpec(this, _onCollapse);
-
-    _classPrivateMethodInitSpec(this, _onExpand);
-
-    _classPrivateFieldInitSpec(this, _$target, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$dialog, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _isConnected, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _resizeThrottle, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _originalOverflowValue, {
-      writable: true,
-      value: ''
-    });
-
-    _classPrivateFieldInitSpec(this, _$targetSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$targetOpenSlot, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$targetOpenWrapper, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _targetActiveElement, {
-      writable: true,
-      value: null
-    });
-
-    _classPrivateFieldInitSpec(this, _onResize, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldGet(this, _resizeThrottle).fn();
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _updateOrientation, {
-      writable: true,
-      value: () => {
-        _classPrivateFieldGet(this, _$dialog).style.width = 'max-content';
-
-        const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
-
-        const modalRect = _classPrivateFieldGet(this, _$dialog).getBoundingClientRect();
-
-        let leftPos = 0;
-        let topPos = 0;
-        const orient = this.orientation;
-        const shouldExpandWidthToTarget = orient === 'top' || orient === 'bottom';
-        const resultWidth = shouldExpandWidthToTarget ? Math.max(modalRect.width, targetRect.width) : modalRect.width;
-
-        if (orient === 'bottom-right' || orient === 'top-right' || orient === 'top' || orient === 'bottom') {
-          leftPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.x, window.innerWidth - resultWidth - POPOVER_OFFSET));
-        }
-
-        if (orient === 'bottom-left' || orient === 'top-left') {
-          leftPos = Math.max(POPOVER_OFFSET, targetRect.right - resultWidth);
-        }
-
-        if (orient === 'bottom-left' || orient === 'bottom-right' || orient === 'bottom') {
-          topPos = Math.max(POPOVER_OFFSET, Math.min(targetRect.bottom + POPOVER_OFFSET, window.innerHeight - modalRect.height - POPOVER_OFFSET));
-        }
-
-        if (orient === 'top-left' || orient === 'top-right' || orient === 'top') {
-          topPos = Math.max(POPOVER_OFFSET, targetRect.top - POPOVER_OFFSET - modalRect.height);
-        }
-
-        _classPrivateFieldGet(this, _$dialog).style.left = `${leftPos}px`;
-        _classPrivateFieldGet(this, _$dialog).style.top = `${topPos}px`;
-        _classPrivateFieldGet(this, _$dialog).style.width = `${resultWidth}px`;
-
-        if (!this.modal) {
-          const targetLeftPos = targetRect.left - leftPos;
-          const targetTopPos = targetRect.top - topPos;
-          _classPrivateFieldGet(this, _$targetOpenWrapper).style.left = `${targetLeftPos}px`;
-          _classPrivateFieldGet(this, _$targetOpenWrapper).style.top = `${targetTopPos}px`;
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onBackdropMouseDown, {
-      writable: true,
-      value: e => {
-        if (e.target !== _classPrivateFieldGet(this, _$dialog)) {
-          return;
-        }
-
-        const rect = this.popoverRect;
-        const isInside = e.x >= rect.x && e.x < rect.x + rect.width && e.y >= rect.y && e.y < rect.y + rect.height;
-
-        if (!isInside) {
-          _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
-        }
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCancel, {
-      writable: true,
-      value: e => {
-        e.preventDefault();
-
-        _classPrivateMethodGet(this, _dispatchCloseEvent, _dispatchCloseEvent2).call(this);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _onCloseReactHandler, {
-      writable: true,
-      value: e => {
-        getReactEventHandler(this, 'onClose')?.();
-        getReactEventHandler(this, 'on-close')?.(e);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _captureActiveElement, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-
-        _classPrivateFieldSet(this, _targetActiveElement, e.target);
-      }
-    });
-
-    _classPrivateFieldInitSpec(this, _stopPropagation, {
-      writable: true,
-      value: e => {
-        e.stopPropagation();
-      }
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$target, shadowRoot.querySelector('#target'));
-
-    _classPrivateFieldSet(this, _$dialog, shadowRoot.querySelector('#dialog'));
-
-    _classPrivateFieldSet(this, _$targetSlot, shadowRoot.querySelector('slot[name="target"]'));
-
-    _classPrivateFieldSet(this, _$targetOpenSlot, shadowRoot.querySelector('slot[name="target-open"]'));
-
-    _classPrivateFieldSet(this, _$targetOpenWrapper, shadowRoot.querySelector('#target-open'));
-
-    _classPrivateFieldSet(this, _isConnected, false);
-
-    _classPrivateFieldSet(this, _resizeThrottle, throttleAnimationFrame(_classPrivateFieldGet(this, _updateOrientation)));
-
-    dialogPolyfill.registerDialog(_classPrivateFieldGet(this, _$dialog));
-
-    dialogPolyfill.dm.handleFocus_ = function () {};
+    this.#$pop = shadowRoot.querySelector('#pop');
+    this.#$content = shadowRoot.querySelector('#content');
+    this.#$tip = shadowRoot.querySelector('#tip');
   }
 
   connectedCallback() {
-    this.setAttribute('role', 'dialog');
-
-    _classPrivateFieldGet(this, _$dialog).addEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    _classPrivateFieldGet(this, _$dialog).addEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropMouseDown));
-
-    this.addEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
-
-    _classPrivateFieldSet(this, _isConnected, true);
-
-    if (getBooleanAttribute(this, 'open')) {
-      _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-    } else {
-      _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
-    }
+    this.#controller = new AbortController();
+    const {
+      signal
+    } = this.#controller;
+    this.addEventListener('-close', this.#onCloseReactHandler, {
+      signal
+    });
+    this.#$pop.addEventListener('-close', this.#onPopClose, {
+      signal
+    });
+    this.#$content.addEventListener('-visibility', this.#onContextVisibility, {
+      signal
+    });
+    dispatchContextConnectEvent(this.#$content, 'visibility');
+    updateAttribute(this.#$pop, 'orientation', getPopOrientation(this.orientation));
   }
 
   disconnectedCallback() {
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('cancel', _classPrivateFieldGet(this, _onCancel));
-
-    _classPrivateFieldGet(this, _$dialog).removeEventListener('mousedown', _classPrivateFieldGet(this, _onBackdropMouseDown));
-
-    this.removeEventListener('-close', _classPrivateFieldGet(this, _onCloseReactHandler));
+    dispatchContextDisconnectEvent(this.#$content, 'visibility');
+    this.#controller.abort();
+  }
 
-    _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+  #onPopClose = () => {
+    this.#dispatchCloseEvent();
+  };
+  #onCloseReactHandler = e => {
+    getReactEventHandler(this, 'onClose')?.();
+    getReactEventHandler(this, 'on-close')?.(e);
+  };
 
-    _classPrivateFieldSet(this, _isConnected, false);
+  #dispatchCloseEvent() {
+    this.dispatchEvent(new CustomEvent('-close'));
   }
 
   static get observedAttributes() {
-    return ['modal', 'orientation', 'open'];
+    return ['orientation', 'open', 'modal', 'tip'];
   }
 
   set modal(isModal) {
@@ -247,16 +76,28 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
     return getBooleanAttribute(this, 'open');
   }
 
+  set tip(hasTip) {
+    updateBooleanAttribute(this, 'tip', hasTip);
+  }
+
+  get tip() {
+    return getBooleanAttribute(this, 'tip');
+  }
+
   get orientation() {
-    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom');
+    return getLiteralAttribute(this, orientationValues, 'orientation', 'bottom-left');
   }
 
   set orientation(value) {
     updateLiteralAttribute(this, orientationValues, 'orientation', value);
   }
 
+  get footprintRect() {
+    return this.#$pop.footprintRect;
+  }
+
   get popoverRect() {
-    return getRect(_classPrivateFieldGet(this, _$dialog));
+    return this.#$pop.popoverRect;
   }
 
   attributeChangedCallback(name, oldVal, newVal) {
@@ -265,129 +106,79 @@ defineCustomElement('sinch-popover', (_$target = new WeakMap(), _$dialog = new W
     }
 
     switch (name) {
-      case 'open':
+      case 'orientation':
         {
-          if (isAttrTrue(newVal)) {
-            _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-          } else {
-            _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+          assertOrientation(newVal);
+          updateAttribute(this.#$pop, 'orientation', getPopOrientation(newVal));
+
+          if (this.#isOpen()) {
+            this.#updateTipOrientation();
           }
 
-          updateBooleanAttribute(this, 'open', isAttrTrue(newVal));
           break;
         }
 
-      case 'orientation':
+      case 'tip':
         {
-          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-            _classPrivateFieldGet(this, _updateOrientation).call(this);
+          updateBooleanAttribute(this, 'tip', isAttrTrue(newVal));
+
+          if (newVal === '' && this.#isOpen()) {
+            this.#updateTipOrientation();
           }
 
           break;
         }
 
-      case 'modal':
+      case 'open':
         {
-          if (_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-            _classPrivateMethodGet(this, _onCollapse, _onCollapse2).call(this);
+          const isOpen = isAttrTrue(newVal);
+          updateBooleanAttribute(this.#$pop, name, isOpen);
+          updateBooleanAttribute(this, name, isOpen);
+          break;
+        }
 
-            _classPrivateMethodGet(this, _onExpand, _onExpand2).call(this);
-          }
+      default:
+        {
+          updateAttribute(this.#$pop, name, newVal);
         }
     }
   }
 
-}));
-
-function _onExpand2() {
-  if (!_classPrivateFieldGet(this, _isConnected) || _classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-    return;
-  }
-
-  const isNonModal = !this.modal;
-
-  _classPrivateFieldGet(this, _$targetSlot).addEventListener('blur', _classPrivateFieldGet(this, _stopPropagation), true);
-
-  if (isNonModal) {
-    _classPrivateFieldGet(this, _$targetOpenSlot).addEventListener('blur', _classPrivateFieldGet(this, _captureActiveElement), true);
-
-    const targetRect = _classPrivateFieldGet(this, _$target).getBoundingClientRect();
-
-    const widthPx = `${targetRect.width}px`;
-    const heightPx = `${targetRect.height}px`;
-    _classPrivateFieldGet(this, _$target).style.width = widthPx;
-    _classPrivateFieldGet(this, _$target).style.height = heightPx;
-    _classPrivateFieldGet(this, _$targetOpenWrapper).style.width = widthPx;
-    _classPrivateFieldGet(this, _$targetOpenWrapper).style.height = heightPx;
-    _classPrivateFieldGet(this, _$targetSlot).assignedElements()[0]?.setAttribute('slot', 'target-open');
-  }
-
-  _classPrivateFieldGet(this, _$dialog).showModal();
-
-  _classPrivateFieldGet(this, _updateOrientation).call(this);
-
-  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'true');
-
-  _classPrivateFieldGet(this, _$targetSlot).removeEventListener('blur', _classPrivateFieldGet(this, _stopPropagation), true);
-
-  if (isNonModal) {
-    _classPrivateFieldGet(this, _$targetOpenSlot).removeEventListener('blur', _classPrivateFieldGet(this, _captureActiveElement), true);
-
-    if (_classPrivateFieldGet(this, _targetActiveElement) !== null) {
-      requestAnimationFrame(() => {
-        _classPrivateFieldGet(this, _$targetOpenSlot).addEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
-
-        _classPrivateFieldGet(this, _targetActiveElement)?.focus();
-
-        _classPrivateFieldGet(this, _$targetOpenSlot).removeEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
-      });
+  #onContextVisibility = e => {
+    if (e.detail) {
+      this.#updateTipOrientation();
+    } else {
+      this.#resetTipOrientation();
     }
-  }
+  };
 
-  _classPrivateFieldSet(this, _originalOverflowValue, document.body.style.overflow);
-
-  document.body.style.overflow = 'hidden';
-  window.addEventListener('resize', _classPrivateFieldGet(this, _onResize));
-}
-
-function _onCollapse2() {
-  if (!_classPrivateMethodGet(this, _isOpen, _isOpen2).call(this)) {
-    return;
+  #resetTipOrientation() {
+    this.#$tip.style.top = '';
+    this.#$tip.style.left = '';
   }
 
-  _classPrivateFieldGet(this, _$targetSlot).addEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
+  #updateTipOrientation = () => {
+    const orientation = this.orientation;
+    const targetRect = this.#$pop.footprintRect;
+    const contentRect = this.#$content.getBoundingClientRect();
+    const diffX = targetRect.x - contentRect.x;
+    let desiredX = diffX + targetRect.width / 2;
 
-  if (_classPrivateFieldGet(this, _targetActiveElement) !== null) {
-    _classPrivateFieldGet(this, _$targetOpenSlot).addEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
+    if (orientation === 'bottom-left' || orientation === 'top-left') {
+      desiredX = Math.max(desiredX, contentRect.width * 0.75);
+    }
 
-    _classPrivateFieldGet(this, _targetActiveElement).focus();
+    if (orientation === 'bottom-right' || orientation === 'top-right') {
+      desiredX = Math.min(desiredX, contentRect.width * 0.25);
+    }
 
-    _classPrivateFieldSet(this, _targetActiveElement, null);
+    const xPos = Math.max(TIP_SIZE, Math.min(desiredX, contentRect.width - TIP_SIZE));
+    this.#$tip.style.left = `${xPos}px`;
+    setClass(this.#$tip, 'hidden', rectOverlap(targetRect, contentRect));
+  };
 
-    _classPrivateFieldGet(this, _$targetOpenSlot).removeEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
+  #isOpen() {
+    return this.#$pop.open;
   }
 
-  _classPrivateFieldGet(this, _$targetOpenSlot).assignedElements()[0]?.setAttribute('slot', 'target');
-  _classPrivateFieldGet(this, _$target).style.width = 'unset';
-  _classPrivateFieldGet(this, _$target).style.height = 'unset';
-
-  _classPrivateFieldGet(this, _$dialog).close();
-
-  _classPrivateFieldGet(this, _$target).setAttribute('aria-expanded', 'false');
-
-  _classPrivateFieldGet(this, _$targetSlot).removeEventListener('focus', _classPrivateFieldGet(this, _stopPropagation), true);
-
-  document.body.style.overflow = _classPrivateFieldGet(this, _originalOverflowValue);
-
-  _classPrivateFieldGet(this, _resizeThrottle).cancel();
-
-  window.removeEventListener('resize', _classPrivateFieldGet(this, _onResize));
-}
-
-function _isOpen2() {
-  return getBooleanAttribute(_classPrivateFieldGet(this, _$dialog), 'open');
-}
-
-function _dispatchCloseEvent2() {
-  this.dispatchEvent(new CustomEvent('-close'));
-}
+});

package/popover/types.d.ts

@@ -7,6 +7,9 @@ export declare type TSinchPopoverElement = HTMLElement & {
     orientation: TSinchPopoverOrientation;
     /** Modal/non-modal mode */
     modal: boolean;
+    /** Show tip */
+    tip: boolean;
+    readonly footprintRect: TRect;
     readonly popoverRect: TRect;
     /** Close event */
     addEventListener(type: '-close', listener: (e: CustomEvent<void>) => void): void;
@@ -15,7 +18,9 @@ export declare type TSinchPopoverElement = HTMLElement & {
     /** Orientation, where it *points to* from origin */
     setAttribute(name: 'orientation', value: TSinchPopoverOrientation): void;
     /** Modal/non-modal mode */
-    setAttribute(name: 'modal', value: boolean): void;
+    setAttribute(name: 'modal', value: ''): void;
+    /** Show tip */
+    setAttribute(name: 'tip', value: ''): void;
 };
 export declare type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement> & {
     /** Open/close state */
@@ -24,6 +29,8 @@ export declare type TSinchPopoverReact = TSinchElementReact<TSinchPopoverElement
     orientation?: TSinchPopoverOrientation;
     /** Modal/non-modal mode */
     modal?: boolean;
+    /** Show tip */
+    tip?: boolean;
     /** Label that is used for a11y */
     'aria-label': string;
     /** Close event handler */

package/popover/utils.d.ts

@@ -1,2 +1,7 @@
+import type { TSinchPopOrientation } from '../pop/types';
 import type { TSinchPopoverOrientation } from './types';
 export declare const orientationValues: readonly TSinchPopoverOrientation[];
+export declare const getPopOrientation: (orientation: TSinchPopoverOrientation) => TSinchPopOrientation;
+declare type TAssertOrientation = (value: string | null) => asserts value is TSinchPopoverOrientation;
+export declare const assertOrientation: TAssertOrientation;
+export {};

package/popover/utils.js

@@ -1 +1,17 @@
-export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom', 'top'];
+export const orientationValues = ['top-left', 'top-right', 'bottom-left', 'bottom-right', 'bottom', 'top'];
+export const getPopOrientation = orientation => {
+  if (orientation === 'top') {
+    return 'top-stretch';
+  }
+
+  if (orientation === 'bottom') {
+    return 'bottom-stretch';
+  }
+
+  return orientation;
+};
+export const assertOrientation = value => {
+  if (value === null || !orientationValues.includes(value)) {
+    throw new Error(`sinch-popover: invalid orientation attribute: ${value}`);
+  }
+};

package/progress/index.js

@@ -1,12 +1,3 @@
-import _classPrivateFieldGet from '@babel/runtime/helpers/classPrivateFieldGet';
-import _classPrivateFieldSet from '@babel/runtime/helpers/classPrivateFieldSet';
-
-var _$bar, _$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 '../spinner';
 import '../icons/check-circle';
 import '../icons/report';
@@ -17,26 +8,16 @@ import { defineCustomElement, updateAttribute, NectaryElement, updateBooleanAttr
 const templateHTML = '<style>:host{display:block}#wrapper{display:flex;align-items:center;height:24px}#bar,#progress{height:8px;border-radius:4px}#progress{background-color:var(--sinch-color-tropical-100);flex:1;min-width:0}#bar{background-color:var(--sinch-color-tropical-500);width:0}#text{display:none;width:46px}:host([detailed]:not([detailed=false])) #text{display:block}</style><div id="wrapper"><sinch-text id="text" type="m"></sinch-text><div id="progress"><div id="bar"></div></div></div>';
 const template = document.createElement('template');
 template.innerHTML = templateHTML;
-defineCustomElement('sinch-progress', (_$bar = new WeakMap(), _$text = new WeakMap(), class extends NectaryElement {
+defineCustomElement('sinch-progress', class extends NectaryElement {
+  #$bar;
+  #$text;
+
   constructor() {
     super();
-
-    _classPrivateFieldInitSpec(this, _$bar, {
-      writable: true,
-      value: void 0
-    });
-
-    _classPrivateFieldInitSpec(this, _$text, {
-      writable: true,
-      value: void 0
-    });
-
     const shadowRoot = this.attachShadow();
     shadowRoot.appendChild(template.content.cloneNode(true));
-
-    _classPrivateFieldSet(this, _$bar, shadowRoot.querySelector('#bar'));
-
-    _classPrivateFieldSet(this, _$text, shadowRoot.querySelector('#text'));
+    this.#$bar = shadowRoot.querySelector('#bar');
+    this.#$text = shadowRoot.querySelector('#text');
   }
 
   connectedCallback() {
@@ -76,12 +57,12 @@ defineCustomElement('sinch-progress', (_$bar = new WeakMap(), _$text = new WeakM
             max: 100
           });
           const intCss = int === null ? '0%' : `${int}%`;
-          _classPrivateFieldGet(this, _$bar).style.width = intCss;
-          _classPrivateFieldGet(this, _$text).textContent = intCss;
+          this.#$bar.style.width = intCss;
+          this.#$text.textContent = intCss;
           this.setAttribute('valuenow', int !== null ? String(int) : '0');
           break;
         }
     }
   }
 
-}));
+});