@dialpad/dialtone-vue 3.218.2 → 3.218.4

package/dist/lib/icon/icon.js

@@ -1,60 +1,53 @@
-import { icons as t } from "@dialpad/dialtone-icons/vue3";
-import { ICON_NAMES as i, ICON_SIZE_MODIFIERS as n } from "./icon-constants.js";
-import { openBlock as o, createBlock as c, resolveDynamicComponent as s, createCommentVNode as d } from "vue";
-import { _ as l } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-const m = {
-  compatConfig: { MODE: 3 },
-  name: "DtIcon",
-  props: {
-    /**
-     * The size of the icon.
-     * @values 100, 200, 300, 400, 500, 600, 700, 800
-     */
-    size: {
-      type: String,
-      default: "500",
-      validator: (e) => Object.keys(n).includes(e)
-    },
-    /**
-     * The icon name in kebab-case
-     */
-    name: {
-      type: String,
-      required: !0,
-      validator: (e) => i.includes(e)
-    },
-    /**
-     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational
-     */
-    ariaLabel: {
-      type: String,
-      default: void 0
-    }
-  },
-  data() {
-    return {
-      // i18n: new DialtoneLocalization(),
-    };
-  },
-  computed: {
-    icon() {
-      return t[`./src/icons/${this.name}.vue`];
-    },
-    iconAriaLabel() {
-      return this.ariaLabel;
-    }
-  }
+import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import { ICON_NAMES as t, ICON_SIZE_MODIFIERS as n } from "./icon-constants.js";
+import { createBlock as r, createCommentVNode as i, openBlock as a, resolveDynamicComponent as o } from "vue";
+import { icons as s } from "@dialpad/dialtone-icons/vue3";
+//#region components/icon/icon.vue
+var c = {
+	compatConfig: { MODE: 3 },
+	name: "DtIcon",
+	props: {
+		size: {
+			type: String,
+			default: "500",
+			validator: (e) => Object.keys(n).includes(e)
+		},
+		name: {
+			type: String,
+			required: !0,
+			validator: (e) => t.includes(e)
+		},
+		ariaLabel: {
+			type: String,
+			default: void 0
+		}
+	},
+	data() {
+		return {};
+	},
+	computed: {
+		icon() {
+			return s[`./src/icons/${this.name}.vue`];
+		},
+		iconAriaLabel() {
+			return this.ariaLabel;
+		}
+	}
 };
-function u(e, p, r, f, _, a) {
-  return a.icon ? (o(), c(s(a.icon), {
-    key: 0,
-    size: r.size,
-    "aria-label": a.iconAriaLabel,
-    "data-qa": e.$attrs["data-qa"] ?? "dt-icon"
-  }, null, 8, ["size", "aria-label", "data-qa"])) : d("", !0);
+function l(e, t, n, s, c, l) {
+	return l.icon ? (a(), r(o(l.icon), {
+		key: 0,
+		size: n.size,
+		"aria-label": l.iconAriaLabel,
+		"data-qa": e.$attrs["data-qa"] ?? "dt-icon"
+	}, null, 8, [
+		"size",
+		"aria-label",
+		"data-qa"
+	])) : i("", !0);
 }
-const C = /* @__PURE__ */ l(m, [["render", u]]);
-export {
-  C as default
-};
-//# sourceMappingURL=icon.js.map
+var u = /* @__PURE__ */ e(c, [["render", l]]);
+//#endregion
+export { u as default };
+
+//# sourceMappingURL=icon.js.map

package/dist/lib/icon/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue3';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './icon_constants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","name","ICON_NAMES","icons","$options","_openBlock","_createBlock","_resolveDynamicComponent","$props","_ctx"],"mappings":";;;;AAoBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM;EACtB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACC,MAAM,OAAO,KAAKC,CAAmB,EAAE,SAASD,CAAC;AAAA;;;;IAM/D,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACE,MAASC,EAAW,SAASD,CAAI;AAAA;;;;IAM/C,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;;EAIb,OAAQ;AACN,WAAO;AAAA;AAAA;EAGT;AAAA,EAEA,UAAU;AAAA,IACR,OAAQ;AACN,aAAOE,EAAM,eAAe,KAAK,IAAI,MAAM;AAAA,IAC7C;AAAA,IAEA,gBAAiB;AAGf,aAAO,KAAK;AAAA,IACd;AAAA;AAEJ;;SAnEUC,EAAA,QAFRC,EAAA,GAAAC,EAMEC,EALKH,EAAA,IAAI,GAAA;AAAA;IAER,MAAMI,EAAA;AAAA,IACN,cAAYJ,EAAA;AAAA,IACZ,WAASK,EAAA,OAAM,SAAA,KAAA;AAAA;;;"}
+{"version":3,"file":"icon.js","names":[],"sources":["../../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"iconAriaLabel\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n  />\n</template>\n\n<script>\nimport { icons } from '@dialpad/dialtone-icons/vue3';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './icon_constants';\n// import { DialtoneLocalization } from '@/localization';\n// import { toFluentKeyString } from '@/common/utils';\n\n/**\n * The Icon component provides a set of glyphs and sizes to provide context your application.\n * @see https://dialtone.dialpad.com/components/icon.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtIcon',\n\n  props: {\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * The icon name in kebab-case\n     */\n    name: {\n      type: String,\n      required: true,\n      validator: (name) => ICON_NAMES.includes(name),\n    },\n\n    /**\n     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational\n     */\n    ariaLabel: {\n      type: String,\n      default: undefined,\n    },\n  },\n\n  data () {\n    return {\n      // i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n\n    iconAriaLabel () {\n      // const fluentKey = toFluentKeyString(this.name);\n      // return this.ariaLabel || this.i18n.$t(`DIALTONE_ICON_${fluentKey}`);\n      return this.ariaLabel;\n    },\n  },\n};\n</script>\n"],"mappings":";;;;;AAoBA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,OAAO;EAKL,MAAM;GACJ,MAAM;GACN,SAAS;GACT,YAAY,MAAM,OAAO,KAAK,EAAoB,CAAC,SAAS,EAAE;GAC/D;EAKD,MAAM;GACJ,MAAM;GACN,UAAU;GACV,YAAY,MAAS,EAAW,SAAS,EAAK;GAC/C;EAKD,WAAW;GACT,MAAM;GACN,SAAS,KAAA;GACV;EACF;CAED,OAAQ;AACN,SAAO,EAEN;;CAGH,UAAU;EACR,OAAQ;AACN,UAAO,EAAM,eAAe,KAAK,KAAK;;EAGxC,gBAAiB;AAGf,UAAO,KAAK;;EAEf;CACF;;QAnES,EAAA,QAAA,GAAA,EAFR,EAME,EALK,EAAA,KAAI,EAAA;;EAER,MAAM,EAAA;EACN,cAAY,EAAA;EACZ,WAAS,EAAA,OAAM,cAAA"}

package/dist/lib/icon/index.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./icon.cjs"),e=require("./icon-constants.cjs");exports.DtIcon=o.default;exports.ICON_NAMES=e.ICON_NAMES;exports.ICON_SIZE_MODIFIERS=e.ICON_SIZE_MODIFIERS;
-//# sourceMappingURL=index.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./icon-constants.cjs`),t=require(`./icon.cjs`);exports.DtIcon=t.default,exports.ICON_NAMES=e.ICON_NAMES,exports.ICON_SIZE_MODIFIERS=e.ICON_SIZE_MODIFIERS;

package/dist/lib/icon/index.js

@@ -1,8 +1,3 @@
-import { default as r } from "./icon.js";
-import { ICON_NAMES as e, ICON_SIZE_MODIFIERS as f } from "./icon-constants.js";
-export {
-  r as DtIcon,
-  e as ICON_NAMES,
-  f as ICON_SIZE_MODIFIERS
-};
-//# sourceMappingURL=index.js.map
+import { ICON_NAMES as e, ICON_SIZE_MODIFIERS as t } from "./icon-constants.js";
+import n from "./icon.js";
+export { n as DtIcon, e as ICON_NAMES, t as ICON_SIZE_MODIFIERS };

package/dist/lib/illustration/illustration-constants.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("@dialpad/dialtone-icons/illustrations.js"),t=e,s={ILLUSTRATION_NAMES:t};exports.ILLUSTRATION_NAMES=t;exports.default=s;
-//# sourceMappingURL=illustration-constants.cjs.map
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});const e=require(`../../chunk-Bmb41Sf3.cjs`);let t=require(`@dialpad/dialtone-icons/illustrations.js`);t=e.t(t);var n=t.default,r={ILLUSTRATION_NAMES:n};exports.ILLUSTRATION_NAMES=n,exports.default=r;
+//# sourceMappingURL=illustration-constants.cjs.map

package/dist/lib/illustration/illustration-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"illustration-constants.cjs","sources":["../../../components/illustration/illustration_constants.js"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n"],"names":["ILLUSTRATION_NAMES","illustrationNames","illustration_constants"],"mappings":"wKAEaA,EAAqBC,EAElCC,EAAe,CACb,mBAAAF,CACF"}
+{"version":3,"file":"illustration-constants.cjs","names":["illustrationNames"],"sources":["../../../components/illustration/illustration_constants.js"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n"],"mappings":"8MAEA,IAAa,EAAqBA,EAAAA,QAElC,EAAe,CACb,qBACD"}

package/dist/lib/illustration/illustration-constants.js

@@ -1,9 +1,7 @@
-import t from "@dialpad/dialtone-icons/illustrations.js";
-const o = t, a = {
-  ILLUSTRATION_NAMES: o
-};
-export {
-  o as ILLUSTRATION_NAMES,
-  a as default
-};
-//# sourceMappingURL=illustration-constants.js.map
+import e from "@dialpad/dialtone-icons/illustrations.js";
+//#region components/illustration/illustration_constants.js
+var t = e, n = { ILLUSTRATION_NAMES: t };
+//#endregion
+export { t as ILLUSTRATION_NAMES, n as default };
+
+//# sourceMappingURL=illustration-constants.js.map

package/dist/lib/illustration/illustration-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"illustration-constants.js","sources":["../../../components/illustration/illustration_constants.js"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n"],"names":["ILLUSTRATION_NAMES","illustrationNames","illustration_constants"],"mappings":";AAEY,MAACA,IAAqBC,GAElCC,IAAe;AAAA,EACb,oBAAAF;AACF;"}
+{"version":3,"file":"illustration-constants.js","names":[],"sources":["../../../components/illustration/illustration_constants.js"],"sourcesContent":["import illustrationNames from '@dialpad/dialtone-icons/illustrations.js';\n\nexport const ILLUSTRATION_NAMES = illustrationNames;\n\nexport default {\n  ILLUSTRATION_NAMES,\n};\n"],"mappings":";;AAEA,IAAa,IAAqB,GAElC,IAAe,EACb,uBACD"}

package/dist/lib/illustration/illustration.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("vue"),l=require("@dialpad/dialtone-icons/vue3"),o=require("./illustration-constants.cjs"),s=Object.assign({name:"DtIllustration"},{__name:"illustration",props:{name:{type:String,required:!0,validator:e=>o.ILLUSTRATION_NAMES.includes(e)}},setup(e){const r=e,a=t.computed(()=>l.illustrations[`./src/illustrations/${r.name}.vue`]);return(n,u)=>a.value?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(a.value),{key:0,"data-qa":n.$attrs["data-qa"]??"dt-illustration"},null,8,["data-qa"])):t.createCommentVNode("",!0)}});exports.default=s;
-//# sourceMappingURL=illustration.cjs.map
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`./illustration-constants.cjs`);let t=require(`vue`),n=require(`@dialpad/dialtone-icons/vue3`);var r=Object.assign({name:`DtIllustration`},{__name:`illustration`,props:{name:{type:String,required:!0,validator:t=>e.ILLUSTRATION_NAMES.includes(t)}},setup(e){let r=e,i=(0,t.computed)(()=>n.illustrations[`./src/illustrations/${r.name}.vue`]);return(e,n)=>i.value?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(i.value),{key:0,"data-qa":e.$attrs[`data-qa`]??`dt-illustration`},null,8,[`data-qa`])):(0,t.createCommentVNode)(``,!0)}});exports.default=r;
+//# sourceMappingURL=illustration.cjs.map

package/dist/lib/illustration/illustration.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"illustration.cjs","sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\ndefineOptions({\n  name: 'DtIllustration',\n});\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":["props","__props","illustration","computed","illustrations","_openBlock","_createBlock","_resolveDynamicComponent","$attrs"],"mappings":"oXAiBA,MAAMA,EAAQC,EAWRC,EAAeC,EAAAA,SAAS,IAAMC,gBAAc,uBAAuBJ,EAAM,IAAI,MAAM,CAAC,eAzBhFE,EAAA,OAFRG,EAAAA,UAAA,EAAAC,EAAAA,YAIEC,EAAAA,wBAHKL,EAAA,KAAY,EAAA,OAEhB,UAASM,EAAAA,OAAM,SAAA,GAAA"}
+{"version":3,"file":"illustration.cjs","names":["$attrs"],"sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\ndefineOptions({\n  name: 'DtIllustration',\n});\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"mappings":"mZAiBA,IAAM,EAAQ,EAWR,GAAA,EAAA,EAAA,cAA8B,EAAA,cAAc,uBAAuB,EAAM,KAAK,OAAO,cAzBjF,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADD,EAAA,MAAY,CAAA,OAEhB,UAASA,EAAAA,OAAM,YAAA"}

package/dist/lib/illustration/illustration.js

@@ -1,29 +1,23 @@
-import { computed as o, openBlock as n, createBlock as l, resolveDynamicComponent as s, createCommentVNode as i } from "vue";
-import { illustrations as u } from "@dialpad/dialtone-icons/vue3";
-import { ILLUSTRATION_NAMES as m } from "./illustration-constants.js";
-const f = /* @__PURE__ */ Object.assign({
-  name: "DtIllustration"
-}, {
-  __name: "illustration",
-  props: {
-    /**
-       * The illustration name in kebab-case
-       */
-    name: {
-      type: String,
-      required: !0,
-      validator: (t) => m.includes(t)
-    }
-  },
-  setup(t) {
-    const e = t, a = o(() => u[`./src/illustrations/${e.name}.vue`]);
-    return (r, c) => a.value ? (n(), l(s(a.value), {
-      key: 0,
-      "data-qa": r.$attrs["data-qa"] ?? "dt-illustration"
-    }, null, 8, ["data-qa"])) : i("", !0);
-  }
+import { ILLUSTRATION_NAMES as e } from "./illustration-constants.js";
+import { computed as t, createBlock as n, createCommentVNode as r, openBlock as i, resolveDynamicComponent as a } from "vue";
+import { illustrations as o } from "@dialpad/dialtone-icons/vue3";
+//#region components/illustration/illustration.vue
+var s = /* @__PURE__ */ Object.assign({ name: "DtIllustration" }, {
+	__name: "illustration",
+	props: { name: {
+		type: String,
+		required: !0,
+		validator: (t) => e.includes(t)
+	} },
+	setup(e) {
+		let s = e, c = t(() => o[`./src/illustrations/${s.name}.vue`]);
+		return (e, t) => c.value ? (i(), n(a(c.value), {
+			key: 0,
+			"data-qa": e.$attrs["data-qa"] ?? "dt-illustration"
+		}, null, 8, ["data-qa"])) : r("", !0);
+	}
 });
-export {
-  f as default
-};
-//# sourceMappingURL=illustration.js.map
+//#endregion
+export { s as default };
+
+//# sourceMappingURL=illustration.js.map

package/dist/lib/illustration/illustration.js.map

@@ -1 +1 @@
-{"version":3,"file":"illustration.js","sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\ndefineOptions({\n  name: 'DtIllustration',\n});\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"names":["props","__props","illustration","computed","illustrations","_openBlock","_createBlock","_resolveDynamicComponent","$attrs"],"mappings":";;;;;;;;;;;;;;;;;;AAiBA,UAAMA,IAAQC,GAWRC,IAAeC,EAAS,MAAMC,EAAc,uBAAuBJ,EAAM,IAAI,MAAM,CAAC;qBAzBhFE,EAAA,SAFRG,EAAA,GAAAC,EAIEC,EAHKL,EAAA,KAAY,GAAA;AAAA;MAEhB,WAASM,EAAAA,OAAM,SAAA,KAAA;AAAA;;;"}
+{"version":3,"file":"illustration.js","names":["$attrs"],"sources":["../../../components/illustration/illustration.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"illustration\"\n    v-if=\"illustration\"\n    :data-qa=\"$attrs['data-qa'] ?? 'dt-illustration'\"\n  />\n</template>\n\n<script setup>\nimport { computed } from 'vue';\nimport { illustrations } from '@dialpad/dialtone-icons/vue3';\nimport { ILLUSTRATION_NAMES } from './illustration_constants';\n\ndefineOptions({\n  name: 'DtIllustration',\n});\n\nconst props = defineProps({\n  /**\n     * The illustration name in kebab-case\n     */\n  name: {\n    type: String,\n    required: true,\n    validator: (name) => ILLUSTRATION_NAMES.includes(name),\n  },\n});\n\nconst illustration = computed(() => illustrations[`./src/illustrations/${props.name}.vue`]);\n</script>\n"],"mappings":";;;;;;;;;;;;EAiBA,IAAM,IAAQ,GAWR,IAAe,QAAe,EAAc,uBAAuB,EAAM,KAAK,OAAO;mBAzBjF,EAAA,SAAA,GAAA,EAFR,EAIE,EAHK,EAAA,MAAY,EAAA;;GAEhB,WAASA,EAAAA,OAAM,cAAA"}

package/dist/lib/illustration/index.cjs

@@ -1,2 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./illustration.cjs"),i=require("./illustration-constants.cjs");exports.DtIllustration=t.default;exports.ILLUSTRATION_NAMES=i.ILLUSTRATION_NAMES;
-//# sourceMappingURL=index.cjs.map
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./illustration-constants.cjs`),t=require(`./illustration.cjs`);exports.DtIllustration=t.default,exports.ILLUSTRATION_NAMES=e.ILLUSTRATION_NAMES;

package/dist/lib/illustration/index.js

@@ -1,7 +1,3 @@
-import { default as r } from "./illustration.js";
 import { ILLUSTRATION_NAMES as e } from "./illustration-constants.js";
-export {
-  r as DtIllustration,
-  e as ILLUSTRATION_NAMES
-};
-//# sourceMappingURL=index.js.map
+import t from "./illustration.js";
+export { t as DtIllustration, e as ILLUSTRATION_NAMES };

package/dist/lib/image-viewer/image-viewer.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const d=require("../../common/mixins/modal.cjs"),m=require("../../common/utils/index.cjs"),r=require("../../common/constants/index.cjs"),_=require("@dialpad/dialtone-icons/vue3"),p=require("../../shared/sr_only_close_button.cjs"),f=require("../../localization/index.cjs"),e=require("vue"),g=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),h=require("../button/button.cjs"),v={compatConfig:{MODE:3},name:"DtImageViewer",components:{SrOnlyCloseButton:p.default,DtButton:h.default,DtIconClose:_.DtIconClose},mixins:[d.default],props:{appendTo:{type:String,default:"body"},open:{type:Boolean,default:null},imageSrc:{type:String,required:!0},imageAlt:{type:String,required:!0},imageButtonClass:{type:String,required:!1,default:""},ariaLabel:{type:String,required:!0}},emits:["opened","update:open"],data(){return{showCloseButton:!0,isOpen:!1,i18n:new f.DialtoneLocalization}},computed:{modalListeners(){return{click:t=>{t.target===t.currentTarget&&this.close()},keydown:t=>{switch(t.code){case r.EVENT_KEYNAMES.esc:case r.EVENT_KEYNAMES.escape:this.close();break;case r.EVENT_KEYNAMES.tab:this.trapFocus(t);break}}}},closeButtonTitle(){return this.i18n.$t("DIALTONE_CLOSE_BUTTON")}},watch:{isOpen:{immediate:!0,handler(t){var o;t?this.previousActiveElement=document.activeElement:((o=this.previousActiveElement)==null||o.focus(),this.previousActiveElement=null)}},open:{handler:function(t){t!==null&&(this.isOpen=t)},immediate:!0}},methods:{openModal(){this.open===null&&(this.isOpen=!0,this.showCloseButton=!0,this.$emit("opened",!0),setTimeout(()=>{this.focusAfterOpen()}))},close(){this.isOpen=!1,this.$emit("opened",!1),this.open!==null&&this.$emit("update:open",!1)},focusAfterOpen(){var t,o;(o=m.returnFirstEl((t=this.$refs.closeImage)==null?void 0:t.$el))==null||o.focus()},trapFocus(t){this.isOpen&&this.focusTrappedTabPress(t)}}},C=["src","alt"],w=["aria-hidden"],E={"data-qa":"dt-image-viewer-full",class:"d-image-viewer__full",role:"dialog","aria-modal":"true"},b=["src","alt"];function B(t,o,n,T,l,i){const a=e.resolveComponent("dt-button"),c=e.resolveComponent("dt-icon-close"),u=e.resolveComponent("sr-only-close-button");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(a,{"data-qa":"dt-image-viewer-preview",class:"d-image-viewer__preview-button","aria-label":n.ariaLabel,importance:"clear",onClick:i.openModal},{default:e.withCtx(()=>[e.createElementVNode("img",{class:e.normalizeClass(n.imageButtonClass),src:n.imageSrc,alt:n.imageAlt},null,10,C)]),_:1},8,["aria-label","onClick"]),l.isOpen?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:n.appendTo},[e.createElementVNode("div",e.mergeProps({"aria-hidden":l.isOpen?"false":"true",class:"d-modal","data-qa":"dt-modal"},e.toHandlers(i.modalListeners,!0),{onMouseover:o[0]||(o[0]=s=>l.showCloseButton=!0),onMouseleave:o[1]||(o[1]=s=>l.showCloseButton=!1),onFocusin:o[2]||(o[2]=s=>l.showCloseButton=!0),onFocusout:o[3]||(o[3]=s=>l.showCloseButton=!1)}),[e.createElementVNode("div",E,[e.createElementVNode("img",{class:"d-image-viewer__full__image",src:n.imageSrc,alt:n.imageAlt},null,8,b)]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[l.showCloseButton?(e.openBlock(),e.createBlock(a,{key:0,ref:"closeImage","data-qa":"dt-image-viewer-close-btn",class:"d-modal__close",circle:"",size:"lg",importance:"clear",kind:"inverted","aria-label":i.closeButtonTitle,title:i.closeButtonTitle,onClick:i.close},{icon:e.withCtx(()=>[e.createVNode(c,{class:"d-image-viewer__close-button",size:"400"})]),_:1},8,["aria-label","title","onClick"])):(e.openBlock(),e.createBlock(u,{key:1,onClose:i.close},null,8,["onClose"]))]),_:1})],16,w)],8,["to"])):e.createCommentVNode("",!0)])}const k=g._(v,[["render",B]]);exports.default=k;
-//# sourceMappingURL=image-viewer.cjs.map
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/constants/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),r=require(`../../common/mixins/modal.cjs`),i=require(`../../localization/index.cjs`),a=require(`../button/button.cjs`),o=require(`../../shared/sr_only_close_button.cjs`);let s=require(`vue`),c=require(`@dialpad/dialtone-icons/vue3`);var l={compatConfig:{MODE:3},name:`DtImageViewer`,components:{SrOnlyCloseButton:o.default,DtButton:a.default,DtIconClose:c.DtIconClose},mixins:[r.default],props:{appendTo:{type:String,default:`body`},open:{type:Boolean,default:null},imageSrc:{type:String,required:!0},imageAlt:{type:String,required:!0},imageButtonClass:{type:String,required:!1,default:``},ariaLabel:{type:String,required:!0}},emits:[`opened`,`update:open`],data(){return{showCloseButton:!0,isOpen:!1,i18n:new i.DialtoneLocalization}},computed:{modalListeners(){return{click:e=>{e.target===e.currentTarget&&this.close()},keydown:t=>{switch(t.code){case e.EVENT_KEYNAMES.esc:case e.EVENT_KEYNAMES.escape:this.close();break;case e.EVENT_KEYNAMES.tab:this.trapFocus(t);break}}}},closeButtonTitle(){return this.i18n.$t(`DIALTONE_CLOSE_BUTTON`)}},watch:{isOpen:{immediate:!0,handler(e){e?this.previousActiveElement=document.activeElement:(this.previousActiveElement?.focus(),this.previousActiveElement=null)}},open:{handler:function(e){e!==null&&(this.isOpen=e)},immediate:!0}},methods:{openModal(){this.open===null&&(this.isOpen=!0,this.showCloseButton=!0,this.$emit(`opened`,!0),setTimeout(()=>{this.focusAfterOpen()}))},close(){this.isOpen=!1,this.$emit(`opened`,!1),this.open!==null&&this.$emit(`update:open`,!1)},focusAfterOpen(){t.returnFirstEl(this.$refs.closeImage?.$el)?.focus()},trapFocus(e){this.isOpen&&this.focusTrappedTabPress(e)}}},u=[`src`,`alt`],d=[`aria-hidden`],f={"data-qa":`dt-image-viewer-full`,class:`d-image-viewer__full`,role:`dialog`,"aria-modal":`true`},p=[`src`,`alt`];function m(e,t,n,r,i,a){let o=(0,s.resolveComponent)(`dt-button`),c=(0,s.resolveComponent)(`dt-icon-close`),l=(0,s.resolveComponent)(`sr-only-close-button`);return(0,s.openBlock)(),(0,s.createElementBlock)(`div`,null,[(0,s.createVNode)(o,{"data-qa":`dt-image-viewer-preview`,class:`d-image-viewer__preview-button`,"aria-label":n.ariaLabel,importance:`clear`,onClick:a.openModal},{default:(0,s.withCtx)(()=>[(0,s.createElementVNode)(`img`,{class:(0,s.normalizeClass)(n.imageButtonClass),src:n.imageSrc,alt:n.imageAlt},null,10,u)]),_:1},8,[`aria-label`,`onClick`]),i.isOpen?((0,s.openBlock)(),(0,s.createBlock)(s.Teleport,{key:0,to:n.appendTo},[(0,s.createElementVNode)(`div`,(0,s.mergeProps)({"aria-hidden":i.isOpen?`false`:`true`,class:`d-modal`,"data-qa":`dt-modal`},(0,s.toHandlers)(a.modalListeners,!0),{onMouseover:t[0]||(t[0]=e=>i.showCloseButton=!0),onMouseleave:t[1]||(t[1]=e=>i.showCloseButton=!1),onFocusin:t[2]||(t[2]=e=>i.showCloseButton=!0),onFocusout:t[3]||(t[3]=e=>i.showCloseButton=!1)}),[(0,s.createElementVNode)(`div`,f,[(0,s.createElementVNode)(`img`,{class:`d-image-viewer__full__image`,src:n.imageSrc,alt:n.imageAlt},null,8,p)]),(0,s.createVNode)(s.Transition,{name:`fade`},{default:(0,s.withCtx)(()=>[i.showCloseButton?((0,s.openBlock)(),(0,s.createBlock)(o,{key:0,ref:`closeImage`,"data-qa":`dt-image-viewer-close-btn`,class:`d-modal__close`,circle:``,size:`lg`,importance:`clear`,kind:`inverted`,"aria-label":a.closeButtonTitle,title:a.closeButtonTitle,onClick:a.close},{icon:(0,s.withCtx)(()=>[(0,s.createVNode)(c,{class:`d-image-viewer__close-button`,size:`400`})]),_:1},8,[`aria-label`,`title`,`onClick`])):((0,s.openBlock)(),(0,s.createBlock)(l,{key:1,onClose:a.close},null,8,[`onClose`]))]),_:1})],16,d)],8,[`to`])):(0,s.createCommentVNode)(``,!0)])}var h=n.t(l,[[`render`,m]]);exports.default=h;
+//# sourceMappingURL=image-viewer.cjs.map

package/dist/lib/image-viewer/image-viewer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.cjs","sources":["../../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      :to=\"appendTo\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                class=\"d-image-viewer__close-button\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n          <sr-only-close-button\n            v-else\n            @close=\"close\"\n          />\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageViewer',\n\n  components: {\n    SrOnlyCloseButton,\n    DtButton,\n    DtIconClose,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * By default the portal appends to the body of the root parent. We can modify\n     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.\n     * The appendTo prop expects a CSS selector string or an actual DOM node.\n     * type: string | HTMLElement, default: 'body'\n     */\n    appendTo: {\n      type: String,\n      default: 'body',\n    },\n\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\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        },\n      };\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\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        } else {\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    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      returnFirstEl(this.$refs.closeImage?.$el)?.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","SrOnlyCloseButton","DtButton","DtIconClose","Modal","DialtoneLocalization","event","EVENT_KEYNAMES","isShowing","_a","open","returnFirstEl","e","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_createElementVNode","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_component_sr_only_close_button"],"mappings":"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"}
+{"version":3,"file":"image-viewer.cjs","names":[],"sources":["../../../components/image_viewer/image_viewer.vue"],"sourcesContent":["<template>\n  <div>\n    <dt-button\n      data-qa=\"dt-image-viewer-preview\"\n      class=\"d-image-viewer__preview-button\"\n      :aria-label=\"ariaLabel\"\n      importance=\"clear\"\n      @click=\"openModal\"\n    >\n      <img\n        :class=\"imageButtonClass\"\n        :src=\"imageSrc\"\n        :alt=\"imageAlt\"\n      >\n    </dt-button>\n    <Teleport\n      v-if=\"isOpen\"\n      :to=\"appendTo\"\n    >\n      <div\n        :aria-hidden=\"!isOpen ? 'true' : 'false'\"\n        class=\"d-modal\"\n        data-qa=\"dt-modal\"\n        v-on=\"modalListeners\"\n        @mouseover=\"showCloseButton = true\"\n        @mouseleave=\"showCloseButton = false\"\n        @focusin=\" showCloseButton = true\"\n        @focusout=\" showCloseButton = false\"\n      >\n        <div\n          data-qa=\"dt-image-viewer-full\"\n          class=\"d-image-viewer__full\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n        >\n          <img\n            class=\"d-image-viewer__full__image\"\n            :src=\"imageSrc\"\n            :alt=\"imageAlt\"\n          >\n        </div>\n        <transition name=\"fade\">\n          <dt-button\n            v-if=\"showCloseButton\"\n            ref=\"closeImage\"\n            data-qa=\"dt-image-viewer-close-btn\"\n            class=\"d-modal__close\"\n            circle\n            size=\"lg\"\n            importance=\"clear\"\n            kind=\"inverted\"\n            :aria-label=\"closeButtonTitle\"\n            :title=\"closeButtonTitle\"\n            @click=\"close\"\n          >\n            <template #icon>\n              <dt-icon-close\n                class=\"d-image-viewer__close-button\"\n                size=\"400\"\n              />\n            </template>\n          </dt-button>\n          <sr-only-close-button\n            v-else\n            @close=\"close\"\n          />\n        </transition>\n      </div>\n    </Teleport>\n  </div>\n</template>\n\n<script>\nimport Modal from '@/common/mixins/modal';\nimport { returnFirstEl } from '@/common/utils';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport { DtButton } from '@/components/button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageViewer',\n\n  components: {\n    SrOnlyCloseButton,\n    DtButton,\n    DtIconClose,\n  },\n\n  mixins: [Modal],\n\n  props: {\n    /**\n     * By default the portal appends to the body of the root parent. We can modify\n     * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.\n     * The appendTo prop expects a CSS selector string or an actual DOM node.\n     * type: string | HTMLElement, default: 'body'\n     */\n    appendTo: {\n      type: String,\n      default: 'body',\n    },\n\n    /**\n     * Controls whether the image modal is shown. Leaving this null will have the image modal\n     * trigger on click by default.\n     * If you set this value, the default trigger behavior will be disabled and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * URL of the image to be shown\n     */\n    imageSrc: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Alt text of image\n     */\n    imageAlt: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Image Class\n     */\n    imageButtonClass: {\n      type: String,\n      required: false,\n      default: '',\n    },\n\n    /**\n     * Aria label\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n  ],\n\n  data () {\n    return {\n      showCloseButton: true,\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          (event.target === event.currentTarget) && this.close();\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        },\n      };\n    },\n\n    closeButtonTitle () {\n      return this.i18n.$t('DIALTONE_CLOSE_BUTTON');\n    },\n  },\n\n  watch: {\n    isOpen: {\n      immediate: true,\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        } else {\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    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  methods: {\n    openModal () {\n      // Has custom control passed in\n      if (this.open !== null) {\n        return;\n      }\n      this.isOpen = true;\n      this.showCloseButton = true;\n      this.$emit('opened', true);\n\n      setTimeout(() => {\n        this.focusAfterOpen();\n      });\n    },\n\n    close () {\n      this.isOpen = false;\n      this.$emit('opened', false);\n\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    focusAfterOpen () {\n      returnFirstEl(this.$refs.closeImage?.$el)?.focus();\n    },\n\n    trapFocus (e) {\n      if (this.isOpen) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n  },\n};\n</script>\n"],"mappings":"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"}