@vonage/vivid 4.2.0 → 4.4.0

package/shared/definition58.cjs

@@ -9,39 +9,26 @@ const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-ancho
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateMethod = (obj, member, method) => {
-  __accessCheck(obj, member, "access private method");
-  return method;
-};
-var _setupAnchor, setupAnchor_fn, _cleanupAnchor, cleanupAnchor_fn, _show, _hide, _updateListeners, updateListeners_fn, _closeOnEscape;
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _Tooltip_instances, setupAnchor_fn, cleanupAnchor_fn, _show, _hide, updateListeners_fn, _closeOnEscape;
 let Tooltip = class extends index.FoundationElement {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _setupAnchor);
-    __privateAdd(this, _cleanupAnchor);
-    __privateAdd(this, _updateListeners);
+    __privateAdd(this, _Tooltip_instances);
     this.open = false;
     __privateAdd(this, _show, () => {
       this.open = true;
@@ -50,44 +37,39 @@ let Tooltip = class extends index.FoundationElement {
       this.open = false;
     });
     __privateAdd(this, _closeOnEscape, (e) => {
-      if (e.key === "Escape")
-        __privateGet(this, _hide).call(this);
+      if (e.key === "Escape") __privateGet(this, _hide).call(this);
     });
   }
   connectedCallback() {
     super.connectedCallback();
-    __privateMethod(this, _updateListeners, updateListeners_fn).call(this);
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    __privateMethod(this, _updateListeners, updateListeners_fn).call(this);
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
   /**
    * @internal
    */
   _anchorElChanged(oldValue, newValue) {
-    if (oldValue)
-      __privateMethod(this, _cleanupAnchor, cleanupAnchor_fn).call(this, oldValue);
-    if (newValue)
-      __privateMethod(this, _setupAnchor, setupAnchor_fn).call(this, newValue);
+    if (oldValue) __privateMethod(this, _Tooltip_instances, cleanupAnchor_fn).call(this, oldValue);
+    if (newValue) __privateMethod(this, _Tooltip_instances, setupAnchor_fn).call(this, newValue);
   }
   /**
    * @internal
    */
   openChanged(oldValue) {
-    if (oldValue === void 0)
-      return;
-    __privateMethod(this, _updateListeners, updateListeners_fn).call(this);
+    if (oldValue === void 0) return;
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
 };
-_setupAnchor = new WeakSet();
+_Tooltip_instances = new WeakSet();
 setupAnchor_fn = function(a) {
   a.addEventListener("mouseover", __privateGet(this, _show));
   a.addEventListener("mouseout", __privateGet(this, _hide));
   a.addEventListener("focusin", __privateGet(this, _show));
   a.addEventListener("focusout", __privateGet(this, _hide));
 };
-_cleanupAnchor = new WeakSet();
 cleanupAnchor_fn = function(a) {
   a.removeEventListener("mouseover", __privateGet(this, _show));
   a.removeEventListener("mouseout", __privateGet(this, _hide));
@@ -96,7 +78,6 @@ cleanupAnchor_fn = function(a) {
 };
 _show = new WeakMap();
 _hide = new WeakMap();
-_updateListeners = new WeakSet();
 updateListeners_fn = function() {
   document.removeEventListener("keydown", __privateGet(this, _closeOnEscape));
   if (this.open && this.isConnected) {

package/shared/definition58.js

@@ -7,39 +7,26 @@ const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-ancho
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
 var __decorateClass = (decorators, target, key, kind) => {
   var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
-    __defProp(target, key, result);
+  if (kind && result) __defProp(target, key, result);
   return result;
 };
-var __accessCheck = (obj, member, msg) => {
-  if (!member.has(obj))
-    throw TypeError("Cannot " + msg);
-};
-var __privateGet = (obj, member, getter) => {
-  __accessCheck(obj, member, "read from private field");
-  return getter ? getter.call(obj) : member.get(obj);
-};
-var __privateAdd = (obj, member, value) => {
-  if (member.has(obj))
-    throw TypeError("Cannot add the same private member more than once");
-  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
-};
-var __privateMethod = (obj, member, method) => {
-  __accessCheck(obj, member, "access private method");
-  return method;
-};
-var _setupAnchor, setupAnchor_fn, _cleanupAnchor, cleanupAnchor_fn, _show, _hide, _updateListeners, updateListeners_fn, _closeOnEscape;
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
+var _Tooltip_instances, setupAnchor_fn, cleanupAnchor_fn, _show, _hide, updateListeners_fn, _closeOnEscape;
 let Tooltip = class extends FoundationElement {
   constructor() {
     super(...arguments);
-    __privateAdd(this, _setupAnchor);
-    __privateAdd(this, _cleanupAnchor);
-    __privateAdd(this, _updateListeners);
+    __privateAdd(this, _Tooltip_instances);
     this.open = false;
     __privateAdd(this, _show, () => {
       this.open = true;
@@ -48,44 +35,39 @@ let Tooltip = class extends FoundationElement {
       this.open = false;
     });
     __privateAdd(this, _closeOnEscape, (e) => {
-      if (e.key === "Escape")
-        __privateGet(this, _hide).call(this);
+      if (e.key === "Escape") __privateGet(this, _hide).call(this);
     });
   }
   connectedCallback() {
     super.connectedCallback();
-    __privateMethod(this, _updateListeners, updateListeners_fn).call(this);
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
-    __privateMethod(this, _updateListeners, updateListeners_fn).call(this);
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
   /**
    * @internal
    */
   _anchorElChanged(oldValue, newValue) {
-    if (oldValue)
-      __privateMethod(this, _cleanupAnchor, cleanupAnchor_fn).call(this, oldValue);
-    if (newValue)
-      __privateMethod(this, _setupAnchor, setupAnchor_fn).call(this, newValue);
+    if (oldValue) __privateMethod(this, _Tooltip_instances, cleanupAnchor_fn).call(this, oldValue);
+    if (newValue) __privateMethod(this, _Tooltip_instances, setupAnchor_fn).call(this, newValue);
   }
   /**
    * @internal
    */
   openChanged(oldValue) {
-    if (oldValue === void 0)
-      return;
-    __privateMethod(this, _updateListeners, updateListeners_fn).call(this);
+    if (oldValue === void 0) return;
+    __privateMethod(this, _Tooltip_instances, updateListeners_fn).call(this);
   }
 };
-_setupAnchor = new WeakSet();
+_Tooltip_instances = new WeakSet();
 setupAnchor_fn = function(a) {
   a.addEventListener("mouseover", __privateGet(this, _show));
   a.addEventListener("mouseout", __privateGet(this, _hide));
   a.addEventListener("focusin", __privateGet(this, _show));
   a.addEventListener("focusout", __privateGet(this, _hide));
 };
-_cleanupAnchor = new WeakSet();
 cleanupAnchor_fn = function(a) {
   a.removeEventListener("mouseover", __privateGet(this, _show));
   a.removeEventListener("mouseout", __privateGet(this, _hide));
@@ -94,7 +76,6 @@ cleanupAnchor_fn = function(a) {
 };
 _show = new WeakMap();
 _hide = new WeakMap();
-_updateListeners = new WeakSet();
 updateListeners_fn = function() {
   document.removeEventListener("keydown", __privateGet(this, _closeOnEscape));
   if (this.open && this.isConnected) {

package/shared/definition59.cjs

@@ -20,8 +20,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result)
-    __defProp(target, key, result);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class TreeItem extends treeItem.TreeItem {

package/shared/definition59.js

@@ -18,8 +18,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result)
-    __defProp(target, key, result);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class TreeItem extends TreeItem$1 {

package/shared/definition6.cjs

@@ -14,8 +14,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result)
-    __defProp(target, key, result);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class Avatar extends index.FoundationElement {

package/shared/definition6.js

@@ -12,8 +12,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result)
-    __defProp(target, key, result);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class Avatar extends FoundationElement {

package/shared/definition62.cjs

@@ -9,8 +9,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result)
-    __defProp(target, key, result);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class Elevation extends index.FoundationElement {

package/shared/definition62.js

@@ -7,8 +7,7 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result)
-    __defProp(target, key, result);
+  if (result) __defProp(target, key, result);
   return result;
 };
 class Elevation extends FoundationElement {

package/shared/definition63.cjs

@@ -8,6 +8,8 @@ const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
 const sides = ['top', 'right', 'bottom', 'left'];
+const alignments = ['start', 'end'];
+const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
 const min = Math.min;
 const max = Math.max;
 const round = Math.round;
@@ -421,6 +423,109 @@ const arrow = options => ({
   }
 });
 
+function getPlacementList(alignment, autoAlignment, allowedPlacements) {
+  const allowedPlacementsSortedByAlignment = alignment ? [...allowedPlacements.filter(placement => getAlignment(placement) === alignment), ...allowedPlacements.filter(placement => getAlignment(placement) !== alignment)] : allowedPlacements.filter(placement => getSide(placement) === placement);
+  return allowedPlacementsSortedByAlignment.filter(placement => {
+    if (alignment) {
+      return getAlignment(placement) === alignment || (autoAlignment ? getOppositeAlignmentPlacement(placement) !== placement : false);
+    }
+    return true;
+  });
+}
+/**
+ * Optimizes the visibility of the floating element by choosing the placement
+ * that has the most space available automatically, without needing to specify a
+ * preferred placement. Alternative to `flip`.
+ * @see https://floating-ui.com/docs/autoPlacement
+ */
+const autoPlacement = function (options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: 'autoPlacement',
+    options,
+    async fn(state) {
+      var _middlewareData$autoP, _middlewareData$autoP2, _placementsThatFitOnE;
+      const {
+        rects,
+        middlewareData,
+        placement,
+        platform,
+        elements
+      } = state;
+      const {
+        crossAxis = false,
+        alignment,
+        allowedPlacements = placements,
+        autoAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const placements$1 = alignment !== undefined || allowedPlacements === placements ? getPlacementList(alignment || null, autoAlignment, allowedPlacements) : allowedPlacements;
+      const overflow = await detectOverflow(state, detectOverflowOptions);
+      const currentIndex = ((_middlewareData$autoP = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP.index) || 0;
+      const currentPlacement = placements$1[currentIndex];
+      if (currentPlacement == null) {
+        return {};
+      }
+      const alignmentSides = getAlignmentSides(currentPlacement, rects, await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating)));
+
+      // Make `computeCoords` start from the right place.
+      if (placement !== currentPlacement) {
+        return {
+          reset: {
+            placement: placements$1[0]
+          }
+        };
+      }
+      const currentOverflows = [overflow[getSide(currentPlacement)], overflow[alignmentSides[0]], overflow[alignmentSides[1]]];
+      const allOverflows = [...(((_middlewareData$autoP2 = middlewareData.autoPlacement) == null ? void 0 : _middlewareData$autoP2.overflows) || []), {
+        placement: currentPlacement,
+        overflows: currentOverflows
+      }];
+      const nextPlacement = placements$1[currentIndex + 1];
+
+      // There are more placements to check.
+      if (nextPlacement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: nextPlacement
+          }
+        };
+      }
+      const placementsSortedByMostSpace = allOverflows.map(d => {
+        const alignment = getAlignment(d.placement);
+        return [d.placement, alignment && crossAxis ?
+        // Check along the mainAxis and main crossAxis side.
+        d.overflows.slice(0, 2).reduce((acc, v) => acc + v, 0) :
+        // Check only the mainAxis.
+        d.overflows[0], d.overflows];
+      }).sort((a, b) => a[1] - b[1]);
+      const placementsThatFitOnEachSide = placementsSortedByMostSpace.filter(d => d[2].slice(0,
+      // Aligned placements should not check their opposite crossAxis
+      // side.
+      getAlignment(d[0]) ? 2 : 3).every(v => v <= 0));
+      const resetPlacement = ((_placementsThatFitOnE = placementsThatFitOnEachSide[0]) == null ? void 0 : _placementsThatFitOnE[0]) || placementsSortedByMostSpace[0][0];
+      if (resetPlacement !== placement) {
+        return {
+          data: {
+            index: currentIndex + 1,
+            overflows: allOverflows
+          },
+          reset: {
+            placement: resetPlacement
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
 /**
  * Optimizes the visibility of the floating element by flipping the `placement`
  * in order to keep it in view when the preferred placement(s) will overflow the
@@ -1625,10 +1730,37 @@ var __decorateClass = (decorators, target, key, kind) => {
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (decorator(target, key, result) ) || result;
-  if (result)
-    __defProp(target, key, result);
+  if (result) __defProp(target, key, result);
   return result;
 };
+const PlacementStrategy = {
+  Flip: "flip",
+  AutoPlacementHorizontal: "auto-placement-horizontal",
+  AutoPlacementVertical: "auto-placement-vertical"
+};
+const placementStrategyMiddlewares = {
+  [PlacementStrategy.Flip]: flip(),
+  [PlacementStrategy.AutoPlacementHorizontal]: autoPlacement({
+    allowedPlacements: [
+      "bottom",
+      "top",
+      "bottom-start",
+      "bottom-end",
+      "top-start",
+      "top-end"
+    ]
+  }),
+  [PlacementStrategy.AutoPlacementVertical]: autoPlacement({
+    allowedPlacements: [
+      "left",
+      "right",
+      "left-start",
+      "left-end",
+      "right-start",
+      "right-end"
+    ]
+  })
+};
 class Popup extends index.FoundationElement {
   constructor() {
     super(...arguments);
@@ -1636,12 +1768,19 @@ class Popup extends index.FoundationElement {
     this.dismissible = false;
     this.arrow = false;
     this.alternate = false;
+    /**
+     * The placement strategy of the popup.
+     *
+     * @public
+     */
+    this.placementStrategy = PlacementStrategy.Flip;
+    this.animationFrame = false;
     this.strategy = "fixed";
   }
   get #middleware() {
     let middleware = [
       inline(),
-      flip(),
+      placementStrategyMiddlewares[this.placementStrategy],
       hide(),
       size({
         apply({ availableWidth, availableHeight, elements }) {
@@ -1664,6 +1803,12 @@ class Popup extends index.FoundationElement {
   #cleanup;
   openChanged(_, newValue) {
     newValue ? this.$emit("vwc-popup:open") : this.$emit("vwc-popup:close");
+    index.DOM.queueUpdate(() => this.#updateAutoUpdate());
+  }
+  /**
+   * @internal
+   */
+  animationFrameChanged() {
     this.#updateAutoUpdate();
   }
   /**
@@ -1686,7 +1831,10 @@ class Popup extends index.FoundationElement {
       this.#cleanup = autoUpdate(
         this.anchorEl,
         this.popupEl,
-        () => this.updatePosition()
+        () => this.updatePosition(),
+        {
+          animationFrame: this.animationFrame
+        }
       );
     }
   }
@@ -1765,6 +1913,9 @@ __decorateClass([
 __decorateClass([
   index.attr({ mode: "fromView" })
 ], Popup.prototype, "placement");
+__decorateClass([
+  index.attr({ mode: "boolean", attribute: "animation-frame" })
+], Popup.prototype, "animationFrame");
 __decorateClass([
   index.attr({ mode: "fromView" })
 ], Popup.prototype, "strategy");
@@ -1819,6 +1970,7 @@ const popupRegistries = [
 ];
 const registerPopup = index.registerFactory(popupRegistries);
 
+exports.PlacementStrategy = PlacementStrategy;
 exports.Popup = Popup;
 exports.popupRegistries = popupRegistries;
 exports.registerPopup = registerPopup;