@dialpad/dialtone-vue 3.145.1 → 3.146.0

package/dist/lib/popover.cjs

@@ -1,19 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const popover_constants = require("../chunks/popover_constants-XnGWXaxX.js");
+const popover_constants = require("../chunks/popover_constants-h9MD6WUt.js");
 const common_utils = require("../common/utils.cjs");
-const modal = require("../chunks/modal-VgxXAQFP.js");
+const modal = require("../chunks/modal-OaWxzqNt.js");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
 const lib_button = require("./button.cjs");
 const lib_icon = require("./icon.cjs");
-const sr_only_close_button = require("../chunks/sr_only_close_button-xGrHFjwA.js");
+const sr_only_close_button = require("../chunks/sr_only_close_button-gKr0Vlbz.js");
 const lib_lazyShow = require("./lazy-show.cjs");
 require("tippy.js");
 require("../common/constants.cjs");
 require("../chunks/link_constants-x8NwdqmA.js");
 require("@dialpad/dialtone-icons/vue3");
-require("../chunks/icon_constants-QYpmdE0R.js");
+require("../chunks/icon_constants-bvhFNOPu.js");
 require("@dialpad/dialtone-icons/icons.json");
 const _sfc_main$1 = {
   name: "PopoverHeaderFooter",
@@ -85,40 +85,33 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
       "d-popover__header": $props.type === "header",
       "d-popover__footer": $props.type === "footer"
     })
