@dialpad/dialtone 9.126.6 → 9.127.0

package/dist/vue3/lib/group-row/group-row.js

@@ -1,24 +1,18 @@
-import { DtIconUsers as i } from "@dialpad/dialtone-icons/vue3";
-import { safeConcatStrings as s, extractVueListeners as u } from "../../common/utils/index.js";
-import { resolveComponent as n, openBlock as c, createBlock as l, mergeProps as d, toHandlers as p, withCtx as m, createVNode as f } from "vue";
-import { _ } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import g from "../general-row/general-row.js";
-const y = {
+import { DtIconUsers as u } from "@dialpad/dialtone-icons/vue3";
+import { safeConcatStrings as n, extractVueListeners as s } from "../../common/utils/index.js";
+import { DialtoneLocalization as d } from "../../localization/index.js";
+import { resolveComponent as o, openBlock as c, createBlock as l, mergeProps as p, toHandlers as _, withCtx as m, createVNode as C } from "vue";
+import { _ as h } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import T from "../general-row/general-row.js";
+const f = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeGroupRow",
   components: {
-    DtIconUsers: i,
-    DtRecipeGeneralRow: g
+    DtIconUsers: u,
+    DtRecipeGeneralRow: T
   },
   inheritAttrs: !1,
   props: {
-    /**
-     * Screen reader will read out the number of users in the group using this text. Ex: "2 users"
-     */
-    groupCountText: {
-      type: String,
-      default: ""
-    },
     /**
      * Names of the group members
      */
@@ -40,13 +34,6 @@ const y = {
       type: String,
       default: null
     },
-    /**
-     * Text shown when the unread count is hovered.
-     */
-    unreadCountTooltip: {
-      type: String,
-      default: null
-    },
     /**
      * Styles the row with an increased font weight to convey it has unreads. This must be true to see
      * the unread count badge.
@@ -70,36 +57,63 @@ const y = {
       default: !1
     }
   },
-  emits: [],
+  data() {
+    return {
+      i18n: new d()
+    };
+  },
   computed: {
+    groupCount() {
+      return this.names.split(",").length;
+    },
+    messageCount() {
+      return isNaN(this.unreadCount) ? this.unreadCount : Number(this.unreadCount);
+    },
+    mentionCount() {
+      return isNaN(this.unreadMentionCount) ? this.unreadMentionCount : Number(this.unreadMentionCount);
+    },
+    unreadCountTooltip() {
+      return n([
+        this.unreadCount && this.i18n.$t("DIALTONE_UNREAD_MESSAGE_COUNT_TEXT", { unreadCount: this.messageCount }),
+        this.unreadMentionCount && this.i18n.$t("DIALTONE_UNREAD_MENTION_COUNT_TEXT", { unreadCount: this.mentionCount })
+      ]);
+    },
+    typingTooltip() {
+      return this.isTyping && this.i18n.$t("DIALTONE_TYPING_TEXT");
+    },
     ariaLabel() {
-      return s([this.groupCountText, this.names]);
+      return n([
+        this.typingTooltip,
+        this.i18n.$t("DIALTONE_GROUP_ROW_GROUP_COUNT_TEXT", { count: this.groupCount }),
+        this.names,
+        this.unreadCountTooltip
+      ]);
     },
     contactRowListeners() {
-      return u(this.$attrs);
+      return s(this.$attrs);
     }
   }
 };
-function C(o, h, e, w, x, t) {
-  const r = n("dt-icon-users"), a = n("dt-recipe-general-row");
-  return c(), l(a, d({
-    description: e.names,
-    "aria-label": t.ariaLabel,
-    "unread-count": e.unreadCount,
-    "has-unreads": e.hasUnreads,
-    "unread-mention-count": e.unreadMentionCount,
+function g(r, N, t, E, y, e) {
+  const i = o("dt-icon-users"), a = o("dt-recipe-general-row");
+  return c(), l(a, p({
+    description: t.names,
+    "aria-label": e.ariaLabel,
+    "unread-count": t.unreadCount,
+    "has-unreads": t.hasUnreads,
+    "unread-mention-count": t.unreadMentionCount,
     "unread-count-tooltip": e.unreadCountTooltip,
-    selected: e.selected,
-    "is-typing": e.isTyping
-  }, o.$attrs, p(t.contactRowListeners)), {
+    selected: t.selected,
+    "is-typing": t.isTyping
+  }, r.$attrs, _(e.contactRowListeners)), {
     left: m(() => [
-      f(r, { size: "300" })
+      C(i, { size: "300" })
     ]),
     _: 1
   }, 16, ["description", "aria-label", "unread-count", "has-unreads", "unread-mention-count", "unread-count-tooltip", "selected", "is-typing"]);
 }
-const b = /* @__PURE__ */ _(y, [["render", C]]);
+const M = /* @__PURE__ */ h(f, [["render", g]]);
 export {
-  b as default
+  M as default
 };
 //# sourceMappingURL=group-row.js.map

package/dist/vue3/lib/group-row/group-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"group-row.js","sources":["../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :description=\"names\"\n    :aria-label=\"ariaLabel\"\n    :unread-count=\"unreadCount\"\n    :has-unreads=\"hasUnreads\"\n    :unread-mention-count=\"unreadMentionCount\"\n    :unread-count-tooltip=\"unreadCountTooltip\"\n    :selected=\"selected\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    v-on=\"contactRowListeners\"\n  >\n    <template #left>\n      <dt-icon-users\n        size=\"300\"\n      />\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtIconUsers } from '@dialpad/dialtone-icons/vue3';\nimport { safeConcatStrings, extractVueListeners } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeGroupRow',\n\n  components: {\n    DtIconUsers,\n    DtRecipeGeneralRow,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * Screen reader will read out the number of users in the group using this text. Ex: \"2 users\"\n     */\n    groupCountText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Names of the group members\n     */\n    names: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Text shown when the unread count is hovered.\n     */\n    unreadCountTooltip: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n  ],\n\n  computed: {\n    ariaLabel () {\n      return safeConcatStrings([this.groupCountText, this.names]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconUsers","DtRecipeGeneralRow","safeConcatStrings","extractVueListeners","_openBlock","_createBlock","_component_dt_recipe_general_row","_mergeProps","$props","$options","_ctx","_toHandlers","_createVNode","_component_dt_icon_users"],"mappings":";;;;;AA0BA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,aAAAC;AAAA,IACA,oBAAAC;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAKL,gBAAgB;AAAA,MACd,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAO,CACN;AAAA,EAED,UAAU;AAAA,IACR,YAAa;AACX,aAAOC,EAAkB,CAAC,KAAK,gBAAgB,KAAK,KAAK,CAAC;AAAA,IAC3D;AAAA,IAED,sBAAuB;AACrB,aAAOC,EAAoB,KAAK,MAAM;AAAA,IACvC;AAAA,EACF;AACH;;;AApHE,SAAAC,EAAA,GAAAC,EAiBwBC,GAjBxBC,EAiBwB;AAAA,IAhBrB,aAAaC,EAAK;AAAA,IAClB,cAAYC,EAAS;AAAA,IACrB,gBAAcD,EAAW;AAAA,IACzB,eAAaA,EAAU;AAAA,IACvB,wBAAsBA,EAAkB;AAAA,IACxC,wBAAsBA,EAAkB;AAAA,IACxC,UAAUA,EAAQ;AAAA,IAClB,aAAWA,EAAQ;AAAA,KACZE,EAAM,QACdC,EAAMF,EAAmB,mBAAA,CAAA,GAAA;AAAA,IAEd,QACT,MAEE;AAAA,MAFFG,EAEEC,GAAA,EADA,MAAK,MAAK,CAAA;AAAA;IAflB,GAAA;AAAA;;;"}
+{"version":3,"file":"group-row.js","sources":["../../../recipes/leftbar/group_row/group_row.vue"],"sourcesContent":["<template>\n  <dt-recipe-general-row\n    :description=\"names\"\n    :aria-label=\"ariaLabel\"\n    :unread-count=\"unreadCount\"\n    :has-unreads=\"hasUnreads\"\n    :unread-mention-count=\"unreadMentionCount\"\n    :unread-count-tooltip=\"unreadCountTooltip\"\n    :selected=\"selected\"\n    :is-typing=\"isTyping\"\n    v-bind=\"$attrs\"\n    v-on=\"contactRowListeners\"\n  >\n    <template #left>\n      <dt-icon-users\n        size=\"300\"\n      />\n    </template>\n  </dt-recipe-general-row>\n</template>\n\n<script>\nimport { DtRecipeGeneralRow } from '@/recipes/leftbar/general_row';\nimport { DtIconUsers } from '@dialpad/dialtone-icons/vue3';\nimport { safeConcatStrings, extractVueListeners } from '@/common/utils';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeGroupRow',\n\n  components: {\n    DtIconUsers,\n    DtRecipeGeneralRow,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n\n    /**\n     * Names of the group members\n     */\n    names: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Number of unread messages\n     */\n    unreadCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Number of unread mention messages\n     */\n    unreadMentionCount: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Styles the row with an increased font weight to convey it has unreads. This must be true to see\n     * the unread count badge.\n     */\n    hasUnreads: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Determines if the row is selected\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Shows an \"is typing\" animation over the avatar when true.\n     */\n    isTyping: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      i18n: new DialtoneLocalization(),\n    };\n  },\n\n  computed: {\n    groupCount () {\n      return this.names.split(',').length;\n    },\n\n    messageCount () {\n      return isNaN(this.unreadCount)\n        ? this.unreadCount\n        : Number(this.unreadCount);\n    },\n\n    mentionCount () {\n      return isNaN(this.unreadMentionCount)\n        ? this.unreadMentionCount\n        : Number(this.unreadMentionCount);\n    },\n\n    unreadCountTooltip () {\n      return safeConcatStrings([\n        this.unreadCount && this.i18n.$t('DIALTONE_UNREAD_MESSAGE_COUNT_TEXT', { unreadCount: this.messageCount }),\n        this.unreadMentionCount && this.i18n.$t('DIALTONE_UNREAD_MENTION_COUNT_TEXT', { unreadCount: this.mentionCount }),\n      ]);\n    },\n\n    typingTooltip () {\n      return this.isTyping && this.i18n.$t('DIALTONE_TYPING_TEXT');\n    },\n\n    ariaLabel () {\n      return safeConcatStrings([\n        this.typingTooltip,\n        this.i18n.$t('DIALTONE_GROUP_ROW_GROUP_COUNT_TEXT', { count: this.groupCount }),\n        this.names,\n        this.unreadCountTooltip,\n      ]);\n    },\n\n    contactRowListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconUsers","DtRecipeGeneralRow","DialtoneLocalization","safeConcatStrings","extractVueListeners","_openBlock","_createBlock","_component_dt_recipe_general_row","_mergeProps","$props","$options","_ctx","_toHandlers","_createVNode","_component_dt_icon_users"],"mappings":";;;;;;AA2BA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,aAAAC;AAAA,IACA,oBAAAC;AAAA,EACD;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA,IAKL,OAAO;AAAA,MACL,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,oBAAoB;AAAA,MAClB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,MAAM,IAAIC,EAAsB;AAAA;EAEnC;AAAA,EAED,UAAU;AAAA,IACR,aAAc;AACZ,aAAO,KAAK,MAAM,MAAM,GAAG,EAAE;AAAA,IAC9B;AAAA,IAED,eAAgB;AACd,aAAO,MAAM,KAAK,WAAW,IACzB,KAAK,cACL,OAAO,KAAK,WAAW;AAAA,IAC5B;AAAA,IAED,eAAgB;AACd,aAAO,MAAM,KAAK,kBAAkB,IAChC,KAAK,qBACL,OAAO,KAAK,kBAAkB;AAAA,IACnC;AAAA,IAED,qBAAsB;AACpB,aAAOC,EAAkB;AAAA,QACvB,KAAK,eAAe,KAAK,KAAK,GAAG,sCAAsC,EAAE,aAAa,KAAK,cAAc;AAAA,QACzG,KAAK,sBAAsB,KAAK,KAAK,GAAG,sCAAsC,EAAE,aAAa,KAAK,cAAc;AAAA,MAClH,CAAC;AAAA,IACF;AAAA,IAED,gBAAiB;AACf,aAAO,KAAK,YAAY,KAAK,KAAK,GAAG,sBAAsB;AAAA,IAC5D;AAAA,IAED,YAAa;AACX,aAAOA,EAAkB;AAAA,QACvB,KAAK;AAAA,QACL,KAAK,KAAK,GAAG,uCAAuC,EAAE,OAAO,KAAK,YAAY;AAAA,QAC9E,KAAK;AAAA,QACL,KAAK;AAAA,MACP,CAAC;AAAA,IACF;AAAA,IAED,sBAAuB;AACrB,aAAOC,EAAoB,KAAK,MAAM;AAAA,IACvC;AAAA,EACF;AACH;;;AAxIE,SAAAC,EAAA,GAAAC,EAiBwBC,GAjBxBC,EAiBwB;AAAA,IAhBrB,aAAaC,EAAK;AAAA,IAClB,cAAYC,EAAS;AAAA,IACrB,gBAAcD,EAAW;AAAA,IACzB,eAAaA,EAAU;AAAA,IACvB,wBAAsBA,EAAkB;AAAA,IACxC,wBAAsBC,EAAkB;AAAA,IACxC,UAAUD,EAAQ;AAAA,IAClB,aAAWA,EAAQ;AAAA,KACZE,EAAM,QACdC,EAAMF,EAAmB,mBAAA,CAAA,GAAA;AAAA,IAEd,QACT,MAEE;AAAA,MAFFG,EAEEC,GAAA,EADA,MAAK,MAAK,CAAA;AAAA;IAflB,GAAA;AAAA;;;"}

package/dist/vue3/lib/icon/icon-constants.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon-constants.cjs","sources":["../../../components/icon/icon_constants.js"],"sourcesContent":["import iconNames from '@dialpad/dialtone-icons/icons.js';\nexport const ICON_SIZE_MODIFIERS = {\n  100: 'd-icon--size-100',\n  200: 'd-icon--size-200',\n  300: 'd-icon--size-300',\n  400: 'd-icon--size-400',\n  500: 'd-icon--size-500',\n  600: 'd-icon--size-600',\n  700: 'd-icon--size-700',\n  800: 'd-icon--size-800',\n};\n\nexport const ICON_NAMES = iconNames;\n\nexport default {\n  ICON_SIZE_MODIFIERS,\n  ICON_NAMES,\n};\n"],"names":["ICON_SIZE_MODIFIERS","ICON_NAMES","iconNames","icon_constants"],"mappings":"gKACaA,EAAsB,CACjC,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,kBACP,EAEaC,EAAaC,EAEXC,EAAA,CACb,oBAAAH,EACA,WAAAC,CACF"}
+{"version":3,"file":"icon-constants.cjs","sources":["../../../components/icon/icon_constants.js"],"sourcesContent":["import iconNames from '@dialpad/dialtone-icons/icons.js';\n\nexport const ICON_SIZE_MODIFIERS = {\n  100: 'd-icon--size-100',\n  200: 'd-icon--size-200',\n  300: 'd-icon--size-300',\n  400: 'd-icon--size-400',\n  500: 'd-icon--size-500',\n  600: 'd-icon--size-600',\n  700: 'd-icon--size-700',\n  800: 'd-icon--size-800',\n};\n\nexport const ICON_NAMES = iconNames;\n\nexport default {\n  ICON_SIZE_MODIFIERS,\n  ICON_NAMES,\n};\n"],"names":["ICON_SIZE_MODIFIERS","ICON_NAMES","iconNames","icon_constants"],"mappings":"gKAEaA,EAAsB,CACjC,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,mBACL,IAAK,kBACP,EAEaC,EAAaC,EAEXC,EAAA,CACb,oBAAAH,EACA,WAAAC,CACF"}

package/dist/vue3/lib/icon/icon-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon-constants.js","sources":["../../../components/icon/icon_constants.js"],"sourcesContent":["import iconNames from '@dialpad/dialtone-icons/icons.js';\nexport const ICON_SIZE_MODIFIERS = {\n  100: 'd-icon--size-100',\n  200: 'd-icon--size-200',\n  300: 'd-icon--size-300',\n  400: 'd-icon--size-400',\n  500: 'd-icon--size-500',\n  600: 'd-icon--size-600',\n  700: 'd-icon--size-700',\n  800: 'd-icon--size-800',\n};\n\nexport const ICON_NAMES = iconNames;\n\nexport default {\n  ICON_SIZE_MODIFIERS,\n  ICON_NAMES,\n};\n"],"names":["ICON_SIZE_MODIFIERS","ICON_NAMES","iconNames","icon_constants"],"mappings":";AACY,MAACA,IAAsB;AAAA,EACjC,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP,GAEaC,IAAaC,GAEXC,IAAA;AAAA,EACb,qBAAAH;AAAA,EACA,YAAAC;AACF;"}
+{"version":3,"file":"icon-constants.js","sources":["../../../components/icon/icon_constants.js"],"sourcesContent":["import iconNames from '@dialpad/dialtone-icons/icons.js';\n\nexport const ICON_SIZE_MODIFIERS = {\n  100: 'd-icon--size-100',\n  200: 'd-icon--size-200',\n  300: 'd-icon--size-300',\n  400: 'd-icon--size-400',\n  500: 'd-icon--size-500',\n  600: 'd-icon--size-600',\n  700: 'd-icon--size-700',\n  800: 'd-icon--size-800',\n};\n\nexport const ICON_NAMES = iconNames;\n\nexport default {\n  ICON_SIZE_MODIFIERS,\n  ICON_NAMES,\n};\n"],"names":["ICON_SIZE_MODIFIERS","ICON_NAMES","iconNames","icon_constants"],"mappings":";AAEY,MAACA,IAAsB;AAAA,EACjC,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AAAA,EACL,KAAK;AACP,GAEaC,IAAaC,GAEXC,IAAA;AAAA,EACb,qBAAAH;AAAA,EACA,YAAAC;AACF;"}

package/dist/vue3/lib/icon/icon.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@dialpad/dialtone-icons/vue3"),r=require("./icon-constants.cjs"),t=require("vue"),o=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),c={compatConfig:{MODE:3},name:"DtIcon",props:{size:{type:String,default:"500",validator:e=>Object.keys(r.ICON_SIZE_MODIFIERS).includes(e)},name:{type:String,required:!0,validator:e=>r.ICON_NAMES.includes(e)},ariaLabel:{type:String,default:void 0}},data(){return{iconLoaded:!1}},computed:{icon(){return i.icons[`./src/icons/${this.name}.vue`]}}};function u(e,l,a,d,_,n){return n.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(n.icon),{key:0,size:a.size,"aria-label":a.ariaLabel,"data-qa":e.$attrs["data-qa"]??"dt-icon"},null,8,["size","aria-label","data-qa"])):t.createCommentVNode("",!0)}const s=o._(c,[["render",u]]);exports.default=s;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("@dialpad/dialtone-icons/vue3"),n=require("./icon-constants.cjs"),a=require("vue"),o=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),c={compatConfig:{MODE:3},name:"DtIcon",props:{size:{type:String,default:"500",validator:e=>Object.keys(n.ICON_SIZE_MODIFIERS).includes(e)},name:{type:String,required:!0,validator:e=>n.ICON_NAMES.includes(e)},ariaLabel:{type:String,default:void 0}},data(){return{iconLoaded:!1}},computed:{icon(){return i.icons[`./src/icons/${this.name}.vue`]},iconAriaLabel(){return this.ariaLabel}}};function u(e,s,r,d,_,t){return t.icon?(a.openBlock(),a.createBlock(a.resolveDynamicComponent(t.icon),{key:0,size:r.size,"aria-label":t.iconAriaLabel,"data-qa":e.$attrs["data-qa"]??"dt-icon"},null,8,["size","aria-label","data-qa"])):a.createCommentVNode("",!0)}const l=o._(c,[["render",u]]);exports.default=l;
 //# sourceMappingURL=icon.cjs.map

package/dist/vue3/lib/icon/icon.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"icon.cjs","sources":["../../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"icon\"\n    v-if=\"icon\"\n    :size=\"size\"\n    :aria-label=\"ariaLabel\"\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\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 screenreader. 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      iconLoaded: false,\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","name","ICON_NAMES","icons","$options","_createBlock","_resolveDynamicComponent","$props","_ctx","_createCommentVNode"],"mappings":"yQAkBKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,CAC9D,EAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACV,UAAYE,GAASC,aAAW,SAASD,CAAI,CAC9C,EAKD,UAAW,CACT,KAAM,OACN,QAAS,MACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,WAAY,GAEf,EAED,SAAU,CACR,MAAQ,CACN,OAAOE,EAAAA,MAAM,eAAe,KAAK,IAAI,MAAM,CAC5C,CACF,CACH,iCA3DUC,EAAI,oBAFZC,EAME,YAPJC,0BAESF,EAAI,IAAA,EAAA,CAFb,IAAA,EAIK,KAAMG,EAAI,KACV,aAAYA,EAAS,UACrB,UAASC,EAAM,OAAA,SAAA,GAAA,oDANpBC,EAAA,mBAAA,GAAA,EAAA"}
+{"version":3,"file":"icon.cjs","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      iconLoaded: false,\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","_createBlock","_resolveDynamicComponent","$props","_ctx","_createCommentVNode"],"mappings":"yQAoBKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,qBAAmB,EAAE,SAASD,CAAC,CAC9D,EAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACV,UAAYE,GAASC,aAAW,SAASD,CAAI,CAC9C,EAKD,UAAW,CACT,KAAM,OACN,QAAS,MACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,WAAY,GAGf,EAED,SAAU,CACR,MAAQ,CACN,OAAOE,EAAAA,MAAM,eAAe,KAAK,IAAI,MAAM,CAC5C,EAED,eAAiB,CAGf,OAAO,KAAK,SACb,CACF,CACH,iCApEUC,EAAI,oBAFZC,EAME,YAPJC,0BAESF,EAAI,IAAA,EAAA,CAFb,IAAA,EAIK,KAAMG,EAAI,KACV,aAAYH,EAAa,cACzB,UAASI,EAAM,OAAA,SAAA,GAAA,oDANpBC,EAAA,mBAAA,GAAA,EAAA"}

