@dialpad/dialtone-vue 2.200.0-beta.1 → 2.200.1

package/dist/lib/modal/modal.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("@dialpad/dialtone-icons/vue2"),r=require("../../common/mixins/modal.cjs"),a=require("./modal-constants.cjs"),l=require("../../common/utils/index.cjs"),o=require("../../common/constants/index.cjs"),d=require("../../shared/sr_only_close_button.cjs"),c=require("../../localization/index.cjs"),u=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),_=require("../button/button.cjs"),m=require("../lazy-show/lazy-show.cjs"),h=require("../notice/notice-constants.cjs"),f={name:"DtModal",components:{DtLazyShow:m.default,DtButton:_.default,DtIconClose:n.DtIconClose,SrOnlyCloseButton:d.default},mixins:[r.default],props:{copy:{type:String,default:""},describedById:{type:String,default:""},labelledById:{type:String,default:function(){return l.getUniqueString()}},show:{type:Boolean,default:!1},title:{type:String,default:""},bannerTitle:{type:String,default:""},kind:{type:String,default:"default",validator:e=>Object.keys(a.MODAL_KIND_MODIFIERS).includes(e)},size:{type:String,default:"default",validator:e=>Object.keys(a.MODAL_SIZE_MODIFIERS).includes(e)},modalClass:{type:[String,Object,Array],default:""},dialogClass:{type:[String,Object,Array],default:""},contentClass:{type:[String,Object,Array],default:""},bannerKind:{type:String,default:"warning",validate(e){return h.NOTICE_KINDS.includes(e)}},bannerClass:{type:[String,Object,Array],default:""},hideClose:{type:Boolean,default:!1},closeOnClick:{type:Boolean,default:!0},fixedHeaderFooter:{type:Boolean,default:!0},initialFocusElement:{type:[String,HTMLElement],default:"first",validator:e=>e==="first"||e instanceof HTMLElement||e.startsWith("#")}},emits:["update:show"],data(){return{MODAL_KIND_MODIFIERS:a.MODAL_KIND_MODIFIERS,MODAL_SIZE_MODIFIERS:a.MODAL_SIZE_MODIFIERS,MODAL_BANNER_KINDS:a.MODAL_BANNER_KINDS,EVENT_KEYNAMES:o.EVENT_KEYNAMES,i18n:new c.DialtoneLocalization}},computed:{modalListeners(){return{...this.$listeners,click:e=>{this.closeOnClick&&e.target===e.currentTarget?this.close():this.show&&e.target!==e.currentTarget&&this.handleModalClick(e),this.$emit("click",e)},keydown:e=>{switch(e.code){case o.EVENT_KEYNAMES.esc:case o.EVENT_KEYNAMES.escape:this.close();break;case o.EVENT_KEYNAMES.tab:this.trapFocus(e);break}this.$emit("keydown",e)},"after-enter":async()=>{this.$emit("update:show",!0),await this.setFocusAfterTransition()}}},open(){return`${!this.show}`},hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return a.MODAL_BANNER_KINDS[this.bannerKind]},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},watch:{show:{handler(e){var t;e?(this.previousActiveElement=document.activeElement,l.disableRootScrolling(this.$el.getRootNode().host)):(l.enableRootScrolling(this.$el.getRootNode().host),(t=this.previousActiveElement)==null||t.focus(),this.previousActiveElement=null)}}},methods:{close(){this.$emit("update:show",!1)},async setFocusAfterTransition(){this.initialFocusElement==="first"?await this.focusFirstElement():this.initialFocusElement.startsWith("#")?await this.focusElementById(this.initialFocusElement):this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},trapFocus(e){this.show&&this.focusTrappedTabPress(e)},handleModalClick(e){const t=e.target,s=this._getFocusableElements();s.length&&!s.includes(t)&&(s.includes(document.activeElement)||this.focusFirstElement())}}};var E=function(){var t=this,s=t._self._c;return s("dt-lazy-show",t._g({class:["d-modal",t.MODAL_KIND_MODIFIERS[t.kind],t.MODAL_SIZE_MODIFIERS[t.size],t.modalClass],attrs:{transition:"d-zoom",show:t.show,"data-qa":"dt-modal","aria-hidden":t.open}},t.modalListeners),[t.show&&(t.$slots.banner||t.bannerTitle)?s("div",{class:["d-modal__banner",t.bannerClass,t.bannerKindClass],attrs:{"data-qa":"dt-modal-banner"}},[t._t("banner",function(){return[t._v(" "+t._s(t.bannerTitle)+" ")]})],2):t._e(),s("transition",{attrs:{appear:"",name:"d-modal__dialog"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],class:["d-modal__dialog",{"d-modal__dialog--scrollable":t.fixedHeaderFooter},t.dialogClass],attrs:{role:"dialog","aria-modal":"true","aria-describedby":t.describedById,"aria-labelledby":t.labelledById}},[t.$slots.header?s("div",{staticClass:"d-modal__header",attrs:{id:t.labelledById,"data-qa":"dt-modal-title"}},[t._t("header")],2):s("h2",{staticClass:"d-modal__header",attrs:{id:t.labelledById,"data-qa":"dt-modal-title"}},[t._v(" "+t._s(t.title)+" ")]),t.$slots.default?s("div",{class:["d-modal__content",t.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[t._t("default")],2):s("p",{class:["d-modal__content",t.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[t._v(" "+t._s(t.copy)+" ")]),t.hasFooterSlot?s("footer",{staticClass:"d-modal__footer"},[t._t("footer")],2):t._e(),t.hideClose?s("sr-only-close-button",{on:{close:t.close}}):s("dt-button",{staticClass:"d-modal__close",attrs:{"data-qa":"dt-modal-close-button",size:"md",kind:"muted",importance:"clear","aria-label":t.closeButtonTitle,title:t.closeButtonTitle},on:{click:t.close},scopedSlots:t._u([{key:"icon",fn:function({iconSize:i}){return[s("dt-icon-close",{attrs:{size:i}})]}}])})],1)])],1)},b=[],y=u.n(f,E,b);const p=y.exports;exports.default=p;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),d=require("../../common/mixins/modal.cjs"),l=require("./modal-constants.cjs"),n=require("../../common/utils/index.cjs"),i=require("../../common/constants/index.cjs"),c=require("../../shared/sr_only_close_button.cjs"),u=require("../../localization/index.cjs"),_=require("../../node_modules/@linusborg/vue-simple-portal.cjs"),m=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),h=require("../button/button.cjs"),f=require("../lazy-show/lazy-show.cjs"),E=require("../notice/notice-constants.cjs"),p={name:"DtModal",components:{DtLazyShow:f.default,DtButton:h.default,DtIconClose:r.DtIconClose,SrOnlyCloseButton:c.default,Portal:_.Portal},mixins:[d.default],props:{copy:{type:String,default:""},describedById:{type:String,default:""},labelledById:{type:String,default:function(){return n.getUniqueString()}},show:{type:Boolean,default:!1},title:{type:String,default:""},bannerTitle:{type:String,default:""},kind:{type:String,default:"default",validator:e=>Object.keys(l.MODAL_KIND_MODIFIERS).includes(e)},size:{type:String,default:"default",validator:e=>Object.keys(l.MODAL_SIZE_MODIFIERS).includes(e)},modalClass:{type:[String,Object,Array],default:""},dialogClass:{type:[String,Object,Array],default:""},contentClass:{type:[String,Object,Array],default:""},bannerKind:{type:String,default:"warning",validate(e){return E.NOTICE_KINDS.includes(e)}},bannerClass:{type:[String,Object,Array],default:""},hideClose:{type:Boolean,default:!1},closeOnClick:{type:Boolean,default:!0},fixedHeaderFooter:{type:Boolean,default:!0},initialFocusElement:{type:[String,HTMLElement],default:"first",validator:e=>e==="first"||e instanceof HTMLElement||e.startsWith("#")},appendTo:{type:String,default:void 0}},emits:["update:show"],data(){return{MODAL_KIND_MODIFIERS:l.MODAL_KIND_MODIFIERS,MODAL_SIZE_MODIFIERS:l.MODAL_SIZE_MODIFIERS,MODAL_BANNER_KINDS:l.MODAL_BANNER_KINDS,EVENT_KEYNAMES:i.EVENT_KEYNAMES,i18n:new u.DialtoneLocalization}},computed:{modalListeners(){return{...this.$listeners,click:e=>{this.closeOnClick&&e.target===e.currentTarget?this.close():this.show&&e.target!==e.currentTarget&&this.handleModalClick(e),this.$emit("click",e)},keydown:e=>{switch(e.code){case i.EVENT_KEYNAMES.esc:case i.EVENT_KEYNAMES.escape:this.close();break;case i.EVENT_KEYNAMES.tab:this.trapFocus(e);break}this.$emit("keydown",e)},"after-enter":async()=>{this.$emit("update:show",!0),await this.setFocusAfterTransition()}}},open(){return`${!this.show}`},hasFooterSlot(){return!!this.$slots.footer},bannerKindClass(){return l.MODAL_BANNER_KINDS[this.bannerKind]},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},watch:{show:{handler(e){var t,s,a;if(e){this.previousActiveElement=document.activeElement;const o=((t=this.$refs.modalRoot)==null?void 0:t.$el)||this.$el;n.disableRootScrolling(o.getRootNode().host)}else{const o=((s=this.$refs.modalRoot)==null?void 0:s.$el)||this.$el;n.enableRootScrolling(o.getRootNode().host),(a=this.previousActiveElement)==null||a.focus(),this.previousActiveElement=null}}}},methods:{close(){this.$emit("update:show",!1)},async setFocusAfterTransition(){var t;const e=((t=this.$refs.modalRoot)==null?void 0:t.$el)||this.$el;this.initialFocusElement==="first"?await this.focusFirstElement(e):this.initialFocusElement.startsWith("#")?await this.focusElementById(this.initialFocusElement):this.initialFocusElement instanceof HTMLElement&&this.initialFocusElement.focus()},trapFocus(e){var t;if(this.show){const s=((t=this.$refs.modalRoot)==null?void 0:t.$el)||this.$el;this.focusTrappedTabPress(e,s)}},handleModalClick(e){var o;const t=e.target,s=((o=this.$refs.modalRoot)==null?void 0:o.$el)||this.$el,a=this._getFocusableElements(s);a.length&&!a.includes(t)&&(a.includes(document.activeElement)||this.focusFirstElement(s))}}};var b=function(){var t=this,s=t._self._c;return s("portal",{attrs:{disabled:!t.appendTo,selector:t.appendTo}},[s("dt-lazy-show",t._g({ref:"modalRoot",class:["d-modal",t.MODAL_KIND_MODIFIERS[t.kind],t.MODAL_SIZE_MODIFIERS[t.size],t.modalClass],attrs:{transition:"d-zoom",show:t.show,"data-qa":"dt-modal","aria-hidden":t.open}},t.modalListeners),[t.show&&(t.$slots.banner||t.bannerTitle)?s("div",{class:["d-modal__banner",t.bannerClass,t.bannerKindClass],attrs:{"data-qa":"dt-modal-banner"}},[t._t("banner",function(){return[t._v(" "+t._s(t.bannerTitle)+" ")]})],2):t._e(),s("transition",{attrs:{appear:"",name:"d-modal__dialog"}},[s("div",{directives:[{name:"show",rawName:"v-show",value:t.show,expression:"show"}],class:["d-modal__dialog",{"d-modal__dialog--scrollable":t.fixedHeaderFooter},t.dialogClass],attrs:{role:"dialog","aria-modal":"true","aria-describedby":t.describedById,"aria-labelledby":t.labelledById}},[t.$slots.header?s("div",{staticClass:"d-modal__header",attrs:{id:t.labelledById,"data-qa":"dt-modal-title"}},[t._t("header")],2):s("h2",{staticClass:"d-modal__header",attrs:{id:t.labelledById,"data-qa":"dt-modal-title"}},[t._v(" "+t._s(t.title)+" ")]),t.$slots.default?s("div",{class:["d-modal__content",t.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[t._t("default")],2):s("p",{class:["d-modal__content",t.contentClass],attrs:{"data-qa":"dt-modal-copy"}},[t._v(" "+t._s(t.copy)+" ")]),t.hasFooterSlot?s("footer",{staticClass:"d-modal__footer"},[t._t("footer")],2):t._e(),t.hideClose?s("sr-only-close-button",{on:{close:t.close}}):s("dt-button",{staticClass:"d-modal__close",attrs:{"data-qa":"dt-modal-close-button",size:"md",kind:"muted",importance:"clear","aria-label":t.closeButtonTitle,title:t.closeButtonTitle},on:{click:t.close},scopedSlots:t._u([{key:"icon",fn:function({iconSize:a}){return[s("dt-icon-close",{attrs:{size:a}})]}}])})],1)])],1)],1)},y=[],S=m.n(p,b,y);const g=S.exports;exports.default=g;
 //# sourceMappingURL=modal.cjs.map

package/dist/lib/modal/modal.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.cjs","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && ($slots.banner || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"$slots.header\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"$slots.default\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <sr-only-close-button\n          v-if=\"hideClose\"\n          @close=\"close\"\n        />\n        <dt-button\n          v-else\n          class=\"d-modal__close\"\n          data-qa=\"dt-modal-close-button\"\n          size=\"md\"\n          kind=\"muted\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonTitle\"\n          :title=\"closeButtonTitle\"\n          @click=\"close\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <dt-icon-close\n              :size=\"iconSize\"\n            />\n          </template>\n        </dt-button>\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIconClose,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, 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     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          // Handle backdrop clicks for closing modal\n          if (this.closeOnClick && event.target === event.currentTarget) {\n            this.close();\n          } else if (this.show && event.target !== event.currentTarget) {\n            // Ensure focus stays within modal when clicking inside it\n            this.handleModalClick(event);\n          }\n\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': async () => {\n          this.$emit('update:show', true);\n          await this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    show: {\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n          disableRootScrolling(this.$el.getRootNode().host);\n        } else {\n          enableRootScrolling(this.$el.getRootNode().host);\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    async setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        await this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        await this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    handleModalClick (event) {\n      // Ensure focus stays within modal when clicking inside it\n      const clickedElement = event.target;\n      const focusableElements = this._getFocusableElements();\n\n      // If the clicked element is not focusable, ensure focus stays in modal\n      if (focusableElements.length && !focusableElements.includes(clickedElement)) {\n        // Check if current active element is still within the modal\n        if (!focusableElements.includes(document.activeElement)) {\n          this.focusFirstElement();\n        }\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLazyShow","DtButton","DtIconClose","SrOnlyCloseButton","Modal","getUniqueString","k","MODAL_KIND_MODIFIERS","s","MODAL_SIZE_MODIFIERS","kind","NOTICE_KINDS","initialFocusElement","MODAL_BANNER_KINDS","EVENT_KEYNAMES","DialtoneLocalization","event","isShowing","disableRootScrolling","enableRootScrolling","_a","clickedElement","focusableElements"],"mappings":"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"}
+{"version":3,"file":"modal.cjs","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <portal\n    :disabled=\"!appendTo\"\n    :selector=\"appendTo\"\n  >\n    <dt-lazy-show\n      ref=\"modalRoot\"\n      transition=\"d-zoom\"\n      :show=\"show\"\n      :class=\"[\n        'd-modal',\n        MODAL_KIND_MODIFIERS[kind],\n        MODAL_SIZE_MODIFIERS[size],\n        modalClass,\n      ]\"\n      data-qa=\"dt-modal\"\n      :aria-hidden=\"open\"\n      v-on=\"modalListeners\"\n    >\n      <div\n        v-if=\"show && ($slots.banner || bannerTitle)\"\n        data-qa=\"dt-modal-banner\"\n        :class=\"[\n          'd-modal__banner',\n          bannerClass,\n          bannerKindClass,\n        ]\"\n      >\n        <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n        <slot name=\"banner\">\n          {{ bannerTitle }}\n        </slot>\n      </div>\n      <transition\n        appear\n        name=\"d-modal__dialog\"\n      >\n        <div\n          v-show=\"show\"\n          :class=\"[\n            'd-modal__dialog',\n            { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n            dialogClass,\n          ]\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-describedby=\"describedById\"\n          :aria-labelledby=\"labelledById\"\n        >\n          <div\n            v-if=\"$slots.header\"\n            :id=\"labelledById\"\n            class=\"d-modal__header\"\n            data-qa=\"dt-modal-title\"\n          >\n            <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n            <slot name=\"header\" />\n          </div>\n          <h2\n            v-else\n            :id=\"labelledById\"\n            class=\"d-modal__header\"\n            data-qa=\"dt-modal-title\"\n          >\n            {{ title }}\n          </h2>\n          <div\n            v-if=\"$slots.default\"\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n            <slot />\n          </div>\n          <p\n            v-else\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            {{ copy }}\n          </p>\n          <footer\n            v-if=\"hasFooterSlot\"\n            class=\"d-modal__footer\"\n          >\n            <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n            <slot name=\"footer\" />\n          </footer>\n          <sr-only-close-button\n            v-if=\"hideClose\"\n            @close=\"close\"\n          />\n          <dt-button\n            v-else\n            class=\"d-modal__close\"\n            data-qa=\"dt-modal-close-button\"\n            size=\"md\"\n            kind=\"muted\"\n            importance=\"clear\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <dt-icon-close\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </transition>\n    </dt-lazy-show>\n  </portal>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\nimport { DialtoneLocalization } from '@/localization';\nimport { Portal } from '@linusborg/vue-simple-portal';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIconClose,\n    SrOnlyCloseButton,\n    Portal,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, 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     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n\n    /**\n     * A CSS selector string for the element to portal the modal to. If not provided, the modal will be rendered in its default location.\n     */\n    appendTo: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          // Handle backdrop clicks for closing modal\n          if (this.closeOnClick && event.target === event.currentTarget) {\n            this.close();\n          } else if (this.show && event.target !== event.currentTarget) {\n            // Ensure focus stays within modal when clicking inside it\n            this.handleModalClick(event);\n          }\n\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': async () => {\n          this.$emit('update:show', true);\n          await this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    show: {\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n          const modalEl = this.$refs.modalRoot?.$el || this.$el;\n          disableRootScrolling(modalEl.getRootNode().host);\n        } else {\n          const modalEl = this.$refs.modalRoot?.$el || this.$el;\n          enableRootScrolling(modalEl.getRootNode().host);\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    async setFocusAfterTransition () {\n      const modalEl = this.$refs.modalRoot?.$el || this.$el;\n      if (this.initialFocusElement === 'first') {\n        await this.focusFirstElement(modalEl);\n      } else if (this.initialFocusElement.startsWith('#')) {\n        await this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        const modalEl = this.$refs.modalRoot?.$el || this.$el;\n        this.focusTrappedTabPress(e, modalEl);\n      }\n    },\n\n    handleModalClick (event) {\n      // Ensure focus stays within modal when clicking inside it\n      const clickedElement = event.target;\n      const modalEl = this.$refs.modalRoot?.$el || this.$el;\n      const focusableElements = this._getFocusableElements(modalEl);\n\n      // If the clicked element is not focusable, ensure focus stays in modal\n      if (focusableElements.length && !focusableElements.includes(clickedElement)) {\n        // Check if current active element is still within the modal\n        if (!focusableElements.includes(document.activeElement)) {\n          this.focusFirstElement(modalEl);\n        }\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLazyShow","DtButton","DtIconClose","SrOnlyCloseButton","Portal","Modal","getUniqueString","k","MODAL_KIND_MODIFIERS","s","MODAL_SIZE_MODIFIERS","kind","NOTICE_KINDS","initialFocusElement","MODAL_BANNER_KINDS","EVENT_KEYNAMES","DialtoneLocalization","event","isShowing","modalEl","_a","disableRootScrolling","_b","enableRootScrolling","_c","clickedElement","focusableElements"],"mappings":"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"}

