@dialpad/dialtone-vue 3.159.0 → 3.159.1

package/dist/packages/dialtone-vue3/components/input_group/input_group.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"input_group.vue.cjs","sources":["../../../../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["DtValidationMessages","InputGroupMixin","hasSlotContent","_createElementBlock","_openBlock","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;;;;AAuCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAEA,sBAAAA,oBAAAA,QAAsB;AAAA,EAEpC,QAAQ,CAACC,YAAAA,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB,gBAAAC,aAAc;AAAA;EAEjB;AAAA,EAED,OAAO;AAAA,IACL,MAAO,UAAU;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,uBAAuB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACvD;AAAA,EACF;AACH;AAtGA,MAAA,aAAA,CAAA,SAAA;AAAA,MAAA,aAAA,CAAA,SAAA;;;0BACEC,IAwBW,mBAAA,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAAS,OAAW;AAAA;IAGb,MAAA,eAAe,KAAA,OAAO,MAAM,KAAK,KAAM,UAD/CC,IAAAA,aAAAD,IAAAA,mBAUS,UAVTE,eAUS;AAAA,MAfb,KAAA;AAAA,MAOO,mBAAmB,KAAW,WAAA;AAAA,OACvB,KAAgB,kBAAA,EACvB,WAAS,OAAiB,kBAAA,CAAA,GAAA;AAAA,MAG3BC,IAAAA,WAEO,2BAFP,MAEO;AAAA,QAdbC,IAAAA,gBAAAC,IAAAA,gBAaW,KAAM,MAAA,GAAA,CAAA;AAAA;IAbjB,GAAA,IAAA,UAAA,KAAAC,IAAA,mBAAA,IAAA,IAAA;AAAA,IAiBIH,eAAQ,KAAA,QAAA,SAAA;AAAA,IACRI,IAAA,YAME,mCANFL,eAME;AAAA,MALC,uBAAqB,KAAiB;AAAA,MACtC,iBAAe,KAAY;AAAA,MAC3B,OAAO,KAAa;AAAA,MACpB,WAAS,OAAmB;AAAA,OACrB,KAAkB,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA,EAvBhC,GAAA,GAAA,UAAA;;;;"}

package/dist/packages/dialtone-vue3/components/input_group/input_group.vue.js

@@ -0,0 +1,90 @@
+import { InputGroupMixin } from "../../common/mixins/input_group.js";
+import { hasSlotContent } from "../../../../common/utils.js";
+import { resolveComponent, openBlock, createElementBlock, mergeProps, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode } from "vue";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+import DtValidationMessages from "../validation_messages/validation_messages.vue.js";
+const _sfc_main = {
+  name: "DtInputGroup",
+  components: { DtValidationMessages },
+  mixins: [InputGroupMixin],
+  props: {
+    /**
+     * A data qa tag for the input group
+     */
+    dataQaGroup: {
+      type: String,
+      default: "input-group"
+    },
+    /**
+     * A data qa tag for the input group legend
+     */
+    dataQaGroupLegend: {
+      type: String,
+      default: "input-group-legend"
+    },
+    /**
+     * A data qa tag for the input group messages
+     */
+    dataQaGroupMessages: {
+      type: String,
+      default: "input-group-messages"
+    }
+  },
+  data() {
+    return {
+      internalValue: this.value,
+      hasSlotContent
+    };
+  },
+  watch: {
+    value(newValue) {
+      this.internalValue = newValue;
+    },
+    /*
+     * watching value to support 2 way binding for slotted inputs.
+     * need this to pass value to slotted inputs if modified outside
+     * input group.
+     */
+    internalValue: {
+      immediate: true,
+      handler(newInternalValue) {
+        this.provideObj.value = newInternalValue;
+      }
+    }
+  },
+  methods: {
+    getMessageKey(type, index) {
+      return `input-group-message-${type}-${index}-${this.id}`;
+    }
+  }
+};
+const _hoisted_1 = ["data-qa"];
+const _hoisted_2 = ["data-qa"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_dt_validation_messages = resolveComponent("dt-validation-messages");
+  return openBlock(), createElementBlock("fieldset", {
+    class: "d-input-group__fieldset",
+    "data-qa": $props.dataQaGroup
+  }, [
+    $data.hasSlotContent(_ctx.$slots.legend) || _ctx.legend ? (openBlock(), createElementBlock("legend", mergeProps({
+      key: 0,
+      class: ["d-label", _ctx.legendClass]
+    }, _ctx.legendChildProps, { "data-qa": $props.dataQaGroupLegend }), [
+      renderSlot(_ctx.$slots, "legend", {}, () => [
+        createTextVNode(toDisplayString(_ctx.legend), 1)
+      ])
+    ], 16, _hoisted_2)) : createCommentVNode("", true),
+    renderSlot(_ctx.$slots, "default"),
+    createVNode(_component_dt_validation_messages, mergeProps({
+      "validation-messages": _ctx.formattedMessages,
+      "show-messages": _ctx.showMessages,
+      class: _ctx.messagesClass,
+      "data-qa": $props.dataQaGroupMessages
+    }, _ctx.messagesChildProps), null, 16, ["validation-messages", "show-messages", "class", "data-qa"])
+  ], 8, _hoisted_1);
+}
+const DtInputGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtInputGroup as default
+};
+//# sourceMappingURL=input_group.vue.js.map

