import { NgTemplateOutlet, AsyncPipe } from '@angular/common';
import * as i0 from '@angular/core';
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';
import { DialogComponent, DialogHeaderComponent, DialogFooterComponent, DialogBodyComponent, DialogCloseButtonComponent } from '@fundamental-ngx/core/dialog';
import { MobileModeBase, MobileModeControl } from '@fundamental-ngx/core/mobile-mode';
import { TitleComponent } from '@fundamental-ngx/core/title';
import { __decorate, __metadata } from 'tslib';
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 { 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';
import { PopoverComponent, PopoverControlComponent, PopoverBodyComponent } from '@fundamental-ngx/core/popover';
import { TokenComponent, TokenizerComponent } from '@fundamental-ngx/core/token';
import { CheckboxComponent } from '@fundamental-ngx/core/checkbox';
import { ContentDensityObserver, contentDensityObserverProviders, ContentDensityModule } from '@fundamental-ngx/core/content-density';
import { FD_DEFAULT_ICON_FONT_FAMILY } from '@fundamental-ngx/core/icon';
import { InputGroupComponent, InputGroupInputDirective } from '@fundamental-ngx/core/input-group';
import { LinkComponent } from '@fundamental-ngx/core/link';
import { MultiAnnouncerDirective } from '@fundamental-ngx/core/multi-combobox';
import { FdTranslatePipe } from '@fundamental-ngx/i18n';

const MULTI_INPUT_COMPONENT = new InjectionToken('MultiInputComponent');

class MultiInputMobileComponent extends MobileModeBase {
    /** @hidden */
    constructor(multiInputComponent) {
        super(multiInputComponent, MobileModeControl.MULTI_INPUT);
        /** @hidden
         * For internal usage
         * Control element, which will be rendered inside dialog.
         * List element, which will be rendered inside dialog.
         */
        this.childContent = null;
    }
    /** @hidden */
    ngOnInit() {
        this._listenOnMultiInputOpenChange();
    }
    /** Throw select all event, it's handled by multi input component */
    selectAll(selectAll) {
        this._component.selectAllItems(!selectAll);
    }
    /** @hidden */
    handleDismiss() {
        this.dialogRef.dismiss();
        this._component.dialogDismiss(this._selectedBackup);
    }
    /** @hidden */
    handleApprove() {
        this.dialogRef.close();
        this._component.dialogApprove();
    }
    /** @hidden */
    _toggleDialog(open) {
        if (!open) {
            return;
        }
        this._selectedBackup = this._component.selected?.length ? [...this._component.selected] : [];
        if (!this._dialogService.hasOpenDialogs()) {
            this._open();
        }
    }
    /** @hidden */
    _listenOnMultiInputOpenChange() {
        this._component.openChange
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((isOpen) => this._toggleDialog(isOpen));
        this._component.allItemsSelectedChange
            .pipe(takeUntilDestroyed(this._destroyRef))
            .subscribe((allItemsSelected) => (this.allItemsSelected = allItemsSelected));
    }
    /** @hidden */
    _open() {
        this.dialogRef = this._dialogService.open(this.dialogTemplate, {
            mobile: true,
            disablePaddings: true,
            ...this.dialogConfig,
            backdropClickCloseable: false,
            escKeyCloseable: false,
            container: this._elementRef.nativeElement
        });
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiInputMobileComponent, deps: [{ token: MULTI_INPUT_COMPONENT }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: MultiInputMobileComponent, isStandalone: true, selector: "fd-multi-input-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element class=\"custom-multi-input-mobile-control-element\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"childContent?.controlTemplate || null\"\n                            [ngTemplateOutletContext]=\"{ displayAddonButton: false }\"\n                        ></ng-template>\n                    </fd-bar-element>\n                    <fd-bar-element class=\"custom-multi-input-select-all-bar-element\">\n                        <button\n                            fd-button\n                            glyph=\"multiselect-all\"\n                            [fdType]=\"allItemsSelected ? 'emphasized' : 'transparent'\"\n                            (click)=\"selectAll(allItemsSelected)\"\n                        ></button>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-template [ngTemplateOutlet]=\"childContent?.listTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (mobileConfig.approveButtonText) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\"> </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".custom-multi-input-select-all-bar-element{min-width:2.25rem}.custom-multi-input-mobile-control-element{width:calc(100% - 2.25rem)}.custom-multi-input-mobile-control-element .fd-multi-input-input-group-custom{width:100%}\n"], dependencies: [{ kind: "directive", type: TemplateDirective, selector: "[fdkTemplate]", inputs: ["fdkTemplate"] }, { kind: "directive", type: BarMiddleDirective, selector: "[fd-bar-middle]", inputs: ["stackContentsVertically"] }, { kind: "directive", type: BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth"] }, { kind: "component", type: ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "ariaLabelledby", "id"] }, { kind: "component", type: TitleComponent, selector: "[fd-title], [fdTitle]", inputs: ["twoLineClamp", "headerSize", "wrap"], exportAs: ["fd-title"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button], span[fd-button]", inputs: ["id"], exportAs: ["fd-button"] }, { kind: "component", type: DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { kind: "component", type: DialogHeaderComponent, selector: "fd-dialog-header", inputs: ["inShellbar"] }, { kind: "component", type: DialogFooterComponent, selector: "fd-dialog-footer" }, { kind: "component", type: DialogBodyComponent, selector: "fd-dialog-body", inputs: ["disablePaddings"] }, { kind: "component", type: DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiInputMobileComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-multi-input-mobile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
                        TemplateDirective,
                        BarMiddleDirective,
                        BarElementDirective,
                        ButtonBarComponent,
                        TitleComponent,
                        TitleComponent,
                        BarMiddleDirective,
                        BarElementDirective,
                        ButtonBarComponent,
                        NgTemplateOutlet,
                        ButtonComponent,
                        DialogComponent,
                        DialogHeaderComponent,
                        DialogFooterComponent,
                        DialogBodyComponent,
                        DialogCloseButtonComponent
                    ], template: "<ng-template [fdDialogTemplate] let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            @if (mobileConfig.title) {\n                <h1 fd-title>{{ mobileConfig.title }}</h1>\n            }\n            @if (mobileConfig.hasCloseButton) {\n                <button fd-dialog-close-button [mobile]=\"true\" (click)=\"handleDismiss()\"></button>\n            }\n            <ng-template fdkTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element class=\"custom-multi-input-mobile-control-element\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"childContent?.controlTemplate || null\"\n                            [ngTemplateOutletContext]=\"{ displayAddonButton: false }\"\n                        ></ng-template>\n                    </fd-bar-element>\n                    <fd-bar-element class=\"custom-multi-input-select-all-bar-element\">\n                        <button\n                            fd-button\n                            glyph=\"multiselect-all\"\n                            [fdType]=\"allItemsSelected ? 'emphasized' : 'transparent'\"\n                            (click)=\"selectAll(allItemsSelected)\"\n                        ></button>\n                    </fd-bar-element>\n                </div>\n            </ng-template>\n        </fd-dialog-header>\n        <fd-dialog-body>\n            <ng-template [ngTemplateOutlet]=\"childContent?.listTemplate || null\"></ng-template>\n        </fd-dialog-body>\n        <fd-dialog-footer>\n            @if (mobileConfig.approveButtonText) {\n                <fd-button-bar fdType=\"emphasized\" [label]=\"mobileConfig.approveButtonText!\" (click)=\"handleApprove()\">\n                </fd-button-bar>\n            }\n            @if (mobileConfig.cancelButtonText) {\n                <fd-button-bar [label]=\"mobileConfig.cancelButtonText!\" (click)=\"handleDismiss()\"> </fd-button-bar>\n            }\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n", styles: [".custom-multi-input-select-all-bar-element{min-width:2.25rem}.custom-multi-input-mobile-control-element{width:calc(100% - 2.25rem)}.custom-multi-input-mobile-control-element .fd-multi-input-input-group-custom{width:100%}\n"] }]
        }], ctorParameters: () => [{ type: undefined, decorators: [{
                    type: Inject,
                    args: [MULTI_INPUT_COMPONENT]
                }] }], propDecorators: { dialogTemplate: [{
                type: ViewChild,
                args: ['dialogTemplate']
            }] } });

