@dialpad/dialtone-vue 3.120.0 → 3.120.2

package/dist/lib/ivr-node.js

@@ -1,43 +1,53 @@
-import { resolveComponent as a, openBlock as l, createElementBlock as m, mergeProps as L, toHandlers as M, normalizeClass as p, toDisplayString as C, createCommentVNode as _, renderSlot as u, createVNode as r, withCtx as d, createElementVNode as O, withModifiers as S } from "vue";
-import { _ as V } from "../chunks/_plugin-vue_export-helper-hUChTQA_.js";
-import { DtCard as k } from "./card.js";
-import { DtButton as g } from "./button.js";
-import { D as A } from "../chunks/dropdown-eWOvBvwq.js";
-import { DtIcon as G } from "./icon.js";
-import "./utils.js";
-import "./constants.js";
-import "../chunks/link_constants-vIUB92L4.js";
-import "../chunks/keyboard_list_navigation-F0O8nht0.js";
-import "../chunks/dropdown_constants-EUcDxBrX.js";
-import "../chunks/sr_only_close_button-7O-Ev8uM.js";
+import { resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers, normalizeClass, toDisplayString, createCommentVNode, renderSlot, createVNode, withCtx, createElementVNode, withModifiers } from "vue";
+import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
+import { DtCard } from "./card.js";
+import { DtButton } from "./button.js";
+import { DtDropdown } from "../chunks/dropdown-Hn-TeTvZ.js";
+import { DtIcon } from "./icon.js";
+import "../common/utils.js";
+import "../common/constants.js";
+import "../chunks/link_constants-nWVlXQBs.js";
+import "../chunks/keyboard_list_navigation-ScXhrxya.js";
+import "../chunks/dropdown_constants-w1MXGC3Z.js";
+import "../chunks/sr_only_close_button-3EdsV-dH.js";
 import "./popover.js";
-import "../chunks/popover_constants-qjlEkroB.js";
+import "../chunks/popover_constants-Qkpb0yh2.js";
 import "tippy.js";
-import "../chunks/modal-VuMFkZFH.js";
+import "../chunks/modal-XOr4kiNZ.js";
 import "./lazy-show.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-OpYAAKwF.js";
+import "../chunks/icon_constants-Dy4MEUJL.js";
 import "@dialpad/dialtone-icons/icons.json";
