npm - @dialpad/dialtone-vue - Versions diffs - 3.219.0 → 3.220.0-next.2 - Mend

@dialpad/dialtone-vue 3.219.0 → 3.220.0-next.2

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 (970) hide show

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

@@ -1,27 +1,55 @@
 //#region components/empty_state/empty_state_constants.js
 var e = {
+	200: "d-empty-state--size-sm",
+	300: "d-empty-state--size-md",
+	400: "d-empty-state--size-lg",
 	sm: "d-empty-state--size-sm",
 	md: "d-empty-state--size-md",
 	lg: "d-empty-state--size-lg"
 }, t = {
+	200: "d-empty-state__content--sm",
+	300: "d-empty-state__content--md",
+	400: "d-empty-state__content--lg",
 	sm: "d-empty-state__content--sm",
 	md: "d-empty-state__content--md",
 	lg: "d-empty-state__content--lg"
 }, n = {
-	sm: "d-headline--md",
-	md: "d-headline--xl",
-	lg: "d-headline--xxl"
+	200: "md",
+	300: "xl",
+	400: "2xl",
+	sm: "md",
+	md: "xl",
+	lg: "2xl"
 }, r = {
-	sm: "d-body--sm",
-	md: "d-body--sm",
-	lg: "d-body--md"
+	200: "200",
+	300: "200",
+	400: void 0,
+	sm: "200",
+	md: "200",
+	lg: void 0
 }, i = {
+	200: "sm",
+	300: "md",
+	400: "lg",
+	sm: "sm",
+	md: "md",
+	lg: "lg"
+}, a = {
+	200: void 0,
+	300: "300",
+	400: "300",
+	sm: void 0,
+	md: "300",
+	lg: "300"
+}, o = {
 	EMPTY_STATE_SIZE_MODIFIERS: e,
 	EMPTY_STATE_CONTENT_SIZE_MODIFIERS: t,
-	EMPTY_STATE_HEADLINE_SIZE_MODIFIERS: n,
-	EMPTY_STATE_BODY_SIZE_MODIFIERS: r
+	EMPTY_STATE_HEADLINE_SIZES: n,
+	EMPTY_STATE_HEADLINE_DENSITIES: r,
+	EMPTY_STATE_BODY_SIZES: i,
+	EMPTY_STATE_BODY_DENSITIES: a
 };
 //#endregion
-export { r as EMPTY_STATE_BODY_SIZE_MODIFIERS, t as EMPTY_STATE_CONTENT_SIZE_MODIFIERS, n as EMPTY_STATE_HEADLINE_SIZE_MODIFIERS, e as EMPTY_STATE_SIZE_MODIFIERS, i as default };
+export { a as EMPTY_STATE_BODY_DENSITIES, i as EMPTY_STATE_BODY_SIZES, t as EMPTY_STATE_CONTENT_SIZE_MODIFIERS, r as EMPTY_STATE_HEADLINE_DENSITIES, n as EMPTY_STATE_HEADLINE_SIZES, e as EMPTY_STATE_SIZE_MODIFIERS, o as default };
 //# sourceMappingURL=empty-state-constants.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-state-constants.js","names":[],"sources":["../../../components/empty_state/empty_state_constants.js"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n sm: 'd-empty-state--size-sm',\n md: 'd-empty-state--size-md',\n lg: 'd-empty-state--size-lg',\n};\n\nexport const EMPTY_STATE_CONTENT_SIZE_MODIFIERS = {\n sm: 'd-empty-state__content--sm',\n md: 'd-empty-state__content--md',\n lg: 'd-empty-state__content--lg',\n};\n\nexport const ~~EMPTY_STATE_HEADLINE_SIZE_MODIFIERS~~ = {\n sm: '~~d-headline--~~md',\n md: '~~d-headline--~~xl',\n lg: '~~d-headline--xxl~~',\n};\n\nexport const ~~EMPTY_STATE_BODY_SIZE_MODIFIERS~~ = {\n sm: 'd-~~body--~~sm',\n md: 'd-~~body--~~sm',\n lg: 'd-~~body--~~md',\n};\n\nexport default {\n EMPTY_STATE_SIZE_MODIFIERS,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n ~~EMPTY_STATE_HEADLINE_SIZE_MODIFIERS~~,\n ~~EMPTY_STATE_BODY_SIZE_MODIFIERS~~,\n};\n"],"mappings":";AAAA,IAAa,IAA6B;~~CACxC~~,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAqC;~~CAChD~~,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,~~IAAsC~~;~~CACjD~~,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,~~IAAkC~~;~~CAC7C~~,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe;CACb;CACA;CACA;CACA;CACD"}