package/dist/packages/dialtone-vue3/components/input_group/input_group.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input_group.vue.js","sources":["../../../../../components/input_group/input_group.vue"],"sourcesContent":["<template>\n  <fieldset\n    class=\"d-input-group__fieldset\"\n    :data-qa=\"dataQaGroup\"\n  >\n    <legend\n      v-if=\"hasSlotContent($slots.legend) || legend\"\n      :class=\"['d-label', legendClass]\"\n      v-bind=\"legendChildProps\"\n      :data-qa=\"dataQaGroupLegend\"\n    >\n      <!-- @slot slot for Input Group Legend -->\n      <slot name=\"legend\">\n        {{ legend }}\n      </slot>\n    </legend>\n    <!-- @slot slot for Input Group Components -->\n    <slot />\n    <dt-validation-messages\n      :validation-messages=\"formattedMessages\"\n      :show-messages=\"showMessages\"\n      :class=\"messagesClass\"\n      :data-qa=\"dataQaGroupMessages\"\n      v-bind=\"messagesChildProps\"\n    />\n  </fieldset>\n</template>\n\n<script>\nimport { InputGroupMixin } from '@/common/mixins/input_group';\nimport { DtValidationMessages } from '../validation_messages';\nimport { hasSlotContent } from '@/common/utils';\n\n/**\n * Input Groups are convenience components for a grouping of related inputs.\n * While each input within the group could be independent, the `v-model` on the group\n * provides a convenient interface for determining the current state of the group.\n * @see https://dialtone.dialpad.com/components/input_group.html\n */\nexport default {\n  name: 'DtInputGroup',\n\n  components: { DtValidationMessages },\n\n  mixins: [InputGroupMixin],\n\n  props: {\n    /**\n     * A data qa tag for the input group\n     */\n    dataQaGroup: {\n      type: String,\n      default: 'input-group',\n    },\n\n    /**\n     * A data qa tag for the input group legend\n     */\n    dataQaGroupLegend: {\n      type: String,\n      default: 'input-group-legend',\n    },\n\n    /**\n     * A data qa tag for the input group messages\n     */\n    dataQaGroupMessages: {\n      type: String,\n      default: 'input-group-messages',\n    },\n  },\n\n  data () {\n    return {\n      internalValue: this.value,\n      hasSlotContent,\n    };\n  },\n\n  watch: {\n    value (newValue) {\n      this.internalValue = newValue;\n    },\n\n    /*\n     * watching value to support 2 way binding for slotted inputs.\n     * need this to pass value to slotted inputs if modified outside\n     * input group.\n     */\n    internalValue: {\n      immediate: true,\n      handler (newInternalValue) {\n        this.provideObj.value = newInternalValue;\n      },\n    },\n  },\n\n  methods: {\n    getMessageKey (type, index) {\n      return `input-group-message-${type}-${index}-${this.id}`;\n    },\n  },\n};\n</script>\n"],"names":["_createElementBlock","_openBlock","_mergeProps","_renderSlot","_createTextVNode","_toDisplayString","_createCommentVNode","_createVNode"],"mappings":";;;;;AAuCA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EAEN,YAAY,EAAE,qBAAsB;AAAA,EAEpC,QAAQ,CAAC,eAAe;AAAA,EAExB,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,aAAa;AAAA,MACX,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,mBAAmB;AAAA,MACjB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA,IAKD,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,OAAQ;AACN,WAAO;AAAA,MACL,eAAe,KAAK;AAAA,MACpB;AAAA;EAEH;AAAA,EAED,OAAO;AAAA,IACL,MAAO,UAAU;AACf,WAAK,gBAAgB;AAAA,IACtB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOD,eAAe;AAAA,MACb,WAAW;AAAA,MACX,QAAS,kBAAkB;AACzB,aAAK,WAAW,QAAQ;AAAA,MACzB;AAAA,IACF;AAAA,EACF;AAAA,EAED,SAAS;AAAA,IACP,cAAe,MAAM,OAAO;AAC1B,aAAO,uBAAuB,IAAI,IAAI,KAAK,IAAI,KAAK,EAAE;AAAA,IACvD;AAAA,EACF;AACH;AAtGA,MAAA,aAAA,CAAA,SAAA;AAAA,MAAA,aAAA,CAAA,SAAA;;;sBACEA,mBAwBW,YAAA;AAAA,IAvBT,OAAM;AAAA,IACL,WAAS,OAAW;AAAA;IAGb,MAAA,eAAe,KAAA,OAAO,MAAM,KAAK,KAAM,UAD/CC,aAAAD,mBAUS,UAVTE,WAUS;AAAA,MAfb,KAAA;AAAA,MAOO,mBAAmB,KAAW,WAAA;AAAA,OACvB,KAAgB,kBAAA,EACvB,WAAS,OAAiB,kBAAA,CAAA,GAAA;AAAA,MAG3BC,WAEO,2BAFP,MAEO;AAAA,QAdbC,gBAAAC,gBAaW,KAAM,MAAA,GAAA,CAAA;AAAA;IAbjB,GAAA,IAAA,UAAA,KAAAC,mBAAA,IAAA,IAAA;AAAA,IAiBIH,WAAQ,KAAA,QAAA,SAAA;AAAA,IACRI,YAME,mCANFL,WAME;AAAA,MALC,uBAAqB,KAAiB;AAAA,MACtC,iBAAe,KAAY;AAAA,MAC3B,OAAO,KAAa;AAAA,MACpB,WAAS,OAAmB;AAAA,OACrB,KAAkB,kBAAA,GAAA,MAAA,IAAA,CAAA,uBAAA,iBAAA,SAAA,SAAA,CAAA;AAAA,EAvBhC,GAAA,GAAA,UAAA;;;"}

