import { t as e } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
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";
//#region recipes/conversation_view/feed_item_pill/feed_item_pill.vue
var y = {
	compatConfig: { MODE: 3 },
	name: "DtRecipeFeedItemPill",
	components: {
		DtItemLayout: r,
		DtCollapsible: n
	},
	props: {
		title: {
			type: String,
			default: () => ""
		},
		wrapperClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		buttonClass: {
			type: [
				String,
				Array,
				Object
			],
			default: ""
		},
		toggleable: {
			type: Boolean,
			default: () => !0
		},
		defaultToggled: {
			type: Boolean,
			default: () => !1
		},
		borderColor: {
			type: String,
			default: "default",
			validator: (e) => Object.keys(i).includes(e)
		}
	},
	data() {
		return {
			hover: !1,
			expanded: this.defaultToggled,
			i18n: new t()
		};
	},
	computed: {
		toggleIcon() {
			return this.expanded ? _ : v;
		},
		showChevronIcon() {
			return this.toggleable && this.hover;
		},
		toggleableClass() {
			return this.toggleable ? "d-recipe-feed-item-pill--toggleable" : "";
		},
		borderClass() {
			return i[this.borderColor];
		},
		anchorTitle() {
			return this.i18n.$t("DIALTONE_FEED_ITEM_PILL_ARIA_LABEL");
		}
	},
	methods: { onClick() {
		this.toggleable && (this.expanded = !this.expanded);
	} }
}, b = { class: "d-recipe-feed-item-pill__wrapper" }, x = ["aria-label", "title"], S = { class: "d-recipe-feed-item-pill__title" }, C = {
	class: "d-recipe-feed-item-pill__icon",
	"data-qa": "dt-recipe-feed-item-pill__icon"
}, w = { class: "d-recipe-feed-item-pill__subtitle" }, T = { class: "d-recipe-feed-item-pill__bottom" }, E = { class: "d-recipe-feed-item-pill__right" }, D = { class: "d-recipe-feed-item-pill__content" };
function O(e, t, n, r, i, _) {
	let v = p("dt-item-layout"), y = p("dt-collapsible");
	return d(), o("div", { class: u([
		"d-recipe-feed-item-pill__border",
		_.borderClass,
		n.wrapperClass
	]) }, [s("div", b, [l(y, { open: i.expanded }, c({
		anchor: g(() => [s("button", {
			"data-qa": "dt-recipe-feed-item-pill",
			class: u([
				"d-recipe-feed-item-pill__button",
				_.toggleableClass,
				n.buttonClass
			]),
			"aria-label": _.anchorTitle,
			title: _.anchorTitle,
			onFocusin: t[0] || (t[0] = (e) => i.hover = !0),
			onFocusout: t[1] || (t[1] = (e) => i.hover = !1),
			onMouseenter: t[2] || (t[2] = (e) => i.hover = !0),
			onMouseleave: t[3] || (t[3] = (e) => i.hover = !1),
			onClick: t[4] || (t[4] = (...e) => _.onClick && _.onClick(...e))
		}, [l(v, {
			class: "d-recipe-feed-item-pill__layout",
			unstyled: ""
		}, c({
			left: g(() => [s("div", C, [_.showChevronIcon ? (d(), a(m(_.toggleIcon), {
				key: 0,
				size: "300"
			})) : f(e.$slots, "leftIcon", {
				key: 1,
				iconSize: "300"
			})])]),
			default: g(() => [f(e.$slots, "title", {}, () => [s("span", S, h(n.title), 1)])]),
			_: 2
		}, [
			e.$slots.subtitle ? {
				name: "subtitle",
				fn: g(() => [s("div", w, [f(e.$slots, "subtitle")])]),
				key: "0"
			} : void 0,
			e.$slots.bottom ? {
				name: "bottom",
				fn: g(() => [s("div", T, [f(e.$slots, "bottom")])]),
				key: "1"
			} : void 0,
			e.$slots.right ? {
				name: "right",
				fn: g(() => [s("div", E, [f(e.$slots, "right")])]),
				key: "2"
			} : void 0
		]), 1024)], 42, x)]),
		_: 2
	}, [e.$slots.content ? {
		name: "content",
		fn: g(() => [s("div", D, [f(e.$slots, "content")])]),
		key: "0"
	} : void 0]), 1032, ["open"])])], 2);
}
var k = /* @__PURE__ */ e(y, [["render", O]]);
//#endregion
export { k as default };

//# sourceMappingURL=feed-item-pill.js.map