npm - @dialpad/dialtone-vue - Versions diffs - 3.221.0 → 3.222.0-next.1 - Mend

@dialpad/dialtone-vue 3.221.0 → 3.222.0-next.1

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

Files changed (2053) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ivr-node.cjs","names":[],"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=\"nodeListeners\"\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 v-model:open=\"isOpen\"\n placement=\"bottom\"\n >\n <template #anchor>\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n :aria-label=\"menuButtonAriaLabel\"\n :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/~~vue3~~';\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 { DialtoneLocalization } from '@/localization';\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 compatConfig: { MODE: 3 },\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 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 i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n nodeListeners () {\n return {\n click: (e) => this.$emit('click', e),\n };\n },\n\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"],"mappings":"~~wbAuHA~~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"}
1	+ {"version":3,"file":"ivr-node.cjs","names":[],"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=\"nodeListeners\"\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 v-model:open=\"isOpen\"\n placement=\"bottom\"\n >\n <template #anchor>\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n :aria-label=\"menuButtonAriaLabel\"\n :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/vue';\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 { DialtoneLocalization } from '@/localization';\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 compatConfig: { MODE: 3 },\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 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 i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n nodeListeners () {\n return {\n click: (e) => this.$emit('click', e),\n };\n },\n\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"],"mappings":"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"}

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

@@ -5,7 +5,7 @@ import r from "../card/card.js";
 import i from "../dropdown/dropdown.js";
 import { IVR_NODE_ASSIGN as a, IVR_NODE_BRANCH as o, IVR_NODE_CLASS_MAPPING as s, IVR_NODE_CUSTOMER_DATA as c, IVR_NODE_EXPERT as l, IVR_NODE_GO_TO as u, IVR_NODE_HANGUP as d, IVR_NODE_PROMPT_COLLECT as f, IVR_NODE_PROMPT_MENU as p, IVR_NODE_PROMPT_PLAY as m, IVR_NODE_TRANSFER as h } from "./ivr-node-constants.js";
 import { createBlock as g, createCommentVNode as _, createElementBlock as v, createElementVNode as y, createVNode as b, mergeProps as x, normalizeClass as S, openBlock as C, renderSlot as w, resolveComponent as T, resolveDynamicComponent as E, toDisplayString as D, toHandlers as O, withCtx as k, withModifiers as A } from "vue";
-import { DtIconBranch as j, DtIconCallMerge as M, DtIconChevronsRight as N, DtIconDialer as P, DtIconExpertNode as F, DtIconKeypad as I, DtIconListBullet as L, DtIconMoreVertical as R, DtIconPhoneHangUp as z, DtIconTransfer as B, DtIconVolume2 as V } from "@dialpad/dialtone-icons/vue3";
+import { DtIconBranch as j, DtIconCallMerge as M, DtIconChevronsRight as N, DtIconDialer as P, DtIconExpertNode as F, DtIconKeypad as I, DtIconListBullet as L, DtIconMoreVertical as R, DtIconPhoneHangUp as z, DtIconTransfer as B, DtIconVolume2 as V } from "@dialpad/dialtone-icons/vue";
 //#region recipes/cards/ivr_node/ivr_node.vue
 var H = new Map([
 	[p, I],

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ivr-node.js","names":[],"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=\"nodeListeners\"\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 v-model:open=\"isOpen\"\n placement=\"bottom\"\n >\n <template #anchor>\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n :aria-label=\"menuButtonAriaLabel\"\n :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/~~vue3~~';\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 { DialtoneLocalization } from '@/localization';\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 compatConfig: { MODE: 3 },\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 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 i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n nodeListeners () {\n return {\n click: (e) => this.$emit('click', e),\n };\n },\n\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"],"mappings":";;;;;;;;;AAuHA,IAAM,IAAa,IAAI,IAAI;CACzB,CAAC,GAAsB,EAAa;CACpC,CAAC,GAAyB,EAAa;CACvC,CAAC,GAAsB,EAAc;CACrC,CAAC,GAAiB,EAAiB;CACnC,CAAC,GAAiB,EAAa;CAC/B,CAAC,GAAgB,EAAgB;CACjC,CAAC,GAAiB,EAAoB;CACtC,CAAC,GAAwB,EAAiB;CAC1C,CAAC,GAAmB,EAAe;CACnC,CAAC,GAAiB,EAAkB;CACrC,CAAC,EAEG,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,QAAA;EACA,UAAA;EACA,YAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CAED,OAAO;EAKL,UAAU;GACR,MAAM;GACN,UAAU;GACX;EAMD,WAAW;GACT,MAAM;GACN,UAAU;GACX;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,SAAS;GACP,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAO,CAOL,QACD;CAED,OAAQ;AACN,SAAO;GACL,QAAQ;GACR,MAAM,IAAI,GAAsB;GACjC;;CAGH,UAAU;EACR,gBAAiB;AACf,UAAO,EACL,QAAQ,MAAM,KAAK,MAAM,SAAS,EAAE,EACrC;;EAGH,WAAY;AACV,UAAO,EAAW,IAAI,KAAK,SAAS;;EAGtC,YAAa;GACX,IAAM,EAAE,WAAQ,gBAAa,EAAuB,KAAK;AACzD,UAAO,KAAK,aAAa,IAAW;;EAGtC,aAAc;AACZ,UAAO,KAAK,aAAa;;EAG3B,gBAAiB;GACf,IAAM,IAAW,KAAK,SAAS,aAAa;AAC5C,UAAO,KAAK,KAAK,GAAG,qBAAqB,EAAS,aAAa;;EAGjE,sBAAuB;AACrB,UAAO,KAAK,KAAK,GAAG,2CAA2C;;EAElE;CAED,SAAS,EACP,WAAY;AACV,OAAK,SAAS;IAEjB;CACF,QApNY,OAAM,kCAAgC;CAiBvC,OAAM;CACN,WAAQ;SAwBH,OAAM,oCAAkC;;;aAtEvD,EAmFM,OAnFN,EAmFM,EAlFH,OAAK,CAAA,qBAAqC,EAAA,UAAA,EAAA,EAI3C,EAAoB,EAAd,eAAa,GAAA,CAAA,EAAA;EAGX,EAAA,WAAA,GAAA,EADR,EAOM,OAAA;;GALJ,WAAQ;GACR,OAAK,EAAA,CAAC,kEAAgE,EAAA,+CACb,EAAA,YAAU,CAAA,CAAA;OAEhE,EAAA,QAAO,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;EAGJ,EAAA,OAAO,YADf,EAGE,EAAA,QAAA,aAAA,EAAA,KAAA,GAAA,CAAA,GAAA,EAAA,IAAA,GAAA;GAEO,EAAA,WAAO,CAAK,EAAA,OAAO,aAAA,GAAA,EAD5B,EAKE,OAAA;;GAHA,WAAQ;GACR,OAAK,EAAA,CAAC,gCAA8B,EAAA,0CACgB,EAAA,YAAU,CAAA,CAAA;;EAEhE,EAyDU,GAAA,MAAA;GAxDG,QAAM,QAwBT,CAtBN,EAsBM,OAtBN,GAsBM,CArBJ,EAcY,GAAA;IAbV,YAAW;IACX,MAAK;IACL,WAAQ;IACP,cAAY,EAAA;IACZ,OAAO,EAAA;;IAEG,MAAI,QAKX,EAAA,GAAA,EAJF,EAIE,EAHK,EAAA,SAAQ,EAAA;KACb,MAAK;KACJ,OAAK,EAAA,CAAA,IAAA,EAAA,gCAAyC,EAAA,YAAU,CAAA,CAAA;;;mCAI/D,EAKI,KALJ,GAKI,EADC,EAAA,UAAS,EAAA,EAAA,CAAA,CAAA,EAIhB,EAyBc,GAAA;IAxBJ,MAAM,EAAA;4CAAA,EAAA,SAAM;IACpB,WAAU;;IAEC,QAAM,QAWH,CAVZ,EAUY,GAAA;KATV,YAAW;KACX,MAAK;KACJ,cAAY,EAAA;KACZ,OAAO,EAAA;KACP,SAAK,EAAe,EAAA,UAAQ,CAAA,QAAA,UAAA,CAAA;;KAElB,MAAI,QACuB,CAApC,EAAoC,GAAA,EAAb,MAAK,OAAK,CAAA,CAAA,CAAA;;;;;;;IAI5B,MAAI,GAMP,EANW,eAAK,CACtB,EAKM,OALN,GAKM,CAJJ,EAGE,EAAA,QAAA,aAAA,EADQ,UAAK,CAAA,CAAA,CAAA,CAAA,CAAA;;;GAMZ,SAAO,QACO,CAAvB,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"ivr-node.js","names":[],"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=\"nodeListeners\"\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 v-model:open=\"isOpen\"\n placement=\"bottom\"\n >\n <template #anchor>\n <dt-button\n importance=\"clear\"\n kind=\"muted\"\n :aria-label=\"menuButtonAriaLabel\"\n :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/vue';\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 { DialtoneLocalization } from '@/localization';\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 compatConfig: { MODE: 3 },\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 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 i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n nodeListeners () {\n return {\n click: (e) => this.$emit('click', e),\n };\n },\n\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"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard-shortcut-constants.cjs","names":[],"sources":["../../../components/~~keyboard_shortcut~~/~~keyboard_shortcut_constants~~.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n '{win}',\n '{arrow-right}',\n '{arrow-left}',\n '{arrow-up}',\n '{arrow-down}',\n '{cmd}',\n '{opt}',\n];\n"],"mappings":"mEAAA,IAAa,EAAyB,CACpC,QACA,gBACA,eACA,aACA,eACA,QACA,QACD"}
1	+ {"version":3,"file":"keyboard-shortcut-constants.cjs","names":[],"sources":["../../../components/KeyboardShortcut/KeyboardShortcutConstants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n '{win}',\n '{arrow-right}',\n '{arrow-left}',\n '{arrow-up}',\n '{arrow-down}',\n '{cmd}',\n '{opt}',\n];\n"],"mappings":"mEAAA,IAAa,EAAyB,CACpC,QACA,gBACA,eACA,aACA,eACA,QACA,QACD"}

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

