@dialpad/dialtone-vue 2.200.0-beta.1 → 2.201.0-next.1

package/dist/dialtone-vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"dialtone-vue.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/filter-pill/filter-pill.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),s=require("../../localization/index.cjs"),c=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),p=require("../button/button.cjs"),u=require("../popover/popover.cjs"),d=require("../checkbox/checkbox.cjs"),_=require("../checkbox-group/checkbox-group.cjs"),f=require("../button/button-constants.cjs"),n=require("../popover/popover-constants.cjs"),v={name:"DtFilterPill",components:{DtCheckboxGroup:_.default,DtCheckbox:d.default,DtPopover:u.default,DtButton:p.default,DtIconClose:r.DtIconClose,DtIconChevronDown:r.DtIconChevronDown},inheritAttrs:!1,props:{value:{type:Array,default:()=>[]},alphaTooltipText:{type:String,default:""},disabled:{type:Boolean,default:!1},hideClear:{type:Boolean,default:!1},label:{type:String,default:void 0},omegaTooltipText:{type:String,default:""},popoverAppendTo:{type:[HTMLElement,String],default:"body",validator:t=>n.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement},popoverFallbackPlacements:{type:Array,default:()=>["auto"]},popoverMaxHeight:{type:String,default:""},popoverMaxWidth:{type:String,default:""},popoverPadding:{type:String,default:"large",validator:t=>Object.keys(n.POPOVER_PADDING_CLASSES).some(e=>e===t)},popoverPlacement:{type:String,default:"bottom-start"},size:{type:String,default:"sm",validator:t=>Object.keys(f.BUTTON_SIZE_MODIFIERS).includes(t)}},emits:["clear","open","update:value"],data(){return{isOpen:!1,i18n:new s.DialtoneLocalization,filters:this.value}},computed:{buttonKind(){return this.isActive?"default":"muted"},clearButtonAriaLabel(){return this.omegaTooltipText||this.i18n.$t("DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL")},clearButtonTitle(){if(!this.omegaTooltipText)return this.clearButtonAriaLabel},activeFilters(){return this.filters.filter(t=>t.active).map(t=>t.name)},activeFilterList(){return this.activeFilters.length<=2?this.activeFilters.join(", "):this.activeFilters.slice(0,2).join(", ")+", + "+(this.activeFilters.length-2)},isActive(){return this.activeFilterList.length>0},hasClear(){return!this.hideClear&&this.activeFilterList.length>0}},watch:{isOpen(t){this.$emit("open",t)},filters(t){this.$emit("update:value",t)}},methods:{clearFilter(t){this.filters=this.filters.map(e=>(delete e.active,e)),this.$emit("clear",t)},updateFilters(t,e){this.filters=this.filters.map(i=>i.name!==t.name?i:{...i,active:e})}}};var h=function(){var e=this,i=e._self._c;return i("div",{staticClass:"d-filter-pill",attrs:{"data-qa":"dt-filter-pill"}},[i("dt-popover",{attrs:{"append-to":e.popoverAppendTo,"fallback-placements":e.popoverFallbackPlacements,"max-height":e.popoverMaxHeight,"max-width":e.popoverMaxWidth,modal:!1,padding:e.popoverPadding,placement:e.popoverPlacement},scopedSlots:e._u([{key:"anchor",fn:function({attrs:l}){return[i("dt-button",e._b({directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:e.alphaTooltipText,expression:"alphaTooltipText"}],class:["d-filter-pill__primary",{"d-filter-pill--selected":e.isActive,"d-filter-pill__primary--has-clear":e.hasClear}],attrs:{active:e.isActive,disabled:e.disabled,kind:e.buttonKind,size:e.size,"data-qa":"dt-filter-pill__button","icon-position":"right",importance:"outlined"},on:{click:function(a){e.isOpen=!0}},scopedSlots:e._u([{key:"icon",fn:function({iconSize:a}){return[i("dt-icon-chevron-down",{staticClass:"d-filter-pill__icon",attrs:{size:a,"data-qa":"dt-filter-pill__icon"}})]}}],null,!0)},"dt-button",l,!1),[i("span",{staticClass:"d-filter-pill__label"},[e._t("default",function(){return[i("span",{staticClass:"d-filter-pill__label-alpha",domProps:{textContent:e._s(e.label)}}),e.activeFilterList?i("span",{staticClass:"d-filter-pill__label-omega",domProps:{textContent:e._s(e.activeFilterList)}}):e._e()]})],2)])]}},{key:"content",fn:function({close:l}){return[e._t("content",function(){return[e.value.length?i("dt-checkbox-group",{attrs:{"selected-values":e.activeFilters,"aria-label":e.label,name:"contact-centers"}},e._l(e.filters,function(a){return i("dt-checkbox",{key:a.name,attrs:{label:a.name,value:a.name},on:{input:o=>e.updateFilters(a,o)}})}),1):e._e()]},{close:l})]}}],null,!0),model:{value:e.isOpen,callback:function(l){e.isOpen=l},expression:"isOpen"}}),e.hasClear?i("dt-button",{directives:[{name:"dt-tooltip",rawName:"v-dt-tooltip",value:e.omegaTooltipText,expression:"omegaTooltipText"}],class:["d-filter-pill__clear",{"d-filter-pill__clear--selected":e.isActive}],attrs:{active:e.isActive,"aria-label":e.clearButtonAriaLabel,disabled:e.disabled,kind:e.buttonKind,size:e.size,title:e.clearButtonTitle,"data-qa":"dt-filter-pill__clear-button",importance:"outlined"},on:{click:e.clearFilter},scopedSlots:e._u([{key:"icon",fn:function({iconSize:l}){return[i("dt-icon-close",{attrs:{size:l}})]}}],null,!1,2924703597)}):e._e()],1)},m=[],b=c.n(v,h,m);const g=b.exports;exports.default=g;
+//# sourceMappingURL=filter-pill.cjs.map

