@dialpad/dialtone-vue 2.124.0 → 2.125.1-alpha.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"item-layout.js","sources":["../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'dt-item-layout--custom' : 'dt-item-layout'\"\n  >\n    <section\n      v-if=\"$slots.left\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      class=\"dt-item-layout--left\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      class=\"dt-item-layout--content\"\n    >\n      <div\n        v-if=\"$slots.default\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        class=\"dt-item-layout--title\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"$slots.subtitle\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"['dt-item-layout--subtitle', { 'dt-item-layout--subtitle--with-title': $slots.default }]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"$slots.bottom\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        class=\"dt-item-layout--bottom\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"$slots.right\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      class=\"dt-item-layout--right\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"$slots.selected\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      class=\"dt-item-layout--selected\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main"],"mappings":";AAmEA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/lib/ivr-node.js

@@ -0,0 +1,195 @@
+import { n as _ } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtCard as m } from "./card.js";
+import { DtButton as f } from "./button.js";
+import { D as O } from "../chunks/dropdown-SMWaTWyF.js";
+import { DtIcon as b } from "./icon.js";
+import "vue";
+import "../chunks/link_constants-vIUB92L4.js";
+import "../chunks/keyboard_list_navigation-F0O8nht0.js";
+import "../chunks/dropdown_constants-EUcDxBrX.js";
+import "./utils.js";
+import "./constants.js";
+import "../chunks/sr_only_close_button-JGole5Xi.js";
+import "./popover.js";
+import "../chunks/popover_constants-qjlEkroB.js";
+import "tippy.js";
+import "@linusborg/vue-simple-portal";
+import "../chunks/modal-VuMFkZFH.js";
+import "./lazy-show.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+import "../chunks/list_item_constants-LTUc74pD.js";
+const c = "promptmenu", s = "promptcollect", a = "promptplay", d = "gotoexpert", r = "goto", i = "branch", l = "transfer", p = "hangup", R = {
+  [c]: "keypad",
+  [s]: "dialer",
+  [a]: "volume-2",
+  [d]: "expert-node",
+  [i]: "branch",
+  [r]: "call-merge",
+  [l]: "transfer",
+  [p]: "phone-hang-up"
+}, $ = {
+  [c]: "Menu",
+  [s]: "Collect",
+  [a]: "Play",
+  [d]: "Expert",
+  [i]: "Branch",
+  [r]: "Go-to",
+  [l]: "Transfer",
+  [p]: "Hangup"
+}, o = {
+  PROMPT: {
+    normal: "d-bc-blue-200",
+    selected: "d-bc-blue-300"
+  },
+  LOGIC: {
+    normal: "d-bc-purple-200",
+    selected: "d-bc-purple-400"
+  },
+  TERMINAL: {
+    normal: "d-bc-red-100",
+    selected: "d-bc-red-200"
+  }
+}, v = {
+  [c]: o.PROMPT,
+  [s]: o.PROMPT,
+  [a]: o.PROMPT,
+  [d]: o.LOGIC,
+  [i]: o.LOGIC,
+  [r]: o.LOGIC,
+  [l]: o.TERMINAL,
+  [p]: o.TERMINAL
+}, y = {
+  name: "DtRecipeIvrNode",
+  components: {
+    DtCard: m,
+    DtButton: f,
+    DtDropdown: O,
+    DtIcon: b
+  },
+  props: {
+    /**
+     * type of IVR Node.
+     */
+    nodeType: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Descriptive label for the node name.
+     */
+    nodeLabel: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Selected state of the node
+     */
+    isSelected: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Translated aria-label for header menu button
+     */
+    menuButtonAriaLabel: {
+      type: String,
+      required: !0
+    },
+    /**
+     * DTMF input
+     */
+    dtmfKey: {
+      type: String,
+      default: null
+    }
+  },
+  emits: [
+    /**
+     * Add node click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click"
+  ],
+  data() {
+    return {
+      isOpen: !1
+    };
+  },
+  computed: {
+    nodeIcon() {
+      return R[this.nodeType];
+    },
+    headerColor() {
+      const { normal: u, selected: t } = v[this.nodeType];
+      return this.isSelected ? t : u;
+    },
+    isGotoNode() {
+      return this.nodeType === r;
+    }
+  },
+  methods: {
+    openMenu() {
+      this.isOpen = !0;
+    }
+  }
+};
+var I = function() {
+  var t = this, e = t._self._c;
+  return e("div", t._g({ staticClass: "ivr_node" }, t.$listeners), [t.dtmfKey ? e("div", { staticClass: "ivr-connector ivr-connector--dtmf", class: { "ivr-connector--dtmf--selected": t.isSelected }, attrs: { "data-qa": "dt-top-connector-dtmf" } }, [t._v(" " + t._s(t.dtmfKey) + " ")]) : t._e(), t.$slots.connector ? t._t("connector") : t._e(), !t.dtmfKey && !t.$slots.connector ? e("div", { staticClass: "ivr-connector", class: { "ivr-connector--selected": t.isSelected }, attrs: { "data-qa": "dt-top-connector" } }) : t._e(), e("dt-card", { attrs: { "content-class": "d-bt d-bc-black-300 d-px12 d-pt8 d-pb12", "container-class": [
+    "d-w100p",
+    { "d-ba d-bar8 d-baw4": t.isSelected },
+    t.headerColor
+  ], "header-class": [
+    "d-mtn1",
+    "d-bt",
+    "d-btw4",
+    "d-p0",
+    t.headerColor,
+    { "d-btr4": !t.isSelected }
+  ] }, scopedSlots: t._u([{ key: "header", fn: function() {
+    return [e("div", { staticClass: "ivr_node__header-left" }, [e("dt-button", { attrs: { "aria-label": t.nodeType, importance: "clear", kind: "muted", "data-qa": "dt-ivr-node-icon" }, scopedSlots: t._u([{ key: "icon", fn: function() {
+      return [e("dt-icon", { class: ["", { ivr_node__goto_icon: t.isGotoNode }], attrs: { name: t.nodeIcon, size: "200" } })];
+    }, proxy: !0 }]) }), e("p", { staticClass: "ivr_node__label", attrs: { "data-qa": "ivr-node-label" } }, [t._v(" " + t._s(t.nodeLabel) + " ")])], 1), e("dt-dropdown", { attrs: { placement: "bottom", open: t.isOpen }, on: { "update:open": function(n) {
+      t.isOpen = n;
+    } }, scopedSlots: t._u([{ key: "anchor", fn: function() {
+      return [e("dt-button", { attrs: { importance: "clear", kind: "muted", "aria-label": t.menuButtonAriaLabel }, on: { click: function(n) {
+        return n.stopPropagation(), n.preventDefault(), t.openMenu.apply(null, arguments);
+      } }, scopedSlots: t._u([{ key: "icon", fn: function() {
+        return [e("dt-icon", { attrs: { name: "more-vertical", size: "200" } })];
+      }, proxy: !0 }]) })];
+    }, proxy: !0 }, { key: "list", fn: function({ close: n }) {
+      return [e("div", { staticClass: "ivr_node__dropdown-list" }, [t._t("menuItems", null, { close: n })], 2)];
+    } }], null, !0) })];
+  }, proxy: !0 }, { key: "content", fn: function() {
+    return [t._t("content")];
+  }, proxy: !0 }], null, !0) })], 2);
+}, N = [], E = /* @__PURE__ */ _(
+  y,
+  I,
+  N,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const X = E.exports;
+export {
+  X as DtRecipeIvrNode,
+  i as IVR_NODE_BRANCH,
+  d as IVR_NODE_EXPERT,
+  r as IVR_NODE_GO_TO,
+  p as IVR_NODE_HANGUP,
+  R as IVR_NODE_ICON_TYPES,
+  $ as IVR_NODE_LABELS,
+  s as IVR_NODE_PROMPT_COLLECT,
+  c as IVR_NODE_PROMPT_MENU,
+  a as IVR_NODE_PROMPT_PLAY,
+  l as IVR_NODE_TRANSFER
+};
+//# sourceMappingURL=ivr-node.js.map

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

@@ -0,0 +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=\"$listeners\"\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          placement=\"bottom\"\n          :open.sync=\"isOpen\"\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    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","normal","selected"],"mappings":"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"}

package/dist/lib/keyboard-shortcut.js

@@ -0,0 +1,100 @@
+import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import { DtIcon as c } from "./icon.js";
+import "@dialpad/dialtone-icons/vue2";
+import "../chunks/icon_constants-OpYAAKwF.js";
+import "@dialpad/dialtone-icons/icons.json";
+import "./skeleton.js";
+const e = {
+  "{win}": "layout-grid",
+  "{arrow-right}": "arrow-right",
+  "{arrow-left}": "arrow-left",
+  "{arrow-up}": "arrow-up",
+  "{arrow-down}": "arrow-down",
+  "{cmd}": "command"
+}, i = {
+  "{plus}": "plus"
+}, b = Object.keys(e), d = {
+  name: "DtKeyboardShortcut",
+  components: {
+    DtIcon: c
+  },
+  props: {
+    /**
+     * If true, applies inverted styles.
+     * @values true, false
+     */
+    inverted: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * 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: !0
+    },
+    /**
+     * 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: e,
+      separator: /\+/gi
+    };
+  },
+  computed: {
+    icons() {
+      return { ...e, ...i };
+    },
+    shortcutWithSeparator() {
+      return this.shortcut.replace(this.separator, "{plus}");
+    },
+    formattedShortcut() {
+      return Object.keys(e).reduce((o, r) => o.replace(new RegExp("{" + r + "}", "gi"), e[r]), this.shortcutWithSeparator);
+    },
+    // Splits any icon based aliases into their own array items.
+    formattedShortcutSplit() {
+      const o = Object.keys(this.icons).join("|"), r = new RegExp(`(${o})`, "gi");
+      return this.formattedShortcut.split(r).filter(Boolean);
+    }
+  }
+};
+var u = function() {
+  var r = this, n = r._self._c;
+  return n("kbd", { class: [
+    "d-keyboard-shortcut",
+    { "d-keyboard-shortcut--inverted": r.inverted }
+  ] }, [r.screenReaderText ? n("span", { staticClass: "sr-only" }, [r._v(" " + r._s(r.screenReaderText) + " ")]) : r._e(), r._l(r.formattedShortcutSplit, function(t, s) {
+    return [r.icons[t] ? n("dt-icon", { key: `${s}-${t}`, class: [
+      "d-keyboard-shortcut__icon",
+      { "d-keyboard-shortcut__icon--inverted": r.inverted }
+    ], attrs: { name: r.icons[t], size: "100", "aria-hidden": "true" } }) : n("span", { key: `${s}-${t}`, class: [
+      "d-keyboard-shortcut__item",
+      { "d-keyboard-shortcut__item--inverted": r.inverted }
+    ], attrs: { "aria-hidden": "true" }, domProps: { innerHTML: r._s(t) } })];
+  })], 2);
+}, l = [], p = /* @__PURE__ */ a(
+  d,
+  u,
+  l,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const v = p.exports;
+export {
+  v as DtKeyboardShortcut,
+  b as SHORTCUTS_ALIASES_LIST,
+  e as SHORTCUTS_ICON_ALIASES,
+  i as SHORTCUTS_ICON_SEPARATOR
+};
+//# sourceMappingURL=keyboard-shortcut.js.map

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

@@ -0,0 +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=\"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"],"mappings":";;;;;;AAAY,MAACA,IAAyB;AAAA,EACpC,SAAS;AAAA,EACT,iBAAiB;AAAA,EACjB,gBAAgB;AAAA,EAChB,cAAc;AAAA,EACd,gBAAgB;AAAA,EAChB,SAAS;AACX,GAEaC,IAA2B;AAAA,EACtC,UAAU;AACZ,GAEaC,IAAyB,OAAO,KAAKF,CAAsB,GCqCxEG,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,wBAAAJ;AAAA,MACA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA,EAAA,GAAAA,GAAA,GAAAC;IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,SAAA,QAAA,KAAA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,OAAA,KAAAD,CAAA,EAAA,OAAA,CAAAK,GAAAC,MACAD,EAAA,QAAA,IAAA,OAAA,MAAAC,IAAA,KAAA,IAAA,GAAAN,EAAAM,CAAA,CAAA,GACA,KAAA,qBAAA;AAAA,IACA;AAAA;AAAA,IAGA,yBAAA;AACA,YAAAC,IAAA,OAAA,KAAA,KAAA,KAAA,EAAA,KAAA,GAAA,GAOAC,IAAA,IAAA,OAAA,IAAAD,CAAA,KAAA,IAAA;AACA,aAAA,KAAA,kBAAA,MAAAC,CAAA,EAAA,OAAA,OAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/lazy-show.js

@@ -0,0 +1,77 @@
+import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+const s = {
+  name: "DtLazyShow",
+  /******************
+   *     PROPS      *
+   ******************/
+  props: {
+    /**
+     * Whether the child slot is shown.
+     * @values true, false
+     */
+    show: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * A valid Vue enter/leave CSS transition name.
+     */
+    transition: {
+      type: String,
+      default: null
+    },
+    /**
+     * Enable/Disable transition animation
+     * @values true, false
+     */
+    appear: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  /******************
+   *      DATA      *
+   ******************/
+  data() {
+    return {
+      initialized: !!this.show
+    };
+  },
+  computed: {
+    /**
+     * Set the css property to false when running tests only.
+     * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about
+     * transition `css` property
+     * @returns {boolean}
+     */
+    isCSSEnabled() {
+      return process.env.NODE_ENV !== "test";
+    }
+  },
+  /******************
+   *      WATCH     *
+   ******************/
+  watch: {
+    show: function(t) {
+      !t || this.initialized || (this.initialized = !0);
+    }
+  }
+};
+var i = function() {
+  var e = this, n = e._self._c;
+  return n("transition", e._g({ attrs: { name: e.transition, appear: e.appear, css: e.isCSSEnabled } }, e.$listeners), [n("div", e._g({ directives: [{ name: "show", rawName: "v-show", value: e.show, expression: "show" }] }, e.$listeners), [e.initialized ? e._t("default") : e._e()], 2)]);
+}, r = [], o = /* @__PURE__ */ a(
+  s,
+  i,
+  r,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const p = o.exports;
+export {
+  p as DtLazyShow
+};
+//# sourceMappingURL=lazy-show.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lazy-show.js","sources":["../../components/lazy_show/lazy_show.vue"],"sourcesContent":["<template>\n  <!-- applies the transition on initial render -->\n  <transition\n    :name=\"transition\"\n    :appear=\"appear\"\n    :css=\"isCSSEnabled\"\n    v-on=\"$listeners\"\n  >\n    <div\n      v-show=\"show\"\n      v-on=\"$listeners\"\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  /******************\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","newValue"],"mappings":";AAuBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA;AAAA;AAAA;AAAA,EAKA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKA,OAAA;AACA,WAAA;AAAA,MACA,aAAA,CAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,eAAA;AACA,aAAA,QAAA,IAAA,aAAA;AAAA,IACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKA,OAAA;AAAA,IACA,MAAA,SAAAC,GAAA;AACA,MAAA,CAAAA,KAAA,KAAA,gBAEA,KAAA,cAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/lib/link.js

@@ -0,0 +1,69 @@
+import { L as a, a as e } from "../chunks/link_constants-vIUB92L4.js";
+import { n as s } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+const i = {
+  name: "DtLink",
+  props: {
+    /**
+     * Applies the link variant styles
+     * @values null, danger, warning, success, muted, inverted, mention
+     */
+    kind: {
+      type: String,
+      default: "",
+      validator(n) {
+        return a.includes(n);
+      }
+    }
+  },
+  emits: [
+    /**
+     * Native click event
+     *
+     * @event click
+     * @type {PointerEvent | KeyboardEvent}
+     */
+    "click",
+    /**
+     * Native focus in event
+     *
+     * @event focusin
+     * @type {FocusEvent}
+     */
+    "focusin",
+    /**
+     * Native focus out event
+     *
+     * @event focusout
+     * @type {FocusEvent}
+     */
+    "focusout"
+  ],
+  data() {
+    return {
+      LINK_KIND_MODIFIERS: e
+    };
+  }
+};
+var _ = function() {
+  var t = this, r = t._self._c;
+  return r("a", t._g({ class: [
+    "d-link",
+    t.LINK_KIND_MODIFIERS[t.kind]
+  ], attrs: { "data-qa": "dt-link", href: "href" in t.$attrs ? t.$attrs.href : "javascript:void(0)" } }, t.$listeners), [t._t("default")], 2);
+}, l = [], o = /* @__PURE__ */ s(
+  i,
+  _,
+  l,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const d = o.exports;
+export {
+  d as DtLink,
+  e as LINK_KIND_MODIFIERS,
+  a as LINK_VARIANTS
+};
+//# sourceMappingURL=link.js.map

package/dist/lib/link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link.js","sources":["../../components/link/link.vue"],"sourcesContent":["<template>\n  <a\n    :class=\"[\n      'd-link',\n      LINK_KIND_MODIFIERS[kind],\n    ]\"\n    data-qa=\"dt-link\"\n    :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n    v-on=\"$listeners\"\n  >\n    <!-- @slot Slot for main content -->\n    <slot />\n  </a>\n</template>\n\n<script>\nimport { LINK_VARIANTS, LINK_KIND_MODIFIERS } from './link_constants';\n\n/**\n * A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n */\nexport default {\n  name: 'DtLink',\n\n  props: {\n    /**\n     * Applies the link variant styles\n     * @values null, danger, warning, success, muted, inverted, mention\n     */\n    kind: {\n      type: String,\n      default: '',\n      validator (kind) {\n        return LINK_VARIANTS.includes(kind);\n      },\n    },\n  },\n\n  emits: [\n    /**\n     * Native click event\n     *\n     * @event click\n     * @type {PointerEvent | KeyboardEvent}\n     */\n    'click',\n\n    /**\n     * Native focus in event\n     *\n     * @event focusin\n     * @type {FocusEvent}\n     */\n    'focusin',\n\n    /**\n     * Native focus out event\n     *\n     * @event focusout\n     * @type {FocusEvent}\n     */\n    'focusout',\n  ],\n\n  data () {\n    return {\n      LINK_KIND_MODIFIERS,\n    };\n  },\n};\n</script>\n"],"names":["_sfc_main","kind","LINK_VARIANTS","LINK_KIND_MODIFIERS"],"mappings":";;AAwBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,UAAAC,GAAA;AACA,eAAAC,EAAA,SAAAD,CAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,qBAAAE;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;"}

package/dist/lib/list-item-group.js

@@ -0,0 +1,59 @@
+import { getUniqueString as r } from "./utils.js";
+import { n as a } from "../chunks/_plugin-vue2_normalizer-u6G_3nkj.js";
+import "./constants.js";
+import "vue";
+const i = {
+  name: "DtListItemGroup",
+  props: {
+    /**
+     * Id of the List Item Group
+     */
+    id: {
+      type: String,
+      default() {
+        return r();
+      }
+    },
+    /**
+     * List's heading.
+     */
+    heading: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Additional class to style the heading
+     */
+    headingClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional class for the wrapper list element.
+     */
+    listClass: {
+      type: [String, Array, Object],
+      default: ""
+    }
+  }
+};
+var n = function() {
+  var t = this, e = t._self._c;
+  return e("ul", { class: ["d-list-item-group", t.listClass], attrs: { id: t.id, role: "group", "data-qa": "dt-dropdown-list-wrapper", "aria-labelledby": `${t.id}-heading` } }, [t.heading ? e("li", { class: ["dt-dropdown-list--header", t.headingClass], attrs: { id: `${t.id}-heading`, role: "presentation", "data-qa": "dt-dropdown-list-heading" } }, [t._t("headingSlot", function() {
+    return [t._v(" " + t._s(t.heading) + " ")];
+  })], 2) : t._e(), t._t("default")], 2);
+}, s = [], d = /* @__PURE__ */ a(
+  i,
+  n,
+  s,
+  !1,
+  null,
+  null,
+  null,
+  null
+);
+const g = d.exports;
+export {
+  g as DtListItemGroup
+};
+//# sourceMappingURL=list-item-group.js.map

package/dist/lib/list-item-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-item-group.js","sources":["../../components/list_item_group/list_item_group.vue"],"sourcesContent":["<template>\n  <ul\n    :id=\"id\"\n    :class=\"['d-list-item-group', listClass]\"\n    role=\"group\"\n    data-qa=\"dt-dropdown-list-wrapper\"\n    :aria-labelledby=\"`${id}-heading`\"\n  >\n    <li\n      v-if=\"heading\"\n      :id=\"`${id}-heading`\"\n      role=\"presentation\"\n      data-qa=\"dt-dropdown-list-heading\"\n      :class=\"['dt-dropdown-list--header', headingClass]\"\n    >\n      <!-- @slot Slot for heading, will override heading prop. -->\n      <slot name=\"headingSlot\">\n        {{ heading }}\n      </slot>\n    </li>\n    <!-- @slot Slot for the list component -->\n    <slot />\n  </ul>\n</template>\n\n<script>\nimport {} from './list_item_group_constants';\nimport { getUniqueString } from '@/common/utils';\n\nexport default {\n  name: 'DtListItemGroup',\n\n  props: {\n    /**\n     * Id of the List Item Group\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * List's heading.\n     */\n    heading: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Additional class to style the heading\n     */\n    headingClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","getUniqueString"],"mappings":";;;;AA6BA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAC,EAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;"}