npm - @dialpad/dialtone-vue - Versions diffs - 2.190.0 → 2.191.0 - Mend

@dialpad/dialtone-vue 2.190.0 → 2.191.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (336) hide show

package/dist/lib/input-group/input-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-group.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=\"$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';\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 emits: [\n /\n Native input event\n \n @event input\n /\n 'input',\n ],\n\n data () {\n return {\n internalValue: this.value,\n // wrap values in object to make reactive\n provideObj: {\n value: this.value,\n },\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 (newInternalValue) {\n this.provideObj.value = newInternalValue;\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":["_sfc_main","DtValidationMessages","InputGroupMixin","newValue","newInternalValue","type","index"],"mappings":";;;AAsCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,sBAAAC,EAAA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA,KAAA;AAAA;AAAA,MAEA,YAAA;AAAA,QACA,OAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAAC,GAAA;AACA,WAAA,gBAAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAAC,GAAA;AACA,WAAA,WAAA,QAAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAAC,GAAAC,GAAA;AACA,aAAA,uBAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"input-group.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=\"$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';\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 emits: [\n /\n Native input event\n \n @event input\n /\n 'input',\n ],\n\n data () {\n return {\n internalValue: this.value,\n // wrap values in object to make reactive\n provideObj: {\n value: this.value,\n },\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 (newInternalValue) {\n this.provideObj.value = newInternalValue;\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":["_sfc_main","DtValidationMessages","InputGroupMixin","newValue","newInternalValue","type","index"],"mappings":";;;AAsCA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,sBAAAC,EAAA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,mBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,eAAA,KAAA;AAAA;AAAA,MAEA,YAAA;AAAA,QACA,OAAA,KAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,MAAAC,GAAA;AACA,WAAA,gBAAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,cAAAC,GAAA;AACA,WAAA,WAAA,QAAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,cAAAC,GAAAC,GAAA;AACA,aAAA,uBAAAD,CAAA,IAAAC,CAAA,IAAA,KAAA,EAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}

package/dist/lib/item-layout/item-layout.cjs CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),l={name:"DtItemLayout",props:{as:{type:String,default:"div"},unstyled:{type:Boolean,default:!1},leftClass:{type:String,default:""},contentClass:{type:String,default:""},titleClass:{type:String,default:""},subtitleClass:{type:String,default:""},bottomClass:{type:String,default:""},rightClass:{type:String,default:""},selectedClass:{type:String,default:""}},methods:{dynamicGridTemplateColumns(){const s=this.$slots.left?"auto":"",t=this.$slots.right?"auto":"",e=this.$slots.selected?"auto":"";return`
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const l=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),a={name:"DtItemLayout",props:{as:{type:String,default:"div"},unstyled:{type:Boolean,default:!1},leftClass:{type:String,default:""},contentClass:{type:String,default:""},titleClass:{type:String,default:""},subtitleClass:{type:String,default:""},bottomClass:{type:String,default:""},rightClass:{type:String,default:""},selectedClass:{type:String,default:""}},methods:{dynamicGridTemplateColumns(){const s=this.$slots.left?"auto":"",t=this.$slots.right?"auto":"",e=this.$slots.selected?"auto":"";return`
         grid-template-columns: ${s} 1fr ${t} ${e};
-      `}}};var o=function(){var t=this,e=t._self._c;return e(t.as,{tag:"component",class:t.unstyled?"d-item-layout--custom":"d-item-layout",style:t.unstyled&&t.dynamicGridTemplateColumns()},[t.$slots.left?e("section",{class:[t.leftClass,"d-item-layout__left"],attrs:{"data-qa":"dt-item-layout-left-wrapper"}},[t._t("left")],2):t._e(),e("section",{class:[t.contentClass,"d-item-layout__content"],attrs:{"data-qa":"dt-item-layout-content-wrapper"}},[t.$slots.default?e("div",{class:[t.titleClass,"d-item-layout__title"],attrs:{"data-qa":"dt-item-layout-title-wrapper"}},[t._t("default")],2):t._e(),t.$slots.subtitle?e("div",{class:[t.subtitleClass,"d-item-layout__subtitle",{"d-item-layout__subtitle-with-title":t.$slots.default}],attrs:{"data-qa":"dt-item-layout-subtitle-wrapper"}},[t._t("subtitle")],2):t._e(),t.$slots.bottom?e("div",{class:[t.bottomClass,"d-item-layout__bottom"],attrs:{"data-qa":"dt-item-layout-bottom-wrapper"}},[t._t("bottom")],2):t._e()]),t.$slots.right?e("section",{class:[t.rightClass,"d-item-layout__right"],attrs:{"data-qa":"dt-item-layout-right-wrapper"}},[t._t("right")],2):t._e(),t.$slots.selected?e("section",{class:[t.selectedClass,"d-item-layout__selected"],attrs:{"data-qa":"dt-item-layout-selected-wrapper"}},[t._t("selected")],2):t._e()])},i=[],r=a.n(l,o,i);const d=r.exports;exports.default=d;
+      `}}};var o=function(){var t=this,e=t._self._c;return e(t.as,{tag:"component",class:t.unstyled?"d-item-layout--custom":"d-item-layout",style:t.unstyled&&t.dynamicGridTemplateColumns()},[t.$slots.left?e("section",{class:[t.leftClass,"d-item-layout__left"],attrs:{"data-qa":"dt-item-layout-left-wrapper"}},[t._t("left")],2):t._e(),e("section",{class:[t.contentClass,"d-item-layout__content"],attrs:{"data-qa":"dt-item-layout-content-wrapper"}},[t.$slots.default?e("div",{class:[t.titleClass,"d-item-layout__title"],attrs:{"data-qa":"dt-item-layout-title-wrapper"}},[t._t("default")],2):t._e(),t.$slots.subtitle?e("div",{class:[t.subtitleClass,"d-item-layout__subtitle",{"d-item-layout__subtitle-with-title":t.$slots.default}],attrs:{"data-qa":"dt-item-layout-subtitle-wrapper"}},[t._t("subtitle")],2):t._e(),t.$slots.bottom?e("div",{class:[t.bottomClass,"d-item-layout__bottom"],attrs:{"data-qa":"dt-item-layout-bottom-wrapper"}},[t._t("bottom")],2):t._e()]),t.$slots.right?e("section",{class:[t.rightClass,"d-item-layout__right"],attrs:{"data-qa":"dt-item-layout-right-wrapper"}},[t._t("right")],2):t._e(),t.$slots.selected?e("section",{class:[t.selectedClass,"d-item-layout__selected"],attrs:{"data-qa":"dt-item-layout-selected-wrapper"}},[t._t("selected")],2):t._e()])},i=[],u=l.n(a,o,i,!1,null,null);const n=u.exports;exports.default=n;
 //# sourceMappingURL=item-layout.cjs.map

