npm - @dialpad/dialtone-vue - Versions diffs - 4.4.0 → 4.5.0 - Mend

@dialpad/dialtone-vue 4.4.0 → 4.5.0

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

Files changed (196) hide show

package/dist/lib/emoji-picker/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import { t as e } from "../../EmojiPicker-BllVwJf4.js";
+import { t as e } from "../../EmojiPicker-D46lLRMp.js";
 import { ARROW_KEYS as t, CDN_URL as n, EMOJIS_PER_ROW as r, EMOJI_PICKER_SKIN_TONE_MODIFIERS as i } from "./emoji-picker-constants.js";
 export { t as ARROW_KEYS, n as CDN_URL, e as DtEmojiPicker, r as EMOJIS_PER_ROW, i as EMOJI_PICKER_SKIN_TONE_MODIFIERS };

package/dist/lib/empty-state/empty-state.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../text/text.cjs`),r=require(`../stack/stack.cjs`),i=require(`./empty-state-constants.cjs`);let a=require(`vue`);var o=Object.assign({name:`DtEmptyState`},{__name:`EmptyState`,props:{size:{type:[String,Number],default:400,validator:e.ordinalSizeValidator(i.EMPTY_STATE_SIZE_MODIFIERS)},headerText:{type:String,required:!0},bodyText:{type:String,default:null},illustrationClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},bodyClass:{type:[String,Array,Object],default:``}},setup(e){let o=(0,a.useSlots)(),s=e,c=(0,a.computed)(()=>t.hasSlotContent(o.icon)),l=(0,a.computed)(()=>t.hasSlotContent(o.illustration)),u=(0,a.computed)(()=>c.value&&(!l.value||p.value)),d=(0,a.computed)(()=>l.value&&!p.value),f=(0,a.computed)(()=>String(s.size)),p=(0,a.computed)(()=>f.value===`sm`||f.value===`200`),m=(0,a.computed)(()=>i.EMPTY_STATE_SIZE_MODIFIERS[f.value]),h=(0,a.computed)(()=>[`d-empty-state`,m.value]),g=(0,a.computed)(()=>i.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[f.value]),_=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_SIZES[f.value]),v=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_DENSITIES[f.value]),y=(0,a.computed)(()=>i.EMPTY_STATE_BODY_SIZES[f.value]),b=(0,a.computed)(()=>i.EMPTY_STATE_BODY_DENSITIES[f.value]);return(0,a.onMounted)(()=>{!s.bodyText&&!t.hasSlotContent(o.body)&&console.error(`DtEmptyState: You should provide either bodyText or content on body slot.`)}),(i,s)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(r.default),{class:(0,a.normalizeClass)(h.value)},{default:(0,a.withCtx)(()=>[d.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,class:(0,a.normalizeClass)([`d-empty-state__illustration`,e.illustrationClass])},[(0,a.renderSlot)(i.$slots,`illustration`)],2)):(0,a.createCommentVNode)(``,!0),u.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)([`d-empty-state__icon`,e.iconClass])},[(0,a.renderSlot)(i.$slots,`icon`,{iconSize:`800`})],2)):(0,a.createCommentVNode)(``,!0),(0,a.createVNode)((0,a.unref)(r.default),{gap:`150`,class:(0,a.normalizeClass)([`d-empty-state__content`,g.value])},{default:(0,a.withCtx)(()=>[(0,a.createVNode)((0,a.unref)(n.default),{kind:`headline`,size:_.value,density:v.value,wrap:`balance`,as:`div`,class:`d-empty-state__header-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.headerText),1)]),_:1},8,[`size`,`density`]),e.bodyText?((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(n.default),{key:0,kind:`body`,size:y.value,density:b.value,tone:`secondary`,wrap:`balance`,as:`p`,class:`d-empty-state__body-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.bodyText),1)]),_:1},8,[`size`,`density`])):(0,a.createCommentVNode)(``,!0)]),_:1},8,[`class`]),(0,a.unref)(t.hasSlotContent)((0,a.unref)(o).body)?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:2,class:(0,a.normalizeClass)(e.bodyClass)},[(0,a.renderSlot)(i.$slots,`body`)],2)):(0,a.createCommentVNode)(``,!0)]),_:3},8,[`class`]))}});exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/validators/index.cjs`),t=require(`../../common/utils/index.cjs`),n=require(`../text/text.cjs`),r=require(`../stack/stack.cjs`),i=require(`./empty-state-constants.cjs`);let a=require(`vue`);var o=Object.assign({name:`DtEmptyState`},{__name:`EmptyState`,props:{size:{type:[String,Number],default:400,validator:e.ordinalSizeValidator(i.EMPTY_STATE_SIZE_MODIFIERS)},headerText:{type:String,required:!0},bodyText:{type:String,default:null},illustrationClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},bodyClass:{type:[String,Array,Object],default:``}},setup(e){let o=(0,a.useSlots)(),s=e,c=(0,a.computed)(()=>t.hasSlotContent(o.icon)),l=(0,a.computed)(()=>t.hasSlotContent(o.illustration)),u=(0,a.computed)(()=>c.value&&(!l.value||p.value)),d=(0,a.computed)(()=>l.value&&!p.value),f=(0,a.computed)(()=>String(s.size)),p=(0,a.computed)(()=>f.value===`sm`||f.value===`200`),m=(0,a.computed)(()=>i.EMPTY_STATE_SIZE_MODIFIERS[f.value]),h=(0,a.computed)(()=>[`d-empty-state`,m.value]),g=(0,a.computed)(()=>i.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[f.value]),_=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_SIZES[f.value]),v=(0,a.computed)(()=>i.EMPTY_STATE_HEADLINE_DENSITIES[f.value]),y=(0,a.computed)(()=>i.EMPTY_STATE_BODY_SIZES[f.value]),b=(0,a.computed)(()=>i.EMPTY_STATE_BODY_DENSITIES[f.value]);return(0,a.onMounted)(()=>{!s.bodyText&&!t.hasSlotContent(o.body)&&console.error(`DtEmptyState: You should provide either bodyText or content on body slot.`)}),(i,s)=>((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(r.default),{class:(0,a.normalizeClass)(h.value)},{default:(0,a.withCtx)(()=>[d.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:0,class:(0,a.normalizeClass)([`d-empty-state__illustration`,e.illustrationClass]),"data-qa":`dt-empty-state-illustration`},[(0,a.renderSlot)(i.$slots,`illustration`)],2)):(0,a.createCommentVNode)(``,!0),u.value?((0,a.openBlock)(),(0,a.createElementBlock)(`span`,{key:1,class:(0,a.normalizeClass)([`d-empty-state__icon`,e.iconClass]),"data-qa":`dt-empty-state-icon`},[(0,a.renderSlot)(i.$slots,`icon`,{iconSize:`800`})],2)):(0,a.createCommentVNode)(``,!0),(0,a.createVNode)((0,a.unref)(r.default),{gap:`150`,class:(0,a.normalizeClass)([`d-empty-state__content`,g.value])},{default:(0,a.withCtx)(()=>[(0,a.createVNode)((0,a.unref)(n.default),{kind:`headline`,size:_.value,density:v.value,wrap:`balance`,as:`div`,class:`d-empty-state__header-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.headerText),1)]),_:1},8,[`size`,`density`]),e.bodyText?((0,a.openBlock)(),(0,a.createBlock)((0,a.unref)(n.default),{key:0,kind:`body`,size:y.value,density:b.value,tone:`secondary`,wrap:`balance`,as:`p`,class:`d-empty-state__body-text`},{default:(0,a.withCtx)(()=>[(0,a.createTextVNode)((0,a.toDisplayString)(e.bodyText),1)]),_:1},8,[`size`,`density`])):(0,a.createCommentVNode)(``,!0)]),_:1},8,[`class`]),(0,a.unref)(t.hasSlotContent)((0,a.unref)(o).body)?((0,a.openBlock)(),(0,a.createElementBlock)(`div`,{key:2,class:(0,a.normalizeClass)(e.bodyClass),"data-qa":`dt-empty-state-body-slot`},[(0,a.renderSlot)(i.$slots,`body`)],2)):(0,a.createCommentVNode)(``,!0)]),_:3},8,[`class`]))}});exports.default=o;
 //# sourceMappingURL=empty-state.cjs.map

package/dist/lib/empty-state/empty-state.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-state.cjs","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n :class=\"['d-empty-state__illustration', illustrationClass]\"\n >\n <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n :class=\"['d-empty-state__icon', iconClass]\"\n >\n <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n <slot\n name=\"icon\"\n :icon-size=\"'800'\"\n />\n </span>\n\n <dt-stack\n gap=\"150\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <dt-text\n kind=\"headline\"\n :size=\"headlineSize\"\n :density=\"headlineDensity\"\n wrap=\"balance\"\n as=\"div\"\n class=\"d-empty-state__header-text\"\n >\n {{ headerText }}\n </dt-text>\n\n <dt-text\n v-if=\"bodyText\"\n kind=\"body\"\n :size=\"bodySize\"\n :density=\"bodyDensity\"\n tone=\"secondary\"\n wrap=\"balance\"\n as=\"p\"\n class=\"d-empty-state__body-text\"\n >\n {{ bodyText }}\n </dt-text>\n </dt-stack>\n\n <div\n v-if=\"hasSlotContent(slots.body)\"\n :class=\"bodyClass\"\n >\n <slot name=\"body\" />\n </div>\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n EMPTY_STATE_BODY_DENSITIES,\n EMPTY_STATE_BODY_SIZES,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_DENSITIES,\n EMPTY_STATE_HEADLINE_SIZES,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /*\n The empty state size.\n * @values 200, 300, 400\n /\n size: {\n type: [String, Number],\n default: 400,\n validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n },\n\n /\n Header text\n * @type {String}\n /\n headerText: {\n type: String,\n required: true,\n },\n\n /\n Body text\n * @type {String}\n /\n bodyText: {\n type: String,\n default: null,\n },\n\n /\n Additional class name for the illustration wrapper element.\n /\n illustrationClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the icon wrapper element.\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the body slot wrapper element.\n /\n bodyClass: {\n type: [String, Array, Object],\n default: '',\n },\n});\n\nconst hasIcon = computed(() => {\n return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/\n Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n /\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value \|\| isSmallSize.value));\n\n/\n Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' \|\| sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n if (!props.bodyText && !hasSlotContent(slots.body)) {\n console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n }\n});\n</script>\n"],"mappings":"~~4vBAgFA~~,IAAM,GAAA,EAAA,EAAA,WAAkB,CAElB,EAAQ,EAsDR,GAAA,EAAA,EAAA,cACG,EAAA,eAAe,EAAM,KAAK,CACjC,CACI,GAAA,EAAA,EAAA,cAAiC,EAAA,eAAe,EAAM,aAAa,CAAC,CAMpE,GAAA,EAAA,EAAA,cAA0B,EAAQ,QAAU,CAAC,EAAgB,OAAS,EAAY,OAAO,CAMzF,GAAA,EAAA,EAAA,cAAkC,EAAgB,OAAS,CAAC,EAAY,MAAM,CAE9E,GAAA,EAAA,EAAA,cAAyB,OAAO,EAAM,KAAK,CAAC,CAC5C,GAAA,EAAA,EAAA,cAA6B,EAAQ,QAAU,MAAQ,EAAQ,QAAU,MAAM,CAE/E,GAAA,EAAA,EAAA,cAA2B,EAAA,2BAA2B,EAAQ,OAAO,CAErE,GAAA,EAAA,EAAA,cAAmC,CAAC,gBAAiB,EAAU,MAAM,CAAC,CAEtE,GAAA,EAAA,EAAA,cAA8B,EAAA,mCAAmC,EAAQ,OAAO,CAEhF,GAAA,EAAA,EAAA,cAA8B,EAAA,2BAA2B,EAAQ,OAAO,CACxE,GAAA,EAAA,EAAA,cAAiC,EAAA,+BAA+B,EAAQ,OAAO,CAE/E,GAAA,EAAA,EAAA,cAA0B,EAAA,uBAAuB,EAAQ,OAAO,CAChE,GAAA,EAAA,EAAA,cAA6B,EAAA,2BAA2B,EAAQ,OAAO,QAE7E,EAAA,EAAA,eAAgB,CACV,CAAC,EAAM,UAAY,CAAC,EAAA,eAAe,EAAM,KAAK,EAChD,QAAQ,MAAM,4EAA4E,EAE5F,yDAlHW,EAAA,QAAA,CAAA,~~CAxDR~~,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAiB,CAAA,CAAA,~~2BAQlB~~,~~CALC~~,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,~~oBAKD~~,OAAA,~~OAJJ~~,OAAA,EAAA,EAAA,gBAAK,CAAA,8BAAkC,EAAA,kBAAiB,CAAA,~~oBAG7B~~,EAAA,OAAA,eAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAItB,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,~~oBAQD~~,OAAA,~~OAPJ~~,OAAA,EAAA,EAAA,gBAAK,CAAA,sBAA0B,EAAA,UAAS,CAAA,~~oBAMvC~~,EAAA,OAAA,OAAA,CADC,SAAW,MAAK,CAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,+BA+BV,EAAA,QAAA,CAAA,CA1BT,IAAI,MACH,OAAA,EAAA,EAAA,gBAAK,CAAA,yBAA6B,EAAA,MAAY,CAAA,6BAWrC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARR,KAAK,WACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,UACL,GAAG,MACH,MAAM,yDAEU,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAb,EAAA,WAAU,CAAA,EAAA,CAAA,CAAA,4BAIP,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAUE,EAAA,QAAA,CAAA,OATR,KAAK,OACJ,KAAM,EAAA,MACN,QAAS,EAAA,MACV,KAAK,YACL,KAAK,UACL,GAAG,IACH,MAAM,uDAEQ,EAAA,EAAA,EAAA,kBAAA,EAAA,EAAA,iBAAX,EAAA,SAAQ,CAAA,EAAA,CAAA,CAAA,6FAKP,EAAA,eAAc,EAAA,EAAA,EAAA,OAAC,EAAK,CAAC,KAAI,GAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,~~oBAI3B~~,MAAA,~~OAHH~~,OAAA,EAAA,EAAA,gBAAO,EAAA,UAAS,~~oBAEG~~,EAAA,OAAA,OAAA,CAAA,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA"}
1	+ {"version":3,"file":"empty-state.cjs","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n :class=\"['d-empty-state__illustration', illustrationClass]\"\n data-qa=\"dt-empty-state-illustration\"\n >\n <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n :class=\"['d-empty-state__icon', iconClass]\"\n data-qa=\"dt-empty-state-icon\"\n >\n <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n <slot\n name=\"icon\"\n :icon-size=\"'800'\"\n />\n </span>\n\n <dt-stack\n gap=\"150\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <dt-text\n kind=\"headline\"\n :size=\"headlineSize\"\n :density=\"headlineDensity\"\n wrap=\"balance\"\n as=\"div\"\n class=\"d-empty-state__header-text\"\n >\n {{ headerText }}\n </dt-text>\n\n <dt-text\n v-if=\"bodyText\"\n kind=\"body\"\n :size=\"bodySize\"\n :density=\"bodyDensity\"\n tone=\"secondary\"\n wrap=\"balance\"\n as=\"p\"\n class=\"d-empty-state__body-text\"\n >\n {{ bodyText }}\n </dt-text>\n </dt-stack>\n\n <div\n v-if=\"hasSlotContent(slots.body)\"\n :class=\"bodyClass\"\n data-qa=\"dt-empty-state-body-slot\"\n >\n <slot name=\"body\" />\n </div>\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n EMPTY_STATE_BODY_DENSITIES,\n EMPTY_STATE_BODY_SIZES,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_DENSITIES,\n EMPTY_STATE_HEADLINE_SIZES,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /*\n The empty state size.\n * @values 200, 300, 400\n /\n size: {\n type: [String, Number],\n default: 400,\n validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n },\n\n /\n Header text\n * @type {String}\n /\n headerText: {\n type: String,\n required: true,\n },\n\n /\n Body text\n * @type {String}\n /\n bodyText: {\n type: String,\n default: null,\n },\n\n /\n Additional class name for the illustration wrapper element.\n /\n illustrationClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the icon wrapper element.\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the body slot wrapper element.\n /\n bodyClass: {\n type: [String, Array, Object],\n default: '',\n },\n});\n\nconst hasIcon = computed(() => {\n return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/\n Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n /\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value \|\| isSmallSize.value));\n\n/\n Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' \|\| sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n if (!props.bodyText && !hasSlotContent(slots.body)) {\n console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n }\n});\n</script>\n"],"mappings":"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"}

package/dist/lib/empty-state/empty-state.js CHANGED Viewed

@@ -54,11 +54,13 @@ var w = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 			default: C(() => [
 				k.value ? (v(), p("span", {
 					key: 0,
-					class: g(["d-empty-state__illustration", e.illustrationClass])
+					class: g(["d-empty-state__illustration", e.illustrationClass]),
+					"data-qa": "dt-empty-state-illustration"
 				}, [y(i.$slots, "illustration")], 2)) : f("", !0),
 				O.value ? (v(), p("span", {
 					key: 1,
-					class: g(["d-empty-state__icon", e.iconClass])
+					class: g(["d-empty-state__icon", e.iconClass]),
+					"data-qa": "dt-empty-state-icon"
 				}, [y(i.$slots, "icon", { iconSize: "800" })], 2)) : f("", !0),
 				h(x(r), {
 					gap: "150",
@@ -91,7 +93,8 @@ var w = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 				}, 8, ["class"]),
 				x(t)(x(w).body) ? (v(), p("div", {
 					key: 2,
-					class: g(e.bodyClass)
+					class: g(e.bodyClass),
+					"data-qa": "dt-empty-state-body-slot"
 				}, [y(i.$slots, "body")], 2)) : f("", !0)
 			]),
 			_: 3

package/dist/lib/empty-state/empty-state.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-state.js","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n :class=\"['d-empty-state__illustration', illustrationClass]\"\n >\n <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n :class=\"['d-empty-state__icon', iconClass]\"\n >\n <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n <slot\n name=\"icon\"\n :icon-size=\"'800'\"\n />\n </span>\n\n <dt-stack\n gap=\"150\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <dt-text\n kind=\"headline\"\n :size=\"headlineSize\"\n :density=\"headlineDensity\"\n wrap=\"balance\"\n as=\"div\"\n class=\"d-empty-state__header-text\"\n >\n {{ headerText }}\n </dt-text>\n\n <dt-text\n v-if=\"bodyText\"\n kind=\"body\"\n :size=\"bodySize\"\n :density=\"bodyDensity\"\n tone=\"secondary\"\n wrap=\"balance\"\n as=\"p\"\n class=\"d-empty-state__body-text\"\n >\n {{ bodyText }}\n </dt-text>\n </dt-stack>\n\n <div\n v-if=\"hasSlotContent(slots.body)\"\n :class=\"bodyClass\"\n >\n <slot name=\"body\" />\n </div>\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n EMPTY_STATE_BODY_DENSITIES,\n EMPTY_STATE_BODY_SIZES,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_DENSITIES,\n EMPTY_STATE_HEADLINE_SIZES,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /*\n The empty state size.\n * @values 200, 300, 400\n /\n size: {\n type: [String, Number],\n default: 400,\n validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n },\n\n /\n Header text\n * @type {String}\n /\n headerText: {\n type: String,\n required: true,\n },\n\n /\n Body text\n * @type {String}\n /\n bodyText: {\n type: String,\n default: null,\n },\n\n /\n Additional class name for the illustration wrapper element.\n /\n illustrationClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the icon wrapper element.\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the body slot wrapper element.\n /\n bodyClass: {\n type: [String, Array, Object],\n default: '',\n },\n});\n\nconst hasIcon = computed(() => {\n return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/\n Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n /\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value \|\| isSmallSize.value));\n\n/\n Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' \|\| sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n if (!props.bodyText && !hasSlotContent(slots.body)) {\n console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n }\n});\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~EAgFA~~,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAsDR,IAAU,QACP,EAAe,EAAM,KAAK,CACjC,EACI,IAAkB,QAAe,EAAe,EAAM,aAAa,CAAC,EAMpE,IAAW,QAAe,EAAQ,UAAU,CAAC,EAAgB,SAAS,EAAY,OAAO,EAMzF,IAAmB,QAAe,EAAgB,SAAS,CAAC,EAAY,MAAM,EAE9E,IAAU,QAAe,OAAO,EAAM,KAAK,CAAC,EAC5C,IAAc,QAAe,EAAQ,UAAU,QAAQ,EAAQ,UAAU,MAAM,EAE/E,IAAY,QAAe,EAA2B,EAAQ,OAAO,EAErE,IAAoB,QAAe,CAAC,iBAAiB,EAAU,MAAM,CAAC,EAEtE,IAAe,QAAe,EAAmC,EAAQ,OAAO,EAEhF,IAAe,QAAe,EAA2B,EAAQ,OAAO,EACxE,IAAkB,QAAe,EAA+B,EAAQ,OAAO,EAE/E,IAAW,QAAe,EAAuB,EAAQ,OAAO,EAChE,IAAc,QAAe,EAA2B,EAAQ,OAAO;SAE7E,QAAgB;AACd,GAAI,CAAC,EAAM,YAAY,CAAC,EAAe,EAAM,KAAK,IAChD,QAAQ,MAAM,4EAA4E;IAE5F,~~kBA3KA~~,~~EAyDW~~,EAAA,EAAA,EAAA,~~EAxDR~~,OAAK,EAAE,EAAA,MAAiB,EAAA,EAAA;~~oBAQlB~~;~~IALC~~,EAAA,SAAA,GAAA,EADR,~~EAMO~~,QAAA;;~~KAJJ~~,OAAK,EAAA,CAAA,+BAAkC,EAAA,kBAAiB,CAAA;~~QAGzD~~,EAA4B,EAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAItB,EAAA,SAAA,GAAA,EADR,~~EASO~~,QAAA;;~~KAPJ~~,OAAK,EAAA,CAAA,uBAA0B,EAAA,UAAS,CAAA;~~QAGzC~~,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,OAAK,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAIrB,EA2BW,EAAA,EAAA,EAAA;KA1BT,KAAI;KACH,OAAK,EAAA,CAAA,0BAA6B,EAAA,MAAY,CAAA;;sBAWrC,CATV,EASU,EAAA,EAAA,EAAA;MARR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,IAAG;MACH,OAAM;;uBAEU,CAAA,EAAA,EAAb,EAAA,WAAU,EAAA,EAAA,CAAA,CAAA;;iCAIP,EAAA,YAAA,GAAA,EADR,EAWU,EAAA,EAAA,EAAA;;MATR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,MAAK;MACL,IAAG;MACH,OAAM;;uBAEQ,CAAA,EAAA,EAAX,EAAA,SAAQ,EAAA,EAAA,CAAA,CAAA;;;;;IAKP,EAAA,EAAc,CAAC,EAAA,EAAK,CAAC,KAAI,IAAA,GAAA,EADjC,~~EAKM~~,OAAA;;~~KAHH~~,OAAK,EAAE,EAAA,UAAS;~~QAEjB~~,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}
1	+ {"version":3,"file":"empty-state.js","names":[],"sources":["../../../components/EmptyState/EmptyState.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n :class=\"['d-empty-state__illustration', illustrationClass]\"\n data-qa=\"dt-empty-state-illustration\"\n >\n <!-- @slot Slot for the illustration. Displays when size is 'lg' or 'md'. Overrides icon. -->\n <slot name=\"illustration\" />\n </span>\n\n <span\n v-if=\"showIcon\"\n :class=\"['d-empty-state__icon', iconClass]\"\n data-qa=\"dt-empty-state-icon\"\n >\n <!-- @slot Slot for the icon. Displayed if illustration is not provided. -->\n <slot\n name=\"icon\"\n :icon-size=\"'800'\"\n />\n </span>\n\n <dt-stack\n gap=\"150\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <dt-text\n kind=\"headline\"\n :size=\"headlineSize\"\n :density=\"headlineDensity\"\n wrap=\"balance\"\n as=\"div\"\n class=\"d-empty-state__header-text\"\n >\n {{ headerText }}\n </dt-text>\n\n <dt-text\n v-if=\"bodyText\"\n kind=\"body\"\n :size=\"bodySize\"\n :density=\"bodyDensity\"\n tone=\"secondary\"\n wrap=\"balance\"\n as=\"p\"\n class=\"d-empty-state__body-text\"\n >\n {{ bodyText }}\n </dt-text>\n </dt-stack>\n\n <div\n v-if=\"hasSlotContent(slots.body)\"\n :class=\"bodyClass\"\n data-qa=\"dt-empty-state-body-slot\"\n >\n <slot name=\"body\" />\n </div>\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/Stack';\nimport { DtText } from '@/components/Text';\nimport { hasSlotContent } from '@/common/utils';\nimport { ordinalSizeValidator } from '@/common/validators';\nimport {\n EMPTY_STATE_BODY_DENSITIES,\n EMPTY_STATE_BODY_SIZES,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_DENSITIES,\n EMPTY_STATE_HEADLINE_SIZES,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './EmptyStateConstants.js';\n\ndefineOptions({\n name: 'DtEmptyState',\n});\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /*\n The empty state size.\n * @values 200, 300, 400\n /\n size: {\n type: [String, Number],\n default: 400,\n validator: ordinalSizeValidator(EMPTY_STATE_SIZE_MODIFIERS),\n },\n\n /\n Header text\n * @type {String}\n /\n headerText: {\n type: String,\n required: true,\n },\n\n /\n Body text\n * @type {String}\n /\n bodyText: {\n type: String,\n default: null,\n },\n\n /\n Additional class name for the illustration wrapper element.\n /\n illustrationClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the icon wrapper element.\n /\n iconClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional class name for the body slot wrapper element.\n /\n bodyClass: {\n type: [String, Array, Object],\n default: '',\n },\n});\n\nconst hasIcon = computed(() => {\n return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\n\n/\n Icon will be shown in lg and md size only if illustration is not provided\n * Icon will always be shown in sm size\n /\nconst showIcon = computed(() => hasIcon.value && (!hasIllustration.value \|\| isSmallSize.value));\n\n/\n Illustration will always be shown in lg and md size\n * Illustration will not be shown in sm size\n */\nconst showIllustration = computed(() => hasIllustration.value && !isSmallSize.value);\n\nconst sizeKey = computed(() => String(props.size));\nconst isSmallSize = computed(() => sizeKey.value === 'sm' \|\| sizeKey.value === '200');\n\nconst sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[sizeKey.value]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[sizeKey.value]);\n\nconst headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[sizeKey.value]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[sizeKey.value]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[sizeKey.value]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[sizeKey.value]);\n\nonMounted(() => {\n if (!props.bodyText && !hasSlotContent(slots.body)) {\n console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n }\n});\n</script>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmFA,IAAM,IAAQ,GAAU,EAElB,IAAQ,GAsDR,IAAU,QACP,EAAe,EAAM,KAAK,CACjC,EACI,IAAkB,QAAe,EAAe,EAAM,aAAa,CAAC,EAMpE,IAAW,QAAe,EAAQ,UAAU,CAAC,EAAgB,SAAS,EAAY,OAAO,EAMzF,IAAmB,QAAe,EAAgB,SAAS,CAAC,EAAY,MAAM,EAE9E,IAAU,QAAe,OAAO,EAAM,KAAK,CAAC,EAC5C,IAAc,QAAe,EAAQ,UAAU,QAAQ,EAAQ,UAAU,MAAM,EAE/E,IAAY,QAAe,EAA2B,EAAQ,OAAO,EAErE,IAAoB,QAAe,CAAC,iBAAiB,EAAU,MAAM,CAAC,EAEtE,IAAe,QAAe,EAAmC,EAAQ,OAAO,EAEhF,IAAe,QAAe,EAA2B,EAAQ,OAAO,EACxE,IAAkB,QAAe,EAA+B,EAAQ,OAAO,EAE/E,IAAW,QAAe,EAAuB,EAAQ,OAAO,EAChE,IAAc,QAAe,EAA2B,EAAQ,OAAO;SAE7E,QAAgB;AACd,GAAI,CAAC,EAAM,YAAY,CAAC,EAAe,EAAM,KAAK,IAChD,QAAQ,MAAM,4EAA4E;IAE5F,kBA9KA,EA4DW,EAAA,EAAA,EAAA,EA3DR,OAAK,EAAE,EAAA,MAAiB,EAAA,EAAA;oBASlB;IANC,EAAA,SAAA,GAAA,EADR,EAOO,QAAA;;KALJ,OAAK,EAAA,CAAA,+BAAkC,EAAA,kBAAiB,CAAA;KACzD,WAAQ;QAGR,EAA4B,EAAA,QAAA,eAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAItB,EAAA,SAAA,GAAA,EADR,EAUO,QAAA;;KARJ,OAAK,EAAA,CAAA,uBAA0B,EAAA,UAAS,CAAA;KACzC,WAAQ;QAGR,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,OAAK,CAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA;IAIrB,EA2BW,EAAA,EAAA,EAAA;KA1BT,KAAI;KACH,OAAK,EAAA,CAAA,0BAA6B,EAAA,MAAY,CAAA;;sBAWrC,CATV,EASU,EAAA,EAAA,EAAA;MARR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,IAAG;MACH,OAAM;;uBAEU,CAAA,EAAA,EAAb,EAAA,WAAU,EAAA,EAAA,CAAA,CAAA;;iCAIP,EAAA,YAAA,GAAA,EADR,EAWU,EAAA,EAAA,EAAA;;MATR,MAAK;MACJ,MAAM,EAAA;MACN,SAAS,EAAA;MACV,MAAK;MACL,MAAK;MACL,IAAG;MACH,OAAM;;uBAEQ,CAAA,EAAA,EAAX,EAAA,SAAQ,EAAA,EAAA,CAAA,CAAA;;;;;IAKP,EAAA,EAAc,CAAC,EAAA,EAAK,CAAC,KAAI,IAAA,GAAA,EADjC,EAMM,OAAA;;KAJH,OAAK,EAAE,EAAA,UAAS;KACjB,WAAQ;QAER,EAAoB,EAAA,QAAA,OAAA,CAAA,EAAA,EAAA,IAAA,EAAA,IAAA,GAAA"}

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`),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;
+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`,"data-qa":`dt-keyboard-shortcut-sr-text`},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`,{"data-qa":`dt-keyboard-shortcut`,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/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":"+~~RA0DA~~,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,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,WACA,OAAA,EAAA,QACD,CAED,MAAO,CAOL,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,~~IArMS~~,MAAM,+~~BAA8B~~,~~kIAmCtC~~,MAAA,~~CAxCH~~,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,oBAiCvC,EAAA,SAAA,MAAA,EAAA,EAAA,YA9BW,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,aAeZ,EAAA,CAdP,IAAG,QAAU,EAAC,GAAI,IACnB,KAAK,OACJ,KAAM,IACP,QAAA,GACC,QAAS,IACV,KAAK,WACL,cAAY,OACX,OAAA,EAAA,EAAA,gBAAK,CAAA,4BAAA,CAAA,sCAA8F,EAAA,SAAQ,CAAA,CAAA,6BAMtF,EAAA,EAAA,EAAA,oBAAA,OAAA,CAAhB,UAAQ,EAAI,CAAA,KAAA,EAAA,EAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"keyboard-shortcut.cjs","names":[],"sources":["../../../components/KeyboardShortcut/KeyboardShortcut.vue"],"sourcesContent":["<template>\n <kbd\n data-qa=\"dt-keyboard-shortcut\"\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n class=\"d-keyboard-shortcut--sr-only\"\n data-qa=\"dt-keyboard-shortcut-sr-text\"\n >\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

@@ -86,10 +86,16 @@ var S = {
 			}).filter((e) => e).join(" ");
 		}
 	}
-}, E = { class: "d-keyboard-shortcut--sr-only" }, D = ["innerHTML"];
+}, E = {
+	class: "d-keyboard-shortcut--sr-only",
+	"data-qa": "dt-keyboard-shortcut-sr-text"
+}, 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]), {
+	return c(), a("kbd", {
+		"data-qa": "dt-keyboard-shortcut",
+		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",

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

	@@ -1 +1 @@
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"}
1	+ {"version":3,"file":"keyboard-shortcut.js","names":[],"sources":["../../../components/KeyboardShortcut/KeyboardShortcut.vue"],"sourcesContent":["<template>\n <kbd\n data-qa=\"dt-keyboard-shortcut\"\n :class=\"[\n 'd-keyboard-shortcut',\n { 'd-keyboard-shortcut--inverted': inverted },\n ]\"\n >\n <span\n class=\"d-keyboard-shortcut--sr-only\"\n data-qa=\"dt-keyboard-shortcut-sr-text\"\n >\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":";;;;;AA8DA,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;CAvMK,OAAM;CACN,WAAQ;;;;aATZ,EA6CM,OAAA;EA5CJ,WAAQ;EACP,OAAK,EAAA,CAAA,uBAAA,EAAA,iCAA0E,EAAA,UAAQ,CAAA,CAAA;KAKxF,EAKO,QALP,GAKO,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/lazy-show/lazy-show.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`);var n={name:`DtLazyShow`,inheritAttrs:!1,props:{show:{type:Boolean,default:!1},transition:{type:String,default:null},appear:{type:Boolean,default:!1}},data(){return{initialized:!!this.show}},computed:{isCSSEnabled(){return process.env.NODE_ENV!==`test`}},watch:{show:function(e){!e||this.initialized||(this.initialized=!0)}}};function r(e,n,r,i,a,o){return(0,t.openBlock)(),(0,t.createBlock)(t.Transition,(0,t.mergeProps)({name:r.transition,appear:r.appear},e.$attrs,{css:o.isCSSEnabled}),{default:(0,t.withCtx)(()=>[(0,t.withDirectives)((0,t.createElementVNode)(`div`,(0,t.normalizeProps)((0,t.guardReactiveProps)(e.$attrs)),[a.initialized?(0,t.renderSlot)(e.$slots,`default`,{key:0}):(0,t.createCommentVNode)(``,!0)],16),[[t.vShow,r.show]])]),_:3},16,[`name`,`appear`,`css`])}var i=e.t(n,[[`render`,r]]);exports.default=i;
+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`);var n={name:`DtLazyShow`,inheritAttrs:!1,props:{show:{type:Boolean,default:!1},transition:{type:String,default:null},appear:{type:Boolean,default:!1}},data(){return{initialized:!!this.show}},computed:{isCSSEnabled(){return process.env.NODE_ENV!==`test`}},watch:{show:function(e){!e||this.initialized||(this.initialized=!0)}}};function r(e,n,r,i,a,o){return(0,t.openBlock)(),(0,t.createBlock)(t.Transition,(0,t.mergeProps)({name:r.transition,appear:r.appear},e.$attrs,{css:o.isCSSEnabled}),{default:(0,t.withCtx)(()=>[(0,t.withDirectives)((0,t.createElementVNode)(`div`,(0,t.mergeProps)({"data-qa":`dt-lazy-show`},e.$attrs),[a.initialized?(0,t.renderSlot)(e.$slots,`default`,{key:0}):(0,t.createCommentVNode)(``,!0)],16),[[t.vShow,r.show]])]),_:3},16,[`name`,`appear`,`css`])}var i=e.t(n,[[`render`,r]]);exports.default=i;
 //# sourceMappingURL=lazy-show.cjs.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"lazy-show.cjs","names":[],"sources":["../../../components/LazyShow/LazyShow.vue"],"sourcesContent":["<template>\n <Transition\n :name=\"transition\"\n :appear=\"appear\"\n v-bind=\"$attrs\"\n :css=\"isCSSEnabled\"\n >\n <div\n v-show=\"show\"\n v-bind=\"$attrs\"\n >\n <!-- @slot Slot for main content -->\n <slot v-if=\"initialized\" />\n </div>\n </Transition>\n</template>\n\n<script>\n/*\n Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n /\nexport default {\n name: 'DtLazyShow',\n\n inheritAttrs: false,\n\n /****************\n PROPS \n ***************/\n props: {\n /\n * Whether the child slot is shown.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n A valid Vue enter/leave CSS transition name.\n /\n transition: {\n type: String,\n default: null,\n },\n\n /\n Enable/Disable transition animation\n * @values true, false\n /\n appear: {\n type: Boolean,\n default: false,\n },\n },\n\n /****************\n DATA \n ***************/\n data () {\n return {\n initialized: !!this.show,\n };\n },\n\n computed: {\n /\n * Set the css property to false when running tests only.\n * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n * transition `css` property\n * @returns {boolean}\n /\n isCSSEnabled () {\n return process.env.NODE_ENV !== 'test';\n },\n },\n\n /****************\n WATCH \n *****************/\n watch: {\n show: function (newValue) {\n if (!newValue \|\| this.initialized) return;\n\n this.initialized = true;\n },\n },\n};\n</script>\n"],"mappings":"~~wNAsBA~~,IAAK,EAAU,CACb,KAAM,aAEN,aAAc,GAKd,MAAO,CAKL,KAAM,CACJ,KAAM,QACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,OACN,QAAS,KACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CACF,CAKD,MAAQ,CACN,MAAO,CACL,YAAa,CAAC,CAAC,KAAK,KACrB,EAGH,SAAU,CAOR,cAAgB,CACd,OAAA,QAAA,IAAA,WAAgC,QAEnC,CAKD,MAAO,CACL,KAAM,SAAU,EAAU,CACpB,CAAC,GAAY,KAAK,cAEtB,KAAK,YAAc,KAEtB,CACF,mEA3Ec,EAAA,YAAA,EAAA,EAAA,YAAA,~~CAZV~~,KAAM,EAAA,WACN,OAAQ,EAAA,QACD,EAAA,OAAM,CACb,IAAK,EAAA,aAAY,CAAA,CAAA,~~2BAQZ~~,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAAA,OAAA,EAAA,EAAA,~~iBAAA~~,~~EAAA~~,~~EAAA~~,~~oBAJI~~,EAAA,OAAM,CAAA,~~CAAA,~~CAGF,EAAA,aAAA,EAAA,EAAA,YAAe,EAAA,OAAA,UAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,~~MAJnB~~,EAAA,KAAI,CAAA,CAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"lazy-show.cjs","names":[],"sources":["../../../components/LazyShow/LazyShow.vue"],"sourcesContent":["<template>\n <Transition\n :name=\"transition\"\n :appear=\"appear\"\n v-bind=\"$attrs\"\n :css=\"isCSSEnabled\"\n >\n <div\n v-show=\"show\"\n data-qa=\"dt-lazy-show\"\n v-bind=\"$attrs\"\n >\n <!-- @slot Slot for main content -->\n <slot v-if=\"initialized\" />\n </div>\n </Transition>\n</template>\n\n<script>\n/*\n Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n /\nexport default {\n name: 'DtLazyShow',\n\n inheritAttrs: false,\n\n /****************\n PROPS \n ***************/\n props: {\n /\n * Whether the child slot is shown.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n A valid Vue enter/leave CSS transition name.\n /\n transition: {\n type: String,\n default: null,\n },\n\n /\n Enable/Disable transition animation\n * @values true, false\n /\n appear: {\n type: Boolean,\n default: false,\n },\n },\n\n /****************\n DATA \n ***************/\n data () {\n return {\n initialized: !!this.show,\n };\n },\n\n computed: {\n /\n * Set the css property to false when running tests only.\n * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n * transition `css` property\n * @returns {boolean}\n /\n isCSSEnabled () {\n return process.env.NODE_ENV !== 'test';\n },\n },\n\n /****************\n WATCH \n *****************/\n watch: {\n show: function (newValue) {\n if (!newValue \|\| this.initialized) return;\n\n this.initialized = true;\n },\n },\n};\n</script>\n"],"mappings":"wNAuBA,IAAK,EAAU,CACb,KAAM,aAEN,aAAc,GAKd,MAAO,CAKL,KAAM,CACJ,KAAM,QACN,QAAS,GACV,CAKD,WAAY,CACV,KAAM,OACN,QAAS,KACV,CAMD,OAAQ,CACN,KAAM,QACN,QAAS,GACV,CACF,CAKD,MAAQ,CACN,MAAO,CACL,YAAa,CAAC,CAAC,KAAK,KACrB,EAGH,SAAU,CAOR,cAAgB,CACd,OAAA,QAAA,IAAA,WAAgC,QAEnC,CAKD,MAAO,CACL,KAAM,SAAU,EAAU,CACpB,CAAC,GAAY,KAAK,cAEtB,KAAK,YAAc,KAEtB,CACF,mEA3Ec,EAAA,YAAA,EAAA,EAAA,YAAA,CAbV,KAAM,EAAA,WACN,OAAQ,EAAA,QACD,EAAA,OAAM,CACb,IAAK,EAAA,aAAY,CAAA,CAAA,2BASZ,EAAA,EAAA,EAAA,iBAAA,EAAA,EAAA,oBAAA,OAAA,EAAA,EAAA,YAAA,CALJ,UAAQ,eAAc,CACd,EAAA,OAAM,CAAA,CAGF,EAAA,aAAA,EAAA,EAAA,YAAe,EAAA,OAAA,UAAA,CAAA,IAAA,EAAA,CAAA,EAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAAA,CAAA,GAAA,CAAA,CAAA,CAAA,EAAA,MALnB,EAAA,KAAI,CAAA,CAAA,CAAA,CAAA"}

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

@@ -1,7 +1,7 @@
 import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
-import { Transition as t, createBlock as n, createCommentVNode as r, createElementVNode as i, guardReactiveProps as a, mergeProps as o, normalizeProps as s, openBlock as c, renderSlot as l, vShow as u, withCtx as d, withDirectives as f } from "vue";
+import { Transition as t, createBlock as n, createCommentVNode as r, createElementVNode as i, mergeProps as a, openBlock as o, renderSlot as s, vShow as c, withCtx as l, withDirectives as u } from "vue";
 //#region components/LazyShow/LazyShow.vue
-var p = {
+var d = {
 	name: "DtLazyShow",
 	inheritAttrs: !1,
 	props: {
@@ -28,12 +28,12 @@ var p = {
 		!e || this.initialized || (this.initialized = !0);
 	} }
 };
-function m(e, p, m, h, g, _) {
-	return c(), n(t, o({
-		name: m.transition,
-		appear: m.appear
-	}, e.$attrs, { css: _.isCSSEnabled }), {
-		default: d(() => [f(i("div", s(a(e.$attrs)), [g.initialized ? l(e.$slots, "default", { key: 0 }) : r("", !0)], 16), [[u, m.show]])]),
+function f(e, d, f, p, m, h) {
+	return o(), n(t, a({
+		name: f.transition,
+		appear: f.appear
+	}, e.$attrs, { css: h.isCSSEnabled }), {
+		default: l(() => [u(i("div", a({ "data-qa": "dt-lazy-show" }, e.$attrs), [m.initialized ? s(e.$slots, "default", { key: 0 }) : r("", !0)], 16), [[c, f.show]])]),
 		_: 3
 	}, 16, [
 		"name",
@@ -41,8 +41,8 @@ function m(e, p, m, h, g, _) {
 		"css"
 	]);
 }
-var h = /* @__PURE__ */ e(p, [["render", m]]);
+var p = /* @__PURE__ */ e(d, [["render", f]]);
 //#endregion
-export { h as default };
+export { p as default };
 //# sourceMappingURL=lazy-show.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"lazy-show.js","names":[],"sources":["../../../components/LazyShow/LazyShow.vue"],"sourcesContent":["<template>\n <Transition\n :name=\"transition\"\n :appear=\"appear\"\n v-bind=\"$attrs\"\n :css=\"isCSSEnabled\"\n >\n <div\n v-show=\"show\"\n v-bind=\"$attrs\"\n >\n <!-- @slot Slot for main content -->\n <slot v-if=\"initialized\" />\n </div>\n </Transition>\n</template>\n\n<script>\n/*\n Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n /\nexport default {\n name: 'DtLazyShow',\n\n inheritAttrs: false,\n\n /****************\n PROPS \n ***************/\n props: {\n /\n * Whether the child slot is shown.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n A valid Vue enter/leave CSS transition name.\n /\n transition: {\n type: String,\n default: null,\n },\n\n /\n Enable/Disable transition animation\n * @values true, false\n /\n appear: {\n type: Boolean,\n default: false,\n },\n },\n\n /****************\n DATA \n ***************/\n data () {\n return {\n initialized: !!this.show,\n };\n },\n\n computed: {\n /\n * Set the css property to false when running tests only.\n * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n * transition `css` property\n * @returns {boolean}\n /\n isCSSEnabled () {\n return process.env.NODE_ENV !== 'test';\n },\n },\n\n /****************\n WATCH \n *****************/\n watch: {\n show: function (newValue) {\n if (!newValue \|\| this.initialized) return;\n\n this.initialized = true;\n },\n },\n};\n</script>\n"],"mappings":";;;~~AAsBA~~,IAAK,IAAU;CACb,MAAM;CAEN,cAAc;CAKd,OAAO;EAKL,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CAKD,OAAQ;AACN,SAAO,EACL,aAAa,CAAC,CAAC,KAAK,MACrB;;CAGH,UAAU,EAOR,eAAgB;AACd,SAAA,QAAA,IAAA,aAAgC;IAEnC;CAKD,OAAO,EACL,MAAM,SAAU,GAAU;AACpB,GAAC,KAAY,KAAK,gBAEtB,KAAK,cAAc;IAEtB;CACF;;~~aAxFC~~,~~EAaa~~,~~GAbb~~,~~EAaa~~;~~EAZV~~,MAAM,EAAA;EACN,QAAQ,EAAA;IACD,EAAA,QAAM,EACb,KAAK,EAAA,cAAY,CAAA,EAAA;~~mBAQZ~~,CAAA,~~EANN~~,~~EAMM~~,~~OAAA~~,~~EAAA~~,~~EAJI~~,EAAA,OAAM,~~CAAA,~~EAAA,CAGF,EAAA,cAAZ,EAA2B,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,GAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,~~GAJnB~~,EAAA,KAAI,CAAA,CAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"lazy-show.js","names":[],"sources":["../../../components/LazyShow/LazyShow.vue"],"sourcesContent":["<template>\n <Transition\n :name=\"transition\"\n :appear=\"appear\"\n v-bind=\"$attrs\"\n :css=\"isCSSEnabled\"\n >\n <div\n v-show=\"show\"\n data-qa=\"dt-lazy-show\"\n v-bind=\"$attrs\"\n >\n <!-- @slot Slot for main content -->\n <slot v-if=\"initialized\" />\n </div>\n </Transition>\n</template>\n\n<script>\n/*\n Lazy Show is a utility component that prevents its children from being rendered until the first time it is shown.\n * @see https://dialtone.dialpad.com/components/lazy_show.html\n /\nexport default {\n name: 'DtLazyShow',\n\n inheritAttrs: false,\n\n /****************\n PROPS \n ***************/\n props: {\n /\n * Whether the child slot is shown.\n * @values true, false\n /\n show: {\n type: Boolean,\n default: false,\n },\n\n /\n A valid Vue enter/leave CSS transition name.\n /\n transition: {\n type: String,\n default: null,\n },\n\n /\n Enable/Disable transition animation\n * @values true, false\n /\n appear: {\n type: Boolean,\n default: false,\n },\n },\n\n /****************\n DATA \n ***************/\n data () {\n return {\n initialized: !!this.show,\n };\n },\n\n computed: {\n /\n * Set the css property to false when running tests only.\n * Refer to: https://vuejs.org/guide/built-ins/transition.html#javascript-hooks for details about\n * transition `css` property\n * @returns {boolean}\n /\n isCSSEnabled () {\n return process.env.NODE_ENV !== 'test';\n },\n },\n\n /****************\n WATCH \n *****************/\n watch: {\n show: function (newValue) {\n if (!newValue \|\| this.initialized) return;\n\n this.initialized = true;\n },\n },\n};\n</script>\n"],"mappings":";;;AAuBA,IAAK,IAAU;CACb,MAAM;CAEN,cAAc;CAKd,OAAO;EAKL,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,QAAQ;GACN,MAAM;GACN,SAAS;GACV;EACF;CAKD,OAAQ;AACN,SAAO,EACL,aAAa,CAAC,CAAC,KAAK,MACrB;;CAGH,UAAU,EAOR,eAAgB;AACd,SAAA,QAAA,IAAA,aAAgC;IAEnC;CAKD,OAAO,EACL,MAAM,SAAU,GAAU;AACpB,GAAC,KAAY,KAAK,gBAEtB,KAAK,cAAc;IAEtB;CACF;;aAzFC,EAca,GAdb,EAca;EAbV,MAAM,EAAA;EACN,QAAQ,EAAA;IACD,EAAA,QAAM,EACb,KAAK,EAAA,cAAY,CAAA,EAAA;mBASZ,CAAA,EAPN,EAOM,OAPN,EAOM,EALJ,WAAQ,gBAAc,EACd,EAAA,OAAM,EAAA,CAGF,EAAA,cAAZ,EAA2B,EAAA,QAAA,WAAA,EAAA,KAAA,GAAA,CAAA,GAAA,EAAA,IAAA,GAAA,CAAA,EAAA,GAAA,EAAA,CAAA,CAAA,GALnB,EAAA,KAAI,CAAA,CAAA,CAAA,CAAA"}

package/dist/lib/mode-island/mode-island.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`),t=require(`./utils.cjs`),n=require(`./mode-island-constants.cjs`),r=require(`./validators.cjs`);let i=require(`vue`);var a={name:`DtModeIsland`,provide(){return{dtModeIslandMode:()=>this.computedMode}},inject:{parentModeIslandMode:{from:`dtModeIslandMode`,default:null}},props:{as:{type:String,default:`div`},mode:{type:String,default:n.DT_MODE_ISLAND_TYPES.INVERTED,validator:r.modeValidator}},data(){return{currentContrast:t.getRootContrast(),currentMaterial:t.getRootMaterial(),contrastObserver:null,materialObserver:null,modeObserver:null,elementRef:null,calculatedMode:null}},computed:{isInverted(){return this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED},invertedAttribute(){return this.isInverted?``:null},computedMode(){return this.mode===n.DT_MODE_ISLAND_TYPES.LIGHT||this.mode===n.DT_MODE_ISLAND_TYPES.DARK?this.mode:this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED&&this.calculatedMode?this.calculatedMode:this.calculateInvertedMode()}},beforeCreate(){if(this.$attrs&&this.$attrs[`data-dt-brand`])throw Error(`[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.`)},mounted(){this.elementRef=this.$el,this.setupContrastObserver(),this.setupMaterialObserver(),this.isInverted&&(this.calculatedMode=this.calculateInvertedMode(),this.setupModeObserver()),this.currentContrast=t.getRootContrast(),this.currentMaterial=t.getRootMaterial()},beforeUnmount(){this.contrastObserver&&(this.contrastObserver.disconnect(),this.contrastObserver=null),this.materialObserver&&(this.materialObserver.disconnect(),this.materialObserver=null),this.modeObserver&&(this.modeObserver.disconnect(),this.modeObserver=null)},methods:{calculateInvertedMode(){return this.parentModeIslandMode?t.getOppositeMode(typeof this.parentModeIslandMode==`function`?this.parentModeIslandMode():this.parentModeIslandMode):this.elementRef?t.getOppositeMode(t.findParentMode(this.elementRef)):t.getOppositeMode(t.getRootMode())},setupContrastObserver(){this.contrastObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-contrast`&&(this.currentContrast=t.getRootContrast())}),this.contrastObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-contrast`]})},setupMaterialObserver(){this.materialObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-material`&&(this.currentMaterial=t.getRootMaterial())}),this.materialObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-material`]})},setupModeObserver(){let e={attributes:!0,attributeFilter:[`data-dt-mode`],subtree:!1};this.modeObserver=new MutationObserver(e=>{for(let t of e)t.type===`attributes`&&t.attributeName===`data-dt-mode`&&(this.calculatedMode=this.calculateInvertedMode())}),this.modeObserver.observe(document.documentElement,e);let t=this.elementRef?.parentElement;for(;t;)t.hasAttribute(`data-dt-mode`)&&this.modeObserver.observe(t,e),t=t.parentElement}}};function o(e,t,n,r,a,o){return(0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(n.as),{class:`d-mode-island`,"data-dt-mode":o.computedMode,"data-mode-island-inverted":o.invertedAttribute,"data-dt-contrast":a.currentContrast,"data-dt-material":a.currentMaterial},{default:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`default`)]),_:3},8,[`data-dt-mode`,`data-mode-island-inverted`,`data-dt-contrast`,`data-dt-material`])}var s=e.t(a,[[`render`,o]]);exports.default=s;
+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(`./utils.cjs`),n=require(`./mode-island-constants.cjs`),r=require(`./validators.cjs`);let i=require(`vue`);var a={name:`DtModeIsland`,provide(){return{dtModeIslandMode:()=>this.computedMode}},inject:{parentModeIslandMode:{from:`dtModeIslandMode`,default:null}},props:{as:{type:String,default:`div`},mode:{type:String,default:n.DT_MODE_ISLAND_TYPES.INVERTED,validator:r.modeValidator}},data(){return{currentContrast:t.getRootContrast(),currentMaterial:t.getRootMaterial(),contrastObserver:null,materialObserver:null,modeObserver:null,elementRef:null,calculatedMode:null}},computed:{isInverted(){return this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED},invertedAttribute(){return this.isInverted?``:null},computedMode(){return this.mode===n.DT_MODE_ISLAND_TYPES.LIGHT||this.mode===n.DT_MODE_ISLAND_TYPES.DARK?this.mode:this.mode===n.DT_MODE_ISLAND_TYPES.INVERTED&&this.calculatedMode?this.calculatedMode:this.calculateInvertedMode()}},beforeCreate(){if(this.$attrs&&this.$attrs[`data-dt-brand`])throw Error(`[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.`)},mounted(){this.elementRef=this.$el,this.setupContrastObserver(),this.setupMaterialObserver(),this.isInverted&&(this.calculatedMode=this.calculateInvertedMode(),this.setupModeObserver()),this.currentContrast=t.getRootContrast(),this.currentMaterial=t.getRootMaterial()},beforeUnmount(){this.contrastObserver&&(this.contrastObserver.disconnect(),this.contrastObserver=null),this.materialObserver&&(this.materialObserver.disconnect(),this.materialObserver=null),this.modeObserver&&(this.modeObserver.disconnect(),this.modeObserver=null)},methods:{calculateInvertedMode(){return this.parentModeIslandMode?t.getOppositeMode(typeof this.parentModeIslandMode==`function`?this.parentModeIslandMode():this.parentModeIslandMode):this.elementRef?t.getOppositeMode(t.findParentMode(this.elementRef)):t.getOppositeMode(t.getRootMode())},setupContrastObserver(){this.contrastObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-contrast`&&(this.currentContrast=t.getRootContrast())}),this.contrastObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-contrast`]})},setupMaterialObserver(){this.materialObserver=new MutationObserver(e=>{for(let n of e)n.type===`attributes`&&n.attributeName===`data-dt-material`&&(this.currentMaterial=t.getRootMaterial())}),this.materialObserver.observe(document.documentElement,{attributes:!0,attributeFilter:[`data-dt-material`]})},setupModeObserver(){let e={attributes:!0,attributeFilter:[`data-dt-mode`],subtree:!1};this.modeObserver=new MutationObserver(e=>{for(let t of e)t.type===`attributes`&&t.attributeName===`data-dt-mode`&&(this.calculatedMode=this.calculateInvertedMode())}),this.modeObserver.observe(document.documentElement,e);let t=this.elementRef?.parentElement;for(;t;)t.hasAttribute(`data-dt-mode`)&&this.modeObserver.observe(t,e),t=t.parentElement}}};function o(e,t,n,r,a,o){return(0,i.openBlock)(),(0,i.createBlock)((0,i.resolveDynamicComponent)(n.as),{class:`d-mode-island`,"data-qa":`dt-mode-island`,"data-dt-mode":o.computedMode,"data-mode-island-inverted":o.invertedAttribute,"data-dt-contrast":a.currentContrast,"data-dt-material":a.currentMaterial},{default:(0,i.withCtx)(()=>[(0,i.renderSlot)(e.$slots,`default`)]),_:3},8,[`data-dt-mode`,`data-mode-island-inverted`,`data-dt-contrast`,`data-dt-material`])}var s=e.t(a,[[`render`,o]]);exports.default=s;
 //# sourceMappingURL=mode-island.cjs.map