package/dist/packages/dialtone-vue3/components/item_layout/item_layout.vue.cjs

@@ -0,0 +1,91 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const common_utils = require("../../../../common/utils.cjs");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.cjs");
+const _sfc_main = {
+  name: "DtItemLayout",
+  props: {
+    /**
+     * Set this prop to render layout as a specific HTML element.
+     */
+    as: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * Set this prop to remove the default styling.
+     * @values true, false
+     */
+    unstyled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: { hasSlotContent: common_utils.hasSlotContent }
+};
+const _hoisted_1 = {
+  key: 0,
+  "data-qa": "dt-item-layout-left-wrapper",
+  class: "dt-item-layout--left"
+};
+const _hoisted_2 = {
+  "data-qa": "dt-item-layout-content-wrapper",
+  class: "dt-item-layout--content"
+};
+const _hoisted_3 = {
+  key: 0,
+  "data-qa": "dt-item-layout-title-wrapper",
+  class: "dt-item-layout--title"
+};
+const _hoisted_4 = {
+  key: 2,
+  "data-qa": "dt-item-layout-bottom-wrapper",
+  class: "dt-item-layout--bottom"
+};
+const _hoisted_5 = {
+  key: 1,
+  "data-qa": "dt-item-layout-right-wrapper",
+  class: "dt-item-layout--right"
+};
+const _hoisted_6 = {
+  key: 2,
+  "data-qa": "dt-item-layout-selected-wrapper",
+  class: "dt-item-layout--selected"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent($props.as), {
+    class: vue.normalizeClass($props.unstyled ? "dt-item-layout--custom" : "dt-item-layout")
+  }, {
+    default: vue.withCtx(() => [
+      $options.hasSlotContent(_ctx.$slots.left) ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_1, [
+        vue.renderSlot(_ctx.$slots, "left")
+      ])) : vue.createCommentVNode("", true),
+      vue.createElementVNode("section", _hoisted_2, [
+        $options.hasSlotContent(_ctx.$slots.default) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+          vue.renderSlot(_ctx.$slots, "default")
+        ])) : vue.createCommentVNode("", true),
+        $options.hasSlotContent(_ctx.$slots.subtitle) ? (vue.openBlock(), vue.createElementBlock("div", {
+          key: 1,
+          "data-qa": "dt-item-layout-subtitle-wrapper",
+          class: vue.normalizeClass(["dt-item-layout--subtitle", { "dt-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }])
+        }, [
+          vue.renderSlot(_ctx.$slots, "subtitle")
+        ], 2)) : vue.createCommentVNode("", true),
+        $options.hasSlotContent(_ctx.$slots.bottom) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4, [
+          vue.renderSlot(_ctx.$slots, "bottom")
+        ])) : vue.createCommentVNode("", true)
+      ]),
+      $options.hasSlotContent(_ctx.$slots.right) ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_5, [
+        vue.renderSlot(_ctx.$slots, "right")
+      ])) : vue.createCommentVNode("", true),
+      $options.hasSlotContent(_ctx.$slots.selected) ? (vue.openBlock(), vue.createElementBlock("section", _hoisted_6, [
+        vue.renderSlot(_ctx.$slots, "selected")
+      ])) : vue.createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["class"]);
+}
+const DtItemLayout = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = DtItemLayout;
+//# sourceMappingURL=item_layout.vue.cjs.map

