@dialpad/dialtone 9.124.0 → 9.126.0

package/dist/vue2/lib/ivr-node/ivr-node.cjs

@@ -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-e_CkxkSV.cjs"),a=require("../card/card.cjs"),s=require("../button/button.cjs"),d=require("../dropdown/dropdown.cjs"),l=require("../../common/mixins/localization.cjs"),_=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:a.default,DtButton:s.default,DtDropdown:d.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},mixins:[l.default],props:{nodeType:{type:String,required:!0},nodeLabel:{type:String,required:!0},isSelected:{type:Boolean,default:!1},dtmfKey:{type:String,default:null}},emits:["click"],data(){return{isOpen:!1}},computed:{nodeIcon(){return _.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},nodeAriaLabel(){const c=this.nodeType.toUpperCase();return this.i18n.$t(`DIALTONE_IVR_NODE_${c}_ARIA_LABEL`)},menuButtonAriaLabel(){return this.i18n.$t("DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL")}},methods:{openMenu(){this.isOpen=!0}}};var p=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:{importance:"clear",kind:"muted","data-qa":"dt-ivr-node-icon","aria-label":e.nodeAriaLabel,title:e.nodeAriaLabel},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,title: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)},D=[],I=i.n(u,p,D);const f=I.exports;exports.default=f;
 //# sourceMappingURL=ivr-node.cjs.map

package/dist/vue2/lib/ivr-node/ivr-node.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ivr-node.cjs","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":"gWAoHAA,EAAA,IAAA,IAAA,CACA,CAAAC,EAAAA,qBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,wBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,qBAAAC,EAAAA,aAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,gBAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,eAAAC,EAAAA,eAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,mBAAA,EACA,CAAAC,EAAAA,uBAAAC,EAAAA,gBAAA,EACA,CAAAC,EAAAA,kBAAAC,EAAAA,cAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,iBAAA,CACA,CAAA,EAEAC,EAAA,CACA,KAAA,kBAEA,WAAA,CACA,OAAAC,EAAA,QACA,SAAAC,EAAA,QACA,WAAAC,EAAA,QACA,aAAAtB,EAAA,aACA,aAAAE,EAAA,aACA,cAAAE,EAAA,cACA,iBAAAE,EAAA,iBACA,aAAAE,EAAA,aACA,gBAAAE,EAAA,gBACA,oBAAAE,EAAA,oBACA,eAAAI,EAAA,eACA,kBAAAE,EAAA,kBACA,mBAAAK,EAAA,mBACA,iBAAAT,EAAA,gBACA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,oBAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,QAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CAOA,OACA,EAEA,MAAA,CACA,MAAA,CACA,OAAA,EACA,CACA,EAEA,SAAA,CACA,UAAA,CACA,OAAAhB,EAAA,IAAA,KAAA,QAAA,CACA,EAEA,WAAA,CACA,KAAA,CAAA,OAAA0B,EAAA,SAAAC,CAAA,EAAAC,EAAAA,uBAAA,KAAA,QAAA,EACA,OAAA,KAAA,WAAAD,EAAAD,CACA,EAEA,YAAA,CACA,OAAA,KAAA,WAAAf,gBACA,CACA,EAEA,QAAA,CACA,UAAA,CACA,KAAA,OAAA,EACA,CACA,CACA"}
+{"version":3,"file":"ivr-node.cjs","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            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n            :aria-label=\"nodeAriaLabel\"\n            :title=\"nodeAriaLabel\"\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              :title=\"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';\nimport { DtLocalizationMixin } from '@/common/mixins';\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  mixins: [DtLocalizationMixin],\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     * 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    nodeAriaLabel () {\n      const nodeType = this.nodeType.toUpperCase();\n      return this.i18n.$t(`DIALTONE_IVR_NODE_${nodeType}_ARIA_LABEL`);\n    },\n\n    menuButtonAriaLabel () {\n      return this.i18n.$t('DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL');\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","DtLocalizationMixin","normal","selected","IVR_NODE_CLASS_MAPPING","nodeType"],"mappings":"kZAuHAA,EAAA,IAAA,IAAA,CACA,CAAAC,EAAAA,qBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,wBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,qBAAAC,EAAAA,aAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,gBAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,YAAA,EACA,CAAAC,EAAAA,eAAAC,EAAAA,eAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,mBAAA,EACA,CAAAC,EAAAA,uBAAAC,EAAAA,gBAAA,EACA,CAAAC,EAAAA,kBAAAC,EAAAA,cAAA,EACA,CAAAC,EAAAA,gBAAAC,EAAAA,iBAAA,CACA,CAAA,EAEAC,EAAA,CACA,KAAA,kBAEA,WAAA,CACA,OAAAC,EAAA,QACA,SAAAC,EAAA,QACA,WAAAC,EAAA,QACA,aAAAtB,EAAA,aACA,aAAAE,EAAA,aACA,cAAAE,EAAA,cACA,iBAAAE,EAAA,iBACA,aAAAE,EAAA,aACA,gBAAAE,EAAA,gBACA,oBAAAE,EAAA,oBACA,eAAAI,EAAA,eACA,kBAAAE,EAAA,kBACA,mBAAAK,EAAA,mBACA,iBAAAT,EAAA,gBACA,EAEA,OAAA,CAAAU,EAAAA,OAAA,EAEA,MAAA,CAKA,SAAA,CACA,KAAA,OACA,SAAA,EACA,EAMA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,QAAA,CACA,KAAA,OACA,QAAA,IACA,CACA,EAEA,MAAA,CAOA,OACA,EAEA,MAAA,CACA,MAAA,CACA,OAAA,EACA,CACA,EAEA,SAAA,CACA,UAAA,CACA,OAAA1B,EAAA,IAAA,KAAA,QAAA,CACA,EAEA,WAAA,CACA,KAAA,CAAA,OAAA2B,EAAA,SAAAC,CAAA,EAAAC,EAAAA,uBAAA,KAAA,QAAA,EACA,OAAA,KAAA,WAAAD,EAAAD,CACA,EAEA,YAAA,CACA,OAAA,KAAA,WAAAhB,gBACA,EAEA,eAAA,CACA,MAAAmB,EAAA,KAAA,SAAA,YAAA,EACA,OAAA,KAAA,KAAA,GAAA,qBAAAA,CAAA,aAAA,CACA,EAEA,qBAAA,CACA,OAAA,KAAA,KAAA,GAAA,0CAAA,CACA,CACA,EAEA,QAAA,CACA,UAAA,CACA,KAAA,OAAA,EACA,CACA,CACA"}

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