/**
 * @deprecated
 * Use direct imports of components and directives.
 */
class MultiInputMobileModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiInputMobileModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: MultiInputMobileModule, imports: [MultiInputMobileComponent], exports: [MultiInputMobileComponent] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiInputMobileModule, imports: [MultiInputMobileComponent] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiInputMobileModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [MultiInputMobileComponent],
                    exports: [MultiInputMobileComponent]
                }]
        }] });

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 && 'id' in candidate;
}
function isOptionItemBase(candidate) {
    return typeof candidate === 'object' && candidate !== null && 'value' in candidate && 'label' in candidate;
}
/**
 * Input field with multiple selection enabled. Should be used when a user can select between a
 * limited number of pre-defined options with a filter-enabled context.
 *
 * Supports Angular Forms.
 */
class MultiInputComponent {
    /** Search term, or more specifically the value of the inner input field. */
    set searchTerm(value) {
        this._searchTermCtrl.setValue(value);
    }
    get searchTerm() {
        return this._searchTermCtrl.value ?? '';
    }
    /** Selected dropdown items. */
    set selected(values) {
        this._selectionModel.clear();
        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.map((c) => c.value);
    }
    /** @hidden */
    get _popoverMaxWidth() {
        if (this.bodyMaxWidth === 'none') {
            return null;
        }
        if (typeof this.bodyMaxWidth === 'number') {
            return this.bodyMaxWidth;
        }
        return this.elementRef.nativeElement.getBoundingClientRect().width;
    }
    /** @hidden */
    get _optionItems() {
        return this.optionItems$.value;
    }
    /** typeahead matcher function */
    get typeAheadMatcher() {
        if (this.includes) {
            return (item, searchTerm) => item.includes(searchTerm);
        }
        return (item, searchTerm) => item.startsWith(searchTerm);
    }
    /** @hidden */
    constructor() {
        /** Placeholder for the input field. */
        this.placeholder = '';
        /** Whether the input is disabled. */
        this.disabled = false;
        /** If it is mandatory field */
        this.required = false;
        /** Whether to use cozy visuals but compact collapsing behavior. */
        this.compactCollapse = true;
        /** Max height of the popover. Any overflowing elements will be accessible through scrolling. */
        this.maxHeight = '300px';
        /** Icon of the button on the right of the input field. */
        this.glyph = 'value-help';
        /** Glyph font family */
        this.glyphFont = FD_DEFAULT_ICON_FONT_FAMILY;
        /** Values to be displayed in the unfiltered dropdown. */
        this.dropdownValues = [];
        /** Whether to open the dropdown when the addon button is clicked. */
        this.openDropdownOnAddOnClicked = true;
        /** Id attribute for input element inside MultiInput component */
        this.inputId = '';
        /** Whether the search term should be highlighted in results. */
        this.highlight = true;
        /**
         * Filter function. Accepts an array and a string as arguments, and outputs an array.
         * An arrow function can be used to access the *this* keyword in the calling component.
         * See multi input examples for details.
         */
        this.filterFn = this._defaultFilter;
        /**
         * Value function. Accepts an object of the same type as the
         * items passed to dropdownValues as argument, and outputs any property, that should be used as value.
         * An arrow function can be used to access the *this* keyword in the calling component.
         * See multi input examples for details.
         */
        this.valueFn = this._defaultValueFn;
        /**
         * Display function. Accepts an object of the same type as the
         * items passed to dropdownValues as argument, and outputs a string.
         * An arrow function can be used to access the *this* keyword in the calling component.
         * See multi input examples for details.
         */
        this.displayFn = this._defaultDisplay;
        /**
         * Parse function. Used for submitting new tokens. Accepts a string by default.
         * An arrow function can be used to access the *this* keyword in the calling component.
         * See multi input examples for details.
         */
        this.newTokenParseFn = this._defaultParse;
        /**
         * Validate function. Used to check if new token can be added into list.
         * Works only, when `allowNewTokens` option is enabled.
         */
        this.newTokenValidateFn = this._defaultTokenValidate;
        /**
         * Preset options for the Select body width, whatever is chosen, the body has a 600px limit.
         * * `at-least` will apply a minimum width to the body equivalent to the width of the control. - Default
         * * `equal` will apply a width to the body equivalent to the width of the control.
         * * 'fit-content' will apply width needed to properly display items inside, independent of control.
         */
        this.fillControlMode = 'at-least';
        /**
         * Whether AddOn Button should be focusable
         * @default true
         */
        this.buttonFocusable = true;
        /** Whether the multi-input allows the creation of new tokens. */
        this.allowNewTokens = false;
        /** Whether the multi-input should be built on mobile mode */
        this.mobile = false;
        /** Whether the multi-input should have show all button. */
        this.showAllButton = true;
        /**
         * Max width of multi input body.
         * `none` will not limit width of the dropdown.
         * `container` will limit width of the dropdown to the width of the multi-input itself.
         * `number` will limit width of the dropdown by provided number in pixels.
         */
        this.bodyMaxWidth = 'none';
        /** Multi Input Mobile Configuration, it's applied only, when mobile is enabled */
        this.mobileConfig = { hasCloseButton: true, approveButtonText: 'Select' };
        /**
         * Whether to return results where the input matches the entire string. By default, only results that start
         * with the input search term will be returned.
         */
        this.includes = false;
        /** Whether list item options should be rendered as byline. */
        this.byline = false;
        /** Whether the autocomplete should be enabled; Enabled by default */
        this.autoComplete = true;
        /** Event emitted when the search term changes. Use *$event* to access the new term. */
        this.searchTermChange = new EventEmitter();
        /** Event emitted when the selected items change. Use *$event* to access the new selected array. */
        this.selectedChange = new EventEmitter();
        /** Whether multi input popover body should be opened */
        this.open = false;
        /** Whether to display the addon button. */
        this.displayAddonButton = true;
        /** Event emitted, when the multi input's popover body is opened or closed */
        this.openChange = new EventEmitter();
        /** Emits event when the addon button is clicked. */
        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 */
        this._onlySelected$ = new BehaviorSubject(false);
        /** @hidden */
        this._searchTermCtrl = new FormControl('');
        /** @hidden */
        this._selectionModel = new PairSelectionModel();
        /** @hidden */
        this._viewModel$ = this._getViewModel();
        /** @hidden */
        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 */
        this._subscriptions = new Subscription();
        /** @hidden */
        this._rangeSelector = new RangeSelector();
        /** @hidden */
        this._changeDetRef = inject(ChangeDetectorRef);
        /** @hidden */
        this._dynamicComponentService = inject(DynamicComponentService);
        /** @hidden */
        this._injector = inject(Injector);
        /** @hidden */
        this._viewContainerRef = inject(ViewContainerRef);
        /** @hidden */
        this._rtlService = inject(RtlService, { optional: true });
        /** @hidden */
        this._focusTrapService = inject(FocusTrapService, { optional: true });
        /** @hidden */
        this.onChange = () => { };
        /** @hidden */
        this.onTouched = () => { };
        // React to RTL changes - rebuild CSS class when direction changes
        effect(() => {
            const dir = this._dir();
            if (dir) {
                this.buildComponentCssClass();
            }
        });
    }
    /** @hidden CssClassBuilder interface implementation
     * function must return single string
     * function is responsible for order which css classes are applied
     */
    buildComponentCssClass() {
        // TODO: this icon flip may be addressed in styles in the future
        if (this.glyph === 'value-help' && this._dir() === 'rtl') {
            const icon = this.elementRef.nativeElement.querySelector('.sap-icon--value-help');
            if (icon) {
                icon.style.transform = 'scaleX(-1)';
            }
        }
        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();
        if (!this.inputId) {
            this.inputId = uuidv4();
        }
        this._subscriptions.add(this._searchTermCtrl.valueChanges.pipe(distinctUntilChanged()).subscribe((searchTerm) => {
            this.searchTermChange.emit(searchTerm ?? '');
            // resetting existing selection state, if any
            this._rangeSelector.reset();
        }));
        this._subscriptions.add(this._getViewModel()
            .pipe(map((viewModel) => !viewModel.displayedOptions.some((c) => !c.isSelected)))
            .subscribe((allItemsSelected) => this.allItemsSelectedChange.emit(allItemsSelected)));
    }
    /** @hidden */
    ngOnChanges(changes) {
        this.buildComponentCssClass();
        if (changes.dropdownValues || changes.searchTerm || changes.valueFn || changes.displayFn) {
            const optionItems = (this.dropdownValues ?? []).map((item) => this._getOptionItem(item));
            this.optionItems$.next(optionItems);
            this._changeDetRef.markForCheck();
        }
        if (changes.disabled) {
            this.disabled ? this._searchTermCtrl.disable() : this._searchTermCtrl.enable();
        }
    }
    /** @hidden */
    ngAfterViewInit() {
        if (this.mobile) {
            this._setUpMobileMode();
        }
    }
    /** @hidden */
    ngOnDestroy() {
        this._subscriptions.unsubscribe();
    }
    /** @hidden */
    registerOnChange(fn) {
        this.onChange = fn;
    }
    /** @hidden */
    registerOnTouched(fn) {
        this.onTouched = fn;
    }
    /** @hidden */
    setDisabledState(isDisabled) {
        this.disabled = isDisabled;
        if (isDisabled) {
            this.elementRef.nativeElement.style.pointerEvents = 'none';
            this.elementRef.nativeElement.tabIndex = -1; // prevent focus
        }
        else {
            this.elementRef.nativeElement.style.pointerEvents = 'auto';
            this.elementRef.nativeElement.tabIndex = 0; // allow focus
        }
        this._changeDetRef.detectChanges();
    }
    /** @hidden */
    writeValue(selected) {
        this.selected = selected;
        this._changeDetRef.markForCheck();
    }
    /** Method passed to list component */
    handleListFocusEscape(direction) {
        if (direction === 'up' && !this.mobile) {
            this.searchInputElement.nativeElement.focus();
        }
    }
    /** @hidden */
    openChangeHandle(open) {
        if (this.disabled) {
            return;
        }
        if (this.open !== open) {
            this.openChange.emit(open);
        }
        this.open = open;
        if (!this.mobile) {
            this._popoverOpenHandle(open);
        }
        if (!this.open) {
            this._resetSearchTerm();
            this.enableParentFocusTrap();
            this._onlySelected$.next(false);
        }
        else {
            this.disableParentFocusTrap();
            this.searchInputElement?.nativeElement.focus();
        }
        this.tokenizer.tokenizerInnerEl.nativeElement.scrollLeft =
            this.tokenizer.tokenizerInnerEl.nativeElement.scrollWidth;
        this._changeDetRef.detectChanges();
    }
    /** Method that selects all possible options. */
    selectAllItems(selectAll) {
        if (selectAll) {
            this.selected = this._optionItems.map((c) => c.value);
            this._resetSearchTerm();
        }
        else {
            this.selected = [];
        }
        // On Mobile mode changes are propagated only on approve.
        this._propagateChange();
    }
    /** @hidden */
    _onCheckboxKeyup(option, event, index, isListItem = false) {
        if (KeyUtil.isKeyCode(event, [SPACE, ENTER])) {
            this._onCheckboxClick(option, event, index, isListItem);
        }
    }
    /** @hidden */
    async _onCheckboxClick(option, event, index, 
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    _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], false));
            this._changeDetRef.detectChanges();
        });
        this._subscriptions.add(sub);
        // stop propagation on the checkbox so event doesn't reach the list item
        event.stopPropagation();
    }
    /** @hidden */
    _onTokenCloseClick(option, resetSearch, event) {
        event?.preventDefault(); // prevent this function from being called twice when checkbox updates
        this._handleSelect(false, option, resetSearch, true);
    }
    /** @hidden */
    _tokenElementClicked(event) {
        const textElement = event.currentTarget.querySelector('.fd-token__text');
        if (textElement && textElement.offsetWidth < textElement.scrollWidth && this.open === false) {
            this.openChangeHandle(true);
        }
    }
    /** @hidden */
    _handleSelect(checked, option, resetSearch = true, fromTokenCloseClick = false) {
        const previousLength = this._selectionModel.selected.length;
        option = this._getOptionItem(option);
        if (checked) {
            this._selectionModel.select(option.id, option);
        }
        else {
            this._selectionModel.deselect(option.id);
        }
        // Handle popover placement update
        if (this._shouldPopoverBeUpdated(previousLength, this._selectionModel.selected.length)) {
            this.popoverRef.refreshPosition();
        }
        if (resetSearch) {
            this._resetSearchTerm();
            this.searchInputElement.nativeElement.focus();
        }
        if (this._selectionModel.selected.length === 0) {
            this.searchInputElement.nativeElement.focus();
            this._changeDetRef.detectChanges();
        }
        // On Mobile mode changes are propagated only on approve.
        this._propagateChange(fromTokenCloseClick);
    }
    /** @hidden */
    _handleInputKeydown(event) {
        if (KeyUtil.isKeyCode(event, DOWN_ARROW) && !this.mobile) {
            if (event.altKey) {
                this.openChangeHandle(true);
            }
            if (this.listComponent) {
                this.listComponent.setItemActive(0);
                event.preventDefault();
            }
        }
        else if (KeyUtil.isKeyCode(event, [DOWN_ARROW, UP_ARROW, ENTER])) {
            this.openChangeHandle(true);
        }
        else if (KeyUtil.isKeyCode(event, TAB) && this.open) {
            this._close();
        }
        else if (KeyUtil.isKeyType(event, 'alphabetical') || KeyUtil.isKeyType(event, 'numeric')) {
            if (!this.open) {
                this.openChangeHandle(true);
                this.searchInputElement.nativeElement.focus();
            }
        }
    }
    /** @hidden */
    _showAllClicked(event) {
        event.preventDefault();
        event.stopPropagation();
        this._searchTermCtrl.setValue('');
        this.searchInputElement.nativeElement.focus();
    }
    /** @hidden */
    _showAllKeyDown(event) {
        if (KeyUtil.isKeyCode(event, [SPACE, ENTER])) {
            this._showAllClicked(event);
        }
    }
    /** @hidden */
    _onSubmit() {
        const searchTerm = this.searchTerm;
        if (searchTerm === '') {
            return;
        }
        const isExist = this._selectFirstFiltered(searchTerm);
        if (!isExist && this.allowNewTokens && this.newTokenValidateFn(this._searchTermCtrl.value ?? '')) {
            const newToken = this.newTokenParseFn(this._searchTermCtrl.value ?? '');
            const newOption = this._addNewTokenToDropDownValues(newToken);
            this._handleSelect(true, newOption);
            this._searchTermCtrl.setValue('');
            this.open = false;
        }
    }
    /** @hidden */
    _handleComplete({ term }) {
        this.searchTerm = term;
    }
    /**
     * Handle dialog dismissing, closes popover and sets backup data.
     */
    dialogDismiss(selectedBackup) {
        this.openChangeHandle(false);
        this._resetSearchTerm();
        this.selected = selectedBackup;
    }
    /**
     * Handle dialog approval, closes popover and propagates data changes.
     */
    dialogApprove() {
        this._propagateChange(true);
        this.openChangeHandle(false);
        this._resetSearchTerm();
    }
    /** @hidden */
    _moreClicked() {
        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);
        if (this.openDropdownOnAddOnClicked) {
            this.openChangeHandle(!this.open);
        }
        else if (this.open) {
            this.openChangeHandle(false);
        }
    }
    /** @hidden */
    disableParentFocusTrap() {
        this._focusTrapService?.pauseCurrentFocusTrap();
    }
    /** @hidden */
    enableParentFocusTrap() {
        this._focusTrapService?.unpauseCurrentFocusTrap();
    }
    /** @hidden */
    _close() {
        this.searchInputElement.nativeElement.focus();
        this.openChangeHandle(false);
    }
    /** @hidden */
    _focusOut(event) {
        if (!this.elementRef.nativeElement.contains(event.relatedTarget)) {
            this.onTouched();
            if (this._renderAllTokens()) {
                this.tokenizer._hideTokens();
                this._renderAllTokens.set(false);
            }
        }
    }
    /** @hidden */
    _addNewTokenToDropDownValues(newToken) {
        this.dropdownValues.push(newToken);
        const newOption = this._getOptionItem(newToken);
        this.optionItems$.next([...this._optionItems, newOption]);
        return 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);
            this._searchTermCtrl.setValue('');
            this.open = false;
            return true;
        }
        return false;
    }
    /** @hidden */
    _defaultFilter(contentArray, searchTerm = '') {
        const trimmedSearchTerm = searchTerm.trim().toLocaleLowerCase();
        return contentArray.filter((item) => {
            if (item) {
                const displayedValue = isOptionItem(item) ? item.label : this.displayFn(item);
                const term = displayedValue?.toLocaleLowerCase() || '';
                return this.typeAheadMatcher(term, trimmedSearchTerm);
            }
        });
    }
    /** @hidden */
    _defaultValueFn(value) {
        return value;
    }
    /** @hidden */
    _defaultDisplay(str) {
        if (typeof str === 'string') {
            return str;
        }
        if (isOptionItemBase(str)) {
            return str.label;
        }
    }
    /** @hidden */
    _defaultParse(str) {
        return str;
    }
    /** @hidden */
    _defaultTokenValidate(str) {
        return !!str;
    }
    /** @hidden */
    _popoverOpenHandle(open) {
        this.open = open;
    }
    /** @hidden */
    _propagateChange(emitInMobile) {
        if (!this.mobile || emitInMobile) {
            const selected = this._selectionModel.selected.map((c) => c.value);
            this.onChange(selected);
            this.selectedChange.emit(selected);
        }
    }
    /** @hidden */
    _shouldPopoverBeUpdated(previousLength, currentLength) {
        return (!!this.popoverRef &&
            ((previousLength === 0 && currentLength === 1) || (previousLength === 1 && currentLength === 0)));
    }
    /** @hidden */
    async _setUpMobileMode() {
        const injector = Injector.create({
            providers: [{ provide: MULTI_INPUT_COMPONENT, useValue: this }],
            parent: this._injector
        });
        this._dynamicComponentService.createDynamicComponent({
            listTemplate: this.listTemplate,
            controlTemplate: this.controlTemplate
        }, MultiInputMobileComponent, {
            containerRef: 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();
    }
    /** @hidden */
    _getOptionItem(item) {
        if (isOptionItem(item)) {
            return item;
        }
        const { label, value } = this._getValueAndLabelOfItem(item);
        return {
            id: this._getItemIdentifier(item),
            item,
            label,
            value,
            isSelected: false
        };
    }
    /** @hidden */
    _getValueAndLabelOfItem(item) {
        const defaultDisplay = typeof item === 'object' && item !== null ? item[Object.keys(item)[0]] : item;
        let value = this.valueFn(item) ?? defaultDisplay;
        let label = this.displayFn(item) ?? defaultDisplay;
        if (isOptionItemBase(item)) {
            if (this.valueFn === this._defaultValueFn) {
                value = item.value;
            }
            if (this.displayFn === this._defaultDisplay) {
                label = item.label;
            }
        }
        return { label, value };
    }
    /** @hidden */
    _getViewModel() {
        return combineLatest([
            this._searchTermCtrl.valueChanges.pipe(startWith(this._searchTermCtrl.value)),
            this._selectionModel.selectionChanged.pipe(startWith(null)),
            this._onlySelected$,
            this.optionItems$
        ]).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(this.dropdownValues, searchTerm);
            const onlySelected = this._onlySelected$.value;
            let displayedOptions = (Array.isArray(filtered) ? filtered : []).map((item) => this._getOptionItem(item));
            displayedOptions.forEach((c) => (c.isSelected = this._selectionModel.isSelected(c.id)));
            if (onlySelected) {
                displayedOptions = displayedOptions.filter((item) => item.isSelected);
            }
            return { selectedOptions: this._selectionModel.selected, displayedOptions };
        }));
    }
    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: { 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),
                multi: true
            },
            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                [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,
    __metadata("design:type", Function),
    __metadata("design:paramtypes", []),
    __metadata("design:returntype", Array)
], MultiInputComponent.prototype, "buildComponentCssClass", null);
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiInputComponent, decorators: [{
            type: Component,
            args: [{ selector: 'fd-multi-input', providers: [
                        {
                            provide: NG_VALUE_ACCESSOR,
                            useExisting: forwardRef(() => MultiInputComponent),
                            multi: true
                        },
                        MenuKeyboardService,
                        registerFormItemControl(MultiInputComponent),
                        contentDensityObserverProviders()
                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, host: {
                        '(focusout)': '_focusOut($event)'
                    }, imports: [
                        NgTemplateOutlet,
                        PopoverComponent,
                        PopoverControlComponent,
                        FormsModule,
                        PopoverBodyComponent,
                        InputGroupComponent,
                        InputGroupInputDirective,
                        TokenComponent,
                        TokenizerComponent,
                        FormControlComponent,
                        AutoCompleteDirective,
                        ReactiveFormsModule,
                        ListComponent,
                        ListItemComponent,
                        ListTitleDirective,
                        CheckboxComponent,
                        LinkComponent,
                        AsyncPipe,
                        SearchHighlightPipe,
                        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                [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: [{
                type: Input
            }], required: [{
                type: Input
            }], compactCollapse: [{
                type: Input
            }], maxHeight: [{
                type: Input
            }], glyph: [{
                type: Input
            }], glyphFont: [{
                type: Input
            }], dropdownValues: [{
                type: Input
            }], openDropdownOnAddOnClicked: [{
                type: Input
            }], addonIconTitle: [{
                type: Input
            }], searchTerm: [{
                type: Input
            }], inputId: [{
                type: Input
            }], highlight: [{
                type: Input
            }], selected: [{
                type: Input
            }], class: [{
                type: Input
            }], filterFn: [{
                type: Input
            }], valueFn: [{
                type: Input
            }], displayFn: [{
                type: Input
            }], newTokenParseFn: [{
                type: Input
            }], optionItemIdentifier: [{
                type: Input
            }], newTokenValidateFn: [{
                type: Input
            }], ariaLabel: [{
                type: Input
            }], ariaLabelledBy: [{
                type: Input
            }], fillControlMode: [{
                type: Input
            }], state: [{
                type: Input
            }], buttonFocusable: [{
                type: Input
            }], allowNewTokens: [{
                type: Input
            }], mobile: [{
                type: Input
            }], showAllButton: [{
                type: Input
            }], bodyMaxWidth: [{
                type: Input
            }], mobileConfig: [{
                type: Input
            }], includes: [{
                type: Input
            }], itemTemplate: [{
                type: Input
            }], title: [{
                type: Input
            }], byline: [{
                type: Input
            }], autoComplete: [{
                type: Input
            }], searchTermChange: [{
                type: Output
            }], selectedChange: [{
                type: Output
            }], open: [{
                type: Input
            }], displayAddonButton: [{
                type: Input
            }], addOnButtonAriaLabel: [{
                type: Input
            }], openChange: [{
                type: Output
            }], addOnButtonClicked: [{
                type: Output
            }], allItemsSelectedChange: [{
                type: Output
            }], popoverRef: [{
                type: ViewChild,
                args: [PopoverComponent]
            }], controlTemplate: [{
                type: ViewChild,
                args: ['control', { read: TemplateRef }]
            }], listTemplate: [{
                type: ViewChild,
                args: ['list', { read: TemplateRef }]
            }], listComponent: [{
                type: ViewChild,
                args: [ListComponent]
            }], searchInputElement: [{
                type: ViewChild,
                args: ['searchInputElement', { read: ElementRef }]
            }], tokenizer: [{
                type: ViewChild,
                args: [TokenizerComponent]
            }], maxVisibleTokens: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisibleTokens", required: false }] }], buildComponentCssClass: [] } });

/**
 * @deprecated
 * Use direct imports of components and directives.
 */
class MultiInputModule {
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.1.0", ngImport: i0, type: MultiInputModule, imports: [ContentDensityModule, MultiInputComponent], exports: [MultiInputComponent, ContentDensityModule] }); }
    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiInputModule, imports: [ContentDensityModule, MultiInputComponent, ContentDensityModule] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: MultiInputModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [ContentDensityModule, MultiInputComponent],
                    exports: [MultiInputComponent, ContentDensityModule]
                }]
        }] });

/**
 * Generated bundle index. Do not edit.
 */

export { MULTI_INPUT_COMPONENT, MultiInputComponent, MultiInputMobileComponent, MultiInputMobileModule, MultiInputModule };
//# sourceMappingURL=fundamental-ngx-core-multi-input.mjs.map
