@fundamental-ngx/core 0.43.10 → 0.43.12

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

@@ -1,7 +1,7 @@
 import * as i3$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { forwardRef, Directive, InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Optional, ViewChild, NgModule, EventEmitter, Injector, TemplateRef, ElementRef, Input, Output, HostListener } from '@angular/core';
+import { forwardRef, Directive, InjectionToken, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Optional, ViewChild, NgModule, EventEmitter, Injector, isDevMode, TemplateRef, ElementRef, Input, Output, HostListener } from '@angular/core';
 import * as i5$1 from '@angular/forms';
 import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2$1 from '@fundamental-ngx/cdk/utils';
@@ -23,14 +23,13 @@ import { PopoverComponent, PopoverModule } from '@fundamental-ngx/core/popover';
 import * as i4 from '@fundamental-ngx/core/token';
 import { TokenizerComponent, TokenModule } from '@fundamental-ngx/core/token';
 import * as i12 from '@fundamental-ngx/i18n';
-import { TranslationResolver, FD_LANGUAGE, I18nModule } from '@fundamental-ngx/i18n';
+import { I18nModule } from '@fundamental-ngx/i18n';
 import { __decorate, __metadata } from 'tslib';
-import { SelectionModel } from '@angular/cdk/collections';
 import { SPACE, ENTER, DOWN_ARROW, UP_ARROW, ESCAPE, TAB } from '@angular/cdk/keycodes';
-import * as i13 from 'rxjs';
-import { BehaviorSubject, Subscription, combineLatest, firstValueFrom } from 'rxjs';
+import { BehaviorSubject, Subscription, combineLatest } from 'rxjs';
 import { takeUntil, distinctUntilChanged, map, first, startWith } from 'rxjs/operators';
 import { MenuKeyboardService } from '@fundamental-ngx/core/menu';
+import get from 'lodash-es/get';
 import * as i1 from '@fundamental-ngx/core/dialog';
 import { DialogModule } from '@fundamental-ngx/core/dialog';
 import { MobileModeBase, MobileModeControl, MOBILE_MODE_CONFIG } from '@fundamental-ngx/core/mobile-mode';
@@ -163,8 +162,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 }]
         }] });
 
