@dialpad/dialtone 9.110.0 → 9.110.1-beta.2

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

@@ -0,0 +1,92 @@
+import { EMPTY_STATE_SIZE_MODIFIERS as o, EMPTY_STATE_CONTENT_SIZE_MODIFIERS as a, EMPTY_STATE_HEADLINE_SIZE_MODIFIERS as i, EMPTY_STATE_BODY_SIZE_MODIFIERS as n } from "./empty-state-constants.js";
+import { n as r } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import l from "../stack/stack.js";
+const _ = {
+  name: "DtEmptyState",
+  components: {
+    DtStack: l
+  },
+  props: {
+    /**
+     * The empty state size.
+     * @values 'sm', 'md', 'lg'
+     */
+    size: {
+      type: String,
+      default: "lg",
+      validator: (e) => Object.keys(o).includes(e)
+    },
+    /**
+     * Header text
+     * @type {String}
+     */
+    headerText: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Body text
+     * @type {String}
+     */
+    bodyText: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    hasIcon() {
+      return this.$scopedSlots.icon && this.$scopedSlots.icon();
+    },
+    hasIllustration() {
+      return this.$scopedSlots.illustration && this.$scopedSlots.illustration();
+    },
+    isSmallSize() {
+      return this.size === "sm";
+    },
+    /**
+     * Icon will be shown in lg and md size only if illustration is not provided
+     * Icon will always be shown in sm size
+     */
+    showIcon() {
+      return this.hasIcon && (!this.hasIllustration || this.isSmallSize);
+    },
+    /**
+     * Illustration will always be shown in lg and md size
+     * Illustration will not be shown in sm size
+     */
+    showIllustration() {
+      return this.hasIllustration && !this.isSmallSize;
+    },
+    sizeClass() {
+      return o[this.size];
+    },
+    emptyStateClasses() {
+      return ["d-empty-state", this.sizeClass];
+    },
+    contentClass() {
+      return a[this.size];
+    },
+    headlineClass() {
+      return i[this.size];
+    },
+    bodyClass() {
+      return n[this.size];
+    }
+  },
+  mounted() {
+    !this.bodyText && !this.$slots.body && console.error("DtEmptyState: You should provide either bodyText or content on body slot.");
+  }
+};
+var d = function() {
+  var t = this, s = t._self._c;
+  return s("dt-stack", { class: t.emptyStateClasses }, [t.showIllustration ? s("span", { staticClass: "d-empty-state__illustration" }, [t._t("illustration")], 2) : t._e(), t.showIcon ? s("span", { staticClass: "d-empty-state__icon" }, [t._t("icon", null, { iconSize: "800" })], 2) : t._e(), s("dt-stack", { class: ["d-empty-state__content", t.contentClass], attrs: { gap: "450" } }, [s("div", { class: ["d-empty-state__header-text", t.headlineClass] }, [t._v(" " + t._s(t.headerText) + " ")]), t.bodyText ? s("p", { class: ["d-empty-state__body-text", t.bodyClass] }, [t._v(" " + t._s(t.bodyText) + " ")]) : t._e()]), t._t("body")], 2);
+}, c = [], h = /* @__PURE__ */ r(
+  _,
+  d,
+  c
+);
+const m = h.exports;
+export {
+  m as default
+};
+//# sourceMappingURL=empty-state.js.map

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

