import { getUniqueString as e, hasSlotContent as t } from "./common/utils/index.js";
import { t as n } from "./_plugin-vue_export-helper-BTgDAbhb.js";
import r from "./common/mixins/keyboard-list-navigation.js";
import i from "./lib/combobox/combobox-loading-list.js";
import a from "./lib/combobox/combobox-empty-list.js";
import { COMBOBOX_LABEL_SIZES as o } from "./lib/combobox/combobox-constants.js";
import { createBlock as s, createCommentVNode as c, createElementBlock as l, createElementVNode as u, mergeProps as d, normalizeProps as f, openBlock as p, renderSlot as m, resolveComponent as h, withCtx as g, withKeys as _, withModifiers as v } from "vue";
//#region components/combobox/combobox.vue
var y = {
	compatConfig: { MODE: 3 },
	name: "DtCombobox",
	components: {
		ComboboxLoadingList: i,
		ComboboxEmptyList: a
	},
	mixins: [r({
		indexKey: "highlightIndex",
		idKey: "highlightId",
		listElementKey: "getListElement",
		afterHighlightMethod: "afterHighlight",
		beginningOfListMethod: "beginningOfListMethod",
		endOfListMethod: "endOfListMethod",
		activeItemKey: "activeItemEl"
	})],
	props: {
		label: {
			type: String,
			required: !0
		},
		labelVisible: {
			type: Boolean,
			default: !0
		},
		size: {
			type: String,
			default: null,
			validator: (e) => Object.values(o).includes(e)
		},
		description: {
			type: String,
			default: ""
		},
		listId: {
			type: String,
			default() {
				return e();
			}
		},
		onBeginningOfList: {
			type: Function,
			default: null
		},
		onEndOfList: {
			type: Function,
			default: null
		},
		showList: {
			type: Boolean,
			default: !1
		},
		listRenderedOutside: {
			type: Boolean,
			default: !1
		},
		loading: {
			type: Boolean,
			default: !1
		},
		emptyList: {
			type: Boolean,
			default: !1
		},
		emptyStateMessage: {
			type: String,
			default: ""
		},
		emptyStateClass: {
			type: [
				String,
				Object,
				Array
			],
			default: ""
		},
		clickOnSelect: {
			type: Boolean,
			default: !1
		}
	},
	emits: [
		"select",
		"escape",
		"highlight",
		"opened"
	],
	data() {
		return {
			outsideRenderedListRef: null,
			hasSlotContent: t
		};
	},
	computed: {
		inputProps() {
			return {
				label: this.label,
				labelVisible: this.labelVisible,
				size: this.size,
				description: this.description,
				role: "combobox",
				"aria-label": this.label,
				"aria-expanded": this.showList.toString(),
				"aria-owns": this.listId,
				"aria-haspopup": "listbox",
				"aria-activedescendant": this.activeItemId,
				"aria-controls": this.listId
			};
		},
		listProps() {
			return {
				role: "listbox",
				id: this.listId,
				class: "d-ps-relative",
				"aria-label": this.label
			};
		},
		beginningOfListMethod() {
			return this.onBeginningOfList || this.jumpToEnd;
		},
		endOfListMethod() {
			return this.onEndOfList || this.jumpToBeginning;
		},
		activeItemId() {
			if (!(!this.showList || this.highlightIndex < 0 || this.loading)) return this.highlightId;
		},
		activeItemEl() {
			return this.highlightId ? this.getListElement().querySelector("#" + this.highlightId) : "";
		}
	},
	watch: {
		showList(e) {
			this.listRenderedOutside || (this.setInitialHighlightIndex(), this.$emit("opened", e)), !e && this.outsideRenderedListRef && (this.outsideRenderedListRef.removeEventListener("mousemove", this.onMouseHighlight), this.outsideRenderedListRef = null);
		},
		loading() {
			this.$nextTick(() => {
				this.setInitialHighlightIndex();
			});
		},
		$props: {
			deep: !0,
			immediate: !0,
			handler() {
				this.validateEmptyListProps();
			}
		}
	},
	created() {
		this.validateEmptyListProps();
	},
	methods: {
		onMouseHighlight(e) {
			if (this.loading) return;
			let t = e.target.closest("li");
			t && this.highlightId !== t.id && this.setHighlightId(t.id);
		},
		getListElement() {
			return this.outsideRenderedListRef ?? this.$refs.listWrapper?.querySelector(`#${this.listId}`);
		},
		clearHighlightIndex() {
			this.showList && this.setHighlightIndex(-1);
		},
		afterHighlight() {
			this.loading || this.$emit("highlight", this.highlightIndex);
		},
		onEnterKey() {
			this.loading || this.emptyList || this.highlightIndex >= 0 && (this.$emit("select", this.highlightIndex), this.clickOnSelect && this.activeItemEl?.click());
		},
		onEscapeKey() {
			this.$emit("escape");
		},
		onOpen(e, t) {
			this.outsideRenderedListRef = t, this.outsideRenderedListRef?.addEventListener("mousemove", this.onMouseHighlight), this.$emit("opened", e), e && this.setInitialHighlightIndex();
		},
		onKeyValidation(e, t) {
			!this.showList || !this.getListElement() || this[t](e);
		},
		setInitialHighlightIndex() {
			this.showList && this.$nextTick(() => {
				this.setHighlightIndex(this.loading ? -1 : 0);
			});
		},
		validateEmptyListProps() {
			this.$slots.emptyListItem || this.emptyList && !this.emptyStateMessage && console.error("Invalid props: you must pass both props emptyList and emptyStateMessage to show the\n      empty message.");
		}
	}
}, b = { "data-qa": "dt-combobox-input-wrapper" };
function x(e, t, n, r, i, a) {
	let o = h("combobox-loading-list"), y = h("combobox-empty-list");
	return p(), l("div", { onKeydown: [
		t[3] || (t[3] = _(v((e) => a.onKeyValidation(e, "onEscapeKey"), ["stop"]), ["esc"])),
		t[4] || (t[4] = _(v((e) => a.onKeyValidation(e, "onEnterKey"), ["exact"]), ["enter"])),
		t[5] || (t[5] = _(v((e) => a.onKeyValidation(e, "onUpKey"), ["stop", "prevent"]), ["up"])),
		t[6] || (t[6] = _(v((e) => a.onKeyValidation(e, "onDownKey"), ["stop", "prevent"]), ["down"])),
		t[7] || (t[7] = _(v((e) => a.onKeyValidation(e, "onHomeKey"), ["stop", "prevent"]), ["home"])),
		t[8] || (t[8] = _(v((e) => a.onKeyValidation(e, "onEndKey"), ["stop", "prevent"]), ["end"]))
	] }, [u("div", b, [m(e.$slots, "input", { inputProps: a.inputProps })]), n.showList ? (p(), l("div", {
		key: 0,
		ref: "listWrapper",
		"data-qa": "dt-combobox-list-wrapper",
		onMouseleave: t[0] || (t[0] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
		onFocusout: t[1] || (t[1] = (...e) => a.clearHighlightIndex && a.clearHighlightIndex(...e)),
		onMousemoveCapture: t[2] || (t[2] = (...e) => a.onMouseHighlight && a.onMouseHighlight(...e))
	}, [n.loading && !n.listRenderedOutside ? (p(), s(o, f(d({ key: 0 }, a.listProps)), null, 16)) : n.emptyList && (n.emptyStateMessage || i.hasSlotContent(e.$slots.emptyListItem)) && !n.listRenderedOutside ? (p(), s(y, d({ key: 1 }, a.listProps, {
		message: n.emptyStateMessage,
		"item-class": n.emptyStateClass
	}), {
		default: g(() => [m(e.$slots, "emptyListItem")]),
		_: 3
	}, 16, ["message", "item-class"])) : m(e.$slots, "list", {
		key: 2,
		listProps: a.listProps,
		opened: a.onOpen,
		clearHighlightIndex: a.clearHighlightIndex
	})], 544)) : c("", !0)], 32);
}
var S = /* @__PURE__ */ n(y, [["render", x]]);
//#endregion
export { S as t };

//# sourceMappingURL=combobox-DgClbLOg.js.map