@dialpad/dialtone 9.65.1 → 9.66.0

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

@@ -2,21 +2,21 @@ import { resolveComponent, openBlock, createElementBlock, mergeProps, toHandlers
 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-oA-_Gotg.js";
+import { DtDropdown } from "../chunks/dropdown-6HXkh24e.js";
 import { DtIcon } from "./icon.js";
 import "../common/utils.js";
 import "../common/constants.js";
 import "../chunks/link_constants-AfTWrr-n.js";
-import "../chunks/keyboard_list_navigation-ScXhrxya.js";
+import "../chunks/keyboard_list_navigation-YIqTuw1W.js";
 import "../chunks/dropdown_constants-w1MXGC3Z.js";
-import "../chunks/sr_only_close_button-3EdsV-dH.js";
+import "../chunks/sr_only_close_button-Ji3Zlts6.js";
 import "./popover.js";
-import "../chunks/popover_constants-WsOUIY-m.js";
+import "../chunks/popover_constants-6YkPPbnk.js";
 import "tippy.js";
-import "../chunks/modal-XOr4kiNZ.js";
+import "../chunks/modal-8X6poIZW.js";
 import "./lazy-show.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
 import "../chunks/list_item_constants-u1xcN9Dd.js";
 const IVR_NODE_PROMPT_MENU = "promptmenu";
@@ -144,7 +144,10 @@ const _sfc_main = {
       return IVR_NODE_ICON_TYPES[this.nodeType];
     },
     headerColor() {
-      const { normal, selected } = IVR_NODE_COLOR_MAPPING[this.nodeType];
+      const {
+        normal,
+        selected
+      } = IVR_NODE_COLOR_MAPPING[this.nodeType];
       return this.isSelected ? selected : normal;
     },
     isGotoNode() {
@@ -157,99 +160,87 @@ const _sfc_main = {
     }
   }
 };
-const _hoisted_1 = { class: "ivr_node__header-left" };
+const _hoisted_1 = {
+  class: "ivr_node__header-left"
+};
 const _hoisted_2 = {
   class: "ivr_node__label",
   "data-qa": "ivr-node-label"
 };
-const _hoisted_3 = { class: "ivr_node__dropdown-list" };
+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: 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: 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": $props.isSelected },
-        $options.headerColor
-      ],
-      "header-class": [
-        "d-mtn1",
-        "d-bt",
-        "d-btw4",
-        "d-p0",
-        $options.headerColor,
-        { "d-btr4": !$props.isSelected }
-      ]
+  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: 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: 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": $props.isSelected
+    }, $options.headerColor],
+    "header-class": ["d-mtn1", "d-bt", "d-btw4", "d-p0", $options.headerColor, {
+      "d-btr4": !$props.isSelected
+    }]
+  }, {
+    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: withCtx(() => [createVNode(_component_dt_icon, {
+        name: $options.nodeIcon,
+        size: "200",
+        class: normalizeClass(["", {
+          "ivr_node__goto_icon": $options.isGotoNode
+        }])
+      }, null, 8, ["name", "class"])]),
+      _: 1
+    }, 8, ["aria-label"]), createElementVNode("p", _hoisted_2, toDisplayString($props.nodeLabel), 1)]), createVNode(_component_dt_dropdown, {
+      open: $data.isOpen,
+      "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $data.isOpen = $event),
+      placement: "bottom"
     }, {
-      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: withCtx(() => [
-              createVNode(_component_dt_icon, {
-                name: $options.nodeIcon,
-                size: "200",
-                class: normalizeClass(["", { "ivr_node__goto_icon": $options.isGotoNode }])
-              }, null, 8, ["name", "class"])
-            ]),
-            _: 1
-          }, 8, ["aria-label"]),
-          createElementVNode("p", _hoisted_2, toDisplayString($props.nodeLabel), 1)
-        ]),
-        createVNode(_component_dt_dropdown, {
-          open: $data.isOpen,
-          "onUpdate:open": _cache[0] || (_cache[0] = ($event) => $data.isOpen = $event),
-          placement: "bottom"
-        }, {
-          anchor: withCtx(() => [
-            createVNode(_component_dt_button, {
-              importance: "clear",
-              kind: "muted",
-              "aria-label": $props.menuButtonAriaLabel,
-              onClick: withModifiers($options.openMenu, ["stop", "prevent"])
-            }, {
-              icon: withCtx(() => [
-                createVNode(_component_dt_icon, {
-                  name: "more-vertical",
-                  size: "200"
-                })
-              ]),
-              _: 1
-            }, 8, ["aria-label", "onClick"])
-          ]),
-          list: withCtx(({ close }) => [
-            createElementVNode("div", _hoisted_3, [
-              renderSlot(_ctx.$slots, "menuItems", { close })
-            ])
-          ]),
-          _: 3
-        }, 8, ["open"])
-      ]),
-      content: withCtx(() => [
-        renderSlot(_ctx.$slots, "content")
-      ]),
+      anchor: withCtx(() => [createVNode(_component_dt_button, {
+        importance: "clear",
+        kind: "muted",
+        "aria-label": $props.menuButtonAriaLabel,
+        onClick: withModifiers($options.openMenu, ["stop", "prevent"])
+      }, {
+        icon: withCtx(() => [createVNode(_component_dt_icon, {
+          name: "more-vertical",
+          size: "200"
+        })]),
+        _: 1
+      }, 8, ["aria-label", "onClick"])]),
+      list: withCtx(({
+        close
+      }) => [createElementVNode("div", _hoisted_3, [renderSlot(_ctx.$slots, "menuItems", {
+        close
+      })])]),
       _: 3
