@testgorilla/tgo-ui 12.0.3 → 12.0.4
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.
|
@@ -715,7 +715,7 @@ var AutocompleteComponent = class AutocompleteComponent {
|
|
|
715
715
|
],
|
|
716
716
|
usesOnChanges: true,
|
|
717
717
|
ngImport: i0,
|
|
718
|
-
template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"\n safeErrors.length ||\n (ngControl?.errors && ngControl?.touched) ||\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ? 'warn'\n : 'accent'\n \"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n }\"\n >\n @if (label) {\n <mat-label\n >{{ label }}\n @if (required) {\n <span>*</span>\n }\n </mat-label>\n }\n <div #formField class=\"input-container\">\n @if (textField ? value?.[textField] : value === inputValue) {\n <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n ('SELECTED' | uiTranslate | async) + ' ' + inputValue\n }}</span>\n }\n\n <input\n [attr.data-testid]=\"testId ?? 'autocomplete-input'\"\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n [uiPreventInput]=\"!allowUserInput\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\n \"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [placeholder]=\"value && value.length ? '' : placeholder\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n @if (\n (type === autocompleteType.LARGE && value) ||\n (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n ) {\n <div class=\"selected-items\" #tagContainer>\n @for (valueItem of value; track valueItem; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [isDisabled]=\"disabled\"\n [applicationTheme]=\"applicationTheme\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [style.display]=\"\n (isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)\n ? 'none'\n : 'block'\n \"\n [ngStyle]=\"{\n '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px',\n }\"\n [ngClass]=\"{\n 'overlap-tag':\n isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n @if (size === 'small') {\n @if (value.length > 1) {\n <div class=\"selected-count\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n | uiTranslate: { numberSelected: (value | slice: overlapIndex).length }\n | async\n }}\n </div>\n }\n } @else {\n @if (value.length > 1 && isOverLapping) {\n <div class=\"overlap-count\">\n <ui-tag\n [applicationTheme]=\"applicationTheme\"\n [isDisabled]=\"disabled\"\n [label]=\"'+' + (value.length - overlapIndex)\"\n ></ui-tag>\n </div>\n }\n }\n </div>\n }\n </div>\n\n @if (\n (clearable && type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) ||\n (type !== autocompleteType.SINGLE &&\n value &&\n value.length > 1 &&\n ((AutocompleteUtils.isPrimitive(value) && value.length) ||\n (!AutocompleteUtils.isPrimitive(value) &&\n ((AutocompleteUtils.isArray(value) && value.length) ||\n (!AutocompleteUtils.isArray(value) && !value.length)))))\n ) {\n <ui-icon\n class=\"remove-selected\"\n [tabIndex]=\"disabled ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n }\n\n @if (isDropdown) {\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n }\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n @if ((searchResult$ | async) === false) {\n @if (!isDropdown) {\n @if (suggestionsList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (suggested of suggestionsList; track suggested) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (value?.length && type !== autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n @for (item of value; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (isGrouped) {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (value?.length && type === autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n <mat-option (mousedown)=\"$event.preventDefault()\" [class]=\"'selected-option'\" [value]=\"value\">\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n }\n } @else {\n @if (virtualScroll || infiniteScroll) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(itemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n @if (infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (!isGrouped) {\n @for (item of itemsList; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n }\n }\n }\n\n @if (filteredSuggestionList$ | async; as filteredSuggestionList) {\n @if (filteredItemsList$ | async; as filteredItemsList) {\n @if (virtualScroll || infiniteScroll) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n }\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (item of filteredSuggestionList; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n }\n }\n }\n }\n </mat-autocomplete>\n @if (\n safeErrors.length ||\n ($safeNavigationMigration(ngControl?.errors) | hasValidationError) ||\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ) {\n <mat-hint class=\"error\">\n @if (\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_SELECTED_ERROR' | uiTranslate: { max: maxItemSelected } | async\n }}</span>\n </div>\n }\n @if (safeErrors.length) {\n @for (error of safeErrors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n </mat-form-field>\n </div>\n</ng-container>\n",
|
|
718
|
+
template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"\n safeErrors.length ||\n (ngControl?.errors && ngControl?.touched) ||\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ? 'warn'\n : 'accent'\n \"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n }\"\n >\n @if (label) {\n <mat-label\n >{{ label }}\n @if (required) {\n <span>*</span>\n }\n </mat-label>\n }\n <div #formField class=\"input-container\">\n @if (textField ? value?.[textField] : value === inputValue) {\n <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n ('SELECTED' | uiTranslate | async) + ' ' + inputValue\n }}</span>\n }\n\n <input\n [attr.data-testid]=\"testId ?? 'autocomplete-input'\"\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n [uiPreventInput]=\"!allowUserInput\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\n \"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [placeholder]=\"value && value.length ? '' : placeholder\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n @if (\n (type === autocompleteType.LARGE && value) ||\n (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n ) {\n <div class=\"selected-items\" #tagContainer>\n @for (valueItem of value; track valueItem; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [isDisabled]=\"disabled\"\n [applicationTheme]=\"applicationTheme\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [style.display]=\"\n (isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)\n ? 'none'\n : 'block'\n \"\n [ngStyle]=\"{\n '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px',\n }\"\n [ngClass]=\"{\n 'overlap-tag':\n isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n @if (size === 'small') {\n @if (value.length > 1) {\n <div class=\"selected-count\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n | uiTranslate: { numberSelected: (value | slice: overlapIndex).length }\n | async\n }}\n </div>\n }\n } @else {\n @if (value.length > 1 && isOverLapping) {\n <div class=\"overlap-count\">\n <ui-tag\n [applicationTheme]=\"applicationTheme\"\n [isDisabled]=\"disabled\"\n [label]=\"'+' + (value.length - overlapIndex)\"\n ></ui-tag>\n </div>\n }\n }\n </div>\n }\n </div>\n\n @if (\n (clearable && type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) ||\n (type !== autocompleteType.SINGLE &&\n value &&\n value.length > 1 &&\n ((AutocompleteUtils.isPrimitive(value) && value.length) ||\n (!AutocompleteUtils.isPrimitive(value) &&\n ((AutocompleteUtils.isArray(value) && value.length) ||\n (!AutocompleteUtils.isArray(value) && !value.length)))))\n ) {\n <ui-icon\n class=\"remove-selected\"\n [tabIndex]=\"disabled ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n }\n\n @if (isDropdown) {\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n }\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n @if (type !== autocompleteType.MULTI || (value?.length ?? 0) < maxItemSelected) {\n @if ((searchResult$ | async) === false) {\n @if (!isDropdown) {\n @if (suggestionsList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (suggested of suggestionsList; track suggested) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (value?.length && type !== autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n @for (item of value; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (isGrouped) {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (value?.length && type === autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n <mat-option (mousedown)=\"$event.preventDefault()\" [class]=\"'selected-option'\" [value]=\"value\">\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n }\n } @else {\n @if (virtualScroll || infiniteScroll) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(itemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n @if (infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (!isGrouped) {\n @for (item of itemsList; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n }\n }\n }\n\n @if (filteredSuggestionList$ | async; as filteredSuggestionList) {\n @if (filteredItemsList$ | async; as filteredItemsList) {\n @if (virtualScroll || infiniteScroll) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n }\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (item of filteredSuggestionList; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n }\n }\n }\n }\n </mat-autocomplete>\n @if (\n safeErrors.length ||\n ($safeNavigationMigration(ngControl?.errors) | hasValidationError) ||\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ) {\n <mat-hint class=\"error\">\n @if (\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_SELECTED_ERROR' | uiTranslate: { max: maxItemSelected } | async\n }}</span>\n </div>\n }\n @if (safeErrors.length) {\n @for (error of safeErrors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n </mat-form-field>\n </div>\n</ng-container>\n",
|
|
719
719
|
styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:flex;flex-direction:column-reverse}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}\n"],
|
|
720
720
|
dependencies: [
|
|
721
721
|
{
|
|
@@ -1012,7 +1012,7 @@ i0.ɵɵngDeclareClassMetadata({
|
|
|
1012
1012
|
selector: "ui-autocomplete",
|
|
1013
1013
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1014
1014
|
standalone: false,
|
|
1015
|
-
template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"\n safeErrors.length ||\n (ngControl?.errors && ngControl?.touched) ||\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ? 'warn'\n : 'accent'\n \"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n }\"\n >\n @if (label) {\n <mat-label\n >{{ label }}\n @if (required) {\n <span>*</span>\n }\n </mat-label>\n }\n <div #formField class=\"input-container\">\n @if (textField ? value?.[textField] : value === inputValue) {\n <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n ('SELECTED' | uiTranslate | async) + ' ' + inputValue\n }}</span>\n }\n\n <input\n [attr.data-testid]=\"testId ?? 'autocomplete-input'\"\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n [uiPreventInput]=\"!allowUserInput\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\n \"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [placeholder]=\"value && value.length ? '' : placeholder\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n @if (\n (type === autocompleteType.LARGE && value) ||\n (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n ) {\n <div class=\"selected-items\" #tagContainer>\n @for (valueItem of value; track valueItem; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [isDisabled]=\"disabled\"\n [applicationTheme]=\"applicationTheme\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [style.display]=\"\n (isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)\n ? 'none'\n : 'block'\n \"\n [ngStyle]=\"{\n '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px',\n }\"\n [ngClass]=\"{\n 'overlap-tag':\n isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n @if (size === 'small') {\n @if (value.length > 1) {\n <div class=\"selected-count\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n | uiTranslate: { numberSelected: (value | slice: overlapIndex).length }\n | async\n }}\n </div>\n }\n } @else {\n @if (value.length > 1 && isOverLapping) {\n <div class=\"overlap-count\">\n <ui-tag\n [applicationTheme]=\"applicationTheme\"\n [isDisabled]=\"disabled\"\n [label]=\"'+' + (value.length - overlapIndex)\"\n ></ui-tag>\n </div>\n }\n }\n </div>\n }\n </div>\n\n @if (\n (clearable && type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) ||\n (type !== autocompleteType.SINGLE &&\n value &&\n value.length > 1 &&\n ((AutocompleteUtils.isPrimitive(value) && value.length) ||\n (!AutocompleteUtils.isPrimitive(value) &&\n ((AutocompleteUtils.isArray(value) && value.length) ||\n (!AutocompleteUtils.isArray(value) && !value.length)))))\n ) {\n <ui-icon\n class=\"remove-selected\"\n [tabIndex]=\"disabled ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n }\n\n @if (isDropdown) {\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n }\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n @if (type !== autocompleteType.MULTI || value?.length < maxItemSelected) {\n @if ((searchResult$ | async) === false) {\n @if (!isDropdown) {\n @if (suggestionsList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (suggested of suggestionsList; track suggested) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (value?.length && type !== autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n @for (item of value; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (isGrouped) {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (value?.length && type === autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n <mat-option (mousedown)=\"$event.preventDefault()\" [class]=\"'selected-option'\" [value]=\"value\">\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n }\n } @else {\n @if (virtualScroll || infiniteScroll) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(itemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n @if (infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (!isGrouped) {\n @for (item of itemsList; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n }\n }\n }\n\n @if (filteredSuggestionList$ | async; as filteredSuggestionList) {\n @if (filteredItemsList$ | async; as filteredItemsList) {\n @if (virtualScroll || infiniteScroll) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n }\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (item of filteredSuggestionList; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n }\n }\n }\n }\n </mat-autocomplete>\n @if (\n safeErrors.length ||\n ($safeNavigationMigration(ngControl?.errors) | hasValidationError) ||\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ) {\n <mat-hint class=\"error\">\n @if (\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_SELECTED_ERROR' | uiTranslate: { max: maxItemSelected } | async\n }}</span>\n </div>\n }\n @if (safeErrors.length) {\n @for (error of safeErrors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n </mat-form-field>\n </div>\n</ng-container>\n",
|
|
1015
|
+
template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ 'full-width': fullWidth, disabled: disabled }\">\n <mat-form-field\n [color]=\"\n safeErrors.length ||\n (ngControl?.errors && ngControl?.touched) ||\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ? 'warn'\n : 'accent'\n \"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent,\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label,\n }\"\n >\n @if (label) {\n <mat-label\n >{{ label }}\n @if (required) {\n <span>*</span>\n }\n </mat-label>\n }\n <div #formField class=\"input-container\">\n @if (textField ? value?.[textField] : value === inputValue) {\n <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n ('SELECTED' | uiTranslate | async) + ' ' + inputValue\n }}</span>\n }\n\n <input\n [attr.data-testid]=\"testId ?? 'autocomplete-input'\"\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength !== null && maxLength !== undefined ? maxLength : null\"\n [uiPreventInput]=\"!allowUserInput\"\n [disabled]=\"disabled\"\n [ngClass]=\"{ 'unset-margin': value && type === autocompleteType.LARGE, 'no-caret': !allowUserInput }\"\n (blur)=\"refillInput()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' | uiTranslate | async) + ' ' + (value | transformItem: textField : true)\n \"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n matInput\n [placeholder]=\"value && value.length ? '' : placeholder\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n (input)=\"onInputChange($event)\"\n [(ngModel)]=\"inputValue\"\n [ngModelOptions]=\"{ standalone: true }\"\n />\n @if (\n (type === autocompleteType.LARGE && value) ||\n (!(inputValue && isInputFocus) && value && type !== autocompleteType.SINGLE)\n ) {\n <div class=\"selected-items\" #tagContainer>\n @for (valueItem of value; track valueItem; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n [label]=\"valueItem | transformItem: textField\"\n [allowClose]=\"true\"\n [isDisabled]=\"disabled\"\n [applicationTheme]=\"applicationTheme\"\n [style.opacity]=\"type === autocompleteType.MULTI ? inputOpacity : 1\"\n [style.display]=\"\n (isOverLapping && i > 0 && i >= overlapIndex) || (size === 'small' && value.length > 1)\n ? 'none'\n : 'block'\n \"\n [ngStyle]=\"{\n '--tag-max-width': type === autocompleteType.LARGE ? 'fit-content' : firstTagMaxWidth + 'px',\n }\"\n [ngClass]=\"{\n 'overlap-tag':\n isOverlapChecking && overlapIndex && i >= overlapIndex && type === autocompleteType.MULTI,\n }\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n @if (size === 'small') {\n @if (value.length > 1) {\n <div class=\"selected-count\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n | uiTranslate: { numberSelected: (value | slice: overlapIndex).length }\n | async\n }}\n </div>\n }\n } @else {\n @if (value.length > 1 && isOverLapping) {\n <div class=\"overlap-count\">\n <ui-tag\n [applicationTheme]=\"applicationTheme\"\n [isDisabled]=\"disabled\"\n [label]=\"'+' + (value.length - overlapIndex)\"\n ></ui-tag>\n </div>\n }\n }\n </div>\n }\n </div>\n\n @if (\n (clearable && type === autocompleteType.SINGLE && (value?.length || hasObjectValue)) ||\n (type !== autocompleteType.SINGLE &&\n value &&\n value.length > 1 &&\n ((AutocompleteUtils.isPrimitive(value) && value.length) ||\n (!AutocompleteUtils.isPrimitive(value) &&\n ((AutocompleteUtils.isArray(value) && value.length) ||\n (!AutocompleteUtils.isArray(value) && !value.length)))))\n ) {\n <ui-icon\n class=\"remove-selected\"\n [tabIndex]=\"disabled ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n }\n\n @if (isDropdown) {\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type === autocompleteType.LARGE }\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n }\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"gotoUp()\"\n >\n @if (type !== autocompleteType.MULTI || (value?.length ?? 0) < maxItemSelected) {\n @if ((searchResult$ | async) === false) {\n @if (!isDropdown) {\n @if (suggestionsList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (suggested of suggestionsList; track suggested) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': suggested | includes: value : valueField }\"\n [value]=\"suggested\"\n >\n <span [selectText]=\"userInput$ | async\">{{ suggested | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (value?.length && type !== autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n @for (item of value; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span>{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (isGrouped) {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (value?.length && type === autocompleteType.SINGLE) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n <mat-option (mousedown)=\"$event.preventDefault()\" [class]=\"'selected-option'\" [value]=\"value\">\n <span [selectText]=\"userInput$ | async\">{{ value | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n }\n } @else {\n @if (virtualScroll || infiniteScroll) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(itemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of itemsList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n @if (infiniteScroll && hasMoreOptionsForInfiniteScroll) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.items\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (!isGrouped) {\n @for (item of itemsList; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @for (group of itemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n }\n }\n }\n\n @if (filteredSuggestionList$ | async; as filteredSuggestionList) {\n @if (filteredItemsList$ | async; as filteredItemsList) {\n @if (virtualScroll || infiniteScroll) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of group.filteredItems\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n *cdkVirtualFor=\"let item of filteredSuggestionList\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n </mat-optgroup>\n }\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (isGrouped && filteredItemsList.length) {\n @for (group of filteredItemsList; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n }\n }\n }\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (item of filteredSuggestionList; track item) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n } @else {\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: value : valueField }\"\n [value]=\"item\"\n >\n <span [selectText]=\"userInput$ | async\">{{ item | transformItem: textField }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n @if (isDynamicFilteringEnabled && dynamicFilterLoading) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue) {\n @if (allowAdd && !isAlreadyAdded) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue }}\"</span>\n </mat-option>\n } @else if (!filteredItemsList.length && !filteredSuggestionList.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n }\n }\n }\n }\n </mat-autocomplete>\n @if (\n safeErrors.length ||\n ($safeNavigationMigration(ngControl?.errors) | hasValidationError) ||\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ) {\n <mat-hint class=\"error\">\n @if (\n (AutocompleteUtils.isArray(value) && value.length) > maxItemSelected ||\n ((AutocompleteUtils.isArray(value) && value.length) >= maxItemSelected && inputValue && inputValue !== ' ')\n ) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{\n translationContext + 'MAX_SELECTED_ERROR' | uiTranslate: { max: maxItemSelected } | async\n }}</span>\n </div>\n }\n @if (safeErrors.length) {\n @for (error of safeErrors; track trackByFn($index, error)) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span [innerHTML]=\"error\"></span>\n </div>\n }\n }\n @if (ngControl && !hideBuiltInErrors) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [label]=\"hideLabelInErrors ? null : label\"\n ></ui-validation-error>\n }\n </mat-hint>\n }\n </mat-form-field>\n </div>\n</ng-container>\n",
|
|
1016
1016
|
styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap}.large-size .input-container{display:flex;flex-direction:column-reverse}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items .value-tag{max-width:var(--tag-max-width)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width)}.input-container .selected-items .overlap-count{font-size:14px;line-height:20px}.input-container .selected-items .overlap-count ui-tag{display:block}.input-container .selected-items .overlap-tag{position:absolute;opacity:0}.input-container input{margin-left:6px}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}\n"]
|
|
1017
1017
|
}]
|
|
1018
1018
|
}],
|