@dialpad/dialtone-vue 3.210.0 → 3.211.0-next.2

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"empty-state.js","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"],"names":["slots","useSlots","props","__props","hasIcon","computed","hasSlotContent","hasIllustration","isSmallSize","showIcon","showIllustration","sizeClass","EMPTY_STATE_SIZE_MODIFIERS","emptyStateClasses","contentClass","EMPTY_STATE_CONTENT_SIZE_MODIFIERS","headlineClass","EMPTY_STATE_HEADLINE_SIZE_MODIFIERS","bodyClass","EMPTY_STATE_BODY_SIZE_MODIFIERS","onMounted","_createBlock","_unref","DtStack","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","_hoisted_2","_createVNode","_createElementVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,UAAMA,IAAQC,EAAQ,GAEhBC,IAAQC,GA8BRC,IAAUC,EAAS,MAChBC,EAAeN,EAAM,IAAI,CACjC,GACKO,IAAkBF,EAAS,MAAMC,EAAeN,EAAM,YAAY,CAAC,GACnEQ,IAAcH,EAAS,MAAMH,EAAM,SAAS,IAAI,GAMhDO,IAAWJ,EAAS,MAAMD,EAAQ,UAAU,CAACG,EAAgB,SAASC,EAAY,MAAM,GAMxFE,IAAmBL,EAAS,MAAME,EAAgB,SAAS,CAACC,EAAY,KAAK,GAE7EG,IAAYN,EAAS,MAAMO,EAA2BV,EAAM,IAAI,CAAC,GAEjEW,IAAoBR,EAAS,MAAM,CAAC,iBAAiBM,EAAU,KAAK,CAAC,GAErEG,IAAeT,EAAS,MAAMU,EAAmCb,EAAM,IAAI,CAAC,GAE5Ec,IAAgBX,EAAS,MAAMY,EAAoCf,EAAM,IAAI,CAAC,GAE9EgB,IAAYb,EAAS,MAAMc,EAAgCjB,EAAM,IAAI,CAAC;AAE5E,WAAAkB,EAAU,MAAM;AACd,MAAI,CAAClB,EAAM,YAAY,CAACI,EAAeN,EAAM,IAAI,KAC/C,QAAQ,MAAM,2EAA2E;AAAA,IAE7F,CAAC,mBArHCqB,EAuCWC,EAAAC,CAAA,GAAA;AAAA,MAtCR,SAAOV,EAAA,KAAiB;AAAA;iBAEzB,MAMO;AAAA,QALCH,EAAA,SADRc,KAAAC,EAMO,QANPC,GAMO;AAAA,UADLC,EAA4BC,EAAA,QAAA,cAAA;AAAA;QAItBnB,EAAA,SADRe,KAAAC,EASO,QATPI,GASO;AAAA,UAJLF,EAGEC,EAAA,QAAA,QAAA,EADC,UAAW,MAAK,CAAA;AAAA;QAIrBE,EAcWR,EAAAC,CAAA,GAAA;AAAA,UAbT,KAAI;AAAA,UACH,oCAAkCT,EAAA,KAAY,CAAA;AAAA;qBAE/C,MAEM;AAAA,YAFNiB,EAEM,OAAA;AAAA,cAFA,wCAAsCf,EAAA,KAAa,CAAA;AAAA,iBACpDb,EAAA,UAAU,GAAA,CAAA;AAAA,YAIPA,EAAA,iBADRsB,EAKI,KAAA;AAAA;cAHD,sCAAoCP,EAAA,KAAS,CAAA;AAAA,iBAE3Cf,EAAA,QAAQ,GAAA,CAAA;;;;QAIfwB,EAAoBC,EAAA,QAAA,MAAA;AAAA;;;;;"}
+{"version":3,"file":"empty-state.js","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      <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\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 headlineSize = computed(() => EMPTY_STATE_HEADLINE_SIZES[props.size]);\nconst headlineDensity = computed(() => EMPTY_STATE_HEADLINE_DENSITIES[props.size]);\n\nconst bodySize = computed(() => EMPTY_STATE_BODY_SIZES[props.size]);\nconst bodyDensity = computed(() => EMPTY_STATE_BODY_DENSITIES[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"],"names":["slots","useSlots","props","__props","hasIcon","computed","hasSlotContent","hasIllustration","isSmallSize","showIcon","showIllustration","sizeClass","EMPTY_STATE_SIZE_MODIFIERS","emptyStateClasses","contentClass","EMPTY_STATE_CONTENT_SIZE_MODIFIERS","headlineSize","EMPTY_STATE_HEADLINE_SIZES","headlineDensity","EMPTY_STATE_HEADLINE_DENSITIES","bodySize","EMPTY_STATE_BODY_SIZES","bodyDensity","EMPTY_STATE_BODY_DENSITIES","onMounted","_createBlock","_unref","DtStack","_openBlock","_createElementBlock","_hoisted_1","_renderSlot","_ctx","_hoisted_2","_createVNode","DtText"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsEA,UAAMA,IAAQC,EAAQ,GAEhBC,IAAQC,GA8BRC,IAAUC,EAAS,MAChBC,EAAeN,EAAM,IAAI,CACjC,GACKO,IAAkBF,EAAS,MAAMC,EAAeN,EAAM,YAAY,CAAC,GACnEQ,IAAcH,EAAS,MAAMH,EAAM,SAAS,IAAI,GAMhDO,IAAWJ,EAAS,MAAMD,EAAQ,UAAU,CAACG,EAAgB,SAASC,EAAY,MAAM,GAMxFE,IAAmBL,EAAS,MAAME,EAAgB,SAAS,CAACC,EAAY,KAAK,GAE7EG,IAAYN,EAAS,MAAMO,EAA2BV,EAAM,IAAI,CAAC,GAEjEW,IAAoBR,EAAS,MAAM,CAAC,iBAAiBM,EAAU,KAAK,CAAC,GAErEG,IAAeT,EAAS,MAAMU,EAAmCb,EAAM,IAAI,CAAC,GAE5Ec,IAAeX,EAAS,MAAMY,EAA2Bf,EAAM,IAAI,CAAC,GACpEgB,IAAkBb,EAAS,MAAMc,EAA+BjB,EAAM,IAAI,CAAC,GAE3EkB,IAAWf,EAAS,MAAMgB,EAAuBnB,EAAM,IAAI,CAAC,GAC5DoB,IAAcjB,EAAS,MAAMkB,EAA2BrB,EAAM,IAAI,CAAC;AAEzE,WAAAsB,EAAU,MAAM;AACd,MAAI,CAACtB,EAAM,YAAY,CAACI,EAAeN,EAAM,IAAI,KAC/C,QAAQ,MAAM,2EAA2E;AAAA,IAE7F,CAAC,mBAvICyB,EAoDWC,EAAAC,CAAA,GAAA;AAAA,MAnDR,SAAOd,EAAA,KAAiB;AAAA;iBAEzB,MAMO;AAAA,QALCH,EAAA,SADRkB,KAAAC,EAMO,QANPC,GAMO;AAAA,UADLC,EAA4BC,EAAA,QAAA,cAAA;AAAA;QAItBvB,EAAA,SADRmB,KAAAC,EASO,QATPI,GASO;AAAA,UAJLF,EAGEC,EAAA,QAAA,QAAA,EADC,UAAW,MAAK,CAAA;AAAA;QAIrBE,EA2BWR,EAAAC,CAAA,GAAA;AAAA,UA1BT,KAAI;AAAA,UACH,oCAAkCb,EAAA,KAAY,CAAA;AAAA;qBAE/C,MASU;AAAA,YATVoB,EASUR,EAAAS,CAAA,GAAA;AAAA,cARR,MAAK;AAAA,cACJ,MAAMnB,EAAA;AAAA,cACN,SAASE,EAAA;AAAA,cACV,MAAK;AAAA,cACL,IAAG;AAAA,cACH,OAAM;AAAA;yBAEN,MAAgB;AAAA,oBAAbf,EAAA,UAAU,GAAA,CAAA;AAAA;;;YAIPA,EAAA,iBADRsB,EAWUC,EAAAS,CAAA,GAAA;AAAA;cATR,MAAK;AAAA,cACJ,MAAMf,EAAA;AAAA,cACN,SAASE,EAAA;AAAA,cACV,MAAK;AAAA,cACL,MAAK;AAAA,cACL,IAAG;AAAA,cACH,OAAM;AAAA;yBAEN,MAAc;AAAA,oBAAXnB,EAAA,QAAQ,GAAA,CAAA;AAAA;;;;;;QAIf4B,EAAoBC,EAAA,QAAA,MAAA;AAAA;;;;;"}

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("./feed-item-pill-constants.cjs"),d=require("@dialpad/dialtone-icons/vue3"),u=require("../../localization/index.cjs"),e=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),_=require("../collapsible/collapsible.cjs"),m=require("../item-layout/item-layout.cjs"),f={compatConfig:{MODE:3},name:"DtRecipeFeedItemPill",components:{DtItemLayout:m.default,DtCollapsible:_.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:t=>Object.keys(s.FEED_ITEM_PILL_BORDER_COLORS).includes(t)}},data(){return{hover:!1,expanded:this.defaultToggled,i18n:new u.DialtoneLocalization}},computed:{toggleIcon(){return this.expanded?d.DtIconChevronDown:d.DtIconChevronRight},showChevronIcon(){return this.toggleable&&this.hover},toggleableClass(){return this.toggleable?"d-recipe-feed-item-pill--toggleable":""},borderClass(){return s.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)}}},b={class:"d-recipe-feed-item-pill__wrapper"},h=["aria-label","title"],g={class:"d-recipe-feed-item-pill__title"},C={class:"d-recipe-feed-item-pill__icon","data-qa":"dt-recipe-feed-item-pill__icon"},v={class:"d-recipe-feed-item-pill__subtitle"},y={class:"d-recipe-feed-item-pill__bottom"},E={class:"d-recipe-feed-item-pill__right"},I={class:"d-recipe-feed-item-pill__content"};function S(t,l,r,k,i,o){const a=e.resolveComponent("dt-item-layout"),c=e.resolveComponent("dt-collapsible");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["d-recipe-feed-item-pill__border",o.borderClass,r.wrapperClass])},[e.createElementVNode("div",b,[e.createVNode(c,{open:i.expanded},e.createSlots({anchor:e.withCtx(()=>[e.createElementVNode("button",{"data-qa":"dt-recipe-feed-item-pill",class:e.normalizeClass(["d-recipe-feed-item-pill__button",o.toggleableClass,r.buttonClass]),"aria-label":o.anchorTitle,title:o.anchorTitle,onFocusin:l[0]||(l[0]=n=>i.hover=!0),onFocusout:l[1]||(l[1]=n=>i.hover=!1),onMouseenter:l[2]||(l[2]=n=>i.hover=!0),onMouseleave:l[3]||(l[3]=n=>i.hover=!1),onClick:l[4]||(l[4]=(...n)=>o.onClick&&o.onClick(...n))},[e.createVNode(a,{class:"d-recipe-feed-item-pill__layout",unstyled:""},e.createSlots({left:e.withCtx(()=>[e.createElementVNode("div",C,[o.showChevronIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.toggleIcon),{key:0,size:"300"})):e.renderSlot(t.$slots,"leftIcon",{key:1,iconSize:"300"})])]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"title",{},()=>[e.createElementVNode("span",g,e.toDisplayString(r.title),1)])]),_:2},[t.$slots.subtitle?{name:"subtitle",fn:e.withCtx(()=>[e.createElementVNode("div",v,[e.renderSlot(t.$slots,"subtitle")])]),key:"0"}:void 0,t.$slots.bottom?{name:"bottom",fn:e.withCtx(()=>[e.createElementVNode("div",y,[e.renderSlot(t.$slots,"bottom")])]),key:"1"}:void 0,t.$slots.right?{name:"right",fn:e.withCtx(()=>[e.createElementVNode("div",E,[e.renderSlot(t.$slots,"right")])]),key:"2"}:void 0]),1024)],42,h)]),_:2},[t.$slots.content?{name:"content",fn:e.withCtx(()=>[e.createElementVNode("div",I,[e.renderSlot(t.$slots,"content")])]),key:"0"}:void 0]),1032,["open"])])],2)}const D=p._(f,[["render",S]]);exports.default=D;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const r=require("./feed-item-pill-constants.cjs"),d=require("@dialpad/dialtone-icons/vue3"),u=require("../../localization/index.cjs"),e=require("vue"),p=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),m=require("../collapsible/collapsible.cjs"),_=require("../item-layout/item-layout.cjs"),f={compatConfig:{MODE:3},name:"DtRecipeFeedItemPill",components:{DtItemLayout:_.default,DtCollapsible:m.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:t=>Object.keys(r.FEED_ITEM_PILL_BORDER_COLORS).includes(t)}},data(){return{hover:!1,expanded:this.defaultToggled,i18n:new u.DialtoneLocalization}},computed:{toggleIcon(){return this.expanded?d.DtIconChevronDown:d.DtIconChevronRight},showChevronIcon(){return this.toggleable&&this.hover},toggleableClass(){return this.toggleable?"d-recipe-feed-item-pill--toggleable":""},borderClass(){return r.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)}}},b={class:"d-recipe-feed-item-pill__wrapper"},h=["aria-label","title"],g={class:"d-recipe-feed-item-pill__title"},C={class:"d-recipe-feed-item-pill__icon","data-qa":"dt-recipe-feed-item-pill__icon"},v={class:"d-recipe-feed-item-pill__subtitle"},y={class:"d-recipe-feed-item-pill__bottom"},E={class:"d-recipe-feed-item-pill__right"},k={class:"d-recipe-feed-item-pill__content"};function S(t,l,s,D,n,o){const a=e.resolveComponent("dt-item-layout"),c=e.resolveComponent("dt-collapsible");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["d-recipe-feed-item-pill__border",o.borderClass,s.wrapperClass])},[e.createElementVNode("div",b,[e.createVNode(c,{open:n.expanded},e.createSlots({anchor:e.withCtx(()=>[e.createElementVNode("button",{"data-qa":"dt-recipe-feed-item-pill",class:e.normalizeClass(["d-recipe-feed-item-pill__button",o.toggleableClass,s.buttonClass]),"aria-label":o.anchorTitle,title:o.anchorTitle,onFocusin:l[0]||(l[0]=i=>n.hover=!0),onFocusout:l[1]||(l[1]=i=>n.hover=!1),onMouseenter:l[2]||(l[2]=i=>n.hover=!0),onMouseleave:l[3]||(l[3]=i=>n.hover=!1),onClick:l[4]||(l[4]=(...i)=>o.onClick&&o.onClick(...i))},[e.createVNode(a,{class:"d-recipe-feed-item-pill__layout",unstyled:""},e.createSlots({start:e.withCtx(()=>[e.createElementVNode("div",C,[o.showChevronIcon?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.toggleIcon),{key:0,size:"300"})):t.$slots.startIcon?e.renderSlot(t.$slots,"startIcon",{key:1,iconSize:"300"}):e.renderSlot(t.$slots,"leftIcon",{key:2,iconSize:"300"})])]),default:e.withCtx(()=>[e.renderSlot(t.$slots,"title",{},()=>[e.createElementVNode("span",g,e.toDisplayString(s.title),1)])]),_:2},[t.$slots.subtitle?{name:"subtitle",fn:e.withCtx(()=>[e.createElementVNode("div",v,[e.renderSlot(t.$slots,"subtitle")])]),key:"0"}:void 0,t.$slots.blockEnd||t.$slots.bottom?{name:"blockEnd",fn:e.withCtx(()=>[e.createElementVNode("div",y,[t.$slots.blockEnd?e.renderSlot(t.$slots,"blockEnd",{key:0}):e.renderSlot(t.$slots,"bottom",{key:1})])]),key:"1"}:void 0,t.$slots.end||t.$slots.right?{name:"end",fn:e.withCtx(()=>[e.createElementVNode("div",E,[t.$slots.end?e.renderSlot(t.$slots,"end",{key:0}):e.renderSlot(t.$slots,"right",{key:1})])]),key:"2"}:void 0]),1024)],42,h)]),_:2},[t.$slots.content?{name:"content",fn:e.withCtx(()=>[e.createElementVNode("div",k,[e.renderSlot(t.$slots,"content")])]),key:"0"}:void 0]),1032,["open"])])],2)}const I=p._(f,[["render",S]]);exports.default=I;
 //# 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","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"],"names":["_sfc_main","DtItemLayout","DtCollapsible","color","FEED_ITEM_PILL_BORDER_COLORS","DialtoneLocalization","DtIconChevronDown","DtIconChevronRight","_hoisted_1","_hoisted_3","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createVNode","_component_dt_collapsible","$data","_createSlots","args","_component_dt_item_layout","_hoisted_4","_openBlock","_createBlock","_resolveDynamicComponent","_renderSlot","_ctx","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"feed-item-pill.cjs","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 #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/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"],"names":["_sfc_main","DtItemLayout","DtCollapsible","color","FEED_ITEM_PILL_BORDER_COLORS","DialtoneLocalization","DtIconChevronDown","DtIconChevronRight","_hoisted_1","_hoisted_3","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createVNode","_component_dt_collapsible","$data","_createSlots","args","_component_dt_item_layout","_hoisted_4","_openBlock","_createBlock","_resolveDynamicComponent","_ctx","_renderSlot","_toDisplayString"],"mappings":"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"}

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

