@fundamental-ngx/core 0.35.2-rc.35 → 0.35.2-rc.36

package/fesm2015/fundamental-ngx-core-multi-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-multi-input.mjs","sources":["../../../../libs/core/src/lib/multi-input/multi-input.interface.ts","../../../../libs/core/src/lib/multi-input/multi-input-mobile/multi-input-mobile.component.ts","../../../../libs/core/src/lib/multi-input/multi-input-mobile/multi-input-mobile.component.html","../../../../libs/core/src/lib/multi-input/multi-input-mobile/multi-input-mobile.module.ts","../../../../libs/core/src/lib/multi-input/multi-input.component.ts","../../../../libs/core/src/lib/multi-input/multi-input.component.html","../../../../libs/core/src/lib/multi-input/deprecated-multi-input-compact.directive.ts","../../../../libs/core/src/lib/multi-input/multi-input.module.ts","../../../../libs/core/src/lib/multi-input/fundamental-ngx-core-multi-input.ts"],"sourcesContent":["import { EventEmitter, InjectionToken } from '@angular/core';\nimport { MobileMode } from '@fundamental-ngx/core/mobile-mode';\n\nexport const MULTI_INPUT_COMPONENT = new InjectionToken<string[]>('MultiInputComponent');\n\n/**\n * Multi Input Interface to have typing and avoid circular dependency between\n * MultiInputComponent <==> MultiInputMobileComponent\n */\nexport interface MultiInputInterface extends MobileMode {\n    selected: any[];\n    openChange: EventEmitter<boolean>;\n    allItemsSelectedChange: EventEmitter<boolean>;\n\n    dialogApprove(): void;\n\n    selectAllItems(selectAll: boolean): void;\n\n    dialogDismiss(selectedBackup: any[]): void;\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    Inject,\n    OnDestroy,\n    OnInit,\n    Optional,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { DialogService } from '@fundamental-ngx/core/dialog';\nimport { takeUntil } from 'rxjs/operators';\nimport { MULTI_INPUT_COMPONENT, MultiInputInterface } from '../multi-input.interface';\nimport {\n    MOBILE_MODE_CONFIG,\n    MobileModeBase,\n    MobileModeControl,\n    MobileModeConfigToken\n} from '@fundamental-ngx/core/mobile-mode';\n\n@Component({\n    selector: 'fd-multi-input-mobile',\n    templateUrl: './multi-input-mobile.component.html',\n    styleUrls: ['./multi-input-mobile.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class MultiInputMobileComponent\n    extends MobileModeBase<MultiInputInterface>\n    implements OnInit, AfterViewInit, OnDestroy\n{\n    /** @hidden */\n    allItemsSelected: boolean;\n\n    /** @hidden */\n    @ViewChild('dialogTemplate') dialogTemplate: TemplateRef<any>;\n\n    /** @hidden\n     * For internal usage\n     * Control element, which will be rendered inside dialog.\n     * List element, which will be rendered inside dialog.\n     */\n    childContent: {\n        listTemplate: TemplateRef<any>;\n        controlTemplate: TemplateRef<any>;\n    } | null = null;\n\n    /** @hidden */\n    private _selectedBackup: any[];\n\n    constructor(\n        elementRef: ElementRef,\n        dialogService: DialogService,\n        @Inject(MULTI_INPUT_COMPONENT) multiInputComponent: MultiInputInterface,\n        @Optional() @Inject(MOBILE_MODE_CONFIG) mobileModes: MobileModeConfigToken[]\n    ) {\n        super(elementRef, dialogService, multiInputComponent, MobileModeControl.MULTI_INPUT, mobileModes);\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._listenOnMultiInputOpenChange();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._open();\n        this.dialogRef.hide(true);\n    }\n\n    ngOnDestroy(): void {\n        this.dialogRef.close();\n        super.onDestroy();\n    }\n\n    /** Throw select all event, it's handled by multi input component */\n    selectAll(selectAll: boolean): void {\n        this._component.selectAllItems(!selectAll);\n    }\n\n    /** @hidden */\n    handleDismiss(): void {\n        this.dialogRef.hide(true);\n        this._component.dialogDismiss(this._selectedBackup);\n    }\n\n    /** @hidden */\n    handleApprove(): void {\n        this.dialogRef.hide(true);\n        this._component.dialogApprove();\n    }\n\n    /** @hidden */\n    private _toggleDialog(open: boolean): void {\n        if (open) {\n            this._selectedBackup = [...this._component.selected];\n            if (!this._dialogService.hasOpenDialogs()) {\n                this._open();\n            }\n        }\n        this.dialogRef.hide(!open);\n    }\n\n    /** @hidden */\n    private _listenOnMultiInputOpenChange(): void {\n        this._component.openChange.pipe(takeUntil(this._onDestroy$)).subscribe((isOpen) => this._toggleDialog(isOpen));\n        this._component.allItemsSelectedChange\n            .pipe(takeUntil(this._onDestroy$))\n            .subscribe((allItemsSelected) => (this.allItemsSelected = allItemsSelected));\n    }\n\n    /** @hidden */\n    private _open(): void {\n        this.dialogRef = this._dialogService.open(this.dialogTemplate, {\n            mobile: true,\n            verticalPadding: false,\n            ...this.dialogConfig,\n            backdropClickCloseable: false,\n            escKeyCloseable: false,\n            container: this._elementRef.nativeElement\n        });\n    }\n}\n","<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig?.title }}</h1>\n            <button\n                fd-dialog-close-button\n                [mobile]=\"true\"\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                (click)=\"handleDismiss()\"\n            ></button>\n            <ng-template fdTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element class=\"custom-multi-input-mobile-control-element\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\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\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { BarModule } from '@fundamental-ngx/core/bar';\nimport { MultiInputMobileComponent } from './multi-input-mobile.component';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { DialogModule } from '@fundamental-ngx/core/dialog';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n    declarations: [MultiInputMobileComponent],\n    imports: [BarModule, DialogModule, ButtonModule, CommonModule],\n    entryComponents: [MultiInputMobileComponent],\n    exports: [MultiInputMobileComponent]\n})\nexport class MultiInputMobileModule {}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Injector,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewContainerRef,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes';\nimport { SelectionModel } from '@angular/cdk/collections';\nimport { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';\nimport { distinctUntilChanged, first, map, startWith } from 'rxjs/operators';\n\nimport { PopoverComponent } from '@fundamental-ngx/core/popover';\nimport { MenuKeyboardService } from '@fundamental-ngx/core/menu';\nimport { FormStates, Nullable, PopoverFillMode } from '@fundamental-ngx/core/shared';\nimport { MobileModeConfig } from '@fundamental-ngx/core/mobile-mode';\nimport { TokenizerComponent } from '@fundamental-ngx/core/token';\nimport { FormItemControl, registerFormItemControl } from '@fundamental-ngx/core/form';\nimport { ListComponent } from '@fundamental-ngx/core/list';\nimport {\n    applyCssClass,\n    CssClassBuilder,\n    DynamicComponentService,\n    FocusEscapeDirection,\n    FocusTrapService,\n    KeyUtil,\n    RangeSelector,\n    RtlService,\n    uuidv4\n} from '@fundamental-ngx/core/utils';\n\nimport { MultiInputMobileComponent } from './multi-input-mobile/multi-input-mobile.component';\nimport { MultiInputMobileModule } from './multi-input-mobile/multi-input-mobile.module';\nimport { MULTI_INPUT_COMPONENT, MultiInputInterface } from './multi-input.interface';\nimport { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';\n\n/**\n * Input field with multiple selection enabled. Should be used when a user can select between a\n * limited number of pre-defined options with a filter-enabled context.\n *\n * Supports Angular Forms.\n */\n@Component({\n    selector: 'fd-multi-input',\n    templateUrl: './multi-input.component.html',\n    styleUrls: ['./multi-input.component.scss'],\n    host: {\n        '(blur)': 'onTouched()'\n    },\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => MultiInputComponent),\n            multi: true\n        },\n        MenuKeyboardService,\n        registerFormItemControl(MultiInputComponent),\n        contentDensityObserverProviders()\n    ],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MultiInputComponent\n    implements\n        MultiInputInterface,\n        ControlValueAccessor,\n        CssClassBuilder,\n        OnInit,\n        OnChanges,\n        AfterViewInit,\n        OnDestroy,\n        FormItemControl\n{\n    /** Placeholder for the input field. */\n    @Input()\n    placeholder = '';\n\n    /** Whether the input is disabled. */\n    @Input()\n    disabled = false;\n\n    /** If it is mandatory field */\n    @Input()\n    required = false;\n\n    /** Whether to use cozy visuals but compact collapsing behavior. */\n    @Input()\n    compactCollapse = false;\n\n    /** Max height of the popover. Any overflowing elements will be accessible through scrolling. */\n    @Input()\n    maxHeight = '300px';\n\n    /** Icon of the button on the right of the input field. */\n    @Input()\n    glyph = 'value-help';\n\n    /** Values to be displayed in the unfiltered dropdown. */\n    @Input()\n    dropdownValues: any[] = [];\n\n    /** Search term, or more specifically the value of the inner input field. */\n    @Input()\n    get searchTerm(): string {\n        return this._searchTermCtrl.value;\n    }\n    set searchTerm(value: string) {\n        this._searchTermCtrl.setValue(value);\n    }\n\n    /** Id attribute for input element inside MultiInput component */\n    @Input()\n    inputId = '';\n\n    /** Whether the search term should be highlighted in results. */\n    @Input()\n    highlight = true;\n\n    /** Selected dropdown items. */\n    @Input()\n    get selected(): any[] {\n        return this._selectionModel.selected;\n    }\n    set selected(values: any[]) {\n        this._selectionModel.clear();\n        values?.forEach((item) => this._selectionModel.select(item));\n    }\n\n    /** user's custom classes */\n    @Input()\n    class: string;\n\n    /**\n     * Filter function. Accepts an array and a string as arguments, and outputs an array.\n     * An arrow function can be used to access the *this* keyword in the calling component.\n     * See multi input examples for details.\n     */\n    @Input()\n    filterFn = this._defaultFilter;\n\n    /**\n     * Value function. Accepts an object of the same type as the\n     * items passed to dropdownValues as argument, and outputs any property, that should be used as value.\n     * An arrow function can be used to access the *this* keyword in the calling component.\n     * See multi input examples for details.\n     */\n    @Input()\n    valueFn = this._defaultValueFn;\n\n    /**\n     * Display function. Accepts an object of the same type as the\n     * items passed to dropdownValues as argument, and outputs a string.\n     * An arrow function can be used to access the *this* keyword in the calling component.\n     * See multi input examples for details.\n     */\n    @Input()\n    displayFn = this._defaultDisplay;\n\n    /**\n     * Parse function. Used for submitting new tokens. Accepts a string by default.\n     * An arrow function can be used to access the *this* keyword in the calling component.\n     * See multi input examples for details.\n     */\n    @Input()\n    newTokenParseFn: (searchTerm: string) => any = this._defaultParse;\n\n    /**\n     * Validate function. Used to check if new token can be added into list.\n     * Works only, when `allowNewTokens` option is enabled.\n     */\n    @Input()\n    newTokenValidateFn = this._defaultTokenValidate;\n\n    /** aria-label attribute binding. */\n    @Input()\n    ariaLabel: Nullable<string>;\n\n    /** aria-labelledby attribute binding. */\n    @Input()\n    ariaLabelledBy: Nullable<string>;\n\n    /**\n     * Preset options for the Select body width, whatever is chosen, the body has a 600px limit.\n     * * `at-least` will apply a minimum width to the body equivalent to the width of the control. - Default\n     * * `equal` will apply a width to the body equivalent to the width of the control.\n     * * 'fit-content' will apply width needed to properly display items inside, independent of control.\n     */\n    @Input()\n    fillControlMode: PopoverFillMode = 'at-least';\n\n    /**\n     *  The state of the form control - applies css classes.\n     *  Can be `success`, `error`, `warning`, `information` or blank for default.\n     */\n    @Input()\n    state?: FormStates;\n\n    /**\n     * Whether AddOn Button should be focusable\n     * @default true\n     */\n    @Input()\n    buttonFocusable = true;\n\n    /** Whether the multi-input allows the creation of new tokens. */\n    @Input()\n    allowNewTokens = false;\n\n    /** Whether the multi-input should be built on mobile mode */\n    @Input()\n    mobile = false;\n\n    /** Whether the multi-input should have show all button. */\n    @Input()\n    showAllButton = true;\n\n    /** Max width of multi input body in PX */\n    @Input()\n    bodyMaxWidth: Nullable<number>;\n\n    /** Multi Input Mobile Configuration, it's applied only, when mobile is enabled */\n    @Input()\n    mobileConfig: MobileModeConfig = { hasCloseButton: true, approveButtonText: 'Select' };\n\n    /**\n     * Whether or not to return results where the input matches the entire string. By default, only results that start\n     * with the input search term will be returned.\n     */\n    @Input()\n    includes = false;\n\n    /**\n     * The template with which to display the individual listed items.\n     * Use it by passing an ng-template with implicit content. See examples for more info.\n     */\n    @Input()\n    itemTemplate: TemplateRef<any>;\n\n    /**\n     * The tooltip for the multi-input icon.\n     */\n    @Input()\n    title: string;\n\n    /** Whether the autocomplete should be enabled; Enabled by default */\n    @Input()\n    autoComplete = true;\n\n    /** Event emitted when the search term changes. Use *$event* to access the new term. */\n    @Output()\n    readonly searchTermChange: EventEmitter<string> = new EventEmitter<string>();\n\n    /** Event emitted when the selected items change. Use *$event* to access the new selected array. */\n    @Output()\n    readonly selectedChange: EventEmitter<any[]> = new EventEmitter<any[]>();\n\n    /** Whether multi input popover body should be opened */\n    @Input()\n    open = false;\n\n    /** Whether or not to display the addon button. */\n    @Input()\n    displayAddonButton = true;\n\n    /** Event emitted, when the multi input's popover body is opened or closed */\n    @Output()\n    readonly openChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    /** Event emitted, when the multi input's all item checked or not */\n    @Output()\n    readonly allItemsSelectedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    /** @hidden */\n    @ViewChild(PopoverComponent)\n    popoverRef: PopoverComponent;\n\n    /** @hidden */\n    @ViewChild('control', { read: TemplateRef })\n    controlTemplate: TemplateRef<any>;\n\n    /** @hidden */\n    @ViewChild('list', { read: TemplateRef })\n    listTemplate: TemplateRef<any>;\n\n    /** @hidden */\n    @ViewChild(ListComponent)\n    listComponent: ListComponent;\n\n    /** @hidden */\n    @ViewChild('searchInputElement', { read: ElementRef })\n    searchInputElement: ElementRef<HTMLInputElement>;\n\n    /** @hidden */\n    @ViewChild(TokenizerComponent)\n    tokenizer: TokenizerComponent;\n\n    /** @hidden */\n    readonly optionItems$ = new BehaviorSubject<OptionItem[]>([]);\n\n    /** @hidden */\n    readonly _searchTermCtrl = new FormControl('');\n\n    /** @hidden */\n    readonly _selectionModel = new SelectionModel<any>(true);\n\n    /** @hidden */\n    readonly _viewModel$: Observable<ViewModel> = this._getViewModel();\n\n    /** @hidden */\n    _dir: string;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    private readonly _rangeSelector = new RangeSelector();\n\n    /** @hidden */\n    onChange: (value: any) => void = () => {};\n\n    /** @hidden */\n    onTouched = (): void => {};\n\n    /** @hidden */\n    constructor(\n        readonly _contentDensityObserver: ContentDensityObserver,\n        private readonly _elementRef: ElementRef,\n        private readonly _changeDetRef: ChangeDetectorRef,\n        private readonly _dynamicComponentService: DynamicComponentService,\n        private readonly _injector: Injector,\n        private readonly _viewContainerRef: ViewContainerRef,\n        @Optional() private readonly _rtlService: RtlService,\n        @Optional() private readonly _focusTrapService: FocusTrapService\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n\n        this._subscriptions.add(\n            this._rtlService?.rtl.subscribe((isRtl) => {\n                this._dir = isRtl ? 'rtl' : 'ltr';\n                this.buildComponentCssClass();\n            })\n        );\n\n        if (!this.inputId) {\n            this.inputId = uuidv4();\n        }\n\n        this._subscriptions.add(\n            this._searchTermCtrl.valueChanges.pipe(distinctUntilChanged()).subscribe((searchTerm) => {\n                this.searchTermChange.emit(searchTerm);\n                // resetting existing selection state, if any\n                this._rangeSelector.reset();\n            })\n        );\n        this._subscriptions.add(\n            this._getViewModel()\n                .pipe(map((viewModel) => !viewModel.displayedOptions.some((c) => !c.isSelected)))\n                .subscribe((allItemsSelected) => this.allItemsSelectedChange.emit(allItemsSelected))\n        );\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        this.buildComponentCssClass();\n\n        if (changes.dropdownValues || changes.searchTerm || changes.valueFn || changes.displayFn) {\n            const optionItems = (this.dropdownValues ?? []).map((item) => this._getOptionItem(item));\n            this.optionItems$.next(optionItems);\n            this._changeDetRef.markForCheck();\n        }\n\n        if (changes.disabled) {\n            this.disabled ? this._searchTermCtrl.disable() : this._searchTermCtrl.enable();\n        }\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        if (this.mobile) {\n            this._setUpMobileMode();\n        }\n        this.tokenizer._showOverflowPopover = false;\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        // TODO: this icon flip may be addressed in styles in the future\n        if (this.glyph === 'value-help' && this._dir === 'rtl') {\n            const icon = this.elementRef().nativeElement.querySelector('.sap-icon--value-help');\n            if (icon) {\n                icon.style.transform = 'scaleX(-1)';\n            }\n        }\n\n        return ['fd-multi-input', 'fd-multi-input-custom', this.class];\n    }\n\n    /** @hidden */\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n\n    /** @hidden */\n    registerOnChange(fn: (selected: any[]) => void): void {\n        this.onChange = fn;\n    }\n\n    /** @hidden */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /** @hidden */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n        if (isDisabled) {\n            this._elementRef.nativeElement.style.pointerEvents = 'none';\n        } else {\n            this._elementRef.nativeElement.style.pointerEvents = 'auto';\n        }\n\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    writeValue(selected: any[]): void {\n        this.selected = selected;\n\n        this._changeDetRef.markForCheck();\n    }\n\n    /** Method passed to list component */\n    handleListFocusEscape(direction: FocusEscapeDirection): void {\n        if (direction === 'up') {\n            this.searchInputElement.nativeElement.focus();\n        }\n    }\n\n    /** @hidden */\n    openChangeHandle(open: boolean): void {\n        if (this.disabled) {\n            return;\n        }\n\n        if (!open && this.open && !this.mobile) {\n            this.searchInputElement.nativeElement.focus();\n        }\n\n        if (this.open !== open) {\n            this.openChange.emit(open);\n        }\n\n        this.open = open;\n\n        if (!this.mobile) {\n            this._popoverOpenHandle(open);\n        }\n\n        if (!this.open) {\n            this._resetSearchTerm();\n            this.enableParentFocusTrap();\n        } else {\n            this.disableParentFocusTrap();\n        }\n\n        this.tokenizer.removeSelectedTokens();\n\n        this._changeDetRef.detectChanges();\n    }\n\n    /** Method that selects all possible options. */\n    selectAllItems(selectAll: boolean): void {\n        if (selectAll) {\n            this.selected = this.optionItems$.getValue().map((c) => c.value);\n        } else {\n            this.selected = [];\n        }\n        // On Mobile mode changes are propagated only on approve.\n        this._propagateChange();\n    }\n\n    /** @hidden */\n    _onCheckboxKeyup(value: any, event: KeyboardEvent, index: number): void {\n        if (KeyUtil.isKeyCode(event, [SPACE, ENTER])) {\n            this._onCheckboxClick(value, event, index);\n        }\n    }\n\n    /** @hidden */\n    async _onCheckboxClick(\n        value: any,\n        event: MouseEvent | KeyboardEvent,\n        index: number,\n        isListItem = false\n    ): Promise<void> {\n        const toggledSelection = !this._selectionModel.isSelected(value);\n        this._rangeSelector.onRangeElementToggled(index, event);\n        const sub = this._viewModel$.pipe(first()).subscribe((vm) => {\n            this._rangeSelector.applyValueToEachInRange((idx) =>\n                this._handleSelect(toggledSelection, vm.displayedOptions[idx].value, false)\n            );\n        });\n        this._subscriptions.add(sub);\n        if (isListItem) {\n            this.openChangeHandle(false);\n        } else {\n            // stop propagation on the checkbox so event doesn't reach the list item\n            event.stopPropagation();\n        }\n    }\n\n    /** @hidden */\n    _onTokenClick(value: any, resetSearch: boolean, event?: MouseEvent): void {\n        event?.preventDefault(); // prevent this function from being called twice when checkbox updates\n        this._handleSelect(false, value, resetSearch);\n    }\n\n    /** @hidden */\n    _handleSelect(checked: any, value: any, resetSearch = true): void {\n        const previousLength = this._selectionModel.selected.length;\n        if (checked) {\n            this._selectionModel.select(value);\n        } else {\n            this._selectionModel.deselect(value);\n        }\n\n        // Handle popover placement update\n        if (this._shouldPopoverBeUpdated(previousLength, this._selectionModel.selected.length)) {\n            this.popoverRef.refreshPosition();\n        }\n        if (resetSearch) {\n            this._resetSearchTerm();\n            this.searchInputElement.nativeElement.focus();\n        }\n\n        // On Mobile mode changes are propagated only on approve.\n        this._propagateChange();\n    }\n\n    _handleInputKeydown(event: KeyboardEvent): void {\n        if (KeyUtil.isKeyCode(event, DOWN_ARROW) && !this.mobile) {\n            if (event.altKey) {\n                this.openChangeHandle(true);\n            }\n\n            if (this.listComponent) {\n                this.listComponent.setItemActive(0);\n                event.preventDefault();\n            }\n        } else if (KeyUtil.isKeyCode(event, [DOWN_ARROW, UP_ARROW, ENTER])) {\n            this.openChangeHandle(true);\n        } else if (KeyUtil.isKeyCode(event, ESCAPE)) {\n            this.openChangeHandle(false);\n        } else if (KeyUtil.isKeyCode(event, TAB) && this.open) {\n            if (this.listComponent) {\n                this.listComponent.setItemActive(0);\n                event.preventDefault();\n            }\n        } else if (KeyUtil.isKeyType(event, 'alphabetical') || KeyUtil.isKeyType(event, 'numeric')) {\n            if (!this.open) {\n                this.openChangeHandle(true);\n            }\n        }\n    }\n\n    /** @hidden */\n    _showAllClicked(event: Event): void {\n        event.preventDefault();\n        event.stopPropagation();\n        this._searchTermCtrl.setValue('');\n        this.searchInputElement.nativeElement.focus();\n    }\n\n    /** @hidden */\n    _showAllKeyDown(event: KeyboardEvent): void {\n        if (KeyUtil.isKeyCode(event, [SPACE, ENTER])) {\n            this._showAllClicked(event);\n        }\n    }\n\n    /** @hidden */\n    _onSubmit(): void {\n        const searchTerm = this.searchTerm;\n        if (searchTerm === '') {\n            return;\n        }\n        const isExist = this._selectFirstFiltered(searchTerm);\n        if (!isExist && this.allowNewTokens && this.newTokenValidateFn(this._searchTermCtrl.value)) {\n            const newToken = this.newTokenParseFn(this._searchTermCtrl.value);\n            this._addNewTokenToDropDownValues(newToken);\n            this._handleSelect(true, newToken);\n            this._searchTermCtrl.setValue('');\n            this.open = false;\n        }\n    }\n\n    /** @hidden */\n    _handleComplete({ term }): void {\n        this.searchTerm = term;\n    }\n\n    /**\n     * Handle dialog dismissing, closes popover and sets backup data.\n     */\n    dialogDismiss(selectedBackup: any[]): void {\n        this.openChangeHandle(false);\n        this._resetSearchTerm();\n        this.selected = selectedBackup;\n    }\n\n    /**\n     * Handle dialog approval, closes popover and propagates data changes.\n     */\n    dialogApprove(): void {\n        this._propagateChange(true);\n        this.openChangeHandle(false);\n        this._resetSearchTerm();\n    }\n\n    /** @hidden */\n    _moreClicked(): void {\n        this.openChangeHandle(true);\n    }\n\n    /** @hidden */\n    _addOnButtonClicked(): void {\n        this.openChangeHandle(!this.open);\n    }\n\n    /** @hidden */\n    disableParentFocusTrap(): void {\n        this._focusTrapService?.pauseCurrentFocusTrap();\n    }\n\n    /** @hidden */\n    enableParentFocusTrap(): void {\n        this._focusTrapService?.unpauseCurrentFocusTrap();\n    }\n\n    /** @hidden */\n    private _addNewTokenToDropDownValues(newToken): void {\n        this.dropdownValues.push(newToken);\n        const newOption = this._getOptionItem(newToken);\n        this.optionItems$.next([...this.optionItems$.value, newOption]);\n    }\n\n    /** @hidden */\n    private _selectFirstFiltered(searchTerm: string): boolean {\n        const filtered = this.filterFn(this.dropdownValues, searchTerm);\n        if (Array.isArray(filtered) && filtered.length > 0 && this.autoComplete) {\n            const optionItem = this._getOptionItem(filtered[0]);\n            this._handleSelect(true, optionItem.value);\n            this._searchTermCtrl.setValue('');\n            this.open = false;\n            return true;\n        }\n        return false;\n    }\n\n    /** @hidden */\n    private _defaultFilter(contentArray: any[], searchTerm: string = ''): any[] {\n        const searchLower = searchTerm.toLocaleLowerCase();\n        return contentArray.filter((item) => {\n            if (item) {\n                const displayedValue = this.displayFn(item);\n                const term = typeof displayedValue === 'string' ? displayedValue.toLocaleLowerCase() : '';\n\n                return this.includes ? term.includes(searchLower) : term.startsWith(searchLower);\n            }\n        });\n    }\n\n    /** @hidden */\n    private _defaultValueFn(value: any): any {\n        return value;\n    }\n\n    /** @hidden */\n    private _defaultDisplay(str: any): string {\n        return str;\n    }\n\n    /** @hidden */\n    private _defaultParse(str: any): string {\n        return str;\n    }\n\n    /** @hidden */\n    private _defaultTokenValidate(str: string): boolean {\n        return !!str;\n    }\n\n    /** @hidden */\n    private _popoverOpenHandle(open: boolean): void {\n        this.open = open;\n        this.onTouched();\n    }\n\n    /** @hidden */\n    private _propagateChange(emitInMobile?: boolean): void {\n        if (!this.mobile || emitInMobile) {\n            const selected = [...this._selectionModel.selected];\n            this.onChange(selected);\n            this.selectedChange.emit(selected);\n        }\n    }\n\n    /** @hidden */\n    private _shouldPopoverBeUpdated(previousLength: number, currentLength: number): boolean {\n        return (\n            !!this.popoverRef &&\n            ((previousLength === 0 && currentLength === 1) || (previousLength === 1 && currentLength === 0))\n        );\n    }\n\n    /** @hidden */\n    private async _setUpMobileMode(): Promise<void> {\n        const injector = Injector.create({\n            providers: [{ provide: MULTI_INPUT_COMPONENT, useValue: this }],\n            parent: this._injector\n        });\n\n        await this._dynamicComponentService.createDynamicModule(\n            {\n                listTemplate: this.listTemplate,\n                controlTemplate: this.controlTemplate\n            },\n            MultiInputMobileModule,\n            MultiInputMobileComponent,\n            this._viewContainerRef,\n            injector\n        );\n    }\n\n    /** @hidden */\n    private _resetSearchTerm(): void {\n        this._searchTermCtrl.setValue('');\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    private _getOptionItem(item: any): OptionItem {\n        const { label, value } = this._getValueAndLabel(item);\n        return {\n            item,\n            label,\n            value,\n            isSelected: false\n        };\n    }\n\n    /** @hidden */\n    private _getValueAndLabel(itemOrValue: any, optionItems: OptionItem[] = []): OptionItemBase {\n        if (optionItems.length > 0) {\n            itemOrValue = optionItems.find((c) => c.value === itemOrValue)?.item ?? itemOrValue;\n        }\n        const defaultDisplay = typeof itemOrValue === 'object' ? itemOrValue[Object.keys(itemOrValue)[0]] : itemOrValue;\n        const value = this.valueFn(itemOrValue) ?? defaultDisplay;\n        const label = this.displayFn(itemOrValue) ?? defaultDisplay;\n        return { label, value };\n    }\n\n    /** @hidden */\n    private _getViewModel(): Observable<ViewModel> {\n        return combineLatest([\n            this._searchTermCtrl.valueChanges.pipe(startWith(this._searchTermCtrl.value)),\n            this._selectionModel.changed.pipe(startWith(null)),\n            this.optionItems$\n        ]).pipe(\n            map(([, , optionItems]) => {\n                const selected = this.selected.map((c) => this._getValueAndLabel(c, optionItems));\n                // not using \"searchTerm\" value from combineLatest as it will be wrong for late subscribers, if any\n                const searchTerm = this._searchTermCtrl.value;\n                const filtered = this.filterFn(\n                    optionItems.map((c) => c.item),\n                    searchTerm\n                );\n                const displayedOptions = (Array.isArray(filtered) ? filtered : []).map((item) =>\n                    this._getOptionItem(item)\n                );\n                displayedOptions.forEach((c) => (c.isSelected = selected.findIndex((d) => d.value === c.value) > -1));\n                return { selectedOptions: selected, displayedOptions };\n            })\n        );\n    }\n}\n\ninterface OptionItem<T = any> extends OptionItemBase {\n    item: T;\n    isSelected: boolean;\n}\ninterface OptionItemBase {\n    label: string;\n    value: any;\n}\n\ninterface ViewModel {\n    selectedOptions: OptionItemBase[];\n    displayedOptions: OptionItem[];\n}\n","<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 [ngTemplateOutlet]=\"control\" *ngIf=\"mobile\"></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]=\"bodyMaxWidth\"\n                [focusTrapped]=\"true\"\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 *ngTemplateOutlet=\"control\"></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>\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"displayAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked()\"\n        >\n            <fd-tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                [class.fd-multi-input-tokenizer-custom--compact]=\"_contentDensityObserver.isCompact$ | async\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: valueFn\"\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                    fd-auto-complete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [inputText]=\"_searchTermCtrl.value\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [attr.aria-label]=\"ariaLabel\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\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.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: valueFn\"\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","import { Directive, forwardRef } from '@angular/core';\nimport { CONTENT_DENSITY_DIRECTIVE, DeprecatedCompactDirective } from '@fundamental-ngx/core/content-density';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'fd-multi-input[compact]',\n    providers: [\n        {\n            provide: CONTENT_DENSITY_DIRECTIVE,\n            useExisting: forwardRef(() => DeprecatedMultiInputCompactDirective)\n        }\n    ]\n})\nexport class DeprecatedMultiInputCompactDirective extends DeprecatedCompactDirective {\n    constructor() {\n        super('fd-multi-input');\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MultiInputComponent } from './multi-input.component';\nimport { TokenModule } from '@fundamental-ngx/core/token';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { PopoverModule } from '@fundamental-ngx/core/popover';\nimport { PipeModule } from '@fundamental-ngx/core/utils';\nimport { InputGroupModule } from '@fundamental-ngx/core/input-group';\nimport { FormModule } from '@fundamental-ngx/core/form';\nimport { CheckboxModule } from '@fundamental-ngx/core/checkbox';\nimport { ListModule } from '@fundamental-ngx/core/list';\nimport { LinkModule } from '@fundamental-ngx/core/link';\nimport { AutoCompleteModule } from '@fundamental-ngx/core/utils';\nimport { DeprecatedMultiInputCompactDirective } from './deprecated-multi-input-compact.directive';\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\n\n@NgModule({\n    declarations: [MultiInputComponent, DeprecatedMultiInputCompactDirective],\n    imports: [\n        CommonModule,\n        TokenModule,\n        FormsModule,\n        ReactiveFormsModule,\n        ListModule,\n        PopoverModule,\n        PipeModule,\n        InputGroupModule,\n        FormModule,\n        CheckboxModule,\n        LinkModule,\n        AutoCompleteModule,\n        ContentDensityModule\n    ],\n    exports: [MultiInputComponent, DeprecatedMultiInputCompactDirective, ContentDensityModule]\n})\nexport class MultiInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"fundamental-ngx-core-multi-input.mjs","sources":["../../../../libs/core/src/lib/multi-input/multi-input.interface.ts","../../../../libs/core/src/lib/multi-input/multi-input-mobile/multi-input-mobile.component.ts","../../../../libs/core/src/lib/multi-input/multi-input-mobile/multi-input-mobile.component.html","../../../../libs/core/src/lib/multi-input/multi-input-mobile/multi-input-mobile.module.ts","../../../../libs/core/src/lib/multi-input/multi-input.component.ts","../../../../libs/core/src/lib/multi-input/multi-input.component.html","../../../../libs/core/src/lib/multi-input/deprecated-multi-input-compact.directive.ts","../../../../libs/core/src/lib/multi-input/multi-input.module.ts","../../../../libs/core/src/lib/multi-input/fundamental-ngx-core-multi-input.ts"],"sourcesContent":["import { EventEmitter, InjectionToken } from '@angular/core';\nimport { MobileMode } from '@fundamental-ngx/core/mobile-mode';\n\nexport const MULTI_INPUT_COMPONENT = new InjectionToken<string[]>('MultiInputComponent');\n\n/**\n * Multi Input Interface to have typing and avoid circular dependency between\n * MultiInputComponent <==> MultiInputMobileComponent\n */\nexport interface MultiInputInterface extends MobileMode {\n    selected: any[];\n    openChange: EventEmitter<boolean>;\n    allItemsSelectedChange: EventEmitter<boolean>;\n\n    dialogApprove(): void;\n\n    selectAllItems(selectAll: boolean): void;\n\n    dialogDismiss(selectedBackup: any[]): void;\n}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    Inject,\n    OnDestroy,\n    OnInit,\n    Optional,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation\n} from '@angular/core';\nimport { DialogService } from '@fundamental-ngx/core/dialog';\nimport { takeUntil } from 'rxjs/operators';\nimport { MULTI_INPUT_COMPONENT, MultiInputInterface } from '../multi-input.interface';\nimport {\n    MOBILE_MODE_CONFIG,\n    MobileModeBase,\n    MobileModeControl,\n    MobileModeConfigToken\n} from '@fundamental-ngx/core/mobile-mode';\n\n@Component({\n    selector: 'fd-multi-input-mobile',\n    templateUrl: './multi-input-mobile.component.html',\n    styleUrls: ['./multi-input-mobile.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None\n})\nexport class MultiInputMobileComponent\n    extends MobileModeBase<MultiInputInterface>\n    implements OnInit, AfterViewInit, OnDestroy\n{\n    /** @hidden */\n    allItemsSelected: boolean;\n\n    /** @hidden */\n    @ViewChild('dialogTemplate') dialogTemplate: TemplateRef<any>;\n\n    /** @hidden\n     * For internal usage\n     * Control element, which will be rendered inside dialog.\n     * List element, which will be rendered inside dialog.\n     */\n    childContent: {\n        listTemplate: TemplateRef<any>;\n        controlTemplate: TemplateRef<any>;\n    } | null = null;\n\n    /** @hidden */\n    private _selectedBackup: any[];\n\n    constructor(\n        elementRef: ElementRef,\n        dialogService: DialogService,\n        @Inject(MULTI_INPUT_COMPONENT) multiInputComponent: MultiInputInterface,\n        @Optional() @Inject(MOBILE_MODE_CONFIG) mobileModes: MobileModeConfigToken[]\n    ) {\n        super(elementRef, dialogService, multiInputComponent, MobileModeControl.MULTI_INPUT, mobileModes);\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        this._listenOnMultiInputOpenChange();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._open();\n        this.dialogRef.hide(true);\n    }\n\n    ngOnDestroy(): void {\n        this.dialogRef.close();\n        super.onDestroy();\n    }\n\n    /** Throw select all event, it's handled by multi input component */\n    selectAll(selectAll: boolean): void {\n        this._component.selectAllItems(!selectAll);\n    }\n\n    /** @hidden */\n    handleDismiss(): void {\n        this.dialogRef.hide(true);\n        this._component.dialogDismiss(this._selectedBackup);\n    }\n\n    /** @hidden */\n    handleApprove(): void {\n        this.dialogRef.hide(true);\n        this._component.dialogApprove();\n    }\n\n    /** @hidden */\n    private _toggleDialog(open: boolean): void {\n        if (open) {\n            this._selectedBackup = [...this._component.selected];\n            if (!this._dialogService.hasOpenDialogs()) {\n                this._open();\n            }\n        }\n        this.dialogRef.hide(!open);\n    }\n\n    /** @hidden */\n    private _listenOnMultiInputOpenChange(): void {\n        this._component.openChange.pipe(takeUntil(this._onDestroy$)).subscribe((isOpen) => this._toggleDialog(isOpen));\n        this._component.allItemsSelectedChange\n            .pipe(takeUntil(this._onDestroy$))\n            .subscribe((allItemsSelected) => (this.allItemsSelected = allItemsSelected));\n    }\n\n    /** @hidden */\n    private _open(): void {\n        this.dialogRef = this._dialogService.open(this.dialogTemplate, {\n            mobile: true,\n            verticalPadding: false,\n            ...this.dialogConfig,\n            backdropClickCloseable: false,\n            escKeyCloseable: false,\n            container: this._elementRef.nativeElement\n        });\n    }\n}\n","<ng-template let-dialog let-dialogConfig=\"dialogConfig\" #dialogTemplate>\n    <fd-dialog [dialogConfig]=\"dialogConfig\" [dialogRef]=\"dialog\">\n        <fd-dialog-header>\n            <h1 fd-title *ngIf=\"mobileConfig?.title\">{{ mobileConfig?.title }}</h1>\n            <button\n                fd-dialog-close-button\n                [mobile]=\"true\"\n                *ngIf=\"mobileConfig?.hasCloseButton\"\n                (click)=\"handleDismiss()\"\n            ></button>\n            <ng-template fdTemplate=\"subheader\">\n                <div fd-bar-middle>\n                    <fd-bar-element class=\"custom-multi-input-mobile-control-element\">\n                        <ng-container *ngTemplateOutlet=\"childContent?.controlTemplate || null\"></ng-container>\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\n        <fd-dialog-body>\n            <ng-container *ngTemplateOutlet=\"childContent?.listTemplate || null\"></ng-container>\n        </fd-dialog-body>\n\n        <fd-dialog-footer>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.approveButtonText\"\n                fdType=\"emphasized\"\n                [label]=\"mobileConfig.approveButtonText!\"\n                (click)=\"handleApprove()\"\n            >\n            </fd-button-bar>\n            <fd-button-bar\n                *ngIf=\"mobileConfig?.cancelButtonText\"\n                [label]=\"mobileConfig.cancelButtonText!\"\n                (click)=\"handleDismiss()\"\n            >\n            </fd-button-bar>\n        </fd-dialog-footer>\n    </fd-dialog>\n</ng-template>\n","import { NgModule } from '@angular/core';\nimport { BarModule } from '@fundamental-ngx/core/bar';\nimport { MultiInputMobileComponent } from './multi-input-mobile.component';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { DialogModule } from '@fundamental-ngx/core/dialog';\nimport { CommonModule } from '@angular/common';\n\n@NgModule({\n    declarations: [MultiInputMobileComponent],\n    imports: [BarModule, DialogModule, ButtonModule, CommonModule],\n    entryComponents: [MultiInputMobileComponent],\n    exports: [MultiInputMobileComponent]\n})\nexport class MultiInputMobileModule {}\n","import {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Injector,\n    Input,\n    OnChanges,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    SimpleChanges,\n    TemplateRef,\n    ViewChild,\n    ViewContainerRef,\n    ViewEncapsulation\n} from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR } from '@angular/forms';\nimport { DOWN_ARROW, ENTER, ESCAPE, SPACE, TAB, UP_ARROW } from '@angular/cdk/keycodes';\nimport { SelectionModel } from '@angular/cdk/collections';\nimport { BehaviorSubject, combineLatest, Observable, Subscription } from 'rxjs';\nimport { distinctUntilChanged, first, map, startWith } from 'rxjs/operators';\n\nimport { PopoverComponent } from '@fundamental-ngx/core/popover';\nimport { MenuKeyboardService } from '@fundamental-ngx/core/menu';\nimport { FormStates, Nullable, PopoverFillMode } from '@fundamental-ngx/core/shared';\nimport { MobileModeConfig } from '@fundamental-ngx/core/mobile-mode';\nimport { TokenizerComponent } from '@fundamental-ngx/core/token';\nimport { FormItemControl, registerFormItemControl } from '@fundamental-ngx/core/form';\nimport { ListComponent } from '@fundamental-ngx/core/list';\nimport {\n    applyCssClass,\n    CssClassBuilder,\n    DynamicComponentService,\n    FocusEscapeDirection,\n    FocusTrapService,\n    KeyUtil,\n    RangeSelector,\n    RtlService,\n    uuidv4\n} from '@fundamental-ngx/core/utils';\n\nimport { MultiInputMobileComponent } from './multi-input-mobile/multi-input-mobile.component';\nimport { MultiInputMobileModule } from './multi-input-mobile/multi-input-mobile.module';\nimport { MULTI_INPUT_COMPONENT, MultiInputInterface } from './multi-input.interface';\nimport { ContentDensityObserver, contentDensityObserverProviders } from '@fundamental-ngx/core/content-density';\n\n/**\n * Input field with multiple selection enabled. Should be used when a user can select between a\n * limited number of pre-defined options with a filter-enabled context.\n *\n * Supports Angular Forms.\n */\n@Component({\n    selector: 'fd-multi-input',\n    templateUrl: './multi-input.component.html',\n    styleUrls: ['./multi-input.component.scss'],\n    host: {\n        '(blur)': 'onTouched()'\n    },\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => MultiInputComponent),\n            multi: true\n        },\n        MenuKeyboardService,\n        registerFormItemControl(MultiInputComponent),\n        contentDensityObserverProviders()\n    ],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class MultiInputComponent\n    implements\n        MultiInputInterface,\n        ControlValueAccessor,\n        CssClassBuilder,\n        OnInit,\n        OnChanges,\n        AfterViewInit,\n        OnDestroy,\n        FormItemControl\n{\n    /** Placeholder for the input field. */\n    @Input()\n    placeholder = '';\n\n    /** Whether the input is disabled. */\n    @Input()\n    disabled = false;\n\n    /** If it is mandatory field */\n    @Input()\n    required = false;\n\n    /** Whether to use cozy visuals but compact collapsing behavior. */\n    @Input()\n    compactCollapse = false;\n\n    /** Max height of the popover. Any overflowing elements will be accessible through scrolling. */\n    @Input()\n    maxHeight = '300px';\n\n    /** Icon of the button on the right of the input field. */\n    @Input()\n    glyph = 'value-help';\n\n    /** Values to be displayed in the unfiltered dropdown. */\n    @Input()\n    dropdownValues: any[] = [];\n\n    /** Search term, or more specifically the value of the inner input field. */\n    @Input()\n    get searchTerm(): string {\n        return this._searchTermCtrl.value;\n    }\n    set searchTerm(value: string) {\n        this._searchTermCtrl.setValue(value);\n    }\n\n    /** Id attribute for input element inside MultiInput component */\n    @Input()\n    inputId = '';\n\n    /** Whether the search term should be highlighted in results. */\n    @Input()\n    highlight = true;\n\n    /** Selected dropdown items. */\n    @Input()\n    get selected(): any[] {\n        return this._selectionModel.selected;\n    }\n    set selected(values: any[]) {\n        this._selectionModel.clear();\n        values?.forEach((item) => this._selectionModel.select(item));\n    }\n\n    /** user's custom classes */\n    @Input()\n    class: string;\n\n    /**\n     * Filter function. Accepts an array and a string as arguments, and outputs an array.\n     * An arrow function can be used to access the *this* keyword in the calling component.\n     * See multi input examples for details.\n     */\n    @Input()\n    filterFn = this._defaultFilter;\n\n    /**\n     * Value function. Accepts an object of the same type as the\n     * items passed to dropdownValues as argument, and outputs any property, that should be used as value.\n     * An arrow function can be used to access the *this* keyword in the calling component.\n     * See multi input examples for details.\n     */\n    @Input()\n    valueFn = this._defaultValueFn;\n\n    /**\n     * Display function. Accepts an object of the same type as the\n     * items passed to dropdownValues as argument, and outputs a string.\n     * An arrow function can be used to access the *this* keyword in the calling component.\n     * See multi input examples for details.\n     */\n    @Input()\n    displayFn = this._defaultDisplay;\n\n    /**\n     * Parse function. Used for submitting new tokens. Accepts a string by default.\n     * An arrow function can be used to access the *this* keyword in the calling component.\n     * See multi input examples for details.\n     */\n    @Input()\n    newTokenParseFn: (searchTerm: string) => any = this._defaultParse;\n\n    /**\n     * Validate function. Used to check if new token can be added into list.\n     * Works only, when `allowNewTokens` option is enabled.\n     */\n    @Input()\n    newTokenValidateFn = this._defaultTokenValidate;\n\n    /** aria-label attribute binding. */\n    @Input()\n    ariaLabel: Nullable<string>;\n\n    /** aria-labelledby attribute binding. */\n    @Input()\n    ariaLabelledBy: Nullable<string>;\n\n    /**\n     * Preset options for the Select body width, whatever is chosen, the body has a 600px limit.\n     * * `at-least` will apply a minimum width to the body equivalent to the width of the control. - Default\n     * * `equal` will apply a width to the body equivalent to the width of the control.\n     * * 'fit-content' will apply width needed to properly display items inside, independent of control.\n     */\n    @Input()\n    fillControlMode: PopoverFillMode = 'at-least';\n\n    /**\n     *  The state of the form control - applies css classes.\n     *  Can be `success`, `error`, `warning`, `information` or blank for default.\n     */\n    @Input()\n    state?: FormStates;\n\n    /**\n     * Whether AddOn Button should be focusable\n     * @default true\n     */\n    @Input()\n    buttonFocusable = true;\n\n    /** Whether the multi-input allows the creation of new tokens. */\n    @Input()\n    allowNewTokens = false;\n\n    /** Whether the multi-input should be built on mobile mode */\n    @Input()\n    mobile = false;\n\n    /** Whether the multi-input should have show all button. */\n    @Input()\n    showAllButton = true;\n\n    /** Max width of multi input body in PX */\n    @Input()\n    bodyMaxWidth: Nullable<number>;\n\n    /** Multi Input Mobile Configuration, it's applied only, when mobile is enabled */\n    @Input()\n    mobileConfig: MobileModeConfig = { hasCloseButton: true, approveButtonText: 'Select' };\n\n    /**\n     * Whether or not to return results where the input matches the entire string. By default, only results that start\n     * with the input search term will be returned.\n     */\n    @Input()\n    includes = false;\n\n    /**\n     * The template with which to display the individual listed items.\n     * Use it by passing an ng-template with implicit content. See examples for more info.\n     */\n    @Input()\n    itemTemplate: TemplateRef<any>;\n\n    /**\n     * The tooltip for the multi-input icon.\n     */\n    @Input()\n    title: string;\n\n    /** Whether the autocomplete should be enabled; Enabled by default */\n    @Input()\n    autoComplete = true;\n\n    /** Event emitted when the search term changes. Use *$event* to access the new term. */\n    @Output()\n    readonly searchTermChange: EventEmitter<string> = new EventEmitter<string>();\n\n    /** Event emitted when the selected items change. Use *$event* to access the new selected array. */\n    @Output()\n    readonly selectedChange: EventEmitter<any[]> = new EventEmitter<any[]>();\n\n    /** Whether multi input popover body should be opened */\n    @Input()\n    open = false;\n\n    /** Whether or not to display the addon button. */\n    @Input()\n    displayAddonButton = true;\n\n    /** Event emitted, when the multi input's popover body is opened or closed */\n    @Output()\n    readonly openChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    /** Event emitted, when the multi input's all item checked or not */\n    @Output()\n    readonly allItemsSelectedChange: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n    /** @hidden */\n    @ViewChild(PopoverComponent)\n    popoverRef: PopoverComponent;\n\n    /** @hidden */\n    @ViewChild('control', { read: TemplateRef })\n    controlTemplate: TemplateRef<any>;\n\n    /** @hidden */\n    @ViewChild('list', { read: TemplateRef })\n    listTemplate: TemplateRef<any>;\n\n    /** @hidden */\n    @ViewChild(ListComponent)\n    listComponent: ListComponent;\n\n    /** @hidden */\n    @ViewChild('searchInputElement', { read: ElementRef })\n    searchInputElement: ElementRef<HTMLInputElement>;\n\n    /** @hidden */\n    @ViewChild(TokenizerComponent)\n    tokenizer: TokenizerComponent;\n\n    /** @hidden */\n    readonly optionItems$ = new BehaviorSubject<OptionItem[]>([]);\n\n    /** @hidden */\n    readonly _searchTermCtrl = new FormControl('');\n\n    /** @hidden */\n    readonly _selectionModel = new SelectionModel<any>(true);\n\n    /** @hidden */\n    readonly _viewModel$: Observable<ViewModel> = this._getViewModel();\n\n    /** @hidden */\n    _dir: string;\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    private readonly _rangeSelector = new RangeSelector();\n\n    /** @hidden */\n    onChange: (value: any) => void = () => {};\n\n    /** @hidden */\n    onTouched = (): void => {};\n\n    /** @hidden */\n    constructor(\n        readonly _contentDensityObserver: ContentDensityObserver,\n        private readonly _elementRef: ElementRef,\n        private readonly _changeDetRef: ChangeDetectorRef,\n        private readonly _dynamicComponentService: DynamicComponentService,\n        private readonly _injector: Injector,\n        private readonly _viewContainerRef: ViewContainerRef,\n        @Optional() private readonly _rtlService: RtlService,\n        @Optional() private readonly _focusTrapService: FocusTrapService\n    ) {}\n\n    /** @hidden */\n    ngOnInit(): void {\n        this.buildComponentCssClass();\n\n        this._subscriptions.add(\n            this._rtlService?.rtl.subscribe((isRtl) => {\n                this._dir = isRtl ? 'rtl' : 'ltr';\n                this.buildComponentCssClass();\n            })\n        );\n\n        if (!this.inputId) {\n            this.inputId = uuidv4();\n        }\n\n        this._subscriptions.add(\n            this._searchTermCtrl.valueChanges.pipe(distinctUntilChanged()).subscribe((searchTerm) => {\n                this.searchTermChange.emit(searchTerm);\n                // resetting existing selection state, if any\n                this._rangeSelector.reset();\n            })\n        );\n        this._subscriptions.add(\n            this._getViewModel()\n                .pipe(map((viewModel) => !viewModel.displayedOptions.some((c) => !c.isSelected)))\n                .subscribe((allItemsSelected) => this.allItemsSelectedChange.emit(allItemsSelected))\n        );\n    }\n\n    /** @hidden */\n    ngOnChanges(changes: SimpleChanges): void {\n        this.buildComponentCssClass();\n\n        if (changes.dropdownValues || changes.searchTerm || changes.valueFn || changes.displayFn) {\n            const optionItems = (this.dropdownValues ?? []).map((item) => this._getOptionItem(item));\n            this.optionItems$.next(optionItems);\n            this._changeDetRef.markForCheck();\n        }\n\n        if (changes.disabled) {\n            this.disabled ? this._searchTermCtrl.disable() : this._searchTermCtrl.enable();\n        }\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        if (this.mobile) {\n            this._setUpMobileMode();\n        }\n        this.tokenizer._showOverflowPopover = false;\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n    }\n\n    @applyCssClass\n    /** CssClassBuilder interface implementation\n     * function must return single string\n     * function is responsible for order which css classes are applied\n     */\n    buildComponentCssClass(): string[] {\n        // TODO: this icon flip may be addressed in styles in the future\n        if (this.glyph === 'value-help' && this._dir === 'rtl') {\n            const icon = this.elementRef().nativeElement.querySelector('.sap-icon--value-help');\n            if (icon) {\n                icon.style.transform = 'scaleX(-1)';\n            }\n        }\n\n        return ['fd-multi-input', 'fd-multi-input-custom', this.class];\n    }\n\n    /** @hidden */\n    elementRef(): ElementRef<any> {\n        return this._elementRef;\n    }\n\n    /** @hidden */\n    registerOnChange(fn: (selected: any[]) => void): void {\n        this.onChange = fn;\n    }\n\n    /** @hidden */\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    /** @hidden */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n        if (isDisabled) {\n            this._elementRef.nativeElement.style.pointerEvents = 'none';\n        } else {\n            this._elementRef.nativeElement.style.pointerEvents = 'auto';\n        }\n\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    writeValue(selected: any[]): void {\n        this.selected = selected;\n\n        this._changeDetRef.markForCheck();\n    }\n\n    /** Method passed to list component */\n    handleListFocusEscape(direction: FocusEscapeDirection): void {\n        if (direction === 'up') {\n            this.searchInputElement.nativeElement.focus();\n        }\n    }\n\n    /** @hidden */\n    openChangeHandle(open: boolean): void {\n        if (this.disabled) {\n            return;\n        }\n\n        if (!open && this.open && !this.mobile) {\n            this.searchInputElement.nativeElement.focus();\n        }\n\n        if (this.open !== open) {\n            this.openChange.emit(open);\n        }\n\n        this.open = open;\n\n        if (!this.mobile) {\n            this._popoverOpenHandle(open);\n        }\n\n        if (!this.open) {\n            this._resetSearchTerm();\n            this.enableParentFocusTrap();\n        } else {\n            this.disableParentFocusTrap();\n        }\n\n        this.tokenizer.removeSelectedTokens();\n\n        this.tokenizer.tokenizerInnerEl.nativeElement.scrollLeft =\n            this.tokenizer.tokenizerInnerEl.nativeElement.scrollWidth;\n\n        this._changeDetRef.detectChanges();\n    }\n\n    /** Method that selects all possible options. */\n    selectAllItems(selectAll: boolean): void {\n        if (selectAll) {\n            this.selected = this.optionItems$.getValue().map((c) => c.value);\n        } else {\n            this.selected = [];\n        }\n        // On Mobile mode changes are propagated only on approve.\n        this._propagateChange();\n    }\n\n    /** @hidden */\n    _onCheckboxKeyup(value: any, event: KeyboardEvent, index: number): void {\n        if (KeyUtil.isKeyCode(event, [SPACE, ENTER])) {\n            this._onCheckboxClick(value, event, index);\n        }\n    }\n\n    /** @hidden */\n    async _onCheckboxClick(\n        value: any,\n        event: MouseEvent | KeyboardEvent,\n        index: number,\n        isListItem = false\n    ): Promise<void> {\n        const toggledSelection = !this._selectionModel.isSelected(value);\n        this._rangeSelector.onRangeElementToggled(index, event);\n        const sub = this._viewModel$.pipe(first()).subscribe((vm) => {\n            this._rangeSelector.applyValueToEachInRange((idx) =>\n                this._handleSelect(toggledSelection, vm.displayedOptions[idx].value, false)\n            );\n        });\n        this._subscriptions.add(sub);\n        if (isListItem) {\n            this.openChangeHandle(false);\n        } else {\n            // stop propagation on the checkbox so event doesn't reach the list item\n            event.stopPropagation();\n        }\n    }\n\n    /** @hidden */\n    _onTokenClick(value: any, resetSearch: boolean, event?: MouseEvent): void {\n        event?.preventDefault(); // prevent this function from being called twice when checkbox updates\n        this._handleSelect(false, value, resetSearch);\n    }\n\n    /** @hidden */\n    _handleSelect(checked: any, value: any, resetSearch = true): void {\n        const previousLength = this._selectionModel.selected.length;\n        if (checked) {\n            this._selectionModel.select(value);\n        } else {\n            this._selectionModel.deselect(value);\n        }\n\n        // Handle popover placement update\n        if (this._shouldPopoverBeUpdated(previousLength, this._selectionModel.selected.length)) {\n            this.popoverRef.refreshPosition();\n        }\n        if (resetSearch) {\n            this._resetSearchTerm();\n            this.searchInputElement.nativeElement.focus();\n        }\n\n        // On Mobile mode changes are propagated only on approve.\n        this._propagateChange();\n    }\n\n    _handleInputKeydown(event: KeyboardEvent): void {\n        if (KeyUtil.isKeyCode(event, DOWN_ARROW) && !this.mobile) {\n            if (event.altKey) {\n                this.openChangeHandle(true);\n            }\n\n            if (this.listComponent) {\n                this.listComponent.setItemActive(0);\n                event.preventDefault();\n            }\n        } else if (KeyUtil.isKeyCode(event, [DOWN_ARROW, UP_ARROW, ENTER])) {\n            this.openChangeHandle(true);\n        } else if (KeyUtil.isKeyCode(event, ESCAPE)) {\n            this.openChangeHandle(false);\n        } else if (KeyUtil.isKeyCode(event, TAB) && this.open) {\n            if (this.listComponent) {\n                this.listComponent.setItemActive(0);\n                event.preventDefault();\n            }\n        } else if (KeyUtil.isKeyType(event, 'alphabetical') || KeyUtil.isKeyType(event, 'numeric')) {\n            if (!this.open) {\n                this.openChangeHandle(true);\n            }\n        }\n    }\n\n    /** @hidden */\n    _showAllClicked(event: Event): void {\n        event.preventDefault();\n        event.stopPropagation();\n        this._searchTermCtrl.setValue('');\n        this.searchInputElement.nativeElement.focus();\n    }\n\n    /** @hidden */\n    _showAllKeyDown(event: KeyboardEvent): void {\n        if (KeyUtil.isKeyCode(event, [SPACE, ENTER])) {\n            this._showAllClicked(event);\n        }\n    }\n\n    /** @hidden */\n    _onSubmit(): void {\n        const searchTerm = this.searchTerm;\n        if (searchTerm === '') {\n            return;\n        }\n        const isExist = this._selectFirstFiltered(searchTerm);\n        if (!isExist && this.allowNewTokens && this.newTokenValidateFn(this._searchTermCtrl.value)) {\n            const newToken = this.newTokenParseFn(this._searchTermCtrl.value);\n            this._addNewTokenToDropDownValues(newToken);\n            this._handleSelect(true, newToken);\n            this._searchTermCtrl.setValue('');\n            this.open = false;\n        }\n    }\n\n    /** @hidden */\n    _handleComplete({ term }): void {\n        this.searchTerm = term;\n    }\n\n    /**\n     * Handle dialog dismissing, closes popover and sets backup data.\n     */\n    dialogDismiss(selectedBackup: any[]): void {\n        this.openChangeHandle(false);\n        this._resetSearchTerm();\n        this.selected = selectedBackup;\n    }\n\n    /**\n     * Handle dialog approval, closes popover and propagates data changes.\n     */\n    dialogApprove(): void {\n        this._propagateChange(true);\n        this.openChangeHandle(false);\n        this._resetSearchTerm();\n    }\n\n    /** @hidden */\n    _moreClicked(): void {\n        this.openChangeHandle(true);\n    }\n\n    /** @hidden */\n    _addOnButtonClicked(): void {\n        this.openChangeHandle(!this.open);\n    }\n\n    /** @hidden */\n    disableParentFocusTrap(): void {\n        this._focusTrapService?.pauseCurrentFocusTrap();\n    }\n\n    /** @hidden */\n    enableParentFocusTrap(): void {\n        this._focusTrapService?.unpauseCurrentFocusTrap();\n    }\n\n    /** @hidden */\n    private _addNewTokenToDropDownValues(newToken): void {\n        this.dropdownValues.push(newToken);\n        const newOption = this._getOptionItem(newToken);\n        this.optionItems$.next([...this.optionItems$.value, newOption]);\n    }\n\n    /** @hidden */\n    private _selectFirstFiltered(searchTerm: string): boolean {\n        const filtered = this.filterFn(this.dropdownValues, searchTerm);\n        if (Array.isArray(filtered) && filtered.length > 0 && this.autoComplete) {\n            const optionItem = this._getOptionItem(filtered[0]);\n            this._handleSelect(true, optionItem.value);\n            this._searchTermCtrl.setValue('');\n            this.open = false;\n            return true;\n        }\n        return false;\n    }\n\n    /** @hidden */\n    private _defaultFilter(contentArray: any[], searchTerm: string = ''): any[] {\n        const searchLower = searchTerm.toLocaleLowerCase();\n        return contentArray.filter((item) => {\n            if (item) {\n                const displayedValue = this.displayFn(item);\n                const term = typeof displayedValue === 'string' ? displayedValue.toLocaleLowerCase() : '';\n\n                return this.includes ? term.includes(searchLower) : term.startsWith(searchLower);\n            }\n        });\n    }\n\n    /** @hidden */\n    private _defaultValueFn(value: any): any {\n        return value;\n    }\n\n    /** @hidden */\n    private _defaultDisplay(str: any): string {\n        return str;\n    }\n\n    /** @hidden */\n    private _defaultParse(str: any): string {\n        return str;\n    }\n\n    /** @hidden */\n    private _defaultTokenValidate(str: string): boolean {\n        return !!str;\n    }\n\n    /** @hidden */\n    private _popoverOpenHandle(open: boolean): void {\n        this.open = open;\n        this.onTouched();\n    }\n\n    /** @hidden */\n    private _propagateChange(emitInMobile?: boolean): void {\n        if (!this.mobile || emitInMobile) {\n            const selected = [...this._selectionModel.selected];\n            this.onChange(selected);\n            this.selectedChange.emit(selected);\n        }\n    }\n\n    /** @hidden */\n    private _shouldPopoverBeUpdated(previousLength: number, currentLength: number): boolean {\n        return (\n            !!this.popoverRef &&\n            ((previousLength === 0 && currentLength === 1) || (previousLength === 1 && currentLength === 0))\n        );\n    }\n\n    /** @hidden */\n    private async _setUpMobileMode(): Promise<void> {\n        const injector = Injector.create({\n            providers: [{ provide: MULTI_INPUT_COMPONENT, useValue: this }],\n            parent: this._injector\n        });\n\n        await this._dynamicComponentService.createDynamicModule(\n            {\n                listTemplate: this.listTemplate,\n                controlTemplate: this.controlTemplate\n            },\n            MultiInputMobileModule,\n            MultiInputMobileComponent,\n            this._viewContainerRef,\n            injector\n        );\n    }\n\n    /** @hidden */\n    private _resetSearchTerm(): void {\n        this._searchTermCtrl.setValue('');\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    private _getOptionItem(item: any): OptionItem {\n        const { label, value } = this._getValueAndLabel(item);\n        return {\n            item,\n            label,\n            value,\n            isSelected: false\n        };\n    }\n\n    /** @hidden */\n    private _getValueAndLabel(itemOrValue: any, optionItems: OptionItem[] = []): OptionItemBase {\n        if (optionItems.length > 0) {\n            itemOrValue = optionItems.find((c) => c.value === itemOrValue)?.item ?? itemOrValue;\n        }\n        const defaultDisplay = typeof itemOrValue === 'object' ? itemOrValue[Object.keys(itemOrValue)[0]] : itemOrValue;\n        const value = this.valueFn(itemOrValue) ?? defaultDisplay;\n        const label = this.displayFn(itemOrValue) ?? defaultDisplay;\n        return { label, value };\n    }\n\n    /** @hidden */\n    private _getViewModel(): Observable<ViewModel> {\n        return combineLatest([\n            this._searchTermCtrl.valueChanges.pipe(startWith(this._searchTermCtrl.value)),\n            this._selectionModel.changed.pipe(startWith(null)),\n            this.optionItems$\n        ]).pipe(\n            map(([, , optionItems]) => {\n                const selected = this.selected.map((c) => this._getValueAndLabel(c, optionItems));\n                // not using \"searchTerm\" value from combineLatest as it will be wrong for late subscribers, if any\n                const searchTerm = this._searchTermCtrl.value;\n                const filtered = this.filterFn(\n                    optionItems.map((c) => c.item),\n                    searchTerm\n                );\n                const displayedOptions = (Array.isArray(filtered) ? filtered : []).map((item) =>\n                    this._getOptionItem(item)\n                );\n                displayedOptions.forEach((c) => (c.isSelected = selected.findIndex((d) => d.value === c.value) > -1));\n                return { selectedOptions: selected, displayedOptions };\n            })\n        );\n    }\n}\n\ninterface OptionItem<T = any> extends OptionItemBase {\n    item: T;\n    isSelected: boolean;\n}\ninterface OptionItemBase {\n    label: string;\n    value: any;\n}\n\ninterface ViewModel {\n    selectedOptions: OptionItemBase[];\n    displayedOptions: OptionItem[];\n}\n","<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 [ngTemplateOutlet]=\"control\" *ngIf=\"mobile\"></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]=\"bodyMaxWidth\"\n                [focusTrapped]=\"true\"\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 *ngTemplateOutlet=\"control\"></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>\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"displayAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked()\"\n        >\n            <fd-tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                [class.fd-multi-input-tokenizer-custom--compact]=\"_contentDensityObserver.isCompact$ | async\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: valueFn\"\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                    fd-auto-complete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [inputText]=\"_searchTermCtrl.value\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [attr.aria-label]=\"ariaLabel\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\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.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: valueFn\"\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","import { Directive, forwardRef } from '@angular/core';\nimport { CONTENT_DENSITY_DIRECTIVE, DeprecatedCompactDirective } from '@fundamental-ngx/core/content-density';\n\n@Directive({\n    // eslint-disable-next-line @angular-eslint/directive-selector\n    selector: 'fd-multi-input[compact]',\n    providers: [\n        {\n            provide: CONTENT_DENSITY_DIRECTIVE,\n            useExisting: forwardRef(() => DeprecatedMultiInputCompactDirective)\n        }\n    ]\n})\nexport class DeprecatedMultiInputCompactDirective extends DeprecatedCompactDirective {\n    constructor() {\n        super('fd-multi-input');\n    }\n}\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { MultiInputComponent } from './multi-input.component';\nimport { TokenModule } from '@fundamental-ngx/core/token';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { PopoverModule } from '@fundamental-ngx/core/popover';\nimport { PipeModule } from '@fundamental-ngx/core/utils';\nimport { InputGroupModule } from '@fundamental-ngx/core/input-group';\nimport { FormModule } from '@fundamental-ngx/core/form';\nimport { CheckboxModule } from '@fundamental-ngx/core/checkbox';\nimport { ListModule } from '@fundamental-ngx/core/list';\nimport { LinkModule } from '@fundamental-ngx/core/link';\nimport { AutoCompleteModule } from '@fundamental-ngx/core/utils';\nimport { DeprecatedMultiInputCompactDirective } from './deprecated-multi-input-compact.directive';\nimport { ContentDensityModule } from '@fundamental-ngx/core/content-density';\n\n@NgModule({\n    declarations: [MultiInputComponent, DeprecatedMultiInputCompactDirective],\n    imports: [\n        CommonModule,\n        TokenModule,\n        FormsModule,\n        ReactiveFormsModule,\n        ListModule,\n        PopoverModule,\n        PipeModule,\n        InputGroupModule,\n        FormModule,\n        CheckboxModule,\n        LinkModule,\n        AutoCompleteModule,\n        ContentDensityModule\n    ],\n    exports: [MultiInputComponent, DeprecatedMultiInputCompactDirective, ContentDensityModule]\n})\nexport class MultiInputModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2015/fundamental-ngx-core-token.mjs

@@ -3,14 +3,14 @@ import { EventEmitter, ViewContainerRef, Component, ViewEncapsulation, ChangeDet
 import * as i6 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { Subscription, Subject, merge, fromEvent } from 'rxjs';
+import * as i2 from '@fundamental-ngx/core/utils';
+import { KeyUtil, resizeObservable, applyCssClass } from '@fundamental-ngx/core/utils';
+import { ENTER, SPACE, DELETE, BACKSPACE, LEFT_ARROW, RIGHT_ARROW, A } from '@angular/cdk/keycodes';
 import * as i1 from '@fundamental-ngx/core/content-density';
 import { contentDensityObserverProviders, DeprecatedCompactDirective, CONTENT_DENSITY_DIRECTIVE, ContentDensityModule } from '@fundamental-ngx/core/content-density';
 import { __decorate, __metadata } from 'tslib';
-import { DELETE, BACKSPACE, SPACE, ENTER, LEFT_ARROW, RIGHT_ARROW, A } from '@angular/cdk/keycodes';
 import { filter, mapTo, debounceTime, takeUntil } from 'rxjs/operators';
 import { FormControlComponent } from '@fundamental-ngx/core/form';
-import * as i2 from '@fundamental-ngx/core/utils';
-import { KeyUtil, applyCssClass } from '@fundamental-ngx/core/utils';
 import * as i3 from '@fundamental-ngx/core/button';
 import { ButtonModule } from '@fundamental-ngx/core/button';
 import * as i4 from '@fundamental-ngx/core/popover';
@@ -82,16 +82,23 @@ class TokenComponent {
         this.onTokenClick.emit(event);
     }
     /** @hidden */
+    tokenKeydownHandler(event) {
+        this.onTokenKeydown.emit(event);
+        if (KeyUtil.isKeyCode(event, [ENTER, SPACE])) {
+            this.onTokenClick.emit(event);
+        }
+    }
+    /** @hidden */
     _setTotalCount(count) {
         this.totalCount = count;
         this._cdRef.markForCheck();
     }
 }
 TokenComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TokenComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.ContentDensityObserver }], target: i0.ɵɵFactoryTarget.Component });
-TokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: TokenComponent, selector: "fd-token", inputs: { disabled: "disabled", selected: "selected", readOnly: "readOnly", deleteButtonLabel: "deleteButtonLabel", ariaRoleDescription: "ariaRoleDescription" }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown" }, providers: [contentDensityObserverProviders()], viewQueries: [{ propertyName: "tokenWrapperElement", first: true, predicate: ["tokenWrapperElement"], descendants: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true }, { propertyName: "_viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-setsize]=\"totalCount\"\n    [attr.aria-roledescription]=\"ariaRoleDescription\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"onTokenKeydown.emit($event)\"\n    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\n>\n    <span class=\"fd-token__text no-text-select\">\n        <ng-container #viewContainer></ng-container>\n    </span>\n    <span\n        (click)=\"closeClickHandler($event)\"\n        role=\"button\"\n        [attr.aria-label]=\"deleteButtonLabel\"\n        *ngIf=\"!readOnly\"\n        class=\"fd-token__close\"\n        tabindex=\"-1\"\n    ></span>\n</span>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-token{-webkit-box-sizing:border-box;-ms-flex-negative:0;align-items:center;background-color:var(--sapButton_TokenBackground);border:0;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:inline-flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:1.625rem;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:3.625rem;padding:0;padding:.25rem 0 .25rem var(--fdToken_Padding_Left);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.fd-token[dir=rtl],[dir=rtl] .fd-token{padding-left:0;padding-right:var(--fdToken_Padding_Left)}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_IconColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;height:1.625rem;justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:1.75rem;padding:.25rem .5rem;width:1.75rem}.fd-token__close:after,.fd-token__close:before{box-sizing:inherit;font-size:inherit}.fd-token__close:before{text-rendering:optimizeLegibility;content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{box-shadow:none;outline:none;z-index:5}.fd-token:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Hover);background-color:var(--fdToken_Background_Color_Hover);border-color:var(--fdToken_Border_Color_Hover);box-shadow:var(--fdToken_Box_Shadow_Hover)}.fd-token.is-focus,.fd-token:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-offset:var(--fdToken_Outline_Offset_Compact);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);color:var(--sapContent_LabelColor);padding:.25rem .375rem}.fd-token--readonly.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{padding-left:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{-webkit-box-shadow:none;background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);box-shadow:none;color:var(--sapContent_LabelColor)}.fd-token--readonly[dir=rtl],[dir=rtl] .fd-token--readonly{padding-left:.375rem}.fd-token.fd-token--selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-token.fd-token--selected,.fd-token.fd-token--selected .fd-token__close{color:var(--sapButton_Selected_TextColor)}.fd-token.fd-token--selected.is-hover,.fd-token.fd-token--selected:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Selected_Hover);background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);box-shadow:var(--fdToken_Box_Shadow_Selected_Hover)}.fd-token.fd-token--selected.is-focus,.fd-token.fd-token--selected:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-color:var(--fdToken_Border_Color_Selected_Focus);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TokenComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: TokenComponent, selector: "fd-token", inputs: { disabled: "disabled", selected: "selected", readOnly: "readOnly", deleteButtonLabel: "deleteButtonLabel", ariaRoleDescription: "ariaRoleDescription" }, outputs: { onCloseClick: "onCloseClick", onRemove: "onRemove", onTokenClick: "onTokenClick", onTokenKeydown: "onTokenKeydown" }, providers: [contentDensityObserverProviders()], viewQueries: [{ propertyName: "tokenWrapperElement", first: true, predicate: ["tokenWrapperElement"], descendants: true }, { propertyName: "_content", first: true, predicate: ["content"], descendants: true }, { propertyName: "_viewContainer", first: true, predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-roledescription]=\"ariaRoleDescription\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"totalCount\"\n    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\n>\n    <span class=\"fd-token__text no-text-select\">\n        <ng-container #viewContainer></ng-container>\n    </span>\n    <span\n        (click)=\"closeClickHandler($event)\"\n        role=\"button\"\n        [attr.aria-label]=\"deleteButtonLabel\"\n        *ngIf=\"!readOnly\"\n        class=\"fd-token__close\"\n    ></span>\n</span>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-token{-webkit-box-sizing:border-box;-ms-flex-negative:0;align-items:center;background-color:var(--sapButton_TokenBackground);border:0;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:inline-flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:1.625rem;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:3.625rem;padding:0;padding:.25rem 0 .25rem var(--fdToken_Padding_Left);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.fd-token[dir=rtl],[dir=rtl] .fd-token{padding-left:0;padding-right:var(--fdToken_Padding_Left)}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_IconColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;height:1.625rem;justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:1.75rem;padding:.25rem .5rem;width:1.75rem}.fd-token__close:after,.fd-token__close:before{box-sizing:inherit;font-size:inherit}.fd-token__close:before{text-rendering:optimizeLegibility;content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{box-shadow:none;outline:none;z-index:5}.fd-token:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Hover);background-color:var(--fdToken_Background_Color_Hover);border-color:var(--fdToken_Border_Color_Hover);box-shadow:var(--fdToken_Box_Shadow_Hover)}.fd-token.is-focus,.fd-token:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-offset:var(--fdToken_Outline_Offset_Compact);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);color:var(--sapContent_LabelColor);padding:.25rem .375rem}.fd-token--readonly.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{padding-left:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{-webkit-box-shadow:none;background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);box-shadow:none;color:var(--sapContent_LabelColor)}.fd-token--readonly[dir=rtl],[dir=rtl] .fd-token--readonly{padding-left:.375rem}.fd-token.fd-token--selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-token.fd-token--selected,.fd-token.fd-token--selected .fd-token__close{color:var(--sapButton_Selected_TextColor)}.fd-token.fd-token--selected.is-hover,.fd-token.fd-token--selected:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Selected_Hover);background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);box-shadow:var(--fdToken_Box_Shadow_Selected_Hover)}.fd-token.fd-token--selected.is-focus,.fd-token.fd-token--selected:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-color:var(--fdToken_Border_Color_Selected_Focus);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i6.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TokenComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-token', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-setsize]=\"totalCount\"\n    [attr.aria-roledescription]=\"ariaRoleDescription\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"onTokenKeydown.emit($event)\"\n    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\n>\n    <span class=\"fd-token__text no-text-select\">\n        <ng-container #viewContainer></ng-container>\n    </span>\n    <span\n        (click)=\"closeClickHandler($event)\"\n        role=\"button\"\n        [attr.aria-label]=\"deleteButtonLabel\"\n        *ngIf=\"!readOnly\"\n        class=\"fd-token__close\"\n        tabindex=\"-1\"\n    ></span>\n</span>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-token{-webkit-box-sizing:border-box;-ms-flex-negative:0;align-items:center;background-color:var(--sapButton_TokenBackground);border:0;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:inline-flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:1.625rem;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:3.625rem;padding:0;padding:.25rem 0 .25rem var(--fdToken_Padding_Left);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.fd-token[dir=rtl],[dir=rtl] .fd-token{padding-left:0;padding-right:var(--fdToken_Padding_Left)}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_IconColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;height:1.625rem;justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:1.75rem;padding:.25rem .5rem;width:1.75rem}.fd-token__close:after,.fd-token__close:before{box-sizing:inherit;font-size:inherit}.fd-token__close:before{text-rendering:optimizeLegibility;content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{box-shadow:none;outline:none;z-index:5}.fd-token:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Hover);background-color:var(--fdToken_Background_Color_Hover);border-color:var(--fdToken_Border_Color_Hover);box-shadow:var(--fdToken_Box_Shadow_Hover)}.fd-token.is-focus,.fd-token:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-offset:var(--fdToken_Outline_Offset_Compact);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);color:var(--sapContent_LabelColor);padding:.25rem .375rem}.fd-token--readonly.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{padding-left:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{-webkit-box-shadow:none;background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);box-shadow:none;color:var(--sapContent_LabelColor)}.fd-token--readonly[dir=rtl],[dir=rtl] .fd-token--readonly{padding-left:.375rem}.fd-token.fd-token--selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-token.fd-token--selected,.fd-token.fd-token--selected .fd-token__close{color:var(--sapButton_Selected_TextColor)}.fd-token.fd-token--selected.is-hover,.fd-token.fd-token--selected:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Selected_Hover);background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);box-shadow:var(--fdToken_Box_Shadow_Selected_Hover)}.fd-token.fd-token--selected.is-focus,.fd-token.fd-token--selected:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-color:var(--fdToken_Border_Color_Selected_Focus);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"] }]
+            args: [{ selector: 'fd-token', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], template: "<span\n    #tokenWrapperElement\n    class=\"fd-token\"\n    role=\"option\"\n    tabindex=\"0\"\n    [attr.aria-roledescription]=\"ariaRoleDescription\"\n    (click)=\"tokenClickHandler($event)\"\n    (keydown)=\"tokenKeydownHandler($event)\"\n    [attr.aria-setsize]=\"totalCount\"\n    [class.fd-token__disabled]=\"disabled\"\n    [class.fd-token--compact]=\"_contentDensityObserver.isCompact$ | async\"\n    [class.fd-token--selected]=\"selected\"\n    [class.fd-token--readonly]=\"readOnly\"\n    [attr.aria-selected]=\"selected\"\n    [attr.aria-readonly]=\"readOnly\"\n>\n    <span class=\"fd-token__text no-text-select\">\n        <ng-container #viewContainer></ng-container>\n    </span>\n    <span\n        (click)=\"closeClickHandler($event)\"\n        role=\"button\"\n        [attr.aria-label]=\"deleteButtonLabel\"\n        *ngIf=\"!readOnly\"\n        class=\"fd-token__close\"\n    ></span>\n</span>\n\n<ng-template #content>\n    <ng-content></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-token{-webkit-box-sizing:border-box;-ms-flex-negative:0;align-items:center;background-color:var(--sapButton_TokenBackground);border:0;border:var(--sapButton_BorderWidth) solid var(--sapButton_TokenBorderColor);border-radius:var(--fdToken_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);color:var(--fdToken_Text_Color);cursor:default;display:inline-flex;flex-shrink:0;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:1.625rem;line-height:var(--sapContent_LineHeight);line-height:1.5rem;margin:0;max-width:100%;min-width:3.625rem;padding:0;padding:.25rem 0 .25rem var(--fdToken_Padding_Left);text-align:center;text-overflow:clip;white-space:nowrap}.fd-token:after,.fd-token:before{box-sizing:inherit;font-size:inherit}.fd-token[dir=rtl],[dir=rtl] .fd-token{padding-left:0;padding-right:var(--fdToken_Padding_Left)}.fd-token__text{max-width:100%;min-width:auto;overflow:hidden;text-overflow:ellipsis;text-shadow:var(--fdToken_Text_Shadow);width:100%}.fd-token__close{-webkit-box-sizing:border-box;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;background-color:transparent;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_IconColor);cursor:pointer;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;height:1.625rem;justify-content:center;line-height:var(--sapContent_LineHeight);line-height:1.25rem;margin:0;min-width:1.75rem;padding:.25rem .5rem;width:1.75rem}.fd-token__close:after,.fd-token__close:before{box-sizing:inherit;font-size:inherit}.fd-token__close:before{text-rendering:optimizeLegibility;content:\"\\e03e\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-transform:none}.fd-token__close.is-focus,.fd-token__close:focus{box-shadow:none;outline:none;z-index:5}.fd-token:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Hover);background-color:var(--fdToken_Background_Color_Hover);border-color:var(--fdToken_Border_Color_Hover);box-shadow:var(--fdToken_Box_Shadow_Hover)}.fd-token.is-focus,.fd-token:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--compact{height:1.25rem;line-height:1.125rem;min-width:3rem;padding:.1rem 0 .1rem .25rem}.fd-token--compact .fd-token__close{height:1.25rem;min-width:1.25rem;padding:.1rem .25rem;vertical-align:baseline;width:1.25rem}.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--compact{padding-left:0;padding-right:.25rem}.fd-token--compact.is-focus,.fd-token--compact:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:var(--fdToken_Outline_Offset);outline-offset:var(--fdToken_Outline_Offset_Compact);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token--disabled{cursor:not-allowed}.fd-token--readonly{background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);color:var(--sapContent_LabelColor);padding:.25rem .375rem}.fd-token--readonly.fd-token--compact{padding:.1rem .25rem}.fd-token--readonly.fd-token--compact[dir=rtl],[dir=rtl] .fd-token--readonly.fd-token--compact{padding-left:.25rem}.fd-token--readonly.is-hover,.fd-token--readonly:hover{-webkit-box-shadow:none;background-color:var(--fdToken_Background_Color_Read_Only);border:var(--sapButton_BorderWidth) solid var(--fdToken_Border_Color_Read_Only);box-shadow:none;color:var(--sapContent_LabelColor)}.fd-token--readonly[dir=rtl],[dir=rtl] .fd-token--readonly{padding-left:.375rem}.fd-token.fd-token--selected{background-color:var(--sapButton_Selected_Background);border-color:var(--sapButton_Selected_BorderColor)}.fd-token.fd-token--selected,.fd-token.fd-token--selected .fd-token__close{color:var(--sapButton_Selected_TextColor)}.fd-token.fd-token--selected.is-hover,.fd-token.fd-token--selected:hover{-webkit-box-shadow:var(--fdToken_Box_Shadow_Selected_Hover);background-color:var(--sapButton_Selected_Hover_Background);border-color:var(--sapButton_Selected_Hover_BorderColor);box-shadow:var(--fdToken_Box_Shadow_Selected_Hover)}.fd-token.fd-token--selected.is-focus,.fd-token.fd-token--selected:focus{box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-color:var(--fdToken_Border_Color_Selected_Focus);outline-offset:var(--fdToken_Outline_Offset);outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth)}.fd-token__disabled:after{cursor:not-allowed}.no-text-select{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.ContentDensityObserver }]; }, propDecorators: { disabled: [{
                 type: Input
             }], tokenWrapperElement: [{
@@ -207,13 +214,14 @@ class TokenizerComponent {
             }));
         });
         if (!this.compact && !this.compactCollapse) {
-            this._handleInitCozyTokenCount();
+            this._handleCozyTokenCount();
         }
     }
     /** @hidden */
     ngAfterContentInit() {
         this._listenElementEvents();
         this.previousElementWidth = this._elementRef.nativeElement.getBoundingClientRect().width;
+        this._listenOnResize();
         this.onResize();
     }
     /** @hidden */