@@ -1,4 +1,4 @@
-//#region components/keyboard_shortcut/keyboard_shortcut_constants.js
+//#region components/KeyboardShortcut/KeyboardShortcutConstants.js
 var e = [
 	"{win}",
 	"{arrow-right}",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard-shortcut-constants.js","names":[],"sources":["../../../components/~~keyboard_shortcut~~/~~keyboard_shortcut_constants~~.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n '{win}',\n '{arrow-right}',\n '{arrow-left}',\n '{arrow-up}',\n '{arrow-down}',\n '{cmd}',\n '{opt}',\n];\n"],"mappings":";AAAA,IAAa,IAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}
1	+ {"version":3,"file":"keyboard-shortcut-constants.js","names":[],"sources":["../../../components/KeyboardShortcut/KeyboardShortcutConstants.js"],"sourcesContent":["export const SHORTCUTS_ALIASES_LIST = [\n '{win}',\n '{arrow-right}',\n '{arrow-left}',\n '{arrow-up}',\n '{arrow-down}',\n '{cmd}',\n '{opt}',\n];\n"],"mappings":";AAAA,IAAa,IAAyB;CACpC;CACA;CACA;CACA;CACA;CACA;CACA;CACD"}

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

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`);let t=require(`vue`),n=require(`@dialpad/dialtone-icons/vue3`);var r={"{win}":n.DtIconLayoutGrid,"{arrow-right}":n.DtIconArrowRight,"{arrow-left}":n.DtIconArrowLeft,"{arrow-up}":n.DtIconArrowUp,"{arrow-down}":n.DtIconArrowDown,"{cmd}":n.DtIconCommand,"{opt}":n.DtIconOption},i={"{cmd}":`Command`,"{opt}":`Option`,"{win}":`Windows`,"{arrow-right}":`Right Arrow`,"{arrow-left}":`Left Arrow`,"{arrow-up}":`Up Arrow`,"{arrow-down}":`Down Arrow`,"{plus}":`plus`},a={ctrl:`Control`,alt:`Alt`,esc:`Escape`,del:`Delete`,ins:`Insert`,pgup:`Page Up`,pgdn:`Page Down`,num:`Number`,caps:`Caps Lock`},o={compatConfig:{MODE:3},name:`DtKeyboardShortcut`,components:{DtIconLayoutGrid:n.DtIconLayoutGrid,DtIconArrowRight:n.DtIconArrowRight,DtIconArrowLeft:n.DtIconArrowLeft,DtIconArrowUp:n.DtIconArrowUp,DtIconArrowDown:n.DtIconArrowDown,DtIconCommand:n.DtIconCommand,DtIconOption:n.DtIconOption,DtIconPlus:n.DtIconPlus},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...r,"{plus}":n.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,`{plus}`)},formattedShortcut(){return Object.keys(r).reduce((e,t)=>e.replace(RegExp(`{`+t+`}`,`gi`),r[t]),this.shortcutWithSeparator)},formattedShortcutSplit(){let e=Object.keys(this.icons).join(`|`),t=RegExp(`(${e})`,`gi`);return this.formattedShortcut.split(t).filter(Boolean)},generatedScreenReaderText(){return this.formattedShortcutSplit.map(e=>{let t=e.trim();if(i[t])return i[t];let n=t.toLowerCase();return a[n]?a[n]:t}).filter(e=>e).join(` `)}}},s={class:`d-keyboard-shortcut--sr-only`},c=[`innerHTML`];function l(e,n,r,i,a,o){return(0,t.openBlock)(),(0,t.createElementBlock)(`kbd`,{class:(0,t.normalizeClass)([`d-keyboard-shortcut`,{"d-keyboard-shortcut--inverted":r.inverted}])},[(0,t.createElementVNode)(`span`,s,(0,t.toDisplayString)(r.screenReaderText||o.generatedScreenReaderText),1),((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(o.formattedShortcutSplit,(e,n)=>((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,null,[o.icons[e]?((0,t.openBlock)(),(0,t.createBlock)((0,t.resolveDynamicComponent)(o.icons[e]),{key:`icon-${n}-${e}`,size:`100`,"aria-hidden":`true`,class:(0,t.normalizeClass)([`d-keyboard-shortcut__icon`,{"d-keyboard-shortcut__icon--inverted":r.inverted}])},null,8,[`class`])):e.trim()?((0,t.openBlock)(),(0,t.createElementBlock)(`span`,{key:`text-${n}-${e}`,"aria-hidden":`true`,class:(0,t.normalizeClass)([`d-keyboard-shortcut__item`,{"d-keyboard-shortcut__item--inverted":r.inverted}]),innerHTML:e},null,10,c)):(0,t.createCommentVNode)(``,!0)],64))),256))],2)}var u=e.t(o,[[`render`,l]]);exports.default=u;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../text/text.cjs`);let n=require(`vue`),r=require(`@dialpad/dialtone-icons/vue`);var i={"{win}":r.DtIconLayoutGrid,"{arrow-right}":r.DtIconArrowRight,"{arrow-left}":r.DtIconArrowLeft,"{arrow-up}":r.DtIconArrowUp,"{arrow-down}":r.DtIconArrowDown,"{cmd}":r.DtIconCommand,"{opt}":r.DtIconOption},a={"{cmd}":`Command`,"{opt}":`Option`,"{win}":`Windows`,"{arrow-right}":`Right Arrow`,"{arrow-left}":`Left Arrow`,"{arrow-up}":`Up Arrow`,"{arrow-down}":`Down Arrow`,"{plus}":`plus`},o={ctrl:`Control`,alt:`Alt`,esc:`Escape`,del:`Delete`,ins:`Insert`,pgup:`Page Up`,pgdn:`Page Down`,num:`Number`,caps:`Caps Lock`},s={name:`DtKeyboardShortcut`,components:{DtIconLayoutGrid:r.DtIconLayoutGrid,DtIconArrowRight:r.DtIconArrowRight,DtIconArrowLeft:r.DtIconArrowLeft,DtIconArrowUp:r.DtIconArrowUp,DtIconArrowDown:r.DtIconArrowDown,DtIconCommand:r.DtIconCommand,DtIconOption:r.DtIconOption,DtIconPlus:r.DtIconPlus,DtText:t.default},props:{inverted:{type:Boolean,default:!1},shortcut:{type:String,required:!0},screenReaderText:{type:String,default:null}},data(){return{separator:/\+/gi}},computed:{icons(){return{...i,"{plus}":r.DtIconPlus}},shortcutWithSeparator(){return this.shortcut.replace(this.separator,`{plus}`)},formattedShortcut(){return Object.keys(i).reduce((e,t)=>e.replace(RegExp(`{`+t+`}`,`gi`),i[t]),this.shortcutWithSeparator)},formattedShortcutSplit(){let e=Object.keys(this.icons).join(`|`),t=RegExp(`(${e})`,`gi`);return this.formattedShortcut.split(t).filter(Boolean)},generatedScreenReaderText(){return this.formattedShortcutSplit.map(e=>{let t=e.trim();if(a[t])return a[t];let n=t.toLowerCase();return o[n]?o[n]:t}).filter(e=>e).join(` `)}}},c={class:`d-keyboard-shortcut--sr-only`},l=[`innerHTML`];function u(e,t,r,i,a,o){let s=(0,n.resolveComponent)(`dt-text`);return(0,n.openBlock)(),(0,n.createElementBlock)(`kbd`,{class:(0,n.normalizeClass)([`d-keyboard-shortcut`,{"d-keyboard-shortcut--inverted":r.inverted}])},[(0,n.createElementVNode)(`span`,c,(0,n.toDisplayString)(r.screenReaderText||o.generatedScreenReaderText),1),((0,n.openBlock)(!0),(0,n.createElementBlock)(n.Fragment,null,(0,n.renderList)(o.formattedShortcutSplit,(e,t)=>((0,n.openBlock)(),(0,n.createElementBlock)(n.Fragment,null,[o.icons[e]?((0,n.openBlock)(),(0,n.createBlock)((0,n.resolveDynamicComponent)(o.icons[e]),{key:`icon-${t}-${e}`,size:`100`,"aria-hidden":`true`,class:(0,n.normalizeClass)([`d-keyboard-shortcut__icon`,{"d-keyboard-shortcut__icon--inverted":r.inverted}])},null,8,[`class`])):e.trim()?((0,n.openBlock)(),(0,n.createBlock)(s,{key:`text-${t}-${e}`,kind:`body`,size:200,numeric:``,density:400,tone:`tertiary`,"aria-hidden":`true`,class:(0,n.normalizeClass)([`d-keyboard-shortcut__item`,{"d-keyboard-shortcut__item--inverted":r.inverted}])},{default:(0,n.withCtx)(()=>[(0,n.createElementVNode)(`span`,{innerHTML:e},null,8,l)]),_:2},1032,[`class`])):(0,n.createCommentVNode)(``,!0)],64))),256))],2)}var d=e.t(s,[[`render`,u]]);exports.default=d;
 //# sourceMappingURL=keyboard-shortcut.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard-shortcut.cjs","names":[],"sources":["../../../components/~~keyboard_shortcut~~/~~keyboard_shortcut~~.vue"],"sourcesContent":["~~<!-- eslint-disable vue/no-v-html -->\n~~<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span class=\"d-keyboard-shortcut--sr-only\">\n {{ screenReaderText \|\| generatedScreenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`icon-${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <~~span~~\n v-else-if=\"item.trim()\"\n :key=\"`text-${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n ~~/>\~~n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/~~vue3~~';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n '{cmd}': 'Command',\n '{opt}': 'Option',\n '{win}': 'Windows',\n '{arrow-right}': 'Right Arrow',\n '{arrow-left}': 'Left Arrow',\n '{arrow-up}': 'Up Arrow',\n '{arrow-down}': 'Down Arrow',\n '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n 'ctrl': 'Control',\n 'alt': 'Alt',\n 'esc': 'Escape',\n 'del': 'Delete',\n 'ins': 'Insert',\n 'pgup': 'Page Up',\n 'pgdn': 'Page Down',\n 'num': 'Number',\n 'caps': 'Caps Lock',\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n ~~compatConfig: { MODE: 3 },\n~~ name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Optional text to override the auto-generated accessible text for assistive technology.\n * If not provided, accessible text will be automatically generated from the shortcut.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n\n // Generates accessible text for the keyboard shortcut\n generatedScreenReaderText () {\n return this.formattedShortcutSplit\n .map(item => {\n const trimmedItem = item.trim();\n\n // Convert icon aliases to readable text\n if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n return ICON_ALIAS_TO_TEXT[trimmedItem];\n }\n\n // Convert key abbreviations to full names (case-insensitive)\n const lowerItem = trimmedItem.toLowerCase();\n if (KEY_ABBREVIATIONS[lowerItem]) {\n return KEY_ABBREVIATIONS[lowerItem];\n }\n\n // Return the key as-is if it's not an alias or abbreviation\n return trimmedItem;\n })\n .filter(item => item) // Remove empty strings\n .join(' ');\n },\n },\n};\n</script>\n"],"mappings":"~~kQAmDA~~,IAAM,EAAyB,CAC7B,QAAS,EAAA,iBACT,gBAAiB,EAAA,iBACjB,eAAgB,EAAA,gBAChB,aAAc,EAAA,cACd,eAAgB,EAAA,gBAChB,QAAS,EAAA,cACT,QAAS,EAAA,aACV,CAGK,EAAqB,CACzB,QAAS,UACT,QAAS,SACT,QAAS,UACT,gBAAiB,cACjB,eAAgB,aAChB,aAAc,WACd,eAAgB,aAChB,SAAU,OACX,CAGK,EAAoB,CACxB,KAAQ,UACR,IAAO,MACP,IAAO,SACP,IAAO,SACP,IAAO,SACP,KAAQ,UACR,KAAQ,YACR,IAAO,SACP,KAAQ,YACT,CAMI,EAAU,CACb,~~aAAc,CAAE,~~KAAM,~~EAAG,CACzB,KAAM,~~qBAEN,WAAY,CACV,iBAAA,EAAA,iBACA,iBAAA,EAAA,iBACA,gBAAA,EAAA,gBACA,cAAA,EAAA,cACA,gBAAA,EAAA,gBACA,cAAA,EAAA,cACA,aAAA,EAAA,aACA,WAAA,EAAA,~~WACD~~,CAED,MAAO,~~CAKL~~,SAAU,CACR,KAAM,QACN,QAAS,GACV,CAMD,SAAU,CACR,KAAM,OACN,SAAU,GACX,CAMD,iBAAkB,CAChB,KAAM,OACN,QAAS,KACV,CACF,CAED,MAAQ,CACN,MAAO,CACL,UAAW,OACZ,EAGH,SAAU,CACR,OAAS,CACP,MAAO,CACL,GAAG,EACH,SAAU,EAAA,WACX,EAGH,uBAAyB,CACvB,OAAO,KAAK,SAAS,QAAQ,KAAK,UAAW,SAAS,EAGxD,mBAAqB,CACnB,OAAO,OAAO,KAAK,EAAuB,CAAC,QAAQ,EAAQ,IAClD,EAAO,QAAY,OAAO,IAAM,EAAM,IAAK,KAAK,CAAE,EAAuB,GAAK,CACpF,KAAK,sBAAsB,EAIhC,wBAA0B,CACxB,IAAM,EAAkB,OAAO,KAAK,KAAK,MAAM,CAAC,KAAK,IAAI,CAOnD,EAAY,OAAO,IAAI,EAAgB,GAAI,KAAK,CACtD,OAAO,KAAK,kBAAkB,MAAM,EAAM,CAAC,OAAO,QAAQ,EAI5D,2BAA6B,CAC3B,OAAO,KAAK,uBACT,IAAI,GAAQ,CACX,IAAM,EAAc,EAAK,MAAM,CAG/B,GAAI,EAAmB,GACrB,OAAO,EAAmB,GAI5B,IAAM,EAAY,EAAY,aAAa,CAM3C,OALI,EAAkB,GACb,EAAkB,GAIpB,GACR,CACA,OAAO,GAAQ,EAAI,CACnB,KAAK,IAAI,EAEf,CACF,~~IA3LS~~,MAAM,+BAA8B,~~0FA4BtC~~,MAAA,~~CAjCH~~,OAAA,EAAA,EAAA,gBAAK,CAAA,sBAAA,CAAA,gCAA0E,EAAA,SAAQ,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,EAAA,oBAOjF,OAFP,GAAA,EAAA,EAAA,iBACK,EAAA,kBAAoB,EAAA,0BAAyB,CAAA,EAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,~~oBA0BvC~~,EAAA,SAAA,MAAA,EAAA,EAAA,~~YAvBW~~,EAAA,wBAAZ,EAAM,iEAIN,EAAA,MAAM,KAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADP,EAAA,MAAM,GAAI,CAAA,CAEd,IAAG,QAAU,EAAC,GAAI,IACnB,KAAK,MACL,cAAY,OACX,OAAA,EAAA,EAAA,gBAAK,CAAA,4BAAA,CAAA,sCAA8F,EAAA,SAAQ,CAAA,CAAA,qBAMjG,EAAK,MAAI,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,~~oBAQpB~~,~~OAAA~~,~~CAPC~~,IAAG,QAAU,EAAC,GAAI,IACnB,cAAY,OACX,OAAA,EAAA,EAAA,gBAAK,CAAA,4BAAA,CAAA,sCAA8F,EAAA,SAAQ,CAAA,CAAA,~~CAI5G~~,UAAQ"}