+class PairSelectionModel {
+    constructor() {
+        /** @hidden */
+        this._selected = new Map();
+        /** Event emitted when the selection has changed. */
+        this.selectionChanged = new EventEmitter();
+    }
+    /** Array of selected items */
+    get selected() {
+        return [...this._selected.values()];
+    }
+    /** Whether the given key exists in the record */
+    isSelected(key) {
+        return this._selected.has(key);
+    }
+    /** Selects the given key-value pair */
+    select(keyOrValues, value) {
+        if (value) {
+            this._selected.set(keyOrValues, value);
+        }
+        else {
+            keyOrValues.forEach(([key, v]) => this._selected.set(key, v));
+        }
+        this.selectionChanged.emit([...this._selected]);
+    }
+    /** Deselects the given key */
+    deselect(key) {
+        this._selected.delete(key);
+        this.selectionChanged.emit([...this._selected]);
+    }
+    /** Clears the selection information */
+    clear() {
+        this._selected.clear();
+        this.selectionChanged.emit([...this._selected]);
+    }
+}
+
 function isOptionItem(candidate) {
-    return isOptionItemBase(candidate) && 'item' in candidate;
+    return isOptionItemBase(candidate) && 'item' in candidate && 'id' in candidate;
 }
 function isOptionItemBase(candidate) {
     return typeof candidate === 'object' && candidate !== null && 'value' in candidate && 'label' in candidate;
@@ -187,10 +223,21 @@ class MultiInputComponent {
     /** Selected dropdown items. */
     set selected(values) {
         this._selectionModel.clear();
-        values?.forEach((item) => this._selectionModel.select(item));
+        if (values) {
+            const potentialItems = [...values];
+            const options = [];
+            potentialItems.forEach((value) => {
+                let optionItem = this._optionItems.find((i) => i.value === value);
+                if (!optionItem) {
+                    optionItem = this._getOptionItem(value);
+                }
+                options.push(optionItem);
+            });
+            this._selectionModel.select(options.map((item) => [item.id, item]));
+        }
     }
     get selected() {
-        return this._selectionModel.selected;
+        return this._selectionModel.selected.map((c) => c.value);
     }
     /** @hidden */
     get _popoverMaxWidth() {
@@ -202,6 +249,10 @@ class MultiInputComponent {
         }
         return this.elementRef.nativeElement.getBoundingClientRect().width;
     }
+    /** @hidden */
+    get _optionItems() {
+        return this.optionItems$.value;
+    }
     /** typeahead matcher function */
     get typeAheadMatcher() {
         if (this.includes) {
@@ -210,14 +261,13 @@ class MultiInputComponent {
         return (item, searchTerm) => item.startsWith(searchTerm);
     }
     /** @hidden */
-    constructor(_contentDensityObserver, elementRef, _changeDetRef, _dynamicComponentService, _injector, _viewContainerRef, _language, _rtlService, _focusTrapService) {
+    constructor(_contentDensityObserver, elementRef, _changeDetRef, _dynamicComponentService, _injector, _viewContainerRef, _rtlService, _focusTrapService) {
         this._contentDensityObserver = _contentDensityObserver;
         this.elementRef = elementRef;
         this._changeDetRef = _changeDetRef;
         this._dynamicComponentService = _dynamicComponentService;
         this._injector = _injector;
         this._viewContainerRef = _viewContainerRef;
-        this._language = _language;
         this._rtlService = _rtlService;
         this._focusTrapService = _focusTrapService;
         /** Placeholder for the input field. */
@@ -330,7 +380,7 @@ class MultiInputComponent {
         /** @hidden */
         this._searchTermCtrl = new FormControl('');
         /** @hidden */
-        this._selectionModel = new SelectionModel(true);
+        this._selectionModel = new PairSelectionModel();
         /** @hidden */
         this._viewModel$ = this._getViewModel();
         /** @hidden */
@@ -338,8 +388,6 @@ class MultiInputComponent {
         /** @hidden */
         this._rangeSelector = new RangeSelector();
         /** @hidden */
-        this._translationResolver = new TranslationResolver();
-        /** @hidden */
         this._trackBy = (index, optionItem) => this.valueFn(optionItem?.item);
         /** @hidden */
         this.onChange = () => { };
@@ -384,9 +432,6 @@ class MultiInputComponent {
         this._subscriptions.add(this._getViewModel()
             .pipe(map((viewModel) => !viewModel.displayedOptions.some((c) => !c.isSelected)))
             .subscribe((allItemsSelected) => this.allItemsSelectedChange.emit(allItemsSelected)));
-        this._subscriptions.add(this._language.subscribe(() => {
-            this._getAriaLabel();
-        }));
     }
     /** @hidden */
     ngOnChanges(changes) {
@@ -471,7 +516,7 @@ class MultiInputComponent {
     /** Method that selects all possible options. */
     selectAllItems(selectAll) {
         if (selectAll) {
-            this.selected = this.optionItems$.getValue().map((c) => c.value);
+            this.selected = this._optionItems.map((c) => c.value);
         }
         else {
             this.selected = [];
@@ -480,17 +525,17 @@ class MultiInputComponent {
         this._propagateChange();
     }
     /** @hidden */
-    _onCheckboxKeyup(value, event, index) {
+    _onCheckboxKeyup(option, event, index) {
         if (KeyUtil.isKeyCode(event, [SPACE, ENTER])) {
-            this._onCheckboxClick(value, event, index);
+            this._onCheckboxClick(option, event, index);
         }
     }
     /** @hidden */
-    async _onCheckboxClick(value, event, index, isListItem = false) {
-        const toggledSelection = !this._selectionModel.isSelected(value);
+    async _onCheckboxClick(option, event, index, isListItem = false) {
+        const toggledSelection = !this._selectionModel.isSelected(option.id);
         this._rangeSelector.onRangeElementToggled(index, event);
         const sub = this._viewModel$.pipe(first()).subscribe((vm) => {
-            this._rangeSelector.applyValueToEachInRange((idx) => this._handleSelect(toggledSelection, vm.displayedOptions[idx].value, false));
+            this._rangeSelector.applyValueToEachInRange((idx) => this._handleSelect(toggledSelection, vm.displayedOptions[idx], false));
             this._changeDetRef.detectChanges();
         });
         this._subscriptions.add(sub);
@@ -503,18 +548,18 @@ class MultiInputComponent {
         }
     }
     /** @hidden */
-    _onTokenClick(value, resetSearch, event) {
+    _onTokenClick(option, resetSearch, event) {
         event?.preventDefault(); // prevent this function from being called twice when checkbox updates
-        this._handleSelect(false, value, resetSearch, true);
+        this._handleSelect(false, option, resetSearch, true);
     }
     /** @hidden */
-    _handleSelect(checked, value, resetSearch = true, fromTokenCloseClick = false) {
+    _handleSelect(checked, option, resetSearch = true, fromTokenCloseClick = false) {
         const previousLength = this._selectionModel.selected.length;
         if (checked) {
-            this._selectionModel.select(value);
+            this._selectionModel.select(option.id, option);
         }
         else {
-            this._selectionModel.deselect(value);
+            this._selectionModel.deselect(option.id);
         }
         // Handle popover placement update
         if (this._shouldPopoverBeUpdated(previousLength, this._selectionModel.selected.length)) {
@@ -635,14 +680,14 @@ class MultiInputComponent {
     _addNewTokenToDropDownValues(newToken) {
         this.dropdownValues.push(newToken);
         const newOption = this._getOptionItem(newToken);
-        this.optionItems$.next([...this.optionItems$.value, newOption]);
+        this.optionItems$.next([...this._optionItems, newOption]);
     }
     /** @hidden */
     _selectFirstFiltered(searchTerm) {
         const filtered = this.filterFn(this.dropdownValues, searchTerm);
         if (Array.isArray(filtered) && filtered.length > 0 && this.autoComplete) {
             const optionItem = this._getOptionItem(filtered[0]);
-            this._handleSelect(true, optionItem.value);
+            this._handleSelect(true, optionItem);
             this._searchTermCtrl.setValue('');
             this.open = false;
             return true;
@@ -654,8 +699,8 @@ class MultiInputComponent {
         const searchLower = searchTerm.toLocaleLowerCase();
         return contentArray.filter((item) => {
             if (item) {
-                const displayedValue = this.displayFn(item);
-                const term = typeof displayedValue === 'string' ? displayedValue.toLocaleLowerCase() : '';
+                const displayedValue = isOptionItem(item) ? item.label : this.displayFn(item);
+                const term = displayedValue?.toLocaleLowerCase() || '';
                 return this.typeAheadMatcher(term, searchLower);
             }
         });
@@ -688,7 +733,7 @@ class MultiInputComponent {
     /** @hidden */
     _propagateChange(emitInMobile) {
         if (!this.mobile || emitInMobile) {
-            const selected = [...this._selectionModel.selected];
+            const selected = this._selectionModel.selected.map((c) => c.value);
             this.onChange(selected);
             this.selectedChange.emit(selected);
         }
@@ -710,6 +755,20 @@ class MultiInputComponent {
         }, MultiInputMobileModule, MultiInputMobileComponent, this._viewContainerRef, injector);
     }
     /** @hidden */
+    _getItemIdentifier(item) {
+        if (!this.optionItemIdentifier) {
+            const value = this.valueFn(item);
+            if (typeof value !== 'string' && typeof value !== 'number' && typeof value !== 'symbol' && isDevMode()) {
+                console.warn('optionItemIdentifier is not set and valueFn does not return a string, number or symbol', item);
+            }
+            return value;
+        }
+        if (typeof this.optionItemIdentifier === 'function') {
+            return this.optionItemIdentifier(item);
+        }
+        return get(item, this.optionItemIdentifier);
+    }
+    /** @hidden */
     _resetSearchTerm() {
         this._searchTermCtrl.setValue('');
         this._changeDetRef.detectChanges();
@@ -721,6 +780,7 @@ class MultiInputComponent {
         }
         const { label, value } = this._getValueAndLabelOfItem(item);
         return {
+            id: this._getItemIdentifier(item),
             item,
             label,
             value,
@@ -743,33 +803,23 @@ class MultiInputComponent {
         return { label, value };
     }
     /** @hidden */
-    _getOptionItemByValue(value, optionItems = []) {
-        return optionItems.find((c) => c.value === value);
-    }
-    /** @hidden */
     _getViewModel() {
         return combineLatest([
             this._searchTermCtrl.valueChanges.pipe(startWith(this._searchTermCtrl.value)),
-            this._selectionModel.changed.pipe(startWith(null)),
+            this._selectionModel.selectionChanged.pipe(startWith(null)),
             this.optionItems$
-        ]).pipe(map(([, , optionItems]) => {
-            const selected = this.selected.map((v) => this._getOptionItemByValue(v, optionItems) || this._getOptionItem(v));
+        ]).pipe(map(() => {
             // not using "searchTerm" value from combineLatest as it will be wrong for late subscribers, if any
             const searchTerm = this._searchTermCtrl.value ?? '';
-            const filtered = this.filterFn(optionItems.map((c) => c.item), searchTerm);
+            const filtered = this.filterFn(this.dropdownValues, searchTerm);
             const displayedOptions = (Array.isArray(filtered) ? filtered : []).map((item) => this._getOptionItem(item));
-            displayedOptions.forEach((c) => (c.isSelected = selected.findIndex((d) => d?.value === c.value) > -1));
-            return { selectedOptions: selected, displayedOptions };
+            displayedOptions.forEach((c) => (c.isSelected = this._selectionModel.isSelected(c.id)));
+            return { selectedOptions: this._selectionModel.selected, displayedOptions };
         }));
     }
-    /** @hidden */
-    async _getAriaLabel() {
-        const lang = await firstValueFrom(this._language);
-        this._defaultAriaLabel = this._translationResolver.resolve(lang, 'coreMultiInput.multiInputAriaLabel');
-    }
 }
-MultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1$1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$1.DynamicComponentService }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: FD_LANGUAGE }, { token: i2$1.RtlService, optional: true }, { token: i2$1.FocusTrapService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MultiInputComponent, selector: "fd-multi-input", inputs: { placeholder: "placeholder", disabled: "disabled", required: "required", compactCollapse: "compactCollapse", maxHeight: "maxHeight", glyph: "glyph", dropdownValues: "dropdownValues", openDropdownOnAddOnClicked: "openDropdownOnAddOnClicked", searchTerm: "searchTerm", inputId: "inputId", highlight: "highlight", selected: "selected", class: "class", filterFn: "filterFn", valueFn: "valueFn", displayFn: "displayFn", newTokenParseFn: "newTokenParseFn", 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", tokenHiddenId: "tokenHiddenId" }, outputs: { searchTermChange: "searchTermChange", selectedChange: "selectedChange", openChange: "openChange", addOnButtonClicked: "addOnButtonClicked", allItemsSelectedChange: "allItemsSelectedChange" }, host: { listeners: { "focusout": "_focusOut($event)" } }, providers: [
+MultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: MultiInputComponent, deps: [{ token: i1$1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2$1.DynamicComponentService }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i2$1.RtlService, optional: true }, { token: i2$1.FocusTrapService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: MultiInputComponent, selector: "fd-multi-input", inputs: { placeholder: "placeholder", disabled: "disabled", required: "required", compactCollapse: "compactCollapse", maxHeight: "maxHeight", glyph: "glyph", dropdownValues: "dropdownValues", openDropdownOnAddOnClicked: "openDropdownOnAddOnClicked", 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", tokenHiddenId: "tokenHiddenId" }, outputs: { searchTermChange: "searchTermChange", selectedChange: "selectedChange", openChange: "openChange", addOnButtonClicked: "addOnButtonClicked", allItemsSelectedChange: "allItemsSelectedChange" }, host: { listeners: { "focusout": "_focusOut($event)" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => MultiInputComponent),
@@ -778,7 +828,7 @@ MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         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: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container\n                [ngTemplateOutlet]=\"control\"\n                [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                *ngIf=\"mobile\"\n            ></ng-container>\n\n            <fd-popover\n                additionalBodyClass=\"fd-popover-custom-list\"\n                *ngIf=\"!mobile\"\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            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container\n                            *ngTemplateOutlet=\"control; context: { displayAddonButton: displayAddonButton }\"\n                        ></ng-container>\n                    </form>\n                </fd-popover-control>\n\n                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n                    <ng-content></ng-content>\n                </fd-popover-body>\n            </fd-popover>\n        </div>\n    </div>\n\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            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n        >\n            <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fd-multi-input__invisible-text\">{{\n                'coreMultiInput.tokensCountText' | fdTranslate : { length: selected.length }\n            }}</span>\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: _trackBy\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option.value, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option.value, false)\"\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]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [ariaLabel]=\"ariaLabel || _defaultAriaLabel\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    [attr.aria-describedby]=\"tokenHiddenId\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                    (focus)=\"tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\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.minWidth]=\"'100%'\"\n            aria-multiselectable=\"true\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: _trackBy\"\n                fd-list-item\n                [attr.aria-label]=\"option.label\"\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"!!option.isSelected\"\n            >\n                <fd-checkbox (click)=\"_onCheckboxClick(option.value, $event, idx)\" [value]=\"option.isSelected\">\n                    <!-- TODO -->\n                </fd-checkbox>\n\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n\n            <li\n                *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n                fd-list-item\n                class=\"fd-multi-input-show-all\"\n                (keyDown)=\"_showAllKeyDown($event)\"\n                (click)=\"_showAllClicked($event)\"\n            >\n                <a fd-link tabindex=\"0\">Show All ({{ dropdownValues.length }})</a>\n            </li>\n        </ul>\n    </ng-template>\n\n    <ng-template let-option=\"option\" #itemSource>\n        <span\n            *ngIf=\"!itemTemplate\"\n            fd-list-title\n            [innerHtml]=\"option.label | highlight : _searchTermCtrl.value || '' : highlight\"\n        ></span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\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: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i4.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i10.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i11.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2$1.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "matcher", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i12.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: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container\n                [ngTemplateOutlet]=\"control\"\n                [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                *ngIf=\"mobile\"\n            ></ng-container>\n\n            <fd-popover\n                additionalBodyClass=\"fd-popover-custom-list\"\n                *ngIf=\"!mobile\"\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            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container\n                            *ngTemplateOutlet=\"control; context: { displayAddonButton: displayAddonButton }\"\n                        ></ng-container>\n                    </form>\n                </fd-popover-control>\n\n                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n                    <ng-content></ng-content>\n                </fd-popover-body>\n            </fd-popover>\n        </div>\n    </div>\n\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            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n        >\n            <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fd-multi-input__invisible-text\">{{\n                'coreMultiInput.tokensCountText' | fdTranslate : { length: selected.length }\n            }}</span>\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: _trackBy\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option, false)\"\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]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    [attr.aria-describedby]=\"tokenHiddenId\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                    (focus)=\"tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\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            aria-multiselectable=\"true\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: _trackBy\"\n                fd-list-item\n                [attr.aria-label]=\"option.label\"\n                (click)=\"_onCheckboxClick(option, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option, $event, idx)\"\n                [selected]=\"!!option.isSelected\"\n            >\n                <fd-checkbox (click)=\"_onCheckboxClick(option, $event, idx)\" [value]=\"option.isSelected\">\n                    <!-- TODO -->\n                </fd-checkbox>\n\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n\n            <li\n                *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n                fd-list-item\n                class=\"fd-multi-input-show-all\"\n                (keyDown)=\"_showAllKeyDown($event)\"\n                (click)=\"_showAllClicked($event)\"\n            >\n                <a fd-link tabindex=\"0\" role=\"button\">Show All ({{ dropdownValues.length }})</a>\n            </li>\n        </ul>\n    </ng-template>\n\n    <ng-template let-option=\"option\" #itemSource>\n        <span\n            *ngIf=\"!itemTemplate\"\n            fd-list-title\n            [innerHtml]=\"option.label | highlight : _searchTermCtrl.value || '' : highlight\"\n        ></span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\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: i3$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i4.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i5$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5$1.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i10.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i11.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2$1.AutoCompleteDirective, selector: "[fdkAutoComplete], [fdAutoComplete], [fd-auto-complete]", inputs: ["options", "inputText", "enable", "matcher", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i3$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2$1.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i12.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -796,11 +846,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                         MenuKeyboardService,
                         registerFormItemControl(MultiInputComponent),
                         contentDensityObserverProviders()
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container\n                [ngTemplateOutlet]=\"control\"\n                [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                *ngIf=\"mobile\"\n            ></ng-container>\n\n            <fd-popover\n                additionalBodyClass=\"fd-popover-custom-list\"\n                *ngIf=\"!mobile\"\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            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container\n                            *ngTemplateOutlet=\"control; context: { displayAddonButton: displayAddonButton }\"\n                        ></ng-container>\n                    </form>\n                </fd-popover-control>\n\n                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n                    <ng-content></ng-content>\n                </fd-popover-body>\n            </fd-popover>\n        </div>\n    </div>\n\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            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n        >\n            <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fd-multi-input__invisible-text\">{{\n                'coreMultiInput.tokensCountText' | fdTranslate : { length: selected.length }\n            }}</span>\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: _trackBy\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option.value, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option.value, false)\"\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]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [ariaLabel]=\"ariaLabel || _defaultAriaLabel\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    [attr.aria-describedby]=\"tokenHiddenId\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                    (focus)=\"tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\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.minWidth]=\"'100%'\"\n            aria-multiselectable=\"true\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: _trackBy\"\n                fd-list-item\n                [attr.aria-label]=\"option.label\"\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"!!option.isSelected\"\n            >\n                <fd-checkbox (click)=\"_onCheckboxClick(option.value, $event, idx)\" [value]=\"option.isSelected\">\n                    <!-- TODO -->\n                </fd-checkbox>\n\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n\n            <li\n                *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n                fd-list-item\n                class=\"fd-multi-input-show-all\"\n                (keyDown)=\"_showAllKeyDown($event)\"\n                (click)=\"_showAllClicked($event)\"\n            >\n                <a fd-link tabindex=\"0\">Show All ({{ dropdownValues.length }})</a>\n            </li>\n        </ul>\n    </ng-template>\n\n    <ng-template let-option=\"option\" #itemSource>\n        <span\n            *ngIf=\"!itemTemplate\"\n            fd-list-title\n            [innerHtml]=\"option.label | highlight : _searchTermCtrl.value || '' : highlight\"\n        ></span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\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: function () { return [{ type: i1$1.ContentDensityObserver }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.DynamicComponentService }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i13.Observable, decorators: [{
-                    type: Inject,
-                    args: [FD_LANGUAGE]
-                }] }, { type: i2$1.RtlService, decorators: [{
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container\n                [ngTemplateOutlet]=\"control\"\n                [ngTemplateOutletContext]=\"{ displayAddonButton: displayAddonButton }\"\n                *ngIf=\"mobile\"\n            ></ng-container>\n\n            <fd-popover\n                additionalBodyClass=\"fd-popover-custom-list\"\n                *ngIf=\"!mobile\"\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            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container\n                            *ngTemplateOutlet=\"control; context: { displayAddonButton: displayAddonButton }\"\n                        ></ng-container>\n                    </form>\n                </fd-popover-control>\n\n                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n                    <ng-content></ng-content>\n                </fd-popover-body>\n            </fd-popover>\n        </div>\n    </div>\n\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            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked($event)\"\n        >\n            <span [attr.id]=\"tokenHiddenId\" aria-hidden=\"true\" class=\"fd-multi-input__invisible-text\">{{\n                'coreMultiInput.tokensCountText' | fdTranslate : { length: selected.length }\n            }}</span>\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: _trackBy\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option, false)\"\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]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [ariaLabel]=\"ariaLabel || ('coreMultiInput.multiInputAriaLabel' | fdTranslate)\"\n                    [ariaLabelledBy]=\"ariaLabelledBy\"\n                    [attr.aria-describedby]=\"tokenHiddenId\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                    (focus)=\"tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\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            aria-multiselectable=\"true\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: _trackBy\"\n                fd-list-item\n                [attr.aria-label]=\"option.label\"\n                (click)=\"_onCheckboxClick(option, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option, $event, idx)\"\n                [selected]=\"!!option.isSelected\"\n            >\n                <fd-checkbox (click)=\"_onCheckboxClick(option, $event, idx)\" [value]=\"option.isSelected\">\n                    <!-- TODO -->\n                </fd-checkbox>\n\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n\n            <li\n                *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n                fd-list-item\n                class=\"fd-multi-input-show-all\"\n                (keyDown)=\"_showAllKeyDown($event)\"\n                (click)=\"_showAllClicked($event)\"\n            >\n                <a fd-link tabindex=\"0\" role=\"button\">Show All ({{ dropdownValues.length }})</a>\n            </li>\n        </ul>\n    </ng-template>\n\n    <ng-template let-option=\"option\" #itemSource>\n        <span\n            *ngIf=\"!itemTemplate\"\n            fd-list-title\n            [innerHtml]=\"option.label | highlight : _searchTermCtrl.value || '' : highlight\"\n        ></span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\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: function () { return [{ type: i1$1.ContentDensityObserver }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2$1.DynamicComponentService }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i2$1.RtlService, decorators: [{
                     type: Optional
                 }] }, { type: i2$1.FocusTrapService, decorators: [{
                     type: Optional
@@ -838,6 +885,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImpor
                 type: Input
             }], newTokenParseFn: [{
                 type: Input
+            }], optionItemIdentifier: [{
+                type: Input
             }], newTokenValidateFn: [{
                 type: Input
             }], ariaLabel: [{