package/dist/packages/dialtone-vue3/components/item_layout/item_layout.vue.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"item_layout.vue.cjs","sources":["../../../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"as\"\n    :class=\"unstyled ? 'dt-item-layout--custom' : 'dt-item-layout'\"\n  >\n    <section\n      v-if=\"hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      class=\"dt-item-layout--left\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      class=\"dt-item-layout--content\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        class=\"dt-item-layout--title\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"['dt-item-layout--subtitle', { 'dt-item-layout--subtitle--with-title': hasSlotContent($slots.default) }]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        class=\"dt-item-layout--bottom\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      class=\"dt-item-layout--right\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      class=\"dt-item-layout--selected\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  methods: { hasSlotContent },\n};\n</script>\n"],"names":["hasSlotContent","_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;;;AAqEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAEA,gBAAAA,aAAAA,eAAgB;AAC7B;;EA3FA,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,EAmCQ,WAAQ;AAAA,EACR,OAAM;;;EApCd,KAAA;AAAA,EA4CM,WAAQ;AAAA,EACR,OAAM;;;EA7CZ,KAAA;AAAA,EAoDM,WAAQ;AAAA,EACR,OAAM;;;0BApDVC,IAyDY,YA1DdC,4BAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,IAAAA,eAGY,OAAQ,WAAA,2BAAA,gBAAA;AAAA;IAHpB,SAAAC,IAAA,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAaIC,IAAA,mBA4BU,WA5BV,YA4BU;AAAA,QAvBA,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,IAAA,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,sBADtCF,IAOM,mBAAA,OAAA;AAAA,UAhCZ,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,IA4BuF,eAAA,CAAA,4BAAA,EAAA,wCAAA,SAAA,eAAe,KAAA,OAAO,OAAO,EAAA,CAAA,CAAA;AAAA;UAG5GI,eAAwB,KAAA,QAAA,UAAA;AAAA,iBA/BhCC,IAAA,mBAAA,IAAA,IAAA;AAAA,QAkCc,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,IAAAA,aAAAC,IAAAA,mBAOM,OAPN,YAOM;AAAA,UADJC,eAAsB,KAAA,QAAA,QAAA;AAAA,cAvC9BC,IAAA,mBAAA,IAAA,IAAA;AAAA;MA2CY,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAqB,KAAA,QAAA,OAAA;AAAA,YAhD3BC,IAAA,mBAAA,IAAA,IAAA;AAAA,MAmDY,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,IAAAA,aAAAC,IAAAA,mBAOU,WAPV,YAOU;AAAA,QADRC,eAAwB,KAAA,QAAA,UAAA;AAAA,YAxD9BC,IAAA,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;;"}