1	+ {"version":3,"file":"keyboard-shortcut.cjs","names":[],"sources":["../../../components/KeyboardShortcut/KeyboardShortcut.vue"],"sourcesContent":["<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span class=\"d-keyboard-shortcut--sr-only\">\n {{ screenReaderText \|\| generatedScreenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`icon-${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <dt-text\n v-else-if=\"item.trim()\"\n :key=\"`text-${i}-${item}`\"\n kind=\"body\"\n :size=\"200\"\n numeric\n :density=\"400\"\n tone=\"tertiary\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n >\n <!-- eslint-disable-next-line vue/no-v-html -->\n <span v-html=\"item\" />\n </dt-text>\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue';\nimport { DtText } from '@/components/Text';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n '{cmd}': 'Command',\n '{opt}': 'Option',\n '{win}': 'Windows',\n '{arrow-right}': 'Right Arrow',\n '{arrow-left}': 'Left Arrow',\n '{arrow-up}': 'Up Arrow',\n '{arrow-down}': 'Down Arrow',\n '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n 'ctrl': 'Control',\n 'alt': 'Alt',\n 'esc': 'Escape',\n 'del': 'Delete',\n 'ins': 'Insert',\n 'pgup': 'Page Up',\n 'pgdn': 'Page Down',\n 'num': 'Number',\n 'caps': 'Caps Lock',\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n DtText,\n },\n\n props: {\n /\n @deprecated Use v-dt-mode instead.\n * If true, applies inverted styles.\n * @values true, false\n * @deprecated Use v-dt-mode directive instead.\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Optional text to override the auto-generated accessible text for assistive technology.\n * If not provided, accessible text will be automatically generated from the shortcut.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n\n // Generates accessible text for the keyboard shortcut\n generatedScreenReaderText () {\n return this.formattedShortcutSplit\n .map(item => {\n const trimmedItem = item.trim();\n\n // Convert icon aliases to readable text\n if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n return ICON_ALIAS_TO_TEXT[trimmedItem];\n }\n\n // Convert key abbreviations to full names (case-insensitive)\n const lowerItem = trimmedItem.toLowerCase();\n if (KEY_ABBREVIATIONS[lowerItem]) {\n return KEY_ABBREVIATIONS[lowerItem];\n }\n\n // Return the key as-is if it's not an alias or abbreviation\n return trimmedItem;\n })\n .filter(item => item) // Remove empty strings\n .join(' ');\n },\n },\n};\n</script>\n"],"mappings":"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"}

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