package/dist/lib/filter-pill/filter-pill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-pill.cjs","sources":["../../../components/filter_pill/filter_pill.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-filter-pill\"\n    data-qa=\"dt-filter-pill\"\n  >\n    <dt-popover\n      v-model=\"isOpen\"\n      :append-to=\"popoverAppendTo\"\n      :fallback-placements=\"popoverFallbackPlacements\"\n      :max-height=\"popoverMaxHeight\"\n      :max-width=\"popoverMaxWidth\"\n      :modal=\"false\"\n      :padding=\"popoverPadding\"\n      :placement=\"popoverPlacement\"\n    >\n      <template #anchor=\"{ attrs }\">\n        <dt-button\n          v-dt-tooltip=\"alphaTooltipText\"\n          v-bind=\"attrs\"\n          :active=\"isActive\"\n          :class=\"[\n            'd-filter-pill__primary',\n            {\n              'd-filter-pill--selected': isActive,\n              'd-filter-pill__primary--has-clear': hasClear,\n            },\n          ]\"\n          :disabled=\"disabled\"\n          :kind=\"buttonKind\"\n          :size=\"size\"\n          data-qa=\"dt-filter-pill__button\"\n          icon-position=\"right\"\n          importance=\"outlined\"\n          @click=\"isOpen = true\"\n        >\n          <span class=\"d-filter-pill__label\">\n            <!-- @slot Allows you to override the label behavior -->\n            <slot>\n              <span\n                class=\"d-filter-pill__label-alpha\"\n                v-text=\"label\"\n              />\n              <span\n                v-if=\"activeFilterList\"\n                class=\"d-filter-pill__label-omega\"\n                v-text=\"activeFilterList\"\n              />\n            </slot>\n          </span>\n          <template #icon=\"{ iconSize }\">\n            <dt-icon-chevron-down\n              :size=\"iconSize\"\n              class=\"d-filter-pill__icon\"\n              data-qa=\"dt-filter-pill__icon\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template #content=\"{ close }\">\n        <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n        <slot\n          :close=\"close\"\n          name=\"content\"\n        >\n          <dt-checkbox-group\n            v-if=\"value.length\"\n            :selected-values=\"activeFilters\"\n            :aria-label=\"label\"\n            name=\"contact-centers\"\n          >\n            <dt-checkbox\n              v-for=\"filter in filters\"\n              :key=\"filter.name\"\n              :label=\"filter.name\"\n              :value=\"filter.name\"\n              @input=\"$event => updateFilters(filter, $event)\"\n            />\n          </dt-checkbox-group>\n        </slot>\n      </template>\n    </dt-popover>\n    <dt-button\n      v-if=\"hasClear\"\n      v-dt-tooltip=\"omegaTooltipText\"\n      :active=\"isActive\"\n      :aria-label=\"clearButtonAriaLabel\"\n      :class=\"[\n        'd-filter-pill__clear',\n        { 'd-filter-pill__clear--selected': isActive },\n      ]\"\n      :disabled=\"disabled\"\n      :kind=\"buttonKind\"\n      :size=\"size\"\n      :title=\"clearButtonTitle\"\n      data-qa=\"dt-filter-pill__clear-button\"\n      importance=\"outlined\"\n      @click=\"clearFilter\"\n    >\n      <template #icon=\"{ iconSize }\">\n        <dt-icon-close :size=\"iconSize\" />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/popover';\nimport { BUTTON_SIZE_MODIFIERS, DtButton } from '@/components/button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/checkbox';\nimport { DtCheckboxGroup } from '@/components/checkbox_group';\n\nexport default {\n  name: 'DtFilterPill',\n\n  components: {\n    DtCheckboxGroup,\n    DtCheckbox,\n    DtPopover,\n    DtButton,\n    DtIconClose,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Array of filters to display in the popover,\n     * should be an array of objects with `name` and `active` properties\n     */\n    value: {\n      type: Array,\n      default: () => [],\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * HTML disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Toggles the clear button visibility\n     * @values true, false\n     */\n    hideClear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label of the button\n     */\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/popover.html#vue-api\" target=\"_blank\">popover component</a>\n     *  is going to append to\n     * @values body, parent, root, HTMLElement\n     */\n    popoverAppendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n          (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"popoverPlacement\",\n     * it will attempt to change it's direction to the \"popoverFallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    popoverFallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    popoverMaxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    popoverMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    popoverPadding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a class=\"d-link\" href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\">Tippy.js docs</a>\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    popoverPlacement: {\n      type: String,\n      default: 'bottom-start',\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'sm',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when clicking the clear button\n     *\n     * @event clear\n     * @type {Boolean | Array}\n     */\n    'clear',\n\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'open',\n\n    /**\n     * Emitted when the active filters change\n     * @type {Array}\n     */\n    'update:value',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n      filters: this.value,\n    };\n  },\n\n  computed: {\n    buttonKind () {\n      return this.isActive ? 'default': 'muted';\n    },\n\n    clearButtonAriaLabel () {\n      return this.omegaTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n    },\n\n    clearButtonTitle () {\n      if (this.omegaTooltipText) return;\n\n      return this.clearButtonAriaLabel\n    },\n\n    activeFilters () {\n      return this.filters.filter(filter => filter.active).map(filter => filter.name);\n    },\n\n    activeFilterList () {\n      if (this.activeFilters.length <= 2) {\n        return this.activeFilters.join(', ');\n      }\n\n      return this.activeFilters.slice(0, 2).join(', ') + ', + ' + (this.activeFilters.length - 2);\n    },\n\n    isActive () {\n      return this.activeFilterList.length > 0;\n    },\n\n    hasClear () {\n      return !this.hideClear && this.activeFilterList.length > 0;\n    },\n  },\n\n  watch: {\n    isOpen (isOpen) {\n      this.$emit('open', isOpen);\n    },\n\n    filters (filters) {\n      this.$emit('update:value', filters);\n    },\n  },\n\n  methods: {\n    clearFilter ($event) {\n      this.filters = this.filters.map(filter => {\n        delete filter.active\n        return filter;\n      });\n      this.$emit('clear', $event)\n    },\n\n    updateFilters (filter, isActive) {\n      this.filters = this.filters.map(f => {\n        if (f.name !== filter.name) return f;\n\n        return {...f, active: isActive};\n      })\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtCheckboxGroup","DtCheckbox","DtPopover","DtButton","DtIconClose","DtIconChevronDown","appendTo","POPOVER_APPEND_TO_VALUES","padding","POPOVER_PADDING_CLASSES","item","s","BUTTON_SIZE_MODIFIERS","DialtoneLocalization","filter","isOpen","filters","$event","isActive","f"],"mappings":"sfAiHAA,EAAA,CACA,KAAA,eAEA,WAAA,CACA,gBAAAC,EAAAA,QACA,WAAAC,EAAAA,QACA,UAAAC,EAAAA,QACA,SAAAC,EAAAA,QACA,YAAAC,EAAAA,YACA,kBAAAC,EAAAA,iBACA,EAEA,aAAA,GAEA,MAAA,CAKA,MAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,CACA,EAMA,iBAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,UAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,MAAA,CACA,KAAA,OACA,QAAA,MACA,EAMA,iBAAA,CACA,KAAA,OACA,QAAA,EACA,EAQA,gBAAA,CACA,KAAA,CAAA,YAAA,MAAA,EACA,QAAA,OACA,UAAAC,GACAC,EAAAA,yBAAA,SAAAD,CAAA,GACAA,aAAA,WAEA,EAYA,0BAAA,CACA,KAAA,MACA,QAAA,IACA,CAAA,MAAA,CAEA,EAMA,iBAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,gBAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,eAAA,CACA,KAAA,OACA,QAAA,QACA,UAAAE,GACA,OAAA,KAAAC,yBAAA,EAAA,KAAAC,GAAAA,IAAAF,CAAA,CAEA,EAOA,iBAAA,CACA,KAAA,OACA,QAAA,cACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,KACA,UAAAG,GAAA,OAAA,KAAAC,uBAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAEA,MAAA,CAOA,QAQA,OAMA,cACA,EAEA,MAAA,CACA,MAAA,CACA,OAAA,GACA,KAAA,IAAAE,EAAAA,qBACA,QAAA,KAAA,KACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAA,KAAA,SAAA,UAAA,OACA,EAEA,sBAAA,CACA,OAAA,KAAA,kBAAA,KAAA,KAAA,GAAA,yCAAA,CACA,EAEA,kBAAA,CACA,GAAA,MAAA,iBAEA,OAAA,KAAA,oBACA,EAEA,eAAA,CACA,OAAA,KAAA,QAAA,OAAAC,GAAAA,EAAA,MAAA,EAAA,IAAAA,GAAAA,EAAA,IAAA,CACA,EAEA,kBAAA,CACA,OAAA,KAAA,cAAA,QAAA,EACA,KAAA,cAAA,KAAA,IAAA,EAGA,KAAA,cAAA,MAAA,EAAA,CAAA,EAAA,KAAA,IAAA,EAAA,QAAA,KAAA,cAAA,OAAA,EACA,EAEA,UAAA,CACA,OAAA,KAAA,iBAAA,OAAA,CACA,EAEA,UAAA,CACA,MAAA,CAAA,KAAA,WAAA,KAAA,iBAAA,OAAA,CACA,CACA,EAEA,MAAA,CACA,OAAAC,EAAA,CACA,KAAA,MAAA,OAAAA,CAAA,CACA,EAEA,QAAAC,EAAA,CACA,KAAA,MAAA,eAAAA,CAAA,CACA,CACA,EAEA,QAAA,CACA,YAAAC,EAAA,CACA,KAAA,QAAA,KAAA,QAAA,IAAAH,IACA,OAAAA,EAAA,OACAA,EACA,EACA,KAAA,MAAA,QAAAG,CAAA,CACA,EAEA,cAAAH,EAAAI,EAAA,CACA,KAAA,QAAA,KAAA,QAAA,IAAAC,GACAA,EAAA,OAAAL,EAAA,KAAAK,EAEA,CAAA,GAAAA,EAAA,OAAAD,CAAA,CACA,CACA,CACA,CACA"}