package/dist/lib/mode-island/mode-island.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mode-island.cjs","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n class=\"d-mode-island\"\n :data-dt-mode=\"computedMode\"\n :data-mode-island-inverted=\"invertedAttribute\"\n :data-dt-contrast=\"currentContrast\"\n :data-dt-material=\"currentMaterial\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n getOppositeMode,\n getRootMode,\n getRootContrast,\n getRootMaterial,\n findParentMode,\n} from './Utils';\n\n/*\n Prefer the v-dt-mode directive for local color-mode scoping.\n * DtModeIsland renders a container with the active mode's primary surface background.\n * Use it when that container and automatic surface are wanted together, or when\n * the current directive plugin cannot be installed. Its mode prop uses \"inverted\";\n * the directive uses \"invert\". See the usage guide for server-rendering considerations.\n * @see https://dialtone.dialpad.com/components/mode-island.html\n /\nexport default {\n name: 'DtModeIsland',\n\n provide () {\n return {\n dtModeIslandMode: () => this.computedMode,\n };\n },\n\n inject: {\n parentModeIslandMode: {\n from: 'dtModeIslandMode',\n default: null,\n },\n },\n\n props: {\n /\n Set this prop to render the mode island as a specific HTML element.\n * @type {String}\n * @values div, section, nav, article, aside, header, footer, main\n /\n as: {\n type: String,\n default: 'div',\n },\n\n /\n The mode to apply to the island.\n * - 'inverted': Opposite of parent or root mode\n * - 'light': Always light mode\n * - 'dark': Always dark mode\n * @type {String}\n * @values inverted, light, dark\n */\n mode: {\n type: String,\n default: DT_MODE_ISLAND_TYPES.INVERTED,\n validator: modeValidator,\n },\n },\n\n data () {\n return {\n currentContrast: getRootContrast(),\n currentMaterial: getRootMaterial(),\n contrastObserver: null,\n materialObserver: null,\n modeObserver: null,\n elementRef: null,\n calculatedMode: null, // Store calculated mode as reactive data\n };\n },\n\n computed: {\n isInverted () {\n return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n },\n\n invertedAttribute () {\n return this.isInverted ? '' : null;\n },\n\n computedMode () {\n // If mode is explicitly light or dark, use it directly\n if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT \|\| this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n return this.mode;\n }\n\n // If mode is inverted, use the calculated mode if available\n if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n return this.calculatedMode;\n }\n\n // Otherwise calculate it now\n return this.calculateInvertedMode();\n },\n },\n\n beforeCreate () {\n // Throw error if data-dt-brand is manually set\n if (this.$attrs && this.$attrs['data-dt-brand']) {\n throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n }\n },\n\n mounted () {\n // Store element reference\n this.elementRef = this.$el;\n\n // Setup MutationObserver to watch for contrast changes on root\n this.setupContrastObserver();\n\n // Setup MutationObserver to watch for material changes on root\n this.setupMaterialObserver();\n\n // Setup MutationObserver to watch for mode changes (only if inverted)\n if (this.isInverted) {\n // Initialize the calculated mode\n this.calculatedMode = this.calculateInvertedMode();\n this.setupModeObserver();\n }\n\n // Initial values\n this.currentContrast = getRootContrast();\n this.currentMaterial = getRootMaterial();\n },\n\n beforeUnmount () {\n // Cleanup observers\n if (this.contrastObserver) {\n this.contrastObserver.disconnect();\n this.contrastObserver = null;\n }\n if (this.materialObserver) {\n this.materialObserver.disconnect();\n this.materialObserver = null;\n }\n if (this.modeObserver) {\n this.modeObserver.disconnect();\n this.modeObserver = null;\n }\n },\n\n methods: {\n calculateInvertedMode () {\n // First check if there's a parent mode island\n if (this.parentModeIslandMode) {\n const parentMode = typeof this.parentModeIslandMode === 'function'\n ? this.parentModeIslandMode()\n : this.parentModeIslandMode;\n return getOppositeMode(parentMode);\n }\n\n // Otherwise, find the nearest parent with data-dt-mode\n if (this.elementRef) {\n const parentMode = findParentMode(this.elementRef);\n return getOppositeMode(parentMode);\n }\n\n // Default fallback\n return getOppositeMode(getRootMode());\n },\n\n setupContrastObserver () {\n this.contrastObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n this.currentContrast = getRootContrast();\n }\n }\n });\n\n this.contrastObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-dt-contrast'],\n });\n },\n\n setupMaterialObserver () {\n this.materialObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n this.currentMaterial = getRootMaterial();\n }\n }\n });\n\n this.materialObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-dt-material'],\n });\n },\n\n setupModeObserver () {\n const config = {\n attributes: true,\n attributeFilter: ['data-dt-mode'],\n subtree: false,\n };\n\n this.modeObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n // Recalculate and update the reactive data property\n this.calculatedMode = this.calculateInvertedMode();\n }\n }\n });\n\n // Observe root element\n this.modeObserver.observe(document.documentElement, config);\n\n // Also observe all parent elements with data-dt-mode\n let parent = this.elementRef?.parentElement;\n while (parent) {\n if (parent.hasAttribute('data-dt-mode')) {\n this.modeObserver.observe(parent, config);\n }\n parent = parent.parentElement;\n }\n },\n },\n};\n</script>\n"],"mappings":"~~wTAiCA~~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~~iGA1OQ~~,EAAA,GAAE,CAAA,CACP,MAAM,~~gBACL~~,eAAc,EAAA,aACd,4BAA2B,EAAA,kBAC3B,mBAAkB,EAAA,gBAClB,mBAAkB,EAAA,4CAGX,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,UAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"mode-island.cjs","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n class=\"d-mode-island\"\n data-qa=\"dt-mode-island\"\n :data-dt-mode=\"computedMode\"\n :data-mode-island-inverted=\"invertedAttribute\"\n :data-dt-contrast=\"currentContrast\"\n :data-dt-material=\"currentMaterial\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n getOppositeMode,\n getRootMode,\n getRootContrast,\n getRootMaterial,\n findParentMode,\n} from './Utils';\n\n/*\n Prefer the v-dt-mode directive for local color-mode scoping.\n * DtModeIsland renders a container with the active mode's primary surface background.\n * Use it when that container and automatic surface are wanted together, or when\n * the current directive plugin cannot be installed. Its mode prop uses \"inverted\";\n * the directive uses \"invert\". See the usage guide for server-rendering considerations.\n * @see https://dialtone.dialpad.com/components/mode-island.html\n /\nexport default {\n name: 'DtModeIsland',\n\n provide () {\n return {\n dtModeIslandMode: () => this.computedMode,\n };\n },\n\n inject: {\n parentModeIslandMode: {\n from: 'dtModeIslandMode',\n default: null,\n },\n },\n\n props: {\n /\n Set this prop to render the mode island as a specific HTML element.\n * @type {String}\n * @values div, section, nav, article, aside, header, footer, main\n /\n as: {\n type: String,\n default: 'div',\n },\n\n /\n The mode to apply to the island.\n * - 'inverted': Opposite of parent or root mode\n * - 'light': Always light mode\n * - 'dark': Always dark mode\n * @type {String}\n * @values inverted, light, dark\n */\n mode: {\n type: String,\n default: DT_MODE_ISLAND_TYPES.INVERTED,\n validator: modeValidator,\n },\n },\n\n data () {\n return {\n currentContrast: getRootContrast(),\n currentMaterial: getRootMaterial(),\n contrastObserver: null,\n materialObserver: null,\n modeObserver: null,\n elementRef: null,\n calculatedMode: null, // Store calculated mode as reactive data\n };\n },\n\n computed: {\n isInverted () {\n return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n },\n\n invertedAttribute () {\n return this.isInverted ? '' : null;\n },\n\n computedMode () {\n // If mode is explicitly light or dark, use it directly\n if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT \|\| this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n return this.mode;\n }\n\n // If mode is inverted, use the calculated mode if available\n if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n return this.calculatedMode;\n }\n\n // Otherwise calculate it now\n return this.calculateInvertedMode();\n },\n },\n\n beforeCreate () {\n // Throw error if data-dt-brand is manually set\n if (this.$attrs && this.$attrs['data-dt-brand']) {\n throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n }\n },\n\n mounted () {\n // Store element reference\n this.elementRef = this.$el;\n\n // Setup MutationObserver to watch for contrast changes on root\n this.setupContrastObserver();\n\n // Setup MutationObserver to watch for material changes on root\n this.setupMaterialObserver();\n\n // Setup MutationObserver to watch for mode changes (only if inverted)\n if (this.isInverted) {\n // Initialize the calculated mode\n this.calculatedMode = this.calculateInvertedMode();\n this.setupModeObserver();\n }\n\n // Initial values\n this.currentContrast = getRootContrast();\n this.currentMaterial = getRootMaterial();\n },\n\n beforeUnmount () {\n // Cleanup observers\n if (this.contrastObserver) {\n this.contrastObserver.disconnect();\n this.contrastObserver = null;\n }\n if (this.materialObserver) {\n this.materialObserver.disconnect();\n this.materialObserver = null;\n }\n if (this.modeObserver) {\n this.modeObserver.disconnect();\n this.modeObserver = null;\n }\n },\n\n methods: {\n calculateInvertedMode () {\n // First check if there's a parent mode island\n if (this.parentModeIslandMode) {\n const parentMode = typeof this.parentModeIslandMode === 'function'\n ? this.parentModeIslandMode()\n : this.parentModeIslandMode;\n return getOppositeMode(parentMode);\n }\n\n // Otherwise, find the nearest parent with data-dt-mode\n if (this.elementRef) {\n const parentMode = findParentMode(this.elementRef);\n return getOppositeMode(parentMode);\n }\n\n // Default fallback\n return getOppositeMode(getRootMode());\n },\n\n setupContrastObserver () {\n this.contrastObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n this.currentContrast = getRootContrast();\n }\n }\n });\n\n this.contrastObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-dt-contrast'],\n });\n },\n\n setupMaterialObserver () {\n this.materialObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n this.currentMaterial = getRootMaterial();\n }\n }\n });\n\n this.materialObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-dt-material'],\n });\n },\n\n setupModeObserver () {\n const config = {\n attributes: true,\n attributeFilter: ['data-dt-mode'],\n subtree: false,\n };\n\n this.modeObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n // Recalculate and update the reactive data property\n this.calculatedMode = this.calculateInvertedMode();\n }\n }\n });\n\n // Observe root element\n this.modeObserver.observe(document.documentElement, config);\n\n // Also observe all parent elements with data-dt-mode\n let parent = this.elementRef?.parentElement;\n while (parent) {\n if (parent.hasAttribute('data-dt-mode')) {\n this.modeObserver.observe(parent, config);\n }\n parent = parent.parentElement;\n }\n },\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/mode-island/mode-island.js CHANGED Viewed

