@dialpad/dialtone-vue 3.220.0-next.4 → 3.220.0

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

@@ -1,55 +1,27 @@
 //#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 = {
-	200: "md",
-	300: "xl",
-	400: "2xl",
-	sm: "md",
-	md: "xl",
-	lg: "2xl"
+	sm: "d-headline--md",
+	md: "d-headline--xl",
+	lg: "d-headline--xxl"
 }, r = {
-	200: "200",
-	300: "200",
-	400: void 0,
-	sm: "200",
-	md: "200",
-	lg: void 0
+	sm: "d-body--sm",
+	md: "d-body--sm",
+	lg: "d-body--md"
 }, 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_SIZES: n,
-	EMPTY_STATE_HEADLINE_DENSITIES: r,
-	EMPTY_STATE_BODY_SIZES: i,
-	EMPTY_STATE_BODY_DENSITIES: a
+	EMPTY_STATE_HEADLINE_SIZE_MODIFIERS: n,
+	EMPTY_STATE_BODY_SIZE_MODIFIERS: r
 };
 //#endregion
-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 };
+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 };
 
 //# sourceMappingURL=empty-state-constants.js.map

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

@@ -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  // 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"}
+{"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"}

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

@@ -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(`../text/text.cjs`),n=require(`../stack/stack.cjs`),r=require(`./empty-state-constants.cjs`);let i=require(`vue`);var a=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},illustrationClass:{type:[String,Array,Object],default:``},iconClass:{type:[String,Array,Object],default:``},bodyClass:{type:[String,Array,Object],default:``}},setup(a){let o=(0,i.useSlots)(),s=a,c=(0,i.computed)(()=>e.hasSlotContent(o.icon)),l=(0,i.computed)(()=>e.hasSlotContent(o.illustration)),u=(0,i.computed)(()=>c.value&&(!l.value||p.value)),d=(0,i.computed)(()=>l.value&&!p.value),f=(0,i.computed)(()=>String(s.size)),p=(0,i.computed)(()=>f.value===`sm`||f.value===`200`),m=(0,i.computed)(()=>r.EMPTY_STATE_SIZE_MODIFIERS[f.value]),h=(0,i.computed)(()=>[`d-empty-state`,m.value]),g=(0,i.computed)(()=>r.EMPTY_STATE_CONTENT_SIZE_MODIFIERS[f.value]),_=(0,i.computed)(()=>r.EMPTY_STATE_HEADLINE_SIZES[f.value]),v=(0,i.computed)(()=>r.EMPTY_STATE_HEADLINE_DENSITIES[f.value]),y=(0,i.computed)(()=>r.EMPTY_STATE_BODY_SIZES[f.value]),b=(0,i.computed)(()=>r.EMPTY_STATE_BODY_DENSITIES[f.value]);return(0,i.onMounted)(()=>{!s.bodyText&&!e.hasSlotContent(o.body)&&console.error(`DtEmptyState: You should provide either bodyText or content on body slot.`)}),(r,s)=>((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(n.default),{class:(0,i.normalizeClass)(h.value)},{default:(0,i.withCtx)(()=>[d.value?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:0,class:(0,i.normalizeClass)([`d-empty-state__illustration`,a.illustrationClass])},[(0,i.renderSlot)(r.$slots,`illustration`)],2)):(0,i.createCommentVNode)(``,!0),u.value?((0,i.openBlock)(),(0,i.createElementBlock)(`span`,{key:1,class:(0,i.normalizeClass)([`d-empty-state__icon`,a.iconClass])},[(0,i.renderSlot)(r.$slots,`icon`,{iconSize:`800`})],2)):(0,i.createCommentVNode)(``,!0),(0,i.createVNode)((0,i.unref)(n.default),{gap:`150`,class:(0,i.normalizeClass)([`d-empty-state__content`,g.value])},{default:(0,i.withCtx)(()=>[(0,i.createVNode)((0,i.unref)(t.default),{kind:`headline`,size:_.value,density:v.value,wrap:`balance`,as:`div`,class:`d-empty-state__header-text`},{default:(0,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(a.headerText),1)]),_:1},8,[`size`,`density`]),a.bodyText?((0,i.openBlock)(),(0,i.createBlock)((0,i.unref)(t.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,i.withCtx)(()=>[(0,i.createTextVNode)((0,i.toDisplayString)(a.bodyText),1)]),_:1},8,[`size`,`density`])):(0,i.createCommentVNode)(``,!0)]),_:1},8,[`class`]),(0,i.unref)(e.hasSlotContent)((0,i.unref)(o).body)?((0,i.openBlock)(),(0,i.createElementBlock)(`div`,{key:2,class:(0,i.normalizeClass)(a.bodyClass)},[(0,i.renderSlot)(r.$slots,`body`)],2)):(0,i.createCommentVNode)(``,!0)]),_:3},8,[`class`]))}});exports.default=a;
+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;
 //# sourceMappingURL=empty-state.cjs.map

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