-import "../chunks/list_item_constants-LTUc74pD.js";
-const b = "promptmenu", R = "promptcollect", N = "promptplay", I = "gotoexpert", i = "goto", f = "branch", h = "transfer", E = "hangup", w = {
-  [b]: "keypad",
-  [R]: "dialer",
-  [N]: "volume-2",
-  [I]: "expert-node",
-  [f]: "branch",
-  [i]: "call-merge",
-  [h]: "transfer",
-  [E]: "phone-hang-up"
-}, pe = {
-  [b]: "Menu",
-  [R]: "Collect",
-  [N]: "Play",
-  [I]: "Expert",
-  [f]: "Branch",
-  [i]: "Go-to",
-  [h]: "Transfer",
-  [E]: "Hangup"
-}, o = {
+import "../chunks/list_item_constants-u1xcN9Dd.js";
+const IVR_NODE_PROMPT_MENU = "promptmenu";
+const IVR_NODE_PROMPT_COLLECT = "promptcollect";
+const IVR_NODE_PROMPT_PLAY = "promptplay";
+const IVR_NODE_EXPERT = "gotoexpert";
+const IVR_NODE_GO_TO = "goto";
+const IVR_NODE_BRANCH = "branch";
+const IVR_NODE_TRANSFER = "transfer";
+const IVR_NODE_HANGUP = "hangup";
+const IVR_NODE_ICON_TYPES = {
+  [IVR_NODE_PROMPT_MENU]: "keypad",
+  [IVR_NODE_PROMPT_COLLECT]: "dialer",
+  [IVR_NODE_PROMPT_PLAY]: "volume-2",
+  [IVR_NODE_EXPERT]: "expert-node",
+  [IVR_NODE_BRANCH]: "branch",
+  [IVR_NODE_GO_TO]: "call-merge",
+  [IVR_NODE_TRANSFER]: "transfer",
+  [IVR_NODE_HANGUP]: "phone-hang-up"
+};
+const IVR_NODE_LABELS = {
+  [IVR_NODE_PROMPT_MENU]: "Menu",
+  [IVR_NODE_PROMPT_COLLECT]: "Collect",
+  [IVR_NODE_PROMPT_PLAY]: "Play",
+  [IVR_NODE_EXPERT]: "Expert",
+  [IVR_NODE_BRANCH]: "Branch",
+  [IVR_NODE_GO_TO]: "Go-to",
+  [IVR_NODE_TRANSFER]: "Transfer",
+  [IVR_NODE_HANGUP]: "Hangup"
+};
+const IVR_NODE_COLORS = {
   PROMPT: {
     normal: "d-bc-blue-200",
     selected: "d-bc-blue-300"
@@ -50,22 +60,24 @@ const b = "promptmenu", R = "promptcollect", N = "promptplay", I = "gotoexpert",
     normal: "d-bc-red-100",
     selected: "d-bc-red-200"
   }
-}, B = {
-  [b]: o.PROMPT,
-  [R]: o.PROMPT,
-  [N]: o.PROMPT,
-  [I]: o.LOGIC,
-  [f]: o.LOGIC,
-  [i]: o.LOGIC,
-  [h]: o.TERMINAL,
-  [E]: o.TERMINAL
-}, q = {
+};
+const IVR_NODE_COLOR_MAPPING = {
+  [IVR_NODE_PROMPT_MENU]: IVR_NODE_COLORS.PROMPT,
+  [IVR_NODE_PROMPT_COLLECT]: IVR_NODE_COLORS.PROMPT,
+  [IVR_NODE_PROMPT_PLAY]: IVR_NODE_COLORS.PROMPT,
+  [IVR_NODE_EXPERT]: IVR_NODE_COLORS.LOGIC,
+  [IVR_NODE_BRANCH]: IVR_NODE_COLORS.LOGIC,
+  [IVR_NODE_GO_TO]: IVR_NODE_COLORS.LOGIC,
+  [IVR_NODE_TRANSFER]: IVR_NODE_COLORS.TERMINAL,
+  [IVR_NODE_HANGUP]: IVR_NODE_COLORS.TERMINAL
+};
+const _sfc_main = {
   name: "DtRecipeIvrNode",
   components: {
-    DtCard: k,
-    DtButton: g,
-    DtDropdown: A,
-    DtIcon: G
+    DtCard,
+    DtButton,
+    DtDropdown,
+    DtIcon
   },
   props: {
     /**
@@ -73,28 +85,28 @@ const b = "promptmenu", R = "promptcollect", N = "promptplay", I = "gotoexpert",
      */
     nodeType: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Descriptive label for the node name.
      */
     nodeLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * Selected state of the node
      */
     isSelected: {
       type: Boolean,
-      default: !1
+      default: false
     },
     /**
      * Translated aria-label for header menu button
      */
     menuButtonAriaLabel: {
       type: String,
-      required: !0
+      required: true
     },
     /**
      * DTMF input
@@ -115,98 +127,104 @@ const b = "promptmenu", R = "promptcollect", N = "promptplay", I = "gotoexpert",
   ],
   data() {
     return {
-      isOpen: !1
+      isOpen: false
     };
   },
   computed: {
     nodeListeners() {
       return {
-        click: (t) => this.$emit("click", t)
+        click: (e) => this.$emit("click", e)
       };
     },
     nodeIcon() {
-      return w[this.nodeType];
+      return IVR_NODE_ICON_TYPES[this.nodeType];
     },
     headerColor() {
-      const { normal: t, selected: c } = B[this.nodeType];
-      return this.isSelected ? c : t;
+      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];
+      return this.isSelected ? selected : normal;
     },
     isGotoNode() {
-      return this.nodeType === i;
+      return this.nodeType === IVR_NODE_GO_TO;
     }
   },
   methods: {
     openMenu() {
-      this.isOpen = !0;
+      this.isOpen = true;
     }
   }
-}, H = { class: "ivr_node__header-left" }, K = {
+};
+const _hoisted_1 = { class: "ivr_node__header-left" };
+const _hoisted_2 = {
   class: "ivr_node__label",
   "data-qa": "ivr-node-label"
-}, x = { class: "ivr_node__dropdown-list" };
-function z(t, c, e, U, v, n) {
-  const P = a("dt-icon"), y = a("dt-button"), D = a("dt-dropdown"), T = a("dt-card");
-  return l(), m("div", L({ class: "ivr_node" }, M(n.nodeListeners, !0)), [
-    e.dtmfKey ? (l(), m("div", {
+};
+const _hoisted_3 = { class: "ivr_node__dropdown-list" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = resolveComponent("dt-icon");
+  const _component_dt_button = resolveComponent("dt-button");
+  const _component_dt_dropdown = resolveComponent("dt-dropdown");
+  const _component_dt_card = resolveComponent("dt-card");
+  return openBlock(), createElementBlock("div", mergeProps({ class: "ivr_node" }, toHandlers($options.nodeListeners, true)), [
+    $props.dtmfKey ? (openBlock(), createElementBlock("div", {
       key: 0,
       "data-qa": "dt-top-connector-dtmf",
-      class: p(["ivr-connector ivr-connector--dtmf", { "ivr-connector--dtmf--selected": e.isSelected }])
-    }, C(e.dtmfKey), 3)) : _("", !0),
-    t.$slots.connector ? u(t.$slots, "connector", { key: 1 }) : _("", !0),
-    !e.dtmfKey && !t.$slots.connector ? (l(), m("div", {
+      class: normalizeClass(["ivr-connector ivr-connector--dtmf", { "ivr-connector--dtmf--selected": $props.isSelected }])
+    }, toDisplayString($props.dtmfKey), 3)) : createCommentVNode("", true),
+    _ctx.$slots.connector ? renderSlot(_ctx.$slots, "connector", { key: 1 }) : createCommentVNode("", true),
+    !$props.dtmfKey && !_ctx.$slots.connector ? (openBlock(), createElementBlock("div", {
       key: 2,
       "data-qa": "dt-top-connector",
-      class: p(["ivr-connector", { "ivr-connector--selected": e.isSelected }])
-    }, null, 2)) : _("", !0),
-    r(T, {
+      class: normalizeClass(["ivr-connector", { "ivr-connector--selected": $props.isSelected }])
+    }, null, 2)) : createCommentVNode("", true),
+    createVNode(_component_dt_card, {
       "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12",
       "container-class": [
         "d-w100p",
-        { "d-ba d-bar8 d-baw4": e.isSelected },
-        n.headerColor
+        { "d-ba d-bar8 d-baw4": $props.isSelected },
+        $options.headerColor
       ],
       "header-class": [
         "d-mtn1",
         "d-bt",
         "d-btw4",
         "d-p0",
-        n.headerColor,
-        { "d-btr4": !e.isSelected }
+        $options.headerColor,
+        { "d-btr4": !$props.isSelected }
       ]
     }, {
-      header: d(() => [
-        O("div", H, [
-          r(y, {
-            "aria-label": e.nodeType,
+      header: withCtx(() => [
+        createElementVNode("div", _hoisted_1, [
+          createVNode(_component_dt_button, {
+            "aria-label": $props.nodeType,
             importance: "clear",
             kind: "muted",
             "data-qa": "dt-ivr-node-icon"
           }, {
-            icon: d(() => [
-              r(P, {
-                name: n.nodeIcon,
+            icon: withCtx(() => [
+              createVNode(_component_dt_icon, {
+                name: $options.nodeIcon,
                 size: "200",
-                class: p(["", { ivr_node__goto_icon: n.isGotoNode }])
+                class: normalizeClass(["", { "ivr_node__goto_icon": $options.isGotoNode }])
               }, null, 8, ["name", "class"])
             ]),
             _: 1
           }, 8, ["aria-label"]),
-          O("p", K, C(e.nodeLabel), 1)
+          createElementVNode("p", _hoisted_2, toDisplayString($props.nodeLabel), 1)
         ]),
-        r(D, {
-          open: v.isOpen,
-          "onUpdate:open": c[0] || (c[0] = (s) => v.isOpen = s),
+        createVNode(_component_dt_dropdown, {
+          open: $data.isOpen,
+          "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $data.isOpen = $event),
           placement: "bottom"
         }, {
-          anchor: d(() => [
-            r(y, {
+          anchor: withCtx(() => [
+            createVNode(_component_dt_button, {
               importance: "clear",
               kind: "muted",
-              "aria-label": e.menuButtonAriaLabel,
-              onClick: S(n.openMenu, ["stop", "prevent"])
+              "aria-label": $props.menuButtonAriaLabel,
+              onClick: withModifiers($options.openMenu, ["stop", "prevent"])
             }, {
-              icon: d(() => [
-                r(P, {
+              icon: withCtx(() => [
+                createVNode(_component_dt_icon, {
                   name: "more-vertical",
                   size: "200"
                 })
@@ -214,33 +232,33 @@ function z(t, c, e, U, v, n) {
               _: 1
             }, 8, ["aria-label", "onClick"])
           ]),
-          list: d(({ close: s }) => [
-            O("div", x, [
-              u(t.$slots, "menuItems", { close: s })
+          list: withCtx(({ close }) => [
+            createElementVNode("div", _hoisted_3, [
+              renderSlot(_ctx.$slots, "menuItems", { close })
             ])
           ]),
           _: 3
         }, 8, ["open"])
       ]),
-      content: d(() => [
-        u(t.$slots, "content")
+      content: withCtx(() => [
+        renderSlot(_ctx.$slots, "content")
       ]),
       _: 3
     }, 8, ["container-class", "header-class"])
   ], 16);
 }
-const _e = /* @__PURE__ */ V(q, [["render", z]]);
+const ivr_node = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  _e as DtRecipeIvrNode,
-  f as IVR_NODE_BRANCH,
-  I as IVR_NODE_EXPERT,
-  i as IVR_NODE_GO_TO,
-  E as IVR_NODE_HANGUP,
-  w as IVR_NODE_ICON_TYPES,
-  pe as IVR_NODE_LABELS,
-  R as IVR_NODE_PROMPT_COLLECT,
-  b as IVR_NODE_PROMPT_MENU,
-  N as IVR_NODE_PROMPT_PLAY,
-  h as IVR_NODE_TRANSFER
+  ivr_node as DtRecipeIvrNode,
+  IVR_NODE_BRANCH,
+  IVR_NODE_EXPERT,
+  IVR_NODE_GO_TO,
+  IVR_NODE_HANGUP,
+  IVR_NODE_ICON_TYPES,
+  IVR_NODE_LABELS,
+  IVR_NODE_PROMPT_COLLECT,
+  IVR_NODE_PROMPT_MENU,
+  IVR_NODE_PROMPT_PLAY,
+  IVR_NODE_TRANSFER
 };
 //# sourceMappingURL=ivr-node.js.map

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

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

package/dist/lib/keyboard-shortcut.cjs

@@ -1,2 +1,120 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),u=require("../chunks/_plugin-vue_export-helper-6_y-gaV6.js"),d=require("./icon.cjs");require("@dialpad/dialtone-icons/vue3");require("../chunks/icon_constants-2S_OSQ1t.js");require("@dialpad/dialtone-icons/icons.json");const t={"{win}":"layout-grid","{arrow-right}":"arrow-right","{arrow-left}":"arrow-left","{arrow-up}":"arrow-up","{arrow-down}":"arrow-down","{cmd}":"command"},l={"{plus}":"plus"},S=Object.keys(t),_={name:"DtKeyboardShortcut",components:{DtIcon:d.DtIcon},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{SHORTCUTS_ICON_ALIASES:t,separator:/\+/gi}},computed:{icons(){return{...t,...l}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,"{plus}")},formattedShortcut(){return Object.keys(t).reduce((c,r)=>c.replace(new RegExp("{"+r+"}","gi"),t[r]),this.shortcutWithSeparator)},formattedShortcutSplit(){const c=Object.keys(this.icons).join("|"),r=new RegExp(`(${c})`,"gi");return this.formattedShortcut.split(r).filter(Boolean)}}},h={key:0,class:"sr-only"},p=["innerHTML"];function m(c,r,o,y,T,a){const i=e.resolveComponent("dt-icon");return e.openBlock(),e.createElementBlock("kbd",{class:e.normalizeClass(["d-keyboard-shortcut",{"d-keyboard-shortcut--inverted":o.inverted}])},[o.screenReaderText?(e.openBlock(),e.createElementBlock("span",h,e.toDisplayString(o.screenReaderText),1)):e.createCommentVNode("",!0),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.formattedShortcutSplit,(n,s)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[a.icons[n]?(e.openBlock(),e.createBlock(i,{key:`${s}-${n}`,name:a.icons[n],size:"100","aria-hidden":"true",class:e.normalizeClass(["d-keyboard-shortcut__icon",{"d-keyboard-shortcut__icon--inverted":o.inverted}])},null,8,["name","class"])):(e.openBlock(),e.createElementBlock("span",{key:`${s}-${n}`,"aria-hidden":"true",class:e.normalizeClass(["d-keyboard-shortcut__item",{"d-keyboard-shortcut__item--inverted":o.inverted}]),innerHTML:n},null,10,p))],64))),256))],2)}const k=u._(_,[["render",m]]);exports.DtKeyboardShortcut=k;exports.SHORTCUTS_ALIASES_LIST=S;exports.SHORTCUTS_ICON_ALIASES=t;exports.SHORTCUTS_ICON_SEPARATOR=l;
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../chunks/_plugin-vue_export-helper-fhnQq0tA.js");
+const lib_icon = require("./icon.cjs");
+require("@dialpad/dialtone-icons/vue3");
+require("../chunks/icon_constants-QYpmdE0R.js");
+require("@dialpad/dialtone-icons/icons.json");
+const SHORTCUTS_ICON_ALIASES = {
+  "{win}": "layout-grid",
+  "{arrow-right}": "arrow-right",
+  "{arrow-left}": "arrow-left",
+  "{arrow-up}": "arrow-up",
+  "{arrow-down}": "arrow-down",
+  "{cmd}": "command"
+};
+const SHORTCUTS_ICON_SEPARATOR = {
+  "{plus}": "plus"
+};
+const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ICON_ALIASES);
+const _sfc_main = {
+  name: "DtKeyboardShortcut",
+  components: {
+    DtIcon: lib_icon.DtIcon
+  },
+  props: {
+    /**
+     * If true, applies inverted styles.
+     * @values true, false
+     */
+    inverted: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Include any of these tokens in your string to render the corresponding symbol:
+     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}
+     */
+    shortcut: {
+      type: String,
+      required: true
+    },
+    /**
+     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.
+     */
+    screenReaderText: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      SHORTCUTS_ICON_ALIASES,
+      separator: /\+/gi
+    };
+  },
+  computed: {
+    icons() {
+      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };
+    },
+    shortcutWithSeparator() {
+      return this.shortcut.replace(this.separator, "{plus}");
+    },
+    formattedShortcut() {
+      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {
+        return result.replace(new RegExp("{" + key + "}", "gi"), SHORTCUTS_ICON_ALIASES[key]);
+      }, this.shortcutWithSeparator);
+    },
+    // Splits any icon based aliases into their own array items.
+    formattedShortcutSplit() {
+      const iconAliasString = Object.keys(this.icons).join("|");
+      const regex = new RegExp(`(${iconAliasString})`, "gi");
+      return this.formattedShortcut.split(regex).filter(Boolean);
+    }
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "sr-only"
+};
+const _hoisted_2 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_icon = vue.resolveComponent("dt-icon");
+  return vue.openBlock(), vue.createElementBlock("kbd", {
+    class: vue.normalizeClass([
+      "d-keyboard-shortcut",
+      { "d-keyboard-shortcut--inverted": $props.inverted }
+    ])
+  }, [
+    $props.screenReaderText ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString($props.screenReaderText), 1)) : vue.createCommentVNode("", true),
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($options.formattedShortcutSplit, (item, i) => {
+      return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+        $options.icons[item] ? (vue.openBlock(), vue.createBlock(_component_dt_icon, {
+          key: `${i}-${item}`,
+          name: $options.icons[item],
+          size: "100",
+          "aria-hidden": "true",
+          class: vue.normalizeClass([
+            "d-keyboard-shortcut__icon",
+            { "d-keyboard-shortcut__icon--inverted": $props.inverted }
+          ])
+        }, null, 8, ["name", "class"])) : (vue.openBlock(), vue.createElementBlock("span", {
+          key: `${i}-${item}`,
+          "aria-hidden": "true",
+          class: vue.normalizeClass([
+            "d-keyboard-shortcut__item",
+            { "d-keyboard-shortcut__item--inverted": $props.inverted }
+          ]),
+          innerHTML: item
+        }, null, 10, _hoisted_2))
+      ], 64);
+    }), 256))
+  ], 2);
+}
+const keyboard_shortcut = /* @__PURE__ */ _pluginVue_exportHelper._export_sfc(_sfc_main, [["render", _sfc_render]]);
+exports.DtKeyboardShortcut = keyboard_shortcut;
+exports.SHORTCUTS_ALIASES_LIST = SHORTCUTS_ALIASES_LIST;
+exports.SHORTCUTS_ICON_ALIASES = SHORTCUTS_ICON_ALIASES;
+exports.SHORTCUTS_ICON_SEPARATOR = SHORTCUTS_ICON_SEPARATOR;
 //# sourceMappingURL=keyboard-shortcut.cjs.map