@@ -1,14 +1,14 @@
 import { FEED_ITEM_PILL_BORDER_COLORS as a } from "./feed-item-pill-constants.js";
-import { DtIconChevronDown as b, DtIconChevronRight as h } from "@dialpad/dialtone-icons/vue3";
-import { DialtoneLocalization as v } from "../../localization/index.js";
-import { resolveComponent as p, openBlock as c, createElementBlock as C, normalizeClass as m, createElementVNode as l, createVNode as f, createSlots as u, withCtx as i, renderSlot as n, toDisplayString as y, createBlock as I, resolveDynamicComponent as k } from "vue";
-import { _ as D } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
-import E from "../collapsible/collapsible.js";
-import L from "../item-layout/item-layout.js";
-const S = {
+import { DtIconChevronDown as g, DtIconChevronRight as h } from "@dialpad/dialtone-icons/vue3";
+import { DialtoneLocalization as y } from "../../localization/index.js";
+import { resolveComponent as p, openBlock as c, createElementBlock as v, normalizeClass as m, createElementVNode as s, createVNode as f, createSlots as u, withCtx as n, renderSlot as o, toDisplayString as C, createBlock as k, resolveDynamicComponent as I } from "vue";
+import { _ as E } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
+import D from "../collapsible/collapsible.js";
+import $ from "../item-layout/item-layout.js";
+const L = {
   compatConfig: { MODE: 3 },
   name: "DtRecipeFeedItemPill",
-  components: { DtItemLayout: L, DtCollapsible: E },
+  components: { DtItemLayout: $, DtCollapsible: D },
   props: {
     /**
      * Bolded primary text
@@ -56,12 +56,12 @@ const S = {
     return {
       hover: !1,
       expanded: this.defaultToggled,
-      i18n: new v()
+      i18n: new y()
     };
   },
   computed: {
     toggleIcon() {
-      return this.expanded ? b : h;
+      return this.expanded ? g : h;
     },
     showChevronIcon() {
       return this.toggleable && this.hover;
@@ -81,88 +81,91 @@ const S = {
       this.toggleable && (this.expanded = !this.expanded);
     }
   }
-}, w = { class: "d-recipe-feed-item-pill__wrapper" }, O = ["aria-label", "title"], T = { class: "d-recipe-feed-item-pill__title" }, B = {
+}, S = { class: "d-recipe-feed-item-pill__wrapper" }, w = ["aria-label", "title"], O = { class: "d-recipe-feed-item-pill__title" }, T = {
   class: "d-recipe-feed-item-pill__icon",
   "data-qa": "dt-recipe-feed-item-pill__icon"
-}, A = { class: "d-recipe-feed-item-pill__subtitle" }, R = { class: "d-recipe-feed-item-pill__bottom" }, F = { class: "d-recipe-feed-item-pill__right" }, M = { class: "d-recipe-feed-item-pill__content" };
-function z(e, t, d, j, s, o) {
-  const _ = p("dt-item-layout"), g = p("dt-collapsible");
-  return c(), C("div", {
-    class: m(["d-recipe-feed-item-pill__border", o.borderClass, d.wrapperClass])
+}, B = { class: "d-recipe-feed-item-pill__subtitle" }, A = { class: "d-recipe-feed-item-pill__bottom" }, R = { class: "d-recipe-feed-item-pill__right" }, z = { class: "d-recipe-feed-item-pill__content" };
+function F(e, t, d, M, i, l) {
+  const _ = p("dt-item-layout"), b = p("dt-collapsible");
+  return c(), v("div", {
+    class: m(["d-recipe-feed-item-pill__border", l.borderClass, d.wrapperClass])
   }, [
-    l("div", w, [
-      f(g, { open: s.expanded }, u({
-        anchor: i(() => [
-          l("button", {
+    s("div", S, [
+      f(b, { open: i.expanded }, u({
+        anchor: n(() => [
+          s("button", {
             "data-qa": "dt-recipe-feed-item-pill",
-            class: m(["d-recipe-feed-item-pill__button", o.toggleableClass, d.buttonClass]),
-            "aria-label": o.anchorTitle,
-            title: o.anchorTitle,
-            onFocusin: t[0] || (t[0] = (r) => s.hover = !0),
-            onFocusout: t[1] || (t[1] = (r) => s.hover = !1),
-            onMouseenter: t[2] || (t[2] = (r) => s.hover = !0),
-            onMouseleave: t[3] || (t[3] = (r) => s.hover = !1),
-            onClick: t[4] || (t[4] = (...r) => o.onClick && o.onClick(...r))
+            class: m(["d-recipe-feed-item-pill__button", l.toggleableClass, d.buttonClass]),
+            "aria-label": l.anchorTitle,
+            title: l.anchorTitle,
+            onFocusin: t[0] || (t[0] = (r) => i.hover = !0),
+            onFocusout: t[1] || (t[1] = (r) => i.hover = !1),
+            onMouseenter: t[2] || (t[2] = (r) => i.hover = !0),
+            onMouseleave: t[3] || (t[3] = (r) => i.hover = !1),
+            onClick: t[4] || (t[4] = (...r) => l.onClick && l.onClick(...r))
           }, [
             f(_, {
               class: "d-recipe-feed-item-pill__layout",
               unstyled: ""
             }, u({
-              left: i(() => [
-                l("div", B, [
-                  o.showChevronIcon ? (c(), I(k(o.toggleIcon), {
+              start: n(() => [
+                s("div", T, [
+                  l.showChevronIcon ? (c(), k(I(l.toggleIcon), {
                     key: 0,
                     size: "300"
-                  })) : n(e.$slots, "leftIcon", {
+                  })) : e.$slots.startIcon ? o(e.$slots, "startIcon", {
                     key: 1,
                     iconSize: "300"
+                  }) : o(e.$slots, "leftIcon", {
+                    key: 2,
+                    iconSize: "300"
                   })
                 ])
               ]),
-              default: i(() => [
-                n(e.$slots, "title", {}, () => [
-                  l("span", T, y(d.title), 1)
+              default: n(() => [
+                o(e.$slots, "title", {}, () => [
+                  s("span", O, C(d.title), 1)
                 ])
               ]),
               _: 2
             }, [
               e.$slots.subtitle ? {
                 name: "subtitle",
-                fn: i(() => [
-                  l("div", A, [
-                    n(e.$slots, "subtitle")
+                fn: n(() => [
+                  s("div", B, [
+                    o(e.$slots, "subtitle")
                   ])
                 ]),
                 key: "0"
               } : void 0,
-              e.$slots.bottom ? {
-                name: "bottom",
-                fn: i(() => [
-                  l("div", R, [
-                    n(e.$slots, "bottom")
+              e.$slots.blockEnd || e.$slots.bottom ? {
+                name: "blockEnd",
+                fn: n(() => [
+                  s("div", A, [
+                    e.$slots.blockEnd ? o(e.$slots, "blockEnd", { key: 0 }) : o(e.$slots, "bottom", { key: 1 })
                   ])
                 ]),
                 key: "1"
               } : void 0,
-              e.$slots.right ? {
-                name: "right",
-                fn: i(() => [
-                  l("div", F, [
-                    n(e.$slots, "right")
+              e.$slots.end || e.$slots.right ? {
+                name: "end",
+                fn: n(() => [
+                  s("div", R, [
+                    e.$slots.end ? o(e.$slots, "end", { key: 0 }) : o(e.$slots, "right", { key: 1 })
                   ])
                 ]),
                 key: "2"
               } : void 0
             ]), 1024)
-          ], 42, O)
+          ], 42, w)
         ]),
         _: 2
       }, [
         e.$slots.content ? {
           name: "content",
-          fn: i(() => [
-            l("div", M, [
-              n(e.$slots, "content")
+          fn: n(() => [
+            s("div", z, [
+              o(e.$slots, "content")
             ])
           ]),
           key: "0"
@@ -171,7 +174,7 @@ function z(e, t, d, j, s, o) {
     ])
   ], 2);
 }
-const J = /* @__PURE__ */ D(S, [["render", z]]);
+const J = /* @__PURE__ */ E(L, [["render", F]]);
 export {
   J as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"feed-item-pill.js","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"],"names":["_sfc_main","DtItemLayout","DtCollapsible","color","FEED_ITEM_PILL_BORDER_COLORS","DialtoneLocalization","DtIconChevronDown","DtIconChevronRight","_hoisted_1","_hoisted_3","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createVNode","_component_dt_collapsible","$data","_createSlots","args","_component_dt_item_layout","_hoisted_4","_openBlock","_createBlock","_resolveDynamicComponent","_renderSlot","_ctx","_toDisplayString"],"mappings":"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"}
+{"version":3,"file":"feed-item-pill.js","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 #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/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"],"names":["_sfc_main","DtItemLayout","DtCollapsible","color","FEED_ITEM_PILL_BORDER_COLORS","DialtoneLocalization","DtIconChevronDown","DtIconChevronRight","_hoisted_1","_hoisted_3","_hoisted_5","_hoisted_6","_hoisted_7","_hoisted_8","_createElementBlock","_normalizeClass","$options","$props","_createElementVNode","_createVNode","_component_dt_collapsible","$data","_createSlots","args","_component_dt_item_layout","_hoisted_4","_openBlock","_createBlock","_resolveDynamicComponent","_ctx","_renderSlot","_toDisplayString"],"mappings":"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"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"feed-item-row.cjs","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n  <dt-list-item\n    ref=\"FeedItemRef\"\n    navigation-type=\"none\"\n    v-bind=\"$attrs\"\n    :class=\"listItemClasses\"\n    data-qa=\"dt-recipe-feed-item-row\"\n    v-on=\"feedListeners\"\n  >\n    <!-- Avatar or time -->\n    <template #left>\n      <div\n        v-if=\"showHeader\"\n        class=\"d-recipe-feed-item-row__avatar-container\"\n      >\n        <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n        <slot\n          name=\"avatar\"\n        >\n          <dt-avatar\n            :full-name=\"displayName\"\n            :image-src=\"avatarImageUrl\"\n            image-alt=\"\"\n            :seed=\"avatarSeed\"\n          >\n            <template\n              v-if=\"noInitials\"\n              #icon=\"{ iconSize }\"\n            >\n              <dt-icon-user\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-avatar>\n        </slot>\n      </div>\n      <!-- show time instead of avatar when headers not present -->\n      <span\n        v-if=\"!showHeader\"\n        v-show=\"isActive\"\n        class=\"d-recipe-feed-item-row__left-time\"\n        data-qa=\"dt-recipe-feed-item-row--left-time\"\n      >\n        {{ shortTime }}\n      </span>\n    </template>\n\n    <article class=\"d-recipe-feed-item-row__content\">\n      <!-- Feed Item -->\n      <div\n        v-if=\"showHeader\"\n        data-qa=\"dt-recipe-feed-item-row--header\"\n        class=\"d-recipe-feed-item-row__header\"\n      >\n        <!-- @slot Slot for display name -->\n        <slot name=\"displayName\">\n          <p class=\"d-recipe-feed-item-row__header-name\">\n            {{ displayName }}\n          </p>\n        </slot>\n        <time\n          class=\"d-recipe-feed-item-row__header-time\"\n        >\n          {{ time }}\n        </time>\n        <dt-badge\n          v-if=\"labelText\"\n          :text=\"labelText\"\n        />\n      </div>\n      <!-- @slot Default content slot for feed item row -->\n      <span\n        data-qa=\"dt-recipe-feed-item-row--content\"\n      >\n        <slot />\n      </span>\n      <div\n        v-if=\"hasAttachmentContent\"\n        data-qa=\"dt-recipe-feed-item-row--attachment\"\n        class=\"d-recipe-feed-item-row__attachment\"\n      >\n        <slot name=\"attachment\" />\n      </div>\n    </article>\n\n    <template #bottom>\n      <!-- Reactions -->\n      <div\n        v-if=\"$slots.reactions\"\n        class=\"d-recipe-feed-item-row__reactions\"\n        data-qa=\"dt-recipe-feed-item-row--reactions\"\n      >\n        <!-- @slot Slot for reactions row component -->\n        <slot name=\"reactions\" />\n      </div>\n\n      <!-- Threading -->\n      <div\n        v-if=\"$slots.threading\"\n        class=\"d-recipe-feed-item-row__threading\"\n      >\n        <!-- @slot Slot for threading row component -->\n        <slot name=\"threading\" />\n      </div>\n\n      <!-- Action menu -->\n      <div\n        v-show=\"isActive\"\n        data-qa=\"dt-recipe-feed-item-row--menu\"\n        class=\"d-recipe-feed-item-row__menu\"\n      >\n        <dt-lazy-show\n          :appear=\"true\"\n          transition=\"fade\"\n          :show=\"isActive\"\n        >\n          <!-- @slot Slot for actions hover menu component -->\n          <slot name=\"menu\" />\n        </dt-lazy-show>\n      </div>\n    </template>\n  </dt-list-item>\n</template>\n\n<script>\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeFeedItemRow',\n\n  components: {\n    DtAvatar,\n    DtLazyShow,\n    DtListItem,\n    DtBadge,\n    DtIconUser,\n  },\n\n  mixins: [Modal],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Show avatar, show header text or dont show left time and vice versa\n     */\n    showHeader: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use extracted initials from displayName.\n     */\n    avatarImageUrl: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The display name of the sender\n     */\n    displayName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * time string displayed as is.\n     * Shown on the header when showHeader is true\n     */\n    time: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * short time string without AM/PM displayed as is.\n     * Shown on the left of feed item when showHeader is false and isActive is true\n     */\n    shortTime: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * A label displayed next to the displayName. Will not show if empty.\n     */\n    labelText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * displays a darkened background on the row.\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * state for the feed item row. Can be normal, searched & error\n     */\n    state: {\n      type: String,\n      default: DEFAULT_FEED_ROW_STATE,\n      validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when hovered over feed row\n     *\n     * @event hover\n     * @type {Boolean}\n     */\n    'hover',\n\n    /**\n     * Fires when focused over feed row\n     *\n     * @event focus\n     * @type {Boolean}\n     */\n    'focus',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      transitionActive: false,\n    };\n  },\n\n  computed: {\n    feedListeners () {\n      return {\n        mouseenter: () => this.setHover(true),\n        mouseleave: () => this.setHover(false),\n        focusin: () => this.setFocus(true),\n        focusout: () => this.setFocus(false),\n        transitionend: () => this.transitionComplete(),\n        keydown: event => {\n          switch (event.code) {\n            case 'Tab':\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    listItemClasses () {\n      return [\n        'd-recipe-feed-item-row',\n        { 'd-recipe-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n        { 'd-recipe-feed-item-row__state-transition': this.transitionActive },\n        FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n      ];\n    },\n\n    hasAttachmentContent () {\n      return hasSlotContent(this.$slots.attachment);\n    },\n  },\n\n  watch: {\n    state: {\n      immediate: true,\n      handler: function (newState) {\n        if (newState !== DEFAULT_FEED_ROW_STATE) {\n          this.transitionActive = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    transitionComplete () {\n      if (this.state === DEFAULT_FEED_ROW_STATE) {\n        this.transitionActive = false;\n      }\n    },\n\n    trapFocus (e) {\n      this.focusTrappedTabPress(e);\n    },\n\n    setFocus (bool) {\n      this.$emit('focus', bool);\n    },\n\n    setHover (bool) {\n      this.$emit('hover', bool);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","state","FEED_ROW_STATE_BACKGROUND_COLOR","event","hasSlotContent","newState","e","bool","_hoisted_2","_hoisted_4","_hoisted_5","_hoisted_6","_openBlock","_createBlock","_component_dt_list_item","_mergeProps","_ctx","$options","_toHandlers","$props","_createElementBlock","_hoisted_1","_renderSlot","_createVNode","_component_dt_avatar","_withCtx","iconSize","_component_dt_icon_user","_hoisted_8","_hoisted_9","_withDirectives","_createElementVNode","_hoisted_10","_component_dt_lazy_show","_hoisted_3","_toDisplayString","_component_dt_badge","_hoisted_7"],"mappings":"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"}
+{"version":3,"file":"feed-item-row.cjs","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row.vue"],"sourcesContent":["<template>\n  <dt-list-item\n    ref=\"FeedItemRef\"\n    navigation-type=\"none\"\n    v-bind=\"$attrs\"\n    :class=\"listItemClasses\"\n    data-qa=\"dt-recipe-feed-item-row\"\n    v-on=\"feedListeners\"\n  >\n    <!-- Avatar or time -->\n    <template #start>\n      <div\n        v-if=\"showHeader\"\n        class=\"d-recipe-feed-item-row__avatar-container\"\n      >\n        <!-- @slot Slot to contain the avatar, overrides avatar props. -->\n        <slot\n          name=\"avatar\"\n        >\n          <dt-avatar\n            :full-name=\"displayName\"\n            :image-src=\"avatarImageUrl\"\n            image-alt=\"\"\n            :seed=\"avatarSeed\"\n          >\n            <template\n              v-if=\"noInitials\"\n              #icon=\"{ iconSize }\"\n            >\n              <dt-icon-user\n                :size=\"iconSize\"\n              />\n            </template>\n          </dt-avatar>\n        </slot>\n      </div>\n      <!-- show time instead of avatar when headers not present -->\n      <span\n        v-if=\"!showHeader\"\n        v-show=\"isActive\"\n        class=\"d-recipe-feed-item-row__left-time\"\n        data-qa=\"dt-recipe-feed-item-row--left-time\"\n      >\n        {{ shortTime }}\n      </span>\n    </template>\n\n    <article class=\"d-recipe-feed-item-row__content\">\n      <!-- Feed Item -->\n      <div\n        v-if=\"showHeader\"\n        data-qa=\"dt-recipe-feed-item-row--header\"\n        class=\"d-recipe-feed-item-row__header\"\n      >\n        <!-- @slot Slot for display name -->\n        <slot name=\"displayName\">\n          <p class=\"d-recipe-feed-item-row__header-name\">\n            {{ displayName }}\n          </p>\n        </slot>\n        <time\n          class=\"d-recipe-feed-item-row__header-time\"\n        >\n          {{ time }}\n        </time>\n        <dt-badge\n          v-if=\"labelText\"\n          :text=\"labelText\"\n        />\n      </div>\n      <!-- @slot Default content slot for feed item row -->\n      <span\n        data-qa=\"dt-recipe-feed-item-row--content\"\n      >\n        <slot />\n      </span>\n      <div\n        v-if=\"hasAttachmentContent\"\n        data-qa=\"dt-recipe-feed-item-row--attachment\"\n        class=\"d-recipe-feed-item-row__attachment\"\n      >\n        <slot name=\"attachment\" />\n      </div>\n    </article>\n\n    <template #blockEnd>\n      <!-- Reactions -->\n      <div\n        v-if=\"$slots.reactions\"\n        class=\"d-recipe-feed-item-row__reactions\"\n        data-qa=\"dt-recipe-feed-item-row--reactions\"\n      >\n        <!-- @slot Slot for reactions row component -->\n        <slot name=\"reactions\" />\n      </div>\n\n      <!-- Threading -->\n      <div\n        v-if=\"$slots.threading\"\n        class=\"d-recipe-feed-item-row__threading\"\n      >\n        <!-- @slot Slot for threading row component -->\n        <slot name=\"threading\" />\n      </div>\n\n      <!-- Action menu -->\n      <div\n        v-show=\"isActive\"\n        data-qa=\"dt-recipe-feed-item-row--menu\"\n        class=\"d-recipe-feed-item-row__menu\"\n      >\n        <dt-lazy-show\n          :appear=\"true\"\n          transition=\"fade\"\n          :show=\"isActive\"\n        >\n          <!-- @slot Slot for actions hover menu component -->\n          <slot name=\"menu\" />\n        </dt-lazy-show>\n      </div>\n    </template>\n  </dt-list-item>\n</template>\n\n<script>\nimport { DEFAULT_FEED_ROW_STATE, FEED_ROW_STATE_BACKGROUND_COLOR } from './feed_item_row_constants.js';\nimport { DtAvatar } from '@/components/avatar';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtListItem } from '@/components/list_item';\nimport { DtBadge } from '@/components/badge';\nimport Modal from '@/common/mixins/modal';\nimport { DtIconUser } from '@dialpad/dialtone-icons/vue3';\nimport { hasSlotContent } from '@/common/utils';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeFeedItemRow',\n\n  components: {\n    DtAvatar,\n    DtLazyShow,\n    DtListItem,\n    DtBadge,\n    DtIconUser,\n  },\n\n  mixins: [Modal],\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.\n     */\n    avatarSeed: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Show avatar, show header text or dont show left time and vice versa\n     */\n    showHeader: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Optional avatar image url.\n     * If not provided it will use extracted initials from displayName.\n     */\n    avatarImageUrl: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * The display name of the sender\n     */\n    displayName: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Initials will never be shown. Instead it will show a \"User\" icon.\n     */\n    noInitials: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * time string displayed as is.\n     * Shown on the header when showHeader is true\n     */\n    time: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * short time string without AM/PM displayed as is.\n     * Shown on the left of feed item when showHeader is false and isActive is true\n     */\n    shortTime: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * A label displayed next to the displayName. Will not show if empty.\n     */\n    labelText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * displays a darkened background on the row.\n     */\n    isActive: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * state for the feed item row. Can be normal, searched & error\n     */\n    state: {\n      type: String,\n      default: DEFAULT_FEED_ROW_STATE,\n      validator: state => Object.keys(FEED_ROW_STATE_BACKGROUND_COLOR).includes(state),\n    },\n  },\n\n  emits: [\n    /**\n     * Fires when hovered over feed row\n     *\n     * @event hover\n     * @type {Boolean}\n     */\n    'hover',\n\n    /**\n     * Fires when focused over feed row\n     *\n     * @event focus\n     * @type {Boolean}\n     */\n    'focus',\n\n    /**\n     * Key down event\n     *\n     * @event keydown\n     * @type {KeyboardEvent}\n     */\n    'keydown',\n  ],\n\n  data () {\n    return {\n      transitionActive: false,\n    };\n  },\n\n  computed: {\n    feedListeners () {\n      return {\n        mouseenter: () => this.setHover(true),\n        mouseleave: () => this.setHover(false),\n        focusin: () => this.setFocus(true),\n        focusout: () => this.setFocus(false),\n        transitionend: () => this.transitionComplete(),\n        keydown: event => {\n          switch (event.code) {\n            case 'Tab':\n              this.trapFocus(event);\n              break;\n          }\n          this.$emit('keydown', event);\n        },\n      };\n    },\n\n    listItemClasses () {\n      return [\n        'd-recipe-feed-item-row',\n        { 'd-recipe-feed-item-row--active': this.isActive && this.state === DEFAULT_FEED_ROW_STATE },\n        { 'd-recipe-feed-item-row__state-transition': this.transitionActive },\n        FEED_ROW_STATE_BACKGROUND_COLOR[this.state],\n\n      ];\n    },\n\n    hasAttachmentContent () {\n      return hasSlotContent(this.$slots.attachment);\n    },\n  },\n\n  watch: {\n    state: {\n      immediate: true,\n      handler: function (newState) {\n        if (newState !== DEFAULT_FEED_ROW_STATE) {\n          this.transitionActive = true;\n        }\n      },\n    },\n  },\n\n  methods: {\n    transitionComplete () {\n      if (this.state === DEFAULT_FEED_ROW_STATE) {\n        this.transitionActive = false;\n      }\n    },\n\n    trapFocus (e) {\n      this.focusTrappedTabPress(e);\n    },\n\n    setFocus (bool) {\n      this.$emit('focus', bool);\n    },\n\n    setHover (bool) {\n      this.$emit('hover', bool);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtAvatar","DtLazyShow","DtListItem","DtBadge","DtIconUser","Modal","DEFAULT_FEED_ROW_STATE","state","FEED_ROW_STATE_BACKGROUND_COLOR","event","hasSlotContent","newState","e","bool","_hoisted_2","_hoisted_4","_hoisted_5","_hoisted_6","_openBlock","_createBlock","_component_dt_list_item","_mergeProps","_ctx","$options","_toHandlers","$props","_createElementBlock","_hoisted_1","_renderSlot","_createVNode","_component_dt_avatar","_withCtx","iconSize","_component_dt_icon_user","_hoisted_8","_hoisted_9","_withDirectives","_createElementVNode","_hoisted_10","_component_dt_lazy_show","_hoisted_3","_toDisplayString","_component_dt_badge","_hoisted_7"],"mappings":"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"}