@@ -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', 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 {\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  /**\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":"0tBA+EA,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,yDAjHW,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"}
+{"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"}

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

@@ -1,16 +1,21 @@
 import { hasSlotContent as e } from "../../common/utils/index.js";
-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";
+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";
 //#region components/empty_state/empty_state.vue
-var C = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
+var b = {
+	key: 0,
+	class: "d-empty-state__illustration"
+}, x = {
+	key: 1,
+	class: "d-empty-state__icon"
+}, S = {
 	__name: "empty_state",
 	props: {
 		size: {
-			type: [String, Number],
-			default: 400,
-			validator: (e) => Object.keys(c).includes(String(e))
+			type: String,
+			default: "lg",
+			validator: (e) => Object.keys(a).includes(e)
 		},
 		headerText: {
 			type: String,
@@ -19,85 +24,33 @@ var C = /* @__PURE__ */ Object.assign({ name: "DtEmptyState" }, {
 		bodyText: {
 			type: String,
 			default: null
-		},
-		illustrationClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		iconClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
-		},
-		bodyClass: {
-			type: [
-				String,
-				Array,
-				Object
-			],
-			default: ""
 		}
 	},
-	setup(C) {
-		let w = x(), T = C, E = l(() => e(w.icon)), D = l(() => e(w.illustration)), O = l(() => E.value && (!D.value || j.value)), k = l(() => D.value && !j.value), A = l(() => String(T.size)), j = l(() => A.value === "sm" || A.value === "200"), M = l(() => c[A.value]), N = l(() => ["d-empty-state", M.value]), P = l(() => a[A.value]), F = l(() => s[A.value]), I = l(() => o[A.value]), L = l(() => i[A.value]), R = l(() => r[A.value]);
-		return g(() => {
-			!T.bodyText && !e(w.body) && console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
-		}), (r, i) => (_(), u(b(n), { class: h(N.value) }, {
-			default: S(() => [
-				k.value ? (_(), f("span", {
-					key: 0,
-					class: h(["d-empty-state__illustration", C.illustrationClass])
-				}, [v(r.$slots, "illustration")], 2)) : d("", !0),
-				O.value ? (_(), f("span", {
-					key: 1,
-					class: h(["d-empty-state__icon", C.iconClass])
-				}, [v(r.$slots, "icon", { iconSize: "800" })], 2)) : d("", !0),
-				m(b(n), {
-					gap: "150",
-					class: h(["d-empty-state__content", P.value])
+	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])
 				}, {
-					default: S(() => [m(b(t), {
-						kind: "headline",
-						size: F.value,
-						density: I.value,
-						wrap: "balance",
-						as: "div",
-						class: "d-empty-state__header-text"
-					}, {
-						default: S(() => [p(y(C.headerText), 1)]),
-						_: 1
-					}, 8, ["size", "density"]), C.bodyText ? (_(), u(b(t), {
+					default: y(() => [u("div", { class: f(["d-empty-state__header-text", N.value]) }, g(S.headerText), 3), S.bodyText ? (m(), l("p", {
 						key: 0,
-						kind: "body",
-						size: L.value,
-						density: R.value,
-						tone: "secondary",
-						wrap: "balance",
-						as: "p",
-						class: "d-empty-state__body-text"
-					}, {
-						default: S(() => [p(y(C.bodyText), 1)]),
-						_: 1
-					}, 8, ["size", "density"])) : d("", !0)]),
+						class: f(["d-empty-state__body-text", P.value])
+					}, g(S.bodyText), 3)) : c("", !0)]),
 					_: 1
 				}, 8, ["class"]),
-				b(e)(b(w).body) ? (_(), f("div", {
-					key: 2,
-					class: h(C.bodyClass)
-				}, [v(r.$slots, "body")], 2)) : d("", !0)
+				h(e.$slots, "body")
 			]),
 			_: 3
 		}, 8, ["class"]));
 	}
-});
+};
 //#endregion
-export { C as default };
+export { S as default };
 
 //# sourceMappingURL=empty-state.js.map

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

@@ -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', 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 {\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  /**\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+EA,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,kBA1KA,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"}
+{"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"}

package/dist/lib/feed-item-pill/feed-item-pill.cjs

@@ -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/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=_;
+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=_;
 //# sourceMappingURL=feed-item-pill.cjs.map

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

@@ -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\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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"}
+{"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"}

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

