@fundamental-ngx/core 0.63.0-rc.9 → 0.63.0

package/fesm2022/fundamental-ngx-core-multi-input.mjs

@@ -1,7 +1,7 @@
 import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, ViewChild, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, EventEmitter, inject, ElementRef, computed, ChangeDetectorRef, Injector, ViewContainerRef, effect, isDevMode, TemplateRef, forwardRef, Output, Input } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { InjectionToken, ViewChild, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, NgModule, EventEmitter, input, inject, ElementRef, computed, signal, ChangeDetectorRef, Injector, ViewContainerRef, effect, isDevMode, TemplateRef, forwardRef, Output, Input } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { TemplateDirective, RangeSelector, DynamicComponentService, RtlService, FocusTrapService, uuidv4, KeyUtil, get, AutoCompleteDirective, TruncatedTitleDirective, SearchHighlightPipe, applyCssClass } from '@fundamental-ngx/cdk/utils';
 import { BarMiddleDirective, BarElementDirective, ButtonBarComponent } from '@fundamental-ngx/core/bar';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
@@ -13,7 +13,7 @@ import { SPACE, ENTER, DOWN_ARROW, UP_ARROW, TAB } from '@angular/cdk/keycodes';
 import * as i1 from '@angular/forms';
 import { FormControl, FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { BehaviorSubject, Subscription, combineLatest } from 'rxjs';
-import { distinctUntilChanged, map, first, startWith } from 'rxjs/operators';
+import { map, distinctUntilChanged, first, startWith } from 'rxjs/operators';
 import { FormControlComponent, registerFormItemControl } from '@fundamental-ngx/core/form';
 import { ListComponent, ListItemComponent, ListTitleDirective } from '@fundamental-ngx/core/list';
 import { MenuKeyboardService } from '@fundamental-ngx/core/menu';
@@ -338,6 +338,12 @@ class MultiInputComponent {
         this.addOnButtonClicked = new EventEmitter();
         /** Event emitted, when the multi input's all item checked or not */
         this.allItemsSelectedChange = new EventEmitter();
+        /**
+         * Maximum number of selected tokens to render when the input is not focused.
+         * When the selection exceeds this limit, the remaining count is shown as a
+         * "+N more" indicator. Defaults to 12.
+         */
+        this.maxVisibleTokens = input(12, ...(ngDevMode ? [{ debugName: "maxVisibleTokens" }] : []));
         /** @hidden */
         this.optionItems$ = new BehaviorSubject([]);
         /** @hidden */
@@ -349,9 +355,25 @@ class MultiInputComponent {
         /** @hidden */
         this._viewModel$ = this._getViewModel();
         /** @hidden */
-        this._contentDensityObserver = inject(ContentDensityObserver);
+        this.contentDensityObserver = inject(ContentDensityObserver);
         /** @hidden */
         this.elementRef = inject(ElementRef);
+        /** @hidden — slice (or full list) of options rendered into <fd-tokenizer>. */
+        this.renderedTokens = computed(() => {
+            const all = this._selectedOptionsSignal();
+            if (this._renderAllTokens() || all.length <= this.maxVisibleTokens()) {
+                return all;
+            }
+            return all.slice(0, this.maxVisibleTokens());
+        }, ...(ngDevMode ? [{ debugName: "renderedTokens" }] : []));
+        /** @hidden — count of selected tokens not currently rendered. Fed into tokenizer's externalHiddenCount input. */
+        this.hiddenCount = computed(() => this._selectedOptionsSignal().length - this.renderedTokens().length, ...(ngDevMode ? [{ debugName: "hiddenCount" }] : []));
+        /** @hidden — the selected option list as a signal, derived from the view model. */
+        this._selectedOptionsSignal = toSignal(this._viewModel$.pipe(map((vm) => vm.selectedOptions)), {
+            initialValue: []
+        });
+        /** @hidden — true while the input has focus. Renders the full token list. */
+        this._renderAllTokens = signal(false, ...(ngDevMode ? [{ debugName: "_renderAllTokens" }] : []));
         /** @hidden */
         this._dir = computed(() => (this._rtlService?.rtl() ? 'rtl' : 'ltr'), ...(ngDevMode ? [{ debugName: "_dir" }] : []));
         /** @hidden */
@@ -396,6 +418,11 @@ class MultiInputComponent {
         }
         return ['fd-multi-input', 'fd-multi-input-custom', this.class];
     }
+    /** @hidden Called on input focus — render all tokens, then expand the tokenizer. */
+    _onInputFocus() {
+        this._renderAllTokens.set(true);
+        this.tokenizer._showAllTokens();
+    }
     /** @hidden */
     ngOnInit() {
         this.buildComponentCssClass();
@@ -636,6 +663,12 @@ class MultiInputComponent {
         this._onlySelected$.next(true);
         this.openChangeHandle(true);
     }
+    /** @hidden Click handler for the "+N more" indicator owned by multi-input. */
+    _onMoreClicked() {
+        this.tokenizer._showAllTokens();
+        this._renderAllTokens.set(true);
+        this.searchInputElement?.nativeElement.focus();
+    }
     /** @hidden */
     _addOnButtonClicked(event) {
         this.addOnButtonClicked.emit(event);
@@ -663,6 +696,10 @@ class MultiInputComponent {
     _focusOut(event) {
         if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
             this.onTouched();
+            if (this._renderAllTokens()) {
+                this.tokenizer._hideTokens();
+                this._renderAllTokens.set(false);
+            }
         }
     }
     /** @hidden */
@@ -815,7 +852,7 @@ class MultiInputComponent {
         }));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MultiInputComponent, isStandalone: true, selector: "fd-multi-input", inputs: { placeholder: "placeholder", disabled: "disabled", required: "required", compactCollapse: "compactCollapse", maxHeight: "maxHeight", glyph: "glyph", glyphFont: "glyphFont", dropdownValues: "dropdownValues", openDropdownOnAddOnClicked: "openDropdownOnAddOnClicked", addonIconTitle: "addonIconTitle", searchTerm: "searchTerm", inputId: "inputId", highlight: "highlight", selected: "selected", class: "class", filterFn: "filterFn", valueFn: "valueFn", displayFn: "displayFn", newTokenParseFn: "newTokenParseFn", optionItemIdentifier: "optionItemIdentifier", newTokenValidateFn: "newTokenValidateFn", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", fillControlMode: "fillControlMode", state: "state", buttonFocusable: "buttonFocusable", allowNewTokens: "allowNewTokens", mobile: "mobile", showAllButton: "showAllButton", bodyMaxWidth: "bodyMaxWidth", mobileConfig: "mobileConfig", includes: "includes", itemTemplate: "itemTemplate", title: "title", byline: "byline", autoComplete: "autoComplete", open: "open", displayAddonButton: "displayAddonButton", addOnButtonAriaLabel: "addOnButtonAriaLabel" }, outputs: { searchTermChange: "searchTermChange", selectedChange: "selectedChange", openChange: "openChange", addOnButtonClicked: "addOnButtonClicked", allItemsSelectedChange: "allItemsSelectedChange" }, host: { listeners: { "focusout": "_focusOut($event)" } }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MultiInputComponent, isStandalone: true, selector: "fd-multi-input", inputs: { placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: false, isRequired: false, transformFunction: null }, compactCollapse: { classPropertyName: "compactCollapse", publicName: "compactCollapse", isSignal: false, isRequired: false, transformFunction: null }, maxHeight: { classPropertyName: "maxHeight", publicName: "maxHeight", isSignal: false, isRequired: false, transformFunction: null }, glyph: { classPropertyName: "glyph", publicName: "glyph", isSignal: false, isRequired: false, transformFunction: null }, glyphFont: { classPropertyName: "glyphFont", publicName: "glyphFont", isSignal: false, isRequired: false, transformFunction: null }, dropdownValues: { classPropertyName: "dropdownValues", publicName: "dropdownValues", isSignal: false, isRequired: false, transformFunction: null }, openDropdownOnAddOnClicked: { classPropertyName: "openDropdownOnAddOnClicked", publicName: "openDropdownOnAddOnClicked", isSignal: false, isRequired: false, transformFunction: null }, addonIconTitle: { classPropertyName: "addonIconTitle", publicName: "addonIconTitle", isSignal: false, isRequired: false, transformFunction: null }, searchTerm: { classPropertyName: "searchTerm", publicName: "searchTerm", isSignal: false, isRequired: false, transformFunction: null }, inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: false, isRequired: false, transformFunction: null }, highlight: { classPropertyName: "highlight", publicName: "highlight", isSignal: false, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: false, isRequired: false, transformFunction: null }, filterFn: { classPropertyName: "filterFn", publicName: "filterFn", isSignal: false, isRequired: false, transformFunction: null }, valueFn: { classPropertyName: "valueFn", publicName: "valueFn", isSignal: false, isRequired: false, transformFunction: null }, displayFn: { classPropertyName: "displayFn", publicName: "displayFn", isSignal: false, isRequired: false, transformFunction: null }, newTokenParseFn: { classPropertyName: "newTokenParseFn", publicName: "newTokenParseFn", isSignal: false, isRequired: false, transformFunction: null }, optionItemIdentifier: { classPropertyName: "optionItemIdentifier", publicName: "optionItemIdentifier", isSignal: false, isRequired: false, transformFunction: null }, newTokenValidateFn: { classPropertyName: "newTokenValidateFn", publicName: "newTokenValidateFn", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, ariaLabelledBy: { classPropertyName: "ariaLabelledBy", publicName: "ariaLabelledBy", isSignal: false, isRequired: false, transformFunction: null }, fillControlMode: { classPropertyName: "fillControlMode", publicName: "fillControlMode", isSignal: false, isRequired: false, transformFunction: null }, state: { classPropertyName: "state", publicName: "state", isSignal: false, isRequired: false, transformFunction: null }, buttonFocusable: { classPropertyName: "buttonFocusable", publicName: "buttonFocusable", isSignal: false, isRequired: false, transformFunction: null }, allowNewTokens: { classPropertyName: "allowNewTokens", publicName: "allowNewTokens", isSignal: false, isRequired: false, transformFunction: null }, mobile: { classPropertyName: "mobile", publicName: "mobile", isSignal: false, isRequired: false, transformFunction: null }, showAllButton: { classPropertyName: "showAllButton", publicName: "showAllButton", isSignal: false, isRequired: false, transformFunction: null }, bodyMaxWidth: { classPropertyName: "bodyMaxWidth", publicName: "bodyMaxWidth", isSignal: false, isRequired: false, transformFunction: null }, mobileConfig: { classPropertyName: "mobileConfig", publicName: "mobileConfig", isSignal: false, isRequired: false, transformFunction: null }, includes: { classPropertyName: "includes", publicName: "includes", isSignal: false, isRequired: false, transformFunction: null }, itemTemplate: { classPropertyName: "itemTemplate", publicName: "itemTemplate", isSignal: false, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: false, isRequired: false, transformFunction: null }, byline: { classPropertyName: "byline", publicName: "byline", isSignal: false, isRequired: false, transformFunction: null }, autoComplete: { classPropertyName: "autoComplete", publicName: "autoComplete", isSignal: false, isRequired: false, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: false, isRequired: false, transformFunction: null }, displayAddonButton: { classPropertyName: "displayAddonButton", publicName: "displayAddonButton", isSignal: false, isRequired: false, transformFunction: null }, addOnButtonAriaLabel: { classPropertyName: "addOnButtonAriaLabel", publicName: "addOnButtonAriaLabel", isSignal: false, isRequired: false, transformFunction: null }, maxVisibleTokens: { classPropertyName: "maxVisibleTokens", publicName: "maxVisibleTokens", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { searchTermChange: "searchTermChange", selectedChange: "selectedChange", openChange: "openChange", addOnButtonClicked: "addOnButtonClicked", allItemsSelectedChange: "allItemsSelectedChange" }, host: { listeners: { "focusout": "_focusOut($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => MultiInputComponent),
@@ -824,7 +861,7 @@ class MultiInputComponent {
             MenuKeyboardService,
             registerFormItemControl(MultiInputComponent),
             contentDensityObserverProviders()
-        ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (_viewModel$ | async; as viewModel) {\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            @if (mobile) {\n                <ng-template\n                    [ngTemplateOutlet]=\"control\"\n                    [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                ></ng-template>\n            } @else {\n                <fd-popover\n                    additionalBodyClass=\"fd-popover-custom-list\"\n                    [isOpen]=\"open\"\n                    (isOpenChange)=\"openChangeHandle($event)\"\n                    (input)=\"!open && openChangeHandle(true)\"\n                    [triggers]=\"[]\"\n                    [maxWidth]=\"_popoverMaxWidth\"\n                    [disabled]=\"disabled\"\n                    [fillControlMode]=\"fillControlMode\"\n                    class=\"fd-multi-input-popover-custom\"\n                    [focusTrapped]=\"true\"\n                    [focusAutoCapture]=\"false\"\n                >\n                    <fd-popover-control>\n                        <form (submit)=\"_onSubmit()\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"control\"\n                                [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                            ></ng-template>\n                        </form>\n                    </fd-popover-control>\n                    <fd-popover-body\n                        [attr.aria-hidden]=\"!open\"\n                        [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                    >\n                        <ng-template [ngTemplateOutlet]=\"list\"></ng-template>\n                        <ng-content></ng-content>\n                    </fd-popover-body>\n                </fd-popover>\n            }\n        </div>\n    </div>\n    <ng-template #control let-showAddonButton=\"displayAddonButton\">\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"showAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"showAddonButton ? glyph : ''\"\n            [glyphFont]=\"glyphFont\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n            [glyphAriaLabel]=\"addOnButtonAriaLabel\"\n            [iconTitle]=\"addonIconTitle\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [showOverflowPopover]=\"false\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"filterFn(dropdownValues, searchTerm)\"\n            >\n                @for (option of viewModel.selectedOptions; track valueFn(option.item)) {\n                    <fd-token\n                        [disabled]=\"disabled\"\n                        (onCloseClick)=\"_onTokenCloseClick(option, false, $event)\"\n                        (onRemove)=\"_onTokenCloseClick(option, false)\"\n                        [title]=\"option.label\"\n                        (onTokenClick)=\"_tokenElementClicked($event)\"\n                    >\n                        <span [innerHtml]=\"option.label\"></span>\n                    </fd-token>\n                }\n                <input\n                    type=\"text\"\n                    class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n                    autocomplete=\"off\"\n                    fd-form-control\n                    fd-input-group-input\n                    fdkAutoComplete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [matcher]=\"typeAheadMatcher\"\n                    [inputText]=\"_searchTermCtrl.value || ''\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"!includes && autoComplete && !mobile\"\n                    [attr.placeholder]=\"viewModel.selectedOptions.length ? null : placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)()\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                    (focus)=\"tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                    [attr.title]=\"title\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n    <ng-template #list>\n        @if (viewModel.displayedOptions.length) {\n            <ul\n                fd-list\n                class=\"fd-multi-input-menu-overflow\"\n                [selection]=\"true\"\n                [mobileMode]=\"mobile\"\n                [style.max-height]=\"!mobile ? maxHeight : 'auto'\"\n                [byline]=\"byline\"\n                (focusEscapeList)=\"handleListFocusEscape($event)\"\n                [style.min-width]=\"'100%'\"\n                (keydown.tab)=\"_close()\"\n                (keydown.escape)=\"_close()\"\n                aria-multiselectable=\"true\"\n            >\n                @for (option of viewModel.displayedOptions; track valueFn(option.item); let idx = $index) {\n                    <li\n                        fd-list-item\n                        [attr.aria-label]=\"option.label\"\n                        (click)=\"_onCheckboxClick(option, $event, idx, true)\"\n                        (keyup)=\"_onCheckboxKeyup(option, $event, idx, true)\"\n                        [selected]=\"!!option.isSelected\"\n                    >\n                        <fd-checkbox (click)=\"_onCheckboxClick(option, $event, idx)\" [value]=\"option.isSelected\">\n                            <!-- TODO -->\n                        </fd-checkbox>\n                        <ng-template\n                            [ngTemplateOutlet]=\"itemSource\"\n                            [ngTemplateOutletContext]=\"{ option: option }\"\n                        ></ng-template>\n                    </li>\n                }\n                @if (\n                    showAllButton &&\n                    (_onlySelected$ | async) !== true &&\n                    viewModel.displayedOptions.length < dropdownValues.length\n                ) {\n                    <li\n                        fd-list-item\n                        class=\"fd-multi-input-show-all\"\n                        (keyDown)=\"_showAllKeyDown($event)\"\n                        (click)=\"_showAllClicked($event)\"\n                    >\n                        <a fd-link role=\"button\" tabindex=\"0\">{{\n                            ('coreMultiInput.showAll' | fdTranslate: { count: dropdownValues.length })()\n                        }}</a>\n                    </li>\n                }\n            </ul>\n        }\n    </ng-template>\n    <ng-template let-option=\"option\" #itemSource>\n        @if (!itemTemplate) {\n            <span\n                fd-list-title\n                fdTruncatedTitle\n                [innerHtml]=\"option.label | highlight: _searchTermCtrl.value || '' : highlight\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-template>\n        }\n    </ng-template>\n}\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-input-tokenizer-custom:not([class*=--cozy]):not([class*=--condensed]),.is-compact .fd-multi-input-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-input-tokenizer-custom[class*=--compact],.fd-multi-input-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-input__invisible-text{display:none!important}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-multi-input-menu-overflow{max-width:37.5rem}.fd-input.fd-multi-input-tokenizer-input{min-width:4rem;margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\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", "bodyAriaLabel", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { 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: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused", "selectedChange"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "glyphFont", "moreTerm", "open", "showOverflowPopover"], outputs: ["moreClickedEvent"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdkAutoComplete]", inputs: ["options", "inputText", "enable", "displayFn", "matcher"], outputs: ["onComplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "directive", type: TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (_viewModel$ | async; as viewModel) {\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            @if (mobile) {\n                <ng-template\n                    [ngTemplateOutlet]=\"control\"\n                    [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                ></ng-template>\n            } @else {\n                <fd-popover\n                    additionalBodyClass=\"fd-popover-custom-list\"\n                    [isOpen]=\"open\"\n                    (isOpenChange)=\"openChangeHandle($event)\"\n                    (input)=\"!open && openChangeHandle(true)\"\n                    [triggers]=\"[]\"\n                    [maxWidth]=\"_popoverMaxWidth\"\n                    [disabled]=\"disabled\"\n                    [fillControlMode]=\"fillControlMode\"\n                    class=\"fd-multi-input-popover-custom\"\n                    [focusTrapped]=\"true\"\n                    [focusAutoCapture]=\"false\"\n                >\n                    <fd-popover-control>\n                        <form (submit)=\"_onSubmit()\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"control\"\n                                [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                            ></ng-template>\n                        </form>\n                    </fd-popover-control>\n                    <fd-popover-body\n                        [attr.aria-hidden]=\"!open\"\n                        [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                    >\n                        <ng-template [ngTemplateOutlet]=\"list\"></ng-template>\n                        <ng-content></ng-content>\n                    </fd-popover-body>\n                </fd-popover>\n            }\n        </div>\n    </div>\n    <ng-template #control let-showAddonButton=\"displayAddonButton\">\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"showAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"showAddonButton ? glyph : ''\"\n            [glyphFont]=\"glyphFont\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n            [glyphAriaLabel]=\"addOnButtonAriaLabel\"\n            [iconTitle]=\"addonIconTitle\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [showOverflowPopover]=\"false\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                [externalHiddenCount]=\"hiddenCount()\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"filterFn(dropdownValues, searchTerm)\"\n            >\n                @for (option of renderedTokens(); track valueFn(option.item)) {\n                    <fd-token\n                        [disabled]=\"disabled\"\n                        (onCloseClick)=\"_onTokenCloseClick(option, false, $event)\"\n                        (onRemove)=\"_onTokenCloseClick(option, false)\"\n                        [title]=\"option.label\"\n                        (onTokenClick)=\"_tokenElementClicked($event)\"\n                    >\n                        <span [innerHtml]=\"option.label\"></span>\n                    </fd-token>\n                }\n                <input\n                    type=\"text\"\n                    class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n                    autocomplete=\"off\"\n                    fd-form-control\n                    fd-input-group-input\n                    fdkAutoComplete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [matcher]=\"typeAheadMatcher\"\n                    [inputText]=\"_searchTermCtrl.value || ''\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"!includes && autoComplete && !mobile\"\n                    [attr.placeholder]=\"viewModel.selectedOptions.length ? null : placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)()\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                    (focus)=\"_onInputFocus()\"\n                    [attr.title]=\"title\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n    <ng-template #list>\n        @if (viewModel.displayedOptions.length) {\n            <ul\n                fd-list\n                class=\"fd-multi-input-menu-overflow\"\n                [selection]=\"true\"\n                [mobileMode]=\"mobile\"\n                [style.max-height]=\"!mobile ? maxHeight : 'auto'\"\n                [byline]=\"byline\"\n                (focusEscapeList)=\"handleListFocusEscape($event)\"\n                [style.min-width]=\"'100%'\"\n                (keydown.tab)=\"_close()\"\n                (keydown.escape)=\"_close()\"\n                aria-multiselectable=\"true\"\n            >\n                @for (option of viewModel.displayedOptions; track valueFn(option.item); let idx = $index) {\n                    <li\n                        fd-list-item\n                        [attr.aria-label]=\"option.label\"\n                        (click)=\"_onCheckboxClick(option, $event, idx, true)\"\n                        (keyup)=\"_onCheckboxKeyup(option, $event, idx, true)\"\n                        [selected]=\"!!option.isSelected\"\n                    >\n                        <fd-checkbox (click)=\"_onCheckboxClick(option, $event, idx)\" [value]=\"option.isSelected\">\n                            <!-- TODO -->\n                        </fd-checkbox>\n                        <ng-template\n                            [ngTemplateOutlet]=\"itemSource\"\n                            [ngTemplateOutletContext]=\"{ option: option }\"\n                        ></ng-template>\n                    </li>\n                }\n                @if (\n                    showAllButton &&\n                    (_onlySelected$ | async) !== true &&\n                    viewModel.displayedOptions.length < dropdownValues.length\n                ) {\n                    <li\n                        fd-list-item\n                        class=\"fd-multi-input-show-all\"\n                        (keyDown)=\"_showAllKeyDown($event)\"\n                        (click)=\"_showAllClicked($event)\"\n                    >\n                        <a fd-link role=\"button\" tabindex=\"0\">{{\n                            ('coreMultiInput.showAll' | fdTranslate: { count: dropdownValues.length })()\n                        }}</a>\n                    </li>\n                }\n            </ul>\n        }\n    </ng-template>\n    <ng-template let-option=\"option\" #itemSource>\n        @if (!itemTemplate) {\n            <span\n                fd-list-title\n                fdTruncatedTitle\n                [innerHtml]=\"option.label | highlight: _searchTermCtrl.value || '' : highlight\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-template>\n        }\n    </ng-template>\n}\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-input-tokenizer-custom:not([class*=--cozy]):not([class*=--condensed]),.is-compact .fd-multi-input-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-input-tokenizer-custom[class*=--compact],.fd-multi-input-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-input__invisible-text{display:none!important}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-multi-input-menu-overflow{max-width:37.5rem}.fd-input.fd-multi-input-tokenizer-input{min-width:4rem;margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\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", "bodyAriaLabel", "bodyRole", "bodyAriaLabelledBy", "isOpen"], outputs: ["triggerChange", "isOpenChange", "beforeOpen"] }, { kind: "component", type: PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PopoverBodyComponent, selector: "fd-popover-body", inputs: ["minWidth", "maxWidth", "minHeight", "maxHeight"], outputs: ["onClose"] }, { 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: "component", type: TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused", "selectedChange"] }, { kind: "component", type: TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "glyphFont", "moreTerm", "open", "showOverflowPopover", "externalHiddenCount"], outputs: ["moreClickedEvent"] }, { kind: "component", type: FormControlComponent, selector: "input[fd-form-control], textarea[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: AutoCompleteDirective, selector: "[fdkAutoComplete]", inputs: ["options", "inputText", "enable", "displayFn", "matcher"], outputs: ["onComplete"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { 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: "component", type: CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "role", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "readonly", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "directive", type: MultiAnnouncerDirective, selector: "[fdMultiAnnouncer]", inputs: ["multiAnnouncerOptions"], exportAs: ["fdMultiAnnouncer"] }, { kind: "directive", type: TruncatedTitleDirective, selector: "[fdkTruncatedTitle], [fdTruncatedTitle], [fd-truncate-title]" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 __decorate([
     applyCssClass,
@@ -868,7 +905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
                         FdTranslatePipe,
                         MultiAnnouncerDirective,
                         TruncatedTitleDirective
-                    ], template: "@if (_viewModel$ | async; as viewModel) {\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            @if (mobile) {\n                <ng-template\n                    [ngTemplateOutlet]=\"control\"\n                    [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                ></ng-template>\n            } @else {\n                <fd-popover\n                    additionalBodyClass=\"fd-popover-custom-list\"\n                    [isOpen]=\"open\"\n                    (isOpenChange)=\"openChangeHandle($event)\"\n                    (input)=\"!open && openChangeHandle(true)\"\n                    [triggers]=\"[]\"\n                    [maxWidth]=\"_popoverMaxWidth\"\n                    [disabled]=\"disabled\"\n                    [fillControlMode]=\"fillControlMode\"\n                    class=\"fd-multi-input-popover-custom\"\n                    [focusTrapped]=\"true\"\n                    [focusAutoCapture]=\"false\"\n                >\n                    <fd-popover-control>\n                        <form (submit)=\"_onSubmit()\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"control\"\n                                [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                            ></ng-template>\n                        </form>\n                    </fd-popover-control>\n                    <fd-popover-body\n                        [attr.aria-hidden]=\"!open\"\n                        [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                    >\n                        <ng-template [ngTemplateOutlet]=\"list\"></ng-template>\n                        <ng-content></ng-content>\n                    </fd-popover-body>\n                </fd-popover>\n            }\n        </div>\n    </div>\n    <ng-template #control let-showAddonButton=\"displayAddonButton\">\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"showAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"showAddonButton ? glyph : ''\"\n            [glyphFont]=\"glyphFont\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n            [glyphAriaLabel]=\"addOnButtonAriaLabel\"\n            [iconTitle]=\"addonIconTitle\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [showOverflowPopover]=\"false\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"filterFn(dropdownValues, searchTerm)\"\n            >\n                @for (option of viewModel.selectedOptions; track valueFn(option.item)) {\n                    <fd-token\n                        [disabled]=\"disabled\"\n                        (onCloseClick)=\"_onTokenCloseClick(option, false, $event)\"\n                        (onRemove)=\"_onTokenCloseClick(option, false)\"\n                        [title]=\"option.label\"\n                        (onTokenClick)=\"_tokenElementClicked($event)\"\n                    >\n                        <span [innerHtml]=\"option.label\"></span>\n                    </fd-token>\n                }\n                <input\n                    type=\"text\"\n                    class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n                    autocomplete=\"off\"\n                    fd-form-control\n                    fd-input-group-input\n                    fdkAutoComplete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [matcher]=\"typeAheadMatcher\"\n                    [inputText]=\"_searchTermCtrl.value || ''\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"!includes && autoComplete && !mobile\"\n                    [attr.placeholder]=\"viewModel.selectedOptions.length ? null : placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)()\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                    (focus)=\"tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                    [attr.title]=\"title\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n    <ng-template #list>\n        @if (viewModel.displayedOptions.length) {\n            <ul\n                fd-list\n                class=\"fd-multi-input-menu-overflow\"\n                [selection]=\"true\"\n                [mobileMode]=\"mobile\"\n                [style.max-height]=\"!mobile ? maxHeight : 'auto'\"\n                [byline]=\"byline\"\n                (focusEscapeList)=\"handleListFocusEscape($event)\"\n                [style.min-width]=\"'100%'\"\n                (keydown.tab)=\"_close()\"\n                (keydown.escape)=\"_close()\"\n                aria-multiselectable=\"true\"\n            >\n                @for (option of viewModel.displayedOptions; track valueFn(option.item); let idx = $index) {\n                    <li\n                        fd-list-item\n                        [attr.aria-label]=\"option.label\"\n                        (click)=\"_onCheckboxClick(option, $event, idx, true)\"\n                        (keyup)=\"_onCheckboxKeyup(option, $event, idx, true)\"\n                        [selected]=\"!!option.isSelected\"\n                    >\n                        <fd-checkbox (click)=\"_onCheckboxClick(option, $event, idx)\" [value]=\"option.isSelected\">\n                            <!-- TODO -->\n                        </fd-checkbox>\n                        <ng-template\n                            [ngTemplateOutlet]=\"itemSource\"\n                            [ngTemplateOutletContext]=\"{ option: option }\"\n                        ></ng-template>\n                    </li>\n                }\n                @if (\n                    showAllButton &&\n                    (_onlySelected$ | async) !== true &&\n                    viewModel.displayedOptions.length < dropdownValues.length\n                ) {\n                    <li\n                        fd-list-item\n                        class=\"fd-multi-input-show-all\"\n                        (keyDown)=\"_showAllKeyDown($event)\"\n                        (click)=\"_showAllClicked($event)\"\n                    >\n                        <a fd-link role=\"button\" tabindex=\"0\">{{\n                            ('coreMultiInput.showAll' | fdTranslate: { count: dropdownValues.length })()\n                        }}</a>\n                    </li>\n                }\n            </ul>\n        }\n    </ng-template>\n    <ng-template let-option=\"option\" #itemSource>\n        @if (!itemTemplate) {\n            <span\n                fd-list-title\n                fdTruncatedTitle\n                [innerHtml]=\"option.label | highlight: _searchTermCtrl.value || '' : highlight\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-template>\n        }\n    </ng-template>\n}\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-input-tokenizer-custom:not([class*=--cozy]):not([class*=--condensed]),.is-compact .fd-multi-input-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-input-tokenizer-custom[class*=--compact],.fd-multi-input-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-input__invisible-text{display:none!important}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-multi-input-menu-overflow{max-width:37.5rem}.fd-input.fd-multi-input-tokenizer-input{min-width:4rem;margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"] }]
+                    ], template: "@if (_viewModel$ | async; as viewModel) {\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            @if (mobile) {\n                <ng-template\n                    [ngTemplateOutlet]=\"control\"\n                    [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                ></ng-template>\n            } @else {\n                <fd-popover\n                    additionalBodyClass=\"fd-popover-custom-list\"\n                    [isOpen]=\"open\"\n                    (isOpenChange)=\"openChangeHandle($event)\"\n                    (input)=\"!open && openChangeHandle(true)\"\n                    [triggers]=\"[]\"\n                    [maxWidth]=\"_popoverMaxWidth\"\n                    [disabled]=\"disabled\"\n                    [fillControlMode]=\"fillControlMode\"\n                    class=\"fd-multi-input-popover-custom\"\n                    [focusTrapped]=\"true\"\n                    [focusAutoCapture]=\"false\"\n                >\n                    <fd-popover-control>\n                        <form (submit)=\"_onSubmit()\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"control\"\n                                [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                            ></ng-template>\n                        </form>\n                    </fd-popover-control>\n                    <fd-popover-body\n                        [attr.aria-hidden]=\"!open\"\n                        [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                    >\n                        <ng-template [ngTemplateOutlet]=\"list\"></ng-template>\n                        <ng-content></ng-content>\n                    </fd-popover-body>\n                </fd-popover>\n            }\n        </div>\n    </div>\n    <ng-template #control let-showAddonButton=\"displayAddonButton\">\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"showAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"showAddonButton ? glyph : ''\"\n            [glyphFont]=\"glyphFont\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n            [glyphAriaLabel]=\"addOnButtonAriaLabel\"\n            [iconTitle]=\"addonIconTitle\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [showOverflowPopover]=\"false\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                [externalHiddenCount]=\"hiddenCount()\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n                fdMultiAnnouncer\n                [multiAnnouncerOptions]=\"filterFn(dropdownValues, searchTerm)\"\n            >\n                @for (option of renderedTokens(); track valueFn(option.item)) {\n                    <fd-token\n                        [disabled]=\"disabled\"\n                        (onCloseClick)=\"_onTokenCloseClick(option, false, $event)\"\n                        (onRemove)=\"_onTokenCloseClick(option, false)\"\n                        [title]=\"option.label\"\n                        (onTokenClick)=\"_tokenElementClicked($event)\"\n                    >\n                        <span [innerHtml]=\"option.label\"></span>\n                    </fd-token>\n                }\n                <input\n                    type=\"text\"\n                    class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n                    autocomplete=\"off\"\n                    fd-form-control\n                    fd-input-group-input\n                    fdkAutoComplete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [matcher]=\"typeAheadMatcher\"\n                    [inputText]=\"_searchTermCtrl.value || ''\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"!includes && autoComplete && !mobile\"\n                    [attr.placeholder]=\"viewModel.selectedOptions.length ? null : placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)()\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                    (focus)=\"_onInputFocus()\"\n                    [attr.title]=\"title\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n    <ng-template #list>\n        @if (viewModel.displayedOptions.length) {\n            <ul\n                fd-list\n                class=\"fd-multi-input-menu-overflow\"\n                [selection]=\"true\"\n                [mobileMode]=\"mobile\"\n                [style.max-height]=\"!mobile ? maxHeight : 'auto'\"\n                [byline]=\"byline\"\n                (focusEscapeList)=\"handleListFocusEscape($event)\"\n                [style.min-width]=\"'100%'\"\n                (keydown.tab)=\"_close()\"\n                (keydown.escape)=\"_close()\"\n                aria-multiselectable=\"true\"\n            >\n                @for (option of viewModel.displayedOptions; track valueFn(option.item); let idx = $index) {\n                    <li\n                        fd-list-item\n                        [attr.aria-label]=\"option.label\"\n                        (click)=\"_onCheckboxClick(option, $event, idx, true)\"\n                        (keyup)=\"_onCheckboxKeyup(option, $event, idx, true)\"\n                        [selected]=\"!!option.isSelected\"\n                    >\n                        <fd-checkbox (click)=\"_onCheckboxClick(option, $event, idx)\" [value]=\"option.isSelected\">\n                            <!-- TODO -->\n                        </fd-checkbox>\n                        <ng-template\n                            [ngTemplateOutlet]=\"itemSource\"\n                            [ngTemplateOutletContext]=\"{ option: option }\"\n                        ></ng-template>\n                    </li>\n                }\n                @if (\n                    showAllButton &&\n                    (_onlySelected$ | async) !== true &&\n                    viewModel.displayedOptions.length < dropdownValues.length\n                ) {\n                    <li\n                        fd-list-item\n                        class=\"fd-multi-input-show-all\"\n                        (keyDown)=\"_showAllKeyDown($event)\"\n                        (click)=\"_showAllClicked($event)\"\n                    >\n                        <a fd-link role=\"button\" tabindex=\"0\">{{\n                            ('coreMultiInput.showAll' | fdTranslate: { count: dropdownValues.length })()\n                        }}</a>\n                    </li>\n                }\n            </ul>\n        }\n    </ng-template>\n    <ng-template let-option=\"option\" #itemSource>\n        @if (!itemTemplate) {\n            <span\n                fd-list-title\n                fdTruncatedTitle\n                [innerHtml]=\"option.label | highlight: _searchTermCtrl.value || '' : highlight\"\n            ></span>\n        } @else {\n            <ng-template\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-template>\n        }\n    </ng-template>\n}\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-input-tokenizer-custom:not([class*=--cozy]):not([class*=--condensed]),.is-compact .fd-multi-input-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-input-tokenizer-custom[class*=--compact],.fd-multi-input-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-input__invisible-text{display:none!important}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-multi-input-menu-overflow{max-width:37.5rem}.fd-input.fd-multi-input-tokenizer-input{min-width:4rem;margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"] }]
         }], ctorParameters: () => [], propDecorators: { placeholder: [{
                 type: Input
             }], disabled: [{
@@ -975,7 +1012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImpor
             }], tokenizer: [{
                 type: ViewChild,
                 args: [TokenizerComponent]
-            }], buildComponentCssClass: [] } });
+            }], maxVisibleTokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleTokens", required: false }] }], buildComponentCssClass: [] } });
 
 /**
  * @deprecated