package/dist/lib/modal/modal.js

@@ -1,23 +1,25 @@
-import { DtIconClose as r } from "@dialpad/dialtone-icons/vue2";
-import d from "../../common/mixins/modal.js";
-import { MODAL_BANNER_KINDS as o, MODAL_SIZE_MODIFIERS as l, MODAL_KIND_MODIFIERS as i } from "./modal-constants.js";
-import { disableRootScrolling as c, enableRootScrolling as m, getUniqueString as u } from "../../common/utils/index.js";
-import { EVENT_KEYNAMES as s } from "../../common/constants/index.js";
-import f from "../../shared/sr_only_close_button.js";
-import { DialtoneLocalization as h } from "../../localization/index.js";
-import { n as _ } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import p from "../button/button.js";
-import y from "../lazy-show/lazy-show.js";
-import { NOTICE_KINDS as b } from "../notice/notice-constants.js";
-const g = {
+import { DtIconClose as d } from "@dialpad/dialtone-icons/vue2";
+import c from "../../common/mixins/modal.js";
+import { MODAL_BANNER_KINDS as i, MODAL_SIZE_MODIFIERS as n, MODAL_KIND_MODIFIERS as r } from "./modal-constants.js";
+import { disableRootScrolling as m, enableRootScrolling as u, getUniqueString as f } from "../../common/utils/index.js";
+import { EVENT_KEYNAMES as l } from "../../common/constants/index.js";
+import h from "../../shared/sr_only_close_button.js";
+import { DialtoneLocalization as p } from "../../localization/index.js";
+import { Portal as _ } from "../../node_modules/@linusborg/vue-simple-portal.js";
+import { n as y } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import b from "../button/button.js";
+import E from "../lazy-show/lazy-show.js";
+import { NOTICE_KINDS as g } from "../notice/notice-constants.js";
+const S = {
   name: "DtModal",
   components: {
-    DtLazyShow: y,
-    DtButton: p,
-    DtIconClose: r,
-    SrOnlyCloseButton: f
+    DtLazyShow: E,
+    DtButton: b,
+    DtIconClose: d,
+    SrOnlyCloseButton: h,
+    Portal: _
   },
-  mixins: [d],
+  mixins: [c],
   props: {
     /**
      * Body text to display as the modal's main content.
@@ -41,7 +43,7 @@ const g = {
     labelledById: {
       type: String,
       default: function() {
-        return u();
+        return f();
       }
     },
     /**
@@ -74,7 +76,7 @@ const g = {
     kind: {
       type: String,
       default: "default",
-      validator: (e) => Object.keys(i).includes(e)
+      validator: (e) => Object.keys(r).includes(e)
     },
     /**
      * The size of the modal. size - default or full,
@@ -83,7 +85,7 @@ const g = {
     size: {
       type: String,
       default: "default",
-      validator: (e) => Object.keys(l).includes(e)
+      validator: (e) => Object.keys(n).includes(e)
     },
     /**
      * Additional class name for the root modal element.
@@ -120,7 +122,7 @@ const g = {
       type: String,
       default: "warning",
       validate(e) {
-        return b.includes(e);
+        return g.includes(e);
       }
     },
     /**
@@ -167,6 +169,13 @@ const g = {
       type: [String, HTMLElement],
       default: "first",
       validator: (e) => e === "first" || e instanceof HTMLElement || e.startsWith("#")
+    },
+    /**
+     * A CSS selector string for the element to portal the modal to. If not provided, the modal will be rendered in its default location.
+     */
+    appendTo: {
+      type: String,
+      default: void 0
     }
   },
   emits: [
@@ -181,11 +190,11 @@ const g = {
   ],
   data() {
     return {
-      MODAL_KIND_MODIFIERS: i,
-      MODAL_SIZE_MODIFIERS: l,
-      MODAL_BANNER_KINDS: o,
-      EVENT_KEYNAMES: s,
-      i18n: new h()
+      MODAL_KIND_MODIFIERS: r,
+      MODAL_SIZE_MODIFIERS: n,
+      MODAL_BANNER_KINDS: i,
+      EVENT_KEYNAMES: l,
+      i18n: new p()
     };
   },
   computed: {
@@ -197,11 +206,11 @@ const g = {
         },
         keydown: (e) => {
           switch (e.code) {
-            case s.esc:
-            case s.escape:
+            case l.esc:
+            case l.escape:
               this.close();
               break;
-            case s.tab:
+            case l.tab:
               this.trapFocus(e);
               break;
           }
@@ -219,7 +228,7 @@ const g = {
       return !!this.$slots.footer;
     },
     bannerKindClass() {
-      return o[this.bannerKind];
+      return i[this.bannerKind];
     },
     closeButtonTitle() {
       return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
@@ -228,8 +237,15 @@ const g = {
   watch: {
     show: {
       handler(e) {
-        var t;
-        e ? (this.previousActiveElement = document.activeElement, c(this.$el.getRootNode().host)) : (m(this.$el.getRootNode().host), (t = this.previousActiveElement) == null || t.focus(), this.previousActiveElement = null);
+        var t, a, o;
+        if (e) {
+          this.previousActiveElement = document.activeElement;
+          const s = ((t = this.$refs.modalRoot) == null ? void 0 : t.$el) || this.$el;
+          m(s.getRootNode().host);
+        } else {
+          const s = ((a = this.$refs.modalRoot) == null ? void 0 : a.$el) || this.$el;
+          u(s.getRootNode().host), (o = this.previousActiveElement) == null || o.focus(), this.previousActiveElement = null;
+        }
       }
     }
   },
@@ -238,20 +254,27 @@ const g = {
       this.$emit("update:show", !1);
     },
     async setFocusAfterTransition() {
-      this.initialFocusElement === "first" ? await this.focusFirstElement() : this.initialFocusElement.startsWith("#") ? await this.focusElementById(this.initialFocusElement) : this.initialFocusElement instanceof HTMLElement && this.initialFocusElement.focus();
+      var t;
+      const e = ((t = this.$refs.modalRoot) == null ? void 0 : t.$el) || this.$el;
+      this.initialFocusElement === "first" ? await this.focusFirstElement(e) : this.initialFocusElement.startsWith("#") ? await this.focusElementById(this.initialFocusElement) : this.initialFocusElement instanceof HTMLElement && this.initialFocusElement.focus();
     },
     trapFocus(e) {
-      this.show && this.focusTrappedTabPress(e);
+      var t;
+      if (this.show) {
+        const a = ((t = this.$refs.modalRoot) == null ? void 0 : t.$el) || this.$el;
+        this.focusTrappedTabPress(e, a);
+      }
     },
     handleModalClick(e) {
-      const t = e.target, a = this._getFocusableElements();
-      a.length && !a.includes(t) && (a.includes(document.activeElement) || this.focusFirstElement());
+      var s;
+      const t = e.target, a = ((s = this.$refs.modalRoot) == null ? void 0 : s.$el) || this.$el, o = this._getFocusableElements(a);
+      o.length && !o.includes(t) && (o.includes(document.activeElement) || this.focusFirstElement(a));
     }
   }
 };
-var E = function() {
+var w = function() {
   var t = this, a = t._self._c;
-  return a("dt-lazy-show", t._g({ class: [
+  return a("portal", { attrs: { disabled: !t.appendTo, selector: t.appendTo } }, [a("dt-lazy-show", t._g({ ref: "modalRoot", class: [
     "d-modal",
     t.MODAL_KIND_MODIFIERS[t.kind],
     t.MODAL_SIZE_MODIFIERS[t.size],
@@ -272,16 +295,16 @@ var E = function() {
   ], attrs: { "data-qa": "dt-modal-copy" } }, [t._t("default")], 2) : a("p", { class: [
     "d-modal__content",
     t.contentClass
-  ], attrs: { "data-qa": "dt-modal-copy" } }, [t._v(" " + t._s(t.copy) + " ")]), t.hasFooterSlot ? a("footer", { staticClass: "d-modal__footer" }, [t._t("footer")], 2) : t._e(), t.hideClose ? a("sr-only-close-button", { on: { close: t.close } }) : a("dt-button", { staticClass: "d-modal__close", attrs: { "data-qa": "dt-modal-close-button", size: "md", kind: "muted", importance: "clear", "aria-label": t.closeButtonTitle, title: t.closeButtonTitle }, on: { click: t.close }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: n }) {
-    return [a("dt-icon-close", { attrs: { size: n } })];
-  } }]) })], 1)])], 1);
-}, S = [], w = /* @__PURE__ */ _(
-  g,
-  E,
-  S
+  ], attrs: { "data-qa": "dt-modal-copy" } }, [t._v(" " + t._s(t.copy) + " ")]), t.hasFooterSlot ? a("footer", { staticClass: "d-modal__footer" }, [t._t("footer")], 2) : t._e(), t.hideClose ? a("sr-only-close-button", { on: { close: t.close } }) : a("dt-button", { staticClass: "d-modal__close", attrs: { "data-qa": "dt-modal-close-button", size: "md", kind: "muted", importance: "clear", "aria-label": t.closeButtonTitle, title: t.closeButtonTitle }, on: { click: t.close }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: o }) {
+    return [a("dt-icon-close", { attrs: { size: o } })];
+  } }]) })], 1)])], 1)], 1);
+}, C = [], $ = /* @__PURE__ */ y(
+  S,
+  w,
+  C
 );