package/dist/lib/item-layout/item-layout.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { n as a } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
 const l = {
   name: "DtItemLayout",
   props: {
@@ -82,12 +82,15 @@ const l = {
 var o = function() {
   var t = this, e = t._self._c;
   return e(t.as, { tag: "component", class: t.unstyled ? "d-item-layout--custom" : "d-item-layout", style: t.unstyled && t.dynamicGridTemplateColumns() }, [t.$slots.left ? e("section", { class: [t.leftClass, "d-item-layout__left"], attrs: { "data-qa": "dt-item-layout-left-wrapper" } }, [t._t("left")], 2) : t._e(), e("section", { class: [t.contentClass, "d-item-layout__content"], attrs: { "data-qa": "dt-item-layout-content-wrapper" } }, [t.$slots.default ? e("div", { class: [t.titleClass, "d-item-layout__title"], attrs: { "data-qa": "dt-item-layout-title-wrapper" } }, [t._t("default")], 2) : t._e(), t.$slots.subtitle ? e("div", { class: [t.subtitleClass, "d-item-layout__subtitle", { "d-item-layout__subtitle-with-title": t.$slots.default }], attrs: { "data-qa": "dt-item-layout-subtitle-wrapper" } }, [t._t("subtitle")], 2) : t._e(), t.$slots.bottom ? e("div", { class: [t.bottomClass, "d-item-layout__bottom"], attrs: { "data-qa": "dt-item-layout-bottom-wrapper" } }, [t._t("bottom")], 2) : t._e()]), t.$slots.right ? e("section", { class: [t.rightClass, "d-item-layout__right"], attrs: { "data-qa": "dt-item-layout-right-wrapper" } }, [t._t("right")], 2) : t._e(), t.$slots.selected ? e("section", { class: [t.selectedClass, "d-item-layout__selected"], attrs: { "data-qa": "dt-item-layout-selected-wrapper" } }, [t._t("selected")], 2) : t._e()]);
-}, i = [], d = /* @__PURE__ */ a(
+}, i = [], n = /* @__PURE__ */ a(
   l,
   o,
-  i
+  i,
+  !1,
+  null,
+  null
 );
-const r = d.exports;
+const r = n.exports;
 export {
   r as default
 };

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

	@@ -1 +1 @@
1	- {"version":3,"file":"item-layout.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n :style=\"unstyled && dynamicGridTemplateColumns()\"\n >\n <section\n v-if=\"$slots.left\"\n data-qa=\"dt-item-layout-left-wrapper\"\n :class=\"[leftClass, 'd-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=\"[contentClass, 'd-item-layout__content']\"\n >\n <div\n v-if=\"$slots.default\"\n data-qa=\"dt-item-layout-title-wrapper\"\n :class=\"[titleClass, 'd-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=\"[subtitleClass, 'd-item-layout__subtitle', { 'd-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=\"[bottomClass, 'd-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=\"[rightClass, 'd-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=\"[selectedClass, 'd-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 Set the class for the left section.\n /\n leftClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the content section.\n /\n contentClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the title section.\n /\n titleClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the subtitle section.\n /\n subtitleClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the bottom section.\n /\n bottomClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the right section.\n /\n rightClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the selected section.\n /\n selectedClass: {\n type: String,\n default: '',\n },\n },\n\n methods: {\n /\n Generate dynamic grid template columns\n */\n dynamicGridTemplateColumns () {\n const leftContentColumn = this.$slots.left ? 'auto' : '';\n const rightContentColumn = this.$slots.right ? 'auto' : '';\n const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n return `\n grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n `;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn"],"mappings":";AAoEA,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;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;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,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;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,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA,IAIA,6BAAA;AACA,YAAAC,IAAA,KAAA,OAAA,OAAA,SAAA,IACAC,IAAA,KAAA,OAAA,QAAA,SAAA,IACAC,IAAA,KAAA,OAAA,WAAA,SAAA;AAEA,aAAA;AAAA,iCACAF,CAAA,QAAAC,CAAA,IAAAC,CAAA;AAAA;AAAA,IAEA;AAAA,EACA;AACA~~;;;;;;;;;;~~"}
1	+ {"version":3,"file":"item-layout.js","sources":["../../../components/item_layout/item_layout.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n :class=\"unstyled ? 'd-item-layout--custom' : 'd-item-layout'\"\n :style=\"unstyled && dynamicGridTemplateColumns()\"\n >\n <section\n v-if=\"$slots.left\"\n data-qa=\"dt-item-layout-left-wrapper\"\n :class=\"[leftClass, 'd-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=\"[contentClass, 'd-item-layout__content']\"\n >\n <div\n v-if=\"$slots.default\"\n data-qa=\"dt-item-layout-title-wrapper\"\n :class=\"[titleClass, 'd-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=\"[subtitleClass, 'd-item-layout__subtitle', { 'd-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=\"[bottomClass, 'd-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=\"[rightClass, 'd-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=\"[selectedClass, 'd-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 Set the class for the left section.\n /\n leftClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the content section.\n /\n contentClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the title section.\n /\n titleClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the subtitle section.\n /\n subtitleClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the bottom section.\n /\n bottomClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the right section.\n /\n rightClass: {\n type: String,\n default: '',\n },\n\n /\n Set the class for the selected section.\n /\n selectedClass: {\n type: String,\n default: '',\n },\n },\n\n methods: {\n /\n Generate dynamic grid template columns\n */\n dynamicGridTemplateColumns () {\n const leftContentColumn = this.$slots.left ? 'auto' : '';\n const rightContentColumn = this.$slots.right ? 'auto' : '';\n const selectedContentColumn = this.$slots.selected ? 'auto' : '';\n\n return `\n grid-template-columns: ${leftContentColumn} 1fr ${rightContentColumn} ${selectedContentColumn};\n `;\n },\n },\n};\n</script>\n"],"names":["_sfc_main","leftContentColumn","rightContentColumn","selectedContentColumn"],"mappings":";AAoEA,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;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;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,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;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,IAKA,eAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA;AAAA;AAAA;AAAA,IAIA,6BAAA;AACA,YAAAC,IAAA,KAAA,OAAA,OAAA,SAAA,IACAC,IAAA,KAAA,OAAA,QAAA,SAAA,IACAC,IAAA,KAAA,OAAA,WAAA,SAAA;AAEA,aAAA;AAAA,iCACAF,CAAA,QAAAC,CAAA,IAAAC,CAAA;AAAA;AAAA,IAEA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/lib/ivr-node/ivr-node.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@dialpad/dialtone-icons/vue2"),o=require("./ivr-node-constants.cjs"),i=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),d=require("../card/card.cjs"),s=require("../button/button.cjs"),a=require("../dropdown/dropdown.cjs"),l=new Map([[o.IVR_NODE_PROMPT_MENU,t.DtIconKeypad],[o.IVR_NODE_PROMPT_COLLECT,t.DtIconDialer],[o.IVR_NODE_PROMPT_PLAY,t.DtIconVolume2],[o.IVR_NODE_EXPERT,t.DtIconExpertNode],[o.IVR_NODE_BRANCH,t.DtIconBranch],[o.IVR_NODE_GO_TO,t.DtIconCallMerge],[o.IVR_NODE_ASSIGN,t.DtIconChevronsRight],[o.IVR_NODE_CUSTOMER_DATA,t.DtIconListBullet],[o.IVR_NODE_TRANSFER,t.DtIconTransfer],[o.IVR_NODE_HANGUP,t.DtIconPhoneHangUp]]),_={name:"DtRecipeIvrNode",components:{DtCard:d.default,DtButton:s.default,DtDropdown:a.default,DtIconKeypad:t.DtIconKeypad,DtIconDialer:t.DtIconDialer,DtIconVolume2:t.DtIconVolume2,DtIconExpertNode:t.DtIconExpertNode,DtIconBranch:t.DtIconBranch,DtIconCallMerge:t.DtIconCallMerge,DtIconChevronsRight:t.DtIconChevronsRight,DtIconTransfer:t.DtIconTransfer,DtIconPhoneHangUp:t.DtIconPhoneHangUp,DtIconMoreVertical:t.DtIconMoreVertical,DtIconListBullet:t.DtIconListBullet},props:{nodeType:{type:String,required:!0},nodeLabel:{type:String,required:!0},isSelected:{type:Boolean,default:!1},menuButtonAriaLabel:{type:String,required:!0},dtmfKey:{type:String,default:null}},emits:["click"],data(){return{isOpen:!1}},computed:{nodeIcon(){return l.get(this.nodeType)},nodeClass(){const{normal:c,selected:e}=o.IVR_NODE_CLASS_MAPPING[this.nodeType];return this.isSelected?e:c},isGotoNode(){return this.nodeType===o.IVR_NODE_GO_TO}},methods:{openMenu(){this.isOpen=!0}}};var u=function(){var e=this,n=e._self._c;return n("div",e._g({class:["d-recipe-ivr-node",e.nodeClass]},e.$listeners),[e.dtmfKey?n("div",{staticClass:"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf",class:{"d-recipe-ivr-node__connector-dtmf--selected":e.isSelected},attrs:{"data-qa":"dt-top-connector-dtmf"}},[e._v(" "+e._s(e.dtmfKey)+" ")]):e._e(),e.$slots.connector?e._t("connector"):e._e(),!e.dtmfKey&&!e.$slots.connector?n("div",{staticClass:"d-recipe-ivr-node__connector",class:{"d-recipe-ivr-node__connector--selected":e.isSelected},attrs:{"data-qa":"dt-top-connector"}}):e._e(),n("dt-card",{scopedSlots:e._u([{key:"header",fn:function(){return[n("div",{staticClass:"d-recipe-ivr-node__header-left"},[n("dt-button",{attrs:{"aria-label":e.nodeType,importance:"clear",kind:"muted","data-qa":"dt-ivr-node-icon"},scopedSlots:e._u([{key:"icon",fn:function(){return[n(e.nodeIcon,{tag:"component",class:["",{"d-recipe-ivr-node__goto-icon":e.isGotoNode}],attrs:{size:"200"}})]},proxy:!0}])}),n("p",{staticClass:"d-recipe-ivr-node__label",attrs:{"data-qa":"ivr-node-label"}},[e._v(" "+e._s(e.nodeLabel)+" ")])],1),n("dt-dropdown",{attrs:{placement:"bottom",open:e.isOpen},on:{"update:open":function(r){e.isOpen=r}},scopedSlots:e._u([{key:"anchor",fn:function(){return[n("dt-button",{attrs:{importance:"clear",kind:"muted","aria-label":e.menuButtonAriaLabel},on:{click:function(r){return r.stopPropagation(),r.preventDefault(),e.openMenu.apply(null,arguments)}},scopedSlots:e._u([{key:"icon",fn:function(){return[n("dt-icon-more-vertical",{attrs:{size:"200"}})]},proxy:!0}])})]},proxy:!0},{key:"list",fn:function({close:r}){return[n("div",{staticClass:"d-recipe-ivr-node__dropdown-list"},[e._t("menuItems",null,{close:r})],2)]}}],null,!0)})]},proxy:!0},{key:"content",fn:function(){return[e._t("content")]},proxy:!0}],null,!0)})],2)},p=[],D=i.n(_,u,p);const I=D.exports;exports.default=I;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("@dialpad/dialtone-icons/vue2"),o=require("./ivr-node-constants.cjs"),i=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),d=require("../card/card.cjs"),s=require("../button/button.cjs"),a=require("../dropdown/dropdown.cjs"),l=new Map([[o.IVR_NODE_PROMPT_MENU,t.DtIconKeypad],[o.IVR_NODE_PROMPT_COLLECT,t.DtIconDialer],[o.IVR_NODE_PROMPT_PLAY,t.DtIconVolume2],[o.IVR_NODE_EXPERT,t.DtIconExpertNode],[o.IVR_NODE_BRANCH,t.DtIconBranch],[o.IVR_NODE_GO_TO,t.DtIconCallMerge],[o.IVR_NODE_ASSIGN,t.DtIconChevronsRight],[o.IVR_NODE_CUSTOMER_DATA,t.DtIconListBullet],[o.IVR_NODE_TRANSFER,t.DtIconTransfer],[o.IVR_NODE_HANGUP,t.DtIconPhoneHangUp]]),u={name:"DtRecipeIvrNode",components:{DtCard:d.default,DtButton:s.default,DtDropdown:a.default,DtIconKeypad:t.DtIconKeypad,DtIconDialer:t.DtIconDialer,DtIconVolume2:t.DtIconVolume2,DtIconExpertNode:t.DtIconExpertNode,DtIconBranch:t.DtIconBranch,DtIconCallMerge:t.DtIconCallMerge,DtIconChevronsRight:t.DtIconChevronsRight,DtIconTransfer:t.DtIconTransfer,DtIconPhoneHangUp:t.DtIconPhoneHangUp,DtIconMoreVertical:t.DtIconMoreVertical,DtIconListBullet:t.DtIconListBullet},props:{nodeType:{type:String,required:!0},nodeLabel:{type:String,required:!0},isSelected:{type:Boolean,default:!1},menuButtonAriaLabel:{type:String,required:!0},dtmfKey:{type:String,default:null}},emits:["click"],data(){return{isOpen:!1}},computed:{nodeIcon(){return l.get(this.nodeType)},nodeClass(){const{normal:c,selected:e}=o.IVR_NODE_CLASS_MAPPING[this.nodeType];return this.isSelected?e:c},isGotoNode(){return this.nodeType===o.IVR_NODE_GO_TO}},methods:{openMenu(){this.isOpen=!0}}};var _=function(){var e=this,n=e._self._c;return n("div",e._g({class:["d-recipe-ivr-node",e.nodeClass]},e.$listeners),[e.dtmfKey?n("div",{staticClass:"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf",class:{"d-recipe-ivr-node__connector-dtmf--selected":e.isSelected},attrs:{"data-qa":"dt-top-connector-dtmf"}},[e._v(" "+e._s(e.dtmfKey)+" ")]):e._e(),e.$slots.connector?e._t("connector"):e._e(),!e.dtmfKey&&!e.$slots.connector?n("div",{staticClass:"d-recipe-ivr-node__connector",class:{"d-recipe-ivr-node__connector--selected":e.isSelected},attrs:{"data-qa":"dt-top-connector"}}):e._e(),n("dt-card",{scopedSlots:e._u([{key:"header",fn:function(){return[n("div",{staticClass:"d-recipe-ivr-node__header-left"},[n("dt-button",{attrs:{"aria-label":e.nodeType,importance:"clear",kind:"muted","data-qa":"dt-ivr-node-icon"},scopedSlots:e._u([{key:"icon",fn:function(){return[n(e.nodeIcon,{tag:"component",class:["",{"d-recipe-ivr-node__goto-icon":e.isGotoNode}],attrs:{size:"200"}})]},proxy:!0}])}),n("p",{staticClass:"d-recipe-ivr-node__label",attrs:{"data-qa":"ivr-node-label"}},[e._v(" "+e._s(e.nodeLabel)+" ")])],1),n("dt-dropdown",{attrs:{placement:"bottom",open:e.isOpen},on:{"update:open":function(r){e.isOpen=r}},scopedSlots:e._u([{key:"anchor",fn:function(){return[n("dt-button",{attrs:{importance:"clear",kind:"muted","aria-label":e.menuButtonAriaLabel},on:{click:function(r){return r.stopPropagation(),r.preventDefault(),e.openMenu.apply(null,arguments)}},scopedSlots:e._u([{key:"icon",fn:function(){return[n("dt-icon-more-vertical",{attrs:{size:"200"}})]},proxy:!0}])})]},proxy:!0},{key:"list",fn:function({close:r}){return[n("div",{staticClass:"d-recipe-ivr-node__dropdown-list"},[e._t("menuItems",null,{close:r})],2)]}}],null,!0)})]},proxy:!0},{key:"content",fn:function(){return[e._t("content")]},proxy:!0}],null,!0)})],2)},p=[],D=i.n(u,_,p,!1,null,null);const I=D.exports;exports.default=I;
 //# sourceMappingURL=ivr-node.cjs.map