@@ -1,16 +1,17 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { Fragment as t, createBlock as n, createCommentVNode as r, createElementBlock as i, createElementVNode as a, normalizeClass as o, openBlock as s, renderList as c, resolveDynamicComponent as l, toDisplayString as u } from "vue";
-import { DtIconArrowDown as d, DtIconArrowLeft as f, DtIconArrowRight as p, DtIconArrowUp as m, DtIconCommand as h, DtIconLayoutGrid as g, DtIconOption as _, DtIconPlus as v } from "@dialpad/dialtone-icons/vue3";
-//#region components/keyboard_shortcut/keyboard_shortcut.vue
-var y = {
-	"{win}": g,
-	"{arrow-right}": p,
-	"{arrow-left}": f,
-	"{arrow-up}": m,
-	"{arrow-down}": d,
-	"{cmd}": h,
-	"{opt}": _
-}, b = {
+import t from "../text/text.js";
+import { Fragment as n, createBlock as r, createCommentVNode as i, createElementBlock as a, createElementVNode as o, normalizeClass as s, openBlock as c, renderList as l, resolveComponent as u, resolveDynamicComponent as d, toDisplayString as f, withCtx as p } from "vue";
+import { DtIconArrowDown as m, DtIconArrowLeft as h, DtIconArrowRight as g, DtIconArrowUp as _, DtIconCommand as v, DtIconLayoutGrid as y, DtIconOption as b, DtIconPlus as x } from "@dialpad/dialtone-icons/vue";
+//#region components/KeyboardShortcut/KeyboardShortcut.vue
+var S = {
+	"{win}": y,
+	"{arrow-right}": g,
+	"{arrow-left}": h,
+	"{arrow-up}": _,
+	"{arrow-down}": m,
+	"{cmd}": v,
+	"{opt}": b
+}, C = {
 	"{cmd}": "Command",
 	"{opt}": "Option",
 	"{win}": "Windows",
@@ -19,7 +20,7 @@ var y = {
 	"{arrow-up}": "Up Arrow",
 	"{arrow-down}": "Down Arrow",
 	"{plus}": "plus"
-}, x = {
+}, w = {
 	ctrl: "Control",
 	alt: "Alt",
 	esc: "Escape",
@@ -29,18 +30,18 @@ var y = {
 	pgdn: "Page Down",
 	num: "Number",
 	caps: "Caps Lock"
-}, S = {
-	compatConfig: { MODE: 3 },
+}, T = {
 	name: "DtKeyboardShortcut",
 	components: {
-		DtIconLayoutGrid: g,
-		DtIconArrowRight: p,
-		DtIconArrowLeft: f,
-		DtIconArrowUp: m,
-		DtIconArrowDown: d,
-		DtIconCommand: h,
-		DtIconOption: _,
-		DtIconPlus: v
+		DtIconLayoutGrid: y,
+		DtIconArrowRight: g,
+		DtIconArrowLeft: h,
+		DtIconArrowUp: _,
+		DtIconArrowDown: m,
+		DtIconCommand: v,
+		DtIconOption: b,
+		DtIconPlus: x,
+		DtText: t
 	},
 	props: {
 		inverted: {
@@ -62,15 +63,15 @@ var y = {
 	computed: {
 		icons() {
 			return {
-				...y,
-				"{plus}": v
+				...S,
+				"{plus}": x
 			};
 		},
 		shortcutWithSeparator() {
 			return this.shortcut.replace(this.separator, "{plus}");
 		},
 		formattedShortcut() {
-			return Object.keys(y).reduce((e, t) => e.replace(RegExp("{" + t + "}", "gi"), y[t]), this.shortcutWithSeparator);
+			return Object.keys(S).reduce((e, t) => e.replace(RegExp("{" + t + "}", "gi"), S[t]), this.shortcutWithSeparator);
 		},
 		formattedShortcutSplit() {
 			let e = Object.keys(this.icons).join("|"), t = RegExp(`(${e})`, "gi");
@@ -79,28 +80,36 @@ var y = {
 		generatedScreenReaderText() {
 			return this.formattedShortcutSplit.map((e) => {
 				let t = e.trim();
-				if (b[t]) return b[t];
+				if (C[t]) return C[t];
 				let n = t.toLowerCase();
-				return x[n] ? x[n] : t;
+				return w[n] ? w[n] : t;
 			}).filter((e) => e).join(" ");
 		}
 	}
-}, C = { class: "d-keyboard-shortcut--sr-only" }, w = ["innerHTML"];
-function T(e, d, f, p, m, h) {
-	return s(), i("kbd", { class: o(["d-keyboard-shortcut", { "d-keyboard-shortcut--inverted": f.inverted }]) }, [a("span", C, u(f.screenReaderText || h.generatedScreenReaderText), 1), (s(!0), i(t, null, c(h.formattedShortcutSplit, (e, a) => (s(), i(t, null, [h.icons[e] ? (s(), n(l(h.icons[e]), {
-		key: `icon-${a}-${e}`,
+}, E = { class: "d-keyboard-shortcut--sr-only" }, D = ["innerHTML"];
+function O(e, t, m, h, g, _) {
+	let v = u("dt-text");
+	return c(), a("kbd", { class: s(["d-keyboard-shortcut", { "d-keyboard-shortcut--inverted": m.inverted }]) }, [o("span", E, f(m.screenReaderText || _.generatedScreenReaderText), 1), (c(!0), a(n, null, l(_.formattedShortcutSplit, (e, t) => (c(), a(n, null, [_.icons[e] ? (c(), r(d(_.icons[e]), {
+		key: `icon-${t}-${e}`,
 		size: "100",
 		"aria-hidden": "true",
-		class: o(["d-keyboard-shortcut__icon", { "d-keyboard-shortcut__icon--inverted": f.inverted }])
-	}, null, 8, ["class"])) : e.trim() ? (s(), i("span", {
-		key: `text-${a}-${e}`,
+		class: s(["d-keyboard-shortcut__icon", { "d-keyboard-shortcut__icon--inverted": m.inverted }])
+	}, null, 8, ["class"])) : e.trim() ? (c(), r(v, {
+		key: `text-${t}-${e}`,
+		kind: "body",
+		size: 200,
+		numeric: "",
+		density: 400,
+		tone: "tertiary",
 		"aria-hidden": "true",
-		class: o(["d-keyboard-shortcut__item", { "d-keyboard-shortcut__item--inverted": f.inverted }]),
-		innerHTML: e
-	}, null, 10, w)) : r("", !0)], 64))), 256))], 2);
+		class: s(["d-keyboard-shortcut__item", { "d-keyboard-shortcut__item--inverted": m.inverted }])
+	}, {
+		default: p(() => [o("span", { innerHTML: e }, null, 8, D)]),
+		_: 2
+	}, 1032, ["class"])) : i("", !0)], 64))), 256))], 2);
 }
-var E = /* @__PURE__ */ e(S, [["render", T]]);
+var k = /* @__PURE__ */ e(T, [["render", O]]);
 //#endregion
-export { E as default };
+export { k as default };
 //# sourceMappingURL=keyboard-shortcut.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"keyboard-shortcut.js","names":[],"sources":["../../../components/~~keyboard_shortcut~~/~~keyboard_shortcut~~.vue"],"sourcesContent":["~~<!-- eslint-disable vue/no-v-html -->\n~~<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span class=\"d-keyboard-shortcut--sr-only\">\n {{ screenReaderText \|\| generatedScreenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`icon-${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <~~span~~\n v-else-if=\"item.trim()\"\n :key=\"`text-${i}-${item}`\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n v-html=\"item\"\n ~~/>\~~n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/~~vue3~~';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n '{cmd}': 'Command',\n '{opt}': 'Option',\n '{win}': 'Windows',\n '{arrow-right}': 'Right Arrow',\n '{arrow-left}': 'Left Arrow',\n '{arrow-up}': 'Up Arrow',\n '{arrow-down}': 'Down Arrow',\n '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n 'ctrl': 'Control',\n 'alt': 'Alt',\n 'esc': 'Escape',\n 'del': 'Delete',\n 'ins': 'Insert',\n 'pgup': 'Page Up',\n 'pgdn': 'Page Down',\n 'num': 'Number',\n 'caps': 'Caps Lock',\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n ~~compatConfig: { MODE: 3 },\n~~ name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n },\n\n props: {\n /\n If true, applies inverted styles.\n * @values true, false\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Optional text to override the auto-generated accessible text for assistive technology.\n * If not provided, accessible text will be automatically generated from the shortcut.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n\n // Generates accessible text for the keyboard shortcut\n generatedScreenReaderText () {\n return this.formattedShortcutSplit\n .map(item => {\n const trimmedItem = item.trim();\n\n // Convert icon aliases to readable text\n if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n return ICON_ALIAS_TO_TEXT[trimmedItem];\n }\n\n // Convert key abbreviations to full names (case-insensitive)\n const lowerItem = trimmedItem.toLowerCase();\n if (KEY_ABBREVIATIONS[lowerItem]) {\n return KEY_ABBREVIATIONS[lowerItem];\n }\n\n // Return the key as-is if it's not an alias or abbreviation\n return trimmedItem;\n })\n .filter(item => item) // Remove empty strings\n .join(' ');\n },\n },\n};\n</script>\n"],"mappings":"~~;;;;AAmDA~~,IAAM,IAAyB;CAC7B,SAAS;CACT,iBAAiB;CACjB,gBAAgB;CAChB,cAAc;CACd,gBAAgB;CAChB,SAAS;CACT,SAAS;CACV,EAGK,IAAqB;CACzB,SAAS;CACT,SAAS;CACT,SAAS;CACT,iBAAiB;CACjB,gBAAgB;CAChB,cAAc;CACd,gBAAgB;CAChB,UAAU;CACX,EAGK,IAAoB;CACxB,MAAQ;CACR,KAAO;CACP,KAAO;CACP,KAAO;CACP,KAAO;CACP,MAAQ;CACR,MAAQ;CACR,KAAO;CACP,MAAQ;CACT,EAMI,IAAU;CACb,~~cAAc,EAAE,~~MAAM~~,GAAG~~;~~CACzB,MAAM;~~CAEN,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CAED,OAAO;~~EAKL~~,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,UAAU;GACX;EAMD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,WAAW,QACZ;;CAGH,UAAU;EACR,QAAS;AACP,UAAO;IACL,GAAG;IACH,UAAU;IACX;;EAGH,wBAAyB;AACvB,UAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,SAAS;;EAGxD,oBAAqB;AACnB,UAAO,OAAO,KAAK,EAAuB,CAAC,QAAQ,GAAQ,MAClD,EAAO,QAAY,OAAO,MAAM,IAAM,KAAK,KAAK,EAAE,EAAuB,GAAK,EACpF,KAAK,sBAAsB;;EAIhC,yBAA0B;GACxB,IAAM,IAAkB,OAAO,KAAK,KAAK,MAAM,CAAC,KAAK,IAAI,EAOnD,IAAY,OAAO,IAAI,EAAgB,IAAI,KAAK;AACtD,UAAO,KAAK,kBAAkB,MAAM,EAAM,CAAC,OAAO,QAAQ;;EAI5D,4BAA6B;AAC3B,UAAO,KAAK,uBACT,KAAI,MAAQ;IACX,IAAM,IAAc,EAAK,MAAM;AAG/B,QAAI,EAAmB,GACrB,QAAO,EAAmB;IAI5B,IAAM,IAAY,EAAY,aAAa;AAM3C,WALI,EAAkB,KACb,EAAkB,KAIpB;KACR,CACA,QAAO,MAAQ,EAAI,CACnB,KAAK,IAAI;;EAEf;CACF,~~QA3LS~~,OAAM,gCAA8B;;aAN5C,~~EAkCM~~,OAAA,~~EAjCH~~,OAAK,EAAA,CAAA,uBAAA,EAAA,iCAA0E,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,CAKxF,EAEO,QAFP,GAEO,EADF,EAAA,oBAAoB,EAAA,0BAAyB,EAAA,EAAA,GAAA,EAAA,GAAA,EAElD,~~EAwBW~~,GAAA,MAAA,~~EAvBW~~,EAAA,yBAAZ,GAAM,wBAIN,EAAA,MAAM,MAAA,GAAA,EAFd,EAUE,EATK,EAAA,MAAM,GAAI,EAAA;EAEd,KAAG,QAAU,EAAC,GAAI;EACnB,MAAK;EACL,eAAY;EACX,OAAK,EAAA,CAAA,6BAAA,EAAA,uCAA8F,EAAA,UAAQ,CAAA,CAAA;2BAMjG,EAAK,MAAI,IAAA,GAAA,EADtB,~~EASE~~,~~QAAA~~;~~EAPC~~,KAAG,QAAU,EAAC,GAAI;EACnB,eAAY;EACX,OAAK,EAAA,CAAA,6BAAA,EAAA,uCAA8F,EAAA,UAAQ,CAAA,CAAA~~;EAI5G~~,WAAQ"}
1	+ {"version":3,"file":"keyboard-shortcut.js","names":[],"sources":["../../../components/KeyboardShortcut/KeyboardShortcut.vue"],"sourcesContent":["<template>\n <kbd\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span class=\"d-keyboard-shortcut--sr-only\">\n {{ screenReaderText \|\| generatedScreenReaderText }}\n </span>\n <template\n v-for=\"(item, i) in formattedShortcutSplit\"\n >\n <component\n :is=\"icons[item]\"\n v-if=\"icons[item]\"\n :key=\"`icon-${i}-${item}`\"\n size=\"100\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__icon',\n { 'd-keyboard-shortcut__icon--inverted': inverted },\n ]\"\n />\n <dt-text\n v-else-if=\"item.trim()\"\n :key=\"`text-${i}-${item}`\"\n kind=\"body\"\n :size=\"200\"\n numeric\n :density=\"400\"\n tone=\"tertiary\"\n aria-hidden=\"true\"\n :class=\"[\n 'd-keyboard-shortcut__item',\n { 'd-keyboard-shortcut__item--inverted': inverted },\n ]\"\n >\n <!-- eslint-disable-next-line vue/no-v-html -->\n <span v-html=\"item\" />\n </dt-text>\n </template>\n </kbd>\n</template>\n\n<script>\nimport {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n} from '@dialpad/dialtone-icons/vue';\nimport { DtText } from '@/components/Text';\n\nconst SHORTCUTS_ICON_ALIASES = {\n '{win}': DtIconLayoutGrid,\n '{arrow-right}': DtIconArrowRight,\n '{arrow-left}': DtIconArrowLeft,\n '{arrow-up}': DtIconArrowUp,\n '{arrow-down}': DtIconArrowDown,\n '{cmd}': DtIconCommand,\n '{opt}': DtIconOption,\n};\n\n// Mapping of icon aliases to readable text for accessibility\nconst ICON_ALIAS_TO_TEXT = {\n '{cmd}': 'Command',\n '{opt}': 'Option',\n '{win}': 'Windows',\n '{arrow-right}': 'Right Arrow',\n '{arrow-left}': 'Left Arrow',\n '{arrow-up}': 'Up Arrow',\n '{arrow-down}': 'Down Arrow',\n '{plus}': 'plus',\n};\n\n// Mapping of common key abbreviations to full names for accessibility\nconst KEY_ABBREVIATIONS = {\n 'ctrl': 'Control',\n 'alt': 'Alt',\n 'esc': 'Escape',\n 'del': 'Delete',\n 'ins': 'Insert',\n 'pgup': 'Page Up',\n 'pgdn': 'Page Down',\n 'num': 'Number',\n 'caps': 'Caps Lock',\n};\n\n/*\n This component displays a visual representation of a keyboard shortcut to the user.\n * @see https://dialtone.dialpad.com/components/keyboard_shortcut.html\n /\nexport default {\n name: 'DtKeyboardShortcut',\n\n components: {\n DtIconLayoutGrid,\n DtIconArrowRight,\n DtIconArrowLeft,\n DtIconArrowUp,\n DtIconArrowDown,\n DtIconCommand,\n DtIconOption,\n DtIconPlus,\n DtText,\n },\n\n props: {\n /\n @deprecated Use v-dt-mode instead.\n * If true, applies inverted styles.\n * @values true, false\n * @deprecated Use v-dt-mode directive instead.\n /\n inverted: {\n type: Boolean,\n default: false,\n },\n\n /\n Include any of these tokens in your string to render the corresponding symbol:\n * {cmd} {opt} {win} {arrow-right} {arrow-left} {arrow-up} {arrow-down}\n /\n shortcut: {\n type: String,\n required: true,\n },\n\n /\n Optional text to override the auto-generated accessible text for assistive technology.\n * If not provided, accessible text will be automatically generated from the shortcut.\n /\n screenReaderText: {\n type: String,\n default: null,\n },\n },\n\n data () {\n return {\n separator: /\\+/gi,\n };\n },\n\n computed: {\n icons () {\n return {\n ...SHORTCUTS_ICON_ALIASES,\n '{plus}': DtIconPlus,\n };\n },\n\n shortcutWithSeparator () {\n return this.shortcut.replace(this.separator, '{plus}');\n },\n\n formattedShortcut () {\n return Object.keys(SHORTCUTS_ICON_ALIASES).reduce((result, key) => {\n return result.replace(new RegExp('{' + key + '}', 'gi'), SHORTCUTS_ICON_ALIASES[key]);\n }, this.shortcutWithSeparator);\n },\n\n // Splits any icon based aliases into their own array items.\n formattedShortcutSplit () {\n const iconAliasString = Object.keys(this.icons).join('\|');\n\n /\n The regexp splits a given string with icon alias and is filtered by empty strings after:\n if {win} is our delimiter AKA shortcut icon alias\n '{win} + D K + {win}' returned value will be [{win}, ' ', '{plus}', ' D K ', '{plus}', ' ', {win}]\n */\n const regex = new RegExp(`(${iconAliasString})`, 'gi');\n return this.formattedShortcut.split(regex).filter(Boolean);\n },\n\n // Generates accessible text for the keyboard shortcut\n generatedScreenReaderText () {\n return this.formattedShortcutSplit\n .map(item => {\n const trimmedItem = item.trim();\n\n // Convert icon aliases to readable text\n if (ICON_ALIAS_TO_TEXT[trimmedItem]) {\n return ICON_ALIAS_TO_TEXT[trimmedItem];\n }\n\n // Convert key abbreviations to full names (case-insensitive)\n const lowerItem = trimmedItem.toLowerCase();\n if (KEY_ABBREVIATIONS[lowerItem]) {\n return KEY_ABBREVIATIONS[lowerItem];\n }\n\n // Return the key as-is if it's not an alias or abbreviation\n return trimmedItem;\n })\n .filter(item => item) // Remove empty strings\n .join(' ');\n },\n },\n};\n</script>\n"],"mappings":";;;;;AA0DA,IAAM,IAAyB;CAC7B,SAAS;CACT,iBAAiB;CACjB,gBAAgB;CAChB,cAAc;CACd,gBAAgB;CAChB,SAAS;CACT,SAAS;CACV,EAGK,IAAqB;CACzB,SAAS;CACT,SAAS;CACT,SAAS;CACT,iBAAiB;CACjB,gBAAgB;CAChB,cAAc;CACd,gBAAgB;CAChB,UAAU;CACX,EAGK,IAAoB;CACxB,MAAQ;CACR,KAAO;CACP,KAAO;CACP,KAAO;CACP,KAAO;CACP,MAAQ;CACR,MAAQ;CACR,KAAO;CACP,MAAQ;CACT,EAMI,IAAU;CACb,MAAM;CAEN,YAAY;EACV;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAA;EACD;CAED,OAAO;EAOL,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAMD,UAAU;GACR,MAAM;GACN,UAAU;GACX;EAMD,kBAAkB;GAChB,MAAM;GACN,SAAS;GACV;EACF;CAED,OAAQ;AACN,SAAO,EACL,WAAW,QACZ;;CAGH,UAAU;EACR,QAAS;AACP,UAAO;IACL,GAAG;IACH,UAAU;IACX;;EAGH,wBAAyB;AACvB,UAAO,KAAK,SAAS,QAAQ,KAAK,WAAW,SAAS;;EAGxD,oBAAqB;AACnB,UAAO,OAAO,KAAK,EAAuB,CAAC,QAAQ,GAAQ,MAClD,EAAO,QAAY,OAAO,MAAM,IAAM,KAAK,KAAK,EAAE,EAAuB,GAAK,EACpF,KAAK,sBAAsB;;EAIhC,yBAA0B;GACxB,IAAM,IAAkB,OAAO,KAAK,KAAK,MAAM,CAAC,KAAK,IAAI,EAOnD,IAAY,OAAO,IAAI,EAAgB,IAAI,KAAK;AACtD,UAAO,KAAK,kBAAkB,MAAM,EAAM,CAAC,OAAO,QAAQ;;EAI5D,4BAA6B;AAC3B,UAAO,KAAK,uBACT,KAAI,MAAQ;IACX,IAAM,IAAc,EAAK,MAAM;AAG/B,QAAI,EAAmB,GACrB,QAAO,EAAmB;IAI5B,IAAM,IAAY,EAAY,aAAa;AAM3C,WALI,EAAkB,KACb,EAAkB,KAIpB;KACR,CACA,QAAO,MAAQ,EAAI,CACnB,KAAK,IAAI;;EAEf;CACF,QArMS,OAAM,gCAA8B;;;aAN5C,EAyCM,OAAA,EAxCH,OAAK,EAAA,CAAA,uBAAA,EAAA,iCAA0E,EAAA,UAAQ,CAAA,CAAA,EAAA,EAAA,CAKxF,EAEO,QAFP,GAEO,EADF,EAAA,oBAAoB,EAAA,0BAAyB,EAAA,EAAA,GAAA,EAAA,GAAA,EAElD,EA+BW,GAAA,MAAA,EA9BW,EAAA,yBAAZ,GAAM,wBAIN,EAAA,MAAM,MAAA,GAAA,EAFd,EAUE,EATK,EAAA,MAAM,GAAI,EAAA;EAEd,KAAG,QAAU,EAAC,GAAI;EACnB,MAAK;EACL,eAAY;EACX,OAAK,EAAA,CAAA,6BAAA,EAAA,uCAA8F,EAAA,UAAQ,CAAA,CAAA;2BAMjG,EAAK,MAAI,IAAA,GAAA,EADtB,EAgBU,GAAA;EAdP,KAAG,QAAU,EAAC,GAAI;EACnB,MAAK;EACJ,MAAM;EACP,SAAA;EACC,SAAS;EACV,MAAK;EACL,eAAY;EACX,OAAK,EAAA,CAAA,6BAAA,EAAA,uCAA8F,EAAA,UAAQ,CAAA,CAAA;;mBAMtF,CAAtB,EAAsB,QAAA,EAAhB,WAAQ,GAAI,EAAA,MAAA,GAAA,EAAA,CAAA,CAAA"}

package/dist/lib/kitchen-sink/kitchen-sink-view.cjs ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),t=require(`../text/text.cjs`),n=require(`../link/link.cjs`),r=require(`../stack/stack.cjs`);let i=require(`vue`),a=require(`@dialpad/dialtone-icons/vue`);var o={key:0,class:`d-d-flex d-ai-center d-jc-center d-h164`},s={__name:`KitchenSinkView`,props:{title:{type:String,required:!0},itemLabel:{type:String,required:!0},iframeUrl:{type:String,required:!0},loaders:{type:Object,required:!0}},setup(e){let s=e,c=(0,i.ref)([]),l=(0,i.ref)(!0);function u(e){return e.toLowerCase().replace(/[\s/_]+/g,`-`)}function d(e){document.getElementById(`ks-${e}`)?.scrollIntoView({behavior:`smooth`})}function f(e){return(0,i.markRaw)((0,i.defineComponent)({name:`ErrorBoundary-${e}`,setup(t,{slots:n}){let r=(0,i.ref)(null);return(0,i.onErrorCaptured)(e=>(r.value=e.message\|\|String(e),!1)),()=>r.value?(0,i.h)(`div`,{class:`d-fc-critical d-fs-200 d-p-100 d-px-150 d-bgc-critical d-bar-300`},`Failed to render ${e}: ${r.value}`):n.default?.()}}))}function p(e,t,n){let r=[];for(let[a,o]of Object.entries(e)){if(a===`default`\|\|!o?.render\|\|typeof o.render!=`function`)continue;let e={...t.args,...o.args};try{let s=o.render(e,{argTypes:t.argTypes\|\|{}});r.push({name:a,component:(0,i.markRaw)(s),errorBoundary:f(`${n} / ${a}`)})}catch(e){console.error(`Kitchen Sink: Failed to initialize ${n}/${a}:`,e)}}return r}return(0,i.onMounted)(async()=>{let e=await Promise.allSettled(Object.values(s.loaders).map(async e=>e())),t=[];for(let n of e){if(n.status!==`fulfilled`)continue;let e=n.value,r=e.default;if(!r?.title)continue;let i=r.title.split(`/`).pop(),a=u(i),o=u(r.title),s=p(e,r,i);s.length!==0&&t.push({id:a,name:i,storyId:o,variants:s})}c.value=t.sort((e,t)=>e.name.localeCompare(t.name)),l.value=!1}),(s,u)=>{let f=(0,i.resolveDirective)(`dt-scrollbar`);return(0,i.openBlock)(),(0,i.createElementBlock)(`div`,null,[l.value?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,o,[(0,i.createVNode)((0,i.unref)(t.default),{tone:`muted`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)(` Loading `+(0,i.toDisplayString)(e.itemLabel)+`... `,1)]),_:1})])):((0,i.openBlock)(),(0,i.createElementBlock)(i.Fragment,{key:1},[(0,i.createVNode)((0,i.unref)(r.default),{class:`d-p-400 d-py-200 d-pbe-100 d-bgc-secondary d-bb d-ps-sticky d-t-0 d-zi-base1 d-mbs-n125 d-mx-n125 d-bs-card`,gap:`100`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(r.default),{class:`d-px-100`,gap:`100`,direction:`row`,justify:`between`,align:`baseline`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{as:`h1`,kind:`headline`,size:700},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(e.title),1)]),_:1}),(0,i.createVNode)((0,i.unref)(t.default),{kind:`body`,size:200},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(n.default),{href:e.iframeUrl,target:`_blank`,rel:`noopener noreferrer`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(r.default),{gap:`50`,direction:`row`},{default:(0,i.withCtx)(()=>[u[0]\|\|(u[0]=(0,i.createTextVNode)(` Open in new window `,-1)),(0,i.createVNode)((0,i.unref)(a.DtIconExternalLink),{size:`200`})]),_:1})]),_:1},8,[`href`])]),_:1})]),_:1}),(0,i.withDirectives)(((0,i.openBlock)(),(0,i.createElementBlock)(`div`,null,[(0,i.createVNode)((0,i.unref)(r.default),{direction:`row`,gap:`100`,class:`d-pbe-100 d-px-100`},{default:(0,i.withCtx)(()=>[((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(c.value,e=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(n.default),{key:e.id,href:`#ks-${e.id}`,onClick:(0,i.withModifiers)(t=>d(e.id),[`prevent`])},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{kind:`body`,size:200,class:`d-ws-nowrap`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(e.name),1)]),_:2},1024)]),_:2},1032,[`href`,`onClick`]))),128))]),_:1})])),[[f]])]),_:1}),(0,i.createVNode)((0,i.unref)(r.default),{class:`d-px-400`},{default:(0,i.withCtx)(()=>[((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(c.value,e=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.default),{id:`ks-${e.id}`,key:e.id,as:`section`,gap:`200`,class:`d-py-400 kitchen-sink__section`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(r.default),{gap:`100`,direction:`row`,justify:`between`,align:`baseline`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{as:`h2`,kind:`headline`,size:600},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(e.name),1)]),_:2},1024),(0,i.createVNode)((0,i.unref)(n.default),{href:`/?path=/story/${e.storyId}--default`},{default:(0,i.withCtx)(()=>[...u[1]\|\|(u[1]=[(0,i.createTextVNode)(` View Story `,-1)])]),_:1},8,[`href`])]),_:2},1024),((0,i.openBlock)(!0),(0,i.createElementBlock)(i.Fragment,null,(0,i.renderList)(e.variants,e=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(r.default),{key:e.name,class:`d-ba d-bc-subtle d-p-200`,gap:`100`},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{size:100,tone:`muted`,kind:`code`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(e.name),1)]),_:2},1024),(0,i.createElementVNode)(`div`,null,[((0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(e.errorBoundary),null,{default:(0,i.withCtx)(()=>[((0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(e.component)))]),_:2},1024))])]),_:2},1024))),128))]),_:2},1032,[`id`]))),128))]),_:1})],64))])}}},c=e.t(s,[[`__scopeId`,`data-v-e54b06bf`]]);exports.default=c;
2	+ //# sourceMappingURL=kitchen-sink-view.cjs.map