@@ -0,0 +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>\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';\nimport { DtStack } from '@/components/stack';\n\nexport default {\n  name: 'DtEmptyState',\n\n  components: {\n    DtStack,\n  },\n\n  props: {\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\n  computed: {\n    hasIcon () {\n      return this.$scopedSlots.icon && this.$scopedSlots.icon();\n    },\n\n    hasIllustration () {\n      return this.$scopedSlots.illustration && this.$scopedSlots.illustration();\n    },\n\n    isSmallSize () {\n      return this.size === 'sm';\n    },\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     */\n    showIcon () {\n      return this.hasIcon && (!this.hasIllustration || this.isSmallSize);\n    },\n\n    /**\n     * Illustration will always be shown in lg and md size\n     * Illustration will not be shown in sm size\n     */\n    showIllustration () {\n      return this.hasIllustration && !this.isSmallSize;\n    },\n\n    sizeClass () {\n      return EMPTY_STATE_SIZE_MODIFIERS[this.size];\n    },\n\n    emptyStateClasses () {\n      return ['d-empty-state', this.sizeClass];\n    },\n\n    contentClass () {\n      return EMPTY_STATE_CONTENT_SIZE_MODIFIERS[this.size];\n    },\n\n    headlineClass () {\n      return EMPTY_STATE_HEADLINE_SIZE_MODIFIERS[this.size];\n    },\n\n    bodyClass () {\n      return EMPTY_STATE_BODY_SIZE_MODIFIERS[this.size];\n    },\n  },\n\n  mounted () {\n    if (!this.bodyText && !this.$slots.body) {\n      console.error('DtEmptyState: You should provide either bodyText or content on body slot.');\n    }\n  },\n};\n</script>\n"],"names":["_sfc_main","DtStack","s","EMPTY_STATE_SIZE_MODIFIERS","EMPTY_STATE_CONTENT_SIZE_MODIFIERS","EMPTY_STATE_HEADLINE_SIZE_MODIFIERS","EMPTY_STATE_BODY_SIZE_MODIFIERS"],"mappings":";;;AAoDA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,SAAAC;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,KAAA,aAAA,QAAA,KAAA,aAAA;IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,gBAAA,KAAA,aAAA;IACA;AAAA,IAEA,cAAA;AACA,aAAA,KAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AACA,aAAA,KAAA,YAAA,CAAA,KAAA,mBAAA,KAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,mBAAA;AACA,aAAA,KAAA,mBAAA,CAAA,KAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,CAAA,iBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,eAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,IAEA,YAAA;AACA,aAAAC,EAAA,KAAA,IAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AACA,IAAA,CAAA,KAAA,YAAA,CAAA,KAAA,OAAA,QACA,QAAA,MAAA,2EAAA;AAAA,EAEA;AACA;;;;;;;;;;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./empty-state.cjs"),e=require("./empty-state-constants.cjs");exports.DtEmptyState=t.default;exports.EMPTY_STATE_SIZE_MODIFIERS=e.EMPTY_STATE_SIZE_MODIFIERS;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,7 @@
+import { default as e } from "./empty-state.js";
+import { EMPTY_STATE_SIZE_MODIFIERS as r } from "./empty-state-constants.js";
+export {
+  e as DtEmptyState,
+  r as EMPTY_STATE_SIZE_MODIFIERS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={default:"d-recipe-feed-item-pill__border--default",ai:"d-recipe-feed-item-pill__border--ai",critical:"d-recipe-feed-item-pill__border--critical"},i={FEED_ITEM_PILL_BORDER_COLORS:e};exports.FEED_ITEM_PILL_BORDER_COLORS=e;exports.default=i;
+//# sourceMappingURL=feed-item-pill-constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feed-item-pill-constants.cjs","sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n  default: 'd-recipe-feed-item-pill__border--default',\n  ai: 'd-recipe-feed-item-pill__border--ai',\n  critical: 'd-recipe-feed-item-pill__border--critical',\n};\n\nexport default {\n  FEED_ITEM_PILL_BORDER_COLORS,\n};\n"],"names":["FEED_ITEM_PILL_BORDER_COLORS","feed_item_pill_constants"],"mappings":"4GAAY,MAACA,EAA+B,CAC1C,QAAS,2CACT,GAAI,sCACJ,SAAU,2CACZ,EAEeC,EAAA,CACb,6BAAAD,CACF"}

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

@@ -0,0 +1,12 @@
+const e = {
+  default: "d-recipe-feed-item-pill__border--default",
+  ai: "d-recipe-feed-item-pill__border--ai",
+  critical: "d-recipe-feed-item-pill__border--critical"
+}, i = {
+  FEED_ITEM_PILL_BORDER_COLORS: e
+};
+export {
+  e as FEED_ITEM_PILL_BORDER_COLORS,
+  i as default
+};
+//# sourceMappingURL=feed-item-pill-constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feed-item-pill-constants.js","sources":["../../../recipes/conversation_view/feed_item_pill/feed_item_pill_constants.js"],"sourcesContent":["export const FEED_ITEM_PILL_BORDER_COLORS = {\n  default: 'd-recipe-feed-item-pill__border--default',\n  ai: 'd-recipe-feed-item-pill__border--ai',\n  critical: 'd-recipe-feed-item-pill__border--critical',\n};\n\nexport default {\n  FEED_ITEM_PILL_BORDER_COLORS,\n};\n"],"names":["FEED_ITEM_PILL_BORDER_COLORS","feed_item_pill_constants"],"mappings":"AAAY,MAACA,IAA+B;AAAA,EAC1C,SAAS;AAAA,EACT,IAAI;AAAA,EACJ,UAAU;AACZ,GAEeC,IAAA;AAAA,EACb,8BAAAD;AACF;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./feed-item-pill-constants.cjs"),o=require("@dialpad/dialtone-icons/vue2"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),s=require("../item-layout/item-layout.cjs"),a=require("../collapsible/collapsible.cjs"),u={name:"DtRecipeFeedItemPill",components:{DtItemLayout:s.default,DtCollapsible:a.default},props:{title:{type:String,default:()=>""},wrapperClass:{type:[String,Array,Object],default:""},buttonClass:{type:[String,Array,Object],default:""},ariaLabel:{type:String,required:!0},toggleable:{type:Boolean,default:()=>!0},defaultToggled:{type:Boolean,default:()=>!1},borderColor:{type:String,default:"default",validator:r=>Object.keys(i.FEED_ITEM_PILL_BORDER_COLORS).includes(r)}},data(){return{hover:!1,expanded:this.defaultToggled}},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]}},methods:{onClick(){this.toggleable&&(this.expanded=!this.expanded)}}};var c=function(){var e=this,t=e._self._c;return t("div",{class:["d-recipe-feed-item-pill__border",e.borderClass,e.wrapperClass]},[t("div",{staticClass:"d-recipe-feed-item-pill__wrapper"},[t("dt-collapsible",{attrs:{open:e.expanded},scopedSlots:e._u([{key:"anchor",fn:function(){return[t("button",{class:["d-recipe-feed-item-pill__button",e.toggleableClass,e.buttonClass],attrs:{"data-qa":"dt-recipe-feed-item-pill","aria-label":e.ariaLabel},on:{focusin:function(l){e.hover=!0},focusout:function(l){e.hover=!1},mouseenter:function(l){e.hover=!0},mouseleave:function(l){e.hover=!1},click:e.onClick}},[t("dt-item-layout",{staticClass:"d-recipe-feed-item-pill__layout",attrs:{unstyled:""},scopedSlots:e._u([{key:"left",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__icon",attrs:{"data-qa":"dt-recipe-feed-item-pill__icon"}},[e.showChevronIcon?t(e.toggleIcon,{tag:"component",attrs:{size:"300"}}):e._t("leftIcon",null,{iconSize:"300"})],2)]},proxy:!0},e.$slots.subtitle?{key:"subtitle",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__subtitle"},[e._t("subtitle")],2)]},proxy:!0}:null,e.$slots.bottom?{key:"bottom",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__bottom"},[e._t("bottom")],2)]},proxy:!0}:null,e.$slots.right?{key:"right",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__right"},[e._t("right")],2)]},proxy:!0}:null],null,!0)},[e._t("title",function(){return[t("span",{staticClass:"d-recipe-feed-item-pill__title"},[e._v(e._s(e.title))])]})],2)],1)]},proxy:!0},e.$slots.content?{key:"content",fn:function(){return[t("div",{staticClass:"d-recipe-feed-item-pill__content"},[e._t("content")],2)]},proxy:!0}:null],null,!0)})],1)])},d=[],p=n.n(u,c,d);const _=p.exports;exports.default=_;
+//# sourceMappingURL=feed-item-pill.cjs.map

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

@@ -0,0 +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            :aria-label=\"ariaLabel\"\n            :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\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/vue2';\n\nexport default {\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     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\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    };\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\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","DtIconChevronDown","DtIconChevronRight"],"mappings":"wVAsFAA,EAAA,CACA,KAAA,uBAEA,WAAA,CAAA,aAAAC,EAAA,QAAA,cAAAC,SAAA,EAEA,MAAA,CAIA,MAAA,CACA,KAAA,OACA,QAAA,IAAA,EACA,EAKA,aAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,OACA,SAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,IAAA,EACA,EAEA,eAAA,CACA,KAAA,QACA,QAAA,IAAA,EACA,EAMA,YAAA,CACA,KAAA,OACA,QAAA,UACA,UAAAC,GAAA,OAAA,KAAAC,8BAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,MAAA,GACA,SAAA,KAAA,cACA,CACA,EAEA,SAAA,CACA,YAAA,CACA,OAAA,KAAA,SAAAE,EAAA,kBAAAC,oBACA,EAEA,iBAAA,CACA,OAAA,KAAA,YAAA,KAAA,KACA,EAEA,iBAAA,CACA,OAAA,KAAA,WAAA,sCAAA,EACA,EAEA,aAAA,CACA,OAAAF,EAAA,6BAAA,KAAA,WAAA,CACA,CACA,EAEA,QAAA,CACA,SAAA,CACA,KAAA,aAEA,KAAA,SAAA,CAAA,KAAA,SACA,CACA,CACA"}

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

