@dialpad/dialtone-vue 3.119.0 → 3.120.0

package/dist/lib/hovercard.js.map

@@ -1 +1 @@
-{"version":3,"file":"hovercard.js","sources":["../../components/hovercard/timer.js","../../components/hovercard/hovercard.vue"],"sourcesContent":["import { ref } from 'vue';\nimport { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\n\nexport default (function () {\n  const current = ref(null);\n  let timerLeave, timerEnter;\n  let start = null;\n  let prevCard = null;\n\n  // Handles the timer for when the event that opens the hovercard\n  // is triggered.\n  // If no hovercard is active, it sets a delay of TOOLTIP_DELAY_MS.\n  // If there was an active hovercard, the delay depends on the time it takes\n  // to move from one anchor to the other.\n  function enter (id) {\n    if (prevCard) {\n      const time = Date.now() - start + 100;\n      if (timerLeave) clearTimeout(timerLeave);\n      if (prevCard !== id) {\n        timerLeave = setTimeout(\n          () => {\n            if (current.value !== null) {\n              start = Date.now();\n            }\n            current.value = null;\n          },\n          time,\n        );\n        if (timerEnter) clearTimeout(timerEnter);\n        timerEnter = setTimeout(\n          () => {\n            current.value = id;\n            prevCard = id;\n          },\n          time,\n        );\n      }\n    } else {\n      timerEnter = setTimeout(() => {\n        current.value = id;\n        prevCard = id;\n      }, TOOLTIP_DELAY_MS);\n    }\n  }\n\n  // Handles the timer for when the event that closes the hovercard\n  // is triggered.\n  function leave () {\n    if (timerEnter) {\n      clearTimeout(timerEnter);\n      timerEnter = null;\n    }\n    start = Date.now();\n    timerLeave = setTimeout(() => {\n      current.value = null;\n      prevCard = null;\n    }, TOOLTIP_DELAY_MS);\n  }\n\n  let instance = null;\n\n  return () => {\n    if (instance === null) {\n      instance = { current, enter, leave };\n    }\n    return instance;\n  };\n})();\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    :hovercard=\"true\"\n    :timer=\"timer\"\n    data-qa=\"dt-hovercard\"\n    @opened=\"(e) => ($emit('opened', e))\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <slot name=\"content\" />\n    </template>\n    <template #headerContent>\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script setup>\nimport { reactive } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\nimport useTimer from './timer';\n\nconst timer = reactive(useTimer());\n\ndefineProps({\n  /**\n     * Fade transition when the content display is toggled.\n     * @type boolean\n     * @values true, false\n     */\n  transition: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n      * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\".\n     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     */\n  fallbackPlacements: {\n    type: Array,\n    default: () => {\n      return ['auto'];\n    },\n  },\n\n  /**\n     * The direction the popover displays relative to the anchor.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n  placement: {\n    type: String,\n    default: 'top-start',\n    validator (placement) {\n      return TOOLTIP_DIRECTIONS.includes(placement);\n    },\n  },\n\n  /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n  padding: {\n    type: String,\n    default: 'large',\n    validator: (padding) => {\n      return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n    },\n  },\n\n  /**\n     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n  offset: {\n    type: Array,\n    default: () => [0, 16],\n  },\n\n  /**\n     * The id of the tooltip\n     */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n     * Additional class name for the header content wrapper element.\n     */\n  headerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the footer content wrapper element.\n     */\n  footerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the dialog element.\n     */\n  dialogClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the content wrapper element.\n     */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n  appendTo: {\n    type: [HTMLElement, String],\n    default: 'body',\n    validator: appendTo => {\n      return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n    },\n  },\n});\n\ndefineEmits(['opened']);\n</script>\n"],"names":["useTimer","current","ref","timerLeave","timerEnter","start","prevCard","enter","id","time","TOOLTIP_DELAY_MS","leave","instance","timer","reactive"],"mappings":";;;;;;;;;;;;;;;;;AAGA,MAAAA,IAAgB,WAAY;AAC1B,QAAMC,IAAUC,EAAI,IAAI;AACxB,MAAIC,GAAYC,GACZC,IAAQ,MACRC,IAAW;AAOf,WAASC,EAAOC,GAAI;AAClB,QAAIF,GAAU;AACZ,YAAMG,IAAO,KAAK,IAAG,IAAKJ,IAAQ;AAClC,MAAIF,KAAY,aAAaA,CAAU,GACnCG,MAAaE,MACfL,IAAa;AAAA,QACX,MAAM;AACJ,UAAIF,EAAQ,UAAU,SACpBI,IAAQ,KAAK,QAEfJ,EAAQ,QAAQ;AAAA,QACjB;AAAA,QACDQ;AAAA,MACV,GACYL,KAAY,aAAaA,CAAU,GACvCA,IAAa;AAAA,QACX,MAAM;AACJ,UAAAH,EAAQ,QAAQO,GAChBF,IAAWE;AAAA,QACZ;AAAA,QACDC;AAAA,MACV;AAAA,IAEA;AACM,MAAAL,IAAa,WAAW,MAAM;AAC5B,QAAAH,EAAQ,QAAQO,GAChBF,IAAWE;AAAA,MACZ,GAAEE,CAAgB;AAAA,EAEtB;AAID,WAASC,IAAS;AAChB,IAAIP,MACF,aAAaA,CAAU,GACvBA,IAAa,OAEfC,IAAQ,KAAK,OACbF,IAAa,WAAW,MAAM;AAC5B,MAAAF,EAAQ,QAAQ,MAChBK,IAAW;AAAA,IACZ,GAAEI,CAAgB;AAAA,EACpB;AAED,MAAIE,IAAW;AAEf,SAAO,OACDA,MAAa,SACfA,IAAW,EAAE,SAAAX,GAAS,OAAAM,GAAO,OAAAI,EAAK,IAE7BC;AAEX,EAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrBJ,UAAMC,IAAQC,EAASd,EAAQ,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"hovercard.js","sources":["../../components/hovercard/timer.js","../../components/hovercard/hovercard.vue"],"sourcesContent":["import { ref } from 'vue';\nimport { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';\n\nexport default (function () {\n  const current = ref(null);\n  let timerLeave, timerEnter;\n  let start = null;\n  let prevCard = null;\n\n  // Handles the timer for when the event that opens the hovercard\n  // is triggered.\n  // If no hovercard is active, it sets a delay of TOOLTIP_DELAY_MS.\n  // If there was an active hovercard, the delay depends on the time it takes\n  // to move from one anchor to the other.\n  function enter (id) {\n    if (prevCard) {\n      const time = Date.now() - start + 100;\n      if (timerLeave) clearTimeout(timerLeave);\n      if (prevCard !== id) {\n        timerLeave = setTimeout(\n          () => {\n            if (current.value !== null) {\n              start = Date.now();\n            }\n            current.value = null;\n          },\n          time,\n        );\n        if (timerEnter) clearTimeout(timerEnter);\n        timerEnter = setTimeout(\n          () => {\n            current.value = id;\n            prevCard = id;\n          },\n          time,\n        );\n      }\n    } else {\n      timerEnter = setTimeout(() => {\n        current.value = id;\n        prevCard = id;\n      }, TOOLTIP_DELAY_MS);\n    }\n  }\n\n  // Handles the timer for when the event that closes the hovercard\n  // is triggered.\n  function leave () {\n    if (timerEnter) {\n      clearTimeout(timerEnter);\n      timerEnter = null;\n    }\n    start = Date.now();\n    timerLeave = setTimeout(() => {\n      current.value = null;\n      prevCard = null;\n    }, TOOLTIP_DELAY_MS);\n  }\n\n  let instance = null;\n\n  return () => {\n    if (instance === null) {\n      instance = { current, enter, leave };\n    }\n    return instance;\n  };\n})();\n","<!-- eslint-disable vue/multi-word-component-names -->\n<template>\n  <dt-popover\n    :id=\"id\"\n    :placement=\"placement\"\n    :content-class=\"contentClass\"\n    :fallback-placements=\"fallbackPlacements\"\n    :padding=\"padding\"\n    :transition=\"transition ? 'fade' : null\"\n    :offset=\"offset\"\n    :modal=\"false\"\n    initial-focus-element=\"none\"\n    :header-class=\"headerClass\"\n    :footer-class=\"footerClass\"\n    :append-to=\"appendTo\"\n    :hovercard=\"true\"\n    :timer=\"timer\"\n    data-qa=\"dt-hovercard\"\n    @opened=\"(e) => ($emit('opened', e))\"\n  >\n    <template #anchor=\"{ attrs }\">\n      <slot\n        name=\"anchor\"\n        v-bind=\"attrs\"\n      />\n    </template>\n    <template #content>\n      <slot name=\"content\" />\n    </template>\n    <template #headerContent>\n      <slot name=\"headerContent\" />\n    </template>\n\n    <template #footerContent>\n      <slot name=\"footerContent\" />\n    </template>\n  </dt-popover>\n</template>\n\n<script setup>\nimport { reactive } from 'vue';\nimport { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';\nimport { TOOLTIP_DIRECTIONS } from '@/components/tooltip/index.js';\nimport { getUniqueString } from '@/common/utils';\nimport useTimer from './timer';\n\nconst timer = reactive(useTimer());\n\ndefineProps({\n  /**\n     * Fade transition when the content display is toggled.\n     * @type boolean\n     * @values true, false\n     */\n  transition: {\n    type: Boolean,\n    default: false,\n  },\n\n  /**\n      * If the popover does not fit in the direction described by \"placement\",\n     * it will attempt to change its direction to the \"fallbackPlacements\".\n     * @see https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements\"\n     */\n  fallbackPlacements: {\n    type: Array,\n    default: () => {\n      return ['auto'];\n    },\n  },\n\n  /**\n     * The direction the popover displays relative to the anchor.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#placement\"\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     */\n  placement: {\n    type: String,\n    default: 'top-start',\n    validator (placement) {\n      return TOOLTIP_DIRECTIONS.includes(placement);\n    },\n  },\n\n  /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n  padding: {\n    type: String,\n    default: 'large',\n    validator: (padding) => {\n      return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n    },\n  },\n\n  /**\n     * Displaces the content box from its anchor element\n     * by the specified number of pixels.\n     * @see https://atomiks.github.io/tippyjs/v6/all-props/#offset\"\n     */\n  offset: {\n    type: Array,\n    default: () => [0, 16],\n  },\n\n  /**\n     * The id of the tooltip\n     */\n  id: {\n    type: String,\n    default () { return getUniqueString(); },\n  },\n\n  /**\n     * Additional class name for the header content wrapper element.\n     */\n  headerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the footer content wrapper element.\n     */\n  footerClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the dialog element.\n     */\n  dialogClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Additional class name for the content wrapper element.\n     */\n  contentClass: {\n    type: [String, Array, Object],\n    default: '',\n  },\n\n  /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n  appendTo: {\n    type: [HTMLElement, String],\n    default: 'body',\n    validator: appendTo => {\n      return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n    },\n  },\n});\n\ndefineEmits(['opened']);\n</script>\n"],"names":["useTimer","current","ref","timerLeave","timerEnter","start","prevCard","enter","id","time","TOOLTIP_DELAY_MS","leave","instance","timer","reactive"],"mappings":";;;;;;;;;;;;;;;;AAGA,MAAAA,IAAgB,WAAY;AAC1B,QAAMC,IAAUC,EAAI,IAAI;AACxB,MAAIC,GAAYC,GACZC,IAAQ,MACRC,IAAW;AAOf,WAASC,EAAOC,GAAI;AAClB,QAAIF,GAAU;AACZ,YAAMG,IAAO,KAAK,IAAG,IAAKJ,IAAQ;AAClC,MAAIF,KAAY,aAAaA,CAAU,GACnCG,MAAaE,MACfL,IAAa;AAAA,QACX,MAAM;AACJ,UAAIF,EAAQ,UAAU,SACpBI,IAAQ,KAAK,QAEfJ,EAAQ,QAAQ;AAAA,QACjB;AAAA,QACDQ;AAAA,MACV,GACYL,KAAY,aAAaA,CAAU,GACvCA,IAAa;AAAA,QACX,MAAM;AACJ,UAAAH,EAAQ,QAAQO,GAChBF,IAAWE;AAAA,QACZ;AAAA,QACDC;AAAA,MACV;AAAA,IAEA;AACM,MAAAL,IAAa,WAAW,MAAM;AAC5B,QAAAH,EAAQ,QAAQO,GAChBF,IAAWE;AAAA,MACZ,GAAEE,CAAgB;AAAA,EAEtB;AAID,WAASC,IAAS;AAChB,IAAIP,MACF,aAAaA,CAAU,GACvBA,IAAa,OAEfC,IAAQ,KAAK,OACbF,IAAa,WAAW,MAAM;AAC5B,MAAAF,EAAQ,QAAQ,MAChBK,IAAW;AAAA,IACZ,GAAEI,CAAgB;AAAA,EACpB;AAED,MAAIE,IAAW;AAEf,SAAO,OACDA,MAAa,SACfA,IAAW,EAAE,SAAAX,GAAS,OAAAM,GAAO,OAAAI,EAAK,IAE7BC;AAEX,EAAI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACrBJ,UAAMC,IAAQC,EAASd,EAAQ,CAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/icon.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("@dialpad/dialtone-icons/vue3"),a=require("../chunks/icon_constants-2S_OSQ1t.js"),t=require("vue"),c=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("@dialpad/dialtone-icons/icons.json");const o={name:"DtIcon",props:{size:{type:String,default:"500",validator:e=>Object.keys(a.I).includes(e)},name:{type:String,required:!0,validator:e=>a.a.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,d,n,l,_,r){return r.icon?(t.openBlock(),t.createBlock(t.resolveDynamicComponent(r.icon),{key:0,size:n.size,"aria-label":n.ariaLabel,"data-qa":e.$attrs["data-qa"]??"dt-icon"},null,8,["size","aria-label","data-qa"])):t.createCommentVNode("",!0)}const s=c._(o,[["render",u]]);exports.ICON_NAMES=a.a;exports.ICON_SIZE_MODIFIERS=a.I;exports.DtIcon=s;
+//# sourceMappingURL=icon.cjs.map

package/dist/lib/icon.cjs.map

@@ -0,0 +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  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","_openBlock","_createBlock","_resolveDynamicComponent","$props","_ctx"],"mappings":"8SAkBA,MAAKA,EAAU,CACb,KAAM,SAEN,MAAO,CAKL,KAAM,CACJ,KAAM,OACN,QAAS,MACT,UAAYC,GAAM,OAAO,KAAKC,GAAmB,EAAE,SAASD,CAAC,CAC9D,EAKD,KAAM,CACJ,KAAM,OACN,SAAU,GACV,UAAYE,GAASC,IAAW,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,iCA1DUC,EAAI,MAFZC,EAAAA,UAAA,EAAAC,EAAA,YAMEC,0BALKH,EAAI,IAAA,EAAA,OAER,KAAMI,EAAI,KACV,aAAYA,EAAS,UACrB,UAASC,EAAM,OAAA,SAAA,GAAA"}

package/dist/lib/icon.js

@@ -1,16 +1,10 @@
-import * as r from "@dialpad/dialtone-icons/vue3";
-import { I as i, a as m } from "../chunks/icon_constants-OpYAAKwF.js";
-import { defineAsyncComponent as p, resolveComponent as u, openBlock as s, createElementBlock as f, withDirectives as l, createVNode as _, normalizeClass as S, vShow as c, createBlock as k, resolveDynamicComponent as b, mergeProps as h } from "vue";
-import { _ as z } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtSkeleton as y } from "./skeleton.js";
+import { icons as r } from "@dialpad/dialtone-icons/vue3";
+import { I as n, a as o } from "../chunks/icon_constants-OpYAAKwF.js";
+import { openBlock as i, createBlock as c, resolveDynamicComponent as s, createCommentVNode as d } from "vue";
+import { _ as l } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
 import "@dialpad/dialtone-icons/icons.json";
-const I = {
+const m = {
   name: "DtIcon",
-  components: {
-    DtSkeleton: y,
-    ...Object.keys(r).reduce((e, t) => (e[t] = p(r[t]), e), {})
-  },
-  inheritAttrs: !1,
   props: {
     /**
      * The size of the icon.
@@ -19,7 +13,7 @@ const I = {
     size: {
       type: String,
       default: "500",
-      validator: (e) => Object.keys(i).includes(e)
+      validator: (e) => Object.keys(n).includes(e)
     },
     /**
      * The icon name in kebab-case
@@ -27,7 +21,7 @@ const I = {
     name: {
       type: String,
       required: !0,
-      validator: (e) => m.includes(e)
+      validator: (e) => o.includes(e)
     },
     /**
      * The label of the icon as read out by a screenreader. Leave this unset if your icon is purely presentational
@@ -35,14 +29,6 @@ const I = {
     ariaLabel: {
       type: String,
       default: void 0
-    },
-    /**
-     * Shows a skeleton loader while the emoji asset is loading.
-     * @values true, false
-     */
-    showSkeleton: {
-      type: Boolean,
-      default: !0
     }
   },
   data() {
@@ -51,40 +37,23 @@ const I = {
     };
   },
   computed: {
-    iconSize() {
-      return i[this.size];
-    },
     icon() {
-      return `dt-icon-${this.name}`;
+      return r[`./src/icons/${this.name}.vue`];
     }
   }
-}, L = { class: "d-icon__wrapper" };
-function v(e, t, o, C, n, a) {
-  const d = u("dt-skeleton");
-  return s(), f("span", L, [
-    l(_(d, {
-      offset: 0,
-      "shape-option": { shape: "circle", size: "100%" },
-      "aria-label": o.ariaLabel,
-      class: S(["d-icon", a.iconSize])
-    }, null, 8, ["aria-label", "class"]), [
-      [c, !n.iconLoaded && o.showSkeleton]
-    ]),
-    l((s(), k(b(a.icon), h({
-      size: o.size,
-      "aria-label": o.ariaLabel,
-      "data-qa": e.$attrs["data-qa"] ?? "dt-icon"
-    }, e.$attrs, {
-      onLoaded: t[0] || (t[0] = (D) => n.iconLoaded = !0)
-    }), null, 16, ["size", "aria-label", "data-qa"])), [
-      [c, n.iconLoaded]
-    ])
-  ]);
+};
+function u(e, p, a, f, _, t) {
+  return t.icon ? (i(), c(s(t.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"])) : d("", !0);
 }
-const E = /* @__PURE__ */ z(I, [["render", v]]);
+const q = /* @__PURE__ */ l(m, [["render", u]]);
 export {
-  E as DtIcon,
-  m as ICON_NAMES,
-  i as ICON_SIZE_MODIFIERS
+  q as DtIcon,
+  o as ICON_NAMES,
+  n as ICON_SIZE_MODIFIERS
 };
 //# sourceMappingURL=icon.js.map

package/dist/lib/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../components/icon/icon.vue"],"sourcesContent":["<template>\n  <span class=\"d-icon__wrapper\">\n    <dt-skeleton\n      v-show=\"!iconLoaded && showSkeleton\"\n      :offset=\"0\"\n      :shape-option=\"{ shape: 'circle', size: '100%' }\"\n      :aria-label=\"ariaLabel\"\n      :class=\"['d-icon', iconSize]\"\n    />\n    <component\n      :is=\"icon\"\n      v-show=\"iconLoaded\"\n      :size=\"size\"\n      :aria-label=\"ariaLabel\"\n      :data-qa=\"$attrs['data-qa'] ?? 'dt-icon'\"\n      v-bind=\"$attrs\"\n      @loaded=\"iconLoaded = true\"\n    />\n  </span>\n</template>\n\n<script>\nimport { DtSkeleton } from '../skeleton';\nimport * as icons from '@dialpad/dialtone-icons/vue3';\nimport { ICON_SIZE_MODIFIERS, ICON_NAMES } from './icon_constants';\nimport { defineAsyncComponent } from 'vue';\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  name: 'DtIcon',\n\n  components: {\n    DtSkeleton,\n    ...Object.keys(icons).reduce((acc, icon) => {\n      acc[icon] = defineAsyncComponent(icons[icon]);\n      return acc;\n    }, {}),\n  },\n\n  inheritAttrs: false,\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     * Shows a skeleton loader while the emoji asset is loading.\n     * @values true, false\n     */\n    showSkeleton: {\n      type: Boolean,\n      default: true,\n    },\n  },\n\n  data () {\n    return {\n      iconLoaded: false,\n    };\n  },\n\n  computed: {\n    iconSize () {\n      return ICON_SIZE_MODIFIERS[this.size];\n    },\n\n    icon () {\n      return `dt-icon-${this.name}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtSkeleton","icons","acc","icon","defineAsyncComponent","s","ICON_SIZE_MODIFIERS","name","ICON_NAMES","_hoisted_1","_openBlock","_createElementBlock","_createVNode","_component_dt_skeleton","$props","$options","_vShow","$data","_createBlock","_resolveDynamicComponent","_mergeProps","_ctx"],"mappings":";;;;;;AA+BA,MAAKA,IAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,YAAAC;AAAA,IACA,GAAG,OAAO,KAAKC,CAAK,EAAE,OAAO,CAACC,GAAKC,OACjCD,EAAIC,CAAI,IAAIC,EAAqBH,EAAME,CAAI,CAAC,GACrCD,IACN,EAAE;AAAA,EACN;AAAA,EAED,cAAc;AAAA,EAEd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAACG,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;AAAA;AAAA;AAAA;AAAA,IAMD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,YAAY;AAAA;EAEf;AAAA,EAED,UAAU;AAAA,IACR,WAAY;AACV,aAAOD,EAAoB,KAAK,IAAI;AAAA,IACrC;AAAA,IAED,OAAQ;AACN,aAAO,WAAW,KAAK,IAAI;AAAA,IAC5B;AAAA,EACF;AACH,GAhGQG,IAAA,EAAA,OAAM,kBAAiB;;;AAA7B,SAAAC,EAAA,GAAAC,EAiBO,QAjBPF,GAiBO;AAAA,MAhBLG,EAMEC,GAAA;AAAA,MAJC,QAAQ;AAAA,MACR,gBAAc,EAAiC,OAAA,UAAA,MAAA,OAAA;AAAA,MAC/C,cAAYC,EAAS;AAAA,MACrB,oBAAkBC,EAAQ,QAAA,CAAA;AAAA;MAJlB,CAAAC,GAAA,CAAAC,EAAA,cAAcH,EAAY,YAAA;AAAA;YAMrCI,EAQEC,EAPKJ,EAAI,IAAA,GADXK,EAQE;AAAA,MALC,MAAMN,EAAI;AAAA,MACV,cAAYA,EAAS;AAAA,MACrB,WAASO,EAAM,OAAA,SAAA,KAAA;AAAA,OACRA,EAAM,QAAA;AAAA,MACb,iCAAQJ,EAAU,aAAA;AAAA;UALXA,EAAU,UAAA;AAAA;;;;"}
+{"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  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","_openBlock","_createBlock","_resolveDynamicComponent","$props","_ctx"],"mappings":";;;;;AAkBA,MAAKA,IAAU;AAAA,EACb,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;;SA1DUC,EAAI,QAFZC,EAAA,GAAAC,EAMEC,EALKH,EAAI,IAAA,GAAA;AAAA;IAER,MAAMI,EAAI;AAAA,IACV,cAAYA,EAAS;AAAA,IACrB,WAASC,EAAM,OAAA,SAAA,KAAA;AAAA;;;"}

package/dist/lib/image-viewer.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../chunks/modal-qEzlo0Sj.js"),l=require("./constants.cjs"),e=require("vue"),d=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),m=require("./button.cjs"),p=require("./icon.cjs");require("./utils.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const g={name:"DtImageViewer",components:{DtButton:m.DtButton,DtIcon:p.DtIcon},mixins:[c.M],props:{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 l.EVENT_KEYNAMES.esc:case l.EVENT_KEYNAMES.escape:this.close();break;case l.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;(t=this.$refs.closeImage)==null||t.$el.focus()},trapFocus(t){this.isOpen&&this.focusTrappedTabPress(t)}}},_=["src","alt"],f=["aria-hidden"],h={"data-qa":"dt-image-viewer-full",class:"d-image-viewer__full",role:"dialog","aria-modal":"true"},v=["src","alt"];function w(t,o,i,C,r,s){const a=e.resolveComponent("dt-button"),u=e.resolveComponent("dt-icon");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,_)]),_:1},8,["aria-label","onClick"]),r.isOpen?(e.openBlock(),e.createBlock(e.Teleport,{key:0,to:"body"},[e.createElementVNode("div",e.mergeProps({"aria-hidden":r.isOpen?"false":"true",class:"d-modal","data-qa":"dt-modal"},e.toHandlers(s.modalListeners,!0),{onMouseover:o[0]||(o[0]=n=>r.showCloseButton=!0),onMouseleave:o[1]||(o[1]=n=>r.showCloseButton=!1),onFocusin:o[2]||(o[2]=n=>r.showCloseButton=!0),onFocusout:o[3]||(o[3]=n=>r.showCloseButton=!1)}),[e.createElementVNode("div",h,[e.createElementVNode("img",{class:"d-image-viewer__full__image",src:i.imageSrc,alt:i.imageAlt},null,8,v)]),e.createVNode(e.Transition,{name:"fade"},{default:e.withCtx(()=>[r.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",name:"close",size:"400"})]),_:1},8,["aria-label","onClick"])):e.createCommentVNode("",!0)]),_:1})],16,f)])):e.createCommentVNode("",!0)])}const b=d._(g,[["render",w]]);exports.DtImageViewer=b;
+//# sourceMappingURL=image-viewer.cjs.map

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

@@ -0,0 +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=\"body\"\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\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\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 { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  mixins: [Modal],\n\n  props: {\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      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","DtIcon","Modal","event","EVENT_KEYNAMES","isShowing","_a","open","e","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_createElementVNode","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon"],"mappings":"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"}

package/dist/lib/image-viewer.js

@@ -1,6 +1,6 @@
 import { M as h } from "../chunks/modal-VuMFkZFH.js";
 import { EVENT_KEYNAMES as l } from "./constants.js";
-import { resolveComponent as d, openBlock as n, createElementBlock as _, createVNode as m, withCtx as u, createElementVNode as s, normalizeClass as v, createBlock as p, Teleport as w, mergeProps as b, toHandlers as C, Transition as k, createCommentVNode as f } from "vue";
+import { resolveComponent as d, openBlock as n, createElementBlock as _, createVNode as u, withCtx as m, createElementVNode as s, normalizeClass as v, createBlock as p, Teleport as w, mergeProps as b, toHandlers as C, Transition as k, createCommentVNode as f } from "vue";
 import { _ as B } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
 import { DtButton as A } from "./button.js";
 import { DtIcon as y } from "./icon.js";
@@ -9,7 +9,6 @@ import "../chunks/link_constants-vIUB92L4.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 const E = {
   name: "DtImageViewer",
   components: {
@@ -147,14 +146,14 @@ const E = {
 function T(e, t, o, L, i, r) {
   const c = d("dt-button"), g = d("dt-icon");
   return n(), _("div", null, [
-    m(c, {
+    u(c, {
       "data-qa": "dt-image-viewer-preview",
       class: "d-image-viewer__preview-button",
       "aria-label": o.ariaLabel,
       importance: "clear",
       onClick: r.openModal
     }, {
-      default: u(() => [
+      default: m(() => [
         s("img", {
           class: v(o.imageButtonClass),
           src: o.imageSrc,
@@ -184,8 +183,8 @@ function T(e, t, o, L, i, r) {
             alt: o.imageAlt
           }, null, 8, M)
         ]),
-        m(k, { name: "fade" }, {
-          default: u(() => [
+        u(k, { name: "fade" }, {
+          default: m(() => [
             i.showCloseButton ? (n(), p(c, {
               key: 0,
               ref: "closeImage",
@@ -198,8 +197,8 @@ function T(e, t, o, L, i, r) {
               "aria-label": o.closeAriaLabel,
               onClick: r.close
             }, {
-              icon: u(() => [
-                m(g, {
+              icon: m(() => [
+                u(g, {
                   class: "d-image-viewer__close-button",
                   name: "close",
                   size: "400"
@@ -214,8 +213,8 @@ function T(e, t, o, L, i, r) {
     ])) : f("", !0)
   ]);
 }
-const G = /* @__PURE__ */ B(E, [["render", T]]);
+const j = /* @__PURE__ */ B(E, [["render", T]]);
 export {
-  G as DtImageViewer
+  j as DtImageViewer
 };
 //# sourceMappingURL=image-viewer.js.map

package/dist/lib/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=\"body\"\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\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\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 { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  mixins: [Modal],\n\n  props: {\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      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","DtIcon","Modal","event","EVENT_KEYNAMES","isShowing","_a","open","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_createElementVNode","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon"],"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=\"body\"\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\n                class=\"d-image-viewer__close-button\"\n                name=\"close\"\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 { EVENT_KEYNAMES } from '@/common/constants';\nimport { DtIcon } from '@/components/icon';\nimport { DtButton } from '@/components/button';\n\nexport default {\n  name: 'DtImageViewer',\n\n  components: {\n    DtButton,\n    DtIcon,\n  },\n\n  mixins: [Modal],\n\n  props: {\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      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","DtIcon","Modal","event","EVENT_KEYNAMES","isShowing","_a","open","_createElementBlock","_createVNode","_component_dt_button","$props","$options","_createElementVNode","$data","_createBlock","_Teleport","_mergeProps","_toHandlers","_hoisted_3","_Transition","_component_dt_icon"],"mappings":"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"}

package/dist/lib/input-group.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("../chunks/input_group-AS760Cp7.js"),l=require("./utils.cjs"),s=require("vue"),i=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),d=require("./validation-messages.cjs");require("./validators.cjs");require("./constants.cjs");const u={name:"DtInputGroup",components:{DtValidationMessages:d.DtValidationMessages},mixins:[r.I],props:{dataQaGroup:{type:String,default:"input-group"},dataQaGroupLegend:{type:String,default:"input-group-legend"},dataQaGroupMessages:{type:String,default:"input-group-messages"}},data(){return{internalValue:this.value,hasSlotContent:l.hasSlotContent}},watch:{value(e){this.internalValue=e},internalValue:{immediate:!0,handler(e){this.provideObj.value=e}}},methods:{getMessageKey(e,t){return`input-group-message-${e}-${t}-${this.id}`}}},g=["data-qa"],p=["data-qa"];function m(e,t,a,h,n,q){const o=s.resolveComponent("dt-validation-messages");return s.openBlock(),s.createElementBlock("fieldset",{class:"d-input-group__fieldset","data-qa":a.dataQaGroup},[n.hasSlotContent(e.$slots.legend)||e.legend?(s.openBlock(),s.createElementBlock("legend",s.mergeProps({key:0,class:["d-label",e.legendClass]},e.legendChildProps,{"data-qa":a.dataQaGroupLegend}),[s.renderSlot(e.$slots,"legend",{},()=>[s.createTextVNode(s.toDisplayString(e.legend),1)])],16,p)):s.createCommentVNode("",!0),s.renderSlot(e.$slots,"default"),s.createVNode(o,s.mergeProps({"validation-messages":e.formattedMessages,"show-messages":e.showMessages,class:e.messagesClass,"data-qa":a.dataQaGroupMessages},e.messagesChildProps),null,16,["validation-messages","show-messages","class","data-qa"])],8,g)}const c=i._(u,[["render",m]]);exports.DtInputGroup=c;
+//# sourceMappingURL=input-group.cjs.map

package/dist/lib/input-group.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.cjs","sources":["../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtValidationMessages","InputGroupMixin","hasSlotContent","newValue","newInternalValue","type","index","_createElementBlock","$props","$data","_ctx","_openBlock","_mergeProps","_renderSlot","_createVNode","_component_dt_validation_messages"],"mappings":"0UAuCA,MAAKA,EAAU,CACb,KAAM,eAEN,WAAY,CAAEC,qBAAAA,EAAAA,oBAAsB,EAEpC,OAAQ,CAACC,EAAAA,CAAe,EAExB,MAAO,CAIL,YAAa,CACX,KAAM,OACN,QAAS,aACV,EAKD,kBAAmB,CACjB,KAAM,OACN,QAAS,oBACV,EAKD,oBAAqB,CACnB,KAAM,OACN,QAAS,sBACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,cAAe,KAAK,MACpB,eAAAC,EAAc,eAEjB,EAED,MAAO,CACL,MAAOC,EAAU,CACf,KAAK,cAAgBA,CACtB,EAOD,cAAe,CACb,UAAW,GACX,QAASC,EAAkB,CACzB,KAAK,WAAW,MAAQA,CACzB,CACF,CACF,EAED,QAAS,CACP,cAAeC,EAAMC,EAAO,CAC1B,MAAO,uBAAuBD,CAAI,IAAIC,CAAK,IAAI,KAAK,EAAE,EACvD,CACF,CACH,gIArGEC,EAwBW,mBAAA,WAAA,CAvBT,MAAM,0BACL,UAASC,EAAW,cAGbC,EAAA,eAAeC,EAAA,OAAO,MAAM,GAAKA,EAAM,QAD/CC,EAAAA,YAAAJ,EAAAA,mBAUS,SAVTK,aAUS,OARN,iBAAmBF,EAAW,WAAA,GACvBA,EAAgB,iBAAA,CACvB,UAASF,EAAiB,iBAAA,CAAA,EAAA,CAG3BK,EAAAA,WAEOH,qBAFP,IAEO,qCADFA,EAAM,MAAA,EAAA,CAAA,wCAIbG,aAAQH,EAAA,OAAA,SAAA,EACRI,EAAA,YAMEC,EANFH,aAME,CALC,sBAAqBF,EAAiB,kBACtC,gBAAeA,EAAY,aAC3B,MAAOA,EAAa,cACpB,UAASF,EAAmB,qBACrBE,EAAkB,kBAAA,EAAA,KAAA,GAAA,CAAA,sBAAA,gBAAA,QAAA,SAAA,CAAA"}

package/dist/lib/input.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h=require("./constants.cjs"),c=require("./utils.cjs"),m=require("../chunks/input-0Uksk4DP.js"),t=require("vue"),f=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),S=require("./validation-messages.cjs");require("./validators.cjs");const o={TEXT:"text",TEXTAREA:"textarea",PASSWORD:"password",EMAIL:"email",NUMBER:"number",DATE:"date",TIME:"time",FILE:"file"},r={EXTRA_SMALL:"xs",SMALL:"sm",DEFAULT:"md",LARGE:"lg",EXTRA_LARGE:"xl"},b={name:"DtInput",components:{DtValidationMessages:S.DtValidationMessages},mixins:[m.M],inheritAttrs:!1,props:{name:{type:String,default:""},type:{type:String,default:o.TEXT,validator:e=>Object.values(o).includes(e)},modelValue:{type:[String,Number],default:""},disabled:{type:Boolean,default:!1},label:{type:String,default:""},labelVisible:{type:Boolean,default:!0},description:{type:String,default:""},size:{type:String,default:null,validator:e=>Object.values(r).includes(e)},iconSize:{type:String,default:null,validator:e=>Object.values(r).includes(e)},inputClass:{type:[String,Object,Array],default:""},inputWrapperClass:{type:[String,Object,Array],default:""},currentLength:{type:Number,default:null},retainWarning:{type:Boolean,default:!1},validate:{type:Object,default:null},hidden:{type:Boolean,default:!1}},emits:["input","blur","clear","focus","focusin","focusout","update:modelValue","update:length","update:invalid"],data(){return{descriptionSizeClasses:{lg:"d-description--lg",xl:"d-description--xl"},labelSizeClasses:{xs:"d-label--xs",sm:"d-label--sm",md:"d-label--md",lg:"d-label--lg",xl:"d-label--xl"},isInputFocused:!1,isInvalid:!1,defaultLength:0,hasSlotContent:c.hasSlotContent}},computed:{isTextarea(){return this.type===o.TEXTAREA},isDefaultSize(){return this.size===r.DEFAULT},isDefaultIconSize(){return this.iconSizeComputed===r.DEFAULT},iconSizeComputed(){return this.iconSize?this.iconSize:this.size},isValidSize(){return Object.values(r).includes(this.size)},isValidDescriptionSize(){return Object.values(h.DESCRIPTION_SIZE_TYPES).includes(this.size)},inputComponent(){return this.isTextarea?"textarea":"input"},inputListeners(){return{input:async e=>{let n=e.target.value;this.type===o.FILE&&(n=Array.from(e.target.files).map(u=>u.name)),this.$emit("input",n),this.$emit("update:modelValue",n)},blur:e=>{this.isInputFocused=!1,this.onBlur(e)},focus:e=>{this.isInputFocused=!0,this.$emit("focus",e)},focusin:e=>this.$emit("focusin",e),focusout:e=>this.$emit("focusout",e)}},descriptionKey(){return`input-description-${c.getUniqueString()}`},inputState(){return c.getValidationState(this.validationMessages)},defaultLengthCalculation(){return this.calculateLength(this.modelValue)},validationProps(){var e,n,s,u,a,i,d,l,p,g;return{length:{description:(n=(e=this==null?void 0:this.validate)==null?void 0:e.length)==null?void 0:n.description,max:(u=(s=this==null?void 0:this.validate)==null?void 0:s.length)==null?void 0:u.max,warn:(i=(a=this==null?void 0:this.validate)==null?void 0:a.length)==null?void 0:i.warn,message:(l=(d=this==null?void 0:this.validate)==null?void 0:d.length)==null?void 0:l.message,limitMaxLength:(g=(p=this==null?void 0:this.validate)==null?void 0:p.length)!=null&&g.limitMaxLength?this.validate.length.limitMaxLength:!1}}},validationMessages(){return this.showLengthLimitValidation?this.formattedMessages.concat([this.inputLengthErrorMessage()]):this.formattedMessages},showInputState(){return this.showMessages&&this.inputState},inputLength(){return this.currentLength?this.currentLength:this.defaultLengthCalculation},inputLengthState(){return this.inputLength<this.validationProps.length.warn?null:this.inputLength<=this.validationProps.length.max?this.validationProps.length.warn?h.VALIDATION_MESSAGE_TYPES.WARNING:null:h.VALIDATION_MESSAGE_TYPES.ERROR},shouldValidateLength(){return!!(this.validationProps.length.description&&this.validationProps.length.max)},shouldLimitMaxLength(){return this.shouldValidateLength&&this.validationProps.length.limitMaxLength},showLengthLimitValidation(){return this.shouldValidateLength&&this.inputLengthState!==null&&this.validationProps.length.message&&(this.retainWarning||this.isInputFocused||this.isInvalid)},sizeModifierClass(){return this.isDefaultSize||!this.isValidSize?"":{input:{xs:"d-input--xs",sm:"d-input--sm",lg:"d-input--lg",xl:"d-input--xl"},textarea:{xs:"d-textarea--xs",sm:"d-textarea--sm",lg:"d-textarea--lg",xl:"d-textarea--xl"}}[this.inputComponent][this.size]},stateClass(){return[{input:{error:"d-input--error base-input__input--error",warning:"d-input--warning base-input__input--warning",success:"d-input--success base-input__input--success"},textarea:{error:"d-textarea--error base-input__input--error",warning:"d-textarea--warning base-input__input--warning",success:"d-textarea--success base-input__input--success"}}[this.inputComponent][this.inputState]]}},watch:{isInvalid(e){this.$emit("update:invalid",e)},modelValue:{immediate:!0,handler(e){this.shouldValidateLength&&this.validateLength(this.inputLength),this.currentLength==null&&this.$emit("update:length",this.calculateLength(e))}}},methods:{inputClasses(){return["base-input__input",this.inputComponent==="input"?"d-input":"d-textarea",{[this.stateClass]:this.showInputState,"d-input-icon--left":this.$slots.leftIcon,"d-input-icon--right":this.$slots.rightIcon},this.sizeModifierClass,this.inputClass]},inputWrapperClasses(){return this.hidden?[]:["d-input__wrapper",{[this.stateClass]:this.showInputState},this.inputWrapperClass]},calculateLength(e){return typeof e!="string"?0:[...e].length},inputLengthErrorMessage(){return{message:this.validationProps.length.message,type:this.inputLengthState}},inputIconClasses(e){const n={xs:"d-input-icon--xs",sm:"d-input-icon--sm",lg:"d-input-icon--lg",xl:"d-input-icon--xl"};return[{left:"base-input__icon--left d-input-icon--left",right:"base-input__icon--right d-input-icon--right"}[e],"d-input-icon",{[n[this.iconSizeComputed]]:!this.isDefaultIconSize},this.sizeModifierClass]},onBlur(e){var n;(n=this.$refs.container)!=null&&n.contains(e.relatedTarget)||this.$emit("blur",e)},clear(){this.$emit("input",""),this.$emit("clear")},blur(){this.$refs.input.blur()},focus(){this.$refs.input.focus()},select(){this.$refs.input.select()},getMessageKey(e,n){return`message-${e}-${n}`},validateLength(e){this.isInvalid=e>this.validationProps.length.max}}},C=["aria-details"],v=["id"],L={key:0},_={key:1,"data-qa":"dt-input-length-description",class:"d-input__length-description"},x=["read-only"],y=["value","name","disabled","maxlength"],E=["value","name","type","disabled","maxlength"];function I(e,n,s,u,a,i){const d=t.resolveComponent("dt-validation-messages");return t.openBlock(),t.createElementBlock("div",{ref:"container",class:t.normalizeClass(["base-input",{"d-vi-hidden":s.hidden}]),"data-qa":"dt-input"},[t.createElementVNode("label",{class:"base-input__label","aria-details":e.$slots.description||s.description?i.descriptionKey:void 0,"data-qa":"dt-input-label-wrapper"},[t.renderSlot(e.$slots,"labelSlot",{},()=>[s.labelVisible&&s.label?(t.openBlock(),t.createElementBlock("div",{key:0,ref:"label","data-qa":"dt-input-label",class:t.normalizeClass(["base-input__label-text","d-label",a.labelSizeClasses[s.size]])},t.toDisplayString(s.label),3)):t.createCommentVNode("",!0)]),a.hasSlotContent(e.$slots.description)||s.description||i.shouldValidateLength?(t.openBlock(),t.createElementBlock("div",{key:0,id:i.descriptionKey,ref:"description",class:t.normalizeClass(["base-input__description","d-description",a.descriptionSizeClasses[s.size]]),"data-qa":"dt-input-description"},[a.hasSlotContent(e.$slots.description)||s.description?(t.openBlock(),t.createElementBlock("div",L,[t.renderSlot(e.$slots,"description",{},()=>[t.createTextVNode(t.toDisplayString(s.description),1)])])):t.createCommentVNode("",!0),i.shouldValidateLength?(t.openBlock(),t.createElementBlock("div",_,t.toDisplayString(i.validationProps.length.description),1)):t.createCommentVNode("",!0)],10,v)):t.createCommentVNode("",!0),t.createElementVNode("div",{class:t.normalizeClass(i.inputWrapperClasses()),"read-only":s.disabled===!0?!0:void 0},[a.hasSlotContent(e.$slots.leftIcon)?(t.openBlock(),t.createElementBlock("span",{key:0,class:t.normalizeClass(i.inputIconClasses("left")),"data-qa":"dt-input-left-icon-wrapper",onFocusout:n[0]||(n[0]=(...l)=>i.onBlur&&i.onBlur(...l))},[t.renderSlot(e.$slots,"leftIcon")],34)):t.createCommentVNode("",!0),i.isTextarea?(t.openBlock(),t.createElementBlock("textarea",t.mergeProps({key:1,ref:"input",value:s.modelValue,name:s.name,disabled:s.disabled,class:i.inputClasses(),maxlength:i.shouldLimitMaxLength?i.validationProps.length.max:null,"data-qa":"dt-input-input"},e.$attrs,t.toHandlers(i.inputListeners,!0)),null,16,y)):(t.openBlock(),t.createElementBlock("input",t.mergeProps({key:2,ref:"input",value:s.modelValue,name:s.name,type:s.type,disabled:s.disabled,class:i.inputClasses(),maxlength:i.shouldLimitMaxLength?i.validationProps.length.max:null,"data-qa":"dt-input-input"},e.$attrs,t.toHandlers(i.inputListeners,!0)),null,16,E)),a.hasSlotContent(e.$slots.rightIcon)?(t.openBlock(),t.createElementBlock("span",{key:3,class:t.normalizeClass(i.inputIconClasses("right")),"data-qa":"dt-input-right-icon-wrapper",onFocusout:n[1]||(n[1]=(...l)=>i.onBlur&&i.onBlur(...l))},[t.renderSlot(e.$slots,"rightIcon")],34)):t.createCommentVNode("",!0)],10,x)],8,C),t.createVNode(d,t.mergeProps({"validation-messages":i.validationMessages,"show-messages":e.showMessages,class:e.messagesClass},e.messagesChildProps,{"data-qa":"dt-input-messages"}),null,16,["validation-messages","show-messages","class"])],2)}const z=f._(b,[["render",I]]);exports.DtInput=z;exports.INPUT_SIZES=r;exports.INPUT_TYPES=o;
+//# sourceMappingURL=input.cjs.map

package/dist/lib/input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.cjs","sources":["../../components/input/input_constants.js","../../components/input/input.vue"],"sourcesContent":["// Valid input types, any other input types (for example: 'radio' or 'checkbox') should\n// use the respective base vue components (radio.vue and checkout.vue).\nexport const INPUT_TYPES = {\n  TEXT: 'text',\n  TEXTAREA: 'textarea',\n  PASSWORD: 'password',\n  EMAIL: 'email',\n  NUMBER: 'number',\n  DATE: 'date',\n  TIME: 'time',\n  FILE: 'file',\n};\n\nexport const INPUT_SIZES = {\n  EXTRA_SMALL: 'xs',\n  SMALL: 'sm',\n  DEFAULT: 'md',\n  LARGE: 'lg',\n  EXTRA_LARGE: 'xl',\n};\n\nexport default {\n  INPUT_TYPES,\n  INPUT_SIZES,\n};\n","<!-- eslint-disable vue/no-restricted-class -->\n<template>\n  <div\n    ref=\"container\"\n    :class=\"['base-input', { 'd-vi-hidden': hidden }]\"\n    data-qa=\"dt-input\"\n  >\n    <label\n      class=\"base-input__label\"\n      :aria-details=\"$slots.description || description ? descriptionKey : undefined\"\n      data-qa=\"dt-input-label-wrapper\"\n    >\n      <!-- @slot slot for label, defaults to label prop -->\n      <slot name=\"labelSlot\">\n        <div\n          v-if=\"labelVisible && label\"\n          ref=\"label\"\n          data-qa=\"dt-input-label\"\n          :class=\"[\n            'base-input__label-text',\n            'd-label',\n            labelSizeClasses[size],\n          ]\"\n        >\n          {{ label }}\n        </div>\n      </slot>\n      <div\n        v-if=\"hasSlotContent($slots.description) || description || shouldValidateLength\"\n        :id=\"descriptionKey\"\n        ref=\"description\"\n        :class=\"[\n          'base-input__description',\n          'd-description',\n          descriptionSizeClasses[size],\n        ]\"\n        data-qa=\"dt-input-description\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.description) || description\"\n        >\n          <!-- @slot slot for description, defaults to description prop -->\n          <slot name=\"description\">{{ description }}</slot>\n        </div>\n        <div\n          v-if=\"shouldValidateLength\"\n          data-qa=\"dt-input-length-description\"\n          class=\"d-input__length-description\"\n        >\n          {{ validationProps.length.description }}\n        </div>\n      </div>\n      <div\n        :class=\"inputWrapperClasses()\"\n        :read-only=\"disabled === true ? true : undefined\"\n      >\n        <span\n          v-if=\"hasSlotContent($slots.leftIcon)\"\n          :class=\"inputIconClasses('left')\"\n          data-qa=\"dt-input-left-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for left icon -->\n          <slot name=\"leftIcon\" />\n        </span>\n        <textarea\n          v-if=\"isTextarea\"\n          ref=\"input\"\n          :value=\"modelValue\"\n          :name=\"name\"\n          :disabled=\"disabled\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"$attrs\"\n          v-on=\"inputListeners\"\n        />\n        <input\n          v-else\n          ref=\"input\"\n          :value=\"modelValue\"\n          :name=\"name\"\n          :type=\"type\"\n          :disabled=\"disabled\"\n          :class=\"inputClasses()\"\n          :maxlength=\"shouldLimitMaxLength ? validationProps.length.max : null\"\n          data-qa=\"dt-input-input\"\n          v-bind=\"$attrs\"\n          v-on=\"inputListeners\"\n        >\n        <span\n          v-if=\"hasSlotContent($slots.rightIcon)\"\n          :class=\"inputIconClasses('right')\"\n          data-qa=\"dt-input-right-icon-wrapper\"\n          @focusout=\"onBlur\"\n        >\n          <!-- @slot Slot for right icon -->\n          <slot name=\"rightIcon\" />\n        </span>\n      </div>\n    </label>\n    <dt-validation-messages\n      :validation-messages=\"validationMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      v-bind=\"messagesChildProps\"\n      data-qa=\"dt-input-messages\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DESCRIPTION_SIZE_TYPES, VALIDATION_MESSAGE_TYPES } from '@/common/constants';\nimport { INPUT_TYPES, INPUT_SIZES } from './input_constants';\nimport {\n  getUniqueString,\n  getValidationState,\n  hasSlotContent,\n} from '@/common/utils';\nimport { DtValidationMessages } from '@/components/validation_messages';\nimport { MessagesMixin } from '@/common/mixins/input';\n\n/**\n * An input field is an input control that allows users to enter alphanumeric information.\n * It can have a range of options and supports single line and multi-line lengths,\n * as well as varying formats, including numbers, masked passwords, etc.\n * @property {Boolean} placeholder attribute\n * @see https://dialtone.dialpad.com/components/input.html\n */\nexport default {\n  name: 'DtInput',\n\n  components: { DtValidationMessages },\n\n  mixins: [MessagesMixin],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Name property of the input element\n     */\n    name: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Type of the input, one of: `text`, `password`, `email`, `number`, `textarea`, 'date', 'time'.\n     * When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.\n     * @values text, password, email, number, textarea, date, time\n     */\n    type: {\n      type: String,\n      default: INPUT_TYPES.TEXT,\n      validator: (t) => Object.values(INPUT_TYPES).includes(t),\n    },\n\n    /**\n     * Value of the input\n     */\n    modelValue: {\n      type: [String, Number],\n      default: '',\n    },\n\n    /**\n     * Disables the input\n     * @values true, false\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label for the input\n     */\n    label: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(INPUT_SIZES).includes(t),\n    },\n\n    /**\n     * Size of the icon. One of `xs`, `sm`, `md`, `lg`, `xl`. If you do not set this the icon will size relative\n     * to the input size\n     * @values null, xs, sm, md, lg, xl\n     */\n    iconSize: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(INPUT_SIZES).includes(t),\n    },\n\n    /**\n     * Additional class name for the input element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    inputClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the input wrapper element.\n     * Can accept all of String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    inputWrapperClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * The current character length that the user has entered into the input.\n     * This will only need to be used if you are using `validate.length` and\n     * the string contains abnormal characters.\n     * For example, an emoji could take up many characters in the input, but should only count as 1 character.\n     * If no number is provided, a built-in length calculation will be used for the length validation.\n     */\n    currentLength: {\n      type: Number,\n      default: null,\n    },\n\n    /**\n     * Whether the input will continue to display a warning validation message even if the input has lost focus.\n     */\n    retainWarning: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Validation for the input. Supports maximum length validation with the structure:\n     * `{ \"length\": {\"description\": string, \"max\": number, \"warn\": number, \"message\": string,\n     * \"limitMaxLength\": boolean }}`\n     */\n    validate: {\n      type: Object,\n      default: null,\n    },\n\n    /**\n     * hidden allows to use input without the element visually present in DOM\n     */\n    hidden: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Native input event\n     *\n     * @event input\n     * @type {String}\n     */\n    'input',\n\n    /**\n     * Native input blur event\n     *\n     * @event blur\n     * @type {FocusEvent}\n     */\n    'blur',\n\n    /**\n     * Input clear event\n     *\n     * @event clear\n     */\n    'clear',\n\n    /**\n     * Native input focus event\n     *\n     * @event focus\n     * @type {FocusEvent}\n     */\n    'focus',\n\n    /**\n     * Native input focusin event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native input focusout event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n\n    /**\n     * Event fired to sync the modelValue prop with the parent component\n     * @event update:modelValue\n     */\n    'update:modelValue',\n\n    /**\n     * Length of the input when currentLength prop is not passed\n     *\n     * @event update:length\n     * @type {Number}\n     */\n    'update:length',\n\n    /**\n     * Result of the input validation\n     *\n     * @event update:invalid\n     * @type {Boolean}\n     */\n    'update:invalid',\n  ],\n\n  data () {\n    return {\n      descriptionSizeClasses: {\n        lg: 'd-description--lg',\n        xl: 'd-description--xl',\n      },\n\n      labelSizeClasses: {\n        xs: 'd-label--xs',\n        sm: 'd-label--sm',\n        md: 'd-label--md',\n        lg: 'd-label--lg',\n        xl: 'd-label--xl',\n      },\n\n      isInputFocused: false,\n      isInvalid: false,\n      defaultLength: 0,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n\n    isTextarea () {\n      return this.type === INPUT_TYPES.TEXTAREA;\n    },\n\n    isDefaultSize () {\n      return this.size === INPUT_SIZES.DEFAULT;\n    },\n\n    isDefaultIconSize () {\n      return this.iconSizeComputed === INPUT_SIZES.DEFAULT;\n    },\n\n    iconSizeComputed () {\n      return this.iconSize ? this.iconSize : this.size;\n    },\n\n    isValidSize () {\n      return Object.values(INPUT_SIZES).includes(this.size);\n    },\n\n    isValidDescriptionSize () {\n      return Object.values(DESCRIPTION_SIZE_TYPES).includes(this.size);\n    },\n\n    inputComponent () {\n      if (this.isTextarea) {\n        return 'textarea';\n      }\n\n      return 'input';\n    },\n\n    inputListeners () {\n      return {\n        input: async event => {\n          let val = event.target.value;\n          if (this.type === INPUT_TYPES.FILE) {\n            const files = Array.from(event.target.files);\n            val = files.map(file => file.name);\n          }\n          this.$emit('input', val);\n          this.$emit('update:modelValue', val);\n        },\n\n        blur: event => {\n          this.isInputFocused = false;\n          this.onBlur(event);\n        },\n\n        focus: event => {\n          this.isInputFocused = true;\n          this.$emit('focus', event);\n        },\n\n        focusin: event => this.$emit('focusin', event),\n        focusout: event => this.$emit('focusout', event),\n      };\n    },\n\n    descriptionKey () {\n      return `input-description-${getUniqueString()}`;\n    },\n\n    inputState () {\n      return getValidationState(this.validationMessages);\n    },\n\n    defaultLengthCalculation () {\n      return this.calculateLength(this.modelValue);\n    },\n\n    validationProps () {\n      return {\n        length: {\n          description: this?.validate?.length?.description,\n          max: this?.validate?.length?.max,\n          warn: this?.validate?.length?.warn,\n          message: this?.validate?.length?.message,\n          limitMaxLength: this?.validate?.length?.limitMaxLength ? this.validate.length.limitMaxLength : false,\n        },\n      };\n    },\n\n    validationMessages () {\n      // Add length validation message if exists\n      if (this.showLengthLimitValidation) {\n        return this.formattedMessages.concat([this.inputLengthErrorMessage()]);\n      }\n\n      return this.formattedMessages;\n    },\n\n    showInputState () {\n      return this.showMessages && this.inputState;\n    },\n\n    inputLength () {\n      return this.currentLength ? this.currentLength : this.defaultLengthCalculation;\n    },\n\n    inputLengthState () {\n      if (this.inputLength < this.validationProps.length.warn) {\n        return null;\n      } else if (this.inputLength <= this.validationProps.length.max) {\n        return this.validationProps.length.warn ? VALIDATION_MESSAGE_TYPES.WARNING : null;\n      } else {\n        return VALIDATION_MESSAGE_TYPES.ERROR;\n      }\n    },\n\n    shouldValidateLength () {\n      return !!(\n        this.validationProps.length.description &&\n        this.validationProps.length.max\n      );\n    },\n\n    shouldLimitMaxLength () {\n      return this.shouldValidateLength && this.validationProps.length.limitMaxLength;\n    },\n\n    // eslint-disable-next-line complexity\n    showLengthLimitValidation () {\n      return (\n        this.shouldValidateLength &&\n        this.inputLengthState !== null &&\n        this.validationProps.length.message &&\n        (this.retainWarning || this.isInputFocused || this.isInvalid)\n      );\n    },\n\n    sizeModifierClass () {\n      if (this.isDefaultSize || !this.isValidSize) {\n        return '';\n      }\n\n      const sizeClasses = {\n        input: {\n          xs: 'd-input--xs',\n          sm: 'd-input--sm',\n          lg: 'd-input--lg',\n          xl: 'd-input--xl',\n        },\n\n        textarea: {\n          xs: 'd-textarea--xs',\n          sm: 'd-textarea--sm',\n          lg: 'd-textarea--lg',\n          xl: 'd-textarea--xl',\n        },\n      };\n\n      return sizeClasses[this.inputComponent][this.size];\n    },\n\n    stateClass () {\n      const inputStateClasses = {\n        input: {\n          error: 'd-input--error base-input__input--error',\n          warning: 'd-input--warning base-input__input--warning',\n          success: 'd-input--success base-input__input--success',\n        },\n\n        textarea: {\n          error: 'd-textarea--error base-input__input--error',\n          warning: 'd-textarea--warning base-input__input--warning',\n          success: 'd-textarea--success base-input__input--success',\n        },\n      };\n      return [inputStateClasses[this.inputComponent][this.inputState]];\n    },\n  },\n\n  watch: {\n    isInvalid (val) {\n      this.$emit('update:invalid', val);\n    },\n\n    modelValue: {\n      immediate: true,\n      handler (newValue) {\n        if (this.shouldValidateLength) {\n          this.validateLength(this.inputLength);\n        }\n\n        if (this.currentLength == null) {\n          this.$emit('update:length', this.calculateLength(newValue));\n        }\n      },\n    },\n  },\n\n  methods: {\n    inputClasses () {\n      return [\n        'base-input__input',\n        this.inputComponent === 'input' ? 'd-input' : 'd-textarea',\n        {\n          [this.stateClass]: this.showInputState,\n          'd-input-icon--left': this.$slots.leftIcon,\n          'd-input-icon--right': this.$slots.rightIcon,\n        },\n        this.sizeModifierClass,\n        this.inputClass,\n      ];\n    },\n\n    inputWrapperClasses () {\n      if (this.hidden) {\n        return [];\n      }\n      return [\n        'd-input__wrapper',\n        { [this.stateClass]: this.showInputState },\n        this.inputWrapperClass,\n      ];\n    },\n\n    calculateLength (value) {\n      if (typeof value !== 'string') {\n        return 0;\n      }\n\n      return [...value].length;\n    },\n\n    inputLengthErrorMessage () {\n      return {\n        message: this.validationProps.length.message,\n        type: this.inputLengthState,\n      };\n    },\n\n    inputIconClasses (side) {\n      const iconSizeClasses = {\n        xs: 'd-input-icon--xs',\n        sm: 'd-input-icon--sm',\n        lg: 'd-input-icon--lg',\n        xl: 'd-input-icon--xl',\n      };\n      const iconOrientationClasses = {\n        left: 'base-input__icon--left d-input-icon--left',\n        right: 'base-input__icon--right d-input-icon--right',\n      };\n\n      return [\n        iconOrientationClasses[side],\n        'd-input-icon',\n        { [iconSizeClasses[this.iconSizeComputed]]: !this.isDefaultIconSize },\n        this.sizeModifierClass,\n      ];\n    },\n\n    onBlur (e) {\n      // Do not emit a blur event if the target element is a child of this component\n      if (!this.$refs.container?.contains(e.relatedTarget)) {\n        this.$emit('blur', e);\n      }\n    },\n\n    clear () {\n      this.$emit('input', '');\n      this.$emit('clear');\n    },\n\n    blur () {\n      this.$refs.input.blur();\n    },\n\n    focus () {\n      this.$refs.input.focus();\n    },\n\n    select () {\n      this.$refs.input.select();\n    },\n\n    getMessageKey (type, index) {\n      return `message-${type}-${index}`;\n    },\n\n    validateLength (length) {\n      this.isInvalid = (length > this.validationProps.length.max);\n    },\n  },\n};\n</script>\n"],"names":["INPUT_TYPES","INPUT_SIZES","_sfc_main","DtValidationMessages","MessagesMixin","t","hasSlotContent","DESCRIPTION_SIZE_TYPES","event","val","file","getUniqueString","getValidationState","_b","_a","_d","_c","_f","_e","_h","_g","_j","_i","VALIDATION_MESSAGE_TYPES","newValue","value","side","iconSizeClasses","type","index","length","_createElementBlock","$props","_createElementVNode","_ctx","$options","_renderSlot","_normalizeClass","$data","_hoisted_3","_openBlock","_hoisted_4","_toDisplayString","args","_mergeProps","_toHandlers","_hoisted_6","_hoisted_7","_createVNode","_component_dt_validation_messages"],"mappings":"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"}

package/dist/lib/item-layout.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./utils.cjs"),t=require("vue"),s=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js");require("./constants.cjs");const n={name:"DtItemLayout",props:{as:{type:String,default:"div"},unstyled:{type:Boolean,default:!1}},methods:{hasSlotContent:a.hasSlotContent}},r={key:0,"data-qa":"dt-item-layout-left-wrapper",class:"dt-item-layout--left"},d={"data-qa":"dt-item-layout-content-wrapper",class:"dt-item-layout--content"},c={key:0,"data-qa":"dt-item-layout-title-wrapper",class:"dt-item-layout--title"},i={key:2,"data-qa":"dt-item-layout-bottom-wrapper",class:"dt-item-layout--bottom"},u={key:1,"data-qa":"dt-item-layout-right-wrapper",class:"dt-item-layout--right"},m={key:2,"data-qa":"dt-item-layout-selected-wrapper",class:"dt-item-layout--selected"};function y(e,p,l,k,C,o){return t.openBlock(),t.createBlock(t.resolveDynamicComponent(l.as),{class:t.normalizeClass(l.unstyled?"dt-item-layout--custom":"dt-item-layout")},{default:t.withCtx(()=>[o.hasSlotContent(e.$slots.left)?(t.openBlock(),t.createElementBlock("section",r,[t.renderSlot(e.$slots,"left")])):t.createCommentVNode("",!0),t.createElementVNode("section",d,[o.hasSlotContent(e.$slots.default)?(t.openBlock(),t.createElementBlock("div",c,[t.renderSlot(e.$slots,"default")])):t.createCommentVNode("",!0),o.hasSlotContent(e.$slots.subtitle)?(t.openBlock(),t.createElementBlock("div",{key:1,"data-qa":"dt-item-layout-subtitle-wrapper",class:t.normalizeClass(["dt-item-layout--subtitle",{"dt-item-layout--subtitle--with-title":o.hasSlotContent(e.$slots.default)}])},[t.renderSlot(e.$slots,"subtitle")],2)):t.createCommentVNode("",!0),o.hasSlotContent(e.$slots.bottom)?(t.openBlock(),t.createElementBlock("div",i,[t.renderSlot(e.$slots,"bottom")])):t.createCommentVNode("",!0)]),o.hasSlotContent(e.$slots.right)?(t.openBlock(),t.createElementBlock("section",u,[t.renderSlot(e.$slots,"right")])):t.createCommentVNode("",!0),o.hasSlotContent(e.$slots.selected)?(t.openBlock(),t.createElementBlock("section",m,[t.renderSlot(e.$slots,"selected")])):t.createCommentVNode("",!0)]),_:3},8,["class"])}const h=s._(n,[["render",y]]);exports.DtItemLayout=h;
+//# sourceMappingURL=item-layout.cjs.map

package/dist/lib/item-layout.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"item-layout.cjs","sources":["../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'dt-item-layout--custom' : 'dt-item-layout'\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      class=\"dt-item-layout--left\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      class=\"dt-item-layout--content\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        class=\"dt-item-layout--title\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"['dt-item-layout--subtitle', { 'dt-item-layout--subtitle--with-title': hasSlotContent($slots.default) }]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        class=\"dt-item-layout--bottom\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      class=\"dt-item-layout--right\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      class=\"dt-item-layout--selected\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  methods: { hasSlotContent },\n};\n</script>\n"],"names":["_sfc_main","hasSlotContent","_openBlock","_createBlock","_resolveDynamicComponent","$props","$options","_ctx","_createElementBlock","_hoisted_1","_renderSlot","_createElementVNode","_hoisted_2","_hoisted_3","_normalizeClass","_hoisted_4","_hoisted_5","_hoisted_6"],"mappings":"wNAqEA,MAAKA,EAAU,CACb,KAAM,eACN,MAAO,CAIL,GAAI,CACF,KAAM,OACN,QAAS,KACV,EAMD,SAAU,CACR,KAAM,QACN,QAAS,EACV,CACF,EAED,QAAS,CAAEC,eAAAA,EAAAA,cAAgB,CAC7B,WApFM,UAAQ,8BACR,MAAM,2BAMN,UAAQ,iCACR,MAAM,oCAIJ,UAAQ,+BACR,MAAM,kCAeN,UAAQ,gCACR,MAAM,mCAQR,UAAQ,+BACR,MAAM,kCAON,UAAQ,kCACR,MAAM,oDApDV,OAAAC,EAAAA,UAAA,EAAAC,EAAA,YAyDYC,0BAxDLC,EAAE,EAAA,EAAA,CACN,uBAAOA,EAAQ,SAAA,yBAAA,gBAAA,sBAEhB,IAOU,CANFC,EAAc,eAACC,EAAM,OAAC,IAAI,GADlCL,EAAAA,YAAAM,EAAAA,mBAOU,UAPVC,EAOU,CADRC,aAAoBH,EAAA,OAAA,MAAA,iCAEtBI,EAAA,mBA4BU,UA5BVC,EA4BU,CAvBAN,EAAc,eAACC,EAAM,OAAC,OAAO,GADrCL,EAAAA,YAAAM,EAAAA,mBAOM,MAPNK,EAOM,CADJH,aAAQH,EAAA,OAAA,SAAA,iCAGFD,EAAc,eAACC,EAAM,OAAC,QAAQ,iBADtCC,EAOM,mBAAA,MAAA,OALJ,UAAQ,kCACP,MAA8EM,EAAA,eAAA,CAAA,2BAAA,CAAA,uCAAAR,EAAA,eAAeC,EAAA,OAAO,OAAO,CAAA,CAAA,CAAA,IAG5GG,aAAwBH,EAAA,OAAA,UAAA,mCAGlBD,EAAc,eAACC,EAAM,OAAC,MAAM,GADpCL,EAAAA,YAAAM,EAAAA,mBAOM,MAPNO,EAOM,CADJL,aAAsBH,EAAA,OAAA,QAAA,mCAIlBD,EAAc,eAACC,EAAM,OAAC,KAAK,GADnCL,EAAAA,YAAAM,EAAAA,mBAOU,UAPVQ,EAOU,CADRN,aAAqBH,EAAA,OAAA,OAAA,iCAGfD,EAAc,eAACC,EAAM,OAAC,QAAQ,GADtCL,EAAAA,YAAAM,EAAAA,mBAOU,UAPVS,EAOU,CADRP,aAAwBH,EAAA,OAAA,UAAA"}

package/dist/lib/ivr-node.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),C=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),D=require("./card.cjs"),V=require("./button.cjs"),P=require("../chunks/dropdown-UO3UJalk.js"),h=require("./icon.cjs");require("./utils.cjs");require("./constants.cjs");require("../chunks/link_constants-Kn6kP4i1.js");require("../chunks/keyboard_list_navigation-N74Bpdq7.js");require("../chunks/dropdown_constants-KHFvVI2L.js");require("../chunks/sr_only_close_button-iD7s1Pbj.js");require("./popover.cjs");require("../chunks/popover_constants-hOEhklvr.js");require("tippy.js");require("../chunks/modal-qEzlo0Sj.js");require("./lazy-show.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");require("../chunks/list_item_constants-Tsz5CO1m.js");const l="promptmenu",a="promptcollect",i="promptplay",s="gotoexpert",c="goto",_="branch",u="transfer",m="hangup",E={[l]:"keypad",[a]:"dialer",[i]:"volume-2",[s]:"expert-node",[_]:"branch",[c]:"call-merge",[u]:"transfer",[m]:"phone-hang-up"},T={[l]:"Menu",[a]:"Collect",[i]:"Play",[s]:"Expert",[_]:"Branch",[c]:"Go-to",[u]:"Transfer",[m]:"Hangup"},n={PROMPT:{normal:"d-bc-blue-200",selected:"d-bc-blue-300"},LOGIC:{normal:"d-bc-purple-200",selected:"d-bc-purple-400"},TERMINAL:{normal:"d-bc-red-100",selected:"d-bc-red-200"}},v={[l]:n.PROMPT,[a]:n.PROMPT,[i]:n.PROMPT,[s]:n.LOGIC,[_]:n.LOGIC,[c]:n.LOGIC,[u]:n.TERMINAL,[m]:n.TERMINAL},q={name:"DtRecipeIvrNode",components:{DtCard:D.DtCard,DtButton:V.DtButton,DtDropdown:P.D,DtIcon:h.DtIcon},props:{nodeType:{type:String,required:!0},nodeLabel:{type:String,required:!0},isSelected:{type:Boolean,default:!1},menuButtonAriaLabel:{type:String,required:!0},dtmfKey:{type:String,default:null}},emits:["click"],data(){return{isOpen:!1}},computed:{nodeListeners(){return{click:o=>this.$emit("click",o)}},nodeIcon(){return E[this.nodeType]},headerColor(){const{normal:o,selected:d}=v[this.nodeType];return this.isSelected?d:o},isGotoNode(){return this.nodeType===c}},methods:{openMenu(){this.isOpen=!0}}},L={class:"ivr_node__header-left"},y={class:"ivr_node__label","data-qa":"ivr-node-label"},S={class:"ivr_node__dropdown-list"};function M(o,d,t,k,O,r){const N=e.resolveComponent("dt-icon"),R=e.resolveComponent("dt-button"),b=e.resolveComponent("dt-dropdown"),I=e.resolveComponent("dt-card");return e.openBlock(),e.createElementBlock("div",e.mergeProps({class:"ivr_node"},e.toHandlers(r.nodeListeners,!0)),[t.dtmfKey?(e.openBlock(),e.createElementBlock("div",{key:0,"data-qa":"dt-top-connector-dtmf",class:e.normalizeClass(["ivr-connector ivr-connector--dtmf",{"ivr-connector--dtmf--selected":t.isSelected}])},e.toDisplayString(t.dtmfKey),3)):e.createCommentVNode("",!0),o.$slots.connector?e.renderSlot(o.$slots,"connector",{key:1}):e.createCommentVNode("",!0),!t.dtmfKey&&!o.$slots.connector?(e.openBlock(),e.createElementBlock("div",{key:2,"data-qa":"dt-top-connector",class:e.normalizeClass(["ivr-connector",{"ivr-connector--selected":t.isSelected}])},null,2)):e.createCommentVNode("",!0),e.createVNode(I,{"content-class":"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12","container-class":["d-w100p",{"d-ba d-bar8 d-baw4":t.isSelected},r.headerColor],"header-class":["d-mtn1","d-bt","d-btw4","d-p0",r.headerColor,{"d-btr4":!t.isSelected}]},{header:e.withCtx(()=>[e.createElementVNode("div",L,[e.createVNode(R,{"aria-label":t.nodeType,importance:"clear",kind:"muted","data-qa":"dt-ivr-node-icon"},{icon:e.withCtx(()=>[e.createVNode(N,{name:r.nodeIcon,size:"200",class:e.normalizeClass(["",{ivr_node__goto_icon:r.isGotoNode}])},null,8,["name","class"])]),_:1},8,["aria-label"]),e.createElementVNode("p",y,e.toDisplayString(t.nodeLabel),1)]),e.createVNode(b,{open:O.isOpen,"onUpdate:open":d[0]||(d[0]=p=>O.isOpen=p),placement:"bottom"},{anchor:e.withCtx(()=>[e.createVNode(R,{importance:"clear",kind:"muted","aria-label":t.menuButtonAriaLabel,onClick:e.withModifiers(r.openMenu,["stop","prevent"])},{icon:e.withCtx(()=>[e.createVNode(N,{name:"more-vertical",size:"200"})]),_:1},8,["aria-label","onClick"])]),list:e.withCtx(({close:p})=>[e.createElementVNode("div",S,[e.renderSlot(o.$slots,"menuItems",{close:p})])]),_:3},8,["open"])]),content:e.withCtx(()=>[e.renderSlot(o.$slots,"content")]),_:3},8,["container-class","header-class"])],16)}const f=C._(q,[["render",M]]);exports.DtRecipeIvrNode=f;exports.IVR_NODE_BRANCH=_;exports.IVR_NODE_EXPERT=s;exports.IVR_NODE_GO_TO=c;exports.IVR_NODE_HANGUP=m;exports.IVR_NODE_ICON_TYPES=E;exports.IVR_NODE_LABELS=T;exports.IVR_NODE_PROMPT_COLLECT=a;exports.IVR_NODE_PROMPT_MENU=l;exports.IVR_NODE_PROMPT_PLAY=i;exports.IVR_NODE_TRANSFER=u;
+//# sourceMappingURL=ivr-node.cjs.map

package/dist/lib/ivr-node.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ivr-node.cjs","sources":["../../recipes/cards/ivr_node/ivr_node_constants.js","../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["export const IVR_NODE_PROMPT_MENU = 'promptmenu';\nexport const IVR_NODE_PROMPT_COLLECT = 'promptcollect';\nexport const IVR_NODE_PROMPT_PLAY = 'promptplay';\nexport const IVR_NODE_EXPERT = 'gotoexpert';\nexport const IVR_NODE_GO_TO = 'goto';\nexport const IVR_NODE_BRANCH = 'branch';\nexport const IVR_NODE_TRANSFER = 'transfer';\nexport const IVR_NODE_HANGUP = 'hangup';\n\nexport const IVR_NODE_ICON_TYPES = {\n  [IVR_NODE_PROMPT_MENU]: 'keypad',\n  [IVR_NODE_PROMPT_COLLECT]: 'dialer',\n  [IVR_NODE_PROMPT_PLAY]: 'volume-2',\n  [IVR_NODE_EXPERT]: 'expert-node',\n  [IVR_NODE_BRANCH]: 'branch',\n  [IVR_NODE_GO_TO]: 'call-merge',\n  [IVR_NODE_TRANSFER]: 'transfer',\n  [IVR_NODE_HANGUP]: 'phone-hang-up',\n};\n\nexport const IVR_NODE_LABELS = {\n  [IVR_NODE_PROMPT_MENU]: 'Menu',\n  [IVR_NODE_PROMPT_COLLECT]: 'Collect',\n  [IVR_NODE_PROMPT_PLAY]: 'Play',\n  [IVR_NODE_EXPERT]: 'Expert',\n  [IVR_NODE_BRANCH]: 'Branch',\n  [IVR_NODE_GO_TO]: 'Go-to',\n  [IVR_NODE_TRANSFER]: 'Transfer',\n  [IVR_NODE_HANGUP]: 'Hangup',\n};\n\nconst IVR_NODE_COLORS = {\n  PROMPT: {\n    normal: 'd-bc-blue-200',\n    selected: 'd-bc-blue-300',\n  },\n  LOGIC: {\n    normal: 'd-bc-purple-200',\n    selected: 'd-bc-purple-400',\n  },\n  TERMINAL: {\n    normal: 'd-bc-red-100',\n    selected: 'd-bc-red-200',\n  },\n};\n\nexport const IVR_NODE_COLOR_MAPPING = {\n  [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,\n  [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,\n  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,\n  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL,\n};\n","<template>\n  <div\n    class=\"ivr_node\"\n    v-on=\"nodeListeners\"\n  >\n    <div\n      v-if=\"dtmfKey\"\n      data-qa=\"dt-top-connector-dtmf\"\n      class=\"ivr-connector ivr-connector--dtmf\"\n      :class=\"{ 'ivr-connector--dtmf--selected': isSelected }\"\n    >\n      {{ dtmfKey }}\n    </div>\n    <slot\n      v-if=\"$slots.connector\"\n      name=\"connector\"\n    />\n    <div\n      v-if=\"!dtmfKey && !$slots.connector\"\n      data-qa=\"dt-top-connector\"\n      class=\"ivr-connector\"\n      :class=\"{ 'ivr-connector--selected': isSelected }\"\n    />\n    <dt-card\n      content-class=\"d-bt d-bc-black-300 d-px12 d-pt8 d-pb12\"\n      :container-class=\"[\n        'd-w100p',\n        { 'd-ba d-bar8 d-baw4': isSelected },\n        headerColor,\n      ]\"\n      :header-class=\"[\n        'd-mtn1',\n        'd-bt',\n        'd-btw4',\n        'd-p0',\n        headerColor,\n        { 'd-btr4': !isSelected },\n      ]\"\n    >\n      <template #header>\n        <!-- node label and icon section on left of the header -->\n        <div class=\"ivr_node__header-left\">\n          <dt-button\n            :aria-label=\"nodeType\"\n            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n          >\n            <template #icon>\n              <dt-icon\n                :name=\"nodeIcon\"\n                size=\"200\"\n                :class=\"['', { 'ivr_node__goto_icon': isGotoNode }]\"\n              />\n            </template>\n          </dt-button>\n          <p\n            class=\"ivr_node__label\"\n            data-qa=\"ivr-node-label\"\n          >\n            {{ nodeLabel }}\n          </p>\n        </div>\n        <!-- node menu for actions like edit, copy, delete -->\n        <dt-dropdown\n          v-model:open=\"isOpen\"\n          placement=\"bottom\"\n        >\n          <template #anchor>\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :aria-label=\"menuButtonAriaLabel\"\n              @click.stop.prevent=\"openMenu\"\n            >\n              <template #icon>\n                <dt-icon\n                  name=\"more-vertical\"\n                  size=\"200\"\n                />\n              </template>\n            </dt-button>\n          </template>\n          <template #list=\"{ close }\">\n            <div class=\"ivr_node__dropdown-list\">\n              <slot\n                name=\"menuItems\"\n                :close=\"close\"\n              />\n            </div>\n          </template>\n        </dt-dropdown>\n      </template>\n      <template #content>\n        <slot name=\"content\" />\n      </template>\n    </dt-card>\n  </div>\n</template>\n\n<script>\nimport { DtCard } from '@/components/card';\nimport { DtButton } from '@/components/button';\nimport { DtDropdown } from '@/components/dropdown';\nimport { DtIcon } from '@/components/icon';\nimport {\n  IVR_NODE_ICON_TYPES, IVR_NODE_COLOR_MAPPING, IVR_NODE_GO_TO,\n} from './ivr_node_constants';\n\nexport default {\n  name: 'DtRecipeIvrNode',\n\n  components: {\n    DtCard,\n    DtButton,\n    DtDropdown,\n    DtIcon,\n  },\n\n  props: {\n\n    /**\n     * type of IVR Node.\n     */\n    nodeType: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Descriptive label for the node name.\n     */\n\n    nodeLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Selected state of the node\n     */\n    isSelected: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Translated aria-label for header menu button\n     */\n    menuButtonAriaLabel: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * DTMF input\n     */\n    dtmfKey: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Add node click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    nodeListeners () {\n      return {\n        click: (e) => this.$emit('click', e),\n      };\n    },\n\n    nodeIcon () {\n      return IVR_NODE_ICON_TYPES[this.nodeType];\n    },\n\n    headerColor () {\n      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];\n      return this.isSelected ? selected : normal;\n    },\n\n    isGotoNode () {\n      return this.nodeType === IVR_NODE_GO_TO;\n    },\n  },\n\n  methods: {\n    openMenu () {\n      this.isOpen = true;\n    },\n  },\n};\n</script>\n\n<style lang=\"less\">\n.ivr_node {\n  width: 280px;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  cursor: pointer;\n\n  &__header-left {\n    display: flex;\n    align-items: center;\n  }\n\n  &__label {\n    font-size: var(--dt-font-size-200);\n    font-weight: var(--dt-font-weight-bold);\n  }\n\n  &__dropdown-list {\n    width: var(--dt-size-825);\n  }\n}\n\n.ivr_node__goto_icon {\n  transform: rotate(90deg);\n}\n\n.ivr-connector {\n  z-index: var(--zi-base);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-color: var(--dt-color-purple-600);\n  background-color: var(--dt-color-purple-600);\n  width: var(--dt-size-400);\n  height: var(--dt-size-400);\n  border-radius: var(--dt-size-radius-circle);\n  margin-bottom: var(--dt-space-300-negative);\n\n  &--selected {\n    margin-bottom: var(--dt-space-400-negative);\n  }\n\n  &.ivr-connector--dtmf {\n    width: var(--dt-size-550);\n    height: var(--dt-size-550);\n    margin-bottom: var(--dt-space-450-negative);\n    color: var(--dt-color-neutral-white);\n    font-size: var(--dt-font-size-200);\n\n    &--selected {\n      margin-bottom: var(--dt-space-500-negative);\n    }\n  }\n}\n</style>\n"],"names":["IVR_NODE_PROMPT_MENU","IVR_NODE_PROMPT_COLLECT","IVR_NODE_PROMPT_PLAY","IVR_NODE_EXPERT","IVR_NODE_GO_TO","IVR_NODE_BRANCH","IVR_NODE_TRANSFER","IVR_NODE_HANGUP","IVR_NODE_ICON_TYPES","IVR_NODE_LABELS","IVR_NODE_COLORS","IVR_NODE_COLOR_MAPPING","_sfc_main","DtCard","DtButton","DtDropdown","DtIcon","e","normal","selected","_hoisted_1","_hoisted_3","_createElementBlock","_mergeProps","_toHandlers","$options","$props","_normalizeClass","_ctx","_renderSlot","_createVNode","_component_dt_card","_createElementVNode","_component_dt_button","_component_dt_icon","_hoisted_2","_toDisplayString","_component_dt_dropdown","$data","$event","_withCtx","close"],"mappings":"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"}

package/dist/lib/ivr-node.js

@@ -18,7 +18,6 @@ import "./lazy-show.js";
 import "@dialpad/dialtone-icons/vue3";
 import "../chunks/icon_constants-OpYAAKwF.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "./skeleton.js";
 import "../chunks/list_item_constants-LTUc74pD.js";
 const b = "promptmenu", R = "promptcollect", N = "promptplay", I = "gotoexpert", i = "goto", f = "branch", h = "transfer", E = "hangup", w = {
   [b]: "keypad",
@@ -29,7 +28,7 @@ const b = "promptmenu", R = "promptcollect", N = "promptplay", I = "gotoexpert",
   [i]: "call-merge",
   [h]: "transfer",
   [E]: "phone-hang-up"
-}, _e = {
+}, pe = {
   [b]: "Menu",
   [R]: "Collect",
   [N]: "Play",
@@ -230,15 +229,15 @@ function z(t, c, e, U, v, n) {
     }, 8, ["container-class", "header-class"])
   ], 16);
 }
-const ue = /* @__PURE__ */ V(q, [["render", z]]);
+const _e = /* @__PURE__ */ V(q, [["render", z]]);
 export {
-  ue as DtRecipeIvrNode,
+  _e as DtRecipeIvrNode,
   f as IVR_NODE_BRANCH,
   I as IVR_NODE_EXPERT,
   i as IVR_NODE_GO_TO,
   E as IVR_NODE_HANGUP,
   w as IVR_NODE_ICON_TYPES,
-  _e as IVR_NODE_LABELS,
+  pe as IVR_NODE_LABELS,
   R as IVR_NODE_PROMPT_COLLECT,
   b as IVR_NODE_PROMPT_MENU,
   N as IVR_NODE_PROMPT_PLAY,