@testgorilla/tgo-ui 4.1.2-beta → 4.1.3-beta

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

@@ -0,0 +1,1045 @@
+import * as i11 from '@angular/cdk/scrolling';
+import { CdkVirtualScrollViewport, CdkVirtualForOf, CdkFixedSizeVirtualScroll } from '@angular/cdk/scrolling';
+import * as i4 from '@angular/common';
+import { isPlatformBrowser, CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { HostListener, Input, Directive, Pipe, EventEmitter, signal, PLATFORM_ID, booleanAttribute, ViewChild, Output, HostBinding, Optional, Inject, Self, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { take, map, filter, throttleTime, ReplaySubject, BehaviorSubject, startWith } from 'rxjs';
+import * as i15 from '@testgorilla/tgo-ui/components/core';
+import { AutocompleteUtils, IKeyboardEvent, UiTranslatePipe, HasValidationErrorPipe } from '@testgorilla/tgo-ui/components/core';
+import * as i1 from '@angular/platform-browser';
+import * as i2 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import * as i3 from '@angular/cdk/a11y';
+import * as i5 from '@angular/material/form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import * as i6 from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
+import * as i7 from '@angular/material/input';
+import { MatInputModule } from '@angular/material/input';
+import * as i8 from '@testgorilla/tgo-ui/components/tag';
+import { TagComponentModule } from '@testgorilla/tgo-ui/components/tag';
+import * as i9 from '@testgorilla/tgo-ui/components/icon';
+import { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';
+import * as i10 from '@testgorilla/tgo-ui/components/validation-error';
+import { ValidationErrorModule } from '@testgorilla/tgo-ui/components/validation-error';
+import * as i13 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";
+})(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";
+})(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";
+})(Timeout || (Timeout = {}));
+var DropdownVariation;
+(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: "19.2.17", ngImport: i0, type: PreventInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: PreventInputDirective, isStandalone: true, selector: "[uiPreventInput]", inputs: { uiPreventInput: "uiPreventInput" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", 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) {
+                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: "19.2.17", ngImport: i0, type: SelectTextDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: SelectTextDirective, isStandalone: false, selector: "[selectText]", inputs: { selectText: "selectText" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectTextDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    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])) {
+            return value?.[field] || value[0][field];
+        }
+        else {
+            AutocompleteUtils.throwInvalidSetupError();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TransformItemPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: TransformItemPipe, isStandalone: false, name: "transformItem" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", 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)
+            ? !!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: "19.2.17", ngImport: i0, type: IncludesPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: IncludesPipe, isStandalone: false, name: "includes" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: IncludesPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'includes',
+                    standalone: false
+                }]
+        }] });
+
+// eslint-disable-next-line @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).map(error => this.domSanitizer.bypassSecurityTrustHtml(error));
+    }
+    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(defaultAppTheme, cdr, domSanitizer, ngControl, platformId, el, focusMonitor, destroyRef, ngZone) {
+        this.defaultAppTheme = defaultAppTheme;
+        this.cdr = cdr;
+        this.domSanitizer = domSanitizer;
+        this.ngControl = ngControl;
+        this.platformId = platformId;
+        this.el = el;
+        this.focusMonitor = focusMonitor;
+        this.destroyRef = destroyRef;
+        this.ngZone = ngZone;
+        /**
+         * @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 = '';
+        /**
+         * @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();
+        this.blur = new EventEmitter();
+        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 ReplaySubject(1);
+        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.isPlatform = isPlatformBrowser(this.platformId);
+        this.keyboardFocused = signal(false);
+        this.isAlreadyAdded = false;
+        this.onChange = (_) => { };
+        this.onTouch = () => { };
+        this.trackByFn = (index, value) => value.changingThisBreaksApplicationSecurity;
+        if (this.ngControl != null) {
+            this.ngControl.valueAccessor = this;
+        }
+        if (defaultAppTheme) {
+            this.applicationTheme = 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)
+     */
+    // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
+    ngDoCheck() {
+        if (this.ngControl?.touched || this.ngControl?.errors) {
+            this.cdr.markForCheck();
+        }
+    }
+    // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
+    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();
+        }
+    }
+    // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
+    ngAfterViewInit() {
+        if (this.type !== Autocomplete.LARGE) {
+            this.checkOverlap(Timeout.VIEW_INITIALIZED_COMPONENT_LOAD, true);
+        }
+        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);
+    }
+    // eslint-disable-next-line @angular-eslint/no-conflicting-lifecycle
+    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(option => {
+                if (option.value?.value === foundValue.value) {
+                    option.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;
+                let firstTagWidth = 0;
+                tags.forEach((tag, index) => {
+                    width += tag.getBoundingClientRect().width;
+                    if (!index) {
+                        firstTagWidth = 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 && 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) {
+        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 * 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: "19.2.17", ngImport: i0, type: AutocompleteComponent, deps: [{ token: 'CANOPYUI_DEFAULT_APPLICATION_THEME', optional: true }, { token: i0.ChangeDetectorRef }, { token: i1.DomSanitizer }, { token: i2.NgControl, optional: true, self: true }, { token: PLATFORM_ID }, { token: i0.ElementRef }, { token: i3.FocusMonitor }, { token: i0.DestroyRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: AutocompleteComponent, isStandalone: false, selector: "ui-autocomplete", inputs: { itemsList: "itemsList", suggestionsList: "suggestionsList", disabled: "disabled", allowAdd: "allowAdd", textField: "textField", valueField: "valueField", label: "label", placeholder: "placeholder", 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      <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n      <div #formField class=\"input-container\">\n        <span\n          style=\"position: absolute; left: -9999px\"\n          *ngIf=\"textField ? value?.[textField] : value === inputValue\"\n          aria-live=\"polite\"\n          >{{ ('SELECTED' | uiTranslate | async) + ' ' + inputValue }}</span\n        >\n\n        <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        <div\n          class=\"selected-items\"\n          #tagContainer\n          *ngIf=\"\n            (type === autocompleteType.LARGE && value) ||\n            (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n          \"\n        >\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'ui-tag-' + i\"\n            *ngFor=\"let valueItem of value; let i = index\"\n            [label]=\"valueItem | transformItem: textField\"\n            [allowClose]=\"true\"\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) ? 'none' : 'block'\n            \"\n            [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n            [ngClass]=\"{\n              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n            }\"\n            (close)=\"onOptionRemoved(valueItem)\"\n          ></ui-tag>\n          @if (size === 'small') {\n            <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n              {{\n                translationContext + 'SELECTED_AMOUNT'\n                  | uiTranslate: { numberSelected: (value | slice: overlapIndex).length }\n                  | async\n              }}\n            </div>\n          } @else {\n            <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n              <ui-tag [applicationTheme]=\"applicationTheme\" [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n            </div>\n          }\n        </div>\n      </div>\n\n      <ui-icon\n        *ngIf=\"\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        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      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\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          <ng-container *ngIf=\"!(searchResult$ | async)\">\n            <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n              <mat-optgroup\n                [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\"\n                *ngIf=\"suggestionsList.length\"\n              >\n                <mat-option\n                  (mousedown)=\"$event.preventDefault()\"\n                  [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                  *ngFor=\"let suggested of suggestionsList\"\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              </mat-optgroup>\n\n              <mat-optgroup\n                [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\"\n                *ngIf=\"value?.length && type !== autocompleteType.SINGLE\"\n              >\n                <mat-option\n                  (mousedown)=\"$event.preventDefault()\"\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of value\"\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              </mat-optgroup>\n\n              @if (isGrouped) {\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                        *ngFor=\"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                      *ngFor=\"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\n              <mat-optgroup\n                [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\"\n                *ngIf=\"value?.length && type === autocompleteType.SINGLE\"\n              >\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            </ng-container>\n\n            <ng-template #dropdownList>\n              <cdk-virtual-scroll-viewport\n                *ngIf=\"virtualScroll || infiniteScroll; else defaultViewPort\"\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\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\n              <ng-template #defaultViewPort>\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"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                } @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                          *ngFor=\"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                        *ngFor=\"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              </ng-template>\n            </ng-template>\n          </ng-container>\n\n          <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n            <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n              <ng-container *ngIf=\"virtualScroll || infiniteScroll; else filteredWithoutVirtualScroll\">\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\n                  <mat-optgroup\n                    [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\"\n                    *ngIf=\"filteredSuggestionList.length\"\n                  >\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                  <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroupVirtual\">\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                  </ng-container>\n\n                  <ng-template #showItemListWithGroupVirtual>\n                    <mat-optgroup\n                      [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\"\n                      *ngIf=\"filteredItemsList.length && !isGrouped\"\n                    >\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                  </ng-template>\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              </ng-container>\n\n              <ng-template #filteredWithoutVirtualScroll>\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                          *ngFor=\"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                        *ngFor=\"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\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                          *ngFor=\"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                        *ngFor=\"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\n                <mat-optgroup\n                  [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\"\n                  *ngIf=\"filteredSuggestionList.length\"\n                >\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"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                <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\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                </ng-container>\n\n                <ng-template #showItemListWithGroup>\n                  <mat-optgroup\n                    [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\"\n                    *ngIf=\"filteredItemsList.length && !isGrouped\"\n                  >\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                </ng-template>\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              </ng-template>\n            </ng-container>\n          </ng-container>\n        }\n      </mat-autocomplete>\n      <mat-hint\n        class=\"error\"\n        *ngIf=\"\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      >\n        <div\n          class=\"errors\"\n          *ngIf=\"\n            (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n            ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n          \"\n        >\n          <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n          <span>{{ translationContext + 'MAX_SELECTED_ERROR' | uiTranslate: { max: maxItemSelected } | async }}</span>\n        </div>\n        <ng-container *ngIf=\"safeErrors.length\">\n          <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        </ng-container>\n        <ui-validation-error\n          *ngIf=\"ngControl && !hideBuiltInErrors\"\n          [ngControl]=\"ngControl\"\n          [label]=\"hideLabelInErrors ? null : label\"\n        ></ui-validation-error>\n      </mat-hint>\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{display:flex}::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{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: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: i6.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: i6.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i6.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "directive", type: i7.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: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i8.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired"], outputs: ["close", "press"] }, { kind: "component", type: i9.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: i10.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme"] }, { kind: "directive", type: i11.CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "component", type: i11.CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: i11.CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "component", type: i13.SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: i4.SlicePipe, name: "slice" }, { kind: "pipe", type: i15.UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: i15.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: "19.2.17", 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      <mat-label *ngIf=\"label\">{{ label }} <span *ngIf=\"required\">*</span></mat-label>\n      <div #formField class=\"input-container\">\n        <span\n          style=\"position: absolute; left: -9999px\"\n          *ngIf=\"textField ? value?.[textField] : value === inputValue\"\n          aria-live=\"polite\"\n          >{{ ('SELECTED' | uiTranslate | async) + ' ' + inputValue }}</span\n        >\n\n        <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        <div\n          class=\"selected-items\"\n          #tagContainer\n          *ngIf=\"\n            (type === autocompleteType.LARGE && value) ||\n            (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n          \"\n        >\n          <ui-tag\n            class=\"value-tag\"\n            [id]=\"'ui-tag-' + i\"\n            *ngFor=\"let valueItem of value; let i = index\"\n            [label]=\"valueItem | transformItem: textField\"\n            [allowClose]=\"true\"\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) ? 'none' : 'block'\n            \"\n            [ngStyle]=\"{ '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px' }\"\n            [ngClass]=\"{\n              'overlap-tag': isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n            }\"\n            (close)=\"onOptionRemoved(valueItem)\"\n          ></ui-tag>\n          @if (size === 'small') {\n            <div class=\"selected-count\" *ngIf=\"value.length > 1\">\n              {{\n                translationContext + 'SELECTED_AMOUNT'\n                  | uiTranslate: { numberSelected: (value | slice: overlapIndex).length }\n                  | async\n              }}\n            </div>\n          } @else {\n            <div *ngIf=\"value.length > 1 && isOverLapping\" class=\"overlap-count\">\n              <ui-tag [applicationTheme]=\"applicationTheme\" [label]=\"'+' + (value.length - overlapIndex)\"></ui-tag>\n            </div>\n          }\n        </div>\n      </div>\n\n      <ui-icon\n        *ngIf=\"\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        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      <ui-icon\n        class=\"arrow-state\"\n        [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n        *ngIf=\"isDropdown\"\n        [size]=\"'24'\"\n        [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n        (click)=\"onChevronClick(autocomplete)\"\n      ></ui-icon>\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          <ng-container *ngIf=\"!(searchResult$ | async)\">\n            <ng-container *ngIf=\"!isDropdown; else dropdownList\">\n              <mat-optgroup\n                [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\"\n                *ngIf=\"suggestionsList.length\"\n              >\n                <mat-option\n                  (mousedown)=\"$event.preventDefault()\"\n                  [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n                  *ngFor=\"let suggested of suggestionsList\"\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              </mat-optgroup>\n\n              <mat-optgroup\n                [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\"\n                *ngIf=\"value?.length && type !== autocompleteType.SINGLE\"\n              >\n                <mat-option\n                  (mousedown)=\"$event.preventDefault()\"\n                  [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                  *ngFor=\"let item of value\"\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              </mat-optgroup>\n\n              @if (isGrouped) {\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                        *ngFor=\"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                      *ngFor=\"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\n              <mat-optgroup\n                [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\"\n                *ngIf=\"value?.length && type === autocompleteType.SINGLE\"\n              >\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            </ng-container>\n\n            <ng-template #dropdownList>\n              <cdk-virtual-scroll-viewport\n                *ngIf=\"virtualScroll || infiniteScroll; else defaultViewPort\"\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\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\n              <ng-template #defaultViewPort>\n                @if (!isGrouped) {\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"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                } @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                          *ngFor=\"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                        *ngFor=\"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              </ng-template>\n            </ng-template>\n          </ng-container>\n\n          <ng-container *ngIf=\"filteredSuggestionList$ | async as filteredSuggestionList\">\n            <ng-container *ngIf=\"filteredItemsList$ | async as filteredItemsList\">\n              <ng-container *ngIf=\"virtualScroll || infiniteScroll; else filteredWithoutVirtualScroll\">\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\n                  <mat-optgroup\n                    [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\"\n                    *ngIf=\"filteredSuggestionList.length\"\n                  >\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                  <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroupVirtual\">\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                  </ng-container>\n\n                  <ng-template #showItemListWithGroupVirtual>\n                    <mat-optgroup\n                      [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\"\n                      *ngIf=\"filteredItemsList.length && !isGrouped\"\n                    >\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                  </ng-template>\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              </ng-container>\n\n              <ng-template #filteredWithoutVirtualScroll>\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                          *ngFor=\"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                        *ngFor=\"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\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                          *ngFor=\"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                        *ngFor=\"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\n                <mat-optgroup\n                  [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\"\n                  *ngIf=\"filteredSuggestionList.length\"\n                >\n                  <mat-option\n                    (mousedown)=\"$event.preventDefault()\"\n                    [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n                    *ngFor=\"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                <ng-container *ngIf=\"!filteredSuggestionList.length && !isGrouped; else showItemListWithGroup\">\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                </ng-container>\n\n                <ng-template #showItemListWithGroup>\n                  <mat-optgroup\n                    [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\"\n                    *ngIf=\"filteredItemsList.length && !isGrouped\"\n                  >\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                </ng-template>\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              </ng-template>\n            </ng-container>\n          </ng-container>\n        }\n      </mat-autocomplete>\n      <mat-hint\n        class=\"error\"\n        *ngIf=\"\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      >\n        <div\n          class=\"errors\"\n          *ngIf=\"\n            (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n            ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n          \"\n        >\n          <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n          <span>{{ translationContext + 'MAX_SELECTED_ERROR' | uiTranslate: { max: maxItemSelected } | async }}</span>\n        </div>\n        <ng-container *ngIf=\"safeErrors.length\">\n          <div class=\"errors\" *ngFor=\"let error of safeErrors; trackBy: trackByFn\">\n            <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n            <span [innerHTML]=\"error\"></span>\n          </div>\n        </ng-container>\n        <ui-validation-error\n          *ngIf=\"ngControl && !hideBuiltInErrors\"\n          [ngControl]=\"ngControl\"\n          [label]=\"hideLabelInErrors ? null : label\"\n        ></ui-validation-error>\n      </mat-hint>\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{display:flex}::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{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: () => [{ type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: ['CANOPYUI_DEFAULT_APPLICATION_THEME']
+                }] }, { type: i0.ChangeDetectorRef }, { type: i1.DomSanitizer }, { type: i2.NgControl, decorators: [{
+                    type: Optional
+                }, {
+                    type: Self
+                }] }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [PLATFORM_ID]
+                }] }, { type: i0.ElementRef }, { type: i3.FocusMonitor }, { type: i0.DestroyRef }, { type: i0.NgZone }], 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
+            }], 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: "19.2.17", ngImport: i0, type: AutocompleteComponentModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", 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: "19.2.17", 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: "19.2.17", 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.
+ */
+
+export { AMOUNT_TAG_WIDTH, Autocomplete, AutocompleteComponent, AutocompleteComponentModule, DropdownVariation, Padding, Timeout };
+//# sourceMappingURL=testgorilla-tgo-ui-components-autocomplete.mjs.map