package/dist/lib/kitchen-sink/kitchen-sink-view.cjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"kitchen-sink-view.cjs","names":[],"sources":["../../../components/KitchenSink/KitchenSinkView.vue"],"sourcesContent":["\n<template>\n <div>\n <div\n v-if=\"loading\"\n class=\"d-d-flex d-ai-center d-jc-center d-h164\"\n >\n <dt-text\n tone=\"muted\"\n >\n Loading {{ itemLabel }}...\n </dt-text>\n </div>\n <template v-else>\n <dt-stack\n class=\"\n d-p-400\n d-py-200\n d-pbe-100\n d-bgc-secondary\n d-bb\n d-ps-sticky\n d-t-0\n d-zi-base1\n d-mbs-n125\n d-mx-n125\n d-bs-card\n \"\n gap=\"100\"\n >\n <dt-stack\n class=\"d-px-100\"\n gap=\"100\"\n direction=\"row\"\n justify=\"between\"\n align=\"baseline\"\n >\n <dt-text\n as=\"h1\"\n kind=\"headline\"\n :size=\"700\"\n >\n {{ title }}\n </dt-text>\n <dt-text\n kind=\"body\"\n :size=\"200\"\n >\n <dt-link\n :href=\"iframeUrl\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n <dt-stack\n gap=\"50\"\n direction=\"row\"\n >\n Open in new window\n <dt-icon-external-link size=\"200\" />\n </dt-stack>\n </dt-link>\n </dt-text>\n </dt-stack>\n <div\n v-dt-scrollbar\n >\n <dt-stack\n direction=\"row\"\n gap=\"100\"\n class=\"d-pbe-100 d-px-100\"\n >\n <dt-link\n v-for=\"section in sections\"\n :key=\"section.id\"\n :href=\"`#ks-${section.id}`\"\n @click.prevent=\"scrollTo(section.id)\"\n >\n <dt-text\n kind=\"body\"\n :size=\"200\"\n class=\"d-ws-nowrap\"\n >\n {{ section.name }}\n </dt-text>\n </dt-link>\n </dt-stack>\n </div>\n </dt-stack>\n <dt-stack class=\"d-px-400\">\n <dt-stack\n v-for=\"section in sections\"\n :id=\"`ks-${section.id}`\"\n :key=\"section.id\"\n as=\"section\"\n gap=\"200\"\n class=\"d-py-400 kitchen-sink__section\"\n >\n <dt-stack\n gap=\"100\"\n direction=\"row\"\n justify=\"between\"\n align=\"baseline\"\n >\n <dt-text\n as=\"h2\"\n kind=\"headline\"\n :size=\"600\"\n >\n {{ section.name }}\n </dt-text>\n <dt-link\n :href=\"`/?path=/story/${section.storyId}--default`\"\n >\n View Story\n </dt-link>\n </dt-stack>\n <dt-stack\n v-for=\"variant in section.variants\"\n :key=\"variant.name\"\n class=\"d-ba d-bc-subtle d-p-200\"\n gap=\"100\"\n >\n <dt-text\n :size=\"100\"\n tone=\"muted\"\n kind=\"code\"\n >\n {{ variant.name }}\n </dt-text>\n <div>\n <component :is=\"variant.errorBoundary\">\n <component :is=\"variant.component\" />\n </component>\n </div>\n </dt-stack>\n </dt-stack>\n </dt-stack>\n </template>\n </div>\n</template>\n\n<script setup>\nimport { ref, h, onErrorCaptured, onMounted, defineComponent, markRaw } from 'vue';\nimport { DtLink } from '@/components/Link';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { DtIconExternalLink } from '@dialpad/dialtone-icons/vue';\n\nconst props = defineProps({\n title: {\n type: String,\n required: true,\n },\n itemLabel: {\n type: String,\n required: true,\n },\n iframeUrl: {\n type: String,\n required: true,\n },\n loaders: {\n type: Object,\n required: true,\n },\n});\n\nconst sections = ref([]);\nconst loading = ref(true);\n\nfunction sanitizeId (str) {\n return str.toLowerCase().replace(/[\\s/_]+/g, '-');\n}\n\nfunction scrollTo (id) {\n document.getElementById(`ks-${id}`)?.scrollIntoView({ behavior: 'smooth' });\n}\n\nfunction createErrorBoundary (name) {\n return markRaw(defineComponent({\n name: `ErrorBoundary-${name}`,\n setup (_, { slots }) {\n const error = ref(null);\n onErrorCaptured((err) => {\n error.value = err.message || String(err);\n return false;\n });\n return () => {\n if (error.value) {\n return h('div', {\n class: 'd-fc-critical d-fs-200 d-p-100 d-px-150 d-bgc-critical d-bar-300',\n }, `Failed to render ${name}: ${error.value}`);\n }\n return slots.default?.();\n };\n },\n }));\n}\n\nfunction extractVariants (module, meta, name) {\n const variants = [];\n\n for (const [exportName, exportValue] of Object.entries(module)) {\n if (exportName === 'default') continue;\n if (!exportValue?.render || typeof exportValue.render !== 'function') continue;\n\n const mergedArgs = { ...meta.args, ...exportValue.args };\n\n try {\n const componentOptions = exportValue.render(mergedArgs, {\n argTypes: meta.argTypes || {},\n });\n variants.push({\n name: exportName,\n component: markRaw(componentOptions),\n errorBoundary: createErrorBoundary(`${name} / ${exportName}`),\n });\n } catch (e) {\n console.error(`Kitchen Sink: Failed to initialize ${name}/${exportName}:`, e);\n }\n }\n\n return variants;\n}\n\nonMounted(async () => {\n const results = await Promise.allSettled(\n Object.values(props.loaders).map(async (loader) => loader()),\n );\n\n const loaded = [];\n\n for (const result of results) {\n if (result.status !== 'fulfilled') continue;\n\n const module = result.value;\n const meta = module.default;\n if (!meta?.title) continue;\n\n const name = meta.title.split('/').pop();\n const id = sanitizeId(name);\n const storyId = sanitizeId(meta.title);\n const variants = extractVariants(module, meta, name);\n\n if (variants.length === 0) continue;\n\n loaded.push({ id, name, storyId, variants });\n }\n\n sections.value = loaded.sort((a, b) => a.name.localeCompare(b.name));\n loading.value = false;\n});\n</script>\n\n<style scoped>\n.kitchen-sink__section {\n scroll-margin-block-start: var(--dt-layout-150);\n}\n[outline] {\n outline: 2px solid orangered;\n}\n</style>\n"],"mappings":"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"}