@@ -1,38 +1,40 @@
-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 { 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 { DtIconKeypad as r, DtIconDialer as i, DtIconVolume2 as c, DtIconExpertNode as a, DtIconBranch as s, DtIconCallMerge as d, DtIconChevronsRight as _, DtIconTransfer as l, 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 N, IVR_NODE_ASSIGN as O, IVR_NODE_CUSTOMER_DATA as R, IVR_NODE_TRANSFER as E, IVR_NODE_HANGUP as A, IVR_NODE_CLASS_MAPPING as T } from "./ivr-node-constants.js";
+import { n as L } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
 import h from "../card/card.js";
-import g from "../button/button.js";
-import P from "../dropdown/dropdown.js";
+import C from "../button/button.js";
+import S from "../dropdown/dropdown.js";
+import b from "../../common/mixins/localization.js";
 const V = /* @__PURE__ */ new Map([
   [D, r],
-  [I, c],
-  [v, i],
-  [y, d],
-  [O, s],
-  [m, a],
-  [R, _],
-  [N, u],
+  [I, i],
+  [v, c],
+  [y, a],
+  [N, s],
+  [m, d],
+  [O, _],
+  [R, u],
   [E, l],
-  [S, p]
-]), b = {
+  [A, p]
+]), M = {
   name: "DtRecipeIvrNode",
   components: {
     DtCard: h,
-    DtButton: g,
-    DtDropdown: P,
+    DtButton: C,
+    DtDropdown: S,
     DtIconKeypad: r,
-    DtIconDialer: c,
-    DtIconVolume2: i,
-    DtIconExpertNode: d,
+    DtIconDialer: i,
+    DtIconVolume2: c,
+    DtIconExpertNode: a,
     DtIconBranch: s,
-    DtIconCallMerge: a,
+    DtIconCallMerge: d,
     DtIconChevronsRight: _,
     DtIconTransfer: l,
     DtIconPhoneHangUp: p,
     DtIconMoreVertical: f,
     DtIconListBullet: u
   },
+  mixins: [b],
   props: {
     /**
      * type of IVR Node.
@@ -55,13 +57,6 @@ const V = /* @__PURE__ */ new Map([
       type: Boolean,
       default: !1
     },
-    /**
-     * Translated aria-label for header menu button
-     */
-    menuButtonAriaLabel: {
-      type: String,
-      required: !0
-    },
     /**
      * DTMF input
      */
@@ -89,11 +84,18 @@ const V = /* @__PURE__ */ new Map([
       return V.get(this.nodeType);
     },
     nodeClass() {
-      const { normal: o, selected: e } = C[this.nodeType];
+      const { normal: o, selected: e } = T[this.nodeType];
       return this.isSelected ? e : o;
     },
     isGotoNode() {
       return this.nodeType === m;
+    },
+    nodeAriaLabel() {
+      const o = this.nodeType.toUpperCase();
+      return this.i18n.$t(`DIALTONE_IVR_NODE_${o}_ARIA_LABEL`);
+    },
+    menuButtonAriaLabel() {
+      return this.i18n.$t("DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL");
     }
   },
   methods: {
@@ -102,18 +104,18 @@ const V = /* @__PURE__ */ new Map([
     }
   }
 };
-var A = function() {
+var P = function() {
   var e = this, t = e._self._c;
   return t("div", e._g({ class: [
     "d-recipe-ivr-node",
     e.nodeClass
   ] }, e.$listeners), [e.dtmfKey ? t("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 ? t("div", { staticClass: "d-recipe-ivr-node__connector", class: { "d-recipe-ivr-node__connector--selected": e.isSelected }, attrs: { "data-qa": "dt-top-connector" } }) : e._e(), t("dt-card", { scopedSlots: e._u([{ key: "header", fn: function() {
-    return [t("div", { staticClass: "d-recipe-ivr-node__header-left" }, [t("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 [t("div", { staticClass: "d-recipe-ivr-node__header-left" }, [t("dt-button", { attrs: { importance: "clear", kind: "muted", "data-qa": "dt-ivr-node-icon", "aria-label": e.nodeAriaLabel, title: e.nodeAriaLabel }, scopedSlots: e._u([{ key: "icon", fn: function() {
       return [t(e.nodeIcon, { tag: "component", class: ["", { "d-recipe-ivr-node__goto-icon": e.isGotoNode }], attrs: { size: "200" } })];
     }, proxy: !0 }]) }), t("p", { staticClass: "d-recipe-ivr-node__label", attrs: { "data-qa": "ivr-node-label" } }, [e._v(" " + e._s(e.nodeLabel) + " ")])], 1), t("dt-dropdown", { attrs: { placement: "bottom", open: e.isOpen }, on: { "update:open": function(n) {
       e.isOpen = n;
     } }, scopedSlots: e._u([{ key: "anchor", fn: function() {
-      return [t("dt-button", { attrs: { importance: "clear", kind: "muted", "aria-label": e.menuButtonAriaLabel }, on: { click: function(n) {
+      return [t("dt-button", { attrs: { importance: "clear", kind: "muted", "aria-label": e.menuButtonAriaLabel, title: e.menuButtonAriaLabel }, on: { click: function(n) {
         return n.stopPropagation(), n.preventDefault(), e.openMenu.apply(null, arguments);
       } }, scopedSlots: e._u([{ key: "icon", fn: function() {
         return [t("dt-icon-more-vertical", { attrs: { size: "200" } })];
@@ -124,12 +126,12 @@ var A = function() {
   }, proxy: !0 }, { key: "content", fn: function() {
     return [e._t("content")];
   }, proxy: !0 }], null, !0) })], 2);
-}, M = [], k = /* @__PURE__ */ T(
-  b,
-  A,
-  M
+}, g = [], B = /* @__PURE__ */ L(
+  M,
+  P,
+  g
 );
-const w = k.exports;
+const w = B.exports;
 export {
   w as default
 };

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

@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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            importance=\"clear\"\n            kind=\"muted\"\n            data-qa=\"dt-ivr-node-icon\"\n            :aria-label=\"nodeAriaLabel\"\n            :title=\"nodeAriaLabel\"\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              :title=\"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';\nimport { DtLocalizationMixin } from '@/common/mixins';\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  mixins: [DtLocalizationMixin],\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     * 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    nodeAriaLabel () {\n      const nodeType = this.nodeType.toUpperCase();\n      return this.i18n.$t(`DIALTONE_IVR_NODE_${nodeType}_ARIA_LABEL`);\n    },\n\n    menuButtonAriaLabel () {\n      return this.i18n.$t('DIALTONE_IVR_NODE_MENU_BUTTON_ARIA_LABEL');\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","DtLocalizationMixin","normal","selected","IVR_NODE_CLASS_MAPPING","nodeType"],"mappings":";;;;;;;AAuHA,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,QAAA,CAAAU,CAAA;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,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,aAAA1B,EAAA,IAAA,KAAA,QAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,YAAA,EAAA,QAAA2B,GAAA,UAAAC,EAAA,IAAAC,EAAA,KAAA,QAAA;AACA,aAAA,KAAA,aAAAD,IAAAD;AAAA,IACA;AAAA,IAEA,aAAA;AACA,aAAA,KAAA,aAAAhB;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,YAAAmB,IAAA,KAAA,SAAA,YAAA;AACA,aAAA,KAAA,KAAA,GAAA,qBAAAA,CAAA,aAAA;AAAA,IACA;AAAA,IAEA,sBAAA;AACA,aAAA,KAAA,KAAA,GAAA,0CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,WAAA;AACA,WAAA,SAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/list-item/list-item.cjs

@@ -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"),o=require("../../common/utils/index.cjs"),n=require("@dialpad/dialtone-icons/vue2"),r=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),a=require("../item-layout/item-layout.cjs"),u=["listitem","menuitem","option"],d={name:"DtListItem",components:{DtItemLayout:a.default,DtIconCheck:n.DtIconCheck},inject:{highlightId:{default:null}},props:{id:{type:String,default(){return o.default.getUniqueString()}},role:{type:String,default:"listitem",validator:t=>u.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},wrapperClass:{type:[String,Object,Array],default:""}},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",{class:["d-list-item__wrapper",e.wrapperClass],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","data-qa":"dt-list-item-wrapper"},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;
 //# sourceMappingURL=list-item.cjs.map

package/dist/vue2/lib/list-item/list-item.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"list-item.cjs","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":"iVAwDAA,EAAA,CAAA,WAAA,WAAA,QAAA,EAMAC,EAAA,CACA,KAAA,aAEA,WAAA,CACA,aAAAC,EAAA,QACA,YAAAC,EAAA,WACA,EAKA,OAAA,CACA,YAAA,CAAA,QAAA,IAAA,CACA,EAEA,MAAA,CAIA,GAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAC,UAAA,gBAAA,CAAA,CACA,EAKA,KAAA,CACA,KAAA,OACA,QAAA,WACA,UAAAC,GAAAL,EAAA,SAAAK,CAAA,CACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,KAAA,CACA,KAAA,OACA,QAAAC,EAAA,gBAAA,QACA,UAAA,GAAA,OAAA,OAAAA,iBAAA,EAAA,SAAA,CAAA,CACA,EASA,eAAA,CACA,KAAA,OACA,QAAAC,EAAA,2BAAA,KACA,UAAA,GAAA,OAAA,OAAAA,4BAAA,EAAA,SAAA,CAAA,CACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QAQA,UAQA,YAQA,YACA,EAEA,MAAA,CACA,MAAA,CACA,SAAA,GACA,iBAAA,EACA,CACA,EAEA,SAAA,CACA,eAAA,CACA,OAAA,KAAA,OAAAD,EAAA,gBAAA,OAEA,EAEA,mBAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,QAAAE,GAAA,CACA,CAAA,QAAA,OAAA,EAAA,SAAAA,EAAA,KAAA,YAAA,CAAA,GACA,KAAA,QAAAA,CAAA,EAEA,KAAA,MAAA,UAAAA,CAAA,CACA,EAEA,UAAAA,GAAA,CACA,KAAA,aAAAA,CAAA,EACA,KAAA,MAAA,YAAAA,CAAA,CACA,EAEA,WAAAA,GAAA,CACA,KAAA,aAAAA,CAAA,EACA,KAAA,MAAA,aAAAA,CAAA,CACA,CACA,CACA,EAMA,eAAA,CACA,OAAA,KAAA,YACA,KAAA,aAAA,KAAA,YAAA,EAAA,KAAA,KAAA,KAAA,cAAA,KAAA,iBAEA,EACA,EAEA,aAAA,CAEA,OAAA,KAAA,iBAAAD,EAAA,2BAAA,GACA,EAKA,aAAA,CACA,OAAA,KAAA,iBAAAA,EAAA,2BAAA,IACA,CACA,EAEA,QAAA,CACA,QAAAE,EAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,EAEA,cAAA,CACA,KAAA,iBAAA,EACA,EAEA,cAAA,CACA,KAAA,iBAAA,EACA,CACA,CACA"}
+{"version":3,"file":"list-item.cjs","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', wrapperClass]\"\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      data-qa=\"dt-list-item-wrapper\"\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     * Additional Classes to apply to the wrapper element,\n     * note: it only applies on \"default\" type\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    wrapperClass: {\n      type: [String, Object, Array],\n      default: '',\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      return this.type === LIST_ITEM_TYPES.DEFAULT;\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":"iVAyDAA,EAAA,CAAA,WAAA,WAAA,QAAA,EAMAC,EAAA,CACA,KAAA,aAEA,WAAA,CACA,aAAAC,EAAA,QACA,YAAAC,EAAA,WACA,EAKA,OAAA,CACA,YAAA,CAAA,QAAA,IAAA,CACA,EAEA,MAAA,CAIA,GAAA,CACA,KAAA,OACA,SAAA,CAAA,OAAAC,UAAA,gBAAA,CAAA,CACA,EAKA,KAAA,CACA,KAAA,OACA,QAAA,WACA,UAAAC,GAAAL,EAAA,SAAAK,CAAA,CACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,IACA,EAMA,KAAA,CACA,KAAA,OACA,QAAAC,EAAA,gBAAA,QACA,UAAA,GAAA,OAAA,OAAAA,iBAAA,EAAA,SAAA,CAAA,CACA,EASA,eAAA,CACA,KAAA,OACA,QAAAC,EAAA,2BAAA,KACA,UAAA,GAAA,OAAA,OAAAA,4BAAA,EAAA,SAAA,CAAA,CACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAQA,aAAA,CACA,KAAA,CAAA,OAAA,OAAA,KAAA,EACA,QAAA,EACA,CACA,EAEA,MAAA,CAOA,QAQA,UAQA,YAQA,YACA,EAEA,MAAA,CACA,MAAA,CACA,SAAA,GACA,iBAAA,EACA,CACA,EAEA,SAAA,CACA,eAAA,CACA,OAAA,KAAA,OAAAD,EAAA,gBAAA,OACA,EAEA,mBAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,QAAAE,GAAA,CACA,CAAA,QAAA,OAAA,EAAA,SAAAA,EAAA,KAAA,YAAA,CAAA,GACA,KAAA,QAAAA,CAAA,EAEA,KAAA,MAAA,UAAAA,CAAA,CACA,EAEA,UAAAA,GAAA,CACA,KAAA,aAAAA,CAAA,EACA,KAAA,MAAA,YAAAA,CAAA,CACA,EAEA,WAAAA,GAAA,CACA,KAAA,aAAAA,CAAA,EACA,KAAA,MAAA,aAAAA,CAAA,CACA,CACA,CACA,EAMA,eAAA,CACA,OAAA,KAAA,YACA,KAAA,aAAA,KAAA,YAAA,EAAA,KAAA,KAAA,KAAA,cAAA,KAAA,iBAEA,EACA,EAEA,aAAA,CAEA,OAAA,KAAA,iBAAAD,EAAA,2BAAA,GACA,EAKA,aAAA,CACA,OAAA,KAAA,iBAAAA,EAAA,2BAAA,IACA,CACA,EAEA,QAAA,CACA,QAAAE,EAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,EAEA,cAAA,CACA,KAAA,iBAAA,EACA,EAEA,cAAA,CACA,KAAA,iBAAA,EACA,CACA,CACA"}

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

@@ -1,13 +1,13 @@
 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 r from "../../common/utils/index.js";
+import { DtIconCheck as n } from "@dialpad/dialtone-icons/vue2";
 import { n as a } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
-import u from "../item-layout/item-layout.js";
-const d = ["listitem", "menuitem", "option"], m = {
+import d from "../item-layout/item-layout.js";
+const u = ["listitem", "menuitem", "option"], m = {
   name: "DtListItem",
   components: {
-    DtItemLayout: u,
-    DtIconCheck: r
+    DtItemLayout: d,
+    DtIconCheck: n
   },
   /**
    * Value provided from keyboard_list_navigation.js using id prop.
@@ -22,7 +22,7 @@ const d = ["listitem", "menuitem", "option"], m = {
     id: {
       type: String,
       default() {
-        return n.getUniqueString();
+        return r.getUniqueString();
       }
     },
     /**
@@ -31,7 +31,7 @@ const d = ["listitem", "menuitem", "option"], m = {
     role: {
       type: String,
       default: "listitem",
-      validator: (e) => d.includes(e)
+      validator: (e) => u.includes(e)
     },
     /**
      * HTML element type (tag name) of the content wrapper element.
@@ -67,6 +67,16 @@ const d = ["listitem", "menuitem", "option"], m = {
     selected: {
       type: Boolean,
       default: !1
+    },
+    /**
+     * Additional Classes to apply to the wrapper element,
+     * note: it only applies on "default" type
+     * Can accept all of: String, Object, and Array, i.e. has the
+     * same api as Vue's built-in handling of the class attribute.
+     */
+    wrapperClass: {
+      type: [String, Object, Array],
+      default: ""
     }
   },
   emits: [
@@ -161,19 +171,19 @@ var c = function() {
       "d-list-item--highlighted": t.isHighlighted,
       "d-list-item--static": !t.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: 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", { class: ["d-list-item__wrapper", t.wrapperClass], 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", "data-qa": "dt-list-item-wrapper" }, scopedSlots: t._u([t._l(t.$slots, function(_, o) {
     return { key: o, fn: function() {
       return [t._t(o)];
     }, proxy: !0 };
   }), t.selected ? { key: "selected", fn: function() {
     return [s("dt-icon-check", { attrs: { size: "400" } })];
   }, proxy: !0 } : null], null, !0) }) : t._t("default")], 2);
-}, h = [], _ = /* @__PURE__ */ a(
+}, h = [], p = /* @__PURE__ */ a(
   m,
   c,
   h
 );
-const I = _.exports;
+const I = p.exports;
 export {
   I as default
 };

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

@@ -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;;;;;;;;;;;;;;;;;;;;;;;"}
+{"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', wrapperClass]\"\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      data-qa=\"dt-list-item-wrapper\"\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     * Additional Classes to apply to the wrapper element,\n     * note: it only applies on \"default\" type\n     * Can accept all of: String, Object, and Array, i.e. has the\n     * same api as Vue's built-in handling of the class attribute.\n     */\n    wrapperClass: {\n      type: [String, Object, Array],\n      default: '',\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      return this.type === LIST_ITEM_TYPES.DEFAULT;\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":";;;;;AAyDA,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;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,QAAA,KAAA;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,IACA;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;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/vue2/lib/loader/index.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./loader.cjs");exports.DtLoader=e.default;
+//# sourceMappingURL=index.cjs.map

package/dist/vue2/lib/loader/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/vue2/lib/loader/index.js

@@ -0,0 +1,5 @@
+import { default as o } from "./loader.js";
+export {
+  o as DtLoader
+};
+//# sourceMappingURL=index.js.map

package/dist/vue2/lib/loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/vue2/lib/loader/loader.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("@dialpad/dialtone-icons/vue2"),i=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),n=require("../../common/mixins/localization.cjs"),o=require("../icon/icon-constants.cjs"),s={name:"DtLoader",components:{DtIconLoading:r.DtIconLoading},mixins:[n.default],props:{ariaLabel:{type:String,default:""},size:{type:String,default:"500",validator:t=>Object.keys(o.ICON_SIZE_MODIFIERS).includes(t)}},computed:{loaderText(){return this.ariaLabel||this.i18n.$t("DIALTONE_LOADING")}}};var d=function(){var e=this,a=e._self._c;return a("div",{staticClass:"d-loader",attrs:{"aria-label":e.loaderText,"data-qa":"dt-loader"}},[a("dt-icon-loading",{staticClass:"d-loader-icon",attrs:{"data-qa":"dt-loader-icon",size:e.size}})],1)},c=[],l=i.n(s,d,c);const _=l.exports;exports.default=_;
+//# sourceMappingURL=loader.cjs.map

package/dist/vue2/lib/loader/loader.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.cjs","sources":["../../../components/loader/loader.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-loader\"\n    :aria-label=\"loaderText\"\n    data-qa=\"dt-loader\"\n  >\n    <dt-icon-loading\n      class=\"d-loader-icon\"\n      data-qa=\"dt-loader-icon\"\n      :size=\"size\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIconLoading } from '@dialpad/dialtone-icons/vue2';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\nexport default {\n  name: 'DtLoader',\n\n  components: {\n    DtIconLoading,\n  },\n\n  mixins: [DtLocalizationMixin],\n\n  props: {\n    /**\n     * The label of the loader as read out by a screen reader.\n     * Default is \"loading\"\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n  },\n\n  computed: {\n    loaderText () {\n      return this.ariaLabel || this.i18n.$t('DIALTONE_LOADING');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconLoading","DtLocalizationMixin","s","ICON_SIZE_MODIFIERS"],"mappings":"8SAmBAA,EAAA,CACA,KAAA,WAEA,WAAA,CACA,cAAAC,EAAA,aACA,EAEA,OAAA,CAAAC,EAAAA,OAAA,EAEA,MAAA,CAKA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,MACA,UAAAC,GAAA,OAAA,KAAAC,qBAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAA,KAAA,WAAA,KAAA,KAAA,GAAA,kBAAA,CACA,CACA,CACA"}

package/dist/vue2/lib/loader/loader.js

@@ -0,0 +1,48 @@
+import { DtIconLoading as r } from "@dialpad/dialtone-icons/vue2";
+import { n as o } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import i from "../../common/mixins/localization.js";
+import { ICON_SIZE_MODIFIERS as n } from "../icon/icon-constants.js";
+const s = {
+  name: "DtLoader",
+  components: {
+    DtIconLoading: r
+  },
+  mixins: [i],
+  props: {
+    /**
+     * The label of the loader as read out by a screen reader.
+     * Default is "loading"
+     */
+    ariaLabel: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The size of the icon.
+     * @values 100, 200, 300, 400, 500, 600, 700, 800
+     */
+    size: {
+      type: String,
+      default: "500",
+      validator: (a) => Object.keys(n).includes(a)
+    }
+  },
+  computed: {
+    loaderText() {
+      return this.ariaLabel || this.i18n.$t("DIALTONE_LOADING");
+    }
+  }
+};
+var d = function() {
+  var t = this, e = t._self._c;
+  return e("div", { staticClass: "d-loader", attrs: { "aria-label": t.loaderText, "data-qa": "dt-loader" } }, [e("dt-icon-loading", { staticClass: "d-loader-icon", attrs: { "data-qa": "dt-loader-icon", size: t.size } })], 1);
+}, l = [], c = /* @__PURE__ */ o(
+  s,
+  d,
+  l
+);
+const u = c.exports;
+export {
+  u as default
+};
+//# sourceMappingURL=loader.js.map

package/dist/vue2/lib/loader/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","sources":["../../../components/loader/loader.vue"],"sourcesContent":["<template>\n  <div\n    class=\"d-loader\"\n    :aria-label=\"loaderText\"\n    data-qa=\"dt-loader\"\n  >\n    <dt-icon-loading\n      class=\"d-loader-icon\"\n      data-qa=\"dt-loader-icon\"\n      :size=\"size\"\n    />\n  </div>\n</template>\n\n<script>\nimport { DtIconLoading } from '@dialpad/dialtone-icons/vue2';\nimport { ICON_SIZE_MODIFIERS } from '@/components/icon';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\nexport default {\n  name: 'DtLoader',\n\n  components: {\n    DtIconLoading,\n  },\n\n  mixins: [DtLocalizationMixin],\n\n  props: {\n    /**\n     * The label of the loader as read out by a screen reader.\n     * Default is \"loading\"\n     */\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The size of the icon.\n     * @values 100, 200, 300, 400, 500, 600, 700, 800\n     */\n    size: {\n      type: String,\n      default: '500',\n      validator: (s) => Object.keys(ICON_SIZE_MODIFIERS).includes(s),\n    },\n  },\n\n  computed: {\n    loaderText () {\n      return this.ariaLabel || this.i18n.$t('DIALTONE_LOADING');\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtIconLoading","DtLocalizationMixin","s","ICON_SIZE_MODIFIERS"],"mappings":";;;;AAmBA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,eAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,aAAA,KAAA,KAAA,GAAA,kBAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;"}

package/dist/vue2/lib/message-input/message-input-link.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const o=require("@dialpad/dialtone-icons/vue2"),a=require("./message-input-button.cjs"),l=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),s=require("../popover/popover.cjs"),u=require("../input/input.cjs"),r=require("../button/button.cjs"),p=require("../stack/stack.cjs"),c={name:"MessageInputLink",components:{DtPopover:s.default,DtInput:u.default,DtButton:r.default,DtStack:p.default,DtIconLink2:o.DtIconLink2,DtRecipeMessageInputButton:a.default},props:{open:{type:Boolean,default:!1},linkButtonOptions:{type:Object,required:!0},isSelectionActive:{type:Function,default:()=>{}}},emits:["set-link","remove-link","opened"],data(){return{linkText:"",linkInput:"",isOpen:!1}},watch:{open:{immediate:!0,handler(i){this.isOpen=i}}},methods:{setInitialValues(i,t){this.linkText=i,this.linkInput=t}}};var k=function(){var t=this,e=t._self._c;return e("dt-popover",{attrs:{open:t.isOpen,placement:"bottom-start","content-class":"d-recipe-message-input__link-popover","visually-hidden-close":!0,"visually-hidden-close-label":t.linkButtonOptions.visuallyHiddenCloseText,"data-qa":"dt-message-input-link-popover","show-close-button":!1},on:{opened:function(n){return t.$emit("opened",n)}},scopedSlots:t._u([{key:"anchor",fn:function(){return[e("dt-recipe-message-input-button",{attrs:{"aria-label":t.linkButtonOptions.ariaLabel,"tooltip-text":t.linkButtonOptions.tooltipText,"keyboard-shortcut-text":t.linkButtonOptions.keyboardShortcutText,"data-qa":"message-input-link-btn","is-active":t.isSelectionActive("link")},on:{click:function(n){t.isOpen=!0}},scopedSlots:t._u([{key:"icon",fn:function(){return[e("dt-icon-link2",{staticClass:"d-recipe-message-input__button-stack-icon",attrs:{size:"200"}})]},proxy:!0}])})]},proxy:!0},{key:"content",fn:function(){return[e("dt-stack",{attrs:{gap:"500"}},[t.linkButtonOptions.dialogTitle.length>0?e("div",{staticClass:"d-recipe-message-input__link-dialog-title"},[t._v(" "+t._s(t.linkButtonOptions.dialogTitle)+" ")]):t._e(),e("dt-input",{attrs:{"input-aria-label":t.linkButtonOptions.textLabel,size:"xs","data-qa":"dt-message-input-link-text-input",label:t.linkButtonOptions.textLabel,"input-wrapper-class":"d-recipe-message-input__link-input"},on:{click:function(n){n.stopPropagation()},focus:function(n){n.stopPropagation()},keydown:function(n){return!n.type.indexOf("key")&&t._k(n.keyCode,"enter",13,n.key,"Enter")?null:t.$emit("set-link",t.linkText,t.linkInput)}},nativeOn:{click:function(n){n.stopPropagation()}},model:{value:t.linkText,callback:function(n){t.linkText=n},expression:"linkText"}}),e("dt-input",{attrs:{"input-aria-label":t.linkButtonOptions.linkLabel,size:"xs","data-qa":"dt-message-input-link-input",placeholder:t.linkButtonOptions.linkPlaceholder,label:t.linkButtonOptions.linkLabel,"input-wrapper-class":"d-recipe-message-input__link-input"},on:{click:function(n){n.stopPropagation()},focus:function(n){n.stopPropagation()},keydown:function(n){return!n.type.indexOf("key")&&t._k(n.keyCode,"enter",13,n.key,"Enter")?null:t.$emit("set-link",t.linkText,t.linkInput)}},nativeOn:{click:function(n){n.stopPropagation()}},model:{value:t.linkInput,callback:function(n){t.linkInput=n},expression:"linkInput"}}),e("dt-stack",{staticClass:"d-recipe-message-input__link-dialog-buttons",attrs:{direction:"row"}},[e("dt-button",{attrs:{"aria-label":t.linkButtonOptions.removeLabel,importance:"clear",kind:"danger",size:"md","data-qa":"dt-message-input-link-remove-btn"},on:{click:function(n){return t.$emit("remove-link",t.linkText,t.linkInput)}}},[t._v(" "+t._s(t.linkButtonOptions.removeLabel)+" ")]),e("dt-stack",{attrs:{direction:"row",gap:"400"}},[e("dt-button",{attrs:{"aria-label":t.linkButtonOptions.cancelLabel,importance:"clear",kind:"muted",size:"md","data-qa":"dt-message-input-link-cancel-btn"},on:{click:function(n){t.isOpen=!1}}},[t._v(" "+t._s(t.linkButtonOptions.cancelLabel)+" ")]),e("dt-button",{attrs:{size:"md","aria-label":t.linkButtonOptions.confirmLabel,"data-qa":"dt-message-input-link-confirm-btn"},on:{click:function(n){return t.$emit("set-link",t.linkText,t.linkInput)}}},[t._v(" "+t._s(t.linkButtonOptions.confirmLabel)+" ")])],1)],1)],1)]},proxy:!0}])})},d=[],_=l.n(c,k,d);const m=_.exports;exports.default=m;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("@dialpad/dialtone-icons/vue2"),o=require("./message-input-button.cjs"),l=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),r=require("../popover/popover.cjs"),u=require("../input/input.cjs"),s=require("../button/button.cjs"),c=require("../stack/stack.cjs"),p=require("../../common/mixins/localization.cjs"),_={name:"MessageInputLink",components:{DtPopover:r.default,DtInput:u.default,DtButton:s.default,DtStack:c.default,DtIconLink2:a.DtIconLink2,DtRecipeMessageInputButton:o.default},mixins:[p.default],props:{open:{type:Boolean,default:!1},linkButtonOptions:{type:Object,required:!0},isSelectionActive:{type:Function,default:()=>{}}},emits:["set-link","remove-link","opened"],data(){return{linkText:"",linkInput:"",isOpen:!1}},computed:{anchorButtonLabel(){return this.i18n.$ta("DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL")},textInputLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL")},linkInputLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL")},linkInputPlaceHolder(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER")},removeButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL")},cancelButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL")},confirmButtonLabel(){return this.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL")}},watch:{open:{immediate:!0,handler(i){this.isOpen=i}}},methods:{setInitialValues(i,t){this.linkText=i,this.linkInput=t}}};var k=function(){var t=this,n=t._self._c;return n("dt-popover",{attrs:{open:t.isOpen,placement:"bottom-start","content-class":"d-recipe-message-input__link-popover","data-qa":"dt-message-input-link-popover","show-close-button":!1},on:{opened:function(e){return t.$emit("opened",e)}},scopedSlots:t._u([{key:"anchor",fn:function(){return[n("dt-recipe-message-input-button",{attrs:{"aria-label":t.anchorButtonLabel["aria-label"],"tooltip-text":t.anchorButtonLabel["tooltip-text"],"keyboard-shortcut-text":t.linkButtonOptions.keyboardShortcutText,"data-qa":"message-input-link-btn","is-active":t.isSelectionActive("link")},on:{click:function(e){t.isOpen=!0}},scopedSlots:t._u([{key:"icon",fn:function(){return[n("dt-icon-link2",{staticClass:"d-recipe-message-input__button-stack-icon",attrs:{size:"200"}})]},proxy:!0}])})]},proxy:!0},{key:"content",fn:function(){return[n("dt-stack",{attrs:{gap:"500"}},[n("div",{staticClass:"d-recipe-message-input__link-dialog-title"},[t._v(" "+t._s(t.i18n.$t("DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE"))+" ")]),n("dt-input",{attrs:{"input-aria-label":t.textInputLabel,size:"xs","data-qa":"dt-message-input-link-text-input",label:t.textInputLabel,"input-wrapper-class":"d-recipe-message-input__link-input"},on:{click:function(e){e.stopPropagation()},focus:function(e){e.stopPropagation()},keydown:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.$emit("set-link",t.linkText,t.linkInput)}},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:t.linkText,callback:function(e){t.linkText=e},expression:"linkText"}}),n("dt-input",{attrs:{"input-aria-label":t.linkInputLabel,size:"xs","data-qa":"dt-message-input-link-input",placeholder:t.linkInputPlaceHolder,label:t.linkInputLabel,"input-wrapper-class":"d-recipe-message-input__link-input"},on:{click:function(e){e.stopPropagation()},focus:function(e){e.stopPropagation()},keydown:function(e){return!e.type.indexOf("key")&&t._k(e.keyCode,"enter",13,e.key,"Enter")?null:t.$emit("set-link",t.linkText,t.linkInput)}},nativeOn:{click:function(e){e.stopPropagation()}},model:{value:t.linkInput,callback:function(e){t.linkInput=e},expression:"linkInput"}}),n("dt-stack",{staticClass:"d-recipe-message-input__link-dialog-buttons",attrs:{direction:"row"}},[n("dt-button",{attrs:{"aria-label":t.removeButtonLabel,title:t.removeButtonLabel,importance:"clear",kind:"danger",size:"md","data-qa":"dt-message-input-link-remove-btn"},on:{click:function(e){return t.$emit("remove-link",t.linkText,t.linkInput)}}},[t._v(" "+t._s(t.removeButtonLabel)+" ")]),n("dt-stack",{attrs:{direction:"row",gap:"400"}},[n("dt-button",{attrs:{"aria-label":t.cancelButtonLabel,title:t.cancelButtonLabel,importance:"clear",kind:"muted",size:"md","data-qa":"dt-message-input-link-cancel-btn"},on:{click:function(e){t.isOpen=!1}}},[t._v(" "+t._s(t.cancelButtonLabel)+" ")]),n("dt-button",{attrs:{size:"md","aria-label":t.confirmButtonLabel,title:t.confirmButtonLabel,"data-qa":"dt-message-input-link-confirm-btn"},on:{click:function(e){return t.$emit("set-link",t.linkText,t.linkInput)}}},[t._v(" "+t._s(t.confirmButtonLabel)+" ")])],1)],1)],1)]},proxy:!0}])})},d=[],L=l.n(_,k,d);const m=L.exports;exports.default=m;
 //# sourceMappingURL=message-input-link.cjs.map

