npm - @dialpad/dialtone-vue - Versions diffs - 3.222.2 → 3.223.0-next.1 - Mend

@dialpad/dialtone-vue 3.222.2 → 3.223.0-next.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2057) hide show

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-row.cjs","names":[],"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"],"mappings":"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"}
1	+ {"version":3,"file":"feed-item-row.cjs","names":[],"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/LazyShow';\nimport { DtListItem } from '@/components/ListItem';\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"],"mappings":"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"}

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

@@ -3,19 +3,19 @@ import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
 import n from "../../common/mixins/modal.js";
 import r from "../avatar/avatar.js";
 import i from "../badge/badge.js";
-import a from "../lazy-show/lazy-show.js";
-import o from "../list-item/list-item.js";
+import a from "../list-item/list-item.js";
+import o from "../lazy-show/lazy-show.js";
 import { DEFAULT_FEED_ROW_STATE as s, FEED_ROW_STATE_BACKGROUND_COLOR as c } from "./feed-item-row-constants.js";
 import { createBlock as l, createCommentVNode as u, createElementBlock as d, createElementVNode as f, createSlots as p, createVNode as m, mergeProps as h, openBlock as g, renderSlot as _, resolveComponent as v, toDisplayString as y, toHandlers as b, vShow as x, withCtx as S, withDirectives as C } from "vue";