@@ -0,0 +1,119 @@
+import { FEED_ITEM_PILL_BORDER_COLORS as o } from "./feed-item-pill-constants.js";
+import { DtIconChevronDown as i, DtIconChevronRight as n } from "@dialpad/dialtone-icons/vue2";
+import { n as s } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import a from "../item-layout/item-layout.js";
+import d from "../collapsible/collapsible.js";
+const u = {
+  name: "DtRecipeFeedItemPill",
+  components: { DtItemLayout: a, DtCollapsible: d },
+  props: {
+    /**
+     * Bolded primary text
+     */
+    title: {
+      type: String,
+      default: () => ""
+    },
+    /**
+     * Additional styling around the pill
+     */
+    wrapperClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Additional styling for the pill
+     */
+    buttonClass: {
+      type: [String, Array, Object],
+      default: ""
+    },
+    /**
+     * Aria label for feed pill
+     */
+    ariaLabel: {
+      type: String,
+      required: !0
+    },
+    /**
+     * Sets whether the pill can be toggled (Icon changing on hover, expanding and collapsing, pointer)
+     */
+    toggleable: {
+      type: Boolean,
+      default: () => !0
+    },
+    defaultToggled: {
+      type: Boolean,
+      default: () => !1
+    },
+    /**
+     * Callbox border color
+     * @values default, ai, critical
+     */
+    borderColor: {
+      type: String,
+      default: "default",
+      validator: (l) => Object.keys(o).includes(l)
+    }
+  },
+  data() {
+    return {
+      hover: !1,
+      expanded: this.defaultToggled
+    };
+  },
+  computed: {
+    toggleIcon() {
+      return this.expanded ? i : n;
+    },
+    showChevronIcon() {
+      return this.toggleable && this.hover;
+    },
+    toggleableClass() {
+      return this.toggleable ? "d-recipe-feed-item-pill--toggleable" : "";
+    },
+    borderClass() {
+      return o[this.borderColor];
+    }
+  },
+  methods: {
+    onClick() {
+      this.toggleable && (this.expanded = !this.expanded);
+    }
+  }
+};
+var c = function() {
+  var e = this, t = e._self._c;
+  return t("div", { class: ["d-recipe-feed-item-pill__border", e.borderClass, e.wrapperClass] }, [t("div", { staticClass: "d-recipe-feed-item-pill__wrapper" }, [t("dt-collapsible", { attrs: { open: e.expanded }, scopedSlots: e._u([{ key: "anchor", fn: function() {
+    return [t("button", { class: ["d-recipe-feed-item-pill__button", e.toggleableClass, e.buttonClass], attrs: { "data-qa": "dt-recipe-feed-item-pill", "aria-label": e.ariaLabel }, on: { focusin: function(r) {
+      e.hover = !0;
+    }, focusout: function(r) {
+      e.hover = !1;
+    }, mouseenter: function(r) {
+      e.hover = !0;
+    }, mouseleave: function(r) {
+      e.hover = !1;
+    }, click: e.onClick } }, [t("dt-item-layout", { staticClass: "d-recipe-feed-item-pill__layout", attrs: { unstyled: "" }, scopedSlots: e._u([{ key: "left", fn: function() {
+      return [t("div", { staticClass: "d-recipe-feed-item-pill__icon", attrs: { "data-qa": "dt-recipe-feed-item-pill__icon" } }, [e.showChevronIcon ? t(e.toggleIcon, { tag: "component", attrs: { size: "300" } }) : e._t("leftIcon", null, { iconSize: "300" })], 2)];
+    }, proxy: !0 }, e.$slots.subtitle ? { key: "subtitle", fn: function() {
+      return [t("div", { staticClass: "d-recipe-feed-item-pill__subtitle" }, [e._t("subtitle")], 2)];
+    }, proxy: !0 } : null, e.$slots.bottom ? { key: "bottom", fn: function() {
+      return [t("div", { staticClass: "d-recipe-feed-item-pill__bottom" }, [e._t("bottom")], 2)];
+    }, proxy: !0 } : null, e.$slots.right ? { key: "right", fn: function() {
+      return [t("div", { staticClass: "d-recipe-feed-item-pill__right" }, [e._t("right")], 2)];
+    }, proxy: !0 } : null], null, !0) }, [e._t("title", function() {
+      return [t("span", { staticClass: "d-recipe-feed-item-pill__title" }, [e._v(e._s(e.title))])];
+    })], 2)], 1)];
+  }, proxy: !0 }, e.$slots.content ? { key: "content", fn: function() {
+    return [t("div", { staticClass: "d-recipe-feed-item-pill__content" }, [e._t("content")], 2)];
+  }, proxy: !0 } : null], null, !0) })], 1)]);
+}, p = [], f = /* @__PURE__ */ s(
+  u,
+  c,
+  p
+);
+const v = f.exports;
+export {
+  v as default
+};
+//# sourceMappingURL=feed-item-pill.js.map

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