package/dist/lib/filter-pill/filter-pill.js

@@ -0,0 +1,245 @@
+import { DtIconChevronDown as o, DtIconClose as n } from "@dialpad/dialtone-icons/vue2";
+import { DialtoneLocalization as s } from "../../localization/index.js";
+import { n as p } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import c from "../button/button.js";
+import d from "../popover/popover.js";
+import u from "../checkbox/checkbox.js";
+import f from "../checkbox-group/checkbox-group.js";
+import { BUTTON_SIZE_MODIFIERS as m } from "../button/button-constants.js";
+import { POPOVER_PADDING_CLASSES as v, POPOVER_APPEND_TO_VALUES as _ } from "../popover/popover-constants.js";
+const h = {
+  name: "DtFilterPill",
+  components: {
+    DtCheckboxGroup: f,
+    DtCheckbox: u,
+    DtPopover: d,
+    DtButton: c,
+    DtIconClose: n,
+    DtIconChevronDown: o
+  },
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Array of filters to display in the popover,
+     * should be an array of objects with `name` and `active` properties
+     */
+    value: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Text shown in tooltip when you hover the alpha button,
+     * required if no content is passed to default slot
+     */
+    alphaTooltipText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * HTML disabled attribute
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Toggles the clear button visibility
+     * @values true, false
+     */
+    hideClear: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Label of the button
+     */
+    label: {
+      type: String,
+      default: void 0
+    },
+    /**
+     * Text shown in tooltip when you hover the omega button,
+     * required as it is an icon only button
+     */
+    omegaTooltipText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Sets the element to which the
+     * <a class="d-link" href="https://dialtone.dialpad.com/components/popover.html#vue-api" target="_blank">popover component</a>
+     *  is going to append to
+     * @values body, parent, root, HTMLElement
+     */
+    popoverAppendTo: {
+      type: [HTMLElement, String],
+      default: "body",
+      validator: (e) => _.includes(e) || e instanceof HTMLElement
+    },
+    /**
+     * If the dropdown does not fit in the direction described by "popoverPlacement",
+     * it will attempt to change it's direction to the "popoverFallbackPlacements".
+     *
+     * @values top, top-start, top-end,
+     * right, right-start, right-end,
+     * left, left-start, left-end,
+     * bottom, bottom-start, bottom-end,
+     * auto, auto-start, auto-end
+     * */
+    popoverFallbackPlacements: {
+      type: Array,
+      default: () => ["auto"]
+    },
+    /**
+     * Determines maximum height for the popover before overflow.
+     * Possible units rem|px|em
+     */
+    popoverMaxHeight: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Determines maximum width for the popover before overflow.
+     * Possible units rem|px|%|em
+     */
+    popoverMaxWidth: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Padding size class for the popover content.
+     * @values none, small, medium, large
+     */
+    popoverPadding: {
+      type: String,
+      default: "large",
+      validator: (e) => Object.keys(v).some((t) => t === e)
+    },
+    /**
+     * The direction the popover displays relative to the anchor.
+     * <a class="d-link" href="https://atomiks.github.io/tippyjs/v6/all-props/#placement" target="_blank">Tippy.js docs</a>
+     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end
+     */
+    popoverPlacement: {
+      type: String,
+      default: "bottom-start"
+    },
+    /**
+     * The size of the button.
+     * @values xs, sm, md, lg, xl
+     */
+    size: {
+      type: String,
+      default: "sm",
+      validator: (e) => Object.keys(m).includes(e)
+    }
+  },
+  emits: [
+    /**
+     * Emitted when clicking the clear button
+     *
+     * @event clear
+     * @type {Boolean | Array}
+     */
+    "clear",
+    /**
+     * Emitted when popover is shown or hidden
+     *
+     * @event opened
+     * @type {Boolean | Array}
+     */
+    "open",
+    /**
+     * Emitted when the active filters change
+     * @type {Array}
+     */
+    "update:value"
+  ],
+  data() {
+    return {
+      isOpen: !1,
+      i18n: new s(),
+      filters: this.value
+    };
+  },
+  computed: {
+    buttonKind() {
+      return this.isActive ? "default" : "muted";
+    },
+    clearButtonAriaLabel() {
+      return this.omegaTooltipText || this.i18n.$t("DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL");
+    },
+    clearButtonTitle() {
+      if (!this.omegaTooltipText)
+        return this.clearButtonAriaLabel;
+    },
+    activeFilters() {
+      return this.filters.filter((e) => e.active).map((e) => e.name);
+    },
+    activeFilterList() {
+      return this.activeFilters.length <= 2 ? this.activeFilters.join(", ") : this.activeFilters.slice(0, 2).join(", ") + ", + " + (this.activeFilters.length - 2);
+    },
+    isActive() {
+      return this.activeFilterList.length > 0;
+    },
+    hasClear() {
+      return !this.hideClear && this.activeFilterList.length > 0;
+    }
+  },
+  watch: {
+    isOpen(e) {
+      this.$emit("open", e);
+    },
+    filters(e) {
+      this.$emit("update:value", e);
+    }
+  },
+  methods: {
+    clearFilter(e) {
+      this.filters = this.filters.map((t) => (delete t.active, t)), this.$emit("clear", e);
+    },
+    updateFilters(e, t) {
+      this.filters = this.filters.map((i) => i.name !== e.name ? i : { ...i, active: t });
+    }
+  }
+};
+var b = function() {
+  var t = this, i = t._self._c;
+  return i("div", { staticClass: "d-filter-pill", attrs: { "data-qa": "dt-filter-pill" } }, [i("dt-popover", { attrs: { "append-to": t.popoverAppendTo, "fallback-placements": t.popoverFallbackPlacements, "max-height": t.popoverMaxHeight, "max-width": t.popoverMaxWidth, modal: !1, padding: t.popoverPadding, placement: t.popoverPlacement }, scopedSlots: t._u([{ key: "anchor", fn: function({ attrs: l }) {
+    return [i("dt-button", t._b({ directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.alphaTooltipText, expression: "alphaTooltipText" }], class: [
+      "d-filter-pill__primary",
+      {
+        "d-filter-pill--selected": t.isActive,
+        "d-filter-pill__primary--has-clear": t.hasClear
+      }
+    ], attrs: { active: t.isActive, disabled: t.disabled, kind: t.buttonKind, size: t.size, "data-qa": "dt-filter-pill__button", "icon-position": "right", importance: "outlined" }, on: { click: function(a) {
+      t.isOpen = !0;
+    } }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: a }) {
+      return [i("dt-icon-chevron-down", { staticClass: "d-filter-pill__icon", attrs: { size: a, "data-qa": "dt-filter-pill__icon" } })];
+    } }], null, !0) }, "dt-button", l, !1), [i("span", { staticClass: "d-filter-pill__label" }, [t._t("default", function() {
+      return [i("span", { staticClass: "d-filter-pill__label-alpha", domProps: { textContent: t._s(t.label) } }), t.activeFilterList ? i("span", { staticClass: "d-filter-pill__label-omega", domProps: { textContent: t._s(t.activeFilterList) } }) : t._e()];
+    })], 2)])];
+  } }, { key: "content", fn: function({ close: l }) {
+    return [t._t("content", function() {
+      return [t.value.length ? i("dt-checkbox-group", { attrs: { "selected-values": t.activeFilters, "aria-label": t.label, name: "contact-centers" } }, t._l(t.filters, function(a) {
+        return i("dt-checkbox", { key: a.name, attrs: { label: a.name, value: a.name }, on: { input: (r) => t.updateFilters(a, r) } });
+      }), 1) : t._e()];
+    }, { close: l })];
+  } }], null, !0), model: { value: t.isOpen, callback: function(l) {
+    t.isOpen = l;
+  }, expression: "isOpen" } }), t.hasClear ? i("dt-button", { directives: [{ name: "dt-tooltip", rawName: "v-dt-tooltip", value: t.omegaTooltipText, expression: "omegaTooltipText" }], class: [
+    "d-filter-pill__clear",
+    { "d-filter-pill__clear--selected": t.isActive }
+  ], attrs: { active: t.isActive, "aria-label": t.clearButtonAriaLabel, disabled: t.disabled, kind: t.buttonKind, size: t.size, title: t.clearButtonTitle, "data-qa": "dt-filter-pill__clear-button", importance: "outlined" }, on: { click: t.clearFilter }, scopedSlots: t._u([{ key: "icon", fn: function({ iconSize: l }) {
+    return [i("dt-icon-close", { attrs: { size: l } })];
+  } }], null, !1, 2924703597) }) : t._e()], 1);
+}, g = [], T = /* @__PURE__ */ p(
+  h,
+  b,
+  g
+);
+const O = T.exports;
+export {
+  O as default
+};
+//# sourceMappingURL=filter-pill.js.map