package/dist/vue2/lib/message-input/message-input-link.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"message-input-link.cjs","sources":["../../../recipes/conversation_view/message_input/message_input_link.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :open=\"isOpen\"\n    placement=\"bottom-start\"\n    content-class=\"d-recipe-message-input__link-popover\"\n    :visually-hidden-close=\"true\"\n    :visually-hidden-close-label=\"linkButtonOptions.visuallyHiddenCloseText\"\n    data-qa=\"dt-message-input-link-popover\"\n    :show-close-button=\"false\"\n    @opened=\"$emit('opened', $event)\"\n  >\n    <template #anchor>\n      <dt-recipe-message-input-button\n        :aria-label=\"linkButtonOptions.ariaLabel\"\n        :tooltip-text=\"linkButtonOptions.tooltipText\"\n        :keyboard-shortcut-text=\"linkButtonOptions.keyboardShortcutText\"\n        data-qa=\"message-input-link-btn\"\n        :is-active=\"isSelectionActive('link')\"\n        @click=\"isOpen = true\"\n      >\n        <template #icon>\n          <dt-icon-link2\n            class=\"d-recipe-message-input__button-stack-icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-recipe-message-input-button>\n    </template>\n\n    <template #content>\n      <dt-stack gap=\"500\">\n        <div\n          v-if=\"linkButtonOptions.dialogTitle.length > 0\"\n          class=\"d-recipe-message-input__link-dialog-title\"\n        >\n          {{ linkButtonOptions.dialogTitle }}\n        </div>\n        <dt-input\n          v-model=\"linkText\"\n          :input-aria-label=\"linkButtonOptions.textLabel\"\n          size=\"xs\"\n          data-qa=\"dt-message-input-link-text-input\"\n          :label=\"linkButtonOptions.textLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @click.native.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-input\n          v-model=\"linkInput\"\n          :input-aria-label=\"linkButtonOptions.linkLabel\"\n          size=\"xs\"\n          data-qa=\"dt-message-input-link-input\"\n          :placeholder=\"linkButtonOptions.linkPlaceholder\"\n          :label=\"linkButtonOptions.linkLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @click.native.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-stack\n          direction=\"row\"\n          class=\"d-recipe-message-input__link-dialog-buttons\"\n        >\n          <dt-button\n            :aria-label=\"linkButtonOptions.removeLabel\"\n            importance=\"clear\"\n            kind=\"danger\"\n            size=\"md\"\n            data-qa=\"dt-message-input-link-remove-btn\"\n            @click=\"$emit('remove-link', linkText, linkInput)\"\n          >\n            {{ linkButtonOptions.removeLabel }}\n          </dt-button>\n          <dt-stack\n            direction=\"row\"\n            gap=\"400\"\n          >\n            <dt-button\n              :aria-label=\"linkButtonOptions.cancelLabel\"\n              importance=\"clear\"\n              kind=\"muted\"\n              size=\"md\"\n              data-qa=\"dt-message-input-link-cancel-btn\"\n              @click=\"isOpen = false\"\n            >\n              {{ linkButtonOptions.cancelLabel }}\n            </dt-button>\n            <dt-button\n              size=\"md\"\n              :aria-label=\"linkButtonOptions.confirmLabel\"\n              data-qa=\"dt-message-input-link-confirm-btn\"\n              @click=\"$emit('set-link', linkText, linkInput)\"\n            >\n              {{ linkButtonOptions.confirmLabel }}\n            </dt-button>\n          </dt-stack>\n        </dt-stack>\n      </dt-stack>\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { DtStack } from '@/components/stack';\nimport { DtIconLink2 } from '@dialpad/dialtone-icons/vue2';\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nexport default {\n  name: 'MessageInputLink',\n\n  components: {\n    DtPopover,\n    DtInput,\n    DtButton,\n    DtStack,\n    DtIconLink2,\n    DtRecipeMessageInputButton,\n  },\n\n  props: {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n\n    linkButtonOptions: {\n      type: Object,\n      required: true,\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['set-link', 'remove-link', 'opened'],\n\n  data () {\n    return {\n      linkText: '',\n      linkInput: '',\n      isOpen: false,\n    };\n  },\n\n  watch: {\n    open: {\n      immediate: true,\n      handler (value) {\n        this.isOpen = value;\n      },\n    },\n  },\n\n  methods: {\n    setInitialValues (linkText, linkInput) {\n      this.linkText = linkText;\n      this.linkInput = linkInput;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","DtInput","DtButton","DtStack","DtIconLink2","DtRecipeMessageInputButton","value","linkText","linkInput"],"mappings":"kYAgHAA,EAAA,CACA,KAAA,mBAEA,WAAA,CACA,UAAAC,EAAA,QACA,QAAAC,EAAA,QACA,SAAAC,EAAA,QACA,QAAAC,EAAA,QACA,YAAAC,EAAA,YACA,2BAAAC,EAAA,OACA,EAEA,MAAA,CACA,KAAA,CACA,KAAA,QACA,QAAA,EACA,EAEA,kBAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,kBAAA,CACA,KAAA,SACA,QAAA,IAAA,CAAA,CACA,CACA,EAEA,MAAA,CAAA,WAAA,cAAA,QAAA,EAEA,MAAA,CACA,MAAA,CACA,SAAA,GACA,UAAA,GACA,OAAA,EACA,CACA,EAEA,MAAA,CACA,KAAA,CACA,UAAA,GACA,QAAAC,EAAA,CACA,KAAA,OAAAA,CACA,CACA,CACA,EAEA,QAAA,CACA,iBAAAC,EAAAC,EAAA,CACA,KAAA,SAAAD,EACA,KAAA,UAAAC,CACA,CACA,CACA"}
+{"version":3,"file":"message-input-link.cjs","sources":["../../../recipes/conversation_view/message_input/message_input_link.vue"],"sourcesContent":["<template>\n  <dt-popover\n    :open=\"isOpen\"\n    placement=\"bottom-start\"\n    content-class=\"d-recipe-message-input__link-popover\"\n    data-qa=\"dt-message-input-link-popover\"\n    :show-close-button=\"false\"\n    @opened=\"$emit('opened', $event)\"\n  >\n    <template #anchor>\n      <dt-recipe-message-input-button\n        :aria-label=\"anchorButtonLabel['aria-label']\"\n        :tooltip-text=\"anchorButtonLabel['tooltip-text']\"\n        :keyboard-shortcut-text=\"linkButtonOptions.keyboardShortcutText\"\n        data-qa=\"message-input-link-btn\"\n        :is-active=\"isSelectionActive('link')\"\n        @click=\"isOpen = true\"\n      >\n        <template #icon>\n          <dt-icon-link2\n            class=\"d-recipe-message-input__button-stack-icon\"\n            size=\"200\"\n          />\n        </template>\n      </dt-recipe-message-input-button>\n    </template>\n\n    <template #content>\n      <dt-stack gap=\"500\">\n        <div\n          class=\"d-recipe-message-input__link-dialog-title\"\n        >\n          {{ i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_DIALOG_TITLE') }}\n        </div>\n        <dt-input\n          v-model=\"linkText\"\n          :input-aria-label=\"textInputLabel\"\n          size=\"xs\"\n          data-qa=\"dt-message-input-link-text-input\"\n          :label=\"textInputLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @click.native.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-input\n          v-model=\"linkInput\"\n          :input-aria-label=\"linkInputLabel\"\n          size=\"xs\"\n          data-qa=\"dt-message-input-link-input\"\n          :placeholder=\"linkInputPlaceHolder\"\n          :label=\"linkInputLabel\"\n          input-wrapper-class=\"d-recipe-message-input__link-input\"\n          @click.stop\n          @click.native.stop\n          @focus.stop\n          @keydown.enter=\"$emit('set-link', linkText, linkInput)\"\n        />\n        <dt-stack\n          direction=\"row\"\n          class=\"d-recipe-message-input__link-dialog-buttons\"\n        >\n          <dt-button\n            :aria-label=\"removeButtonLabel\"\n            :title=\"removeButtonLabel\"\n            importance=\"clear\"\n            kind=\"danger\"\n            size=\"md\"\n            data-qa=\"dt-message-input-link-remove-btn\"\n            @click=\"$emit('remove-link', linkText, linkInput)\"\n          >\n            {{ removeButtonLabel }}\n          </dt-button>\n          <dt-stack\n            direction=\"row\"\n            gap=\"400\"\n          >\n            <dt-button\n              :aria-label=\"cancelButtonLabel\"\n              :title=\"cancelButtonLabel\"\n              importance=\"clear\"\n              kind=\"muted\"\n              size=\"md\"\n              data-qa=\"dt-message-input-link-cancel-btn\"\n              @click=\"isOpen = false\"\n            >\n              {{ cancelButtonLabel }}\n            </dt-button>\n            <dt-button\n              size=\"md\"\n              :aria-label=\"confirmButtonLabel\"\n              :title=\"confirmButtonLabel\"\n              data-qa=\"dt-message-input-link-confirm-btn\"\n              @click=\"$emit('set-link', linkText, linkInput)\"\n            >\n              {{ confirmButtonLabel }}\n            </dt-button>\n          </dt-stack>\n        </dt-stack>\n      </dt-stack>\n    </template>\n  </dt-popover>\n</template>\n\n<script>\nimport { DtPopover } from '@/components/popover';\nimport { DtInput } from '@/components/input';\nimport { DtButton } from '@/components/button';\nimport { DtStack } from '@/components/stack';\nimport { DtIconLink2 } from '@dialpad/dialtone-icons/vue2';\nimport DtRecipeMessageInputButton from './message_input_button.vue';\nimport { DtLocalizationMixin } from '@/common/mixins';\n\nexport default {\n  name: 'MessageInputLink',\n\n  components: {\n    DtPopover,\n    DtInput,\n    DtButton,\n    DtStack,\n    DtIconLink2,\n    DtRecipeMessageInputButton,\n  },\n\n  mixins: [DtLocalizationMixin],\n\n  props: {\n    open: {\n      type: Boolean,\n      default: false,\n    },\n\n    linkButtonOptions: {\n      type: Object,\n      required: true,\n    },\n\n    isSelectionActive: {\n      type: Function,\n      default: () => {},\n    },\n  },\n\n  emits: ['set-link', 'remove-link', 'opened'],\n\n  data () {\n    return {\n      linkText: '',\n      linkInput: '',\n      isOpen: false,\n    };\n  },\n\n  computed: {\n    anchorButtonLabel () { return this.i18n.$ta('DIALTONE_MESSAGE_INPUT_LINK_BUTTON_LABEL'); },\n    textInputLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_TEXT_LABEL'); },\n    linkInputLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_LINK_LABEL'); },\n    linkInputPlaceHolder () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_LINK_PLACEHOLDER'); },\n    removeButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_REMOVE_LABEL'); },\n    cancelButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_CANCEL_LABEL'); },\n    confirmButtonLabel () { return this.i18n.$t('DIALTONE_MESSAGE_INPUT_LINK_CONFIRM_LABEL'); },\n  },\n\n  watch: {\n    open: {\n      immediate: true,\n      handler (value) {\n        this.isOpen = value;\n      },\n    },\n  },\n\n  methods: {\n    setInitialValues (linkText, linkInput) {\n      this.linkText = linkText;\n      this.linkInput = linkInput;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtPopover","DtInput","DtButton","DtStack","DtIconLink2","DtRecipeMessageInputButton","DtLocalizationMixin","value","linkText","linkInput"],"mappings":"obAkHAA,EAAA,CACA,KAAA,mBAEA,WAAA,CACA,UAAAC,EAAA,QACA,QAAAC,EAAA,QACA,SAAAC,EAAA,QACA,QAAAC,EAAA,QACA,YAAAC,EAAA,YACA,2BAAAC,EAAA,OACA,EAEA,OAAA,CAAAC,EAAAA,OAAA,EAEA,MAAA,CACA,KAAA,CACA,KAAA,QACA,QAAA,EACA,EAEA,kBAAA,CACA,KAAA,OACA,SAAA,EACA,EAEA,kBAAA,CACA,KAAA,SACA,QAAA,IAAA,CAAA,CACA,CACA,EAEA,MAAA,CAAA,WAAA,cAAA,QAAA,EAEA,MAAA,CACA,MAAA,CACA,SAAA,GACA,UAAA,GACA,OAAA,EACA,CACA,EAEA,SAAA,CACA,mBAAA,CAAA,OAAA,KAAA,KAAA,IAAA,0CAAA,CAAA,EACA,gBAAA,CAAA,OAAA,KAAA,KAAA,GAAA,wCAAA,CAAA,EACA,gBAAA,CAAA,OAAA,KAAA,KAAA,GAAA,wCAAA,CAAA,EACA,sBAAA,CAAA,OAAA,KAAA,KAAA,GAAA,8CAAA,CAAA,EACA,mBAAA,CAAA,OAAA,KAAA,KAAA,GAAA,0CAAA,CAAA,EACA,mBAAA,CAAA,OAAA,KAAA,KAAA,GAAA,0CAAA,CAAA,EACA,oBAAA,CAAA,OAAA,KAAA,KAAA,GAAA,2CAAA,CAAA,CACA,EAEA,MAAA,CACA,KAAA,CACA,UAAA,GACA,QAAAC,EAAA,CACA,KAAA,OAAAA,CACA,CACA,CACA,EAEA,QAAA,CACA,iBAAAC,EAAAC,EAAA,CACA,KAAA,SAAAD,EACA,KAAA,UAAAC,CACA,CACA,CACA"}