@@ -92,6 +92,7 @@ var p = {
 function m(e, t, n, r, i, a) {
 	return l(), c(d(n.as), {
 		class: "d-mode-island",
+		"data-qa": "dt-mode-island",
 		"data-dt-mode": a.computedMode,
 		"data-mode-island-inverted": a.invertedAttribute,
 		"data-dt-contrast": i.currentContrast,

package/dist/lib/mode-island/mode-island.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"mode-island.js","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n class=\"d-mode-island\"\n :data-dt-mode=\"computedMode\"\n :data-mode-island-inverted=\"invertedAttribute\"\n :data-dt-contrast=\"currentContrast\"\n :data-dt-material=\"currentMaterial\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n getOppositeMode,\n getRootMode,\n getRootContrast,\n getRootMaterial,\n findParentMode,\n} from './Utils';\n\n/*\n Prefer the v-dt-mode directive for local color-mode scoping.\n * DtModeIsland renders a container with the active mode's primary surface background.\n * Use it when that container and automatic surface are wanted together, or when\n * the current directive plugin cannot be installed. Its mode prop uses \"inverted\";\n * the directive uses \"invert\". See the usage guide for server-rendering considerations.\n * @see https://dialtone.dialpad.com/components/mode-island.html\n /\nexport default {\n name: 'DtModeIsland',\n\n provide () {\n return {\n dtModeIslandMode: () => this.computedMode,\n };\n },\n\n inject: {\n parentModeIslandMode: {\n from: 'dtModeIslandMode',\n default: null,\n },\n },\n\n props: {\n /\n Set this prop to render the mode island as a specific HTML element.\n * @type {String}\n * @values div, section, nav, article, aside, header, footer, main\n /\n as: {\n type: String,\n default: 'div',\n },\n\n /\n The mode to apply to the island.\n * - 'inverted': Opposite of parent or root mode\n * - 'light': Always light mode\n * - 'dark': Always dark mode\n * @type {String}\n * @values inverted, light, dark\n */\n mode: {\n type: String,\n default: DT_MODE_ISLAND_TYPES.INVERTED,\n validator: modeValidator,\n },\n },\n\n data () {\n return {\n currentContrast: getRootContrast(),\n currentMaterial: getRootMaterial(),\n contrastObserver: null,\n materialObserver: null,\n modeObserver: null,\n elementRef: null,\n calculatedMode: null, // Store calculated mode as reactive data\n };\n },\n\n computed: {\n isInverted () {\n return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n },\n\n invertedAttribute () {\n return this.isInverted ? '' : null;\n },\n\n computedMode () {\n // If mode is explicitly light or dark, use it directly\n if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT \|\| this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n return this.mode;\n }\n\n // If mode is inverted, use the calculated mode if available\n if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n return this.calculatedMode;\n }\n\n // Otherwise calculate it now\n return this.calculateInvertedMode();\n },\n },\n\n beforeCreate () {\n // Throw error if data-dt-brand is manually set\n if (this.$attrs && this.$attrs['data-dt-brand']) {\n throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n }\n },\n\n mounted () {\n // Store element reference\n this.elementRef = this.$el;\n\n // Setup MutationObserver to watch for contrast changes on root\n this.setupContrastObserver();\n\n // Setup MutationObserver to watch for material changes on root\n this.setupMaterialObserver();\n\n // Setup MutationObserver to watch for mode changes (only if inverted)\n if (this.isInverted) {\n // Initialize the calculated mode\n this.calculatedMode = this.calculateInvertedMode();\n this.setupModeObserver();\n }\n\n // Initial values\n this.currentContrast = getRootContrast();\n this.currentMaterial = getRootMaterial();\n },\n\n beforeUnmount () {\n // Cleanup observers\n if (this.contrastObserver) {\n this.contrastObserver.disconnect();\n this.contrastObserver = null;\n }\n if (this.materialObserver) {\n this.materialObserver.disconnect();\n this.materialObserver = null;\n }\n if (this.modeObserver) {\n this.modeObserver.disconnect();\n this.modeObserver = null;\n }\n },\n\n methods: {\n calculateInvertedMode () {\n // First check if there's a parent mode island\n if (this.parentModeIslandMode) {\n const parentMode = typeof this.parentModeIslandMode === 'function'\n ? this.parentModeIslandMode()\n : this.parentModeIslandMode;\n return getOppositeMode(parentMode);\n }\n\n // Otherwise, find the nearest parent with data-dt-mode\n if (this.elementRef) {\n const parentMode = findParentMode(this.elementRef);\n return getOppositeMode(parentMode);\n }\n\n // Default fallback\n return getOppositeMode(getRootMode());\n },\n\n setupContrastObserver () {\n this.contrastObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n this.currentContrast = getRootContrast();\n }\n }\n });\n\n this.contrastObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-dt-contrast'],\n });\n },\n\n setupMaterialObserver () {\n this.materialObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n this.currentMaterial = getRootMaterial();\n }\n }\n });\n\n this.materialObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-dt-material'],\n });\n },\n\n setupModeObserver () {\n const config = {\n attributes: true,\n attributeFilter: ['data-dt-mode'],\n subtree: false,\n };\n\n this.modeObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n // Recalculate and update the reactive data property\n this.calculatedMode = this.calculateInvertedMode();\n }\n }\n });\n\n // Observe root element\n this.modeObserver.observe(document.documentElement, config);\n\n // Also observe all parent elements with data-dt-mode\n let parent = this.elementRef?.parentElement;\n while (parent) {\n if (parent.hasAttribute('data-dt-mode')) {\n this.modeObserver.observe(parent, config);\n }\n parent = parent.parentElement;\n }\n },\n },\n};\n</script>\n"],"mappings":";;;;;;~~AAiCA~~,IAAK,IAAU;CACb,MAAM;CAEN,UAAW;AACT,SAAO,EACL,wBAAwB,KAAK,cAC9B;;CAGH,QAAQ,EACN,sBAAsB;EACpB,MAAM;EACN,SAAS;EACV,EACF;CAED,OAAO;EAML,IAAI;GACF,MAAM;GACN,SAAS;GACV;EAUD,MAAM;GACJ,MAAM;GACN,SAAS,EAAqB;GAC9B,WAAW;GACZ;EACF;CAED,OAAQ;AACN,SAAO;GACL,iBAAiB,GAAiB;GAClC,iBAAiB,GAAiB;GAClC,kBAAkB;GAClB,kBAAkB;GAClB,cAAc;GACd,YAAY;GACZ,gBAAgB;GACjB;;CAGH,UAAU;EACR,aAAc;AACZ,UAAO,KAAK,SAAS,EAAqB;;EAG5C,oBAAqB;AACnB,UAAO,KAAK,aAAa,KAAK;;EAGhC,eAAgB;AAYd,UAVI,KAAK,SAAS,EAAqB,SAAS,KAAK,SAAS,EAAqB,OAC1E,KAAK,OAIV,KAAK,SAAS,EAAqB,YAAY,KAAK,iBAC/C,KAAK,iBAIP,KAAK,uBAAuB;;EAEtC;CAED,eAAgB;AAEd,MAAI,KAAK,UAAU,KAAK,OAAO,iBAC7B,OAAU,MAAM,yHAAyH;;CAI7I,UAAW;AAmBT,EAjBA,KAAK,aAAa,KAAK,KAGvB,KAAK,uBAAuB,EAG5B,KAAK,uBAAuB,EAGxB,KAAK,eAEP,KAAK,iBAAiB,KAAK,uBAAuB,EAClD,KAAK,mBAAmB,GAI1B,KAAK,kBAAkB,GAAiB,EACxC,KAAK,kBAAkB,GAAiB;;CAG1C,gBAAiB;AAUf,EARI,KAAK,qBACP,KAAK,iBAAiB,YAAY,EAClC,KAAK,mBAAmB,OAEtB,KAAK,qBACP,KAAK,iBAAiB,YAAY,EAClC,KAAK,mBAAmB,OAEtB,KAAK,iBACP,KAAK,aAAa,YAAY,EAC9B,KAAK,eAAe;;CAIxB,SAAS;EACP,wBAAyB;AAgBvB,UAdI,KAAK,uBAIA,EAHY,OAAO,KAAK,wBAAyB,aACpD,KAAK,sBAAqB,GAC1B,KAAK,qBACyB,GAIhC,KAAK,aAEA,EADY,EAAe,KAAK,WAAW,CAChB,GAI7B,EAAgB,GAAa,CAAC;;EAGvC,wBAAyB;AASvB,GARA,KAAK,mBAAmB,IAAI,kBAAkB,MAAkB;AAC9D,SAAK,IAAM,KAAY,EACrB,CAAI,EAAS,SAAS,gBAAgB,EAAS,kBAAkB,uBAC/D,KAAK,kBAAkB,GAAiB;KAG5C,EAEF,KAAK,iBAAiB,QAAQ,SAAS,iBAAiB;IACtD,YAAY;IACZ,iBAAiB,CAAC,mBAAmB;IACtC,CAAC;;EAGJ,wBAAyB;AASvB,GARA,KAAK,mBAAmB,IAAI,kBAAkB,MAAkB;AAC9D,SAAK,IAAM,KAAY,EACrB,CAAI,EAAS,SAAS,gBAAgB,EAAS,kBAAkB,uBAC/D,KAAK,kBAAkB,GAAiB;KAG5C,EAEF,KAAK,iBAAiB,QAAQ,SAAS,iBAAiB;IACtD,YAAY;IACZ,iBAAiB,CAAC,mBAAmB;IACtC,CAAC;;EAGJ,oBAAqB;GACnB,IAAM,IAAS;IACb,YAAY;IACZ,iBAAiB,CAAC,eAAe;IACjC,SAAS;IACV;AAYD,GAVA,KAAK,eAAe,IAAI,kBAAkB,MAAkB;AAC1D,SAAK,IAAM,KAAY,EACrB,CAAI,EAAS,SAAS,gBAAgB,EAAS,kBAAkB,mBAE/D,KAAK,iBAAiB,KAAK,uBAAuB;KAGtD,EAGF,KAAK,aAAa,QAAQ,SAAS,iBAAiB,EAAO;GAG3D,IAAI,IAAS,KAAK,YAAY;AAC9B,UAAO,GAIL,CAHI,EAAO,aAAa,eAAe,IACrC,KAAK,aAAa,QAAQ,GAAQ,EAAO,EAE3C,IAAS,EAAO;;EAGrB;CACF;;~~aA3OC~~,~~EAUY~~,~~EATL~~,EAAA,GAAE,EAAA;EACP,OAAM;~~EACL~~,gBAAc,EAAA;EACd,6BAA2B,EAAA;EAC3B,oBAAkB,EAAA;EAClB,oBAAkB,EAAA;;mBAGX,CAAR,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"mode-island.js","names":[],"sources":["../../../components/ModeIsland/ModeIsland.vue"],"sourcesContent":["<template>\n <component\n :is=\"as\"\n class=\"d-mode-island\"\n data-qa=\"dt-mode-island\"\n :data-dt-mode=\"computedMode\"\n :data-mode-island-inverted=\"invertedAttribute\"\n :data-dt-contrast=\"currentContrast\"\n :data-dt-material=\"currentMaterial\"\n >\n <!-- @slot Slot for main content -->\n <slot />\n </component>\n</template>\n\n<script>\nimport { DT_MODE_ISLAND_TYPES } from './ModeIslandConstants';\nimport { modeValidator } from './Validators';\nimport {\n getOppositeMode,\n getRootMode,\n getRootContrast,\n getRootMaterial,\n findParentMode,\n} from './Utils';\n\n/*\n Prefer the v-dt-mode directive for local color-mode scoping.\n * DtModeIsland renders a container with the active mode's primary surface background.\n * Use it when that container and automatic surface are wanted together, or when\n * the current directive plugin cannot be installed. Its mode prop uses \"inverted\";\n * the directive uses \"invert\". See the usage guide for server-rendering considerations.\n * @see https://dialtone.dialpad.com/components/mode-island.html\n /\nexport default {\n name: 'DtModeIsland',\n\n provide () {\n return {\n dtModeIslandMode: () => this.computedMode,\n };\n },\n\n inject: {\n parentModeIslandMode: {\n from: 'dtModeIslandMode',\n default: null,\n },\n },\n\n props: {\n /\n Set this prop to render the mode island as a specific HTML element.\n * @type {String}\n * @values div, section, nav, article, aside, header, footer, main\n /\n as: {\n type: String,\n default: 'div',\n },\n\n /\n The mode to apply to the island.\n * - 'inverted': Opposite of parent or root mode\n * - 'light': Always light mode\n * - 'dark': Always dark mode\n * @type {String}\n * @values inverted, light, dark\n */\n mode: {\n type: String,\n default: DT_MODE_ISLAND_TYPES.INVERTED,\n validator: modeValidator,\n },\n },\n\n data () {\n return {\n currentContrast: getRootContrast(),\n currentMaterial: getRootMaterial(),\n contrastObserver: null,\n materialObserver: null,\n modeObserver: null,\n elementRef: null,\n calculatedMode: null, // Store calculated mode as reactive data\n };\n },\n\n computed: {\n isInverted () {\n return this.mode === DT_MODE_ISLAND_TYPES.INVERTED;\n },\n\n invertedAttribute () {\n return this.isInverted ? '' : null;\n },\n\n computedMode () {\n // If mode is explicitly light or dark, use it directly\n if (this.mode === DT_MODE_ISLAND_TYPES.LIGHT \|\| this.mode === DT_MODE_ISLAND_TYPES.DARK) {\n return this.mode;\n }\n\n // If mode is inverted, use the calculated mode if available\n if (this.mode === DT_MODE_ISLAND_TYPES.INVERTED && this.calculatedMode) {\n return this.calculatedMode;\n }\n\n // Otherwise calculate it now\n return this.calculateInvertedMode();\n },\n },\n\n beforeCreate () {\n // Throw error if data-dt-brand is manually set\n if (this.$attrs && this.$attrs['data-dt-brand']) {\n throw new Error('[DtModeIsland] The data-dt-brand attribute is not allowed on mode islands. Brand should only be set at the root level.');\n }\n },\n\n mounted () {\n // Store element reference\n this.elementRef = this.$el;\n\n // Setup MutationObserver to watch for contrast changes on root\n this.setupContrastObserver();\n\n // Setup MutationObserver to watch for material changes on root\n this.setupMaterialObserver();\n\n // Setup MutationObserver to watch for mode changes (only if inverted)\n if (this.isInverted) {\n // Initialize the calculated mode\n this.calculatedMode = this.calculateInvertedMode();\n this.setupModeObserver();\n }\n\n // Initial values\n this.currentContrast = getRootContrast();\n this.currentMaterial = getRootMaterial();\n },\n\n beforeUnmount () {\n // Cleanup observers\n if (this.contrastObserver) {\n this.contrastObserver.disconnect();\n this.contrastObserver = null;\n }\n if (this.materialObserver) {\n this.materialObserver.disconnect();\n this.materialObserver = null;\n }\n if (this.modeObserver) {\n this.modeObserver.disconnect();\n this.modeObserver = null;\n }\n },\n\n methods: {\n calculateInvertedMode () {\n // First check if there's a parent mode island\n if (this.parentModeIslandMode) {\n const parentMode = typeof this.parentModeIslandMode === 'function'\n ? this.parentModeIslandMode()\n : this.parentModeIslandMode;\n return getOppositeMode(parentMode);\n }\n\n // Otherwise, find the nearest parent with data-dt-mode\n if (this.elementRef) {\n const parentMode = findParentMode(this.elementRef);\n return getOppositeMode(parentMode);\n }\n\n // Default fallback\n return getOppositeMode(getRootMode());\n },\n\n setupContrastObserver () {\n this.contrastObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-contrast') {\n this.currentContrast = getRootContrast();\n }\n }\n });\n\n this.contrastObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-dt-contrast'],\n });\n },\n\n setupMaterialObserver () {\n this.materialObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-material') {\n this.currentMaterial = getRootMaterial();\n }\n }\n });\n\n this.materialObserver.observe(document.documentElement, {\n attributes: true,\n attributeFilter: ['data-dt-material'],\n });\n },\n\n setupModeObserver () {\n const config = {\n attributes: true,\n attributeFilter: ['data-dt-mode'],\n subtree: false,\n };\n\n this.modeObserver = new MutationObserver((mutationsList) => {\n for (const mutation of mutationsList) {\n if (mutation.type === 'attributes' && mutation.attributeName === 'data-dt-mode') {\n // Recalculate and update the reactive data property\n this.calculatedMode = this.calculateInvertedMode();\n }\n }\n });\n\n // Observe root element\n this.modeObserver.observe(document.documentElement, config);\n\n // Also observe all parent elements with data-dt-mode\n let parent = this.elementRef?.parentElement;\n while (parent) {\n if (parent.hasAttribute('data-dt-mode')) {\n this.modeObserver.observe(parent, config);\n }\n parent = parent.parentElement;\n }\n },\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/motion-text/index.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./motion-text-constants.cjs`),t=require(`./motion-text.cjs`);exports.DtMotionText=t.default,exports.MOTION_TEXT_ANIMATION_MODES=e.MOTION_TEXT_ANIMATION_MODES,exports.MOTION_TEXT_SPEEDS=e.MOTION_TEXT_SPEEDS,exports.MOTION_TEXT_TIMING_PRESETS=e.MOTION_TEXT_TIMING_PRESETS;
1	+ Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./motion-text-constants.cjs`),t=require(`./motion-text.cjs`);exports.DtMotionText=t.default,exports.MOTION_TEXT_ANIMATION_MODES=e.MOTION_TEXT_ANIMATION_MODES,exports.MOTION_TEXT_MODE_SETTINGS=e.MOTION_TEXT_MODE_SETTINGS,exports.MOTION_TEXT_SPEEDS=e.MOTION_TEXT_SPEEDS,exports.MOTION_TEXT_TIMING_PRESETS=e.MOTION_TEXT_TIMING_PRESETS,exports.MOTION_TEXT_TRACKS=e.MOTION_TEXT_TRACKS;

package/dist/lib/motion-text/index.js CHANGED Viewed

@@ -1,3 +1,3 @@
-import { MOTION_TEXT_ANIMATION_MODES as e, MOTION_TEXT_SPEEDS as t, MOTION_TEXT_TIMING_PRESETS as n } from "./motion-text-constants.js";
-import r from "./motion-text.js";
-export { r as DtMotionText, e as MOTION_TEXT_ANIMATION_MODES, t as MOTION_TEXT_SPEEDS, n as MOTION_TEXT_TIMING_PRESETS };
+import { MOTION_TEXT_ANIMATION_MODES as e, MOTION_TEXT_MODE_SETTINGS as t, MOTION_TEXT_SPEEDS as n, MOTION_TEXT_TIMING_PRESETS as r, MOTION_TEXT_TRACKS as i } from "./motion-text-constants.js";
+import a from "./motion-text.js";
+export { a as DtMotionText, e as MOTION_TEXT_ANIMATION_MODES, t as MOTION_TEXT_MODE_SETTINGS, n as MOTION_TEXT_SPEEDS, r as MOTION_TEXT_TIMING_PRESETS, i as MOTION_TEXT_TRACKS };

package/dist/lib/motion-text/motion-text-constants.cjs CHANGED Viewed

@@ -1,2 +1,2 @@
-Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=[`gradient-in`,`fade-in`,`slide-in`,`gradient-sweep`,`shimmer`,`none`],t=[`100`,`200`,`300`,`400`,`500`],n={100:{characterDelay:10,wordDelay:15,duration:300},200:{characterDelay:20,wordDelay:30,duration:600},300:{characterDelay:30,wordDelay:50,duration:1e3},400:{characterDelay:50,wordDelay:100,duration:1500},500:{characterDelay:80,wordDelay:180,duration:2100}},r={MOTION_TEXT_ANIMATION_MODES:e,MOTION_TEXT_SPEEDS:t,MOTION_TEXT_TIMING_PRESETS:n};exports.MOTION_TEXT_ANIMATION_MODES=e,exports.MOTION_TEXT_SPEEDS=t,exports.MOTION_TEXT_TIMING_PRESETS=n,exports.default=r;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var e=[`gradient-in`,`fade-in`,`slide-in`,`slide-in-gradient`,`gradient-sweep`,`shimmer`,`none`],t=[`100`,`200`,`300`,`400`,`500`],n={100:{characterDelay:10,wordDelay:15,duration:300},200:{characterDelay:20,wordDelay:30,duration:600},300:{characterDelay:30,wordDelay:50,duration:1e3},400:{characterDelay:50,wordDelay:100,duration:1500},500:{characterDelay:80,wordDelay:180,duration:2100}},r={enter:{delay:0,stagger:60,duration:300},reveal:{delay:250,stagger:50,duration:300},sweep:{delay:350,stagger:120,duration:1400,fade:250},shimmer:{delay:0,stagger:0,duration:3e3}},i={"gradient-in":{tracks:[`enter`,`reveal`],gradient:!0,loopHold:1200},"fade-in":{tracks:[`enter`],gradient:!1,loopHold:1400},"slide-in":{tracks:[`enter`],gradient:!1,loopHold:1400},"slide-in-gradient":{tracks:[`enter`,`reveal`],gradient:!0,loopHold:1200},"gradient-sweep":{tracks:[`sweep`],gradient:!0,loopHold:300},shimmer:{tracks:[`shimmer`],gradient:!1,loopHold:0,wholeText:!0},none:{tracks:[],gradient:!1,loopHold:0}},a={MOTION_TEXT_ANIMATION_MODES:e,MOTION_TEXT_SPEEDS:t,MOTION_TEXT_TIMING_PRESETS:n,MOTION_TEXT_TRACKS:r,MOTION_TEXT_MODE_SETTINGS:i};exports.MOTION_TEXT_ANIMATION_MODES=e,exports.MOTION_TEXT_MODE_SETTINGS=i,exports.MOTION_TEXT_SPEEDS=t,exports.MOTION_TEXT_TIMING_PRESETS=n,exports.MOTION_TEXT_TRACKS=r,exports.default=a;
 //# sourceMappingURL=motion-text-constants.cjs.map

package/dist/lib/motion-text/motion-text-constants.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"motion-text-constants.cjs","names":[],"sources":["../../../components/MotionText/MotionTextConstants.js"],"sourcesContent":["// Animation mode options\nexport const MOTION_TEXT_ANIMATION_MODES = [\n 'gradient-in',\n 'fade-in',\n 'slide-in',\n 'gradient-sweep',\n 'shimmer',\n 'none',\n];\n\n// Speed options\nexport const MOTION_TEXT_SPEEDS = ['100', '200', '300', '400', '500'];\n\n// Timing presets based on speed\nexport const MOTION_TEXT_TIMING_PRESETS = {\n 100: {\n characterDelay: 10~~,\n~~ wordDelay: 15~~,\n~~ duration: 300~~,\n~~ },\n 200: {\n characterDelay: 20~~,\n~~ wordDelay: 30~~,\n~~ duration: 600~~,\n~~ },\n 300: {\n characterDelay: 30~~,\n~~ wordDelay: 50,\n duration: ~~1000~~,\n },\n ~~400~~: {\n ~~characterDelay~~: 50,\n ~~wordDelay~~: ~~100~~,\n duration: ~~1500~~,\n },\n ~~500~~: {\n ~~characterDelay~~: 80,\n ~~wordDelay~~: ~~180~~,\n ~~duration~~: ~~2100~~,\n },\n};\n\nexport default {\n MOTION_TEXT_ANIMATION_MODES,\n MOTION_TEXT_SPEEDS,\n MOTION_TEXT_TIMING_PRESETS,\n};\n"],"mappings":"+FACA,IAAa,EAA8B,CACzC,cACA,UACA,WACA,iBACA,UACA,OACD,CAGY,EAAqB,CAAC,MAAO,MAAO,MAAO,MAAO,MAAM,~~CAGxD~~,EAA6B,CACxC,IAAK,~~CACH~~,eAAgB,~~GAChB~~,UAAW,~~GACX~~,SAAU,~~IACX~~,~~CACD~~,IAAK,~~CACH~~,eAAgB,~~GAChB~~,UAAW,~~GACX~~,SAAU,~~IACX~~,~~CACD~~,IAAK,~~CACH~~,eAAgB,~~GAChB~~,UAAW,~~GACX~~,SAAU,~~IACX~~,~~CACD~~,IAAK,~~CACH~~,eAAgB,~~GAChB~~,UAAW,~~IACX~~,SAAU,~~KACX~~,~~CACD~~,IAAK,~~CACH~~,eAAgB,~~GAChB~~,UAAW,~~IACX~~,SAAU,~~KACX~~,~~CACF~~,CAED,EAAe,CACb,8BACA,qBACA,~~6BACD~~"}
1	+ {"version":3,"file":"motion-text-constants.cjs","names":[],"sources":["../../../components/MotionText/MotionTextConstants.js"],"sourcesContent":["// Animation mode options\nexport const MOTION_TEXT_ANIMATION_MODES = [\n 'gradient-in',\n 'fade-in',\n 'slide-in',\n 'slide-in-gradient',\n 'gradient-sweep',\n 'shimmer',\n 'none',\n];\n\n// Speed options\nexport const MOTION_TEXT_SPEEDS = ['100', '200', '300', '400', '500'];\n\n// Timing presets based on speed. `duration` relative to the 300 preset sets how much\n// every motion timing is scaled (300 plays the design spec as authored).\n// `characterDelay` and `wordDelay` are deprecated: unused since animation became word-level,\n// kept so code reading them doesn't break.\nexport const MOTION_TEXT_TIMING_PRESETS = {\n 100: { characterDelay: 10, wordDelay: 15, duration: 300 },\n 200: { characterDelay: 20, wordDelay: 30, duration: 600 },\n 300: { characterDelay: 30, wordDelay: 50, duration: 1000 },\n 400: { characterDelay: 50, wordDelay: 100, duration: 1500 },\n 500: { characterDelay: 80, wordDelay: 180, duration: 2100 },\n};\n\n// Per-word animation tracks in ms at speed 300, from the Motion Text design spec.\n// Word `i` starts at `delay + stagger * i` and runs for `duration`.\nexport const MOTION_TEXT_TRACKS = {\n // Word fades in (and rises, for slide modes)\n enter: { delay: 0, stagger: 60, duration: 300 },\n // Text color fades in over the gradient\n reveal: { delay: 250, stagger: 50, duration: 300 },\n // Word fades to the gradient, holds, then fades back over `fade`\n sweep: { delay: 350, stagger: 120, duration: 1400, fade: 250 },\n // A dimmed band sweeps left to right across the whole text at once (the original shimmer)\n shimmer: { delay: 0, stagger: 0, duration: 3000 },\n};\n\n// `loopHold` is the pause after the last word settles before a looped animation restarts.\n// `wholeText` modes animate the whole element, so the text and slot render as-is (markup and live\n// updates are kept) instead of being split into words.\n// With the six-word Figma sample it reproduces the 2000ms (reveal) and 2650ms (sweep) loops.\nexport const MOTION_TEXT_MODE_SETTINGS = {\n 'gradient-in': { tracks: ['enter', 'reveal'], gradient: true, loopHold: 1200 },\n 'fade-in': { tracks: ['enter'], gradient: false, loopHold: 1400 },\n 'slide-in': { tracks: ['enter'], gradient: false, loopHold: 1400 },\n 'slide-in-gradient': { tracks: ['enter', 'reveal'], gradient: true, loopHold: 1200 },\n 'gradient-sweep': { tracks: ['sweep'], gradient: true, loopHold: 300 },\n // Loops back to back, as the band starts and ends off the text\n shimmer: { tracks: ['shimmer'], gradient: false, loopHold: 0, wholeText: true },\n // Renders the text at rest, without animation\n none: { tracks: [], gradient: false, loopHold: 0 },\n};\n\nexport default {\n MOTION_TEXT_ANIMATION_MODES,\n MOTION_TEXT_SPEEDS,\n MOTION_TEXT_TIMING_PRESETS,\n MOTION_TEXT_TRACKS,\n MOTION_TEXT_MODE_SETTINGS,\n};\n"],"mappings":"+FACA,IAAa,EAA8B,CACzC,cACA,UACA,WACA,oBACA,iBACA,UACA,OACD,CAGY,EAAqB,CAAC,MAAO,MAAO,MAAO,MAAO,MAAM,CAMxD,EAA6B,CACxC,IAAK,CAAE,eAAgB,GAAI,UAAW,GAAI,SAAU,IAAK,CACzD,IAAK,CAAE,eAAgB,GAAI,UAAW,GAAI,SAAU,IAAK,CACzD,IAAK,CAAE,eAAgB,GAAI,UAAW,GAAI,SAAU,IAAM,CAC1D,IAAK,CAAE,eAAgB,GAAI,UAAW,IAAK,SAAU,KAAM,CAC3D,IAAK,CAAE,eAAgB,GAAI,UAAW,IAAK,SAAU,KAAM,CAC5D,CAIY,EAAqB,CAEhC,MAAO,CAAE,MAAO,EAAG,QAAS,GAAI,SAAU,IAAK,CAE/C,OAAQ,CAAE,MAAO,IAAK,QAAS,GAAI,SAAU,IAAK,CAElD,MAAO,CAAE,MAAO,IAAK,QAAS,IAAK,SAAU,KAAM,KAAM,IAAK,CAE9D,QAAS,CAAE,MAAO,EAAG,QAAS,EAAG,SAAU,IAAM,CAClD,CAMY,EAA4B,CACvC,cAAe,CAAE,OAAQ,CAAC,QAAS,SAAS,CAAE,SAAU,GAAM,SAAU,KAAM,CAC9E,UAAW,CAAE,OAAQ,CAAC,QAAQ,CAAE,SAAU,GAAO,SAAU,KAAM,CACjE,WAAY,CAAE,OAAQ,CAAC,QAAQ,CAAE,SAAU,GAAO,SAAU,KAAM,CAClE,oBAAqB,CAAE,OAAQ,CAAC,QAAS,SAAS,CAAE,SAAU,GAAM,SAAU,KAAM,CACpF,iBAAkB,CAAE,OAAQ,CAAC,QAAQ,CAAE,SAAU,GAAM,SAAU,IAAK,CAEtE,QAAS,CAAE,OAAQ,CAAC,UAAU,CAAE,SAAU,GAAO,SAAU,EAAG,UAAW,GAAM,CAE/E,KAAM,CAAE,OAAQ,EAAE,CAAE,SAAU,GAAO,SAAU,EAAG,CACnD,CAED,EAAe,CACb,8BACA,qBACA,6BACA,qBACA,4BACD"}

package/dist/lib/motion-text/motion-text-constants.js CHANGED Viewed

@@ -3,6 +3,7 @@ var e = [
 	"gradient-in",
 	"fade-in",
 	"slide-in",
+	"slide-in-gradient",
 	"gradient-sweep",
 	"shimmer",
 	"none"
@@ -39,11 +40,72 @@ var e = [
 		duration: 2100
 	}
 }, r = {
+	enter: {
+		delay: 0,
+		stagger: 60,
+		duration: 300
+	},
+	reveal: {
+		delay: 250,
+		stagger: 50,
+		duration: 300
+	},
+	sweep: {
+		delay: 350,
+		stagger: 120,
+		duration: 1400,
+		fade: 250
+	},
+	shimmer: {
+		delay: 0,
+		stagger: 0,
+		duration: 3e3
+	}
+}, i = {
+	"gradient-in": {
+		tracks: ["enter", "reveal"],
+		gradient: !0,
+		loopHold: 1200
+	},
+	"fade-in": {
+		tracks: ["enter"],
+		gradient: !1,
+		loopHold: 1400
+	},
+	"slide-in": {
+		tracks: ["enter"],
+		gradient: !1,
+		loopHold: 1400
+	},
+	"slide-in-gradient": {
+		tracks: ["enter", "reveal"],
+		gradient: !0,
+		loopHold: 1200
+	},
+	"gradient-sweep": {
+		tracks: ["sweep"],
+		gradient: !0,
+		loopHold: 300
+	},
+	shimmer: {
+		tracks: ["shimmer"],
+		gradient: !1,
+		loopHold: 0,
+		wholeText: !0
+	},
+	none: {
+		tracks: [],
+		gradient: !1,
+		loopHold: 0
+	}
+}, a = {
 	MOTION_TEXT_ANIMATION_MODES: e,
 	MOTION_TEXT_SPEEDS: t,
-	MOTION_TEXT_TIMING_PRESETS: n
+	MOTION_TEXT_TIMING_PRESETS: n,
+	MOTION_TEXT_TRACKS: r,
+	MOTION_TEXT_MODE_SETTINGS: i
 };
 //#endregion
-export { e as MOTION_TEXT_ANIMATION_MODES, t as MOTION_TEXT_SPEEDS, n as MOTION_TEXT_TIMING_PRESETS, r as default };
+export { e as MOTION_TEXT_ANIMATION_MODES, i as MOTION_TEXT_MODE_SETTINGS, t as MOTION_TEXT_SPEEDS, n as MOTION_TEXT_TIMING_PRESETS, r as MOTION_TEXT_TRACKS, a as default };
 //# sourceMappingURL=motion-text-constants.js.map