@vadem/ui 0.0.0-stage → 0.0.1

package/fesm2022/vadem-ui-select.mjs

@@ -0,0 +1,1462 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, InjectionToken, Injector, ViewEncapsulation, afterNextRender, afterRenderEffect, booleanAttribute, computed, forwardRef, inject, input, model, signal, viewChild } from "@angular/core";
+import { NG_VALUE_ACCESSOR, NgControl } from "@angular/forms";
+import { VdIcon } from "@vadem/ui/icon";
+import { VdTypeahead, vdListTarget, vdMatchesQuery } from "@vadem/ui/keyboard";
+import { VD_FIELD, vdNgControlState, vdUniqueId } from "@vadem/ui/field";
+import { vdTexts } from "@vadem/ui/locale";
+const NO_NG_STATE = {
+	invalid: false,
+	touched: false,
+	disabled: false,
+	required: false
+};
+var VdListboxBase = class VdListboxBase {
+	placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+	size = input("md", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	invalid = input(false, {
+		...ngDevMode ? { debugName: "invalid" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	touched = input(void 0, ...ngDevMode ? [{ debugName: "touched" }] : /* istanbul ignore next */ []);
+	required = input(false, {
+		...ngDevMode ? { debugName: "required" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	emptyText = input(...ngDevMode ? [void 0, { debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	t = vdTexts("select", { emptyText: this.emptyText });
+	ariaLabel = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabel" } : /* istanbul ignore next */ {},
+		alias: "aria-label"
+	});
+	ariaLabelledby = input(void 0, {
+		...ngDevMode ? { debugName: "ariaLabelledby" } : /* istanbul ignore next */ {},
+		alias: "aria-labelledby"
+	});
+	listboxId = vdUniqueId("vd-listbox");
+	controlId = vdUniqueId("vd-combobox");
+	field = inject(VD_FIELD, { optional: true });
+	hostEl = inject(ElementRef).nativeElement;
+	injector = inject(Injector);
+	destroyRef = inject(DestroyRef);
+	options = signal([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	open = signal(false, ...ngDevMode ? [{ debugName: "open" }] : /* istanbul ignore next */ []);
+	activeId = signal(null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	formDisabled = signal(false, ...ngDevMode ? [{ debugName: "formDisabled" }] : /* istanbul ignore next */ []);
+	ngSource = signal(null, ...ngDevMode ? [{ debugName: "ngSource" }] : /* istanbul ignore next */ []);
+	typeahead = new VdTypeahead();
+	ordered = computed(() => [...this.options()].sort((a, b) => a.el.compareDocumentPosition(b.el) & a.el.DOCUMENT_POSITION_FOLLOWING ? -1 : 1), ...ngDevMode ? [{ debugName: "ordered" }] : /* istanbul ignore next */ []);
+	visibleOptions = computed(() => this.ordered().filter((o) => this.isVisible(o)), ...ngDevMode ? [{ debugName: "visibleOptions" }] : /* istanbul ignore next */ []);
+	selectedOption = computed(() => this.ordered().find((o) => this.isSelected(o)), ...ngDevMode ? [{ debugName: "selectedOption" }] : /* istanbul ignore next */ []);
+	selectedLabel = computed(() => this.selectedOption()?.textLabel() ?? "", ...ngDevMode ? [{ debugName: "selectedLabel" }] : /* istanbul ignore next */ []);
+	isDisabled = computed(() => this.disabled() || this.formDisabled(), ...ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []);
+	ngState = computed(() => this.ngSource()?.() ?? NO_NG_STATE, ...ngDevMode ? [{ debugName: "ngState" }] : /* istanbul ignore next */ []);
+	showInvalid = computed(() => {
+		if (this.invalid() && this.touched() !== false) return true;
+		const ng = this.ngState();
+		return ng.invalid && ng.touched;
+	}, ...ngDevMode ? [{ debugName: "showInvalid" }] : /* istanbul ignore next */ []);
+	isRequired = computed(() => this.required() || this.ngState().required, ...ngDevMode ? [{ debugName: "isRequired" }] : /* istanbul ignore next */ []);
+	describedBy = computed(() => this.field?.describedBy() ?? null, ...ngDevMode ? [{ debugName: "describedBy" }] : /* istanbul ignore next */ []);
+	onChange = () => void 0;
+	onTouched = () => void 0;
+	constructor() {
+		const fieldControl = {
+			id: signal(this.controlId),
+			invalid: this.showInvalid,
+			required: this.isRequired,
+			disabled: this.isDisabled
+		};
+		this.field?.register(fieldControl);
+		this.destroyRef.onDestroy(() => this.field?.unregister(fieldControl));
+		afterNextRender(() => {
+			const list = this.listEl();
+			const anchor = this.anchorEl();
+			if (!list || !anchor) return;
+			const name = `--${this.listboxId}`;
+			anchor.style.setProperty("anchor-name", name);
+			list.style.setProperty("position-anchor", name);
+			const onToggle = (e) => {
+				if (e.newState === "closed") this.afterClose();
+			};
+			list.addEventListener("toggle", onToggle);
+			this.destroyRef.onDestroy(() => list.removeEventListener("toggle", onToggle));
+		});
+		afterRenderEffect(() => {
+			const id = this.activeId();
+			if (!this.open() || !id) return;
+			this.ordered().find((o) => o.id === id)?.el.scrollIntoView({ block: "nearest" });
+		});
+	}
+	ngOnInit() {
+		const ngControl = this.injector.get(NgControl, null, {
+			self: true,
+			optional: true
+		});
+		this.ngSource.set(vdNgControlState(ngControl, this.destroyRef));
+	}
+	isActive(option) {
+		return option.id === this.activeId();
+	}
+	isVisible(_option) {
+		return true;
+	}
+	hover(option) {
+		if (!option.disabled()) this.activeId.set(option.id);
+	}
+	register(option) {
+		this.options.update((list) => [...list, option]);
+		return () => this.options.update((list) => list.filter((o) => o !== option));
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouched = fn;
+	}
+	setDisabledState(disabled) {
+		this.formDisabled.set(disabled);
+	}
+	onChosen(_option) {}
+	onClosed() {}
+	setValue(value) {
+		if (value === this.value()) return;
+		this.value.set(value);
+		this.onChange(value);
+	}
+	markTouched() {
+		this.onTouched();
+	}
+	openList(start = "selected") {
+		if (this.isDisabled() || this.open()) return;
+		const list = this.listEl();
+		if (!list) return;
+		this.open.set(true);
+		list.showPopover({ source: this.anchorEl() });
+		this.activate(start);
+	}
+	closeList() {
+		const list = this.listEl();
+		if (list?.matches(":popover-open")) list.hidePopover();
+		else this.afterClose();
+	}
+	activate(start) {
+		const enabled = this.visibleOptions().filter((o) => !o.disabled());
+		const pick = start === "selected" ? enabled.find((o) => this.isSelected(o)) ?? enabled[0] : start === "first" ? enabled[0] : enabled[enabled.length - 1];
+		this.activeId.set(pick?.id ?? null);
+	}
+	navigate(event) {
+		const visible = this.visibleOptions();
+		const current = visible.findIndex((o) => o.id === this.activeId());
+		const target = vdListTarget(event.key, current, visible.map((o) => o.disabled()), {
+			loop: false,
+			pageSize: 10
+		});
+		if (target === null) return false;
+		event.preventDefault();
+		this.activeId.set(visible[target]?.id ?? null);
+		return true;
+	}
+	typeaheadMatch(event) {
+		if (!VdTypeahead.accepts(event)) return void 0;
+		const visible = this.visibleOptions();
+		const current = visible.findIndex((o) => o.id === (this.activeId() ?? this.selectedOption()?.id));
+		const idx = this.typeahead.match(event.key, visible.map((o) => o.textLabel()), visible.map((o) => o.disabled()), current);
+		return idx === null ? void 0 : visible[idx];
+	}
+	activeOption() {
+		return this.visibleOptions().find((o) => o.id === this.activeId());
+	}
+	afterClose() {
+		if (!this.open()) return;
+		this.open.set(false);
+		this.activeId.set(null);
+		this.typeahead.reset();
+		this.onClosed();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdListboxBase,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdListboxBase,
+		isStandalone: true,
+		inputs: {
+			placeholder: {
+				classPropertyName: "placeholder",
+				publicName: "placeholder",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			size: {
+				classPropertyName: "size",
+				publicName: "size",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			invalid: {
+				classPropertyName: "invalid",
+				publicName: "invalid",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			touched: {
+				classPropertyName: "touched",
+				publicName: "touched",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			required: {
+				classPropertyName: "required",
+				publicName: "required",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyText: {
+				classPropertyName: "emptyText",
+				publicName: "emptyText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabel: {
+				classPropertyName: "ariaLabel",
+				publicName: "aria-label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			ariaLabelledby: {
+				classPropertyName: "ariaLabelledby",
+				publicName: "aria-labelledby",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdListboxBase,
+	decorators: [{ type: Directive }],
+	ctorParameters: () => [],
+	propDecorators: {
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		invalid: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "invalid",
+				required: false
+			}]
+		}],
+		touched: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "touched",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		emptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyText",
+				required: false
+			}]
+		}],
+		ariaLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-label",
+				required: false
+			}]
+		}],
+		ariaLabelledby: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "aria-labelledby",
+				required: false
+			}]
+		}]
+	}
+});
+const VD_LISTBOX = new InjectionToken("VD_LISTBOX");
+var VdCombobox = class VdCombobox extends VdListboxBase {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	isSelected(option) {
+		return option.value() === this.value();
+	}
+	writeValue(value) {
+		this.value.set(value ?? null);
+	}
+	choose(option) {
+		if (option.disabled() || this.isDisabled()) return;
+		this.setValue(option.value());
+		this.onChosen();
+		this.closeList();
+	}
+	fieldRef = viewChild.required("field", ...ngDevMode ? [{ debugName: "fieldRef" }] : /* istanbul ignore next */ []);
+	inputRef = viewChild.required("input", ...ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []);
+	list = viewChild.required("list", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	query = signal(null, ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	inputText = computed(() => this.query() ?? this.selectedLabel(), ...ngDevMode ? [{ debugName: "inputText" }] : /* istanbul ignore next */ []);
+	listEl() {
+		return this.list()?.nativeElement;
+	}
+	anchorEl() {
+		return this.fieldRef()?.nativeElement;
+	}
+	focus() {
+		this.inputRef().nativeElement.focus();
+	}
+	isVisible(option) {
+		const q = this.query();
+		return q === null || vdMatchesQuery(option.textLabel(), q);
+	}
+	onChosen() {
+		this.query.set(null);
+	}
+	onClosed() {
+		this.query.set(null);
+		if (this.hostEl.ownerDocument.activeElement !== this.inputRef().nativeElement) this.markTouched();
+	}
+	wasOpen = false;
+	onFieldPointerDown(event) {
+		this.wasOpen = this.open();
+		const input = this.inputRef().nativeElement;
+		if (event.target !== input && !this.isDisabled()) {
+			event.preventDefault();
+			input.focus();
+		}
+	}
+	onFieldClick(event) {
+		if (this.isDisabled()) return;
+		const onInput = event.target === this.inputRef().nativeElement;
+		if (this.open() && !onInput) this.closeList();
+		else if (!this.open() && !(this.wasOpen && !onInput)) this.openList("selected");
+		this.wasOpen = false;
+	}
+	onInput(event) {
+		this.query.set(event.target.value);
+		if (!this.open()) this.openList("first");
+		else this.activate("first");
+	}
+	onBlur() {
+		this.query.set(null);
+		if (!this.open()) this.markTouched();
+	}
+	onKeydown(event) {
+		const { key, altKey } = event;
+		if (!this.open()) {
+			if (key === "ArrowDown" || key === "ArrowUp") {
+				event.preventDefault();
+				this.openList(key === "ArrowUp" ? "last" : "selected");
+			}
+			return;
+		}
+		if (key === "Escape") {
+			event.preventDefault();
+			this.closeList();
+		} else if (key === "Enter" || altKey && key === "ArrowUp") {
+			event.preventDefault();
+			const active = this.activeOption();
+			if (active) this.choose(active);
+			else this.closeList();
+		} else if (key === "Tab") this.closeList();
+		else if (key !== "Home" && key !== "End") this.navigate(event);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdCombobox,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdCombobox,
+		isStandalone: true,
+		selector: "vd-combobox",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { value: "valueChange" },
+		host: {
+			properties: {
+				"attr.data-size": "size()",
+				"attr.data-open": "open() ? \"\" : null",
+				"attr.data-invalid": "showInvalid() ? \"\" : null",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.aria-label": "null",
+				"attr.aria-labelledby": "null"
+			},
+			classAttribute: "vd-combobox"
+		},
+		providers: [{
+			provide: VD_LISTBOX,
+			useExisting: forwardRef(() => VdCombobox)
+		}, {
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => VdCombobox),
+			multi: true
+		}],
+		viewQueries: [
+			{
+				propertyName: "fieldRef",
+				first: true,
+				predicate: ["field"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "inputRef",
+				first: true,
+				predicate: ["input"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "list",
+				first: true,
+				predicate: ["list"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <!-- Pointer convenience only: the input inside handles every key. -->
+    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+    <div
+      #field
+      class="vd-combobox__field"
+      (pointerdown)="onFieldPointerDown($event)"
+      (click)="onFieldClick($event)"
+    >
+      <vd-icon name="search" class="vd-combobox__icon" />
+      <input
+        #input
+        class="vd-combobox__input"
+        role="combobox"
+        aria-autocomplete="list"
+        autocomplete="off"
+        [id]="controlId"
+        [value]="inputText()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="listboxId"
+        [attr.aria-activedescendant]="open() ? activeId() : null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-required]="isRequired() || null"
+        [attr.aria-describedby]="describedBy()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        [attr.aria-labelledby]="ariaLabelledby() ?? null"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        (blur)="onBlur()"
+      />
+      <vd-icon name="chevron-down" class="vd-select__chevron" />
+    </div>
+    <div #list class="vd-listbox" popover="auto" role="listbox" [id]="listboxId" tabindex="-1">
+      <ng-content />
+      @if (visibleOptions().length === 0) {
+        <p class="vd-listbox__empty">{{ t().emptyText }}</p>
+      }
+    </div>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdCombobox,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-combobox",
+			imports: [VdIcon],
+			template: `
+    <!-- Pointer convenience only: the input inside handles every key. -->
+    <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+    <div
+      #field
+      class="vd-combobox__field"
+      (pointerdown)="onFieldPointerDown($event)"
+      (click)="onFieldClick($event)"
+    >
+      <vd-icon name="search" class="vd-combobox__icon" />
+      <input
+        #input
+        class="vd-combobox__input"
+        role="combobox"
+        aria-autocomplete="list"
+        autocomplete="off"
+        [id]="controlId"
+        [value]="inputText()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="listboxId"
+        [attr.aria-activedescendant]="open() ? activeId() : null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-required]="isRequired() || null"
+        [attr.aria-describedby]="describedBy()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        [attr.aria-labelledby]="ariaLabelledby() ?? null"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        (blur)="onBlur()"
+      />
+      <vd-icon name="chevron-down" class="vd-select__chevron" />
+    </div>
+    <div #list class="vd-listbox" popover="auto" role="listbox" [id]="listboxId" tabindex="-1">
+      <ng-content />
+      @if (visibleOptions().length === 0) {
+        <p class="vd-listbox__empty">{{ t().emptyText }}</p>
+      }
+    </div>
+  `,
+			host: {
+				class: "vd-combobox",
+				"[attr.data-size]": "size()",
+				"[attr.data-open]": "open() ? \"\" : null",
+				"[attr.data-invalid]": "showInvalid() ? \"\" : null",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.aria-label]": "null",
+				"[attr.aria-labelledby]": "null"
+			},
+			providers: [{
+				provide: VD_LISTBOX,
+				useExisting: forwardRef(() => VdCombobox)
+			}, {
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => VdCombobox),
+				multi: true
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		fieldRef: [{
+			type: i0.ViewChild,
+			args: ["field", { isSignal: true }]
+		}],
+		inputRef: [{
+			type: i0.ViewChild,
+			args: ["input", { isSignal: true }]
+		}],
+		list: [{
+			type: i0.ViewChild,
+			args: ["list", { isSignal: true }]
+		}]
+	}
+});
+function vdUniqueSelection(values) {
+	return [...new Set(values ?? [])];
+}
+function vdToggleSelection(values, value) {
+	return values.includes(value) ? values.filter((item) => item !== value) : [.../* @__PURE__ */ new Set([...values, value])];
+}
+var VdMultiSelect = class VdMultiSelect extends VdListboxBase {
+	value = model([], ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	removeLabel = input(...ngDevMode ? [void 0, { debugName: "removeLabel" }] : /* istanbul ignore next */ []);
+	selectionLabel = input(...ngDevMode ? [void 0, { debugName: "selectionLabel" }] : /* istanbul ignore next */ []);
+	multiTexts = vdTexts("multiSelect", {
+		removeLabel: this.removeLabel,
+		selectionLabel: this.selectionLabel
+	});
+	fieldRef = viewChild.required("field", ...ngDevMode ? [{ debugName: "fieldRef" }] : /* istanbul ignore next */ []);
+	inputRef = viewChild.required("input", ...ngDevMode ? [{ debugName: "inputRef" }] : /* istanbul ignore next */ []);
+	list = viewChild.required("list", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	query = signal("", ...ngDevMode ? [{ debugName: "query" }] : /* istanbul ignore next */ []);
+	summaryId = vdUniqueId("vd-selection");
+	descriptionIds = computed(() => [this.describedBy(), this.summaryId].filter(Boolean).join(" "), ...ngDevMode ? [{ debugName: "descriptionIds" }] : /* istanbul ignore next */ []);
+	selectedItems = computed(() => vdUniqueSelection(this.value()).map((value) => {
+		const option = this.ordered().find((item) => item.value() === value);
+		return {
+			value,
+			label: option?.textLabel() || value,
+			disabled: option?.disabled() ?? false
+		};
+	}), ...ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []);
+	constructor() {
+		super();
+		afterRenderEffect(() => {
+			if (this.isDisabled()) this.closeList();
+			else if (this.open()) {
+				const active = this.activeOption();
+				if (!active || active.disabled()) this.activate("first");
+			}
+		});
+	}
+	listEl() {
+		return this.list()?.nativeElement;
+	}
+	anchorEl() {
+		return this.fieldRef()?.nativeElement;
+	}
+	focus() {
+		this.inputRef().nativeElement.focus();
+	}
+	isSelected(option) {
+		return this.value().includes(option.value());
+	}
+	isVisible(option) {
+		return vdMatchesQuery(option.textLabel(), this.query());
+	}
+	choose(option) {
+		if (this.isDisabled() || option.disabled()) return;
+		this.setValue(vdToggleSelection(this.value(), option.value()));
+		this.focus();
+	}
+	writeValue(value) {
+		this.value.set(vdUniqueSelection(value));
+	}
+	remove(value) {
+		const item = this.selectedItems().find((item) => item.value === value);
+		if (this.isDisabled() || item?.disabled) return;
+		this.setValue(this.value().filter((item) => item !== value));
+		this.focus();
+	}
+	onInput(event) {
+		this.query.set(event.target.value);
+		if (event.isComposing) return;
+		this.openList("first");
+		this.activate("first");
+	}
+	onFocusOut(event) {
+		const next = event.relatedTarget;
+		if (next && this.hostEl.contains(next)) return;
+		this.markTouched();
+		this.closeList();
+	}
+	onFieldPointerDown(event) {
+		const target = event.target;
+		if (this.isDisabled() || target.closest("button") || target === this.inputRef().nativeElement) return;
+		event.preventDefault();
+		this.focus();
+		this.openList();
+	}
+	onClosed() {
+		this.query.set("");
+		if (!this.hostEl.contains(this.hostEl.ownerDocument.activeElement)) this.markTouched();
+	}
+	onKeydown(event) {
+		if (event.isComposing || this.isDisabled()) return;
+		const { key, altKey } = event;
+		if (key === "Backspace" && this.query() === "") {
+			const last = this.selectedItems().at(-1);
+			if (last && !last.disabled) {
+				event.preventDefault();
+				this.remove(last.value);
+			}
+		} else if (!this.open()) {
+			if (key === "ArrowDown" || key === "ArrowUp") {
+				event.preventDefault();
+				this.openList(key === "ArrowUp" ? "last" : "selected");
+			}
+		} else if (key === "Escape" || altKey && key === "ArrowUp") {
+			event.preventDefault();
+			event.stopPropagation();
+			this.closeList();
+		} else if (key === "Enter") {
+			event.preventDefault();
+			const active = this.activeOption();
+			if (active) this.choose(active);
+		} else if (key === "Tab") this.closeList();
+		else if (key !== "Home" && key !== "End") this.navigate(event);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdMultiSelect,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdMultiSelect,
+		isStandalone: true,
+		selector: "vd-multi-select",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			removeLabel: {
+				classPropertyName: "removeLabel",
+				publicName: "removeLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			selectionLabel: {
+				classPropertyName: "selectionLabel",
+				publicName: "selectionLabel",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { value: "valueChange" },
+		host: {
+			listeners: { "focusout": "onFocusOut($event)" },
+			properties: {
+				"attr.data-size": "size()",
+				"attr.data-open": "open() ? \"\" : null",
+				"attr.data-invalid": "showInvalid() ? \"\" : null",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.aria-disabled": "isDisabled() || null",
+				"attr.aria-label": "null",
+				"attr.aria-labelledby": "null"
+			},
+			classAttribute: "vd-multi-select"
+		},
+		providers: [{
+			provide: VD_LISTBOX,
+			useExisting: forwardRef(() => VdMultiSelect)
+		}, {
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => VdMultiSelect),
+			multi: true
+		}],
+		viewQueries: [
+			{
+				propertyName: "fieldRef",
+				first: true,
+				predicate: ["field"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "inputRef",
+				first: true,
+				predicate: ["input"],
+				descendants: true,
+				isSignal: true
+			},
+			{
+				propertyName: "list",
+				first: true,
+				predicate: ["list"],
+				descendants: true,
+				isSignal: true
+			}
+		],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <div #field class="vd-multi-select__field" (pointerdown)="onFieldPointerDown($event)">
+      @for (item of selectedItems(); track item.value) {
+        <span class="vd-multi-select__chip">
+          <span class="vd-multi-select__label" [title]="item.label">{{ item.label }}</span>
+          <button
+            type="button"
+            class="vd-multi-select__remove"
+            [disabled]="isDisabled() || item.disabled"
+            [attr.aria-label]="multiTexts().removeLabel(item.label)"
+            (click)="remove(item.value)"
+          >
+            <vd-icon name="x" />
+          </button>
+        </span>
+      }
+      <input
+        #input
+        class="vd-multi-select__input"
+        role="combobox"
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        autocomplete="off"
+        [id]="controlId"
+        [value]="query()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="listboxId"
+        [attr.aria-activedescendant]="open() ? activeId() : null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-required]="isRequired() || null"
+        [attr.aria-describedby]="descriptionIds()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        [attr.aria-labelledby]="ariaLabelledby() ?? null"
+        (click)="openList()"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        (compositionend)="onInput($event)"
+      />
+      <vd-icon name="chevron-down" class="vd-select__chevron" />
+    </div>
+    <span class="vd-visually-hidden" [id]="summaryId" role="status" aria-atomic="true">
+      {{ multiTexts().selectionLabel(selectedItems().length) }}
+    </span>
+    <div
+      #list
+      class="vd-listbox vd-multi-select__list"
+      popover="auto"
+      role="listbox"
+      aria-multiselectable="true"
+      [id]="listboxId"
+      tabindex="-1"
+    >
+      <ng-content />
+      @if (visibleOptions().length === 0) {
+        <p class="vd-listbox__empty">{{ t().emptyText }}</p>
+      }
+    </div>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdMultiSelect,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-multi-select",
+			imports: [VdIcon],
+			template: `
+    <div #field class="vd-multi-select__field" (pointerdown)="onFieldPointerDown($event)">
+      @for (item of selectedItems(); track item.value) {
+        <span class="vd-multi-select__chip">
+          <span class="vd-multi-select__label" [title]="item.label">{{ item.label }}</span>
+          <button
+            type="button"
+            class="vd-multi-select__remove"
+            [disabled]="isDisabled() || item.disabled"
+            [attr.aria-label]="multiTexts().removeLabel(item.label)"
+            (click)="remove(item.value)"
+          >
+            <vd-icon name="x" />
+          </button>
+        </span>
+      }
+      <input
+        #input
+        class="vd-multi-select__input"
+        role="combobox"
+        aria-autocomplete="list"
+        aria-haspopup="listbox"
+        autocomplete="off"
+        [id]="controlId"
+        [value]="query()"
+        [placeholder]="placeholder()"
+        [disabled]="isDisabled()"
+        [attr.aria-expanded]="open()"
+        [attr.aria-controls]="listboxId"
+        [attr.aria-activedescendant]="open() ? activeId() : null"
+        [attr.aria-invalid]="showInvalid() || null"
+        [attr.aria-required]="isRequired() || null"
+        [attr.aria-describedby]="descriptionIds()"
+        [attr.aria-label]="ariaLabel() ?? null"
+        [attr.aria-labelledby]="ariaLabelledby() ?? null"
+        (click)="openList()"
+        (input)="onInput($event)"
+        (keydown)="onKeydown($event)"
+        (compositionend)="onInput($event)"
+      />
+      <vd-icon name="chevron-down" class="vd-select__chevron" />
+    </div>
+    <span class="vd-visually-hidden" [id]="summaryId" role="status" aria-atomic="true">
+      {{ multiTexts().selectionLabel(selectedItems().length) }}
+    </span>
+    <div
+      #list
+      class="vd-listbox vd-multi-select__list"
+      popover="auto"
+      role="listbox"
+      aria-multiselectable="true"
+      [id]="listboxId"
+      tabindex="-1"
+    >
+      <ng-content />
+      @if (visibleOptions().length === 0) {
+        <p class="vd-listbox__empty">{{ t().emptyText }}</p>
+      }
+    </div>
+  `,
+			host: {
+				class: "vd-multi-select",
+				"[attr.data-size]": "size()",
+				"[attr.data-open]": "open() ? \"\" : null",
+				"[attr.data-invalid]": "showInvalid() ? \"\" : null",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.aria-disabled]": "isDisabled() || null",
+				"[attr.aria-label]": "null",
+				"[attr.aria-labelledby]": "null",
+				"(focusout)": "onFocusOut($event)"
+			},
+			providers: [{
+				provide: VD_LISTBOX,
+				useExisting: forwardRef(() => VdMultiSelect)
+			}, {
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => VdMultiSelect),
+				multi: true
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		removeLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "removeLabel",
+				required: false
+			}]
+		}],
+		selectionLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "selectionLabel",
+				required: false
+			}]
+		}],
+		fieldRef: [{
+			type: i0.ViewChild,
+			args: ["field", { isSignal: true }]
+		}],
+		inputRef: [{
+			type: i0.ViewChild,
+			args: ["input", { isSignal: true }]
+		}],
+		list: [{
+			type: i0.ViewChild,
+			args: ["list", { isSignal: true }]
+		}]
+	}
+});
+var VdOption = class VdOption {
+	value = input.required(...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	disabled = input(false, {
+		...ngDevMode ? { debugName: "disabled" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	host = inject(VD_LISTBOX);
+	el = inject(ElementRef).nativeElement;
+	id = vdUniqueId("vd-option");
+	destroyRef = inject(DestroyRef);
+	selected = computed(() => this.host.isSelected(this), ...ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []);
+	active = computed(() => this.host.isActive(this), ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	visible = computed(() => this.host.isVisible(this), ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	textLabel() {
+		return this.label() ?? this.el.querySelector(".vd-option__label")?.textContent?.trim() ?? "";
+	}
+	ngOnInit() {
+		this.destroyRef.onDestroy(this.host.register(this));
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdOption,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdOption,
+		isStandalone: true,
+		selector: "vd-option",
+		inputs: {
+			value: {
+				classPropertyName: "value",
+				publicName: "value",
+				isSignal: true,
+				isRequired: true,
+				transformFunction: null
+			},
+			disabled: {
+				classPropertyName: "disabled",
+				publicName: "disabled",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		host: {
+			attributes: { "role": "option" },
+			listeners: {
+				"click": "host.choose(this)",
+				"pointermove": "host.hover(this)",
+				"mousedown": "$event.preventDefault()"
+			},
+			properties: {
+				"id": "id",
+				"attr.aria-selected": "selected()",
+				"attr.aria-disabled": "disabled() || null",
+				"attr.data-active": "active() ? \"\" : null",
+				"hidden": "!visible()"
+			},
+			classAttribute: "vd-option"
+		},
+		ngImport: i0,
+		template: `
+    <span class="vd-option__label"><ng-content /></span>
+    <vd-icon name="check" class="vd-option__check" />
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdOption,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-option",
+			imports: [VdIcon],
+			template: `
+    <span class="vd-option__label"><ng-content /></span>
+    <vd-icon name="check" class="vd-option__check" />
+  `,
+			host: {
+				class: "vd-option",
+				role: "option",
+				"[id]": "id",
+				"[attr.aria-selected]": "selected()",
+				"[attr.aria-disabled]": "disabled() || null",
+				"[attr.data-active]": "active() ? \"\" : null",
+				"[hidden]": "!visible()",
+				"(click)": "host.choose(this)",
+				"(pointermove)": "host.hover(this)",
+				"(mousedown)": "$event.preventDefault()"
+			},
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: true
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}]
+	}
+});
+var VdSelect = class VdSelect extends VdListboxBase {
+	value = model(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+	isSelected(option) {
+		return option.value() === this.value();
+	}
+	writeValue(value) {
+		this.value.set(value ?? null);
+	}
+	choose(option) {
+		if (option.disabled() || this.isDisabled()) return;
+		this.setValue(option.value());
+		this.onChosen(option);
+		this.closeList();
+	}
+	trigger = viewChild.required("trigger", ...ngDevMode ? [{ debugName: "trigger" }] : /* istanbul ignore next */ []);
+	list = viewChild.required("list", ...ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []);
+	wasOpen = false;
+	listEl() {
+		return this.list()?.nativeElement;
+	}
+	anchorEl() {
+		return this.trigger()?.nativeElement;
+	}
+	focus() {
+		this.trigger().nativeElement.focus();
+	}
+	onClick() {
+		if (this.wasOpen || this.open()) {
+			this.wasOpen = false;
+			this.closeList();
+			return;
+		}
+		this.openList("selected");
+	}
+	onBlur() {
+		if (!this.open()) this.markTouched();
+	}
+	onClosed() {
+		if (this.hostEl.ownerDocument.activeElement !== this.trigger().nativeElement) this.markTouched();
+	}
+	onKeydown(event) {
+		const { key, altKey } = event;
+		if (!this.open()) {
+			if (key === "ArrowDown" || key === "ArrowUp" || key === "Enter" || key === " ") {
+				event.preventDefault();
+				this.openList("selected");
+			} else if (key === "Home" || key === "End") {
+				event.preventDefault();
+				this.openList(key === "Home" ? "first" : "last");
+			} else {
+				const match = this.typeaheadMatch(event);
+				if (match) {
+					this.openList("selected");
+					this.activeId.set(match.id);
+				}
+			}
+			return;
+		}
+		if (key === "Escape") {
+			event.preventDefault();
+			this.closeList();
+		} else if (key === "Enter" || key === " " || altKey && key === "ArrowUp") {
+			event.preventDefault();
+			const active = this.activeOption();
+			if (active) this.choose(active);
+			else this.closeList();
+		} else if (key === "Tab") {
+			const active = this.activeOption();
+			if (active) this.choose(active);
+			else this.closeList();
+		} else if (!this.navigate(event)) {
+			const match = this.typeaheadMatch(event);
+			if (match) this.activeId.set(match.id);
+		}
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdSelect,
+		deps: null,
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdSelect,
+		isStandalone: true,
+		selector: "vd-select",
+		inputs: { value: {
+			classPropertyName: "value",
+			publicName: "value",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: { value: "valueChange" },
+		host: {
+			properties: {
+				"attr.data-size": "size()",
+				"attr.data-open": "open() ? \"\" : null",
+				"attr.data-invalid": "showInvalid() ? \"\" : null",
+				"attr.data-disabled": "isDisabled() ? \"\" : null",
+				"attr.aria-label": "null",
+				"attr.aria-labelledby": "null"
+			},
+			classAttribute: "vd-select"
+		},
+		providers: [{
+			provide: VD_LISTBOX,
+			useExisting: forwardRef(() => VdSelect)
+		}, {
+			provide: NG_VALUE_ACCESSOR,
+			useExisting: forwardRef(() => VdSelect),
+			multi: true
+		}],
+		viewQueries: [{
+			propertyName: "trigger",
+			first: true,
+			predicate: ["trigger"],
+			descendants: true,
+			isSignal: true
+		}, {
+			propertyName: "list",
+			first: true,
+			predicate: ["list"],
+			descendants: true,
+			isSignal: true
+		}],
+		usesInheritance: true,
+		ngImport: i0,
+		template: `
+    <button
+      #trigger
+      type="button"
+      class="vd-select__trigger"
+      role="combobox"
+      aria-haspopup="listbox"
+      [id]="controlId"
+      [disabled]="isDisabled()"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="listboxId"
+      [attr.aria-activedescendant]="open() ? activeId() : null"
+      [attr.aria-invalid]="showInvalid() || null"
+      [attr.aria-required]="isRequired() || null"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-labelledby]="ariaLabelledby() ?? null"
+      (pointerdown)="wasOpen = open()"
+      (click)="onClick()"
+      (keydown)="onKeydown($event)"
+      (blur)="onBlur()"
+    >
+      <span class="vd-select__value" [attr.data-placeholder]="selectedLabel() ? null : ''">
+        {{ selectedLabel() || placeholder() }}
+      </span>
+      <vd-icon name="chevron-down" class="vd-select__chevron" />
+    </button>
+    <div #list class="vd-listbox" popover="auto" role="listbox" [id]="listboxId" tabindex="-1">
+      <ng-content />
+      @if (visibleOptions().length === 0) {
+        <p class="vd-listbox__empty">{{ t().emptyText }}</p>
+      }
+    </div>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdIcon,
+			selector: "vd-icon",
+			inputs: ["name", "label"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdSelect,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-select",
+			imports: [VdIcon],
+			template: `
+    <button
+      #trigger
+      type="button"
+      class="vd-select__trigger"
+      role="combobox"
+      aria-haspopup="listbox"
+      [id]="controlId"
+      [disabled]="isDisabled()"
+      [attr.aria-expanded]="open()"
+      [attr.aria-controls]="listboxId"
+      [attr.aria-activedescendant]="open() ? activeId() : null"
+      [attr.aria-invalid]="showInvalid() || null"
+      [attr.aria-required]="isRequired() || null"
+      [attr.aria-describedby]="describedBy()"
+      [attr.aria-label]="ariaLabel() ?? null"
+      [attr.aria-labelledby]="ariaLabelledby() ?? null"
+      (pointerdown)="wasOpen = open()"
+      (click)="onClick()"
+      (keydown)="onKeydown($event)"
+      (blur)="onBlur()"
+    >
+      <span class="vd-select__value" [attr.data-placeholder]="selectedLabel() ? null : ''">
+        {{ selectedLabel() || placeholder() }}
+      </span>
+      <vd-icon name="chevron-down" class="vd-select__chevron" />
+    </button>
+    <div #list class="vd-listbox" popover="auto" role="listbox" [id]="listboxId" tabindex="-1">
+      <ng-content />
+      @if (visibleOptions().length === 0) {
+        <p class="vd-listbox__empty">{{ t().emptyText }}</p>
+      }
+    </div>
+  `,
+			host: {
+				class: "vd-select",
+				"[attr.data-size]": "size()",
+				"[attr.data-open]": "open() ? \"\" : null",
+				"[attr.data-invalid]": "showInvalid() ? \"\" : null",
+				"[attr.data-disabled]": "isDisabled() ? \"\" : null",
+				"[attr.aria-label]": "null",
+				"[attr.aria-labelledby]": "null"
+			},
+			providers: [{
+				provide: VD_LISTBOX,
+				useExisting: forwardRef(() => VdSelect)
+			}, {
+				provide: NG_VALUE_ACCESSOR,
+				useExisting: forwardRef(() => VdSelect),
+				multi: true
+			}],
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	propDecorators: {
+		value: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "value",
+				required: false
+			}]
+		}, {
+			type: i0.Output,
+			args: ["valueChange"]
+		}],
+		trigger: [{
+			type: i0.ViewChild,
+			args: ["trigger", { isSignal: true }]
+		}],
+		list: [{
+			type: i0.ViewChild,
+			args: ["list", { isSignal: true }]
+		}]
+	}
+});
+export { VdCombobox, VdMultiSelect, VdOption, VdSelect };
+
+//# sourceMappingURL=vadem-ui-select.mjs.map