package/dist/lib/kitchen-sink/kitchen-sink-view.js ADDED Viewed

@@ -0,0 +1,205 @@
+import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
+import t from "../text/text.js";
+import n from "../link/link.js";
+import r from "../stack/stack.js";
+import { Fragment as i, createBlock as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, h as d, markRaw as f, onErrorCaptured as p, onMounted as m, openBlock as h, ref as g, renderList as _, resolveDirective as v, resolveDynamicComponent as y, toDisplayString as b, unref as x, withCtx as S, withDirectives as C, withModifiers as w } from "vue";
+import { DtIconExternalLink as T } from "@dialpad/dialtone-icons/vue";
+//#region components/KitchenSink/KitchenSinkView.vue
+var E = {
+	key: 0,
+	class: "d-d-flex d-ai-center d-jc-center d-h164"
+}, D = /* @__PURE__ */ e({
+	__name: "KitchenSinkView",
+	props: {
+		title: {
+			type: String,
+			required: !0
+		},
+		itemLabel: {
+			type: String,
+			required: !0
+		},
+		iframeUrl: {
+			type: String,
+			required: !0
+		},
+		loaders: {
+			type: Object,
+			required: !0
+		}
+	},
+	setup(e) {
+		let D = e, O = g([]), k = g(!0);
+		function A(e) {
+			return e.toLowerCase().replace(/[\s/_]+/g, "-");
+		}
+		function j(e) {
+			document.getElementById(`ks-${e}`)?.scrollIntoView({ behavior: "smooth" });
+		}
+		function M(e) {
+			return f(u({
+				name: `ErrorBoundary-${e}`,
+				setup(t, { slots: n }) {
+					let r = g(null);
+					return p((e) => (r.value = e.message || String(e), !1)), () => r.value ? d("div", { class: "d-fc-critical d-fs-200 d-p-100 d-px-150 d-bgc-critical d-bar-300" }, `Failed to render ${e}: ${r.value}`) : n.default?.();
+				}
+			}));
+		}
+		function N(e, t, n) {
+			let r = [];
+			for (let [i, a] of Object.entries(e)) {
+				if (i === "default" || !a?.render || typeof a.render != "function") continue;
+				let e = {
+					...t.args,
+					...a.args
+				};
+				try {
+					let o = a.render(e, { argTypes: t.argTypes || {} });
+					r.push({
+						name: i,
+						component: f(o),
+						errorBoundary: M(`${n} / ${i}`)
+					});
+				} catch (e) {
+					console.error(`Kitchen Sink: Failed to initialize ${n}/${i}:`, e);
+				}
+			}
+			return r;
+		}
+		return m(async () => {
+			let e = await Promise.allSettled(Object.values(D.loaders).map(async (e) => e())), t = [];
+			for (let n of e) {
+				if (n.status !== "fulfilled") continue;
+				let e = n.value, r = e.default;
+				if (!r?.title) continue;
+				let i = r.title.split("/").pop(), a = A(i), o = A(r.title), s = N(e, r, i);
+				s.length !== 0 && t.push({
+					id: a,
+					name: i,
+					storyId: o,
+					variants: s
+				});
+			}
+			O.value = t.sort((e, t) => e.name.localeCompare(t.name)), k.value = !1;
+		}), (u, d) => {
+			let f = v("dt-scrollbar");
+			return h(), o("div", null, [k.value ? (h(), o("div", E, [l(x(t), { tone: "muted" }, {
+				default: S(() => [c(" Loading " + b(e.itemLabel) + "... ", 1)]),
+				_: 1
+			})])) : (h(), o(i, { key: 1 }, [l(x(r), {
+				class: "d-p-400 d-py-200 d-pbe-100 d-bgc-secondary d-bb d-ps-sticky d-t-0 d-zi-base1 d-mbs-n125 d-mx-n125 d-bs-card",
+				gap: "100"
+			}, {
+				default: S(() => [l(x(r), {
+					class: "d-px-100",
+					gap: "100",
+					direction: "row",
+					justify: "between",
+					align: "baseline"
+				}, {
+					default: S(() => [l(x(t), {
+						as: "h1",
+						kind: "headline",
+						size: 700
+					}, {
+						default: S(() => [c(b(e.title), 1)]),
+						_: 1
+					}), l(x(t), {
+						kind: "body",
+						size: 200
+					}, {
+						default: S(() => [l(x(n), {
+							href: e.iframeUrl,
+							target: "_blank",
+							rel: "noopener noreferrer"
+						}, {
+							default: S(() => [l(x(r), {
+								gap: "50",
+								direction: "row"
+							}, {
+								default: S(() => [d[0] || (d[0] = c(" Open in new window ", -1)), l(x(T), { size: "200" })]),
+								_: 1
+							})]),
+							_: 1
+						}, 8, ["href"])]),
+						_: 1
+					})]),
+					_: 1
+				}), C((h(), o("div", null, [l(x(r), {
+					direction: "row",
+					gap: "100",
+					class: "d-pbe-100 d-px-100"
+				}, {
+					default: S(() => [(h(!0), o(i, null, _(O.value, (e) => (h(), a(x(n), {
+						key: e.id,
+						href: `#ks-${e.id}`,
+						onClick: w((t) => j(e.id), ["prevent"])
+					}, {
+						default: S(() => [l(x(t), {
+							kind: "body",
+							size: 200,
+							class: "d-ws-nowrap"
+						}, {
+							default: S(() => [c(b(e.name), 1)]),
+							_: 2
+						}, 1024)]),
+						_: 2
+					}, 1032, ["href", "onClick"]))), 128))]),
+					_: 1
+				})])), [[f]])]),
+				_: 1
+			}), l(x(r), { class: "d-px-400" }, {
+				default: S(() => [(h(!0), o(i, null, _(O.value, (e) => (h(), a(x(r), {
+					id: `ks-${e.id}`,
+					key: e.id,
+					as: "section",
+					gap: "200",
+					class: "d-py-400 kitchen-sink__section"
+				}, {
+					default: S(() => [l(x(r), {
+						gap: "100",
+						direction: "row",
+						justify: "between",
+						align: "baseline"
+					}, {
+						default: S(() => [l(x(t), {
+							as: "h2",
+							kind: "headline",
+							size: 600
+						}, {
+							default: S(() => [c(b(e.name), 1)]),
+							_: 2
+						}, 1024), l(x(n), { href: `/?path=/story/${e.storyId}--default` }, {
+							default: S(() => [...d[1] || (d[1] = [c(" View Story ", -1)])]),
+							_: 1
+						}, 8, ["href"])]),
+						_: 2
+					}, 1024), (h(!0), o(i, null, _(e.variants, (e) => (h(), a(x(r), {
+						key: e.name,
+						class: "d-ba d-bc-subtle d-p-200",
+						gap: "100"
+					}, {
+						default: S(() => [l(x(t), {
+							size: 100,
+							tone: "muted",
+							kind: "code"
+						}, {
+							default: S(() => [c(b(e.name), 1)]),
+							_: 2
+						}, 1024), s("div", null, [(h(), a(y(e.errorBoundary), null, {
+							default: S(() => [(h(), a(y(e.component)))]),
+							_: 2
+						}, 1024))])]),
+						_: 2
+					}, 1024))), 128))]),
+					_: 2
+				}, 1032, ["id"]))), 128))]),
+				_: 1
+			})], 64))]);
+		};
+	}
+}, [["__scopeId", "data-v-e54b06bf"]]);
+//#endregion
+export { D as default };
+//# sourceMappingURL=kitchen-sink-view.js.map