@dialpad/dialtone 9.123.2 → 9.125.0

package/dist/vue2/lib/popover/popover-header-footer.js

@@ -1,18 +1,20 @@
 import { DtIconClose as r } from "@dialpad/dialtone-icons/vue2";
 import { n } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 import s from "../button/button.js";
-const a = {
+import a from "../../common/mixins/localization.js";
+const c = {
   name: "PopoverHeaderFooter",
   components: {
     DtButton: s,
     DtIconClose: r
   },
+  mixins: [a],
   props: {
     // eslint-disable-next-line vue/require-default-prop
     type: {
       type: String,
-      validator: function(o) {
-        return ["header", "footer"].includes(o);
+      validator: function(t) {
+        return ["header", "footer"].includes(t);
       }
     },
     /**
@@ -29,15 +31,6 @@ const a = {
     showCloseButton: {
       type: Boolean,
       default: !1
-    },
-    /**
-     * A set of props to be passed into the popover's header close button.
-     * Requires an 'ariaLabel' property.
-     */
-    closeButtonProps: {
-      type: Object,
-      default: () => {
-      }
     }
   },
   emits: [
@@ -49,37 +42,42 @@ const a = {
      */
     "close"
   ],
+  computed: {
+    closeButtonTitle() {
+      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
+    }
+  },
   methods: {
     focusCloseButton() {
       var e;
-      const o = (e = this.$refs["popover__close-button"]) == null ? void 0 : e.$el;
-      o == null || o.focus();
+      const t = (e = this.$refs["popover__close-button"]) == null ? void 0 : e.$el;
+      t == null || t.focus();
     }
   }
 };
 var p = function() {
-  var e = this, t = e._self._c;
-  return t("div", { class: {
+  var e = this, o = e._self._c;
+  return o("div", { class: {
     "d-popover__header": e.type === "header",
     "d-popover__footer": e.type === "footer"
-  }, attrs: { "data-qa": "dt-popover-header-footer" } }, [e.$slots.content ? t("div", { class: [{
+  }, attrs: { "data-qa": "dt-popover-header-footer" } }, [e.$slots.content ? o("div", { class: [{
     "d-popover__header__content": e.type === "header",
     "d-popover__footer__content": e.type === "footer"
-  }, e.contentClass], attrs: { "data-qa": "dt-popover-header-footer-content" } }, [e._t("content")], 2) : e._e(), e.showCloseButton ? t("dt-button", e._b({ ref: "popover__close-button", class: {
+  }, e.contentClass], attrs: { "data-qa": "dt-popover-header-footer-content" } }, [e._t("content")], 2) : e._e(), e.showCloseButton ? o("dt-button", { ref: "popover__close-button", class: {
     "d-popover__header__close-button": e.type === "header",
     "d-popover__footer__close-button": e.type === "footer"
-  }, attrs: { "data-qa": "dt-popover-close", importance: "outlined", kind: "muted", circle: "" }, on: { click: function(d) {
+  }, attrs: { "data-qa": "dt-popover-close", importance: "outlined", kind: "muted", circle: "", "aria-label": e.closeButtonTitle, title: e.closeButtonTitle }, on: { click: function(i) {
     return e.$emit("close");
   } }, scopedSlots: e._u([{ key: "icon", fn: function() {
-    return [t("dt-icon-close", { attrs: { size: "300" } })];
-  }, proxy: !0 }], null, !1, 2465905460) }, "dt-button", e.closeButtonProps, !1)) : e._e()], 1);
-}, c = [], _ = /* @__PURE__ */ n(
-  a,
+    return [o("dt-icon-close", { attrs: { size: "300" } })];
+  }, proxy: !0 }], null, !1, 2465905460) }) : e._e()], 1);
+}, l = [], _ = /* @__PURE__ */ n(
+  c,
   p,
-  c
+  l
 );
-const i = _.exports;
+const v = _.exports;
 export {
-  i as default
+  v as default
 };
 //# sourceMappingURL=popover-header-footer.js.map

package/dist/vue2/lib/popover/popover-header-footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover-header-footer.js","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-popover-header-footer\"\n    :class=\"{\n      'd-popover__header': type === 'header',\n      'd-popover__footer': type === 'footer',\n    }\"\n  >\n    <div\n      v-if=\"$slots.content\"\n      data-qa=\"dt-popover-header-footer-content\"\n      :class=\"[{\n        'd-popover__header__content': type === 'header',\n        'd-popover__footer__content': type === 'footer',\n      }, contentClass]\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot name=\"content\" />\n    </div>\n    <dt-button\n      v-if=\"showCloseButton\"\n      ref=\"popover__close-button\"\n      data-qa=\"dt-popover-close\"\n      :class=\"{\n        'd-popover__header__close-button': type === 'header',\n        'd-popover__footer__close-button': type === 'footer',\n      }\"\n      importance=\"outlined\"\n      kind=\"muted\"\n      circle\n      v-bind=\"closeButtonProps\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\n\nexport default {\n  name: 'PopoverHeaderFooter',\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  props: {\n    // eslint-disable-next-line vue/require-default-prop\n    type: {\n      type: String,\n      validator: function (value) {\n        return ['header', 'footer'].includes(value);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A set of props to be passed into the popover's header close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => {},\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is closed\n     *\n     * @event close\n     * @type { Boolean }\n     */\n    'close',\n  ],\n\n  methods: {\n    focusCloseButton () {\n      const closeButton = this.$refs['popover__close-button']?.$el;\n      closeButton?.focus();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","value","closeButton","_a"],"mappings":";;;AA8CA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA,IAEA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA,SAAAC,GAAA;AACA,eAAA,CAAA,UAAA,QAAA,EAAA,SAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,MAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA;;AACA,YAAAC,KAAAC,IAAA,KAAA,MAAA,uBAAA,MAAA,gBAAAA,EAAA;AACA,MAAAD,KAAA,QAAAA,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"popover-header-footer.js","sources":["../../../components/popover/popover_header_footer.vue"],"sourcesContent":["<template>\n  <div\n    data-qa=\"dt-popover-header-footer\"\n    :class=\"{\n      'd-popover__header': type === 'header',\n      'd-popover__footer': type === 'footer',\n    }\"\n  >\n    <div\n      v-if=\"$slots.content\"\n      data-qa=\"dt-popover-header-footer-content\"\n      :class=\"[{\n        'd-popover__header__content': type === 'header',\n        'd-popover__footer__content': type === 'footer',\n      }, contentClass]\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot name=\"content\" />\n    </div>\n    <dt-button\n      v-if=\"showCloseButton\"\n      ref=\"popover__close-button\"\n      data-qa=\"dt-popover-close\"\n      :class=\"{\n        'd-popover__header__close-button': type === 'header',\n        'd-popover__footer__close-button': type === 'footer',\n      }\"\n      importance=\"outlined\"\n      kind=\"muted\"\n      circle\n      :aria-label=\"closeButtonTitle\"\n      :title=\"closeButtonTitle\"\n      @click=\"$emit('close')\"\n    >\n      <template #icon>\n        <dt-icon-close\n          size=\"300\"\n        />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\nexport default {\n  name: 'PopoverHeaderFooter',\n  components: {\n    DtButton,\n    DtIconClose,\n  },\n\n  mixins: [DtLocalizationMixin],\n\n  props: {\n    // eslint-disable-next-line vue/require-default-prop\n    type: {\n      type: String,\n      validator: function (value) {\n        return ['header', 'footer'].includes(value);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is closed\n     *\n     * @event close\n     * @type { Boolean }\n     */\n    'close',\n  ],\n\n  computed: {\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  methods: {\n    focusCloseButton () {\n      const closeButton = this.$refs['popover__close-button']?.$el;\n      closeButton?.focus();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtIconClose","DtLocalizationMixin","value","closeButton","_a"],"mappings":";;;;AAgDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA,IAEA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,WAAA,SAAAC,GAAA;AACA,eAAA,CAAA,UAAA,QAAA,EAAA,SAAAA,CAAA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,iBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,mBAAA;AACA,aAAA,KAAA,KAAA,GAAA,uBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,mBAAA;;AACA,YAAAC,KAAAC,IAAA,KAAA,MAAA,uBAAA,MAAA,gBAAAA,EAAA;AACA,MAAAD,KAAA,QAAAA,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/popover/popover.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./popover-constants.cjs"),r=require("../../common/utils/index.cjs"),h=require("../../node_modules/@linusborg/vue-simple-portal.cjs"),u=require("../../common/mixins/modal.cjs"),d=require("./tippy-utils.cjs"),c=require("./popover-header-footer.cjs"),f=require("../../common/mixins/sr-only-close-button.cjs"),m=require("../../shared/sr_only_close_button.cjs"),y=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),v=require("../lazy-show/lazy-show.cjs"),_={name:"DtPopover",components:{SrOnlyCloseButton:m.default,DtLazyShow:v.default,PopoverHeaderFooter:c.default,Portal:h.Portal},mixins:[u.default,f.default],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:t=>i.POPOVER_ROLES.includes(t)},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null},closeButtonProps:{type:Object,default:()=>({})},padding:{type:String,default:"large",validator:t=>Object.keys(i.POPOVER_PADDING_CLASSES).some(e=>e===t)},contentClass:{type:[String,Array,Object],default:""},contentWidth:{type:String,default:"",validator:t=>i.POPOVER_CONTENT_WIDTHS.includes(t)},contentTabindex:{type:Number||null,default:-1},externalAnchor:{type:String,default:""},id:{type:String,default(){return r.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:t=>i.POPOVER_STICKY_VALUES.includes(t)},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:t=>i.POPOVER_INITIAL_FOCUS_STRINGS.includes(t)||t instanceof HTMLElement||t.startsWith("#")},openWithArrowKeys:{type:Boolean,default:!1},appendTo:{type:[HTMLElement,String],default:"body",validator:t=>i.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement}},emits:["opened","update:open","mouseenter-popover","mouseleave-popover","mouseenter-popover-anchor","mouseleave-popover-anchor"],data(){return{POPOVER_PADDING_CLASSES:i.POPOVER_PADDING_CLASSES,POPOVER_HEADER_FOOTER_PADDING_CLASSES:i.POPOVER_HEADER_FOOTER_PADDING_CLASSES,intersectionObserver:null,isOutsideViewport:!1,isOpen:!1,anchorEl:null,popoverContentEl:null}},computed:{popoverListeners(){return{...this.$listeners,keydown:t=>{this.onKeydown(t),this.$emit("keydown",t)},"after-leave":t=>{this.onLeaveTransitionComplete()},"after-enter":t=>{this.onEnterTransitionComplete()}}},calculatedMaxHeight(){return this.isOutsideViewport&&this.modal?"calc(100vh - var(--dt-space-300))":this.maxHeight},labelledBy(){return this.ariaLabelledby||!this.ariaLabel&&r.getUniqueString("DtPopover__anchor")}},watch:{$props:{immediate:!0,deep:!0,handler(){this.validateProps()}},modal(t){var e;(e=this.tip)==null||e.setProps({zIndex:t?650:this.calculateAnchorZindex()})},offset(t){var e;(e=this.tip)==null||e.setProps({offset:t})},sticky(t){var e;(e=this.tip)==null||e.setProps({sticky:t})},fallbackPlacements(){var t;(t=this.tip)==null||t.setProps({popperOptions:this.popperOptions()})},tether(){var t;(t=this.tip)==null||t.setProps({popperOptions:this.popperOptions()})},placement(t){var e;(e=this.tip)==null||e.setProps({placement:t})},open:{handler:function(t){t!==null&&(this.isOpen=t)},immediate:!0},isOpen(t,e){t?(this.initTippyInstance(),this.tip.show()):!t&&e!==t&&(this.removeEventListeners(),this.tip.hide())}},mounted(){var e;r.warnIfUnmounted(this.$el,this.$options.name);const t=this.externalAnchor?this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`):null;this.anchorEl=t??this.$refs.anchor.children[0],this.popoverContentEl=(e=this.$refs.content)==null?void 0:e.$el,this.isOpen&&(this.initTippyInstance(),this.tip.show()),this.intersectionObserver=new IntersectionObserver(this.hasIntersectedViewport),this.intersectionObserver.observe(this.popoverContentEl)},beforeDestroy(){var t,e;(t=this.tip)==null||t.destroy(),(e=this.intersectionObserver)==null||e.disconnect(),this.removeReferences(),this.removeEventListeners()},methods:{hasIntersectedViewport(t){var n;const e=(n=t==null?void 0:t[0])==null?void 0:n.target;if(!e)return;const o=r.isOutOfViewPort(e);this.isOutsideViewport=o.bottom||o.top},popperOptions(){return d.getPopperOptions({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 t;return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')||(t=this.anchorEl)!=null&&t.closest(".d-zi-drawer")?650:300},defaultToggleOpen(t){var e,o;this.openOnContext||(this.open??((e=this.anchorEl)!=null&&e.contains(t.target)&&!((o=this.anchorEl)!=null&&o.disabled)&&this.toggleOpen()))},async onContext(t){this.openOnContext&&(t.preventDefault(),this.isOpen=!0,await this.$nextTick(),this.tip.setProps({placement:"right-start",getReferenceClientRect:()=>({width:0,height:0,top:t.clientY,bottom:t.clientY,left:t.clientX,right:t.clientX})}))},toggleOpen(){this.isOpen=!this.isOpen},onArrowKeyPress(t){var e;this.open===null&&this.openWithArrowKeys&&(e=this.anchorEl)!=null&&e.contains(t.target)&&(this.isOpen||(this.isOpen=!0))},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 t,e;if(this.modal){const o=(t=this.anchorEl)==null?void 0:t.closest("body, .tippy-box");if(!o)return;((e=o.tagName)==null?void 0:e.toLowerCase())==="body"?(r.disableRootScrolling(this.anchorEl.getRootNode().host),this.tip.setProps({offset:this.offset})):o.classList.add("d-zi-popover")}},enableScrolling(){var e,o;const t=(e=this.anchorEl)==null?void 0:e.closest("body, .tippy-box");t&&(((o=t.tagName)==null?void 0:o.toLowerCase())==="body"?(r.enableRootScrolling(this.anchorEl.getRootNode().host),this.tip.setProps({offset:this.offset})):t.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 t;this.modal&&(await this.focusFirstElement(this.$refs.anchor),await this.$nextTick(),this.enableScrolling()),(t=this.tip)==null||t.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 t,e;this.initialFocusElement==="dialog"&&((e=(t=this.$refs.content)==null?void 0:t.$el)==null||e.focus()),this.initialFocusElement.startsWith("#")&&this.focusInitialElementById(),this.initialFocusElement==="first"&&this.focusFirstElementIfNeeded(this.$refs.popover__content),this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},focusInitialElementById(){var e,o,n;const t=(o=(e=this.$refs.content)==null?void 0:e.$el)==null?void 0:o.querySelector(this.initialFocusElement);t?t.focus():console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'),t?t.focus():(n=this.$refs.content)==null||n.$el.focus()},onResize(){this.closePopover()},onClickOutside(){var e;if(!this.hideOnClick)return;((e=this.popoverContentEl)==null?void 0:e.querySelector(".d-popover__anchor--opened"))||this.closePopover()},onKeydown(t){t.key==="Tab"&&this.modal&&this.focusTrappedTabPress(t,this.popoverContentEl),t.key==="Escape"&&this.closePopover()},async setPopoverContentAnchorWidth(){var t;await this.$nextTick(),this.popoverContentEl.style.width=`${(t=this.anchorEl)==null?void 0:t.clientWidth}px`},focusFirstElementIfNeeded(t){var o,n;this._getFocusableElements(t,!0).length!==0?this.focusFirstElement(t):this.showCloseButton?(o=this.$refs.popover__header)==null||o.focusCloseButton():(n=this.$refs.content)==null||n.$el.focus()},getReferenceClientRect(t){var a,p;const e=(a=this.anchorEl)==null?void 0:a.getBoundingClientRect();if(this.appendTo!=="root"||t)return e;const o=(p=this.anchorEl)==null?void 0:p.ownerDocument,n=(o==null?void 0:o.defaultView)||(o==null?void 0:o.parentWindow),l=n==null?void 0:n.frameElement;if(!l)return e;const s=l.getBoundingClientRect();return{width:e==null?void 0:e.width,height:e==null?void 0:e.height,top:(s==null?void 0:s.top)+(e==null?void 0:e.top),left:(s==null?void 0:s.left)+(e==null?void 0:e.left),right:(s==null?void 0:s.right)+(e==null?void 0:e.right),bottom:(s==null?void 0:s.bottom)+(e==null?void 0:e.bottom)}},initTippyInstance(){var o,n;let t=null,e=!1;switch(this.appendTo){case"body":t=(n=(o=this.anchorEl)==null?void 0:o.getRootNode())==null?void 0:n.querySelector("body");break;case"root":try{t=window.parent.document.body}catch(l){console.error("Could not attach the popover to iframe parent window: ",l),t="parent",e=!0}break;default:t=this.appendTo;break}this.tip=d.createTippyPopover(this.anchorEl,{popperOptions:this.popperOptions(),contentElement:this.popoverContentEl,placement:this.placement,offset:this.offset,sticky:this.sticky,appendTo:t,interactive:!0,trigger:"manual",getReferenceClientRect:()=>this.getReferenceClientRect(e),hideOnClick:!1,zIndex:this.modal?650:this.calculateAnchorZindex(),onClickOutside:this.onClickOutside,onShow:this.onShow})},onMouseEnter(){this.$emit("mouseenter-popover")},onMouseLeave(){this.$emit("mouseleave-popover")},onMouseEnterAnchor(){this.$emit("mouseenter-popover-anchor")},onMouseLeaveAnchor(){this.$emit("mouseleave-popover-anchor")},hasFooter(){var t,e;return this.$slots.footerContent||((e=(t=this.$scopedSlots).footerContent)==null?void 0:e.call(t))}}};var E=function(){var e=this,o=e._self._c;return o("div",[e.modal&&e.isOpen?o("portal",[o("div",{staticClass:"d-modal--transparent",on:{click:function(n){n.preventDefault(),n.stopPropagation()}}})]):e._e(),o(e.elementType,e._g({ref:"popover",tag:"component",class:["d-popover",{"d-popover__anchor--opened":e.isOpen}],attrs:{"data-qa":"dt-popover-container"}},e.$listeners),[o("div",{ref:"anchor",attrs:{id:!e.ariaLabelledby&&e.labelledBy,"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-anchor`:"dt-popover-anchor",tabindex:e.openOnContext?0:void 0},on:{"!click":function(n){return e.defaultToggleOpen.apply(null,arguments)},contextmenu:e.onContext,keydown:[function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"up",38,n.key,["Up","ArrowUp"])?null:(n.preventDefault(),e.onArrowKeyPress.apply(null,arguments))},function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"down",40,n.key,["Down","ArrowDown"])?null:(n.preventDefault(),e.onArrowKeyPress.apply(null,arguments))}],"!keydown":function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"escape",void 0,n.key,void 0)?null:e.closePopover.apply(null,arguments)},mouseenter:e.onMouseEnter,mouseleave:e.onMouseLeave}},[e._t("anchor",null,{attrs:{"aria-expanded":e.isOpen.toString(),"aria-controls":e.id,"aria-haspopup":e.role}})],2),o("dt-lazy-show",e._g({ref:"content",class:["d-popover__dialog",{"d-popover__dialog--modal":e.modal},e.dialogClass],style:{"max-height":e.calculatedMaxHeight,"max-width":e.maxWidth},attrs:{id:e.id,role:e.role,"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}__dialog`:"dt-popover","aria-hidden":`${!e.isOpen}`,"aria-labelledby":e.labelledBy,"aria-label":e.ariaLabel,"aria-modal":`${!e.modal}`,transition:e.transition,show:e.isOpen,tabindex:e.contentTabindex,appear:""},on:{mouseenter:e.onMouseEnterAnchor,mouseleave:e.onMouseLeaveAnchor}},e.popoverListeners),[e.$slots.headerContent||e.showCloseButton?o("popover-header-footer",{ref:"popover__header",class:e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding],attrs:{"content-class":e.headerClass,type:"header","show-close-button":e.showCloseButton,"close-button-props":e.closeButtonProps},on:{close:e.closePopover},scopedSlots:e._u([{key:"content",fn:function(){return[e._t("headerContent",null,{close:e.closePopover})]},proxy:!0}],null,!0)}):e._e(),o("div",{ref:"popover__content",class:["d-popover__content",e.POPOVER_PADDING_CLASSES[e.padding],e.contentClass],attrs:{"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-content`:"dt-popover-content"}},[e._t("content",null,{close:e.closePopover})],2),e.hasFooter()?o("popover-header-footer",{ref:"popover__footer",class:e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding],attrs:{type:"footer","content-class":e.footerClass},scopedSlots:e._u([{key:"content",fn:function(){return[e._t("footerContent",null,{close:e.closePopover})]},proxy:!0}],null,!0)}):e._e(),e.showVisuallyHiddenClose?o("sr-only-close-button",{attrs:{"visually-hidden-close-label":e.visuallyHiddenCloseLabel},on:{close:e.closePopover}}):e._e()],1)],1)],1)},g=[],O=y.n(_,E,g);const P=O.exports;exports.default=P;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./popover-constants.cjs"),r=require("../../common/utils/index.cjs"),h=require("../../node_modules/@linusborg/vue-simple-portal.cjs"),u=require("../../common/mixins/modal.cjs"),d=require("./tippy-utils.cjs"),c=require("./popover-header-footer.cjs"),f=require("../../shared/sr_only_close_button.cjs"),m=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),y=require("../lazy-show/lazy-show.cjs"),v={name:"DtPopover",components:{SrOnlyCloseButton:f.default,DtLazyShow:y.default,PopoverHeaderFooter:c.default,Portal:h.Portal},mixins:[u.default],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:t=>s.POPOVER_ROLES.includes(t)},ariaLabelledby:{type:String,default:null},ariaLabel:{type:String,default:null},padding:{type:String,default:"large",validator:t=>Object.keys(s.POPOVER_PADDING_CLASSES).some(e=>e===t)},contentClass:{type:[String,Array,Object],default:""},contentWidth:{type:String,default:"",validator:t=>s.POPOVER_CONTENT_WIDTHS.includes(t)},contentTabindex:{type:Number||null,default:-1},externalAnchor:{type:String,default:""},id:{type:String,default(){return r.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:t=>s.POPOVER_STICKY_VALUES.includes(t)},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:t=>s.POPOVER_INITIAL_FOCUS_STRINGS.includes(t)||t instanceof HTMLElement||t.startsWith("#")},openWithArrowKeys:{type:Boolean,default:!1},appendTo:{type:[HTMLElement,String],default:"body",validator:t=>s.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement}},emits:["opened","update:open","mouseenter-popover","mouseleave-popover","mouseenter-popover-anchor","mouseleave-popover-anchor"],data(){return{POPOVER_PADDING_CLASSES:s.POPOVER_PADDING_CLASSES,POPOVER_HEADER_FOOTER_PADDING_CLASSES:s.POPOVER_HEADER_FOOTER_PADDING_CLASSES,intersectionObserver:null,isOutsideViewport:!1,isOpen:!1,anchorEl:null,popoverContentEl:null}},computed:{popoverListeners(){return{...this.$listeners,keydown:t=>{this.onKeydown(t),this.$emit("keydown",t)},"after-leave":t=>{this.onLeaveTransitionComplete()},"after-enter":t=>{this.onEnterTransitionComplete()}}},calculatedMaxHeight(){return this.isOutsideViewport&&this.modal?"calc(100vh - var(--dt-space-300))":this.maxHeight},labelledBy(){return this.ariaLabelledby||!this.ariaLabel&&r.getUniqueString("DtPopover__anchor")}},watch:{$props:{immediate:!0,deep:!0,handler(){this.validateProps()}},modal(t){var e;(e=this.tip)==null||e.setProps({zIndex:t?650:this.calculateAnchorZindex()})},offset(t){var e;(e=this.tip)==null||e.setProps({offset:t})},sticky(t){var e;(e=this.tip)==null||e.setProps({sticky:t})},fallbackPlacements(){var t;(t=this.tip)==null||t.setProps({popperOptions:this.popperOptions()})},tether(){var t;(t=this.tip)==null||t.setProps({popperOptions:this.popperOptions()})},placement(t){var e;(e=this.tip)==null||e.setProps({placement:t})},open:{handler:function(t){t!==null&&(this.isOpen=t)},immediate:!0},isOpen(t,e){t?(this.initTippyInstance(),this.tip.show()):!t&&e!==t&&(this.removeEventListeners(),this.tip.hide())}},mounted(){var e;r.warnIfUnmounted(this.$el,this.$options.name);const t=this.externalAnchor?this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`):null;this.anchorEl=t??this.$refs.anchor.children[0],this.popoverContentEl=(e=this.$refs.content)==null?void 0:e.$el,this.isOpen&&(this.initTippyInstance(),this.tip.show()),this.intersectionObserver=new IntersectionObserver(this.hasIntersectedViewport),this.intersectionObserver.observe(this.popoverContentEl)},beforeDestroy(){var t,e;(t=this.tip)==null||t.destroy(),(e=this.intersectionObserver)==null||e.disconnect(),this.removeReferences(),this.removeEventListeners()},methods:{hasIntersectedViewport(t){var n;const e=(n=t==null?void 0:t[0])==null?void 0:n.target;if(!e)return;const o=r.isOutOfViewPort(e);this.isOutsideViewport=o.bottom||o.top},popperOptions(){return d.getPopperOptions({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 t;return this.$el.getRootNode().querySelector('.d-modal[aria-hidden="false"], .d-modal--transparent[aria-hidden="false"]')||(t=this.anchorEl)!=null&&t.closest(".d-zi-drawer")?650:300},defaultToggleOpen(t){var e,o;this.openOnContext||(this.open??((e=this.anchorEl)!=null&&e.contains(t.target)&&!((o=this.anchorEl)!=null&&o.disabled)&&this.toggleOpen()))},async onContext(t){this.openOnContext&&(t.preventDefault(),this.isOpen=!0,await this.$nextTick(),this.tip.setProps({placement:"right-start",getReferenceClientRect:()=>({width:0,height:0,top:t.clientY,bottom:t.clientY,left:t.clientX,right:t.clientX})}))},toggleOpen(){this.isOpen=!this.isOpen},onArrowKeyPress(t){var e;this.open===null&&this.openWithArrowKeys&&(e=this.anchorEl)!=null&&e.contains(t.target)&&(this.isOpen||(this.isOpen=!0))},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 t,e;if(this.modal){const o=(t=this.anchorEl)==null?void 0:t.closest("body, .tippy-box");if(!o)return;((e=o.tagName)==null?void 0:e.toLowerCase())==="body"?(r.disableRootScrolling(this.anchorEl.getRootNode().host),this.tip.setProps({offset:this.offset})):o.classList.add("d-zi-popover")}},enableScrolling(){var e,o;const t=(e=this.anchorEl)==null?void 0:e.closest("body, .tippy-box");t&&(((o=t.tagName)==null?void 0:o.toLowerCase())==="body"?(r.enableRootScrolling(this.anchorEl.getRootNode().host),this.tip.setProps({offset:this.offset})):t.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 t;this.modal&&(await this.focusFirstElement(this.$refs.anchor),await this.$nextTick(),this.enableScrolling()),(t=this.tip)==null||t.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 t,e;this.initialFocusElement==="dialog"&&((e=(t=this.$refs.content)==null?void 0:t.$el)==null||e.focus()),this.initialFocusElement.startsWith("#")&&this.focusInitialElementById(),this.initialFocusElement==="first"&&this.focusFirstElementIfNeeded(this.$refs.popover__content),this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},focusInitialElementById(){var e,o,n;const t=(o=(e=this.$refs.content)==null?void 0:e.$el)==null?void 0:o.querySelector(this.initialFocusElement);t?t.focus():console.warn('Could not find the element specified in dt-popover prop "initialFocusElement". Defaulting to focusing the dialog.'),t?t.focus():(n=this.$refs.content)==null||n.$el.focus()},onResize(){this.closePopover()},onClickOutside(){var e;if(!this.hideOnClick)return;((e=this.popoverContentEl)==null?void 0:e.querySelector(".d-popover__anchor--opened"))||this.closePopover()},onKeydown(t){t.key==="Tab"&&this.modal&&this.focusTrappedTabPress(t,this.popoverContentEl),t.key==="Escape"&&this.closePopover()},async setPopoverContentAnchorWidth(){var t;await this.$nextTick(),this.popoverContentEl.style.width=`${(t=this.anchorEl)==null?void 0:t.clientWidth}px`},focusFirstElementIfNeeded(t){var o,n;this._getFocusableElements(t,!0).length!==0?this.focusFirstElement(t):this.showCloseButton?(o=this.$refs.popover__header)==null||o.focusCloseButton():(n=this.$refs.content)==null||n.$el.focus()},getReferenceClientRect(t){var a,p;const e=(a=this.anchorEl)==null?void 0:a.getBoundingClientRect();if(this.appendTo!=="root"||t)return e;const o=(p=this.anchorEl)==null?void 0:p.ownerDocument,n=(o==null?void 0:o.defaultView)||(o==null?void 0:o.parentWindow),l=n==null?void 0:n.frameElement;if(!l)return e;const i=l.getBoundingClientRect();return{width:e==null?void 0:e.width,height:e==null?void 0:e.height,top:(i==null?void 0:i.top)+(e==null?void 0:e.top),left:(i==null?void 0:i.left)+(e==null?void 0:e.left),right:(i==null?void 0:i.right)+(e==null?void 0:e.right),bottom:(i==null?void 0:i.bottom)+(e==null?void 0:e.bottom)}},initTippyInstance(){var o,n;let t=null,e=!1;switch(this.appendTo){case"body":t=(n=(o=this.anchorEl)==null?void 0:o.getRootNode())==null?void 0:n.querySelector("body");break;case"root":try{t=window.parent.document.body}catch(l){console.error("Could not attach the popover to iframe parent window: ",l),t="parent",e=!0}break;default:t=this.appendTo;break}this.tip=d.createTippyPopover(this.anchorEl,{popperOptions:this.popperOptions(),contentElement:this.popoverContentEl,placement:this.placement,offset:this.offset,sticky:this.sticky,appendTo:t,interactive:!0,trigger:"manual",getReferenceClientRect:()=>this.getReferenceClientRect(e),hideOnClick:!1,zIndex:this.modal?650:this.calculateAnchorZindex(),onClickOutside:this.onClickOutside,onShow:this.onShow})},onMouseEnter(){this.$emit("mouseenter-popover")},onMouseLeave(){this.$emit("mouseleave-popover")},onMouseEnterAnchor(){this.$emit("mouseenter-popover-anchor")},onMouseLeaveAnchor(){this.$emit("mouseleave-popover-anchor")},hasFooter(){var t,e;return this.$slots.footerContent||((e=(t=this.$scopedSlots).footerContent)==null?void 0:e.call(t))}}};var _=function(){var e=this,o=e._self._c;return o("div",[e.modal&&e.isOpen?o("portal",[o("div",{staticClass:"d-modal--transparent",on:{click:function(n){n.preventDefault(),n.stopPropagation()}}})]):e._e(),o(e.elementType,e._g({ref:"popover",tag:"component",class:["d-popover",{"d-popover__anchor--opened":e.isOpen}],attrs:{"data-qa":"dt-popover-container"}},e.$listeners),[o("div",{ref:"anchor",attrs:{id:!e.ariaLabelledby&&e.labelledBy,"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-anchor`:"dt-popover-anchor",tabindex:e.openOnContext?0:void 0},on:{"!click":function(n){return e.defaultToggleOpen.apply(null,arguments)},contextmenu:e.onContext,keydown:[function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"up",38,n.key,["Up","ArrowUp"])?null:(n.preventDefault(),e.onArrowKeyPress.apply(null,arguments))},function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"down",40,n.key,["Down","ArrowDown"])?null:(n.preventDefault(),e.onArrowKeyPress.apply(null,arguments))}],"!keydown":function(n){return!n.type.indexOf("key")&&e._k(n.keyCode,"escape",void 0,n.key,void 0)?null:e.closePopover.apply(null,arguments)},mouseenter:e.onMouseEnter,mouseleave:e.onMouseLeave}},[e._t("anchor",null,{attrs:{"aria-expanded":e.isOpen.toString(),"aria-controls":e.id,"aria-haspopup":e.role}})],2),o("dt-lazy-show",e._g({ref:"content",class:["d-popover__dialog",{"d-popover__dialog--modal":e.modal},e.dialogClass],style:{"max-height":e.calculatedMaxHeight,"max-width":e.maxWidth},attrs:{id:e.id,role:e.role,"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}__dialog`:"dt-popover","aria-hidden":`${!e.isOpen}`,"aria-labelledby":e.labelledBy,"aria-label":e.ariaLabel,"aria-modal":`${!e.modal}`,transition:e.transition,show:e.isOpen,tabindex:e.contentTabindex,appear:""},on:{mouseenter:e.onMouseEnterAnchor,mouseleave:e.onMouseLeaveAnchor}},e.popoverListeners),[e.$slots.headerContent||e.showCloseButton?o("popover-header-footer",{ref:"popover__header",class:e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding],attrs:{"content-class":e.headerClass,type:"header","show-close-button":e.showCloseButton},on:{close:e.closePopover},scopedSlots:e._u([{key:"content",fn:function(){return[e._t("headerContent",null,{close:e.closePopover})]},proxy:!0}],null,!0)}):e._e(),o("div",{ref:"popover__content",class:["d-popover__content",e.POPOVER_PADDING_CLASSES[e.padding],e.contentClass],attrs:{"data-qa":e.$attrs["data-qa"]?`${e.$attrs["data-qa"]}-content`:"dt-popover-content"}},[e._t("content",null,{close:e.closePopover})],2),e.hasFooter()?o("popover-header-footer",{ref:"popover__footer",class:e.POPOVER_HEADER_FOOTER_PADDING_CLASSES[e.padding],attrs:{type:"footer","content-class":e.footerClass},scopedSlots:e._u([{key:"content",fn:function(){return[e._t("footerContent",null,{close:e.closePopover})]},proxy:!0}],null,!0)}):e._e(),e.showCloseButton?e._e():o("sr-only-close-button",{on:{close:e.closePopover}})],1)],1)],1)},E=[],g=m.n(v,_,E);const O=g.exports;exports.default=O;
 //# sourceMappingURL=popover.cjs.map

package/dist/vue2/lib/popover/popover.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"popover.cjs","sources":["../../../components/popover/popover.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <div>\n    <portal v-if=\"modal && isOpen\">\n      <div\n        class=\"d-modal--transparent\"\n        @click.prevent.stop\n      />\n    </portal>\n    <component\n      :is=\"elementType\"\n      ref=\"popover\"\n      :class=\"['d-popover', { 'd-popover__anchor--opened': isOpen }]\"\n      data-qa=\"dt-popover-container\"\n      v-on=\"$listeners\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"!ariaLabelledby && labelledBy\"\n        ref=\"anchor\"\n        :data-qa=\"$attrs['data-qa'] ? `${$attrs['data-qa']}-anchor` : 'dt-popover-anchor'\"\n        :tabindex=\"openOnContext ? 0 : undefined\"\n        @click.capture=\"defaultToggleOpen\"\n        @contextmenu=\"onContext\"\n        @keydown.up.prevent=\"onArrowKeyPress\"\n        @keydown.down.prevent=\"onArrowKeyPress\"\n        @keydown.escape.capture=\"closePopover\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n      >\n        <!-- @slot Anchor element that activates the popover. Usually a button. -->\n        <slot\n          name=\"anchor\"\n          :attrs=\"{\n            'aria-expanded': isOpen.toString(),\n            'aria-controls': id,\n            'aria-haspopup': role,\n          }\"\n        />\n      </div>\n      <dt-lazy-show\n        :id=\"id\"\n        ref=\"content\"\n        :role=\"role\"\n        :data-qa=\"$attrs['data-qa'] ? `${$attrs['data-qa']}__dialog` : 'dt-popover'\"\n        :aria-hidden=\"`${!isOpen}`\"\n        :aria-labelledby=\"labelledBy\"\n        :aria-label=\"ariaLabel\"\n        :aria-modal=\"`${!modal}`\"\n        :transition=\"transition\"\n        :show=\"isOpen\"\n        :class=\"['d-popover__dialog', { 'd-popover__dialog--modal': modal }, dialogClass]\"\n        :style=\"{\n          'max-height': calculatedMaxHeight,\n          'max-width': maxWidth,\n        }\"\n        :tabindex=\"contentTabindex\"\n        appear\n        v-on=\"popoverListeners\"\n        @mouseenter=\"onMouseEnterAnchor\"\n        @mouseleave=\"onMouseLeaveAnchor\"\n      >\n        <popover-header-footer\n          v-if=\"$slots.headerContent || showCloseButton\"\n          ref=\"popover__header\"\n          :class=\"POPOVER_HEADER_FOOTER_PADDING_CLASSES[padding]\"\n          :content-class=\"headerClass\"\n          type=\"header\"\n          :show-close-button=\"showCloseButton\"\n          :close-button-props=\"closeButtonProps\"\n          @close=\"closePopover\"\n        >\n          <template #content>\n            <!-- @slot Slot for popover header content -->\n            <slot\n              name=\"headerContent\"\n              :close=\"closePopover\"\n            />\n          </template>\n        </popover-header-footer>\n        <div\n          ref=\"popover__content\"\n          :data-qa=\"$attrs['data-qa'] ? `${$attrs['data-qa']}-content` : 'dt-popover-content'\"\n          :class=\"[\n            'd-popover__content',\n            POPOVER_PADDING_CLASSES[padding],\n            contentClass,\n          ]\"\n        >\n          <!-- @slot Slot for the content that is displayed in the popover when it is open. -->\n          <slot\n            name=\"content\"\n            :close=\"closePopover\"\n          />\n        </div>\n        <popover-header-footer\n          v-if=\"hasFooter()\"\n          ref=\"popover__footer\"\n          type=\"footer\"\n          :class=\"POPOVER_HEADER_FOOTER_PADDING_CLASSES[padding]\"\n          :content-class=\"footerClass\"\n        >\n          <template #content>\n            <!-- @slot Slot for the footer content. -->\n            <slot\n              name=\"footerContent\"\n              :close=\"closePopover\"\n            />\n          </template>\n        </popover-header-footer>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"closePopover\"\n        />\n      </dt-lazy-show>\n    </component>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  POPOVER_APPEND_TO_VALUES,\n  POPOVER_CONTENT_WIDTHS,\n  POPOVER_HEADER_FOOTER_PADDING_CLASSES,\n  POPOVER_INITIAL_FOCUS_STRINGS,\n  POPOVER_PADDING_CLASSES,\n  POPOVER_ROLES,\n  POPOVER_STICKY_VALUES,\n} from './popover_constants';\nimport { getUniqueString, isOutOfViewPort, warnIfUnmounted, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { Portal } from '@linusborg/vue-simple-portal';\nimport ModalMixin from '@/common/mixins/modal';\nimport { createTippyPopover, getPopperOptions } from './tippy_utils';\nimport PopoverHeaderFooter from './popover_header_footer.vue';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\n/**\n * A Popover displays a content overlay when its anchor element is activated.\n * @see https://dialtone.dialpad.com/components/popover.html\n */\nexport default {\n  name: 'DtPopover',\n\n  /********************\n   * CHILD COMPONENTS *\n   ********************/\n  components: {\n    SrOnlyCloseButton,\n    DtLazyShow,\n    PopoverHeaderFooter,\n    Portal,\n  },\n\n  mixins: [ModalMixin, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Opens the popover on right click (context menu). If you set this value to `true`,\n     * the default trigger behavior will be disabled.\n     * @values true, false\n     */\n    openOnContext: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * ARIA role for the content of the popover. Defaults to \"dialog\".\n     * <a class=\"d-link\" href=\"https://www.w3.org/TR/wai-aria/#aria-haspopup\" target=\"_blank\">aria-haspopup</a>\n     */\n    role: {\n      type: String,\n      default: 'dialog',\n      validator: (role) => {\n        return POPOVER_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * ID of the element that serves as the label for the popover content.\n     * Defaults to the \"anchor\" element; this exists to provide a different\n     * ID of the label element if, for example, the anchor slot contains\n     * other items that do not serve as a label. You should provide this\n     * or ariaLabel, but not both.\n     */\n    ariaLabelledby: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Descriptive label for the popover content. You should provide this\n     * or ariaLabelledby, but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * A set of props to be passed into the popover's header close button.\n     * Requires an 'ariaLabel' property, when the header popover is visible\n     */\n    closeButtonProps: {\n      type: Object,\n      default: () => ({}),\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    padding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     * @values null, anchor\n     */\n    contentWidth: {\n      type: String,\n      default: '',\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * Tabindex value for the content. Passing null, no tabindex attribute will be set.\n     */\n    contentTabindex: {\n      type: Number || null,\n      default: -1,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     *  Displaces the content box from its anchor element\n     *  by the specified number of pixels.\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * Determines if the popover hides upon clicking the\n     * anchor or outside the content box.\n     * @values true, false\n     */\n    hideOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines modal state. If enabled popover has a modal overlay\n     * preventing interaction with elements below it, but it is invisible.\n     * @values true, false\n     */\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\".\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * If set to false the dialog will display over top of the anchor when there is insufficient space.\n     * If set to true it will never move from its position relative to the anchor and will clip instead.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * @values true, false\n     */\n    tether: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * If the popover sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: false,\n      validator: (sticky) => {\n        return POPOVER_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional class name for the header content wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the footer content wrapper element.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element.\n     */\n    dialogClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * The element that is focused when the popover is opened. This can be an\n     * HTMLElement within the popover, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     * @values none, dialog, first\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return POPOVER_INITIAL_FOCUS_STRINGS.includes(initialFocusElement) ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n\n    /**\n     * If the popover should open pressing up or down arrow key on the anchor element.\n     * This can be set when not passing open prop.\n     * @values true, false\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * 'root' will try append to the iFrame's parent body if it is contained in an iFrame\n     * and has permissions to access it, else, it'd default to 'parent'.\n     * @values 'body', 'parent', 'root', HTMLElement\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n\n    /**\n     * Emitted to sync value with parent\n     *\n     * @event update:opened\n     * @type {Boolean | Array}\n     */\n    'update:open',\n\n    /**\n     * Emitted when the mouse enters the popover\n     *\n     * @event mouseenter-popover\n     */\n    'mouseenter-popover',\n\n    /**\n     * Emitted when the mouse leaves the popover\n     *\n     * @event mouseleave-popover\n     */\n    'mouseleave-popover',\n\n    /**\n     * Emitted when the mouse enters the popover anchor\n     *\n     * @event mouseenter-popover-anchor\n     */\n    'mouseenter-popover-anchor',\n\n    /**\n     * Emitted when the mouse leaves the popover anchor\n     *\n     * @event mouseleave-popover-anchor\n     */\n    'mouseleave-popover-anchor',\n  ],\n\n  data () {\n    return {\n      POPOVER_PADDING_CLASSES,\n      POPOVER_HEADER_FOOTER_PADDING_CLASSES,\n      intersectionObserver: null,\n      isOutsideViewport: false,\n      isOpen: false,\n      anchorEl: null,\n      popoverContentEl: null,\n    };\n  },\n\n  computed: {\n    popoverListeners () {\n      return {\n        ...this.$listeners,\n\n        keydown: event => {\n          this.onKeydown(event);\n          this.$emit('keydown', event);\n        },\n\n        'after-leave': event => {\n          this.onLeaveTransitionComplete();\n        },\n\n        'after-enter': event => {\n          this.onEnterTransitionComplete();\n        },\n      };\n    },\n\n    calculatedMaxHeight () {\n      if (this.isOutsideViewport && this.modal) {\n        return `calc(100vh - var(--dt-space-300))`;\n      }\n      return this.maxHeight;\n    },\n\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor.\n      return this.ariaLabelledby || (!this.ariaLabel && getUniqueString('DtPopover__anchor'));\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n\n    modal (modal) {\n      this.tip?.setProps({\n        zIndex: modal ? 650 : this.calculateAnchorZindex(),\n      });\n    },\n\n    offset (offset) {\n      this.tip?.setProps({\n        offset,\n      });\n    },\n\n    sticky (sticky) {\n      this.tip?.setProps({\n        sticky,\n      });\n    },\n\n    fallbackPlacements () {\n      this.tip?.setProps({\n        popperOptions: this.popperOptions(),\n      });\n    },\n\n    tether () {\n      this.tip?.setProps({\n        popperOptions: this.popperOptions(),\n      });\n    },\n\n    placement (placement) {\n      this.tip?.setProps({\n        placement,\n      });\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isOpen (isOpen, isPrev) {\n      if (isOpen) {\n        this.initTippyInstance();\n        this.tip.show();\n      } else if (!isOpen && isPrev !== isOpen) {\n        this.removeEventListeners();\n        this.tip.hide();\n      }\n    },\n  },\n\n  mounted () {\n    warnIfUnmounted(this.$el, this.$options.name);\n\n    const externalAnchorEl = this.externalAnchor\n      ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`)\n      : null;\n    this.anchorEl = externalAnchorEl ?? this.$refs.anchor.children[0];\n    this.popoverContentEl = this.$refs.content?.$el;\n\n    if (this.isOpen) {\n      this.initTippyInstance();\n      this.tip.show();\n    }\n\n    // rootMargin here must be greater than the margin of the height we are setting in calculatedMaxHeight which\n    // currently is var(--dt-space-300) (4px). If not the intersectionObserver will continually trigger in an infinite\n    // loop.\n    // threshold 1.0 makes this trigger every time the dialog \"touches\" the edge of the viewport.\n    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport);\n    this.intersectionObserver.observe(this.popoverContentEl);\n  },\n\n  beforeDestroy () {\n    this.tip?.destroy();\n    this.intersectionObserver?.disconnect();\n    this.removeReferences();\n    this.removeEventListeners();\n  },\n\n  /******************\n   *     METHODS    *\n   ******************/\n  methods: {\n    hasIntersectedViewport (entries) {\n      const dialog = entries?.[0]?.target;\n      if (!dialog) return;\n      const isOut = isOutOfViewPort(dialog);\n      this.isOutsideViewport = isOut.bottom || isOut.top;\n    },\n\n    popperOptions () {\n      return getPopperOptions({\n        fallbackPlacements: this.fallbackPlacements,\n        tether: this.tether,\n        hasHideModifierEnabled: true,\n      });\n    },\n\n    validateProps () {\n      if (this.modal && this.initialFocusElement === 'none') {\n        console.error('If the popover is modal you must set the ' +\n        'initialFocusElement prop. Possible values: \"dialog\", \"first\", HTMLElement');\n      }\n    },\n\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at popover z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 650 when\n        // anchor of popover is within a drawer.\n        this.anchorEl?.closest('.d-zi-drawer')) {\n        return 650;\n      } else {\n        return 300;\n      }\n    },\n\n    defaultToggleOpen (e) {\n      if (this.openOnContext) { return; }\n\n      // Only use default toggle behaviour if the user has not set the open prop.\n      // Check that the anchor element specifically was clicked.\n      this.open ?? (this.anchorEl?.contains(e.target) && !this.anchorEl?.disabled && this.toggleOpen());\n    },\n\n    async onContext (event) {\n      if (!this.openOnContext) { return; }\n\n      event.preventDefault();\n\n      this.isOpen = true;\n      await this.$nextTick();\n      this.tip.setProps({\n        placement: 'right-start',\n        getReferenceClientRect: () => ({\n          width: 0,\n          height: 0,\n          top: event.clientY,\n          bottom: event.clientY,\n          left: event.clientX,\n          right: event.clientX,\n        }),\n      });\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    onArrowKeyPress (e) {\n      if (this.open !== null) { return; }\n\n      if (this.openWithArrowKeys && this.anchorEl?.contains(e.target)) {\n        if (!this.isOpen) {\n          this.isOpen = true;\n        }\n      }\n    },\n\n    addEventListeners () {\n      window.addEventListener('dt-popover-close', this.closePopover);\n      // align popover content width when contentWidth is 'anchor'\n      if (this.contentWidth === 'anchor') {\n        window.addEventListener('resize', this.onResize);\n      }\n    },\n\n    removeEventListeners () {\n      window.removeEventListener('dt-popover-close', this.closePopover);\n      if (this.contentWidth === 'anchor') {\n        window.removeEventListener('resize', this.onResize);\n      }\n    },\n\n    closePopover () {\n      this.isOpen = false;\n    },\n\n    /**\n     * Prevents scrolling outside of the currently opened modal popover by:\n     *   - when anchor is not within another popover: setting the body to overflow: hidden\n     *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index\n     *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.\n     */\n    preventScrolling () {\n      if (this.modal) {\n        const element = this.anchorEl?.closest('body, .tippy-box');\n        if (!element) return;\n        if (element.tagName?.toLowerCase() === 'body') {\n          disableRootScrolling(this.anchorEl.getRootNode().host);\n          this.tip.setProps({ offset: this.offset });\n        } else {\n          element.classList.add('d-zi-popover');\n        }\n      }\n    },\n\n    /**\n     * Resets the prevent scrolling properties set in preventScrolling() back to normal.\n     */\n    enableScrolling () {\n      const element = this.anchorEl?.closest('body, .tippy-box');\n      if (!element) return;\n      if (element.tagName?.toLowerCase() === 'body') {\n        enableRootScrolling(this.anchorEl.getRootNode().host);\n        this.tip.setProps({ offset: this.offset });\n      } else {\n        element.classList.remove('d-zi-popover');\n      }\n    },\n\n    removeReferences () {\n      this.anchorEl = null;\n      this.popoverContentEl = null;\n      this.tip = null;\n    },\n\n    async onShow () {\n      if (this.contentWidth === 'anchor') {\n        await this.setPopoverContentAnchorWidth();\n      }\n\n      if (this.contentWidth === null) {\n        this.popoverContentEl.style.width = 'auto';\n      }\n\n      this.addEventListeners();\n    },\n\n    async onLeaveTransitionComplete () {\n      if (this.modal) {\n        await this.focusFirstElement(this.$refs.anchor);\n        // await next tick in case the user wants to change focus themselves.\n        await this.$nextTick();\n        this.enableScrolling();\n      }\n      this.tip?.unmount();\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    async onEnterTransitionComplete () {\n      this.focusInitialElement();\n      // await next tick in case the user wants to change focus themselves.\n      await this.$nextTick();\n      this.preventScrolling();\n      this.$emit('opened', true, this.$refs.popover__content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    focusInitialElement () {\n      if (this.initialFocusElement === 'dialog') {\n        this.$refs.content?.$el?.focus();\n      }\n      // find by ID\n      if (this.initialFocusElement.startsWith('#')) {\n        this.focusInitialElementById();\n      }\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElementIfNeeded(this.$refs.popover__content);\n      }\n      if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    focusInitialElementById () {\n      const result = this.$refs.content?.$el?.querySelector(this.initialFocusElement);\n      if (result) {\n        result.focus();\n      } else {\n        console.warn('Could not find the element specified in dt-popover prop \"initialFocusElement\". ' +\n          'Defaulting to focusing the dialog.');\n      }\n      result ? result.focus() : this.$refs.content?.$el.focus();\n    },\n\n    onResize () {\n      this.closePopover();\n    },\n\n    onClickOutside () {\n      if (!this.hideOnClick) return;\n      // If a popover is opened inside of this one, do not hide on click out\n      const innerModals = this.popoverContentEl?.querySelector('.d-popover__anchor--opened');\n      if (!innerModals) {\n        this.closePopover();\n      }\n    },\n\n    onKeydown (e) {\n      if (e.key === 'Tab') {\n        if (this.modal) {\n          this.focusTrappedTabPress(e, this.popoverContentEl);\n        }\n      }\n      if (e.key === 'Escape') {\n        this.closePopover();\n      }\n    },\n\n    async setPopoverContentAnchorWidth () {\n      await this.$nextTick();\n      this.popoverContentEl.style.width = `${this.anchorEl?.clientWidth}px`;\n    },\n\n    focusFirstElementIfNeeded (domEl) {\n      const focusableElements = this._getFocusableElements(domEl, true);\n      if (focusableElements.length !== 0) {\n        this.focusFirstElement(domEl);\n      } else if (this.showCloseButton) {\n        this.$refs.popover__header?.focusCloseButton();\n      } else {\n        // if there are no focusable elements at all focus the dialog itself\n        this.$refs.content?.$el.focus();\n      }\n    },\n\n    /**\n     * Return's the anchor ClientRect object relative to the window.\n     * Refer to: https://atomiks.github.io/tippyjs/v6/all-props/#getreferenceclientrect for more information\n     * @param error\n     */\n    getReferenceClientRect (error) {\n      const anchorReferenceRect = this.anchorEl?.getBoundingClientRect();\n\n      if (this.appendTo !== 'root' || error) return anchorReferenceRect;\n\n      const anchorOwnerDocument = this.anchorEl?.ownerDocument;\n      const anchorParentWindow = anchorOwnerDocument?.defaultView || anchorOwnerDocument?.parentWindow;\n      const anchorIframe = anchorParentWindow?.frameElement;\n\n      if (!anchorIframe) return anchorReferenceRect;\n\n      const iframeReferenceRect = anchorIframe.getBoundingClientRect();\n\n      return {\n        width: anchorReferenceRect?.width,\n        height: anchorReferenceRect?.height,\n        top: iframeReferenceRect?.top + anchorReferenceRect?.top,\n        left: iframeReferenceRect?.left + anchorReferenceRect?.left,\n        right: iframeReferenceRect?.right + anchorReferenceRect?.right,\n        bottom: iframeReferenceRect?.bottom + anchorReferenceRect?.bottom,\n      };\n    },\n\n    initTippyInstance () {\n      let internalAppendTo = null;\n      let iFrameError = false;\n\n      switch (this.appendTo) {\n        case 'body':\n          internalAppendTo = this.anchorEl?.getRootNode()?.querySelector('body');\n          break;\n\n        case 'root':\n          // Try to attach the popover to root document, fallback to parent is fail\n          try {\n            internalAppendTo = window.parent.document.body;\n          } catch (err) {\n            console.error('Could not attach the popover to iframe parent window: ', err);\n            internalAppendTo = 'parent';\n            iFrameError = true;\n          }\n          break;\n\n        default:\n          internalAppendTo = this.appendTo;\n          break;\n      }\n\n      this.tip = createTippyPopover(this.anchorEl, {\n        popperOptions: this.popperOptions(),\n        contentElement: this.popoverContentEl,\n        placement: this.placement,\n        offset: this.offset,\n        sticky: this.sticky,\n        appendTo: internalAppendTo,\n        interactive: true,\n        trigger: 'manual',\n        getReferenceClientRect: () => this.getReferenceClientRect(iFrameError),\n        // We have to manage hideOnClick functionality manually to handle\n        // popover within popover situations.\n        hideOnClick: false,\n        zIndex: this.modal ? 650 : this.calculateAnchorZindex(),\n        onClickOutside: this.onClickOutside,\n        onShow: this.onShow,\n      });\n    },\n\n    onMouseEnter () {\n      this.$emit('mouseenter-popover');\n    },\n\n    onMouseLeave () {\n      this.$emit('mouseleave-popover');\n    },\n\n    onMouseEnterAnchor () {\n      this.$emit('mouseenter-popover-anchor');\n    },\n\n    onMouseLeaveAnchor () {\n      this.$emit('mouseleave-popover-anchor');\n    },\n\n    hasFooter () {\n      return this.$slots.footerContent || this.$scopedSlots.footerContent?.();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SrOnlyCloseButton","DtLazyShow","PopoverHeaderFooter","Portal","ModalMixin","SrOnlyCloseButtonMixin","role","POPOVER_ROLES","padding","POPOVER_PADDING_CLASSES","item","contentWidth","POPOVER_CONTENT_WIDTHS","getUniqueString","sticky","POPOVER_STICKY_VALUES","initialFocusElement","POPOVER_INITIAL_FOCUS_STRINGS","appendTo","POPOVER_APPEND_TO_VALUES","POPOVER_HEADER_FOOTER_PADDING_CLASSES","event","modal","_a","offset","placement","open","isOpen","isPrev","warnIfUnmounted","externalAnchorEl","_b","entries","dialog","isOut","isOutOfViewPort","getPopperOptions","e","element","disableRootScrolling","enableRootScrolling","result","_c","domEl","error","anchorReferenceRect","anchorOwnerDocument","anchorParentWindow","anchorIframe","iframeReferenceRect","internalAppendTo","iFrameError","err","createTippyPopover"],"mappings":"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"}
+{"version":3,"file":"popover.cjs","sources":["../../../components/popover/popover.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <div>\n    <portal v-if=\"modal && isOpen\">\n      <div\n        class=\"d-modal--transparent\"\n        @click.prevent.stop\n      />\n    </portal>\n    <component\n      :is=\"elementType\"\n      ref=\"popover\"\n      :class=\"['d-popover', { 'd-popover__anchor--opened': isOpen }]\"\n      data-qa=\"dt-popover-container\"\n      v-on=\"$listeners\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"!ariaLabelledby && labelledBy\"\n        ref=\"anchor\"\n        :data-qa=\"$attrs['data-qa'] ? `${$attrs['data-qa']}-anchor` : 'dt-popover-anchor'\"\n        :tabindex=\"openOnContext ? 0 : undefined\"\n        @click.capture=\"defaultToggleOpen\"\n        @contextmenu=\"onContext\"\n        @keydown.up.prevent=\"onArrowKeyPress\"\n        @keydown.down.prevent=\"onArrowKeyPress\"\n        @keydown.escape.capture=\"closePopover\"\n        @mouseenter=\"onMouseEnter\"\n        @mouseleave=\"onMouseLeave\"\n      >\n        <!-- @slot Anchor element that activates the popover. Usually a button. -->\n        <slot\n          name=\"anchor\"\n          :attrs=\"{\n            'aria-expanded': isOpen.toString(),\n            'aria-controls': id,\n            'aria-haspopup': role,\n          }\"\n        />\n      </div>\n      <dt-lazy-show\n        :id=\"id\"\n        ref=\"content\"\n        :role=\"role\"\n        :data-qa=\"$attrs['data-qa'] ? `${$attrs['data-qa']}__dialog` : 'dt-popover'\"\n        :aria-hidden=\"`${!isOpen}`\"\n        :aria-labelledby=\"labelledBy\"\n        :aria-label=\"ariaLabel\"\n        :aria-modal=\"`${!modal}`\"\n        :transition=\"transition\"\n        :show=\"isOpen\"\n        :class=\"['d-popover__dialog', { 'd-popover__dialog--modal': modal }, dialogClass]\"\n        :style=\"{\n          'max-height': calculatedMaxHeight,\n          'max-width': maxWidth,\n        }\"\n        :tabindex=\"contentTabindex\"\n        appear\n        v-on=\"popoverListeners\"\n        @mouseenter=\"onMouseEnterAnchor\"\n        @mouseleave=\"onMouseLeaveAnchor\"\n      >\n        <popover-header-footer\n          v-if=\"$slots.headerContent || showCloseButton\"\n          ref=\"popover__header\"\n          :class=\"POPOVER_HEADER_FOOTER_PADDING_CLASSES[padding]\"\n          :content-class=\"headerClass\"\n          type=\"header\"\n          :show-close-button=\"showCloseButton\"\n          @close=\"closePopover\"\n        >\n          <template #content>\n            <!-- @slot Slot for popover header content -->\n            <slot\n              name=\"headerContent\"\n              :close=\"closePopover\"\n            />\n          </template>\n        </popover-header-footer>\n        <div\n          ref=\"popover__content\"\n          :data-qa=\"$attrs['data-qa'] ? `${$attrs['data-qa']}-content` : 'dt-popover-content'\"\n          :class=\"[\n            'd-popover__content',\n            POPOVER_PADDING_CLASSES[padding],\n            contentClass,\n          ]\"\n        >\n          <!-- @slot Slot for the content that is displayed in the popover when it is open. -->\n          <slot\n            name=\"content\"\n            :close=\"closePopover\"\n          />\n        </div>\n        <popover-header-footer\n          v-if=\"hasFooter()\"\n          ref=\"popover__footer\"\n          type=\"footer\"\n          :class=\"POPOVER_HEADER_FOOTER_PADDING_CLASSES[padding]\"\n          :content-class=\"footerClass\"\n        >\n          <template #content>\n            <!-- @slot Slot for the footer content. -->\n            <slot\n              name=\"footerContent\"\n              :close=\"closePopover\"\n            />\n          </template>\n        </popover-header-footer>\n        <sr-only-close-button\n          v-if=\"!showCloseButton\"\n          @close=\"closePopover\"\n        />\n      </dt-lazy-show>\n    </component>\n  </div>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport {\n  POPOVER_APPEND_TO_VALUES,\n  POPOVER_CONTENT_WIDTHS,\n  POPOVER_HEADER_FOOTER_PADDING_CLASSES,\n  POPOVER_INITIAL_FOCUS_STRINGS,\n  POPOVER_PADDING_CLASSES,\n  POPOVER_ROLES,\n  POPOVER_STICKY_VALUES,\n} from './popover_constants';\nimport { getUniqueString, isOutOfViewPort, warnIfUnmounted, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { Portal } from '@linusborg/vue-simple-portal';\nimport ModalMixin from '@/common/mixins/modal';\nimport { createTippyPopover, getPopperOptions } from './tippy_utils';\nimport PopoverHeaderFooter from './popover_header_footer.vue';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\n\n/**\n * A Popover displays a content overlay when its anchor element is activated.\n * @see https://dialtone.dialpad.com/components/popover.html\n */\nexport default {\n  name: 'DtPopover',\n\n  /********************\n   * CHILD COMPONENTS *\n   ********************/\n  components: {\n    SrOnlyCloseButton,\n    DtLazyShow,\n    PopoverHeaderFooter,\n    Portal,\n  },\n\n  mixins: [ModalMixin],\n\n  props: {\n    /**\n     * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Opens the popover on right click (context menu). If you set this value to `true`,\n     * the default trigger behavior will be disabled.\n     * @values true, false\n     */\n    openOnContext: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n\n    /**\n     * ARIA role for the content of the popover. Defaults to \"dialog\".\n     * <a class=\"d-link\" href=\"https://www.w3.org/TR/wai-aria/#aria-haspopup\" target=\"_blank\">aria-haspopup</a>\n     */\n    role: {\n      type: String,\n      default: 'dialog',\n      validator: (role) => {\n        return POPOVER_ROLES.includes(role);\n      },\n    },\n\n    /**\n     * ID of the element that serves as the label for the popover content.\n     * Defaults to the \"anchor\" element; this exists to provide a different\n     * ID of the label element if, for example, the anchor slot contains\n     * other items that do not serve as a label. You should provide this\n     * or ariaLabel, but not both.\n     */\n    ariaLabelledby: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Descriptive label for the popover content. You should provide this\n     * or ariaLabelledby, but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    padding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     * @values null, anchor\n     */\n    contentWidth: {\n      type: String,\n      default: '',\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * Tabindex value for the content. Passing null, no tabindex attribute will be set.\n     */\n    contentTabindex: {\n      type: Number || null,\n      default: -1,\n    },\n\n    /**\n     * External anchor id to use in those cases the anchor can't be provided via the slot.\n     * For instance, using the combobox's input as the anchor for the popover.\n     */\n    externalAnchor: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The id of the tooltip\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     *  Displaces the content box from its anchor element\n     *  by the specified number of pixels.\n     *  <a\n     *    class=\"d-link\"\n     *    href=\"https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     *    target=\"_blank\"\n     *  >\n     *    Tippy.js docs\n     *  </a>\n     */\n    offset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * Determines if the popover hides upon clicking the\n     * anchor or outside the content box.\n     * @values true, false\n     */\n    hideOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines modal state. If enabled popover has a modal overlay\n     * preventing interaction with elements below it, but it is invisible.\n     * @values true, false\n     */\n    modal: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\".\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * */\n    fallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n    placement: {\n      type: String,\n      default: 'bottom-end',\n    },\n\n    /**\n     * If set to false the dialog will display over top of the anchor when there is insufficient space.\n     * If set to true it will never move from its position relative to the anchor and will clip instead.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://popper.js.org/docs/v2/modifiers/prevent-overflow/#tether\"\n     *   target=\"_blank\"\n     * >\n     *   Popper.js docs\n     * </a>\n     * @values true, false\n     */\n    tether: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * If the popover sticks to the anchor. This is usually not needed, but can be needed\n     * if the reference element's position is animating, or to automatically update the popover\n     * position in those cases the DOM layout changes the reference element's position.\n     * `true` enables it, `reference` only checks the \"reference\" rect for changes and `popper` only\n     * checks the \"popper\" rect for changes.\n     * <a\n     *   class=\"d-link\"\n     *   href=\"https://atomiks.github.io/tippyjs/v6/all-props/#sticky\"\n     *   target=\"_blank\"\n     * >\n     *   Tippy.js docs\n     * </a>\n     * @values true, false, reference, popper\n     */\n    sticky: {\n      type: [Boolean, String],\n      default: false,\n      validator: (sticky) => {\n        return POPOVER_STICKY_VALUES.includes(sticky);\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility for close button\n     * @values true, false\n     */\n    showCloseButton: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Additional class name for the header content wrapper element.\n     */\n    headerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the footer content wrapper element.\n     */\n    footerClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element.\n     */\n    dialogClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * The element that is focused when the popover is opened. This can be an\n     * HTMLElement within the popover, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     * @values none, dialog, first\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return POPOVER_INITIAL_FOCUS_STRINGS.includes(initialFocusElement) ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n\n    /**\n     * If the popover should open pressing up or down arrow key on the anchor element.\n     * This can be set when not passing open prop.\n     * @values true, false\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * 'root' will try append to the iFrame's parent body if it is contained in an iFrame\n     * and has permissions to access it, else, it'd default to 'parent'.\n     * @values 'body', 'parent', 'root', HTMLElement\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n\n    /**\n     * Emitted to sync value with parent\n     *\n     * @event update:opened\n     * @type {Boolean | Array}\n     */\n    'update:open',\n\n    /**\n     * Emitted when the mouse enters the popover\n     *\n     * @event mouseenter-popover\n     */\n    'mouseenter-popover',\n\n    /**\n     * Emitted when the mouse leaves the popover\n     *\n     * @event mouseleave-popover\n     */\n    'mouseleave-popover',\n\n    /**\n     * Emitted when the mouse enters the popover anchor\n     *\n     * @event mouseenter-popover-anchor\n     */\n    'mouseenter-popover-anchor',\n\n    /**\n     * Emitted when the mouse leaves the popover anchor\n     *\n     * @event mouseleave-popover-anchor\n     */\n    'mouseleave-popover-anchor',\n  ],\n\n  data () {\n    return {\n      POPOVER_PADDING_CLASSES,\n      POPOVER_HEADER_FOOTER_PADDING_CLASSES,\n      intersectionObserver: null,\n      isOutsideViewport: false,\n      isOpen: false,\n      anchorEl: null,\n      popoverContentEl: null,\n    };\n  },\n\n  computed: {\n    popoverListeners () {\n      return {\n        ...this.$listeners,\n\n        keydown: event => {\n          this.onKeydown(event);\n          this.$emit('keydown', event);\n        },\n\n        'after-leave': event => {\n          this.onLeaveTransitionComplete();\n        },\n\n        'after-enter': event => {\n          this.onEnterTransitionComplete();\n        },\n      };\n    },\n\n    calculatedMaxHeight () {\n      if (this.isOutsideViewport && this.modal) {\n        return `calc(100vh - var(--dt-space-300))`;\n      }\n      return this.maxHeight;\n    },\n\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor.\n      return this.ariaLabelledby || (!this.ariaLabel && getUniqueString('DtPopover__anchor'));\n    },\n  },\n\n  watch: {\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n\n    modal (modal) {\n      this.tip?.setProps({\n        zIndex: modal ? 650 : this.calculateAnchorZindex(),\n      });\n    },\n\n    offset (offset) {\n      this.tip?.setProps({\n        offset,\n      });\n    },\n\n    sticky (sticky) {\n      this.tip?.setProps({\n        sticky,\n      });\n    },\n\n    fallbackPlacements () {\n      this.tip?.setProps({\n        popperOptions: this.popperOptions(),\n      });\n    },\n\n    tether () {\n      this.tip?.setProps({\n        popperOptions: this.popperOptions(),\n      });\n    },\n\n    placement (placement) {\n      this.tip?.setProps({\n        placement,\n      });\n    },\n\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isOpen (isOpen, isPrev) {\n      if (isOpen) {\n        this.initTippyInstance();\n        this.tip.show();\n      } else if (!isOpen && isPrev !== isOpen) {\n        this.removeEventListeners();\n        this.tip.hide();\n      }\n    },\n  },\n\n  mounted () {\n    warnIfUnmounted(this.$el, this.$options.name);\n\n    const externalAnchorEl = this.externalAnchor\n      ? this.$refs.anchor.getRootNode().querySelector(`#${this.externalAnchor}`)\n      : null;\n    this.anchorEl = externalAnchorEl ?? this.$refs.anchor.children[0];\n    this.popoverContentEl = this.$refs.content?.$el;\n\n    if (this.isOpen) {\n      this.initTippyInstance();\n      this.tip.show();\n    }\n\n    // rootMargin here must be greater than the margin of the height we are setting in calculatedMaxHeight which\n    // currently is var(--dt-space-300) (4px). If not the intersectionObserver will continually trigger in an infinite\n    // loop.\n    // threshold 1.0 makes this trigger every time the dialog \"touches\" the edge of the viewport.\n    this.intersectionObserver = new IntersectionObserver(this.hasIntersectedViewport);\n    this.intersectionObserver.observe(this.popoverContentEl);\n  },\n\n  beforeDestroy () {\n    this.tip?.destroy();\n    this.intersectionObserver?.disconnect();\n    this.removeReferences();\n    this.removeEventListeners();\n  },\n\n  /******************\n   *     METHODS    *\n   ******************/\n  methods: {\n    hasIntersectedViewport (entries) {\n      const dialog = entries?.[0]?.target;\n      if (!dialog) return;\n      const isOut = isOutOfViewPort(dialog);\n      this.isOutsideViewport = isOut.bottom || isOut.top;\n    },\n\n    popperOptions () {\n      return getPopperOptions({\n        fallbackPlacements: this.fallbackPlacements,\n        tether: this.tether,\n        hasHideModifierEnabled: true,\n      });\n    },\n\n    validateProps () {\n      if (this.modal && this.initialFocusElement === 'none') {\n        console.error('If the popover is modal you must set the ' +\n        'initialFocusElement prop. Possible values: \"dialog\", \"first\", HTMLElement');\n      }\n    },\n\n    calculateAnchorZindex () {\n      // if a modal is currently active render at modal-element z-index, otherwise at popover z-index\n      if (this.$el.getRootNode()\n        .querySelector('.d-modal[aria-hidden=\"false\"], .d-modal--transparent[aria-hidden=\"false\"]') ||\n        // Special case because we don't have any dialtone drawer component yet. Render at 650 when\n        // anchor of popover is within a drawer.\n        this.anchorEl?.closest('.d-zi-drawer')) {\n        return 650;\n      } else {\n        return 300;\n      }\n    },\n\n    defaultToggleOpen (e) {\n      if (this.openOnContext) { return; }\n\n      // Only use default toggle behaviour if the user has not set the open prop.\n      // Check that the anchor element specifically was clicked.\n      this.open ?? (this.anchorEl?.contains(e.target) && !this.anchorEl?.disabled && this.toggleOpen());\n    },\n\n    async onContext (event) {\n      if (!this.openOnContext) { return; }\n\n      event.preventDefault();\n\n      this.isOpen = true;\n      await this.$nextTick();\n      this.tip.setProps({\n        placement: 'right-start',\n        getReferenceClientRect: () => ({\n          width: 0,\n          height: 0,\n          top: event.clientY,\n          bottom: event.clientY,\n          left: event.clientX,\n          right: event.clientX,\n        }),\n      });\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    onArrowKeyPress (e) {\n      if (this.open !== null) { return; }\n\n      if (this.openWithArrowKeys && this.anchorEl?.contains(e.target)) {\n        if (!this.isOpen) {\n          this.isOpen = true;\n        }\n      }\n    },\n\n    addEventListeners () {\n      window.addEventListener('dt-popover-close', this.closePopover);\n      // align popover content width when contentWidth is 'anchor'\n      if (this.contentWidth === 'anchor') {\n        window.addEventListener('resize', this.onResize);\n      }\n    },\n\n    removeEventListeners () {\n      window.removeEventListener('dt-popover-close', this.closePopover);\n      if (this.contentWidth === 'anchor') {\n        window.removeEventListener('resize', this.onResize);\n      }\n    },\n\n    closePopover () {\n      this.isOpen = false;\n    },\n\n    /**\n     * Prevents scrolling outside of the currently opened modal popover by:\n     *   - when anchor is not within another popover: setting the body to overflow: hidden\n     *   - when anchor is within another popover: set the popover dialog container to it's non-modal z-index\n     *     since it is no longer the active modal. This puts it underneath the overlay and prevents scrolling.\n     */\n    preventScrolling () {\n      if (this.modal) {\n        const element = this.anchorEl?.closest('body, .tippy-box');\n        if (!element) return;\n        if (element.tagName?.toLowerCase() === 'body') {\n          disableRootScrolling(this.anchorEl.getRootNode().host);\n          this.tip.setProps({ offset: this.offset });\n        } else {\n          element.classList.add('d-zi-popover');\n        }\n      }\n    },\n\n    /**\n     * Resets the prevent scrolling properties set in preventScrolling() back to normal.\n     */\n    enableScrolling () {\n      const element = this.anchorEl?.closest('body, .tippy-box');\n      if (!element) return;\n      if (element.tagName?.toLowerCase() === 'body') {\n        enableRootScrolling(this.anchorEl.getRootNode().host);\n        this.tip.setProps({ offset: this.offset });\n      } else {\n        element.classList.remove('d-zi-popover');\n      }\n    },\n\n    removeReferences () {\n      this.anchorEl = null;\n      this.popoverContentEl = null;\n      this.tip = null;\n    },\n\n    async onShow () {\n      if (this.contentWidth === 'anchor') {\n        await this.setPopoverContentAnchorWidth();\n      }\n\n      if (this.contentWidth === null) {\n        this.popoverContentEl.style.width = 'auto';\n      }\n\n      this.addEventListeners();\n    },\n\n    async onLeaveTransitionComplete () {\n      if (this.modal) {\n        await this.focusFirstElement(this.$refs.anchor);\n        // await next tick in case the user wants to change focus themselves.\n        await this.$nextTick();\n        this.enableScrolling();\n      }\n      this.tip?.unmount();\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    async onEnterTransitionComplete () {\n      this.focusInitialElement();\n      // await next tick in case the user wants to change focus themselves.\n      await this.$nextTick();\n      this.preventScrolling();\n      this.$emit('opened', true, this.$refs.popover__content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    focusInitialElement () {\n      if (this.initialFocusElement === 'dialog') {\n        this.$refs.content?.$el?.focus();\n      }\n      // find by ID\n      if (this.initialFocusElement.startsWith('#')) {\n        this.focusInitialElementById();\n      }\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElementIfNeeded(this.$refs.popover__content);\n      }\n      if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    focusInitialElementById () {\n      const result = this.$refs.content?.$el?.querySelector(this.initialFocusElement);\n      if (result) {\n        result.focus();\n      } else {\n        console.warn('Could not find the element specified in dt-popover prop \"initialFocusElement\". ' +\n          'Defaulting to focusing the dialog.');\n      }\n      result ? result.focus() : this.$refs.content?.$el.focus();\n    },\n\n    onResize () {\n      this.closePopover();\n    },\n\n    onClickOutside () {\n      if (!this.hideOnClick) return;\n      // If a popover is opened inside of this one, do not hide on click out\n      const innerModals = this.popoverContentEl?.querySelector('.d-popover__anchor--opened');\n      if (!innerModals) {\n        this.closePopover();\n      }\n    },\n\n    onKeydown (e) {\n      if (e.key === 'Tab') {\n        if (this.modal) {\n          this.focusTrappedTabPress(e, this.popoverContentEl);\n        }\n      }\n      if (e.key === 'Escape') {\n        this.closePopover();\n      }\n    },\n\n    async setPopoverContentAnchorWidth () {\n      await this.$nextTick();\n      this.popoverContentEl.style.width = `${this.anchorEl?.clientWidth}px`;\n    },\n\n    focusFirstElementIfNeeded (domEl) {\n      const focusableElements = this._getFocusableElements(domEl, true);\n      if (focusableElements.length !== 0) {\n        this.focusFirstElement(domEl);\n      } else if (this.showCloseButton) {\n        this.$refs.popover__header?.focusCloseButton();\n      } else {\n        // if there are no focusable elements at all focus the dialog itself\n        this.$refs.content?.$el.focus();\n      }\n    },\n\n    /**\n     * Return's the anchor ClientRect object relative to the window.\n     * Refer to: https://atomiks.github.io/tippyjs/v6/all-props/#getreferenceclientrect for more information\n     * @param error\n     */\n    getReferenceClientRect (error) {\n      const anchorReferenceRect = this.anchorEl?.getBoundingClientRect();\n\n      if (this.appendTo !== 'root' || error) return anchorReferenceRect;\n\n      const anchorOwnerDocument = this.anchorEl?.ownerDocument;\n      const anchorParentWindow = anchorOwnerDocument?.defaultView || anchorOwnerDocument?.parentWindow;\n      const anchorIframe = anchorParentWindow?.frameElement;\n\n      if (!anchorIframe) return anchorReferenceRect;\n\n      const iframeReferenceRect = anchorIframe.getBoundingClientRect();\n\n      return {\n        width: anchorReferenceRect?.width,\n        height: anchorReferenceRect?.height,\n        top: iframeReferenceRect?.top + anchorReferenceRect?.top,\n        left: iframeReferenceRect?.left + anchorReferenceRect?.left,\n        right: iframeReferenceRect?.right + anchorReferenceRect?.right,\n        bottom: iframeReferenceRect?.bottom + anchorReferenceRect?.bottom,\n      };\n    },\n\n    initTippyInstance () {\n      let internalAppendTo = null;\n      let iFrameError = false;\n\n      switch (this.appendTo) {\n        case 'body':\n          internalAppendTo = this.anchorEl?.getRootNode()?.querySelector('body');\n          break;\n\n        case 'root':\n          // Try to attach the popover to root document, fallback to parent is fail\n          try {\n            internalAppendTo = window.parent.document.body;\n          } catch (err) {\n            console.error('Could not attach the popover to iframe parent window: ', err);\n            internalAppendTo = 'parent';\n            iFrameError = true;\n          }\n          break;\n\n        default:\n          internalAppendTo = this.appendTo;\n          break;\n      }\n\n      this.tip = createTippyPopover(this.anchorEl, {\n        popperOptions: this.popperOptions(),\n        contentElement: this.popoverContentEl,\n        placement: this.placement,\n        offset: this.offset,\n        sticky: this.sticky,\n        appendTo: internalAppendTo,\n        interactive: true,\n        trigger: 'manual',\n        getReferenceClientRect: () => this.getReferenceClientRect(iFrameError),\n        // We have to manage hideOnClick functionality manually to handle\n        // popover within popover situations.\n        hideOnClick: false,\n        zIndex: this.modal ? 650 : this.calculateAnchorZindex(),\n        onClickOutside: this.onClickOutside,\n        onShow: this.onShow,\n      });\n    },\n\n    onMouseEnter () {\n      this.$emit('mouseenter-popover');\n    },\n\n    onMouseLeave () {\n      this.$emit('mouseleave-popover');\n    },\n\n    onMouseEnterAnchor () {\n      this.$emit('mouseenter-popover-anchor');\n    },\n\n    onMouseLeaveAnchor () {\n      this.$emit('mouseleave-popover-anchor');\n    },\n\n    hasFooter () {\n      return this.$slots.footerContent || this.$scopedSlots.footerContent?.();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SrOnlyCloseButton","DtLazyShow","PopoverHeaderFooter","Portal","ModalMixin","role","POPOVER_ROLES","padding","POPOVER_PADDING_CLASSES","item","contentWidth","POPOVER_CONTENT_WIDTHS","getUniqueString","sticky","POPOVER_STICKY_VALUES","initialFocusElement","POPOVER_INITIAL_FOCUS_STRINGS","appendTo","POPOVER_APPEND_TO_VALUES","POPOVER_HEADER_FOOTER_PADDING_CLASSES","event","modal","_a","offset","placement","open","isOpen","isPrev","warnIfUnmounted","externalAnchorEl","_b","entries","dialog","isOut","isOutOfViewPort","getPopperOptions","e","element","disableRootScrolling","enableRootScrolling","result","_c","domEl","error","anchorReferenceRect","anchorOwnerDocument","anchorParentWindow","anchorIframe","iframeReferenceRect","internalAppendTo","iFrameError","err","createTippyPopover"],"mappings":"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"}

package/dist/vue2/lib/popover/popover.js

@@ -1,25 +1,24 @@
-import { POPOVER_ROLES as d, POPOVER_PADDING_CLASSES as a, POPOVER_CONTENT_WIDTHS as h, POPOVER_STICKY_VALUES as u, POPOVER_INITIAL_FOCUS_STRINGS as c, POPOVER_APPEND_TO_VALUES as f, POPOVER_HEADER_FOOTER_PADDING_CLASSES as m } from "./popover-constants.js";
+import { POPOVER_ROLES as d, POPOVER_PADDING_CLASSES as l, POPOVER_CONTENT_WIDTHS as h, POPOVER_STICKY_VALUES as c, POPOVER_INITIAL_FOCUS_STRINGS as u, POPOVER_APPEND_TO_VALUES as f, POPOVER_HEADER_FOOTER_PADDING_CLASSES as m } from "./popover-constants.js";
 import { getUniqueString as p, warnIfUnmounted as y, isOutOfViewPort as v, disableRootScrolling as E, enableRootScrolling as g } from "../../common/utils/index.js";
-import { Portal as O } from "../../node_modules/@linusborg/vue-simple-portal.js";
-import _ from "../../common/mixins/modal.js";
-import { getPopperOptions as b, createTippyPopover as C } from "./tippy-utils.js";
+import { Portal as _ } from "../../node_modules/@linusborg/vue-simple-portal.js";
+import O from "../../common/mixins/modal.js";
+import { getPopperOptions as C, createTippyPopover as b } from "./tippy-utils.js";
 import P from "./popover-header-footer.js";
-import w from "../../common/mixins/sr-only-close-button.js";
-import S from "../../shared/sr_only_close_button.js";
-import { n as x } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import w from "../../shared/sr_only_close_button.js";
+import { n as S } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 import k from "../lazy-show/lazy-show.js";
-const A = {
+const x = {
   name: "DtPopover",
   /********************
    * CHILD COMPONENTS *
    ********************/
   components: {
-    SrOnlyCloseButton: S,
+    SrOnlyCloseButton: w,
     DtLazyShow: k,
     PopoverHeaderFooter: P,
-    Portal: O
+    Portal: _
   },
-  mixins: [_, w],
+  mixins: [O],
   props: {
     /**
      * Controls whether the popover is shown. Leaving this null will have the popover trigger on click by default.
@@ -83,14 +82,6 @@ const A = {
       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
@@ -98,7 +89,7 @@ const A = {
     padding: {
       type: String,
       default: "large",
-      validator: (e) => Object.keys(a).some((t) => t === e)
+      validator: (e) => Object.keys(l).some((t) => t === e)
     },
     /**
      * Additional class name for the content wrapper element.
@@ -242,7 +233,7 @@ const A = {
     sticky: {
       type: [Boolean, String],
       default: !1,
-      validator: (e) => u.includes(e)
+      validator: (e) => c.includes(e)
     },
     /**
      * Determines maximum height for the popover before overflow.
@@ -300,7 +291,7 @@ const A = {
     initialFocusElement: {
       type: [String, HTMLElement],
       default: "first",
-      validator: (e) => c.includes(e) || e instanceof HTMLElement || e.startsWith("#")
+      validator: (e) => u.includes(e) || e instanceof HTMLElement || e.startsWith("#")
     },
     /**
      * If the popover should open pressing up or down arrow key on the anchor element.
@@ -366,7 +357,7 @@ const A = {
   ],
   data() {
     return {
-      POPOVER_PADDING_CLASSES: a,
+      POPOVER_PADDING_CLASSES: l,
       POPOVER_HEADER_FOOTER_PADDING_CLASSES: m,
       intersectionObserver: null,
       isOutsideViewport: !1,
@@ -473,7 +464,7 @@ const A = {
       this.isOutsideViewport = o.bottom || o.top;
     },
     popperOptions() {
-      return b({
+      return C({
         fallbackPlacements: this.fallbackPlacements,
         tether: this.tether,
         hasHideModifierEnabled: !0
@@ -590,10 +581,10 @@ const A = {
      * @param error
      */
     getReferenceClientRect(e) {
-      var r, l;
+      var r, a;
       const t = (r = this.anchorEl) == null ? void 0 : r.getBoundingClientRect();
       if (this.appendTo !== "root" || e) return t;
-      const o = (l = this.anchorEl) == null ? void 0 : l.ownerDocument, n = (o == null ? void 0 : o.defaultView) || (o == null ? void 0 : o.parentWindow), s = n == null ? void 0 : n.frameElement;
+      const o = (a = this.anchorEl) == null ? void 0 : a.ownerDocument, n = (o == null ? void 0 : o.defaultView) || (o == null ? void 0 : o.parentWindow), s = n == null ? void 0 : n.frameElement;
       if (!s) return t;
       const i = s.getBoundingClientRect();
       return {
@@ -623,7 +614,7 @@ const A = {
           e = this.appendTo;
           break;
       }
-      this.tip = C(this.anchorEl, {
+      this.tip = b(this.anchorEl, {
         popperOptions: this.popperOptions(),
         contentElement: this.popoverContentEl,
         placement: this.placement,
@@ -659,7 +650,7 @@ const A = {
     }
   }
 };
-var L = function() {
+var A = function() {
   var t = this, o = t._self._c;
   return o("div", [t.modal && t.isOpen ? o("portal", [o("div", { staticClass: "d-modal--transparent", on: { click: function(n) {
     n.preventDefault(), n.stopPropagation();
@@ -678,7 +669,7 @@ var L = function() {
   } })], 2), o("dt-lazy-show", t._g({ ref: "content", class: ["d-popover__dialog", { "d-popover__dialog--modal": t.modal }, t.dialogClass], style: {
     "max-height": t.calculatedMaxHeight,
     "max-width": t.maxWidth
-  }, attrs: { id: t.id, role: t.role, "data-qa": t.$attrs["data-qa"] ? `${t.$attrs["data-qa"]}__dialog` : "dt-popover", "aria-hidden": `${!t.isOpen}`, "aria-labelledby": t.labelledBy, "aria-label": t.ariaLabel, "aria-modal": `${!t.modal}`, transition: t.transition, show: t.isOpen, tabindex: t.contentTabindex, appear: "" }, on: { mouseenter: t.onMouseEnterAnchor, mouseleave: t.onMouseLeaveAnchor } }, t.popoverListeners), [t.$slots.headerContent || t.showCloseButton ? o("popover-header-footer", { ref: "popover__header", class: t.POPOVER_HEADER_FOOTER_PADDING_CLASSES[t.padding], attrs: { "content-class": t.headerClass, type: "header", "show-close-button": t.showCloseButton, "close-button-props": t.closeButtonProps }, on: { close: t.closePopover }, scopedSlots: t._u([{ key: "content", fn: function() {
+  }, attrs: { id: t.id, role: t.role, "data-qa": t.$attrs["data-qa"] ? `${t.$attrs["data-qa"]}__dialog` : "dt-popover", "aria-hidden": `${!t.isOpen}`, "aria-labelledby": t.labelledBy, "aria-label": t.ariaLabel, "aria-modal": `${!t.modal}`, transition: t.transition, show: t.isOpen, tabindex: t.contentTabindex, appear: "" }, on: { mouseenter: t.onMouseEnterAnchor, mouseleave: t.onMouseLeaveAnchor } }, t.popoverListeners), [t.$slots.headerContent || t.showCloseButton ? o("popover-header-footer", { ref: "popover__header", class: t.POPOVER_HEADER_FOOTER_PADDING_CLASSES[t.padding], attrs: { "content-class": t.headerClass, type: "header", "show-close-button": t.showCloseButton }, on: { close: t.closePopover }, scopedSlots: t._u([{ key: "content", fn: function() {
     return [t._t("headerContent", null, { close: t.closePopover })];
   }, proxy: !0 }], null, !0) }) : t._e(), o("div", { ref: "popover__content", class: [
     "d-popover__content",
@@ -686,14 +677,14 @@ var L = function() {
     t.contentClass
   ], attrs: { "data-qa": t.$attrs["data-qa"] ? `${t.$attrs["data-qa"]}-content` : "dt-popover-content" } }, [t._t("content", null, { close: t.closePopover })], 2), t.hasFooter() ? o("popover-header-footer", { ref: "popover__footer", class: t.POPOVER_HEADER_FOOTER_PADDING_CLASSES[t.padding], attrs: { type: "footer", "content-class": t.footerClass }, scopedSlots: t._u([{ key: "content", fn: function() {
     return [t._t("footerContent", null, { close: t.closePopover })];
-  }, proxy: !0 }], null, !0) }) : t._e(), t.showVisuallyHiddenClose ? o("sr-only-close-button", { attrs: { "visually-hidden-close-label": t.visuallyHiddenCloseLabel }, on: { close: t.closePopover } }) : t._e()], 1)], 1)], 1);
-}, $ = [], T = /* @__PURE__ */ x(
+  }, proxy: !0 }], null, !0) }) : t._e(), t.showCloseButton ? t._e() : o("sr-only-close-button", { on: { close: t.closePopover } })], 1)], 1)], 1);
+}, L = [], $ = /* @__PURE__ */ S(
+  x,
   A,
-  L,
-  $
+  L
 );
-const z = T.exports;
+const H = $.exports;
 export {
-  z as default
+  H as default
 };
 //# sourceMappingURL=popover.js.map