@testgorilla/tgo-ui 11.22.2 → 12.0.0

package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs

@@ -1,965 +1,1955 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import { CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { input, signal, inject, ElementRef, NgZone, Directive, TemplateRef, Injectable, computed, DestroyRef, booleanAttribute, output, contentChild, ChangeDetectorRef, effect, isDevMode, untracked, ViewChild, ChangeDetectionStrategy, Component } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i2 from '@angular/forms';
-import { NgControl, FormsModule } from '@angular/forms';
-import * as i3 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import { MatChipsModule } from '@angular/material/chips';
-import * as i4 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i5 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i10 from '@angular/material/tooltip';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { IKeyboardEvent, PreventInputDirective, SelectTextDirective, UiTranslatePipe, TransformItemPipe, IncludesPipe } from '@testgorilla/tgo-ui/components/core';
-import * as i7 from '@testgorilla/tgo-ui/components/icon';
-import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
-import * as i8 from '@testgorilla/tgo-ui/components/spinner';
-import { SpinnerComponentModule } from '@testgorilla/tgo-ui/components/spinner';
-import * as i6 from '@testgorilla/tgo-ui/components/tag';
-import { TagComponentModule } from '@testgorilla/tgo-ui/components/tag';
-import * as i9 from '@testgorilla/tgo-ui/components/validation-error';
-import { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';
-import { BehaviorSubject, ReplaySubject, map, startWith, filter, throttleTime } from 'rxjs';
-
-class AutocompleteOverflowDetectDirective {
-    constructor() {
-        this.measureContainer = input(undefined, ...(ngDevMode ? [{ debugName: "measureContainer" }] : /* istanbul ignore next */ []));
-        this.itemSelector = input('.value-tag', ...(ngDevMode ? [{ debugName: "itemSelector" }] : /* istanbul ignore next */ []));
-        this.reserveWidth = input(100, ...(ngDevMode ? [{ debugName: "reserveWidth" }] : /* istanbul ignore next */ []));
-        this.visibleCount = signal(Infinity, ...(ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []));
-        this.overflowCount = signal(0, ...(ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []));
-        this.hasMeasured = signal(false, ...(ngDevMode ? [{ debugName: "hasMeasured" }] : /* istanbul ignore next */ []));
-        this.tagMaxWidth = signal(null, ...(ngDevMode ? [{ debugName: "tagMaxWidth" }] : /* istanbul ignore next */ []));
-        this.resizeObserver = null;
-        this.rafId = null;
-        this.el = inject(ElementRef);
-        this.ngZone = inject(NgZone);
-    }
-    ngAfterViewInit() {
-        // Self-measure when the directive enters the DOM (e.g., after @if condition becomes true)
-        this.measure();
-    }
-    setupObserver(containerSelector) {
-        const parentContainer = this.el.nativeElement.closest(containerSelector);
-        if (!parentContainer || typeof ResizeObserver === 'undefined') {
-            return;
-        }
-        this.resizeObserver = new ResizeObserver(() => {
-            this.ngZone.run(() => this.measure());
-        });
-        this.resizeObserver.observe(parentContainer);
-    }
-    measure() {
-        const container = this.measureContainer();
-        if (!container) {
-            return;
-        }
-        this.rafId = requestAnimationFrame(() => {
-            const infix = container.closest('.mat-mdc-form-field-infix');
-            if (!infix) {
-                return;
-            } // Can't measure yet — stay hidden until next attempt
-            const tags = Array.from(container.querySelectorAll(this.itemSelector()));
-            if (!tags.length) {
-                this.visibleCount.set(Infinity);
-                this.hasMeasured.set(true);
-                this.overflowCount.set(0);
-                return;
-            }
-            // Measure actual icon widths (clear button + chevron) that share the form field space
-            const formField = container.closest('mat-form-field');
-            let iconsWidth = 0;
-            if (formField) {
-                formField.querySelectorAll('.remove-selected, .arrow-state').forEach((icon) => {
-                    iconsWidth += icon.getBoundingClientRect().width;
-                });
-            }
-            const inputReserve = 48;
-            const counterWidth = 52;
-            const availableWidth = infix.getBoundingClientRect().width - inputReserve - iconsWidth;
-            let totalWidth = 0;
-            let visibleCount = tags.length;
-            for (let i = 0; i < tags.length; i++) {
-                totalWidth += tags[i].getBoundingClientRect().width;
-                const remainingTags = tags.length - (i + 1);
-                const spaceForCounter = remainingTags > 0 ? counterWidth : 0;
-                if (totalWidth + spaceForCounter > availableWidth && i > 0) {
-                    visibleCount = i;
-                    break;
-                }
-            }
-            const total = container.querySelectorAll(this.itemSelector()).length;
-            const visible = Math.min(visibleCount, total);
-            const overflow = Math.max(0, total - visible);
-            // Compute max width for each tag so wide tags truncate with ellipsis
-            // Single tag: full available width. Multiple visible: account for counter width.
-            const padding = overflow >= 10 ? 16 : 8;
-            this.tagMaxWidth.set(visible === 1 ? availableWidth - padding : availableWidth - (overflow > 0 ? counterWidth : 0) - padding);
-            this.visibleCount.set(visibleCount);
-            this.hasMeasured.set(true);
-            this.overflowCount.set(overflow);
-        });
-    }
-    ngOnDestroy() {
-        this.resizeObserver?.disconnect();
-        if (this.rafId !== null) {
-            cancelAnimationFrame(this.rafId);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteOverflowDetectDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.25", type: AutocompleteOverflowDetectDirective, isStandalone: true, selector: "[uiAutocompleteOverflowDetect]", inputs: { measureContainer: { classPropertyName: "measureContainer", publicName: "measureContainer", isSignal: true, isRequired: false, transformFunction: null }, itemSelector: { classPropertyName: "itemSelector", publicName: "itemSelector", isSignal: true, isRequired: false, transformFunction: null }, reserveWidth: { classPropertyName: "reserveWidth", publicName: "reserveWidth", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["autocompleteOverflowDetect"], ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteOverflowDetectDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uiAutocompleteOverflowDetect]',
-                    standalone: true,
-                    exportAs: 'autocompleteOverflowDetect',
-                }]
-        }], propDecorators: { measureContainer: [{ type: i0.Input, args: [{ isSignal: true, alias: "measureContainer", required: false }] }], itemSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemSelector", required: false }] }], reserveWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "reserveWidth", required: false }] }] } });
-
-/**
- * Marks an `ng-template` whose content is rendered inside each selected tag, after its label.
- * Only applies with `tagsPosition="below"`.
- *
- * ```html
- * <ui-autocomplete-v2 tagsPosition="below" ...>
- *   <ng-template uiAutocompleteTagSuffix let-item>{{ item.radius }}</ng-template>
- * </ui-autocomplete-v2>
- * ```
- */
-class AutocompleteTagSuffixDirective {
-    constructor() {
-        this.templateRef = inject(TemplateRef);
-    }
-    static ngTemplateContextGuard(_dir, ctx) {
-        return true;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteTagSuffixDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: AutocompleteTagSuffixDirective, isStandalone: true, selector: "ng-template[uiAutocompleteTagSuffix]", ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteTagSuffixDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'ng-template[uiAutocompleteTagSuffix]',
-                }]
-        }] });
-
-class AutocompleteV2Utils {
-    static transformDisplayValue(value, textField) {
-        return value?.[textField] ?? '';
-    }
-    static filterItems(items, inputValue, textField) {
-        return items.filter(item => {
-            const text = item[textField];
-            return typeof text === 'string' && text.toLowerCase().includes(inputValue.toLowerCase());
-        });
-    }
-    static filterGroupedItems(groups, inputValue, textField) {
-        return groups
-            .map(group => ({
-            ...group,
-            filteredItems: AutocompleteV2Utils.filterItems(group.items, inputValue, textField),
-        }))
-            .filter(group => group.filteredItems.length > 0);
-    }
-    static excludeSuggestions(items, excludeItems, valueField) {
-        if (!valueField || !excludeItems.length) {
-            return items ?? [];
-        }
-        return (items ?? []).filter(item => !excludeItems.find(exclude => exclude[valueField] === item[valueField]));
-    }
-    static createValueItem(value, textField, valueField) {
-        if (typeof value === 'string') {
-            return { [textField]: value, [valueField]: value };
-        }
-        return value;
-    }
-    static findDuplicate(items, selectedValue, lookupKey) {
-        return items.find(v => (lookupKey ? v[lookupKey] === selectedValue[lookupKey] : v === selectedValue));
-    }
-    /**
-     * True when the typed text exactly matches the label of any displayed option
-     * (case-insensitive, trimmed). Used to suppress the "Add …" option when the
-     * value already exists among the options being shown.
-     */
-    static hasExactMatch(items, suggestions, inputValue, textField) {
-        const normalized = inputValue.trim().toLowerCase();
-        if (!normalized) {
-            return false;
-        }
-        const isMatch = (item) => {
-            const text = textField ? item[textField] : item;
-            return typeof text === 'string' && text.toLowerCase() === normalized;
-        };
-        return (items ?? []).some(isMatch) || (suggestions ?? []).some(isMatch);
-    }
-    static isArray(value) {
-        return Array.isArray(value);
-    }
-}
-
-class AutocompleteFilterService {
-    constructor() {
-        // Configuration
-        this.textField = signal('', ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
-        // Data sources (fed by component via effects)
-        this.flatItems = signal([], ...(ngDevMode ? [{ debugName: "flatItems" }] : /* istanbul ignore next */ []));
-        this.groupsList = signal([], ...(ngDevMode ? [{ debugName: "groupsList" }] : /* istanbul ignore next */ []));
-        this.suggestions = signal([], ...(ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []));
-        // Search state
-        this.searchText$ = new BehaviorSubject('');
-        this.userInput$ = new ReplaySubject(1);
-        this.isSearching$ = this.searchText$.pipe(map(v => Boolean(v.trim())));
-        // Dynamic filtering
-        this.dynamicSource$ = new BehaviorSubject(null);
-        this.isDynamicMode = false;
-        // Filtered results
-        this.filteredItems$ = this.searchText$.pipe(startWith(''), map(inputValue => {
-            if (!inputValue.length) {
-                return null;
-            }
-            return AutocompleteV2Utils.filterItems(this.flatItems(), inputValue, this.textField());
-        }));
-        this.filteredGroupedItems$ = this.searchText$.pipe(startWith(''), map(inputValue => {
-            if (!inputValue.length || !this.groupsList().length) {
-                return null;
-            }
-            return AutocompleteV2Utils.filterGroupedItems(this.groupsList(), inputValue, this.textField());
-        }));
-        this.filteredSuggestions$ = this.searchText$.pipe(map(inputValue => inputValue.length ? AutocompleteV2Utils.filterItems(this.suggestions(), inputValue, this.textField()) : null));
-    }
-    search(text, minChars) {
-        this.userInput$.next(text);
-        if (text.length >= minChars) {
-            this.searchText$.next(text);
-        }
-        else {
-            this.searchText$.next('');
-            this.userInput$.next('');
-        }
-    }
-    clearSearch() {
-        this.searchText$.next('');
-        this.userInput$.next('');
-    }
-    ngOnDestroy() {
-        this.searchText$.complete();
-        this.userInput$.complete();
-        this.dynamicSource$.complete();
-    }
-    setDynamicResults(list, loading) {
-        if ((list !== null || loading) && !this.isDynamicMode) {
-            this.isDynamicMode = true;
-            this.filteredItems$ = this.dynamicSource$;
-        }
-        if (list !== null) {
-            this.dynamicSource$.next(list);
-        }
-        else if (loading) {
-            this.dynamicSource$.next([]);
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteFilterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteFilterService }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteFilterService, decorators: [{
-            type: Injectable
-        }] });
-
+import { FocusMonitor } from "@angular/cdk/a11y";
+import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
+import * as i1 from "@angular/common";
+import { CommonModule } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, Injectable, NgZone, TemplateRef, ViewChild, booleanAttribute, computed, contentChild, effect, inject, input, isDevMode, output, signal, untracked } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import * as i2 from "@angular/forms";
+import { FormsModule, NgControl } from "@angular/forms";
+import * as i3 from "@angular/material/autocomplete";
+import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import { MatChipsModule } from "@angular/material/chips";
+import * as i4 from "@angular/material/form-field";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import * as i5 from "@angular/material/input";
+import { MatInputModule } from "@angular/material/input";
+import * as i10 from "@angular/material/tooltip";
+import { MatTooltipModule } from "@angular/material/tooltip";
+import { IKeyboardEvent, IncludesPipe, PreventInputDirective, SelectTextDirective, TransformItemPipe, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import * as i7 from "@testgorilla/tgo-ui/components/icon";
+import { IconComponentModule } from "@testgorilla/tgo-ui/components/icon";
+import * as i8 from "@testgorilla/tgo-ui/components/spinner";
+import { SpinnerComponentModule } from "@testgorilla/tgo-ui/components/spinner";
+import * as i6 from "@testgorilla/tgo-ui/components/tag";
+import { TagComponentModule } from "@testgorilla/tgo-ui/components/tag";
+import * as i9 from "@testgorilla/tgo-ui/components/validation-error";
+import { ValidationErrorModule } from "@testgorilla/tgo-ui/components/validation-error";
+import { BehaviorSubject, ReplaySubject, filter, map, startWith, throttleTime } from "rxjs";
+var AutocompleteOverflowDetectDirective = class AutocompleteOverflowDetectDirective {
+	constructor() {
+		this.measureContainer = input(void 0, ...ngDevMode ? [{ debugName: "measureContainer" }] : /* istanbul ignore next */ []);
+		this.itemSelector = input(".value-tag", ...ngDevMode ? [{ debugName: "itemSelector" }] : /* istanbul ignore next */ []);
+		this.reserveWidth = input(100, ...ngDevMode ? [{ debugName: "reserveWidth" }] : /* istanbul ignore next */ []);
+		this.visibleCount = signal(Infinity, ...ngDevMode ? [{ debugName: "visibleCount" }] : /* istanbul ignore next */ []);
+		this.overflowCount = signal(0, ...ngDevMode ? [{ debugName: "overflowCount" }] : /* istanbul ignore next */ []);
+		this.hasMeasured = signal(false, ...ngDevMode ? [{ debugName: "hasMeasured" }] : /* istanbul ignore next */ []);
+		this.tagMaxWidth = signal(null, ...ngDevMode ? [{ debugName: "tagMaxWidth" }] : /* istanbul ignore next */ []);
+		this.resizeObserver = null;
+		this.rafId = null;
+		this.el = inject(ElementRef);
+		this.ngZone = inject(NgZone);
+	}
+	ngAfterViewInit() {
+		this.measure();
+	}
+	setupObserver(containerSelector) {
+		const parentContainer = this.el.nativeElement.closest(containerSelector);
+		if (!parentContainer || typeof ResizeObserver === "undefined") return;
+		this.resizeObserver = new ResizeObserver(() => {
+			this.ngZone.run(() => this.measure());
+		});
+		this.resizeObserver.observe(parentContainer);
+	}
+	measure() {
+		const container = this.measureContainer();
+		if (!container) return;
+		this.rafId = requestAnimationFrame(() => {
+			const infix = container.closest(".mat-mdc-form-field-infix");
+			if (!infix) return;
+			const tags = Array.from(container.querySelectorAll(this.itemSelector()));
+			if (!tags.length) {
+				this.visibleCount.set(Infinity);
+				this.hasMeasured.set(true);
+				this.overflowCount.set(0);
+				return;
+			}
+			const formField = container.closest("mat-form-field");
+			let iconsWidth = 0;
+			if (formField) formField.querySelectorAll(".remove-selected, .arrow-state").forEach((icon) => {
+				iconsWidth += icon.getBoundingClientRect().width;
+			});
+			const inputReserve = 48;
+			const counterWidth = 52;
+			const availableWidth = infix.getBoundingClientRect().width - inputReserve - iconsWidth;
+			let totalWidth = 0;
+			let visibleCount = tags.length;
+			for (let i = 0; i < tags.length; i++) {
+				totalWidth += tags[i].getBoundingClientRect().width;
+				const spaceForCounter = tags.length - (i + 1) > 0 ? counterWidth : 0;
+				if (totalWidth + spaceForCounter > availableWidth && i > 0) {
+					visibleCount = i;
+					break;
+				}
+			}
+			const total = container.querySelectorAll(this.itemSelector()).length;
+			const visible = Math.min(visibleCount, total);
+			const overflow = Math.max(0, total - visible);
+			const padding = overflow >= 10 ? 16 : 8;
+			this.tagMaxWidth.set(visible === 1 ? availableWidth - padding : availableWidth - (overflow > 0 ? counterWidth : 0) - padding);
+			this.visibleCount.set(visibleCount);
+			this.hasMeasured.set(true);
+			this.overflowCount.set(overflow);
+		});
+	}
+	ngOnDestroy() {
+		this.resizeObserver?.disconnect();
+		if (this.rafId !== null) cancelAnimationFrame(this.rafId);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AutocompleteOverflowDetectDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "17.1.0",
+			version: "22.2.4",
+			type: AutocompleteOverflowDetectDirective,
+			isStandalone: true,
+			selector: "[uiAutocompleteOverflowDetect]",
+			inputs: {
+				measureContainer: {
+					classPropertyName: "measureContainer",
+					publicName: "measureContainer",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				itemSelector: {
+					classPropertyName: "itemSelector",
+					publicName: "itemSelector",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				reserveWidth: {
+					classPropertyName: "reserveWidth",
+					publicName: "reserveWidth",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			exportAs: ["autocompleteOverflowDetect"],
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AutocompleteOverflowDetectDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiAutocompleteOverflowDetect]",
+			standalone: true,
+			exportAs: "autocompleteOverflowDetect"
+		}]
+	}],
+	propDecorators: {
+		measureContainer: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "measureContainer",
+				required: false
+			}]
+		}],
+		itemSelector: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemSelector",
+				required: false
+			}]
+		}],
+		reserveWidth: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "reserveWidth",
+				required: false
+			}]
+		}]
+	}
+});
+var AutocompleteTagSuffixDirective = class AutocompleteTagSuffixDirective {
+	constructor() {
+		this.templateRef = inject(TemplateRef);
+	}
+	static ngTemplateContextGuard(_dir, _ctx) {
+		return true;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AutocompleteTagSuffixDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			type: AutocompleteTagSuffixDirective,
+			isStandalone: true,
+			selector: "ng-template[uiAutocompleteTagSuffix]",
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AutocompleteTagSuffixDirective,
+	decorators: [{
+		type: Directive,
+		args: [{ selector: "ng-template[uiAutocompleteTagSuffix]" }]
+	}]
+});
+var AutocompleteV2Utils = class AutocompleteV2Utils {
+	static transformDisplayValue(value, textField) {
+		return value?.[textField] ?? "";
+	}
+	static filterItems(items, inputValue, textField) {
+		return items.filter((item) => {
+			const text = item[textField];
+			return typeof text === "string" && text.toLowerCase().includes(inputValue.toLowerCase());
+		});
+	}
+	static filterGroupedItems(groups, inputValue, textField) {
+		return groups.map((group) => ({
+			...group,
+			filteredItems: AutocompleteV2Utils.filterItems(group.items, inputValue, textField)
+		})).filter((group) => group.filteredItems.length > 0);
+	}
+	static excludeSuggestions(items, excludeItems, valueField) {
+		if (!valueField || !excludeItems.length) return items ?? [];
+		return (items ?? []).filter((item) => !excludeItems.find((exclude) => exclude[valueField] === item[valueField]));
+	}
+	static createValueItem(value, textField, valueField) {
+		if (typeof value === "string") return {
+			[textField]: value,
+			[valueField]: value
+		};
+		return value;
+	}
+	static findDuplicate(items, selectedValue, lookupKey) {
+		return items.find((v) => lookupKey ? v[lookupKey] === selectedValue[lookupKey] : v === selectedValue);
+	}
+	static hasExactMatch(items, suggestions, inputValue, textField) {
+		const normalized = inputValue.trim().toLowerCase();
+		if (!normalized) return false;
+		const isMatch = (item) => {
+			const text = textField ? item[textField] : item;
+			return typeof text === "string" && text.toLowerCase() === normalized;
+		};
+		return (items ?? []).some(isMatch) || (suggestions ?? []).some(isMatch);
+	}
+	static isArray(value) {
+		return Array.isArray(value);
+	}
+};
+var AutocompleteFilterService = class AutocompleteFilterService {
+	constructor() {
+		this.textField = signal("", ...ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []);
+		this.flatItems = signal([], ...ngDevMode ? [{ debugName: "flatItems" }] : /* istanbul ignore next */ []);
+		this.groupsList = signal([], ...ngDevMode ? [{ debugName: "groupsList" }] : /* istanbul ignore next */ []);
+		this.suggestions = signal([], ...ngDevMode ? [{ debugName: "suggestions" }] : /* istanbul ignore next */ []);
+		this.searchText$ = new BehaviorSubject("");
+		this.userInput$ = new ReplaySubject(1);
+		this.isSearching$ = this.searchText$.pipe(map((v) => Boolean(v.trim())));
+		this.dynamicSource$ = new BehaviorSubject(null);
+		this.isDynamicMode = false;
+		this.filteredItems$ = this.searchText$.pipe(startWith(""), map((inputValue) => {
+			if (!inputValue.length) return null;
+			return AutocompleteV2Utils.filterItems(this.flatItems(), inputValue, this.textField());
+		}));
+		this.filteredGroupedItems$ = this.searchText$.pipe(startWith(""), map((inputValue) => {
+			if (!inputValue.length || !this.groupsList().length) return null;
+			return AutocompleteV2Utils.filterGroupedItems(this.groupsList(), inputValue, this.textField());
+		}));
+		this.filteredSuggestions$ = this.searchText$.pipe(map((inputValue) => inputValue.length ? AutocompleteV2Utils.filterItems(this.suggestions(), inputValue, this.textField()) : null));
+	}
+	search(text, minChars) {
+		this.userInput$.next(text);
+		if (text.length >= minChars) this.searchText$.next(text);
+		else {
+			this.searchText$.next("");
+			this.userInput$.next("");
+		}
+	}
+	clearSearch() {
+		this.searchText$.next("");
+		this.userInput$.next("");
+	}
+	ngOnDestroy() {
+		this.searchText$.complete();
+		this.userInput$.complete();
+		this.dynamicSource$.complete();
+	}
+	setDynamicResults(list, loading) {
+		if ((list !== null || loading) && !this.isDynamicMode) {
+			this.isDynamicMode = true;
+			this.filteredItems$ = this.dynamicSource$;
+		}
+		if (list !== null) this.dynamicSource$.next(list);
+		else if (loading) this.dynamicSource$.next([]);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AutocompleteFilterService,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AutocompleteFilterService
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AutocompleteFilterService,
+	decorators: [{ type: Injectable }]
+});
 var Autocomplete;