package/dist/lib/keyboard-shortcut.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.cjs","sources":["../../components/keyboard_shortcut/keyboard_shortcut_constants.js","../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["export const SHORTCUTS_ICON_ALIASES = {\n  '{win}': 'layout-grid',\n  '{arrow-right}': 'arrow-right',\n  '{arrow-left}': 'arrow-left',\n  '{arrow-up}': 'arrow-up',\n  '{arrow-down}': 'arrow-down',\n  '{cmd}': 'command',\n};\n\nexport const SHORTCUTS_ICON_SEPARATOR = {\n  '{plus}': 'plus',\n};\n\nexport const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ICON_ALIASES);\n","<!-- 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=\"sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <dt-icon\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        :name=\"icons[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 { DtIcon } from '@/components/icon';\nimport { SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from './keyboard_shortcut_constants';\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    DtIcon,\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      SHORTCUTS_ICON_ALIASES,\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };\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":["SHORTCUTS_ICON_ALIASES","SHORTCUTS_ICON_SEPARATOR","SHORTCUTS_ALIASES_LIST","_sfc_main","DtIcon","result","key","iconAliasString","regex","_createElementBlock","_normalizeClass","$props","_hoisted_1","_toDisplayString","_openBlock","_Fragment","_renderList","$options","item","i","_createBlock","_component_dt_icon"],"mappings":"kUAAY,MAACA,EAAyB,CACpC,QAAS,cACT,gBAAiB,cACjB,eAAgB,aAChB,aAAc,WACd,eAAgB,aAChB,QAAS,SACX,EAEaC,EAA2B,CACtC,SAAU,MACZ,EAEaC,EAAyB,OAAO,KAAKF,CAAsB,ECqCnEG,EAAU,CACb,KAAM,qBAEN,WAAY,CACV,OAAAC,EAAM,MACP,EAED,MAAO,CAKL,SAAU,CACR,KAAM,QACN,QAAS,EACV,EAMD,SAAU,CACR,KAAM,OACN,SAAU,EACX,EAKD,iBAAkB,CAChB,KAAM,OACN,QAAS,IACV,CACF,EAED,MAAQ,CACN,MAAO,CACL,uBAAAJ,EACA,UAAW,OAEd,EAED,SAAU,CACR,OAAS,CACP,MAAO,CAAE,GAAGA,EAAwB,GAAGC,EACxC,EAED,uBAAyB,CACvB,OAAO,KAAK,SAAS,QAAQ,KAAK,UAAW,QAAQ,CACtD,EAED,mBAAqB,CACnB,OAAO,OAAO,KAAKD,CAAsB,EAAE,OAAO,CAACK,EAAQC,IAClDD,EAAO,QAAQ,IAAI,OAAO,IAAMC,EAAM,IAAK,IAAI,EAAGN,EAAuBM,CAAG,CAAC,EACnF,KAAK,qBAAqB,CAC9B,EAGD,wBAA0B,CACxB,MAAMC,EAAkB,OAAO,KAAK,KAAK,KAAK,EAAE,KAAK,GAAG,EAOlDC,EAAQ,IAAI,OAAO,IAAID,CAAe,IAAK,IAAI,EACrD,OAAO,KAAK,kBAAkB,MAAMC,CAAK,EAAE,OAAO,OAAO,CAC1D,CACF,CACH,WA9GM,MAAM,8GARVC,EAqCM,mBAAA,MAAA,CApCH,MAAKC,EAAAA,eAAA,wDAA0EC,EAAQ,QAAA,MAMhFA,EAAgB,gCADxBF,EAKO,mBAAA,OALPG,EAKOC,EAAAA,gBADFF,EAAgB,gBAAA,EAAA,CAAA,gCAErBG,EAAAA,UAAA,EAAA,EAAAL,EAAA,mBAwBWM,WAvBW,KAAAC,EAAA,WAAAC,EAAA,uBAAZ,CAAAC,EAAMC,yDAGNF,EAAA,MAAMC,CAAI,iBADlBE,EAUE,YAAAC,EAAA,CARC,IAAG,GAAKF,CAAC,IAAID,CAAI,GACjB,KAAMD,EAAK,MAACC,CAAI,EACjB,KAAK,MACL,cAAY,OACX,MAAKR,EAAAA,eAAA,oEAA8FC,EAAQ,QAAA,8CAK9GF,EASE,mBAAA,OAAA,CAPC,IAAG,GAAKU,CAAC,IAAID,CAAI,GAClB,cAAY,OACX,MAAKR,EAAAA,eAAA,oEAA8FC,EAAQ,QAAA,IAI5G,UAAQO"}
+{"version":3,"file":"keyboard-shortcut.cjs","sources":["../../components/keyboard_shortcut/keyboard_shortcut_constants.js","../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["export const SHORTCUTS_ICON_ALIASES = {\n  '{win}': 'layout-grid',\n  '{arrow-right}': 'arrow-right',\n  '{arrow-left}': 'arrow-left',\n  '{arrow-up}': 'arrow-up',\n  '{arrow-down}': 'arrow-down',\n  '{cmd}': 'command',\n};\n\nexport const SHORTCUTS_ICON_SEPARATOR = {\n  '{plus}': 'plus',\n};\n\nexport const SHORTCUTS_ALIASES_LIST = Object.keys(SHORTCUTS_ICON_ALIASES);\n","<!-- 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=\"sr-only\"\n    >\n      {{ screenReaderText }}\n    </span>\n    <template\n      v-for=\"(item, i) in formattedShortcutSplit\"\n    >\n      <dt-icon\n        v-if=\"icons[item]\"\n        :key=\"`${i}-${item}`\"\n        :name=\"icons[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 { DtIcon } from '@/components/icon';\nimport { SHORTCUTS_ICON_ALIASES, SHORTCUTS_ICON_SEPARATOR } from './keyboard_shortcut_constants';\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    DtIcon,\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      SHORTCUTS_ICON_ALIASES,\n      separator: /\\+/gi,\n    };\n  },\n\n  computed: {\n    icons () {\n      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };\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":["DtIcon","_createElementBlock","_normalizeClass","_toDisplayString","_openBlock","_Fragment","_renderList","_createBlock"],"mappings":";;;;;;;;AAAY,MAAC,yBAAyB;AAAA,EACpC,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAEY,MAAC,2BAA2B;AAAA,EACtC,UAAU;AACZ;AAEY,MAAC,yBAAyB,OAAO,KAAK,sBAAsB;ACqCxE,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY;AAAA,IACV,QAAAA,SAAM;AAAA,EACP;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;AAAA,MACA,WAAW;AAAA;EAEd;AAAA,EAED,UAAU;AAAA,IACR,QAAS;AACP,aAAO,EAAE,GAAG,wBAAwB,GAAG;IACxC;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;;;EA9GM,OAAM;;;;;0BARVC,IAqCM,mBAAA,OAAA;AAAA,IApCH,OAAKC,IAAAA,eAAA;AAAA;yCAA0E,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,qCADxBD,IAKO,mBAAA,QALP,YAKOE,IAAAA,gBADF,OAAgB,gBAAA,GAAA,CAAA;KAErBC,IAAAA,UAAA,IAAA,GAAAH,IAAA,mBAwBWI,cAvBW,MAAAC,IAAA,WAAA,SAAA,wBAAZ,CAAA,MAAM,MAAC;;QAGP,SAAA,MAAM,IAAI,sBADlBC,IAUE,YAAA,oBAAA;AAAA,UARC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UACjB,MAAM,SAAK,MAAC,IAAI;AAAA,UACjB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAAKL,IAAAA,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;4DAK9GD,IASE,mBAAA,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAAKC,IAAAA,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA;;;;;;;;;;"}