-    }, 8, ["container-class", "header-class"])
-  ], 16);
+    }, 8, ["open"])]),
+    content: withCtx(() => [renderSlot(_ctx.$slots, "content")]),
+    _: 3
+  }, 8, ["container-class", "header-class"])], 16);
 }
 const ivr_node = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/vue3/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';\nexport const IVR_NODE_ASSIGN = 'assign';\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_ASSIGN]: 'chevrons-right',\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  [IVR_NODE_ASSIGN]: 'Assign',\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_ASSIGN]: 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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"}
+{"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';\nexport const IVR_NODE_ASSIGN = 'assign';\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_ASSIGN]: 'chevrons-right',\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  [IVR_NODE_ASSIGN]: 'Assign',\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_ASSIGN]: 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_ASSIGN","IVR_NODE_ICON_TYPES","IVR_NODE_LABELS","IVR_NODE_COLORS","PROMPT","normal","selected","LOGIC","TERMINAL","IVR_NODE_COLOR_MAPPING","_sfc_main","name","components","DtCard","DtButton","DtDropdown","DtIcon","props","nodeType","type","String","required","nodeLabel","isSelected","Boolean","default","menuButtonAriaLabel","dtmfKey","emits","data","isOpen","computed","nodeListeners","click","e","$emit","nodeIcon","headerColor","isGotoNode","methods","openMenu","_hoisted_1","class","_hoisted_3","_createElementBlock","_mergeProps","_toHandlers","$options","$props","_normalizeClass","_ctx","$slots","connector","_renderSlot","key","_createVNode","_component_dt_card","header","_createElementVNode","_component_dt_button","importance","kind","icon","_component_dt_icon","size","_hoisted_2","_toDisplayString","_component_dt_dropdown","open","$data","$event","placement","anchor","onClick","list","_withCtx","close","content"],"mappings":"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"}

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