@@ -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, 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";
+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";
 //#region recipes/conversation_view/feed_item_pill/feed_item_pill.vue
-var b = {
+var y = {
 	compatConfig: { MODE: 3 },
 	name: "DtRecipeFeedItemPill",
 	components: {
@@ -18,6 +18,14 @@ var b = {
 			type: String,
 			default: () => ""
 		},
+		wrapperClass: {
+			type: [
+				String,
+				Array,
+				Object
+			],
+			default: ""
+		},
 		buttonClass: {
 			type: [
 				String,
@@ -49,7 +57,7 @@ var b = {
 	},
 	computed: {
 		toggleIcon() {
-			return this.expanded ? v : y;
+			return this.expanded ? _ : v;
 		},
 		showChevronIcon() {
 			return this.toggleable && this.hover;
@@ -67,76 +75,70 @@ var b = {
 	methods: { onClick() {
 		this.toggleable && (this.expanded = !this.expanded);
 	} }
-}, x = { class: "d-recipe-feed-item-pill__wrapper" }, S = ["aria-label", "title"], C = { class: "d-recipe-feed-item-pill__title" }, w = {
+}, b = { class: "d-recipe-feed-item-pill__wrapper" }, x = ["aria-label", "title"], S = { class: "d-recipe-feed-item-pill__title" }, C = {
 	class: "d-recipe-feed-item-pill__icon",
 	"data-qa": "dt-recipe-feed-item-pill__icon"
-}, 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", {
+}, 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", {
 			"data-qa": "dt-recipe-feed-item-pill",
 			class: u([
 				"d-recipe-feed-item-pill__button",
-				v.toggleableClass,
+				_.toggleableClass,
 				n.buttonClass
 			]),
-			"aria-label": v.anchorTitle,
-			title: v.anchorTitle,
+			"aria-label": _.anchorTitle,
+			title: _.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) => v.onClick && v.onClick(...e))
-		}, [l(y, {
+			onClick: t[4] || (t[4] = (...e) => _.onClick && _.onClick(...e))
+		}, [l(v, {
 			class: "d-recipe-feed-item-pill__layout",
 			unstyled: ""
 		}, c({
-			start: _(() => [s("div", w, [v.showChevronIcon ? (f(), a(h(v.toggleIcon), {
+			left: g(() => [s("div", C, [_.showChevronIcon ? (d(), a(m(_.toggleIcon), {
 				key: 0,
 				size: "300"
-			})) : e.$slots.startIcon ? p(e.$slots, "startIcon", {
+			})) : f(e.$slots, "leftIcon", {
 				key: 1,
 				iconSize: "300"
-			}) : p(e.$slots, "leftIcon", {
-				key: 2,
-				iconSize: "300"
 			})])]),
-			default: _(() => [p(e.$slots, "title", {}, () => [s("span", C, g(n.title), 1)])]),
+			default: g(() => [f(e.$slots, "title", {}, () => [s("span", S, h(n.title), 1)])]),
 			_: 2
 		}, [
 			e.$slots.subtitle ? {
 				name: "subtitle",
-				fn: _(() => [s("div", T, [p(e.$slots, "subtitle")])]),
+				fn: g(() => [s("div", w, [f(e.$slots, "subtitle")])]),
 				key: "0"
 			} : void 0,
-			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 })])]),
+			e.$slots.bottom ? {
+				name: "bottom",
+				fn: g(() => [s("div", T, [f(e.$slots, "bottom")])]),
 				key: "1"
 			} : void 0,
-			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 })])]),
+			e.$slots.right ? {
+				name: "right",
+				fn: g(() => [s("div", E, [f(e.$slots, "right")])]),
 				key: "2"
 			} : void 0
-		]), 1024)], 42, S)]),
+		]), 1024)], 42, x)]),
 		_: 2
 	}, [e.$slots.content ? {
 		name: "content",
-		fn: _(() => [s("div", O, [p(e.$slots, "content")])]),
+		fn: g(() => [s("div", D, [f(e.$slots, "content")])]),
 		key: "0"
-	} : void 0]), 1032, ["open"])])], 6);
+	} : void 0]), 1032, ["open"])])], 2);
 }
-var A = /* @__PURE__ */ e(b, [["render", k]]);
+var k = /* @__PURE__ */ e(y, [["render", O]]);
 //#endregion
-export { A as default };
+export { k as default };
 
 //# sourceMappingURL=feed-item-pill.js.map

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

@@ -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\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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"}
+{"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":"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"}

package/dist/lib/feed-item-row/feed-item-row.cjs

@@ -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/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;
+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;
 //# sourceMappingURL=feed-item-row.cjs.map