package/dist/lib/ivr-node/ivr-node.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { DtIconKeypad as r, DtIconDialer as c, DtIconVolume2 as i, DtIconExpertNode as d, DtIconBranch as s, DtIconCallMerge as a, DtIconChevronsRight as _, DtIconTransfer as l, DtIconPhoneHangUp as p, DtIconMoreVertical as f, DtIconListBullet as u } from "@dialpad/dialtone-icons/vue2";
+import { DtIconKeypad as r, DtIconDialer as c, DtIconVolume2 as i, DtIconExpertNode as s, DtIconBranch as d, DtIconCallMerge as a, DtIconChevronsRight as l, DtIconTransfer as _, DtIconPhoneHangUp as p, DtIconMoreVertical as f, DtIconListBullet as u } from "@dialpad/dialtone-icons/vue2";
 import { IVR_NODE_GO_TO as m, IVR_NODE_PROMPT_MENU as D, IVR_NODE_PROMPT_COLLECT as I, IVR_NODE_PROMPT_PLAY as v, IVR_NODE_EXPERT as y, IVR_NODE_BRANCH as O, IVR_NODE_ASSIGN as R, IVR_NODE_CUSTOMER_DATA as N, IVR_NODE_TRANSFER as E, IVR_NODE_HANGUP as S, IVR_NODE_CLASS_MAPPING as C } from "./ivr-node-constants.js";
-import { n as T } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { n as T } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
 import h from "../card/card.js";
 import g from "../button/button.js";
 import P from "../dropdown/dropdown.js";