1	+ {"version":3,"file":"empty-state-constants.js","names":[],"sources":["../../../components/empty_state/empty_state_constants.js"],"sourcesContent":["export const EMPTY_STATE_SIZE_MODIFIERS = {\n // Numeric (preferred)\n 200: 'd-empty-state--size-sm',\n 300: 'd-empty-state--size-md',\n 400: 'd-empty-state--size-lg',\n // T-shirt aliases (deprecated)\n sm: 'd-empty-state--size-sm',\n md: 'd-empty-state--size-md',\n lg: 'd-empty-state--size-lg',\n};\n\nexport const EMPTY_STATE_CONTENT_SIZE_MODIFIERS = {\n // Numeric (preferred)\n 200: 'd-empty-state__content--sm',\n 300: 'd-empty-state__content--md',\n 400: 'd-empty-state__content--lg',\n // T-shirt aliases (deprecated)\n sm: 'd-empty-state__content--sm',\n md: 'd-empty-state__content--md',\n lg: 'd-empty-state__content--lg',\n};\n\nexport const EMPTY_STATE_HEADLINE_SIZES = {\n // Numeric (preferred)\n 200: 'md',\n 300: 'xl',\n 400: '2xl',\n // T-shirt aliases (deprecated)\n sm: 'md',\n md: 'xl',\n lg: '2xl',\n};\n\nexport const EMPTY_STATE_HEADLINE_DENSITIES = {\n // Numeric (preferred)\n 200: '200',\n 300: '200',\n 400: undefined,\n // T-shirt aliases (deprecated)\n sm: '200',\n md: '200',\n lg: undefined,\n};\n\nexport const EMPTY_STATE_BODY_SIZES = {\n // Numeric (preferred)\n 200: 'sm',\n 300: 'md',\n 400: 'lg',\n // T-shirt aliases (deprecated)\n sm: 'sm',\n md: 'md',\n lg: 'lg',\n};\n\nexport const EMPTY_STATE_BODY_DENSITIES = {\n // Numeric (preferred)\n 200: undefined,\n 300: '300',\n 400: '300',\n // T-shirt aliases (deprecated)\n sm: undefined,\n md: '300',\n lg: '300',\n};\n\nexport default {\n EMPTY_STATE_SIZE_MODIFIERS,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n EMPTY_STATE_HEADLINE_SIZES,\n EMPTY_STATE_HEADLINE_DENSITIES,\n EMPTY_STATE_BODY_SIZES,\n EMPTY_STATE_BODY_DENSITIES,\n};\n"],"mappings":";AAAA,IAAa,IAA6B;CAExC,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAqC;CAEhD,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAA6B;CAExC,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAAiC;CAE5C,KAAK;CACL,KAAK;CACL,KAAK,KAAA;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI,KAAA;CACL,EAEY,IAAyB;CAEpC,KAAK;CACL,KAAK;CACL,KAAK;CAEL,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEY,IAA6B;CAExC,KAAK,KAAA;CACL,KAAK;CACL,KAAK;CAEL,IAAI,KAAA;CACJ,IAAI;CACJ,IAAI;CACL,EAED,IAAe;CACb;CACA;CACA;CACA;CACA;CACA;CACD"}

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/utils/index.cjs`),t=require(`../stack/stack.cjs`),n=require(`./empty-state-constants.cjs`);let r=require(`vue`);var i={key:0,class:`d-empty-state__illustration`},a={key:1,class:`d-empty-state__icon`},o={__name:`empty_state`,props:{size:{type:String,default:`lg`,validator:e=>Object.keys(n.EMPTY_STATE_SIZE_MODIFIERS).includes(e)},headerText:{type:String,required:!0},bodyText:{type:String,default:null}},setup(o){let s=(0,r.useSlots)(),c=o,l=(0,r.computed)(()=>e.hasSlotContent(s.icon)),u=(0,r.computed)(()=>e.hasSlotContent(s.illustration)),d=(0,r.computed)(()=>c.size===`sm`),f=(0,r.computed)(()=>l.value&&(!u.value||d.value)),p=(0,r.computed)(()=>u.value&&!d.value),m=(0,r.computed)(()=>n.EMPTY_STATE_SIZE_MODIFIERS[c.size]),h=(0,r.computed)(()=>[`d-empty-state`,m.value]),g=(0,r.computed)(()=>n.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[c.size]),_=(0,r.computed)(()=>n.EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[c.size]),v=(0,r.computed)(()=>n.EMPTY_STATE_BODY_SIZE_MODIFIERS[c.size]);return(0,r.onMounted)(()=>{!c.bodyText&&!e.hasSlotContent(s.body)&&console.error(`DtEmptyState: You should provide either bodyText or content on body slot.`)}),(e,n)=>((0,r.openBlock)(),(0,r.createBlock)((0,r.unref)(t.default),{class:(0,r.normalizeClass)(h.value)},{default:(0,r.withCtx)(()=>[p.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,i,[(0,r.renderSlot)(e.$slots,`illustration`)])):(0,r.createCommentVNode)(``,!0),f.value?((0,r.openBlock)(),(0,r.createElementBlock)(`span`,a,[(0,r.renderSlot)(e.$slots,`icon`,{iconSize:`800`})])):(0,r.createCommentVNode)(``,!0),(0,r.createVNode)((0,r.unref)(t.default),{gap:`450`,class:(0,r.normalizeClass)([`d-empty-state__content`,g.value])},{default:(0,r.withCtx)(()=>[(0,r.createElementVNode)(`div`,{class:(0,r.normalizeClass)([`d-empty-state__header-text`,_.value])},(0,r.toDisplayString)(o.headerText),3),o.bodyText?((0,r.openBlock)(),(0,r.createElementBlock)(`p`,{key:0,class:(0,r.normalizeClass)([`d-empty-state__body-text`,v.value])},(0,r.toDisplayString)(o.bodyText),3)):(0,r.createCommentVNode)(``,!0)]),_:1},8,[`class`]),(0,r.renderSlot)(e.$slots,`body`)]),_:3},8,[`class`]))}};exports.default=o;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../text/text.cjs`),n=require(`../stack/stack.cjs`),r=require(`./empty-state-constants.cjs`);let i=require(`vue`);var a={key:0,class:`d-empty-state__illustration`},o={key:1,class:`d-empty-state__icon`},s=Object.assign({name:`DtEmptyState`},{__name:`empty_state`,props:{size:{type:[String,Number],default:400,validator:e=>Object.keys(r.EMPTY_STATE_SIZE_MODIFIERS).includes(String(e))},headerText:{type:String,required:!0},bodyText:{type:String,default:null}},setup(s){let c=(0,i.useSlots)(),l=s,u=(0,i.computed)(()=>e.hasSlotContent(c.icon)),d=(0,i.computed)(()=>e.hasSlotContent(c.illustration)),f=(0,i.computed)(()=>u.value&&(!d.value||h.value)),p=(0,i.computed)(()=>d.value&&!h.value),m=(0,i.computed)(()=>String(l.size)),h=(0,i.computed)(()=>m.value===`sm`||m.value===`200`),g=(0,i.computed)(()=>r.EMPTY_STATE_SIZE_MODIFIERS[m.value]),_=(0,i.computed)(()=>[`d-empty-state`,g.value]),v=(0,i.computed)(()=>r.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[m.value]),y=(0,i.computed)(()=>r.EMPTY_STATE_HEADLINE_SIZES[m.value]),b=(0,i.computed)(()=>r.EMPTY_STATE_HEADLINE_DENSITIES[m.value]),x=(0,i.computed)(()=>r.EMPTY_STATE_BODY_SIZES[m.value]),S=(0,i.computed)(()=>r.EMPTY_STATE_BODY_DENSITIES[m.value]);return(0,i.onMounted)(()=>{!l.bodyText&&!e.hasSlotContent(c.body)&&console.error(`DtEmptyState: You should provide either bodyText or content on body slot.`)}),(e,r)=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(n.default),{class:(0,i.normalizeClass)(_.value)},{default:(0,i.withCtx)(()=>[p.value?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,a,[(0,i.renderSlot)(e.$slots,`illustration`)])):(0,i.createCommentVNode)(``,!0),f.value?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,o,[(0,i.renderSlot)(e.$slots,`icon`,{iconSize:`800`})])):(0,i.createCommentVNode)(``,!0),(0,i.createVNode)((0,i.unref)(n.default),{gap:`150`,class:(0,i.normalizeClass)([`d-empty-state__content`,v.value])},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{kind:`headline`,size:y.value,density:b.value,wrap:`balance`,as:`div`,class:`d-empty-state__header-text`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(s.headerText),1)]),_:1},8,[`size`,`density`]),s.bodyText?((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(t.default),{key:0,kind:`body`,size:x.value,density:S.value,tone:`secondary`,wrap:`balance`,as:`p`,class:`d-empty-state__body-text`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(s.bodyText),1)]),_:1},8,[`size`,`density`])):(0,i.createCommentVNode)(``,!0)]),_:1},8,[`class`]),(0,i.renderSlot)(e.$slots,`body`)]),_:3},8,[`class`]))}});exports.default=s;
 //# 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/empty_state/empty_state.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n class=\"d-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\"\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=\"~~450~~\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <div :class=\"['d-empty-state__header-text~~', headlineClass]~~\">\n {{ headerText }}\n </~~div~~>\n\n <p\n v-if=\"bodyText\"\n :class=\"['d-empty-state__body-text~~', bodyClass]~~\"\n >\n {{ bodyText }}\n </p>\n </dt-stack>\n\n <slot name=\"body\" />\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\nimport {\n ~~EMPTY_STATE_BODY_SIZE_MODIFIERS~~,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n ~~EMPTY_STATE_HEADLINE_SIZE_MODIFIERS~~,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './empty_state_constants.js';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /*\n The empty state size.\n * @values ~~'sm'~~, ~~'md'~~, ~~'lg'~~\n /\n size: {\n type: String,\n default: ~~'lg'~~,\n validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\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\nconst hasIcon = computed(() => {\n return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\~~nconst isSmallSize = computed(() => props.size === 'sm');\~~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 sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[~~props~~.~~size~~]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[~~props~~.~~size~~]);\n\nconst ~~headlineClass~~ = computed(() => ~~EMPTY_STATE_HEADLINE_SIZE_MODIFIERS~~[~~props~~.~~size~~]);\n\nconst ~~bodyClass~~ = computed(() => ~~EMPTY_STATE_BODY_SIZE_MODIFIERS~~[~~props~~.~~size~~]);\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":"~~8jBAsDA~~,IAAM,GAAA,EAAA,EAAA,WAAkB,CAElB,EAAQ,EA8BR,GAAA,EAAA,EAAA,cACG,EAAA,eAAe,EAAM,KAAK,CACjC,CACI,GAAA,EAAA,EAAA,cAAiC,EAAA,eAAe,EAAM,aAAa,CAAC,~~CACpE~~,GAAA,EAAA,EAAA,~~cAA6B,EAAM,OAAS,KAAK,CAMjD,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,cAA2B,EAAA,2BAA2B,~~EAAM~~,~~MAAM~~,~~CAElE~~,GAAA,EAAA,EAAA,cAAmC,CAAC,gBAAiB,EAAU,MAAM,CAAC,CAEtE,GAAA,EAAA,EAAA,cAA8B,EAAA,mCAAmC,~~EAAM~~,~~MAAM~~,~~CAE7E~~,GAAA,EAAA,EAAA,~~cAA+B~~,EAAA,~~oCAAoC~~,~~EAAM~~,~~MAAM~~,CAE/E,GAAA,EAAA,EAAA,~~cAA2B~~,EAAA,~~gCAAgC~~,~~EAAM~~,~~MAAM~~,QAE7E,EAAA,EAAA,eAAgB,CACV,CAAC,EAAM,UAAY,CAAC,EAAA,eAAe,EAAM,KAAK,EAChD,QAAQ,MAAM,4EAA4E,EAE5F,~~yDA9EW~~,EAAA,QAAA,CAAA,~~CAtCR~~,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAiB,CAAA,CAAA,2BAQlB,CALC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKD,OANP,EAMO,EAAA,EAAA,EAAA,YADuB,EAAA,OAAA,eAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAItB,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OATP,EASO,EAAA,EAAA,EAAA,YADH,EAAA,OAAA,OAAA,CADC,SAAW,MAAK,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,+~~BAkBV~~,EAAA,QAAA,CAAA,~~CAbT~~,IAAI,MACH,OAAA,EAAA,EAAA,gBAAK,CAAA,yBAA6B,EAAA,MAAY,CAAA,~~6BAIzC~~,EAAA,EAAA,EAAA,~~oBAAA~~,~~MAAA~~,~~CAFA~~,OAAA,EAAA,~~EAAA~~,~~gBAAK,~~CAAA,~~6BAAiC~~,EAAA,~~MAAa~~,~~CAAA~~,~~CAAA~~,EAAA,EAAA,EAAA,~~iBACpD~~,EAAA,WAAU,CAAA,EAAA,~~CAIP~~,EAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,~~oBAIJ~~,~~IAAA~~,~~OAHD~~,~~OAAA~~,EAAA,~~EAAA~~,~~gBAAK,~~CAAA,~~2BAA+B~~,EAAA,~~MAAS~~,~~CAAA~~,~~wBAE3C,~~EAAA,~~SAAQ~~,~~CAAA~~,EAAA,~~GAAA~~,EAAA,EAAA,~~oBAAA~~,~~GAAA~~,~~GAAA~~,CAAA,CAAA,~~oCAIK~~,EAAA,OAAA,OAAA"}
1	+ {"version":3,"file":"empty-state.cjs","names":[],"sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n class=\"d-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\"\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 <slot name=\"body\" />\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 {\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 './empty_state_constants.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: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(String(s)),\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\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":"gpBA0EA,IAAM,GAAA,EAAA,EAAA,WAAkB,CAElB,EAAQ,EA8BR,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,yDAzFW,EAAA,QAAA,CAAA,CAnDR,OAAA,EAAA,EAAA,gBAAO,EAAA,MAAiB,CAAA,CAAA,2BAQlB,CALC,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKD,OANP,EAMO,EAAA,EAAA,EAAA,YADuB,EAAA,OAAA,eAAA,CAAA,CAAA,GAAA,EAAA,EAAA,oBAAA,GAAA,GAAA,CAItB,EAAA,QAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAQD,OATP,EASO,EAAA,EAAA,EAAA,YADH,EAAA,OAAA,OAAA,CADC,SAAW,MAAK,CAAA,CAAA,CAAA,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,kGAIK,EAAA,OAAA,OAAA"}

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

@@ -1,21 +1,22 @@
 import { hasSlotContent as e } from "../../common/utils/index.js";
-import t from "../stack/stack.js";
-import { EMPTY_STATE_BODY_SIZE_MODIFIERS as n, EMPTY_STATE_CONTENT_SIZE_MODIFIERS as r, EMPTY_STATE_HEADLINE_SIZE_MODIFIERS as i, EMPTY_STATE_SIZE_MODIFIERS as a } from "./empty-state-constants.js";
-import { computed as o, createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, createVNode as d, normalizeClass as f, onMounted as p, openBlock as m, renderSlot as h, toDisplayString as g, unref as _, useSlots as v, withCtx as y } from "vue";
+import t from "../text/text.js";
+import n from "../stack/stack.js";
+import { EMPTY_STATE_BODY_DENSITIES as r, EMPTY_STATE_BODY_SIZES as i, EMPTY_STATE_CONTENT_SIZE_MODIFIERS as a, EMPTY_STATE_HEADLINE_DENSITIES as o, EMPTY_STATE_HEADLINE_SIZES as s, EMPTY_STATE_SIZE_MODIFIERS as c } from "./empty-state-constants.js";
+import { computed as l, createBlock as u, createCommentVNode as d, createElementBlock as f, createTextVNode as p, createVNode as m, normalizeClass as h, onMounted as g, openBlock as _, renderSlot as v, toDisplayString as y, unref as b, useSlots as x, withCtx as S } from "vue";
 //#region components/empty_state/empty_state.vue