-(function (Autocomplete) {
-    Autocomplete["SINGLE"] = "single";
-    Autocomplete["MULTI"] = "multi";
-    Autocomplete["LARGE"] = "large";
+(function(Autocomplete) {
+	Autocomplete["SINGLE"] = "single";
+	Autocomplete["MULTI"] = "multi";
+	Autocomplete["LARGE"] = "large";
 })(Autocomplete || (Autocomplete = {}));
 var DropdownVariation;
-(function (DropdownVariation) {
-    DropdownVariation["AUTOCOMPLETE"] = "autocomplete";
-    DropdownVariation["DROPDOWN"] = "dropdown";
+(function(DropdownVariation) {
+	DropdownVariation["AUTOCOMPLETE"] = "autocomplete";
+	DropdownVariation["DROPDOWN"] = "dropdown";
 })(DropdownVariation || (DropdownVariation = {}));
-
-class AutocompleteValueManager {
-    constructor() {
-        // ── Configuration signals (set by the component via effects) ────────────────
-        this.type = signal('multi', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        this.textField = signal('', ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
-        this.valueField = signal('', ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
-        this.compareWith = signal(undefined, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
-        // ── Value signal ─────────────────────────────────────────────────────────────
-        this.value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
-        // ── Derived ──────────────────────────────────────────────────────────────────
-        this.isSingle = computed(() => this.type() === Autocomplete.SINGLE, ...(ngDevMode ? [{ debugName: "isSingle" }] : /* istanbul ignore next */ []));
-        this.displayValue = computed(() => {
-            const type = this.type();
-            const value = this.value();
-            const textField = this.textField();
-            const isSingle = type === Autocomplete.SINGLE;
-            const isEmpty = !value || (AutocompleteV2Utils.isArray(value) && !value.length);
-            if (isEmpty) {
-                return '';
-            }
-            if (isSingle) {
-                const display = AutocompleteV2Utils.isArray(value) ? value[0] : value;
-                return AutocompleteV2Utils.transformDisplayValue(display, textField);
-            }
-            // Multi with values — space placeholder (tags are visible instead)
-            return ' ';
-        }, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
-        // ── CVA callbacks ────────────────────────────────────────────────────────────
-        this.onChangeFn = () => { };
-        this.onTouchedFn = () => { };
-    }
-    registerOnChange(fn) {
-        this.onChangeFn = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouchedFn = fn;
-    }
-    notifyChange() {
-        this.onChangeFn(this.value());
-    }
-    markAsTouched() {
-        this.onTouchedFn();
-    }
-    writeValue(v) {
-        if (v === null || v === undefined) {
-            this.value.set(this.isSingle() ? null : []);
-        }
-        else {
-            this.value.set(v);
-        }
-    }
-    // ── Selection ─────────────────────────────────────────────────────────────────
-    addValue(newValue) {
-        if (!this.isSingle() && !this.value()) {
-            this.value.set([]);
-        }
-        const compareWith = this.compareWith();
-        const currentArray = AutocompleteV2Utils.isArray(this.value()) ? this.value() : [];
-        const foundDuplicate = compareWith
-            ? currentArray.find((v) => compareWith(v, newValue))
-            : AutocompleteV2Utils.findDuplicate(currentArray, newValue, this.textField());
-        if (!this.isSingle()) {
-            this.value.set(foundDuplicate
-                ? currentArray.filter((v) => (compareWith ? !compareWith(v, foundDuplicate) : v !== foundDuplicate))
-                : [...currentArray, newValue]);
-        }
-        else {
-            this.value.set(newValue);
-        }
-    }
-    /**
-     * Removes `option` from the value array.
-     * Returns the found item (so the caller can deselect the mat-option), or undefined if not found.
-     */
-    removeValue(option) {
-        const compareWith = this.compareWith();
-        const currentValue = AutocompleteV2Utils.isArray(this.value()) ? this.value() : [];
-        const foundValue = currentValue.find((v) => (compareWith ? compareWith(v, option) : v === option));
-        if (foundValue) {
-            this.value.set(currentValue.filter((v) => (compareWith ? !compareWith(v, option) : v !== option)));
-        }
-        return foundValue;
-    }
-    clear() {
-        this.value.set(AutocompleteV2Utils.isArray(this.value()) ? [] : null);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteValueManager, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteValueManager }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteValueManager, decorators: [{
-            type: Injectable
-        }] });
-
-class InfiniteScrollDirective {
-    constructor() {
-        this.viewport = null;
-        this.scrollSub = null;
-        this.destroyRef = inject(DestroyRef);
-        this.scrollListener = (event) => {
-            const target = event.target;
-            const trigger = this.panelTrigger;
-            if (!trigger) {
-                return;
-            }
-            const isNotAutocompleteScroll = !target?.id?.includes('mat-autocomplete-') &&
-                !target?.parentElement?.id?.includes('mat-autocomplete-') &&
-                !target?.classList?.contains('mat-mdc-autocomplete-trigger');
-            if (trigger.panelOpen && isNotAutocompleteScroll) {
-                trigger.closePanel();
-            }
-        };
-        this.enabled = false;
-        this.closeOnScroll = false;
-        this.panelTrigger = null;
-        this.onBottomReached = null;
-    }
-    attachViewport(viewport) {
-        this.detachViewport();
-        if (!viewport) {
-            return;
-        }
-        this.viewport = viewport;
-        if (this.enabled) {
-            this.scrollSub = viewport
-                .elementScrolled()
-                .pipe(map(() => viewport.measureScrollOffset('bottom')), filter(offset => offset < viewport.getViewportSize() * 0.2), throttleTime(200), takeUntilDestroyed(this.destroyRef))
-                .subscribe(() => {
-                this.onBottomReached?.();
-            });
-        }
-    }
-    detachViewport() {
-        this.scrollSub?.unsubscribe();
-        this.scrollSub = null;
-        this.viewport = null;
-    }
-    scrollToTop() {
-        if (this.viewport) {
-            this.viewport.scrollToIndex(0);
-            this.viewport.checkViewportSize();
-        }
-    }
-    startCloseOnScroll() {
-        if (this.closeOnScroll) {
-            window.addEventListener('scroll', this.scrollListener, true);
-        }
-    }
-    ngOnDestroy() {
-        this.detachViewport();
-        window.removeEventListener('scroll', this.scrollListener, true);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: InfiniteScrollDirective, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: InfiniteScrollDirective }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: InfiniteScrollDirective, decorators: [{
-            type: Injectable
-        }] });
-
-/* eslint-disable no-underscore-dangle */
-class AutocompleteV2Component {
-    set cdkViewport(viewport) {
-        // Ensure enabled is set before attaching (ViewChild resolves before ngAfterViewInit)
-        this.scrollManager.enabled = this.infiniteScroll();
-        this.scrollManager.attachViewport(viewport);
-    }
-    constructor() {
-        // ── Inputs ──────────────────────────────────────────────────────────────────
-        this.itemsList = input([], ...(ngDevMode ? [{ debugName: "itemsList" }] : /* istanbul ignore next */ []));
-        this.suggestionsList = input([], ...(ngDevMode ? [{ debugName: "suggestionsList" }] : /* istanbul ignore next */ []));
-        this.groupsList = input([], ...(ngDevMode ? [{ debugName: "groupsList" }] : /* istanbul ignore next */ []));
-        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
-        this.allowAdd = input(true, ...(ngDevMode ? [{ debugName: "allowAdd" }] : /* istanbul ignore next */ []));
-        this.textField = input('', ...(ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []));
-        this.valueField = input('', ...(ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []));
-        this.imageField = input('', ...(ngDevMode ? [{ debugName: "imageField" }] : /* istanbul ignore next */ []));
-        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
-        this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
-        this.testId = input(null, ...(ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []));
-        this.type = input('multi', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
-        this.minCharactersSearch = input(3, ...(ngDevMode ? [{ debugName: "minCharactersSearch" }] : /* istanbul ignore next */ []));
-        this.variant = input.required(...(ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []));
-        this.showBottomContent = input(true, ...(ngDevMode ? [{ debugName: "showBottomContent" }] : /* istanbul ignore next */ []));
-        this.required = input(undefined, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
-        this.virtualScroll = input(false, { ...(ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.compareWith = input(undefined, ...(ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []));
-        this.dropdownPanelClass = input('', ...(ngDevMode ? [{ debugName: "dropdownPanelClass" }] : /* istanbul ignore next */ []));
-        this.panelPosition = input('auto', ...(ngDevMode ? [{ debugName: "panelPosition" }] : /* istanbul ignore next */ []));
-        this.hideSelectedSection = input(false, { ...(ngDevMode ? { debugName: "hideSelectedSection" } : /* istanbul ignore next */ {}), transform: booleanAttribute });
-        this.userAdditionsGroupLabel = input('', ...(ngDevMode ? [{ debugName: "userAdditionsGroupLabel" }] : /* istanbul ignore next */ []));
-        this.closeOnScroll = input(false, ...(ngDevMode ? [{ debugName: "closeOnScroll" }] : /* istanbul ignore next */ []));
-        this.size = input('medium', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
-        this.allowUserInput = input(true, ...(ngDevMode ? [{ debugName: "allowUserInput" }] : /* istanbul ignore next */ []));
-        this.clearable = input(true, ...(ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []));
-        this.maxLength = input(undefined, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
-        this.dynamicFilterLoading = input(false, ...(ngDevMode ? [{ debugName: "dynamicFilterLoading" }] : /* istanbul ignore next */ []));
-        this.dynamicFilteredList = input(null, ...(ngDevMode ? [{ debugName: "dynamicFilteredList" }] : /* istanbul ignore next */ []));
-        this.infiniteScroll = input(false, ...(ngDevMode ? [{ debugName: "infiniteScroll" }] : /* istanbul ignore next */ []));
-        this.hasMoreOptionsForInfiniteScroll = input(true, ...(ngDevMode ? [{ debugName: "hasMoreOptionsForInfiniteScroll" }] : /* istanbul ignore next */ []));
-        this.itemValue = input(null, ...(ngDevMode ? [{ debugName: "itemValue" }] : /* istanbul ignore next */ []));
-        this.formErrorConfig = input({}, ...(ngDevMode ? [{ debugName: "formErrorConfig" }] : /* istanbul ignore next */ []));
-        this.errors = input([], ...(ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []));
-        this.addOptionPosition = input('bottom', ...(ngDevMode ? [{ debugName: "addOptionPosition" }] : /* istanbul ignore next */ []));
-        this.tagsPosition = input('inside', ...(ngDevMode ? [{ debugName: "tagsPosition" }] : /* istanbul ignore next */ []));
-        /**
-         * Icon shown before the label of each selected tag: one icon for every tag, or a function that picks
-         * it per item (return `''` for no icon). Only applies with `tagsPosition="below"`.
-         */
-        this.tagIcon = input('', ...(ngDevMode ? [{ debugName: "tagIcon" }] : /* istanbul ignore next */ []));
-        // ── Outputs ─────────────────────────────────────────────────────────────────
-        this.selectionChange = output();
-        this.searchTextChange = output();
-        // eslint-disable-next-line @angular-eslint/no-output-native -- output shadows a native event; rename is breaking, deferred to the breaking-change MAJOR (see plan)
-        this.blur = output();
-        // eslint-disable-next-line @angular-eslint/no-output-native -- output shadows a native event; rename is breaking, deferred to the breaking-change MAJOR (see plan)
-        this.focus = output();
-        this.scrollViewportBottomReached = output();
-        this.scrollViewportBottomReachedFiltered = output();
-        this.tagSuffix = contentChild(AutocompleteTagSuffixDirective, ...(ngDevMode ? [{ debugName: "tagSuffix" }] : /* istanbul ignore next */ []));
-        // ── Injected services ──────────────────────────────────────────────────────
-        this.valueManager = inject((AutocompleteValueManager));
-        this.filterService = inject((AutocompleteFilterService));
-        this.scrollManager = inject(InfiniteScrollDirective);
-        this.cdr = inject(ChangeDetectorRef);
-        this.focusMonitor = inject(FocusMonitor);
-        this.destroyRef = inject(DestroyRef);
-        this.ngZone = inject(NgZone);
-        this.ngControl = inject(NgControl, { optional: true, self: true });
-        this.applicationTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', {
-            optional: true,
-        }) ?? 'light';
-        // ── Internal state ──────────────────────────────────────────────────────────
-        this.inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
-        this.isInputFocus = signal(false, ...(ngDevMode ? [{ debugName: "isInputFocus" }] : /* istanbul ignore next */ []));
-        this.autocompleteType = Autocomplete;
-        /** Flat list for default (ungrouped) rendering and virtual scroll */
-        this.flatItemsList = computed(() => {
-            const suggestions = this.suggestionsList();
-            const valField = this.valueField();
-            const flat = AutocompleteV2Utils.excludeSuggestions(this.itemsList(), suggestions, valField);
-            const grouped = this.groupsList().flatMap(g => AutocompleteV2Utils.excludeSuggestions(g.items, suggestions, valField));
-            return [...flat, ...grouped];
-        }, ...(ngDevMode ? [{ debugName: "flatItemsList" }] : /* istanbul ignore next */ []));
-        /** Grouped list — only used when isGrouped is true */
-        this.groupedItemsList = computed(() => {
-            const suggestions = this.suggestionsList();
-            const valField = this.valueField();
-            return this.groupsList().map(group => ({
-                groupName: group.groupName,
-                items: AutocompleteV2Utils.excludeSuggestions(group.items, suggestions, valField),
-            }));
-        }, ...(ngDevMode ? [{ debugName: "groupedItemsList" }] : /* istanbul ignore next */ []));
-        this._isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []));
-        this.userAddedItems = signal([], ...(ngDevMode ? [{ debugName: "userAddedItems" }] : /* istanbul ignore next */ []));
-        this.translationContext = 'AUTOCOMPLETE.';
-        this.utils = AutocompleteV2Utils;
-        this.keyboardFocused = signal(false, ...(ngDevMode ? [{ debugName: "keyboardFocused" }] : /* istanbul ignore next */ []));
-        this.isAlreadyAdded = computed(() => {
-            const compareWith = this.compareWith();
-            const val = this.valueManager.value();
-            const inputVal = this.inputValue();
-            if (!inputVal || inputVal === ' ') {
-                return false;
-            }
-            const valArray = AutocompleteV2Utils.isArray(val) ? val : [];
-            return Boolean(compareWith
-                ? valArray.find((v) => compareWith(v, inputVal))
-                : AutocompleteV2Utils.findDuplicate(valArray, inputVal, this.textField()));
-        }, ...(ngDevMode ? [{ debugName: "isAlreadyAdded" }] : /* istanbul ignore next */ []));
-        this.tagsBelow = computed(() => this.tagsPosition() === 'below' && this.type() === Autocomplete.MULTI, ...(ngDevMode ? [{ debugName: "tagsBelow" }] : /* istanbul ignore next */ []));
-        this.suppressPlaceholder = computed(() => !this.tagsBelow() && Boolean(this.valueManager.value()?.length), ...(ngDevMode ? [{ debugName: "suppressPlaceholder" }] : /* istanbul ignore next */ []));
-        this.showClearButton = computed(() => {
-            if (this.tagsBelow()) {
-                return false;
-            }
-            const type = this.type();
-            const val = this.valueManager.value();
-            if (type === Autocomplete.SINGLE) {
-                const hasValue = Array.isArray(val) ? val.length > 0 : val ? Object.keys(val).length > 0 : false;
-                return this.clearable() && hasValue;
-            }
-            return Array.isArray(val) && val.length > 1;
-        }, ...(ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []));
-        /** Icon per below-tag, in selection order */
-        this.tagIcons = computed(() => {
-            const icon = this.tagIcon();
-            const value = this.valueManager.value();
-            if (!AutocompleteV2Utils.isArray(value)) {
-                return [];
-            }
-            return value.map(item => (typeof icon === 'function' ? icon(item) : icon));
-        }, ...(ngDevMode ? [{ debugName: "tagIcons" }] : /* istanbul ignore next */ []));
-        this.safeErrors = computed(() => this.errors()?.filter(Boolean) ?? [], ...(ngDevMode ? [{ debugName: "safeErrors" }] : /* istanbul ignore next */ []));
-        this.controlInvalid = signal(false, ...(ngDevMode ? [{ debugName: "controlInvalid" }] : /* istanbul ignore next */ []));
-        this.hasError = computed(() => {
-            if (this.ngControl) {
-                return this.controlInvalid();
-            }
-            return this.safeErrors().length > 0;
-        }, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
-        this.hiddenItemsTooltip = computed(() => {
-            const value = this.valueManager.value();
-            const visibleCount = this.overflowDir?.visibleCount() ?? Infinity;
-            if (!AutocompleteV2Utils.isArray(value)) {
-                return '';
-            }
-            const tf = this.textField();
-            return value
-                .slice(visibleCount)
-                .map(item => (tf ? item[tf] : item))
-                .join('\n');
-        }, ...(ngDevMode ? [{ debugName: "hiddenItemsTooltip" }] : /* istanbul ignore next */ []));
-        this.trackByFn = (index, value) => value;
-        this.trackByItem = (_index, item) => {
-            const vf = this.valueField();
-            return vf ? item?.[vf] : item;
-        };
-        // Assign valueAccessor manually to avoid circular DI
-        // (providing NG_VALUE_ACCESSOR + injecting NgControl creates a cycle)
-        if (this.ngControl) {
-            this.ngControl.valueAccessor = this;
-        }
-        effect(() => {
-            this.filterService.setDynamicResults(this.dynamicFilteredList(), this.dynamicFilterLoading());
-        });
-        effect(() => {
-            const disabled = this.disabled();
-            // In CVA mode, setDisabledState() owns the disabled state — the [disabled] input must not
-            // override it, otherwise this effect's initial run clobbers a control that starts disabled.
-            if (this.ngControl) {
-                if (isDevMode() && disabled) {
-                    console.warn('[ui-autocomplete-v2] [disabled] is set alongside a form control. ' +
-                        'Use the form control disabled state (disable()/enable()) instead.');
-                }
-                return;
-            }
-            this._isDisabled.set(disabled);
-        });
-        effect(() => this.valueManager.type.set(this.type()));
-        effect(() => this.valueManager.textField.set(this.textField()));
-        effect(() => this.valueManager.valueField.set(this.valueField()));
-        effect(() => this.valueManager.compareWith.set(this.compareWith()));
-        effect(() => this.filterService.textField.set(this.textField()));
-        effect(() => this.filterService.flatItems.set(this.flatItemsList()));
-        effect(() => this.filterService.groupsList.set(this.groupsList()));
-        effect(() => this.filterService.suggestions.set(this.suggestionsList()));
-        effect(() => {
-            const v = this.itemValue();
-            // In CVA mode, writeValue() owns the value — itemValue should not override it
-            if (this.ngControl) {
-                if (isDevMode() && v !== null) {
-                    console.warn('[ui-autocomplete-v2] [itemValue] is set alongside a form control. Use ngModel or formControl instead.');
-                }
-                return;
-            }
-            this.valueManager.value.set(AutocompleteV2Utils.isArray(v) ? v : v ? [v] : []);
-            untracked(() => {
-                if (!this.tagsBelow()) {
-                    this.inputValue.set(this.valueManager.displayValue());
-                }
-            });
-            this.cdr.markForCheck();
-        });
-        effect(() => {
-            this.valueManager.value(); // track value changes
-            untracked(() => {
-                if (this.type() !== Autocomplete.LARGE) {
-                    this.overflowDir?.measure();
-                }
-            });
-        });
-    }
-    /**
-     * Used to mark component view as dirty when touched programmatically with markAsTouched/markAllAsTouched or errors
-     * to display validation errors that might happen (e.g. required)
-     */
-    ngDoCheck() {
-        if (this.ngControl) {
-            const invalid = Boolean(this.ngControl.invalid && this.ngControl.touched);
-            if (this.controlInvalid() !== invalid) {
-                this.controlInvalid.set(invalid);
-            }
-            if (this.ngControl.touched || this.ngControl.errors) {
-                this.cdr.markForCheck();
-            }
-        }
-    }
-    ngAfterViewInit() {
-        // Set default hover color for the autocomplete panel (overlay is outside component scope)
-        if (!document.body.style.getPropertyValue('--ui-autocomplete-option-color')) {
-            document.body.style.setProperty('--ui-autocomplete-option-color', '#FFF2FC');
-        }
-        if (this.type() !== Autocomplete.LARGE) {
-            this.overflowDir?.setupObserver('.input-container');
-        }
-        this.scrollManager.enabled = this.infiniteScroll();
-        this.scrollManager.closeOnScroll = this.closeOnScroll();
-        this.scrollManager.panelTrigger = this.autocomplete;
-        this.scrollManager.onBottomReached = () => this.onScrollBottom();
-        this.scrollManager.startCloseOnScroll();
-        this.focusMonitor
-            .monitor(this.matInput)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(origin => this.ngZone.run(() => {
-            this.keyboardFocused.set(origin === 'keyboard');
-        }));
-        this.matInput.nativeElement.onkeydown = this.onKeydown.bind(this);
-    }
-    ngOnDestroy() {
-        this.scrollManager.ngOnDestroy();
-        this.focusMonitor.stopMonitoring(this.matInput);
-        if (this.matInput?.nativeElement) {
-            this.matInput.nativeElement.onkeydown = null;
-        }
-    }
-    registerOnChange(fn) {
-        this.valueManager.registerOnChange(fn);
-    }
-    registerOnTouched(fn) {
-        this.valueManager.registerOnTouched(fn);
-    }
-    setDisabledState(isDisabled) {
-        this._isDisabled.set(isDisabled);
-        this.cdr.markForCheck();
-    }
-    writeValue(value) {
-        // Eagerly sync config so displayValue() computes correctly even if
-        // constructor effects haven't run yet (e.g. first writeValue from a
-        // FormControl with an initial value).
-        this.valueManager.type.set(this.type());
-        this.valueManager.textField.set(this.textField());
-        this.valueManager.valueField.set(this.valueField());
-        this.valueManager.compareWith.set(this.compareWith());
-        this.valueManager.writeValue(value);
-        // Drop tracked user-additions that are no longer in the externally-written value.
-        if (this.userAdditionsGroupLabel()) {
-            this.userAddedItems.update(items => {
-                const v = this.valueManager.value();
-                if (!AutocompleteV2Utils.isArray(v) || v.length === 0) {
-                    return [];
-                }
-                const vf = this.valueField();
-                const tf = this.textField();
-                return items.filter(i => v.some(x => (vf ? x[vf] === i[vf] : tf ? x[tf] === i[tf] : x === i)));
-            });
-        }
-        this.inputValue.set(this.tagsBelow() ? '' : this.valueManager.displayValue());
-        this.cdr.markForCheck();
-    }
-    get isGrouped() {
-        return this.groupsList().length > 0;
-    }
-    onOptionSelected(event) {
-        const inputValue = event.option.value;
-        const itemValue = AutocompleteV2Utils.createValueItem(inputValue, this.textField(), this.valueField());
-        const lengthBefore = AutocompleteV2Utils.isArray(this.valueManager.value())
-            ? this.valueManager.value().length
-            : 0;
-        this.valueManager.addValue(itemValue);
-        const lengthAfter = AutocompleteV2Utils.isArray(this.valueManager.value())
-            ? this.valueManager.value().length
-            : 0;
-        const wasAdded = lengthAfter > lengthBefore;
-        if (wasAdded && typeof event.option.value === 'string' && this.userAdditionsGroupLabel()) {
-            const vf = this.valueField();
-            const tf = this.textField();
-            const alreadyTracked = vf
-                ? this.userAddedItems().some(i => i[vf] === itemValue[vf])
-                : tf
-                    ? this.userAddedItems().some(i => i[tf] === itemValue[tf])
-                    : this.userAddedItems().some(i => i === itemValue);
-            if (!alreadyTracked) {
-                this.userAddedItems.update(items => [...items, itemValue]);
-            }
-        }
-        queueMicrotask(() => {
-            if (this.type() !== this.autocompleteType.SINGLE) {
-                // Multi: clear input so tags are visible while focused
-                this.inputValue.set('');
-            }
-            else {
-                this.inputValue.set(this.valueManager.displayValue());
-            }
-            this.cdr.markForCheck();
-        });
-        this.onUpdate();
-        this.valueManager.markAsTouched();
-    }
-    onOptionRemoved(option) {
-        setTimeout(() => this.autocomplete.closePanel(), 0);
-        const foundValue = this.valueManager.removeValue(option);
-        if (foundValue) {
-            this.matAutocomplete.options.forEach(matOption => {
-                const vf = this.valueField();
-                if (vf && matOption.value?.[vf] === foundValue[vf]) {
-                    matOption.deselect();
-                }
-            });
-        }
-        if (this.userAdditionsGroupLabel()) {
-            const vf = this.valueField();
-            this.userAddedItems.update(items => items.filter(item => (vf ? item[vf] !== option[vf] : item !== option)));
-        }
-        if (!this.valueManager.value()?.length) {
-            this.inputValue.set('');
-        }
-        this.onUpdate();
-        this.valueManager.markAsTouched();
-    }
-    /**
-     * Makes the whole below-tag a hit area for the control in its `uiAutocompleteTagSuffix` content
-     * (e.g. a menu trigger). The remove icon keeps its own behavior, and presses inside the suffix never
-     * reach here because the tag stops them.
-     */
-    onTagActivate(event) {
-        const target = event.target;
-        if (this._isDisabled() || target.closest('.delete-icon')) {
-            return;
-        }
-        // Keyboard activation only from the tag itself, not from a focused child.
-        if (event instanceof KeyboardEvent && !target.classList.contains('tag-container')) {
-            return;
-        }
-        const control = event.currentTarget.querySelector('.tag-suffix button, .tag-suffix [role="button"], .tag-suffix a[href]');
-        if (control) {
-            event.preventDefault();
-            control.click();
-        }
-    }
-    onInputChange(event) {
-        const text = event.target.value;
-        this.filterService.search(text, this.minCharactersSearch());
-        if (text.length >= this.minCharactersSearch()) {
-            this.searchTextChange.emit(text);
-        }
-    }
-    onClear() {
-        this.inputValue.set('');
-        this.valueManager.clear();
-        this.userAddedItems.set([]);
-        this.onUpdate();
-        this.matAutocomplete?.options.forEach(option => option.deselect());
-        this.valueManager.markAsTouched();
-    }
-    onBlur() {
-        setTimeout(() => {
-            this.filterService.clearSearch();
-            this.isInputFocus.set(false);
-            this.inputValue.set(this.tagsBelow() ? '' : this.valueManager.displayValue());
-            this.valueManager.markAsTouched();
-            this.blur.emit();
-            this.cdr.markForCheck();
-        }, 0);
-    }
-    onPanelOpened() {
-        this.scrollManager.scrollToTop();
-    }
-    onScrollBottom() {
-        if (this.filterService.searchText$.value) {
-            this.scrollViewportBottomReachedFiltered.emit();
-        }
-        else {
-            this.scrollViewportBottomReached.emit();
-        }
-    }
-    onFocus() {
-        this.isInputFocus.set(true);
-        const val = this.inputValue();
-        if (typeof val === 'string' && val.match(/^\s+/gm)) {
-            this.inputValue.set(val.trimStart());
-        }
-        this.focus.emit();
-    }
-    onUpdate() {
-        this.filterService.clearSearch();
-        this.valueManager.notifyChange();
-        const val = this.valueManager.value();
-        if (val !== null) {
-            this.selectionChange.emit(val);
-        }
-    }
-    get isDropdown() {
-        return this.variant() === DropdownVariation.DROPDOWN;
-    }
-    onChevronClick(autocomplete) {
-        if (autocomplete.isOpen) {
-            setTimeout(() => {
-                this.autocomplete.closePanel();
-            }, 0);
-        }
-    }
-    onKeydown($event) {
-        const optionHeight = 48;
-        if ($event.key === IKeyboardEvent.HOME) {
-            this.matAutocomplete._keyManager.setFirstItemActive();
-        }
-        else if ($event.key === IKeyboardEvent.END) {
-            this.matAutocomplete._keyManager.setLastItemActive();
-        }
-        else if ($event.key === IKeyboardEvent.PAGE_DOWN) {
-            this.matAutocomplete._keyManager.setNextItemActive();
-            this.matAutocomplete._keyManager.setNextItemActive();
-            this.matAutocomplete._keyManager.setNextItemActive();
-        }
-        else if ($event.key === IKeyboardEvent.PAGE_UP) {
-            this.matAutocomplete._keyManager.setPreviousItemActive();
-            this.matAutocomplete._keyManager.setPreviousItemActive();
-            this.matAutocomplete._keyManager.setPreviousItemActive();
-        }
-        this.matAutocomplete._setScrollTop((this.matAutocomplete._keyManager.activeItemIndex ?? 0) * optionHeight);
-    }
-    getVirtualScrollHeight(itemCount) {
-        const itemHeight = 48;
-        const maxHeight = 200;
-        const minHeight = 48;
-        const calculatedHeight = itemCount * itemHeight;
-        return Math.min(Math.max(calculatedHeight, minHeight), maxHeight);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: AutocompleteV2Component, isStandalone: true, selector: "ui-autocomplete-v2", inputs: { itemsList: { classPropertyName: "itemsList", publicName: "itemsList", isSignal: true, isRequired: false, transformFunction: null }, suggestionsList: { classPropertyName: "suggestionsList", publicName: "suggestionsList", isSignal: true, isRequired: false, transformFunction: null }, groupsList: { classPropertyName: "groupsList", publicName: "groupsList", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowAdd: { classPropertyName: "allowAdd", publicName: "allowAdd", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, imageField: { classPropertyName: "imageField", publicName: "imageField", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, testId: { classPropertyName: "testId", publicName: "testId", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, minCharactersSearch: { classPropertyName: "minCharactersSearch", publicName: "minCharactersSearch", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null }, showBottomContent: { classPropertyName: "showBottomContent", publicName: "showBottomContent", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelClass: { classPropertyName: "dropdownPanelClass", publicName: "dropdownPanelClass", isSignal: true, isRequired: false, transformFunction: null }, panelPosition: { classPropertyName: "panelPosition", publicName: "panelPosition", isSignal: true, isRequired: false, transformFunction: null }, hideSelectedSection: { classPropertyName: "hideSelectedSection", publicName: "hideSelectedSection", isSignal: true, isRequired: false, transformFunction: null }, userAdditionsGroupLabel: { classPropertyName: "userAdditionsGroupLabel", publicName: "userAdditionsGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnScroll: { classPropertyName: "closeOnScroll", publicName: "closeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowUserInput: { classPropertyName: "allowUserInput", publicName: "allowUserInput", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, dynamicFilterLoading: { classPropertyName: "dynamicFilterLoading", publicName: "dynamicFilterLoading", isSignal: true, isRequired: false, transformFunction: null }, dynamicFilteredList: { classPropertyName: "dynamicFilteredList", publicName: "dynamicFilteredList", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, hasMoreOptionsForInfiniteScroll: { classPropertyName: "hasMoreOptionsForInfiniteScroll", publicName: "hasMoreOptionsForInfiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, itemValue: { classPropertyName: "itemValue", publicName: "itemValue", isSignal: true, isRequired: false, transformFunction: null }, formErrorConfig: { classPropertyName: "formErrorConfig", publicName: "formErrorConfig", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, addOptionPosition: { classPropertyName: "addOptionPosition", publicName: "addOptionPosition", isSignal: true, isRequired: false, transformFunction: null }, tagsPosition: { classPropertyName: "tagsPosition", publicName: "tagsPosition", isSignal: true, isRequired: false, transformFunction: null }, tagIcon: { classPropertyName: "tagIcon", publicName: "tagIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached", scrollViewportBottomReachedFiltered: "scrollViewportBottomReachedFiltered" }, host: { properties: { "attr.theme": "applicationTheme" } }, providers: [AutocompleteValueManager, AutocompleteFilterService, InfiniteScrollDirective], queries: [{ propertyName: "tagSuffix", first: true, predicate: AutocompleteTagSuffixDirective, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "measureElRef", first: true, predicate: ["measureEl"], descendants: true }, { propertyName: "overflowDir", first: true, predicate: ["overflow"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ disabled: _isDisabled() }\">\n    <mat-form-field\n      [color]=\"hasError() ? 'warn' : 'accent'\"\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{\n        'large-size': type() === autocompleteType.LARGE,\n        'hide-bottom-content': !showBottomContent(),\n        'keyboard-focused': keyboardFocused(),\n        'has-label': !!label(),\n      }\"\n    >\n      @if (label()) {\n        <mat-label\n          >{{ label() }}\n          @if (required()) {\n            <span>*</span>\n          }\n        </mat-label>\n      }\n      <div\n        #formField\n        class=\"input-container\"\n        [class.has-multiple-selections]=\"\n          type() === autocompleteType.LARGE &&\n          utils.isArray(valueManager.value()) &&\n          $any(valueManager.value()).length > 1\n        \"\n        [class.autocomplete-variant]=\"type() === autocompleteType.LARGE && !isDropdown\"\n      >\n        @if (textField() ? $any(valueManager.value())?.[textField()] : $any(valueManager.value()) === inputValue()) {\n          <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n            ('SELECTED' | uiTranslate | async) + ' ' + inputValue()\n          }}</span>\n        }\n\n        <input\n          [attr.data-testid]=\"testId() ?? 'autocomplete-v2-input'\"\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [attr.maxlength]=\"maxLength() !== null && maxLength() !== undefined ? maxLength() : null\"\n          [uiPreventInput]=\"!allowUserInput()\"\n          [disabled]=\"_isDisabled()\"\n          [ngClass]=\"{\n            'unset-margin': valueManager.value() && type() === autocompleteType.LARGE,\n            'no-caret': !allowUserInput(),\n          }\"\n          (blur)=\"onBlur()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"\n            (translationContext + 'SELECTED' | uiTranslate | async) +\n            ' ' +\n            (valueManager.value() | transformItem: textField() : true)\n          \"\n          matInput\n          [placeholder]=\"suppressPlaceholder() ? '' : placeholder()\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          [matAutocompletePosition]=\"panelPosition()\"\n          (input)=\"onInputChange($event)\"\n          [ngModel]=\"inputValue()\"\n          (ngModelChange)=\"inputValue.set($event)\"\n        />\n        <!-- Hidden measurement container: always in DOM, renders ALL tags for width measurement -->\n        @if (!tagsBelow() && type() !== autocompleteType.SINGLE && utils.isArray(valueManager.value())) {\n          <div class=\"selected-items measurement-container\" #measureEl>\n            @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n              <ui-tag\n                class=\"value-tag\"\n                [id]=\"'measure-tag-' + i\"\n                [label]=\"valueItem | transformItem: textField()\"\n                [allowClose]=\"true\"\n                [isDisabled]=\"disabled()\"\n                [applicationTheme]=\"applicationTheme\"\n              ></ui-tag>\n            }\n          </div>\n        }\n\n        @if (\n          !tagsBelow() &&\n          ((type() === autocompleteType.LARGE && valueManager.value()) ||\n            (!(inputValue() && isInputFocus()) && valueManager.value() && type() !== autocompleteType.SINGLE))\n        ) {\n          <!-- Visible container: only renders tags that fit. Hidden until first measurement to prevent flash. -->\n          <div\n            class=\"selected-items\"\n            #tagContainer\n            uiAutocompleteOverflowDetect\n            #overflow=\"autocompleteOverflowDetect\"\n            [measureContainer]=\"measureElRef?.nativeElement\"\n            [class.measured]=\"\n              type() === autocompleteType.LARGE || type() === autocompleteType.SINGLE || overflow.hasMeasured()\n            \"\n          >\n            @if (size() === 'small' && $any(valueManager.value()).length > 1) {\n              <div class=\"selected-count\">\n                {{\n                  translationContext + 'SELECTED_AMOUNT'\n                    | uiTranslate: { numberSelected: valueManager.value()!.length }\n                    | async\n                }}\n              </div>\n            } @else {\n              @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n                @if (i < overflow.visibleCount()) {\n                  <ui-tag\n                    class=\"value-tag\"\n                    [id]=\"'ui-tag-' + i\"\n                    [label]=\"valueItem | transformItem: textField()\"\n                    [allowClose]=\"true\"\n                    [isDisabled]=\"disabled()\"\n                    [applicationTheme]=\"applicationTheme\"\n                    [ngStyle]=\"\n                      type() !== autocompleteType.LARGE\n                        ? { '--tag-max-width': overflow.tagMaxWidth() ? overflow.tagMaxWidth() + 'px' : 'fit-content' }\n                        : {}\n                    \"\n                    (close)=\"onOptionRemoved(valueItem)\"\n                  ></ui-tag>\n                }\n              }\n              @if (overflow.overflowCount() > 0) {\n                <div class=\"overlap-count\" [matTooltip]=\"hiddenItemsTooltip()\">\n                  <ui-tag\n                    [applicationTheme]=\"applicationTheme\"\n                    [isDisabled]=\"disabled()\"\n                    [label]=\"'+' + overflow.overflowCount()\"\n                  ></ui-tag>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      @if (showClearButton()) {\n        <ui-icon\n          class=\"remove-selected\"\n          [tabIndex]=\"_isDisabled() ? -1 : 0\"\n          (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          [ngClass]=\"{ 'large-input-icon': type() === autocompleteType.LARGE }\"\n          (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          [size]=\"'24'\"\n          [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n          [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n          [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n        ></ui-icon>\n      }\n\n      @if (isDropdown) {\n        <ui-icon\n          class=\"arrow-state\"\n          [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type() === autocompleteType.LARGE }\"\n          [size]=\"'24'\"\n          [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n          (click)=\"onChevronClick(autocomplete)\"\n        ></ui-icon>\n      }\n\n      <mat-autocomplete\n        #autocomplete\n        [class]=\"applicationTheme + ' ' + dropdownPanelClass()\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [hideSingleSelectionIndicator]=\"false\"\n        (opened)=\"onPanelOpened()\"\n      >\n        <ng-template #optionContentTpl let-item=\"item\" let-highlight=\"highlight\">\n          @if (imageField() && item?.[imageField()]) {\n            <img class=\"option-image\" [src]=\"item[imageField()]\" alt=\"\" />\n          }\n          <span [selectText]=\"highlight ? (filterService.userInput$ | async) : null\">{{\n            item | transformItem: textField()\n          }}</span>\n          <ui-icon\n            [applicationTheme]=\"applicationTheme\"\n            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n          ></ui-icon>\n        </ng-template>\n\n        <!-- Reusable option template \u2014 must be inside mat-autocomplete for @ContentChildren to find mat-options -->\n        <ng-template #optionTpl let-item=\"item\" let-highlight=\"highlight\">\n          <mat-option\n            (mousedown)=\"$event.preventDefault()\"\n            [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n            [value]=\"item\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: highlight }\"\n            ></ng-container>\n          </mat-option>\n        </ng-template>\n\n        <!-- Reusable \"Add\"/no-results/loading option for the filtered view -->\n        <ng-template #addOptionTpl let-items=\"items\" let-suggestions=\"suggestions\">\n          @if (dynamicFilterLoading()) {\n            <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n              <div class=\"loading-container\">\n                <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n              </div>\n            </mat-option>\n          } @else if (inputValue()) {\n            @if (\n              allowAdd() && !isAlreadyAdded() && !utils.hasExactMatch(items, suggestions, inputValue(), textField())\n            ) {\n              <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n                <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n                <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n              </mat-option>\n            } @else if (!items.length && !suggestions.length) {\n              <mat-option [style.pointer-events]=\"'none'\">\n                <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n              </mat-option>\n            }\n          }\n        </ng-template>\n\n        <!-- \u2500\u2500 Unfiltered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n        @if ((filterService.isSearching$ | async) === false) {\n          @if (!isDropdown) {\n            <!-- Suggestions -->\n            @if (suggestionsList().length) {\n              <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                @for (suggested of suggestionsList(); track suggested) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTpl; context: { item: suggested, highlight: true }\"\n                  ></ng-container>\n                }\n              </mat-optgroup>\n            }\n\n            <!-- Selected items (multi) -->\n            @if (valueManager.value()?.length && type() !== autocompleteType.SINGLE && !hideSelectedSection()) {\n              <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                @for (item of $any(valueManager.value()); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: false }\"></ng-container>\n                }\n              </mat-optgroup>\n            }\n\n            <!-- Main items (normalized groups) -->\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                } @else {\n                  @for (group of groupedItemsList(); track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  }\n                }\n\n                @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n                  <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                    <div class=\"loading-container\">\n                      <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                    </div>\n                  </mat-option>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (isGrouped) {\n                @for (group of groupedItemsList(); track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    }\n                  }\n                }\n              } @else {\n                @for (item of flatItemsList(); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n                }\n              }\n            }\n\n            <!-- Selected item (single) -->\n            @if (valueManager.value()?.length && type() === autocompleteType.SINGLE && !hideSelectedSection()) {\n              <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                <ng-container\n                  *ngTemplateOutlet=\"optionTpl; context: { item: valueManager.value(), highlight: true }\"\n                ></ng-container>\n              </mat-optgroup>\n            }\n          } @else {\n            <!-- \u2500\u2500 Dropdown (unfiltered) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (!isGrouped) {\n                  <!-- Ungrouped: flat cdkVirtualFor directly in viewport -->\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                } @else {\n                  <!-- Grouped: nested cdkVirtualFor per group -->\n                  @for (group of groupedItemsList(); track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  }\n                }\n\n                @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n                  <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                    <div class=\"loading-container\">\n                      <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                    </div>\n                  </mat-option>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (isGrouped) {\n                @for (group of groupedItemsList(); track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    }\n                  }\n                }\n              } @else {\n                @for (item of flatItemsList(); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n                }\n              }\n            }\n          }\n\n          @if (userAdditionsGroupLabel() && userAddedItems().length) {\n            <mat-optgroup [label]=\"userAdditionsGroupLabel()\">\n              @for (item of userAddedItems(); track item) {\n                <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n              }\n            </mat-optgroup>\n          }\n        }\n\n        <!-- \u2500\u2500 Filtered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n        @if (filterService.filteredSuggestions$ | async; as filteredSuggestionList) {\n          @if (filterService.filteredItems$ | async; as filteredItemsList) {\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (addOptionPosition() === 'top') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      addOptionTpl;\n                      context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                    \"\n                  ></ng-container>\n                }\n                <!-- Filtered suggestions -->\n                @if (filteredSuggestionList.length) {\n                  <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                      *cdkVirtualFor=\"let item of filteredSuggestionList; trackBy: trackByItem\"\n                      [value]=\"item\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    </mat-option>\n                  </mat-optgroup>\n                }\n\n                <!-- Filtered items: grouped -->\n                @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n                  @if (filteredGroups.length) {\n                    @for (group of filteredGroups; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{\n                              'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                            }\"\n                            *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n                            [value]=\"item\"\n                          >\n                            <ng-container\n                              *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                            ></ng-container>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n\n                <!-- Filtered items: ungrouped (no suggestions) -->\n                @if (!filteredSuggestionList.length && !isGrouped) {\n                  @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                      [value]=\"item\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    </mat-option>\n                  }\n                } @else {\n                  <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n                  @if (filteredItemsList.length && !isGrouped) {\n                    <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n                      @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                }\n\n                @if (addOptionPosition() === 'bottom') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      addOptionTpl;\n                      context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                    \"\n                  ></ng-container>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (addOptionPosition() === 'top') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    addOptionTpl;\n                    context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                  \"\n                ></ng-container>\n              }\n              <!-- Filtered items: grouped -->\n              @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n                @if (filteredGroups.length) {\n                  @for (group of filteredGroups; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <ng-container\n                            *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    }\n                  }\n                }\n              }\n\n              <!-- Filtered suggestions -->\n              @if (filteredSuggestionList.length) {\n                <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                  @for (item of filteredSuggestionList; track item) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  }\n                </mat-optgroup>\n              }\n\n              <!-- Filtered items: ungrouped (no suggestions) -->\n              @if (!filteredSuggestionList.length && !isGrouped) {\n                @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                }\n              } @else {\n                <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n                @if (filteredItemsList.length && !isGrouped) {\n                  <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n                    @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  </mat-optgroup>\n                }\n              }\n\n              @if (addOptionPosition() === 'bottom') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    addOptionTpl;\n                    context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                  \"\n                ></ng-container>\n              }\n            }\n          }\n        }\n      </mat-autocomplete>\n      @if (hasError()) {\n        <mat-hint class=\"error\">\n          @if (ngControl) {\n            <ui-validation-error\n              [ngControl]=\"ngControl\"\n              [customErrors]=\"formErrorConfig()\"\n              [label]=\"label()\"\n            ></ui-validation-error>\n          } @else {\n            @for (error of safeErrors(); track error) {\n              <div class=\"errors\">\n                <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n                <span>{{ error }}</span>\n              </div>\n            }\n          }\n        </mat-hint>\n      }\n    </mat-form-field>\n    @if (tagsBelow() && valueManager.value()?.length) {\n      <div class=\"selected-items--below\">\n        @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'below-tag-' + i\"\n            [label]=\"valueItem | transformItem: textField()\"\n            [icon]=\"tagIcons()[i]\"\n            [allowClose]=\"true\"\n            [isDisabled]=\"disabled()\"\n            [constrainWidth]=\"true\"\n            [applicationTheme]=\"applicationTheme\"\n            (close)=\"onOptionRemoved(valueItem)\"\n            (click)=\"onTagActivate($event)\"\n            (keydown.enter)=\"onTagActivate($event)\"\n            (keydown.space)=\"onTagActivate($event)\"\n          >\n            @if (tagSuffix(); as suffix) {\n              <span class=\"value-tag__suffix\" uiTagSuffix>\n                <ng-container *ngTemplateOutlet=\"suffix.templateRef; context: { $implicit: valueItem, index: i }\" />\n              </span>\n            }\n          </ui-tag>\n        }\n        <!-- Consumer content rendered as a sibling of the selected tags, before the clear button -->\n        <ng-content select=\"[autocompleteTagsSuffix]\"></ng-content>\n        @if (clearable()) {\n          <button type=\"button\" class=\"clear-all\" [disabled]=\"_isDisabled()\" (click)=\"onClear()\">\n            {{ 'COMMON.CLEAR' | uiTranslate | async }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap;--tag-max-width: calc(100% - 8px) }.large-size .selected-items .value-tag ::ng-deep .tag-container{max-width:100%!important}.large-size .input-container{margin:auto 0;width:calc(100% - 25px);display:flex;flex-direction:column-reverse}.large-size .input-container.has-multiple-selections{width:calc(100% - 50px)}.large-size .input-container.autocomplete-variant{width:100%}.large-size .input-container.autocomplete-variant.has-multiple-selections{width:calc(100% - 26px)}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px;visibility:hidden}.input-container .selected-items.measured{visibility:visible}.input-container .selected-items .value-tag{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items.measurement-container{visibility:hidden;position:absolute;height:0;overflow:hidden;pointer-events:none}.input-container .overlap-count{font-size:14px;line-height:20px}.input-container .overlap-count ui-tag{display:block}.input-container input{margin-left:6px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .option-image{width:24px;height:24px;margin-right:8px;object-fit:cover;flex-shrink:0}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-option{padding-left:16px!important}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}.selected-items--below{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}.selected-items--below ui-tag{margin:0;--ui-tag-max-width: 400px}.selected-items--below .clear-all{background:none;border:none;padding:4px 8px;cursor:pointer;color:#000;font-weight:500;font-size:12px;line-height:16px;text-decoration:underline}.selected-items--below .clear-all:disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TagComponentModule }, { kind: "component", type: i6.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "pinnedBackground", "constrainWidth", "isDisabled", "applicationTheme", "ariaLabel", "testId", "ariaRequired", "showBadge", "notificationsAmount"], outputs: ["isSelectedChange", "close", "press"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i7.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: SpinnerComponentModule }, { kind: "component", type: i8.SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "directive", type: AutocompleteOverflowDetectDirective, selector: "[uiAutocompleteOverflowDetect]", inputs: ["measureContainer", "itemSelector", "reserveWidth"], exportAs: ["autocompleteOverflowDetect"] }, { kind: "ngmodule", type: ValidationErrorModule }, { kind: "component", type: i9.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteV2Component, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-autocomplete-v2', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        CommonModule,
-                        FormsModule,
-                        MatAutocompleteModule,
-                        MatChipsModule,
-                        MatFormFieldModule,
-                        MatInputModule,
-                        TagComponentModule,
-                        IconComponentModule,
-                        SpinnerComponentModule,
-                        CdkVirtualScrollViewport,
-                        CdkVirtualForOf,
-                        CdkFixedSizeVirtualScroll,
-                        PreventInputDirective,
-                        UiTranslatePipe,
-                        TransformItemPipe,
-                        IncludesPipe,
-                        SelectTextDirective,
-                        AutocompleteOverflowDetectDirective,
-                        ValidationErrorModule,
-                        MatTooltipModule,
-                    ], host: {
-                        '[attr.theme]': 'applicationTheme',
-                    }, providers: [AutocompleteValueManager, AutocompleteFilterService, InfiniteScrollDirective], template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ disabled: _isDisabled() }\">\n    <mat-form-field\n      [color]=\"hasError() ? 'warn' : 'accent'\"\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{\n        'large-size': type() === autocompleteType.LARGE,\n        'hide-bottom-content': !showBottomContent(),\n        'keyboard-focused': keyboardFocused(),\n        'has-label': !!label(),\n      }\"\n    >\n      @if (label()) {\n        <mat-label\n          >{{ label() }}\n          @if (required()) {\n            <span>*</span>\n          }\n        </mat-label>\n      }\n      <div\n        #formField\n        class=\"input-container\"\n        [class.has-multiple-selections]=\"\n          type() === autocompleteType.LARGE &&\n          utils.isArray(valueManager.value()) &&\n          $any(valueManager.value()).length > 1\n        \"\n        [class.autocomplete-variant]=\"type() === autocompleteType.LARGE && !isDropdown\"\n      >\n        @if (textField() ? $any(valueManager.value())?.[textField()] : $any(valueManager.value()) === inputValue()) {\n          <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n            ('SELECTED' | uiTranslate | async) + ' ' + inputValue()\n          }}</span>\n        }\n\n        <input\n          [attr.data-testid]=\"testId() ?? 'autocomplete-v2-input'\"\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [attr.maxlength]=\"maxLength() !== null && maxLength() !== undefined ? maxLength() : null\"\n          [uiPreventInput]=\"!allowUserInput()\"\n          [disabled]=\"_isDisabled()\"\n          [ngClass]=\"{\n            'unset-margin': valueManager.value() && type() === autocompleteType.LARGE,\n            'no-caret': !allowUserInput(),\n          }\"\n          (blur)=\"onBlur()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"\n            (translationContext + 'SELECTED' | uiTranslate | async) +\n            ' ' +\n            (valueManager.value() | transformItem: textField() : true)\n          \"\n          matInput\n          [placeholder]=\"suppressPlaceholder() ? '' : placeholder()\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          [matAutocompletePosition]=\"panelPosition()\"\n          (input)=\"onInputChange($event)\"\n          [ngModel]=\"inputValue()\"\n          (ngModelChange)=\"inputValue.set($event)\"\n        />\n        <!-- Hidden measurement container: always in DOM, renders ALL tags for width measurement -->\n        @if (!tagsBelow() && type() !== autocompleteType.SINGLE && utils.isArray(valueManager.value())) {\n          <div class=\"selected-items measurement-container\" #measureEl>\n            @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n              <ui-tag\n                class=\"value-tag\"\n                [id]=\"'measure-tag-' + i\"\n                [label]=\"valueItem | transformItem: textField()\"\n                [allowClose]=\"true\"\n                [isDisabled]=\"disabled()\"\n                [applicationTheme]=\"applicationTheme\"\n              ></ui-tag>\n            }\n          </div>\n        }\n\n        @if (\n          !tagsBelow() &&\n          ((type() === autocompleteType.LARGE && valueManager.value()) ||\n            (!(inputValue() && isInputFocus()) && valueManager.value() && type() !== autocompleteType.SINGLE))\n        ) {\n          <!-- Visible container: only renders tags that fit. Hidden until first measurement to prevent flash. -->\n          <div\n            class=\"selected-items\"\n            #tagContainer\n            uiAutocompleteOverflowDetect\n            #overflow=\"autocompleteOverflowDetect\"\n            [measureContainer]=\"measureElRef?.nativeElement\"\n            [class.measured]=\"\n              type() === autocompleteType.LARGE || type() === autocompleteType.SINGLE || overflow.hasMeasured()\n            \"\n          >\n            @if (size() === 'small' && $any(valueManager.value()).length > 1) {\n              <div class=\"selected-count\">\n                {{\n                  translationContext + 'SELECTED_AMOUNT'\n                    | uiTranslate: { numberSelected: valueManager.value()!.length }\n                    | async\n                }}\n              </div>\n            } @else {\n              @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n                @if (i < overflow.visibleCount()) {\n                  <ui-tag\n                    class=\"value-tag\"\n                    [id]=\"'ui-tag-' + i\"\n                    [label]=\"valueItem | transformItem: textField()\"\n                    [allowClose]=\"true\"\n                    [isDisabled]=\"disabled()\"\n                    [applicationTheme]=\"applicationTheme\"\n                    [ngStyle]=\"\n                      type() !== autocompleteType.LARGE\n                        ? { '--tag-max-width': overflow.tagMaxWidth() ? overflow.tagMaxWidth() + 'px' : 'fit-content' }\n                        : {}\n                    \"\n                    (close)=\"onOptionRemoved(valueItem)\"\n                  ></ui-tag>\n                }\n              }\n              @if (overflow.overflowCount() > 0) {\n                <div class=\"overlap-count\" [matTooltip]=\"hiddenItemsTooltip()\">\n                  <ui-tag\n                    [applicationTheme]=\"applicationTheme\"\n                    [isDisabled]=\"disabled()\"\n                    [label]=\"'+' + overflow.overflowCount()\"\n                  ></ui-tag>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      @if (showClearButton()) {\n        <ui-icon\n          class=\"remove-selected\"\n          [tabIndex]=\"_isDisabled() ? -1 : 0\"\n          (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          [ngClass]=\"{ 'large-input-icon': type() === autocompleteType.LARGE }\"\n          (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          [size]=\"'24'\"\n          [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n          [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n          [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n        ></ui-icon>\n      }\n\n      @if (isDropdown) {\n        <ui-icon\n          class=\"arrow-state\"\n          [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type() === autocompleteType.LARGE }\"\n          [size]=\"'24'\"\n          [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n          (click)=\"onChevronClick(autocomplete)\"\n        ></ui-icon>\n      }\n\n      <mat-autocomplete\n        #autocomplete\n        [class]=\"applicationTheme + ' ' + dropdownPanelClass()\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [hideSingleSelectionIndicator]=\"false\"\n        (opened)=\"onPanelOpened()\"\n      >\n        <ng-template #optionContentTpl let-item=\"item\" let-highlight=\"highlight\">\n          @if (imageField() && item?.[imageField()]) {\n            <img class=\"option-image\" [src]=\"item[imageField()]\" alt=\"\" />\n          }\n          <span [selectText]=\"highlight ? (filterService.userInput$ | async) : null\">{{\n            item | transformItem: textField()\n          }}</span>\n          <ui-icon\n            [applicationTheme]=\"applicationTheme\"\n            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n          ></ui-icon>\n        </ng-template>\n\n        <!-- Reusable option template \u2014 must be inside mat-autocomplete for @ContentChildren to find mat-options -->\n        <ng-template #optionTpl let-item=\"item\" let-highlight=\"highlight\">\n          <mat-option\n            (mousedown)=\"$event.preventDefault()\"\n            [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n            [value]=\"item\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: highlight }\"\n            ></ng-container>\n          </mat-option>\n        </ng-template>\n\n        <!-- Reusable \"Add\"/no-results/loading option for the filtered view -->\n        <ng-template #addOptionTpl let-items=\"items\" let-suggestions=\"suggestions\">\n          @if (dynamicFilterLoading()) {\n            <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n              <div class=\"loading-container\">\n                <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n              </div>\n            </mat-option>\n          } @else if (inputValue()) {\n            @if (\n              allowAdd() && !isAlreadyAdded() && !utils.hasExactMatch(items, suggestions, inputValue(), textField())\n            ) {\n              <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n                <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n                <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n              </mat-option>\n            } @else if (!items.length && !suggestions.length) {\n              <mat-option [style.pointer-events]=\"'none'\">\n                <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n              </mat-option>\n            }\n          }\n        </ng-template>\n\n        <!-- \u2500\u2500 Unfiltered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n        @if ((filterService.isSearching$ | async) === false) {\n          @if (!isDropdown) {\n            <!-- Suggestions -->\n            @if (suggestionsList().length) {\n              <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                @for (suggested of suggestionsList(); track suggested) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTpl; context: { item: suggested, highlight: true }\"\n                  ></ng-container>\n                }\n              </mat-optgroup>\n            }\n\n            <!-- Selected items (multi) -->\n            @if (valueManager.value()?.length && type() !== autocompleteType.SINGLE && !hideSelectedSection()) {\n              <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                @for (item of $any(valueManager.value()); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: false }\"></ng-container>\n                }\n              </mat-optgroup>\n            }\n\n            <!-- Main items (normalized groups) -->\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                } @else {\n                  @for (group of groupedItemsList(); track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  }\n                }\n\n                @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n                  <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                    <div class=\"loading-container\">\n                      <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                    </div>\n                  </mat-option>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (isGrouped) {\n                @for (group of groupedItemsList(); track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    }\n                  }\n                }\n              } @else {\n                @for (item of flatItemsList(); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n                }\n              }\n            }\n\n            <!-- Selected item (single) -->\n            @if (valueManager.value()?.length && type() === autocompleteType.SINGLE && !hideSelectedSection()) {\n              <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                <ng-container\n                  *ngTemplateOutlet=\"optionTpl; context: { item: valueManager.value(), highlight: true }\"\n                ></ng-container>\n              </mat-optgroup>\n            }\n          } @else {\n            <!-- \u2500\u2500 Dropdown (unfiltered) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (!isGrouped) {\n                  <!-- Ungrouped: flat cdkVirtualFor directly in viewport -->\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                } @else {\n                  <!-- Grouped: nested cdkVirtualFor per group -->\n                  @for (group of groupedItemsList(); track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  }\n                }\n\n                @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n                  <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                    <div class=\"loading-container\">\n                      <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                    </div>\n                  </mat-option>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (isGrouped) {\n                @for (group of groupedItemsList(); track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    }\n                  }\n                }\n              } @else {\n                @for (item of flatItemsList(); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n                }\n              }\n            }\n          }\n\n          @if (userAdditionsGroupLabel() && userAddedItems().length) {\n            <mat-optgroup [label]=\"userAdditionsGroupLabel()\">\n              @for (item of userAddedItems(); track item) {\n                <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n              }\n            </mat-optgroup>\n          }\n        }\n\n        <!-- \u2500\u2500 Filtered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n        @if (filterService.filteredSuggestions$ | async; as filteredSuggestionList) {\n          @if (filterService.filteredItems$ | async; as filteredItemsList) {\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (addOptionPosition() === 'top') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      addOptionTpl;\n                      context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                    \"\n                  ></ng-container>\n                }\n                <!-- Filtered suggestions -->\n                @if (filteredSuggestionList.length) {\n                  <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                      *cdkVirtualFor=\"let item of filteredSuggestionList; trackBy: trackByItem\"\n                      [value]=\"item\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    </mat-option>\n                  </mat-optgroup>\n                }\n\n                <!-- Filtered items: grouped -->\n                @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n                  @if (filteredGroups.length) {\n                    @for (group of filteredGroups; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{\n                              'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                            }\"\n                            *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n                            [value]=\"item\"\n                          >\n                            <ng-container\n                              *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                            ></ng-container>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n\n                <!-- Filtered items: ungrouped (no suggestions) -->\n                @if (!filteredSuggestionList.length && !isGrouped) {\n                  @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                      [value]=\"item\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    </mat-option>\n                  }\n                } @else {\n                  <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n                  @if (filteredItemsList.length && !isGrouped) {\n                    <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n                      @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                }\n\n                @if (addOptionPosition() === 'bottom') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      addOptionTpl;\n                      context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                    \"\n                  ></ng-container>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (addOptionPosition() === 'top') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    addOptionTpl;\n                    context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                  \"\n                ></ng-container>\n              }\n              <!-- Filtered items: grouped -->\n              @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n                @if (filteredGroups.length) {\n                  @for (group of filteredGroups; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <ng-container\n                            *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    }\n                  }\n                }\n              }\n\n              <!-- Filtered suggestions -->\n              @if (filteredSuggestionList.length) {\n                <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                  @for (item of filteredSuggestionList; track item) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  }\n                </mat-optgroup>\n              }\n\n              <!-- Filtered items: ungrouped (no suggestions) -->\n              @if (!filteredSuggestionList.length && !isGrouped) {\n                @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                }\n              } @else {\n                <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n                @if (filteredItemsList.length && !isGrouped) {\n                  <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n                    @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  </mat-optgroup>\n                }\n              }\n\n              @if (addOptionPosition() === 'bottom') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    addOptionTpl;\n                    context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                  \"\n                ></ng-container>\n              }\n            }\n          }\n        }\n      </mat-autocomplete>\n      @if (hasError()) {\n        <mat-hint class=\"error\">\n          @if (ngControl) {\n            <ui-validation-error\n              [ngControl]=\"ngControl\"\n              [customErrors]=\"formErrorConfig()\"\n              [label]=\"label()\"\n            ></ui-validation-error>\n          } @else {\n            @for (error of safeErrors(); track error) {\n              <div class=\"errors\">\n                <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n                <span>{{ error }}</span>\n              </div>\n            }\n          }\n        </mat-hint>\n      }\n    </mat-form-field>\n    @if (tagsBelow() && valueManager.value()?.length) {\n      <div class=\"selected-items--below\">\n        @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'below-tag-' + i\"\n            [label]=\"valueItem | transformItem: textField()\"\n            [icon]=\"tagIcons()[i]\"\n            [allowClose]=\"true\"\n            [isDisabled]=\"disabled()\"\n            [constrainWidth]=\"true\"\n            [applicationTheme]=\"applicationTheme\"\n            (close)=\"onOptionRemoved(valueItem)\"\n            (click)=\"onTagActivate($event)\"\n            (keydown.enter)=\"onTagActivate($event)\"\n            (keydown.space)=\"onTagActivate($event)\"\n          >\n            @if (tagSuffix(); as suffix) {\n              <span class=\"value-tag__suffix\" uiTagSuffix>\n                <ng-container *ngTemplateOutlet=\"suffix.templateRef; context: { $implicit: valueItem, index: i }\" />\n              </span>\n            }\n          </ui-tag>\n        }\n        <!-- Consumer content rendered as a sibling of the selected tags, before the clear button -->\n        <ng-content select=\"[autocompleteTagsSuffix]\"></ng-content>\n        @if (clearable()) {\n          <button type=\"button\" class=\"clear-all\" [disabled]=\"_isDisabled()\" (click)=\"onClear()\">\n            {{ 'COMMON.CLEAR' | uiTranslate | async }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap;--tag-max-width: calc(100% - 8px) }.large-size .selected-items .value-tag ::ng-deep .tag-container{max-width:100%!important}.large-size .input-container{margin:auto 0;width:calc(100% - 25px);display:flex;flex-direction:column-reverse}.large-size .input-container.has-multiple-selections{width:calc(100% - 50px)}.large-size .input-container.autocomplete-variant{width:100%}.large-size .input-container.autocomplete-variant.has-multiple-selections{width:calc(100% - 26px)}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px;visibility:hidden}.input-container .selected-items.measured{visibility:visible}.input-container .selected-items .value-tag{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items.measurement-container{visibility:hidden;position:absolute;height:0;overflow:hidden;pointer-events:none}.input-container .overlap-count{font-size:14px;line-height:20px}.input-container .overlap-count ui-tag{display:block}.input-container input{margin-left:6px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .option-image{width:24px;height:24px;margin-right:8px;object-fit:cover;flex-shrink:0}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-option{padding-left:16px!important}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}.selected-items--below{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}.selected-items--below ui-tag{margin:0;--ui-tag-max-width: 400px}.selected-items--below .clear-all{background:none;border:none;padding:4px 8px;cursor:pointer;color:#000;font-weight:500;font-size:12px;line-height:16px;text-decoration:underline}.selected-items--below .clear-all:disabled{cursor:not-allowed;opacity:.5}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { itemsList: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemsList", required: false }] }], suggestionsList: [{ type: i0.Input, args: [{ isSignal: true, alias: "suggestionsList", required: false }] }], groupsList: [{ type: i0.Input, args: [{ isSignal: true, alias: "groupsList", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], allowAdd: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAdd", required: false }] }], textField: [{ type: i0.Input, args: [{ isSignal: true, alias: "textField", required: false }] }], valueField: [{ type: i0.Input, args: [{ isSignal: true, alias: "valueField", required: false }] }], imageField: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageField", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], testId: [{ type: i0.Input, args: [{ isSignal: true, alias: "testId", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], minCharactersSearch: [{ type: i0.Input, args: [{ isSignal: true, alias: "minCharactersSearch", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: true }] }], showBottomContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBottomContent", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], virtualScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "virtualScroll", required: false }] }], compareWith: [{ type: i0.Input, args: [{ isSignal: true, alias: "compareWith", required: false }] }], dropdownPanelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropdownPanelClass", required: false }] }], panelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelPosition", required: false }] }], hideSelectedSection: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideSelectedSection", required: false }] }], userAdditionsGroupLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "userAdditionsGroupLabel", required: false }] }], closeOnScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "closeOnScroll", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], allowUserInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowUserInput", required: false }] }], clearable: [{ type: i0.Input, args: [{ isSignal: true, alias: "clearable", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], dynamicFilterLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicFilterLoading", required: false }] }], dynamicFilteredList: [{ type: i0.Input, args: [{ isSignal: true, alias: "dynamicFilteredList", required: false }] }], infiniteScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScroll", required: false }] }], hasMoreOptionsForInfiniteScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasMoreOptionsForInfiniteScroll", required: false }] }], itemValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "itemValue", required: false }] }], formErrorConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "formErrorConfig", required: false }] }], errors: [{ type: i0.Input, args: [{ isSignal: true, alias: "errors", required: false }] }], addOptionPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "addOptionPosition", required: false }] }], tagsPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagsPosition", required: false }] }], tagIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "tagIcon", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], searchTextChange: [{ type: i0.Output, args: ["searchTextChange"] }], blur: [{ type: i0.Output, args: ["blur"] }], focus: [{ type: i0.Output, args: ["focus"] }], scrollViewportBottomReached: [{ type: i0.Output, args: ["scrollViewportBottomReached"] }], scrollViewportBottomReachedFiltered: [{ type: i0.Output, args: ["scrollViewportBottomReachedFiltered"] }], formFieldElement: [{
-                type: ViewChild,
-                args: ['formField']
-            }], tagContainer: [{
-                type: ViewChild,
-                args: ['tagContainer']
-            }], measureElRef: [{
-                type: ViewChild,
-                args: ['measureEl']
-            }], overflowDir: [{
-                type: ViewChild,
-                args: ['overflow']
-            }], autocomplete: [{
-                type: ViewChild,
-                args: ['trigger']
-            }], cdkViewport: [{
-                type: ViewChild,
-                args: [CdkVirtualScrollViewport, { static: false }]
-            }], matAutocomplete: [{
-                type: ViewChild,
-                args: ['autocomplete']
-            }], matInput: [{
-                type: ViewChild,
-                args: ['matInput']
-            }], tagSuffix: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AutocompleteTagSuffixDirective), { isSignal: true }] }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var AutocompleteValueManager = class AutocompleteValueManager {
+	constructor() {
+		this.type = signal("multi", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+		this.textField = signal("", ...ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []);
+		this.valueField = signal("", ...ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []);
+		this.compareWith = signal(void 0, ...ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []);
+		this.value = signal(null, ...ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []);
+		this.isSingle = computed(() => this.type() === Autocomplete.SINGLE, ...ngDevMode ? [{ debugName: "isSingle" }] : /* istanbul ignore next */ []);
+		this.displayValue = computed(() => {
+			const type = this.type();
+			const value = this.value();
+			const textField = this.textField();
+			const isSingle = type === Autocomplete.SINGLE;
+			if (!value || AutocompleteV2Utils.isArray(value) && !value.length) return "";
+			if (isSingle) {
+				const display = AutocompleteV2Utils.isArray(value) ? value[0] : value;
+				return AutocompleteV2Utils.transformDisplayValue(display, textField);
+			}
+			return " ";
+		}, ...ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []);
+		this.onChangeFn = () => {};
+		this.onTouchedFn = () => {};
+	}
+	registerOnChange(fn) {
+		this.onChangeFn = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouchedFn = fn;
+	}
+	notifyChange() {
+		this.onChangeFn(this.value());
+	}
+	markAsTouched() {
+		this.onTouchedFn();
+	}
+	writeValue(v) {
+		if (v === null || v === void 0) this.value.set(this.isSingle() ? null : []);
+		else this.value.set(v);
+	}
+	addValue(newValue) {
+		if (!this.isSingle() && !this.value()) this.value.set([]);
+		const compareWith = this.compareWith();
+		const currentArray = AutocompleteV2Utils.isArray(this.value()) ? this.value() : [];
+		const foundDuplicate = compareWith ? currentArray.find((v) => compareWith(v, newValue)) : AutocompleteV2Utils.findDuplicate(currentArray, newValue, this.textField());
+		if (!this.isSingle()) this.value.set(foundDuplicate ? currentArray.filter((v) => compareWith ? !compareWith(v, foundDuplicate) : v !== foundDuplicate) : [...currentArray, newValue]);
+		else this.value.set(newValue);
+	}
+	removeValue(option) {
+		const compareWith = this.compareWith();
+		const currentValue = AutocompleteV2Utils.isArray(this.value()) ? this.value() : [];
+		const foundValue = currentValue.find((v) => compareWith ? compareWith(v, option) : v === option);
+		if (foundValue) this.value.set(currentValue.filter((v) => compareWith ? !compareWith(v, option) : v !== option));
+		return foundValue;
+	}
+	clear() {
+		this.value.set(AutocompleteV2Utils.isArray(this.value()) ? [] : null);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AutocompleteValueManager,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AutocompleteValueManager
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AutocompleteValueManager,
+	decorators: [{ type: Injectable }]
+});
+var InfiniteScrollDirective = class InfiniteScrollDirective {
+	constructor() {
+		this.viewport = null;
+		this.scrollSub = null;
+		this.destroyRef = inject(DestroyRef);
+		this.scrollListener = (event) => {
+			const target = event.target;
+			const trigger = this.panelTrigger;
+			if (!trigger) return;
+			const isNotAutocompleteScroll = !target?.id?.includes("mat-autocomplete-") && !target?.parentElement?.id?.includes("mat-autocomplete-") && !target?.classList?.contains("mat-mdc-autocomplete-trigger");
+			if (trigger.panelOpen && isNotAutocompleteScroll) trigger.closePanel();
+		};
+		this.enabled = false;
+		this.closeOnScroll = false;
+		this.panelTrigger = null;
+		this.onBottomReached = null;
+	}
+	attachViewport(viewport) {
+		this.detachViewport();
+		if (!viewport) return;
+		this.viewport = viewport;
+		if (this.enabled) this.scrollSub = viewport.elementScrolled().pipe(map(() => viewport.measureScrollOffset("bottom")), filter((offset) => offset < viewport.getViewportSize() * .2), throttleTime(200), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+			this.onBottomReached?.();
+		});
+	}
+	detachViewport() {
+		this.scrollSub?.unsubscribe();
+		this.scrollSub = null;
+		this.viewport = null;
+	}
+	scrollToTop() {
+		if (this.viewport) {
+			this.viewport.scrollToIndex(0);
+			this.viewport.checkViewportSize();
+		}
+	}
+	startCloseOnScroll() {
+		if (this.closeOnScroll) window.addEventListener("scroll", this.scrollListener, true);
+	}
+	ngOnDestroy() {
+		this.detachViewport();
+		window.removeEventListener("scroll", this.scrollListener, true);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: InfiniteScrollDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Injectable
+		});
+	}
+	static {
+		this.ɵprov = i0.ɵɵngDeclareInjectable({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: InfiniteScrollDirective
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: InfiniteScrollDirective,
+	decorators: [{ type: Injectable }]
+});
+var AutocompleteV2Component = class AutocompleteV2Component {
+	set cdkViewport(viewport) {
+		this.scrollManager.enabled = this.infiniteScroll();
+		this.scrollManager.attachViewport(viewport);
+	}
+	constructor() {
+		this.itemsList = input([], ...ngDevMode ? [{ debugName: "itemsList" }] : /* istanbul ignore next */ []);
+		this.suggestionsList = input([], ...ngDevMode ? [{ debugName: "suggestionsList" }] : /* istanbul ignore next */ []);
+		this.groupsList = input([], ...ngDevMode ? [{ debugName: "groupsList" }] : /* istanbul ignore next */ []);
+		this.disabled = input(false, ...ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []);
+		this.allowAdd = input(true, ...ngDevMode ? [{ debugName: "allowAdd" }] : /* istanbul ignore next */ []);
+		this.textField = input("", ...ngDevMode ? [{ debugName: "textField" }] : /* istanbul ignore next */ []);
+		this.valueField = input("", ...ngDevMode ? [{ debugName: "valueField" }] : /* istanbul ignore next */ []);
+		this.imageField = input("", ...ngDevMode ? [{ debugName: "imageField" }] : /* istanbul ignore next */ []);
+		this.label = input("", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
+		this.placeholder = input("", ...ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []);
+		this.testId = input(null, ...ngDevMode ? [{ debugName: "testId" }] : /* istanbul ignore next */ []);
+		this.type = input("multi", ...ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []);
+		this.minCharactersSearch = input(3, ...ngDevMode ? [{ debugName: "minCharactersSearch" }] : /* istanbul ignore next */ []);
+		this.variant = input.required(...ngDevMode ? [{ debugName: "variant" }] : /* istanbul ignore next */ []);
+		this.showBottomContent = input(true, ...ngDevMode ? [{ debugName: "showBottomContent" }] : /* istanbul ignore next */ []);
+		this.required = input(void 0, ...ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []);
+		this.virtualScroll = input(false, {
+			...ngDevMode ? { debugName: "virtualScroll" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.compareWith = input(void 0, ...ngDevMode ? [{ debugName: "compareWith" }] : /* istanbul ignore next */ []);
+		this.dropdownPanelClass = input("", ...ngDevMode ? [{ debugName: "dropdownPanelClass" }] : /* istanbul ignore next */ []);
+		this.panelPosition = input("auto", ...ngDevMode ? [{ debugName: "panelPosition" }] : /* istanbul ignore next */ []);
+		this.hideSelectedSection = input(false, {
+			...ngDevMode ? { debugName: "hideSelectedSection" } : /* istanbul ignore next */ {},
+			transform: booleanAttribute
+		});
+		this.userAdditionsGroupLabel = input("", ...ngDevMode ? [{ debugName: "userAdditionsGroupLabel" }] : /* istanbul ignore next */ []);
+		this.closeOnScroll = input(false, ...ngDevMode ? [{ debugName: "closeOnScroll" }] : /* istanbul ignore next */ []);
+		this.size = input("medium", ...ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []);
+		this.allowUserInput = input(true, ...ngDevMode ? [{ debugName: "allowUserInput" }] : /* istanbul ignore next */ []);
+		this.clearable = input(true, ...ngDevMode ? [{ debugName: "clearable" }] : /* istanbul ignore next */ []);
+		this.maxLength = input(void 0, ...ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []);
+		this.dynamicFilterLoading = input(false, ...ngDevMode ? [{ debugName: "dynamicFilterLoading" }] : /* istanbul ignore next */ []);
+		this.dynamicFilteredList = input(null, ...ngDevMode ? [{ debugName: "dynamicFilteredList" }] : /* istanbul ignore next */ []);
+		this.infiniteScroll = input(false, ...ngDevMode ? [{ debugName: "infiniteScroll" }] : /* istanbul ignore next */ []);
+		this.hasMoreOptionsForInfiniteScroll = input(true, ...ngDevMode ? [{ debugName: "hasMoreOptionsForInfiniteScroll" }] : /* istanbul ignore next */ []);
+		this.itemValue = input(null, ...ngDevMode ? [{ debugName: "itemValue" }] : /* istanbul ignore next */ []);
+		this.formErrorConfig = input({}, ...ngDevMode ? [{ debugName: "formErrorConfig" }] : /* istanbul ignore next */ []);
+		this.errors = input([], ...ngDevMode ? [{ debugName: "errors" }] : /* istanbul ignore next */ []);
+		this.addOptionPosition = input("bottom", ...ngDevMode ? [{ debugName: "addOptionPosition" }] : /* istanbul ignore next */ []);
+		this.tagsPosition = input("inside", ...ngDevMode ? [{ debugName: "tagsPosition" }] : /* istanbul ignore next */ []);
+		this.tagIcon = input("", ...ngDevMode ? [{ debugName: "tagIcon" }] : /* istanbul ignore next */ []);
+		this.selectionChange = output();
+		this.searchTextChange = output();
+		this.blur = output();
+		this.focus = output();
+		this.scrollViewportBottomReached = output();
+		this.scrollViewportBottomReachedFiltered = output();
+		this.tagSuffix = contentChild(AutocompleteTagSuffixDirective, ...ngDevMode ? [{ debugName: "tagSuffix" }] : /* istanbul ignore next */ []);
+		this.valueManager = inject(AutocompleteValueManager);
+		this.filterService = inject(AutocompleteFilterService);
+		this.scrollManager = inject(InfiniteScrollDirective);
+		this.cdr = inject(ChangeDetectorRef);
+		this.focusMonitor = inject(FocusMonitor);
+		this.destroyRef = inject(DestroyRef);
+		this.ngZone = inject(NgZone);
+		this.ngControl = inject(NgControl, {
+			optional: true,
+			self: true
+		});
+		this.applicationTheme = inject("CANOPYUI_DEFAULT_APPLICATION_THEME", { optional: true }) ?? "light";
+		this.inputValue = signal("", ...ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []);
+		this.isInputFocus = signal(false, ...ngDevMode ? [{ debugName: "isInputFocus" }] : /* istanbul ignore next */ []);
+		this.autocompleteType = Autocomplete;
+		this.flatItemsList = computed(() => {
+			const suggestions = this.suggestionsList();
+			const valField = this.valueField();
+			const flat = AutocompleteV2Utils.excludeSuggestions(this.itemsList(), suggestions, valField);
+			const grouped = this.groupsList().flatMap((g) => AutocompleteV2Utils.excludeSuggestions(g.items, suggestions, valField));
+			return [...flat, ...grouped];
+		}, ...ngDevMode ? [{ debugName: "flatItemsList" }] : /* istanbul ignore next */ []);
+		this.groupedItemsList = computed(() => {
+			const suggestions = this.suggestionsList();
+			const valField = this.valueField();
+			return this.groupsList().map((group) => ({
+				groupName: group.groupName,
+				items: AutocompleteV2Utils.excludeSuggestions(group.items, suggestions, valField)
+			}));
+		}, ...ngDevMode ? [{ debugName: "groupedItemsList" }] : /* istanbul ignore next */ []);
+		this._isDisabled = signal(false, ...ngDevMode ? [{ debugName: "_isDisabled" }] : /* istanbul ignore next */ []);
+		this.userAddedItems = signal([], ...ngDevMode ? [{ debugName: "userAddedItems" }] : /* istanbul ignore next */ []);
+		this.translationContext = "AUTOCOMPLETE.";
+		this.utils = AutocompleteV2Utils;
+		this.keyboardFocused = signal(false, ...ngDevMode ? [{ debugName: "keyboardFocused" }] : /* istanbul ignore next */ []);
+		this.isAlreadyAdded = computed(() => {
+			const compareWith = this.compareWith();
+			const val = this.valueManager.value();
+			const inputVal = this.inputValue();
+			if (!inputVal || inputVal === " ") return false;
+			const valArray = AutocompleteV2Utils.isArray(val) ? val : [];
+			return Boolean(compareWith ? valArray.find((v) => compareWith(v, inputVal)) : AutocompleteV2Utils.findDuplicate(valArray, inputVal, this.textField()));
+		}, ...ngDevMode ? [{ debugName: "isAlreadyAdded" }] : /* istanbul ignore next */ []);
+		this.tagsBelow = computed(() => this.tagsPosition() === "below" && this.type() === Autocomplete.MULTI, ...ngDevMode ? [{ debugName: "tagsBelow" }] : /* istanbul ignore next */ []);
+		this.suppressPlaceholder = computed(() => !this.tagsBelow() && Boolean(this.valueManager.value()?.length), ...ngDevMode ? [{ debugName: "suppressPlaceholder" }] : /* istanbul ignore next */ []);
+		this.showClearButton = computed(() => {
+			if (this.tagsBelow()) return false;
+			const type = this.type();
+			const val = this.valueManager.value();
+			if (type === Autocomplete.SINGLE) {
+				const hasValue = Array.isArray(val) ? val.length > 0 : val ? Object.keys(val).length > 0 : false;
+				return this.clearable() && hasValue;
+			}
+			return Array.isArray(val) && val.length > 1;
+		}, ...ngDevMode ? [{ debugName: "showClearButton" }] : /* istanbul ignore next */ []);
+		this.tagIcons = computed(() => {
+			const icon = this.tagIcon();
+			const value = this.valueManager.value();
+			if (!AutocompleteV2Utils.isArray(value)) return [];
+			return value.map((item) => typeof icon === "function" ? icon(item) : icon);
+		}, ...ngDevMode ? [{ debugName: "tagIcons" }] : /* istanbul ignore next */ []);
+		this.safeErrors = computed(() => this.errors()?.filter(Boolean) ?? [], ...ngDevMode ? [{ debugName: "safeErrors" }] : /* istanbul ignore next */ []);
+		this.controlInvalid = signal(false, ...ngDevMode ? [{ debugName: "controlInvalid" }] : /* istanbul ignore next */ []);
+		this.hasError = computed(() => {
+			if (this.ngControl) return this.controlInvalid();
+			return this.safeErrors().length > 0;
+		}, ...ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []);
+		this.hiddenItemsTooltip = computed(() => {
+			const value = this.valueManager.value();
+			const visibleCount = this.overflowDir?.visibleCount() ?? Infinity;
+			if (!AutocompleteV2Utils.isArray(value)) return "";
+			const tf = this.textField();
+			return value.slice(visibleCount).map((item) => tf ? item[tf] : item).join("\n");
+		}, ...ngDevMode ? [{ debugName: "hiddenItemsTooltip" }] : /* istanbul ignore next */ []);
+		this.trackByFn = (index, value) => value;
+		this.trackByItem = (_index, item) => {
+			const vf = this.valueField();
+			return vf ? item?.[vf] : item;
+		};
+		if (this.ngControl) this.ngControl.valueAccessor = this;
+		effect(() => {
+			this.filterService.setDynamicResults(this.dynamicFilteredList(), this.dynamicFilterLoading());
+		});
+		effect(() => {
+			const disabled = this.disabled();
+			if (this.ngControl) {
+				if (isDevMode() && disabled) console.warn("[ui-autocomplete-v2] [disabled] is set alongside a form control. Use the form control disabled state (disable()/enable()) instead.");
+				return;
+			}
+			this._isDisabled.set(disabled);
+		});
+		effect(() => this.valueManager.type.set(this.type()));
+		effect(() => this.valueManager.textField.set(this.textField()));
+		effect(() => this.valueManager.valueField.set(this.valueField()));
+		effect(() => this.valueManager.compareWith.set(this.compareWith()));
+		effect(() => this.filterService.textField.set(this.textField()));
+		effect(() => this.filterService.flatItems.set(this.flatItemsList()));
+		effect(() => this.filterService.groupsList.set(this.groupsList()));
+		effect(() => this.filterService.suggestions.set(this.suggestionsList()));
+		effect(() => {
+			const v = this.itemValue();
+			if (this.ngControl) {
+				if (isDevMode() && v !== null) console.warn("[ui-autocomplete-v2] [itemValue] is set alongside a form control. Use ngModel or formControl instead.");
+				return;
+			}
+			this.valueManager.value.set(AutocompleteV2Utils.isArray(v) ? v : v ? [v] : []);
+			untracked(() => {
+				if (!this.tagsBelow()) this.inputValue.set(this.valueManager.displayValue());
+			});
+			this.cdr.markForCheck();
+		});
+		effect(() => {
+			this.valueManager.value();
+			untracked(() => {
+				if (this.type() !== Autocomplete.LARGE) this.overflowDir?.measure();
+			});
+		});
+	}
+	ngDoCheck() {
+		if (this.ngControl) {
+			const invalid = Boolean(this.ngControl.invalid && this.ngControl.touched);
+			if (this.controlInvalid() !== invalid) this.controlInvalid.set(invalid);
+			if (this.ngControl.touched || this.ngControl.errors) this.cdr.markForCheck();
+		}
+	}
+	ngAfterViewInit() {
+		if (!document.body.style.getPropertyValue("--ui-autocomplete-option-color")) document.body.style.setProperty("--ui-autocomplete-option-color", "#FFF2FC");
+		if (this.type() !== Autocomplete.LARGE) this.overflowDir?.setupObserver(".input-container");
+		this.scrollManager.enabled = this.infiniteScroll();
+		this.scrollManager.closeOnScroll = this.closeOnScroll();
+		this.scrollManager.panelTrigger = this.autocomplete;
+		this.scrollManager.onBottomReached = () => this.onScrollBottom();
+		this.scrollManager.startCloseOnScroll();
+		this.focusMonitor.monitor(this.matInput).pipe(takeUntilDestroyed(this.destroyRef)).subscribe((origin) => this.ngZone.run(() => {
+			this.keyboardFocused.set(origin === "keyboard");
+		}));
+		this.matInput.nativeElement.onkeydown = this.onKeydown.bind(this);
+	}
+	ngOnDestroy() {
+		this.scrollManager.ngOnDestroy();
+		this.focusMonitor.stopMonitoring(this.matInput);
+		if (this.matInput?.nativeElement) this.matInput.nativeElement.onkeydown = null;
+	}
+	registerOnChange(fn) {
+		this.valueManager.registerOnChange(fn);
+	}
+	registerOnTouched(fn) {
+		this.valueManager.registerOnTouched(fn);
+	}
+	setDisabledState(isDisabled) {
+		this._isDisabled.set(isDisabled);
+		this.cdr.markForCheck();
+	}
+	writeValue(value) {
+		this.valueManager.type.set(this.type());
+		this.valueManager.textField.set(this.textField());
+		this.valueManager.valueField.set(this.valueField());
+		this.valueManager.compareWith.set(this.compareWith());
+		this.valueManager.writeValue(value);
+		if (this.userAdditionsGroupLabel()) this.userAddedItems.update((items) => {
+			const v = this.valueManager.value();
+			if (!AutocompleteV2Utils.isArray(v) || v.length === 0) return [];
+			const vf = this.valueField();
+			const tf = this.textField();
+			return items.filter((i) => v.some((x) => vf ? x[vf] === i[vf] : tf ? x[tf] === i[tf] : x === i));
+		});
+		this.inputValue.set(this.tagsBelow() ? "" : this.valueManager.displayValue());
+		this.cdr.markForCheck();
+	}
+	get isGrouped() {
+		return this.groupsList().length > 0;
+	}
+	onOptionSelected(event) {
+		const inputValue = event.option.value;
+		const itemValue = AutocompleteV2Utils.createValueItem(inputValue, this.textField(), this.valueField());
+		const lengthBefore = AutocompleteV2Utils.isArray(this.valueManager.value()) ? this.valueManager.value().length : 0;
+		this.valueManager.addValue(itemValue);
+		if ((AutocompleteV2Utils.isArray(this.valueManager.value()) ? this.valueManager.value().length : 0) > lengthBefore && typeof event.option.value === "string" && this.userAdditionsGroupLabel()) {
+			const vf = this.valueField();
+			const tf = this.textField();
+			if (!(vf ? this.userAddedItems().some((i) => i[vf] === itemValue[vf]) : tf ? this.userAddedItems().some((i) => i[tf] === itemValue[tf]) : this.userAddedItems().some((i) => i === itemValue))) this.userAddedItems.update((items) => [...items, itemValue]);
+		}
+		queueMicrotask(() => {
+			if (this.type() !== this.autocompleteType.SINGLE) this.inputValue.set("");
+			else this.inputValue.set(this.valueManager.displayValue());
+			this.cdr.markForCheck();
+		});
+		this.onUpdate();
+		this.valueManager.markAsTouched();
+	}
+	onOptionRemoved(option) {
+		setTimeout(() => this.autocomplete.closePanel(), 0);
+		const foundValue = this.valueManager.removeValue(option);
+		if (foundValue) this.matAutocomplete.options.forEach((matOption) => {
+			const vf = this.valueField();
+			if (vf && matOption.value?.[vf] === foundValue[vf]) matOption.deselect();
+		});
+		if (this.userAdditionsGroupLabel()) {
+			const vf = this.valueField();
+			this.userAddedItems.update((items) => items.filter((item) => vf ? item[vf] !== option[vf] : item !== option));
+		}
+		if (!this.valueManager.value()?.length) this.inputValue.set("");
+		this.onUpdate();
+		this.valueManager.markAsTouched();
+	}
+	onTagActivate(event) {
+		const target = event.target;
+		if (this._isDisabled() || target.closest(".delete-icon")) return;
+		if (event instanceof KeyboardEvent && !target.classList.contains("tag-container")) return;
+		const control = event.currentTarget.querySelector(".tag-suffix button, .tag-suffix [role=\"button\"], .tag-suffix a[href]");
+		if (control) {
+			event.preventDefault();
+			control.click();
+		}
+	}
+	onInputChange(event) {
+		const text = event.target.value;
+		this.filterService.search(text, this.minCharactersSearch());
+		if (text.length >= this.minCharactersSearch()) this.searchTextChange.emit(text);
+	}
+	onClear() {
+		this.inputValue.set("");
+		this.valueManager.clear();
+		this.userAddedItems.set([]);
+		this.onUpdate();
+		this.matAutocomplete?.options.forEach((option) => option.deselect());
+		this.valueManager.markAsTouched();
+	}
+	onBlur() {
+		setTimeout(() => {
+			this.filterService.clearSearch();
+			this.isInputFocus.set(false);
+			this.inputValue.set(this.tagsBelow() ? "" : this.valueManager.displayValue());
+			this.valueManager.markAsTouched();
+			this.blur.emit();
+			this.cdr.markForCheck();
+		}, 0);
+	}
+	onPanelOpened() {
+		this.scrollManager.scrollToTop();
+	}
+	onScrollBottom() {
+		if (this.filterService.searchText$.value) this.scrollViewportBottomReachedFiltered.emit();
+		else this.scrollViewportBottomReached.emit();
+	}
+	onFocus() {
+		this.isInputFocus.set(true);
+		const val = this.inputValue();
+		if (typeof val === "string" && val.match(/^\s+/gm)) this.inputValue.set(val.trimStart());
+		this.focus.emit();
+	}
+	onUpdate() {
+		this.filterService.clearSearch();
+		this.valueManager.notifyChange();
+		const val = this.valueManager.value();
+		if (val !== null) this.selectionChange.emit(val);
+	}
+	get isDropdown() {
+		return this.variant() === DropdownVariation.DROPDOWN;
+	}
+	onChevronClick(autocomplete) {
+		if (autocomplete.isOpen) setTimeout(() => {
+			this.autocomplete.closePanel();
+		}, 0);
+	}
+	onKeydown($event) {
+		const optionHeight = 48;
+		if ($event.key === IKeyboardEvent.HOME) this.matAutocomplete._keyManager.setFirstItemActive();
+		else if ($event.key === IKeyboardEvent.END) this.matAutocomplete._keyManager.setLastItemActive();
+		else if ($event.key === IKeyboardEvent.PAGE_DOWN) {
+			this.matAutocomplete._keyManager.setNextItemActive();
+			this.matAutocomplete._keyManager.setNextItemActive();
+			this.matAutocomplete._keyManager.setNextItemActive();
+		} else if ($event.key === IKeyboardEvent.PAGE_UP) {
+			this.matAutocomplete._keyManager.setPreviousItemActive();
+			this.matAutocomplete._keyManager.setPreviousItemActive();
+			this.matAutocomplete._keyManager.setPreviousItemActive();
+		}
+		this.matAutocomplete._setScrollTop((this.matAutocomplete._keyManager.activeItemIndex ?? 0) * optionHeight);
+	}
+	getVirtualScrollHeight(itemCount) {
+		const itemHeight = 48;
+		const maxHeight = 200;
+		const minHeight = 48;
+		const calculatedHeight = itemCount * itemHeight;
+		return Math.min(Math.max(calculatedHeight, minHeight), maxHeight);
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AutocompleteV2Component,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: AutocompleteV2Component,
+			isStandalone: true,
+			selector: "ui-autocomplete-v2",
+			inputs: {
+				itemsList: {
+					classPropertyName: "itemsList",
+					publicName: "itemsList",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				suggestionsList: {
+					classPropertyName: "suggestionsList",
+					publicName: "suggestionsList",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				groupsList: {
+					classPropertyName: "groupsList",
+					publicName: "groupsList",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				disabled: {
+					classPropertyName: "disabled",
+					publicName: "disabled",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				allowAdd: {
+					classPropertyName: "allowAdd",
+					publicName: "allowAdd",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				textField: {
+					classPropertyName: "textField",
+					publicName: "textField",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				valueField: {
+					classPropertyName: "valueField",
+					publicName: "valueField",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				imageField: {
+					classPropertyName: "imageField",
+					publicName: "imageField",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				label: {
+					classPropertyName: "label",
+					publicName: "label",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				placeholder: {
+					classPropertyName: "placeholder",
+					publicName: "placeholder",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				testId: {
+					classPropertyName: "testId",
+					publicName: "testId",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				type: {
+					classPropertyName: "type",
+					publicName: "type",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				minCharactersSearch: {
+					classPropertyName: "minCharactersSearch",
+					publicName: "minCharactersSearch",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				variant: {
+					classPropertyName: "variant",
+					publicName: "variant",
+					isSignal: true,
+					isRequired: true,
+					transformFunction: null
+				},
+				showBottomContent: {
+					classPropertyName: "showBottomContent",
+					publicName: "showBottomContent",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				required: {
+					classPropertyName: "required",
+					publicName: "required",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				virtualScroll: {
+					classPropertyName: "virtualScroll",
+					publicName: "virtualScroll",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				compareWith: {
+					classPropertyName: "compareWith",
+					publicName: "compareWith",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dropdownPanelClass: {
+					classPropertyName: "dropdownPanelClass",
+					publicName: "dropdownPanelClass",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				panelPosition: {
+					classPropertyName: "panelPosition",
+					publicName: "panelPosition",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hideSelectedSection: {
+					classPropertyName: "hideSelectedSection",
+					publicName: "hideSelectedSection",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				userAdditionsGroupLabel: {
+					classPropertyName: "userAdditionsGroupLabel",
+					publicName: "userAdditionsGroupLabel",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				closeOnScroll: {
+					classPropertyName: "closeOnScroll",
+					publicName: "closeOnScroll",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				size: {
+					classPropertyName: "size",
+					publicName: "size",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				allowUserInput: {
+					classPropertyName: "allowUserInput",
+					publicName: "allowUserInput",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				clearable: {
+					classPropertyName: "clearable",
+					publicName: "clearable",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				maxLength: {
+					classPropertyName: "maxLength",
+					publicName: "maxLength",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dynamicFilterLoading: {
+					classPropertyName: "dynamicFilterLoading",
+					publicName: "dynamicFilterLoading",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				dynamicFilteredList: {
+					classPropertyName: "dynamicFilteredList",
+					publicName: "dynamicFilteredList",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				infiniteScroll: {
+					classPropertyName: "infiniteScroll",
+					publicName: "infiniteScroll",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				hasMoreOptionsForInfiniteScroll: {
+					classPropertyName: "hasMoreOptionsForInfiniteScroll",
+					publicName: "hasMoreOptionsForInfiniteScroll",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				itemValue: {
+					classPropertyName: "itemValue",
+					publicName: "itemValue",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				formErrorConfig: {
+					classPropertyName: "formErrorConfig",
+					publicName: "formErrorConfig",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				errors: {
+					classPropertyName: "errors",
+					publicName: "errors",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				addOptionPosition: {
+					classPropertyName: "addOptionPosition",
+					publicName: "addOptionPosition",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tagsPosition: {
+					classPropertyName: "tagsPosition",
+					publicName: "tagsPosition",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				},
+				tagIcon: {
+					classPropertyName: "tagIcon",
+					publicName: "tagIcon",
+					isSignal: true,
+					isRequired: false,
+					transformFunction: null
+				}
+			},
+			outputs: {
+				selectionChange: "selectionChange",
+				searchTextChange: "searchTextChange",
+				blur: "blur",
+				focus: "focus",
+				scrollViewportBottomReached: "scrollViewportBottomReached",
+				scrollViewportBottomReachedFiltered: "scrollViewportBottomReachedFiltered"
+			},
+			host: { properties: { "attr.theme": "applicationTheme" } },
+			providers: [
+				AutocompleteValueManager,
+				AutocompleteFilterService,
+				InfiniteScrollDirective
+			],
+			queries: [{
+				propertyName: "tagSuffix",
+				first: true,
+				predicate: AutocompleteTagSuffixDirective,
+				descendants: true,
+				isSignal: true
+			}],
+			viewQueries: [
+				{
+					propertyName: "formFieldElement",
+					first: true,
+					predicate: ["formField"],
+					descendants: true
+				},
+				{
+					propertyName: "tagContainer",
+					first: true,
+					predicate: ["tagContainer"],
+					descendants: true
+				},
+				{
+					propertyName: "measureElRef",
+					first: true,
+					predicate: ["measureEl"],
+					descendants: true
+				},
+				{
+					propertyName: "overflowDir",
+					first: true,
+					predicate: ["overflow"],
+					descendants: true
+				},
+				{
+					propertyName: "autocomplete",
+					first: true,
+					predicate: ["trigger"],
+					descendants: true
+				},
+				{
+					propertyName: "cdkViewport",
+					first: true,
+					predicate: CdkVirtualScrollViewport,
+					descendants: true
+				},
+				{
+					propertyName: "matAutocomplete",
+					first: true,
+					predicate: ["autocomplete"],
+					descendants: true
+				},
+				{
+					propertyName: "matInput",
+					first: true,
+					predicate: ["matInput"],
+					descendants: true
+				}
+			],
+			ngImport: i0,
+			template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ disabled: _isDisabled() }\">\n    <mat-form-field\n      [color]=\"hasError() ? 'warn' : 'accent'\"\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{\n        'large-size': type() === autocompleteType.LARGE,\n        'hide-bottom-content': !showBottomContent(),\n        'keyboard-focused': keyboardFocused(),\n        'has-label': !!label(),\n      }\"\n    >\n      @if (label()) {\n        <mat-label\n          >{{ label() }}\n          @if (required()) {\n            <span>*</span>\n          }\n        </mat-label>\n      }\n      <div\n        #formField\n        class=\"input-container\"\n        [class.has-multiple-selections]=\"\n          type() === autocompleteType.LARGE &&\n          utils.isArray(valueManager.value()) &&\n          $any(valueManager.value()).length > 1\n        \"\n        [class.autocomplete-variant]=\"type() === autocompleteType.LARGE && !isDropdown\"\n      >\n        @if (textField() ? $any(valueManager.value())?.[textField()] : $any(valueManager.value()) === inputValue()) {\n          <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n            ('SELECTED' | uiTranslate | async) + ' ' + inputValue()\n          }}</span>\n        }\n\n        <input\n          [attr.data-testid]=\"testId() ?? 'autocomplete-v2-input'\"\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [attr.maxlength]=\"maxLength() !== null && maxLength() !== undefined ? maxLength() : null\"\n          [uiPreventInput]=\"!allowUserInput()\"\n          [disabled]=\"_isDisabled()\"\n          [ngClass]=\"{\n            'unset-margin': valueManager.value() && type() === autocompleteType.LARGE,\n            'no-caret': !allowUserInput(),\n          }\"\n          (blur)=\"onBlur()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"\n            (translationContext + 'SELECTED' | uiTranslate | async) +\n            ' ' +\n            (valueManager.value() | transformItem: textField() : true)\n          \"\n          matInput\n          [placeholder]=\"suppressPlaceholder() ? '' : placeholder()\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          [matAutocompletePosition]=\"panelPosition()\"\n          (input)=\"onInputChange($event)\"\n          [ngModel]=\"inputValue()\"\n          (ngModelChange)=\"inputValue.set($event)\"\n        />\n        <!-- Hidden measurement container: always in DOM, renders ALL tags for width measurement -->\n        @if (!tagsBelow() && type() !== autocompleteType.SINGLE && utils.isArray(valueManager.value())) {\n          <div class=\"selected-items measurement-container\" #measureEl>\n            @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n              <ui-tag\n                class=\"value-tag\"\n                [id]=\"'measure-tag-' + i\"\n                [label]=\"valueItem | transformItem: textField()\"\n                [allowClose]=\"true\"\n                [isDisabled]=\"disabled()\"\n                [applicationTheme]=\"applicationTheme\"\n              ></ui-tag>\n            }\n          </div>\n        }\n\n        @if (\n          !tagsBelow() &&\n          ((type() === autocompleteType.LARGE && valueManager.value()) ||\n            (!(inputValue() && isInputFocus()) && valueManager.value() && type() !== autocompleteType.SINGLE))\n        ) {\n          <!-- Visible container: only renders tags that fit. Hidden until first measurement to prevent flash. -->\n          <div\n            class=\"selected-items\"\n            #tagContainer\n            uiAutocompleteOverflowDetect\n            #overflow=\"autocompleteOverflowDetect\"\n            [measureContainer]=\"$safeNavigationMigration(measureElRef?.nativeElement)\"\n            [class.measured]=\"\n              type() === autocompleteType.LARGE || type() === autocompleteType.SINGLE || overflow.hasMeasured()\n            \"\n          >\n            @if (size() === 'small' && $any(valueManager.value()).length > 1) {\n              <div class=\"selected-count\">\n                {{\n                  translationContext + 'SELECTED_AMOUNT'\n                    | uiTranslate: { numberSelected: valueManager.value()!.length }\n                    | async\n                }}\n              </div>\n            } @else {\n              @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n                @if (i < overflow.visibleCount()) {\n                  <ui-tag\n                    class=\"value-tag\"\n                    [id]=\"'ui-tag-' + i\"\n                    [label]=\"valueItem | transformItem: textField()\"\n                    [allowClose]=\"true\"\n                    [isDisabled]=\"disabled()\"\n                    [applicationTheme]=\"applicationTheme\"\n                    [ngStyle]=\"\n                      type() !== autocompleteType.LARGE\n                        ? { '--tag-max-width': overflow.tagMaxWidth() ? overflow.tagMaxWidth() + 'px' : 'fit-content' }\n                        : {}\n                    \"\n                    (close)=\"onOptionRemoved(valueItem)\"\n                  ></ui-tag>\n                }\n              }\n              @if (overflow.overflowCount() > 0) {\n                <div class=\"overlap-count\" [matTooltip]=\"hiddenItemsTooltip()\">\n                  <ui-tag\n                    [applicationTheme]=\"applicationTheme\"\n                    [isDisabled]=\"disabled()\"\n                    [label]=\"'+' + overflow.overflowCount()\"\n                  ></ui-tag>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      @if (showClearButton()) {\n        <ui-icon\n          class=\"remove-selected\"\n          [tabIndex]=\"_isDisabled() ? -1 : 0\"\n          (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          [ngClass]=\"{ 'large-input-icon': type() === autocompleteType.LARGE }\"\n          (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          [size]=\"'24'\"\n          [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n          [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n          [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n        ></ui-icon>\n      }\n\n      @if (isDropdown) {\n        <ui-icon\n          class=\"arrow-state\"\n          [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type() === autocompleteType.LARGE }\"\n          [size]=\"'24'\"\n          [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n          (click)=\"onChevronClick(autocomplete)\"\n        ></ui-icon>\n      }\n\n      <mat-autocomplete\n        #autocomplete\n        [class]=\"applicationTheme + ' ' + dropdownPanelClass()\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [hideSingleSelectionIndicator]=\"false\"\n        (opened)=\"onPanelOpened()\"\n      >\n        <ng-template #optionContentTpl let-item=\"item\" let-highlight=\"highlight\">\n          @if (imageField() && item?.[imageField()]) {\n            <img class=\"option-image\" [src]=\"item[imageField()]\" alt=\"\" />\n          }\n          <span [selectText]=\"highlight ? (filterService.userInput$ | async) : null\">{{\n            item | transformItem: textField()\n          }}</span>\n          <ui-icon\n            [applicationTheme]=\"applicationTheme\"\n            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n          ></ui-icon>\n        </ng-template>\n\n        <!-- Reusable option template — must be inside mat-autocomplete for @ContentChildren to find mat-options -->\n        <ng-template #optionTpl let-item=\"item\" let-highlight=\"highlight\">\n          <mat-option\n            (mousedown)=\"$event.preventDefault()\"\n            [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n            [value]=\"item\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: highlight }\"\n            ></ng-container>\n          </mat-option>\n        </ng-template>\n\n        <!-- Reusable \"Add\"/no-results/loading option for the filtered view -->\n        <ng-template #addOptionTpl let-items=\"items\" let-suggestions=\"suggestions\">\n          @if (dynamicFilterLoading()) {\n            <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n              <div class=\"loading-container\">\n                <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n              </div>\n            </mat-option>\n          } @else if (inputValue()) {\n            @if (\n              allowAdd() && !isAlreadyAdded() && !utils.hasExactMatch(items, suggestions, inputValue(), textField())\n            ) {\n              <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n                <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n                <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n              </mat-option>\n            } @else if (!items.length && !suggestions.length) {\n              <mat-option [style.pointer-events]=\"'none'\">\n                <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n              </mat-option>\n            }\n          }\n        </ng-template>\n\n        <!-- ── Unfiltered ───────────────────────────────────────────────── -->\n        @if ((filterService.isSearching$ | async) === false) {\n          @if (!isDropdown) {\n            <!-- Suggestions -->\n            @if (suggestionsList().length) {\n              <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                @for (suggested of suggestionsList(); track suggested) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTpl; context: { item: suggested, highlight: true }\"\n                  ></ng-container>\n                }\n              </mat-optgroup>\n            }\n\n            <!-- Selected items (multi) -->\n            @if (valueManager.value()?.length && type() !== autocompleteType.SINGLE && !hideSelectedSection()) {\n              <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                @for (item of $any(valueManager.value()); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: false }\"></ng-container>\n                }\n              </mat-optgroup>\n            }\n\n            <!-- Main items (normalized groups) -->\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                } @else {\n                  @for (group of groupedItemsList(); track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  }\n                }\n\n                @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n                  <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                    <div class=\"loading-container\">\n                      <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                    </div>\n                  </mat-option>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (isGrouped) {\n                @for (group of groupedItemsList(); track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    }\n                  }\n                }\n              } @else {\n                @for (item of flatItemsList(); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n                }\n              }\n            }\n\n            <!-- Selected item (single) -->\n            @if (valueManager.value()?.length && type() === autocompleteType.SINGLE && !hideSelectedSection()) {\n              <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                <ng-container\n                  *ngTemplateOutlet=\"optionTpl; context: { item: valueManager.value(), highlight: true }\"\n                ></ng-container>\n              </mat-optgroup>\n            }\n          } @else {\n            <!-- ── Dropdown (unfiltered) ────────────────────────────────── -->\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (!isGrouped) {\n                  <!-- Ungrouped: flat cdkVirtualFor directly in viewport -->\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                } @else {\n                  <!-- Grouped: nested cdkVirtualFor per group -->\n                  @for (group of groupedItemsList(); track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  }\n                }\n\n                @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n                  <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                    <div class=\"loading-container\">\n                      <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                    </div>\n                  </mat-option>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (isGrouped) {\n                @for (group of groupedItemsList(); track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    }\n                  }\n                }\n              } @else {\n                @for (item of flatItemsList(); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n                }\n              }\n            }\n          }\n\n          @if (userAdditionsGroupLabel() && userAddedItems().length) {\n            <mat-optgroup [label]=\"userAdditionsGroupLabel()\">\n              @for (item of userAddedItems(); track item) {\n                <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n              }\n            </mat-optgroup>\n          }\n        }\n\n        <!-- ── Filtered ────────────────────────────────────────────────── -->\n        @if (filterService.filteredSuggestions$ | async; as filteredSuggestionList) {\n          @if (filterService.filteredItems$ | async; as filteredItemsList) {\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (addOptionPosition() === 'top') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      addOptionTpl;\n                      context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                    \"\n                  ></ng-container>\n                }\n                <!-- Filtered suggestions -->\n                @if (filteredSuggestionList.length) {\n                  <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                      *cdkVirtualFor=\"let item of filteredSuggestionList; trackBy: trackByItem\"\n                      [value]=\"item\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    </mat-option>\n                  </mat-optgroup>\n                }\n\n                <!-- Filtered items: grouped -->\n                @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n                  @if (filteredGroups.length) {\n                    @for (group of filteredGroups; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{\n                              'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                            }\"\n                            *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n                            [value]=\"item\"\n                          >\n                            <ng-container\n                              *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                            ></ng-container>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n\n                <!-- Filtered items: ungrouped (no suggestions) -->\n                @if (!filteredSuggestionList.length && !isGrouped) {\n                  @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                      [value]=\"item\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    </mat-option>\n                  }\n                } @else {\n                  <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n                  @if (filteredItemsList.length && !isGrouped) {\n                    <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n                      @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                }\n\n                @if (addOptionPosition() === 'bottom') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      addOptionTpl;\n                      context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                    \"\n                  ></ng-container>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (addOptionPosition() === 'top') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    addOptionTpl;\n                    context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                  \"\n                ></ng-container>\n              }\n              <!-- Filtered items: grouped -->\n              @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n                @if (filteredGroups.length) {\n                  @for (group of filteredGroups; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <ng-container\n                            *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    }\n                  }\n                }\n              }\n\n              <!-- Filtered suggestions -->\n              @if (filteredSuggestionList.length) {\n                <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                  @for (item of filteredSuggestionList; track item) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  }\n                </mat-optgroup>\n              }\n\n              <!-- Filtered items: ungrouped (no suggestions) -->\n              @if (!filteredSuggestionList.length && !isGrouped) {\n                @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                }\n              } @else {\n                <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n                @if (filteredItemsList.length && !isGrouped) {\n                  <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n                    @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  </mat-optgroup>\n                }\n              }\n\n              @if (addOptionPosition() === 'bottom') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    addOptionTpl;\n                    context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                  \"\n                ></ng-container>\n              }\n            }\n          }\n        }\n      </mat-autocomplete>\n      @if (hasError()) {\n        <mat-hint class=\"error\">\n          @if (ngControl) {\n            <ui-validation-error\n              [ngControl]=\"ngControl\"\n              [customErrors]=\"formErrorConfig()\"\n              [label]=\"label()\"\n            ></ui-validation-error>\n          } @else {\n            @for (error of safeErrors(); track error) {\n              <div class=\"errors\">\n                <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n                <span>{{ error }}</span>\n              </div>\n            }\n          }\n        </mat-hint>\n      }\n    </mat-form-field>\n    @if (tagsBelow() && valueManager.value()?.length) {\n      <div class=\"selected-items--below\">\n        @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'below-tag-' + i\"\n            [label]=\"valueItem | transformItem: textField()\"\n            [icon]=\"tagIcons()[i]\"\n            [allowClose]=\"true\"\n            [isDisabled]=\"disabled()\"\n            [constrainWidth]=\"true\"\n            [applicationTheme]=\"applicationTheme\"\n            (close)=\"onOptionRemoved(valueItem)\"\n            (click)=\"onTagActivate($event)\"\n            (keydown.enter)=\"onTagActivate($event)\"\n            (keydown.space)=\"onTagActivate($event)\"\n          >\n            @if (tagSuffix(); as suffix) {\n              <span class=\"value-tag__suffix\" uiTagSuffix>\n                <ng-container *ngTemplateOutlet=\"suffix.templateRef; context: { $implicit: valueItem, index: i }\" />\n              </span>\n            }\n          </ui-tag>\n        }\n        <!-- Consumer content rendered as a sibling of the selected tags, before the clear button -->\n        <ng-content select=\"[autocompleteTagsSuffix]\"></ng-content>\n        @if (clearable()) {\n          <button type=\"button\" class=\"clear-all\" [disabled]=\"_isDisabled()\" (click)=\"onClear()\">\n            {{ 'COMMON.CLEAR' | uiTranslate | async }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap;--tag-max-width: calc(100% - 8px) }.large-size .selected-items .value-tag ::ng-deep .tag-container{max-width:100%!important}.large-size .input-container{margin:auto 0;width:calc(100% - 25px);display:flex;flex-direction:column-reverse}.large-size .input-container.has-multiple-selections{width:calc(100% - 50px)}.large-size .input-container.autocomplete-variant{width:100%}.large-size .input-container.autocomplete-variant.has-multiple-selections{width:calc(100% - 26px)}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px;visibility:hidden}.input-container .selected-items.measured{visibility:visible}.input-container .selected-items .value-tag{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items.measurement-container{visibility:hidden;position:absolute;height:0;overflow:hidden;pointer-events:none}.input-container .overlap-count{font-size:14px;line-height:20px}.input-container .overlap-count ui-tag{display:block}.input-container input{margin-left:6px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .option-image{width:24px;height:24px;margin-right:8px;object-fit:cover;flex-shrink:0}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-option{padding-left:16px!important}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}.selected-items--below{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}.selected-items--below ui-tag{margin:0;--ui-tag-max-width: 400px}.selected-items--below .clear-all{background:none;border:none;padding:4px 8px;cursor:pointer;color:#000;font-weight:500;font-size:12px;line-height:16px;text-decoration:underline}.selected-items--below .clear-all:disabled{cursor:not-allowed;opacity:.5}\n"],
+			dependencies: [
+				{
+					kind: "ngmodule",
+					type: CommonModule
+				},
+				{
+					kind: "directive",
+					type: i1.NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "directive",
+					type: i1.NgTemplateOutlet,
+					selector: "[ngTemplateOutlet]",
+					inputs: [
+						"ngTemplateOutletContext",
+						"ngTemplateOutlet",
+						"ngTemplateOutletInjector"
+					]
+				},
+				{
+					kind: "directive",
+					type: i1.NgStyle,
+					selector: "[ngStyle]",
+					inputs: ["ngStyle"]
+				},
+				{
+					kind: "ngmodule",
+					type: FormsModule
+				},
+				{
+					kind: "directive",
+					type: i2.DefaultValueAccessor,
+					selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]"
+				},
+				{
+					kind: "directive",
+					type: i2.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i2.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatAutocompleteModule
+				},
+				{
+					kind: "component",
+					type: i3.MatAutocomplete,
+					selector: "mat-autocomplete",
+					inputs: [
+						"aria-label",
+						"aria-labelledby",
+						"displayWith",
+						"autoActiveFirstOption",
+						"autoSelectActiveOption",
+						"requireSelection",
+						"panelWidth",
+						"disableRipple",
+						"class",
+						"hideSingleSelectionIndicator"
+					],
+					outputs: [
+						"optionSelected",
+						"opened",
+						"closed",
+						"optionActivated"
+					],
+					exportAs: ["matAutocomplete"]
+				},
+				{
+					kind: "component",
+					type: i3.MatOption,
+					selector: "mat-option",
+					inputs: [
+						"value",
+						"id",
+						"disabled"
+					],
+					outputs: ["onSelectionChange"],
+					exportAs: ["matOption"]
+				},
+				{
+					kind: "component",
+					type: i3.MatOptgroup,
+					selector: "mat-optgroup",
+					inputs: ["label", "disabled"],
+					exportAs: ["matOptgroup"]
+				},
+				{
+					kind: "directive",
+					type: i3.MatAutocompleteTrigger,
+					selector: "input[matAutocomplete], textarea[matAutocomplete]",
+					inputs: [
+						"matAutocomplete",
+						"matAutocompletePosition",
+						"matAutocompleteConnectedTo",
+						"autocomplete",
+						"matAutocompleteDisabled"
+					],
+					exportAs: ["matAutocompleteTrigger"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatChipsModule
+				},
+				{
+					kind: "ngmodule",
+					type: MatFormFieldModule
+				},
+				{
+					kind: "component",
+					type: i4.MatFormField,
+					selector: "mat-form-field",
+					inputs: [
+						"hideRequiredMarker",
+						"color",
+						"floatLabel",
+						"appearance",
+						"subscriptSizing",
+						"hintLabel"
+					],
+					exportAs: ["matFormField"]
+				},
+				{
+					kind: "directive",
+					type: i4.MatLabel,
+					selector: "mat-label"
+				},
+				{
+					kind: "directive",
+					type: i4.MatHint,
+					selector: "mat-hint",
+					inputs: ["align", "id"]
+				},
+				{
+					kind: "ngmodule",
+					type: MatInputModule
+				},
+				{
+					kind: "directive",
+					type: i5.MatInput,
+					selector: "input[matInput], textarea[matInput], select[matNativeControl],      input[matNativeControl], textarea[matNativeControl]",
+					inputs: [
+						"disabled",
+						"id",
+						"placeholder",
+						"name",
+						"required",
+						"type",
+						"errorStateMatcher",
+						"aria-describedby",
+						"value",
+						"readonly",
+						"disabledInteractive"
+					],
+					exportAs: ["matInput"]
+				},
+				{
+					kind: "ngmodule",
+					type: TagComponentModule
+				},
+				{
+					kind: "component",
+					type: i6.TagComponent,
+					selector: "ui-tag",
+					inputs: [
+						"label",
+						"icon",
+						"allowClose",
+						"readOnly",
+						"isSelected",
+						"showIconWhenSelected",
+						"pinnedBackground",
+						"constrainWidth",
+						"isDisabled",
+						"applicationTheme",
+						"ariaLabel",
+						"testId",
+						"ariaRequired",
+						"showBadge",
+						"notificationsAmount"
+					],
+					outputs: [
+						"isSelectedChange",
+						"close",
+						"press"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: IconComponentModule
+				},
+				{
+					kind: "component",
+					type: i7.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: SpinnerComponentModule
+				},
+				{
+					kind: "component",
+					type: i8.SpinnerComponent,
+					selector: "ui-spinner",
+					inputs: [
+						"size",
+						"isLoader",
+						"text",
+						"applicationTheme",
+						"iconName",
+						"iconSize"
+					]
+				},
+				{
+					kind: "component",
+					type: CdkVirtualScrollViewport,
+					selector: "cdk-virtual-scroll-viewport",
+					inputs: ["orientation", "appendOnly"],
+					outputs: ["scrolledIndexChange"]
+				},
+				{
+					kind: "directive",
+					type: CdkVirtualForOf,
+					selector: "[cdkVirtualFor][cdkVirtualForOf]",
+					inputs: [
+						"cdkVirtualForOf",
+						"cdkVirtualForTrackBy",
+						"cdkVirtualForTemplate",
+						"cdkVirtualForTemplateCacheSize"
+					]
+				},
+				{
+					kind: "directive",
+					type: CdkFixedSizeVirtualScroll,
+					selector: "cdk-virtual-scroll-viewport[itemSize]",
+					inputs: [
+						"itemSize",
+						"minBufferPx",
+						"maxBufferPx"
+					]
+				},
+				{
+					kind: "directive",
+					type: PreventInputDirective,
+					selector: "[uiPreventInput]",
+					inputs: ["uiPreventInput"]
+				},
+				{
+					kind: "directive",
+					type: SelectTextDirective,
+					selector: "[selectText]",
+					inputs: ["selectText"]
+				},
+				{
+					kind: "directive",
+					type: AutocompleteOverflowDetectDirective,
+					selector: "[uiAutocompleteOverflowDetect]",
+					inputs: [
+						"measureContainer",
+						"itemSelector",
+						"reserveWidth"
+					],
+					exportAs: ["autocompleteOverflowDetect"]
+				},
+				{
+					kind: "ngmodule",
+					type: ValidationErrorModule
+				},
+				{
+					kind: "component",
+					type: i9.ValidationErrorComponent,
+					selector: "ui-validation-error",
+					inputs: [
+						"ngControl",
+						"touchedOn",
+						"errorMessage",
+						"label",
+						"applicationTheme",
+						"customErrors"
+					]
+				},
+				{
+					kind: "ngmodule",
+					type: MatTooltipModule
+				},
+				{
+					kind: "directive",
+					type: i10.MatTooltip,
+					selector: "[matTooltip]",
+					inputs: [
+						"matTooltipPosition",
+						"matTooltipPositionAtOrigin",
+						"matTooltipDisabled",
+						"matTooltipShowDelay",
+						"matTooltipHideDelay",
+						"matTooltipTouchGestures",
+						"matTooltip",
+						"matTooltipClass"
+					],
+					exportAs: ["matTooltip"]
+				},
+				{
+					kind: "pipe",
+					type: i1.AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: i1.UpperCasePipe,
+					name: "uppercase"
+				},
+				{
+					kind: "pipe",
+					type: UiTranslatePipe,
+					name: "uiTranslate"
+				},
+				{
+					kind: "pipe",
+					type: TransformItemPipe,
+					name: "transformItem"
+				},
+				{
+					kind: "pipe",
+					type: IncludesPipe,
+					name: "includes"
+				}
+			],
+			changeDetection: i0.ChangeDetectionStrategy.OnPush
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AutocompleteV2Component,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-autocomplete-v2",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			standalone: true,
+			imports: [
+				CommonModule,
+				FormsModule,
+				MatAutocompleteModule,
+				MatChipsModule,
+				MatFormFieldModule,
+				MatInputModule,
+				TagComponentModule,
+				IconComponentModule,
+				SpinnerComponentModule,
+				CdkVirtualScrollViewport,
+				CdkVirtualForOf,
+				CdkFixedSizeVirtualScroll,
+				PreventInputDirective,
+				UiTranslatePipe,
+				TransformItemPipe,
+				IncludesPipe,
+				SelectTextDirective,
+				AutocompleteOverflowDetectDirective,
+				ValidationErrorModule,
+				MatTooltipModule
+			],
+			host: { "[attr.theme]": "applicationTheme" },
+			providers: [
+				AutocompleteValueManager,
+				AutocompleteFilterService,
+				InfiniteScrollDirective
+			],
+			template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ disabled: _isDisabled() }\">\n    <mat-form-field\n      [color]=\"hasError() ? 'warn' : 'accent'\"\n      [appearance]=\"'outline'\"\n      [ngClass]=\"{\n        'large-size': type() === autocompleteType.LARGE,\n        'hide-bottom-content': !showBottomContent(),\n        'keyboard-focused': keyboardFocused(),\n        'has-label': !!label(),\n      }\"\n    >\n      @if (label()) {\n        <mat-label\n          >{{ label() }}\n          @if (required()) {\n            <span>*</span>\n          }\n        </mat-label>\n      }\n      <div\n        #formField\n        class=\"input-container\"\n        [class.has-multiple-selections]=\"\n          type() === autocompleteType.LARGE &&\n          utils.isArray(valueManager.value()) &&\n          $any(valueManager.value()).length > 1\n        \"\n        [class.autocomplete-variant]=\"type() === autocompleteType.LARGE && !isDropdown\"\n      >\n        @if (textField() ? $any(valueManager.value())?.[textField()] : $any(valueManager.value()) === inputValue()) {\n          <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n            ('SELECTED' | uiTranslate | async) + ' ' + inputValue()\n          }}</span>\n        }\n\n        <input\n          [attr.data-testid]=\"testId() ?? 'autocomplete-v2-input'\"\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [attr.maxlength]=\"maxLength() !== null && maxLength() !== undefined ? maxLength() : null\"\n          [uiPreventInput]=\"!allowUserInput()\"\n          [disabled]=\"_isDisabled()\"\n          [ngClass]=\"{\n            'unset-margin': valueManager.value() && type() === autocompleteType.LARGE,\n            'no-caret': !allowUserInput(),\n          }\"\n          (blur)=\"onBlur()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"\n            (translationContext + 'SELECTED' | uiTranslate | async) +\n            ' ' +\n            (valueManager.value() | transformItem: textField() : true)\n          \"\n          matInput\n          [placeholder]=\"suppressPlaceholder() ? '' : placeholder()\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          [matAutocompletePosition]=\"panelPosition()\"\n          (input)=\"onInputChange($event)\"\n          [ngModel]=\"inputValue()\"\n          (ngModelChange)=\"inputValue.set($event)\"\n        />\n        <!-- Hidden measurement container: always in DOM, renders ALL tags for width measurement -->\n        @if (!tagsBelow() && type() !== autocompleteType.SINGLE && utils.isArray(valueManager.value())) {\n          <div class=\"selected-items measurement-container\" #measureEl>\n            @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n              <ui-tag\n                class=\"value-tag\"\n                [id]=\"'measure-tag-' + i\"\n                [label]=\"valueItem | transformItem: textField()\"\n                [allowClose]=\"true\"\n                [isDisabled]=\"disabled()\"\n                [applicationTheme]=\"applicationTheme\"\n              ></ui-tag>\n            }\n          </div>\n        }\n\n        @if (\n          !tagsBelow() &&\n          ((type() === autocompleteType.LARGE && valueManager.value()) ||\n            (!(inputValue() && isInputFocus()) && valueManager.value() && type() !== autocompleteType.SINGLE))\n        ) {\n          <!-- Visible container: only renders tags that fit. Hidden until first measurement to prevent flash. -->\n          <div\n            class=\"selected-items\"\n            #tagContainer\n            uiAutocompleteOverflowDetect\n            #overflow=\"autocompleteOverflowDetect\"\n            [measureContainer]=\"$safeNavigationMigration(measureElRef?.nativeElement)\"\n            [class.measured]=\"\n              type() === autocompleteType.LARGE || type() === autocompleteType.SINGLE || overflow.hasMeasured()\n            \"\n          >\n            @if (size() === 'small' && $any(valueManager.value()).length > 1) {\n              <div class=\"selected-count\">\n                {{\n                  translationContext + 'SELECTED_AMOUNT'\n                    | uiTranslate: { numberSelected: valueManager.value()!.length }\n                    | async\n                }}\n              </div>\n            } @else {\n              @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n                @if (i < overflow.visibleCount()) {\n                  <ui-tag\n                    class=\"value-tag\"\n                    [id]=\"'ui-tag-' + i\"\n                    [label]=\"valueItem | transformItem: textField()\"\n                    [allowClose]=\"true\"\n                    [isDisabled]=\"disabled()\"\n                    [applicationTheme]=\"applicationTheme\"\n                    [ngStyle]=\"\n                      type() !== autocompleteType.LARGE\n                        ? { '--tag-max-width': overflow.tagMaxWidth() ? overflow.tagMaxWidth() + 'px' : 'fit-content' }\n                        : {}\n                    \"\n                    (close)=\"onOptionRemoved(valueItem)\"\n                  ></ui-tag>\n                }\n              }\n              @if (overflow.overflowCount() > 0) {\n                <div class=\"overlap-count\" [matTooltip]=\"hiddenItemsTooltip()\">\n                  <ui-tag\n                    [applicationTheme]=\"applicationTheme\"\n                    [isDisabled]=\"disabled()\"\n                    [label]=\"'+' + overflow.overflowCount()\"\n                  ></ui-tag>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      @if (showClearButton()) {\n        <ui-icon\n          class=\"remove-selected\"\n          [tabIndex]=\"_isDisabled() ? -1 : 0\"\n          (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          [ngClass]=\"{ 'large-input-icon': type() === autocompleteType.LARGE }\"\n          (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n          [size]=\"'24'\"\n          [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n          [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n          [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n        ></ui-icon>\n      }\n\n      @if (isDropdown) {\n        <ui-icon\n          class=\"arrow-state\"\n          [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type() === autocompleteType.LARGE }\"\n          [size]=\"'24'\"\n          [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n          (click)=\"onChevronClick(autocomplete)\"\n        ></ui-icon>\n      }\n\n      <mat-autocomplete\n        #autocomplete\n        [class]=\"applicationTheme + ' ' + dropdownPanelClass()\"\n        (optionSelected)=\"onOptionSelected($event)\"\n        [disableRipple]=\"applicationTheme !== 'classic'\"\n        [hideSingleSelectionIndicator]=\"false\"\n        (opened)=\"onPanelOpened()\"\n      >\n        <ng-template #optionContentTpl let-item=\"item\" let-highlight=\"highlight\">\n          @if (imageField() && item?.[imageField()]) {\n            <img class=\"option-image\" [src]=\"item[imageField()]\" alt=\"\" />\n          }\n          <span [selectText]=\"highlight ? (filterService.userInput$ | async) : null\">{{\n            item | transformItem: textField()\n          }}</span>\n          <ui-icon\n            [applicationTheme]=\"applicationTheme\"\n            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n          ></ui-icon>\n        </ng-template>\n\n        <!-- Reusable option template — must be inside mat-autocomplete for @ContentChildren to find mat-options -->\n        <ng-template #optionTpl let-item=\"item\" let-highlight=\"highlight\">\n          <mat-option\n            (mousedown)=\"$event.preventDefault()\"\n            [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n            [value]=\"item\"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: highlight }\"\n            ></ng-container>\n          </mat-option>\n        </ng-template>\n\n        <!-- Reusable \"Add\"/no-results/loading option for the filtered view -->\n        <ng-template #addOptionTpl let-items=\"items\" let-suggestions=\"suggestions\">\n          @if (dynamicFilterLoading()) {\n            <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n              <div class=\"loading-container\">\n                <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n              </div>\n            </mat-option>\n          } @else if (inputValue()) {\n            @if (\n              allowAdd() && !isAlreadyAdded() && !utils.hasExactMatch(items, suggestions, inputValue(), textField())\n            ) {\n              <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n                <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n                <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n              </mat-option>\n            } @else if (!items.length && !suggestions.length) {\n              <mat-option [style.pointer-events]=\"'none'\">\n                <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n              </mat-option>\n            }\n          }\n        </ng-template>\n\n        <!-- ── Unfiltered ───────────────────────────────────────────────── -->\n        @if ((filterService.isSearching$ | async) === false) {\n          @if (!isDropdown) {\n            <!-- Suggestions -->\n            @if (suggestionsList().length) {\n              <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                @for (suggested of suggestionsList(); track suggested) {\n                  <ng-container\n                    *ngTemplateOutlet=\"optionTpl; context: { item: suggested, highlight: true }\"\n                  ></ng-container>\n                }\n              </mat-optgroup>\n            }\n\n            <!-- Selected items (multi) -->\n            @if (valueManager.value()?.length && type() !== autocompleteType.SINGLE && !hideSelectedSection()) {\n              <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                @for (item of $any(valueManager.value()); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: false }\"></ng-container>\n                }\n              </mat-optgroup>\n            }\n\n            <!-- Main items (normalized groups) -->\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                } @else {\n                  @for (group of groupedItemsList(); track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  }\n                }\n\n                @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n                  <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                    <div class=\"loading-container\">\n                      <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                    </div>\n                  </mat-option>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (isGrouped) {\n                @for (group of groupedItemsList(); track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    }\n                  }\n                }\n              } @else {\n                @for (item of flatItemsList(); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n                }\n              }\n            }\n\n            <!-- Selected item (single) -->\n            @if (valueManager.value()?.length && type() === autocompleteType.SINGLE && !hideSelectedSection()) {\n              <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                <ng-container\n                  *ngTemplateOutlet=\"optionTpl; context: { item: valueManager.value(), highlight: true }\"\n                ></ng-container>\n              </mat-optgroup>\n            }\n          } @else {\n            <!-- ── Dropdown (unfiltered) ────────────────────────────────── -->\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (!isGrouped) {\n                  <!-- Ungrouped: flat cdkVirtualFor directly in viewport -->\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                } @else {\n                  <!-- Grouped: nested cdkVirtualFor per group -->\n                  @for (group of groupedItemsList(); track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      </mat-optgroup>\n                    } @else {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  }\n                }\n\n                @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n                  <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n                    <div class=\"loading-container\">\n                      <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n                    </div>\n                  </mat-option>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (isGrouped) {\n                @for (group of groupedItemsList(); track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <ng-container\n                        *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    }\n                  }\n                }\n              } @else {\n                @for (item of flatItemsList(); track item) {\n                  <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n                }\n              }\n            }\n          }\n\n          @if (userAdditionsGroupLabel() && userAddedItems().length) {\n            <mat-optgroup [label]=\"userAdditionsGroupLabel()\">\n              @for (item of userAddedItems(); track item) {\n                <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n              }\n            </mat-optgroup>\n          }\n        }\n\n        <!-- ── Filtered ────────────────────────────────────────────────── -->\n        @if (filterService.filteredSuggestions$ | async; as filteredSuggestionList) {\n          @if (filterService.filteredItems$ | async; as filteredItemsList) {\n            @if (virtualScroll() || infiniteScroll()) {\n              <cdk-virtual-scroll-viewport\n                [itemSize]=\"48\"\n                [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n                class=\"virtual-scroll\"\n              >\n                @if (addOptionPosition() === 'top') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      addOptionTpl;\n                      context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                    \"\n                  ></ng-container>\n                }\n                <!-- Filtered suggestions -->\n                @if (filteredSuggestionList.length) {\n                  <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                      *cdkVirtualFor=\"let item of filteredSuggestionList; trackBy: trackByItem\"\n                      [value]=\"item\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    </mat-option>\n                  </mat-optgroup>\n                }\n\n                <!-- Filtered items: grouped -->\n                @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n                  @if (filteredGroups.length) {\n                    @for (group of filteredGroups; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{\n                              'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                            }\"\n                            *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n                            [value]=\"item\"\n                          >\n                            <ng-container\n                              *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                            ></ng-container>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n\n                <!-- Filtered items: ungrouped (no suggestions) -->\n                @if (!filteredSuggestionList.length && !isGrouped) {\n                  @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                      [value]=\"item\"\n                    >\n                      <ng-container\n                        *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                      ></ng-container>\n                    </mat-option>\n                  }\n                } @else {\n                  <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n                  @if (filteredItemsList.length && !isGrouped) {\n                    <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n                      @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{\n                            'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n                          }\"\n                          [value]=\"item\"\n                        >\n                          <ng-container\n                            *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                }\n\n                @if (addOptionPosition() === 'bottom') {\n                  <ng-container\n                    *ngTemplateOutlet=\"\n                      addOptionTpl;\n                      context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                    \"\n                  ></ng-container>\n                }\n              </cdk-virtual-scroll-viewport>\n            } @else {\n              @if (addOptionPosition() === 'top') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    addOptionTpl;\n                    context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                  \"\n                ></ng-container>\n              }\n              <!-- Filtered items: grouped -->\n              @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n                @if (filteredGroups.length) {\n                  @for (group of filteredGroups; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <ng-container\n                            *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                          ></ng-container>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <ng-container\n                          *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      }\n                    }\n                  }\n                }\n              }\n\n              <!-- Filtered suggestions -->\n              @if (filteredSuggestionList.length) {\n                <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                  @for (item of filteredSuggestionList; track item) {\n                    <ng-container\n                      *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  }\n                </mat-optgroup>\n              }\n\n              <!-- Filtered items: ungrouped (no suggestions) -->\n              @if (!filteredSuggestionList.length && !isGrouped) {\n                @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                    [value]=\"item\"\n                  >\n                    <ng-container\n                      *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                    ></ng-container>\n                  </mat-option>\n                }\n              } @else {\n                <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n                @if (filteredItemsList.length && !isGrouped) {\n                  <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n                    @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n                        [value]=\"item\"\n                      >\n                        <ng-container\n                          *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n                        ></ng-container>\n                      </mat-option>\n                    }\n                  </mat-optgroup>\n                }\n              }\n\n              @if (addOptionPosition() === 'bottom') {\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    addOptionTpl;\n                    context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n                  \"\n                ></ng-container>\n              }\n            }\n          }\n        }\n      </mat-autocomplete>\n      @if (hasError()) {\n        <mat-hint class=\"error\">\n          @if (ngControl) {\n            <ui-validation-error\n              [ngControl]=\"ngControl\"\n              [customErrors]=\"formErrorConfig()\"\n              [label]=\"label()\"\n            ></ui-validation-error>\n          } @else {\n            @for (error of safeErrors(); track error) {\n              <div class=\"errors\">\n                <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n                <span>{{ error }}</span>\n              </div>\n            }\n          }\n        </mat-hint>\n      }\n    </mat-form-field>\n    @if (tagsBelow() && valueManager.value()?.length) {\n      <div class=\"selected-items--below\">\n        @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'below-tag-' + i\"\n            [label]=\"valueItem | transformItem: textField()\"\n            [icon]=\"tagIcons()[i]\"\n            [allowClose]=\"true\"\n            [isDisabled]=\"disabled()\"\n            [constrainWidth]=\"true\"\n            [applicationTheme]=\"applicationTheme\"\n            (close)=\"onOptionRemoved(valueItem)\"\n            (click)=\"onTagActivate($event)\"\n            (keydown.enter)=\"onTagActivate($event)\"\n            (keydown.space)=\"onTagActivate($event)\"\n          >\n            @if (tagSuffix(); as suffix) {\n              <span class=\"value-tag__suffix\" uiTagSuffix>\n                <ng-container *ngTemplateOutlet=\"suffix.templateRef; context: { $implicit: valueItem, index: i }\" />\n              </span>\n            }\n          </ui-tag>\n        }\n        <!-- Consumer content rendered as a sibling of the selected tags, before the clear button -->\n        <ng-content select=\"[autocompleteTagsSuffix]\"></ng-content>\n        @if (clearable()) {\n          <button type=\"button\" class=\"clear-all\" [disabled]=\"_isDisabled()\" (click)=\"onClear()\">\n            {{ 'COMMON.CLEAR' | uiTranslate | async }}\n          </button>\n        }\n      </div>\n    }\n  </div>\n</ng-container>\n",
+			styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap;--tag-max-width: calc(100% - 8px) }.large-size .selected-items .value-tag ::ng-deep .tag-container{max-width:100%!important}.large-size .input-container{margin:auto 0;width:calc(100% - 25px);display:flex;flex-direction:column-reverse}.large-size .input-container.has-multiple-selections{width:calc(100% - 50px)}.large-size .input-container.autocomplete-variant{width:100%}.large-size .input-container.autocomplete-variant.has-multiple-selections{width:calc(100% - 26px)}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px;visibility:hidden}.input-container .selected-items.measured{visibility:visible}.input-container .selected-items .value-tag{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items.measurement-container{visibility:hidden;position:absolute;height:0;overflow:hidden;pointer-events:none}.input-container .overlap-count{font-size:14px;line-height:20px}.input-container .overlap-count ui-tag{display:block}.input-container input{margin-left:6px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .option-image{width:24px;height:24px;margin-right:8px;object-fit:cover;flex-shrink:0}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-option{padding-left:16px!important}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}.selected-items--below{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}.selected-items--below ui-tag{margin:0;--ui-tag-max-width: 400px}.selected-items--below .clear-all{background:none;border:none;padding:4px 8px;cursor:pointer;color:#000;font-weight:500;font-size:12px;line-height:16px;text-decoration:underline}.selected-items--below .clear-all:disabled{cursor:not-allowed;opacity:.5}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		itemsList: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemsList",
+				required: false
+			}]
+		}],
+		suggestionsList: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "suggestionsList",
+				required: false
+			}]
+		}],
+		groupsList: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "groupsList",
+				required: false
+			}]
+		}],
+		disabled: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "disabled",
+				required: false
+			}]
+		}],
+		allowAdd: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowAdd",
+				required: false
+			}]
+		}],
+		textField: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "textField",
+				required: false
+			}]
+		}],
+		valueField: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "valueField",
+				required: false
+			}]
+		}],
+		imageField: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "imageField",
+				required: false
+			}]
+		}],
+		label: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "label",
+				required: false
+			}]
+		}],
+		placeholder: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "placeholder",
+				required: false
+			}]
+		}],
+		testId: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "testId",
+				required: false
+			}]
+		}],
+		type: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "type",
+				required: false
+			}]
+		}],
+		minCharactersSearch: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "minCharactersSearch",
+				required: false
+			}]
+		}],
+		variant: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "variant",
+				required: true
+			}]
+		}],
+		showBottomContent: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "showBottomContent",
+				required: false
+			}]
+		}],
+		required: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "required",
+				required: false
+			}]
+		}],
+		virtualScroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "virtualScroll",
+				required: false
+			}]
+		}],
+		compareWith: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "compareWith",
+				required: false
+			}]
+		}],
+		dropdownPanelClass: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dropdownPanelClass",
+				required: false
+			}]
+		}],
+		panelPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "panelPosition",
+				required: false
+			}]
+		}],
+		hideSelectedSection: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hideSelectedSection",
+				required: false
+			}]
+		}],
+		userAdditionsGroupLabel: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "userAdditionsGroupLabel",
+				required: false
+			}]
+		}],
+		closeOnScroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "closeOnScroll",
+				required: false
+			}]
+		}],
+		size: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "size",
+				required: false
+			}]
+		}],
+		allowUserInput: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "allowUserInput",
+				required: false
+			}]
+		}],
+		clearable: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "clearable",
+				required: false
+			}]
+		}],
+		maxLength: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "maxLength",
+				required: false
+			}]
+		}],
+		dynamicFilterLoading: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dynamicFilterLoading",
+				required: false
+			}]
+		}],
+		dynamicFilteredList: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dynamicFilteredList",
+				required: false
+			}]
+		}],
+		infiniteScroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "infiniteScroll",
+				required: false
+			}]
+		}],
+		hasMoreOptionsForInfiniteScroll: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "hasMoreOptionsForInfiniteScroll",
+				required: false
+			}]
+		}],
+		itemValue: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "itemValue",
+				required: false
+			}]
+		}],
+		formErrorConfig: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "formErrorConfig",
+				required: false
+			}]
+		}],
+		errors: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "errors",
+				required: false
+			}]
+		}],
+		addOptionPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "addOptionPosition",
+				required: false
+			}]
+		}],
+		tagsPosition: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tagsPosition",
+				required: false
+			}]
+		}],
+		tagIcon: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "tagIcon",
+				required: false
+			}]
+		}],
+		selectionChange: [{
+			type: i0.Output,
+			args: ["selectionChange"]
+		}],
+		searchTextChange: [{
+			type: i0.Output,
+			args: ["searchTextChange"]
+		}],
+		blur: [{
+			type: i0.Output,
+			args: ["blur"]
+		}],
+		focus: [{
+			type: i0.Output,
+			args: ["focus"]
+		}],
+		scrollViewportBottomReached: [{
+			type: i0.Output,
+			args: ["scrollViewportBottomReached"]
+		}],
+		scrollViewportBottomReachedFiltered: [{
+			type: i0.Output,
+			args: ["scrollViewportBottomReachedFiltered"]
+		}],
+		formFieldElement: [{
+			type: ViewChild,
+			args: ["formField"]
+		}],
+		tagContainer: [{
+			type: ViewChild,
+			args: ["tagContainer"]
+		}],
+		measureElRef: [{
+			type: ViewChild,
+			args: ["measureEl"]
+		}],
+		overflowDir: [{
+			type: ViewChild,
+			args: ["overflow"]
+		}],
+		autocomplete: [{
+			type: ViewChild,
+			args: ["trigger"]
+		}],
+		cdkViewport: [{
+			type: ViewChild,
+			args: [CdkVirtualScrollViewport, { static: false }]
+		}],
+		matAutocomplete: [{
+			type: ViewChild,
+			args: ["autocomplete"]
+		}],
+		matInput: [{
+			type: ViewChild,
+			args: ["matInput"]
+		}],
+		tagSuffix: [{
+			type: i0.ContentChild,
+			args: [i0.forwardRef(() => AutocompleteTagSuffixDirective), { isSignal: true }]
+		}]
+	}
+});
 export { Autocomplete, AutocompleteFilterService, AutocompleteOverflowDetectDirective, AutocompleteTagSuffixDirective, AutocompleteV2Component, AutocompleteV2Utils, AutocompleteValueManager, DropdownVariation };
-//# sourceMappingURL=testgorilla-tgo-ui-components-autocomplete-v2.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-autocomplete-v2.mjs.map