import e from "../../common/utils/index.js";
import { t } from "../../_plugin-vue_export-helper-BTgDAbhb.js";
import { LIST_ITEM_NAVIGATION_TYPES as n, LIST_ITEM_TYPES as r } from "./list-item-constants.js";
import i from "../item-layout/item-layout.js";
import { createBlock as a, createSlots as o, createVNode as s, mergeProps as c, normalizeClass as l, openBlock as u, renderList as d, renderSlot as f, resolveComponent as p, resolveDynamicComponent as m, toHandlers as h, withCtx as g } from "vue";
import { DtIconCheck as _ } from "@dialpad/dialtone-icons/vue3";
//#region components/list_item/list_item.vue
var v = [
	"listitem",
	"menuitem",
	"option"
], y = {
	compatConfig: { MODE: 3 },
	name: "DtListItem",
	components: {
		DtItemLayout: i,
		DtIconCheck: _
	},
	inject: { highlightId: { default: null } },
	props: {
		id: {
			type: String,
			default() {
				return e.getUniqueString();
			}
		},
		role: {
			type: String,
			default: "listitem",
			validator: (e) => v.includes(e)
		},
		elementType: {
			type: String,
			default: "li"
		},
		type: {
			type: String,
			default: r.DEFAULT,
			validator: (e) => Object.values(r).includes(e)
		},
		navigationType: {
			type: String,
			default: n.NONE,
			validator: (e) => Object.values(n).includes(e)
		},
		selected: {
			type: Boolean,
			default: !1
		},
		wrapperClass: {
			type: [
				String,
				Object,
				Array
			],
			default: ""
		}
	},
	emits: [
		"keydown",
		"mousemove",
		"mouseleave"
	],
	data() {
		return {
			injected: !1,
			mouseHighlighted: !1
		};
	},
	computed: {
		isDefaultType() {
			return this.type === r.DEFAULT;
		},
		listItemListeners() {
			return {
				keydown: (e) => {
					["enter", "space"].includes(e.code.toLowerCase()) && this.onClick(e), this.$emit("keydown", e);
				},
				mousemove: (e) => {
					this.onMouseHover(e), this.$emit("mousemove", e);
				},
				mouseleave: (e) => {
					this.onMouseLeave(e), this.$emit("mouseleave", e);
				}
			};
		},
		isHighlighted() {
			return this.isHoverable ? this.highlightId && this.highlightId() ? this.id === this.highlightId() : this.mouseHighlighted : !1;
		},
		isFocusable() {
			return this.navigationType === n.TAB;
		},
		isHoverable() {
			return this.navigationType !== n.NONE;
		}
	},
	methods: {
		onClick(e) {
			this.$emit("click", e);
		},
		onMouseHover() {
			this.mouseHighlighted = !0;
		},
		onMouseLeave() {
			this.mouseHighlighted = !1;
		}
	}
};
function b(e, t, n, r, i, _) {
	let v = p("dt-icon-check"), y = p("dt-item-layout");
	return u(), a(m(n.elementType), c({
		id: n.id,
		class: ["d-list-item", {
			"d-list-item--focusable": _.isFocusable,
			"d-list-item--highlighted": _.isHighlighted,
			"d-list-item--static": !_.isHoverable
		}],
		tabindex: _.isFocusable ? 0 : -1,
		role: n.role,
		"aria-selected": n.role === "listitem" ? void 0 : _.isHighlighted
	}, h(_.listItemListeners)), {
		default: g(() => [_.isDefaultType ? (u(), a(y, {
			key: 0,
			unstyled: "",
			class: l(["d-list-item__wrapper", n.wrapperClass]),
			"left-class": "d-list-item__left",
			"content-class": "d-list-item__content",
			"title-class": "d-list-item__title",
			"subtitle-class": "d-list-item__subtitle",
			"bottom-class": "d-list-item__bottom",
			"right-class": "d-list-item__right",
			"selected-class": "d-list-item__selected",
			"data-qa": "dt-list-item-wrapper"
		}, o({ _: 2 }, [d(e.$slots, (t, n) => ({
			name: n,
			fn: g(() => [f(e.$slots, n)])
		})), n.selected ? {
			name: "selected",
			fn: g(() => [s(v, { size: "400" })]),
			key: "0"
		} : void 0]), 1032, ["class"])) : f(e.$slots, "default", { key: 1 })]),
		_: 3
	}, 16, [
		"id",
		"class",
		"tabindex",
		"role",
		"aria-selected"
	]);
}
var x = /* @__PURE__ */ t(y, [["render", b]]);
//#endregion
export { x as default };

//# sourceMappingURL=list-item.js.map