@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/popover.cjs

@@ -1,2 +1,1081 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("../chunks/popover_constants-hOEhklvr.js"),d=require("./utils.cjs"),m=require("../chunks/modal-qEzlo0Sj.js"),o=require("vue"),f=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),v=require("./button.cjs"),y=require("./icon.cjs"),u=require("../chunks/sr_only_close_button-iD7s1Pbj.js"),C=require("./lazy-show.cjs");require("tippy.js");require("./constants.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const E={name:"PopoverHeaderFooter",components:{DtButton:v.DtButton,DtIcon:y.DtIcon},props:{type:{type:String,validator:function(e){return["header","footer"].includes(e)}},contentClass:{type:[String,Array,Object],default:""},showCloseButton:{type:Boolean,default:!1},closeButtonProps:{type:Object,default:()=>{}}},emits:["close"],data(){return{hasSlotContent:d.hasSlotContent}},methods:{focusCloseButton(){var t;const e=(t=this.$refs["popover__close-button"])==null?void 0:t.$el;e==null||e.focus()}}};function O(e,t,n,a,l,i){const c=o.resolveComponent("dt-icon"),h=o.resolveComponent("dt-button");return o.openBlock(),o.createElementBlock("div",{"data-qa":"dt-popover-header-footer",class:o.normalizeClass({"d-popover__header":n.type==="header","d-popover__footer":n.type==="footer"})},[l.hasSlotContent(e.$slots.content)?(o.openBlock(),o.createElementBlock("div",{key:0,"data-qa":"dt-popover-header-footer-content",class:o.normalizeClass([{"d-popover__header__content":n.type==="header","d-popover__footer__content":n.type==="footer"},n.contentClass])},[o.renderSlot(e.$slots,"content")],2)):o.createCommentVNode("",!0),n.showCloseButton?(o.openBlock(),o.createBlock(h,o.mergeProps({key:1,ref:"popover__close-button","data-qa":"dt-popover-close",class:{"d-popover__header__close-button":n.type==="header","d-popover__footer__close-button":n.type==="footer"},importance:"outlined",kind:"muted",circle:""},n.closeButtonProps,{onClick:t[0]||(t[0]=p=>e.$emit("close"))}),{icon:o.withCtx(()=>[o.createVNode(c,{name:"close",size:"300"})]),_:1},16,["class"])):o.createCommentVNode("",!0)],2)}const _=f._(E,[["render",O]]),b={name:"DtPopover",components:{SrOnlyCloseButton:u.S,DtLazyShow:C.DtLazyShow,PopoverHeaderFooter:_},mixins:[m.M,u.a],props:{open:{type:Boolean,default:null},openOnContext:{type:Boolean,default:!1},elementType:{type:String,default:"div"},transition:{type:String,default:"fade"},role:{type:String,default:"dialog",validator:e=>s.b.includes(e)},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null},closeButtonProps:{type:Object,default:()=>({})},padding:{type:String,default:"large",validator:e=>Object.keys(s.P).some(t=>t===e)},contentClass:{type:[String,Array,Object],default:""},contentWidth:{type:String,default:"",validator:e=>s.c.includes(e)},contentAppear:{type:Boolean,default:null},contentTabindex:{type:Number||null,default:-1},externalAnchor:{type:String,default:""},id:{type:String,default(){return d.getUniqueString()}},offset:{type:Array,default:()=>[0,4]},hideOnClick:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},fallbackPlacements:{type:Array,default:()=>["auto"]},placement:{type:String,default:"bottom-end"},tether:{type:Boolean,default:!0},sticky:{type:[Boolean,String],default:!1,validator:e=>s.f.includes(e)},maxHeight:{type:String,default:""},maxWidth:{type:String,default:""},showCloseButton:{type:Boolean,default:!1},headerClass:{type:[String,Array,Object],default:""},footerClass:{type:[String,Array,Object],default:""},dialogClass:{type:[String,Array,Object],default:""},initialFocusElement:{type:[String,HTMLElement],default:"first",validator:e=>s.d.includes(e)||e instanceof HTMLElement||e.startsWith("#")},openWithArrowKeys:{type:Boolean,default:!1},appendTo:{type:[HTMLElement,String],default:"body",validator:e=>s.e.includes(e)||e instanceof HTMLElement},hovercard:{type:Boolean,default:!1},timer:{type:[Object,null],default:null,validator:e=>e===null||e.enter&&e.leave&&Object.keys(e).includes("current")}},emits:["keydown","update:open","opened"],data(){return{POPOVER_PADDING_CLASSES:s.P,POPOVER_HEADER_FOOTER_PADDING_CLASSES:s.a,intersectionObserver:null,isOutsideViewport:!1,isOpen:!1,toAppear:!1,anchorEl:null,popoverContentEl:null,hasSlotContent:d.hasSlotContent,inTimer:null,outTimer:null}},computed:{popoverListeners(){return{keydown:e=>{this.onKeydown(e)},"after-leave":e=>{this.onLeaveTransitionComplete()},"after-enter":e=>{this.onEnterTransitionComplete()}}},calculatedMaxHeight(){return this.isOutsideViewport&&this.modal?"calc(100vh - var(--dt-space-300))":this.maxHeight},labelledBy(){return this.ariaLabelledby||!this.ariaLabel&&d.getUniqueString("DtPopover__anchor")},currentHovercard(){var e;return(e=this.timer)==null?void 0:e.current}},watch:{$props:{immediate:!0,deep:!0,handler(){this.validateProps()}},modal(e){var t;(t=this.tip)==null||t.setProps({zIndex:e?650:this.calculateAnchorZindex()})},offset(e){var t;(t=this.tip)==null||t.setProps({offset:e})},sticky(e){var t;(t=this.tip)==null||t.setProps({sticky:e})},fallbackPlacements(){var e;(e=this.tip)==null||e.setProps({popperOptions:this.popperOptions()})},tether(){var e;(e=this.tip)==null||e.setProps({popperOptions:this.popperOptions()})},placement(e){var t;(t=this.tip)==null||t.setProps({placement:e})},open:{handler:function(e){e!==null&&(this.isOpen=e),e===!0&&(this.toAppear=!0)},immediate:!0},contentAppear:{handler:function(e){e!==null&&(this.toAppear=e)}},isOpen(e,t){e?(this.initTippyInstance(),this.tip.show()):!e&&t!==e&&(this.removeEventListeners(),this.tip.hide())},currentHovercard(){this.hovercard&&this.timer&&(this.currentHovercard===this.id?this.isOpen=!0:this.isOpen=!1)}},mounted(){var t;const e=this.externalAnchor?this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`):null;this.anchorEl=e??this.$refs.anchor.children[0],this.popoverContentEl=(t=this.$refs.content)==null?void 0:t.$el,this.isOpen&&(this.initTippyInstance(),this.tip.show()),this.intersectionObserver=new IntersectionObserver(this.hasIntersectedViewport),this.intersectionObserver.observe(this.popoverContentEl)},beforeUnmount(){var e;(e=this.tip)==null||e.destroy(),this.intersectionObserver.disconnect(),this.removeReferences(),this.removeEventListeners()},methods:{hasIntersectedViewport(e){var a;const t=(a=e==null?void 0:e[0])==null?void 0:a.target;if(!t)return;const n=d.isOutOfViewPort(t);this.isOutsideViewport=n.bottom||n.top},popperOptions(){return s.l({fallbackPlacements:this.fallbackPlacements,tether:this.tether,hasHideModifierEnabled:!0})},validateProps(){this.modal&&this.initialFocusElement==="none"&&console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement')},calculateAnchorZindex(){var e;return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')||(e=this.anchorEl)!=null&&e.closest(".d-zi-drawer")?650:300},defaultToggleOpen(e){var t,n,a;if(!this.hovercard&&!this.openOnContext&&(this.open===null||this.open===void 0)){if(!((t=this.anchorEl)!=null&&t.contains(e.target))&&!((n=this.anchorEl)!=null&&n.isEqualNode(e.target))||(a=this.anchorEl)!=null&&a.disabled)return;this.toggleOpen()}},async onContext(e){this.openOnContext&&(e.preventDefault(),this.isOpen=!0,await this.$nextTick(),this.tip.setProps({placement:"right-start",getReferenceClientRect:()=>({width:0,height:0,top:e.clientY,bottom:e.clientY,left:e.clientX,right:e.clientX})}))},toggleOpen(){this.isOpen=!this.isOpen},onArrowKeyPress(e){var t;this.open===null&&(this.openWithArrowKeys&&((t=this.anchorEl)!=null&&t.contains(e.target))&&(this.isOpen||(this.isOpen=!0)),this.$emit("keydown",e))},addEventListeners(){window.addEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.addEventListener("resize",this.onResize)},removeEventListeners(){window.removeEventListener("dt-popover-close",this.closePopover),this.contentWidth==="anchor"&&window.removeEventListener("resize",this.onResize)},closePopover(){this.isOpen=!1},preventScrolling(){var e,t;if(this.modal){const n=(e=this.anchorEl)==null?void 0:e.closest("body, .tippy-box");if(!n)return;((t=n.tagName)==null?void 0:t.toLowerCase())==="body"?(n.classList.add("d-of-hidden"),this.tip.setProps({offset:this.offset})):n.classList.add("d-zi-popover")}},enableScrolling(){var t,n;const e=(t=this.anchorEl)==null?void 0:t.closest("body, .tippy-box");e&&(((n=e.tagName)==null?void 0:n.toLowerCase())==="body"?(e.classList.remove("d-of-hidden"),this.tip.setProps({offset:this.offset})):e.classList.remove("d-zi-popover"))},removeReferences(){this.anchorEl=null,this.popoverContentEl=null,this.tip=null},async onShow(){this.contentWidth==="anchor"&&await this.setPopoverContentAnchorWidth(),this.contentWidth===null&&(this.popoverContentEl.style.width="auto"),this.addEventListeners()},async onLeaveTransitionComplete(){var e;this.modal&&(await this.focusFirstElement(this.$refs.anchor),await this.$nextTick(),this.enableScrolling()),(e=this.tip)==null||e.unmount(),this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},async onEnterTransitionComplete(){this.focusInitialElement(),await this.$nextTick(),this.preventScrolling(),this.$emit("opened",!0,this.$refs.popover__content),this.open!==null&&this.$emit("update:open",!0)},focusInitialElement(){var e,t;this.initialFocusElement==="dialog"&&((t=(e=this.$refs.content)==null?void 0:e.$el)==null||t.focus()),this.initialFocusElement.startsWith("#")&&this.focusInitialElementById(),this.initialFocusElement==="first"&&this.focusFirstElementIfNeeded(this.$refs.popover__content),this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},focusInitialElementById(){var t,n,a;const e=(n=(t=this.$refs.content)==null?void 0:t.$el)==null?void 0:n.querySelector(this.initialFocusElement);e?e.focus():console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'),e?e.focus():(a=this.$refs.content)==null||a.$el.focus()},onResize(){this.closePopover()},onClickOutside(){if(!this.hideOnClick)return;this.popoverContentEl.querySelector(".d-popover__anchor--opened")||this.closePopover()},onKeydown(e){e.key==="Tab"&&this.modal&&this.focusTrappedTabPress(e,this.popoverContentEl),e.key==="Escape"&&this.closePopover(),this.$emit("keydown",e)},async setPopoverContentAnchorWidth(){var e;await this.$nextTick(),this.popoverContentEl.style.width=`${(e=this.anchorEl)==null?void 0:e.clientWidth}px`},focusFirstElementIfNeeded(e){var n,a;this._getFocusableElements(e,!0).length!==0?this.focusFirstElement(e):this.showCloseButton?(n=this.$refs.popover__header)==null||n.focusCloseButton():(a=this.$refs.content)==null||a.$el.focus()},initTippyInstance(){var e,t;this.tip=s.n(this.anchorEl,{popperOptions:this.popperOptions(),contentElement:this.popoverContentEl,placement:this.placement,offset:this.offset,sticky:this.sticky,appendTo:this.appendTo==="body"?(t=(e=this.anchorEl)==null?void 0:e.getRootNode())==null?void 0:t.querySelector("body"):this.appendTo,interactive:!0,trigger:"manual",hideOnClick:!1,zIndex:this.modal?650:this.calculateAnchorZindex(),onClickOutside:this.onClickOutside,onShow:this.onShow})},setInTimer(){this.inTimer=setTimeout(()=>{this.isOpen=!0},s.h)},setOutTimer(){this.outTimer=setTimeout(()=>{this.isOpen=!1},s.h)},onEnterAnchor(){this.hovercard&&(this.timer?this.timer.enter(this.id):(clearTimeout(this.outTimer),this.setInTimer()))},onLeaveAnchor(){this.hovercard&&(this.timer?this.timer.leave():(clearTimeout(this.inTimer),this.setOutTimer()))},onEnterContent(){this.hovercard&&(this.timer?this.timer.enter(this.id):clearTimeout(this.outTimer))},onLeaveContent(){this.hovercard&&(this.timer?this.timer.leave():this.setOutTimer())}}},P=["aria-hidden"],g=["id","data-qa","tabindex"],S=["data-qa"];function w(e,t,n,a,l,i){const c=o.resolveComponent("popover-header-footer"),h=o.resolveComponent("sr-only-close-button"),p=o.resolveComponent("dt-lazy-show");return o.openBlock(),o.createElementBlock("div",null,[n.modal&&l.isOpen?(o.openBlock(),o.createBlock(o.Teleport,{key:0,to:"body"},[o.createElementVNode("div",{class:"d-modal--transparent","aria-hidden":n.modal&&l.isOpen?"false":"true",onClick:t[0]||(t[0]=o.withModifiers(()=>{},["prevent","stop"]))},null,8,P)])):o.createCommentVNode("",!0),(o.openBlock(),o.createBlock(o.resolveDynamicComponent(n.elementType),{ref:"popover",class:o.normalizeClass(["d-popover",{"d-popover__anchor--opened":l.isOpen}]),"data-qa":"dt-popover-container"},{default:o.withCtx(()=>[o.createElementVNode("div",{id:!n.ariaLabelledby&&i.labelledBy,ref:"anchor","data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-anchor`:"dt-popover-anchor",tabindex:n.openOnContext?0:void 0,onClickCapture:t[1]||(t[1]=(...r)=>i.defaultToggleOpen&&i.defaultToggleOpen(...r)),onContextmenu:t[2]||(t[2]=(...r)=>i.onContext&&i.onContext(...r)),onKeydown:[t[3]||(t[3]=o.withKeys(o.withModifiers((...r)=>i.onArrowKeyPress&&i.onArrowKeyPress(...r),["prevent"]),["up"])),t[4]||(t[4]=o.withKeys(o.withModifiers((...r)=>i.onArrowKeyPress&&i.onArrowKeyPress(...r),["prevent"]),["down"])),t[6]||(t[6]=o.withKeys(r=>e.$emit("keydown",r),["enter"])),t[7]||(t[7]=o.withKeys(r=>e.$emit("keydown",r),["space"]))],onKeydownCapture:t[5]||(t[5]=o.withKeys((...r)=>i.closePopover&&i.closePopover(...r),["escape"])),onMouseenter:t[8]||(t[8]=(...r)=>i.onEnterAnchor&&i.onEnterAnchor(...r)),onMouseleave:t[9]||(t[9]=(...r)=>i.onLeaveAnchor&&i.onLeaveAnchor(...r))},[o.renderSlot(e.$slots,"anchor",{attrs:{"aria-expanded":l.isOpen.toString(),"aria-controls":n.id,"aria-haspopup":n.role}})],40,g),o.createVNode(p,o.mergeProps({id:n.id,ref:"content",role:n.role,"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}__dialog`:"dt-popover","aria-hidden":`${!l.isOpen}`,"aria-labelledby":i.labelledBy,"aria-label":n.ariaLabel,"aria-modal":`${!n.modal}`,transition:n.transition,show:l.isOpen,appear:l.toAppear,class:["d-popover__dialog",{"d-popover__dialog--modal":n.modal},n.dialogClass],style:{"max-height":i.calculatedMaxHeight,"max-width":n.maxWidth},css:e.$attrs.css,tabindex:n.contentTabindex},o.toHandlers(i.popoverListeners),{onMouseenter:i.onEnterContent,onMouseleave:i.onLeaveContent}),{default:o.withCtx(()=>[l.hasSlotContent(e.$slots.headerContent)||n.showCloseButton?(o.openBlock(),o.createBlock(c,{key:0,ref:"popover__header",class:o.normalizeClass(l.POPOVER_HEADER_FOOTER_PADDING_CLASSES[n.padding]),"content-class":n.headerClass,type:"header","show-close-button":n.showCloseButton,"close-button-props":n.closeButtonProps,onClose:i.closePopover},{content:o.withCtx(()=>[o.renderSlot(e.$slots,"headerContent",{close:i.closePopover})]),_:3},8,["class","content-class","show-close-button","close-button-props","onClose"])):o.createCommentVNode("",!0),o.createElementVNode("div",{ref:"popover__content","data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-content`:"dt-popover-content",class:o.normalizeClass(["d-popover__content",l.POPOVER_PADDING_CLASSES[n.padding],n.contentClass])},[o.renderSlot(e.$slots,"content",{close:i.closePopover})],10,S),l.hasSlotContent(e.$slots.footerContent)?(o.openBlock(),o.createBlock(c,{key:1,ref:"popover__footer",type:"footer",class:o.normalizeClass(l.POPOVER_HEADER_FOOTER_PADDING_CLASSES[n.padding]),"content-class":n.footerClass},{content:o.withCtx(()=>[o.renderSlot(e.$slots,"footerContent",{close:i.closePopover})]),_:3},8,["class","content-class"])):o.createCommentVNode("",!0),e.showVisuallyHiddenClose?(o.openBlock(),o.createBlock(h,{key:2,"visually-hidden-close-label":e.visuallyHiddenCloseLabel,onClose:i.closePopover},null,8,["visually-hidden-close-label","onClose"])):o.createCommentVNode("",!0)]),_:3},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 T=f._(b,[["render",w]]);exports.POPOVER_APPEND_TO_VALUES=s.e;exports.POPOVER_CONTENT_WIDTHS=s.c;exports.POPOVER_DIRECTIONS=s.g;exports.POPOVER_HEADER_FOOTER_PADDING_CLASSES=s.a;exports.POPOVER_INITIAL_FOCUS_STRINGS=s.d;exports.POPOVER_PADDING_CLASSES=s.P;exports.POPOVER_ROLES=s.b;exports.POPOVER_STICKY_VALUES=s.f;exports.DtPopover=T;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const popover_constants = require("../chunks/popover_constants-JwBF9h1Z.js");
+const common_utils = require("../common/utils.cjs");
+const modal = require("../chunks/modal-VgxXAQFP.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 lib_lazyShow = require("./lazy-show.cjs");
+require("tippy.js");
+require("../common/constants.cjs");
+require("../chunks/link_constants-Huj7D_hm.js");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+const _sfc_main$1 = {
+  name: "PopoverHeaderFooter",
+  components: {
+    DtButton: lib_button.DtButton,
+    DtIcon: lib_icon.DtIcon
+  },
+  props: {
+    // eslint-disable-next-line vue/require-default-prop
+    type: {
+      type: String,
+      validator: function(value) {
+        return ["header", "footer"].includes(value);
+      }
+    },
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Determines visibility for close button
+     * @values true, false
+     */
+    showCloseButton: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * A set of props to be passed into the popover's header close button.
+     * Requires an 'ariaLabel' property.
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  emits: [
+    /**
+     * Emitted when popover is closed
+     *
+     * @event close
+     * @type { Boolean }
+     */
+    "close"
+  ],
+  data() {
+    return {
+      hasSlotContent: common_utils.hasSlotContent
+    };
+  },
+  methods: {
+    focusCloseButton() {
+      var _a;
+      const closeButton = (_a = this.$refs["popover__close-button"]) == null ? void 0 : _a.$el;
+      closeButton == null ? void 0 : closeButton.focus();
+    }
+  }
+};
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  const _component_dt_button = vue.resolveComponent("dt-button");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    "data-qa": "dt-popover-header-footer",
+    class: vue.normalizeClass({
+      "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);
+}
+const PopoverHeaderFooter = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+const _sfc_main = {
+  name: "DtPopover",
+  /********************
+   * CHILD COMPONENTS *
+   ********************/
+  components: {
+    SrOnlyCloseButton: sr_only_close_button.SrOnlyCloseButton,
+    DtLazyShow: lib_lazyShow.DtLazyShow,
+    PopoverHeaderFooter
+  },
+  mixins: [modal.Modal, sr_only_close_button.SrOnlyCloseButtonMixin],
+  props: {
+    /**
+     * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
+     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
+     * Supports v-model
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Opens the popover on right click (context menu). If you set this value to `true`,
+     * the default trigger behavior will be disabled.
+     * @values true, false
+     */
+    openOnContext: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Element type (tag name) of the root element of the component.
+     */
+    elementType: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * Named transition when the content display is toggled.
+     * @see DtLazyShow
+     */
+    transition: {
+      type: String,
+      default: "fade"
+    },
+    /**
+     * ARIA role for the content of the popover. Defaults to "dialog".
+     * <a class="d-link" href="https://www.w3.org/TR/wai-aria/#aria-haspopup" target="_blank">aria-haspopup</a>
+     */
+    role: {
+      type: String,
+      default: "dialog",
+      validator: (role) => {
+        return popover_constants.POPOVER_ROLES.includes(role);
+      }
+    },
+    /**
+     * ID of the element that serves as the label for the popover content.
+     * Defaults to the "anchor" element; this exists to provide a different
+     * ID of the label element if, for example, the anchor slot contains
+     * other items that do not serve as a label. You should provide this
+     * or ariaLabel, but not both.
+     */
+    ariaLabelledby: {
+      type: String,
+      default: null
+    },
+    /**
+     * Descriptive label for the popover content. You should provide this
+     * or ariaLabelledby, but not both.
+     */
+    ariaLabel: {
+      type: String,
+      default: null
+    },
+    /**
+     * A set of props to be passed into the popover's header close button.
+     * Requires an 'ariaLabel' property, when the header popover is visible
+     */
+    closeButtonProps: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * Padding size class for the popover content.
+     * @values none, small, medium, large
+     */
+    padding: {
+      type: String,
+      default: "large",
+      validator: (padding) => {
+        return Object.keys(popover_constants.POPOVER_PADDING_CLASSES).some((item) => item === padding);
+      }
+    },
+    /**
+     * Additional class name for the content wrapper element.
+     */
+    contentClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Width configuration for the popover content. When its value is 'anchor',
+     * the popover content will have the same width as the anchor.
+     * @values null, anchor
+     */
+    contentWidth: {
+      type: String,
+      default: "",
+      validator: (contentWidth) => popover_constants.POPOVER_CONTENT_WIDTHS.includes(contentWidth)
+    },
+    /**
+     * Whether to apply transition on initial render in the content lazy show component.
+     */
+    contentAppear: {
+      type: Boolean,
+      default: null
+    },
+    /**
+     * Tabindex value for the content. Passing null, no tabindex attribute will be set.
+     */
+    contentTabindex: {
+      type: Number || null,
+      default: -1
+    },
+    /**
+     * External anchor id to use in those cases the anchor can't be provided via the slot.
+     * For instance, using the combobox's input as the anchor for the popover.
+     */
+    externalAnchor: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The id of the tooltip
+     */
+    id: {
+      type: String,
+      default() {
+        return common_utils.getUniqueString();
+      }
+    },
+    /**
+     *  Displaces the content box from its anchor element
+     *  by the specified number of pixels.
+     *  <a
+     *    class="d-link"
+     *    href="https://atomiks.github.io/tippyjs/v6/all-props/#offset"
+     *    target="_blank"
+     *  >
+     *    Tippy.js docs
+     *  </a>
+     */
+    offset: {
+      type: Array,
+      default: () => [0, 4]
+    },
+    /**
+     * Determines if the popover hides upon clicking the
+     * anchor or outside the content box.
+     * @values true, false
+     */
+    hideOnClick: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * Determines modal state. If enabled popover has a modal overlay
+     * preventing interaction with elements below it, but it is invisible.
+     * @values true, false
+     */
+    modal: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * If the popover does not fit in the direction described by "placement",
+     * it will attempt to change its direction to the "fallbackPlacements".
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * */
+    fallbackPlacements: {
+      type: Array,
+      default: () => {
+        return ["auto"];
+      }
+    },
+    /**
+     * The direction the popover displays relative to the anchor.
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#placement"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
+     */
+    placement: {
+      type: String,
+      default: "bottom-end"
+    },
+    /**
+     * If set to false the dialog will display over top of the anchor when there is insufficient space.
+     * If set to true it will never move from its position relative to the anchor and will clip instead.
+     * <a
+     *   class="d-link"
+     *   href="https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether"
+     *   target="_blank"
+     * >
+     *   Popper.js docs
+     * </a>
+     * @values true, false
+     */
+    tether: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * If the popover sticks to the anchor. This is usually not needed, but can be needed
+     * if the reference element's position is animating, or to automatically update the popover
+     * position in those cases the DOM layout changes the reference element's position.
+     * `true` enables it, `reference` only checks the "reference" rect for changes and `popper` only
+     * checks the "popper" rect for changes.
+     * <a
+     *   class="d-link"
+     *   href="https://atomiks.github.io/tippyjs/v6/all-props/#sticky"
+     *   target="_blank"
+     * >
+     *   Tippy.js docs
+     * </a>
+     * @values true, false, reference, popper
+     */
+    sticky: {
+      type: [Boolean, String],
+      default: false,
+      validator: (sticky) => {
+        return popover_constants.POPOVER_STICKY_VALUES.includes(sticky);
+      }
+    },
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    maxHeight: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines maximum width for the popover before overflow.
+     * Possible units rem|px|%|em
+     */
+    maxWidth: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines visibility for close button
+     * @values true, false
+     */
+    showCloseButton: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Additional class name for the header content wrapper element.
+     */
+    headerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class name for the footer content wrapper element.
+     */
+    footerClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class name for the dialog element.
+     */
+    dialogClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * The element that is focused when the popover is opened. This can be an
+     * HTMLElement within the popover, a string starting with '#' which will
+     * find the element by ID. 'first' which will automatically focus
+     * the first element, or 'dialog' which will focus the dialog window itself.
+     * If the dialog is modal this prop cannot be 'none'.
+     * @values none, dialog, first
+     */
+    initialFocusElement: {
+      type: [String, HTMLElement],
+      default: "first",
+      validator: (initialFocusElement) => {
+        return popover_constants.POPOVER_INITIAL_FOCUS_STRINGS.includes(initialFocusElement) || initialFocusElement instanceof HTMLElement || initialFocusElement.startsWith("#");
+      }
+    },
+    /**
+     * If the popover should open pressing up or down arrow key on the anchor element.
+     * This can be set when not passing open prop.
+     * @values true, false
+     */
+    openWithArrowKeys: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Sets the element to which the popover is going to append to.
+     * 'body' will append to the nearest body (supports shadow DOM).
+     * @values 'body', 'parent', HTMLElement,
+     */
+    appendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (appendTo) => {
+        return popover_constants.POPOVER_APPEND_TO_VALUES.includes(appendTo) || appendTo instanceof HTMLElement;
+      }
+    },
+    /**
+     * Set this prop to true and popover component will support hovercard behaviour
+     * It will open on mouseenter and close on mouseleave with timer delay of 300ms
+     */
+    hovercard: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * The timer is used only when the hovercard prop is true.
+     * It defines the delays when opening several hovercards.
+     * It must have the keys: enter, leave and current.
+     * If null, the default delay of 300ms will be used.
+     */
+    timer: {
+      type: [Object, null],
+      default: null,
+      validator: (timer) => {
+        return timer === null || timer.enter && timer.leave && Object.keys(timer).includes("current");
+      }
+    }
+  },
+  emits: [
+    /**
+     * Native keydown event
+     *
+     * @event keydown
+     * @type {KeyboardEvent}
+     */
+    "keydown",
+    /**
+     * Event fired to sync the open prop with the parent component
+     * @event update:open
+     */
+    "update:open",
+    /**
+     * Emitted when popover is shown or hidden
+     *
+     * @event opened
+     * @type {Boolean | Array}
+     */
+    "opened"
+  ],
+  data() {
+    return {
+      POPOVER_PADDING_CLASSES: popover_constants.POPOVER_PADDING_CLASSES,
+      POPOVER_HEADER_FOOTER_PADDING_CLASSES: popover_constants.POPOVER_HEADER_FOOTER_PADDING_CLASSES,
+      intersectionObserver: null,
+      isOutsideViewport: false,
+      isOpen: false,
+      toAppear: false,
+      anchorEl: null,
+      popoverContentEl: null,
+      hasSlotContent: common_utils.hasSlotContent,
+      inTimer: null,
+      outTimer: null
+    };
+  },
+  computed: {
+    popoverListeners() {
+      return {
+        keydown: (event) => {
+          this.onKeydown(event);
+        },
+        "after-leave": (event) => {
+          this.onLeaveTransitionComplete();
+        },
+        "after-enter": (event) => {
+          this.onEnterTransitionComplete();
+        }
+      };
+    },
+    calculatedMaxHeight() {
+      if (this.isOutsideViewport && this.modal) {
+        return `calc(100vh - var(--dt-space-300))`;
+      }
+      return this.maxHeight;
+    },
+    labelledBy() {
+      return this.ariaLabelledby || !this.ariaLabel && common_utils.getUniqueString("DtPopover__anchor");
+    },
+    currentHovercard() {
+      var _a;
+      return (_a = this.timer) == null ? void 0 : _a.current;
+    }
+  },
+  watch: {
+    $props: {
+      immediate: true,
+      deep: true,
+      handler() {
+        this.validateProps();
+      }
+    },
+    modal(modal2) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        zIndex: modal2 ? 650 : this.calculateAnchorZindex()
+      });
+    },
+    offset(offset) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        offset
+      });
+    },
+    sticky(sticky) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        sticky
+      });
+    },
+    fallbackPlacements() {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        popperOptions: this.popperOptions()
+      });
+    },
+    tether() {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        popperOptions: this.popperOptions()
+      });
+    },
+    placement(placement) {
+      var _a;
+      (_a = this.tip) == null ? void 0 : _a.setProps({
+        placement
+      });
+    },
+    open: {
+      handler: function(open) {
+        if (open !== null) {
+          this.isOpen = open;
+        }
+        if (open === true) {
+          this.toAppear = true;
+        }
+      },
+      immediate: true
+    },
+    contentAppear: {
+      handler: function(contentAppear) {
+        if (contentAppear !== null) {
+          this.toAppear = contentAppear;
+        }
+      }
+    },
+    isOpen(isOpen, isPrev) {
+      if (isOpen) {
+        this.initTippyInstance();
+        this.tip.show();
+      } else if (!isOpen && isPrev !== isOpen) {
+        this.removeEventListeners();
+        this.tip.hide();
+      }
+    },
+    currentHovercard() {
+      if (this.hovercard && this.timer) {
+        if (this.currentHovercard === this.id) {
+          this.isOpen = true;
+        } else {
+          this.isOpen = false;
+        }
+      }
+    }
+  },
+  mounted() {
+    var _a;
+    const externalAnchorEl = this.externalAnchor ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`) : null;
+    this.anchorEl = externalAnchorEl ?? this.$refs.anchor.children[0];
+    this.popoverContentEl = (_a = this.$refs.content) == null ? void 0 : _a.$el;
+    if (this.isOpen) {
+      this.initTippyInstance();
+      this.tip.show();
+    }
+    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport);
+    this.intersectionObserver.observe(this.popoverContentEl);
+  },
+  beforeUnmount() {
+    var _a;
+    (_a = this.tip) == null ? void 0 : _a.destroy();
+    this.intersectionObserver.disconnect();
+    this.removeReferences();
+    this.removeEventListeners();
+  },
+  /******************
+   *     METHODS    *
+   ******************/
+  methods: {
+    hasIntersectedViewport(entries) {
+      var _a;
+      const dialog = (_a = entries == null ? void 0 : entries[0]) == null ? void 0 : _a.target;
+      if (!dialog)
+        return;
+      const isOut = common_utils.isOutOfViewPort(dialog);
+      this.isOutsideViewport = isOut.bottom || isOut.top;
+    },
+    popperOptions() {
+      return popover_constants.getPopperOptions({
+        fallbackPlacements: this.fallbackPlacements,
+        tether: this.tether,
+        hasHideModifierEnabled: true
+      });
+    },
+    validateProps() {
+      if (this.modal && this.initialFocusElement === "none") {
+        console.error('If the popover is modal you must set the initialFocusElement prop. Possible values: "dialog", "first", HTMLElement');
+      }
+    },
+    calculateAnchorZindex() {
+      var _a;
+      if (this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]') || // Special case because we don't have any dialtone drawer component yet. Render at 650 when
+      // anchor of popover is within a drawer.
+      ((_a = this.anchorEl) == null ? void 0 : _a.closest(".d-zi-drawer"))) {
+        return 650;
+      } else {
+        return 300;
+      }
+    },
+    defaultToggleOpen(e) {
+      var _a, _b, _c;
+      if (this.hovercard) {
+        return;
+      }
+      if (this.openOnContext) {
+        return;
+      }
+      if (this.open === null || this.open === void 0) {
+        if (!((_a = this.anchorEl) == null ? void 0 : _a.contains(e.target)) && !((_b = this.anchorEl) == null ? void 0 : _b.isEqualNode(e.target)) || ((_c = this.anchorEl) == null ? void 0 : _c.disabled)) {
+          return;
+        }
+        this.toggleOpen();
+      }
+    },
+    async onContext(event) {
+      if (!this.openOnContext) {
+        return;
+      }
+      event.preventDefault();
+      this.isOpen = true;
+      await this.$nextTick();
+      this.tip.setProps({
+        placement: "right-start",
+        getReferenceClientRect: () => ({
+          width: 0,
+          height: 0,
+          top: event.clientY,
+          bottom: event.clientY,
+          left: event.clientX,
+          right: event.clientX
+        })
+      });
+    },
+    toggleOpen() {
+      this.isOpen = !this.isOpen;
+    },
+    onArrowKeyPress(e) {
+      var _a;
+      if (this.open !== null) {
+        return;
+      }
+      if (this.openWithArrowKeys && ((_a = this.anchorEl) == null ? void 0 : _a.contains(e.target))) {
+        if (!this.isOpen) {
+          this.isOpen = true;
+        }
+      }
+      this.$emit("keydown", e);
+    },
+    addEventListeners() {
+      window.addEventListener("dt-popover-close", this.closePopover);
+      if (this.contentWidth === "anchor") {
+        window.addEventListener("resize", this.onResize);
+      }
+    },
+    removeEventListeners() {
+      window.removeEventListener("dt-popover-close", this.closePopover);
+      if (this.contentWidth === "anchor") {
+        window.removeEventListener("resize", this.onResize);
+      }
+    },
+    closePopover() {
+      this.isOpen = false;
+    },
+    /*
+    * Prevents scrolling outside of the currently opened modal popover by:
+    *   - when anchor is not within another popover: setting the body to overflow: hidden
+    *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index
+    *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.
+    **/
+    preventScrolling() {
+      var _a, _b;
+      if (this.modal) {
+        const element = (_a = this.anchorEl) == null ? void 0 : _a.closest("body, .tippy-box");
+        if (!element)
+          return;
+        if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
+          element.classList.add("d-of-hidden");
+          this.tip.setProps({ offset: this.offset });
+        } else {
+          element.classList.add("d-zi-popover");
+        }
+      }
+    },
+    /*
+    * Resets the prevent scrolling properties set in preventScrolling() back to normal.
+    **/
+    enableScrolling() {
+      var _a, _b;
+      const element = (_a = this.anchorEl) == null ? void 0 : _a.closest("body, .tippy-box");
+      if (!element)
+        return;
+      if (((_b = element.tagName) == null ? void 0 : _b.toLowerCase()) === "body") {
+        element.classList.remove("d-of-hidden");
+        this.tip.setProps({ offset: this.offset });
+      } else {
+        element.classList.remove("d-zi-popover");
+      }
+    },
+    removeReferences() {
+      this.anchorEl = null;
+      this.popoverContentEl = null;
+      this.tip = null;
+    },
+    async onShow() {
+      if (this.contentWidth === "anchor") {
+        await this.setPopoverContentAnchorWidth();
+      }
+      if (this.contentWidth === null) {
+        this.popoverContentEl.style.width = "auto";
+      }
+      this.addEventListeners();
+    },
+    async onLeaveTransitionComplete() {
+      var _a;
+      if (this.modal) {
+        await this.focusFirstElement(this.$refs.anchor);
+        await this.$nextTick();
+        this.enableScrolling();
+      }
+      (_a = this.tip) == null ? void 0 : _a.unmount();
+      this.$emit("opened", false);
+      if (this.open !== null) {
+        this.$emit("update:open", false);
+      }
+    },
+    async onEnterTransitionComplete() {
+      this.focusInitialElement();
+      await this.$nextTick();
+      this.preventScrolling();
+      this.$emit("opened", true, this.$refs.popover__content);
+      if (this.open !== null) {
+        this.$emit("update:open", true);
+      }
+    },
+    focusInitialElement() {
+      var _a, _b;
+      if (this.initialFocusElement === "dialog") {
+        (_b = (_a = this.$refs.content) == null ? void 0 : _a.$el) == null ? void 0 : _b.focus();
+      }
+      if (this.initialFocusElement.startsWith("#")) {
+        this.focusInitialElementById();
+      }
+      if (this.initialFocusElement === "first") {
+        this.focusFirstElementIfNeeded(this.$refs.popover__content);
+      }
+      if (this.initialFocusElement instanceof HTMLElement) {
+        this.initialFocusElement.focus();
+      }
+    },
+    focusInitialElementById() {
+      var _a, _b, _c;
+      const result = (_b = (_a = this.$refs.content) == null ? void 0 : _a.$el) == null ? void 0 : _b.querySelector(this.initialFocusElement);
+      if (result) {
+        result.focus();
+      } else {
+        console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.');
+      }
+      result ? result.focus() : (_c = this.$refs.content) == null ? void 0 : _c.$el.focus();
+    },
+    onResize() {
+      this.closePopover();
+    },
+    onClickOutside() {
+      if (!this.hideOnClick)
+        return;
+      const innerModals = this.popoverContentEl.querySelector(".d-popover__anchor--opened");
+      if (!innerModals) {
+        this.closePopover();
+      }
+    },
+    onKeydown(e) {
+      if (e.key === "Tab") {
+        if (this.modal) {
+          this.focusTrappedTabPress(e, this.popoverContentEl);
+        }
+      }
+      if (e.key === "Escape") {
+        this.closePopover();
+      }
+      this.$emit("keydown", e);
+    },
+    async setPopoverContentAnchorWidth() {
+      var _a;
+      await this.$nextTick();
+      this.popoverContentEl.style.width = `${(_a = this.anchorEl) == null ? void 0 : _a.clientWidth}px`;
+    },
+    focusFirstElementIfNeeded(domEl) {
+      var _a, _b;
+      const focusableElements = this._getFocusableElements(domEl, true);
+      if (focusableElements.length !== 0) {
+        this.focusFirstElement(domEl);
+      } else if (this.showCloseButton) {
+        (_a = this.$refs.popover__header) == null ? void 0 : _a.focusCloseButton();
+      } else {
+        (_b = this.$refs.content) == null ? void 0 : _b.$el.focus();
+      }
+    },
+    initTippyInstance() {
+      var _a, _b;
+      this.tip = popover_constants.createTippy(this.anchorEl, {
+        popperOptions: this.popperOptions(),
+        contentElement: this.popoverContentEl,
+        placement: this.placement,
+        offset: this.offset,
+        sticky: this.sticky,
+        appendTo: this.appendTo === "body" ? (_b = (_a = this.anchorEl) == null ? void 0 : _a.getRootNode()) == null ? void 0 : _b.querySelector("body") : this.appendTo,
+        interactive: true,
+        trigger: "manual",
+        // We have to manage hideOnClick functionality manually to handle
+        // popover within popover situations.
+        hideOnClick: false,
+        zIndex: this.modal ? 650 : this.calculateAnchorZindex(),
+        onClickOutside: this.onClickOutside,
+        onShow: this.onShow
+      });
+    },
+    //  ============================================================================
+    //  $ HOVERCARD
+    //  ----------------------------------------------------------------------------
+    setInTimer() {
+      this.inTimer = setTimeout(() => {
+        this.isOpen = true;
+      }, popover_constants.TOOLTIP_DELAY_MS);
+    },
+    setOutTimer() {
+      this.outTimer = setTimeout(() => {
+        this.isOpen = false;
+      }, popover_constants.TOOLTIP_DELAY_MS);
+    },
+    onEnterAnchor() {
+      if (!this.hovercard)
+        return;
+      if (this.timer)
+        this.timer.enter(this.id);
+      else {
+        clearTimeout(this.outTimer);
+        this.setInTimer();
+      }
+    },
+    onLeaveAnchor() {
+      if (!this.hovercard)
+        return;
+      if (this.timer)
+        this.timer.leave();
+      else {
+        clearTimeout(this.inTimer);
+        this.setOutTimer();
+      }
+    },
+    onEnterContent() {
+      if (!this.hovercard)
+        return;
+      if (this.timer)
+        this.timer.enter(this.id);
+      else
+        clearTimeout(this.outTimer);
+    },
+    onLeaveContent() {
+      if (!this.hovercard)
+        return;
+      if (this.timer)
+        this.timer.leave();
+      else
+        this.setOutTimer();
+    }
+    //  ============================================================================
+    //  $ HOVERCARD
+    //  ----------------------------------------------------------------------------
+  }
+};
+const _hoisted_1 = ["aria-hidden"];
+const _hoisted_2 = ["id", "data-qa", "tabindex"];
+const _hoisted_3 = ["data-qa"];
+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"])
+      ]),
+      _: 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;
+exports.POPOVER_CONTENT_WIDTHS = popover_constants.POPOVER_CONTENT_WIDTHS;
+exports.POPOVER_DIRECTIONS = popover_constants.POPOVER_DIRECTIONS;
+exports.POPOVER_HEADER_FOOTER_PADDING_CLASSES = popover_constants.POPOVER_HEADER_FOOTER_PADDING_CLASSES;
+exports.POPOVER_INITIAL_FOCUS_STRINGS = popover_constants.POPOVER_INITIAL_FOCUS_STRINGS;
+exports.POPOVER_PADDING_CLASSES = popover_constants.POPOVER_PADDING_CLASSES;
+exports.POPOVER_ROLES = popover_constants.POPOVER_ROLES;
+exports.POPOVER_STICKY_VALUES = popover_constants.POPOVER_STICKY_VALUES;
+exports.DtPopover = DtPopover;
 //# sourceMappingURL=popover.cjs.map