@@ -8,12 +8,12 @@ const V = /* @__PURE__ */ new Map([
   [D, r],
   [I, c],
   [v, i],
-  [y, d],
-  [O, s],
+  [y, s],
+  [O, d],
   [m, a],
-  [R, _],
+  [R, l],
   [N, u],
-  [E, l],
+  [E, _],
   [S, p]
 ]), b = {
   name: "DtRecipeIvrNode",
@@ -24,11 +24,11 @@ const V = /* @__PURE__ */ new Map([
     DtIconKeypad: r,
     DtIconDialer: c,
     DtIconVolume2: i,
-    DtIconExpertNode: d,
-    DtIconBranch: s,
+    DtIconExpertNode: s,
+    DtIconBranch: d,
     DtIconCallMerge: a,
-    DtIconChevronsRight: _,
-    DtIconTransfer: l,
+    DtIconChevronsRight: l,
+    DtIconTransfer: _,
     DtIconPhoneHangUp: p,
     DtIconMoreVertical: f,
     DtIconListBullet: u
@@ -127,7 +127,10 @@ var A = function() {
 }, M = [], k = /* @__PURE__ */ T(
   b,
   A,
-  M
+  M,
+  !1,
+  null,
+  null
 );
 const w = k.exports;
 export {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ivr-node.js","sources":["../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'd-recipe-ivr-node',\n nodeClass,\n ]\"\n v-on=\"$listeners\"\n >\n <div\n v-if=\"dtmfKey\"\n data-qa=\"dt-top-connector-dtmf\"\n class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n :class=\"{ 'd-recipe-ivr-node__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=\"d-recipe-ivr-node__connector\"\n :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n />\n <dt-card>\n <template #header>\n <!-- node label and icon section on left of the header -->\n <div class=\"d-recipe-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 <component\n :is=\"nodeIcon\"\n size=\"200\"\n :class=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n />\n </template>\n </dt-button>\n <p\n class=\"d-recipe-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-more-vertical size=\"200\" />\n </template>\n </dt-button>\n </template>\n <template #list=\"{ close }\">\n <div class=\"d-recipe-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 {\n DtIconKeypad,\n DtIconDialer,\n DtIconVolume2,\n DtIconExpertNode,\n DtIconBranch,\n DtIconCallMerge,\n DtIconChevronsRight,\n DtIconTransfer,\n DtIconPhoneHangUp,\n DtIconMoreVertical,\n DtIconListBullet,\n} from '@dialpad/dialtone-icons/vue2';\nimport {\n IVR_NODE_CLASS_MAPPING,\n IVR_NODE_PROMPT_MENU,\n IVR_NODE_PROMPT_COLLECT,\n IVR_NODE_PROMPT_PLAY,\n IVR_NODE_EXPERT,\n IVR_NODE_BRANCH,\n IVR_NODE_GO_TO,\n IVR_NODE_ASSIGN,\n IVR_NODE_TRANSFER,\n IVR_NODE_HANGUP,\n IVR_NODE_CUSTOMER_DATA,\n} from './ivr_node_constants';\n\nconst typeToIcon = new Map([\n [IVR_NODE_PROMPT_MENU, DtIconKeypad],\n [IVR_NODE_PROMPT_COLLECT, DtIconDialer],\n [IVR_NODE_PROMPT_PLAY, DtIconVolume2],\n [IVR_NODE_EXPERT, DtIconExpertNode],\n [IVR_NODE_BRANCH, DtIconBranch],\n [IVR_NODE_GO_TO, DtIconCallMerge],\n [IVR_NODE_ASSIGN, DtIconChevronsRight],\n [IVR_NODE_CUSTOMER_DATA, DtIconListBullet],\n [IVR_NODE_TRANSFER, DtIconTransfer],\n [IVR_NODE_HANGUP, DtIconPhoneHangUp],\n]);\n\nexport default {\n name: 'DtRecipeIvrNode',\n\n components: {\n DtCard,\n DtButton,\n DtDropdown,\n DtIconKeypad,\n DtIconDialer,\n DtIconVolume2,\n DtIconExpertNode,\n DtIconBranch,\n DtIconCallMerge,\n DtIconChevronsRight,\n DtIconTransfer,\n DtIconPhoneHangUp,\n DtIconMoreVertical,\n DtIconListBullet,\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 typeToIcon.get(this.nodeType);\n },\n\n nodeClass () {\n const { normal, selected } = IVR_NODE_CLASS_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"],"names":["typeToIcon","IVR_NODE_PROMPT_MENU","DtIconKeypad","IVR_NODE_PROMPT_COLLECT","DtIconDialer","IVR_NODE_PROMPT_PLAY","DtIconVolume2","IVR_NODE_EXPERT","DtIconExpertNode","IVR_NODE_BRANCH","DtIconBranch","IVR_NODE_GO_TO","DtIconCallMerge","IVR_NODE_ASSIGN","DtIconChevronsRight","IVR_NODE_CUSTOMER_DATA","DtIconListBullet","IVR_NODE_TRANSFER","DtIconTransfer","IVR_NODE_HANGUP","DtIconPhoneHangUp","_sfc_main","DtCard","DtButton","DtDropdown","DtIconMoreVertical","normal","selected","IVR_NODE_CLASS_MAPPING"],"mappings":";;;;;;AAoHA,MAAAA,IAAA,oBAAA,IAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AACA,CAAA,GAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAtB;AAAA,IACA,cAAAE;AAAA,IACA,eAAAE;AAAA,IACA,kBAAAE;AAAA,IACA,cAAAE;AAAA,IACA,iBAAAE;AAAA,IACA,qBAAAE;AAAA,IACA,gBAAAI;AAAA,IACA,mBAAAE;AAAA,IACA,oBAAAK;AAAA,IACA,kBAAAT;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAAhB,EAAA,IAAA,KAAA,QAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,YAAA,EAAA,QAAA0B,GAAA,UAAAC,EAAA,IAAAC,EAAA,KAAA,QAAA;AACA,aAAA,KAAA,aAAAD,IAAAD;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,aAAAf;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"ivr-node.js","sources":["../../../recipes/cards/ivr_node/ivr_node.vue"],"sourcesContent":["<template>\n <div\n :class=\"[\n 'd-recipe-ivr-node',\n nodeClass,\n ]\"\n v-on=\"$listeners\"\n >\n <div\n v-if=\"dtmfKey\"\n data-qa=\"dt-top-connector-dtmf\"\n class=\"d-recipe-ivr-node__connector d-recipe-ivr-node__connector-dtmf\"\n :class=\"{ 'd-recipe-ivr-node__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=\"d-recipe-ivr-node__connector\"\n :class=\"{ 'd-recipe-ivr-node__connector--selected': isSelected }\"\n />\n <dt-card>\n <template #header>\n <!-- node label and icon section on left of the header -->\n <div class=\"d-recipe-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 <component\n :is=\"nodeIcon\"\n size=\"200\"\n :class=\"['', { 'd-recipe-ivr-node__goto-icon': isGotoNode }]\"\n />\n </template>\n </dt-button>\n <p\n class=\"d-recipe-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-more-vertical size=\"200\" />\n </template>\n </dt-button>\n </template>\n <template #list=\"{ close }\">\n <div class=\"d-recipe-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 {\n DtIconKeypad,\n DtIconDialer,\n DtIconVolume2,\n DtIconExpertNode,\n DtIconBranch,\n DtIconCallMerge,\n DtIconChevronsRight,\n DtIconTransfer,\n DtIconPhoneHangUp,\n DtIconMoreVertical,\n DtIconListBullet,\n} from '@dialpad/dialtone-icons/vue2';\nimport {\n IVR_NODE_CLASS_MAPPING,\n IVR_NODE_PROMPT_MENU,\n IVR_NODE_PROMPT_COLLECT,\n IVR_NODE_PROMPT_PLAY,\n IVR_NODE_EXPERT,\n IVR_NODE_BRANCH,\n IVR_NODE_GO_TO,\n IVR_NODE_ASSIGN,\n IVR_NODE_TRANSFER,\n IVR_NODE_HANGUP,\n IVR_NODE_CUSTOMER_DATA,\n} from './ivr_node_constants';\n\nconst typeToIcon = new Map([\n [IVR_NODE_PROMPT_MENU, DtIconKeypad],\n [IVR_NODE_PROMPT_COLLECT, DtIconDialer],\n [IVR_NODE_PROMPT_PLAY, DtIconVolume2],\n [IVR_NODE_EXPERT, DtIconExpertNode],\n [IVR_NODE_BRANCH, DtIconBranch],\n [IVR_NODE_GO_TO, DtIconCallMerge],\n [IVR_NODE_ASSIGN, DtIconChevronsRight],\n [IVR_NODE_CUSTOMER_DATA, DtIconListBullet],\n [IVR_NODE_TRANSFER, DtIconTransfer],\n [IVR_NODE_HANGUP, DtIconPhoneHangUp],\n]);\n\nexport default {\n name: 'DtRecipeIvrNode',\n\n components: {\n DtCard,\n DtButton,\n DtDropdown,\n DtIconKeypad,\n DtIconDialer,\n DtIconVolume2,\n DtIconExpertNode,\n DtIconBranch,\n DtIconCallMerge,\n DtIconChevronsRight,\n DtIconTransfer,\n DtIconPhoneHangUp,\n DtIconMoreVertical,\n DtIconListBullet,\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 typeToIcon.get(this.nodeType);\n },\n\n nodeClass () {\n const { normal, selected } = IVR_NODE_CLASS_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"],"names":["typeToIcon","IVR_NODE_PROMPT_MENU","DtIconKeypad","IVR_NODE_PROMPT_COLLECT","DtIconDialer","IVR_NODE_PROMPT_PLAY","DtIconVolume2","IVR_NODE_EXPERT","DtIconExpertNode","IVR_NODE_BRANCH","DtIconBranch","IVR_NODE_GO_TO","DtIconCallMerge","IVR_NODE_ASSIGN","DtIconChevronsRight","IVR_NODE_CUSTOMER_DATA","DtIconListBullet","IVR_NODE_TRANSFER","DtIconTransfer","IVR_NODE_HANGUP","DtIconPhoneHangUp","_sfc_main","DtCard","DtButton","DtDropdown","DtIconMoreVertical","normal","selected","IVR_NODE_CLASS_MAPPING"],"mappings":";;;;;;AAoHA,MAAAA,IAAA,oBAAA,IAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AAAA,EACA,CAAAC,GAAAC,CAAA;AACA,CAAA,GAEAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,cAAAtB;AAAA,IACA,cAAAE;AAAA,IACA,eAAAE;AAAA,IACA,kBAAAE;AAAA,IACA,cAAAE;AAAA,IACA,iBAAAE;AAAA,IACA,qBAAAE;AAAA,IACA,gBAAAI;AAAA,IACA,mBAAAE;AAAA,IACA,oBAAAK;AAAA,IACA,kBAAAT;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,qBAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,QAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,WAAA;AACA,aAAAhB,EAAA,IAAA,KAAA,QAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,YAAA,EAAA,QAAA0B,GAAA,UAAAC,EAAA,IAAAC,EAAA,KAAA,QAAA;AACA,aAAA,KAAA,aAAAD,IAAAD;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,aAAAf;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/keyboard-shortcut/keyboard-shortcut.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),c={"{win}":r.DtIconLayoutGrid,"{arrow-right}":r.DtIconArrowRight,"{arrow-left}":r.DtIconArrowLeft,"{arrow-up}":r.DtIconArrowUp,"{arrow-down}":r.DtIconArrowDown,"{cmd}":r.DtIconCommand},i={name:"DtKeyboardShortcut",components:{DtIconLayoutGrid:r.DtIconLayoutGrid,DtIconArrowRight:r.DtIconArrowRight,DtIconArrowLeft:r.DtIconArrowLeft,DtIconArrowUp:r.DtIconArrowUp,DtIconArrowDown:r.DtIconArrowDown,DtIconCommand:r.DtIconCommand,DtIconPlus:r.DtIconPlus},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...c,"{plus}":r.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,"{plus}")},formattedShortcut(){return Object.keys(c).reduce((o,t)=>o.replace(new RegExp("{"+t+"}","gi"),c[t]),this.shortcutWithSeparator)},formattedShortcutSplit(){const o=Object.keys(this.icons).join("|"),t=new RegExp(`(${o})`,"gi");return this.formattedShortcut.split(t).filter(Boolean)}}};var d=function(){var t=this,n=t._self._c;return n("kbd",{class:["d-keyboard-shortcut",{"d-keyboard-shortcut--inverted":t.inverted}]},[t.screenReaderText?n("span",{staticClass:"d-keyboard-shortcut--sr-only"},[t._v(" "+t._s(t.screenReaderText)+" ")]):t._e(),t._l(t.formattedShortcutSplit,function(e,s){return[t.icons[e]?n(t.icons[e],{key:`${s}-${e}`,tag:"component",class:["d-keyboard-shortcut__icon",{"d-keyboard-shortcut__icon--inverted":t.inverted}],attrs:{size:"100","aria-hidden":"true"}}):n("span",{key:`${s}-${e}`,class:["d-keyboard-shortcut__item",{"d-keyboard-shortcut__item--inverted":t.inverted}],attrs:{"aria-hidden":"true"},domProps:{innerHTML:t._s(e)}})]})],2)},u=[],l=a.n(i,d,u);const _=l.exports;exports.default=_;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),a=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),c={"{win}":r.DtIconLayoutGrid,"{arrow-right}":r.DtIconArrowRight,"{arrow-left}":r.DtIconArrowLeft,"{arrow-up}":r.DtIconArrowUp,"{arrow-down}":r.DtIconArrowDown,"{cmd}":r.DtIconCommand},i={name:"DtKeyboardShortcut",components:{DtIconLayoutGrid:r.DtIconLayoutGrid,DtIconArrowRight:r.DtIconArrowRight,DtIconArrowLeft:r.DtIconArrowLeft,DtIconArrowUp:r.DtIconArrowUp,DtIconArrowDown:r.DtIconArrowDown,DtIconCommand:r.DtIconCommand,DtIconPlus:r.DtIconPlus},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...c,"{plus}":r.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,"{plus}")},formattedShortcut(){return Object.keys(c).reduce((o,t)=>o.replace(new RegExp("{"+t+"}","gi"),c[t]),this.shortcutWithSeparator)},formattedShortcutSplit(){const o=Object.keys(this.icons).join("|"),t=new RegExp(`(${o})`,"gi");return this.formattedShortcut.split(t).filter(Boolean)}}};var u=function(){var t=this,n=t._self._c;return n("kbd",{class:["d-keyboard-shortcut",{"d-keyboard-shortcut--inverted":t.inverted}]},[t.screenReaderText?n("span",{staticClass:"d-keyboard-shortcut--sr-only"},[t._v(" "+t._s(t.screenReaderText)+" ")]):t._e(),t._l(t.formattedShortcutSplit,function(e,s){return[t.icons[e]?n(t.icons[e],{key:`${s}-${e}`,tag:"component",class:["d-keyboard-shortcut__icon",{"d-keyboard-shortcut__icon--inverted":t.inverted}],attrs:{size:"100","aria-hidden":"true"}}):n("span",{key:`${s}-${e}`,class:["d-keyboard-shortcut__item",{"d-keyboard-shortcut__item--inverted":t.inverted}],attrs:{"aria-hidden":"true"},domProps:{innerHTML:t._s(e)}})]})],2)},d=[],l=a.n(i,u,d,!1,null,null);const _=l.exports;exports.default=_;
 //# sourceMappingURL=keyboard-shortcut.cjs.map

package/dist/lib/keyboard-shortcut/keyboard-shortcut.js CHANGED Viewed

@@ -1,21 +1,21 @@
-import { DtIconLayoutGrid as c, DtIconArrowRight as d, DtIconArrowLeft as i, DtIconArrowUp as u, DtIconArrowDown as p, DtIconCommand as h, DtIconPlus as a } from "@dialpad/dialtone-icons/vue2";
-import { n as _ } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { DtIconLayoutGrid as c, DtIconArrowRight as d, DtIconArrowLeft as i, DtIconArrowUp as u, DtIconArrowDown as l, DtIconCommand as p, DtIconPlus as a } from "@dialpad/dialtone-icons/vue2";
+import { n as h } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
 const n = {
   "{win}": c,
   "{arrow-right}": d,
   "{arrow-left}": i,
   "{arrow-up}": u,
-  "{arrow-down}": p,
-  "{cmd}": h
-}, l = {
+  "{arrow-down}": l,
+  "{cmd}": p
+}, _ = {
   name: "DtKeyboardShortcut",
   components: {
     DtIconLayoutGrid: c,
     DtIconArrowRight: d,
     DtIconArrowLeft: i,
     DtIconArrowUp: u,
-    DtIconArrowDown: p,
-    DtIconCommand: h,
+    DtIconArrowDown: l,
+    DtIconCommand: p,
     DtIconPlus: a
   },
   props: {
@@ -82,10 +82,13 @@ var f = function() {
       { "d-keyboard-shortcut__item--inverted": t.inverted }
     ], attrs: { "aria-hidden": "true" }, domProps: { innerHTML: t._s(r) } })];
   })], 2);