-  }, [
-    $data.hasSlotContent(_ctx.$slots.content) ? (vue.openBlock(), vue.createElementBlock("div", {
-      key: 0,
-      "data-qa": "dt-popover-header-footer-content",
-      class: vue.normalizeClass([{
-        "d-popover__header__content": $props.type === "header",
-        "d-popover__footer__content": $props.type === "footer"
-      }, $props.contentClass])
-    }, [
-      vue.renderSlot(_ctx.$slots, "content")
-    ], 2)) : vue.createCommentVNode("", true),
-    $props.showCloseButton ? (vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({
-      key: 1,
-      ref: "popover__close-button",
-      "data-qa": "dt-popover-close",
-      class: {
-        "d-popover__header__close-button": $props.type === "header",
-        "d-popover__footer__close-button": $props.type === "footer"
-      },
-      importance: "outlined",
-      kind: "muted",
-      circle: ""
-    }, $props.closeButtonProps, {
-      onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
-    }), {
-      icon: vue.withCtx(() => [
-        vue.createVNode(_component_dt_icon, {
-          name: "close",
-          size: "300"
-        })
-      ]),
-      _: 1
-    }, 16, ["class"])) : vue.createCommentVNode("", true)
-  ], 2);
+  }, [$data.hasSlotContent(_ctx.$slots.content) ? (vue.openBlock(), vue.createElementBlock("div", {
+    key: 0,
+    "data-qa": "dt-popover-header-footer-content",
+    class: vue.normalizeClass([{
+      "d-popover__header__content": $props.type === "header",
+      "d-popover__footer__content": $props.type === "footer"
+    }, $props.contentClass])
+  }, [vue.renderSlot(_ctx.$slots, "content")], 2)) : vue.createCommentVNode("", true), $props.showCloseButton ? (vue.openBlock(), vue.createBlock(_component_dt_button, vue.mergeProps({
+    key: 1,
+    ref: "popover__close-button",
+    "data-qa": "dt-popover-close",
+    class: {
+      "d-popover__header__close-button": $props.type === "header",
+      "d-popover__footer__close-button": $props.type === "footer"
+    },
+    importance: "outlined",
+    kind: "muted",
+    circle: ""
+  }, $props.closeButtonProps, {
+    onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("close"))
+  }), {
+    icon: vue.withCtx(() => [vue.createVNode(_component_dt_icon, {
+      name: "close",
+      size: "300"
+    })]),
+    _: 1
+  }, 16, ["class"])) : vue.createCommentVNode("", true)], 2);
 }
 const PopoverHeaderFooter = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
 const _sfc_main = {
@@ -752,7 +745,9 @@ const _sfc_main = {
           return;
         if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
           element.classList.add("d-of-hidden");
-          this.tip.setProps({ offset: this.offset });
+          this.tip.setProps({
+            offset: this.offset
+          });
         } else {
           element.classList.add("d-zi-popover");
         }
@@ -768,7 +763,9 @@ const _sfc_main = {
         return;
       if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
         element.classList.remove("d-of-hidden");
-        this.tip.setProps({ offset: this.offset });
+        this.tip.setProps({
+          offset: this.offset
+        });
       } else {
         element.classList.remove("d-zi-popover");
       }
@@ -998,123 +995,103 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_popover_header_footer = vue.resolveComponent("popover-header-footer");
   const _component_sr_only_close_button = vue.resolveComponent("sr-only-close-button");
   const _component_dt_lazy_show = vue.resolveComponent("dt-lazy-show");
-  return vue.openBlock(), vue.createElementBlock("div", null, [
-    $props.modal && $data.isOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
-      key: 0,
-      to: "body"
-    }, [
-      vue.createElementVNode("div", {
-        class: "d-modal--transparent",
-        "aria-hidden": $props.modal && $data.isOpen ? "false" : "true",
-        onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
-        }, ["prevent", "stop"]))
-      }, null, 8, _hoisted_1)
-    ])) : vue.createCommentVNode("", true),
-    (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), {
-      ref: "popover",
-      class: vue.normalizeClass(["d-popover", { "d-popover__anchor--opened": $data.isOpen }]),
-      "data-qa": "dt-popover-container"
-    }, {
-      default: vue.withCtx(() => [
-        vue.createElementVNode("div", {
-          id: !$props.ariaLabelledby && $options.labelledBy,
-          ref: "anchor",
-          "data-qa": _ctx.$attrs["data-qa"] ? `${_ctx.$attrs["data-qa"]}-anchor` : "dt-popover-anchor",
-          tabindex: $props.openOnContext ? 0 : void 0,
-          onClickCapture: _cache[1] || (_cache[1] = (...args) => $options.defaultToggleOpen && $options.defaultToggleOpen(...args)),
-          onContextmenu: _cache[2] || (_cache[2] = (...args) => $options.onContext && $options.onContext(...args)),
-          onKeydown: [
-            _cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers((...args) => $options.onArrowKeyPress && $options.onArrowKeyPress(...args), ["prevent"]), ["up"])),
-            _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers((...args) => $options.onArrowKeyPress && $options.onArrowKeyPress(...args), ["prevent"]), ["down"])),
-            _cache[6] || (_cache[6] = vue.withKeys(($event) => _ctx.$emit("keydown", $event), ["enter"])),
-            _cache[7] || (_cache[7] = vue.withKeys(($event) => _ctx.$emit("keydown", $event), ["space"]))
-          ],
-          onKeydownCapture: _cache[5] || (_cache[5] = vue.withKeys((...args) => $options.closePopover && $options.closePopover(...args), ["escape"])),
-          onMouseenter: _cache[8] || (_cache[8] = (...args) => $options.onEnterAnchor && $options.onEnterAnchor(...args)),
-          onMouseleave: _cache[9] || (_cache[9] = (...args) => $options.onLeaveAnchor && $options.onLeaveAnchor(...args))
-        }, [
-          vue.renderSlot(_ctx.$slots, "anchor", {
-            attrs: {
-              "aria-expanded": $data.isOpen.toString(),
-              "aria-controls": $props.id,
-              "aria-haspopup": $props.role
-            }
-          })
-        ], 40, _hoisted_2),
-        vue.createVNode(_component_dt_lazy_show, vue.mergeProps({
-          id: $props.id,
-          ref: "content",
-          role: $props.role,
-          "data-qa": _ctx.$attrs["data-qa"] ? `${_ctx.$attrs["data-qa"]}__dialog` : "dt-popover",
-          "aria-hidden": `${!$data.isOpen}`,
-          "aria-labelledby": $options.labelledBy,
-          "aria-label": $props.ariaLabel,
-          "aria-modal": `${!$props.modal}`,
-          transition: $props.transition,
-          show: $data.isOpen,
-          appear: $data.toAppear,
-          class: ["d-popover__dialog", { "d-popover__dialog--modal": $props.modal }, $props.dialogClass],
-          style: {
-            "max-height": $options.calculatedMaxHeight,
-            "max-width": $props.maxWidth
-          },
-          css: _ctx.$attrs.css,
-          tabindex: $props.contentTabindex
-        }, vue.toHandlers($options.popoverListeners), {
-          onMouseenter: $options.onEnterContent,
-          onMouseleave: $options.onLeaveContent
-        }), {
-          default: vue.withCtx(() => [
-            $data.hasSlotContent(_ctx.$slots.headerContent) || $props.showCloseButton ? (vue.openBlock(), vue.createBlock(_component_popover_header_footer, {
-              key: 0,
-              ref: "popover__header",
-              class: vue.normalizeClass($data.POPOVER_HEADER_FOOTER_PADDING_CLASSES[$props.padding]),
-              "content-class": $props.headerClass,
-              type: "header",
-              "show-close-button": $props.showCloseButton,
-              "close-button-props": $props.closeButtonProps,
-              onClose: $options.closePopover
-            }, {
-              content: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "headerContent", { close: $options.closePopover })
-              ]),
-              _: 3
-            }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : vue.createCommentVNode("", true),
-            vue.createElementVNode("div", {
-              ref: "popover__content",
-              "data-qa": _ctx.$attrs["data-qa"] ? `${_ctx.$attrs["data-qa"]}-content` : "dt-popover-content",
-              class: vue.normalizeClass([
-                "d-popover__content",
-                $data.POPOVER_PADDING_CLASSES[$props.padding],
-                $props.contentClass
-              ])
-            }, [
-              vue.renderSlot(_ctx.$slots, "content", { close: $options.closePopover })
-            ], 10, _hoisted_3),
-            $data.hasSlotContent(_ctx.$slots.footerContent) ? (vue.openBlock(), vue.createBlock(_component_popover_header_footer, {
-              key: 1,
-              ref: "popover__footer",
-              type: "footer",
-              class: vue.normalizeClass($data.POPOVER_HEADER_FOOTER_PADDING_CLASSES[$props.padding]),
-              "content-class": $props.footerClass
-            }, {
-              content: vue.withCtx(() => [
-                vue.renderSlot(_ctx.$slots, "footerContent", { close: $options.closePopover })
-              ]),
-              _: 3
-            }, 8, ["class", "content-class"])) : vue.createCommentVNode("", true),
-            _ctx.showVisuallyHiddenClose ? (vue.openBlock(), vue.createBlock(_component_sr_only_close_button, {
-              key: 2,
-              "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
-              onClose: $options.closePopover
-            }, null, 8, ["visually-hidden-close-label", "onClose"])) : vue.createCommentVNode("", true)
-          ]),
-          _: 3
-        }, 16, ["id", "role", "data-qa", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "appear", "class", "style", "css", "tabindex", "onMouseenter", "onMouseleave"])
-      ]),
+  return vue.openBlock(), vue.createElementBlock("div", null, [$props.modal && $data.isOpen ? (vue.openBlock(), vue.createBlock(vue.Teleport, {
+    key: 0,
+    to: "body"
+  }, [vue.createElementVNode("div", {
+    class: "d-modal--transparent",
+    "aria-hidden": $props.modal && $data.isOpen ? "false" : "true",
+    onClick: _cache[0] || (_cache[0] = vue.withModifiers(() => {
+    }, ["prevent", "stop"]))
+  }, null, 8, _hoisted_1)])) : vue.createCommentVNode("", true), (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.elementType), {
+    ref: "popover",
+    class: vue.normalizeClass(["d-popover", {
+      "d-popover__anchor--opened": $data.isOpen
+    }]),
+    "data-qa": "dt-popover-container"
+  }, {
+    default: vue.withCtx(() => [vue.createElementVNode("div", {
+      id: !$props.ariaLabelledby && $options.labelledBy,
+      ref: "anchor",
+      "data-qa": _ctx.$attrs["data-qa"] ? `${_ctx.$attrs["data-qa"]}-anchor` : "dt-popover-anchor",
+      tabindex: $props.openOnContext ? 0 : void 0,
+      onClickCapture: _cache[1] || (_cache[1] = (...args) => $options.defaultToggleOpen && $options.defaultToggleOpen(...args)),
+      onContextmenu: _cache[2] || (_cache[2] = (...args) => $options.onContext && $options.onContext(...args)),
+      onKeydown: [_cache[3] || (_cache[3] = vue.withKeys(vue.withModifiers((...args) => $options.onArrowKeyPress && $options.onArrowKeyPress(...args), ["prevent"]), ["up"])), _cache[4] || (_cache[4] = vue.withKeys(vue.withModifiers((...args) => $options.onArrowKeyPress && $options.onArrowKeyPress(...args), ["prevent"]), ["down"])), _cache[6] || (_cache[6] = vue.withKeys(($event) => _ctx.$emit("keydown", $event), ["enter"])), _cache[7] || (_cache[7] = vue.withKeys(($event) => _ctx.$emit("keydown", $event), ["space"]))],
+      onKeydownCapture: _cache[5] || (_cache[5] = vue.withKeys((...args) => $options.closePopover && $options.closePopover(...args), ["escape"])),
+      onMouseenter: _cache[8] || (_cache[8] = (...args) => $options.onEnterAnchor && $options.onEnterAnchor(...args)),
+      onMouseleave: _cache[9] || (_cache[9] = (...args) => $options.onLeaveAnchor && $options.onLeaveAnchor(...args))
+    }, [vue.renderSlot(_ctx.$slots, "anchor", {
+      attrs: {
+        "aria-expanded": $data.isOpen.toString(),
+        "aria-controls": $props.id,
+        "aria-haspopup": $props.role
+      }
+    })], 40, _hoisted_2), vue.createVNode(_component_dt_lazy_show, vue.mergeProps({
+      id: $props.id,
+      ref: "content",
+      role: $props.role,
+      "data-qa": _ctx.$attrs["data-qa"] ? `${_ctx.$attrs["data-qa"]}__dialog` : "dt-popover",
+      "aria-hidden": `${!$data.isOpen}`,
+      "aria-labelledby": $options.labelledBy,
+      "aria-label": $props.ariaLabel,
+      "aria-modal": `${!$props.modal}`,
+      transition: $props.transition,
+      show: $data.isOpen,
+      appear: $data.toAppear,
+      class: ["d-popover__dialog", {
+        "d-popover__dialog--modal": $props.modal
+      }, $props.dialogClass],
+      style: {
+        "max-height": $options.calculatedMaxHeight,
+        "max-width": $props.maxWidth
+      },
+      css: _ctx.$attrs.css,
+      tabindex: $props.contentTabindex
+    }, vue.toHandlers($options.popoverListeners), {
+      onMouseenter: $options.onEnterContent,
+      onMouseleave: $options.onLeaveContent
+    }), {
+      default: vue.withCtx(() => [$data.hasSlotContent(_ctx.$slots.headerContent) || $props.showCloseButton ? (vue.openBlock(), vue.createBlock(_component_popover_header_footer, {
+        key: 0,
+        ref: "popover__header",
+        class: vue.normalizeClass($data.POPOVER_HEADER_FOOTER_PADDING_CLASSES[$props.padding]),
+        "content-class": $props.headerClass,
+        type: "header",
+        "show-close-button": $props.showCloseButton,
+        "close-button-props": $props.closeButtonProps,
+        onClose: $options.closePopover
+      }, {
+        content: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "headerContent", {
+          close: $options.closePopover
+        })]),
+        _: 3
+      }, 8, ["class", "content-class", "show-close-button", "close-button-props", "onClose"])) : vue.createCommentVNode("", true), vue.createElementVNode("div", {
+        ref: "popover__content",
+        "data-qa": _ctx.$attrs["data-qa"] ? `${_ctx.$attrs["data-qa"]}-content` : "dt-popover-content",
+        class: vue.normalizeClass(["d-popover__content", $data.POPOVER_PADDING_CLASSES[$props.padding], $props.contentClass])
+      }, [vue.renderSlot(_ctx.$slots, "content", {
+        close: $options.closePopover
+      })], 10, _hoisted_3), $data.hasSlotContent(_ctx.$slots.footerContent) ? (vue.openBlock(), vue.createBlock(_component_popover_header_footer, {
+        key: 1,
+        ref: "popover__footer",
+        type: "footer",
+        class: vue.normalizeClass($data.POPOVER_HEADER_FOOTER_PADDING_CLASSES[$props.padding]),
+        "content-class": $props.footerClass
+      }, {
+        content: vue.withCtx(() => [vue.renderSlot(_ctx.$slots, "footerContent", {
+          close: $options.closePopover
+        })]),
+        _: 3
+      }, 8, ["class", "content-class"])) : vue.createCommentVNode("", true), _ctx.showVisuallyHiddenClose ? (vue.openBlock(), vue.createBlock(_component_sr_only_close_button, {
+        key: 2,
+        "visually-hidden-close-label": _ctx.visuallyHiddenCloseLabel,
+        onClose: $options.closePopover
+      }, null, 8, ["visually-hidden-close-label", "onClose"])) : vue.createCommentVNode("", true)]),
       _: 3
-    }, 8, ["class"]))
-  ]);
+    }, 16, ["id", "role", "data-qa", "aria-hidden", "aria-labelledby", "aria-label", "aria-modal", "transition", "show", "appear", "class", "style", "css", "tabindex", "onMouseenter", "onMouseleave"])]),
+    _: 3
+  }, 8, ["class"]))]);
 }
 const DtPopover = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
 exports.POPOVER_APPEND_TO_VALUES = popover_constants.POPOVER_APPEND_TO_VALUES;