-var b = {
+var C = {
 	key: 0,
 	class: "d-empty-state__illustration"
-}, x = {
+}, w = {
 	key: 1,
 	class: "d-empty-state__icon"
-}, S = {
+}, T = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 	__name: "empty_state",
 	props: {
 		size: {
-			type: String,
-			default: "lg",
-			validator: (e) => Object.keys(a).includes(e)
+			type: [String, Number],
+			default: 400,
+			validator: (e) => Object.keys(c).includes(String(e))
 		},
 		headerText: {
 			type: String,
@@ -26,31 +27,50 @@ var b = {
 			default: null
 		}
 	},
-	setup(S) {
-		let C = v(), w = S, T = o(() => e(C.icon)), E = o(() => e(C.illustration)), D = o(() => w.size === "sm"), O = o(() => T.value && (!E.value || D.value)), k = o(() => E.value && !D.value), A = o(() => a[w.size]), j = o(() => ["d-empty-state", A.value]), M = o(() => r[w.size]), N = o(() => i[w.size]), P = o(() => n[w.size]);
-		return p(() => {
-			!w.bodyText && !e(C.body) && console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
-		}), (e, n) => (m(), s(_(t), { class: f(j.value) }, {
-			default: y(() => [
-				k.value ? (m(), l("span", b, [h(e.$slots, "illustration")])) : c("", !0),
-				O.value ? (m(), l("span", x, [h(e.$slots, "icon", { iconSize: "800" })])) : c("", !0),
-				d(_(t), {
-					gap: "450",
-					class: f(["d-empty-state__content", M.value])
+	setup(T) {
+		let E = x(), D = T, O = l(() => e(E.icon)), k = l(() => e(E.illustration)), A = l(() => O.value && (!k.value || N.value)), j = l(() => k.value && !N.value), M = l(() => String(D.size)), N = l(() => M.value === "sm" || M.value === "200"), P = l(() => c[M.value]), F = l(() => ["d-empty-state", P.value]), I = l(() => a[M.value]), L = l(() => s[M.value]), R = l(() => o[M.value]), z = l(() => i[M.value]), B = l(() => r[M.value]);
+		return g(() => {
+			!D.bodyText && !e(E.body) && console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
+		}), (e, r) => (_(), u(b(n), { class: h(F.value) }, {
+			default: S(() => [
+				j.value ? (_(), f("span", C, [v(e.$slots, "illustration")])) : d("", !0),
+				A.value ? (_(), f("span", w, [v(e.$slots, "icon", { iconSize: "800" })])) : d("", !0),
+				m(b(n), {
+					gap: "150",
+					class: h(["d-empty-state__content", I.value])
 				}, {
-					default: y(() => [u("div", { class: f(["d-empty-state__header-text", N.value]) }, g(S.headerText), 3), S.bodyText ? (m(), l("p", {
+					default: S(() => [m(b(t), {
+						kind: "headline",
+						size: L.value,
+						density: R.value,
+						wrap: "balance",
+						as: "div",
+						class: "d-empty-state__header-text"
+					}, {
+						default: S(() => [p(y(T.headerText), 1)]),
+						_: 1
+					}, 8, ["size", "density"]), T.bodyText ? (_(), u(b(t), {
 						key: 0,
-						class: f(["d-empty-state__body-text", P.value])
-					}, g(S.bodyText), 3)) : c("", !0)]),
+						kind: "body",
+						size: z.value,
+						density: B.value,
+						tone: "secondary",
+						wrap: "balance",
+						as: "p",
+						class: "d-empty-state__body-text"
+					}, {
+						default: S(() => [p(y(T.bodyText), 1)]),
+						_: 1
+					}, 8, ["size", "density"])) : d("", !0)]),
 					_: 1
 				}, 8, ["class"]),
-				h(e.$slots, "body")
+				v(e.$slots, "body")
 			]),
 			_: 3
 		}, 8, ["class"]));
 	}
-};
+});
 //#endregion
-export { S as default };
+export { T as default };
 //# sourceMappingURL=empty-state.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"empty-state.js","names":[],"sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n class=\"d-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\"\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=\"~~450~~\"\n :class=\"['d-empty-state__content', contentClass]\"\n >\n <div :class=\"['d-empty-state__header-text~~', headlineClass]~~\">\n {{ headerText }}\n </~~div~~>\n\n <p\n v-if=\"bodyText\"\n :class=\"['d-empty-state__body-text~~', bodyClass]~~\"\n >\n {{ bodyText }}\n </p>\n </dt-stack>\n\n <slot name=\"body\" />\n </dt-stack>\n</template>\n\n<script setup>\nimport { useSlots, computed, onMounted } from 'vue';\nimport { DtStack } from '@/components/stack';\nimport { hasSlotContent } from '@/common/utils';\nimport {\n ~~EMPTY_STATE_BODY_SIZE_MODIFIERS~~,\n EMPTY_STATE_CONTENT_SIZE_MODIFIERS,\n ~~EMPTY_STATE_HEADLINE_SIZE_MODIFIERS~~,\n EMPTY_STATE_SIZE_MODIFIERS,\n} from './empty_state_constants.js';\n\nconst slots = useSlots();\n\nconst props = defineProps({\n /*\n The empty state size.\n * @values ~~'sm'~~, ~~'md'~~, ~~'lg'~~\n /\n size: {\n type: String,\n default: ~~'lg'~~,\n validator: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(s),\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\nconst hasIcon = computed(() => {\n return hasSlotContent(slots.icon);\n});\nconst hasIllustration = computed(() => hasSlotContent(slots.illustration));\~~nconst isSmallSize = computed(() => props.size === 'sm');\~~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 sizeClass = computed(() => EMPTY_STATE_SIZE_MODIFIERS[~~props~~.~~size~~]);\n\nconst emptyStateClasses = computed(() => ['d-empty-state', sizeClass.value]);\n\nconst contentClass = computed(() => EMPTY_STATE_CONTENT_SIZE_MODIFIERS[~~props~~.~~size~~]);\n\nconst ~~headlineClass~~ = computed(() => ~~EMPTY_STATE_HEADLINE_SIZE_MODIFIERS~~[~~props~~.~~size~~]);\n\nconst ~~bodyClass~~ = computed(() => ~~EMPTY_STATE_BODY_SIZE_MODIFIERS~~[~~props~~.~~size~~]);\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":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsDA~~,IAAM,IAAQ,GAAU,EAElB,IAAQ,GA8BR,IAAU,QACP,EAAe,EAAM,KAAK,CACjC,EACI,IAAkB,QAAe,EAAe,EAAM,aAAa,CAAC,~~EACpE~~,~~IAAc,QAAe,EAAM,SAAS,KAAK,EAMjD,~~IAAW,QAAe,EAAQ,UAAU,CAAC,EAAgB,SAAS,EAAY,OAAO,EAMzF,IAAmB,QAAe,EAAgB,SAAS,CAAC,EAAY,MAAM,EAE9E,~~IAAY~~,QAAe,~~EAA2B~~,EAAM,MAAM,~~EAElE~~,IAAoB,QAAe,CAAC,iBAAiB,EAAU,MAAM,CAAC,EAEtE,IAAe,QAAe,EAAmC,~~EAAM~~,~~MAAM~~,~~EAE7E~~,~~IAAgB~~,QAAe,~~EAAoC~~,~~EAAM~~,~~MAAM~~,EAE/E,~~IAAY~~,QAAe,~~EAAgC~~,~~EAAM~~,~~MAAM~~;SAE7E,QAAgB;AACd,GAAI,CAAC,EAAM,YAAY,CAAC,EAAe,EAAM,KAAK,IAChD,QAAQ,MAAM,4EAA4E;IAE5F,~~kBArHA~~,~~EAuCW~~,EAAA,EAAA,EAAA,~~EAtCR~~,OAAK,EAAE,EAAA,MAAiB,EAAA,EAAA;oBAQlB;IALC,EAAA,SAAA,GAAA,EADR,EAMO,QANP,GAMO,CADL,EAA4B,EAAA,QAAA,eAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAItB,EAAA,SAAA,GAAA,EADR,EASO,QATP,GASO,CAJL,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,OAAK,CAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAIrB,~~EAcW~~,EAAA,EAAA,EAAA;~~KAbT~~,KAAI;KACH,OAAK,EAAA,CAAA,0BAA6B,EAAA,MAAY,CAAA;;~~sBAIzC~~,~~CAFN~~,~~EAEM~~,~~OAAA~~,~~EAFA~~,~~OAAK,~~EAAA,~~CAAA~~,~~8BAAiC~~,EAAA,~~MAAa~~,CAAA,EAAA,~~EAAA~~,~~EACpD,~~EAAA,WAAU,EAAA,EAAA,~~EAIP~~,EAAA,YAAA,GAAA,EADR,~~EAKI~~,~~KAAA;;MAHD~~,~~OAAK~~,EAAA,~~CAAA~~,~~4BAA+B~~,EAAA,~~MAAS~~,~~CAAA~~;~~UAE3C~~,~~EAAA~~,~~SAAQ~~,EAAA,EAAA,~~IAAA~~,EAAA,~~IAAA~~,~~GAAA,~~CAAA,CAAA~~;;;~~IAIf,EAAoB,EAAA,QAAA,OAAA"}
1	+ {"version":3,"file":"empty-state.js","names":[],"sources":["../../../components/empty_state/empty_state.vue"],"sourcesContent":["<template>\n <dt-stack\n :class=\"emptyStateClasses\"\n >\n <span\n v-if=\"showIllustration\"\n class=\"d-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\"\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 <slot name=\"body\" />\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 {\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 './empty_state_constants.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: (s) => Object.keys(EMPTY_STATE_SIZE_MODIFIERS).includes(String(s)),\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\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0EA,IAAM,IAAQ,GAAU,EAElB,IAAQ,GA8BR,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,kBA7IA,EAoDW,EAAA,EAAA,EAAA,EAnDR,OAAK,EAAE,EAAA,MAAiB,EAAA,EAAA;oBAQlB;IALC,EAAA,SAAA,GAAA,EADR,EAMO,QANP,GAMO,CADL,EAA4B,EAAA,QAAA,eAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;IAItB,EAAA,SAAA,GAAA,EADR,EASO,QATP,GASO,CAJL,EAGE,EAAA,QAAA,QAAA,EADC,UAAW,OAAK,CAAA,CAAA,CAAA,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;;;;;IAIf,EAAoB,EAAA,QAAA,OAAA"}

package/dist/lib/feed-item-pill/feed-item-pill.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(`../../localization/index.cjs`),n=require(`../collapsible/collapsible.cjs`),r=require(`../item-layout/item-layout.cjs`),i=require(`./feed-item-pill-constants.cjs`);let a=require(`vue`),o=require(`@dialpad/dialtone-icons/vue3`);var s={compatConfig:{MODE:3},name:`DtRecipeFeedItemPill`,components:{DtItemLayout:r.default,DtCollapsible:n.default},props:{title:{type:String,default:()=>``},wrapperClass:{type:[String,Array,Object],default:``},buttonClass:{type:[String,Array,Object],default:``},toggleable:{type:Boolean,default:()=>!0},defaultToggled:{type:Boolean,default:()=>!1},borderColor:{type:String,default:`default`,validator:e=>Object.keys(i.FEED_ITEM_PILL_BORDER_COLORS).includes(e)}},data(){return{hover:!1,expanded:this.defaultToggled,i18n:new t.DialtoneLocalization}},computed:{toggleIcon(){return this.expanded?o.DtIconChevronDown:o.DtIconChevronRight},showChevronIcon(){return this.toggleable&&this.hover},toggleableClass(){return this.toggleable?`d-recipe-feed-item-pill--toggleable`:``},borderClass(){return i.FEED_ITEM_PILL_BORDER_COLORS[this.borderColor]},anchorTitle(){return this.i18n.$t(`DIALTONE_FEED_ITEM_PILL_ARIA_LABEL`)}},methods:{onClick(){this.toggleable&&(this.expanded=!this.expanded)}}},c={class:`d-recipe-feed-item-pill__wrapper`},l=[`aria-label`,`title`],u={class:`d-recipe-feed-item-pill__title`},d={class:`d-recipe-feed-item-pill__icon`,"data-qa":`dt-recipe-feed-item-pill__icon`},f={class:`d-recipe-feed-item-pill__subtitle`},p={class:`d-recipe-feed-item-pill__bottom`},m={class:`d-recipe-feed-item-pill__right`},h={class:`d-recipe-feed-item-pill__content`};function g(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-item-layout`),g=(0,a.resolveComponent)(`dt-collapsible`);return(0,a.openBlock)(),(0,a.createElementBlock)(`div`,{class:(0,a.normalizeClass)([`d-recipe-feed-item-pill__border`,o.borderClass,n.wrapperClass])},[(0,a.createElementVNode)(`div`,c,[(0,a.createVNode)(g,{open:i.expanded},(0,a.createSlots)({anchor:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`button`,{"data-qa":`dt-recipe-feed-item-pill`,class:(0,a.normalizeClass)([`d-recipe-feed-item-pill__button`,o.toggleableClass,n.buttonClass]),"aria-label":o.anchorTitle,title:o.anchorTitle,onFocusin:t[0]||(t[0]=e=>i.hover=!0),onFocusout:t[1]||(t[1]=e=>i.hover=!1),onMouseenter:t[2]||(t[2]=e=>i.hover=!0),onMouseleave:t[3]||(t[3]=e=>i.hover=!1),onClick:t[4]||(t[4]=(...e)=>o.onClick&&o.onClick(...e))},[(0,a.createVNode)(s,{class:`d-recipe-feed-item-pill__layout`,unstyled:``},(0,a.createSlots)({left:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,d,[o.showChevronIcon?((0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(o.toggleIcon),{key:0,size:`300`})):(0,a.renderSlot)(e.$slots,`leftIcon`,{key:1,iconSize:`300`})])]),default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`title`,{},()=>[(0,a.createElementVNode)(`span`,u,(0,a.toDisplayString)(n.title),1)])]),_:2},[e.$slots.subtitle?{name:`subtitle`,fn:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,f,[(0,a.renderSlot)(e.$slots,`subtitle`)])]),key:`0`}:void 0,e.$slots.bottom?{name:`bottom`,fn:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,p,[(0,a.renderSlot)(e.$slots,`bottom`)])]),key:`1`}:void 0,e.$slots.right?{name:`right`,fn:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,m,[(0,a.renderSlot)(e.$slots,`right`)])]),key:`2`}:void 0]),1024)],42,l)]),_:2},[e.$slots.content?{name:`content`,fn:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,h,[(0,a.renderSlot)(e.$slots,`content`)])]),key:`0`}:void 0]),1032,[`open`])])],2)}var _=e.t(s,[[`render`,g]]);exports.default=_;
+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(`../../localization/index.cjs`),n=require(`../collapsible/collapsible.cjs`),r=require(`../item-layout/item-layout.cjs`),i=require(`./feed-item-pill-constants.cjs`);let a=require(`vue`),o=require(`@dialpad/dialtone-icons/vue`);var s={compatConfig:{MODE:3},name:`DtRecipeFeedItemPill`,components:{DtItemLayout:r.default,DtCollapsible:n.default},props:{title:{type:String,default:()=>``},buttonClass:{type:[String,Array,Object],default:``},toggleable:{type:Boolean,default:()=>!0},defaultToggled:{type:Boolean,default:()=>!1},borderColor:{type:String,default:`default`,validator:e=>Object.keys(i.FEED_ITEM_PILL_BORDER_COLORS).includes(e)}},data(){return{hover:!1,expanded:this.defaultToggled,i18n:new t.DialtoneLocalization}},computed:{toggleIcon(){return this.expanded?o.DtIconChevronDown:o.DtIconChevronRight},showChevronIcon(){return this.toggleable&&this.hover},toggleableClass(){return this.toggleable?`d-recipe-feed-item-pill--toggleable`:``},borderClass(){return i.FEED_ITEM_PILL_BORDER_COLORS[this.borderColor]},anchorTitle(){return this.i18n.$t(`DIALTONE_FEED_ITEM_PILL_ARIA_LABEL`)}},methods:{onClick(){this.toggleable&&(this.expanded=!this.expanded)}}},c={class:`d-recipe-feed-item-pill__wrapper`},l=[`aria-label`,`title`],u={class:`d-recipe-feed-item-pill__title`},d={class:`d-recipe-feed-item-pill__icon`,"data-qa":`dt-recipe-feed-item-pill__icon`},f={class:`d-recipe-feed-item-pill__subtitle`},p={class:`d-recipe-feed-item-pill__bottom`},m={class:`d-recipe-feed-item-pill__right`},h={class:`d-recipe-feed-item-pill__content`};function g(e,t,n,r,i,o){let s=(0,a.resolveComponent)(`dt-item-layout`),g=(0,a.resolveComponent)(`dt-collapsible`);return(0,a.openBlock)(),(0,a.createElementBlock)(`div`,{class:(0,a.normalizeClass)([`d-recipe-feed-item-pill__border`,o.borderClass,e.$attrs.class]),style:(0,a.normalizeStyle)(e.$attrs.style)},[(0,a.createElementVNode)(`div`,c,[(0,a.createVNode)(g,{open:i.expanded},(0,a.createSlots)({anchor:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`button`,{"data-qa":`dt-recipe-feed-item-pill`,class:(0,a.normalizeClass)([`d-recipe-feed-item-pill__button`,o.toggleableClass,n.buttonClass]),"aria-label":o.anchorTitle,title:o.anchorTitle,onFocusin:t[0]||(t[0]=e=>i.hover=!0),onFocusout:t[1]||(t[1]=e=>i.hover=!1),onMouseenter:t[2]||(t[2]=e=>i.hover=!0),onMouseleave:t[3]||(t[3]=e=>i.hover=!1),onClick:t[4]||(t[4]=(...e)=>o.onClick&&o.onClick(...e))},[(0,a.createVNode)(s,{class:`d-recipe-feed-item-pill__layout`,unstyled:``},(0,a.createSlots)({start:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,d,[o.showChevronIcon?((0,a.openBlock)(),(0,a.createBlock)((0,a.resolveDynamicComponent)(o.toggleIcon),{key:0,size:`300`})):e.$slots.startIcon?(0,a.renderSlot)(e.$slots,`startIcon`,{key:1,iconSize:`300`}):(0,a.renderSlot)(e.$slots,`leftIcon`,{key:2,iconSize:`300`})])]),default:(0,a.withCtx)(()=>[(0,a.renderSlot)(e.$slots,`title`,{},()=>[(0,a.createElementVNode)(`span`,u,(0,a.toDisplayString)(n.title),1)])]),_:2},[e.$slots.subtitle?{name:`subtitle`,fn:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,f,[(0,a.renderSlot)(e.$slots,`subtitle`)])]),key:`0`}:void 0,e.$slots.blockEnd||e.$slots.bottom?{name:`blockEnd`,fn:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,p,[e.$slots.blockEnd?(0,a.renderSlot)(e.$slots,`blockEnd`,{key:0}):(0,a.renderSlot)(e.$slots,`bottom`,{key:1})])]),key:`1`}:void 0,e.$slots.end||e.$slots.right?{name:`end`,fn:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,m,[e.$slots.end?(0,a.renderSlot)(e.$slots,`end`,{key:0}):(0,a.renderSlot)(e.$slots,`right`,{key:1})])]),key:`2`}:void 0]),1024)],42,l)]),_:2},[e.$slots.content?{name:`content`,fn:(0,a.withCtx)(()=>[(0,a.createElementVNode)(`div`,h,[(0,a.renderSlot)(e.$slots,`content`)])]),key:`0`}:void 0]),1032,[`open`])])],6)}var _=e.t(s,[[`render`,g]]);exports.default=_;
 //# sourceMappingURL=feed-item-pill.cjs.map

package/dist/lib/feed-item-pill/feed-item-pill.cjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-pill.cjs","names":[],"sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n <div :class=\"['d-recipe-feed-item-pill__border', borderClass, ~~wrapperClass~~]\">\n <div class=\"d-recipe-feed-item-pill__wrapper\">\n <dt-collapsible :open=\"expanded\">\n <template #anchor>\n <button\n data-qa=\"dt-recipe-feed-item-pill\"\n :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n :aria-label=\"anchorTitle\"\n :title=\"anchorTitle\"\n @focusin=\"hover = true\"\n @focusout=\"hover = false\"\n @mouseenter=\"hover = true\"\n @mouseleave=\"hover = false\"\n @click=\"onClick\"\n >\n <dt-item-layout\n class=\"d-recipe-feed-item-pill__layout\"\n unstyled\n >\n <slot name=\"title\">\n <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n </slot>\n <template #~~left~~>\n <div\n class=\"d-recipe-feed-item-pill__icon\"\n data-qa=\"dt-recipe-feed-item-pill__icon\"\n >\n <component\n :is=\"toggleIcon\"\n v-if=\"showChevronIcon\"\n size=\"300\"\n />\n <!-- @slot Slot for ~~left~~ icon, icon-size slot prop defaults to '300' -->\n <slot\n v-else\n name=\"leftIcon\"\n :icon-size=\"'300'\"\n />\n </div>\n </template>\n <template\n v-if=\"$slots.subtitle\"\n #subtitle\n >\n <div class=\"d-recipe-feed-item-pill__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n </template>\n <template\n v-if=\"$slots.bottom\"\n #~~bottom~~\n >\n <div class=\"d-recipe-feed-item-pill__bottom\">\n <slot name=\"bottom\" />\n </div>\n </template>\n <template\n v-if=\"$slots.right\"\n #~~right~~\n >\n <div class=\"d-recipe-feed-item-pill__right\">\n <slot name=\"right\" />\n </div>\n </template>\n </dt-item-layout>\n </button>\n </template>\n <template\n v-if=\"$slots.content\"\n #content\n >\n <div class=\"d-recipe-feed-item-pill__content\">\n <slot name=\"content\" />\n </div>\n </template>\n </dt-collapsible>\n </div>\n </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/~~vue3~~';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeFeedItemPill',\n\n components: { DtItemLayout, DtCollapsible },\n\n props: {\n /*\n Bolded primary text\n /\n title: {\n type: String,\n default: () => '',\n },\n\n /\n Additional styling ~~around the pill\n /\n wrapperClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional styling~~ for the pill\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n /\n toggleable: {\n type: Boolean,\n default: () => true,\n },\n\n defaultToggled: {\n type: Boolean,\n default: () => false,\n },\n\n /\n Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n },\n },\n\n data () {\n return {\n hover: false,\n expanded: this.defaultToggled,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n toggleIcon () {\n return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n },\n\n showChevronIcon () {\n return this.toggleable && this.hover;\n },\n\n toggleableClass () {\n return this.toggleable ? 'd-recipe-feed-item-pill--toggleable' : '';\n },\n\n borderClass () {\n return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n },\n\n anchorTitle () {\n return this.i18n.$t('DIALTONE_FEED_ITEM_PILL_ARIA_LABEL');\n },\n },\n\n methods: {\n onClick () {\n if (!this.toggleable) return;\n\n this.expanded = !this.expanded;\n },\n },\n};\n</script>\n"],"mappings":"~~gbAwFA~~,IAAK,EAAU,CACb,aAAc,CAAE,KAAM,EAAG,CACzB,KAAM,uBAEN,WAAY,CAAE,aAAA,EAAA,QAAc,cAAA,EAAA,QAAe,CAE3C,MAAO,CAIL,MAAO,CACL,KAAM,OACN,YAAe,GAChB,CAKD,~~aAAc,CACZ,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,~~YAAa,CACX,KAAM,CAAC,OAAQ,MAAO,OAAO,CAC7B,QAAS,GACV,CAKD,WAAY,CACV,KAAM,QACN,YAAe,GAChB,CAED,eAAgB,CACd,KAAM,QACN,YAAe,GAChB,CAMD,YAAa,CACX,KAAM,OACN,QAAS,UACT,UAAY,GAAU,OAAO,KAAK,EAAA,6BAA6B,CAAC,SAAS,EAAM,CAChF,CACF,CAED,MAAQ,CACN,MAAO,CACL,MAAO,GACP,SAAU,KAAK,eACf,KAAM,IAAI,EAAA,qBACX,EAGH,SAAU,CACR,YAAc,CACZ,OAAO,KAAK,SAAW,EAAA,kBAAoB,EAAA,oBAG7C,iBAAmB,CACjB,OAAO,KAAK,YAAc,KAAK,OAGjC,iBAAmB,CACjB,OAAO,KAAK,WAAa,sCAAwC,IAGnE,aAAe,CACb,OAAO,EAAA,6BAA6B,KAAK,cAG3C,aAAe,CACb,OAAO,KAAK,KAAK,GAAG,qCAAqC,EAE5D,CAED,QAAS,CACP,SAAW,CACJ,KAAK,aAEV,KAAK,SAAW,CAAC,KAAK,WAEzB,CACF,~~IAlLQ~~,MAAM,mCAAkC,6BAmB3B,MAAM,iCAAgC,IAI1C,MAAM,gCACN,UAAQ,~~qCAmBL~~,MAAM,oCAAmC,IAQzC,MAAM,kCAAiC,~~IAQvC~~,MAAM,iCAAgC,~~IAW5C~~,MAAM,mCAAkC,oKAM/C,MAAA,~~CA7EA~~,OAAA,EAAA,EAAA,gBAAK,CAAA,kCAAsC,EAAA,YAAa,EAAA,~~aAAY~~,~~CAAA~~,CAAA,~~CAAA~~,EAAA,EAAA,EAAA,~~oBA4ElE~~,~~MA3EN~~,~~EA2EM~~,EAAA,EAAA,EAAA,aADa,EAAA,~~CAzEA~~,KAAM,EAAA,SAAQ,EAAA,EAAA,EAAA,aAAA,CAClB,QAAA,EAAA,EAAA,~~aA8DA~~,EAAA,EAAA,EAAA,oBAAA,SAAA,~~CA5DP~~,UAAQ,2BACP,OAAA,EAAA,EAAA,gBAAK,CAAA,kCAAsC,EAAA,gBAAiB,EAAA,YAAW,CAAA,CACvE,aAAY,EAAA,YACZ,MAAO,EAAA,YACP,UAAO,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,IACd,WAAQ,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,IACf,aAAU,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,IACjB,aAAU,EAAA,KAAA,EAAA,GAAA,GAAE,EAAA,MAAK,IACjB,QAAK,EAAA,KAAA,EAAA,IAAA,GAAA,IAAE,EAAA,SAAA,EAAA,QAAA,GAAA,EAAO,~~sBAmDE~~,EAAA,~~CAhDf~~,MAAM,kCACN,SAAA,uBAKW,~~MAAA~~,EAAA,EAAA,~~aAgBH~~,EAAA,EAAA,EAAA,oBAAA,~~MAfN~~,~~EAeM~~,~~CATI~~,EAAA,kBAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,yBADD,EAAA,WAAU,CAAA,OAEf,KAAK,~~0BAOL~~,EAAA,OAAA,WAAA,OADC,SAAW,~~sCAfX~~,EAAA,EAAA,EAAA,YAAA,EAAA,OAAA,QAAA,EAAA,KAAA,EAAA,EAAA,EAAA,oBAD0D,OAA/D,GAAA,EAAA,EAAA,iBAAgD,EAAA,MAAK,CAAA,EAAA,CAAA,CAAA,CAAA,CAAA,~~OAqB~~/C,EAAA,OAAO,SAAA,MACZ,gCAIK,EAAA,EAAA,EAAA,oBAAA,MAFN,EAEM,EAAA,EAAA,EAAA,YADoB,EAAA,OAAA,WAAA,CAAA,CAAA,CAAA,CAAA,iBAIpB,EAAA,OAAO,OAAA,~~MACZ~~,~~8BAIK~~,EAAA,EAAA,EAAA,oBAAA,~~MAFN~~,~~EAEM~~,EAAA,EAAA,EAAA,~~YADkB~~,EAAA,OAAA,SAAA,CAAA,CAAA,CAAA,CAAA,~~iBAIlB~~,EAAA,OAAO,MAAA,~~MACZ~~,~~6BAIK~~,EAAA,EAAA,EAAA,oBAAA,~~MAFN~~,~~EAEM~~,EAAA,EAAA,EAAA,~~YADiB~~,EAAA,OAAA,QAAA,CAAA,CAAA,CAAA,CAAA,~~wCAOvB~~,EAAA,OAAO,QAAA,MACZ,+BAIK,EAAA,EAAA,EAAA,oBAAA,MAFN,EAEM,EAAA,EAAA,EAAA,YADmB,EAAA,OAAA,UAAA,CAAA,CAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"feed-item-pill.cjs","names":[],"sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n <div\n :class=\"['d-recipe-feed-item-pill__border', borderClass, $attrs.class]\"\n :style=\"$attrs.style\"\n >\n <div class=\"d-recipe-feed-item-pill__wrapper\">\n <dt-collapsible :open=\"expanded\">\n <template #anchor>\n <button\n data-qa=\"dt-recipe-feed-item-pill\"\n :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n :aria-label=\"anchorTitle\"\n :title=\"anchorTitle\"\n @focusin=\"hover = true\"\n @focusout=\"hover = false\"\n @mouseenter=\"hover = true\"\n @mouseleave=\"hover = false\"\n @click=\"onClick\"\n >\n <dt-item-layout\n class=\"d-recipe-feed-item-pill__layout\"\n unstyled\n >\n <slot name=\"title\">\n <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n </slot>\n <template #start>\n <div\n class=\"d-recipe-feed-item-pill__icon\"\n data-qa=\"dt-recipe-feed-item-pill__icon\"\n >\n <component\n :is=\"toggleIcon\"\n v-if=\"showChevronIcon\"\n size=\"300\"\n />\n <!-- @slot Slot for start icon, icon-size slot prop defaults to '300' -->\n <slot\n v-else-if=\"$slots.startIcon\"\n name=\"startIcon\"\n :icon-size=\"'300'\"\n />\n <!-- @slot @deprecated Use startIcon -->\n <slot\n v-else\n name=\"leftIcon\"\n :icon-size=\"'300'\"\n />\n </div>\n </template>\n <template\n v-if=\"$slots.subtitle\"\n #subtitle\n >\n <div class=\"d-recipe-feed-item-pill__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n </template>\n <template\n v-if=\"$slots.blockEnd \|\| $slots.bottom\"\n #blockEnd\n >\n <div class=\"d-recipe-feed-item-pill__bottom\">\n <!-- @slot Slot for block-end content -->\n <slot\n v-if=\"$slots.blockEnd\"\n name=\"blockEnd\"\n />\n <!-- @slot @deprecated Use blockEnd -->\n <slot\n v-else\n name=\"bottom\"\n />\n </div>\n </template>\n <template\n v-if=\"$slots.end \|\| $slots.right\"\n #end\n >\n <div class=\"d-recipe-feed-item-pill__right\">\n <!-- @slot Slot for end content -->\n <slot\n v-if=\"$slots.end\"\n name=\"end\"\n />\n <!-- @slot @deprecated Use end -->\n <slot\n v-else\n name=\"right\"\n />\n </div>\n </template>\n </dt-item-layout>\n </button>\n </template>\n <template\n v-if=\"$slots.content\"\n #content\n >\n <div class=\"d-recipe-feed-item-pill__content\">\n <slot name=\"content\" />\n </div>\n </template>\n </dt-collapsible>\n </div>\n </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeFeedItemPill',\n\n components: { DtItemLayout, DtCollapsible },\n\n props: {\n /*\n Bolded primary text\n /\n title: {\n type: String,\n default: () => '',\n },\n\n /\n Additional styling for the pill\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n /\n toggleable: {\n type: Boolean,\n default: () => true,\n },\n\n defaultToggled: {\n type: Boolean,\n default: () => false,\n },\n\n /\n Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n },\n },\n\n data () {\n return {\n hover: false,\n expanded: this.defaultToggled,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n toggleIcon () {\n return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n },\n\n showChevronIcon () {\n return this.toggleable && this.hover;\n },\n\n toggleableClass () {\n return this.toggleable ? 'd-recipe-feed-item-pill--toggleable' : '';\n },\n\n borderClass () {\n return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n },\n\n anchorTitle () {\n return this.i18n.$t('DIALTONE_FEED_ITEM_PILL_ARIA_LABEL');\n },\n },\n\n methods: {\n onClick () {\n if (!this.toggleable) return;\n\n this.expanded = !this.expanded;\n },\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/feed-item-pill/feed-item-pill.js CHANGED Viewed

@@ -3,10 +3,10 @@ import { DialtoneLocalization as t } from "../../localization/index.js";
 import n from "../collapsible/collapsible.js";
 import r from "../item-layout/item-layout.js";
 import { FEED_ITEM_PILL_BORDER_COLORS as i } from "./feed-item-pill-constants.js";
-import { createBlock as a, createElementBlock as o, createElementVNode as s, createSlots as c, createVNode as l, normalizeClass as u, openBlock as d, renderSlot as f, resolveComponent as p, resolveDynamicComponent as m, toDisplayString as h, withCtx as g } from "vue";
-import { DtIconChevronDown as _, DtIconChevronRight as v } from "@dialpad/dialtone-icons/vue3";
+import { createBlock as a, createElementBlock as o, createElementVNode as s, createSlots as c, createVNode as l, normalizeClass as u, normalizeStyle as d, openBlock as f, renderSlot as p, resolveComponent as m, resolveDynamicComponent as h, toDisplayString as g, withCtx as _ } from "vue";
+import { DtIconChevronDown as v, DtIconChevronRight as y } from "@dialpad/dialtone-icons/vue";
 //#region recipes/conversation_view/feed_item_pill/feed_item_pill.vue
-var y = {
+var b = {
 	compatConfig: { MODE: 3 },
 	name: "DtRecipeFeedItemPill",
 	components: {
@@ -18,14 +18,6 @@ var y = {
 			type: String,
 			default: () => ""
 		},
-		wrapperClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
 		buttonClass: {
 			type: [
 				String,
@@ -57,7 +49,7 @@ var y = {
 	},
 	computed: {
 		toggleIcon() {
-			return this.expanded ? _ : v;
+			return this.expanded ? v : y;
 		},
 		showChevronIcon() {
 			return this.toggleable && this.hover;
@@ -75,70 +67,76 @@ var y = {
 	methods: { onClick() {
 		this.toggleable && (this.expanded = !this.expanded);
 	} }
-}, b = { class: "d-recipe-feed-item-pill__wrapper" }, x = ["aria-label", "title"], S = { class: "d-recipe-feed-item-pill__title" }, C = {
+}, x = { class: "d-recipe-feed-item-pill__wrapper" }, S = ["aria-label", "title"], C = { class: "d-recipe-feed-item-pill__title" }, w = {
 	class: "d-recipe-feed-item-pill__icon",
 	"data-qa": "dt-recipe-feed-item-pill__icon"
-}, w = { class: "d-recipe-feed-item-pill__subtitle" }, T = { class: "d-recipe-feed-item-pill__bottom" }, E = { class: "d-recipe-feed-item-pill__right" }, D = { class: "d-recipe-feed-item-pill__content" };
-function O(e, t, n, r, i, _) {
-	let v = p("dt-item-layout"), y = p("dt-collapsible");
-	return d(), o("div", { class: u([
-		"d-recipe-feed-item-pill__border",
-		_.borderClass,
-		n.wrapperClass
-	]) }, [s("div", b, [l(y, { open: i.expanded }, c({
-		anchor: g(() => [s("button", {
+}, T = { class: "d-recipe-feed-item-pill__subtitle" }, E = { class: "d-recipe-feed-item-pill__bottom" }, D = { class: "d-recipe-feed-item-pill__right" }, O = { class: "d-recipe-feed-item-pill__content" };
+function k(e, t, n, r, i, v) {
+	let y = m("dt-item-layout"), b = m("dt-collapsible");
+	return f(), o("div", {
+		class: u([
+			"d-recipe-feed-item-pill__border",
+			v.borderClass,
+			e.$attrs.class
+		]),
+		style: d(e.$attrs.style)
+	}, [s("div", x, [l(b, { open: i.expanded }, c({
+		anchor: _(() => [s("button", {
 			"data-qa": "dt-recipe-feed-item-pill",
 			class: u([
 				"d-recipe-feed-item-pill__button",
-				_.toggleableClass,
+				v.toggleableClass,
 				n.buttonClass
 			]),
-			"aria-label": _.anchorTitle,
-			title: _.anchorTitle,
+			"aria-label": v.anchorTitle,
+			title: v.anchorTitle,
 			onFocusin: t[0] || (t[0] = (e) => i.hover = !0),
 			onFocusout: t[1] || (t[1] = (e) => i.hover = !1),
 			onMouseenter: t[2] || (t[2] = (e) => i.hover = !0),
 			onMouseleave: t[3] || (t[3] = (e) => i.hover = !1),
-			onClick: t[4] || (t[4] = (...e) => _.onClick && _.onClick(...e))
-		}, [l(v, {
+			onClick: t[4] || (t[4] = (...e) => v.onClick && v.onClick(...e))
+		}, [l(y, {
 			class: "d-recipe-feed-item-pill__layout",
 			unstyled: ""
 		}, c({
-			left: g(() => [s("div", C, [_.showChevronIcon ? (d(), a(m(_.toggleIcon), {
+			start: _(() => [s("div", w, [v.showChevronIcon ? (f(), a(h(v.toggleIcon), {
 				key: 0,
 				size: "300"
-			})) : f(e.$slots, "leftIcon", {
+			})) : e.$slots.startIcon ? p(e.$slots, "startIcon", {
 				key: 1,
 				iconSize: "300"
+			}) : p(e.$slots, "leftIcon", {
+				key: 2,
+				iconSize: "300"
 			})])]),
-			default: g(() => [f(e.$slots, "title", {}, () => [s("span", S, h(n.title), 1)])]),
+			default: _(() => [p(e.$slots, "title", {}, () => [s("span", C, g(n.title), 1)])]),
 			_: 2
 		}, [
 			e.$slots.subtitle ? {
 				name: "subtitle",
-				fn: g(() => [s("div", w, [f(e.$slots, "subtitle")])]),
+				fn: _(() => [s("div", T, [p(e.$slots, "subtitle")])]),
 				key: "0"
 			} : void 0,
-			e.$slots.bottom ? {
-				name: "bottom",
-				fn: g(() => [s("div", T, [f(e.$slots, "bottom")])]),
+			e.$slots.blockEnd || e.$slots.bottom ? {
+				name: "blockEnd",
+				fn: _(() => [s("div", E, [e.$slots.blockEnd ? p(e.$slots, "blockEnd", { key: 0 }) : p(e.$slots, "bottom", { key: 1 })])]),
 				key: "1"
 			} : void 0,
-			e.$slots.right ? {
-				name: "right",
-				fn: g(() => [s("div", E, [f(e.$slots, "right")])]),
+			e.$slots.end || e.$slots.right ? {
+				name: "end",
+				fn: _(() => [s("div", D, [e.$slots.end ? p(e.$slots, "end", { key: 0 }) : p(e.$slots, "right", { key: 1 })])]),
 				key: "2"
 			} : void 0
-		]), 1024)], 42, x)]),
+		]), 1024)], 42, S)]),
 		_: 2
 	}, [e.$slots.content ? {
 		name: "content",
-		fn: g(() => [s("div", D, [f(e.$slots, "content")])]),
+		fn: _(() => [s("div", O, [p(e.$slots, "content")])]),
 		key: "0"
-	} : void 0]), 1032, ["open"])])], 2);
+	} : void 0]), 1032, ["open"])])], 6);
 }
-var k = /* @__PURE__ */ e(y, [["render", O]]);
+var A = /* @__PURE__ */ e(b, [["render", k]]);
 //#endregion
-export { k as default };
+export { A as default };
 //# sourceMappingURL=feed-item-pill.js.map

package/dist/lib/feed-item-pill/feed-item-pill.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-pill.js","names":[],"sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n <div :class=\"['d-recipe-feed-item-pill__border', borderClass, ~~wrapperClass~~]\">\n <div class=\"d-recipe-feed-item-pill__wrapper\">\n <dt-collapsible :open=\"expanded\">\n <template #anchor>\n <button\n data-qa=\"dt-recipe-feed-item-pill\"\n :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n :aria-label=\"anchorTitle\"\n :title=\"anchorTitle\"\n @focusin=\"hover = true\"\n @focusout=\"hover = false\"\n @mouseenter=\"hover = true\"\n @mouseleave=\"hover = false\"\n @click=\"onClick\"\n >\n <dt-item-layout\n class=\"d-recipe-feed-item-pill__layout\"\n unstyled\n >\n <slot name=\"title\">\n <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n </slot>\n <template #~~left~~>\n <div\n class=\"d-recipe-feed-item-pill__icon\"\n data-qa=\"dt-recipe-feed-item-pill__icon\"\n >\n <component\n :is=\"toggleIcon\"\n v-if=\"showChevronIcon\"\n size=\"300\"\n />\n <!-- @slot Slot for ~~left~~ icon, icon-size slot prop defaults to '300' -->\n <slot\n v-else\n name=\"leftIcon\"\n :icon-size=\"'300'\"\n />\n </div>\n </template>\n <template\n v-if=\"$slots.subtitle\"\n #subtitle\n >\n <div class=\"d-recipe-feed-item-pill__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n </template>\n <template\n v-if=\"$slots.bottom\"\n #~~bottom~~\n >\n <div class=\"d-recipe-feed-item-pill__bottom\">\n <slot name=\"bottom\" />\n </div>\n </template>\n <template\n v-if=\"$slots.right\"\n #~~right~~\n >\n <div class=\"d-recipe-feed-item-pill__right\">\n <slot name=\"right\" />\n </div>\n </template>\n </dt-item-layout>\n </button>\n </template>\n <template\n v-if=\"$slots.content\"\n #content\n >\n <div class=\"d-recipe-feed-item-pill__content\">\n <slot name=\"content\" />\n </div>\n </template>\n </dt-collapsible>\n </div>\n </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/~~vue3~~';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeFeedItemPill',\n\n components: { DtItemLayout, DtCollapsible },\n\n props: {\n /*\n Bolded primary text\n /\n title: {\n type: String,\n default: () => '',\n },\n\n /\n Additional styling ~~around the pill\n /\n wrapperClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Additional styling~~ for the pill\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n /\n toggleable: {\n type: Boolean,\n default: () => true,\n },\n\n defaultToggled: {\n type: Boolean,\n default: () => false,\n },\n\n /\n Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n },\n },\n\n data () {\n return {\n hover: false,\n expanded: this.defaultToggled,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n toggleIcon () {\n return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n },\n\n showChevronIcon () {\n return this.toggleable && this.hover;\n },\n\n toggleableClass () {\n return this.toggleable ? 'd-recipe-feed-item-pill--toggleable' : '';\n },\n\n borderClass () {\n return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n },\n\n anchorTitle () {\n return this.i18n.$t('DIALTONE_FEED_ITEM_PILL_ARIA_LABEL');\n },\n },\n\n methods: {\n onClick () {\n if (!this.toggleable) return;\n\n this.expanded = !this.expanded;\n },\n },\n};\n</script>\n"],"mappings":";;;;;;;;~~AAwFA~~,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EAAE,cAAA;EAAc,eAAA;EAAe;CAE3C,OAAO;EAIL,OAAO;GACL,MAAM;GACN,eAAe;GAChB;EAKD,~~cAAc;GACZ,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,~~aAAa;GACX,MAAM;IAAC;IAAQ;IAAO;IAAO;GAC7B,SAAS;GACV;EAKD,YAAY;GACV,MAAM;GACN,eAAe;GAChB;EAED,gBAAgB;GACd,MAAM;GACN,eAAe;GAChB;EAMD,aAAa;GACX,MAAM;GACN,SAAS;GACT,YAAY,MAAU,OAAO,KAAK,EAA6B,CAAC,SAAS,EAAM;GAChF;EACF;CAED,OAAQ;AACN,SAAO;GACL,OAAO;GACP,UAAU,KAAK;GACf,MAAM,IAAI,GAAsB;GACjC;;CAGH,UAAU;EACR,aAAc;AACZ,UAAO,KAAK,WAAW,IAAoB;;EAG7C,kBAAmB;AACjB,UAAO,KAAK,cAAc,KAAK;;EAGjC,kBAAmB;AACjB,UAAO,KAAK,aAAa,wCAAwC;;EAGnE,cAAe;AACb,UAAO,EAA6B,KAAK;;EAG3C,cAAe;AACb,UAAO,KAAK,KAAK,GAAG,qCAAqC;;EAE5D;CAED,SAAS,EACP,UAAW;AACJ,OAAK,eAEV,KAAK,WAAW,CAAC,KAAK;IAEzB;CACF,~~QAlLQ~~,OAAM,oCAAkC,qCAmB3B,OAAM,kCAAgC;CAI1C,OAAM;CACN,WAAQ;~~SAmBL~~,OAAM,qCAAmC,QAQzC,OAAM,mCAAiC,~~QAQvC~~,OAAM,kCAAgC,~~QAW5C~~,OAAM,oCAAkC;;;~~aAvErD~~,~~EA6EM~~,OAAA,~~EA7EA,~~OAAK,EAAA;~~EAAA~~;~~EAAsC~~,EAAA;~~EAAa~~,EAAA;~~EAAY~~,CAAA,~~EAAA~~,EAAA,~~CACxE~~,~~EA2EM~~,~~OA3EN~~,~~GA2EM~~,~~CA1EJ~~,~~EAyEiB~~,GAAA,~~EAzEA~~,MAAM,EAAA,UAAQ,EAAA,EAAA;EAClB,QAAM,~~QA8DN~~,~~CA7DT~~,~~EA6DS~~,UAAA;~~GA5DP~~,WAAQ;GACP,OAAK,EAAA;IAAA;IAAsC,EAAA;IAAiB,EAAA;IAAW,CAAA;GACvE,cAAY,EAAA;GACZ,OAAO,EAAA;GACP,WAAO,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,QAAK;GACd,YAAQ,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,QAAK;GACf,cAAU,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,QAAK;GACjB,cAAU,EAAA,OAAA,EAAA,MAAA,MAAE,EAAA,QAAK;GACjB,SAAK,EAAA,OAAA,EAAA,MAAA,GAAA,MAAE,EAAA,WAAA,EAAA,QAAA,GAAA,EAAO;MAEf,~~EAiDiB~~,GAAA;~~GAhDf~~,OAAM;GACN,UAAA;;GAKW,~~MAAI~~,~~QAgBP~~,~~CAfN~~,~~EAeM~~,~~OAfN~~,~~GAeM~~,~~CATI~~,EAAA,mBAAA,GAAA,EAFR,EAIE,EAHK,EAAA,WAAU,EAAA;;IAEf,MAAK;~~SAGP~~,EAIE,EAAA,QAAA,YAAA;;IADC,UAAW;;~~oBAfX~~,CAFP,EAEO,EAAA,QAAA,SAAA,EAAA,QAAA,CADL,EAA+D,QAA/D,GAA+D,EAAf,EAAA,MAAK,EAAA,EAAA,CAAA,CAAA,CAAA,CAAA;;;~~GAqB~~/C,EAAA,OAAO,WAAA;UACZ;gBAIK,CAFN,EAEM,OAFN,GAEM,CADJ,EAAwB,EAAA,QAAA,WAAA,CAAA,CAAA,CAAA,CAAA;;;GAIpB,EAAA,OAAO,SAAA;~~UACZ~~;~~gBAIK~~,~~CAFN~~,~~EAEM~~,~~OAFN~~,~~GAEM~~,~~CADJ~~,~~EAAsB~~,EAAA,QAAA,~~SAAA~~,CAAA,CAAA,CAAA,CAAA;;;~~GAIlB~~,EAAA,OAAO,QAAA;~~UACZ~~;~~gBAIK~~,~~CAFN~~,~~EAEM~~,~~OAFN~~,~~GAEM~~,~~CADJ~~,~~EAAqB~~,EAAA,QAAA,QAAA,CAAA,CAAA,CAAA,CAAA;;;;;~~KAOvB~~,EAAA,OAAO,UAAA;QACZ;cAIK,CAFN,EAEM,OAFN,GAEM,CADJ,EAAuB,EAAA,QAAA,UAAA,CAAA,CAAA,CAAA,CAAA"}
1	+ {"version":3,"file":"feed-item-pill.js","names":[],"sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill.vue"],"sourcesContent":["<template>\n <div\n :class=\"['d-recipe-feed-item-pill__border', borderClass, $attrs.class]\"\n :style=\"$attrs.style\"\n >\n <div class=\"d-recipe-feed-item-pill__wrapper\">\n <dt-collapsible :open=\"expanded\">\n <template #anchor>\n <button\n data-qa=\"dt-recipe-feed-item-pill\"\n :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\n :aria-label=\"anchorTitle\"\n :title=\"anchorTitle\"\n @focusin=\"hover = true\"\n @focusout=\"hover = false\"\n @mouseenter=\"hover = true\"\n @mouseleave=\"hover = false\"\n @click=\"onClick\"\n >\n <dt-item-layout\n class=\"d-recipe-feed-item-pill__layout\"\n unstyled\n >\n <slot name=\"title\">\n <span class=\"d-recipe-feed-item-pill__title\">{{ title }}</span>\n </slot>\n <template #start>\n <div\n class=\"d-recipe-feed-item-pill__icon\"\n data-qa=\"dt-recipe-feed-item-pill__icon\"\n >\n <component\n :is=\"toggleIcon\"\n v-if=\"showChevronIcon\"\n size=\"300\"\n />\n <!-- @slot Slot for start icon, icon-size slot prop defaults to '300' -->\n <slot\n v-else-if=\"$slots.startIcon\"\n name=\"startIcon\"\n :icon-size=\"'300'\"\n />\n <!-- @slot @deprecated Use startIcon -->\n <slot\n v-else\n name=\"leftIcon\"\n :icon-size=\"'300'\"\n />\n </div>\n </template>\n <template\n v-if=\"$slots.subtitle\"\n #subtitle\n >\n <div class=\"d-recipe-feed-item-pill__subtitle\">\n <slot name=\"subtitle\" />\n </div>\n </template>\n <template\n v-if=\"$slots.blockEnd \|\| $slots.bottom\"\n #blockEnd\n >\n <div class=\"d-recipe-feed-item-pill__bottom\">\n <!-- @slot Slot for block-end content -->\n <slot\n v-if=\"$slots.blockEnd\"\n name=\"blockEnd\"\n />\n <!-- @slot @deprecated Use blockEnd -->\n <slot\n v-else\n name=\"bottom\"\n />\n </div>\n </template>\n <template\n v-if=\"$slots.end \|\| $slots.right\"\n #end\n >\n <div class=\"d-recipe-feed-item-pill__right\">\n <!-- @slot Slot for end content -->\n <slot\n v-if=\"$slots.end\"\n name=\"end\"\n />\n <!-- @slot @deprecated Use end -->\n <slot\n v-else\n name=\"right\"\n />\n </div>\n </template>\n </dt-item-layout>\n </button>\n </template>\n <template\n v-if=\"$slots.content\"\n #content\n >\n <div class=\"d-recipe-feed-item-pill__content\">\n <slot name=\"content\" />\n </div>\n </template>\n </dt-collapsible>\n </div>\n </div>\n</template>\n\n<script>\nimport { FEED_ITEM_PILL_BORDER_COLORS } from './feed_item_pill_constants';\nimport { DtItemLayout } from '@/components/item_layout';\nimport { DtCollapsible } from '@/components/collapsible';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n compatConfig: { MODE: 3 },\n name: 'DtRecipeFeedItemPill',\n\n components: { DtItemLayout, DtCollapsible },\n\n props: {\n /*\n Bolded primary text\n /\n title: {\n type: String,\n default: () => '',\n },\n\n /\n Additional styling for the pill\n /\n buttonClass: {\n type: [String, Array, Object],\n default: '',\n },\n\n /\n Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)\n /\n toggleable: {\n type: Boolean,\n default: () => true,\n },\n\n defaultToggled: {\n type: Boolean,\n default: () => false,\n },\n\n /\n Callbox border color\n * @values default, ai, critical\n */\n borderColor: {\n type: String,\n default: 'default',\n validator: (color) => Object.keys(FEED_ITEM_PILL_BORDER_COLORS).includes(color),\n },\n },\n\n data () {\n return {\n hover: false,\n expanded: this.defaultToggled,\n i18n: new DialtoneLocalization(),\n };\n },\n\n computed: {\n toggleIcon () {\n return this.expanded ? DtIconChevronDown : DtIconChevronRight;\n },\n\n showChevronIcon () {\n return this.toggleable && this.hover;\n },\n\n toggleableClass () {\n return this.toggleable ? 'd-recipe-feed-item-pill--toggleable' : '';\n },\n\n borderClass () {\n return FEED_ITEM_PILL_BORDER_COLORS[this.borderColor];\n },\n\n anchorTitle () {\n return this.i18n.$t('DIALTONE_FEED_ITEM_PILL_ARIA_LABEL');\n },\n },\n\n methods: {\n onClick () {\n if (!this.toggleable) return;\n\n this.expanded = !this.expanded;\n },\n },\n};\n</script>\n"],"mappings":"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"}

package/dist/lib/feed-item-row/feed-item-row.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/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/modal.cjs`),r=require(`../avatar/avatar.cjs`),i=require(`../badge/badge.cjs`),a=require(`../lazy-show/lazy-show.cjs`),o=require(`../list-item/list-item.cjs`),s=require(`./feed-item-row-constants.cjs`);let c=require(`vue`),l=require(`@dialpad/dialtone-icons/vue3`);var u={compatConfig:{MODE:3},name:`DtRecipeFeedItemRow`,components:{DtAvatar:r.default,DtLazyShow:a.default,DtListItem:o.default,DtBadge:i.default,DtIconUser:l.DtIconUser},mixins:[n.default],inheritAttrs:!1,props:{avatarSeed:{type:String,default:null},showHeader:{type:Boolean,default:!1},avatarImageUrl:{type:String,default:``},displayName:{type:String,default:``},noInitials:{type:Boolean,default:!1},time:{type:String,default:``},shortTime:{type:String,default:``},labelText:{type:String,default:``},isActive:{type:Boolean,default:!1},state:{type:String,default:s.DEFAULT_FEED_ROW_STATE,validator:e=>Object.keys(s.FEED_ROW_STATE_BACKGROUND_COLOR).includes(e)}},emits:[`hover`,`focus`,`keydown`],data(){return{transitionActive:!1}},computed:{feedListeners(){return{mouseenter:()=>this.setHover(!0),mouseleave:()=>this.setHover(!1),focusin:()=>this.setFocus(!0),focusout:()=>this.setFocus(!1),transitionend:()=>this.transitionComplete(),keydown:e=>{switch(e.code){case`Tab`:this.trapFocus(e);break}this.$emit(`keydown`,e)}}},listItemClasses(){return[`d-recipe-feed-item-row`,{"d-recipe-feed-item-row--active":this.isActive&&this.state===`NORMAL`},{"d-recipe-feed-item-row__state-transition":this.transitionActive},s.FEED_ROW_STATE_BACKGROUND_COLOR[this.state]]},hasAttachmentContent(){return e.hasSlotContent(this.$slots.attachment)}},watch:{state:{immediate:!0,handler:function(e){e!==`NORMAL`&&(this.transitionActive=!0)}}},methods:{transitionComplete(){this.state===`NORMAL`&&(this.transitionActive=!1)},trapFocus(e){this.focusTrappedTabPress(e)},setFocus(e){this.$emit(`focus`,e)},setHover(e){this.$emit(`hover`,e)}}},d={key:0,class:`d-recipe-feed-item-row__avatar-container`},f={class:`d-recipe-feed-item-row__content`},p={key:0,"data-qa":`dt-recipe-feed-item-row--header`,class:`d-recipe-feed-item-row__header`},m={class:`d-recipe-feed-item-row__header-name`},h={class:`d-recipe-feed-item-row__header-time`},g={"data-qa":`dt-recipe-feed-item-row--content`},_={key:1,"data-qa":`dt-recipe-feed-item-row--attachment`,class:`d-recipe-feed-item-row__attachment`},v={key:0,class:`d-recipe-feed-item-row__reactions`,"data-qa":`dt-recipe-feed-item-row--reactions`},y={key:1,class:`d-recipe-feed-item-row__threading`},b={"data-qa":`dt-recipe-feed-item-row--menu`,class:`d-recipe-feed-item-row__menu`};function x(e,t,n,r,i,a){let o=(0,c.resolveComponent)(`dt-icon-user`),s=(0,c.resolveComponent)(`dt-avatar`),l=(0,c.resolveComponent)(`dt-badge`),u=(0,c.resolveComponent)(`dt-lazy-show`),x=(0,c.resolveComponent)(`dt-list-item`);return(0,c.openBlock)(),(0,c.createBlock)(x,(0,c.mergeProps)({ref:`FeedItemRef`,"navigation-type":`none`},e.$attrs,{class:a.listItemClasses,"data-qa":`dt-recipe-feed-item-row`},(0,c.toHandlers)(a.feedListeners)),{left:(0,c.withCtx)(()=>[n.showHeader?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,d,[(0,c.renderSlot)(e.$slots,`avatar`,{},()=>[(0,c.createVNode)(s,{"full-name":n.displayName,"image-src":n.avatarImageUrl,"image-alt":``,seed:n.avatarSeed},(0,c.createSlots)({_:2},[n.noInitials?{name:`icon`,fn:(0,c.withCtx)(({iconSize:e})=>[(0,c.createVNode)(o,{size:e},null,8,[`size`])]),key:`0`}:void 0]),1032,[`full-name`,`image-src`,`seed`])])])):(0,c.createCommentVNode)(``,!0),n.showHeader?(0,c.createCommentVNode)(``,!0):(0,c.withDirectives)(((0,c.openBlock)(),(0,c.createElementBlock)(`span`,{key:1,class:`d-recipe-feed-item-row__left-time`,"data-qa":`dt-recipe-feed-item-row--left-time`},(0,c.toDisplayString)(n.shortTime),513)),[[c.vShow,n.isActive]])]),bottom:(0,c.withCtx)(()=>[e.$slots.reactions?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,v,[(0,c.renderSlot)(e.$slots,`reactions`)])):(0,c.createCommentVNode)(``,!0),e.$slots.threading?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,y,[(0,c.renderSlot)(e.$slots,`threading`)])):(0,c.createCommentVNode)(``,!0),(0,c.withDirectives)((0,c.createElementVNode)(`div`,b,[(0,c.createVNode)(u,{appear:!0,transition:`fade`,show:n.isActive},{default:(0,c.withCtx)(()=>[(0,c.renderSlot)(e.$slots,`menu`)]),_:3},8,[`show`])],512),[[c.vShow,n.isActive]])]),default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`article`,f,[n.showHeader?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,p,[(0,c.renderSlot)(e.$slots,`displayName`,{},()=>[(0,c.createElementVNode)(`p`,m,(0,c.toDisplayString)(n.displayName),1)]),(0,c.createElementVNode)(`time`,h,(0,c.toDisplayString)(n.time),1),n.labelText?((0,c.openBlock)(),(0,c.createBlock)(l,{key:0,text:n.labelText},null,8,[`text`])):(0,c.createCommentVNode)(``,!0)])):(0,c.createCommentVNode)(``,!0),(0,c.createElementVNode)(`span`,g,[(0,c.renderSlot)(e.$slots,`default`)]),a.hasAttachmentContent?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,_,[(0,c.renderSlot)(e.$slots,`attachment`)])):(0,c.createCommentVNode)(``,!0)])]),_:3},16,[`class`])}var S=t.t(u,[[`render`,x]]);exports.default=S;
+Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}}),require(`../../chunk-Bmb41Sf3.cjs`);const e=require(`../../common/utils/index.cjs`),t=require(`../../_plugin-vue_export-helper-D8jCH6HB.cjs`),n=require(`../../common/mixins/modal.cjs`),r=require(`../avatar/avatar.cjs`),i=require(`../badge/badge.cjs`),a=require(`../lazy-show/lazy-show.cjs`),o=require(`../list-item/list-item.cjs`),s=require(`./feed-item-row-constants.cjs`);let c=require(`vue`),l=require(`@dialpad/dialtone-icons/vue`);var u={compatConfig:{MODE:3},name:`DtRecipeFeedItemRow`,components:{DtAvatar:r.default,DtLazyShow:a.default,DtListItem:o.default,DtBadge:i.default,DtIconUser:l.DtIconUser},mixins:[n.default],inheritAttrs:!1,props:{avatarSeed:{type:String,default:null},showHeader:{type:Boolean,default:!1},avatarImageUrl:{type:String,default:``},displayName:{type:String,default:``},noInitials:{type:Boolean,default:!1},time:{type:String,default:``},shortTime:{type:String,default:``},labelText:{type:String,default:``},isActive:{type:Boolean,default:!1},state:{type:String,default:s.DEFAULT_FEED_ROW_STATE,validator:e=>Object.keys(s.FEED_ROW_STATE_BACKGROUND_COLOR).includes(e)}},emits:[`hover`,`focus`,`keydown`],data(){return{transitionActive:!1}},computed:{feedListeners(){return{mouseenter:()=>this.setHover(!0),mouseleave:()=>this.setHover(!1),focusin:()=>this.setFocus(!0),focusout:()=>this.setFocus(!1),transitionend:()=>this.transitionComplete(),keydown:e=>{switch(e.code){case`Tab`:this.trapFocus(e);break}this.$emit(`keydown`,e)}}},listItemClasses(){return[`d-recipe-feed-item-row`,{"d-recipe-feed-item-row--active":this.isActive&&this.state===`NORMAL`},{"d-recipe-feed-item-row__state-transition":this.transitionActive},s.FEED_ROW_STATE_BACKGROUND_COLOR[this.state]]},hasAttachmentContent(){return e.hasSlotContent(this.$slots.attachment)}},watch:{state:{immediate:!0,handler:function(e){e!==`NORMAL`&&(this.transitionActive=!0)}}},methods:{transitionComplete(){this.state===`NORMAL`&&(this.transitionActive=!1)},trapFocus(e){this.focusTrappedTabPress(e)},setFocus(e){this.$emit(`focus`,e)},setHover(e){this.$emit(`hover`,e)}}},d={key:0,class:`d-recipe-feed-item-row__avatar-container`},f={class:`d-recipe-feed-item-row__content`},p={key:0,"data-qa":`dt-recipe-feed-item-row--header`,class:`d-recipe-feed-item-row__header`},m={class:`d-recipe-feed-item-row__header-name`},h={class:`d-recipe-feed-item-row__header-time`},g={"data-qa":`dt-recipe-feed-item-row--content`},_={key:1,"data-qa":`dt-recipe-feed-item-row--attachment`,class:`d-recipe-feed-item-row__attachment`},v={key:0,class:`d-recipe-feed-item-row__reactions`,"data-qa":`dt-recipe-feed-item-row--reactions`},y={key:1,class:`d-recipe-feed-item-row__threading`},b={"data-qa":`dt-recipe-feed-item-row--menu`,class:`d-recipe-feed-item-row__menu`};function x(e,t,n,r,i,a){let o=(0,c.resolveComponent)(`dt-icon-user`),s=(0,c.resolveComponent)(`dt-avatar`),l=(0,c.resolveComponent)(`dt-badge`),u=(0,c.resolveComponent)(`dt-lazy-show`),x=(0,c.resolveComponent)(`dt-list-item`);return(0,c.openBlock)(),(0,c.createBlock)(x,(0,c.mergeProps)({ref:`FeedItemRef`,"navigation-type":`none`},e.$attrs,{class:a.listItemClasses,"data-qa":`dt-recipe-feed-item-row`},(0,c.toHandlers)(a.feedListeners)),{start:(0,c.withCtx)(()=>[n.showHeader?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,d,[(0,c.renderSlot)(e.$slots,`avatar`,{},()=>[(0,c.createVNode)(s,{"full-name":n.displayName,"image-src":n.avatarImageUrl,"image-alt":``,seed:n.avatarSeed},(0,c.createSlots)({_:2},[n.noInitials?{name:`icon`,fn:(0,c.withCtx)(({iconSize:e})=>[(0,c.createVNode)(o,{size:e},null,8,[`size`])]),key:`0`}:void 0]),1032,[`full-name`,`image-src`,`seed`])])])):(0,c.createCommentVNode)(``,!0),n.showHeader?(0,c.createCommentVNode)(``,!0):(0,c.withDirectives)(((0,c.openBlock)(),(0,c.createElementBlock)(`span`,{key:1,class:`d-recipe-feed-item-row__left-time`,"data-qa":`dt-recipe-feed-item-row--left-time`},(0,c.toDisplayString)(n.shortTime),513)),[[c.vShow,n.isActive]])]),blockEnd:(0,c.withCtx)(()=>[e.$slots.reactions?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,v,[(0,c.renderSlot)(e.$slots,`reactions`)])):(0,c.createCommentVNode)(``,!0),e.$slots.threading?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,y,[(0,c.renderSlot)(e.$slots,`threading`)])):(0,c.createCommentVNode)(``,!0),(0,c.withDirectives)((0,c.createElementVNode)(`div`,b,[(0,c.createVNode)(u,{appear:!0,transition:`fade`,show:n.isActive},{default:(0,c.withCtx)(()=>[(0,c.renderSlot)(e.$slots,`menu`)]),_:3},8,[`show`])],512),[[c.vShow,n.isActive]])]),default:(0,c.withCtx)(()=>[(0,c.createElementVNode)(`article`,f,[n.showHeader?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,p,[(0,c.renderSlot)(e.$slots,`displayName`,{},()=>[(0,c.createElementVNode)(`p`,m,(0,c.toDisplayString)(n.displayName),1)]),(0,c.createElementVNode)(`time`,h,(0,c.toDisplayString)(n.time),1),n.labelText?((0,c.openBlock)(),(0,c.createBlock)(l,{key:0,text:n.labelText},null,8,[`text`])):(0,c.createCommentVNode)(``,!0)])):(0,c.createCommentVNode)(``,!0),(0,c.createElementVNode)(`span`,g,[(0,c.renderSlot)(e.$slots,`default`)]),a.hasAttachmentContent?((0,c.openBlock)(),(0,c.createElementBlock)(`div`,_,[(0,c.renderSlot)(e.$slots,`attachment`)])):(0,c.createCommentVNode)(``,!0)])]),_:3},16,[`class`])}var S=t.t(u,[[`render`,x]]);exports.default=S;
 //# sourceMappingURL=feed-item-row.cjs.map