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

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/vue";
+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/vue';\nimport { DialtoneLocalization } from '@/localization';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeFeedItemPill',\n\n  components: { DtItemLayout, DtCollapsible },\n\n  props: {\n    /**\n     * Bolded primary text\n     */\n    title: {\n      type: String,\n      default: () => '',\n    },\n\n    /**\n     * Additional styling 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/vue"),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/vue';\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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"}

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

@@ -1,8 +1,8 @@
 import { DEFAULT_FEED_ROW_STATE as c, FEED_ROW_STATE_BACKGROUND_COLOR as _ } from "./feed-item-row-constants.js";
-import k from "../../common/mixins/modal.js";
-import { DtIconUser as C } from "@dialpad/dialtone-icons/vue3";
+import S from "../../common/mixins/modal.js";
+import { DtIconUser as C } from "@dialpad/dialtone-icons/vue";
 import { hasSlotContent as D } from "../../common/utils/index.js";
-import { resolveComponent as r, openBlock as a, createBlock as h, mergeProps as T, toHandlers as b, withCtx as n, createElementVNode as d, createElementBlock as o, renderSlot as i, toDisplayString as l, createCommentVNode as s, withDirectives as u, createVNode as f, vShow as p, createSlots as E } from "vue";
+import { resolveComponent as r, openBlock as a, createBlock as h, mergeProps as T, toHandlers as E, withCtx as n, createElementVNode as d, createElementBlock as o, renderSlot as i, toDisplayString as l, createCommentVNode as s, withDirectives as u, createVNode as f, vShow as p, createSlots as b } from "vue";
 import { _ as F } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
 import I from "../badge/badge.js";
 import B from "../list-item/list-item.js";
@@ -18,7 +18,7 @@ const q = {
     DtBadge: I,
     DtIconUser: C
   },
-  mixins: [k],
+  mixins: [S],
   inheritAttrs: !1,
   props: {
     /**
@@ -199,15 +199,15 @@ const q = {
   class: "d-recipe-feed-item-row__menu"
 };
 function G(e, K, t, x, J, m) {
-  const w = r("dt-icon-user"), v = r("dt-avatar"), y = r("dt-badge"), g = r("dt-lazy-show"), A = r("dt-list-item");
-  return a(), h(A, T({
+  const w = r("dt-icon-user"), v = r("dt-avatar"), y = r("dt-badge"), g = r("dt-lazy-show"), k = r("dt-list-item");
+  return a(), h(k, T({
     ref: "FeedItemRef",
     "navigation-type": "none"
   }, e.$attrs, {
     class: m.listItemClasses,
     "data-qa": "dt-recipe-feed-item-row"
-  }, b(m.feedListeners)), {
-    left: n(() => [
+  }, E(m.feedListeners)), {
+    start: n(() => [
       t.showHeader ? (a(), o("div", O, [
         i(e.$slots, "avatar", {}, () => [
           f(v, {
@@ -215,11 +215,11 @@ function G(e, K, t, x, J, m) {
             "image-src": t.avatarImageUrl,
             "image-alt": "",
             seed: t.avatarSeed
-          }, E({ _: 2 }, [
+          }, b({ _: 2 }, [
             t.noInitials ? {
               name: "icon",
-              fn: n(({ iconSize: S }) => [
-                f(w, { size: S }, null, 8, ["size"])
+              fn: n(({ iconSize: A }) => [
+                f(w, { size: A }, null, 8, ["size"])
               ]),
               key: "0"
             } : void 0
@@ -234,7 +234,7 @@ function G(e, K, t, x, J, m) {
         [p, t.isActive]
       ])
     ]),
-    bottom: n(() => [
+    blockEnd: n(() => [
       e.$slots.reactions ? (a(), o("div", P, [
         i(e.$slots, "reactions")
       ])) : s("", !0),

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

@@ -1 +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=\"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","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.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 #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/vue';\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","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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"}

package/dist/lib/filter-pill/filter-pill.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const b=require("../../mode_constants-DeLSnTcQ.cjs"),u=require("@dialpad/dialtone-icons/vue"),k=require("../../localization/index.cjs"),e=require("vue"),g=require("../../_plugin-vue_export-helper-BRilXfQE.cjs"),S=require("../stack/stack.cjs"),w=require("../list-item/list-item.cjs"),F=require("../dropdown/dropdown.cjs"),L=require("../button/button.cjs"),B=require("../popover/popover.cjs"),D=require("../checkbox/checkbox.cjs"),T=require("../checkbox-group/checkbox-group.cjs"),O=require("../button/button-constants.cjs"),p=require("../popover/popover-constants.cjs"),x={name:"DtFilterPill",components:{DtCheckboxGroup:T.default,DtCheckbox:D.default,DtPopover:B.default,DtButton:L.default,DtIconClose:u.DtIconClose,DtIconChevronDown:u.DtIconChevronDown,DtDropdown:F.default,DtListItem:w.default,DtStack:S.default},inheritAttrs:!1,props:{useDropdown:{type:Boolean,default:!1},deferSelection:{type:Boolean,default:!1},modelValue:{type:Array,default:()=>[]},startTooltipText:{type:String,default:""},disabled:{type:Boolean,default:!1},readOnly:{type:Boolean,default:!1},hideClear:{type:Boolean,default:!1},label:{type:String,default:void 0},endTooltipText:{type:String,default:""},popoverAppendTo:{type:[HTMLElement,String],default:"body",validator:t=>p.POPOVER_APPEND_TO_VALUES.includes(t)||t instanceof HTMLElement},popoverFallbackPlacements:{type:Array,default:()=>["auto"]},popoverMaxHeight:{type:String,default:""},popoverMaxWidth:{type:String,default:""},popoverPadding:{type:String,default:"large",validator:t=>Object.keys(p.POPOVER_PADDING_CLASSES).some(r=>r===t)},popoverPlacement:{type:String,default:"bottom-start"},popoverContentClass:{type:[String,Array,Object],default:""},popoverHeaderClass:{type:[String,Array,Object],default:""},popoverFooterClass:{type:[String,Array,Object],default:""},popoverDialogClass:{type:[String,Array,Object],default:""},dropdownListClass:{type:[String,Array,Object],default:""},contentMode:b.C,size:{type:[String,Number],default:200,validator:t=>Object.keys(O.BUTTON_SIZE_MODIFIERS).includes(String(t))}},emits:["clear","open","update:modelValue","apply"],data(){return{isOpen:!1,i18n:new k.DialtoneLocalization,filters:this.modelValue,pendingFilters:null}},computed:{overlayComponent(){return this.useDropdown?"dt-dropdown":"dt-popover"},overlayProps(){const t={"append-to":this.popoverAppendTo,"fallback-placements":this.popoverFallbackPlacements,"max-height":this.popoverMaxHeight,"max-width":this.popoverMaxWidth,modal:!0,placement:this.popoverPlacement};return this.useDropdown?t["list-class"]=this.dropdownListClass:(t.padding=this.popoverPadding,t["content-class"]=this.popoverContentClass,t["header-wrapper-class"]=this.popoverHeaderClass,t["footer-wrapper-class"]=this.popoverFooterClass,t["dialog-class"]=this.popoverDialogClass),t},buttonKind(){return this.isActive&&!this.disabled?"default":"muted"},resolvedStartTooltipText(){return this.readOnly?this.startTooltipText||this.i18n.$t("DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP"):this.startTooltipText},clearButtonAriaLabel(){return this.endTooltipText||this.i18n.$t("DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL")},clearButtonTitle(){if(!this.endTooltipText)return this.clearButtonAriaLabel},activeFilters(){return this.filters.filter(t=>t.active).map(t=>t.name)},activeFilterList(){return this.activeFilters.length===this.filters.length&&this.filters.length>1?"All":this.activeFilters[0]??""},activeFilterOverflow(){return this.activeFilters.length<=1||this.activeFilters.length===this.filters.length&&this.filters.length>1?"":"+"+(this.activeFilters.length-1)},isActive(){return this.activeFilterList.length>0},hasClear(){return!this.readOnly&&!this.hideClear&&this.activeFilterList.length>0},displayFilters(){return this.deferSelection&&this.pendingFilters?this.pendingFilters:this.filters},pendingActiveFilters(){return this.pendingFilters?this.pendingFilters.filter(t=>t.active).map(t=>t.name):[]},cancelButtonLabel(){return this.i18n.$t("DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL")},applyButtonLabel(){return this.i18n.$t("DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL")}},watch:{isOpen(t){this.$emit("open",t),this.deferSelection&&(t?this.pendingFilters=JSON.parse(JSON.stringify(this.filters)):this.pendingFilters=null)},filters:{deep:!0,handler(t){this.$emit("update:modelValue",t)}}},mounted(){var t;(t=this.modelValue)!=null&&t.length||this.$slots.content&&this.$slots.content()||console.warn('Please provide content through the v-model or the "content" slot.'),this.deferSelection&&this.useDropdown&&console.warn("deferSelection has no effect when useDropdown is true.")},methods:{clearFilter(t){this.filters.forEach(r=>delete r.active),this.$emit("clear",t)},openPopover(){this.readOnly||(this.isOpen=!0)},selectFilter(t,r){this.filters.forEach(i=>{i.active=i===t}),r()},applySelection(){this.pendingFilters&&(this.filters.forEach((t,r)=>{this.pendingFilters[r]?t.active=this.pendingFilters[r].active:delete t.active}),this.$emit("apply"),this.isOpen=!1)},cancelSelection(){this.isOpen=!1}}},A={class:"d-filter-pill__label"},E=["title","textContent"],P=["title","textContent"],I=["title","textContent"];function N(t,r,i,q,a,l){const h=e.resolveComponent("dt-icon-chevron-down"),c=e.resolveComponent("dt-button"),f=e.resolveComponent("dt-checkbox"),_=e.resolveComponent("dt-checkbox-group"),v=e.resolveComponent("dt-stack"),m=e.resolveComponent("dt-list-item"),y=e.resolveComponent("dt-icon-close"),d=e.resolveDirective("dt-tooltip");return e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["d-filter-pill",{"d-filter-pill--read-only":i.readOnly}]),"data-qa":"dt-filter-pill"},[(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.overlayComponent),e.mergeProps({open:a.isOpen,"onUpdate:open":r[0]||(r[0]=n=>a.isOpen=n)},l.overlayProps,{"content-mode":i.contentMode}),e.createSlots({anchor:e.withCtx(n=>[e.withDirectives((e.openBlock(),e.createBlock(c,e.mergeProps(i.useDropdown?n:n.attrs,{active:l.isActive,"aria-disabled":i.readOnly||void 0,class:["d-filter-pill__primary",{"d-filter-pill--selected":l.isActive}],disabled:i.disabled,kind:l.buttonKind,size:i.size,"data-qa":"dt-filter-pill__button",importance:"outlined",onClick:l.openPopover,onKeydown:e.withKeys(e.withModifiers(l.openPopover,["prevent"]),["up","down"])}),e.createSlots({default:e.withCtx(()=>[e.createElementVNode("span",A,[e.renderSlot(t.$slots,"default",{label:i.label,filters:a.filters,activeFilters:l.activeFilters,activeFilterList:l.activeFilterList,activeFilterOverflow:l.activeFilterOverflow},()=>[e.createElementVNode("span",{class:"d-filter-pill__label-start",title:i.label,textContent:e.toDisplayString(i.label)},null,8,E),l.activeFilterList?(e.openBlock(),e.createElementBlock("span",{key:0,class:"d-filter-pill__label-end",title:l.activeFilterList,textContent:e.toDisplayString(l.activeFilterList)},null,8,P)):e.createCommentVNode("",!0),l.activeFilterOverflow?(e.openBlock(),e.createElementBlock("span",{key:1,class:"d-filter-pill__label-end-overflow",title:`plus ${l.activeFilters.length-1} others`,textContent:e.toDisplayString(l.activeFilterOverflow)},null,8,I)):e.createCommentVNode("",!0)])])]),_:2},[t.$slots.startIcon?{name:"startIcon",fn:e.withCtx(({iconSize:o})=>[e.renderSlot(t.$slots,"startIcon",{iconSize:o})]),key:"0"}:void 0,i.readOnly?void 0:{name:"endIcon",fn:e.withCtx(({iconSize:o})=>[e.createVNode(h,{size:o,class:"d-filter-pill__icon","data-qa":"dt-filter-pill__icon"},null,8,["size"])]),key:"1"}]),1040,["active","aria-disabled","class","disabled","kind","size","onClick","onKeydown"])),[[d,l.resolvedStartTooltipText]])]),_:2},[i.useDropdown?void 0:{name:"content",fn:e.withCtx(({close:n})=>[e.renderSlot(t.$slots,"content",{close:n,apply:l.applySelection,cancel:l.cancelSelection,pendingFilters:a.pendingFilters},()=>{var o;return[(o=i.modelValue)!=null&&o.length?(e.openBlock(),e.createBlock(_,{key:0,"selected-values":i.deferSelection?l.pendingActiveFilters:l.activeFilters,"aria-label":i.label,name:i.label||"filter-pill"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.displayFilters,s=>(e.openBlock(),e.createBlock(f,{key:s.name,label:s.name,value:s.name,onInput:C=>s.active=C},null,8,["label","value","onInput"]))),128))]),_:1},8,["selected-values","aria-label","name"])):e.createCommentVNode("",!0)]})]),key:"0"},!i.useDropdown&&t.$slots.headerContent?{name:"headerContent",fn:e.withCtx(({close:n})=>[e.renderSlot(t.$slots,"headerContent",{close:n})]),key:"1"}:void 0,!i.useDropdown&&(i.deferSelection||t.$slots.footerContent)?{name:"footerContent",fn:e.withCtx(({close:n})=>[e.renderSlot(t.$slots,"footerContent",{close:n,apply:l.applySelection,cancel:l.cancelSelection},()=>[i.deferSelection?(e.openBlock(),e.createBlock(v,{key:0,direction:"row",gap:"400",justify:"end","data-qa":"dt-filter-pill__deferred-footer"},{default:e.withCtx(()=>[e.createVNode(c,{importance:"clear",kind:"muted",size:200,"data-qa":"dt-filter-pill__cancel-button",onClick:l.cancelSelection},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.cancelButtonLabel),1)]),_:1},8,["onClick"]),e.createVNode(c,{importance:"primary",size:200,"data-qa":"dt-filter-pill__apply-button",onClick:l.applySelection},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(l.applyButtonLabel),1)]),_:1},8,["onClick"])]),_:1})):e.createCommentVNode("",!0)])]),key:"2"}:void 0,i.useDropdown?{name:"list",fn:e.withCtx(({close:n})=>[e.renderSlot(t.$slots,"content",{close:n},()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(a.filters,o=>(e.openBlock(),e.createBlock(m,{key:o.name,role:"menuitem","navigation-type":"arrow-keys",selected:o.active,onClick:s=>l.selectFilter(o,n)},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(o.name),1)]),_:2},1032,["selected","onClick"]))),128))])]),key:"3"}:void 0]),1040,["open","content-mode"])),l.hasClear?e.withDirectives((e.openBlock(),e.createBlock(c,{key:0,active:l.isActive,"aria-label":l.clearButtonAriaLabel,class:e.normalizeClass(["d-filter-pill__clear",{"d-filter-pill__clear--selected":l.isActive}]),disabled:i.disabled,kind:l.buttonKind,size:i.size,title:l.clearButtonTitle,"data-qa":"dt-filter-pill__clear-button",importance:"outlined",onClick:l.clearFilter},{icon:e.withCtx(({iconSize:n})=>[e.createVNode(y,{size:n},null,8,["size"])]),_:1},8,["active","aria-label","class","disabled","kind","size","title","onClick"])),[[d,i.endTooltipText]]):e.createCommentVNode("",!0)],2)}const V=g._(x,[["render",N]]);exports.default=V;
+//# sourceMappingURL=filter-pill.cjs.map

package/dist/lib/filter-pill/filter-pill.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"filter-pill.cjs","sources":["../../../components/filter_pill/filter_pill.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[\n      'd-filter-pill',\n      { 'd-filter-pill--read-only': readOnly },\n    ]\"\n    data-qa=\"dt-filter-pill\"\n  >\n    <component\n      :is=\"overlayComponent\"\n      v-model:open=\"isOpen\"\n      v-bind=\"overlayProps\"\n      :content-mode=\"contentMode\"\n    >\n      <template #anchor=\"slotData\">\n        <dt-button\n          v-dt-tooltip=\"resolvedStartTooltipText\"\n          v-bind=\"useDropdown ? slotData : slotData.attrs\"\n          :active=\"isActive\"\n          :aria-disabled=\"readOnly || undefined\"\n          :class=\"[\n            'd-filter-pill__primary',\n            {\n              'd-filter-pill--selected': isActive,\n            },\n          ]\"\n          :disabled=\"disabled\"\n          :kind=\"buttonKind\"\n          :size=\"size\"\n          data-qa=\"dt-filter-pill__button\"\n          importance=\"outlined\"\n          @click=\"openPopover\"\n          @keydown.up.down.prevent=\"openPopover\"\n        >\n          <template\n            v-if=\"$slots.startIcon\"\n            #startIcon=\"{ iconSize }\"\n          >\n            <!-- @slot Icon displayed before the label -->\n            <slot\n              name=\"startIcon\"\n              :icon-size=\"iconSize\"\n            />\n          </template>\n          <span class=\"d-filter-pill__label\">\n            <!-- @slot Allows you to customize the label slot -->\n            <slot\n              :label=\"label\"\n              :filters=\"filters\"\n              :active-filters=\"activeFilters\"\n              :active-filter-list=\"activeFilterList\"\n              :active-filter-overflow=\"activeFilterOverflow\"\n            >\n              <span\n                class=\"d-filter-pill__label-start\"\n                :title=\"label\"\n                v-text=\"label\"\n              />\n              <span\n                v-if=\"activeFilterList\"\n                class=\"d-filter-pill__label-end\"\n                :title=\"activeFilterList\"\n                v-text=\"activeFilterList\"\n              />\n              <span\n                v-if=\"activeFilterOverflow\"\n                class=\"d-filter-pill__label-end-overflow\"\n                :title=\"`plus ${activeFilters.length - 1} others`\"\n                v-text=\"activeFilterOverflow\"\n              />\n            </slot>\n          </span>\n          <template\n            v-if=\"!readOnly\"\n            #endIcon=\"{ iconSize }\"\n          >\n            <dt-icon-chevron-down\n              :size=\"iconSize\"\n              class=\"d-filter-pill__icon\"\n              data-qa=\"dt-filter-pill__icon\"\n            />\n          </template>\n        </dt-button>\n      </template>\n      <template\n        v-if=\"!useDropdown\"\n        #content=\"{ close }\"\n      >\n        <!-- @slot Allows you to override the popover content, only use this if you need custom behavior -->\n        <slot\n          :close=\"close\"\n          :apply=\"applySelection\"\n          :cancel=\"cancelSelection\"\n          :pending-filters=\"pendingFilters\"\n          name=\"content\"\n        >\n          <dt-checkbox-group\n            v-if=\"modelValue?.length\"\n            :selected-values=\"deferSelection ? pendingActiveFilters : activeFilters\"\n            :aria-label=\"label\"\n            :name=\"label || 'filter-pill'\"\n          >\n            <dt-checkbox\n              v-for=\"filter in displayFilters\"\n              :key=\"filter.name\"\n              :label=\"filter.name\"\n              :value=\"filter.name\"\n              @input=\"($event) => filter.active = $event\"\n            />\n          </dt-checkbox-group>\n        </slot>\n      </template>\n      <template\n        v-if=\"!useDropdown && $slots.headerContent\"\n        #headerContent=\"{ close }\"\n      >\n        <!-- @slot Allows you to customize the popover header -->\n        <slot\n          name=\"headerContent\"\n          :close=\"close\"\n        />\n      </template>\n      <template\n        v-if=\"!useDropdown && (deferSelection || $slots.footerContent)\"\n        #footerContent=\"{ close }\"\n      >\n        <!-- @slot Allows you to customize the popover footer. Receives { close, apply, cancel } bindings. -->\n        <slot\n          name=\"footerContent\"\n          :close=\"close\"\n          :apply=\"applySelection\"\n          :cancel=\"cancelSelection\"\n        >\n          <dt-stack\n            v-if=\"deferSelection\"\n            direction=\"row\"\n            gap=\"400\"\n            justify=\"end\"\n            data-qa=\"dt-filter-pill__deferred-footer\"\n          >\n            <dt-button\n              importance=\"clear\"\n              kind=\"muted\"\n              :size=\"200\"\n              data-qa=\"dt-filter-pill__cancel-button\"\n              @click=\"cancelSelection\"\n            >\n              {{ cancelButtonLabel }}\n            </dt-button>\n            <dt-button\n              importance=\"primary\"\n              :size=\"200\"\n              data-qa=\"dt-filter-pill__apply-button\"\n              @click=\"applySelection\"\n            >\n              {{ applyButtonLabel }}\n            </dt-button>\n          </dt-stack>\n        </slot>\n      </template>\n      <template\n        v-if=\"useDropdown\"\n        #list=\"{ close }\"\n      >\n        <!-- @slot Allows you to override the dropdown content -->\n        <slot\n          :close=\"close\"\n          name=\"content\"\n        >\n          <dt-list-item\n            v-for=\"filter in filters\"\n            :key=\"filter.name\"\n            role=\"menuitem\"\n            navigation-type=\"arrow-keys\"\n            :selected=\"filter.active\"\n            @click=\"selectFilter(filter, close)\"\n          >\n            {{ filter.name }}\n          </dt-list-item>\n        </slot>\n      </template>\n    </component>\n    <dt-button\n      v-if=\"hasClear\"\n      v-dt-tooltip=\"endTooltipText\"\n      :active=\"isActive\"\n      :aria-label=\"clearButtonAriaLabel\"\n      :class=\"[\n        'd-filter-pill__clear',\n        { 'd-filter-pill__clear--selected': isActive },\n      ]\"\n      :disabled=\"disabled\"\n      :kind=\"buttonKind\"\n      :size=\"size\"\n      :title=\"clearButtonTitle\"\n      data-qa=\"dt-filter-pill__clear-button\"\n      importance=\"outlined\"\n      @click=\"clearFilter\"\n    >\n      <template #icon=\"{ iconSize }\">\n        <dt-icon-close :size=\"iconSize\" />\n      </template>\n    </dt-button>\n  </div>\n</template>\n\n<script>\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES } from '@/components/popover';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\nimport { BUTTON_SIZE_MODIFIERS, DtButton } from '@/components/button';\nimport { DtIconChevronDown, DtIconClose } from '@dialpad/dialtone-icons/vue';\nimport { DialtoneLocalization } from '@/localization';\nimport { DtCheckbox } from '@/components/checkbox';\nimport { DtCheckboxGroup } from '@/components/checkbox_group';\nimport { DtDropdown } from '@/components/dropdown';\nimport { DtListItem } from '@/components/list_item';\nimport { DtStack } from '@/components/stack';\n\nexport default {\n  name: 'DtFilterPill',\n\n  components: {\n    DtCheckboxGroup,\n    DtCheckbox,\n    DtPopover,\n    DtButton,\n    DtIconClose,\n    DtIconChevronDown,\n    DtDropdown,\n    DtListItem,\n    DtStack,\n  },\n\n  inheritAttrs: false,\n\n  props: {\n    /**\n     * When true, uses DtDropdown instead of DtPopover as the overlay.\n     * Provides keyboard navigation (arrow keys) for list items.\n     * Default content renders DtListItem elements (single-select)\n     * instead of checkboxes (multi-select).\n     */\n    useDropdown: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, checkbox changes are held in a pending state until the user\n     * clicks Apply. Cancel or closing the popover discards pending changes.\n     * Only applies to popover mode (not useDropdown).\n     */\n    deferSelection: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Array of filters to display in the popover,\n     * should be an array of objects with `name` and `active` properties\n     */\n    modelValue: {\n      type: Array,\n      default: () => [],\n    },\n\n    /**\n     * Text shown in tooltip when you hover the start button,\n     * required if no content is passed to default slot\n     */\n    startTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * HTML disabled attribute\n     */\n    disabled: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * When true, the pill cannot be interacted with but does not\n     * receive disabled visual styling. Adds `d-filter-pill--read-only`\n     * class and hides the chevron icon. The clear button is suppressed\n     * and the tooltip falls back to a read-only message when\n     * startTooltipText is not provided.\n     */\n    readOnly: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Toggles the clear button visibility\n     * @values true, false\n     */\n    hideClear: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Label of the button\n     */\n    label: {\n      type: String,\n      default: undefined,\n    },\n\n    /**\n     * Text shown in tooltip when you hover the end button,\n     * required as it is an icon only button\n     */\n    endTooltipText: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the\n     * <a class=\"d-link\" href=\"https://dialtone.dialpad.com/components/popover.html#vue-api\" target=\"_blank\">popover component</a>\n     *  is going to append to\n     * @values body, parent, root, HTMLElement\n     */\n    popoverAppendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n          (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * If the dropdown does not fit in the direction described by \"popoverPlacement\",\n     * it will attempt to change it's direction to the \"popoverFallbackPlacements\".\n     *\n     * @values top, top-start, top-end,\n     * right, right-start, right-end,\n     * left, left-start, left-end,\n     * bottom, bottom-start, bottom-end,\n     * auto, auto-start, auto-end\n     * */\n    popoverFallbackPlacements: {\n      type: Array,\n      default: () => {\n        return ['auto'];\n      },\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    popoverMaxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    popoverMaxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Padding size class for the popover content.\n     * @values none, small, medium, large\n     */\n    popoverPadding: {\n      type: String,\n      default: 'large',\n      validator: (padding) => {\n        return Object.keys(POPOVER_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * The direction the popover displays relative to the anchor.\n     * <a class=\"d-link\" href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\">Tippy.js docs</a>\n     * @values top, top-start, top-end, right, right-start, right-end, left, left-start, left-end, bottom, bottom-start, bottom-end, auto, auto-start, auto-end\n     */\n    popoverPlacement: {\n      type: String,\n      default: 'bottom-start',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the popover content area.\n     * Only applies when useDropdown is false.\n     */\n    popoverContentClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the outer popover header element (`d-popover__header`).\n     * Only applies when useDropdown is false.\n     */\n    popoverHeaderClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the outer popover footer element (`d-popover__footer`).\n     * Only applies when useDropdown is false.\n     */\n    popoverFooterClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the popover dialog element.\n     * Only applies when useDropdown is false.\n     */\n    popoverDialogClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Additional CSS class(es) applied to the dropdown list wrapper.\n     * Only applies when useDropdown is true.\n     */\n    dropdownListClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Applies a color mode to the positioned content element.\n     * @values light, dark, invert\n     */\n    contentMode: CONTENT_MODE_PROP,\n\n    /**\n     * The size of the button.\n     * @values 100, 200, 300, 400, 500\n     */\n    size: {\n      type: [String, Number],\n      default: 200,\n      validator: (s) => Object.keys(BUTTON_SIZE_MODIFIERS).includes(String(s)),\n    },\n  },\n\n  emits: [\n    /**\n     * Emitted when clicking the clear button\n     *\n     * @event clear\n     * @type {Boolean | Array}\n     */\n    'clear',\n\n    /**\n     * Emitted when popover is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'open',\n\n    /**\n     * Emitted when the active filters change\n     * @type {Array}\n     */\n    'update:modelValue',\n\n    /**\n     * Emitted when deferred selection is applied\n     *\n     * @event apply\n     */\n    'apply',\n  ],\n\n  data () {\n    return {\n      isOpen: false,\n      i18n: new DialtoneLocalization(),\n      filters: this.modelValue,\n      pendingFilters: null,\n    };\n  },\n\n  computed: {\n    overlayComponent () {\n      return this.useDropdown ? 'dt-dropdown' : 'dt-popover';\n    },\n\n    overlayProps () {\n      const props = {\n        'append-to': this.popoverAppendTo,\n        'fallback-placements': this.popoverFallbackPlacements,\n        'max-height': this.popoverMaxHeight,\n        'max-width': this.popoverMaxWidth,\n        modal: true,\n        placement: this.popoverPlacement,\n      };\n      if (this.useDropdown) {\n        props['list-class'] = this.dropdownListClass;\n      } else {\n        props.padding = this.popoverPadding;\n        props['content-class'] = this.popoverContentClass;\n        props['header-wrapper-class'] = this.popoverHeaderClass;\n        props['footer-wrapper-class'] = this.popoverFooterClass;\n        props['dialog-class'] = this.popoverDialogClass;\n      }\n      return props;\n    },\n\n    buttonKind () {\n      return (this.isActive && !this.disabled) ? 'default' : 'muted';\n    },\n\n    resolvedStartTooltipText () {\n      if (this.readOnly) return this.startTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_READ_ONLY_TOOLTIP');\n      return this.startTooltipText;\n    },\n\n    clearButtonAriaLabel () {\n      return this.endTooltipText || this.i18n.$t('DIALTONE_FILTER_PILL_CLEAR_BUTTON_LABEL');\n    },\n\n    clearButtonTitle () {\n      if (this.endTooltipText) return;\n\n      return this.clearButtonAriaLabel\n    },\n\n    activeFilters () {\n      return this.filters.filter(filter => filter.active).map(filter => filter.name);\n    },\n\n    activeFilterList () {\n      if (this.activeFilters.length === this.filters.length && this.filters.length > 1) {\n        return 'All';\n      }\n\n      return this.activeFilters[0] ?? '';\n    },\n\n    activeFilterOverflow () {\n      if (this.activeFilters.length <= 1) return '';\n      if (this.activeFilters.length === this.filters.length && this.filters.length > 1) return '';\n\n      return '+' + (this.activeFilters.length - 1);\n    },\n\n    isActive () {\n      return this.activeFilterList.length > 0;\n    },\n\n    hasClear () {\n      return !this.readOnly && !this.hideClear && this.activeFilterList.length > 0;\n    },\n\n    displayFilters () {\n      return (this.deferSelection && this.pendingFilters) ? this.pendingFilters : this.filters;\n    },\n\n    pendingActiveFilters () {\n      if (!this.pendingFilters) return [];\n      return this.pendingFilters.filter(f => f.active).map(f => f.name);\n    },\n\n    cancelButtonLabel () {\n      return this.i18n.$t('DIALTONE_FILTER_PILL_CANCEL_BUTTON_LABEL');\n    },\n\n    applyButtonLabel () {\n      return this.i18n.$t('DIALTONE_FILTER_PILL_APPLY_BUTTON_LABEL');\n    },\n  },\n\n  watch: {\n    isOpen (isOpen) {\n      this.$emit('open', isOpen);\n      if (this.deferSelection) {\n        if (isOpen) {\n          this.pendingFilters = JSON.parse(JSON.stringify(this.filters));\n        } else {\n          this.pendingFilters = null;\n        }\n      }\n    },\n\n    filters: {\n      deep: true,\n      handler (filters) {\n        this.$emit('update:modelValue', filters);\n      },\n    },\n  },\n\n  mounted () {\n    if (!(this.modelValue?.length || (this.$slots.content && this.$slots.content()))) {\n      console.warn('Please provide content through the v-model or the \"content\" slot.');\n    }\n    if (this.deferSelection && this.useDropdown) {\n      console.warn('deferSelection has no effect when useDropdown is true.');\n    }\n  },\n\n  methods: {\n    clearFilter ($event) {\n      this.filters.forEach(filter => delete filter.active);\n      this.$emit('clear', $event)\n    },\n\n    openPopover () {\n      if (this.readOnly) return;\n      this.isOpen = true;\n    },\n\n    selectFilter (selectedFilter, close) {\n      this.filters.forEach(filter => {\n        filter.active = filter === selectedFilter;\n      });\n      close();\n    },\n\n    applySelection () {\n      if (!this.pendingFilters) return;\n      this.filters.forEach((filter, i) => {\n        if (this.pendingFilters[i]) {\n          filter.active = this.pendingFilters[i].active;\n        } else {\n          delete filter.active;\n        }\n      });\n      this.$emit('apply');\n      this.isOpen = false;\n    },\n\n    cancelSelection () {\n      this.isOpen = false;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtCheckboxGroup","DtCheckbox","DtPopover","DtButton","DtIconClose","DtIconChevronDown","DtDropdown","DtListItem","DtStack","appendTo","POPOVER_APPEND_TO_VALUES","padding","POPOVER_PADDING_CLASSES","item","CONTENT_MODE_PROP","s","BUTTON_SIZE_MODIFIERS","DialtoneLocalization","props","filter","f","isOpen","filters","_a","$event","selectedFilter","close","i","_hoisted_1","_createElementBlock","_normalizeClass","$props","_createBlock","_resolveDynamicComponent","$options","_mergeProps","$data","_createSlots","_withCtx","slotData","_component_dt_button","_createElementVNode","_renderSlot","_ctx","_toDisplayString","iconSize","_createVNode","_component_dt_icon_chevron_down","_component_dt_checkbox_group","_Fragment","_renderList","_component_dt_checkbox","_component_dt_stack","_component_dt_list_item","_createTextVNode","_component_dt_icon_close"],"mappings":"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"}