package/dist/packages/dialtone-vue3/components/item_layout/item_layout.vue.js

@@ -0,0 +1,91 @@
+import { hasSlotContent } from "../../../../common/utils.js";
+import { openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, renderSlot, createCommentVNode, createElementVNode } from "vue";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const _sfc_main = {
+  name: "DtItemLayout",
+  props: {
+    /**
+     * Set this prop to render layout as a specific HTML element.
+     */
+    as: {
+      type: String,
+      default: "div"
+    },
+    /**
+     * Set this prop to remove the default styling.
+     * @values true, false
+     */
+    unstyled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  methods: { hasSlotContent }
+};
+const _hoisted_1 = {
+  key: 0,
+  "data-qa": "dt-item-layout-left-wrapper",
+  class: "dt-item-layout--left"
+};
+const _hoisted_2 = {
+  "data-qa": "dt-item-layout-content-wrapper",
+  class: "dt-item-layout--content"
+};
+const _hoisted_3 = {
+  key: 0,
+  "data-qa": "dt-item-layout-title-wrapper",
+  class: "dt-item-layout--title"
+};
+const _hoisted_4 = {
+  key: 2,
+  "data-qa": "dt-item-layout-bottom-wrapper",
+  class: "dt-item-layout--bottom"
+};
+const _hoisted_5 = {
+  key: 1,
+  "data-qa": "dt-item-layout-right-wrapper",
+  class: "dt-item-layout--right"
+};
+const _hoisted_6 = {
+  key: 2,
+  "data-qa": "dt-item-layout-selected-wrapper",
+  class: "dt-item-layout--selected"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createBlock(resolveDynamicComponent($props.as), {
+    class: normalizeClass($props.unstyled ? "dt-item-layout--custom" : "dt-item-layout")
+  }, {
+    default: withCtx(() => [
+      $options.hasSlotContent(_ctx.$slots.left) ? (openBlock(), createElementBlock("section", _hoisted_1, [
+        renderSlot(_ctx.$slots, "left")
+      ])) : createCommentVNode("", true),
+      createElementVNode("section", _hoisted_2, [
+        $options.hasSlotContent(_ctx.$slots.default) ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "default")
+        ])) : createCommentVNode("", true),
+        $options.hasSlotContent(_ctx.$slots.subtitle) ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          "data-qa": "dt-item-layout-subtitle-wrapper",
+          class: normalizeClass(["dt-item-layout--subtitle", { "dt-item-layout--subtitle--with-title": $options.hasSlotContent(_ctx.$slots.default) }])
+        }, [
+          renderSlot(_ctx.$slots, "subtitle")
+        ], 2)) : createCommentVNode("", true),
+        $options.hasSlotContent(_ctx.$slots.bottom) ? (openBlock(), createElementBlock("div", _hoisted_4, [
+          renderSlot(_ctx.$slots, "bottom")
+        ])) : createCommentVNode("", true)
+      ]),
+      $options.hasSlotContent(_ctx.$slots.right) ? (openBlock(), createElementBlock("section", _hoisted_5, [
+        renderSlot(_ctx.$slots, "right")
+      ])) : createCommentVNode("", true),
+      $options.hasSlotContent(_ctx.$slots.selected) ? (openBlock(), createElementBlock("section", _hoisted_6, [
+        renderSlot(_ctx.$slots, "selected")
+      ])) : createCommentVNode("", true)
+    ]),
+    _: 3
+  }, 8, ["class"]);
+}
+const DtItemLayout = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  DtItemLayout as default
+};
+//# sourceMappingURL=item_layout.vue.js.map