-}, m = [], y = /* @__PURE__ */ _(
-  l,
+}, m = [], y = /* @__PURE__ */ h(
+  _,
   f,
-  m
+  m,
+  !1,
+  null,
+  null
 );
 const w = y.exports;
 export {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard-shortcut.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n v-if=\"screenReaderText\"\n class=\"d-keyboard-shortcut--sr-only\"\n >\n {{ screenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <span\n v-else\n :key=\"`${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n />\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\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":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","_sfc_main","DtIconPlus","result","key","iconAliasString","regex"],"mappings":";;AAqDA,MAAAA,IAAA;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AACA,GAMAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAN;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAE;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,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA;AAAA,QACA,GAAAR;AAAA,QACA,UAAAQ;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,SAAA,QAAA,KAAA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,OAAA,KAAAR,CAAA,EAAA,OAAA,CAAAS,GAAAC,MACAD,EAAA,QAAA,IAAA,OAAA,MAAAC,IAAA,KAAA,IAAA,GAAAV,EAAAU,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~~;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"keyboard-shortcut.js","sources":["../../../components/keyboard_shortcut/keyboard_shortcut.vue"],"sourcesContent":["<!-- eslint-disable vue/no-v-html -->\n<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n v-if=\"screenReaderText\"\n class=\"d-keyboard-shortcut--sr-only\"\n >\n {{ screenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <span\n v-else\n :key=\"`${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n />\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue2';\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":["SHORTCUTS_ICON_ALIASES","DtIconLayoutGrid","DtIconArrowRight","DtIconArrowLeft","DtIconArrowUp","DtIconArrowDown","DtIconCommand","_sfc_main","DtIconPlus","result","key","iconAliasString","regex"],"mappings":";;AAqDA,MAAAA,IAAA;AAAA,EACA,SAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,SAAAC;AACA,GAMAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,kBAAAN;AAAA,IACA,kBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAE;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,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,QAAA;AACA,aAAA;AAAA,QACA,GAAAR;AAAA,QACA,UAAAQ;AAAA,MACA;AAAA,IACA;AAAA,IAEA,wBAAA;AACA,aAAA,KAAA,SAAA,QAAA,KAAA,WAAA,QAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,OAAA,KAAAR,CAAA,EAAA,OAAA,CAAAS,GAAAC,MACAD,EAAA,QAAA,IAAA,OAAA,MAAAC,IAAA,KAAA,IAAA,GAAAV,EAAAU,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/lazy-show.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),n={name:"DtLazyShow",props:{show:{type:Boolean,default:!1},transition:{type:String,default:null},appear:{type:Boolean,default:!1}},data(){return{initialized:!!this.show}},computed:{isCSSEnabled(){return process.env.NODE_ENV!=="test"}},watch:{show:function(t){!t||this.initialized||(this.initialized=!0)}}};var s=function(){var e=this,i=e._self._c;return i("transition",e._g({attrs:{name:e.transition,appear:e.appear,css:e.isCSSEnabled}},e.$listeners),[i("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=a.n(n,s,r);const l=o.exports;exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),i={name:"DtLazyShow",props:{show:{type:Boolean,default:!1},transition:{type:String,default:null},appear:{type:Boolean,default:!1}},data(){return{initialized:!!this.show}},computed:{isCSSEnabled(){return process.env.NODE_ENV!=="test"}},watch:{show:function(t){!t||this.initialized||(this.initialized=!0)}}};var s=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=a.n(i,s,r,!1,null,null);const l=o.exports;exports.default=l;
 //# sourceMappingURL=lazy-show.cjs.map

package/dist/lib/lazy-show/lazy-show.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { n } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { n } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
 const s = {
   name: "DtLazyShow",
   /******************
@@ -63,7 +63,10 @@ var i = function() {
 }, r = [], o = /* @__PURE__ */ n(
   s,
   i,
-  r
+  r,
+  !1,
+  null,
+  null
 );
 const p = o.exports;
 export {

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

	@@ -1 +1 @@
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~~;;;;;;;;;;~~"}
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/link.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./link-constants.cjs"),i=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),s={name:"DtLink",props:{kind:{type:String,default:"",validator(n){return t.LINK_VARIANTS.includes(n)}},inverted:{type:Boolean,default:!1}},emits:["click","focusin","focusout"],data(){return{LINK_KIND_MODIFIERS:t.LINK_KIND_MODIFIERS}},methods:{getLinkClasses(){return["d-link",t.getLinkKindModifier(this.kind,this.inverted)]}}};var a=function(){var e=this,r=e._self._c;return r("a",e._g({class:e.getLinkClasses(),attrs:{"data-qa":"dt-link",href:"href"in e.$attrs?e.$attrs.href:"javascript:void(0)"}},e.$listeners),[e._t("default")],2)},_=[],l=i.n(s,a,_);const o=l.exports;exports.default=o;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./link-constants.cjs"),s=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),i={name:"DtLink",props:{kind:{type:String,default:"",validator(n){return t.LINK_VARIANTS.includes(n)}},inverted:{type:Boolean,default:!1}},emits:["click","focusin","focusout"],data(){return{LINK_KIND_MODIFIERS:t.LINK_KIND_MODIFIERS}},methods:{getLinkClasses(){return["d-link",t.getLinkKindModifier(this.kind,this.inverted)]}}};var a=function(){var e=this,r=e._self._c;return r("a",e._g({class:e.getLinkClasses(),attrs:{"data-qa":"dt-link",href:"href"in e.$attrs?e.$attrs.href:"javascript:void(0)"}},e.$listeners),[e._t("default")],2)},l=[],_=s.n(i,a,l,!1,null,null);const o=_.exports;exports.default=o;
 //# sourceMappingURL=link.cjs.map

package/dist/lib/link/link.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { LINK_VARIANTS as r, LINK_KIND_MODIFIERS as s, getLinkKindModifier as i } from "./link-constants.js";
-import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { LINK_VARIANTS as r, LINK_KIND_MODIFIERS as s, getLinkKindModifier as a } from "./link-constants.js";
+import { n as i } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
 const o = {
   name: "DtLink",
   props: {
@@ -56,18 +56,21 @@ const o = {
     getLinkClasses() {
       return [
         "d-link",
-        i(this.kind, this.inverted)
+        a(this.kind, this.inverted)
       ];
     }
   }
 };
-var d = function() {
+var l = function() {
   var t = this, n = t._self._c;
   return n("a", t._g({ class: t.getLinkClasses(), attrs: { "data-qa": "dt-link", href: "href" in t.$attrs ? t.$attrs.href : "javascript:void(0)" } }, t.$listeners), [t._t("default")], 2);
-}, _ = [], f = /* @__PURE__ */ a(
+}, d = [], f = /* @__PURE__ */ i(
   o,
+  l,
   d,
-  _
+  !1,
+  null,
+  null
 );
 const u = f.exports;
 export {

package/dist/lib/link/link.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link.js","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n <a\n :class=\"getLinkClasses()\"\n data-qa=\"dt-link\"\n :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n 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, getLinkKindModifier } from './link_constants';\n\n/*\n A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n /\nexport default {\n name: 'DtLink',\n\n props: {\n /\n Applies the link variant styles\n * @values null, danger, warning, success, muted, mention\n /\n kind: {\n type: String,\n default: '',\n validator (kind) {\n return LINK_VARIANTS.includes(kind);\n },\n },\n\n /\n Determines whether the link should have inverted styling\n * default is false.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n },\n\n 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 methods: {\n getLinkClasses () {\n return [\n 'd-link',\n getLinkKindModifier(this.kind, this.inverted),\n ];\n },\n },\n};\n</script>\n"],"names":["_sfc_main","kind","LINK_VARIANTS","LINK_KIND_MODIFIERS","getLinkKindModifier"],"mappings":";;AAqBA,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;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;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;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAC,EAAA,KAAA,MAAA,KAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;~~"}
1	+ {"version":3,"file":"link.js","sources":["../../../components/link/link.vue"],"sourcesContent":["<template>\n <a\n :class=\"getLinkClasses()\"\n data-qa=\"dt-link\"\n :href=\"'href' in $attrs ? $attrs.href : 'javascript:void(0)'\"\n 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, getLinkKindModifier } from './link_constants';\n\n/*\n A link is a navigational element that can be found on its own, within other text, or directly following content.\n * @property {String} href attribute\n * @property {String} rel attribute\n * @see https://dialtone.dialpad.com/components/link.html\n /\nexport default {\n name: 'DtLink',\n\n props: {\n /\n Applies the link variant styles\n * @values null, danger, warning, success, muted, mention\n /\n kind: {\n type: String,\n default: '',\n validator (kind) {\n return LINK_VARIANTS.includes(kind);\n },\n },\n\n /\n Determines whether the link should have inverted styling\n * default is false.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n },\n\n 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 methods: {\n getLinkClasses () {\n return [\n 'd-link',\n getLinkKindModifier(this.kind, this.inverted),\n ];\n },\n },\n};\n</script>\n"],"names":["_sfc_main","kind","LINK_VARIANTS","LINK_KIND_MODIFIERS","getLinkKindModifier"],"mappings":";;AAqBA,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;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;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;AAAA,EAEA,SAAA;AAAA,IACA,iBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACAC,EAAA,KAAA,MAAA,KAAA,QAAA;AAAA,MACA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;"}

package/dist/lib/list-item/list-item.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./list-item-constants.cjs"),o=require("../../common/utils/index.cjs"),n=require("@dialpad/dialtone-icons/vue2"),r=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),u=require("../item-layout/item-layout.cjs"),a=["listitem","menuitem","option"],d={name:"DtListItem",components:{DtItemLayout:u.default,DtIconCheck:n.DtIconCheck},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return o.default.getUniqueString()}},role:{type:String,default:"listitem",validator:t=>a.includes(t)},elementType:{type:String,default:"li"},type:{type:String,default:i.LIST_ITEM_TYPES.DEFAULT,validator:t=>Object.values(i.LIST_ITEM_TYPES).includes(t)},navigationType:{type:String,default:i.LIST_ITEM_NAVIGATION_TYPES.NONE,validator:t=>Object.values(i.LIST_ITEM_NAVIGATION_TYPES).includes(t)},selected:{type:Boolean,default:!1}},emits:["click","keydown","mousemove","mouseleave"],data(){return{injected:!1,mouseHighlighted:!1}},computed:{isDefaultType(){return this.type===i.LIST_ITEM_TYPES.DEFAULT},listItemListeners(){return{...this.$listeners,keydown:t=>{["enter","space"].includes(t.code.toLowerCase())&&this.onClick(t),this.$emit("keydown",t)},mousemove:t=>{this.onMouseHover(t),this.$emit("mousemove",t)},mouseleave:t=>{this.onMouseLeave(t),this.$emit("mouseleave",t)}}},isHighlighted(){return this.isHoverable?this.highlightId&&this.highlightId()?this.id===this.highlightId():this.mouseHighlighted:!1},isFocusable(){return this.navigationType===i.LIST_ITEM_NAVIGATION_TYPES.TAB},isHoverable(){return this.navigationType!==i.LIST_ITEM_NAVIGATION_TYPES.NONE}},methods:{onClick(t){this.$emit("click",t)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};var c=function(){var e=this,s=e._self._c;return s(e.elementType,e._g({tag:"component",class:["d-list-item",{"d-list-item--focusable":e.isFocusable,"d-list-item--highlighted":e.isHighlighted,"d-list-item--static":!e.isHoverable}],attrs:{id:e.id,tabindex:e.isFocusable?0:-1,role:e.role,"aria-selected":e.role==="listitem"?void 0:e.isHighlighted}},e.listItemListeners),[e.isDefaultType?s("dt-item-layout",{staticClass:"d-list-item__wrapper",attrs:{unstyled:"","left-class":"d-list-item__left","content-class":"d-list-item__content","title-class":"d-list-item__title","subtitle-class":"d-list-item__subtitle","bottom-class":"d-list-item__bottom","right-class":"d-list-item__right","selected-class":"d-list-item__selected"},scopedSlots:e._u([e._l(e.$slots,function(g,l){return{key:l,fn:function(){return[e._t(l)]},proxy:!0}}),e.selected?{key:"selected",fn:function(){return[s("dt-icon-check",{attrs:{size:"400"}})]},proxy:!0}:null],null,!0)}):e._t("default")],2)},_=[],m=r.n(d,c,_);const h=m.exports;exports.default=h;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./list-item-constants.cjs"),n=require("../../common/utils/index.cjs"),o=require("@dialpad/dialtone-icons/vue2"),r=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),u=require("../item-layout/item-layout.cjs"),a=["listitem","menuitem","option"],d={name:"DtListItem",components:{DtItemLayout:u.default,DtIconCheck:o.DtIconCheck},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return n.default.getUniqueString()}},role:{type:String,default:"listitem",validator:t=>a.includes(t)},elementType:{type:String,default:"li"},type:{type:String,default:i.LIST_ITEM_TYPES.DEFAULT,validator:t=>Object.values(i.LIST_ITEM_TYPES).includes(t)},navigationType:{type:String,default:i.LIST_ITEM_NAVIGATION_TYPES.NONE,validator:t=>Object.values(i.LIST_ITEM_NAVIGATION_TYPES).includes(t)},selected:{type:Boolean,default:!1}},emits:["click","keydown","mousemove","mouseleave"],data(){return{injected:!1,mouseHighlighted:!1}},computed:{isDefaultType(){return this.type===i.LIST_ITEM_TYPES.DEFAULT},listItemListeners(){return{...this.$listeners,keydown:t=>{["enter","space"].includes(t.code.toLowerCase())&&this.onClick(t),this.$emit("keydown",t)},mousemove:t=>{this.onMouseHover(t),this.$emit("mousemove",t)},mouseleave:t=>{this.onMouseLeave(t),this.$emit("mouseleave",t)}}},isHighlighted(){return this.isHoverable?this.highlightId&&this.highlightId()?this.id===this.highlightId():this.mouseHighlighted:!1},isFocusable(){return this.navigationType===i.LIST_ITEM_NAVIGATION_TYPES.TAB},isHoverable(){return this.navigationType!==i.LIST_ITEM_NAVIGATION_TYPES.NONE}},methods:{onClick(t){this.$emit("click",t)},onMouseHover(){this.mouseHighlighted=!0},onMouseLeave(){this.mouseHighlighted=!1}}};var c=function(){var e=this,s=e._self._c;return s(e.elementType,e._g({tag:"component",class:["d-list-item",{"d-list-item--focusable":e.isFocusable,"d-list-item--highlighted":e.isHighlighted,"d-list-item--static":!e.isHoverable}],attrs:{id:e.id,tabindex:e.isFocusable?0:-1,role:e.role,"aria-selected":e.role==="listitem"?void 0:e.isHighlighted}},e.listItemListeners),[e.isDefaultType?s("dt-item-layout",{staticClass:"d-list-item__wrapper",attrs:{unstyled:"","left-class":"d-list-item__left","content-class":"d-list-item__content","title-class":"d-list-item__title","subtitle-class":"d-list-item__subtitle","bottom-class":"d-list-item__bottom","right-class":"d-list-item__right","selected-class":"d-list-item__selected"},scopedSlots:e._u([e._l(e.$slots,function(g,l){return{key:l,fn:function(){return[e._t(l)]},proxy:!0}}),e.selected?{key:"selected",fn:function(){return[s("dt-icon-check",{attrs:{size:"400"}})]},proxy:!0}:null],null,!0)}):e._t("default")],2)},_=[],m=r.n(d,c,_,!1,null,null);const h=m.exports;exports.default=h;
 //# sourceMappingURL=list-item.cjs.map