@@ -4,7 +4,7 @@ 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("../chunks/icon_constants-bvhFNOPu.js");
 require("@dialpad/dialtone-icons/icons.json");
 const SHORTCUTS_ICON_ALIASES = {
   "{win}": "layout-grid",
@@ -56,7 +56,10 @@ const _sfc_main = {
   },
   computed: {
     icons() {
-      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };
+      return {
+        ...SHORTCUTS_ICON_ALIASES,
+        ...SHORTCUTS_ICON_SEPARATOR
+      };
     },
     shortcutWithSeparator() {
       return this.shortcut.replace(this.separator, "{plus}");
@@ -82,35 +85,27 @@ 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);
+    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;

package/dist/vue3/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=\"d-keyboard-shortcut--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;;;;;;;;;;"}
+{"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=\"d-keyboard-shortcut--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","Object","keys","_sfc_main","name","components","DtIcon","props","inverted","type","Boolean","default","shortcut","String","required","screenReaderText","data","separator","computed","icons","shortcutWithSeparator","replace","formattedShortcut","reduce","result","key","RegExp","formattedShortcutSplit","iconAliasString","join","regex","split","filter","class","_createElementBlock","_normalizeClass","$props","_hoisted_1","_toDisplayString","_openBlock","_Fragment","_renderList","$options","item","i","_createBlock","_component_dt_icon","size","innerHTML"],"mappings":";;;;;;;;AAAO,MAAMA,yBAAyB;AAAA,EACpC,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAEO,MAAMC,2BAA2B;AAAA,EACtC,UAAU;AACZ;AAEO,MAAMC,yBAAyBC,OAAOC,KAAKJ,sBAAsB;ACqCxE,MAAKK,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,YAAY;AAAA,IACVC,QAAAA,SAAAA;AAAAA,EACD;AAAA,EAEDC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKLC,UAAU;AAAA,MACRC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDC,UAAU;AAAA,MACRH,MAAMI;AAAAA,MACNC,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKDC,kBAAkB;AAAA,MAChBN,MAAMI;AAAAA,MACNF,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDK,OAAQ;AACN,WAAO;AAAA,MACLlB;AAAAA,MACAmB,WAAW;AAAA;EAEd;AAAA,EAEDC,UAAU;AAAA,IACRC,QAAS;AACP,aAAO;AAAA,QAAE,GAAGrB;AAAAA,QAAwB,GAAGC;AAAAA;IACxC;AAAA,IAEDqB,wBAAyB;AACvB,aAAO,KAAKR,SAASS,QAAQ,KAAKJ,WAAW,QAAQ;AAAA,IACtD;AAAA,IAEDK,oBAAqB;AACnB,aAAOrB,OAAOC,KAAKJ,sBAAsB,EAAEyB,OAAO,CAACC,QAAQC,QAAQ;AACjE,eAAOD,OAAOH,QAAQ,IAAIK,OAAO,MAAMD,MAAM,KAAK,IAAI,GAAG3B,uBAAuB2B,GAAG,CAAC;AAAA,MACtF,GAAG,KAAKL,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGDO,yBAA0B;AACxB,YAAMC,kBAAkB3B,OAAOC,KAAK,KAAKiB,KAAK,EAAEU,KAAK,GAAG;AAOxD,YAAMC,QAAQ,IAAIJ,OAAO,IAAIE,eAAe,KAAK,IAAI;AACrD,aAAO,KAAKN,kBAAkBS,MAAMD,KAAK,EAAEE,OAAOtB,OAAO;AAAA,IAC3D;AAAA,EACF;AACF;;;EA9GMuB,OAAM;;;;;0BARVC,IAqCM,mBAAA,OAAA;AAAA,IApCHD,OAAKE,IAAAA,eAAA;uCAA0EC,OAAQ5B;AAAAA,IAAA,CAAA;MAMhF4B,OAAgBrB,qCADxBmB,IAAAA,mBAKO,QALPG,YAKOC,IAAA,gBADFF,OAAgBrB,gBAAA,GAAA,CAAA,wCAErBwB,IAAAA,UAAA,IAAA,GAAAL,IAAAA,mBAwBWM,IAAAA,UAvBW,MAAAC,IAAA,WAAAC,SAAAf,wBAAZ,CAAAgB,MAAMC,MAAC;wEAGPF,SAAAvB,MAAMwB,IAAI,sBADlBE,IAAAA,YAUEC,oBAAA;AAAA,MARCrB,KAAG,GAAKmB,CAAC,IAAID,IAAI;AAAA,MACjBvC,MAAMsC,SAAKvB,MAACwB,IAAI;AAAA,MACjBI,MAAK;AAAA,MACL,eAAY;AAAA,MACXd,OAAKE,IAAAA,eAAA;+CAA8FC,OAAQ5B;AAAAA,MAAA,CAAA;wDAK9G0B,IASE,mBAAA,QAAA;AAAA,MAPCT,KAAG,GAAKmB,CAAC,IAAID,IAAI;AAAA,MAClB,eAAY;AAAA,MACXV,OAAKE,IAAAA,eAAA;+CAA8FC,OAAQ5B;AAAAA,MAAA,CAAA;MAI5GwC,WAAQL;AAAAA;;;;;;;;"}

package/dist/vue3/lib/keyboard-shortcut.js