package/dist/packages/dialtone-vue3/components/item_layout/item_layout.vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"item_layout.vue.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=\"hasSlotContent($slots.left)\"\n      data-qa=\"dt-item-layout-left-wrapper\"\n      class=\"dt-item-layout--left\"\n    >\n      <!-- @slot Slot for left content -->\n      <slot name=\"left\" />\n    </section>\n    <section\n      data-qa=\"dt-item-layout-content-wrapper\"\n      class=\"dt-item-layout--content\"\n    >\n      <div\n        v-if=\"hasSlotContent($slots.default)\"\n        data-qa=\"dt-item-layout-title-wrapper\"\n        class=\"dt-item-layout--title\"\n      >\n        <!-- @slot Slot for main content -->\n        <slot />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.subtitle)\"\n        data-qa=\"dt-item-layout-subtitle-wrapper\"\n        :class=\"['dt-item-layout--subtitle', { 'dt-item-layout--subtitle--with-title': hasSlotContent($slots.default) }]\"\n      >\n        <!-- @slot Slot for content below main content -->\n        <slot name=\"subtitle\" />\n      </div>\n      <div\n        v-if=\"hasSlotContent($slots.bottom)\"\n        data-qa=\"dt-item-layout-bottom-wrapper\"\n        class=\"dt-item-layout--bottom\"\n      >\n        <!-- @slot Slot for content below subtitle -->\n        <slot name=\"bottom\" />\n      </div>\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.right)\"\n      data-qa=\"dt-item-layout-right-wrapper\"\n      class=\"dt-item-layout--right\"\n    >\n      <!-- @slot Slot for right content -->\n      <slot name=\"right\" />\n    </section>\n    <section\n      v-if=\"hasSlotContent($slots.selected)\"\n      data-qa=\"dt-item-layout-selected-wrapper\"\n      class=\"dt-item-layout--selected\"\n    >\n      <!-- @slot Slot for selected icon -->\n      <slot name=\"selected\" />\n    </section>\n  </component>\n</template>\n\n/**\n * Custom layout to enable developer to use list-item like stack.\n * It is used as base for `dt-list-item` component\n * @see https://dialtone.dialpad.com/components/item_layout.html\n */\n<script>\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  name: 'DtItemLayout',\n  props: {\n    /**\n     * Set this prop to render layout as a specific HTML element.\n     */\n    as: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Set this prop to remove the default styling.\n     * @values true, false\n     */\n    unstyled: {\n      type: Boolean,\n      default: false,\n    },\n  },\n\n  methods: { hasSlotContent },\n};\n</script>\n"],"names":["_createBlock","_resolveDynamicComponent","_normalizeClass","_withCtx","_openBlock","_createElementBlock","_renderSlot","_createCommentVNode","_createElementVNode"],"mappings":";;;AAqEA,MAAK,YAAU;AAAA,EACb,MAAM;AAAA,EACN,OAAO;AAAA;AAAA;AAAA;AAAA,IAIL,IAAI;AAAA,MACF,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA;AAAA;AAAA;AAAA;AAAA,IAMD,UAAU;AAAA,MACR,MAAM;AAAA,MACN,SAAS;AAAA,IACV;AAAA,EACF;AAAA,EAED,SAAS,EAAE,eAAgB;AAC7B;;EA3FA,KAAA;AAAA,EAOM,WAAQ;AAAA,EACR,OAAM;;;EAMN,WAAQ;AAAA,EACR,OAAM;;;EAfZ,KAAA;AAAA,EAmBQ,WAAQ;AAAA,EACR,OAAM;;;EApBd,KAAA;AAAA,EAmCQ,WAAQ;AAAA,EACR,OAAM;;;EApCd,KAAA;AAAA,EA4CM,WAAQ;AAAA,EACR,OAAM;;;EA7CZ,KAAA;AAAA,EAoDM,WAAQ;AAAA,EACR,OAAM;;;sBApDVA,YADFC,wBAES,OAAE,EAAA,GAAA;AAAA,IACN,OAHLC,eAGY,OAAQ,WAAA,2BAAA,gBAAA;AAAA;IAHpB,SAAAC,QAKI,MAOU;AAAA,MANF,SAAc,eAAC,KAAM,OAAC,IAAI,KADlCC,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAoB,KAAA,QAAA,MAAA;AAAA,YAX1BC,mBAAA,IAAA,IAAA;AAAA,MAaIC,mBA4BU,WA5BV,YA4BU;AAAA,QAvBA,SAAc,eAAC,KAAM,OAAC,OAAO,KADrCJ,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAQ,KAAA,QAAA,SAAA;AAAA,cAvBhBC,mBAAA,IAAA,IAAA;AAAA,QA0Bc,SAAc,eAAC,KAAM,OAAC,QAAQ,kBADtCF,mBAOM,OAAA;AAAA,UAhCZ,KAAA;AAAA,UA2BQ,WAAQ;AAAA,UACP,OA5BTH,eA4BuF,CAAA,4BAAA,EAAA,wCAAA,SAAA,eAAe,KAAA,OAAO,OAAO,EAAA,CAAA,CAAA;AAAA;UAG5GI,WAAwB,KAAA,QAAA,UAAA;AAAA,iBA/BhCC,mBAAA,IAAA,IAAA;AAAA,QAkCc,SAAc,eAAC,KAAM,OAAC,MAAM,KADpCH,aAAAC,mBAOM,OAPN,YAOM;AAAA,UADJC,WAAsB,KAAA,QAAA,QAAA;AAAA,cAvC9BC,mBAAA,IAAA,IAAA;AAAA;MA2CY,SAAc,eAAC,KAAM,OAAC,KAAK,KADnCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAqB,KAAA,QAAA,OAAA;AAAA,YAhD3BC,mBAAA,IAAA,IAAA;AAAA,MAmDY,SAAc,eAAC,KAAM,OAAC,QAAQ,KADtCH,aAAAC,mBAOU,WAPV,YAOU;AAAA,QADRC,WAAwB,KAAA,QAAA,UAAA;AAAA,YAxD9BC,mBAAA,IAAA,IAAA;AAAA;IAAA,GAAA;AAAA;;;"}

