@dialpad/dialtone 9.98.0 → 9.99.0

package/dist/vue3/components/keyboard_shortcut/keyboard_shortcut.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard_shortcut.vue.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconPlus","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAASA,KAAgB;AAAA,EACzB,iBAAiBC,KAAgB;AAAA,EACjC,gBAAgBC,KAAe;AAAA,EAC/B,cAAcC,KAAa;AAAA,EAC3B,gBAAgBC,KAAe;AAAA,EAC/B,SAASC,KAAa;AACxB;AAMA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,kBAAAL,KAAgB;AAAA,IAChB,kBAAAC,KAAgB;AAAA,IAChB,iBAAAC,KAAe;AAAA,mBACfC,KAAa;AAAA,IACb,iBAAAC,KAAe;AAAA,mBACfC,KAAa;AAAA,gBACbC,KAAU;AAAA,EACX;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAUA,KAAU;AAAA;IAEvB;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;EAhJA,KAAA;AAAA,EAUM,OAAM;;AAVZ,MAAA,aAAA,CAAA,WAAA;;0BAEEC,IAqCM,mBAAA,OAAA;AAAA,IApCH,OAHLC,IAAAA,eAAA;AAAA;yCAGoF,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,qCADxBD,IAKO,mBAAA,QALP,YAKOE,IAAAA,gBADF,OAAgB,gBAAA,GAAA,CAAA,KAZzBC,IAAA,mBAAA,IAAA,IAAA;AAAA,KAcIC,IAAAA,UAAA,IAAA,GAAAJ,IAAA,mBAwBWK,oBAtCfC,IAe0B,WAAA,SAAA,wBAf1B,CAec,MAAM,MAAC;AAfrB,aAAAF,cAAA,GAAAJ,uBAAAK,IAAAA,UAAA,MAAA;AAAA,QAmBc,SAAA,MAAM,IAAI,KAFlBD,IAAA,UAAA,GAAAG,IAAAA,YAUEC,IA3BR,wBAkBa,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,UAEd,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAvBTP,IAAAA,eAAA;AAAA;qDAuB4G,OAAQ,SAAA;AAAA;oDAK9GD,IASE,mBAAA,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAhCTC,IAAAA,eAAA;AAAA;qDAgC4G,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA,QApChB,GAAA,MAAA,IAAA,UAAA;AAAA;;;;;;"}
+{"version":3,"file":"keyboard_shortcut.vue.cjs","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","DtIconPlus","_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":"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"}

package/dist/vue3/components/keyboard_shortcut/keyboard_shortcut.vue.js

@@ -10,6 +10,7 @@ const SHORTCUTS_ICON_ALIASES = {
   "{cmd}": DtIconCommand
 };
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtKeyboardShortcut",
   components: {
     DtIconLayoutGrid,

package/dist/vue3/components/keyboard_shortcut/keyboard_shortcut.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard_shortcut.vue.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAMA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU;AAAA;IAEb;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;EAhJA,KAAA;AAAA,EAUM,OAAM;;AAVZ,MAAA,aAAA,CAAA,WAAA;;sBAEEA,mBAqCM,OAAA;AAAA,IApCH,OAHLC,eAAA;AAAA;yCAGoF,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,iCADxBD,mBAKO,QALP,YAKOE,gBADF,OAAgB,gBAAA,GAAA,CAAA,KAZzBC,mBAAA,IAAA,IAAA;AAAA,KAcIC,UAAA,IAAA,GAAAJ,mBAwBWK,gBAtCfC,WAe0B,SAAA,wBAf1B,CAec,MAAM,MAAC;AAfrB,aAAAF,UAAA,GAAAJ,mBAAAK,UAAA,MAAA;AAAA,QAmBc,SAAA,MAAM,IAAI,KAFlBD,UAAA,GAAAG,YAUEC,wBATK,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,UAEd,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAvBTP,eAAA;AAAA;qDAuB4G,OAAQ,SAAA;AAAA;gDAK9GD,mBASE,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAhCTC,eAAA;AAAA;qDAgC4G,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA,QApChB,GAAA,MAAA,IAAA,UAAA;AAAA;;;;;"}
+{"version":3,"file":"keyboard_shortcut.vue.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n  <kbd\n    :class=\"[\n      'd-keyboard-shortcut',\n      { 'd-keyboard-shortcut--inverted': inverted },\n    ]\"\n  >\n    <span\n      v-if=\"screenReaderText\"\n      class=\"d-keyboard-shortcut--sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <component\n        :is=\"icons[item]\"\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        size=\"100\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__icon',\n          { 'd-keyboard-shortcut__icon--inverted': inverted },\n        ]\"\n      />\n      <span\n        v-else\n        :key=\"`${i}-${item}`\"\n        aria-hidden=\"true\"\n        :class=\"[\n          'd-keyboard-shortcut__item',\n          { 'd-keyboard-shortcut__item--inverted': inverted },\n        ]\"\n        v-html=\"item\"\n      />\n    </template>\n  </kbd>\n</template>\n\n<script>\nimport {\n  DtIconLayoutGrid,\n  DtIconArrowRight,\n  DtIconArrowLeft,\n  DtIconArrowUp,\n  DtIconArrowDown,\n  DtIconCommand,\n  DtIconPlus,\n} from '@dialpad/dialtone-icons/vue3';\n\nconst SHORTCUTS_ICON_ALIASES = {\n  '{win}': DtIconLayoutGrid,\n  '{arrow-right}': DtIconArrowRight,\n  '{arrow-left}': DtIconArrowLeft,\n  '{arrow-up}': DtIconArrowUp,\n  '{arrow-down}': DtIconArrowDown,\n  '{cmd}': DtIconCommand,\n};\n\n/**\n * This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtKeyboardShortcut',\n\n  components: {\n    DtIconLayoutGrid,\n    DtIconArrowRight,\n    DtIconArrowLeft,\n    DtIconArrowUp,\n    DtIconArrowDown,\n    DtIconCommand,\n    DtIconPlus,\n  },\n\n  props: {\n    /**\n     * If true, applies inverted styles.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Include any of these tokens in your string to render the corresponding symbol:\n     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n     */\n    shortcut: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.\n     */\n    screenReaderText: {\n      type: String,\n      default: null,\n    },\n  },\n\n  data () {\n    return {\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return {\n        ...SHORTCUTS_ICON_ALIASES,\n        '{plus}': DtIconPlus,\n      };\n    },\n\n    shortcutWithSeparator () {\n      return this.shortcut.replace(this.separator, '{plus}');\n    },\n\n    formattedShortcut () {\n      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n        return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n      }, this.shortcutWithSeparator);\n    },\n\n    // Splits any icon based aliases into their own array items.\n    formattedShortcutSplit () {\n      const iconAliasString = Object.keys(this.icons).join('|');\n\n      /*\n         The regexp splits a given string with icon alias and is filtered by empty strings after:\n         if {win} is our delimiter AKA shortcut icon alias\n         '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n      */\n      const regex = new RegExp(`(${iconAliasString})`, 'gi');\n      return this.formattedShortcut.split(regex).filter(Boolean);\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_toDisplayString","_createCommentVNode","_openBlock","_Fragment","_renderList","_createBlock","_resolveDynamicComponent"],"mappings":";;;AAqDA,MAAM,yBAAyB;AAAA,EAC7B,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAMA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKD,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO;AAAA,QACL,GAAG;AAAA,QACH,UAAU;AAAA;IAEb;AAAA,IAED,wBAAyB;AACvB,aAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,QAAQ;AAAA,IACtD;AAAA,IAED,oBAAqB;AACnB,aAAO,OAAO,KAAK,sBAAsB,EAAE,OAAO,CAAC,QAAQ,QAAQ;AACjE,eAAO,OAAO,QAAQ,IAAI,OAAO,MAAM,MAAM,KAAK,IAAI,GAAG,uBAAuB,GAAG,CAAC;AAAA,SACnF,KAAK,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGD,yBAA0B;AACxB,YAAM,kBAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG;AAOxD,YAAM,QAAQ,IAAI,OAAO,IAAI,eAAe,KAAK,IAAI;AACrD,aAAO,KAAK,kBAAkB,MAAM,KAAK,EAAE,OAAO,OAAO;AAAA,IAC1D;AAAA,EACF;AACH;;EAjJA,KAAA;AAAA,EAUM,OAAM;;AAVZ,MAAA,aAAA,CAAA,WAAA;;sBAEEA,mBAqCM,OAAA;AAAA,IApCH,OAHLC,eAAA;AAAA;yCAGoF,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,iCADxBD,mBAKO,QALP,YAKOE,gBADF,OAAgB,gBAAA,GAAA,CAAA,KAZzBC,mBAAA,IAAA,IAAA;AAAA,KAcIC,UAAA,IAAA,GAAAJ,mBAwBWK,gBAtCfC,WAe0B,SAAA,wBAf1B,CAec,MAAM,MAAC;AAfrB,aAAAF,UAAA,GAAAJ,mBAAAK,UAAA,MAAA;AAAA,QAmBc,SAAA,MAAM,IAAI,KAFlBD,UAAA,GAAAG,YAUEC,wBATK,SAAK,MAAC,IAAI,CAAA,GAAA;AAAA,UAEd,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAvBTP,eAAA;AAAA;qDAuB4G,OAAQ,SAAA;AAAA;gDAK9GD,mBASE,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAhCTC,eAAA;AAAA;qDAgC4G,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA,QApChB,GAAA,MAAA,IAAA,UAAA;AAAA;;;;;"}

