import { n as __exportAll } from "./chunk-B-1-B7_t.js";
import { n as Badge_default } from "./badge-BbQrSqE-.js";
import { n as Button_default } from "./button-B9CnnuTu.js";
import { c as ComboboxAnchor_default, i as ComboboxInput_default, l as Combobox_default, n as ComboboxItemIndicator_default, o as ComboboxEmpty_default, r as ComboboxItem_default, s as ComboboxContent_default } from "./combobox-D0Svg8GU.js";
import { t as FieldFrame_default } from "./field-frame-DhCOWcMP.js";
import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, normalizeClass, openBlock, renderList, toDisplayString, unref, useModel, withCtx } from "vue";
import { X } from "@lucide/vue";
//#region src/components/compositions/elements/option-select/SelectMultipleOption.vue?vue&type=script&setup=true&lang.ts
var _hoisted_1 = ["data-testid"];
var SelectMultipleOption_vue_vue_type_script_setup_true_lang_default = /* @__PURE__ */ defineComponent({
	__name: "SelectMultipleOption",
	props: /* @__PURE__ */ mergeModels({
		modelValue: {},
		options: { default: () => [] },
		id: {},
		name: {},
		label: {},
		hideLabel: { type: Boolean },
		placeholder: {},
		required: { type: Boolean },
		readonly: { type: Boolean },
		disabled: { type: Boolean },
		helpText: {},
		errors: { default: () => [] }
	}, {
		"modelValue": {},
		"modelModifiers": {}
	}),
	emits: ["update:modelValue"],
	setup(__props) {
		/**
		* Props-driven multi-select composition. Wraps the shadcn Combobox
		* primitive with badge chips showing the current selection.
		*
		*   <SelectMultipleOption v-model="tags" :options="[...]" label="Tags" />
		*/
		const props = __props;
		const model = useModel(__props, "modelValue");
		function normaliseOption(opt) {
			if (typeof opt === "string") return {
				label: opt,
				value: opt,
				disabled: false
			};
			return {
				label: opt.label,
				value: String(opt.value),
				disabled: Boolean(opt.disabled)
			};
		}
		const normalised = computed(() => (props.options ?? []).map(normaliseOption));
		const selected = computed(() => {
			const v = model.value;
			if (!v) return [];
			if (Array.isArray(v)) return v.map((x) => String(x));
			return [String(v)];
		});
		const labelFor = (val) => normalised.value.find((o) => o.value === val)?.label ?? val;
		function onUpdate(next) {
			if (Array.isArray(next)) model.value = next.map((v) => String(v));
			else if (next === void 0 || next === null) model.value = [];
			else model.value = [String(next)];
		}
		function removeValue(val) {
			model.value = selected.value.filter((v) => v !== val);
		}
		return (_ctx, _cache) => {
			return openBlock(), createBlock(unref(FieldFrame_default), {
				label: __props.label,
				required: __props.required,
				"hide-label": __props.hideLabel,
				for: __props.id,
				"help-text": __props.helpText,
				errors: __props.errors
			}, {
				default: withCtx(() => [selected.value.length ? (openBlock(), createElementBlock("div", {
					key: 0,
					class: "flex flex-wrap gap-1",
					"data-testid": `${__props.id ?? "select-multiple"}-chips`
				}, [(openBlock(true), createElementBlock(Fragment, null, renderList(selected.value, (v) => {
					return openBlock(), createBlock(unref(Badge_default), {
						key: v,
						variant: "secondary",
						class: "flex items-center gap-1"
					}, {
						default: withCtx(() => [createElementVNode("span", null, toDisplayString(labelFor(v)), 1), !__props.disabled && !__props.readonly ? (openBlock(), createBlock(unref(Button_default), {
							key: 0,
							type: "button",
							variant: "ghost",
							size: "icon-sm",
							class: "h-4 w-4 p-0",
							"aria-label": `Remove ${labelFor(v)}`,
							onClick: ($event) => removeValue(v)
						}, {
							default: withCtx(() => [createVNode(unref(X), { class: "h-3 w-3" })]),
							_: 1
						}, 8, ["aria-label", "onClick"])) : createCommentVNode("", true)]),
						_: 2
					}, 1024);
				}), 128))], 8, _hoisted_1)) : createCommentVNode("", true), createVNode(unref(Combobox_default), {
					"model-value": selected.value,
					multiple: "",
					disabled: __props.disabled || __props.readonly,
					"onUpdate:modelValue": onUpdate
				}, {
					default: withCtx(() => [createVNode(unref(ComboboxAnchor_default), {
						"data-element-name": __props.name ?? void 0,
						class: normalizeClass(__props.errors.length ? "border-destructive ring-destructive" : "")
					}, {
						default: withCtx(() => [createVNode(unref(ComboboxInput_default), {
							id: __props.id,
							placeholder: __props.placeholder ?? "Select multiple…"
						}, null, 8, ["id", "placeholder"])]),
						_: 1
					}, 8, ["data-element-name", "class"]), createVNode(unref(ComboboxContent_default), null, {
						default: withCtx(() => [createVNode(unref(ComboboxEmpty_default), null, {
							default: withCtx(() => [..._cache[0] || (_cache[0] = [createTextVNode("No options match.", -1)])]),
							_: 1
						}), (openBlock(true), createElementBlock(Fragment, null, renderList(normalised.value, (opt) => {
							return openBlock(), createBlock(unref(ComboboxItem_default), {
								key: opt.value,
								value: opt.value,
								disabled: opt.disabled
							}, {
								default: withCtx(() => [createVNode(unref(ComboboxItemIndicator_default)), createTextVNode(" " + toDisplayString(opt.label), 1)]),
								_: 2
							}, 1032, ["value", "disabled"]);
						}), 128))]),
						_: 1
					})]),
					_: 1
				}, 8, ["model-value", "disabled"])]),
				_: 1
			}, 8, [
				"label",
				"required",
				"hide-label",
				"for",
				"help-text",
				"errors"
			]);
		};
	}
});
//#endregion
//#region src/components/compositions/elements/option-select/SelectMultipleOption.vue
var SelectMultipleOption_exports = /* @__PURE__ */ __exportAll({ default: () => SelectMultipleOption_default });
var SelectMultipleOption_default = SelectMultipleOption_vue_vue_type_script_setup_true_lang_default;
//#endregion
export { SelectMultipleOption_exports as n, SelectMultipleOption_default as t };

//# sourceMappingURL=SelectMultipleOption-6JxZUNLW.js.map