-const L = w.exports;
+const N = $.exports;
 export {
-  L as default
+  N as default
 };
 //# sourceMappingURL=modal.js.map

package/dist/lib/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && ($slots.banner || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"$slots.header\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"$slots.default\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <sr-only-close-button\n          v-if=\"hideClose\"\n          @close=\"close\"\n        />\n        <dt-button\n          v-else\n          class=\"d-modal__close\"\n          data-qa=\"dt-modal-close-button\"\n          size=\"md\"\n          kind=\"muted\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonTitle\"\n          :title=\"closeButtonTitle\"\n          @click=\"close\"\n        >\n          <template #icon=\"{ iconSize }\">\n            <dt-icon-close\n              :size=\"iconSize\"\n            />\n          </template>\n        </dt-button>\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\nimport { DialtoneLocalization } from '@/localization';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIconClose,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, 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     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          // Handle backdrop clicks for closing modal\n          if (this.closeOnClick && event.target === event.currentTarget) {\n            this.close();\n          } else if (this.show && event.target !== event.currentTarget) {\n            // Ensure focus stays within modal when clicking inside it\n            this.handleModalClick(event);\n          }\n\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': async () => {\n          this.$emit('update:show', true);\n          await this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    show: {\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n          disableRootScrolling(this.$el.getRootNode().host);\n        } else {\n          enableRootScrolling(this.$el.getRootNode().host);\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    async setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        await this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        await this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    handleModalClick (event) {\n      // Ensure focus stays within modal when clicking inside it\n      const clickedElement = event.target;\n      const focusableElements = this._getFocusableElements();\n\n      // If the clicked element is not focusable, ensure focus stays in modal\n      if (focusableElements.length && !focusableElements.includes(clickedElement)) {\n        // Check if current active element is still within the modal\n        if (!focusableElements.includes(document.activeElement)) {\n          this.focusFirstElement();\n        }\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLazyShow","DtButton","DtIconClose","SrOnlyCloseButton","Modal","getUniqueString","k","MODAL_KIND_MODIFIERS","s","MODAL_SIZE_MODIFIERS","kind","NOTICE_KINDS","initialFocusElement","MODAL_BANNER_KINDS","EVENT_KEYNAMES","DialtoneLocalization","event","isShowing","disableRootScrolling","enableRootScrolling","_a","clickedElement","focusableElements"],"mappings":"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"}
+{"version":3,"file":"modal.js","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <portal\n    :disabled=\"!appendTo\"\n    :selector=\"appendTo\"\n  >\n    <dt-lazy-show\n      ref=\"modalRoot\"\n      transition=\"d-zoom\"\n      :show=\"show\"\n      :class=\"[\n        'd-modal',\n        MODAL_KIND_MODIFIERS[kind],\n        MODAL_SIZE_MODIFIERS[size],\n        modalClass,\n      ]\"\n      data-qa=\"dt-modal\"\n      :aria-hidden=\"open\"\n      v-on=\"modalListeners\"\n    >\n      <div\n        v-if=\"show && ($slots.banner || bannerTitle)\"\n        data-qa=\"dt-modal-banner\"\n        :class=\"[\n          'd-modal__banner',\n          bannerClass,\n          bannerKindClass,\n        ]\"\n      >\n        <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n        <slot name=\"banner\">\n          {{ bannerTitle }}\n        </slot>\n      </div>\n      <transition\n        appear\n        name=\"d-modal__dialog\"\n      >\n        <div\n          v-show=\"show\"\n          :class=\"[\n            'd-modal__dialog',\n            { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n            dialogClass,\n          ]\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          :aria-describedby=\"describedById\"\n          :aria-labelledby=\"labelledById\"\n        >\n          <div\n            v-if=\"$slots.header\"\n            :id=\"labelledById\"\n            class=\"d-modal__header\"\n            data-qa=\"dt-modal-title\"\n          >\n            <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n            <slot name=\"header\" />\n          </div>\n          <h2\n            v-else\n            :id=\"labelledById\"\n            class=\"d-modal__header\"\n            data-qa=\"dt-modal-title\"\n          >\n            {{ title }}\n          </h2>\n          <div\n            v-if=\"$slots.default\"\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n            <slot />\n          </div>\n          <p\n            v-else\n            :class=\"[\n              'd-modal__content',\n              contentClass,\n            ]\"\n            data-qa=\"dt-modal-copy\"\n          >\n            {{ copy }}\n          </p>\n          <footer\n            v-if=\"hasFooterSlot\"\n            class=\"d-modal__footer\"\n          >\n            <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n            <slot name=\"footer\" />\n          </footer>\n          <sr-only-close-button\n            v-if=\"hideClose\"\n            @close=\"close\"\n          />\n          <dt-button\n            v-else\n            class=\"d-modal__close\"\n            data-qa=\"dt-modal-close-button\"\n            size=\"md\"\n            kind=\"muted\"\n            importance=\"clear\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon=\"{ iconSize }\">\n              <dt-icon-close\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-button>\n        </div>\n      </transition>\n    </dt-lazy-show>\n  </portal>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\nimport { DialtoneLocalization } from '@/localization';\nimport { Portal } from '@linusborg/vue-simple-portal';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIconClose,\n    SrOnlyCloseButton,\n    Portal,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, 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     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n\n    /**\n     * A CSS selector string for the element to portal the modal to. If not provided, the modal will be rendered in its default location.\n     */\n    appendTo: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  emits: [\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        ...this.$listeners,\n\n        click: event => {\n          // Handle backdrop clicks for closing modal\n          if (this.closeOnClick && event.target === event.currentTarget) {\n            this.close();\n          } else if (this.show && event.target !== event.currentTarget) {\n            // Ensure focus stays within modal when clicking inside it\n            this.handleModalClick(event);\n          }\n\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': async () => {\n          this.$emit('update:show', true);\n          await this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    show: {\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n          const modalEl = this.$refs.modalRoot?.$el || this.$el;\n          disableRootScrolling(modalEl.getRootNode().host);\n        } else {\n          const modalEl = this.$refs.modalRoot?.$el || this.$el;\n          enableRootScrolling(modalEl.getRootNode().host);\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    async setFocusAfterTransition () {\n      const modalEl = this.$refs.modalRoot?.$el || this.$el;\n      if (this.initialFocusElement === 'first') {\n        await this.focusFirstElement(modalEl);\n      } else if (this.initialFocusElement.startsWith('#')) {\n        await this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        const modalEl = this.$refs.modalRoot?.$el || this.$el;\n        this.focusTrappedTabPress(e, modalEl);\n      }\n    },\n\n    handleModalClick (event) {\n      // Ensure focus stays within modal when clicking inside it\n      const clickedElement = event.target;\n      const modalEl = this.$refs.modalRoot?.$el || this.$el;\n      const focusableElements = this._getFocusableElements(modalEl);\n\n      // If the clicked element is not focusable, ensure focus stays in modal\n      if (focusableElements.length && !focusableElements.includes(clickedElement)) {\n        // Check if current active element is still within the modal\n        if (!focusableElements.includes(document.activeElement)) {\n          this.focusFirstElement(modalEl);\n        }\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtLazyShow","DtButton","DtIconClose","SrOnlyCloseButton","Portal","Modal","getUniqueString","k","MODAL_KIND_MODIFIERS","s","MODAL_SIZE_MODIFIERS","kind","NOTICE_KINDS","initialFocusElement","MODAL_BANNER_KINDS","EVENT_KEYNAMES","DialtoneLocalization","event","isShowing","modalEl","_a","disableRootScrolling","_b","enableRootScrolling","_c","clickedElement","focusableElements"],"mappings":"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"}

package/dist/lib/popover/popover.cjs

@@ -1,2 +1,2 @@
-"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":()=>{this.onLeaveTransitionComplete()},"after-enter":()=>{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;
+"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":()=>{this.onLeaveTransitionComplete()},"after-enter":()=>{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",attrs:{"aria-hidden":"false"},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