package/dist/vue3/components/lazy_show/lazy_show.vue.cjs

@@ -3,6 +3,7 @@ Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toString
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtLazyShow",
   inheritAttrs: false,
   /******************

package/dist/vue3/components/lazy_show/lazy_show.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"lazy_show.vue.cjs","sources":["../../../components/lazy_show/lazy_show.vue"],"sourcesContent":["<template>\n  <Transition\n    :name=\"transition\"\n    :appear=\"appear\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n  >\n    <div\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot v-if=\"initialized\" />\n    </div>\n  </Transition>\n</template>\n\n<script>\n/**\n * Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n */\nexport default {\n  name: 'DtLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A valid Vue enter/leave CSS transition name.\n     */\n    transition: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     * @values true, false\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_mergeProps","_withCtx","_createElementVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;;;AAsBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,cAAc;AAAA;AAAA;AAAA;AAAA,EAKd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAQ;AACN,WAAO;AAAA,MACL,aAAa,CAAC,CAAC,KAAK;AAAA;EAEvB;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,eAAgB;AACd,aAAO,QAAQ,IAAI,aAAa;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAO;AAAA,IACL,MAAM,SAAU,UAAU;AACxB,UAAI,CAAC,YAAY,KAAK,YAAa;AAEnC,WAAK,cAAc;AAAA,IACpB;AAAA,EACF;AACH;;AAxFE,SAAAA,cAAA,GAAAC,gBAaaC,IAAAA,YAbbC,IAAAA,WAaa;AAAA,IAZV,MAAM,OAAU;AAAA,IAChB,QAAQ,OAAM;AAAA,KACP,KAAM,QAAA,EACb,KAAK,SAAY,aAAA,CAAA,GAAA;AAAA,IALtB,SAAAC,IAAA,QAOI,MAMM;AAAA,yBANNC,IAMM,mBAAA,OAbVC,IAAAA,eAAAC,IAAAA,mBASc,KAAM,MAAA,CAAA,GAAA;AAAA,QAGF,MAAW,cAAvBC,IAAA,WAA2B,0BAZjC,KAAA,GAAA,IAAAC,IAAA,mBAAA,IAAA,IAAA;AAAA;oBAQc,OAAI,IAAA;AAAA;;IARlB,GAAA;AAAA;;;;"}
+{"version":3,"file":"lazy_show.vue.cjs","sources":["../../../components/lazy_show/lazy_show.vue"],"sourcesContent":["<template>\n  <Transition\n    :name=\"transition\"\n    :appear=\"appear\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n  >\n    <div\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot v-if=\"initialized\" />\n    </div>\n  </Transition>\n</template>\n\n<script>\n/**\n * Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A valid Vue enter/leave CSS transition name.\n     */\n    transition: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     * @values true, false\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_mergeProps","_withCtx","_createElementVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;;;AAsBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,cAAc;AAAA;AAAA;AAAA;AAAA,EAKd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAQ;AACN,WAAO;AAAA,MACL,aAAa,CAAC,CAAC,KAAK;AAAA;EAEvB;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,eAAgB;AACd,aAAO,QAAQ,IAAI,aAAa;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAO;AAAA,IACL,MAAM,SAAU,UAAU;AACxB,UAAI,CAAC,YAAY,KAAK,YAAa;AAEnC,WAAK,cAAc;AAAA,IACpB;AAAA,EACF;AACH;;AAzFE,SAAAA,cAAA,GAAAC,gBAaaC,IAAAA,YAbbC,IAAAA,WAaa;AAAA,IAZV,MAAM,OAAU;AAAA,IAChB,QAAQ,OAAM;AAAA,KACP,KAAM,QAAA,EACb,KAAK,SAAY,aAAA,CAAA,GAAA;AAAA,IALtB,SAAAC,IAAA,QAOI,MAMM;AAAA,yBANNC,IAMM,mBAAA,OAbVC,IAAAA,eAAAC,IAAAA,mBASc,KAAM,MAAA,CAAA,GAAA;AAAA,QAGF,MAAW,cAAvBC,IAAA,WAA2B,0BAZjC,KAAA,GAAA,IAAAC,IAAA,mBAAA,IAAA,IAAA;AAAA;oBAQc,OAAI,IAAA;AAAA;;IARlB,GAAA;AAAA;;;;"}

package/dist/vue3/components/lazy_show/lazy_show.vue.js

@@ -1,6 +1,7 @@
 import { openBlock, createBlock, Transition, mergeProps, withCtx, withDirectives, createElementVNode, normalizeProps, guardReactiveProps, renderSlot, createCommentVNode, vShow } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtLazyShow",
   inheritAttrs: false,
   /******************

package/dist/vue3/components/lazy_show/lazy_show.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazy_show.vue.js","sources":["../../../components/lazy_show/lazy_show.vue"],"sourcesContent":["<template>\n  <Transition\n    :name=\"transition\"\n    :appear=\"appear\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n  >\n    <div\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot v-if=\"initialized\" />\n    </div>\n  </Transition>\n</template>\n\n<script>\n/**\n * Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n */\nexport default {\n  name: 'DtLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A valid Vue enter/leave CSS transition name.\n     */\n    transition: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     * @values true, false\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_mergeProps","_withCtx","_createElementVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;AAsBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,cAAc;AAAA;AAAA;AAAA;AAAA,EAKd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAQ;AACN,WAAO;AAAA,MACL,aAAa,CAAC,CAAC,KAAK;AAAA;EAEvB;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,eAAgB;AACd,aAAO,QAAQ,IAAI,aAAa;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAO;AAAA,IACL,MAAM,SAAU,UAAU;AACxB,UAAI,CAAC,YAAY,KAAK,YAAa;AAEnC,WAAK,cAAc;AAAA,IACpB;AAAA,EACF;AACH;;AAxFE,SAAAA,UAAA,GAAAC,YAaaC,YAbbC,WAaa;AAAA,IAZV,MAAM,OAAU;AAAA,IAChB,QAAQ,OAAM;AAAA,KACP,KAAM,QAAA,EACb,KAAK,SAAY,aAAA,CAAA,GAAA;AAAA,IALtB,SAAAC,QAOI,MAMM;AAAA,qBANNC,mBAMM,OAbVC,eAAAC,mBASc,KAAM,MAAA,CAAA,GAAA;AAAA,QAGF,MAAW,cAAvBC,WAA2B,0BAZjC,KAAA,GAAA,IAAAC,mBAAA,IAAA,IAAA;AAAA;gBAQc,OAAI,IAAA;AAAA;;IARlB,GAAA;AAAA;;;"}
+{"version":3,"file":"lazy_show.vue.js","sources":["../../../components/lazy_show/lazy_show.vue"],"sourcesContent":["<template>\n  <Transition\n    :name=\"transition\"\n    :appear=\"appear\"\n    v-bind=\"$attrs\"\n    :css=\"isCSSEnabled\"\n  >\n    <div\n      v-show=\"show\"\n      v-bind=\"$attrs\"\n    >\n      <!-- @slot Slot for main content -->\n      <slot v-if=\"initialized\" />\n    </div>\n  </Transition>\n</template>\n\n<script>\n/**\n * Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtLazyShow',\n\n  inheritAttrs: false,\n\n  /******************\n   *     PROPS      *\n   ******************/\n  props: {\n    /**\n     * Whether the child slot is shown.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * A valid Vue enter/leave CSS transition name.\n     */\n    transition: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Enable/Disable transition animation\n     * @values true, false\n     */\n    appear: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  /******************\n   *      DATA      *\n   ******************/\n  data () {\n    return {\n      initialized: !!this.show,\n    };\n  },\n\n  computed: {\n    /**\n     * Set the css property to false when running tests only.\n     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n     * transition `css` property\n     * @returns {boolean}\n     */\n    isCSSEnabled () {\n      return process.env.NODE_ENV !== 'test';\n    },\n  },\n\n  /******************\n   *      WATCH     *\n   ******************/\n  watch: {\n    show: function (newValue) {\n      if (!newValue || this.initialized) return;\n\n      this.initialized = true;\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_Transition","_mergeProps","_withCtx","_createElementVNode","_normalizeProps","_guardReactiveProps","_renderSlot","_createCommentVNode"],"mappings":";;AAsBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,cAAc;AAAA;AAAA;AAAA;AAAA,EAKd,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAQ;AACN,WAAO;AAAA,MACL,aAAa,CAAC,CAAC,KAAK;AAAA;EAEvB;AAAA,EAED,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOR,eAAgB;AACd,aAAO,QAAQ,IAAI,aAAa;AAAA,IACjC;AAAA,EACF;AAAA;AAAA;AAAA;AAAA,EAKD,OAAO;AAAA,IACL,MAAM,SAAU,UAAU;AACxB,UAAI,CAAC,YAAY,KAAK,YAAa;AAEnC,WAAK,cAAc;AAAA,IACpB;AAAA,EACF;AACH;;AAzFE,SAAAA,UAAA,GAAAC,YAaaC,YAbbC,WAaa;AAAA,IAZV,MAAM,OAAU;AAAA,IAChB,QAAQ,OAAM;AAAA,KACP,KAAM,QAAA,EACb,KAAK,SAAY,aAAA,CAAA,GAAA;AAAA,IALtB,SAAAC,QAOI,MAMM;AAAA,qBANNC,mBAMM,OAbVC,eAAAC,mBASc,KAAM,MAAA,CAAA,GAAA;AAAA,QAGF,MAAW,cAAvBC,WAA2B,0BAZjC,KAAA,GAAA,IAAAC,mBAAA,IAAA,IAAA;AAAA;gBAQc,OAAI,IAAA;AAAA;;IARlB,GAAA;AAAA;;;"}

package/dist/vue3/components/link/link.vue.cjs

@@ -4,6 +4,7 @@ const link_constants = require("./link_constants.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtLink",
   props: {
     /**

package/dist/vue3/components/link/link.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"link.vue.cjs","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["LINK_VARIANTS","LINK_KIND_MODIFIERS","getLinkKindModifier","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;AAoBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAW,MAAM;AACf,eAAOA,eAAa,cAAC,SAAS,IAAI;AAAA,MACnC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,qBAAAC,eAAmB;AAAA;EAEtB;AAAA,EAED,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACAC,eAAAA,oBAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAE/C;AAAA,EACF;AACH;AA7DA,MAAA,aAAA,CAAA,MAAA;;0BACEC,IAOI,mBAAA,KAAA;AAAA,IAND,OAFLC,mBAEY,SAAc,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACP,MAAgB,UAAA,KAAA,SAAS,KAAA,OAAO,OAAI;AAAA;IAGrCC,eAAQ,KAAA,QAAA,SAAA;AAAA,EAPZ,GAAA,IAAA,UAAA;;;;"}
+{"version":3,"file":"link.vue.cjs","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["LINK_VARIANTS","LINK_KIND_MODIFIERS","getLinkKindModifier","_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;;;AAoBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAW,MAAM;AACf,eAAOA,eAAa,cAAC,SAAS,IAAI;AAAA,MACnC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,qBAAAC,eAAmB;AAAA;EAEtB;AAAA,EAED,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACAC,eAAAA,oBAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAE/C;AAAA,EACF;AACH;AA9DA,MAAA,aAAA,CAAA,MAAA;;0BACEC,IAOI,mBAAA,KAAA;AAAA,IAND,OAFLC,mBAEY,SAAc,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACP,MAAgB,UAAA,KAAA,SAAS,KAAA,OAAO,OAAI;AAAA;IAGrCC,eAAQ,KAAA,QAAA,SAAA;AAAA,EAPZ,GAAA,IAAA,UAAA;;;;"}

package/dist/vue3/components/link/link.vue.js

@@ -2,6 +2,7 @@ import { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from "./link_
 import { openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtLink",
   props: {
     /**

package/dist/vue3/components/link/link.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.vue.js","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;AAoBA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAW,MAAM;AACf,eAAO,cAAc,SAAS,IAAI;AAAA,MACnC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA,oBAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAE/C;AAAA,EACF;AACH;AA7DA,MAAA,aAAA,CAAA,MAAA;;sBACEA,mBAOI,KAAA;AAAA,IAND,OAFLC,eAEY,SAAc,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACP,MAAgB,UAAA,KAAA,SAAS,KAAA,OAAO,OAAI;AAAA;IAGrCC,WAAQ,KAAA,QAAA,SAAA;AAAA,EAPZ,GAAA,IAAA,UAAA;;;"}
+{"version":3,"file":"link.vue.js","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"getLinkClasses()\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS, getLinkKindModifier } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n\n    /**\n     * Determines whether the link should have inverted styling\n     * default is false.\n     * @values true, false\n     */\n    inverted: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n\n  methods: {\n    getLinkClasses () {\n      return [\n        'd-link',\n        getLinkKindModifier(this.kind, this.inverted),\n      ];\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot"],"mappings":";;;AAoBA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,UAAW,MAAM;AACf,eAAO,cAAc,SAAS,IAAI;AAAA,MACnC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA;EAEH;AAAA,EAED,SAAS;AAAA,IACP,iBAAkB;AAChB,aAAO;AAAA,QACL;AAAA,QACA,oBAAoB,KAAK,MAAM,KAAK,QAAQ;AAAA;IAE/C;AAAA,EACF;AACH;AA9DA,MAAA,aAAA,CAAA,MAAA;;sBACEA,mBAOI,KAAA;AAAA,IAND,OAFLC,eAEY,SAAc,gBAAA;AAAA,IACtB,WAAQ;AAAA,IACP,MAAgB,UAAA,KAAA,SAAS,KAAA,OAAO,OAAI;AAAA;IAGrCC,WAAQ,KAAA,QAAA,SAAA;AAAA,EAPZ,GAAA,IAAA,UAAA;;;"}

package/dist/vue3/components/list_item/list_item.vue.cjs

@@ -8,6 +8,7 @@ const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helpe
 const item_layout = require("../item_layout/item_layout.vue.cjs");
 const ROLES = ["listitem", "menuitem", "option"];
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtListItem",
   components: {
     DtItemLayout: item_layout.default,

package/dist/vue3/components/list_item/list_item.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['d-list-item', {\n      'd-list-item--focusable': isFocusable,\n      'd-list-item--highlighted': isHighlighted,\n      'd-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check\n          size=\"400\"\n          class=\"d-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n\n    /**\n     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["DtItemLayout","DtIconCheck","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createSlots","_renderList","_renderSlot","_createVNode"],"mappings":"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"}
+{"version":3,"file":"list_item.vue.cjs","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['d-list-item', {\n      'd-list-item--focusable': isFocusable,\n      'd-list-item--highlighted': isHighlighted,\n      'd-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check\n          size=\"400\"\n          class=\"d-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n\n    /**\n     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["DtItemLayout","DtIconCheck","utils","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createSlots","_renderList","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/vue3/components/list_item/list_item.vue.js

@@ -6,6 +6,7 @@ import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 import DtItemLayout from "../item_layout/item_layout.vue.js";
 const ROLES = ["listitem", "menuitem", "option"];
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtListItem",
   components: {
     DtItemLayout,

package/dist/vue3/components/list_item/list_item.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"list_item.vue.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['d-list-item', {\n      'd-list-item--focusable': isFocusable,\n      'd-list-item--highlighted': isHighlighted,\n      'd-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check\n          size=\"400\"\n          class=\"d-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n\n    /**\n     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createSlots","_renderList","_renderSlot","_createVNode"],"mappings":"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"}
+{"version":3,"file":"list_item.vue.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<!-- eslint-disable vuejs-accessibility/mouse-events-have-key-events -->\n<template>\n  <component\n    :is=\"elementType\"\n    :id=\"id\"\n    :class=\"['d-list-item', {\n      'd-list-item--focusable': isFocusable,\n      'd-list-item--highlighted': isHighlighted,\n      'd-list-item--static': !isHoverable,\n    }]\"\n    :tabindex=\"isFocusable ? 0 : -1\"\n    :role=\"role\"\n    :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n    v-on=\"listItemListeners\"\n  >\n    <component\n      :is=\"listItemType\"\n      v-if=\"listItemType\"\n    >\n      <template\n        v-for=\"(_, slotName) in $slots\"\n        #[slotName]\n      >\n        <!-- @slot named slots for custom list items -->\n        <slot :name=\"slotName\" />\n      </template>\n      <template\n        v-if=\"selected\"\n        #selected\n      >\n        <dt-icon-check\n          size=\"400\"\n          class=\"d-list-item--selected-icon\"\n        />\n      </template>\n    </component>\n    <!-- @slot slot for the main content -->\n    <slot v-else />\n  </component>\n</template>\n\n<script>\nimport {\n  LIST_ITEM_TYPES,\n  LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue3';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/**\n * A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItem',\n\n  components: {\n    DtItemLayout,\n    DtIconCheck,\n  },\n\n  /**\n   * Value provided from keyboard_list_navigation.js using id prop.\n   */\n  inject: {\n    highlightId: { default: null },\n  },\n\n  props: {\n    /**\n     * Id for the item.\n     */\n    id: {\n      type: String,\n      default () { return utils.getUniqueString(); },\n    },\n\n    /**\n     * String to use for the item's role.\n     */\n    role: {\n      type: String,\n      default: 'listitem',\n      validator: (role) => (ROLES).includes(role),\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    elementType: {\n      type: String,\n      default: 'li',\n    },\n\n    /**\n     * The type of child list item to use.\n     * @values default, custom\n     */\n    type: {\n      type: String,\n      default: LIST_ITEM_TYPES.DEFAULT,\n      validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n    },\n\n    /**\n     * The type of navigation that this component should support.\n     * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n     * - \"tab\" for items that are navigated using the TAB key.\n     * - \"none\" for static items that are not interactive.\n     * @values arrow-keys, tab, none\n     */\n    navigationType: {\n      type: String,\n      default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n      validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n    },\n\n    /**\n     * Applies selected styles to the list item\n     */\n    selected: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  emits: [\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * Native mouse move event\n     *\n     * @event mousemove\n     * @type {MouseEvent}\n     */\n    'mousemove',\n\n    /**\n     * Native mouse leave event\n     *\n     * @event mouseleave\n     * @type {MouseEvent}\n     */\n    'mouseleave',\n\n    /**\n     * Mouse down event\n     *\n     * @event mousedown\n     */\n    'mousedown',\n  ],\n\n  data () {\n    return {\n      injected: false,\n      mouseHighlighted: false,\n    };\n  },\n\n  computed: {\n    listItemType () {\n      switch (this.type) {\n        case LIST_ITEM_TYPES.DEFAULT:\n          return DtItemLayout;\n        default:\n          return null;\n      }\n    },\n\n    listItemListeners () {\n      return {\n        keydown: event => {\n          if (['enter', 'space'].includes(event.code.toLowerCase())) {\n            this.onClick(event);\n          }\n          this.$emit('keydown', event);\n        },\n\n        mousemove: event => {\n          this.onMouseHover(event);\n          this.$emit('mousemove', event);\n        },\n\n        mouseleave: event => {\n          this.onMouseLeave(event);\n          this.$emit('mouseleave', event);\n        },\n      };\n    },\n\n    /**\n     * For keyboard navigation, whether this item is currently highlighted.\n     * An injected highlightId will override the default mouseover highlight.\n     */\n    isHighlighted () {\n      if (this.isHoverable) {\n        return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n      }\n      return false;\n    },\n\n    isFocusable () {\n      // Navigation type has to be set to \"tab\".\n      return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n    },\n\n    /**\n     * Whether to apply hover styles.\n     */\n    isHoverable () {\n      return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n    },\n  },\n\n  methods: {\n    onClick (e) {\n      // disabled as we do not want to override native click\n      // eslint-disable-next-line vue/require-explicit-emits\n      this.$emit('click', e);\n    },\n\n    onMouseHover () {\n      this.mouseHighlighted = true;\n    },\n\n    onMouseLeave () {\n      this.mouseHighlighted = false;\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_resolveDynamicComponent","_mergeProps","_toHandlers","_withCtx","_createSlots","_renderList","_renderSlot","_createVNode"],"mappings":"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"}

package/dist/vue3/components/list_item_group/list_item_group.vue.cjs

@@ -4,6 +4,7 @@ const common_utils = require("../../common/utils.cjs");
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtListItemGroup",
   props: {
     /**

package/dist/vue3/components/list_item_group/list_item_group.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list_item_group.vue.cjs","sources":["../../../components/list_item_group/list_item_group.vue"],"sourcesContent":["<template>\n  <ul\n    :id=\"id\"\n    :class=\"['d-list-item-group', listClass]\"\n    role=\"group\"\n    data-qa=\"dt-dropdown-list-wrapper\"\n    :aria-labelledby=\"`${id}-heading`\"\n  >\n    <li\n      v-if=\"heading\"\n      :id=\"`${id}-heading`\"\n      role=\"presentation\"\n      data-qa=\"dt-dropdown-list-heading\"\n      :class=\"['dt-dropdown-list--header', headingClass]\"\n    >\n      <!-- @slot Slot for heading, will override heading prop. -->\n      <slot name=\"headingSlot\">\n        {{ heading }}\n      </slot>\n    </li>\n    <!-- @slot Slot for the list component -->\n    <slot />\n  </ul>\n</template>\n\n<script>\nimport {} from './list_item_group_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtListItemGroup',\n\n  props: {\n    /**\n     * Id of the List Item Group\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * List's heading.\n     */\n    heading: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class to style the heading\n     */\n    headingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["getUniqueString","_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode"],"mappings":";;;;;AA6BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAOA,aAAe,gBAAA;AAAA,MAAK;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AACH;AAjEA,MAAA,aAAA,CAAA,MAAA,iBAAA;AAAA,MAAA,aAAA,CAAA,IAAA;;0BACEC,IAqBK,mBAAA,MAAA;AAAA,IApBF,IAAI,OAAE;AAAA,IACN,OAHLC,IAAAA,qCAGkC,OAAS,SAAA,CAAA;AAAA,IACvC,MAAK;AAAA,IACL,WAAQ;AAAA,IACP,sBAAoB,OAAE,EAAA;AAAA;IAGf,OAAO,4BADfD,IAWK,mBAAA,MAAA;AAAA,MAnBT,KAAA;AAAA,MAUO,OAAO,OAAE,EAAA;AAAA,MACV,MAAK;AAAA,MACL,WAAQ;AAAA,MACP,OAbPC,IAAAA,4CAa2C,OAAY,YAAA,CAAA;AAAA;MAGjDC,IAAAA,WAEO,gCAFP,MAEO;AAAA,QAlBbC,IAAAA,gBAAAC,IAAAA,gBAiBW,OAAO,OAAA,GAAA,CAAA;AAAA;IAjBlB,GAAA,IAAA,UAAA,KAAAC,IAAA,mBAAA,IAAA,IAAA;AAAA,IAqBIH,eAAQ,KAAA,QAAA,SAAA;AAAA,EArBZ,GAAA,IAAA,UAAA;;;;"}
+{"version":3,"file":"list_item_group.vue.cjs","sources":["../../../components/list_item_group/list_item_group.vue"],"sourcesContent":["<template>\n  <ul\n    :id=\"id\"\n    :class=\"['d-list-item-group', listClass]\"\n    role=\"group\"\n    data-qa=\"dt-dropdown-list-wrapper\"\n    :aria-labelledby=\"`${id}-heading`\"\n  >\n    <li\n      v-if=\"heading\"\n      :id=\"`${id}-heading`\"\n      role=\"presentation\"\n      data-qa=\"dt-dropdown-list-heading\"\n      :class=\"['dt-dropdown-list--header', headingClass]\"\n    >\n      <!-- @slot Slot for heading, will override heading prop. -->\n      <slot name=\"headingSlot\">\n        {{ heading }}\n      </slot>\n    </li>\n    <!-- @slot Slot for the list component -->\n    <slot />\n  </ul>\n</template>\n\n<script>\nimport {} from './list_item_group_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItemGroup',\n\n  props: {\n    /**\n     * Id of the List Item Group\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * List's heading.\n     */\n    heading: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class to style the heading\n     */\n    headingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["getUniqueString","_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode"],"mappings":";;;;;AA6BA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAOA,aAAe,gBAAA;AAAA,MAAK;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AACH;AAlEA,MAAA,aAAA,CAAA,MAAA,iBAAA;AAAA,MAAA,aAAA,CAAA,IAAA;;0BACEC,IAqBK,mBAAA,MAAA;AAAA,IApBF,IAAI,OAAE;AAAA,IACN,OAHLC,IAAAA,qCAGkC,OAAS,SAAA,CAAA;AAAA,IACvC,MAAK;AAAA,IACL,WAAQ;AAAA,IACP,sBAAoB,OAAE,EAAA;AAAA;IAGf,OAAO,4BADfD,IAWK,mBAAA,MAAA;AAAA,MAnBT,KAAA;AAAA,MAUO,OAAO,OAAE,EAAA;AAAA,MACV,MAAK;AAAA,MACL,WAAQ;AAAA,MACP,OAbPC,IAAAA,4CAa2C,OAAY,YAAA,CAAA;AAAA;MAGjDC,IAAAA,WAEO,gCAFP,MAEO;AAAA,QAlBbC,IAAAA,gBAAAC,IAAAA,gBAiBW,OAAO,OAAA,GAAA,CAAA;AAAA;IAjBlB,GAAA,IAAA,UAAA,KAAAC,IAAA,mBAAA,IAAA,IAAA;AAAA,IAqBIH,eAAQ,KAAA,QAAA,SAAA;AAAA,EArBZ,GAAA,IAAA,UAAA;;;;"}

package/dist/vue3/components/list_item_group/list_item_group.vue.js

@@ -2,6 +2,7 @@ import { getUniqueString } from "../../common/utils.js";
 import { openBlock, createElementBlock, normalizeClass, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
 import _export_sfc from "../../_virtual/_plugin-vue_export-helper.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtListItemGroup",
   props: {
     /**

package/dist/vue3/components/list_item_group/list_item_group.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"list_item_group.vue.js","sources":["../../../components/list_item_group/list_item_group.vue"],"sourcesContent":["<template>\n  <ul\n    :id=\"id\"\n    :class=\"['d-list-item-group', listClass]\"\n    role=\"group\"\n    data-qa=\"dt-dropdown-list-wrapper\"\n    :aria-labelledby=\"`${id}-heading`\"\n  >\n    <li\n      v-if=\"heading\"\n      :id=\"`${id}-heading`\"\n      role=\"presentation\"\n      data-qa=\"dt-dropdown-list-heading\"\n      :class=\"['dt-dropdown-list--header', headingClass]\"\n    >\n      <!-- @slot Slot for heading, will override heading prop. -->\n      <slot name=\"headingSlot\">\n        {{ heading }}\n      </slot>\n    </li>\n    <!-- @slot Slot for the list component -->\n    <slot />\n  </ul>\n</template>\n\n<script>\nimport {} from './list_item_group_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtListItemGroup',\n\n  props: {\n    /**\n     * Id of the List Item Group\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * List's heading.\n     */\n    heading: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class to style the heading\n     */\n    headingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode"],"mappings":";;;AA6BA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAO,gBAAe;AAAA,MAAK;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AACH;AAjEA,MAAA,aAAA,CAAA,MAAA,iBAAA;AAAA,MAAA,aAAA,CAAA,IAAA;;sBACEA,mBAqBK,MAAA;AAAA,IApBF,IAAI,OAAE;AAAA,IACN,OAHLC,qCAGkC,OAAS,SAAA,CAAA;AAAA,IACvC,MAAK;AAAA,IACL,WAAQ;AAAA,IACP,sBAAoB,OAAE,EAAA;AAAA;IAGf,OAAO,wBADfD,mBAWK,MAAA;AAAA,MAnBT,KAAA;AAAA,MAUO,OAAO,OAAE,EAAA;AAAA,MACV,MAAK;AAAA,MACL,WAAQ;AAAA,MACP,OAbPC,4CAa2C,OAAY,YAAA,CAAA;AAAA;MAGjDC,WAEO,gCAFP,MAEO;AAAA,QAlBbC,gBAAAC,gBAiBW,OAAO,OAAA,GAAA,CAAA;AAAA;IAjBlB,GAAA,IAAA,UAAA,KAAAC,mBAAA,IAAA,IAAA;AAAA,IAqBIH,WAAQ,KAAA,QAAA,SAAA;AAAA,EArBZ,GAAA,IAAA,UAAA;;;"}
+{"version":3,"file":"list_item_group.vue.js","sources":["../../../components/list_item_group/list_item_group.vue"],"sourcesContent":["<template>\n  <ul\n    :id=\"id\"\n    :class=\"['d-list-item-group', listClass]\"\n    role=\"group\"\n    data-qa=\"dt-dropdown-list-wrapper\"\n    :aria-labelledby=\"`${id}-heading`\"\n  >\n    <li\n      v-if=\"heading\"\n      :id=\"`${id}-heading`\"\n      role=\"presentation\"\n      data-qa=\"dt-dropdown-list-heading\"\n      :class=\"['dt-dropdown-list--header', headingClass]\"\n    >\n      <!-- @slot Slot for heading, will override heading prop. -->\n      <slot name=\"headingSlot\">\n        {{ heading }}\n      </slot>\n    </li>\n    <!-- @slot Slot for the list component -->\n    <slot />\n  </ul>\n</template>\n\n<script>\nimport {} from './list_item_group_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtListItemGroup',\n\n  props: {\n    /**\n     * Id of the List Item Group\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * List's heading.\n     */\n    heading: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class to style the heading\n     */\n    headingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode"],"mappings":";;;AA6BA,MAAK,YAAU;AAAA,EACb,cAAc,EAAE,MAAM,EAAG;AAAA,EACzB,MAAM;AAAA,EAEN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,UAAW;AAAE,eAAO,gBAAe;AAAA,MAAK;AAAA,IACzC;AAAA;AAAA;AAAA;AAAA,IAKD,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,WAAW;AAAA,MACT,MAAM,CAAC,QAAQ,OAAO,MAAM;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA,EACF;AACH;AAlEA,MAAA,aAAA,CAAA,MAAA,iBAAA;AAAA,MAAA,aAAA,CAAA,IAAA;;sBACEA,mBAqBK,MAAA;AAAA,IApBF,IAAI,OAAE;AAAA,IACN,OAHLC,qCAGkC,OAAS,SAAA,CAAA;AAAA,IACvC,MAAK;AAAA,IACL,WAAQ;AAAA,IACP,sBAAoB,OAAE,EAAA;AAAA;IAGf,OAAO,wBADfD,mBAWK,MAAA;AAAA,MAnBT,KAAA;AAAA,MAUO,OAAO,OAAE,EAAA;AAAA,MACV,MAAK;AAAA,MACL,WAAQ;AAAA,MACP,OAbPC,4CAa2C,OAAY,YAAA,CAAA;AAAA;MAGjDC,WAEO,gCAFP,MAEO;AAAA,QAlBbC,gBAAAC,gBAiBW,OAAO,OAAA,GAAA,CAAA;AAAA;IAjBlB,GAAA,IAAA,UAAA,KAAAC,mBAAA,IAAA,IAAA;AAAA,IAqBIH,WAAQ,KAAA,QAAA,SAAA;AAAA,EArBZ,GAAA,IAAA,UAAA;;;"}

package/dist/vue3/components/modal/modal.vue.cjs

@@ -13,6 +13,7 @@ const lazy_show = require("../lazy_show/lazy_show.vue.cjs");
 const button = require("../button/button.vue.cjs");
 const notice_constants = require("../notice/notice_constants.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtModal",
   components: {
     DtLazyShow: lazy_show.default,

package/dist/vue3/components/modal/modal.vue.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"modal.vue.cjs","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.header)\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"hasSlotContent($slots.default)\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon-close\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIconClose,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n          disableRootScrolling(this.$el.getRootNode().host);\n        } else {\n          enableRootScrolling(this.$el.getRootNode().host);\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtLazyShow","DtButton","DtIconClose","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","getUniqueString","MODAL_KIND_MODIFIERS","MODAL_SIZE_MODIFIERS","NOTICE_KINDS","MODAL_BANNER_KINDS","EVENT_KEYNAMES","hasSlotContent","disableRootScrolling","enableRootScrolling","_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","_Transition","_createElementVNode"],"mappings":"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"}
+{"version":3,"file":"modal.vue.cjs","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.header)\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"hasSlotContent($slots.default)\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon-close\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIconClose,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n          disableRootScrolling(this.$el.getRootNode().host);\n        } else {\n          enableRootScrolling(this.$el.getRootNode().host);\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["DtLazyShow","DtButton","DtIconClose","SrOnlyCloseButton","Modal","SrOnlyCloseButtonMixin","getUniqueString","MODAL_KIND_MODIFIERS","MODAL_SIZE_MODIFIERS","NOTICE_KINDS","MODAL_BANNER_KINDS","EVENT_KEYNAMES","hasSlotContent","disableRootScrolling","enableRootScrolling","_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","_Transition","_createElementVNode"],"mappings":"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"}

package/dist/vue3/components/modal/modal.vue.js

@@ -11,6 +11,7 @@ import DtLazyShow from "../lazy_show/lazy_show.vue.js";
 import DtButton from "../button/button.vue.js";
 import { NOTICE_KINDS } from "../notice/notice_constants.js";
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtModal",
   components: {
     DtLazyShow,

package/dist/vue3/components/modal/modal.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.vue.js","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.header)\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"hasSlotContent($slots.default)\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon-close\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIconClose,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n          disableRootScrolling(this.$el.getRootNode().host);\n        } else {\n          enableRootScrolling(this.$el.getRootNode().host);\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","_Transition","_createElementVNode"],"mappings":";;;;;;;;;;;;AAyIA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAAA,EAED,QAAQ,CAAC,OAAO,sBAAsB;AAAA,EAEtC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKL,kBAAkB;AAAA,MAChB,MAAM;AAAA,MACN,UAAU;AAAA,MACV,WAAW,CAAC,UAAU;AACpB,eAAO,CAAC,CAAC,MAAM;AAAA,MAChB;AAAA,IACF;AAAA;AAAA;AAAA;AAAA,IAKD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,cAAc;AAAA,MACZ,MAAM;AAAA,MACN,SAAS,WAAY;AAAE,eAAO,gBAAe;AAAA,MAAK;AAAA,IACnD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,OAAO;AAAA,MACL,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,oBAAoB,EAAE,SAAS,CAAC;AAAA,IAC/D;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,SAAS;AAAA,MACT,WAAW,CAAC,MAAM,OAAO,KAAK,oBAAoB,EAAE,SAAS,CAAC;AAAA,IAC/D;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,YAAY;AAAA,MACV,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,cAAc;AAAA,MACZ,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,YAAY;AAAA,MACV,MAAM;AAAA,MACN,SAAS;AAAA,MACT,SAAU,MAAM;AACd,eAAO,aAAa,SAAS,IAAI;AAAA,MAClC;AAAA,IACF;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,aAAa;AAAA,MACX,MAAM,CAAC,QAAQ,QAAQ,KAAK;AAAA,MAC5B,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,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;AAAA;AAAA;AAAA;AAAA,IAMD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASD,qBAAqB;AAAA,MACnB,MAAM,CAAC,QAAQ,WAAW;AAAA,MAC1B,SAAS;AAAA,MACT,WAAW,yBAAuB;AAChC,eAAO,wBAAwB,WAC5B,+BAA+B,eAChC,oBAAoB,WAAW,GAAG;AAAA,MACrC;AAAA,IACF;AAAA,EACF;AAAA,EAED,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOL;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA;AAAA,EACD;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;EAEH;AAAA,EAED,UAAU;AAAA,IACR,iBAAkB;AAChB,aAAO;AAAA,QACL,OAAO,WAAS;AACd,cAAI,CAAC,KAAK,aAAc;AACxB,UAAC,MAAM,WAAW,MAAM,iBAAkB,KAAK;AAC/C,eAAK,MAAM,SAAS,KAAK;AAAA,QAC1B;AAAA,QAED,SAAS,WAAS;AAChB,kBAAQ,MAAM,MAAI;AAAA,YAChB,KAAK,eAAe;AAAA,YACpB,KAAK,eAAe;AAClB,mBAAK,MAAK;AACV;AAAA,YACF,KAAK,eAAe;AAClB,mBAAK,UAAU,KAAK;AACpB;AAAA,UACJ;AACA,eAAK,MAAM,WAAW,KAAK;AAAA,QAC5B;AAAA,QAED,eAAe,WAAS;AACtB,eAAK,MAAM,eAAe,IAAI;AAC9B,UAAC,MAAM,WAAW,MAAM,iBAAkB,KAAK;QAChD;AAAA;IAEJ;AAAA,IAED,OAAQ;AACN,aAAO,GAAG,CAAC,KAAK,IAAI;AAAA,IACrB;AAAA,IAED,gBAAiB;AACf,aAAO,CAAC,CAAC,KAAK,OAAO;AAAA,IACtB;AAAA,IAED,kBAAmB;AACjB,aAAO,mBAAmB,KAAK,UAAU;AAAA,IAC1C;AAAA,EACF;AAAA,EAED,OAAO;AAAA,IACL,MAAM;AAAA,MACJ,QAAS,WAAW;;AAClB,YAAI,WAAW;AAEb,eAAK,wBAAwB,SAAS;AACtC,+BAAqB,KAAK,IAAI,YAAa,EAAC,IAAI;AAAA,eAC3C;AACL,8BAAoB,KAAK,IAAI,YAAa,EAAC,IAAI;AAE/C,qBAAK,0BAAL,mBAA4B;AAC5B,eAAK,wBAAwB;AAAA,QAC/B;AAAA,MACD;AAAA,IACF;AAAA,IAED,QAAQ;AAAA,MACN,WAAW;AAAA,MACX,MAAM;AAAA,MACN,UAAW;AACT,aAAK,cAAa;AAAA,MACnB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,QAAS;AACP,WAAK,MAAM,eAAe,KAAK;AAAA,IAChC;AAAA,IAED,0BAA2B;AACzB,UAAI,KAAK,wBAAwB,SAAS;AACxC,aAAK,kBAAiB;AAAA,MACtB,WAAS,KAAK,oBAAoB,WAAW,GAAG,GAAG;AACnD,aAAK,iBAAiB,KAAK,mBAAmB;AAAA,iBACrC,KAAK,+BAA+B,aAAa;AAC1D,aAAK,oBAAoB;MAC3B;AAAA,IACD;AAAA,IAED,UAAW,GAAG;AACZ,UAAI,KAAK,MAAM;AACb,aAAK,qBAAqB,CAAC;AAAA,MAC7B;AAAA,IACD;AAAA,IAED,gBAAiB;AACf,UAAI,KAAK,aAAa,CAAC,KAAK,qBAAqB;AAC/C,gBAAQ,MAAM;AAAA,uEACiD;AAAA,MACjE;AAAA,IACD;AAAA,EACF;AACH;AA/cA,MAAA,aAAA,CAAA,oBAAA,iBAAA;AAAA,MAAA,aAAA,CAAA,IAAA;AAAA,MAAA,aAAA,CAAA,IAAA;;EAAA,KAAA;AAAA,EAoFU,OAAM;;;;;;;AAnFd,SAAAA,UAAA,GAAAC,YA+Ge,yBA/GfC,WA+Ge;AAAA,IA9Gb,YAAW;AAAA,IACV,MAAM,OAAI;AAAA,IACV,OAAK;AAAA;MAA2B,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,MAAA,qBAAqB,OAAI,IAAA;AAAA,MAAS,OAAU;AAAA;IAM/G,WAAQ;AAAA,IACP,eAAa,SAAI;AAAA,EAClB,GAAAC,WAAqB,SAAD,cAAA,CAAA,GAAA;AAAA,IAZxB,SAAAC,QAcI,MAaM;AAAA,MAZE,OAAA,SAAS,MAAc,eAAC,YAAO,MAAM,KAAK,OAAW,6BAD7DC,mBAaM,OAAA;AAAA,QA3BV,KAAA;AAAA,QAgBM,WAAQ;AAAA,QACP,OAjBPC,eAAA;AAAA;UAiBmD,OAAW;AAAA,UAAU,SAAe;AAAA;;QAOjFC,WAEO,2BAFP,MAEO;AAAA,UA1BbC,gBAAAC,gBAyBW,OAAW,WAAA,GAAA,CAAA;AAAA;eAzBtBC,mBAAA,IAAA,IAAA;AAAA,MA4BIC,YAmFaC,YAAA;AAAA,QAlFX,QAAA;AAAA,QACA,MAAK;AAAA;QA9BX,SAAAR,QAgCM,MA8EM;AAAA,yBA9ENS,mBA8EM,OAAA;AAAA,YA5EH,OAlCTP,eAAA;AAAA;+CAkC0F,OAAiB,kBAAA;AAAA,cAAc,OAAW;AAAA;YAK5H,MAAK;AAAA,YACL,cAAW;AAAA,YACV,oBAAkB,OAAa;AAAA,YAC/B,mBAAiB,OAAY;AAAA;YAGtB,MAAc,eAAC,KAAM,OAAC,MAAM,kBADpCD,mBAQM,OAAA;AAAA,cApDd,KAAA;AAAA,cA8CW,IAAI,OAAY;AAAA,cACjB,OAAM;AAAA,cACN,WAAQ;AAAA;cAGRE,WAAsB,KAAA,QAAA,QAAA;AAAA,YAnDhC,GAAA,GAAA,UAAA,mBAqDQF,mBAOK,MAAA;AAAA,cA5Db,KAAA;AAAA,cAuDW,IAAI,OAAY;AAAA,cACjB,OAAM;AAAA,cACN,WAAQ;AAAA,YAEL,GAAAI,gBAAA,OAAA,KAAK,GA3DlB,GAAA,UAAA;AAAA,YA8DgB,MAAc,eAAC,KAAM,OAAC,OAAO,kBADrCJ,mBAUM,OAAA;AAAA,cAvEd,KAAA;AAAA,cA+DW,OA/DXC,eAAA;AAAA;gBA+DgE,OAAY;AAAA;cAIlE,WAAQ;AAAA;cAGRC,WAAQ,KAAA,QAAA,SAAA;AAAA,mCAEVF,mBASI,KAAA;AAAA,cAjFZ,KAAA;AAAA,cA0EW,OA1EXC,eAAA;AAAA;gBA0EgE,OAAY;AAAA;cAIlE,WAAQ;AAAA,+BAEL,OAAI,IAAA,GAAA,CAAA;AAAA,YAGD,SAAa,iBADrBN,aAAAK,mBAMS,UANT,YAMS;AAAA,cADPE,WAAsB,KAAA,QAAA,QAAA;AAAA,kBAvFhCG,mBAAA,IAAA,IAAA;AAAA,aA0FiB,OAAS,aADlBV,aAAAC,YAeY,sBAfZC,WAeY;AAAA,cAxGpB,KAAA;AAAA,cA2FU,OAAM;AAAA,cACN,QAAA;AAAA,cACA,MAAK;AAAA,cACL,YAAW;AAAA,cACV,cAAY,OAAgB,iBAAC;AAAA,eACtB,OAAgB,kBAAA,EACvB,SAAO,SAAK,MAAA,CAAA,GAAA;AAAA,cAEF,cACT,MAEE;AAAA,gBAFFS,YAEE,0BAAA,EADA,MAAK,MAAK,CAAA;AAAA;cArGxB,GAAA;AAAA,iDAAAD,mBAAA,IAAA,IAAA;AAAA,YA0GgB,KAAuB,wCAD/BT,YAIE,iCAAA;AAAA,cA7GV,KAAA;AAAA,cA2GW,+BAA6B,KAAwB;AAAA,cACrD,SAAO,SAAK;AAAA,uEA5GvBS,mBAAA,IAAA,IAAA;AAAA,UAAA,GAAA,IAAA,UAAA,GAAA;AAAA,oBAiCgB,OAAI,IAAA;AAAA;;QAjCpB,GAAA;AAAA;;IAAA,GAAA;AAAA;;;"}
+{"version":3,"file":"modal.vue.js","sources":["../../../components/modal/modal.vue"],"sourcesContent":["<template>\n  <dt-lazy-show\n    transition=\"d-zoom\"\n    :show=\"show\"\n    :class=\"[\n      'd-modal',\n      MODAL_KIND_MODIFIERS[kind],\n      MODAL_SIZE_MODIFIERS[size],\n      modalClass,\n    ]\"\n    data-qa=\"dt-modal\"\n    :aria-hidden=\"open\"\n    v-on=\"modalListeners\"\n  >\n    <div\n      v-if=\"show && (hasSlotContent($slots.banner) || bannerTitle)\"\n      data-qa=\"dt-modal-banner\"\n      :class=\"[\n        'd-modal__banner',\n        bannerClass,\n        bannerKindClass,\n      ]\"\n    >\n      <!-- @slot Slot for the banner, defaults to bannerTitle prop -->\n      <slot name=\"banner\">\n        {{ bannerTitle }}\n      </slot>\n    </div>\n    <transition\n      appear\n      name=\"d-modal__dialog\"\n    >\n      <div\n        v-show=\"show\"\n        :class=\"[\n          'd-modal__dialog',\n          { 'd-modal__dialog--scrollable': fixedHeaderFooter },\n          dialogClass,\n        ]\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-describedby=\"describedById\"\n        :aria-labelledby=\"labelledById\"\n      >\n        <div\n          v-if=\"hasSlotContent($slots.header)\"\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          <!-- @slot Slot for dialog header section, taking the place of any \"title\" text prop -->\n          <slot name=\"header\" />\n        </div>\n        <h2\n          v-else\n          :id=\"labelledById\"\n          class=\"d-modal__header\"\n          data-qa=\"dt-modal-title\"\n        >\n          {{ title }}\n        </h2>\n        <div\n          v-if=\"hasSlotContent($slots.default)\"\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          <!-- @slot Default slot for dialog body section, taking the place of any \"copy\" text prop -->\n          <slot />\n        </div>\n        <p\n          v-else\n          :class=\"[\n            'd-modal__content',\n            contentClass,\n          ]\"\n          data-qa=\"dt-modal-copy\"\n        >\n          {{ copy }}\n        </p>\n        <footer\n          v-if=\"hasFooterSlot\"\n          class=\"d-modal__footer\"\n        >\n          <!-- @slot Slot for dialog footer content, often containing cancel and confirm buttons. -->\n          <slot name=\"footer\" />\n        </footer>\n        <dt-button\n          v-if=\"!hideClose\"\n          class=\"d-modal__close\"\n          circle\n          size=\"lg\"\n          importance=\"clear\"\n          :aria-label=\"closeButtonProps.ariaLabel\"\n          v-bind=\"closeButtonProps\"\n          @click=\"close\"\n        >\n          <template #icon>\n            <dt-icon-close\n              size=\"400\"\n            />\n          </template>\n        </dt-button>\n        <sr-only-close-button\n          v-if=\"showVisuallyHiddenClose\"\n          :visually-hidden-close-label=\"visuallyHiddenCloseLabel\"\n          @close=\"close\"\n        />\n      </div>\n    </transition>\n  </dt-lazy-show>\n</template>\n\n<script>\n/* eslint-disable max-lines */\nimport { DtButton } from '@/components/button';\nimport { DtIconClose } from '@dialpad/dialtone-icons/vue3';\nimport Modal from '@/common/mixins/modal';\nimport {\n  MODAL_BANNER_KINDS,\n  MODAL_KIND_MODIFIERS,\n  MODAL_SIZE_MODIFIERS,\n} from './modal_constants';\nimport { getUniqueString, hasSlotContent, disableRootScrolling, enableRootScrolling } from '@/common/utils';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { EVENT_KEYNAMES } from '@/common/constants';\nimport SrOnlyCloseButtonMixin from '@/common/mixins/sr_only_close_button';\nimport SrOnlyCloseButton from '@/common/sr_only_close_button.vue';\nimport { NOTICE_KINDS } from '@/components/notice';\n\n/**\n * Modals focus the user’s attention exclusively on one task or piece of information\n * via a window that sits on top of the page content.\n * @see https://dialtone.dialpad.com/components/modal.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtModal',\n\n  components: {\n    DtLazyShow,\n    DtButton,\n    DtIconClose,\n    SrOnlyCloseButton,\n  },\n\n  mixins: [Modal, SrOnlyCloseButtonMixin],\n\n  props: {\n    /**\n     * A set of props to be passed into the modal's close button.\n     * Requires an 'ariaLabel' property.\n     */\n    closeButtonProps: {\n      type: Object,\n      required: true,\n      validator: (props) => {\n        return !!props.ariaLabel;\n      },\n    },\n\n    /**\n     * Body text to display as the modal's main content.\n     */\n    copy: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-describedby.\n     * Recommended only if the dialog content itself isn't enough to give full context,\n     * as screen readers should recite the dialog contents by default before any aria-description.\n     */\n    describedById: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Id to use for the dialog's aria-labelledby.\n     */\n    labelledById: {\n      type: String,\n      default: function () { return getUniqueString(); },\n    },\n\n    /**\n     * Whether the modal should be shown.\n     * Parent component can sync on this value to control the modal's visibility.\n     * @values true, false\n     */\n    show: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Title text to display in the modal header.\n     */\n    title: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Title text to display in the modal banner.\n     */\n    bannerTitle: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The theme of the modal. kind - default or danger,\n     * @values default, danger\n     */\n    kind: {\n      type: String,\n      default: 'default',\n      validator: (k) => Object.keys(MODAL_KIND_MODIFIERS).includes(k),\n    },\n\n    /**\n     * The size of the modal. size - default or full,\n     * @values default, full\n     */\n    size: {\n      type: String,\n      default: 'default',\n      validator: (s) => Object.keys(MODAL_SIZE_MODIFIERS).includes(s),\n    },\n\n    /**\n     * Additional class name for the root modal element.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    modalClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the dialog element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    dialogClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Additional class name for the content element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    contentClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Sets the color of the banner.\n     * @values base, error, info, success, warning\n     */\n    bannerKind: {\n      type: String,\n      default: 'warning',\n      validate (kind) {\n        return NOTICE_KINDS.includes(kind);\n      },\n    },\n\n    /**\n     * Additional class name for the banner element within the modal.\n     * Can accept String, Object, and Array, i.e. has the\n     * same API as Vue's built-in handling of the class attribute.\n     */\n    bannerClass: {\n      type: [String, Object, Array],\n      default: '',\n    },\n\n    /**\n     * Hides the close button on the modal\n     * @values true, false\n     */\n    hideClose: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Whether the modal will close when you click outside of the dialog on the overlay.\n     * @values true, false\n     */\n    closeOnClick: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Scrollable modal that allows scroll the modal content keeping the header and footer fixed\n     * @values true, false\n     */\n    fixedHeaderFooter: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * The element that is focused when the modal is opened. This can be an\n     * HTMLElement within the modal, a string starting with '#' which will\n     * find the element by ID. 'first' which will automatically focus\n     * the first element, or 'dialog' which will focus the dialog window itself.\n     * If the dialog is modal this prop cannot be 'none'.\n     */\n    initialFocusElement: {\n      type: [String, HTMLElement],\n      default: 'first',\n      validator: initialFocusElement => {\n        return initialFocusElement === 'first' ||\n          (initialFocusElement instanceof HTMLElement) ||\n          initialFocusElement.startsWith('#');\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native button click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native keydown event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n\n    /**\n     * The modal will emit a \"false\" boolean value for this event when the user performs a modal-closing action.\n     * Parent components can sync on this value to create a 2-way binding to control modal visibility.\n     *\n     * @event update:show\n     * @type {Boolean}\n     */\n    'update:show',\n  ],\n\n  data () {\n    return {\n      MODAL_KIND_MODIFIERS,\n      MODAL_SIZE_MODIFIERS,\n      MODAL_BANNER_KINDS,\n      EVENT_KEYNAMES,\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    modalListeners () {\n      return {\n        click: event => {\n          if (!this.closeOnClick) return;\n          (event.target === event.currentTarget) && this.close();\n          this.$emit('click', event);\n        },\n\n        keydown: event => {\n          switch (event.code) {\n            case EVENT_KEYNAMES.esc:\n            case EVENT_KEYNAMES.escape:\n              this.close();\n              break;\n            case EVENT_KEYNAMES.tab:\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n\n        'after-enter': event => {\n          this.$emit('update:show', true);\n          (event.target === event.currentTarget) && this.setFocusAfterTransition();\n        },\n      };\n    },\n\n    open () {\n      return `${!this.show}`;\n    },\n\n    hasFooterSlot () {\n      return !!this.$slots.footer;\n    },\n\n    bannerKindClass () {\n      return MODAL_BANNER_KINDS[this.bannerKind];\n    },\n  },\n\n  watch: {\n    show: {\n      handler (isShowing) {\n        if (isShowing) {\n          // Set a reference to the previously-active element, to which we'll return focus on modal close.\n          this.previousActiveElement = document.activeElement;\n          disableRootScrolling(this.$el.getRootNode().host);\n        } else {\n          enableRootScrolling(this.$el.getRootNode().host);\n          // Modal is being hidden, so return focus to the previously active element before clearing the reference.\n          this.previousActiveElement?.focus();\n          this.previousActiveElement = null;\n        }\n      },\n    },\n\n    $props: {\n      immediate: true,\n      deep: true,\n      handler () {\n        this.validateProps();\n      },\n    },\n  },\n\n  methods: {\n    close () {\n      this.$emit('update:show', false);\n    },\n\n    setFocusAfterTransition () {\n      if (this.initialFocusElement === 'first') {\n        this.focusFirstElement();\n      } else if (this.initialFocusElement.startsWith('#')) {\n        this.focusElementById(this.initialFocusElement);\n      } else if (this.initialFocusElement instanceof HTMLElement) {\n        this.initialFocusElement.focus();\n      }\n    },\n\n    trapFocus (e) {\n      if (this.show) {\n        this.focusTrappedTabPress(e);\n      }\n    },\n\n    validateProps () {\n      if (this.hideClose && !this.visuallyHiddenClose) {\n        console.error(`If hideClose prop is true, visuallyHiddenClose and visuallyHiddenCloseLabel props\n        need to be set so the component always includes a close button`);\n      }\n    },\n  },\n};\n</script>\n"],"names":["_openBlock","_createBlock","_mergeProps","_toHandlers","_withCtx","_createElementBlock","_normalizeClass","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode","_Transition","_createElementVNode"],"mappings":"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"}

package/dist/vue3/components/notice/notice.vue.cjs

@@ -8,6 +8,7 @@ const sr_only_close_button = require("../../common/mixins/sr_only_close_button.c
 const vue = require("vue");
 const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
 const _sfc_main = {
+  compatConfig: { MODE: 3 },
   name: "DtNotice",
   components: {
     DtNoticeIcon: notice_icon.default,