package/dist/packages/dialtone-vue3/components/keyboard_shortcut/keyboard_shortcut.vue.cjs

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const vue3 = require("@dialpad/dialtone-icons/vue3");
+const vue = require("vue");
+const _pluginVue_exportHelper = require("../../../../_virtual/_plugin-vue_export-helper.cjs");
+const SHORTCUTS_ICON_ALIASES = {
+  "{win}": vue3.DtIconLayoutGrid,
+  "{arrow-right}": vue3.DtIconArrowRight,
+  "{arrow-left}": vue3.DtIconArrowLeft,
+  "{arrow-up}": vue3.DtIconArrowUp,
+  "{arrow-down}": vue3.DtIconArrowDown,
+  "{cmd}": vue3.DtIconCommand
+};
+const _sfc_main = {
+  name: "DtKeyboardShortcut",
+  components: {
+    DtIconLayoutGrid: vue3.DtIconLayoutGrid,
+    DtIconArrowRight: vue3.DtIconArrowRight,
+    DtIconArrowLeft: vue3.DtIconArrowLeft,
+    DtIconArrowUp: vue3.DtIconArrowUp,
+    DtIconArrowDown: vue3.DtIconArrowDown,
+    DtIconCommand: vue3.DtIconCommand,
+    DtIconPlus: vue3.DtIconPlus
+  },
+  props: {
+    /**
+     * If true, applies inverted styles.
+     * @values true, false
+     */
+    inverted: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Include any of these tokens in your string to render the corresponding symbol:
+     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}
+     */
+    shortcut: {
+      type: String,
+      required: true
+    },
+    /**
+     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.
+     */
+    screenReaderText: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      separator: /\+/gi
+    };
+  },
+  computed: {
+    icons() {
+      return {
+        ...SHORTCUTS_ICON_ALIASES,
+        "{plus}": vue3.DtIconPlus
+      };
+    },
+    shortcutWithSeparator() {
+      return this.shortcut.replace(this.separator, "{plus}");
+    },
+    formattedShortcut() {
+      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {
+        return result.replace(new RegExp("{" + key + "}", "gi"), SHORTCUTS_ICON_ALIASES[key]);
+      }, this.shortcutWithSeparator);
+    },
+    // Splits any icon based aliases into their own array items.
+    formattedShortcutSplit() {
+      const iconAliasString = Object.keys(this.icons).join("|");
+      const regex = new RegExp(`(${iconAliasString})`, "gi");
+      return this.formattedShortcut.split(regex).filter(Boolean);
+    }
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "d-keyboard-shortcut--sr-only"
+};
+const _hoisted_2 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  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(vue.resolveDynamicComponent($options.icons[item]), {
+          key: `${i}-${item}`,
+          size: "100",
+          "aria-hidden": "true",
+          class: vue.normalizeClass([
+            "d-keyboard-shortcut__icon",
+            { "d-keyboard-shortcut__icon--inverted": $props.inverted }
+          ])
+        }, null, 8, ["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.default(_sfc_main, [["render", _sfc_render]]);
+exports.default = keyboard_shortcut;
+//# sourceMappingURL=keyboard_shortcut.vue.cjs.map

package/dist/packages/dialtone-vue3/components/keyboard_shortcut/keyboard_shortcut.vue.cjs.map

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

package/dist/packages/dialtone-vue3/components/keyboard_shortcut/keyboard_shortcut.vue.js

@@ -0,0 +1,116 @@
+import { DtIconLayoutGrid, DtIconArrowRight, DtIconArrowLeft, DtIconArrowUp, DtIconArrowDown, DtIconCommand, DtIconPlus } from "@dialpad/dialtone-icons/vue3";
+import { openBlock, createElementBlock, normalizeClass, toDisplayString, createCommentVNode, Fragment, renderList, createBlock, resolveDynamicComponent } from "vue";
+import _export_sfc from "../../../../_virtual/_plugin-vue_export-helper.js";
+const SHORTCUTS_ICON_ALIASES = {
+  "{win}": DtIconLayoutGrid,
+  "{arrow-right}": DtIconArrowRight,
+  "{arrow-left}": DtIconArrowLeft,
+  "{arrow-up}": DtIconArrowUp,
+  "{arrow-down}": DtIconArrowDown,
+  "{cmd}": DtIconCommand
+};
+const _sfc_main = {
+  name: "DtKeyboardShortcut",
+  components: {
+    DtIconLayoutGrid,
+    DtIconArrowRight,
+    DtIconArrowLeft,
+    DtIconArrowUp,
+    DtIconArrowDown,
+    DtIconCommand,
+    DtIconPlus
+  },
+  props: {
+    /**
+     * If true, applies inverted styles.
+     * @values true, false
+     */
+    inverted: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Include any of these tokens in your string to render the corresponding symbol:
+     * {cmd} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}
+     */
+    shortcut: {
+      type: String,
+      required: true
+    },
+    /**
+     * Text entered here will be read by assistive technology. If null this component will be ignored by AT.
+     */
+    screenReaderText: {
+      type: String,
+      default: null
+    }
+  },
+  data() {
+    return {
+      separator: /\+/gi
+    };
+  },
+  computed: {
+    icons() {
+      return {
+        ...SHORTCUTS_ICON_ALIASES,
+        "{plus}": DtIconPlus
+      };
+    },
+    shortcutWithSeparator() {
+      return this.shortcut.replace(this.separator, "{plus}");
+    },
+    formattedShortcut() {
+      return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {
+        return result.replace(new RegExp("{" + key + "}", "gi"), SHORTCUTS_ICON_ALIASES[key]);
+      }, this.shortcutWithSeparator);
+    },
+    // Splits any icon based aliases into their own array items.
+    formattedShortcutSplit() {
+      const iconAliasString = Object.keys(this.icons).join("|");
+      const regex = new RegExp(`(${iconAliasString})`, "gi");
+      return this.formattedShortcut.split(regex).filter(Boolean);
+    }
+  }
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "d-keyboard-shortcut--sr-only"
+};
+const _hoisted_2 = ["innerHTML"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  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(resolveDynamicComponent($options.icons[item]), {
+          key: `${i}-${item}`,
+          size: "100",
+          "aria-hidden": "true",
+          class: normalizeClass([
+            "d-keyboard-shortcut__icon",
+            { "d-keyboard-shortcut__icon--inverted": $props.inverted }
+          ])
+        }, null, 8, ["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 {
+  keyboard_shortcut as default
+};
+//# sourceMappingURL=keyboard_shortcut.vue.js.map

package/dist/packages/dialtone-vue3/components/keyboard_shortcut/keyboard_shortcut.vue.js.map

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

package/dist/packages/dialtone-vue3/components/keyboard_shortcut/keyboard_shortcut_constants.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard_shortcut_constants.cjs","sources":["../../../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n];\n"],"names":[],"mappings":";;AAAY,MAAC,yBAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;;"}

package/dist/packages/dialtone-vue3/components/keyboard_shortcut/keyboard_shortcut_constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboard_shortcut_constants.js","sources":["../../../../../components/keyboard_shortcut/keyboard_shortcut_constants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n  '{win}',\n  '{arrow-right}',\n  '{arrow-left}',\n  '{arrow-up}',\n  '{arrow-down}',\n  '{cmd}',\n];\n"],"names":[],"mappings":"AAAY,MAAC,yBAAyB;AAAA,EACpC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF;"}