@@ -2,7 +2,7 @@ import { resolveComponent, openBlock, createElementBlock, normalizeClass, toDisp
 import { _export_sfc } from "../chunks/_plugin-vue_export-helper-caHeSgYY.js";
 import { DtIcon } from "./icon.js";
 import "@dialpad/dialtone-icons/vue3";
-import "../chunks/icon_constants-Dy4MEUJL.js";
+import "../chunks/icon_constants-gIQj4mf7.js";
 import "@dialpad/dialtone-icons/icons.json";
 const SHORTCUTS_ICON_ALIASES = {
   "{win}": "layout-grid",
@@ -54,7 +54,10 @@ const _sfc_main = {
   },
   computed: {
     icons() {
-      return { ...SHORTCUTS_ICON_ALIASES, ...SHORTCUTS_ICON_SEPARATOR };
+      return {
+        ...SHORTCUTS_ICON_ALIASES,
+        ...SHORTCUTS_ICON_SEPARATOR
+      };
     },
     shortcutWithSeparator() {
       return this.shortcut.replace(this.separator, "{plus}");
@@ -80,35 +83,27 @@ const _hoisted_2 = ["innerHTML"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_dt_icon = resolveComponent("dt-icon");
   return openBlock(), createElementBlock("kbd", {
-    class: normalizeClass([
-      "d-keyboard-shortcut",
-      { "d-keyboard-shortcut--inverted": $props.inverted }
-    ])
-  }, [
-    $props.screenReaderText ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString($props.screenReaderText), 1)) : createCommentVNode("", true),
-    (openBlock(true), createElementBlock(Fragment, null, renderList($options.formattedShortcutSplit, (item, i) => {
-      return openBlock(), createElementBlock(Fragment, null, [
-        $options.icons[item] ? (openBlock(), createBlock(_component_dt_icon, {
-          key: `${i}-${item}`,
-          name: $options.icons[item],
-          size: "100",
-          "aria-hidden": "true",
-          class: normalizeClass([
-            "d-keyboard-shortcut__icon",
-            { "d-keyboard-shortcut__icon--inverted": $props.inverted }
-          ])
-        }, null, 8, ["name", "class"])) : (openBlock(), createElementBlock("span", {
-          key: `${i}-${item}`,
-          "aria-hidden": "true",
-          class: normalizeClass([
-            "d-keyboard-shortcut__item",
-            { "d-keyboard-shortcut__item--inverted": $props.inverted }
-          ]),
-          innerHTML: item
-        }, null, 10, _hoisted_2))
-      ], 64);
-    }), 256))
-  ], 2);
+    class: normalizeClass(["d-keyboard-shortcut", {
+      "d-keyboard-shortcut--inverted": $props.inverted
+    }])
+  }, [$props.screenReaderText ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString($props.screenReaderText), 1)) : createCommentVNode("", true), (openBlock(true), createElementBlock(Fragment, null, renderList($options.formattedShortcutSplit, (item, i) => {
+    return openBlock(), createElementBlock(Fragment, null, [$options.icons[item] ? (openBlock(), createBlock(_component_dt_icon, {
+      key: `${i}-${item}`,
+      name: $options.icons[item],
+      size: "100",
+      "aria-hidden": "true",
+      class: normalizeClass(["d-keyboard-shortcut__icon", {
+        "d-keyboard-shortcut__icon--inverted": $props.inverted
+      }])
+    }, null, 8, ["name", "class"])) : (openBlock(), createElementBlock("span", {
+      key: `${i}-${item}`,
+      "aria-hidden": "true",
+      class: 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__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {

package/dist/vue3/lib/keyboard-shortcut.js.map

@@ -1 +1 @@
-{"version":3,"file":"keyboard-shortcut.js","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=\"d-keyboard-shortcut--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":["_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;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;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;;;;;sBARVA,mBAqCM,OAAA;AAAA,IApCH,OAAKC,eAAA;AAAA;yCAA0E,OAAQ,SAAA;AAAA;;IAMhF,OAAgB,iCADxBD,mBAKO,QALP,YAKOE,gBADF,OAAgB,gBAAA,GAAA,CAAA;KAErBC,UAAA,IAAA,GAAAH,mBAwBWI,UAvBW,MAAAC,WAAA,SAAA,wBAAZ,CAAA,MAAM,MAAC;;QAGP,SAAA,MAAM,IAAI,kBADlBC,YAUE,oBAAA;AAAA,UARC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UACjB,MAAM,SAAK,MAAC,IAAI;AAAA,UACjB,MAAK;AAAA,UACL,eAAY;AAAA,UACX,OAAKL,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;wDAK9GD,mBASE,QAAA;AAAA,UAPC,KAAG,GAAK,CAAC,IAAI,IAAI;AAAA,UAClB,eAAY;AAAA,UACX,OAAKC,eAAA;AAAA;qDAA8F,OAAQ,SAAA;AAAA;UAI5G,WAAQ;AAAA;;;;;;"}
+{"version":3,"file":"keyboard-shortcut.js","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=\"d-keyboard-shortcut--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","Object","keys","_sfc_main","name","components","DtIcon","props","inverted","type","Boolean","default","shortcut","String","required","screenReaderText","data","separator","computed","icons","shortcutWithSeparator","replace","formattedShortcut","reduce","result","key","RegExp","formattedShortcutSplit","iconAliasString","join","regex","split","filter","class","_createElementBlock","_normalizeClass","$props","_hoisted_1","_toDisplayString","_openBlock","_Fragment","_renderList","$options","item","i","_createBlock","_component_dt_icon","size","innerHTML"],"mappings":";;;;;;AAAO,MAAMA,yBAAyB;AAAA,EACpC,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX;AAEO,MAAMC,2BAA2B;AAAA,EACtC,UAAU;AACZ;AAEO,MAAMC,yBAAyBC,OAAOC,KAAKJ,sBAAsB;ACqCxE,MAAKK,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,YAAY;AAAA,IACVC;AAAAA,EACD;AAAA,EAEDC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKLC,UAAU;AAAA,MACRC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDC,UAAU;AAAA,MACRH,MAAMI;AAAAA,MACNC,UAAU;AAAA,IACX;AAAA;AAAA;AAAA;AAAA,IAKDC,kBAAkB;AAAA,MAChBN,MAAMI;AAAAA,MACNF,SAAS;AAAA,IACX;AAAA,EACD;AAAA,EAEDK,OAAQ;AACN,WAAO;AAAA,MACLlB;AAAAA,MACAmB,WAAW;AAAA;EAEd;AAAA,EAEDC,UAAU;AAAA,IACRC,QAAS;AACP,aAAO;AAAA,QAAE,GAAGrB;AAAAA,QAAwB,GAAGC;AAAAA;IACxC;AAAA,IAEDqB,wBAAyB;AACvB,aAAO,KAAKR,SAASS,QAAQ,KAAKJ,WAAW,QAAQ;AAAA,IACtD;AAAA,IAEDK,oBAAqB;AACnB,aAAOrB,OAAOC,KAAKJ,sBAAsB,EAAEyB,OAAO,CAACC,QAAQC,QAAQ;AACjE,eAAOD,OAAOH,QAAQ,IAAIK,OAAO,MAAMD,MAAM,KAAK,IAAI,GAAG3B,uBAAuB2B,GAAG,CAAC;AAAA,MACtF,GAAG,KAAKL,qBAAqB;AAAA,IAC9B;AAAA;AAAA,IAGDO,yBAA0B;AACxB,YAAMC,kBAAkB3B,OAAOC,KAAK,KAAKiB,KAAK,EAAEU,KAAK,GAAG;AAOxD,YAAMC,QAAQ,IAAIJ,OAAO,IAAIE,eAAe,KAAK,IAAI;AACrD,aAAO,KAAKN,kBAAkBS,MAAMD,KAAK,EAAEE,OAAOtB,OAAO;AAAA,IAC3D;AAAA,EACF;AACF;;;EA9GMuB,OAAM;;;;;sBARVC,mBAqCM,OAAA;AAAA,IApCHD,OAAKE,eAAA;uCAA0EC,OAAQ5B;AAAAA,IAAA,CAAA;MAMhF4B,OAAgBrB,iCADxBmB,mBAKO,QALPG,YAKOC,gBADFF,OAAgBrB,gBAAA,GAAA,CAAA,oCAErBwB,UAAA,IAAA,GAAAL,mBAwBWM,UAvBW,MAAAC,WAAAC,SAAAf,wBAAZ,CAAAgB,MAAMC,MAAC;4DAGPF,SAAAvB,MAAMwB,IAAI,kBADlBE,YAUEC,oBAAA;AAAA,MARCrB,KAAG,GAAKmB,CAAC,IAAID,IAAI;AAAA,MACjBvC,MAAMsC,SAAKvB,MAACwB,IAAI;AAAA,MACjBI,MAAK;AAAA,MACL,eAAY;AAAA,MACXd,OAAKE,eAAA;+CAA8FC,OAAQ5B;AAAAA,MAAA,CAAA;oDAK9G0B,mBASE,QAAA;AAAA,MAPCT,KAAG,GAAKmB,CAAC,IAAID,IAAI;AAAA,MAClB,eAAY;AAAA,MACXV,OAAKE,eAAA;+CAA8FC,OAAQ5B;AAAAA,MAAA,CAAA;MAI5GwC,WAAQL;AAAAA;;;;"}

package/dist/vue3/lib/lazy-show.cjs

@@ -67,14 +67,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return vue.openBlock(), vue.createBlock(vue.Transition, vue.mergeProps({
     name: $props.transition,
     appear: $props.appear
-  }, _ctx.$attrs, { css: $options.isCSSEnabled }), {
-    default: vue.withCtx(() => [
-      vue.withDirectives(vue.createElementVNode("div", vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), [
-        $data.initialized ? vue.renderSlot(_ctx.$slots, "default", { key: 0 }) : vue.createCommentVNode("", true)
-      ], 16), [
-        [vue.vShow, $props.show]
-      ])
-    ]),
+  }, _ctx.$attrs, {
+    css: $options.isCSSEnabled
+  }), {
+    default: vue.withCtx(() => [vue.withDirectives(vue.createElementVNode("div", vue.normalizeProps(vue.guardReactiveProps(_ctx.$attrs)), [$data.initialized ? vue.renderSlot(_ctx.$slots, "default", {
+      key: 0
+    }) : vue.createCommentVNode("", true)], 16), [[vue.vShow, $props.show]])]),
     _: 3
   }, 16, ["name", "appear", "css"]);
 }

package/dist/vue3/lib/lazy-show.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-show.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","_withDirectives","_createElementVNode","_renderSlot"],"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;AAAa;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,yBAElB,MAMM;AAAA,MANNC,IAAA,eAAAC,IAAA,mBAMM,iDAJI,KAAM,MAAA,CAAA,GAAA;AAAA,QAGF,MAAW,cAAvBC,IAA2B,WAAA,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA;;oBAJnB,OAAI,IAAA;AAAA;;;;;;;"}
+{"version":3,"file":"lazy-show.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":["_sfc_main","name","inheritAttrs","props","show","type","Boolean","default","transition","String","appear","data","initialized","computed","isCSSEnabled","process","env","NODE_ENV","watch","newValue","_openBlock","_createBlock","_Transition","_mergeProps","$props","_ctx","$attrs","css","$options","_withDirectives","_createElementVNode","$data","_renderSlot","$slots","key"],"mappings":";;;;AAsBA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,cAAc;AAAA;AAAA;AAAA;AAAA,EAKdC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKLC,MAAM;AAAA,MACJC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDC,YAAY;AAAA,MACVH,MAAMI;AAAAA,MACNF,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDG,QAAQ;AAAA,MACNL,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACX;AAAA,EACD;AAAA;AAAA;AAAA;AAAA,EAKDI,OAAQ;AACN,WAAO;AAAA,MACLC,aAAa,CAAC,CAAC,KAAKR;AAAAA;EAEvB;AAAA,EAEDS,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAORC,eAAgB;AACd,aAAOC,QAAQC,IAAIC,aAAa;AAAA,IAClC;AAAA,EACD;AAAA;AAAA;AAAA;AAAA,EAKDC,OAAO;AAAA,IACLd,MAAM,SAAUe,UAAU;AACxB,UAAI,CAACA,YAAY,KAAKP;AAAa;AAEnC,WAAKA,cAAc;AAAA,IACrB;AAAA,EACF;AACF;;AAxFE,SAAAQ,cAAA,GAAAC,gBAaaC,IAAAA,YAbbC,IAAAA,WAaa;AAAA,IAZVtB,MAAMuB,OAAUhB;AAAAA,IAChBE,QAAQc,OAAMd;AAAAA,KACPe,KAAMC,QAAA;AAAA,IACbC,KAAKC,SAAYd;AAAAA,EAAA,CAAA,GAAA;AAAA,yBAElB,MAMM,CANNe,IAAAA,eAAAC,IAAAA,mBAMM,iDAJIL,KAAMC,MAAA,CAAA,GAAA,CAGFK,MAAWnB,cAAvBoB,IAAAA,WAA2BP,KAAAQ,QAAA,WAAA;AAAA,MAAAC,KAAA;AAAA,IAAA,CAAA,yDAJnBV,OAAIpB,IAAA,CAAA;;;;;;"}

package/dist/vue3/lib/lazy-show.js

@@ -65,14 +65,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createBlock(Transition, mergeProps({
     name: $props.transition,
     appear: $props.appear
-  }, _ctx.$attrs, { css: $options.isCSSEnabled }), {
-    default: withCtx(() => [
-      withDirectives(createElementVNode("div", normalizeProps(guardReactiveProps(_ctx.$attrs)), [
-        $data.initialized ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
-      ], 16), [
-        [vShow, $props.show]
-      ])
-    ]),
+  }, _ctx.$attrs, {
+    css: $options.isCSSEnabled
+  }), {
+    default: withCtx(() => [withDirectives(createElementVNode("div", normalizeProps(guardReactiveProps(_ctx.$attrs)), [$data.initialized ? renderSlot(_ctx.$slots, "default", {
+      key: 0
+    }) : createCommentVNode("", true)], 16), [[vShow, $props.show]])]),
     _: 3
   }, 16, ["name", "appear", "css"]);
 }

package/dist/vue3/lib/lazy-show.js.map

@@ -1 +1 @@
-{"version":3,"file":"lazy-show.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","_withDirectives","_createElementVNode","_renderSlot"],"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;AAAa;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,qBAElB,MAMM;AAAA,MANNC,eAAAC,mBAMM,yCAJI,KAAM,MAAA,CAAA,GAAA;AAAA,QAGF,MAAW,cAAvBC,WAA2B,KAAA,QAAA,WAAA,EAAA,KAAA,GAAA;;gBAJnB,OAAI,IAAA;AAAA;;;;;;"}
+{"version":3,"file":"lazy-show.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":["_sfc_main","name","inheritAttrs","props","show","type","Boolean","default","transition","String","appear","data","initialized","computed","isCSSEnabled","process","env","NODE_ENV","watch","newValue","_openBlock","_createBlock","_Transition","_mergeProps","$props","_ctx","$attrs","css","$options","_withDirectives","_createElementVNode","$data","_renderSlot","$slots","key"],"mappings":";;AAsBA,MAAKA,YAAU;AAAA,EACbC,MAAM;AAAA,EAENC,cAAc;AAAA;AAAA;AAAA;AAAA,EAKdC,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKLC,MAAM;AAAA,MACJC,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKDC,YAAY;AAAA,MACVH,MAAMI;AAAAA,MACNF,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMDG,QAAQ;AAAA,MACNL,MAAMC;AAAAA,MACNC,SAAS;AAAA,IACX;AAAA,EACD;AAAA;AAAA;AAAA;AAAA,EAKDI,OAAQ;AACN,WAAO;AAAA,MACLC,aAAa,CAAC,CAAC,KAAKR;AAAAA;EAEvB;AAAA,EAEDS,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAORC,eAAgB;AACd,aAAOC,QAAQC,IAAIC,aAAa;AAAA,IAClC;AAAA,EACD;AAAA;AAAA;AAAA;AAAA,EAKDC,OAAO;AAAA,IACLd,MAAM,SAAUe,UAAU;AACxB,UAAI,CAACA,YAAY,KAAKP;AAAa;AAEnC,WAAKA,cAAc;AAAA,IACrB;AAAA,EACF;AACF;;AAxFE,SAAAQ,UAAA,GAAAC,YAaaC,YAbbC,WAaa;AAAA,IAZVtB,MAAMuB,OAAUhB;AAAAA,IAChBE,QAAQc,OAAMd;AAAAA,KACPe,KAAMC,QAAA;AAAA,IACbC,KAAKC,SAAYd;AAAAA,EAAA,CAAA,GAAA;AAAA,qBAElB,MAMM,CANNe,eAAAC,mBAMM,yCAJIL,KAAMC,MAAA,CAAA,GAAA,CAGFK,MAAWnB,cAAvBoB,WAA2BP,KAAAQ,QAAA,WAAA;AAAA,MAAAC,KAAA;AAAA,IAAA,CAAA,iDAJnBV,OAAIpB,IAAA,CAAA;;;;;"}