@@ -0,0 +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            :aria-label=\"ariaLabel\"\n            :class=\"['d-recipe-feed-item-pill__button', toggleableClass, buttonClass]\"\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/vue2';\n\nexport default {\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     * Aria label for feed pill\n     */\n    ariaLabel: {\n      type: String,\n      required: true,\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    };\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\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","DtIconChevronDown","DtIconChevronRight"],"mappings":";;;;;AAsFA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA,EAAA,cAAAC,GAAA,eAAAC,EAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,cAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA,IAEA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA,KAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,aAAA;AACA,aAAA,KAAA,WAAAE,IAAAC;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,cAAA,KAAA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA,KAAA,aAAA,wCAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAAF,EAAA,KAAA,WAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,UAAA;AACA,MAAA,KAAA,eAEA,KAAA,WAAA,CAAA,KAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./feed-item-pill.cjs"),t=require("./feed-item-pill-constants.cjs");exports.DtRecipeFeedItemPill=e.default;exports.FEED_ITEM_PILL_BORDER_COLORS=t.FEED_ITEM_PILL_BORDER_COLORS;
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

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

@@ -0,0 +1,7 @@
+import { default as o } from "./feed-item-pill.js";
+import { FEED_ITEM_PILL_BORDER_COLORS as E } from "./feed-item-pill-constants.js";
+export {
+  o as DtRecipeFeedItemPill,
+  E as FEED_ITEM_PILL_BORDER_COLORS
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e={NORMAL:"",SEARCHED:"d-recipe-feed-item-row__state--searched",ERROR:"d-recipe-feed-item-row__state--error"},_="NORMAL",t={FEED_ROW_STATE_BACKGROUND_COLOR:e,DEFAULT_FEED_ROW_STATE:_};exports.DEFAULT_FEED_ROW_STATE=_;exports.FEED_ROW_STATE_BACKGROUND_COLOR=e;exports.default=t;
+//# sourceMappingURL=feed-item-row-constants.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"feed-item-row-constants.cjs","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row_constants.js"],"sourcesContent":["export const FEED_ROW_STATE_BACKGROUND_COLOR = {\n  NORMAL: '',\n  SEARCHED: 'd-recipe-feed-item-row__state--searched',\n  ERROR: 'd-recipe-feed-item-row__state--error',\n};\n\nexport const DEFAULT_FEED_ROW_STATE = 'NORMAL';\n\nexport default {\n  FEED_ROW_STATE_BACKGROUND_COLOR,\n  DEFAULT_FEED_ROW_STATE,\n};\n"],"names":["FEED_ROW_STATE_BACKGROUND_COLOR","DEFAULT_FEED_ROW_STATE","feed_item_row_constants"],"mappings":"4GAAY,MAACA,EAAkC,CAC7C,OAAQ,GACR,SAAU,0CACV,MAAO,sCACT,EAEaC,EAAyB,SAEvBC,EAAA,CACb,gCAAAF,EACA,uBAAAC,CACF"}

package/dist/vue2/lib/feed-item-row/feed-item-row-constants.js

@@ -0,0 +1,14 @@
+const e = {
+  NORMAL: "",
+  SEARCHED: "d-recipe-feed-item-row__state--searched",
+  ERROR: "d-recipe-feed-item-row__state--error"
+}, t = "NORMAL", _ = {
+  FEED_ROW_STATE_BACKGROUND_COLOR: e,
+  DEFAULT_FEED_ROW_STATE: t
+};
+export {
+  t as DEFAULT_FEED_ROW_STATE,
+  e as FEED_ROW_STATE_BACKGROUND_COLOR,
+  _ as default
+};
+//# sourceMappingURL=feed-item-row-constants.js.map

package/dist/vue2/lib/feed-item-row/feed-item-row-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feed-item-row-constants.js","sources":["../../../recipes/conversation_view/feed_item_row/feed_item_row_constants.js"],"sourcesContent":["export const FEED_ROW_STATE_BACKGROUND_COLOR = {\n  NORMAL: '',\n  SEARCHED: 'd-recipe-feed-item-row__state--searched',\n  ERROR: 'd-recipe-feed-item-row__state--error',\n};\n\nexport const DEFAULT_FEED_ROW_STATE = 'NORMAL';\n\nexport default {\n  FEED_ROW_STATE_BACKGROUND_COLOR,\n  DEFAULT_FEED_ROW_STATE,\n};\n"],"names":["FEED_ROW_STATE_BACKGROUND_COLOR","DEFAULT_FEED_ROW_STATE","feed_item_row_constants"],"mappings":"AAAY,MAACA,IAAkC;AAAA,EAC7C,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,OAAO;AACT,GAEaC,IAAyB,UAEvBC,IAAA;AAAA,EACb,iCAAAF;AAAA,EACA,wBAAAC;AACF;"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("./feed-item-row-constants.cjs"),r=require("../../common/mixins/modal.cjs"),o=require("@dialpad/dialtone-icons/vue2"),n=require("../../_plugin-vue2_normalizer-e_CkxkSV.cjs"),d=require("../avatar/avatar.cjs"),c=require("../lazy-show/lazy-show.cjs"),l=require("../list-item/list-item.cjs"),_=require("../badge/badge.cjs"),u={name:"DtRecipeFeedItemRow",components:{DtAvatar:d.default,DtLazyShow:c.default,DtListItem:l.default,DtBadge:_.default,DtIconUser:o.DtIconUser},mixins:[r.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:i.DEFAULT_FEED_ROW_STATE,validator:a=>Object.keys(i.FEED_ROW_STATE_BACKGROUND_COLOR).includes(a)}},emits:["hover","focus","keydown"],data(){return{transitionActive:!1}},computed:{feedListeners(){return{...this.$listeners,mouseenter:()=>this.setHover(!0),mouseleave:()=>this.setHover(!1),focusin:()=>this.setFocus(!0),focusout:()=>this.setFocus(!1),transitionend:()=>this.transitionComplete(),keydown:a=>{switch(a.code){case"Tab":this.trapFocus(a);break}this.$emit("keydown",a)}}},listItemClasses(){return["d-recipe-feed-item-row",{"d-recipe-feed-item-row--active":this.isActive&&this.state===i.DEFAULT_FEED_ROW_STATE},{"d-recipe-feed-item-row__state-transition":this.transitionActive},i.FEED_ROW_STATE_BACKGROUND_COLOR[this.state]]}},watch:{state:{immediate:!0,handler:function(a,e){a!==i.DEFAULT_FEED_ROW_STATE&&(this.transitionActive=!0)}}},methods:{transitionComplete(){this.state===i.DEFAULT_FEED_ROW_STATE&&(this.transitionActive=!1)},trapFocus(a){this.focusTrappedTabPress(a)},setFocus(a){this.$emit("focus",a)},setHover(a){this.$emit("hover",a)}}};var m=function(){var e=this,t=e._self._c;return t("dt-list-item",e._g(e._b({ref:"FeedItemRef",class:e.listItemClasses,attrs:{"navigation-type":"none","data-qa":"dt-recipe-feed-item-row"},scopedSlots:e._u([{key:"left",fn:function(){return[e.showHeader?t("div",{staticClass:"d-recipe-feed-item-row__avatar-container"},[e._t("avatar",function(){return[t("dt-avatar",{attrs:{"full-name":e.displayName,"image-src":e.avatarImageUrl,"image-alt":"",seed:e.avatarSeed},scopedSlots:e._u([e.noInitials?{key:"icon",fn:function({iconSize:s}){return[t("dt-icon-user",{attrs:{size:s}})]}}:null],null,!0)})]})],2):e._e(),e.showHeader?e._e():t("span",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"d-recipe-feed-item-row__left-time",attrs:{"data-qa":"dt-recipe-feed-item-row--left-time"}},[e._v(" "+e._s(e.shortTime)+" ")])]},proxy:!0},{key:"bottom",fn:function(){return[e.$slots.reactions?t("div",{staticClass:"d-recipe-feed-item-row__reactions",attrs:{"data-qa":"dt-recipe-feed-item-row--reactions"}},[e._t("reactions")],2):e._e(),e.$slots.threading?t("div",{staticClass:"d-recipe-feed-item-row__threading"},[e._t("threading")],2):e._e(),t("div",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"d-recipe-feed-item-row__menu",attrs:{"data-qa":"dt-recipe-feed-item-row--menu"}},[t("dt-lazy-show",{attrs:{appear:!0,transition:"fade",show:e.isActive}},[e._t("menu")],2)],1)]},proxy:!0}],null,!0)},"dt-list-item",e.$attrs,!1),e.feedListeners),[t("article",{staticClass:"d-recipe-feed-item-row__content"},[e.showHeader?t("div",{staticClass:"d-recipe-feed-item-row__header",attrs:{"data-qa":"dt-recipe-feed-item-row--header"}},[e._t("displayName",function(){return[t("p",{staticClass:"d-recipe-feed-item-row__header-name"},[e._v(" "+e._s(e.displayName)+" ")])]}),t("time",{staticClass:"d-recipe-feed-item-row__header-time"},[e._v(" "+e._s(e.time)+" ")]),e.labelText?t("dt-badge",{attrs:{text:e.labelText}}):e._e()],2):e._e(),t("span",{attrs:{"data-qa":"dt-recipe-feed-item-row--content"}},[e._t("default")],2),e.$slots.attachment?t("div",{staticClass:"d-recipe-feed-item-row__attachment",attrs:{"data-qa":"dt-recipe-feed-item-row--attachment"}},[e._t("attachment")],2):e._e()])])},f=[],p=n.n(u,m,f);const h=p.exports;exports.default=h;
+//# sourceMappingURL=feed-item-row.cjs.map

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

@@ -0,0 +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=\"$slots.attachment\"\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>\n/* eslint-disable max-lines */\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/vue2';\n\nexport default {\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        ...this.$listeners,\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\n  watch: {\n    state: {\n      immediate: true,\n      handler: function (newState, oldState) {\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","newState","oldState","e","bool"],"mappings":"4bAsIAA,EAAA,CACA,KAAA,sBAEA,WAAA,CACA,SAAAC,EAAA,QACA,WAAAC,EAAA,QACA,WAAAC,EAAA,QACA,QAAAC,EAAA,QACA,WAAAC,EAAA,UACA,EAEA,OAAA,CAAAC,EAAAA,OAAA,EAEA,aAAA,GAEA,MAAA,CAIA,WAAA,CACA,KAAA,OACA,QAAA,IACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,eAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,YAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,WAAA,CACA,KAAA,QACA,QAAA,EACA,EAMA,KAAA,CACA,KAAA,OACA,QAAA,EACA,EAMA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,UAAA,CACA,KAAA,OACA,QAAA,EACA,EAKA,SAAA,CACA,KAAA,QACA,QAAA,EACA,EAKA,MAAA,CACA,KAAA,OACA,QAAAC,EAAA,uBACA,UAAAC,GAAA,OAAA,KAAAC,EAAAA,+BAAA,EAAA,SAAAD,CAAA,CACA,CACA,EAEA,MAAA,CAOA,QAQA,QAQA,SACA,EAEA,MAAA,CACA,MAAA,CACA,iBAAA,EACA,CACA,EAEA,SAAA,CACA,eAAA,CACA,MAAA,CACA,GAAA,KAAA,WACA,WAAA,IAAA,KAAA,SAAA,EAAA,EACA,WAAA,IAAA,KAAA,SAAA,EAAA,EACA,QAAA,IAAA,KAAA,SAAA,EAAA,EACA,SAAA,IAAA,KAAA,SAAA,EAAA,EACA,cAAA,IAAA,KAAA,mBAAA,EACA,QAAAE,GAAA,CACA,OAAAA,EAAA,KAAA,CACA,IAAA,MACA,KAAA,UAAAA,CAAA,EACA,KACA,CACA,KAAA,MAAA,UAAAA,CAAA,CACA,CACA,CACA,EAEA,iBAAA,CACA,MAAA,CACA,yBACA,CAAA,iCAAA,KAAA,UAAA,KAAA,QAAAH,EAAAA,sBAAA,EACA,CAAA,2CAAA,KAAA,gBAAA,EACAE,EAAA,gCAAA,KAAA,KAAA,CAEA,CACA,CACA,EAEA,MAAA,CACA,MAAA,CACA,UAAA,GACA,QAAA,SAAAE,EAAAC,EAAA,CACAD,IAAAJ,EAAAA,yBACA,KAAA,iBAAA,GAEA,CACA,CACA,EAEA,QAAA,CACA,oBAAA,CACA,KAAA,QAAAA,2BACA,KAAA,iBAAA,GAEA,EAEA,UAAAM,EAAA,CACA,KAAA,qBAAAA,CAAA,CACA,EAEA,SAAAC,EAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,EAEA,SAAAA,EAAA,CACA,KAAA,MAAA,QAAAA,CAAA,CACA,CACA,CACA"}