@@ -247,6 +255,9 @@ class TokenizerComponent {
     handleTokenClickSubscriptions() {
         this._unsubscribeClicks();
         this.tokenList.forEach((token, index) => {
+            if (token.tokenWrapperElement) {
+                token.tokenWrapperElement.nativeElement.tabIndex = -1;
+            }
             this.tokenListClickSubscriptions.push(token.onTokenClick.subscribe((event) => {
                 event.stopPropagation();
                 this.focusTokenElement(index);
@@ -307,6 +318,9 @@ class TokenizerComponent {
             const elementWidth = this._elementRef.nativeElement.getBoundingClientRect().width;
             this._resetTokens();
             this.previousElementWidth = elementWidth;
+            if (!this.compact && !this.compactCollapse) {
+                this._handleCozyTokenCount();
+            }
         }
     }
     /** @hidden */
@@ -479,7 +493,7 @@ class TokenizerComponent {
         this._cdRef.detectChanges();
     }
     /** @hidden */
-    _handleInitCozyTokenCount() {
+    _handleCozyTokenCount() {
         // because justify-content breaks scrollbar, it cannot be used on cozy screens, so use JS to scroll to the end
         this.tokenizerInnerEl.nativeElement.scrollLeft = this.tokenizerInnerEl.nativeElement.scrollWidth;
         this._getHiddenCozyTokenCount();
@@ -634,9 +648,15 @@ class TokenizerComponent {
             this._cdRef.markForCheck();
         });
     }
+    /** @hidden Listen window resize and distribute cards on column change */
+    _listenOnResize() {
+        resizeObservable(this.elementRef().nativeElement)
+            .pipe(debounceTime(60), takeUntil(this._onDestroy$))
+            .subscribe(() => this.onResize());
+    }
 }
 TokenizerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TokenizerComponent, deps: [{ token: i1.ContentDensityObserver }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i2.RtlService, optional: true }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-TokenizerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: TokenizerComponent, selector: "fd-tokenizer", inputs: { class: "class", disableKeyboardDeletion: "disableKeyboardDeletion", ariaRoleDescription: "ariaRoleDescription", compactCollapse: "compactCollapse", tokenizerFocusable: "tokenizerFocusable", inputValue: "inputValue", glyph: "glyph", moreTerm: "moreTerm", open: "open" }, outputs: { moreClickedEvent: "moreClickedEvent" }, host: { listeners: { "keydown": "keyDown($event)", "window:resize": "onResize()" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "input", first: true, predicate: i0.forwardRef(function () { return FormControlComponent; }), descendants: true }, { propertyName: "tokenList", predicate: i0.forwardRef(function () { return TokenComponent; }) }], viewQueries: [{ propertyName: "tokenizerInnerEl", first: true, predicate: ["tokenizerInner"], descendants: true }, { propertyName: "moreElement", first: true, predicate: ["moreElement"], descendants: true }, { propertyName: "content", first: true, predicate: ["inputGroupAddOn"], descendants: true }, { propertyName: "_viewContainer", predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || compactCollapse); else moreElement\">\n            <ng-container *ngTemplateOutlet=\"tokensOverflow\"></ng-container>\n        </ng-container>\n\n        <ng-content select=\"[fd-form-control]\"></ng-content>\n    </div>\n    <span fd-input-group-addon *ngIf=\"glyph\" #inputGroupAddOn [button]=\"true\" placement=\"after\">\n        <button\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></button>\n    </span>\n</div>\n\n<ng-template #tokensOverflow>\n    <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"moreElement\"></ng-container>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <ul fd-list class=\"fd-tokenizer__overflow-list\">\n                <li fd-list-item class=\"fd-tokenizer__overflow-list-item\" *ngFor=\"let token of _hiddenTokens\">\n                    <ng-container #viewContainer></ng-container>\n\n                    <span\n                        *ngIf=\"!token.readOnly\"\n                        class=\"fd-token__close\"\n                        role=\"button\"\n                        tabindex=\"-1\"\n                        [attr.aria-label]=\"token.deleteButtonLabel\"\n                        (click)=\"token.closeClickHandler($event)\"\n                    ></span>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #moreElement>\n    <span\n        (click)=\"moreClicked()\"\n        *ngIf=\"\n            (moreTokensLeft.length > 0 || moreTokensRight.length > 0 || hiddenCozyTokenCount > 0) &&\n            !open &&\n            !_tokenizerHasFocus\n        \"\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n        #moreElement\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ moreTokensLeft.length + moreTokensRight.length }} {{ moreTerm }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\"> {{ hiddenCozyTokenCount }} {{ moreTerm }} </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tokenizer{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-tokenizer:after,.fd-tokenizer:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:flex;float:right;justify-content:flex-end;overflow:hidden;padding:0 .3125rem;scrollbar-width:none;white-space:nowrap;width:100%}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{margin-right:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding:0 .3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{-webkit-box-shadow:none;background:none;background-color:transparent;border:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{-webkit-box-shadow:none;border:none;box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:-.0625rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly.is-focus,.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly:focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true]:focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly]:focus{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{justify-content:normal;overflow:scroll}.fd-tokenizer .fd-token{max-width:inherit}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n"], components: [{ type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { type: i4.PopoverBodyComponent, selector: "fd-popover-body" }, { type: i5.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { type: i5.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.InputGroupAddOnDirective, selector: "[fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+TokenizerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.2.4", type: TokenizerComponent, selector: "fd-tokenizer", inputs: { class: "class", disableKeyboardDeletion: "disableKeyboardDeletion", ariaRoleDescription: "ariaRoleDescription", compactCollapse: "compactCollapse", tokenizerFocusable: "tokenizerFocusable", inputValue: "inputValue", glyph: "glyph", moreTerm: "moreTerm", open: "open" }, outputs: { moreClickedEvent: "moreClickedEvent" }, host: { listeners: { "keydown": "keyDown($event)" } }, providers: [contentDensityObserverProviders()], queries: [{ propertyName: "input", first: true, predicate: i0.forwardRef(function () { return FormControlComponent; }), descendants: true }, { propertyName: "tokenList", predicate: i0.forwardRef(function () { return TokenComponent; }) }], viewQueries: [{ propertyName: "tokenizerInnerEl", first: true, predicate: ["tokenizerInner"], descendants: true }, { propertyName: "moreElement", first: true, predicate: ["moreElement"], descendants: true }, { propertyName: "content", first: true, predicate: ["inputGroupAddOn"], descendants: true }, { propertyName: "_viewContainer", predicate: ["viewContainer"], descendants: true, read: ViewContainerRef }], usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || compactCollapse); else moreElement\">\n            <ng-container *ngTemplateOutlet=\"tokensOverflow\"></ng-container>\n        </ng-container>\n\n        <ng-content select=\"[fd-form-control]\"></ng-content>\n    </div>\n    <span fd-input-group-addon *ngIf=\"glyph\" #inputGroupAddOn [button]=\"true\" placement=\"after\">\n        <button\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></button>\n    </span>\n</div>\n\n<ng-template #tokensOverflow>\n    <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"moreElement\"></ng-container>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <ul fd-list class=\"fd-tokenizer__overflow-list\">\n                <li fd-list-item class=\"fd-tokenizer__overflow-list-item\" *ngFor=\"let token of _hiddenTokens\">\n                    <ng-container #viewContainer></ng-container>\n\n                    <span\n                        *ngIf=\"!token.readOnly\"\n                        class=\"fd-token__close\"\n                        role=\"button\"\n                        [attr.aria-label]=\"token.deleteButtonLabel\"\n                        (click)=\"token.closeClickHandler($event)\"\n                    ></span>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #moreElement>\n    <span\n        (click)=\"moreClicked()\"\n        *ngIf=\"\n            (moreTokensLeft.length > 0 || moreTokensRight.length > 0 || hiddenCozyTokenCount > 0) &&\n            !open &&\n            !_tokenizerHasFocus\n        \"\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ moreTokensLeft.length + moreTokensRight.length }} {{ moreTerm }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\"> {{ hiddenCozyTokenCount }} {{ moreTerm }} </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tokenizer{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-tokenizer:after,.fd-tokenizer:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:flex;float:right;justify-content:flex-end;overflow:hidden;padding:0 .3125rem;scrollbar-width:none;white-space:nowrap;width:100%}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{margin-right:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding:0 .3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{-webkit-box-shadow:none;background:none;background-color:transparent;border:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{-webkit-box-shadow:none;border:none;box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:-.0625rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly.is-focus,.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly:focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true]:focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly]:focus{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{justify-content:normal;overflow:scroll}.fd-tokenizer .fd-token{max-width:inherit}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n"], components: [{ type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { type: i4.PopoverBodyComponent, selector: "fd-popover-body" }, { type: i5.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { type: i5.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }], directives: [{ type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.InputGroupAddOnDirective, selector: "[fd-input-group-addon]", inputs: ["class", "placement", "type", "state", "button"] }, { type: i6.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -645,7 +665,7 @@ __decorate([
 ], TokenizerComponent.prototype, "buildComponentCssClass", null);
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImport: i0, type: TokenizerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-tokenizer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || compactCollapse); else moreElement\">\n            <ng-container *ngTemplateOutlet=\"tokensOverflow\"></ng-container>\n        </ng-container>\n\n        <ng-content select=\"[fd-form-control]\"></ng-content>\n    </div>\n    <span fd-input-group-addon *ngIf=\"glyph\" #inputGroupAddOn [button]=\"true\" placement=\"after\">\n        <button\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></button>\n    </span>\n</div>\n\n<ng-template #tokensOverflow>\n    <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"moreElement\"></ng-container>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <ul fd-list class=\"fd-tokenizer__overflow-list\">\n                <li fd-list-item class=\"fd-tokenizer__overflow-list-item\" *ngFor=\"let token of _hiddenTokens\">\n                    <ng-container #viewContainer></ng-container>\n\n                    <span\n                        *ngIf=\"!token.readOnly\"\n                        class=\"fd-token__close\"\n                        role=\"button\"\n                        tabindex=\"-1\"\n                        [attr.aria-label]=\"token.deleteButtonLabel\"\n                        (click)=\"token.closeClickHandler($event)\"\n                    ></span>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #moreElement>\n    <span\n        (click)=\"moreClicked()\"\n        *ngIf=\"\n            (moreTokensLeft.length > 0 || moreTokensRight.length > 0 || hiddenCozyTokenCount > 0) &&\n            !open &&\n            !_tokenizerHasFocus\n        \"\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n        #moreElement\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ moreTokensLeft.length + moreTokensRight.length }} {{ moreTerm }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\"> {{ hiddenCozyTokenCount }} {{ moreTerm }} </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tokenizer{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-tokenizer:after,.fd-tokenizer:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:flex;float:right;justify-content:flex-end;overflow:hidden;padding:0 .3125rem;scrollbar-width:none;white-space:nowrap;width:100%}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{margin-right:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding:0 .3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{-webkit-box-shadow:none;background:none;background-color:transparent;border:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{-webkit-box-shadow:none;border:none;box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:-.0625rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly.is-focus,.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly:focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true]:focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly]:focus{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{justify-content:normal;overflow:scroll}.fd-tokenizer .fd-token{max-width:inherit}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n"] }]
+            args: [{ selector: 'fd-tokenizer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [contentDensityObserverProviders()], template: "<div\n    class=\"fd-tokenizer fd-tokenizer--scrollable\"\n    [class.is-focus]=\"_tokenizerHasFocus\"\n    [class.fd-tokenizer--compact]=\"compact\"\n>\n    <div class=\"fd-tokenizer__inner\" #tokenizerInner>\n        <div role=\"listbox\">\n            <ng-content select=\"fd-token\"></ng-content>\n        </div>\n\n        <ng-container *ngIf=\"_showOverflowPopover && (compact || compactCollapse); else moreElement\">\n            <ng-container *ngTemplateOutlet=\"tokensOverflow\"></ng-container>\n        </ng-container>\n\n        <ng-content select=\"[fd-form-control]\"></ng-content>\n    </div>\n    <span fd-input-group-addon *ngIf=\"glyph\" #inputGroupAddOn [button]=\"true\" placement=\"after\">\n        <button\n            fd-button\n            [class]=\"compact ? 'fd-tokenizer-addon--compact' : 'fd-tokenizer-addon'\"\n            fdType=\"transparent\"\n            [glyph]=\"glyph\"\n            type=\"button\"\n        ></button>\n    </span>\n</div>\n\n<ng-template #tokensOverflow>\n    <fd-popover placement=\"bottom-start\" title=\"\" [noArrow]=\"false\" [focusTrapped]=\"true\" [focusAutoCapture]=\"true\">\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"moreElement\"></ng-container>\n        </fd-popover-control>\n\n        <fd-popover-body>\n            <ul fd-list class=\"fd-tokenizer__overflow-list\">\n                <li fd-list-item class=\"fd-tokenizer__overflow-list-item\" *ngFor=\"let token of _hiddenTokens\">\n                    <ng-container #viewContainer></ng-container>\n\n                    <span\n                        *ngIf=\"!token.readOnly\"\n                        class=\"fd-token__close\"\n                        role=\"button\"\n                        [attr.aria-label]=\"token.deleteButtonLabel\"\n                        (click)=\"token.closeClickHandler($event)\"\n                    ></span>\n                </li>\n            </ul>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template #moreElement>\n    <span\n        (click)=\"moreClicked()\"\n        *ngIf=\"\n            (moreTokensLeft.length > 0 || moreTokensRight.length > 0 || hiddenCozyTokenCount > 0) &&\n            !open &&\n            !_tokenizerHasFocus\n        \"\n        class=\"fd-tokenizer-more\"\n        role=\"button\"\n        tabindex=\"0\"\n    >\n        <ng-container *ngIf=\"compact || compactCollapse\">\n            {{ moreTokensLeft.length + moreTokensRight.length }} {{ moreTerm }}\n        </ng-container>\n        <ng-container *ngIf=\"!compact && !compactCollapse\"> {{ hiddenCozyTokenCount }} {{ moreTerm }} </ng-container>\n    </span>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.24.2\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-tokenizer{-webkit-box-sizing:border-box;-webkit-box-shadow:none;-moz-appearance:none;-webkit-appearance:none;align-items:center;appearance:none;background:var(--sapField_BackgroundStyle);background-color:var(--sapField_Background);border:none;border-radius:var(--sapField_BorderCornerRadius);box-shadow:none;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapField_TextColor);cursor:text;display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;height:2.25rem;height:auto;line-height:var(--sapContent_LineHeight);margin:0;min-height:2.25rem;min-width:2.75rem;outline:none;overflow:hidden;padding:0;text-overflow:ellipsis;text-shadow:var(--fdInput_Text_Shadow);white-space:nowrap;width:100%;z-index:1}.fd-tokenizer:after,.fd-tokenizer:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer::placeholder{color:var(--sapField_PlaceholderTextColor);font-style:var(--fdPlaceholder_Font_Style)}.fd-tokenizer::selection{background-color:var(--sapSelectedColor);color:var(--sapContent_ContrastTextColor)}.fd-tokenizer::-ms-clear{display:none}.fd-tokenizer.is-hover,.fd-tokenizer:hover{-webkit-box-shadow:var(--fdInput_Box_Shadow_Hover);background:var(--sapField_Hover_BackgroundStyle);background-color:var(--sapField_Hover_Background);border-color:var(--sapField_Hover_BorderColor);box-shadow:var(--fdInput_Box_Shadow_Hover)}.fd-tokenizer.is-focus,.fd-tokenizer:focus{background:var(--sapField_Focus_Background);outline-color:var(--fdInput_Outline_Color);outline-offset:var(--fdInput_Outline_Offset)}.fd-tokenizer.is-hover,.fd-tokenizer:hover{box-shadow:none}.fd-tokenizer__inner{-ms-overflow-style:none;-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:end;-ms-flex-pack:end;align-items:center;display:flex;float:right;justify-content:flex-end;overflow:hidden;padding:0 .3125rem;scrollbar-width:none;white-space:nowrap;width:100%}.fd-tokenizer__inner::-webkit-scrollbar{display:none}.fd-tokenizer .fd-token{margin-right:.3125rem;max-width:calc(100% - 3.3125rem)}.fd-tokenizer .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);cursor:pointer;display:inline-block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-tokenizer__indicator:after,.fd-tokenizer__indicator:before{box-sizing:inherit;font-size:inherit}.fd-tokenizer .fd-tokenizer__input{background:transparent}.fd-tokenizer .fd-tokenizer__input.fd-input{border:none;min-width:3rem;padding:0}.fd-tokenizer .fd-tokenizer__input:first-child{padding:0 .3125rem}.fd-tokenizer .fd-tokenizer__input:last-child{flex-basis:100%}.fd-tokenizer .fd-tokenizer__input.is-focus,.fd-tokenizer .fd-tokenizer__input:focus{-webkit-box-shadow:none;background:none;background-color:transparent;border:none;box-shadow:none;outline:none;z-index:5}.fd-tokenizer .fd-tokenizer__input.is-hover,.fd-tokenizer .fd-tokenizer__input:hover{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer.is-focus,.fd-tokenizer:focus{-webkit-box-shadow:none;border:none;box-shadow:none;outline-color:var(--sapContent_FocusColor);outline-offset:-.0625rem;outline-style:var(--sapContent_FocusStyle);outline-width:var(--sapContent_FocusWidth);z-index:5}.fd-tokenizer--compact .fd-tokenizer__inner{padding:0 .25rem}.fd-tokenizer--compact .fd-tokenizer__input.fd-input{min-width:2rem}.fd-tokenizer--compact .fd-tokenizer__input:first-child{padding:0 .25rem}.fd-tokenizer--compact .fd-token{margin-right:.25rem;max-width:calc(100% - 2.25rem)}.fd-tokenizer--compact .fd-token[dir=rtl],[dir=rtl] .fd-tokenizer--compact .fd-token{margin:0 0 0 .3125rem}.fd-tokenizer--readonly{background-color:var(--sapField_ReadOnly_Background);overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__inner{overflow:visible}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true],.fd-tokenizer--readonly .fd-tokenizer__input[readonly]{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none}.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly.is-focus,.fd-tokenizer--readonly .fd-tokenizer__input.is-readonly:focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[aria-readonly=true]:focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly].is-focus,.fd-tokenizer--readonly .fd-tokenizer__input[readonly]:focus{-webkit-box-shadow:none;background:none;background-color:transparent;box-shadow:none;z-index:5}.fd-tokenizer--scrollable .fd-tokenizer__inner{justify-content:normal;overflow:scroll}.fd-tokenizer .fd-token{max-width:inherit}input.fd-input.fd-tokenizer__input{background-color:transparent;margin-right:1px;border:none;outline:none}.fd-tokenizer-more{padding-right:.5rem}[dir=rtl] .fd-tokenizer-more,.fd-tokenizer-more[dir=rtl]{padding-left:.5rem;padding-right:0}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon{height:2.25rem}.fd-input-group__addon--button .fd-input-group__button.fd-tokenizer-addon--compact{height:1.625rem}.fd-tokenizer__overflow-list-item{display:flex;justify-content:space-between}\n"] }]
         }], ctorParameters: function () {
         return [{ type: i1.ContentDensityObserver }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i2.RtlService, decorators: [{
                         type: Optional
@@ -696,9 +716,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.2.4", ngImpor
         buildComponentCssClass: [], keyDown: [{
                 type: HostListener,
                 args: ['keydown', ['$event']]
-            }], onResize: [{
-                type: HostListener,
-                args: ['window:resize', []]
             }] } });
 
 class TokenizerInputDirective {