@testgorilla/tgo-ui 7.4.3 → 7.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/icon/icon-svg-content.d.ts +1 -1
- package/components/icon/icon.config.d.ts +1 -1
- package/components/inline-field/inline-field.component.d.ts +2 -2
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs +9 -2
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-icon.mjs +9 -5
- package/fesm2022/testgorilla-tgo-ui-components-icon.mjs.map +1 -1
- package/mcp/catalog.json +1 -1
- package/package.json +27 -27
- package/projects/tgo-canopy-ui/assets/icons/rebrand/Smart-criteria-filled.svg +3 -0
- package/projects/tgo-canopy-ui/assets/icons/rebrand/Smart-criteria-in-line.svg +3 -0
|
@@ -613,6 +613,13 @@ class AutocompleteV2Component {
|
|
|
613
613
|
this.cdr.markForCheck();
|
|
614
614
|
}
|
|
615
615
|
writeValue(value) {
|
|
616
|
+
// Eagerly sync config so displayValue() computes correctly even if
|
|
617
|
+
// constructor effects haven't run yet (e.g. first writeValue from a
|
|
618
|
+
// FormControl with an initial value).
|
|
619
|
+
this.valueManager.type.set(this.type());
|
|
620
|
+
this.valueManager.textField.set(this.textField());
|
|
621
|
+
this.valueManager.valueField.set(this.valueField());
|
|
622
|
+
this.valueManager.compareWith.set(this.compareWith());
|
|
616
623
|
this.valueManager.writeValue(value);
|
|
617
624
|
this.inputValue.set(this.valueManager.displayValue());
|
|
618
625
|
this.cdr.markForCheck();
|
|
@@ -743,7 +750,7 @@ class AutocompleteV2Component {
|
|
|
743
750
|
return Math.min(Math.max(calculatedHeight, minHeight), maxHeight);
|
|
744
751
|
}
|
|
745
752
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AutocompleteV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
746
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AutocompleteV2Component, isStandalone: true, selector: "ui-autocomplete-v2", inputs: { itemsList: { classPropertyName: "itemsList", publicName: "itemsList", isSignal: true, isRequired: false, transformFunction: null }, suggestionsList: { classPropertyName: "suggestionsList", publicName: "suggestionsList", isSignal: true, isRequired: false, transformFunction: null }, groupsList: { classPropertyName: "groupsList", publicName: "groupsList", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowAdd: { classPropertyName: "allowAdd", publicName: "allowAdd", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, minCharactersSearch: { classPropertyName: "minCharactersSearch", publicName: "minCharactersSearch", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null }, showBottomContent: { classPropertyName: "showBottomContent", publicName: "showBottomContent", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelClass: { classPropertyName: "dropdownPanelClass", publicName: "dropdownPanelClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnScroll: { classPropertyName: "closeOnScroll", publicName: "closeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowUserInput: { classPropertyName: "allowUserInput", publicName: "allowUserInput", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, dynamicFilterLoading: { classPropertyName: "dynamicFilterLoading", publicName: "dynamicFilterLoading", isSignal: true, isRequired: false, transformFunction: null }, dynamicFilteredList: { classPropertyName: "dynamicFilteredList", publicName: "dynamicFilteredList", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, hasMoreOptionsForInfiniteScroll: { classPropertyName: "hasMoreOptionsForInfiniteScroll", publicName: "hasMoreOptionsForInfiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, itemValue: { classPropertyName: "itemValue", publicName: "itemValue", isSignal: true, isRequired: false, transformFunction: null }, formErrorConfig: { classPropertyName: "formErrorConfig", publicName: "formErrorConfig", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached", scrollViewportBottomReachedFiltered: "scrollViewportBottomReachedFiltered" }, host: { properties: { "attr.theme": "applicationTheme" } }, providers: [AutocompleteValueManager, AutocompleteFilterService, InfiniteScrollDirective], viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "measureElRef", first: true, predicate: ["measureEl"], descendants: true }, { propertyName: "overflowDir", first: true, predicate: ["overflow"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ disabled: _isDisabled() }\">\n <mat-form-field\n [color]=\"hasError() ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type() === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent(),\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label(),\n }\"\n >\n @if (label()) {\n <mat-label\n >{{ label() }}\n @if (required()) {\n <span>*</span>\n }\n </mat-label>\n }\n <div #formField class=\"input-container\">\n @if (textField() ? $any(valueManager.value())?.[textField()] : $any(valueManager.value()) === inputValue()) {\n <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n ('SELECTED' | uiTranslate | async) + ' ' + inputValue()\n }}</span>\n }\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength() !== null && maxLength() !== undefined ? maxLength() : null\"\n [uiPreventInput]=\"!allowUserInput()\"\n [disabled]=\"_isDisabled()\"\n [ngClass]=\"{\n 'unset-margin': valueManager.value() && type() === autocompleteType.LARGE,\n 'no-caret': !allowUserInput(),\n }\"\n (blur)=\"onBlur()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' | uiTranslate | async) +\n ' ' +\n (valueManager.value() | transformItem: textField() : true)\n \"\n matInput\n [placeholder]=\"valueManager.value() && valueManager.value()!.length ? '' : placeholder()\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"inputValue.set($event)\"\n />\n <!-- Hidden measurement container: always in DOM, renders ALL tags for width measurement -->\n @if (type() !== autocompleteType.SINGLE && utils.isArray(valueManager.value())) {\n <div class=\"selected-items measurement-container\" #measureEl>\n @for (valueItem of $any(valueManager.value()); track valueItem; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'measure-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-tag>\n }\n </div>\n }\n\n @if (\n (type() === autocompleteType.LARGE && valueManager.value()) ||\n (!(inputValue() && isInputFocus()) && valueManager.value() && type() !== autocompleteType.SINGLE)\n ) {\n <!-- Visible container: only renders tags that fit. Hidden until first measurement to prevent flash. -->\n <div\n class=\"selected-items\"\n #tagContainer\n uiAutocompleteOverflowDetect\n #overflow=\"autocompleteOverflowDetect\"\n [measureContainer]=\"measureElRef?.nativeElement\"\n [class.measured]=\"\n type() === autocompleteType.LARGE || type() === autocompleteType.SINGLE || overflow.hasMeasured()\n \"\n >\n @if (size() === 'small' && valueManager.value()!.length > 1) {\n <div class=\"selected-count\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n | uiTranslate: { numberSelected: valueManager.value()!.length }\n | async\n }}\n </div>\n } @else {\n @for (valueItem of $any(valueManager.value()); track valueItem; let i = $index) {\n @if (i < overflow.visibleCount()) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [ngStyle]=\"\n type() !== autocompleteType.LARGE\n ? { '--tag-max-width': overflow.tagMaxWidth() ? overflow.tagMaxWidth() + 'px' : 'fit-content' }\n : {}\n \"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n }\n @if (overflow.overflowCount() > 0) {\n <div class=\"overlap-count\" [matTooltip]=\"hiddenItemsTooltip()\">\n <ui-tag [applicationTheme]=\"applicationTheme\" [label]=\"'+' + overflow.overflowCount()\"></ui-tag>\n </div>\n }\n }\n </div>\n }\n </div>\n\n @if (showClearButton()) {\n <ui-icon\n class=\"remove-selected\"\n [tabIndex]=\"_isDisabled() ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type() === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n }\n\n @if (isDropdown) {\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type() === autocompleteType.LARGE }\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n }\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass()\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"onPanelOpened()\"\n >\n <!-- Reusable option template \u2014 must be inside mat-autocomplete for @ContentChildren to find mat-options -->\n <ng-template #optionTpl let-item=\"item\" let-highlight=\"highlight\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"highlight ? (filterService.userInput$ | async) : null\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </ng-template>\n\n <!-- \u2500\u2500 Unfiltered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if ((filterService.isSearching$ | async) === false) {\n @if (!isDropdown) {\n <!-- Suggestions -->\n @if (suggestionsList().length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (suggested of suggestionsList(); track suggested) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: suggested, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Selected items (multi) -->\n @if (valueManager.value()?.length && type() !== autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n @for (item of $any(valueManager.value()); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: false }\"></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Main items (normalized groups) -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.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 groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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 (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n\n <!-- Selected item (single) -->\n @if (valueManager.value()?.length && type() === autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: valueManager.value(), highlight: true }\"\n ></ng-container>\n </mat-optgroup>\n }\n } @else {\n <!-- \u2500\u2500 Dropdown (unfiltered) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <!-- Ungrouped: flat cdkVirtualFor directly in viewport -->\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.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 <!-- Grouped: nested cdkVirtualFor per group -->\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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 (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n }\n }\n\n <!-- \u2500\u2500 Filtered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (filterService.filteredSuggestions$ | async; as filteredSuggestionList) {\n @if (filterService.filteredItems$ | async; as filteredItemsList) {\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of filteredSuggestionList; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (dynamicFilterLoading()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue()) {\n @if (allowAdd() && !isAlreadyAdded()) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n }\n }\n\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (item of filteredSuggestionList; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{ item | transformItem: textField() }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (dynamicFilterLoading()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue()) {\n @if (allowAdd() && !isAlreadyAdded()) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n }\n }\n }\n </mat-autocomplete>\n @if (hasError()) {\n <mat-hint class=\"error\">\n @if (ngControl) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [customErrors]=\"formErrorConfig()\"\n [label]=\"label()\"\n ></ui-validation-error>\n } @else {\n @for (error of safeErrors(); track error) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ error }}</span>\n </div>\n }\n }\n </mat-hint>\n }\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap;--tag-max-width: calc(100% - 8px) }.large-size .selected-items .value-tag ::ng-deep .tag-container{max-width:100%!important}.large-size .input-container{width:calc(100% - 52px);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;visibility:hidden}.input-container .selected-items.measured{visibility:visible}.input-container .selected-items .value-tag{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items.measurement-container{visibility:hidden;position:absolute;height:0;overflow:hidden;pointer-events:none}.input-container .overlap-count{font-size:14px;line-height:20px}.input-container .overlap-count ui-tag{display:block}.input-container input{margin-left:6px}.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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TagComponentModule }, { kind: "component", type: i6.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired", "showBadge", "notificationsAmount"], outputs: ["close", "press"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i7.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: SpinnerComponentModule }, { kind: "component", type: i8.SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "directive", type: AutocompleteOverflowDetectDirective, selector: "[uiAutocompleteOverflowDetect]", inputs: ["measureContainer", "itemSelector", "reserveWidth"], exportAs: ["autocompleteOverflowDetect"] }, { kind: "ngmodule", type: ValidationErrorModule }, { kind: "component", type: i9.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
753
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.20", type: AutocompleteV2Component, isStandalone: true, selector: "ui-autocomplete-v2", inputs: { itemsList: { classPropertyName: "itemsList", publicName: "itemsList", isSignal: true, isRequired: false, transformFunction: null }, suggestionsList: { classPropertyName: "suggestionsList", publicName: "suggestionsList", isSignal: true, isRequired: false, transformFunction: null }, groupsList: { classPropertyName: "groupsList", publicName: "groupsList", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowAdd: { classPropertyName: "allowAdd", publicName: "allowAdd", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, minCharactersSearch: { classPropertyName: "minCharactersSearch", publicName: "minCharactersSearch", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null }, showBottomContent: { classPropertyName: "showBottomContent", publicName: "showBottomContent", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelClass: { classPropertyName: "dropdownPanelClass", publicName: "dropdownPanelClass", isSignal: true, isRequired: false, transformFunction: null }, closeOnScroll: { classPropertyName: "closeOnScroll", publicName: "closeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowUserInput: { classPropertyName: "allowUserInput", publicName: "allowUserInput", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, dynamicFilterLoading: { classPropertyName: "dynamicFilterLoading", publicName: "dynamicFilterLoading", isSignal: true, isRequired: false, transformFunction: null }, dynamicFilteredList: { classPropertyName: "dynamicFilteredList", publicName: "dynamicFilteredList", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, hasMoreOptionsForInfiniteScroll: { classPropertyName: "hasMoreOptionsForInfiniteScroll", publicName: "hasMoreOptionsForInfiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, itemValue: { classPropertyName: "itemValue", publicName: "itemValue", isSignal: true, isRequired: false, transformFunction: null }, formErrorConfig: { classPropertyName: "formErrorConfig", publicName: "formErrorConfig", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached", scrollViewportBottomReachedFiltered: "scrollViewportBottomReachedFiltered" }, host: { properties: { "attr.theme": "applicationTheme" } }, providers: [AutocompleteValueManager, AutocompleteFilterService, InfiniteScrollDirective], viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "measureElRef", first: true, predicate: ["measureEl"], descendants: true }, { propertyName: "overflowDir", first: true, predicate: ["overflow"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ disabled: _isDisabled() }\">\n <mat-form-field\n [color]=\"hasError() ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type() === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent(),\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label(),\n }\"\n >\n @if (label()) {\n <mat-label\n >{{ label() }}\n @if (required()) {\n <span>*</span>\n }\n </mat-label>\n }\n <div #formField class=\"input-container\">\n @if (textField() ? $any(valueManager.value())?.[textField()] : $any(valueManager.value()) === inputValue()) {\n <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n ('SELECTED' | uiTranslate | async) + ' ' + inputValue()\n }}</span>\n }\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength() !== null && maxLength() !== undefined ? maxLength() : null\"\n [uiPreventInput]=\"!allowUserInput()\"\n [disabled]=\"_isDisabled()\"\n [ngClass]=\"{\n 'unset-margin': valueManager.value() && type() === autocompleteType.LARGE,\n 'no-caret': !allowUserInput(),\n }\"\n (blur)=\"onBlur()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' | uiTranslate | async) +\n ' ' +\n (valueManager.value() | transformItem: textField() : true)\n \"\n matInput\n [placeholder]=\"valueManager.value() && valueManager.value()!.length ? '' : placeholder()\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"inputValue.set($event)\"\n />\n <!-- Hidden measurement container: always in DOM, renders ALL tags for width measurement -->\n @if (type() !== autocompleteType.SINGLE && utils.isArray(valueManager.value())) {\n <div class=\"selected-items measurement-container\" #measureEl>\n @for (valueItem of $any(valueManager.value()); track valueItem; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'measure-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-tag>\n }\n </div>\n }\n\n @if (\n (type() === autocompleteType.LARGE && valueManager.value()) ||\n (!(inputValue() && isInputFocus()) && valueManager.value() && type() !== autocompleteType.SINGLE)\n ) {\n <!-- Visible container: only renders tags that fit. Hidden until first measurement to prevent flash. -->\n <div\n class=\"selected-items\"\n #tagContainer\n uiAutocompleteOverflowDetect\n #overflow=\"autocompleteOverflowDetect\"\n [measureContainer]=\"measureElRef?.nativeElement\"\n [class.measured]=\"\n type() === autocompleteType.LARGE || type() === autocompleteType.SINGLE || overflow.hasMeasured()\n \"\n >\n @if (size() === 'small' && valueManager.value()!.length > 1) {\n <div class=\"selected-count\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n | uiTranslate: { numberSelected: valueManager.value()!.length }\n | async\n }}\n </div>\n } @else {\n @for (valueItem of $any(valueManager.value()); track valueItem; let i = $index) {\n @if (i < overflow.visibleCount()) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [ngStyle]=\"\n type() !== autocompleteType.LARGE\n ? { '--tag-max-width': overflow.tagMaxWidth() ? overflow.tagMaxWidth() + 'px' : 'fit-content' }\n : {}\n \"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n }\n @if (overflow.overflowCount() > 0) {\n <div class=\"overlap-count\" [matTooltip]=\"hiddenItemsTooltip()\">\n <ui-tag [applicationTheme]=\"applicationTheme\" [label]=\"'+' + overflow.overflowCount()\"></ui-tag>\n </div>\n }\n }\n </div>\n }\n </div>\n\n @if (showClearButton()) {\n <ui-icon\n class=\"remove-selected\"\n [tabIndex]=\"_isDisabled() ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type() === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n }\n\n @if (isDropdown) {\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type() === autocompleteType.LARGE }\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n }\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass()\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"onPanelOpened()\"\n >\n <!-- Reusable option template \u2014 must be inside mat-autocomplete for @ContentChildren to find mat-options -->\n <ng-template #optionTpl let-item=\"item\" let-highlight=\"highlight\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"highlight ? (filterService.userInput$ | async) : null\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </ng-template>\n\n <!-- \u2500\u2500 Unfiltered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if ((filterService.isSearching$ | async) === false) {\n @if (!isDropdown) {\n <!-- Suggestions -->\n @if (suggestionsList().length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (suggested of suggestionsList(); track suggested) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: suggested, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Selected items (multi) -->\n @if (valueManager.value()?.length && type() !== autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n @for (item of $any(valueManager.value()); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: false }\"></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Main items (normalized groups) -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.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 groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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 (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n\n <!-- Selected item (single) -->\n @if (valueManager.value()?.length && type() === autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: valueManager.value(), highlight: true }\"\n ></ng-container>\n </mat-optgroup>\n }\n } @else {\n <!-- \u2500\u2500 Dropdown (unfiltered) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <!-- Ungrouped: flat cdkVirtualFor directly in viewport -->\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.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 <!-- Grouped: nested cdkVirtualFor per group -->\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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 (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n }\n }\n\n <!-- \u2500\u2500 Filtered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (filterService.filteredSuggestions$ | async; as filteredSuggestionList) {\n @if (filterService.filteredItems$ | async; as filteredItemsList) {\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of filteredSuggestionList; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (dynamicFilterLoading()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue()) {\n @if (allowAdd() && !isAlreadyAdded()) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n }\n }\n\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (item of filteredSuggestionList; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{ item | transformItem: textField() }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (dynamicFilterLoading()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue()) {\n @if (allowAdd() && !isAlreadyAdded()) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n }\n }\n }\n </mat-autocomplete>\n @if (hasError()) {\n <mat-hint class=\"error\">\n @if (ngControl) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [customErrors]=\"formErrorConfig()\"\n [label]=\"label()\"\n ></ui-validation-error>\n } @else {\n @for (error of safeErrors(); track error) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ error }}</span>\n </div>\n }\n }\n </mat-hint>\n }\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap;--tag-max-width: calc(100% - 8px) }.large-size .selected-items .value-tag ::ng-deep .tag-container{max-width:100%!important}.large-size .input-container{width:calc(100% - 52px);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;visibility:hidden}.input-container .selected-items.measured{visibility:visible}.input-container .selected-items .value-tag{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items.measurement-container{visibility:hidden;position:absolute;height:0;overflow:hidden;pointer-events:none}.input-container .overlap-count{font-size:14px;line-height:20px}.input-container .overlap-count ui-tag{display:block}.input-container input{margin-left:6px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TagComponentModule }, { kind: "component", type: i6.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired", "showBadge", "notificationsAmount"], outputs: ["close", "press"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i7.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: SpinnerComponentModule }, { kind: "component", type: i8.SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "directive", type: AutocompleteOverflowDetectDirective, selector: "[uiAutocompleteOverflowDetect]", inputs: ["measureContainer", "itemSelector", "reserveWidth"], exportAs: ["autocompleteOverflowDetect"] }, { kind: "ngmodule", type: ValidationErrorModule }, { kind: "component", type: i9.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
747
754
|
}
|
|
748
755
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: AutocompleteV2Component, decorators: [{
|
|
749
756
|
type: Component,
|
|
@@ -770,7 +777,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImpo
|
|
|
770
777
|
MatTooltipModule,
|
|
771
778
|
], host: {
|
|
772
779
|
'[attr.theme]': 'applicationTheme',
|
|
773
|
-
}, providers: [AutocompleteValueManager, AutocompleteFilterService, InfiniteScrollDirective], template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ disabled: _isDisabled() }\">\n <mat-form-field\n [color]=\"hasError() ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type() === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent(),\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label(),\n }\"\n >\n @if (label()) {\n <mat-label\n >{{ label() }}\n @if (required()) {\n <span>*</span>\n }\n </mat-label>\n }\n <div #formField class=\"input-container\">\n @if (textField() ? $any(valueManager.value())?.[textField()] : $any(valueManager.value()) === inputValue()) {\n <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n ('SELECTED' | uiTranslate | async) + ' ' + inputValue()\n }}</span>\n }\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength() !== null && maxLength() !== undefined ? maxLength() : null\"\n [uiPreventInput]=\"!allowUserInput()\"\n [disabled]=\"_isDisabled()\"\n [ngClass]=\"{\n 'unset-margin': valueManager.value() && type() === autocompleteType.LARGE,\n 'no-caret': !allowUserInput(),\n }\"\n (blur)=\"onBlur()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' | uiTranslate | async) +\n ' ' +\n (valueManager.value() | transformItem: textField() : true)\n \"\n matInput\n [placeholder]=\"valueManager.value() && valueManager.value()!.length ? '' : placeholder()\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"inputValue.set($event)\"\n />\n <!-- Hidden measurement container: always in DOM, renders ALL tags for width measurement -->\n @if (type() !== autocompleteType.SINGLE && utils.isArray(valueManager.value())) {\n <div class=\"selected-items measurement-container\" #measureEl>\n @for (valueItem of $any(valueManager.value()); track valueItem; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'measure-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-tag>\n }\n </div>\n }\n\n @if (\n (type() === autocompleteType.LARGE && valueManager.value()) ||\n (!(inputValue() && isInputFocus()) && valueManager.value() && type() !== autocompleteType.SINGLE)\n ) {\n <!-- Visible container: only renders tags that fit. Hidden until first measurement to prevent flash. -->\n <div\n class=\"selected-items\"\n #tagContainer\n uiAutocompleteOverflowDetect\n #overflow=\"autocompleteOverflowDetect\"\n [measureContainer]=\"measureElRef?.nativeElement\"\n [class.measured]=\"\n type() === autocompleteType.LARGE || type() === autocompleteType.SINGLE || overflow.hasMeasured()\n \"\n >\n @if (size() === 'small' && valueManager.value()!.length > 1) {\n <div class=\"selected-count\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n | uiTranslate: { numberSelected: valueManager.value()!.length }\n | async\n }}\n </div>\n } @else {\n @for (valueItem of $any(valueManager.value()); track valueItem; let i = $index) {\n @if (i < overflow.visibleCount()) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [ngStyle]=\"\n type() !== autocompleteType.LARGE\n ? { '--tag-max-width': overflow.tagMaxWidth() ? overflow.tagMaxWidth() + 'px' : 'fit-content' }\n : {}\n \"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n }\n @if (overflow.overflowCount() > 0) {\n <div class=\"overlap-count\" [matTooltip]=\"hiddenItemsTooltip()\">\n <ui-tag [applicationTheme]=\"applicationTheme\" [label]=\"'+' + overflow.overflowCount()\"></ui-tag>\n </div>\n }\n }\n </div>\n }\n </div>\n\n @if (showClearButton()) {\n <ui-icon\n class=\"remove-selected\"\n [tabIndex]=\"_isDisabled() ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type() === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n }\n\n @if (isDropdown) {\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type() === autocompleteType.LARGE }\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n }\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass()\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"onPanelOpened()\"\n >\n <!-- Reusable option template \u2014 must be inside mat-autocomplete for @ContentChildren to find mat-options -->\n <ng-template #optionTpl let-item=\"item\" let-highlight=\"highlight\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"highlight ? (filterService.userInput$ | async) : null\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </ng-template>\n\n <!-- \u2500\u2500 Unfiltered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if ((filterService.isSearching$ | async) === false) {\n @if (!isDropdown) {\n <!-- Suggestions -->\n @if (suggestionsList().length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (suggested of suggestionsList(); track suggested) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: suggested, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Selected items (multi) -->\n @if (valueManager.value()?.length && type() !== autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n @for (item of $any(valueManager.value()); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: false }\"></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Main items (normalized groups) -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.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 groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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 (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n\n <!-- Selected item (single) -->\n @if (valueManager.value()?.length && type() === autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: valueManager.value(), highlight: true }\"\n ></ng-container>\n </mat-optgroup>\n }\n } @else {\n <!-- \u2500\u2500 Dropdown (unfiltered) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <!-- Ungrouped: flat cdkVirtualFor directly in viewport -->\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.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 <!-- Grouped: nested cdkVirtualFor per group -->\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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 (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n }\n }\n\n <!-- \u2500\u2500 Filtered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (filterService.filteredSuggestions$ | async; as filteredSuggestionList) {\n @if (filterService.filteredItems$ | async; as filteredItemsList) {\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of filteredSuggestionList; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (dynamicFilterLoading()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue()) {\n @if (allowAdd() && !isAlreadyAdded()) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n }\n }\n\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (item of filteredSuggestionList; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{ item | transformItem: textField() }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (dynamicFilterLoading()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue()) {\n @if (allowAdd() && !isAlreadyAdded()) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n }\n }\n }\n </mat-autocomplete>\n @if (hasError()) {\n <mat-hint class=\"error\">\n @if (ngControl) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [customErrors]=\"formErrorConfig()\"\n [label]=\"label()\"\n ></ui-validation-error>\n } @else {\n @for (error of safeErrors(); track error) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ error }}</span>\n </div>\n }\n }\n </mat-hint>\n }\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap;--tag-max-width: calc(100% - 8px) }.large-size .selected-items .value-tag ::ng-deep .tag-container{max-width:100%!important}.large-size .input-container{width:calc(100% - 52px);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;visibility:hidden}.input-container .selected-items.measured{visibility:visible}.input-container .selected-items .value-tag{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items.measurement-container{visibility:hidden;position:absolute;height:0;overflow:hidden;pointer-events:none}.input-container .overlap-count{font-size:14px;line-height:20px}.input-container .overlap-count ui-tag{display:block}.input-container input{margin-left:6px}.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"] }]
|
|
780
|
+
}, providers: [AutocompleteValueManager, AutocompleteFilterService, InfiniteScrollDirective], template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ disabled: _isDisabled() }\">\n <mat-form-field\n [color]=\"hasError() ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type() === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent(),\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label(),\n }\"\n >\n @if (label()) {\n <mat-label\n >{{ label() }}\n @if (required()) {\n <span>*</span>\n }\n </mat-label>\n }\n <div #formField class=\"input-container\">\n @if (textField() ? $any(valueManager.value())?.[textField()] : $any(valueManager.value()) === inputValue()) {\n <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n ('SELECTED' | uiTranslate | async) + ' ' + inputValue()\n }}</span>\n }\n\n <input\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength() !== null && maxLength() !== undefined ? maxLength() : null\"\n [uiPreventInput]=\"!allowUserInput()\"\n [disabled]=\"_isDisabled()\"\n [ngClass]=\"{\n 'unset-margin': valueManager.value() && type() === autocompleteType.LARGE,\n 'no-caret': !allowUserInput(),\n }\"\n (blur)=\"onBlur()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' | uiTranslate | async) +\n ' ' +\n (valueManager.value() | transformItem: textField() : true)\n \"\n matInput\n [placeholder]=\"valueManager.value() && valueManager.value()!.length ? '' : placeholder()\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"inputValue.set($event)\"\n />\n <!-- Hidden measurement container: always in DOM, renders ALL tags for width measurement -->\n @if (type() !== autocompleteType.SINGLE && utils.isArray(valueManager.value())) {\n <div class=\"selected-items measurement-container\" #measureEl>\n @for (valueItem of $any(valueManager.value()); track valueItem; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'measure-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-tag>\n }\n </div>\n }\n\n @if (\n (type() === autocompleteType.LARGE && valueManager.value()) ||\n (!(inputValue() && isInputFocus()) && valueManager.value() && type() !== autocompleteType.SINGLE)\n ) {\n <!-- Visible container: only renders tags that fit. Hidden until first measurement to prevent flash. -->\n <div\n class=\"selected-items\"\n #tagContainer\n uiAutocompleteOverflowDetect\n #overflow=\"autocompleteOverflowDetect\"\n [measureContainer]=\"measureElRef?.nativeElement\"\n [class.measured]=\"\n type() === autocompleteType.LARGE || type() === autocompleteType.SINGLE || overflow.hasMeasured()\n \"\n >\n @if (size() === 'small' && valueManager.value()!.length > 1) {\n <div class=\"selected-count\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n | uiTranslate: { numberSelected: valueManager.value()!.length }\n | async\n }}\n </div>\n } @else {\n @for (valueItem of $any(valueManager.value()); track valueItem; let i = $index) {\n @if (i < overflow.visibleCount()) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [applicationTheme]=\"applicationTheme\"\n [ngStyle]=\"\n type() !== autocompleteType.LARGE\n ? { '--tag-max-width': overflow.tagMaxWidth() ? overflow.tagMaxWidth() + 'px' : 'fit-content' }\n : {}\n \"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n }\n @if (overflow.overflowCount() > 0) {\n <div class=\"overlap-count\" [matTooltip]=\"hiddenItemsTooltip()\">\n <ui-tag [applicationTheme]=\"applicationTheme\" [label]=\"'+' + overflow.overflowCount()\"></ui-tag>\n </div>\n }\n }\n </div>\n }\n </div>\n\n @if (showClearButton()) {\n <ui-icon\n class=\"remove-selected\"\n [tabIndex]=\"_isDisabled() ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type() === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n }\n\n @if (isDropdown) {\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type() === autocompleteType.LARGE }\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n }\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass()\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"onPanelOpened()\"\n >\n <!-- Reusable option template \u2014 must be inside mat-autocomplete for @ContentChildren to find mat-options -->\n <ng-template #optionTpl let-item=\"item\" let-highlight=\"highlight\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"highlight ? (filterService.userInput$ | async) : null\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </ng-template>\n\n <!-- \u2500\u2500 Unfiltered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if ((filterService.isSearching$ | async) === false) {\n @if (!isDropdown) {\n <!-- Suggestions -->\n @if (suggestionsList().length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (suggested of suggestionsList(); track suggested) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: suggested, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Selected items (multi) -->\n @if (valueManager.value()?.length && type() !== autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n @for (item of $any(valueManager.value()); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: false }\"></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Main items (normalized groups) -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.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 groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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 (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n\n <!-- Selected item (single) -->\n @if (valueManager.value()?.length && type() === autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: valueManager.value(), highlight: true }\"\n ></ng-container>\n </mat-optgroup>\n }\n } @else {\n <!-- \u2500\u2500 Dropdown (unfiltered) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <!-- Ungrouped: flat cdkVirtualFor directly in viewport -->\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.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 <!-- Grouped: nested cdkVirtualFor per group -->\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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 (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n }\n }\n\n <!-- \u2500\u2500 Filtered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (filterService.filteredSuggestions$ | async; as filteredSuggestionList) {\n @if (filterService.filteredItems$ | async; as filteredItemsList) {\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of filteredSuggestionList; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</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]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (dynamicFilterLoading()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue()) {\n @if (allowAdd() && !isAlreadyAdded()) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n }\n }\n\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (item of filteredSuggestionList; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{ item | transformItem: textField() }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <span [selectText]=\"filterService.userInput$ | async\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (dynamicFilterLoading()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue()) {\n @if (allowAdd() && !isAlreadyAdded()) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n }\n }\n }\n </mat-autocomplete>\n @if (hasError()) {\n <mat-hint class=\"error\">\n @if (ngControl) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [customErrors]=\"formErrorConfig()\"\n [label]=\"label()\"\n ></ui-validation-error>\n } @else {\n @for (error of safeErrors(); track error) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ error }}</span>\n </div>\n }\n }\n </mat-hint>\n }\n </mat-form-field>\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap;--tag-max-width: calc(100% - 8px) }.large-size .selected-items .value-tag ::ng-deep .tag-container{max-width:100%!important}.large-size .input-container{width:calc(100% - 52px);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;visibility:hidden}.input-container .selected-items.measured{visibility:visible}.input-container .selected-items .value-tag{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items.measurement-container{visibility:hidden;position:absolute;height:0;overflow:hidden;pointer-events:none}.input-container .overlap-count{font-size:14px;line-height:20px}.input-container .overlap-count ui-tag{display:block}.input-container input{margin-left:6px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{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"] }]
|
|
774
781
|
}], ctorParameters: () => [], propDecorators: { formFieldElement: [{
|
|
775
782
|
type: ViewChild,
|
|
776
783
|
args: ['formField']
|