package/dist/vue2/lib/feed-item-row/feed-item-row.js

@@ -0,0 +1,197 @@
+import { DEFAULT_FEED_ROW_STATE as i, FEED_ROW_STATE_BACKGROUND_COLOR as s } from "./feed-item-row-constants.js";
+import o from "../../common/mixins/modal.js";
+import { DtIconUser as n } from "@dialpad/dialtone-icons/vue2";
+import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
+import c from "../avatar/avatar.js";
+import m from "../lazy-show/lazy-show.js";
+import l from "../list-item/list-item.js";
+import f from "../badge/badge.js";
+const p = {
+  name: "DtRecipeFeedItemRow",
+  components: {
+    DtAvatar: c,
+    DtLazyShow: m,
+    DtListItem: l,
+    DtBadge: f,
+    DtIconUser: n
+  },
+  mixins: [o],
+  inheritAttrs: !1,
+  props: {
+    /**
+     * Avatar seed, set this to the user's ID to get the same avatar background gradient each time it is displayed.
+     */
+    avatarSeed: {
+      type: String,
+      default: null
+    },
+    /**
+     * Show avatar, show header text or dont show left time and vice versa
+     */
+    showHeader: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Optional avatar image url.
+     * If not provided it will use extracted initials from displayName.
+     */
+    avatarImageUrl: {
+      type: String,
+      default: ""
+    },
+    /**
+     * The display name of the sender
+     */
+    displayName: {
+      type: String,
+      default: ""
+    },
+    /**
+     * Initials will never be shown. Instead it will show a "User" icon.
+     */
+    noInitials: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * time string displayed as is.
+     * Shown on the header when showHeader is true
+     */
+    time: {
+      type: String,
+      default: ""
+    },
+    /**
+     * short time string without AM/PM displayed as is.
+     * Shown on the left of feed item when showHeader is false and isActive is true
+     */
+    shortTime: {
+      type: String,
+      default: ""
+    },
+    /**
+     * A label displayed next to the displayName. Will not show if empty.
+     */
+    labelText: {
+      type: String,
+      default: ""
+    },
+    /**
+     * displays a darkened background on the row.
+     */
+    isActive: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * state for the feed item row. Can be normal, searched & error
+     */
+    state: {
+      type: String,
+      default: i,
+      validator: (a) => Object.keys(s).includes(a)
+    }
+  },
+  emits: [
+    /**
+     * Fires when hovered over feed row
+     *
+     * @event hover
+     * @type {Boolean}
+     */
+    "hover",
+    /**
+     * Fires when focused over feed row
+     *
+     * @event focus
+     * @type {Boolean}
+     */
+    "focus",
+    /**
+     * Key down event
+     *
+     * @event keydown
+     * @type {KeyboardEvent}
+     */
+    "keydown"
+  ],
+  data() {
+    return {
+      transitionActive: !1
+    };
+  },
+  computed: {
+    feedListeners() {
+      return {
+        ...this.$listeners,
+        mouseenter: () => this.setHover(!0),
+        mouseleave: () => this.setHover(!1),
+        focusin: () => this.setFocus(!0),
+        focusout: () => this.setFocus(!1),
+        transitionend: () => this.transitionComplete(),
+        keydown: (a) => {
+          switch (a.code) {
+            case "Tab":
+              this.trapFocus(a);
+              break;
+          }
+          this.$emit("keydown", a);
+        }
+      };
+    },
+    listItemClasses() {
+      return [
+        "d-recipe-feed-item-row",
+        { "d-recipe-feed-item-row--active": this.isActive && this.state === i },
+        { "d-recipe-feed-item-row__state-transition": this.transitionActive },
+        s[this.state]
+      ];
+    }
+  },
+  watch: {
+    state: {
+      immediate: !0,
+      handler: function(a, e) {
+        a !== i && (this.transitionActive = !0);
+      }
+    }
+  },
+  methods: {
+    transitionComplete() {
+      this.state === i && (this.transitionActive = !1);
+    },
+    trapFocus(a) {
+      this.focusTrappedTabPress(a);
+    },
+    setFocus(a) {
+      this.$emit("focus", a);
+    },
+    setHover(a) {
+      this.$emit("hover", a);
+    }
+  }
+};
+var _ = function() {
+  var e = this, t = e._self._c;
+  return t("dt-list-item", e._g(e._b({ ref: "FeedItemRef", class: e.listItemClasses, attrs: { "navigation-type": "none", "data-qa": "dt-recipe-feed-item-row" }, scopedSlots: e._u([{ key: "left", fn: function() {
+    return [e.showHeader ? t("div", { staticClass: "d-recipe-feed-item-row__avatar-container" }, [e._t("avatar", function() {
+      return [t("dt-avatar", { attrs: { "full-name": e.displayName, "image-src": e.avatarImageUrl, "image-alt": "", seed: e.avatarSeed }, scopedSlots: e._u([e.noInitials ? { key: "icon", fn: function({ iconSize: r }) {
+        return [t("dt-icon-user", { attrs: { size: r } })];
+      } } : null], null, !0) })];
+    })], 2) : e._e(), e.showHeader ? e._e() : t("span", { directives: [{ name: "show", rawName: "v-show", value: e.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__left-time", attrs: { "data-qa": "dt-recipe-feed-item-row--left-time" } }, [e._v(" " + e._s(e.shortTime) + " ")])];
+  }, proxy: !0 }, { key: "bottom", fn: function() {
+    return [e.$slots.reactions ? t("div", { staticClass: "d-recipe-feed-item-row__reactions", attrs: { "data-qa": "dt-recipe-feed-item-row--reactions" } }, [e._t("reactions")], 2) : e._e(), e.$slots.threading ? t("div", { staticClass: "d-recipe-feed-item-row__threading" }, [e._t("threading")], 2) : e._e(), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.isActive, expression: "isActive" }], staticClass: "d-recipe-feed-item-row__menu", attrs: { "data-qa": "dt-recipe-feed-item-row--menu" } }, [t("dt-lazy-show", { attrs: { appear: !0, transition: "fade", show: e.isActive } }, [e._t("menu")], 2)], 1)];
+  }, proxy: !0 }], null, !0) }, "dt-list-item", e.$attrs, !1), e.feedListeners), [t("article", { staticClass: "d-recipe-feed-item-row__content" }, [e.showHeader ? t("div", { staticClass: "d-recipe-feed-item-row__header", attrs: { "data-qa": "dt-recipe-feed-item-row--header" } }, [e._t("displayName", function() {
+    return [t("p", { staticClass: "d-recipe-feed-item-row__header-name" }, [e._v(" " + e._s(e.displayName) + " ")])];
+  }), t("time", { staticClass: "d-recipe-feed-item-row__header-time" }, [e._v(" " + e._s(e.time) + " ")]), e.labelText ? t("dt-badge", { attrs: { text: e.labelText } }) : e._e()], 2) : e._e(), t("span", { attrs: { "data-qa": "dt-recipe-feed-item-row--content" } }, [e._t("default")], 2), e.$slots.attachment ? t("div", { staticClass: "d-recipe-feed-item-row__attachment", attrs: { "data-qa": "dt-recipe-feed-item-row--attachment" } }, [e._t("attachment")], 2) : e._e()])]);
+}, u = [], h = /* @__PURE__ */ d(
+  p,
+  _,
+  u
+);
+const x = h.exports;
+export {
+  x as default
+};
+//# sourceMappingURL=feed-item-row.js.map

package/dist/vue2/lib/feed-item-row/feed-item-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feed-item-row.js","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=\"$slots.attachment\"\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>\n/* eslint-disable max-lines */\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/vue2';\n\nexport default {\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        ...this.$listeners,\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\n  watch: {\n    state: {\n      immediate: true,\n      handler: function (newState, oldState) {\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","newState","oldState","e","bool"],"mappings":";;;;;;;;AAsIA,MAAAA,IAAA;AAAA,EACA,MAAA;AAAA,EAEA,YAAA;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,EACA;AAAA,EAEA,QAAA,CAAAC,CAAA;AAAA,EAEA,cAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA,IAIA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,gBAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,aAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,YAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,MAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,UAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAAC;AAAA,MACA,WAAA,CAAAC,MAAA,OAAA,KAAAC,CAAA,EAAA,SAAAD,CAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAQA;AAAA,EACA;AAAA,EAEA,OAAA;AACA,WAAA;AAAA,MACA,kBAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,gBAAA;AACA,aAAA;AAAA,QACA,GAAA,KAAA;AAAA,QACA,YAAA,MAAA,KAAA,SAAA,EAAA;AAAA,QACA,YAAA,MAAA,KAAA,SAAA,EAAA;AAAA,QACA,SAAA,MAAA,KAAA,SAAA,EAAA;AAAA,QACA,UAAA,MAAA,KAAA,SAAA,EAAA;AAAA,QACA,eAAA,MAAA,KAAA,mBAAA;AAAA,QACA,SAAA,CAAAE,MAAA;AACA,kBAAAA,EAAA,MAAA;AAAA,YACA,KAAA;AACA,mBAAA,UAAAA,CAAA;AACA;AAAA,UACA;AACA,eAAA,MAAA,WAAAA,CAAA;AAAA,QACA;AAAA,MACA;AAAA,IACA;AAAA,IAEA,kBAAA;AACA,aAAA;AAAA,QACA;AAAA,QACA,EAAA,kCAAA,KAAA,YAAA,KAAA,UAAAH,EAAA;AAAA,QACA,EAAA,4CAAA,KAAA,iBAAA;AAAA,QACAE,EAAA,KAAA,KAAA;AAAA,MAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,OAAA;AAAA,IACA,OAAA;AAAA,MACA,WAAA;AAAA,MACA,SAAA,SAAAE,GAAAC,GAAA;AACA,QAAAD,MAAAJ,MACA,KAAA,mBAAA;AAAA,MAEA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,SAAA;AAAA,IACA,qBAAA;AACA,MAAA,KAAA,UAAAA,MACA,KAAA,mBAAA;AAAA,IAEA;AAAA,IAEA,UAAAM,GAAA;AACA,WAAA,qBAAAA,CAAA;AAAA,IACA;AAAA,IAEA,SAAAC,GAAA;AACA,WAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,IAEA,SAAAA,GAAA;AACA,WAAA,MAAA,SAAAA,CAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;;;;;;"}