package/dist/lib/filter-pill/filter-pill.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-pill.js","sources":["../../../components/filter_pill/filter_pill.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-filter-pill\"\n    data-qa=\"dt-filter-pill\"\n  >\n    <dt-popover\n      v-model=\"isOpen\"\n      :append-to=\"popoverAppendTo\"\n      :fallback-placements=\"popoverFallbackPlacements\"\n      :max-height=\"popoverMaxHeight\"\n      :max-width=\"popoverMaxWidth\"\n      :modal=\"false\"\n      :padding=\"popoverPadding\"\n      :placement=\"popoverPlacement\"\n    >\n      <template #anchor=\"{ attrs }\">\n        <dt-button\n          v-dt-tooltip=\"alphaTooltipText\"\n          v-bind=\"attrs\"\n          :active=\"isActive\"\n          :class=\"[\n            'd-filter-pill__primary',\n            {\n              'd-filter-pill--selected': isActive,\n              'd-filter-pill__primary--has-clear': hasClear,\n            },\n          ]\"\n          :disabled=\"disabled\"\n          :kind=\"buttonKind\"\n          :size=\"size\"\n          data-qa=\"dt-filter-pill__button\"\n          icon-position=\"right\"\n          importance=\"outlined\"\n          @click=\"isOpen = true\"\n        >\n          <span class=\"d-filter-pill__label\">\n            <!-- @slot Allows you to override the label behavior -->\n            <slot>\n              <span\n                class=\"d-filter-pill__label-alpha\"\n                v-text=\"label\"\n              />\n              <span\n                v-if=\"activeFilterList\"\n                class=\"d-filter-pill__label-omega\"\n                v-text=\"activeFilterList\"\n              />\n            </slot>\n          </span>\n          <template #icon=\"{ iconSize }\">\n            <dt-icon-chevron-down\n              :size=\"iconSize\"\n              class=\"d-filter-pill__icon\"\n              data-qa=\"dt-filter-pill__icon\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template #content=\"{ close }\">\n        <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n        <slot\n          :close=\"close\"\n          name=\"content\"\n        >\n          <dt-checkbox-group\n            v-if=\"value.length\"\n            :selected-values=\"activeFilters\"\n            :aria-label=\"label\"\n            name=\"contact-centers\"\n          >\n            <dt-checkbox\n              v-for=\"filter in filters\"\n              :key=\"filter.name\"\n              :label=\"filter.name\"\n              :value=\"filter.name\"\n              @input=\"$event => updateFilters(filter, $event)\"\n            />\n          </dt-checkbox-group>\n        </slot>\n      </template>\n    </dt-popover>\n    <dt-button\n      v-if=\"hasClear\"\n      v-dt-tooltip=\"omegaTooltipText\"\n      :active=\"isActive\"\n      :aria-label=\"clearButtonAriaLabel\"\n      :class=\"[\n        'd-filter-pill__clear',\n        { 'd-filter-pill__clear--selected': isActive },\n      ]\"\n      :disabled=\"disabled\"\n      :kind=\"buttonKind\"\n      :size=\"size\"\n      :title=\"clearButtonTitle\"\n      data-qa=\"dt-filter-pill__clear-button\"\n      importance=\"outlined\"\n      @click=\"clearFilter\"\n    >\n      <template #icon=\"{ iconSize }\">\n        <dt-icon-close :size=\"iconSize\" />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/popover';\nimport { BUTTON_SIZE_MODIFIERS, DtButton } from '@/components/button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue2';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/checkbox';\nimport { DtCheckboxGroup } from '@/components/checkbox_group';\n\nexport default {\n  name: 'DtFilterPill',\n\n  components: {\n    DtCheckboxGroup,\n    DtCheckbox,\n    DtPopover,\n    DtButton,\n    DtIconClose,\n    DtIconChevronDown,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Array of filters to display in the popover,\n     * should be an array of objects with `name` and `active` properties\n     */\n    value: {\n      type: Array,\n      default: () => [],\n    },\n\n    /**\n     * Text shown in tooltip when you hover the alpha button,\n     * required if no content is passed to default slot\n     */\n    alphaTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * HTML disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Toggles the clear button visibility\n     * @values true, false\n     */\n    hideClear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label of the button\n     */\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the omega button,\n     * required as it is an icon only button\n     */\n    omegaTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/popover.html#vue-api\" target=\"_blank\">popover component</a>\n     *  is going to append to\n     * @values body, parent, root, HTMLElement\n     */\n    popoverAppendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n          (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"popoverPlacement\",\n     * it will attempt to change it's direction to the \"popoverFallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    popoverFallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    popoverMaxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    popoverMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    popoverPadding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a class=\"d-link\" href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\">Tippy.js docs</a>\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    popoverPlacement: {\n      type: String,\n      default: 'bottom-start',\n    },\n\n    /**\n     * The size of the button.\n     * @values xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: 'sm',\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(s),\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when clicking the clear button\n     *\n     * @event clear\n     * @type {Boolean | Array}\n     */\n    'clear',\n\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'open',\n\n    /**\n     * Emitted when the active filters change\n     * @type {Array}\n     */\n    'update:value',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n      filters: this.value,\n    };\n  },\n\n  computed: {\n    buttonKind () {\n      return this.isActive ? 'default': 'muted';\n    },\n\n    clearButtonAriaLabel () {\n      return this.omegaTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n    },\n\n    clearButtonTitle () {\n      if (this.omegaTooltipText) return;\n\n      return this.clearButtonAriaLabel\n    },\n\n    activeFilters () {\n      return this.filters.filter(filter => filter.active).map(filter => filter.name);\n    },\n\n    activeFilterList () {\n      if (this.activeFilters.length <= 2) {\n        return this.activeFilters.join(', ');\n      }\n\n      return this.activeFilters.slice(0, 2).join(', ') + ', + ' + (this.activeFilters.length - 2);\n    },\n\n    isActive () {\n      return this.activeFilterList.length > 0;\n    },\n\n    hasClear () {\n      return !this.hideClear && this.activeFilterList.length > 0;\n    },\n  },\n\n  watch: {\n    isOpen (isOpen) {\n      this.$emit('open', isOpen);\n    },\n\n    filters (filters) {\n      this.$emit('update:value', filters);\n    },\n  },\n\n  methods: {\n    clearFilter ($event) {\n      this.filters = this.filters.map(filter => {\n        delete filter.active\n        return filter;\n      });\n      this.$emit('clear', $event)\n    },\n\n    updateFilters (filter, isActive) {\n      this.filters = this.filters.map(f => {\n        if (f.name !== filter.name) return f;\n\n        return {...f, active: isActive};\n      })\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtCheckboxGroup","DtCheckbox","DtPopover","DtButton","DtIconClose","DtIconChevronDown","appendTo","POPOVER_APPEND_TO_VALUES","padding","POPOVER_PADDING_CLASSES","item","s","BUTTON_SIZE_MODIFIERS","DialtoneLocalization","filter","isOpen","filters","$event","isActive","f"],"mappings":"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"}

package/dist/lib/filter-pill/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("./filter-pill.cjs");exports.DtFilterPill=l.default;
+//# sourceMappingURL=index.cjs.map

package/dist/lib/filter-pill/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/lib/filter-pill/index.js

@@ -0,0 +1,5 @@
+import { default as e } from "./filter-pill.js";
+export {
+  e as DtFilterPill
+};
+//# sourceMappingURL=index.js.map

package/dist/lib/filter-pill/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

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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"}