package/dist/vue3/lib/icon/icon.js

@@ -1,6 +1,6 @@
-import { icons as r } from "@dialpad/dialtone-icons/vue3";
-import { ICON_SIZE_MODIFIERS as n, ICON_NAMES as o } from "./icon-constants.js";
-import { openBlock as i, createBlock as c, resolveDynamicComponent as d, createCommentVNode as s } from "vue";
+import { icons as t } from "@dialpad/dialtone-icons/vue3";
+import { ICON_SIZE_MODIFIERS as i, ICON_NAMES as n } from "./icon-constants.js";
+import { openBlock as o, createBlock as c, resolveDynamicComponent as d, createCommentVNode as s } from "vue";
 import { _ as l } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 const m = {
   compatConfig: { MODE: 3 },
@@ -13,7 +13,7 @@ const m = {
     size: {
       type: String,
       default: "500",
-      validator: (e) => Object.keys(n).includes(e)
+      validator: (e) => Object.keys(i).includes(e)
     },
     /**
      * The icon name in kebab-case
@@ -21,10 +21,10 @@ const m = {
     name: {
       type: String,
       required: !0,
-      validator: (e) => o.includes(e)
+      validator: (e) => n.includes(e)
     },
     /**
-     * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational
+     * The label of the icon as read out by a screen-reader. Leave this unset if your icon is purely presentational
      */
     ariaLabel: {
       type: String,
@@ -34,19 +34,23 @@ const m = {
   data() {
     return {
       iconLoaded: !1
+      // i18n: new DialtoneLocalization(),
     };
   },
   computed: {
     icon() {
-      return r[`./src/icons/${this.name}.vue`];
+      return t[`./src/icons/${this.name}.vue`];
+    },
+    iconAriaLabel() {
+      return this.ariaLabel;
     }
   }
 };
-function u(e, f, a, p, _, t) {
-  return t.icon ? (i(), c(d(t.icon), {
+function u(e, f, r, p, _, a) {
+  return a.icon ? (o(), c(d(a.icon), {
     key: 0,
-    size: a.size,
-    "aria-label": a.ariaLabel,
+    size: r.size,
+    "aria-label": a.iconAriaLabel,
     "data-qa": e.$attrs["data-qa"] ?? "dt-icon"
   }, null, 8, ["size", "aria-label", "data-qa"])) : s("", !0);
 }

package/dist/vue3/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=\"ariaLabel\"\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\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 screenreader. 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      iconLoaded: false,\n    };\n  },\n\n  computed: {\n    icon () {\n      return icons[`./src/icons/${this.name}.vue`];\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","s","ICON_SIZE_MODIFIERS","name","ICON_NAMES","icons","$options","_createBlock","_resolveDynamicComponent","$props","_ctx","_createCommentVNode"],"mappings":";;;;AAkBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,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,IAC9D;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACE,MAASC,EAAW,SAASD,CAAI;AAAA,IAC9C;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,YAAY;AAAA;EAEf;AAAA,EAED,UAAU;AAAA,IACR,OAAQ;AACN,aAAOE,EAAM,eAAe,KAAK,IAAI,MAAM;AAAA,IAC5C;AAAA,EACF;AACH;;SA3DUC,EAAI,aAFZC,EADFC,EAESF,EAAI,IAAA,GAAA;AAAA,IAFb,KAAA;AAAA,IAIK,MAAMG,EAAI;AAAA,IACV,cAAYA,EAAS;AAAA,IACrB,WAASC,EAAM,OAAA,SAAA,KAAA;AAAA,oDANpBC,EAAA,IAAA,EAAA;;;"}
+{"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      iconLoaded: false,\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","_createBlock","_resolveDynamicComponent","$props","_ctx","_createCommentVNode"],"mappings":";;;;AAoBA,MAAKA,IAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,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,IAC9D;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAACE,MAASC,EAAW,SAASD,CAAI;AAAA,IAC9C;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,YAAY;AAAA;AAAA;EAGf;AAAA,EAED,UAAU;AAAA,IACR,OAAQ;AACN,aAAOE,EAAM,eAAe,KAAK,IAAI,MAAM;AAAA,IAC5C;AAAA,IAED,gBAAiB;AAGf,aAAO,KAAK;AAAA,IACb;AAAA,EACF;AACH;;SApEUC,EAAI,aAFZC,EADFC,EAESF,EAAI,IAAA,GAAA;AAAA,IAFb,KAAA;AAAA,IAIK,MAAMG,EAAI;AAAA,IACV,cAAYH,EAAa;AAAA,IACzB,WAASI,EAAM,OAAA,SAAA,KAAA;AAAA,oDANpBC,EAAA,IAAA,EAAA;;;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const c=require("../../common/mixins/modal.cjs"),d=require("../../common/utils/index.cjs"),r=require("../../common/constants/index.cjs"),m=require("@dialpad/dialtone-icons/vue3"),e=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_=require("../button/button.cjs"),f={compatConfig:{MODE:3},name:"DtImageViewer",components:{DtButton:_.default,DtIconClose:m.DtIconClose},mixins:[c.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},closeAriaLabel:{type:String,required:!0}},emits:["opened","update:open"],data(){return{showCloseButton:!0,isOpen:!1}},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}}}}},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=d.returnFirstEl((t=this.$refs.closeImage)==null?void 0:t.$el))==null||o.focus()},trapFocus(t){this.isOpen&&this.focusTrappedTabPress(t)}}},g=["src","alt"],h=["aria-hidden"],v={"data-qa":"dt-image-viewer-full",class:"d-image-viewer__full",role:"dialog","aria-modal":"true"},w=["src","alt"];function C(t,o,i,E,n,s){const a=e.resolveComponent("dt-button"),u=e.resolveComponent("dt-icon-close");return e.openBlock(),e.createElementBlock("div",null,[e.createVNode(a,{"data-qa":"dt-image-viewer-preview",class:"d-image-viewer__preview-button","aria-label":i.ariaLabel,importance:"clear",onClick:s.openModal},{default:e.withCtx(()=>[e.createElementVNode("img",{class:e.normalizeClass(i.imageButtonClass),src:i.imageSrc,alt:i.imageAlt},null,10,g)]),_:1},8,["aria-label","onClick"]),n.isOpen?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:i.appendTo},[e.createElementVNode("div",e.mergeProps({"aria-hidden":n.isOpen?"false":"true",class:"d-modal","data-qa":"dt-modal"},e.toHandlers(s.modalListeners,!0),{onMouseover:o[0]||(o[0]=l=>n.showCloseButton=!0),onMouseleave:o[1]||(o[1]=l=>n.showCloseButton=!1),onFocusin:o[2]||(o[2]=l=>n.showCloseButton=!0),onFocusout:o[3]||(o[3]=l=>n.showCloseButton=!1)}),[e.createElementVNode("div",v,[e.createElementVNode("img",{class:"d-image-viewer__full__image",src:i.imageSrc,alt:i.imageAlt},null,8,w)]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[n.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.closeAriaLabel,onClick:s.close},{icon:e.withCtx(()=>[e.createVNode(u,{class:"d-image-viewer__close-button",size:"400"})]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("",!0)]),_:1})],16,h)],8,["to"])):e.createCommentVNode("",!0)])}const b=p._(f,[["render",C]]);exports.default=b;
+"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

package/dist/vue3/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=\"closeAriaLabel\"\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        </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';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageViewer',\n\n  components: {\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     * Aria label for close button\n     */\n    closeAriaLabel: {\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    };\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\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","DtButton","DtIconClose","Modal","event","EVENT_KEYNAMES","isShowing","_a","open","returnFirstEl","e","_hoisted_1","_hoisted_2","_hoisted_4","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_withCtx","_createElementVNode","_normalizeClass","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_createCommentVNode"],"mappings":"4YA0EKA,EAAU,CACb,aAAc,CAAE,KAAM,CAAG,EACzB,KAAM,gBAEN,WAAY,CACV,SAAAC,EAAQ,oBACRC,EAAW,WACZ,EAED,OAAQ,CAACC,EAAAA,OAAK,EAEd,MAAO,CAOL,SAAU,CACR,KAAM,OACN,QAAS,MACV,EASD,KAAM,CACJ,KAAM,QACN,QAAS,IACV,EAKD,SAAU,CACR,KAAM,OACN,SAAU,EACX,EAKD,SAAU,CACR,KAAM,OACN,SAAU,EACX,EAKD,iBAAkB,CAChB,KAAM,OACN,SAAU,GACV,QAAS,EACV,EAKD,UAAW,CACT,KAAM,OACN,SAAU,EACX,EAKD,eAAgB,CACd,KAAM,OACN,SAAU,EACX,CACF,EAED,MAAO,CAOL,SAMA,aACD,EAED,MAAQ,CACN,MAAO,CACL,gBAAiB,GACjB,OAAQ,GAEX,EAED,SAAU,CACR,gBAAkB,CAChB,MAAO,CACL,MAAOC,GAAS,CACbA,EAAM,SAAWA,EAAM,eAAkB,KAAK,OAChD,EAED,QAASA,GAAS,CAChB,OAAQA,EAAM,KAAI,CAChB,KAAKC,EAAAA,eAAe,IACpB,KAAKA,EAAc,eAAC,OAClB,KAAK,MAAK,EACV,MACF,KAAKA,EAAc,eAAC,IAClB,KAAK,UAAUD,CAAK,EACpB,KACJ,CACD,EAEJ,CACF,EAED,MAAO,CACL,OAAQ,CACN,UAAW,GACX,QAASE,EAAW,OACdA,EAEF,KAAK,sBAAwB,SAAS,gBAGtCC,EAAA,KAAK,wBAAL,MAAAA,EAA4B,QAC5B,KAAK,sBAAwB,KAEhC,CACF,EAED,KAAM,CACJ,QAAS,SAAUC,EAAM,CACnBA,IAAS,OACX,KAAK,OAASA,EAEjB,EAED,UAAW,EACZ,CACF,EAED,QAAS,CACP,WAAa,CAEP,KAAK,OAAS,OAGlB,KAAK,OAAS,GACd,KAAK,gBAAkB,GACvB,KAAK,MAAM,SAAU,EAAI,EAEzB,WAAW,IAAM,CACf,KAAK,eAAc,CACrB,CAAC,EACF,EAED,OAAS,CACP,KAAK,OAAS,GACd,KAAK,MAAM,SAAU,EAAK,EAEtB,KAAK,OAAS,MAChB,KAAK,MAAM,cAAe,EAAK,CAElC,EAED,gBAAkB,UAChBC,EAAAA,EAAa,eAACF,EAAA,KAAK,MAAM,aAAX,YAAAA,EAAuB,GAAG,IAAxCE,MAAAA,EAA2C,OAC5C,EAED,UAAWC,EAAG,CACR,KAAK,QACP,KAAK,qBAAqBA,CAAC,CAE9B,CACF,CACH,EAhQAC,EAAA,CAAA,MAAA,KAAA,EAAAC,EAAA,CAAA,aAAA,KA8BU,UAAQ,uBACR,MAAM,uBACN,KAAK,SACL,aAAW,QAjCrBC,EAAA,CAAA,MAAA,KAAA,6HACEC,qBA+DM,MAAA,KAAA,CA9DJC,EAAAA,YAYYC,EAAA,CAXV,UAAQ,0BACR,MAAM,iCACL,aAAYC,EAAS,UACtB,WAAW,QACV,QAAOC,EAAS,YAPvB,QAAAC,EAAA,QASM,IAIC,CAJDC,EAAAA,mBAIC,MAAA,CAHE,MAVTC,EAAAA,eAUgBJ,EAAgB,gBAAA,EACvB,IAAKA,EAAQ,SACb,IAAKA,EAAQ,QAZtB,EAAA,KAAA,GAAAN,CAAA,IAAA,EAAA,+BAgBYW,EAAM,sBADdC,EAgDW,YAAAC,WAAA,CA/Df,IAAA,EAiBO,GAAIP,EAAQ,WAEbG,EAAA,mBA2CM,MA3CNK,aA2CM,CA1CH,cAAcH,EAAM,OAAA,QAAA,OACrB,MAAM,UACN,UAAQ,UACR,EAAAI,aAAqBR,EAAD,eAAA,EAAA,EAAA,CACnB,2BAAWI,EAAe,gBAAA,IAC1B,4BAAYA,EAAe,gBAAA,IAC3B,yBAAUA,EAAe,gBAAA,IACzB,0BAAWA,EAAe,gBAAA,OAE3BF,EAAA,mBAWM,MAXNO,EAWM,CALJP,EAAAA,mBAIC,MAAA,CAHC,MAAM,8BACL,IAAKH,EAAQ,SACb,IAAKA,EAAQ,QAtC1B,EAAA,KAAA,EAAAJ,CAAA,IAyCQE,EAAAA,YAoBaa,EAAA,WAAA,CApBD,KAAK,MAAM,EAAA,CAzC/B,QAAAT,EAAA,QA0CU,IAkBY,CAjBJG,EAAe,+BADvBC,EAkBY,YAAAP,EAAA,CA5DtB,IAAA,EA4CY,IAAI,aACJ,UAAQ,4BACR,MAAM,iBACN,OAAA,GACA,KAAK,KACL,WAAW,QACX,KAAK,WACJ,aAAYC,EAAc,eAC1B,QAAOC,EAAK,QAEF,eACT,IAGE,CAHFH,EAAAA,YAGEc,EAAA,CAFA,MAAM,+BACN,KAAK,UAzDrB,EAAA,gCAAAC,EAAA,mBAAA,GAAA,EAAA,IAAA,EAAA,GAAA,EAAA,GAAAlB,CAAA,cAAAkB,EAAA,mBAAA,GAAA,EAAA"}
+{"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","_hoisted_1","_hoisted_2","_hoisted_4","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_withCtx","_createElementVNode","_normalizeClass","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_component_sr_only_close_button","_createCommentVNode"],"mappings":"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"}

package/dist/vue3/lib/image-viewer/image-viewer.js

@@ -1,25 +1,28 @@
-import _ from "../../common/mixins/modal.js";
+import g from "../../common/mixins/modal.js";
 import { returnFirstEl as h } from "../../common/utils/index.js";
 import { EVENT_KEYNAMES as a } from "../../common/constants/index.js";
 import { DtIconClose as v } from "@dialpad/dialtone-icons/vue3";
-import { resolveComponent as d, openBlock as n, createElementBlock as w, createVNode as u, withCtx as c, createElementVNode as s, normalizeClass as C, createBlock as p, Teleport as b, mergeProps as k, toHandlers as B, Transition as E, createCommentVNode as f } from "vue";
-import { _ as y } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import w from "../../shared/sr_only_close_button.js";
+import { DialtoneLocalization as C } from "../../localization/index.js";
+import { resolveComponent as u, openBlock as l, createElementBlock as B, createVNode as c, withCtx as m, createElementVNode as n, normalizeClass as b, createBlock as d, Teleport as k, mergeProps as O, toHandlers as T, Transition as y, createCommentVNode as E } from "vue";
+import { _ as S } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import A from "../button/button.js";
-const O = {
+const q = {
   compatConfig: { MODE: 3 },
   name: "DtImageViewer",
   components: {
+    SrOnlyCloseButton: w,
     DtButton: A,
     DtIconClose: v
   },
-  mixins: [_],
+  mixins: [g],
   props: {
     /**
      * By default the portal appends to the body of the root parent. We can modify
      * this behaviour by passing an appendTo prop that points to an id or an html tag from the root of the parent.
      * The appendTo prop expects a CSS selector string or an actual DOM node.
      * type: string | HTMLElement, default: 'body'
-    */
+     */
     appendTo: {
       type: String,
       default: "body"
@@ -63,13 +66,6 @@ const O = {
     ariaLabel: {
       type: String,
       required: !0
-    },
-    /**
-     * Aria label for close button
-     */
-    closeAriaLabel: {
-      type: String,
-      required: !0
     }
   },
   emits: [
@@ -89,7 +85,8 @@ const O = {
   data() {
     return {
       showCloseButton: !0,
-      isOpen: !1
+      isOpen: !1,
+      i18n: new C()
     };
   },
   computed: {
@@ -110,6 +107,9 @@ const O = {
           }
         }
       };
+    },
+    closeButtonTitle() {
+      return this.i18n.$t("DIALTONE_CLOSE_BUTTON");
     }
   },
   watch: {
@@ -144,55 +144,55 @@ const O = {
       this.isOpen && this.focusTrappedTabPress(e);
     }
   }
-}, S = ["src", "alt"], q = ["aria-hidden"], T = {
+}, D = ["src", "alt"], L = ["aria-hidden"], M = {
   "data-qa": "dt-image-viewer-full",
   class: "d-image-viewer__full",
   role: "dialog",
   "aria-modal": "true"
-}, M = ["src", "alt"];
-function L(e, t, o, V, i, r) {
-  const m = d("dt-button"), g = d("dt-icon-close");
-  return n(), w("div", null, [
-    u(m, {
+}, N = ["src", "alt"];
+function I(e, t, o, V, i, s) {
+  const p = u("dt-button"), f = u("dt-icon-close"), _ = u("sr-only-close-button");
+  return l(), B("div", null, [
+    c(p, {
       "data-qa": "dt-image-viewer-preview",
       class: "d-image-viewer__preview-button",
       "aria-label": o.ariaLabel,
       importance: "clear",
-      onClick: r.openModal
+      onClick: s.openModal
     }, {
-      default: c(() => [
-        s("img", {
-          class: C(o.imageButtonClass),
+      default: m(() => [
+        n("img", {
+          class: b(o.imageButtonClass),
           src: o.imageSrc,
           alt: o.imageAlt
-        }, null, 10, S)
+        }, null, 10, D)
       ]),
       _: 1
     }, 8, ["aria-label", "onClick"]),
-    i.isOpen ? (n(), p(b, {
+    i.isOpen ? (l(), d(k, {
       key: 0,
       to: o.appendTo
     }, [
-      s("div", k({
+      n("div", O({
         "aria-hidden": i.isOpen ? "false" : "true",
         class: "d-modal",
         "data-qa": "dt-modal"
-      }, B(r.modalListeners, !0), {
-        onMouseover: t[0] || (t[0] = (l) => i.showCloseButton = !0),
-        onMouseleave: t[1] || (t[1] = (l) => i.showCloseButton = !1),
-        onFocusin: t[2] || (t[2] = (l) => i.showCloseButton = !0),
-        onFocusout: t[3] || (t[3] = (l) => i.showCloseButton = !1)
+      }, T(s.modalListeners, !0), {
+        onMouseover: t[0] || (t[0] = (r) => i.showCloseButton = !0),
+        onMouseleave: t[1] || (t[1] = (r) => i.showCloseButton = !1),
+        onFocusin: t[2] || (t[2] = (r) => i.showCloseButton = !0),
+        onFocusout: t[3] || (t[3] = (r) => i.showCloseButton = !1)
       }), [
-        s("div", T, [
-          s("img", {
+        n("div", M, [
+          n("img", {
             class: "d-image-viewer__full__image",
             src: o.imageSrc,
             alt: o.imageAlt
-          }, null, 8, M)
+          }, null, 8, N)
         ]),
-        u(E, { name: "fade" }, {
-          default: c(() => [
-            i.showCloseButton ? (n(), p(m, {
+        c(y, { name: "fade" }, {
+          default: m(() => [
+            i.showCloseButton ? (l(), d(p, {
               key: 0,
               ref: "closeImage",
               "data-qa": "dt-image-viewer-close-btn",
@@ -201,26 +201,30 @@ function L(e, t, o, V, i, r) {
               size: "lg",
               importance: "clear",
               kind: "inverted",
-              "aria-label": o.closeAriaLabel,
-              onClick: r.close
+              "aria-label": s.closeButtonTitle,
+              title: s.closeButtonTitle,
+              onClick: s.close
             }, {
-              icon: c(() => [
-                u(g, {
+              icon: m(() => [
+                c(f, {
                   class: "d-image-viewer__close-button",
                   size: "400"
                 })
               ]),
               _: 1
-            }, 8, ["aria-label", "onClick"])) : f("", !0)
+            }, 8, ["aria-label", "title", "onClick"])) : (l(), d(_, {
+              key: 1,
+              onClose: s.close
+            }, null, 8, ["onClose"]))
           ]),
           _: 1
         })
-      ], 16, q)
-    ], 8, ["to"])) : f("", !0)
+      ], 16, L)
+    ], 8, ["to"])) : E("", !0)
   ]);
 }
-const H = /* @__PURE__ */ y(O, [["render", L]]);
+const G = /* @__PURE__ */ S(q, [["render", I]]);
 export {
-  H as default
+  G as default
 };
 //# sourceMappingURL=image-viewer.js.map

package/dist/vue3/lib/image-viewer/image-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.js","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=\"closeAriaLabel\"\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        </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';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtImageViewer',\n\n  components: {\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     * Aria label for close button\n     */\n    closeAriaLabel: {\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    };\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\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","DtButton","DtIconClose","Modal","event","EVENT_KEYNAMES","isShowing","_a","open","_b","returnFirstEl","_hoisted_1","_hoisted_2","_hoisted_4","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_withCtx","_createElementVNode","_normalizeClass","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_createCommentVNode"],"mappings":"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"}
+{"version":3,"file":"image-viewer.js","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","_b","returnFirstEl","_hoisted_1","_hoisted_2","_hoisted_4","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_withCtx","_createElementVNode","_normalizeClass","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon_close","_component_sr_only_close_button","_createCommentVNode"],"mappings":"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"}

package/dist/vue3/lib/ivr-node/ivr-node-constants.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="promptmenu",O="promptcollect",t="promptplay",R="gotoexpert",o="goto",E="branch",r="transfer",N="hangup",n="assign",I="customerdata",c={[_]:"keypad",[O]:"dialer",[t]:"volume-2",[R]:"expert-node",[E]:"branch",[o]:"call-merge",[n]:"chevrons-right",[I]:"list-bullet",[r]:"transfer",[N]:"phone-hang-up"},P={[_]:"Menu",[O]:"Collect",[t]:"Play",[R]:"Expert",[E]:"Branch",[o]:"Go-to",[r]:"Transfer",[N]:"Hangup",[n]:"Assign",[I]:"Customer Data"},e={PROMPT:{normal:"d-recipe-ivr-node-prompt",selected:"d-recipe-ivr-node-prompt--selected"},LOGIC:{normal:"d-recipe-ivr-node-logic",selected:"d-recipe-ivr-node-logic--selected"},TERMINAL:{normal:"d-recipe-ivr-node-terminal",selected:"d-recipe-ivr-node-terminal--selected"}},s={[_]:e.PROMPT,[O]:e.PROMPT,[t]:e.PROMPT,[R]:e.LOGIC,[E]:e.LOGIC,[o]:e.LOGIC,[n]:e.LOGIC,[I]:e.LOGIC,[r]:e.TERMINAL,[N]:e.TERMINAL};exports.IVR_NODE_ASSIGN=n;exports.IVR_NODE_BRANCH=E;exports.IVR_NODE_CLASS_MAPPING=s;exports.IVR_NODE_CUSTOMER_DATA=I;exports.IVR_NODE_EXPERT=R;exports.IVR_NODE_GO_TO=o;exports.IVR_NODE_HANGUP=N;exports.IVR_NODE_ICON_TYPES=c;exports.IVR_NODE_LABELS=P;exports.IVR_NODE_PROMPT_COLLECT=O;exports.IVR_NODE_PROMPT_MENU=_;exports.IVR_NODE_PROMPT_PLAY=t;exports.IVR_NODE_TRANSFER=r;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _="promptmenu",O="promptcollect",t="promptplay",R="gotoexpert",o="branch",E="goto",r="assign",N="customerdata",n="transfer",I="hangup",c={[_]:"keypad",[O]:"dialer",[t]:"volume-2",[R]:"expert-node",[o]:"branch",[E]:"call-merge",[r]:"chevrons-right",[N]:"list-bullet",[n]:"transfer",[I]:"phone-hang-up"},P={[_]:"Menu",[O]:"Collect",[t]:"Play",[R]:"Expert",[o]:"Branch",[E]:"Go-to",[r]:"Assign",[N]:"Customer Data",[n]:"Transfer",[I]:"Hangup"},e={PROMPT:{normal:"d-recipe-ivr-node-prompt",selected:"d-recipe-ivr-node-prompt--selected"},LOGIC:{normal:"d-recipe-ivr-node-logic",selected:"d-recipe-ivr-node-logic--selected"},TERMINAL:{normal:"d-recipe-ivr-node-terminal",selected:"d-recipe-ivr-node-terminal--selected"}},s={[_]:e.PROMPT,[O]:e.PROMPT,[t]:e.PROMPT,[R]:e.LOGIC,[o]:e.LOGIC,[E]:e.LOGIC,[r]:e.LOGIC,[N]:e.LOGIC,[n]:e.TERMINAL,[I]:e.TERMINAL};exports.IVR_NODE_ASSIGN=r;exports.IVR_NODE_BRANCH=o;exports.IVR_NODE_CLASS_MAPPING=s;exports.IVR_NODE_CUSTOMER_DATA=N;exports.IVR_NODE_EXPERT=R;exports.IVR_NODE_GO_TO=E;exports.IVR_NODE_HANGUP=I;exports.IVR_NODE_ICON_TYPES=c;exports.IVR_NODE_LABELS=P;exports.IVR_NODE_PROMPT_COLLECT=O;exports.IVR_NODE_PROMPT_MENU=_;exports.IVR_NODE_PROMPT_PLAY=t;exports.IVR_NODE_TRANSFER=n;
 //# sourceMappingURL=ivr-node-constants.cjs.map