package/dist/lib/list-item/list-item.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { LIST_ITEM_TYPES as l, LIST_ITEM_NAVIGATION_TYPES as i } from "./list-item-constants.js";
 import n from "../../common/utils/index.js";
 import { DtIconCheck as r } from "@dialpad/dialtone-icons/vue2";
-import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import { n as a } from "../../_plugin-vue2_normalizer-CeySl7Fu.js";
 import u from "../item-layout/item-layout.js";
 const d = ["listitem", "menuitem", "option"], m = {
   name: "DtListItem",
@@ -31,7 +31,7 @@ const d = ["listitem", "menuitem", "option"], m = {
     role: {
       type: String,
       default: "listitem",
-      validator: (e) => d.includes(e)
+      validator: (t) => d.includes(t)
     },
     /**
      * HTML element type (tag name) of the content wrapper element.
@@ -47,7 +47,7 @@ const d = ["listitem", "menuitem", "option"], m = {
     type: {
       type: String,
       default: l.DEFAULT,
-      validator: (e) => Object.values(l).includes(e)
+      validator: (t) => Object.values(l).includes(t)
     },
     /**
      * The type of navigation that this component should support.
@@ -59,7 +59,7 @@ const d = ["listitem", "menuitem", "option"], m = {
     navigationType: {
       type: String,
       default: i.NONE,
-      validator: (e) => Object.values(i).includes(e)
+      validator: (t) => Object.values(i).includes(t)
     },
     /**
      * Applies selected styles to the list item
@@ -112,14 +112,14 @@ const d = ["listitem", "menuitem", "option"], m = {
     listItemListeners() {
       return {
         ...this.$listeners,
-        keydown: (e) => {
-          ["enter", "space"].includes(e.code.toLowerCase()) && this.onClick(e), this.$emit("keydown", e);
+        keydown: (t) => {
+          ["enter", "space"].includes(t.code.toLowerCase()) && this.onClick(t), this.$emit("keydown", t);
         },
-        mousemove: (e) => {
-          this.onMouseHover(e), this.$emit("mousemove", e);
+        mousemove: (t) => {
+          this.onMouseHover(t), this.$emit("mousemove", t);
         },
-        mouseleave: (e) => {
-          this.onMouseLeave(e), this.$emit("mouseleave", e);
+        mouseleave: (t) => {
+          this.onMouseLeave(t), this.$emit("mouseleave", t);
         }
       };
     },
@@ -141,8 +141,8 @@ const d = ["listitem", "menuitem", "option"], m = {
     }
   },
   methods: {
-    onClick(e) {
-      this.$emit("click", e);
+    onClick(t) {
+      this.$emit("click", t);
     },
     onMouseHover() {
       this.mouseHighlighted = !0;
@@ -153,25 +153,28 @@ const d = ["listitem", "menuitem", "option"], m = {
   }
 };
 var c = function() {
-  var t = this, s = t._self._c;
-  return s(t.elementType, t._g({ tag: "component", class: [
+  var e = this, s = e._self._c;
+  return s(e.elementType, e._g({ tag: "component", class: [
     "d-list-item",
     {
-      "d-list-item--focusable": t.isFocusable,
-      "d-list-item--highlighted": t.isHighlighted,
-      "d-list-item--static": !t.isHoverable
+      "d-list-item--focusable": e.isFocusable,
+      "d-list-item--highlighted": e.isHighlighted,
+      "d-list-item--static": !e.isHoverable
     }
-  ], attrs: { id: t.id, tabindex: t.isFocusable ? 0 : -1, role: t.role, "aria-selected": t.role === "listitem" ? void 0 : t.isHighlighted } }, t.listItemListeners), [t.isDefaultType ? s("dt-item-layout", { staticClass: "d-list-item__wrapper", attrs: { unstyled: "", "left-class": "d-list-item__left", "content-class": "d-list-item__content", "title-class": "d-list-item__title", "subtitle-class": "d-list-item__subtitle", "bottom-class": "d-list-item__bottom", "right-class": "d-list-item__right", "selected-class": "d-list-item__selected" }, scopedSlots: t._u([t._l(t.$slots, function(f, o) {
+  ], attrs: { id: e.id, tabindex: e.isFocusable ? 0 : -1, role: e.role, "aria-selected": e.role === "listitem" ? void 0 : e.isHighlighted } }, e.listItemListeners), [e.isDefaultType ? s("dt-item-layout", { staticClass: "d-list-item__wrapper", attrs: { unstyled: "", "left-class": "d-list-item__left", "content-class": "d-list-item__content", "title-class": "d-list-item__title", "subtitle-class": "d-list-item__subtitle", "bottom-class": "d-list-item__bottom", "right-class": "d-list-item__right", "selected-class": "d-list-item__selected" }, scopedSlots: e._u([e._l(e.$slots, function(f, o) {
     return { key: o, fn: function() {
-      return [t._t(o)];
+      return [e._t(o)];
     }, proxy: !0 };
-  }), t.selected ? { key: "selected", fn: function() {
+  }), e.selected ? { key: "selected", fn: function() {
     return [s("dt-icon-check", { attrs: { size: "400" } })];
-  }, proxy: !0 } : null], null, !0) }) : t._t("default")], 2);
+  }, proxy: !0 } : null], null, !0) }) : e._t("default")], 2);
 }, h = [], _ = /* @__PURE__ */ a(
   m,
   c,
-  h
+  h,
+  !1,
+  null,
+  null
 );
 const I = _.exports;
 export {

package/dist/lib/list-item/list-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"list-item.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"[\n 'd-list-item',\n {\n 'd-list-item--focusable': isFocusable,\n 'd-list-item--highlighted': isHighlighted,\n 'd-list-item--static': !isHoverable,\n }]\"\n :tabindex=\"isFocusable ? 0 : -1\"\n :role=\"role\"\n :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n v-on=\"listItemListeners\"\n >\n <dt-item-layout\n v-if=\"isDefaultType\"\n unstyled\n class=\"d-list-item__wrapper\"\n left-class=\"d-list-item__left\"\n content-class=\"d-list-item__content\"\n title-class=\"d-list-item__title\"\n subtitle-class=\"d-list-item__subtitle\"\n bottom-class=\"d-list-item__bottom\"\n right-class=\"d-list-item__right\"\n selected-class=\"d-list-item__selected\"\n >\n <template\n v-for=\"(_, slotName) in $slots\"\n #[slotName]\n >\n <!-- @slot named slots for custom list items -->\n <slot :name=\"slotName\" />\n </template>\n <template\n v-if=\"selected\"\n #selected\n >\n <dt-icon-check size=\"400\" />\n </template>\n </dt-item-layout>\n <!-- @slot slot for the main content -->\n <slot v-else />\n </component>\n</template>\n\n<script>\nimport {\n LIST_ITEM_TYPES,\n LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue2';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/*\n A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n /\nexport default {\n name: 'DtListItem',\n\n components: {\n DtItemLayout,\n DtIconCheck,\n },\n\n /\n Value provided from keyboard_list_navigation.js using id prop.\n /\n inject: {\n highlightId: { default: null },\n },\n\n props: {\n /\n Id for the item.\n /\n id: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n String to use for the item's role.\n /\n role: {\n type: String,\n default: 'listitem',\n validator: (role) => (ROLES).includes(role),\n },\n\n /\n HTML element type (tag name) of the content wrapper element.\n /\n elementType: {\n type: String,\n default: 'li',\n },\n\n /\n The type of child list item to use.\n * @values default, custom\n /\n type: {\n type: String,\n default: LIST_ITEM_TYPES.DEFAULT,\n validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n },\n\n /\n The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n /\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /\n Applies selected styles to the list item\n /\n selected: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Native click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n Native mouse move event\n \n @event mousemove\n * @type {MouseEvent}\n /\n 'mousemove',\n\n /\n Native mouse leave event\n \n @event mouseleave\n * @type {MouseEvent}\n /\n 'mouseleave',\n ],\n\n data () {\n return {\n injected: false,\n mouseHighlighted: false,\n };\n },\n\n computed: {\n isDefaultType () {\n if (this.type === LIST_ITEM_TYPES.DEFAULT) return true;\n return false;\n },\n\n listItemListeners () {\n return {\n ...this.$listeners,\n keydown: event => {\n if (['enter', 'space'].includes(event.code.toLowerCase())) {\n this.onClick(event);\n }\n this.$emit('keydown', event);\n },\n\n mousemove: event => {\n this.onMouseHover(event);\n this.$emit('mousemove', event);\n },\n\n mouseleave: event => {\n this.onMouseLeave(event);\n this.$emit('mouseleave', event);\n },\n };\n },\n\n /\n For keyboard navigation, whether this item is currently highlighted.\n * An injected highlightId will override the default mouseover highlight.\n /\n isHighlighted () {\n if (this.isHoverable) {\n return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n }\n return false;\n },\n\n isFocusable () {\n // Navigation type has to be set to \"tab\".\n return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n },\n\n /\n Whether to apply hover styles.\n */\n isHoverable () {\n return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n },\n },\n\n methods: {\n onClick (e) {\n this.$emit('click', e);\n },\n\n onMouseHover () {\n this.mouseHighlighted = true;\n },\n\n onMouseLeave () {\n this.mouseHighlighted = false;\n },\n },\n};\n</script>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIconCheck","utils","role","LIST_ITEM_TYPES","t","~~LIST_ITEM_NAVIGATION_TYPES~~","~~event~~"],"mappings":";;;;;AAwDA,MAAAA,IAAA,CAAA,YAAA,YAAA,QAAA,GAMAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKA,QAAA;AAAA,IACA,aAAA,EAAA,SAAA,KAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAC,EAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAL,EAAA,SAAAK,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,~~CAAAC~~,MAAA,OAAA,~~OAAAD~~,CAAA,EAAA,~~SAAAC~~,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,~~CAAAD~~,MAAA,OAAA,~~OAAAC~~,CAAA,EAAA,~~SAAAD~~,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA,KAAA,SAAAD,EAAA;AAAA,IAEA;AAAA,IAEA,oBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,SAAA,~~CAAAG~~,MAAA;AACA,UAAA,CAAA,SAAA,OAAA,EAAA,SAAAA,EAAA,KAAA,YAAA,CAAA,KACA,KAAA,QAAAA,CAAA,GAEA,KAAA,MAAA,WAAAA,CAAA;AAAA,QACA;AAAA,QAEA,WAAA,CAAAA,MAAA;AACA,eAAA,aAAAA,CAAA,GACA,KAAA,MAAA,aAAAA,CAAA;AAAA,QACA;AAAA,QAEA,YAAA,CAAAA,MAAA;AACA,eAAA,aAAAA,CAAA,GACA,KAAA,MAAA,cAAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AACA,aAAA,KAAA,cACA,KAAA,eAAA,KAAA,YAAA,IAAA,KAAA,OAAA,KAAA,gBAAA,KAAA,mBAEA;AAAA,IACA;AAAA,IAEA,cAAA;AAEA,aAAA,KAAA,mBAAAD,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AACA,aAAA,KAAA,mBAAAA,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,~~QAAA~~,GAAA;AACA,WAAA,MAAA,~~SAAA~~,CAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA~~;;;;;;;;;;;;;;;;;;;;;;;~~"}
1	+ {"version":3,"file":"list-item.js","sources":["../../../components/list_item/list_item.vue"],"sourcesContent":["<template>\n <component\n :is=\"elementType\"\n :id=\"id\"\n :class=\"[\n 'd-list-item',\n {\n 'd-list-item--focusable': isFocusable,\n 'd-list-item--highlighted': isHighlighted,\n 'd-list-item--static': !isHoverable,\n }]\"\n :tabindex=\"isFocusable ? 0 : -1\"\n :role=\"role\"\n :aria-selected=\"role === 'listitem' ? undefined : isHighlighted\"\n v-on=\"listItemListeners\"\n >\n <dt-item-layout\n v-if=\"isDefaultType\"\n unstyled\n class=\"d-list-item__wrapper\"\n left-class=\"d-list-item__left\"\n content-class=\"d-list-item__content\"\n title-class=\"d-list-item__title\"\n subtitle-class=\"d-list-item__subtitle\"\n bottom-class=\"d-list-item__bottom\"\n right-class=\"d-list-item__right\"\n selected-class=\"d-list-item__selected\"\n >\n <template\n v-for=\"(_, slotName) in $slots\"\n #[slotName]\n >\n <!-- @slot named slots for custom list items -->\n <slot :name=\"slotName\" />\n </template>\n <template\n v-if=\"selected\"\n #selected\n >\n <dt-icon-check size=\"400\" />\n </template>\n </dt-item-layout>\n <!-- @slot slot for the main content -->\n <slot v-else />\n </component>\n</template>\n\n<script>\nimport {\n LIST_ITEM_TYPES,\n LIST_ITEM_NAVIGATION_TYPES,\n} from './list_item_constants';\nimport utils from '@/common/utils';\nimport { DtIconCheck } from '@dialpad/dialtone-icons/vue2';\nimport { DtItemLayout } from '@/components/item_layout';\n\nconst ROLES = ['listitem', 'menuitem', 'option'];\n\n/*\n A list item is an element that can be used to represent individual items in a list.\n * @see https://dialtone.dialpad.com/components/list_item.html\n /\nexport default {\n name: 'DtListItem',\n\n components: {\n DtItemLayout,\n DtIconCheck,\n },\n\n /\n Value provided from keyboard_list_navigation.js using id prop.\n /\n inject: {\n highlightId: { default: null },\n },\n\n props: {\n /\n Id for the item.\n /\n id: {\n type: String,\n default () { return utils.getUniqueString(); },\n },\n\n /\n String to use for the item's role.\n /\n role: {\n type: String,\n default: 'listitem',\n validator: (role) => (ROLES).includes(role),\n },\n\n /\n HTML element type (tag name) of the content wrapper element.\n /\n elementType: {\n type: String,\n default: 'li',\n },\n\n /\n The type of child list item to use.\n * @values default, custom\n /\n type: {\n type: String,\n default: LIST_ITEM_TYPES.DEFAULT,\n validator: (t) => Object.values(LIST_ITEM_TYPES).includes(t),\n },\n\n /\n The type of navigation that this component should support.\n * - \"arrow-keys\" for items that are navigated with UP/DOWN keys.\n * - \"tab\" for items that are navigated using the TAB key.\n * - \"none\" for static items that are not interactive.\n * @values arrow-keys, tab, none\n /\n navigationType: {\n type: String,\n default: LIST_ITEM_NAVIGATION_TYPES.NONE,\n validator: (t) => Object.values(LIST_ITEM_NAVIGATION_TYPES).includes(t),\n },\n\n /\n Applies selected styles to the list item\n /\n selected: {\n type: Boolean,\n default: false,\n },\n },\n\n emits: [\n /\n Native click event\n \n @event click\n * @type {PointerEvent \| KeyboardEvent}\n /\n 'click',\n\n /\n Key down event\n \n @event keydown\n * @type {KeyboardEvent}\n /\n 'keydown',\n\n /\n Native mouse move event\n \n @event mousemove\n * @type {MouseEvent}\n /\n 'mousemove',\n\n /\n Native mouse leave event\n \n @event mouseleave\n * @type {MouseEvent}\n /\n 'mouseleave',\n ],\n\n data () {\n return {\n injected: false,\n mouseHighlighted: false,\n };\n },\n\n computed: {\n isDefaultType () {\n if (this.type === LIST_ITEM_TYPES.DEFAULT) return true;\n return false;\n },\n\n listItemListeners () {\n return {\n ...this.$listeners,\n keydown: event => {\n if (['enter', 'space'].includes(event.code.toLowerCase())) {\n this.onClick(event);\n }\n this.$emit('keydown', event);\n },\n\n mousemove: event => {\n this.onMouseHover(event);\n this.$emit('mousemove', event);\n },\n\n mouseleave: event => {\n this.onMouseLeave(event);\n this.$emit('mouseleave', event);\n },\n };\n },\n\n /\n For keyboard navigation, whether this item is currently highlighted.\n * An injected highlightId will override the default mouseover highlight.\n /\n isHighlighted () {\n if (this.isHoverable) {\n return this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted;\n }\n return false;\n },\n\n isFocusable () {\n // Navigation type has to be set to \"tab\".\n return this.navigationType === LIST_ITEM_NAVIGATION_TYPES.TAB;\n },\n\n /\n Whether to apply hover styles.\n */\n isHoverable () {\n return this.navigationType !== LIST_ITEM_NAVIGATION_TYPES.NONE;\n },\n },\n\n methods: {\n onClick (e) {\n this.$emit('click', e);\n },\n\n onMouseHover () {\n this.mouseHighlighted = true;\n },\n\n onMouseLeave () {\n this.mouseHighlighted = false;\n },\n },\n};\n</script>\n"],"names":["ROLES","_sfc_main","DtItemLayout","DtIconCheck","utils","role","LIST_ITEM_TYPES","LIST_ITEM_NAVIGATION_TYPES","event","e"],"mappings":";;;;;AAwDA,MAAAA,IAAA,CAAA,YAAA,YAAA,QAAA,GAMAC,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,cAAAC;AAAA,IACA,aAAAC;AAAA,EACA;AAAA;AAAA;AAAA;AAAA,EAKA,QAAA;AAAA,IACA,aAAA,EAAA,SAAA,KAAA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,IAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,eAAAC,EAAA,gBAAA;AAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAAL,EAAA,SAAAK,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,OAAAA,CAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IASA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC,EAAA;AAAA,MACA,WAAA,CAAA,MAAA,OAAA,OAAAA,CAAA,EAAA,SAAA,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA,KAAA,SAAAD,EAAA;AAAA,IAEA;AAAA,IAEA,oBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,SAAA,CAAAE,MAAA;AACA,UAAA,CAAA,SAAA,OAAA,EAAA,SAAAA,EAAA,KAAA,YAAA,CAAA,KACA,KAAA,QAAAA,CAAA,GAEA,KAAA,MAAA,WAAAA,CAAA;AAAA,QACA;AAAA,QAEA,WAAA,CAAAA,MAAA;AACA,eAAA,aAAAA,CAAA,GACA,KAAA,MAAA,aAAAA,CAAA;AAAA,QACA;AAAA,QAEA,YAAA,CAAAA,MAAA;AACA,eAAA,aAAAA,CAAA,GACA,KAAA,MAAA,cAAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AACA,aAAA,KAAA,cACA,KAAA,eAAA,KAAA,YAAA,IAAA,KAAA,OAAA,KAAA,gBAAA,KAAA,mBAEA;AAAA,IACA;AAAA,IAEA,cAAA;AAEA,aAAA,KAAA,mBAAAD,EAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AACA,aAAA,KAAA,mBAAAA,EAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,QAAAE,GAAA;AACA,WAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,WAAA,mBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/lib/list-item-group/list-item-group.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../../common/utils/index.cjs"),i=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),a={name:"DtListItemGroup",props:{id:{type:String,default(){return r.getUniqueString()}},heading:{type:String,default:""},headingClass:{type:[String,Array,Object],default:""},listClass:{type:[String,Array,Object],default:""}}};var n=function(){var e=this,t=e._self._c;return t("ul",{class:["d-list-item-group",e.listClass],attrs:{id:e.id,role:"group","data-qa":"dt-dropdown-list-wrapper","aria-labelledby":`${e.id}-heading`}},[e.heading?t("li",{class:["dt-dropdown-list--header",e.headingClass],attrs:{id:`${e.id}-heading`,role:"presentation","data-qa":"dt-dropdown-list-heading"}},[e._t("headingSlot",function(){return[e._v(" "+e._s(e.heading)+" ")]})],2):e._e(),e._t("default")],2)},d=[],s=i.n(a,n,d);const l=s.exports;exports.default=l;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("../../common/utils/index.cjs"),a=require("../../_plugin-vue2_normalizer-yXi3ZRRD.cjs"),i={name:"DtListItemGroup",props:{id:{type:String,default(){return r.getUniqueString()}},heading:{type:String,default:""},headingClass:{type:[String,Array,Object],default:""},listClass:{type:[String,Array,Object],default:""}}};var n=function(){var e=this,t=e._self._c;return t("ul",{class:["d-list-item-group",e.listClass],attrs:{id:e.id,role:"group","data-qa":"dt-dropdown-list-wrapper","aria-labelledby":`${e.id}-heading`}},[e.heading?t("li",{class:["dt-dropdown-list--header",e.headingClass],attrs:{id:`${e.id}-heading`,role:"presentation","data-qa":"dt-dropdown-list-heading"}},[e._t("headingSlot",function(){return[e._v(" "+e._s(e.heading)+" ")]})],2):e._e(),e._t("default")],2)},s=[],d=a.n(i,n,s,!1,null,null);const l=d.exports;exports.default=l;
 //# sourceMappingURL=list-item-group.cjs.map