@testgorilla/tgo-ui 11.22.2 → 12.0.0

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

@@ -1,1054 +1,1216 @@
-import { FocusMonitor } from '@angular/cdk/a11y';
-import * as i9 from '@angular/cdk/scrolling';
-import { CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
-import * as i1 from '@angular/common';
-import { isPlatformBrowser, CommonModule } from '@angular/common';
-import * as i0 from '@angular/core';
-import { HostListener, Input, Directive, Pipe, EventEmitter, inject, ChangeDetectorRef, PLATFORM_ID, ElementRef, DestroyRef, NgZone, signal, booleanAttribute, ViewChild, Output, HostBinding, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i5 from '@angular/forms';
-import { NgControl, FormsModule } from '@angular/forms';
-import { take, map, filter, throttleTime, BehaviorSubject, ReplaySubject, startWith } from 'rxjs';
-import * as i13 from '@testgorilla/tgo-ui/components/core';
-import { AutocompleteUtils, IKeyboardEvent, UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';
-import * as i2 from '@angular/material/form-field';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import * as i3 from '@angular/material/autocomplete';
-import { MatAutocompleteModule } from '@angular/material/autocomplete';
-import * as i4 from '@angular/material/input';
-import { MatInputModule } from '@angular/material/input';
-import * as i6 from '@testgorilla/tgo-ui/components/tag';
-import { TagComponentModule } from '@testgorilla/tgo-ui/components/tag';
-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/validation-error';
-import { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';
-import * as i11 from '@testgorilla/tgo-ui/components/spinner';
-import { SpinnerComponentModule } from '@testgorilla/tgo-ui/components/spinner';
-import { MatChipsModule } from '@angular/material/chips';
-
+import { FocusMonitor } from "@angular/cdk/a11y";
+import * as i9 from "@angular/cdk/scrolling";
+import { CdkFixedSizeVirtualScroll, CdkVirtualForOf, CdkVirtualScrollViewport } from "@angular/cdk/scrolling";
+import * as i1 from "@angular/common";
+import { CommonModule, isPlatformBrowser } from "@angular/common";
+import * as i0 from "@angular/core";
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DestroyRef, Directive, ElementRef, EventEmitter, HostBinding, HostListener, Input, NgModule, NgZone, Output, PLATFORM_ID, Pipe, ViewChild, booleanAttribute, inject, signal } from "@angular/core";
+import { takeUntilDestroyed } from "@angular/core/rxjs-interop";
+import * as i5 from "@angular/forms";
+import { FormsModule, NgControl } from "@angular/forms";
+import { BehaviorSubject, ReplaySubject, filter, map, startWith, take, throttleTime } from "rxjs";
+import * as i13 from "@testgorilla/tgo-ui/components/core";
+import { AutocompleteUtils, HasValidationErrorPipe, IKeyboardEvent, UiTranslatePipe } from "@testgorilla/tgo-ui/components/core";
+import * as i2 from "@angular/material/form-field";
+import { MatFormFieldModule } from "@angular/material/form-field";
+import * as i3 from "@angular/material/autocomplete";
+import { MatAutocompleteModule } from "@angular/material/autocomplete";
+import * as i4 from "@angular/material/input";
+import { MatInputModule } from "@angular/material/input";
+import * as i6 from "@testgorilla/tgo-ui/components/tag";
+import { TagComponentModule } from "@testgorilla/tgo-ui/components/tag";
+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/validation-error";
+import { ValidationErrorModule } from "@testgorilla/tgo-ui/components/validation-error";
+import * as i11 from "@testgorilla/tgo-ui/components/spinner";
+import { SpinnerComponentModule } from "@testgorilla/tgo-ui/components/spinner";
+import { MatChipsModule } from "@angular/material/chips";
 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 Padding;
-(function (Padding) {
-    Padding[Padding["AUTOCOMPLETE_CONTAINER"] = 40] = "AUTOCOMPLETE_CONTAINER";
-    Padding[Padding["DROPDOWN_CONTAINER"] = 60] = "DROPDOWN_CONTAINER";
-    Padding[Padding["AUTOCOMPLETE_SPACE_CONTAINER"] = 65] = "AUTOCOMPLETE_SPACE_CONTAINER";
-    Padding[Padding["DROPDOWN_SPACE_CONTAINER"] = 85] = "DROPDOWN_SPACE_CONTAINER";
+(function(Padding) {
+	Padding[Padding["AUTOCOMPLETE_CONTAINER"] = 40] = "AUTOCOMPLETE_CONTAINER";
+	Padding[Padding["DROPDOWN_CONTAINER"] = 60] = "DROPDOWN_CONTAINER";
+	Padding[Padding["AUTOCOMPLETE_SPACE_CONTAINER"] = 65] = "AUTOCOMPLETE_SPACE_CONTAINER";
+	Padding[Padding["DROPDOWN_SPACE_CONTAINER"] = 85] = "DROPDOWN_SPACE_CONTAINER";
 })(Padding || (Padding = {}));
 const AMOUNT_TAG_WIDTH = 33;
 var Timeout;
-(function (Timeout) {
-    Timeout[Timeout["VIEW_INITIALIZED_AFTER_ACTION"] = 150] = "VIEW_INITIALIZED_AFTER_ACTION";
-    Timeout[Timeout["VIEW_INITIALIZED_COMPONENT_LOAD"] = 600] = "VIEW_INITIALIZED_COMPONENT_LOAD";
+(function(Timeout) {
+	Timeout[Timeout["VIEW_INITIALIZED_AFTER_ACTION"] = 150] = "VIEW_INITIALIZED_AFTER_ACTION";
+	Timeout[Timeout["VIEW_INITIALIZED_COMPONENT_LOAD"] = 600] = "VIEW_INITIALIZED_COMPONENT_LOAD";
 })(Timeout || (Timeout = {}));
 var DropdownVariation;
-(function (DropdownVariation) {
-    DropdownVariation["AUTOCOMPLETE"] = "autocomplete";
-    DropdownVariation["DROPDOWN"] = "dropdown";
+(function(DropdownVariation) {
+	DropdownVariation["AUTOCOMPLETE"] = "autocomplete";
+	DropdownVariation["DROPDOWN"] = "dropdown";
 })(DropdownVariation || (DropdownVariation = {}));
-
-class PreventInputDirective {
-    onKeyDown(event) {
-        const allowedKeys = [
-            'ArrowLeft',
-            'ArrowRight',
-            'ArrowUp',
-            'ArrowDown',
-            'Backspace',
-            'Tab',
-            'Delete',
-            'Control',
-            'Shift',
-            'Alt',
-        ];
-        if (!allowedKeys.includes(event.key) && !event.ctrlKey && !event.metaKey && this.uiPreventInput) {
-            event.preventDefault();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PreventInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: PreventInputDirective, isStandalone: true, selector: "[uiPreventInput]", inputs: { uiPreventInput: "uiPreventInput" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: PreventInputDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[uiPreventInput]',
-                    standalone: true,
-                }]
-        }], propDecorators: { uiPreventInput: [{
-                type: Input
-            }], onKeyDown: [{
-                type: HostListener,
-                args: ['keydown', ['$event']]
-            }] } });
-
-/**
- * the SelectTextDirective provides a dynamic way to highlight or style specific text within an element.
- */
-class SelectTextDirective {
-    constructor(el) {
-        this.el = el;
-    }
-    /**
-     * this method utilizes setTimeout to defer the execution until the next tick of the event loop.
-     * The text content of the element is modified by wrapping occurrences of the specified selectText with a <span> element,
-     * applying a bold font-weight style.
-     */
-    setTextColor() {
-        const textElement = this.el.nativeElement;
-        setTimeout(() => {
-            const { textContent } = textElement;
-            if (this.selectText && textContent) {
-                // eslint-disable-next-line no-unsanitized/property -- SECURITY: source is the element's own textContent (plain text, browser-escaped); only matches are wrapped in a static <span> for highlighting, so no untrusted markup is introduced.
-                textElement.innerHTML = textContent.replace(new RegExp(this.selectText, 'gmi'), match => `<span style="font-weight: bold" >${match}</span>`);
-            }
-        }, 0);
-    }
-    ngOnChanges() {
-        if (this.selectText) {
-            this.setTextColor();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SelectTextDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.25", type: SelectTextDirective, isStandalone: false, selector: "[selectText]", inputs: { selectText: "selectText" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: SelectTextDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector -- public directive selector; ui-prefix rename is breaking, deferred to the breaking-change MAJOR (see plan)
-                    selector: '[selectText]',
-                    standalone: false,
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { selectText: [{
-                type: Input
-            }] } });
-
-/**
- * the TransformItemPipe is designed to selectively extract and return values from objects based on a specified field,
- * providing a way to transform and display data a template.
- */
-class TransformItemPipe {
-    transform(value, field, getValueList = false) {
-        if (getValueList) {
-            return AutocompleteUtils.isArray(value)
-                ? value.map((item) => (field ? item[field] : item))
-                : field
-                    ? value?.[field]
-                    : value;
-        }
-        if (AutocompleteUtils.isPrimitive(value)) {
-            return value;
-        }
-        else if (!AutocompleteUtils.isPrimitive(value) && field && (value?.[field] || value[0][field])) {
-            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- a falsy field value falls back to the first item field
-            return value?.[field] || value[0][field];
-        }
-        else {
-            AutocompleteUtils.throwInvalidSetupError();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TransformItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: TransformItemPipe, isStandalone: false, name: "transformItem" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: TransformItemPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'transformItem',
-                    standalone: false,
-                }]
-        }] });
-
-/**
- * The purpose of this pipe is to determine if the value is present in the values array.
- * If values is an array, the method uses the includes method to check for inclusion.
- * If values is not an array, it checks for strict equality between value and values.
- */
-class IncludesPipe {
-    transform(value, values, valueField) {
-        return Array.isArray(values)
-            ? Boolean(values?.find(v => (valueField ? v?.[valueField] === value?.[valueField] : value === v)))
-            : valueField
-                ? value?.[valueField] === values?.[valueField]
-                : value === values;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: IncludesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: IncludesPipe, isStandalone: false, name: "includes" }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: IncludesPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'includes',
-                    standalone: false,
-                }]
-        }] });
-
-/* eslint-disable @angular-eslint/no-conflicting-lifecycle */
-class AutocompleteComponent {
-    /**
-     * @property value
-     * @description The selected value(s) in the autocomplete.
-     * @memberof AutocompleteComponent
-     */
-    set itemValue(v) {
-        this.value = AutocompleteUtils.isArray(v) ? v : v ? [v] : [];
-    }
-    /**
-     * Input field errors
-     *
-     * @type {string[]}
-     * @memberof AutocompleteComponent
-     */
-    set errors(errors) {
-        this.safeErrors = errors?.filter(Boolean) ?? [];
-    }
-    set cdkVirtualScrollViewport(viewport) {
-        if (this.savedVirtualScrollSubscription) {
-            this.savedVirtualScrollSubscription.unsubscribe();
-        }
-        if (viewport) {
-            this.savedVirtualScrollViewport = viewport;
-            if (this.infiniteScroll) {
-                setTimeout(() => {
-                    this.inputValueSearch$.pipe(take(1)).subscribe(searchValue => {
-                        this.isFilteredViewport = !!searchValue;
-                    });
-                }, 0);
-                this.savedVirtualScrollSubscription = this.savedVirtualScrollViewport
-                    .elementScrolled()
-                    .pipe(map(() => this.savedVirtualScrollViewport.measureScrollOffset('bottom')), filter(offset => offset < this.savedVirtualScrollViewport.getViewportSize() * 0.2), throttleTime(200), takeUntilDestroyed(this.destroyRef))
-                    .subscribe(() => {
-                    if (this.isFilteredViewport) {
-                        this.scrollViewportBottomReachedFiltered.emit();
-                    }
-                    else {
-                        this.scrollViewportBottomReached.emit();
-                    }
-                });
-            }
-        }
-    }
-    constructor() {
-        /**
-         * @property itemsList
-         * @description The list of items to display in the autocomplete.
-         * @memberof AutocompleteComponent
-         */
-        this.itemsList = [];
-        /**
-         * @property suggestionsList
-         * @description The list of suggestions to display in the autocomplete.
-         * @memberof AutocompleteComponent
-         */
-        this.suggestionsList = [];
-        /**
-         * @property disabled
-         * @description If `true`, the autocomplete is disabled.
-         * @memberof AutocompleteComponent
-         */
-        this.disabled = false;
-        /**
-         * @property allowAdd
-         * @description If `true`, allows adding new values to the autocomplete.
-         * @memberof AutocompleteComponent
-         */
-        this.allowAdd = true;
-        /**
-         * @property textField
-         * @description The field to be used as the display text in the autocomplete.
-         * @memberof AutocompleteComponent
-         */
-        this.textField = '';
-        /**
-         * @property valueField
-         * @description The field to be used as the value in the autocomplete.
-         * @memberof AutocompleteComponent
-         */
-        this.valueField = '';
-        /**
-         * @property label
-         * @description The label for the autocomplete input.
-         * @memberof AutocompleteComponent
-         */
-        this.label = '';
-        /**
-         * @property placeholder
-         * @description The placeholder for the autocomplete input.
-         * @memberof AutocompleteComponent
-         */
-        this.placeholder = '';
-        this.testId = null;
-        /**
-         * @property type
-         * @description The type of the autocomplete ('single', 'multi', etc.).
-         * @memberof AutocompleteComponent
-         */
-        this.type = 'multi';
-        /**
-         * @property minCharactersSearch
-         * @description The minimum characters to trigger search.
-         * @memberof AutocompleteComponent
-         */
-        this.minCharactersSearch = 3;
-        /**
-         * @property variant
-         * @description The variant of Autocomplete
-         * @memberof AutocompleteComponent
-         */
-        this.variant = DropdownVariation.AUTOCOMPLETE;
-        /**
-         * Show reserved content below form field
-         * @property showBottomContent
-         * @type {boolean}
-         * @memberof AutocompleteComponent
-         */
-        this.showBottomContent = true;
-        /**
-         * Return full object if true
-         * @property valuePrimitive
-         * @type {boolean}
-         * @memberof AutocompleteComponent
-         */
-        this.valuePrimitive = false;
-        /**
-         * Indicator of the autocomplete width
-         * @property fullWidth
-         * @type {boolean}
-         * @memberof AutocompleteComponent
-         */
-        this.fullWidth = false;
-        /**
-         *
-         * Defines the application theme
-         *
-         * @type {ApplicationTheme}
-         * @memberof AutocompleteComponent
-         */
-        this.applicationTheme = 'light';
-        /**
-         * Color of the option hover.
-         * Defaults to Test Gorilla primary color.
-         *
-         * @type {string}
-         * @memberof AutocompleteComponent
-         */
-        this.companyColor = '#FFF2FC';
-        /**
-         * Hide in-build errors for Reactive Forms
-         *
-         * @type {number}
-         * @memberof AutocompleteComponent
-         */
-        this.hideBuiltInErrors = false;
-        /**
-         * Hide label in errors
-         *
-         * @type {number}
-         * @memberof AutocompleteComponent
-         */
-        this.hideLabelInErrors = false;
-        /**
-         * Sets dropdown list to virtual scroll mode
-         *
-         * @type {boolean}
-         * @memberof AutocompleteComponent
-         */
-        this.virtualScroll = false;
-        /**
-         * @property dropdownPanelClass
-         * @description Sets class on autocomplete dropdown
-         * @memberof AutocompleteComponent
-         */
-        this.dropdownPanelClass = '';
-        /**
-         * @property closeOnScroll
-         * @description Defines if dropdown should be closed on page scroll
-         * @memberof AutocompleteComponent
-         */
-        this.closeOnScroll = false;
-        /**
-         * @property AutocompleteSize
-         * @description Defines the size of the autocomplete. Small changes the tags to counter; medium is default.
-         * @memberof AutocompleteComponent
-         */
-        this.size = 'medium';
-        /**
-         * @property allowUserInput
-         * @description If `true`, allows the user to input custom values in the autocomplete.
-         * @type {boolean}
-         * @memberof AutocompleteComponent
-         */
-        this.allowUserInput = true;
-        /**
-         * @property clearable
-         * @description If `true`, allows the user to clear the input values
-         * @type {boolean}
-         * @memberof AutocompleteComponent
-         */
-        this.clearable = true;
-        /**
-         * @property exactMatchSelect
-         * @description If `true`, allows to select the exact match from the suggestions list
-         * @type {boolean}
-         * @memberof AutocompleteComponent
-         */
-        this.exactMatchSelect = true;
-        /**
-         * @property maxItemSelected
-         * @description Sets the maximum number of items that can be selected in the autocomplete
-         * @type {boolean}
-         * @memberof AutocompleteComponent
-         */
-        this.maxItemSelected = Infinity;
-        this.isDynamicFilteringEnabled = false;
-        this.dynamicFilterLoading = false;
-        this.dynamicFilteredList = null;
-        this.infiniteScroll = false;
-        this.hasMoreOptionsForInfiniteScroll = true;
-        this.selectionChange = new EventEmitter();
-        this.searchTextChange = new EventEmitter();
-        // 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 = new EventEmitter();
-        // 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 = new EventEmitter();
-        /**
-         * @property scrollViewportBottomReached
-         * @description Emits when the bottom of the unfiltered list is reached during infinite scroll
-         * @memberof AutocompleteComponent
-         */
-        this.scrollViewportBottomReached = new EventEmitter();
-        /**
-         * @property scrollViewportBottomReachedFiltered
-         * @description Emits when the bottom of the filtered list is reached during infinite scroll
-         * @memberof AutocompleteComponent
-         */
-        this.scrollViewportBottomReachedFiltered = new EventEmitter();
-        this.safeErrors = [];
-        this.inputValue = '';
-        this.isInputFocus = false;
-        this.autocompleteType = Autocomplete;
-        this.isOverLapping = false;
-        this.isOverlapChecking = true;
-        this.overlapIndex = 0;
-        this.inputOpacity = 1;
-        this.firstTagMaxWidth = 0;
-        this.inputValueSearch$ = new BehaviorSubject('');
-        this.userInput$ = new ReplaySubject(1);
-        this.dynamicFilteredList$ = new BehaviorSubject(null);
-        this.filteredItemsList$ = this.inputValueSearch$.pipe(startWith(''), map(inputValue => inputValue.length
-            ? AutocompleteUtils.filterItems(this.itemsList, inputValue, this.textField, this.isGrouped)
-            : null));
-        this.filteredSuggestionList$ = this.inputValueSearch$.pipe(map(inputValue => inputValue.length ? AutocompleteUtils.filterItems(this.suggestionsList, inputValue, this.textField) : null));
-        this.isFilteredViewport = false;
-        this.scrollEvent = (event) => {
-            const isNotAutocompleteScroll = !event.target?.id?.includes('mat-autocomplete-') &&
-                !event.target?.parentElement?.id?.includes('mat-autocomplete-') &&
-                !event.target?.classList?.contains('mat-mdc-autocomplete-trigger');
-            if (this.autocomplete.panelOpen && isNotAutocompleteScroll) {
-                this.autocomplete.closePanel();
-            }
-        };
-        this.searchResult$ = this.inputValueSearch$.pipe(map(inputValue => !!inputValue.trim()));
-        this.translationContext = 'AUTOCOMPLETE.';
-        this.AutocompleteUtils = AutocompleteUtils;
-        this.defaultAppTheme = inject('CANOPYUI_DEFAULT_APPLICATION_THEME', {
-            optional: true,
-        });
-        this.cdr = inject(ChangeDetectorRef);
-        this.ngControl = inject(NgControl, { optional: true, self: true });
-        this.platformId = inject(PLATFORM_ID);
-        this.el = inject(ElementRef);
-        this.focusMonitor = inject(FocusMonitor);
-        this.destroyRef = inject(DestroyRef);
-        this.ngZone = inject(NgZone);
-        this.isPlatform = isPlatformBrowser(this.platformId);
-        this.keyboardFocused = signal(false, ...(ngDevMode ? [{ debugName: "keyboardFocused" }] : /* istanbul ignore next */ []));
-        this.isAlreadyAdded = false;
-        this.onChange = (_) => { };
-        this.onTouch = () => { };
-        this.trackByFn = (index, value) => value;
-        if (this.ngControl != null) {
-            this.ngControl.valueAccessor = this;
-        }
-        if (this.defaultAppTheme) {
-            this.applicationTheme = this.defaultAppTheme;
-        }
-        this.subscriberDisplayChange();
-    }
-    ngOnInit() {
-        if (this.isDynamicFilteringEnabled) {
-            this.filteredItemsList$ = this.dynamicFilteredList$;
-        }
-    }
-    /**
-     * 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?.touched || this.ngControl?.errors) {
-            this.cdr.markForCheck();
-        }
-    }
-    ngOnChanges(changes) {
-        if (this.isDynamicFilteringEnabled) {
-            const dynamicFilteredList = changes['dynamicFilteredList']?.currentValue;
-            if (dynamicFilteredList) {
-                this.dynamicFilteredList$.next(dynamicFilteredList);
-            }
-            return;
-        }
-        if (changes['itemsList'] || changes['suggestionsList'] || changes['valueField']) {
-            this.itemsList = this.isGrouped
-                ? this.itemsList
-                : AutocompleteUtils.excludeSuggestions(this.itemsList, this.suggestionsList, this.valueField);
-            this.initValue();
-        }
-        if (this.isPlatform && changes['companyColor']) {
-            this.setCompanyColorVariable();
-        }
-    }
-    ngAfterViewInit() {
-        if (this.type !== Autocomplete.LARGE) {
-            this.checkOverlap(Timeout.VIEW_INITIALIZED_COMPONENT_LOAD, true);
-        }
-        if (this.isPlatform) {
-            this.setCompanyColorVariable();
-        }
-        if (this.closeOnScroll) {
-            window.addEventListener('scroll', this.scrollEvent, true);
-        }
-        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() {
-        window.removeEventListener('scroll', this.scrollEvent, true);
-        if (this.observer) {
-            this.observer.disconnect();
-        }
-    }
-    registerOnChange(fn) {
-        this.onChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.onTouch = fn;
-    }
-    setDisabledState(isDisabled) {
-        this.disabled = isDisabled;
-        this.cdr.markForCheck();
-    }
-    writeValue(value) {
-        if (this.valuePrimitive && this.textField && this.valueField) {
-            if (this.type === Autocomplete.SINGLE) {
-                this.value = this.itemsList.find(item => item[this.valueField] === value);
-            }
-            else {
-                this.value = AutocompleteUtils.isArray(value)
-                    ? this.itemsList.filter(item => value.find((v) => v === item[this.valueField]))
-                    : [this.itemsList.find(item => item[this.valueField] === value)];
-                this.value = this.value.filter(Boolean).length ? this.value : null;
-            }
-        }
-        else {
-            this.value = value;
-        }
-        this.initValue();
-        this.cdr.markForCheck();
-    }
-    get isGrouped() {
-        return this.itemsList?.some((item) => item.isGroup);
-    }
-    onOptionSelected(event) {
-        const inputValue = event.option.value;
-        const itemValue = AutocompleteUtils.createValueItem(inputValue, this.textField, this.valueField);
-        this.addNewValue(itemValue);
-        if (this.type === this.autocompleteType.MULTI) {
-            this.checkOverlap();
-        }
-        queueMicrotask(() => {
-            if (this.type !== this.autocompleteType.SINGLE) {
-                this.inputValue = '';
-            }
-            else {
-                this.inputValue = AutocompleteUtils.transformDisplayValue(this.value, this.textField);
-            }
-            this.cdr.markForCheck();
-        });
-        this.onUpdate();
-    }
-    onOptionRemoved(option) {
-        setTimeout(() => this.autocomplete.closePanel(), 0);
-        const foundValue = this.value.find((v) => (this.compareWith ? this.compareWith(v, option) : v === option));
-        if (foundValue) {
-            this.value = this.value.filter((v) => (this.compareWith ? !this.compareWith(v, option) : v !== option));
-            this.matAutocomplete.options.forEach(matOption => {
-                if (matOption.value?.value === foundValue.value) {
-                    matOption.deselect();
-                }
-            });
-        }
-        if (this.type === this.autocompleteType.MULTI) {
-            this.checkOverlap();
-        }
-        if (!this.value.length) {
-            this.inputValue = '';
-        }
-        this.onUpdate();
-    }
-    onInputChange(event) {
-        const inputValue = event.target.value;
-        this.userInput$.next(inputValue);
-        if (inputValue.length >= this.minCharactersSearch) {
-            this.inputValueSearch$.next(inputValue);
-            this.searchTextChange.emit(inputValue);
-            const itemList = this.isGrouped ? this.itemsList.flatMap(groups => groups.items) : this.itemsList.flat();
-            const findValue = [...this.suggestionsList, ...itemList].find(v => inputValue === (this.textField ? v[this.textField] : v));
-            const count = AutocompleteUtils.countMatchingWords([...this.suggestionsList, ...itemList], this.inputValue, this.textField);
-            if (findValue && count === 1 && this.exactMatchSelect) {
-                this.onOptionSelected({ option: { value: findValue } });
-            }
-        }
-        else {
-            this.inputValueSearch$.next('');
-            this.userInput$.next('');
-        }
-        this.isAlreadyAdded = !!(this.compareWith
-            ? this.value.find((v) => this.compareWith(v, inputValue))
-            : AutocompleteUtils.findDuplicate(this.value, inputValue, this.textField));
-    }
-    onClear() {
-        this.inputValue = '';
-        this.value = AutocompleteUtils.isArray(this.value) ? [] : '';
-        this.isOverLapping = false;
-        this.overlapIndex = 0;
-        this.onUpdate();
-        this.matAutocomplete?.options.forEach(option => option.deselect());
-        this.onTouch();
-    }
-    refillInput() {
-        setTimeout(() => {
-            if (this.value && this.type === this.autocompleteType.SINGLE && !this.inputValue) {
-                this.inputValue = AutocompleteUtils.transformDisplayValue(this.value, this.textField);
-            }
-            else if (!this.inputValue && this.value?.length) {
-                this.inputValue = ' ';
-            }
-            else if (this.inputValue &&
-                this.type === Autocomplete.SINGLE &&
-                this.value &&
-                Object.keys(this.value).length) {
-                this.inputValue = AutocompleteUtils.transformDisplayValue(AutocompleteUtils.isArray(this.value) ? this.value[0] : this.value, this.textField);
-            }
-            else if (this.inputValue) {
-                this.inputValue = ' ';
-            }
-            this.inputValueSearch$.next('');
-            this.userInput$.next('');
-            this.isInputFocus = false;
-            this.onTouch();
-            this.blur.emit();
-        }, 0);
-    }
-    gotoUp() {
-        if (this.savedVirtualScrollViewport) {
-            this.savedVirtualScrollViewport.scrollToIndex(0);
-            this.savedVirtualScrollViewport.checkViewportSize();
-        }
-    }
-    onFocus() {
-        this.isInputFocus = true;
-        const inputValue = AutocompleteUtils.isArray(this.inputValue) ? this.inputValue[0] : this.inputValue;
-        if (AutocompleteUtils.isPrimitive(inputValue)) {
-            if (typeof inputValue !== 'number' && inputValue?.match(/^\s+/gm)) {
-                this.inputValue = inputValue.trimStart();
-            }
-        }
-        else {
-            if (inputValue[this.textField]?.match(/^\s+/gm)) {
-                this.inputValue = inputValue[this.textField].trimStart();
-            }
-        }
-        this.focus.emit();
-    }
-    checkOverlap(delay = Timeout.VIEW_INITIALIZED_AFTER_ACTION, init = false) {
-        this.isOverLapping = false;
-        this.isOverlapChecking = true;
-        this.inputOpacity = 0;
-        setTimeout(() => {
-            const inputWidth = this.inputWidth;
-            const tags = this.tagContainer?.nativeElement.querySelectorAll('.value-tag');
-            if (tags) {
-                let width = 0;
-                tags.forEach((tag, index) => {
-                    width += tag.getBoundingClientRect().width;
-                    const inpWidth = this.formFieldElement?.nativeElement.getBoundingClientRect().width - 20;
-                    this.firstTagMaxWidth =
-                        tags.length > 1
-                            ? inpWidth -
-                                (this.variant === DropdownVariation.DROPDOWN
-                                    ? Padding.DROPDOWN_SPACE_CONTAINER
-                                    : Padding.AUTOCOMPLETE_SPACE_CONTAINER)
-                            : inpWidth;
-                    if (!this.isOverLapping && width > inputWidth && index > 0) {
-                        this.isOverLapping = true;
-                        this.overlapIndex = index;
-                    }
-                });
-                this.isOverlapChecking = false;
-                if (init) {
-                    if (this.type === this.autocompleteType.SINGLE) {
-                        this.inputValue = AutocompleteUtils.transformDisplayValue(this.value[0], this.textField);
-                    }
-                    else if (this.value?.length) {
-                        this.inputValue = ' ';
-                    }
-                }
-                const tagContainerWidth = this.tagContainer.nativeElement.getBoundingClientRect().width;
-                this.tagContainer.nativeElement.style.maxWidth = tagContainerWidth / 100 ? '100%' : `${tagContainerWidth}px`;
-                this.cdr.markForCheck();
-            }
-            this.inputOpacity = 1;
-        }, delay);
-    }
-    onUpdate() {
-        this.inputValueSearch$.next('');
-        this.userInput$.next('');
-        if (!this.valuePrimitive) {
-            this.onChange(this.value);
-        }
-        else {
-            if (this.type === Autocomplete.SINGLE) {
-                this.onChange(this.value[this.valueField]);
-            }
-            else {
-                this.onChange(this.value.map((v) => v[this.valueField]));
-            }
-        }
-        this.updateControlMaxLengthValidity();
-        this.selectionChange.emit(this.value);
-    }
-    updateControlMaxLengthValidity() {
-        const control = this.ngControl?.control;
-        if (!control) {
-            return;
-        }
-        if (this.type !== Autocomplete.SINGLE) {
-            const existingErrors = control.errors ?? {};
-            if (this.value.length > this.maxItemSelected) {
-                control.setErrors({
-                    ...existingErrors,
-                    maxItemSelected: {
-                        expected: this.maxItemSelected,
-                        actual: this.value.length,
-                    },
-                });
-                control.markAsTouched();
-            }
-            else {
-                if (existingErrors['maxItemSelected']) {
-                    delete existingErrors['maxItemSelected'];
-                    control.setErrors(Object.keys(existingErrors).length ? existingErrors : null);
-                }
-            }
-        }
-    }
-    initValue() {
-        if (this.type === this.autocompleteType.SINGLE &&
-            this.variant !== DropdownVariation.DROPDOWN) {
-            if (AutocompleteUtils.isArray(this.value)) {
-                this.inputValue = AutocompleteUtils.transformDisplayValue(this.value[0], this.textField);
-            }
-            else {
-                this.inputValue = this.value ? AutocompleteUtils.transformDisplayValue(this.value, this.textField) : '';
-            }
-        }
-        else if (this.variant === DropdownVariation.DROPDOWN) {
-            this.inputValue =
-                (AutocompleteUtils.isArray(this.value) && !this.value?.length) || !this.value
-                    ? ''
-                    : this.type === Autocomplete.SINGLE
-                        ? AutocompleteUtils.transformDisplayValue(AutocompleteUtils.isArray(this.value) ? this.value[0] : this.value, this.textField)
-                        : ' ';
-        }
-        else {
-            this.inputValue = this.value?.length ? ' ' : '';
-        }
-        if (this.type === this.autocompleteType.MULTI) {
-            this.checkOverlap();
-        }
-    }
-    addNewValue(newValue) {
-        if (this.type !== this.autocompleteType.SINGLE && !this.value) {
-            this.value = [];
-        }
-        const foundDuplicate = this.compareWith
-            ? this.value.find((v) => this.compareWith(v, newValue))
-            : AutocompleteUtils.findDuplicate(this.value, newValue, this.textField);
-        if (this.type !== this.autocompleteType.SINGLE) {
-            this.value = foundDuplicate
-                ? this.value.filter((v) => this.compareWith ? !this.compareWith(v, foundDuplicate) : v !== foundDuplicate)
-                : [...this.value, newValue];
-        }
-        else {
-            this.value = newValue;
-        }
-    }
-    get isDropdown() {
-        return this.variant === DropdownVariation.DROPDOWN;
-    }
-    onChevronClick(autocomplete) {
-        if (autocomplete.isOpen) {
-            setTimeout(() => {
-                this.autocomplete.closePanel();
-            }, 0);
-        }
-    }
-    get inputWidth() {
-        return (this.formFieldElement?.nativeElement.getBoundingClientRect().width -
-            (this.isDropdown ? Padding.DROPDOWN_CONTAINER : Padding.AUTOCOMPLETE_CONTAINER));
-    }
-    /**
-     * Adding company color variable to the body to style overlay container that's out of the component scope.
-     */
-    setCompanyColorVariable() {
-        document.body.style.setProperty('--ui-autocomplete-option-color', `${this.companyColor}`);
-    }
-    subscriberDisplayChange() {
-        const autocompleteHostElement = this.el.nativeElement;
-        this.observer = new MutationObserver(mutations => {
-            mutations.forEach(mutation => {
-                if (mutation.attributeName === 'style') {
-                    const displayStyle = getComputedStyle(autocompleteHostElement).display;
-                    if (displayStyle !== 'none') {
-                        this.checkOverlap();
-                    }
-                }
-            });
-        });
-        this.observer.observe(autocompleteHostElement, {
-            attributes: true,
-            attributeFilter: ['style'],
-        });
-    }
-    get hasObjectValue() {
-        return this.value ? !!Object.keys(this.value).length : false;
-    }
-    onKeydown($event) {
-        /* eslint-disable no-underscore-dangle -- MatAutocomplete internals (_keyManager/_setScrollTop) drive keyboard nav */
-        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);
-        /* eslint-enable no-underscore-dangle */
-    }
-    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: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.25", type: AutocompleteComponent, isStandalone: false, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", placeholder: "placeholder", testId: "testId", itemValue: "itemValue", type: "type", minCharactersSearch: "minCharactersSearch", variant: "variant", showBottomContent: "showBottomContent", valuePrimitive: "valuePrimitive", fullWidth: "fullWidth", applicationTheme: "applicationTheme", required: "required", errors: "errors", companyColor: "companyColor", hideBuiltInErrors: "hideBuiltInErrors", hideLabelInErrors: "hideLabelInErrors", virtualScroll: ["virtualScroll", "virtualScroll", booleanAttribute], compareWith: "compareWith", dropdownPanelClass: "dropdownPanelClass", closeOnScroll: "closeOnScroll", size: "size", allowUserInput: "allowUserInput", clearable: "clearable", exactMatchSelect: "exactMatchSelect", maxItemSelected: "maxItemSelected", maxLength: "maxLength", isDynamicFilteringEnabled: "isDynamicFilteringEnabled", dynamicFilterLoading: "dynamicFilterLoading", dynamicFilteredList: "dynamicFilteredList", infiniteScroll: "infiniteScroll", hasMoreOptionsForInfiniteScroll: "hasMoreOptionsForInfiniteScroll" }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached", scrollViewportBottomReachedFiltered: "scrollViewportBottomReachedFiltered" }, host: { properties: { "class.full-width": "this.fullWidth", "attr.theme": "this.applicationTheme" } }, viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkVirtualScrollViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n    <mat-form-field\n      [color]=\"\n        safeErrors.length ||\n        (ngControl?.errors && ngControl?.touched) ||\n        (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n        ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n          ? 'warn'\n          : 'accent'\n      \"\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 #formField class=\"input-container\">\n        @if (textField ? value?.[textField] : 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-input'\"\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n          [uiPreventInput]=\"!allowUserInput\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"\n            (translationContext + 'SELECTED' | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\n          \"\n          [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n          matInput\n          [placeholder]=\"value && value.length ? '' : placeholder\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n        @if (\n          (type === autocompleteType.LARGE && value) ||\n          (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n        ) {\n          <div class=\"selected-items\" #tagContainer>\n            @for (valueItem of value; track valueItem; let i = $index) {\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                [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n                [style.display]=\"\n                  (isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)\n                    ? 'none'\n                    : 'block'\n                \"\n                [ngStyle]=\"{\n                  '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px',\n                }\"\n                [ngClass]=\"{\n                  'overlap-tag':\n                    isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n                }\"\n                (close)=\"onOptionRemoved(valueItem)\"\n              ></ui-tag>\n            }\n            @if (size === 'small') {\n              @if (value.length > 1) {\n                <div class=\"selected-count\">\n                  {{\n                    translationContext + 'SELECTED_AMOUNT'\n                      | uiTranslate: { numberSelected: (value | slice: overlapIndex).length }\n                      | async\n                  }}\n                </div>\n              }\n            } @else {\n              @if (value.length > 1 && isOverLapping) {\n                <div class=\"overlap-count\">\n                  <ui-tag\n                    [applicationTheme]=\"applicationTheme\"\n                    [isDisabled]=\"disabled\"\n                    [label]=\"'+' + (value.length - overlapIndex)\"\n                  ></ui-tag>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      @if (\n        (clearable && type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) ||\n        (type !== autocompleteType.SINGLE &&\n          value &&\n          value.length > 1 &&\n          ((AutocompleteUtils.isPrimitive(value) && value.length) ||\n            (!AutocompleteUtils.isPrimitive(value) &&\n              ((AutocompleteUtils.isArray(value) && value.length) ||\n                (!AutocompleteUtils.isArray(value) && !value.length)))))\n      ) {\n        <ui-icon\n          class=\"remove-selected\"\n          [tabIndex]=\"disabled ? -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)=\"gotoUp()\"\n      >\n        @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n          @if ((searchResult$ | async) === false) {\n            @if (!isDropdown) {\n              @if (suggestionsList.length) {\n                <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                  @for (suggested of suggestionsList; track suggested) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                      [value]=\"suggested\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                </mat-optgroup>\n              }\n              @if (value?.length && type !== autocompleteType.SINGLE) {\n                <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                  @for (item of value; track item) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span>{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                </mat-optgroup>\n              }\n              @if (isGrouped) {\n                @for (group of itemsList; track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  }\n                }\n              }\n              @if (value?.length && type === autocompleteType.SINGLE) {\n                <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                  <mat-option (mousedown)=\"$event.preventDefault()\" [class]=\"'selected-option'\" [value]=\"value\">\n                    <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n                    <ui-icon\n                      [applicationTheme]=\"applicationTheme\"\n                      [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                    ></ui-icon>\n                  </mat-option>\n                </mat-optgroup>\n              }\n            } @else {\n              @if (virtualScroll || infiniteScroll) {\n                <cdk-virtual-scroll-viewport\n                  [itemSize]=\"48\"\n                  [style.height.px]=\"getVirtualScrollHeight(itemsList.length)\"\n                  class=\"virtual-scroll\"\n                >\n                  @if (!isGrouped) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *cdkVirtualFor=\"let item of itemsList\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\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                  } @else {\n                    @for (group of itemsList; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            *cdkVirtualFor=\"let item of group.items\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                </cdk-virtual-scroll-viewport>\n              } @else {\n                @if (!isGrouped) {\n                  @for (item of itemsList; track item) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.items; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.items; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n\n          @if (filteredSuggestionList$ | async; as filteredSuggestionList) {\n            @if (filteredItemsList$ | 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 (isGrouped && filteredItemsList.length) {\n                    @for (group of filteredItemsList; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            *cdkVirtualFor=\"let item of group.filteredItems\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.filteredItems\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\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: value : valueField }\"\n                        *cdkVirtualFor=\"let item of filteredSuggestionList\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  }\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: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  } @else {\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: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    }\n                  }\n                  @if (isDynamicFilteringEnabled && 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 (allowAdd && !isAlreadyAdded) {\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 (!filteredItemsList.length && !filteredSuggestionList.length) {\n                      <mat-option [style.pointer-events]=\"'none'\">\n                        <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n                      </mat-option>\n                    }\n                  }\n                </cdk-virtual-scroll-viewport>\n              } @else {\n                @if (isGrouped && filteredItemsList.length) {\n                  @for (group of filteredItemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n                @if (isGrouped && filteredItemsList.length) {\n                  @for (group of filteredItemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n                @if (filteredSuggestionList.length) {\n                  <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                    @for (item of filteredSuggestionList; track item) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  </mat-optgroup>\n                }\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: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                } @else {\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: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                }\n                @if (isDynamicFilteringEnabled && 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 (allowAdd && !isAlreadyAdded) {\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 (!filteredItemsList.length && !filteredSuggestionList.length) {\n                    <mat-option [style.pointer-events]=\"'none'\">\n                      <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n                    </mat-option>\n                  }\n                }\n              }\n            }\n          }\n        }\n      </mat-autocomplete>\n      @if (\n        safeErrors.length ||\n        (ngControl?.errors | hasValidationError) ||\n        (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n        ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n      ) {\n        <mat-hint class=\"error\">\n          @if (\n            (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n            ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n          ) {\n            <div class=\"errors\">\n              <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n              <span>{{\n                translationContext + 'MAX_SELECTED_ERROR' | uiTranslate: { max: maxItemSelected } | async\n              }}</span>\n            </div>\n          }\n          @if (safeErrors.length) {\n            @for (error of safeErrors; track trackByFn($index, error)) {\n              <div class=\"errors\">\n                <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n                <span [innerHTML]=\"error\"></span>\n              </div>\n            }\n          }\n          @if (ngControl && !hideBuiltInErrors) {\n            <ui-validation-error\n              [ngControl]=\"ngControl\"\n              [label]=\"hideLabelInErrors ? null : label\"\n            ></ui-validation-error>\n          }\n        </mat-hint>\n      }\n    </mat-form-field>\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}.large-size .input-container{display:flex;flex-direction:column-reverse}.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}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.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 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 .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 .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.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}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { 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: "directive", type: i4.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: "directive", type: i5.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: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: i7.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i8.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "directive", type: i9.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i9.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i9.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "component", type: i11.SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i1.SlicePipe, name: "slice" }, { kind: "pipe", type: i13.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i13.HasValidationErrorPipe, name: "hasValidationError" }, { 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: AutocompleteComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'ui-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n    <mat-form-field\n      [color]=\"\n        safeErrors.length ||\n        (ngControl?.errors && ngControl?.touched) ||\n        (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n        ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n          ? 'warn'\n          : 'accent'\n      \"\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 #formField class=\"input-container\">\n        @if (textField ? value?.[textField] : 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-input'\"\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n          [uiPreventInput]=\"!allowUserInput\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"\n            (translationContext + 'SELECTED' | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\n          \"\n          [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n          matInput\n          [placeholder]=\"value && value.length ? '' : placeholder\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n        @if (\n          (type === autocompleteType.LARGE && value) ||\n          (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n        ) {\n          <div class=\"selected-items\" #tagContainer>\n            @for (valueItem of value; track valueItem; let i = $index) {\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                [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n                [style.display]=\"\n                  (isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)\n                    ? 'none'\n                    : 'block'\n                \"\n                [ngStyle]=\"{\n                  '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px',\n                }\"\n                [ngClass]=\"{\n                  'overlap-tag':\n                    isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n                }\"\n                (close)=\"onOptionRemoved(valueItem)\"\n              ></ui-tag>\n            }\n            @if (size === 'small') {\n              @if (value.length > 1) {\n                <div class=\"selected-count\">\n                  {{\n                    translationContext + 'SELECTED_AMOUNT'\n                      | uiTranslate: { numberSelected: (value | slice: overlapIndex).length }\n                      | async\n                  }}\n                </div>\n              }\n            } @else {\n              @if (value.length > 1 && isOverLapping) {\n                <div class=\"overlap-count\">\n                  <ui-tag\n                    [applicationTheme]=\"applicationTheme\"\n                    [isDisabled]=\"disabled\"\n                    [label]=\"'+' + (value.length - overlapIndex)\"\n                  ></ui-tag>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      @if (\n        (clearable && type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) ||\n        (type !== autocompleteType.SINGLE &&\n          value &&\n          value.length > 1 &&\n          ((AutocompleteUtils.isPrimitive(value) && value.length) ||\n            (!AutocompleteUtils.isPrimitive(value) &&\n              ((AutocompleteUtils.isArray(value) && value.length) ||\n                (!AutocompleteUtils.isArray(value) && !value.length)))))\n      ) {\n        <ui-icon\n          class=\"remove-selected\"\n          [tabIndex]=\"disabled ? -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)=\"gotoUp()\"\n      >\n        @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n          @if ((searchResult$ | async) === false) {\n            @if (!isDropdown) {\n              @if (suggestionsList.length) {\n                <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                  @for (suggested of suggestionsList; track suggested) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                      [value]=\"suggested\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                </mat-optgroup>\n              }\n              @if (value?.length && type !== autocompleteType.SINGLE) {\n                <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                  @for (item of value; track item) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span>{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                </mat-optgroup>\n              }\n              @if (isGrouped) {\n                @for (group of itemsList; track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  }\n                }\n              }\n              @if (value?.length && type === autocompleteType.SINGLE) {\n                <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                  <mat-option (mousedown)=\"$event.preventDefault()\" [class]=\"'selected-option'\" [value]=\"value\">\n                    <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n                    <ui-icon\n                      [applicationTheme]=\"applicationTheme\"\n                      [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                    ></ui-icon>\n                  </mat-option>\n                </mat-optgroup>\n              }\n            } @else {\n              @if (virtualScroll || infiniteScroll) {\n                <cdk-virtual-scroll-viewport\n                  [itemSize]=\"48\"\n                  [style.height.px]=\"getVirtualScrollHeight(itemsList.length)\"\n                  class=\"virtual-scroll\"\n                >\n                  @if (!isGrouped) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *cdkVirtualFor=\"let item of itemsList\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\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                  } @else {\n                    @for (group of itemsList; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            *cdkVirtualFor=\"let item of group.items\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                </cdk-virtual-scroll-viewport>\n              } @else {\n                @if (!isGrouped) {\n                  @for (item of itemsList; track item) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.items; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.items; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n\n          @if (filteredSuggestionList$ | async; as filteredSuggestionList) {\n            @if (filteredItemsList$ | 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 (isGrouped && filteredItemsList.length) {\n                    @for (group of filteredItemsList; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            *cdkVirtualFor=\"let item of group.filteredItems\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.filteredItems\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\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: value : valueField }\"\n                        *cdkVirtualFor=\"let item of filteredSuggestionList\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  }\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: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  } @else {\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: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    }\n                  }\n                  @if (isDynamicFilteringEnabled && 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 (allowAdd && !isAlreadyAdded) {\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 (!filteredItemsList.length && !filteredSuggestionList.length) {\n                      <mat-option [style.pointer-events]=\"'none'\">\n                        <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n                      </mat-option>\n                    }\n                  }\n                </cdk-virtual-scroll-viewport>\n              } @else {\n                @if (isGrouped && filteredItemsList.length) {\n                  @for (group of filteredItemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n                @if (isGrouped && filteredItemsList.length) {\n                  @for (group of filteredItemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n                @if (filteredSuggestionList.length) {\n                  <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                    @for (item of filteredSuggestionList; track item) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  </mat-optgroup>\n                }\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: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                } @else {\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: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                }\n                @if (isDynamicFilteringEnabled && 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 (allowAdd && !isAlreadyAdded) {\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 (!filteredItemsList.length && !filteredSuggestionList.length) {\n                    <mat-option [style.pointer-events]=\"'none'\">\n                      <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n                    </mat-option>\n                  }\n                }\n              }\n            }\n          }\n        }\n      </mat-autocomplete>\n      @if (\n        safeErrors.length ||\n        (ngControl?.errors | hasValidationError) ||\n        (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n        ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n      ) {\n        <mat-hint class=\"error\">\n          @if (\n            (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n            ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n          ) {\n            <div class=\"errors\">\n              <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n              <span>{{\n                translationContext + 'MAX_SELECTED_ERROR' | uiTranslate: { max: maxItemSelected } | async\n              }}</span>\n            </div>\n          }\n          @if (safeErrors.length) {\n            @for (error of safeErrors; track trackByFn($index, error)) {\n              <div class=\"errors\">\n                <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n                <span [innerHTML]=\"error\"></span>\n              </div>\n            }\n          }\n          @if (ngControl && !hideBuiltInErrors) {\n            <ui-validation-error\n              [ngControl]=\"ngControl\"\n              [label]=\"hideLabelInErrors ? null : label\"\n            ></ui-validation-error>\n          }\n        </mat-hint>\n      }\n    </mat-form-field>\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}.large-size .input-container{display:flex;flex-direction:column-reverse}.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}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.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 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 .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 .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.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}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { itemsList: [{
-                type: Input
-            }], suggestionsList: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], allowAdd: [{
-                type: Input
-            }], textField: [{
-                type: Input
-            }], valueField: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], testId: [{
-                type: Input
-            }], itemValue: [{
-                type: Input
-            }], type: [{
-                type: Input
-            }], minCharactersSearch: [{
-                type: Input
-            }], variant: [{
-                type: Input,
-                args: [{ required: true }]
-            }], showBottomContent: [{
-                type: Input
-            }], valuePrimitive: [{
-                type: Input
-            }], fullWidth: [{
-                type: HostBinding,
-                args: ['class.full-width']
-            }, {
-                type: Input
-            }], applicationTheme: [{
-                type: HostBinding,
-                args: ['attr.theme']
-            }, {
-                type: Input
-            }], required: [{
-                type: Input
-            }], errors: [{
-                type: Input
-            }], companyColor: [{
-                type: Input
-            }], hideBuiltInErrors: [{
-                type: Input
-            }], hideLabelInErrors: [{
-                type: Input
-            }], virtualScroll: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], compareWith: [{
-                type: Input
-            }], dropdownPanelClass: [{
-                type: Input
-            }], closeOnScroll: [{
-                type: Input
-            }], size: [{
-                type: Input
-            }], allowUserInput: [{
-                type: Input
-            }], clearable: [{
-                type: Input
-            }], exactMatchSelect: [{
-                type: Input
-            }], maxItemSelected: [{
-                type: Input
-            }], maxLength: [{
-                type: Input
-            }], isDynamicFilteringEnabled: [{
-                type: Input
-            }], dynamicFilterLoading: [{
-                type: Input
-            }], dynamicFilteredList: [{
-                type: Input
-            }], infiniteScroll: [{
-                type: Input
-            }], hasMoreOptionsForInfiniteScroll: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], searchTextChange: [{
-                type: Output
-            }], blur: [{
-                type: Output
-            }], focus: [{
-                type: Output
-            }], scrollViewportBottomReached: [{
-                type: Output
-            }], scrollViewportBottomReachedFiltered: [{
-                type: Output
-            }], formFieldElement: [{
-                type: ViewChild,
-                args: ['formField']
-            }], tagContainer: [{
-                type: ViewChild,
-                args: ['tagContainer']
-            }], autocomplete: [{
-                type: ViewChild,
-                args: ['trigger']
-            }], cdkVirtualScrollViewport: [{
-                type: ViewChild,
-                args: [CdkVirtualScrollViewport, { static: false }]
-            }], matAutocomplete: [{
-                type: ViewChild,
-                args: ['autocomplete']
-            }], matInput: [{
-                type: ViewChild,
-                args: ['matInput']
-            }] } });
-
-class AutocompleteComponentModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteComponentModule, declarations: [AutocompleteComponent, TransformItemPipe, IncludesPipe, SelectTextDirective], imports: [CommonModule,
-            MatFormFieldModule,
-            MatAutocompleteModule,
-            MatInputModule,
-            FormsModule,
-            TagComponentModule,
-            MatChipsModule,
-            IconComponentModule,
-            UiTranslatePipe,
-            ValidationErrorModule,
-            HasValidationErrorPipe,
-            CdkVirtualForOf,
-            CdkVirtualScrollViewport,
-            CdkFixedSizeVirtualScroll,
-            PreventInputDirective,
-            SpinnerComponentModule], exports: [AutocompleteComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteComponentModule, providers: [TransformItemPipe, IncludesPipe, SelectTextDirective], imports: [CommonModule,
-            MatFormFieldModule,
-            MatAutocompleteModule,
-            MatInputModule,
-            FormsModule,
-            TagComponentModule,
-            MatChipsModule,
-            IconComponentModule,
-            ValidationErrorModule,
-            CdkVirtualScrollViewport,
-            SpinnerComponentModule] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.25", ngImport: i0, type: AutocompleteComponentModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [AutocompleteComponent, TransformItemPipe, IncludesPipe, SelectTextDirective],
-                    imports: [
-                        CommonModule,
-                        MatFormFieldModule,
-                        MatAutocompleteModule,
-                        MatInputModule,
-                        FormsModule,
-                        TagComponentModule,
-                        MatChipsModule,
-                        IconComponentModule,
-                        UiTranslatePipe,
-                        ValidationErrorModule,
-                        HasValidationErrorPipe,
-                        CdkVirtualForOf,
-                        CdkVirtualScrollViewport,
-                        CdkFixedSizeVirtualScroll,
-                        PreventInputDirective,
-                        SpinnerComponentModule,
-                    ],
-                    exports: [AutocompleteComponent],
-                    providers: [TransformItemPipe, IncludesPipe, SelectTextDirective],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
+var PreventInputDirective = class PreventInputDirective {
+	onKeyDown(event) {
+		if (![
+			"ArrowLeft",
+			"ArrowRight",
+			"ArrowUp",
+			"ArrowDown",
+			"Backspace",
+			"Tab",
+			"Delete",
+			"Control",
+			"Shift",
+			"Alt"
+		].includes(event.key) && !event.ctrlKey && !event.metaKey && this.uiPreventInput) event.preventDefault();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: PreventInputDirective,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			type: PreventInputDirective,
+			isStandalone: true,
+			selector: "[uiPreventInput]",
+			inputs: { uiPreventInput: "uiPreventInput" },
+			host: { listeners: { "keydown": "onKeyDown($event)" } },
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: PreventInputDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[uiPreventInput]",
+			standalone: true
+		}]
+	}],
+	propDecorators: {
+		uiPreventInput: [{ type: Input }],
+		onKeyDown: [{
+			type: HostListener,
+			args: ["keydown", ["$event"]]
+		}]
+	}
+});
+var SelectTextDirective = class SelectTextDirective {
+	constructor(el) {
+		this.el = el;
+	}
+	setTextColor() {
+		const textElement = this.el.nativeElement;
+		setTimeout(() => {
+			const { textContent } = textElement;
+			if (this.selectText && textContent) textElement.innerHTML = textContent.replace(new RegExp(this.selectText, "gmi"), (match) => `<span style="font-weight: bold" >${match}</span>`);
+		}, 0);
+	}
+	ngOnChanges() {
+		if (this.selectText) this.setTextColor();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: SelectTextDirective,
+			deps: [{ token: i0.ElementRef }],
+			target: i0.ɵɵFactoryTarget.Directive
+		});
+	}
+	static {
+		this.ɵdir = i0.ɵɵngDeclareDirective({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			type: SelectTextDirective,
+			isStandalone: false,
+			selector: "[selectText]",
+			inputs: { selectText: "selectText" },
+			usesOnChanges: true,
+			ngImport: i0
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: SelectTextDirective,
+	decorators: [{
+		type: Directive,
+		args: [{
+			selector: "[selectText]",
+			standalone: false
+		}]
+	}],
+	ctorParameters: () => [{ type: i0.ElementRef }],
+	propDecorators: { selectText: [{ type: Input }] }
+});
+var TransformItemPipe = class TransformItemPipe {
+	transform(value, field, getValueList = false) {
+		if (getValueList) return AutocompleteUtils.isArray(value) ? value.map((item) => field ? item[field] : item) : field ? value?.[field] : value;
+		if (AutocompleteUtils.isPrimitive(value)) return value;
+		else if (!AutocompleteUtils.isPrimitive(value) && field && (value?.[field] || value[0][field])) return value?.[field] || value[0][field];
+		else AutocompleteUtils.throwInvalidSetupError();
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TransformItemPipe,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Pipe
+		});
+	}
+	static {
+		this.ɵpipe = i0.ɵɵngDeclarePipe({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: TransformItemPipe,
+			isStandalone: false,
+			name: "transformItem"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: TransformItemPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{
+			name: "transformItem",
+			standalone: false
+		}]
+	}]
+});
+var IncludesPipe = class IncludesPipe {
+	transform(value, values, valueField) {
+		return Array.isArray(values) ? Boolean(values?.find((v) => valueField ? v?.[valueField] === value?.[valueField] : value === v)) : valueField ? value?.[valueField] === values?.[valueField] : value === values;
+	}
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: IncludesPipe,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Pipe
+		});
+	}
+	static {
+		this.ɵpipe = i0.ɵɵngDeclarePipe({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: IncludesPipe,
+			isStandalone: false,
+			name: "includes"
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: IncludesPipe,
+	decorators: [{
+		type: Pipe,
+		args: [{
+			name: "includes",
+			standalone: false
+		}]
+	}]
+});
+var AutocompleteComponent = class AutocompleteComponent {
+	set itemValue(v) {
+		this.value = AutocompleteUtils.isArray(v) ? v : v ? [v] : [];
+	}
+	set errors(errors) {
+		this.safeErrors = errors?.filter(Boolean) ?? [];
+	}
+	set cdkVirtualScrollViewport(viewport) {
+		if (this.savedVirtualScrollSubscription) this.savedVirtualScrollSubscription.unsubscribe();
+		if (viewport) {
+			this.savedVirtualScrollViewport = viewport;
+			if (this.infiniteScroll) {
+				setTimeout(() => {
+					this.inputValueSearch$.pipe(take(1)).subscribe((searchValue) => {
+						this.isFilteredViewport = !!searchValue;
+					});
+				}, 0);
+				this.savedVirtualScrollSubscription = this.savedVirtualScrollViewport.elementScrolled().pipe(map(() => this.savedVirtualScrollViewport.measureScrollOffset("bottom")), filter((offset) => offset < this.savedVirtualScrollViewport.getViewportSize() * .2), throttleTime(200), takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+					if (this.isFilteredViewport) this.scrollViewportBottomReachedFiltered.emit();
+					else this.scrollViewportBottomReached.emit();
+				});
+			}
+		}
+	}
+	constructor() {
+		this.itemsList = [];
+		this.suggestionsList = [];
+		this.disabled = false;
+		this.allowAdd = true;
+		this.textField = "";
+		this.valueField = "";
+		this.label = "";
+		this.placeholder = "";
+		this.testId = null;
+		this.type = "multi";
+		this.minCharactersSearch = 3;
+		this.variant = DropdownVariation.AUTOCOMPLETE;
+		this.showBottomContent = true;
+		this.valuePrimitive = false;
+		this.fullWidth = false;
+		this.applicationTheme = "light";
+		this.companyColor = "#FFF2FC";
+		this.hideBuiltInErrors = false;
+		this.hideLabelInErrors = false;
+		this.virtualScroll = false;
+		this.dropdownPanelClass = "";
+		this.closeOnScroll = false;
+		this.size = "medium";
+		this.allowUserInput = true;
+		this.clearable = true;
+		this.exactMatchSelect = true;
+		this.maxItemSelected = Infinity;
+		this.isDynamicFilteringEnabled = false;
+		this.dynamicFilterLoading = false;
+		this.dynamicFilteredList = null;
+		this.infiniteScroll = false;
+		this.hasMoreOptionsForInfiniteScroll = true;
+		this.selectionChange = new EventEmitter();
+		this.searchTextChange = new EventEmitter();
+		this.blur = new EventEmitter();
+		this.focus = new EventEmitter();
+		this.scrollViewportBottomReached = new EventEmitter();
+		this.scrollViewportBottomReachedFiltered = new EventEmitter();
+		this.safeErrors = [];
+		this.inputValue = "";
+		this.isInputFocus = false;
+		this.autocompleteType = Autocomplete;
+		this.isOverLapping = false;
+		this.isOverlapChecking = true;
+		this.overlapIndex = 0;
+		this.inputOpacity = 1;
+		this.firstTagMaxWidth = 0;
+		this.inputValueSearch$ = new BehaviorSubject("");
+		this.userInput$ = new ReplaySubject(1);
+		this.dynamicFilteredList$ = new BehaviorSubject(null);
+		this.filteredItemsList$ = this.inputValueSearch$.pipe(startWith(""), map((inputValue) => inputValue.length ? AutocompleteUtils.filterItems(this.itemsList, inputValue, this.textField, this.isGrouped) : null));
+		this.filteredSuggestionList$ = this.inputValueSearch$.pipe(map((inputValue) => inputValue.length ? AutocompleteUtils.filterItems(this.suggestionsList, inputValue, this.textField) : null));
+		this.isFilteredViewport = false;
+		this.scrollEvent = (event) => {
+			const isNotAutocompleteScroll = !event.target?.id?.includes("mat-autocomplete-") && !event.target?.parentElement?.id?.includes("mat-autocomplete-") && !event.target?.classList?.contains("mat-mdc-autocomplete-trigger");
+			if (this.autocomplete.panelOpen && isNotAutocompleteScroll) this.autocomplete.closePanel();
+		};
+		this.searchResult$ = this.inputValueSearch$.pipe(map((inputValue) => !!inputValue.trim()));
+		this.translationContext = "AUTOCOMPLETE.";
+		this.AutocompleteUtils = AutocompleteUtils;
+		this.defaultAppTheme = inject("CANOPYUI_DEFAULT_APPLICATION_THEME", { optional: true });
+		this.cdr = inject(ChangeDetectorRef);
+		this.ngControl = inject(NgControl, {
+			optional: true,
+			self: true
+		});
+		this.platformId = inject(PLATFORM_ID);
+		this.el = inject(ElementRef);
+		this.focusMonitor = inject(FocusMonitor);
+		this.destroyRef = inject(DestroyRef);
+		this.ngZone = inject(NgZone);
+		this.isPlatform = isPlatformBrowser(this.platformId);
+		this.keyboardFocused = signal(false, ...ngDevMode ? [{ debugName: "keyboardFocused" }] : /* istanbul ignore next */ []);
+		this.isAlreadyAdded = false;
+		this.onChange = (_) => {};
+		this.onTouch = () => {};
+		this.trackByFn = (index, value) => value;
+		if (this.ngControl != null) this.ngControl.valueAccessor = this;
+		if (this.defaultAppTheme) this.applicationTheme = this.defaultAppTheme;
+		this.subscriberDisplayChange();
+	}
+	ngOnInit() {
+		if (this.isDynamicFilteringEnabled) this.filteredItemsList$ = this.dynamicFilteredList$;
+	}
+	ngDoCheck() {
+		if (this.ngControl?.touched || this.ngControl?.errors) this.cdr.markForCheck();
+	}
+	ngOnChanges(changes) {
+		if (this.isDynamicFilteringEnabled) {
+			const dynamicFilteredList = changes["dynamicFilteredList"]?.currentValue;
+			if (dynamicFilteredList) this.dynamicFilteredList$.next(dynamicFilteredList);
+			return;
+		}
+		if (changes["itemsList"] || changes["suggestionsList"] || changes["valueField"]) {
+			this.itemsList = this.isGrouped ? this.itemsList : AutocompleteUtils.excludeSuggestions(this.itemsList, this.suggestionsList, this.valueField);
+			this.initValue();
+		}
+		if (this.isPlatform && changes["companyColor"]) this.setCompanyColorVariable();
+	}
+	ngAfterViewInit() {
+		if (this.type !== Autocomplete.LARGE) this.checkOverlap(Timeout.VIEW_INITIALIZED_COMPONENT_LOAD, true);
+		if (this.isPlatform) this.setCompanyColorVariable();
+		if (this.closeOnScroll) window.addEventListener("scroll", this.scrollEvent, true);
+		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() {
+		window.removeEventListener("scroll", this.scrollEvent, true);
+		if (this.observer) this.observer.disconnect();
+	}
+	registerOnChange(fn) {
+		this.onChange = fn;
+	}
+	registerOnTouched(fn) {
+		this.onTouch = fn;
+	}
+	setDisabledState(isDisabled) {
+		this.disabled = isDisabled;
+		this.cdr.markForCheck();
+	}
+	writeValue(value) {
+		if (this.valuePrimitive && this.textField && this.valueField) {
+			if (this.type === Autocomplete.SINGLE) this.value = this.itemsList.find((item) => item[this.valueField] === value);
+			else {
+				this.value = AutocompleteUtils.isArray(value) ? this.itemsList.filter((item) => value.find((v) => v === item[this.valueField])) : [this.itemsList.find((item) => item[this.valueField] === value)];
+				this.value = this.value.filter(Boolean).length ? this.value : null;
+			}
+		} else this.value = value;
+		this.initValue();
+		this.cdr.markForCheck();
+	}
+	get isGrouped() {
+		return this.itemsList?.some((item) => item.isGroup);
+	}
+	onOptionSelected(event) {
+		const inputValue = event.option.value;
+		const itemValue = AutocompleteUtils.createValueItem(inputValue, this.textField, this.valueField);
+		this.addNewValue(itemValue);
+		if (this.type === this.autocompleteType.MULTI) this.checkOverlap();
+		queueMicrotask(() => {
+			if (this.type !== this.autocompleteType.SINGLE) this.inputValue = "";
+			else this.inputValue = AutocompleteUtils.transformDisplayValue(this.value, this.textField);
+			this.cdr.markForCheck();
+		});
+		this.onUpdate();
+	}
+	onOptionRemoved(option) {
+		setTimeout(() => this.autocomplete.closePanel(), 0);
+		const foundValue = this.value.find((v) => this.compareWith ? this.compareWith(v, option) : v === option);
+		if (foundValue) {
+			this.value = this.value.filter((v) => this.compareWith ? !this.compareWith(v, option) : v !== option);
+			this.matAutocomplete.options.forEach((matOption) => {
+				if (matOption.value?.value === foundValue.value) matOption.deselect();
+			});
+		}
+		if (this.type === this.autocompleteType.MULTI) this.checkOverlap();
+		if (!this.value.length) this.inputValue = "";
+		this.onUpdate();
+	}
+	onInputChange(event) {
+		const inputValue = event.target.value;
+		this.userInput$.next(inputValue);
+		if (inputValue.length >= this.minCharactersSearch) {
+			this.inputValueSearch$.next(inputValue);
+			this.searchTextChange.emit(inputValue);
+			const itemList = this.isGrouped ? this.itemsList.flatMap((groups) => groups.items) : this.itemsList.flat();
+			const findValue = [...this.suggestionsList, ...itemList].find((v) => inputValue === (this.textField ? v[this.textField] : v));
+			const count = AutocompleteUtils.countMatchingWords([...this.suggestionsList, ...itemList], this.inputValue, this.textField);
+			if (findValue && count === 1 && this.exactMatchSelect) this.onOptionSelected({ option: { value: findValue } });
+		} else {
+			this.inputValueSearch$.next("");
+			this.userInput$.next("");
+		}
+		this.isAlreadyAdded = !!(this.compareWith ? this.value.find((v) => this.compareWith(v, inputValue)) : AutocompleteUtils.findDuplicate(this.value, inputValue, this.textField));
+	}
+	onClear() {
+		this.inputValue = "";
+		this.value = AutocompleteUtils.isArray(this.value) ? [] : "";
+		this.isOverLapping = false;
+		this.overlapIndex = 0;
+		this.onUpdate();
+		this.matAutocomplete?.options.forEach((option) => option.deselect());
+		this.onTouch();
+	}
+	refillInput() {
+		setTimeout(() => {
+			if (this.value && this.type === this.autocompleteType.SINGLE && !this.inputValue) this.inputValue = AutocompleteUtils.transformDisplayValue(this.value, this.textField);
+			else if (!this.inputValue && this.value?.length) this.inputValue = " ";
+			else if (this.inputValue && this.type === Autocomplete.SINGLE && this.value && Object.keys(this.value).length) this.inputValue = AutocompleteUtils.transformDisplayValue(AutocompleteUtils.isArray(this.value) ? this.value[0] : this.value, this.textField);
+			else if (this.inputValue) this.inputValue = " ";
+			this.inputValueSearch$.next("");
+			this.userInput$.next("");
+			this.isInputFocus = false;
+			this.onTouch();
+			this.blur.emit();
+		}, 0);
+	}
+	gotoUp() {
+		if (this.savedVirtualScrollViewport) {
+			this.savedVirtualScrollViewport.scrollToIndex(0);
+			this.savedVirtualScrollViewport.checkViewportSize();
+		}
+	}
+	onFocus() {
+		this.isInputFocus = true;
+		const inputValue = AutocompleteUtils.isArray(this.inputValue) ? this.inputValue[0] : this.inputValue;
+		if (AutocompleteUtils.isPrimitive(inputValue)) {
+			if (typeof inputValue !== "number" && inputValue?.match(/^\s+/gm)) this.inputValue = inputValue.trimStart();
+		} else if (inputValue[this.textField]?.match(/^\s+/gm)) this.inputValue = inputValue[this.textField].trimStart();
+		this.focus.emit();
+	}
+	checkOverlap(delay = Timeout.VIEW_INITIALIZED_AFTER_ACTION, init = false) {
+		this.isOverLapping = false;
+		this.isOverlapChecking = true;
+		this.inputOpacity = 0;
+		setTimeout(() => {
+			const inputWidth = this.inputWidth;
+			const tags = this.tagContainer?.nativeElement.querySelectorAll(".value-tag");
+			if (tags) {
+				let width = 0;
+				tags.forEach((tag, index) => {
+					width += tag.getBoundingClientRect().width;
+					const inpWidth = this.formFieldElement?.nativeElement.getBoundingClientRect().width - 20;
+					this.firstTagMaxWidth = tags.length > 1 ? inpWidth - (this.variant === DropdownVariation.DROPDOWN ? Padding.DROPDOWN_SPACE_CONTAINER : Padding.AUTOCOMPLETE_SPACE_CONTAINER) : inpWidth;
+					if (!this.isOverLapping && width > inputWidth && index > 0) {
+						this.isOverLapping = true;
+						this.overlapIndex = index;
+					}
+				});
+				this.isOverlapChecking = false;
+				if (init) {
+					if (this.type === this.autocompleteType.SINGLE) this.inputValue = AutocompleteUtils.transformDisplayValue(this.value[0], this.textField);
+					else if (this.value?.length) this.inputValue = " ";
+				}
+				const tagContainerWidth = this.tagContainer.nativeElement.getBoundingClientRect().width;
+				this.tagContainer.nativeElement.style.maxWidth = tagContainerWidth / 100 ? "100%" : `${tagContainerWidth}px`;
+				this.cdr.markForCheck();
+			}
+			this.inputOpacity = 1;
+		}, delay);
+	}
+	onUpdate() {
+		this.inputValueSearch$.next("");
+		this.userInput$.next("");
+		if (!this.valuePrimitive) this.onChange(this.value);
+		else if (this.type === Autocomplete.SINGLE) this.onChange(this.value[this.valueField]);
+		else this.onChange(this.value.map((v) => v[this.valueField]));
+		this.updateControlMaxLengthValidity();
+		this.selectionChange.emit(this.value);
+	}
+	updateControlMaxLengthValidity() {
+		const control = this.ngControl?.control;
+		if (!control) return;
+		if (this.type !== Autocomplete.SINGLE) {
+			const existingErrors = control.errors ?? {};
+			if (this.value.length > this.maxItemSelected) {
+				control.setErrors({
+					...existingErrors,
+					maxItemSelected: {
+						expected: this.maxItemSelected,
+						actual: this.value.length
+					}
+				});
+				control.markAsTouched();
+			} else if (existingErrors["maxItemSelected"]) {
+				delete existingErrors["maxItemSelected"];
+				control.setErrors(Object.keys(existingErrors).length ? existingErrors : null);
+			}
+		}
+	}
+	initValue() {
+		if (this.type === this.autocompleteType.SINGLE && this.variant !== DropdownVariation.DROPDOWN) {
+			if (AutocompleteUtils.isArray(this.value)) this.inputValue = AutocompleteUtils.transformDisplayValue(this.value[0], this.textField);
+			else this.inputValue = this.value ? AutocompleteUtils.transformDisplayValue(this.value, this.textField) : "";
+		} else if (this.variant === DropdownVariation.DROPDOWN) this.inputValue = AutocompleteUtils.isArray(this.value) && !this.value?.length || !this.value ? "" : this.type === Autocomplete.SINGLE ? AutocompleteUtils.transformDisplayValue(AutocompleteUtils.isArray(this.value) ? this.value[0] : this.value, this.textField) : " ";
+		else this.inputValue = this.value?.length ? " " : "";
+		if (this.type === this.autocompleteType.MULTI) this.checkOverlap();
+	}
+	addNewValue(newValue) {
+		if (this.type !== this.autocompleteType.SINGLE && !this.value) this.value = [];
+		const foundDuplicate = this.compareWith ? this.value.find((v) => this.compareWith(v, newValue)) : AutocompleteUtils.findDuplicate(this.value, newValue, this.textField);
+		if (this.type !== this.autocompleteType.SINGLE) this.value = foundDuplicate ? this.value.filter((v) => this.compareWith ? !this.compareWith(v, foundDuplicate) : v !== foundDuplicate) : [...this.value, newValue];
+		else this.value = newValue;
+	}
+	get isDropdown() {
+		return this.variant === DropdownVariation.DROPDOWN;
+	}
+	onChevronClick(autocomplete) {
+		if (autocomplete.isOpen) setTimeout(() => {
+			this.autocomplete.closePanel();
+		}, 0);
+	}
+	get inputWidth() {
+		return this.formFieldElement?.nativeElement.getBoundingClientRect().width - (this.isDropdown ? Padding.DROPDOWN_CONTAINER : Padding.AUTOCOMPLETE_CONTAINER);
+	}
+	setCompanyColorVariable() {
+		document.body.style.setProperty("--ui-autocomplete-option-color", `${this.companyColor}`);
+	}
+	subscriberDisplayChange() {
+		const autocompleteHostElement = this.el.nativeElement;
+		this.observer = new MutationObserver((mutations) => {
+			mutations.forEach((mutation) => {
+				if (mutation.attributeName === "style") {
+					if (getComputedStyle(autocompleteHostElement).display !== "none") this.checkOverlap();
+				}
+			});
+		});
+		this.observer.observe(autocompleteHostElement, {
+			attributes: true,
+			attributeFilter: ["style"]
+		});
+	}
+	get hasObjectValue() {
+		return this.value ? !!Object.keys(this.value).length : false;
+	}
+	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: AutocompleteComponent,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.Component
+		});
+	}
+	static {
+		this.ɵcmp = i0.ɵɵngDeclareComponent({
+			minVersion: "17.0.0",
+			version: "22.2.4",
+			type: AutocompleteComponent,
+			isStandalone: false,
+			selector: "ui-autocomplete",
+			inputs: {
+				itemsList: "itemsList",
+				suggestionsList: "suggestionsList",
+				disabled: "disabled",
+				allowAdd: "allowAdd",
+				textField: "textField",
+				valueField: "valueField",
+				label: "label",
+				placeholder: "placeholder",
+				testId: "testId",
+				itemValue: "itemValue",
+				type: "type",
+				minCharactersSearch: "minCharactersSearch",
+				variant: "variant",
+				showBottomContent: "showBottomContent",
+				valuePrimitive: "valuePrimitive",
+				fullWidth: "fullWidth",
+				applicationTheme: "applicationTheme",
+				required: "required",
+				errors: "errors",
+				companyColor: "companyColor",
+				hideBuiltInErrors: "hideBuiltInErrors",
+				hideLabelInErrors: "hideLabelInErrors",
+				virtualScroll: [
+					"virtualScroll",
+					"virtualScroll",
+					booleanAttribute
+				],
+				compareWith: "compareWith",
+				dropdownPanelClass: "dropdownPanelClass",
+				closeOnScroll: "closeOnScroll",
+				size: "size",
+				allowUserInput: "allowUserInput",
+				clearable: "clearable",
+				exactMatchSelect: "exactMatchSelect",
+				maxItemSelected: "maxItemSelected",
+				maxLength: "maxLength",
+				isDynamicFilteringEnabled: "isDynamicFilteringEnabled",
+				dynamicFilterLoading: "dynamicFilterLoading",
+				dynamicFilteredList: "dynamicFilteredList",
+				infiniteScroll: "infiniteScroll",
+				hasMoreOptionsForInfiniteScroll: "hasMoreOptionsForInfiniteScroll"
+			},
+			outputs: {
+				selectionChange: "selectionChange",
+				searchTextChange: "searchTextChange",
+				blur: "blur",
+				focus: "focus",
+				scrollViewportBottomReached: "scrollViewportBottomReached",
+				scrollViewportBottomReachedFiltered: "scrollViewportBottomReachedFiltered"
+			},
+			host: { properties: {
+				"class.full-width": "this.fullWidth",
+				"attr.theme": "this.applicationTheme"
+			} },
+			viewQueries: [
+				{
+					propertyName: "formFieldElement",
+					first: true,
+					predicate: ["formField"],
+					descendants: true
+				},
+				{
+					propertyName: "tagContainer",
+					first: true,
+					predicate: ["tagContainer"],
+					descendants: true
+				},
+				{
+					propertyName: "autocomplete",
+					first: true,
+					predicate: ["trigger"],
+					descendants: true
+				},
+				{
+					propertyName: "cdkVirtualScrollViewport",
+					first: true,
+					predicate: CdkVirtualScrollViewport,
+					descendants: true
+				},
+				{
+					propertyName: "matAutocomplete",
+					first: true,
+					predicate: ["autocomplete"],
+					descendants: true
+				},
+				{
+					propertyName: "matInput",
+					first: true,
+					predicate: ["matInput"],
+					descendants: true
+				}
+			],
+			usesOnChanges: true,
+			ngImport: i0,
+			template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n    <mat-form-field\n      [color]=\"\n        safeErrors.length ||\n        (ngControl?.errors && ngControl?.touched) ||\n        (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n        ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n          ? 'warn'\n          : 'accent'\n      \"\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 #formField class=\"input-container\">\n        @if (textField ? value?.[textField] : 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-input'\"\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n          [uiPreventInput]=\"!allowUserInput\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"\n            (translationContext + 'SELECTED' | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\n          \"\n          [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n          matInput\n          [placeholder]=\"value && value.length ? '' : placeholder\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n        @if (\n          (type === autocompleteType.LARGE && value) ||\n          (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n        ) {\n          <div class=\"selected-items\" #tagContainer>\n            @for (valueItem of value; track valueItem; let i = $index) {\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                [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n                [style.display]=\"\n                  (isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)\n                    ? 'none'\n                    : 'block'\n                \"\n                [ngStyle]=\"{\n                  '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px',\n                }\"\n                [ngClass]=\"{\n                  'overlap-tag':\n                    isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n                }\"\n                (close)=\"onOptionRemoved(valueItem)\"\n              ></ui-tag>\n            }\n            @if (size === 'small') {\n              @if (value.length > 1) {\n                <div class=\"selected-count\">\n                  {{\n                    translationContext + 'SELECTED_AMOUNT'\n                      | uiTranslate: { numberSelected: (value | slice: overlapIndex).length }\n                      | async\n                  }}\n                </div>\n              }\n            } @else {\n              @if (value.length > 1 && isOverLapping) {\n                <div class=\"overlap-count\">\n                  <ui-tag\n                    [applicationTheme]=\"applicationTheme\"\n                    [isDisabled]=\"disabled\"\n                    [label]=\"'+' + (value.length - overlapIndex)\"\n                  ></ui-tag>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      @if (\n        (clearable && type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) ||\n        (type !== autocompleteType.SINGLE &&\n          value &&\n          value.length > 1 &&\n          ((AutocompleteUtils.isPrimitive(value) && value.length) ||\n            (!AutocompleteUtils.isPrimitive(value) &&\n              ((AutocompleteUtils.isArray(value) && value.length) ||\n                (!AutocompleteUtils.isArray(value) && !value.length)))))\n      ) {\n        <ui-icon\n          class=\"remove-selected\"\n          [tabIndex]=\"disabled ? -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)=\"gotoUp()\"\n      >\n        @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n          @if ((searchResult$ | async) === false) {\n            @if (!isDropdown) {\n              @if (suggestionsList.length) {\n                <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                  @for (suggested of suggestionsList; track suggested) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                      [value]=\"suggested\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                </mat-optgroup>\n              }\n              @if (value?.length && type !== autocompleteType.SINGLE) {\n                <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                  @for (item of value; track item) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span>{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                </mat-optgroup>\n              }\n              @if (isGrouped) {\n                @for (group of itemsList; track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  }\n                }\n              }\n              @if (value?.length && type === autocompleteType.SINGLE) {\n                <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                  <mat-option (mousedown)=\"$event.preventDefault()\" [class]=\"'selected-option'\" [value]=\"value\">\n                    <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n                    <ui-icon\n                      [applicationTheme]=\"applicationTheme\"\n                      [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                    ></ui-icon>\n                  </mat-option>\n                </mat-optgroup>\n              }\n            } @else {\n              @if (virtualScroll || infiniteScroll) {\n                <cdk-virtual-scroll-viewport\n                  [itemSize]=\"48\"\n                  [style.height.px]=\"getVirtualScrollHeight(itemsList.length)\"\n                  class=\"virtual-scroll\"\n                >\n                  @if (!isGrouped) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *cdkVirtualFor=\"let item of itemsList\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\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                  } @else {\n                    @for (group of itemsList; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            *cdkVirtualFor=\"let item of group.items\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                </cdk-virtual-scroll-viewport>\n              } @else {\n                @if (!isGrouped) {\n                  @for (item of itemsList; track item) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.items; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.items; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n\n          @if (filteredSuggestionList$ | async; as filteredSuggestionList) {\n            @if (filteredItemsList$ | 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 (isGrouped && filteredItemsList.length) {\n                    @for (group of filteredItemsList; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            *cdkVirtualFor=\"let item of group.filteredItems\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.filteredItems\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\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: value : valueField }\"\n                        *cdkVirtualFor=\"let item of filteredSuggestionList\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  }\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: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  } @else {\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: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    }\n                  }\n                  @if (isDynamicFilteringEnabled && 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 (allowAdd && !isAlreadyAdded) {\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 (!filteredItemsList.length && !filteredSuggestionList.length) {\n                      <mat-option [style.pointer-events]=\"'none'\">\n                        <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n                      </mat-option>\n                    }\n                  }\n                </cdk-virtual-scroll-viewport>\n              } @else {\n                @if (isGrouped && filteredItemsList.length) {\n                  @for (group of filteredItemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n                @if (isGrouped && filteredItemsList.length) {\n                  @for (group of filteredItemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n                @if (filteredSuggestionList.length) {\n                  <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                    @for (item of filteredSuggestionList; track item) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  </mat-optgroup>\n                }\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: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                } @else {\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: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                }\n                @if (isDynamicFilteringEnabled && 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 (allowAdd && !isAlreadyAdded) {\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 (!filteredItemsList.length && !filteredSuggestionList.length) {\n                    <mat-option [style.pointer-events]=\"'none'\">\n                      <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n                    </mat-option>\n                  }\n                }\n              }\n            }\n          }\n        }\n      </mat-autocomplete>\n      @if (\n        safeErrors.length ||\n        ($safeNavigationMigration(ngControl?.errors) | hasValidationError) ||\n        (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n        ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n      ) {\n        <mat-hint class=\"error\">\n          @if (\n            (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n            ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n          ) {\n            <div class=\"errors\">\n              <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n              <span>{{\n                translationContext + 'MAX_SELECTED_ERROR' | uiTranslate: { max: maxItemSelected } | async\n              }}</span>\n            </div>\n          }\n          @if (safeErrors.length) {\n            @for (error of safeErrors; track trackByFn($index, error)) {\n              <div class=\"errors\">\n                <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n                <span [innerHTML]=\"error\"></span>\n              </div>\n            }\n          }\n          @if (ngControl && !hideBuiltInErrors) {\n            <ui-validation-error\n              [ngControl]=\"ngControl\"\n              [label]=\"hideLabelInErrors ? null : label\"\n            ></ui-validation-error>\n          }\n        </mat-hint>\n      }\n    </mat-form-field>\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}.large-size .input-container{display:flex;flex-direction:column-reverse}.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}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.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 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 .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 .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.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}\n"],
+			dependencies: [
+				{
+					kind: "directive",
+					type: i1.NgClass,
+					selector: "[ngClass]",
+					inputs: ["class", "ngClass"]
+				},
+				{
+					kind: "directive",
+					type: i1.NgStyle,
+					selector: "[ngStyle]",
+					inputs: ["ngStyle"]
+				},
+				{
+					kind: "component",
+					type: i2.MatFormField,
+					selector: "mat-form-field",
+					inputs: [
+						"hideRequiredMarker",
+						"color",
+						"floatLabel",
+						"appearance",
+						"subscriptSizing",
+						"hintLabel"
+					],
+					exportAs: ["matFormField"]
+				},
+				{
+					kind: "directive",
+					type: i2.MatLabel,
+					selector: "mat-label"
+				},
+				{
+					kind: "directive",
+					type: i2.MatHint,
+					selector: "mat-hint",
+					inputs: ["align", "id"]
+				},
+				{
+					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: "directive",
+					type: i4.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: "directive",
+					type: i5.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: i5.NgControlStatus,
+					selector: "[formControlName],[ngModel],[formControl]"
+				},
+				{
+					kind: "directive",
+					type: i5.NgModel,
+					selector: "[ngModel]:not([formControlName]):not([formControl])",
+					inputs: [
+						"name",
+						"disabled",
+						"ngModel",
+						"ngModelOptions"
+					],
+					outputs: ["ngModelChange"],
+					exportAs: ["ngModel"]
+				},
+				{
+					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: "component",
+					type: i7.IconComponent,
+					selector: "ui-icon",
+					inputs: [
+						"size",
+						"cssClass",
+						"name",
+						"color",
+						"filled",
+						"toggleIconStyle",
+						"applicationTheme",
+						"useFullIconName"
+					]
+				},
+				{
+					kind: "component",
+					type: i8.ValidationErrorComponent,
+					selector: "ui-validation-error",
+					inputs: [
+						"ngControl",
+						"touchedOn",
+						"errorMessage",
+						"label",
+						"applicationTheme",
+						"customErrors"
+					]
+				},
+				{
+					kind: "directive",
+					type: i9.CdkVirtualForOf,
+					selector: "[cdkVirtualFor][cdkVirtualForOf]",
+					inputs: [
+						"cdkVirtualForOf",
+						"cdkVirtualForTrackBy",
+						"cdkVirtualForTemplate",
+						"cdkVirtualForTemplateCacheSize"
+					]
+				},
+				{
+					kind: "component",
+					type: i9.CdkVirtualScrollViewport,
+					selector: "cdk-virtual-scroll-viewport",
+					inputs: ["orientation", "appendOnly"],
+					outputs: ["scrolledIndexChange"]
+				},
+				{
+					kind: "directive",
+					type: i9.CdkFixedSizeVirtualScroll,
+					selector: "cdk-virtual-scroll-viewport[itemSize]",
+					inputs: [
+						"itemSize",
+						"minBufferPx",
+						"maxBufferPx"
+					]
+				},
+				{
+					kind: "directive",
+					type: PreventInputDirective,
+					selector: "[uiPreventInput]",
+					inputs: ["uiPreventInput"]
+				},
+				{
+					kind: "component",
+					type: i11.SpinnerComponent,
+					selector: "ui-spinner",
+					inputs: [
+						"size",
+						"isLoader",
+						"text",
+						"applicationTheme",
+						"iconName",
+						"iconSize"
+					]
+				},
+				{
+					kind: "directive",
+					type: SelectTextDirective,
+					selector: "[selectText]",
+					inputs: ["selectText"]
+				},
+				{
+					kind: "pipe",
+					type: i1.AsyncPipe,
+					name: "async"
+				},
+				{
+					kind: "pipe",
+					type: i1.UpperCasePipe,
+					name: "uppercase"
+				},
+				{
+					kind: "pipe",
+					type: i1.SlicePipe,
+					name: "slice"
+				},
+				{
+					kind: "pipe",
+					type: i13.UiTranslatePipe,
+					name: "uiTranslate"
+				},
+				{
+					kind: "pipe",
+					type: i13.HasValidationErrorPipe,
+					name: "hasValidationError"
+				},
+				{
+					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: AutocompleteComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "ui-autocomplete",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			standalone: false,
+			template: "<ng-container>\n  <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n    <mat-form-field\n      [color]=\"\n        safeErrors.length ||\n        (ngControl?.errors && ngControl?.touched) ||\n        (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n        ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n          ? 'warn'\n          : 'accent'\n      \"\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 #formField class=\"input-container\">\n        @if (textField ? value?.[textField] : 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-input'\"\n          #trigger=\"matAutocompleteTrigger\"\n          #matInput\n          [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n          [uiPreventInput]=\"!allowUserInput\"\n          [disabled]=\"disabled\"\n          [ngClass]=\"{ 'unset-margin': value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n          (blur)=\"refillInput()\"\n          (focusin)=\"onFocus()\"\n          [attr.aria-label]=\"\n            (translationContext + 'SELECTED' | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\n          \"\n          [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n          matInput\n          [placeholder]=\"value && value.length ? '' : placeholder\"\n          [type]=\"'text'\"\n          [matAutocomplete]=\"autocomplete\"\n          (input)=\"onInputChange($event)\"\n          [(ngModel)]=\"inputValue\"\n        />\n        @if (\n          (type === autocompleteType.LARGE && value) ||\n          (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n        ) {\n          <div class=\"selected-items\" #tagContainer>\n            @for (valueItem of value; track valueItem; let i = $index) {\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                [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n                [style.display]=\"\n                  (isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)\n                    ? 'none'\n                    : 'block'\n                \"\n                [ngStyle]=\"{\n                  '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px',\n                }\"\n                [ngClass]=\"{\n                  'overlap-tag':\n                    isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n                }\"\n                (close)=\"onOptionRemoved(valueItem)\"\n              ></ui-tag>\n            }\n            @if (size === 'small') {\n              @if (value.length > 1) {\n                <div class=\"selected-count\">\n                  {{\n                    translationContext + 'SELECTED_AMOUNT'\n                      | uiTranslate: { numberSelected: (value | slice: overlapIndex).length }\n                      | async\n                  }}\n                </div>\n              }\n            } @else {\n              @if (value.length > 1 && isOverLapping) {\n                <div class=\"overlap-count\">\n                  <ui-tag\n                    [applicationTheme]=\"applicationTheme\"\n                    [isDisabled]=\"disabled\"\n                    [label]=\"'+' + (value.length - overlapIndex)\"\n                  ></ui-tag>\n                </div>\n              }\n            }\n          </div>\n        }\n      </div>\n\n      @if (\n        (clearable && type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) ||\n        (type !== autocompleteType.SINGLE &&\n          value &&\n          value.length > 1 &&\n          ((AutocompleteUtils.isPrimitive(value) && value.length) ||\n            (!AutocompleteUtils.isPrimitive(value) &&\n              ((AutocompleteUtils.isArray(value) && value.length) ||\n                (!AutocompleteUtils.isArray(value) && !value.length)))))\n      ) {\n        <ui-icon\n          class=\"remove-selected\"\n          [tabIndex]=\"disabled ? -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)=\"gotoUp()\"\n      >\n        @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n          @if ((searchResult$ | async) === false) {\n            @if (!isDropdown) {\n              @if (suggestionsList.length) {\n                <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                  @for (suggested of suggestionsList; track suggested) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                      [value]=\"suggested\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                </mat-optgroup>\n              }\n              @if (value?.length && type !== autocompleteType.SINGLE) {\n                <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                  @for (item of value; track item) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span>{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                </mat-optgroup>\n              }\n              @if (isGrouped) {\n                @for (group of itemsList; track group) {\n                  @if (group.groupName) {\n                    <mat-optgroup [label]=\"group.groupName\">\n                      @for (item of group.items; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  } @else {\n                    @for (item of group.items; track item) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  }\n                }\n              }\n              @if (value?.length && type === autocompleteType.SINGLE) {\n                <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n                  <mat-option (mousedown)=\"$event.preventDefault()\" [class]=\"'selected-option'\" [value]=\"value\">\n                    <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n                    <ui-icon\n                      [applicationTheme]=\"applicationTheme\"\n                      [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                    ></ui-icon>\n                  </mat-option>\n                </mat-optgroup>\n              }\n            } @else {\n              @if (virtualScroll || infiniteScroll) {\n                <cdk-virtual-scroll-viewport\n                  [itemSize]=\"48\"\n                  [style.height.px]=\"getVirtualScrollHeight(itemsList.length)\"\n                  class=\"virtual-scroll\"\n                >\n                  @if (!isGrouped) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      *cdkVirtualFor=\"let item of itemsList\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\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                  } @else {\n                    @for (group of itemsList; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            *cdkVirtualFor=\"let item of group.items\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.items\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                </cdk-virtual-scroll-viewport>\n              } @else {\n                @if (!isGrouped) {\n                  @for (item of itemsList; track item) {\n                    <mat-option\n                      (mousedown)=\"$event.preventDefault()\"\n                      [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                } @else {\n                  @for (group of itemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.items; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.items; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n              }\n            }\n          }\n\n          @if (filteredSuggestionList$ | async; as filteredSuggestionList) {\n            @if (filteredItemsList$ | 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 (isGrouped && filteredItemsList.length) {\n                    @for (group of filteredItemsList; track group) {\n                      @if (group.groupName) {\n                        <mat-optgroup [label]=\"group.groupName\">\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            *cdkVirtualFor=\"let item of group.filteredItems\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        </mat-optgroup>\n                      } @else {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          *cdkVirtualFor=\"let item of group.filteredItems\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\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: value : valueField }\"\n                        *cdkVirtualFor=\"let item of filteredSuggestionList\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    </mat-optgroup>\n                  }\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: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  } @else {\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: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    }\n                  }\n                  @if (isDynamicFilteringEnabled && 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 (allowAdd && !isAlreadyAdded) {\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 (!filteredItemsList.length && !filteredSuggestionList.length) {\n                      <mat-option [style.pointer-events]=\"'none'\">\n                        <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n                      </mat-option>\n                    }\n                  }\n                </cdk-virtual-scroll-viewport>\n              } @else {\n                @if (isGrouped && filteredItemsList.length) {\n                  @for (group of filteredItemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n                @if (isGrouped && filteredItemsList.length) {\n                  @for (group of filteredItemsList; track group) {\n                    @if (group.groupName) {\n                      <mat-optgroup [label]=\"group.groupName\">\n                        @for (item of group.filteredItems; track item) {\n                          <mat-option\n                            (mousedown)=\"$event.preventDefault()\"\n                            [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                            [value]=\"item\"\n                          >\n                            <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                            <ui-icon\n                              [applicationTheme]=\"applicationTheme\"\n                              [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                            ></ui-icon>\n                          </mat-option>\n                        }\n                      </mat-optgroup>\n                    } @else {\n                      @for (item of group.filteredItems; track item) {\n                        <mat-option\n                          (mousedown)=\"$event.preventDefault()\"\n                          [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    }\n                  }\n                }\n                @if (filteredSuggestionList.length) {\n                  <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n                    @for (item of filteredSuggestionList; track item) {\n                      <mat-option\n                        (mousedown)=\"$event.preventDefault()\"\n                        [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                        [value]=\"item\"\n                      >\n                        <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                        <ui-icon\n                          [applicationTheme]=\"applicationTheme\"\n                          [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                        ></ui-icon>\n                      </mat-option>\n                    }\n                  </mat-optgroup>\n                }\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: value : valueField }\"\n                      [value]=\"item\"\n                    >\n                      <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                      <ui-icon\n                        [applicationTheme]=\"applicationTheme\"\n                        [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                      ></ui-icon>\n                    </mat-option>\n                  }\n                } @else {\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: value : valueField }\"\n                          [value]=\"item\"\n                        >\n                          <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n                          <ui-icon\n                            [applicationTheme]=\"applicationTheme\"\n                            [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n                          ></ui-icon>\n                        </mat-option>\n                      }\n                    </mat-optgroup>\n                  }\n                }\n                @if (isDynamicFilteringEnabled && 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 (allowAdd && !isAlreadyAdded) {\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 (!filteredItemsList.length && !filteredSuggestionList.length) {\n                    <mat-option [style.pointer-events]=\"'none'\">\n                      <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n                    </mat-option>\n                  }\n                }\n              }\n            }\n          }\n        }\n      </mat-autocomplete>\n      @if (\n        safeErrors.length ||\n        ($safeNavigationMigration(ngControl?.errors) | hasValidationError) ||\n        (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n        ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n      ) {\n        <mat-hint class=\"error\">\n          @if (\n            (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n            ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n          ) {\n            <div class=\"errors\">\n              <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n              <span>{{\n                translationContext + 'MAX_SELECTED_ERROR' | uiTranslate: { max: maxItemSelected } | async\n              }}</span>\n            </div>\n          }\n          @if (safeErrors.length) {\n            @for (error of safeErrors; track trackByFn($index, error)) {\n              <div class=\"errors\">\n                <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n                <span [innerHTML]=\"error\"></span>\n              </div>\n            }\n          }\n          @if (ngControl && !hideBuiltInErrors) {\n            <ui-validation-error\n              [ngControl]=\"ngControl\"\n              [label]=\"hideLabelInErrors ? null : label\"\n            ></ui-validation-error>\n          }\n        </mat-hint>\n      }\n    </mat-form-field>\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}.large-size .input-container{display:flex;flex-direction:column-reverse}.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}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.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 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 .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 .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.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}\n"]
+		}]
+	}],
+	ctorParameters: () => [],
+	propDecorators: {
+		itemsList: [{ type: Input }],
+		suggestionsList: [{ type: Input }],
+		disabled: [{ type: Input }],
+		allowAdd: [{ type: Input }],
+		textField: [{ type: Input }],
+		valueField: [{ type: Input }],
+		label: [{ type: Input }],
+		placeholder: [{ type: Input }],
+		testId: [{ type: Input }],
+		itemValue: [{ type: Input }],
+		type: [{ type: Input }],
+		minCharactersSearch: [{ type: Input }],
+		variant: [{
+			type: Input,
+			args: [{ required: true }]
+		}],
+		showBottomContent: [{ type: Input }],
+		valuePrimitive: [{ type: Input }],
+		fullWidth: [{
+			type: HostBinding,
+			args: ["class.full-width"]
+		}, { type: Input }],
+		applicationTheme: [{
+			type: HostBinding,
+			args: ["attr.theme"]
+		}, { type: Input }],
+		required: [{ type: Input }],
+		errors: [{ type: Input }],
+		companyColor: [{ type: Input }],
+		hideBuiltInErrors: [{ type: Input }],
+		hideLabelInErrors: [{ type: Input }],
+		virtualScroll: [{
+			type: Input,
+			args: [{ transform: booleanAttribute }]
+		}],
+		compareWith: [{ type: Input }],
+		dropdownPanelClass: [{ type: Input }],
+		closeOnScroll: [{ type: Input }],
+		size: [{ type: Input }],
+		allowUserInput: [{ type: Input }],
+		clearable: [{ type: Input }],
+		exactMatchSelect: [{ type: Input }],
+		maxItemSelected: [{ type: Input }],
+		maxLength: [{ type: Input }],
+		isDynamicFilteringEnabled: [{ type: Input }],
+		dynamicFilterLoading: [{ type: Input }],
+		dynamicFilteredList: [{ type: Input }],
+		infiniteScroll: [{ type: Input }],
+		hasMoreOptionsForInfiniteScroll: [{ type: Input }],
+		selectionChange: [{ type: Output }],
+		searchTextChange: [{ type: Output }],
+		blur: [{ type: Output }],
+		focus: [{ type: Output }],
+		scrollViewportBottomReached: [{ type: Output }],
+		scrollViewportBottomReachedFiltered: [{ type: Output }],
+		formFieldElement: [{
+			type: ViewChild,
+			args: ["formField"]
+		}],
+		tagContainer: [{
+			type: ViewChild,
+			args: ["tagContainer"]
+		}],
+		autocomplete: [{
+			type: ViewChild,
+			args: ["trigger"]
+		}],
+		cdkVirtualScrollViewport: [{
+			type: ViewChild,
+			args: [CdkVirtualScrollViewport, { static: false }]
+		}],
+		matAutocomplete: [{
+			type: ViewChild,
+			args: ["autocomplete"]
+		}],
+		matInput: [{
+			type: ViewChild,
+			args: ["matInput"]
+		}]
+	}
+});
+var AutocompleteComponentModule = class AutocompleteComponentModule {
+	static {
+		this.ɵfac = i0.ɵɵngDeclareFactory({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AutocompleteComponentModule,
+			deps: [],
+			target: i0.ɵɵFactoryTarget.NgModule
+		});
+	}
+	static {
+		this.ɵmod = i0.ɵɵngDeclareNgModule({
+			minVersion: "14.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AutocompleteComponentModule,
+			declarations: [
+				AutocompleteComponent,
+				TransformItemPipe,
+				IncludesPipe,
+				SelectTextDirective
+			],
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatAutocompleteModule,
+				MatInputModule,
+				FormsModule,
+				TagComponentModule,
+				MatChipsModule,
+				IconComponentModule,
+				UiTranslatePipe,
+				ValidationErrorModule,
+				HasValidationErrorPipe,
+				CdkVirtualForOf,
+				CdkVirtualScrollViewport,
+				CdkFixedSizeVirtualScroll,
+				PreventInputDirective,
+				SpinnerComponentModule
+			],
+			exports: [AutocompleteComponent]
+		});
+	}
+	static {
+		this.ɵinj = i0.ɵɵngDeclareInjector({
+			minVersion: "12.0.0",
+			version: "22.2.4",
+			ngImport: i0,
+			type: AutocompleteComponentModule,
+			providers: [
+				TransformItemPipe,
+				IncludesPipe,
+				SelectTextDirective
+			],
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatAutocompleteModule,
+				MatInputModule,
+				FormsModule,
+				TagComponentModule,
+				MatChipsModule,
+				IconComponentModule,
+				ValidationErrorModule,
+				CdkVirtualScrollViewport,
+				SpinnerComponentModule
+			]
+		});
+	}
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.4",
+	ngImport: i0,
+	type: AutocompleteComponentModule,
+	decorators: [{
+		type: NgModule,
+		args: [{
+			declarations: [
+				AutocompleteComponent,
+				TransformItemPipe,
+				IncludesPipe,
+				SelectTextDirective
+			],
+			imports: [
+				CommonModule,
+				MatFormFieldModule,
+				MatAutocompleteModule,
+				MatInputModule,
+				FormsModule,
+				TagComponentModule,
+				MatChipsModule,
+				IconComponentModule,
+				UiTranslatePipe,
+				ValidationErrorModule,
+				HasValidationErrorPipe,
+				CdkVirtualForOf,
+				CdkVirtualScrollViewport,
+				CdkFixedSizeVirtualScroll,
+				PreventInputDirective,
+				SpinnerComponentModule
+			],
+			exports: [AutocompleteComponent],
+			providers: [
+				TransformItemPipe,
+				IncludesPipe,
+				SelectTextDirective
+			]
+		}]
+	}]
+});
 export { AMOUNT_TAG_WIDTH, Autocomplete, AutocompleteComponent, AutocompleteComponentModule, DropdownVariation, Padding, Timeout };
-//# sourceMappingURL=testgorilla-tgo-ui-components-autocomplete.mjs.map
+
+//# sourceMappingURL=testgorilla-tgo-ui-components-autocomplete.mjs.map