-import { DtIconUser as w } from "@dialpad/dialtone-icons/vue3";
+import { DtIconUser as w } from "@dialpad/dialtone-icons/vue";
 //#region recipes/conversation_view/feed_item_row/feed_item_row.vue
 var T = {
 	compatConfig: { MODE: 3 },
 	name: "DtRecipeFeedItemRow",
 	components: {
 		DtAvatar: r,
-		DtLazyShow: a,
-		DtListItem: o,
+		DtLazyShow: o,
+		DtListItem: a,
 		DtBadge: i,
 		DtIconUser: w
 	},
@@ -153,7 +153,7 @@ function I(e, t, n, r, i, a) {
 		class: a.listItemClasses,
 		"data-qa": "dt-recipe-feed-item-row"
 	}, b(a.feedListeners)), {
-		left: S(() => [n.showHeader ? (g(), d("div", E, [_(e.$slots, "avatar", {}, () => [m(s, {
+		start: S(() => [n.showHeader ? (g(), d("div", E, [_(e.$slots, "avatar", {}, () => [m(s, {
 			"full-name": n.displayName,
 			"image-src": n.avatarImageUrl,
 			"image-alt": "",
@@ -171,7 +171,7 @@ function I(e, t, n, r, i, a) {
 			class: "d-recipe-feed-item-row__left-time",
 			"data-qa": "dt-recipe-feed-item-row--left-time"
 		}, y(n.shortTime), 513)), [[x, n.isActive]])]),
-		bottom: S(() => [
+		blockEnd: S(() => [
 			e.$slots.reactions ? (g(), d("div", N, [_(e.$slots, "reactions")])) : u("", !0),
 			e.$slots.threading ? (g(), d("div", P, [_(e.$slots, "threading")])) : u("", !0),
 			C(f("div", F, [m(w, {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"feed-item-row.js","names":[],"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"],"mappings":"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"}
1	+ {"version":3,"file":"feed-item-row.js","names":[],"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/LazyShow';\nimport { DtListItem } from '@/components/ListItem';\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"],"mappings":";;;;;;;;;;;AAsIA,IAAK,IAAU;CACb,cAAc,EAAE,MAAM,GAAG;CACzB,MAAM;CAEN,YAAY;EACV,UAAA;EACA,YAAA;EACA,YAAA;EACA,SAAA;EACA;EACD;CAED,QAAQ,CAAC,EAAM;CAEf,cAAc;CAEd,OAAO;EAIL,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,gBAAgB;GACd,MAAM;GACN,SAAS;GACV;EAKD,aAAa;GACX,MAAM;GACN,SAAS;GACV;EAKD,YAAY;GACV,MAAM;GACN,SAAS;GACV;EAMD,MAAM;GACJ,MAAM;GACN,SAAS;GACV;EAMD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAKD,WAAW;GACT,MAAM;GACN,SAAS;GACV;EAKD,UAAU;GACR,MAAM;GACN,SAAS;GACV;EAKD,OAAO;GACL,MAAM;GACN,SAAS;GACT,YAAW,MAAS,OAAO,KAAK,EAAgC,CAAC,SAAS,EAAM;GACjF;EACF;CAED,OAAO;EAOL;EAQA;EAQA;EACD;CAED,OAAQ;AACN,SAAO,EACL,kBAAkB,IACnB;;CAGH,UAAU;EACR,gBAAiB;AACf,UAAO;IACL,kBAAkB,KAAK,SAAS,GAAK;IACrC,kBAAkB,KAAK,SAAS,GAAM;IACtC,eAAe,KAAK,SAAS,GAAK;IAClC,gBAAgB,KAAK,SAAS,GAAM;IACpC,qBAAqB,KAAK,oBAAoB;IAC9C,UAAS,MAAS;AAChB,aAAQ,EAAM,MAAd;MACE,KAAK;AACH,YAAK,UAAU,EAAM;AACrB;;AAEJ,UAAK,MAAM,WAAW,EAAM;;IAE/B;;EAGH,kBAAmB;AACjB,UAAO;IACL;IACA,EAAE,kCAAkC,KAAK,YAAY,KAAK,UAAA,UAAkC;IAC5F,EAAE,4CAA4C,KAAK,kBAAkB;IACrE,EAAgC,KAAK;IAEtC;;EAGH,uBAAwB;AACtB,UAAO,EAAe,KAAK,OAAO,WAAW;;EAEhD;CAED,OAAO,EACL,OAAO;EACL,WAAW;EACX,SAAS,SAAU,GAAU;AAC3B,GAAI,MAAA,aACF,KAAK,mBAAmB;;EAG7B,EACF;CAED,SAAS;EACP,qBAAsB;AACpB,GAAI,KAAK,UAAA,aACP,KAAK,mBAAmB;;EAI5B,UAAW,GAAG;AACZ,QAAK,qBAAqB,EAAE;;EAG9B,SAAU,GAAM;AACd,QAAK,MAAM,SAAS,EAAK;;EAG3B,SAAU,GAAM;AACd,QAAK,MAAM,SAAS,EAAK;;EAE5B;CACF;;CA/TO,OAAM;SAkCD,OAAM,mCAAiC;;CAI5C,WAAQ;CACR,OAAM;SAID,OAAM,uCAAqC,QAK9C,OAAM,uCAAqC,QAW7C,WAAQ,oCAAkC;;CAM1C,WAAQ;CACR,OAAM;;;CAUN,OAAM;CACN,WAAQ;;;CASR,OAAM;;CASN,WAAQ;CACR,OAAM;;;;aA5GZ,EAwHe,GAxHf,EAwHe;EAvHb,KAAI;EACJ,mBAAgB;IACR,EAAA,QAAM;EACb,OAAO,EAAA;EACR,WAAQ;IACR,EAAoB,EAAd,cAAa,CAAA,EAAA;EAGR,OAAK,QAyBR,CAvBE,EAAA,cAAA,GAAA,EADR,EAwBM,OAxBN,GAwBM,CAnBJ,EAkBO,EAAA,QAAA,UAAA,EAAA,QAAA,CAfL,EAcY,GAAA;GAbT,aAAW,EAAA;GACX,aAAW,EAAA;GACZ,aAAU;GACT,MAAM,EAAA;kBAGC,EAAA,aAAA;SACL;UAIC,EAJO,kBAAQ,CAEjB,EAEE,GAAA,EADC,MAAM,GAAQ,EAAA,MAAA,GAAA,CAAA,OAAA,CAAA,CAAA,CAAA;;;;;;uBAQhB,EAAA,aACS,EAAA,IAAA,GAAA,GADT,GAAA,GAAA,EADT,EAOO,QAAA;;GAJL,OAAM;GACN,WAAQ;OAEL,EAAA,UAAS,EAAA,IAAA,GAAA,CAAA,CAAA,GAJJ,EAAA,SAAQ,CAAA,CAAA,CAAA,CAAA;EA8CT,UAAQ,QASX;GANE,EAAA,OAAO,aAAA,GAAA,EADf,EAOM,OAPN,GAOM,CADJ,EAAyB,EAAA,QAAA,YAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;GAKnB,EAAA,OAAO,aAAA,GAAA,EADf,EAMM,OANN,GAMM,CADJ,EAAyB,EAAA,QAAA,YAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA;KAI3B,EAaM,OAbN,GAaM,CARJ,EAOe,GAAA;IANZ,QAAQ;IACT,YAAW;IACV,MAAM,EAAA;;qBAGa,CAApB,EAAoB,EAAA,QAAA,OAAA,CAAA,CAAA;;gCAVd,EAAA,SAAQ,CAAA,CAAA;;mBAxBV,CApCV,EAoCU,WApCV,GAoCU;GAjCA,EAAA,cAAA,GAAA,EADR,EAoBM,OApBN,GAoBM;IAdJ,EAIO,EAAA,QAAA,eAAA,EAAA,QAAA,CAHL,EAEI,KAFJ,GAEI,EADC,EAAA,YAAW,EAAA,EAAA,CAAA,CAAA;IAGlB,EAIO,QAJP,GAIO,EADF,EAAA,KAAI,EAAA,EAAA;IAGD,EAAA,aAAA,GAAA,EADR,EAGE,GAAA;;KADC,MAAM,EAAA;;;GAIX,EAIO,QAJP,GAIO,CADL,EAAQ,EAAA,QAAA,UAAA,CAAA,CAAA;GAGF,EAAA,wBAAA,GAAA,EADR,EAMM,OANN,GAMM,CADJ,EAA0B,EAAA,QAAA,aAAA,CAAA,CAAA,IAAA,EAAA,IAAA,GAAA"}

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

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

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

@@ -0,0 +1 @@

+ {"version":3,"file":"filter-pill.cjs","names":[],"sources":["../../../components/FilterPill/FilterPill.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 \n <slot\n name=\"startIcon\"\n :icon-size=\"iconSize\"\n />\n </template>\n <span :class=\"['d-filter-pill__label', labelClass]\">\n \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 \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 :model-value=\"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 @update:model-value=\"($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 \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 \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 \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>\n <dt-icon-close :size=\"clearIconSize\" />\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 { HTML_ELEMENT_TYPE } from '@/common/constants';\nimport { CONTENT_MODE_PROP } from '@/common/mode_constants';\nimport { BUTTON_SIZE_MODIFIERS, BUTTON_ICON_SIZES, 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/CheckboxGroup';\nimport { DtDropdown } from '@/components/Dropdown';\nimport { DtListItem } from '@/components/ListItem';\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 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 * Shows the clear button when a filter is active\n * @values true, false\n */\n showClear: {\n type: Boolean,\n default: true,\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: [HTML_ELEMENT_TYPE, 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 label wrapper element.\n */\n labelClass: {\n type: [String, Array, Object],\n default: '',\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.showClear && 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 clearIconSize () {\n if (String(this.size) === '100') return '100';\n return BUTTON_ICON_SIZES[String(this.size)];\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"],"mappings":"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"}