@vadem/ui 0.0.0-stage → 0.0.2

package/fesm2022/vadem-ui-autocomplete.mjs

@@ -0,0 +1,715 @@
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, Component, DestroyRef, Directive, ElementRef, ViewEncapsulation, afterEveryRender, afterRenderEffect, booleanAttribute, computed, inject, input, output, signal, untracked, viewChild } from "@angular/core";
+import { vdUniqueId } from "@vadem/ui/field";
+import { vdListTarget } from "@vadem/ui/keyboard";
+import { vdTexts } from "@vadem/ui/locale";
+import { VdTextHighlight } from "@vadem/ui/text-highlight";
+import { FormResetEvent, NgControl } from "@angular/forms";
+import { FormField } from "@angular/forms/signals";
+import { VdInput } from "@vadem/ui/input";
+function vdAutocompleteActive(options, id) {
+	return options.find((option) => option.id === id && !option.disabled);
+}
+function vdAutocompleteMove(options, id, key) {
+	const index = vdListTarget(key, options.findIndex((option) => option.id === id), options.map((option) => !!option.disabled), {
+		loop: false,
+		pageSize: 10
+	});
+	return index === null ? null : options[index]?.id ?? null;
+}
+function vdAutocompletePlacement(anchor, viewport, height, gap, rtl) {
+	const width = Math.max(0, Math.min(anchor.width, viewport.width - gap * 2));
+	const below = Math.max(0, viewport.height - anchor.bottom - gap * 2);
+	const above = Math.max(0, anchor.top - gap * 2);
+	const flip = height > below && above > below;
+	const available = flip ? above : below;
+	const top = Math.max(gap, flip ? anchor.top - Math.min(height, available) - gap : anchor.bottom + gap);
+	const start = rtl ? viewport.width - anchor.right : anchor.left;
+	return {
+		width,
+		top,
+		inline: Math.max(gap, Math.min(start, viewport.width - width - gap)),
+		available
+	};
+}
+var VdAutocomplete = class VdAutocomplete {
+	options = input([], ...ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []);
+	highlightQuery = input("", ...ngDevMode ? [{ debugName: "highlightQuery" }] : /* istanbul ignore next */ []);
+	loading = input(false, {
+		...ngDevMode ? { debugName: "loading" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	errorText = input("", ...ngDevMode ? [{ debugName: "errorText" }] : /* istanbul ignore next */ []);
+	label = input(...ngDevMode ? [void 0, { debugName: "label" }] : /* istanbul ignore next */ []);
+	loadingText = input(...ngDevMode ? [void 0, { debugName: "loadingText" }] : /* istanbul ignore next */ []);
+	emptyText = input(...ngDevMode ? [void 0, { debugName: "emptyText" }] : /* istanbul ignore next */ []);
+	resultsText = input(...ngDevMode ? [void 0, { debugName: "resultsText" }] : /* istanbul ignore next */ []);
+	t = vdTexts("autocomplete", {
+		label: this.label,
+		loadingText: this.loadingText,
+		emptyText: this.emptyText,
+		resultsText: this.resultsText
+	});
+	optionSelected = output();
+	listboxId = vdUniqueId("vd-autocomplete");
+	expanded = signal(false, ...ngDevMode ? [{ debugName: "expanded" }] : /* istanbul ignore next */ []);
+	fallback = signal(false, ...ngDevMode ? [{ debugName: "fallback" }] : /* istanbul ignore next */ []);
+	popup = viewChild.required("popup", ...ngDevMode ? [{ debugName: "popup" }] : /* istanbul ignore next */ []);
+	activeKey = signal(null, ...ngDevMode ? [{ debugName: "activeKey" }] : /* istanbul ignore next */ []);
+	owner = null;
+	cleanup = null;
+	availableOptions = computed(() => this.loading() || this.errorText() ? [] : this.options(), ...ngDevMode ? [{ debugName: "availableOptions" }] : /* istanbul ignore next */ []);
+	active = computed(() => vdAutocompleteActive(this.availableOptions(), this.activeKey()), ...ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []);
+	activeId = computed(() => this.expanded() && this.active() ? this.optionId(this.active()) : null, ...ngDevMode ? [{ debugName: "activeId" }] : /* istanbul ignore next */ []);
+	message = computed(() => this.loading() ? this.t().loadingText : this.errorText() || (this.availableOptions().length ? this.t().resultsText(this.availableOptions().filter((o) => !o.disabled).length) : this.t().emptyText), ...ngDevMode ? [{ debugName: "message" }] : /* istanbul ignore next */ []);
+	constructor() {
+		inject(DestroyRef).onDestroy(() => {
+			this.close();
+			this.cleanup?.();
+			this.owner = null;
+		});
+		afterRenderEffect(() => {
+			const active = this.active();
+			if (!active && this.activeKey() !== null) this.activeKey.set(null);
+			if (this.expanded() && active) this.popup().nativeElement.ownerDocument.getElementById(this.optionId(active))?.scrollIntoView({
+				block: "nearest",
+				inline: "nearest"
+			});
+		});
+		afterEveryRender(() => {
+			if (this.expanded()) this.position();
+		});
+	}
+	connect(owner) {
+		if (this.owner && this.owner !== owner) throw new Error("An autocomplete panel requires a single input.");
+		this.owner = owner;
+		const popup = this.popup().nativeElement;
+		const doc = owner.element.ownerDocument;
+		const win = doc.defaultView;
+		this.fallback.set(typeof popup.showPopover !== "function");
+		const outside = (event) => {
+			const path = event.composedPath();
+			if (!path.includes(owner.element) && !path.includes(popup)) this.close();
+		};
+		const reposition = () => {
+			if (this.expanded()) this.position();
+		};
+		doc.addEventListener("pointerdown", outside, true);
+		doc.addEventListener("scroll", reposition, true);
+		win?.addEventListener("resize", reposition);
+		win?.visualViewport?.addEventListener("resize", reposition);
+		const observer = win?.ResizeObserver ? new win.ResizeObserver(reposition) : null;
+		observer?.observe(owner.element);
+		const cleanup = () => {
+			doc.removeEventListener("pointerdown", outside, true);
+			doc.removeEventListener("scroll", reposition, true);
+			win?.removeEventListener("resize", reposition);
+			win?.visualViewport?.removeEventListener("resize", reposition);
+			observer?.disconnect();
+		};
+		this.cleanup = cleanup;
+		return () => {
+			if (this.owner !== owner) return;
+			this.close();
+			cleanup();
+			this.cleanup = null;
+			this.owner = null;
+		};
+	}
+	open() {
+		if (!this.owner || this.owner.locked() || this.expanded()) return;
+		this.activeKey.set(null);
+		this.expanded.set(true);
+		const popup = this.popup().nativeElement;
+		if (!this.fallback()) popup.showPopover({ source: this.owner.element });
+		this.position();
+	}
+	close() {
+		if (!this.expanded()) return;
+		this.expanded.set(false);
+		this.activeKey.set(null);
+		const popup = this.popup().nativeElement;
+		if (!this.fallback() && popup.matches(":popover-open")) popup.hidePopover();
+	}
+	resetActive() {
+		this.activeKey.set(null);
+	}
+	navigate(key) {
+		this.open();
+		if (!this.expanded() || this.owner?.locked()) return;
+		if (!this.availableOptions().some((option) => !option.disabled)) {
+			const popup = this.popup().nativeElement;
+			const line = Number.parseFloat(popup.ownerDocument.defaultView.getComputedStyle(popup).lineHeight);
+			popup.scrollBy?.({ top: (key === "ArrowDown" ? 1 : -1) * line });
+		}
+		this.activeKey.set(vdAutocompleteMove(this.availableOptions(), this.active()?.id ?? null, key));
+	}
+	choose(id) {
+		if (!this.expanded() || !this.owner || this.owner.locked()) return;
+		const option = vdAutocompleteActive(this.availableOptions(), id);
+		if (!option) return;
+		this.close();
+		this.owner.accept(option);
+		this.optionSelected.emit(option);
+	}
+	hover(option) {
+		if (!option.disabled) this.activeKey.set(option.id);
+	}
+	optionId(option) {
+		return `${this.listboxId}-${encodeURIComponent(option.id)}`;
+	}
+	syncToggle() {
+		if (!this.fallback() && !this.popup().nativeElement.matches(":popover-open")) this.close();
+	}
+	position() {
+		const input = this.owner?.element;
+		const popup = this.popup().nativeElement;
+		const win = input?.ownerDocument.defaultView;
+		if (!input || !win) return;
+		popup.dir = win.getComputedStyle(input).direction;
+		const style = win.getComputedStyle(popup);
+		const gap = Number.parseFloat(style.paddingInlineStart) || 0;
+		popup.style.removeProperty("--vd-autocomplete-available-block");
+		const cap = Number.parseFloat(win.getComputedStyle(popup).maxBlockSize);
+		const rect = vdAutocompletePlacement(input.getBoundingClientRect(), {
+			width: input.ownerDocument.documentElement.getBoundingClientRect().width,
+			height: win.visualViewport?.height ?? win.innerHeight
+		}, Math.min(popup.scrollHeight, Number.isFinite(cap) ? cap : popup.scrollHeight), gap, win.getComputedStyle(input).direction === "rtl");
+		popup.style.setProperty("inset-block-start", `${rect.top}px`);
+		popup.style.setProperty("inset-inline-start", `${rect.inline}px`);
+		popup.style.setProperty("inline-size", `${rect.width}px`);
+		popup.style.setProperty("--vd-autocomplete-available-block", `${rect.available}px`);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdAutocomplete,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: VdAutocomplete,
+		isStandalone: true,
+		selector: "vd-autocomplete",
+		inputs: {
+			options: {
+				classPropertyName: "options",
+				publicName: "options",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			highlightQuery: {
+				classPropertyName: "highlightQuery",
+				publicName: "highlightQuery",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loading: {
+				classPropertyName: "loading",
+				publicName: "loading",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			errorText: {
+				classPropertyName: "errorText",
+				publicName: "errorText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			label: {
+				classPropertyName: "label",
+				publicName: "label",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			loadingText: {
+				classPropertyName: "loadingText",
+				publicName: "loadingText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			emptyText: {
+				classPropertyName: "emptyText",
+				publicName: "emptyText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
+			resultsText: {
+				classPropertyName: "resultsText",
+				publicName: "resultsText",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			}
+		},
+		outputs: { optionSelected: "optionSelected" },
+		host: { classAttribute: "vd-autocomplete" },
+		viewQueries: [{
+			propertyName: "popup",
+			first: true,
+			predicate: ["popup"],
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <div
+      #popup
+      class="vd-autocomplete__popup"
+      popover="auto"
+      role="listbox"
+      [id]="listboxId"
+      [attr.aria-label]="t().label"
+      [attr.aria-busy]="loading()"
+      [attr.data-open]="expanded() ? '' : null"
+      [attr.data-fallback]="fallback() ? '' : null"
+      [attr.data-state]="loading() ? 'loading' : errorText() ? 'error' : 'ready'"
+      (toggle)="syncToggle()"
+      (mousedown)="$event.preventDefault()"
+    >
+      @for (option of availableOptions(); track option.id) {
+        <!-- Options are operated from the input through aria-activedescendant. -->
+        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+        <div
+          class="vd-autocomplete__option"
+          role="option"
+          [id]="optionId(option)"
+          [attr.aria-label]="option.label"
+          [attr.aria-describedby]="option.description ? optionId(option) + '-description' : null"
+          [attr.aria-selected]="active()?.id === option.id"
+          [attr.aria-disabled]="option.disabled || null"
+          [attr.data-active]="active()?.id === option.id ? '' : null"
+          (pointermove)="hover(option)"
+          (click)="choose(option.id)"
+        >
+          <span class="vd-autocomplete__label">
+            @if (highlightQuery()) {
+              <vd-text-highlight [text]="option.label" [query]="highlightQuery()" />
+            } @else {
+              <ng-container>{{ option.label }}</ng-container>
+            }
+          </span>
+          @if (option.description) {
+            <span class="vd-autocomplete__description" [id]="optionId(option) + '-description'">{{
+              option.description
+            }}</span>
+          }
+        </div>
+      }
+      @if (loading() || errorText() || !availableOptions().length) {
+        <p class="vd-autocomplete__message" aria-hidden="true">{{ message() }}</p>
+      }
+    </div>
+    <p class="vd-visually-hidden" role="status" aria-atomic="true">
+      {{ expanded() ? message() : '' }}
+    </p>
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: VdTextHighlight,
+			selector: "vd-text-highlight",
+			inputs: ["text", "query"]
+		}],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush,
+		encapsulation: i0.ViewEncapsulation.None
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdAutocomplete,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "vd-autocomplete",
+			imports: [VdTextHighlight],
+			template: `
+    <div
+      #popup
+      class="vd-autocomplete__popup"
+      popover="auto"
+      role="listbox"
+      [id]="listboxId"
+      [attr.aria-label]="t().label"
+      [attr.aria-busy]="loading()"
+      [attr.data-open]="expanded() ? '' : null"
+      [attr.data-fallback]="fallback() ? '' : null"
+      [attr.data-state]="loading() ? 'loading' : errorText() ? 'error' : 'ready'"
+      (toggle)="syncToggle()"
+      (mousedown)="$event.preventDefault()"
+    >
+      @for (option of availableOptions(); track option.id) {
+        <!-- Options are operated from the input through aria-activedescendant. -->
+        <!-- eslint-disable-next-line @angular-eslint/template/click-events-have-key-events, @angular-eslint/template/interactive-supports-focus -->
+        <div
+          class="vd-autocomplete__option"
+          role="option"
+          [id]="optionId(option)"
+          [attr.aria-label]="option.label"
+          [attr.aria-describedby]="option.description ? optionId(option) + '-description' : null"
+          [attr.aria-selected]="active()?.id === option.id"
+          [attr.aria-disabled]="option.disabled || null"
+          [attr.data-active]="active()?.id === option.id ? '' : null"
+          (pointermove)="hover(option)"
+          (click)="choose(option.id)"
+        >
+          <span class="vd-autocomplete__label">
+            @if (highlightQuery()) {
+              <vd-text-highlight [text]="option.label" [query]="highlightQuery()" />
+            } @else {
+              <ng-container>{{ option.label }}</ng-container>
+            }
+          </span>
+          @if (option.description) {
+            <span class="vd-autocomplete__description" [id]="optionId(option) + '-description'">{{
+              option.description
+            }}</span>
+          }
+        </div>
+      }
+      @if (loading() || errorText() || !availableOptions().length) {
+        <p class="vd-autocomplete__message" aria-hidden="true">{{ message() }}</p>
+      }
+    </div>
+    <p class="vd-visually-hidden" role="status" aria-atomic="true">
+      {{ expanded() ? message() : '' }}
+    </p>
+  `,
+			host: { class: "vd-autocomplete" },
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			encapsulation: ViewEncapsulation.None
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		options: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "options",
+				required: false
+			}]
+		}],
+		highlightQuery: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "highlightQuery",
+				required: false
+			}]
+		}],
+		loading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loading",
+				required: false
+			}]
+		}],
+		errorText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errorText",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		loadingText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "loadingText",
+				required: false
+			}]
+		}],
+		emptyText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "emptyText",
+				required: false
+			}]
+		}],
+		resultsText: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "resultsText",
+				required: false
+			}]
+		}],
+		optionSelected: [{
+			type: i0.Output,
+			args: ["optionSelected"]
+		}],
+		popup: [{
+			type: i0.ViewChild,
+			args: ["popup", { isSignal: true }]
+		}]
+	}
+});
+var VdAutocompleteInput = class VdAutocompleteInput extends VdInput {
+	vdAutocomplete = input.required(...ngDevMode ? [{ debugName: "vdAutocomplete" }] : /* istanbul ignore next */ []);
+	queryChange = output();
+	element = inject(ElementRef).nativeElement;
+	autocompleteNgControl = inject(NgControl, {
+		self: true,
+		optional: true
+	});
+	autocompleteFormField = inject(FormField, {
+		self: true,
+		optional: true
+	});
+	autocompleteDestroyRef = inject(DestroyRef);
+	composing = false;
+	accepting = false;
+	lastQuery = null;
+	snapshot = null;
+	constructor() {
+		super();
+		afterRenderEffect((cleanup) => {
+			const panel = this.vdAutocomplete();
+			const disconnect = untracked(() => panel.connect(this));
+			const form = this.element.form;
+			const reset = () => panel.close();
+			form?.addEventListener("reset", reset);
+			cleanup(() => {
+				form?.removeEventListener("reset", reset);
+				disconnect();
+			});
+		});
+		afterEveryRender(() => {
+			const snapshot = JSON.stringify([
+				this.element.value,
+				this.element.disabled,
+				this.element.readOnly
+			]);
+			if (this.snapshot !== null && this.snapshot !== snapshot) {
+				this.vdAutocomplete().close();
+				this.lastQuery = null;
+			}
+			this.snapshot = snapshot;
+		});
+		inject(DestroyRef).onDestroy(() => {
+			this.composing = false;
+		});
+	}
+	ngOnInit() {
+		super.ngOnInit();
+		if (this.autocompleteFormField) return;
+		const subscription = this.autocompleteNgControl?.control?.events.subscribe((event) => {
+			if (event instanceof FormResetEvent) {
+				this.lastQuery = null;
+				this.vdAutocomplete().close();
+			}
+		});
+		this.autocompleteDestroyRef.onDestroy(() => subscription?.unsubscribe());
+	}
+	locked() {
+		return this.element.disabled || this.element.readOnly;
+	}
+	accept(option) {
+		if (this.locked()) return;
+		this.element.value = option.label;
+		this.remember();
+		this.lastQuery = option.label;
+		this.accepting = true;
+		try {
+			const EventType = this.element.ownerDocument.defaultView.Event;
+			this.element.dispatchEvent(new EventType("input", { bubbles: true }));
+			this.element.dispatchEvent(new EventType("change", { bubbles: true }));
+		} finally {
+			this.accepting = false;
+		}
+		this.element.focus({ preventScroll: true });
+		if ([
+			"text",
+			"search",
+			"tel",
+			"url",
+			"password"
+		].includes(this.element.type)) this.element.setSelectionRange(this.element.value.length, this.element.value.length);
+	}
+	show() {
+		if (!this.composing && !this.locked()) this.vdAutocomplete().open();
+	}
+	onInput(event) {
+		this.remember();
+		if (this.accepting || this.composing || event.isComposing || this.locked()) return;
+		this.publish();
+	}
+	startComposition() {
+		this.composing = true;
+		this.vdAutocomplete().close();
+	}
+	endComposition() {
+		this.composing = false;
+		this.remember();
+		if (!this.locked()) this.publish();
+	}
+	onKeydown(event) {
+		if (this.locked() || this.composing || event.isComposing || event.keyCode === 229) return;
+		const panel = this.vdAutocomplete();
+		if (event.key === "Tab") {
+			panel.close();
+			return;
+		}
+		if (event.key === "Escape" && panel.expanded()) {
+			event.preventDefault();
+			panel.close();
+			return;
+		}
+		if (event.altKey && event.key === "ArrowUp") {
+			event.preventDefault();
+			panel.close();
+			return;
+		}
+		if (event.ctrlKey || event.metaKey || event.shiftKey) return;
+		if (event.altKey && event.key === "ArrowDown") {
+			event.preventDefault();
+			panel.open();
+			return;
+		}
+		if (event.altKey) return;
+		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+			event.preventDefault();
+			panel.navigate(event.key);
+		} else if (event.key === "Enter" && panel.expanded() && panel.active()) {
+			event.preventDefault();
+			panel.choose(panel.active().id);
+		}
+	}
+	remember() {
+		this.snapshot = JSON.stringify([
+			this.element.value,
+			this.element.disabled,
+			this.element.readOnly
+		]);
+	}
+	publish() {
+		const panel = this.vdAutocomplete();
+		panel.resetActive();
+		const value = this.element.value;
+		if (value !== this.lastQuery) {
+			this.lastQuery = value;
+			this.queryChange.emit(value);
+		}
+		panel.open();
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: VdAutocompleteInput,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Directive
+	});
+	static ɵdir = i0.ɵɵngDeclareDirective({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: VdAutocompleteInput,
+		isStandalone: true,
+		selector: "input[vdAutocomplete]",
+		inputs: { vdAutocomplete: {
+			classPropertyName: "vdAutocomplete",
+			publicName: "vdAutocomplete",
+			isSignal: true,
+			isRequired: true,
+			transformFunction: null
+		} },
+		outputs: { queryChange: "queryChange" },
+		host: {
+			attributes: {
+				"role": "combobox",
+				"aria-autocomplete": "list",
+				"aria-haspopup": "listbox",
+				"autocomplete": "off"
+			},
+			listeners: {
+				"input": "onInput($event)",
+				"focus": "show()",
+				"click": "show()",
+				"blur": "vdAutocomplete().close()",
+				"keydown": "onKeydown($event)",
+				"compositionstart": "startComposition()",
+				"compositionend": "endComposition()"
+			},
+			properties: {
+				"attr.aria-expanded": "vdAutocomplete().expanded()",
+				"attr.aria-controls": "vdAutocomplete().listboxId",
+				"attr.aria-activedescendant": "vdAutocomplete().activeId()"
+			},
+			classAttribute: "vd-autocomplete-input"
+		},
+		usesInheritance: true,
+		ngImport: i0
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: VdAutocompleteInput,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "input[vdAutocomplete]",
+			host: {
+				class: "vd-autocomplete-input",
+				role: "combobox",
+				"aria-autocomplete": "list",
+				"aria-haspopup": "listbox",
+				autocomplete: "off",
+				"[attr.aria-expanded]": "vdAutocomplete().expanded()",
+				"[attr.aria-controls]": "vdAutocomplete().listboxId",
+				"[attr.aria-activedescendant]": "vdAutocomplete().activeId()",
+				"(input)": "onInput($event)",
+				"(focus)": "show()",
+				"(click)": "show()",
+				"(blur)": "vdAutocomplete().close()",
+				"(keydown)": "onKeydown($event)",
+				"(compositionstart)": "startComposition()",
+				"(compositionend)": "endComposition()"
+			}
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		vdAutocomplete: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "vdAutocomplete",
+				required: true
+			}]
+		}],
+		queryChange: [{
+			type: i0.Output,
+			args: ["queryChange"]
+		}]
+	}
+});
+const VD_AUTOCOMPLETE = [VdAutocomplete, VdAutocompleteInput];
+export { VD_AUTOCOMPLETE, VdAutocomplete, VdAutocompleteInput };
+
+//# sourceMappingURL=vadem-ui-autocomplete.mjs.map