@fundamental-ngx/core 0.61.2 → 0.62.0-rc.1

package/fesm2022/fundamental-ngx-core-combobox.mjs

@@ -23,7 +23,7 @@ import { ContentDensityModule, contentDensityObserverProviders } from '@fundamen
 import { FD_DEFAULT_ICON_FONT_FAMILY, IconComponent } from '@fundamental-ngx/core/icon';
 import { InputGroupComponent, InputGroupInputDirective } from '@fundamental-ngx/core/input-group';
 import { ListComponent, ListItemComponent, ListTitleDirective, ListGroupHeaderDirective, FD_LIST_MESSAGE_DIRECTIVE } from '@fundamental-ngx/core/list';
-import { FdTranslatePipe } from '@fundamental-ngx/i18n';
+import { resolveTranslationSignal, FdTranslatePipe } from '@fundamental-ngx/i18n';
 
 class ComboboxItemDirective {
     constructor() {
@@ -127,7 +127,7 @@ class ComboboxMobileComponent extends MobileModeBase {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ComboboxMobileComponent, deps: [{ token: COMBOBOX_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ComboboxMobileComponent, isStandalone: true, selector: "fd-combobox-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button title=\"Close\" fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-template [ngTemplateOutlet]=\"childContent?.controlTemplate || null\"></ng-template>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-template [ngTemplateOutlet]=\"childContent?.listTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (mobileConfig.approveButtonText) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar fdkInitialFocus [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\">\n                </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarMiddleDirective, selector: "[fd-bar-middle]" }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header" }, { kind: "component", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: ComboboxMobileComponent, isStandalone: true, selector: "fd-combobox-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button title=\"Close\" fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element [fullWidth]=\"true\">\n                        <ng-template [ngTemplateOutlet]=\"childContent?.controlTemplate || null\"></ng-template>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-template [ngTemplateOutlet]=\"childContent?.listTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (mobileConfig.approveButtonText) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar fdkInitialFocus [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\">\n                </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", dependencies: [{ kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarMiddleDirective, selector: "[fd-bar-middle]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "component", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ComboboxMobileComponent, decorators: [{
             type: Component,
@@ -341,6 +341,8 @@ class ComboboxComponent {
         /** @hidden */
         this._itemMousedown = false;
         /** @hidden */
+        this._clearButtonTitle = resolveTranslationSignal('coreCombobox.clearButtonTitle');
+        /** @hidden */
         this._subscriptions = new Subscription();
         /** @hidden */
         this.onChange = () => { };
@@ -795,7 +797,7 @@ class ComboboxComponent {
                 provide: FD_COMBOBOX_COMPONENT,
                 useExisting: ComboboxComponent
             }
-        ], queries: [{ propertyName: "_comboboxItemRenderer", first: true, predicate: ComboboxItemDirective, descendants: true }, { propertyName: "listMessages", predicate: FD_LIST_MESSAGE_DIRECTIVE }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "inputGroup", first: true, predicate: InputGroupComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? mobileTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fd-popover-custom-list\"\n        [class.fd-combobox-full-width]=\"isSearch || showClearButton\"\n        [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [scrollStrategy]=\"_repositionScrollStrategy\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readOnly\"\n        [maxWidth]=\"!mobile && noDropDownMaxWidth ? null : dropDownMaxWidthPx\"\n        [style.width]=\"width && '100%'\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"!displayedValues.length\">\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template let-term=\"term\" #itemSource>\n    @if (!_customRenderer) {\n        <span\n            fd-list-title\n            fdTruncatedTitle\n            [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText : highlighting && filterHighlight\"\n        >\n        </span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"_customRenderer\"\n            [ngTemplateOutletContext]=\"{ $implicit: term, inputText: inputText }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template #mobileTemplate>\n    <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"showDropdownButton\"\n        [glyph]=\"showDropdownButton ? glyphValue : null\"\n        [glyphFont]=\"isSearch ? _defaultFontFamily : glyphFont\"\n        [state]=\"state\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readOnly\"\n        [isControl]=\"true\"\n        [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n        [showFocus]=\"!clearInputBtnFocused\"\n        [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n        [iconTitle]=\"title || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n        (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n        (click)=\"mobile && isOpenChangeHandle(true)\"\n    >\n        <input\n            #searchInputElement\n            fdkAutoComplete\n            fd-input-group-input\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n            [attr.aria-required]=\"required\"\n            [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n            [enable]=\"autoComplete && !mobile\"\n            [displayFn]=\"displayFn\"\n            [options]=\"dropdownValues\"\n            [inputText]=\"inputText\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readOnly\"\n            [attr.aria-readonly]=\"readOnly\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"inputText\"\n            (onComplete)=\"handleAutoComplete($event)\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            (paste)=\"onInputKeydownHandler('fromPaste')\"\n            (ngModelChange)=\"handleSearchTermChange()\"\n            (blur)=\"handleBlur()\"\n        />\n        @if ((isSearch || showClearButton) && inputText && inputText.length > 0) {\n            <span\n                class=\"fd-input-group__addon fd-input-group__addon--button\"\n                [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n            >\n                <button\n                    fd-button\n                    class=\"fd-input-group__button\"\n                    type=\"button\"\n                    [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                    title=\"Clear input\"\n                    [class.fd-shellbar__button]=\"inShellbar\"\n                    [attr.tabindex]=\"clearButtonFocusable ? 0 : -1\"\n                    (focus)=\"clearInputBtnFocus()\"\n                    (blur)=\"clearInputBtnBlur()\"\n                    (click)=\"_handleClearSearchTerm()\"\n                >\n                    <fd-icon glyph=\"decline\"></fd-icon>\n                </button>\n            </span>\n        }\n    </fd-input-group>\n    <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n        {{ displayedValues.length || 0 }} result list items\n    </div>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        class=\"fd-combobox-custom-list\"\n        [dropdownMode]=\"true\"\n        [id]=\"comboboxId + '-result'\"\n        role=\"listbox\"\n        [attr.aria-labelledby]=\"comboboxId + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [hasMessage]=\"listMessages && listMessages.length > 0\"\n        [byline]=\"byline\"\n        [tabindex]=\"0\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n    >\n        <ng-content></ng-content>\n        @if (groupFn) {\n            @for (group of displayedValues | listGroupPipe: groupFn; track group.key; let groupIndex = $index) {\n                <li\n                    fd-list-item\n                    fd-list-group-header\n                    ariaRole=\"group\"\n                    [attr.aria-roledescription]=\"'coreMultiComboBox.listGroupHeader' | fdTranslate\"\n                    [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n                    [attr.aria-label]=\"group.key\"\n                >\n                    <span fd-list-title>{{ group.key }}</span>\n                </li>\n                @for (term of group.value; track $index; let index = $index) {\n                    <li\n                        fd-list-item\n                        #item=\"fdListItem\"\n                        ariaRole=\"option\"\n                        [attr.aria-placeholder]=\"group.key\"\n                        [attr.aria-setsize]=\"group.value.length\"\n                        [attr.aria-posinset]=\"index + 1\"\n                        [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n                        class=\"fd-combobox-list-item\"\n                        [selected]=\"isSelected(term)\"\n                        [value]=\"term\"\n                        (keydown)=\"onItemKeyDownHandler($event, term)\"\n                        (mousedown)=\"_itemMousedown = true\"\n                        (click)=\"onMenuClickHandler(term)\"\n                        (focus)=\"onItemFocused(term)\"\n                    >\n                        <ng-template\n                            [ngTemplateOutlet]=\"itemSource\"\n                            [ngTemplateOutletContext]=\"{ term: term }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (term of displayedValues; track $index) {\n                <li\n                    fd-list-item\n                    ariaRole=\"option\"\n                    [tabindex]=\"0\"\n                    class=\"fd-combobox-list-item\"\n                    [selected]=\"isSelected(term)\"\n                    (keydown)=\"onItemKeyDownHandler($event, term)\"\n                    (mousedown)=\"_itemMousedown = true\"\n                    (click)=\"onMenuClickHandler(term)\"\n                    [value]=\"term\"\n                    (focus)=\"onItemFocused(term)\"\n                >\n                    <ng-template\n                        [ngTemplateOutlet]=\"itemSource\"\n                        [ngTemplateOutletContext]=\"{ term: term }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdkAutoComplete]", inputs: ["options", "inputText", "enable", "displayFn", "matcher"], outputs: ["onComplete"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "directive", type: TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: ListGroupPipe, name: "listGroupPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "_comboboxItemRenderer", first: true, predicate: ComboboxItemDirective, descendants: true }, { propertyName: "listMessages", predicate: FD_LIST_MESSAGE_DIRECTIVE }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "inputGroup", first: true, predicate: InputGroupComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "items", predicate: ["item"], descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<ng-template [ngTemplateOutlet]=\"mobile ? mobileTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fd-popover-custom-list\"\n        [class.fd-combobox-full-width]=\"isSearch || showClearButton\"\n        [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [scrollStrategy]=\"_repositionScrollStrategy\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readOnly\"\n        [maxWidth]=\"!mobile && noDropDownMaxWidth ? null : dropDownMaxWidthPx\"\n        [style.width]=\"width && '100%'\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"!displayedValues.length\">\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template let-term=\"term\" #itemSource>\n    @if (!_customRenderer) {\n        <span\n            fd-list-title\n            fdTruncatedTitle\n            [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText : highlighting && filterHighlight\"\n        >\n        </span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"_customRenderer\"\n            [ngTemplateOutletContext]=\"{ $implicit: term, inputText: inputText }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template #mobileTemplate>\n    <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"showDropdownButton\"\n        [glyph]=\"showDropdownButton ? glyphValue : null\"\n        [glyphFont]=\"isSearch ? _defaultFontFamily : glyphFont\"\n        [state]=\"state\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readOnly\"\n        [isControl]=\"true\"\n        [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n        [showFocus]=\"!clearInputBtnFocused\"\n        [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n        [iconTitle]=\"title || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n        (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n        (click)=\"mobile && isOpenChangeHandle(true)\"\n    >\n        <input\n            #searchInputElement\n            fdkAutoComplete\n            fd-input-group-input\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n            [attr.aria-required]=\"required\"\n            [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n            [enable]=\"autoComplete && !mobile\"\n            [displayFn]=\"displayFn\"\n            [options]=\"dropdownValues\"\n            [inputText]=\"inputText\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readOnly\"\n            [attr.aria-readonly]=\"readOnly\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"inputText\"\n            (onComplete)=\"handleAutoComplete($event)\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            (paste)=\"onInputKeydownHandler('fromPaste')\"\n            (ngModelChange)=\"handleSearchTermChange()\"\n            (blur)=\"handleBlur()\"\n        />\n        @if ((isSearch || showClearButton) && inputText && inputText.length > 0) {\n            <span\n                class=\"fd-input-group__addon fd-input-group__addon--button\"\n                [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n            >\n                <button\n                    fd-button\n                    class=\"fd-input-group__button\"\n                    type=\"button\"\n                    [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                    [title]=\"_clearButtonTitle()\"\n                    [class.fd-shellbar__button]=\"inShellbar\"\n                    [attr.tabindex]=\"clearButtonFocusable ? 0 : -1\"\n                    (focus)=\"clearInputBtnFocus()\"\n                    (blur)=\"clearInputBtnBlur()\"\n                    (click)=\"_handleClearSearchTerm()\"\n                >\n                    <fd-icon glyph=\"decline\"></fd-icon>\n                </button>\n            </span>\n        }\n    </fd-input-group>\n    <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n        {{ displayedValues.length || 0 }} result list items\n    </div>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        class=\"fd-combobox-custom-list\"\n        [dropdownMode]=\"true\"\n        [id]=\"comboboxId + '-result'\"\n        role=\"listbox\"\n        [attr.aria-labelledby]=\"comboboxId + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [hasMessage]=\"listMessages && listMessages.length > 0\"\n        [byline]=\"byline\"\n        [tabindex]=\"0\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n    >\n        <ng-content></ng-content>\n        @if (groupFn) {\n            @for (group of displayedValues | listGroupPipe: groupFn; track group.key; let groupIndex = $index) {\n                <li\n                    fd-list-item\n                    fd-list-group-header\n                    ariaRole=\"group\"\n                    [attr.aria-roledescription]=\"('coreMultiComboBox.listGroupHeader' | fdTranslate)()\"\n                    [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n                    [attr.aria-label]=\"group.key\"\n                >\n                    <span fd-list-title>{{ group.key }}</span>\n                </li>\n                @for (term of group.value; track $index; let index = $index) {\n                    <li\n                        fd-list-item\n                        #item=\"fdListItem\"\n                        ariaRole=\"option\"\n                        [attr.aria-placeholder]=\"group.key\"\n                        [attr.aria-setsize]=\"group.value.length\"\n                        [attr.aria-posinset]=\"index + 1\"\n                        [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n                        class=\"fd-combobox-list-item\"\n                        [selected]=\"isSelected(term)\"\n                        [value]=\"term\"\n                        (keydown)=\"onItemKeyDownHandler($event, term)\"\n                        (mousedown)=\"_itemMousedown = true\"\n                        (click)=\"onMenuClickHandler(term)\"\n                        (focus)=\"onItemFocused(term)\"\n                    >\n                        <ng-template\n                            [ngTemplateOutlet]=\"itemSource\"\n                            [ngTemplateOutletContext]=\"{ term: term }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (term of displayedValues; track $index) {\n                <li\n                    fd-list-item\n                    ariaRole=\"option\"\n                    [tabindex]=\"0\"\n                    class=\"fd-combobox-list-item\"\n                    [selected]=\"isSelected(term)\"\n                    (keydown)=\"onItemKeyDownHandler($event, term)\"\n                    (mousedown)=\"_itemMousedown = true\"\n                    (click)=\"onMenuClickHandler(term)\"\n                    [value]=\"term\"\n                    (focus)=\"onItemFocused(term)\"\n                >\n                    <ng-template\n                        [ngTemplateOutlet]=\"itemSource\"\n                        [ngTemplateOutletContext]=\"{ term: term }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: PopoverComponent, selector: "fd-popover", inputs: ["config", "title", "trigger", "id", "mobile", "mobileConfig", "preventSpaceKeyScroll", "placement", "maxWidth", "fillControlMode", "closeOnOutsideClick", "closeOnEscapeKey", "disabled", "triggers", "focusTrapped", "focusAutoCapture", "restoreFocusOnClose", "noArrow", "disableScrollbar", "appendTo", "placementContainer", "scrollStrategy", "cdkPositions", "applyOverlay", "additionalBodyClass", "additionalTriggerClass", "closeOnNavigation", "fixedPosition", "resizable", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { kind: "component", type: ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { kind: "directive", type: ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "addOnText", "buttonFocusable", "type", "glyph", "glyphFont", "button", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "addonButtonAriaHidden", "iconTitle", "ariaLabelledBy", "ariaLabel"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdkAutoComplete]", inputs: ["options", "inputText", "enable", "displayFn", "matcher"], outputs: ["onComplete"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "color", "background", "class", "ariaLabel", "ariaHidden"], outputs: ["ariaHiddenChange"] }, { kind: "ngmodule", type: ContentDensityModule }, { kind: "directive", type: TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: DisplayFnPipe, name: "displayFnPipe" }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: ListGroupPipe, name: "listGroupPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
@@ -839,7 +841,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         FdTranslatePipe,
                         ListGroupPipe,
                         TruncatedTitleDirective
-                    ], template: "<ng-template [ngTemplateOutlet]=\"mobile ? mobileTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fd-popover-custom-list\"\n        [class.fd-combobox-full-width]=\"isSearch || showClearButton\"\n        [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [scrollStrategy]=\"_repositionScrollStrategy\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readOnly\"\n        [maxWidth]=\"!mobile && noDropDownMaxWidth ? null : dropDownMaxWidthPx\"\n        [style.width]=\"width && '100%'\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"!displayedValues.length\">\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template let-term=\"term\" #itemSource>\n    @if (!_customRenderer) {\n        <span\n            fd-list-title\n            fdTruncatedTitle\n            [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText : highlighting && filterHighlight\"\n        >\n        </span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"_customRenderer\"\n            [ngTemplateOutletContext]=\"{ $implicit: term, inputText: inputText }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template #mobileTemplate>\n    <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"showDropdownButton\"\n        [glyph]=\"showDropdownButton ? glyphValue : null\"\n        [glyphFont]=\"isSearch ? _defaultFontFamily : glyphFont\"\n        [state]=\"state\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readOnly\"\n        [isControl]=\"true\"\n        [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n        [showFocus]=\"!clearInputBtnFocused\"\n        [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n        [iconTitle]=\"title || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n        (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n        (click)=\"mobile && isOpenChangeHandle(true)\"\n    >\n        <input\n            #searchInputElement\n            fdkAutoComplete\n            fd-input-group-input\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n            [attr.aria-required]=\"required\"\n            [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n            [enable]=\"autoComplete && !mobile\"\n            [displayFn]=\"displayFn\"\n            [options]=\"dropdownValues\"\n            [inputText]=\"inputText\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readOnly\"\n            [attr.aria-readonly]=\"readOnly\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"inputText\"\n            (onComplete)=\"handleAutoComplete($event)\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            (paste)=\"onInputKeydownHandler('fromPaste')\"\n            (ngModelChange)=\"handleSearchTermChange()\"\n            (blur)=\"handleBlur()\"\n        />\n        @if ((isSearch || showClearButton) && inputText && inputText.length > 0) {\n            <span\n                class=\"fd-input-group__addon fd-input-group__addon--button\"\n                [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n            >\n                <button\n                    fd-button\n                    class=\"fd-input-group__button\"\n                    type=\"button\"\n                    [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                    title=\"Clear input\"\n                    [class.fd-shellbar__button]=\"inShellbar\"\n                    [attr.tabindex]=\"clearButtonFocusable ? 0 : -1\"\n                    (focus)=\"clearInputBtnFocus()\"\n                    (blur)=\"clearInputBtnBlur()\"\n                    (click)=\"_handleClearSearchTerm()\"\n                >\n                    <fd-icon glyph=\"decline\"></fd-icon>\n                </button>\n            </span>\n        }\n    </fd-input-group>\n    <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n        {{ displayedValues.length || 0 }} result list items\n    </div>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        class=\"fd-combobox-custom-list\"\n        [dropdownMode]=\"true\"\n        [id]=\"comboboxId + '-result'\"\n        role=\"listbox\"\n        [attr.aria-labelledby]=\"comboboxId + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [hasMessage]=\"listMessages && listMessages.length > 0\"\n        [byline]=\"byline\"\n        [tabindex]=\"0\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n    >\n        <ng-content></ng-content>\n        @if (groupFn) {\n            @for (group of displayedValues | listGroupPipe: groupFn; track group.key; let groupIndex = $index) {\n                <li\n                    fd-list-item\n                    fd-list-group-header\n                    ariaRole=\"group\"\n                    [attr.aria-roledescription]=\"'coreMultiComboBox.listGroupHeader' | fdTranslate\"\n                    [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n                    [attr.aria-label]=\"group.key\"\n                >\n                    <span fd-list-title>{{ group.key }}</span>\n                </li>\n                @for (term of group.value; track $index; let index = $index) {\n                    <li\n                        fd-list-item\n                        #item=\"fdListItem\"\n                        ariaRole=\"option\"\n                        [attr.aria-placeholder]=\"group.key\"\n                        [attr.aria-setsize]=\"group.value.length\"\n                        [attr.aria-posinset]=\"index + 1\"\n                        [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n                        class=\"fd-combobox-list-item\"\n                        [selected]=\"isSelected(term)\"\n                        [value]=\"term\"\n                        (keydown)=\"onItemKeyDownHandler($event, term)\"\n                        (mousedown)=\"_itemMousedown = true\"\n                        (click)=\"onMenuClickHandler(term)\"\n                        (focus)=\"onItemFocused(term)\"\n                    >\n                        <ng-template\n                            [ngTemplateOutlet]=\"itemSource\"\n                            [ngTemplateOutletContext]=\"{ term: term }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (term of displayedValues; track $index) {\n                <li\n                    fd-list-item\n                    ariaRole=\"option\"\n                    [tabindex]=\"0\"\n                    class=\"fd-combobox-list-item\"\n                    [selected]=\"isSelected(term)\"\n                    (keydown)=\"onItemKeyDownHandler($event, term)\"\n                    (mousedown)=\"_itemMousedown = true\"\n                    (click)=\"onMenuClickHandler(term)\"\n                    [value]=\"term\"\n                    (focus)=\"onItemFocused(term)\"\n                >\n                    <ng-template\n                        [ngTemplateOutlet]=\"itemSource\"\n                        [ngTemplateOutletContext]=\"{ term: term }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"] }]
+                    ], template: "<ng-template [ngTemplateOutlet]=\"mobile ? mobileTemplate : desktopTemplate\"></ng-template>\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fd-popover-custom-list\"\n        [class.fd-combobox-full-width]=\"isSearch || showClearButton\"\n        [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [scrollStrategy]=\"_repositionScrollStrategy\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readOnly\"\n        [maxWidth]=\"!mobile && noDropDownMaxWidth ? null : dropDownMaxWidthPx\"\n        [style.width]=\"width && '100%'\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"!displayedValues.length\">\n            <ng-template [ngTemplateOutlet]=\"listTemplate\"></ng-template>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n<ng-template let-term=\"term\" #itemSource>\n    @if (!_customRenderer) {\n        <span\n            fd-list-title\n            fdTruncatedTitle\n            [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText : highlighting && filterHighlight\"\n        >\n        </span>\n    } @else {\n        <ng-template\n            [ngTemplateOutlet]=\"_customRenderer\"\n            [ngTemplateOutletContext]=\"{ $implicit: term, inputText: inputText }\"\n        ></ng-template>\n    }\n</ng-template>\n<ng-template #mobileTemplate>\n    <ng-template [ngTemplateOutlet]=\"controlTemplate\"></ng-template>\n</ng-template>\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"showDropdownButton\"\n        [glyph]=\"showDropdownButton ? glyphValue : null\"\n        [glyphFont]=\"isSearch ? _defaultFontFamily : glyphFont\"\n        [state]=\"state\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readOnly\"\n        [isControl]=\"true\"\n        [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n        [showFocus]=\"!clearInputBtnFocused\"\n        [glyphAriaLabel]=\"ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n        [iconTitle]=\"title || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)()\"\n        (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n        (click)=\"mobile && isOpenChangeHandle(true)\"\n    >\n        <input\n            #searchInputElement\n            fdkAutoComplete\n            fd-input-group-input\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n            [attr.aria-required]=\"required\"\n            [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n            [enable]=\"autoComplete && !mobile\"\n            [displayFn]=\"displayFn\"\n            [options]=\"dropdownValues\"\n            [inputText]=\"inputText\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readOnly\"\n            [attr.aria-readonly]=\"readOnly\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"inputText\"\n            (onComplete)=\"handleAutoComplete($event)\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            (paste)=\"onInputKeydownHandler('fromPaste')\"\n            (ngModelChange)=\"handleSearchTermChange()\"\n            (blur)=\"handleBlur()\"\n        />\n        @if ((isSearch || showClearButton) && inputText && inputText.length > 0) {\n            <span\n                class=\"fd-input-group__addon fd-input-group__addon--button\"\n                [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n            >\n                <button\n                    fd-button\n                    class=\"fd-input-group__button\"\n                    type=\"button\"\n                    [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                    [title]=\"_clearButtonTitle()\"\n                    [class.fd-shellbar__button]=\"inShellbar\"\n                    [attr.tabindex]=\"clearButtonFocusable ? 0 : -1\"\n                    (focus)=\"clearInputBtnFocus()\"\n                    (blur)=\"clearInputBtnBlur()\"\n                    (click)=\"_handleClearSearchTerm()\"\n                >\n                    <fd-icon glyph=\"decline\"></fd-icon>\n                </button>\n            </span>\n        }\n    </fd-input-group>\n    <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n        {{ displayedValues.length || 0 }} result list items\n    </div>\n</ng-template>\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        class=\"fd-combobox-custom-list\"\n        [dropdownMode]=\"true\"\n        [id]=\"comboboxId + '-result'\"\n        role=\"listbox\"\n        [attr.aria-labelledby]=\"comboboxId + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [hasMessage]=\"listMessages && listMessages.length > 0\"\n        [byline]=\"byline\"\n        [tabindex]=\"0\"\n        (keydown.tab)=\"_close()\"\n        (keydown.shift.tab)=\"_close()\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n    >\n        <ng-content></ng-content>\n        @if (groupFn) {\n            @for (group of displayedValues | listGroupPipe: groupFn; track group.key; let groupIndex = $index) {\n                <li\n                    fd-list-item\n                    fd-list-group-header\n                    ariaRole=\"group\"\n                    [attr.aria-roledescription]=\"('coreMultiComboBox.listGroupHeader' | fdTranslate)()\"\n                    [attr.aria-owns]=\"_getGroupItemIds(groupIndex)\"\n                    [attr.aria-label]=\"group.key\"\n                >\n                    <span fd-list-title>{{ group.key }}</span>\n                </li>\n                @for (term of group.value; track $index; let index = $index) {\n                    <li\n                        fd-list-item\n                        #item=\"fdListItem\"\n                        ariaRole=\"option\"\n                        [attr.aria-placeholder]=\"group.key\"\n                        [attr.aria-setsize]=\"group.value.length\"\n                        [attr.aria-posinset]=\"index + 1\"\n                        [attr.id-with-group-index]=\"item.id + '-group-' + groupIndex\"\n                        class=\"fd-combobox-list-item\"\n                        [selected]=\"isSelected(term)\"\n                        [value]=\"term\"\n                        (keydown)=\"onItemKeyDownHandler($event, term)\"\n                        (mousedown)=\"_itemMousedown = true\"\n                        (click)=\"onMenuClickHandler(term)\"\n                        (focus)=\"onItemFocused(term)\"\n                    >\n                        <ng-template\n                            [ngTemplateOutlet]=\"itemSource\"\n                            [ngTemplateOutletContext]=\"{ term: term }\"\n                        ></ng-template>\n                    </li>\n                }\n            }\n        } @else {\n            @for (term of displayedValues; track $index) {\n                <li\n                    fd-list-item\n                    ariaRole=\"option\"\n                    [tabindex]=\"0\"\n                    class=\"fd-combobox-list-item\"\n                    [selected]=\"isSelected(term)\"\n                    (keydown)=\"onItemKeyDownHandler($event, term)\"\n                    (mousedown)=\"_itemMousedown = true\"\n                    (click)=\"onMenuClickHandler(term)\"\n                    [value]=\"term\"\n                    (focus)=\"onItemFocused(term)\"\n                >\n                    <ng-template\n                        [ngTemplateOutlet]=\"itemSource\"\n                        [ngTemplateOutletContext]=\"{ term: term }\"\n                    ></ng-template>\n                </li>\n            }\n        }\n    </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"] }]
         }], ctorParameters: () => [{ type: i1.Overlay }, { type: i0.ChangeDetectorRef }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i2.DynamicComponentService }, { type: i2.FocusTrapService }, { type: i3.ContentDensityObserver }], propDecorators: { comboboxId: [{
                 type: Input
             }], inputId: [{