@fundamental-ngx/core 0.33.4 → 0.33.5-rc.11

package/fesm2020/fundamental-ngx-core-datetime-picker.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"fundamental-ngx-core-datetime-picker.mjs","sources":["../../../../libs/core/src/lib/datetime-picker/errors.ts","../../../../libs/core/src/lib/datetime-picker/datetime-picker.component.ts","../../../../libs/core/src/lib/datetime-picker/datetime-picker.component.html","../../../../libs/core/src/lib/datetime-picker/datetime-picker.module.ts","../../../../libs/core/src/lib/datetime-picker/fundamental-ngx-core-datetime-picker.ts"],"sourcesContent":["export function createMissingDateImplementationError(provider: string): Error {\n    return Error(\n        `FdDatetimePicker: No provider found for ${provider}. You must import one of the following ` +\n            `modules at your application root: FdDatetimeModule, or provide a ` +\n            `custom implementation.`\n    );\n}\n","import {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Input,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n    Inject,\n    OnChanges,\n    AfterViewInit\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';\nimport { Subject, Subscription } from 'rxjs';\nimport { filter, takeUntil } from 'rxjs/operators';\n\nimport { Placement, SpecialDayRule, FormStates } from '@fundamental-ngx/core/shared';\nimport { DatetimeAdapter, DateTimeFormats, DATE_TIME_FORMATS } from '@fundamental-ngx/core/datetime';\nimport { CalendarComponent, DaysOfWeek, FdCalendarView, CalendarYearGrid } from '@fundamental-ngx/core/calendar';\nimport { PopoverFormMessageService } from '@fundamental-ngx/core/form';\nimport { PopoverService } from '@fundamental-ngx/core/popover';\nimport { ContentDensityService } from '@fundamental-ngx/core/utils';\nimport { InputGroupInputDirective } from '@fundamental-ngx/core/input-group';\n\nimport { createMissingDateImplementationError } from './errors';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\n\n/**\n * The datetime picker component is an opinionated composition of the fd-popover,\n * fd-calendar and fd-time components to accomplish the UI pattern for picking a date and time.\n * Supports Angular Forms.\n * ```html\n * <fd-date-time-picker [(ngModel)]=\"dateTime\"></fd-date-time-picker>\n * ```\n */\n@Component({\n    selector: 'fd-datetime-picker',\n    templateUrl: './datetime-picker.component.html',\n    styleUrls: ['./datetime-picker.component.scss'],\n    host: {\n        '(blur)': 'handleOnTouched()'\n    },\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => DatetimePickerComponent),\n            multi: true\n        },\n        {\n            provide: NG_VALIDATORS,\n            useExisting: forwardRef(() => DatetimePickerComponent),\n            multi: true\n        },\n        PopoverFormMessageService,\n        PopoverService\n    ],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DatetimePickerComponent<D>\n    implements OnInit, OnDestroy, OnChanges, AfterViewInit, ControlValueAccessor, Validator\n{\n    /** Placeholder for the inner input element. */\n    @Input()\n    placeholder = '';\n\n    /** Whether the component should be in compact mode. */\n    @Input()\n    compact?: boolean;\n\n    /**\n     *  The placement of the popover. It can be one of: top, top-start, top-end, bottom,\n     *  bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end.\n     */\n    @Input()\n    placement: Placement = 'bottom-start';\n\n    /** The element to which the popover should be appended. */\n    @Input()\n    appendTo: ElementRef;\n\n    /** Whether the component is disabled. */\n    @Input()\n    disabled: boolean;\n\n    /** Id attribute for input element inside DateTimePicker component */\n    @Input()\n    inputId: string;\n\n    /** If it is mandatory field */\n    @Input()\n    required = false;\n\n    /**\n     * Whether the time component should be meridian (am/pm).\n     * Default value is based on the current locale format option\n     * */\n    @Input()\n    meridian: boolean;\n\n    /**\n     * Whether the time component shows seconds.\n     * Default value is based on the current locale format option\n     * */\n    @Input()\n    displaySeconds: boolean;\n\n    /** Text displayed in message */\n    @Input()\n    set message(message: string) {\n        this._message = message;\n        this._popoverFormMessage.message = message;\n    }\n    /** @hidden */\n    _message: string = null;\n\n    /** The trigger events that will open/close the message box.\n     *  Accepts any [HTML DOM Events](https://www.w3schools.com/jsref/dom_obj_event.asp). */\n    @Input()\n    set messageTriggers(triggers: string[]) {\n        this._messageTriggers = triggers;\n        this._popoverFormMessage.triggers = triggers;\n    }\n    /** @hidden */\n    _messageTriggers: string[] = ['focusin', 'focusout'];\n\n    /**\n     * Whether the time component shows minutes.\n     * Default value is based on the current locale format option\n     * */\n    @Input()\n    displayMinutes: boolean;\n\n    /**\n     * Whether the time component shows hours.\n     * Default value is based on the current locale format option\n     * */\n    @Input()\n    displayHours: boolean;\n\n    /** Whether to perform visual validation on the picker input. */\n    @Input()\n    useValidation = true;\n\n    /** Current selected date. Two-way binding is supported. */\n    @Input()\n    date: D;\n\n    /** Whether the popover is open. Two-way binding is supported. */\n    @Input()\n    isOpen = false;\n\n    /** The disableFunction for the calendar. */\n    @Input()\n    startingDayOfWeek: DaysOfWeek = 1;\n\n    /** Actually shown active view one of 'day' | 'month' | 'year' in calendar component*/\n    @Input()\n    public activeView: FdCalendarView = 'day';\n\n    /** Aria label for the datetime picker input. */\n    @Input()\n    datetimeInputLabel = 'Datetime input';\n\n    /** Aria label for the button to show/hide the calendar. */\n    @Input()\n    displayDatetimeToggleLabel = 'Display calendar toggle';\n\n    /** Whether a null input is considered valid. */\n    @Input()\n    allowNull = true;\n\n    /**\n     * @Input when set to true time component will use 2 digits for each number.\n     * For example 9 will become 09\n     * but 12 will be kept as 12.\n     * Only uses by time component and does not change input format\n     */\n    @Input() keepTwoDigitsTime = false;\n\n    /**\n     *  The state of the form control - applies css classes.\n     *  Also this is applied to message.\n     *  Can be `success`, `error`, `warning`, `information` or blank for default.\n     */\n    @Input()\n    set state(state: FormStates) {\n        this._state = state;\n        this._popoverFormMessage.messageType = state;\n    }\n    get state(): FormStates {\n        if (this._state == null && this.useValidation && this.isInvalidDateInput) {\n            return 'error';\n        }\n        return this._state;\n    }\n    /** @hidden */\n    private _state: FormStates = null;\n\n    /**\n     * Whether AddOn Button should be focusable\n     * @default true\n     */\n    @Input()\n    buttonFocusable = true;\n\n    /**\n     * Special days mark, it can be used by passing array of object with\n     * Special day number, list 1-20 [class:`fd-calendar__special-day--{{number}}`] is available there:\n     * https://sap.github.io/fundamental-styles/components/calendar.html calendar special days section\n     * Rule accepts method with FdDate object as a parameter. ex:\n     * `rule: (fdDate: FdDate) => fdDate.getDay() === 1`, which will mark all sundays as special day.\n     */\n    @Input()\n    specialDaysRules: SpecialDayRule<D>[] = [];\n\n    /**\n     * Object to customize year grid,\n     * Row, Columns and method to display year can be modified\n     */\n    @Input()\n    yearGrid: CalendarYearGrid = {\n        rows: 4,\n        cols: 5\n    };\n\n    /**\n     * Object to customize aggregated year grid,\n     * Row, Columns and method to display year can be modified\n     */\n    @Input()\n    aggregatedYearGrid: CalendarYearGrid = {\n        rows: 4,\n        cols: 3\n    };\n\n    /**\n     * Whether user wants to mark sunday/saturday with `fd-calendar__item--weekend` class\n     */\n    @Input()\n    markWeekends = true;\n\n    /** @Input Whether to show spinner buttons */\n    @Input()\n    spinnerButtons = true;\n\n    /**\n     * Whether user wants to show week numbers next to days\n     */\n    @Input()\n    showWeekNumbers = true;\n\n    /** Whether or not to show the datetime picker footer with OK/cancel buttons. */\n    @Input()\n    showFooter = true;\n\n    /**\n     * Whether to recalculate value from the input as user types or on blur.\n     * By default, updates the value as user types.\n     * @default false\n     */\n    @Input()\n    set processInputOnBlur(v: boolean) {\n        this._processInputOnBlur = coerceBooleanProperty(v);\n    }\n    get processInputOnBlur(): boolean {\n        return this._processInputOnBlur;\n    }\n\n    /** @hidden */\n    _processInputOnBlur = false;\n\n    /** Event emitted when the state of the isOpen property changes. */\n    @Output()\n    isOpenChange = new EventEmitter<boolean>();\n\n    /** Event thrown every time calendar active view is changed */\n    @Output()\n    public readonly activeViewChange: EventEmitter<FdCalendarView> = new EventEmitter<FdCalendarView>();\n\n    /** Event emitted when the date changes. This can be a time or day change. */\n    @Output()\n    readonly dateChange: EventEmitter<D> = new EventEmitter<D>();\n\n    /** Event emitted when the day changes from the calendar. */\n    @Output()\n    readonly calendarChange: EventEmitter<D> = new EventEmitter<D>();\n\n    /** Event emitted when the time changes from the time component. */\n    @Output()\n    readonly timeChange: EventEmitter<D> = new EventEmitter<D>();\n\n    /** Event emitted when popover closes. */\n    @Output()\n    // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n    readonly onClose: EventEmitter<void> = new EventEmitter<void>();\n\n    /** Event emitted when datepicker changes it's \"touched\" state. */\n    @Output()\n    readonly touched: EventEmitter<void> = new EventEmitter<void>();\n\n    /** Indicates when datetime input is in invalid state. */\n    get isInvalidDateInput(): boolean {\n        return this._isInvalidDateInput && this._touched;\n    }\n\n    /** @hidden Reference to the inner calendar component. */\n    @ViewChild(CalendarComponent)\n    _calendarComponent: CalendarComponent<D>;\n\n    /** @hidden */\n    @ViewChild('inputGroupComponent', { read: ElementRef })\n    _inputGroupElement: ElementRef;\n\n    /** @hidden */\n    @ViewChild(InputGroupInputDirective, { read: ElementRef })\n    _inputElement: ElementRef;\n\n    /**\n     * @hidden\n     * Date of the input field. Internal use.\n     * For programmatic selection, use two-way binding on the date input.\n     */\n    _inputFieldDate: string = null;\n\n    /** @hidden */\n    _isInvalidDateInput = false;\n\n    /** @hidden The temporary Time object for use before 'OK' is pressed. Internal use. */\n    _tempTime: D;\n\n    /** @hidden The temporary CalendarDay object for use before 'OK' is pressed. Internal use. */\n    _tempDate: D;\n\n    /** @hidden */\n    _meridian: boolean;\n\n    /** @hidden */\n    _displaySeconds: boolean;\n\n    /** @hidden */\n    _displayMinutes: boolean;\n\n    /** @hidden */\n    _displayHours: boolean;\n\n    /** @hidden */\n    private readonly _onDestroy$: Subject<void> = new Subject<void>();\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    private _touched = false;\n\n    /** @hidden */\n    onChange: (value: D) => void = () => {};\n\n    /** @hidden */\n    onTouched = (): void => {};\n\n    /**\n     * Function used to disable certain dates in the calendar.\n     * @param fdDate FdDate\n     */\n    @Input()\n    disableFunction: (value: D) => boolean = () => false;\n\n    /** @hidden */\n    constructor(\n        private _elRef: ElementRef,\n        private _changeDetRef: ChangeDetectorRef,\n        @Optional() private _contentDensityService: ContentDensityService,\n        // Use @Optional to avoid angular injection error message and throw our own which is more precise one\n        @Optional() private _dateTimeAdapter: DatetimeAdapter<D>,\n        @Optional() @Inject(DATE_TIME_FORMATS) private _dateTimeFormats: DateTimeFormats,\n        private _popoverFormMessage: PopoverFormMessageService\n    ) {\n        if (!this._dateTimeAdapter) {\n            throw createMissingDateImplementationError('DateTimeAdapter');\n        }\n        if (!this._dateTimeFormats) {\n            throw createMissingDateImplementationError('DATE_TIME_FORMATS');\n        }\n\n        // default model value\n        this.date = _dateTimeAdapter.now();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes): void {\n        if (changes.date) {\n            this._setTempDateTime();\n        }\n\n        if (['displayHours', 'displayMinutes', 'displaySeconds', 'meridian'].some((input) => input in changes)) {\n            this._calculateTimeOptions();\n        }\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        if (this.date) {\n            this._setTempDateTime();\n        }\n\n        this._calculateTimeOptions();\n\n        this._dateTimeAdapter.localeChanges\n            .pipe(\n                takeUntil(this._onDestroy$),\n                filter(() => this._inputFieldDate !== '')\n            )\n            .subscribe(() => {\n                this._setInput(this.date);\n                this._calculateTimeOptions();\n                this._changeDetRef.detectChanges();\n            });\n\n        if (this.compact === undefined && this._contentDensityService) {\n            this._subscriptions.add(\n                this._contentDensityService._isCompactDensity.subscribe((isCompact) => {\n                    this.compact = isCompact;\n                    this._changeDetRef.markForCheck();\n                })\n            );\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n        this._onDestroy$.next();\n        this._onDestroy$.complete();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._InitialiseVariablesInMessageService();\n        // update bindings after rendering\n        // is needed to preperly reflect error state\n        setTimeout(() => {\n            this._changeDetRef.markForCheck();\n        });\n    }\n\n    /**\n     * @hidden\n     * Function that implements Validator Interface, adds validation support for forms\n     */\n    validate(): { [key: string]: any } {\n        return this.isCurrentModelValid() && !this._isInvalidDateInput\n            ? null\n            : {\n                  dateValidation: {\n                      valid: false\n                  }\n              };\n    }\n\n    /** Toggles the popover. */\n    togglePopover(): void {\n        this.handleOnTouched();\n        if (this.isOpen) {\n            this.closePopover();\n        } else {\n            this.openPopover();\n        }\n    }\n\n    /**\n     * Method that handles calendar active view change and throws event.\n     */\n    handleCalendarActiveViewChange(activeView: FdCalendarView): void {\n        this.activeViewChange.emit(activeView);\n    }\n\n    /** Method that handles blur events on datetime picker input */\n    handleOnTouched(event?: FocusEvent): void {\n        this._touched = true;\n        this.onTouched();\n        this.touched.next();\n        if (event) {\n            this.handleInputChange((<HTMLInputElement>event.target).value, false);\n        }\n    }\n\n    /** Opens the popover. */\n    openPopover(): void {\n        if (!this.isOpen && !this.disabled) {\n            this.handleOnTouched();\n            this.isOpen = true;\n            this._onOpenStateChanged(this.isOpen);\n        }\n    }\n\n    /** Closes the popover and refresh model */\n    closePopover(): void {\n        if (this.isOpen) {\n            this.onClose.emit();\n            this.isOpen = false;\n            this._onOpenStateChanged(this.isOpen);\n        }\n    }\n\n    /** @hidden */\n    setInvalidDateInputHandler(isInvalid: boolean): void {\n        this._isInvalidDateInput = isInvalid;\n    }\n\n    /** @hidden */\n    registerOnChange(fn: (selected: any) => { void }): void {\n        this.onChange = fn;\n    }\n\n    /** @hidden */\n    registerOnTouched(fn: any): void {\n        this.onTouched = fn;\n    }\n\n    /** @hidden */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n        this._changeDetRef.detectChanges();\n    }\n\n    /**\n     * @hidden\n     * Function that provides support for ControlValueAccessor that allows to use [(ngModel)] or forms\n     */\n    writeValue(selected: D): void {\n        this.date = selected;\n        this._isInvalidDateInput = !this._isModelValid(this.date);\n        if (this.isCurrentModelValid()) {\n            this._setTempDateTime();\n            this._refreshCurrentlyDisplayedCalendarDate(this.date);\n        }\n        this._setInput(this.date);\n    }\n\n    /**\n     * @hidden\n     * Method that is triggered by events from calendar component, when there is selected date changed.\n     * If invalid time model is detected, it takes time model data from TimeComponent.\n     */\n    handleDateChange(date: D): void {\n        this._tempDate = date;\n        if (!this.showFooter) {\n            this.submit();\n        }\n    }\n\n    /**\n     * @hidden\n     * Method that is triggered by events from time component, when there is selected time changed\n     */\n    handleTimeChange(time: D): void {\n        this._tempTime = time;\n        if (!this.showFooter) {\n            this.submit();\n        }\n    }\n\n    /**\n     * @hidden\n     * Method that is triggered when 'OK' button is pressed.\n     */\n    submit(): void {\n        const currentDate = this._tempDate;\n        const currentTime = this._tempTime;\n\n        this.date = this._dateTimeAdapter.setTime(\n            currentDate,\n            this._dateTimeAdapter.getHours(currentTime),\n            this._dateTimeAdapter.getMinutes(currentTime),\n            this._dateTimeAdapter.getSeconds(currentTime)\n        );\n\n        this._isInvalidDateInput = !this.isCurrentModelValid();\n\n        this._setInput(this.date);\n\n        this.onChange(this.date);\n\n        if (this.showFooter) {\n            this.closePopover();\n            this._changeDetRef.detectChanges();\n        }\n    }\n\n    /**\n     * @hidden\n     * Function that is called when 'Cancel' button is pressed.\n     */\n    cancel(): void {\n        this._tempDate = this.date;\n        this._tempTime = this.date;\n        this.closePopover();\n    }\n\n    /**\n     * @hidden\n     * Looks like no one uses it. Should be removed?\n     */\n    focusArrowLeft(): void {\n        if (this._elRef.nativeElement.querySelector('#' + this._calendarComponent.id + '-left-arrow')) {\n            this._elRef.nativeElement.querySelector('#' + this._calendarComponent.id + '-left-arrow').focus();\n        }\n    }\n\n    /**\n     * @hidden\n     * Method, which is responsible for transforming string to datetime, depending on type or\n     * validation the results are different. It also changes to state of _isInvalidDateInput.\n     */\n    handleInputChange(inputStr: string, isTypeEvent: boolean): void {\n        if ((isTypeEvent && this.processInputOnBlur) || (!isTypeEvent && !this.processInputOnBlur)) {\n            // if processInputOnBlur === true, ignore type event\n            // if processInputOnBlur === false, ignore blur/enter event\n            return;\n        }\n        this._inputFieldDate = inputStr ?? '';\n        if (!inputStr) {\n            this._isInvalidDateInput = !this.allowNull;\n            this.onChange(null);\n            return;\n        }\n        this.date = this._dateTimeAdapter.parse(inputStr, this._dateTimeFormats.parse.dateTimeInput);\n        this._isInvalidDateInput = !this._isModelValid(this.date);\n\n        if (!this._isInvalidDateInput) {\n            this._setTempDateTime();\n            this._refreshCurrentlyDisplayedCalendarDate(this.date);\n        }\n        this.onChange(this.date);\n    }\n\n    /** @hidden */\n    _changeMessageVisibility(): void {\n        if (this.isOpen) {\n            this._popoverFormMessage.hide();\n        } else {\n            this._popoverFormMessage.show();\n        }\n    }\n\n    /** @hidden */\n    _onOpenStateChanged(isOpen: boolean): void {\n        this.isOpenChange.emit(isOpen);\n        this._changeMessageVisibility();\n        // focus input control every time popup is closed\n        if (!isOpen && this._inputElement) {\n            this._inputElement.nativeElement.focus();\n        }\n        // focus calendar cell on opening\n        if (isOpen && this._calendarComponent) {\n            this._calendarComponent.initialFocus();\n        }\n    }\n\n    /** Method that provides information if model selected date/dates have properly types and are valid */\n    isCurrentModelValid(): boolean {\n        return this._isModelValid(this.date);\n    }\n\n    /** Method that provides information if FdDateTime passed as arg has properly types and is valid */\n    private _isModelValid(date: D): boolean {\n        return this._dateTimeAdapter.isValid(date);\n    }\n\n    private _setInput(dateTime: D): void {\n        this._inputFieldDate = dateTime && this._isModelValid ? this._formatDateTime(dateTime) : '';\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    private _refreshCurrentlyDisplayedCalendarDate(date: D): void {\n        if (this._calendarComponent) {\n            this._calendarComponent.setCurrentlyDisplayed(date);\n        }\n    }\n\n    /**\n     * @hidden\n     * Format date time entity.\n     */\n    private _formatDateTime(dateTime: D): string {\n        const formattedDate: string = this._dateTimeAdapter.format(\n            dateTime,\n            this._dateTimeFormats.display.dateTimeInput\n        );\n        return formattedDate || '';\n    }\n\n    /** @hidden */\n    private _InitialiseVariablesInMessageService(): void {\n        this._popoverFormMessage.init(this._inputGroupElement);\n        this._popoverFormMessage.message = this._message;\n        this._popoverFormMessage.triggers = this._messageTriggers;\n        this._popoverFormMessage.messageType = this._state;\n    }\n\n    /** @hidden */\n    private _setTempDateTime(): void {\n        this._tempDate = this.date;\n        this._tempTime = this.date;\n    }\n\n    /** @hidden */\n    private _calculateTimeOptions(): void {\n        const format = this._dateTimeFormats.display.dateTimeInput;\n\n        // default meridian option based on format option\n        this._meridian =\n            this.meridian != null ? this.meridian : this._dateTimeAdapter.isTimeFormatIncludesDayPeriod(format);\n\n        // default seconds option based on format option\n        this._displaySeconds =\n            this.displaySeconds != null\n                ? this.displaySeconds\n                : this._dateTimeAdapter.isTimeFormatIncludesSeconds(format);\n\n        // default minutes option based on format option\n        this._displayMinutes =\n            this.displayMinutes != null\n                ? this.displayMinutes\n                : this._dateTimeAdapter.isTimeFormatIncludesMinutes(format);\n\n        // default hours option based on format option\n        this._displayHours =\n            this.displayHours != null ? this.displayHours : this._dateTimeAdapter.isTimeFormatIncludesHours(format);\n    }\n}\n","<div class=\"fd-datetime\">\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [placement]=\"placement\"\n        [appendTo]=\"appendTo\"\n    >\n        <fd-popover-control>\n            <fd-input-group\n                #inputGroupComponent\n                [compact]=\"compact\"\n                [state]=\"state\"\n                [disabled]=\"disabled\"\n                [isControl]=\"true\"\n                [button]=\"true\"\n                [buttonFocusable]=\"buttonFocusable\"\n                glyph=\"date-time\"\n                [isExpanded]=\"isOpen\"\n                [glyphAriaLabel]=\"displayDatetimeToggleLabel\"\n                [iconTitle]=\"displayDatetimeToggleLabel\"\n                (addOnButtonClicked)=\"togglePopover()\"\n            >\n                <input\n                    type=\"text\"\n                    class=\"fd-input\"\n                    fd-input-group-input\n                    [attr.aria-label]=\"datetimeInputLabel\"\n                    [attr.id]=\"inputId\"\n                    [attr.aria-required]=\"required\"\n                    [placeholder]=\"placeholder\"\n                    [compact]=\"compact\"\n                    [disabled]=\"disabled\"\n                    [ngModel]=\"_inputFieldDate\"\n                    (keyup.enter)=\"handleInputChange($event.target.value, false)\"\n                    (ngModelChange)=\"handleInputChange($event, true)\"\n                    (blur)=\"handleOnTouched($event)\"\n                />\n            </fd-input-group>\n        </fd-popover-control>\n        <fd-popover-body\n            aria-labelledby=\"fd-form-message\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-hidden]=\"!isOpen\"\n            [style.display]=\"'block'\"\n        >\n            <div class=\"fd-popover__wrapper fd-datetime__wrapper\">\n                <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                    {{ _message }}\n                </fd-form-message>\n                <ng-content></ng-content>\n                <div class=\"fd-datetime__container\">\n                    <fd-calendar\n                        calType=\"single\"\n                        [activeView]=\"activeView\"\n                        [disableFunction]=\"disableFunction || null\"\n                        [selectedDate]=\"_tempDate\"\n                        [escapeFocusFunction]=\"null\"\n                        [compact]=\"compact\"\n                        [markWeekends]=\"markWeekends\"\n                        [specialDaysRules]=\"specialDaysRules\"\n                        [showWeekNumbers]=\"showWeekNumbers\"\n                        [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                        [yearGrid]=\"yearGrid\"\n                        [startingDayOfWeek]=\"startingDayOfWeek\"\n                        (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                        (selectedDateChange)=\"handleDateChange($event)\"\n                        (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n                    ></fd-calendar>\n                    <div class=\"fd-datetime__separator\"></div>\n                    <fd-time\n                        *ngIf=\"isOpen\"\n                        [disabled]=\"disabled\"\n                        [keepTwoDigits]=\"keepTwoDigitsTime\"\n                        [ngModel]=\"_tempTime\"\n                        [compact]=\"compact\"\n                        [spinnerButtons]=\"spinnerButtons\"\n                        [meridian]=\"_meridian\"\n                        [displaySeconds]=\"_displaySeconds\"\n                        [displayMinutes]=\"_displayMinutes\"\n                        [displayHours]=\"_displayHours\"\n                        (ngModelChange)=\"handleTimeChange($event)\"\n                    ></fd-time>\n                </div>\n                <div fd-popover-body-footer *ngIf=\"showFooter\">\n                    <div fd-bar barDesign=\"footer\" [cozy]=\"!compact\">\n                        <div fd-bar-right>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"emphasized\"\n                                    label=\"OK\"\n                                    [compact]=\"compact\"\n                                    (click)=\"submit()\"\n                                ></button>\n                            </fd-bar-element>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [compact]=\"compact\"\n                                    label=\"Cancel\"\n                                    (click)=\"cancel()\"\n                                ></button>\n                            </fd-bar-element>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport { PopoverModule } from '@fundamental-ngx/core/popover';\nimport { CalendarModule } from '@fundamental-ngx/core/calendar';\nimport { FormsModule } from '@angular/forms';\nimport { DatetimePickerComponent } from './datetime-picker.component';\nimport { TimeModule } from '@fundamental-ngx/core/time';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { InputGroupModule } from '@fundamental-ngx/core/input-group';\nimport { BarModule } from '@fundamental-ngx/core/bar';\nimport { FormMessageModule } from '@fundamental-ngx/core/form';\n\n@NgModule({\n    declarations: [DatetimePickerComponent],\n    imports: [\n        CommonModule,\n        IconModule,\n        PopoverModule,\n        CalendarModule,\n        FormsModule,\n        TimeModule,\n        InputGroupModule,\n        ButtonModule,\n        BarModule,\n        FormMessageModule\n    ],\n    exports: [DatetimePickerComponent]\n})\nexport class DatetimePickerModule {}\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-datetime-picker.mjs","sources":["../../../../libs/core/src/lib/datetime-picker/errors.ts","../../../../libs/core/src/lib/datetime-picker/datetime-picker.component.ts","../../../../libs/core/src/lib/datetime-picker/datetime-picker.component.html","../../../../libs/core/src/lib/datetime-picker/datetime-picker.module.ts","../../../../libs/core/src/lib/datetime-picker/fundamental-ngx-core-datetime-picker.ts"],"sourcesContent":["export function createMissingDateImplementationError(provider: string): Error {\n    return Error(\n        `FdDatetimePicker: No provider found for ${provider}. You must import one of the following ` +\n            `modules at your application root: FdDatetimeModule, or provide a ` +\n            `custom implementation.`\n    );\n}\n","import {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    ElementRef,\n    EventEmitter,\n    forwardRef,\n    Input,\n    OnDestroy,\n    OnInit,\n    Optional,\n    Output,\n    ViewChild,\n    ViewEncapsulation,\n    Inject,\n    OnChanges,\n    AfterViewInit\n} from '@angular/core';\nimport { ControlValueAccessor, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator } from '@angular/forms';\nimport { Subject, Subscription } from 'rxjs';\nimport { filter, takeUntil } from 'rxjs/operators';\n\nimport { Placement, SpecialDayRule, FormStates } from '@fundamental-ngx/core/shared';\nimport { DatetimeAdapter, DateTimeFormats, DATE_TIME_FORMATS } from '@fundamental-ngx/core/datetime';\nimport { CalendarComponent, DaysOfWeek, FdCalendarView, CalendarYearGrid } from '@fundamental-ngx/core/calendar';\nimport { PopoverFormMessageService } from '@fundamental-ngx/core/form';\nimport { PopoverService } from '@fundamental-ngx/core/popover';\nimport { ContentDensityService } from '@fundamental-ngx/core/utils';\nimport { InputGroupInputDirective } from '@fundamental-ngx/core/input-group';\n\nimport { createMissingDateImplementationError } from './errors';\nimport { coerceBooleanProperty } from '@angular/cdk/coercion';\n\n/**\n * The datetime picker component is an opinionated composition of the fd-popover,\n * fd-calendar and fd-time components to accomplish the UI pattern for picking a date and time.\n * Supports Angular Forms.\n * ```html\n * <fd-date-time-picker [(ngModel)]=\"dateTime\"></fd-date-time-picker>\n * ```\n */\n@Component({\n    selector: 'fd-datetime-picker',\n    templateUrl: './datetime-picker.component.html',\n    styleUrls: ['./datetime-picker.component.scss'],\n    host: {\n        '(blur)': 'handleOnTouched()'\n    },\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => DatetimePickerComponent),\n            multi: true\n        },\n        {\n            provide: NG_VALIDATORS,\n            useExisting: forwardRef(() => DatetimePickerComponent),\n            multi: true\n        },\n        PopoverFormMessageService,\n        PopoverService\n    ],\n    encapsulation: ViewEncapsulation.None,\n    changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class DatetimePickerComponent<D>\n    implements OnInit, OnDestroy, OnChanges, AfterViewInit, ControlValueAccessor, Validator\n{\n    /** Placeholder for the inner input element. */\n    @Input()\n    placeholder = '';\n\n    /** Whether the component should be in compact mode. */\n    @Input()\n    compact?: boolean;\n\n    /**\n     *  The placement of the popover. It can be one of: top, top-start, top-end, bottom,\n     *  bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end.\n     */\n    @Input()\n    placement: Placement = 'bottom-start';\n\n    /** The element to which the popover should be appended. */\n    @Input()\n    appendTo: ElementRef;\n\n    /** Whether the component is disabled. */\n    @Input()\n    disabled: boolean;\n\n    /** Id attribute for input element inside DateTimePicker component */\n    @Input()\n    inputId: string;\n\n    /** If it is mandatory field */\n    @Input()\n    required = false;\n\n    /**\n     * Whether the time component should be meridian (am/pm).\n     * Default value is based on the current locale format option\n     * */\n    @Input()\n    meridian: boolean;\n\n    /**\n     * Whether the time component shows seconds.\n     * Default value is based on the current locale format option\n     * */\n    @Input()\n    displaySeconds: boolean;\n\n    /** Text displayed in message */\n    @Input()\n    set message(message: string) {\n        this._message = message;\n        this._popoverFormMessage.message = message;\n    }\n    /** @hidden */\n    _message: string = null;\n\n    /** The trigger events that will open/close the message box.\n     *  Accepts any [HTML DOM Events](https://www.w3schools.com/jsref/dom_obj_event.asp). */\n    @Input()\n    set messageTriggers(triggers: string[]) {\n        this._messageTriggers = triggers;\n        this._popoverFormMessage.triggers = triggers;\n    }\n    /** @hidden */\n    _messageTriggers: string[] = ['focusin', 'focusout'];\n\n    /**\n     * Whether the time component shows minutes.\n     * Default value is based on the current locale format option\n     * */\n    @Input()\n    displayMinutes: boolean;\n\n    /**\n     * Whether the time component shows hours.\n     * Default value is based on the current locale format option\n     * */\n    @Input()\n    displayHours: boolean;\n\n    /** Whether to perform visual validation on the picker input. */\n    @Input()\n    useValidation = true;\n\n    /** Current selected date. Two-way binding is supported. */\n    @Input()\n    date: D;\n\n    /** Whether the popover is open. Two-way binding is supported. */\n    @Input()\n    isOpen = false;\n\n    /** The disableFunction for the calendar. */\n    @Input()\n    startingDayOfWeek: DaysOfWeek = 1;\n\n    /** Actually shown active view one of 'day' | 'month' | 'year' in calendar component*/\n    @Input()\n    public activeView: FdCalendarView = 'day';\n\n    /** Aria label for the datetime picker input. */\n    @Input()\n    datetimeInputLabel = 'Datetime input';\n\n    /** Aria label for the button to show/hide the calendar. */\n    @Input()\n    displayDatetimeToggleLabel = 'Display calendar toggle';\n\n    /** Whether a null input is considered valid. */\n    @Input()\n    allowNull = true;\n\n    /**\n     * @Input when set to true time component will use 2 digits for each number.\n     * For example 9 will become 09\n     * but 12 will be kept as 12.\n     * Only uses by time component and does not change input format\n     */\n    @Input() keepTwoDigitsTime = false;\n\n    /**\n     *  The state of the form control - applies css classes.\n     *  Also this is applied to message.\n     *  Can be `success`, `error`, `warning`, `information` or blank for default.\n     */\n    @Input()\n    set state(state: FormStates) {\n        this._state = state;\n        this._popoverFormMessage.messageType = state;\n    }\n    get state(): FormStates {\n        if (this._state == null && this.useValidation && this.isInvalidDateInput) {\n            return 'error';\n        }\n        return this._state;\n    }\n    /** @hidden */\n    private _state: FormStates = null;\n\n    /**\n     * Whether AddOn Button should be focusable\n     * @default true\n     */\n    @Input()\n    buttonFocusable = true;\n\n    /**\n     * Special days mark, it can be used by passing array of object with\n     * Special day number, list 1-20 [class:`fd-calendar__special-day--{{number}}`] is available there:\n     * https://sap.github.io/fundamental-styles/components/calendar.html calendar special days section\n     * Rule accepts method with FdDate object as a parameter. ex:\n     * `rule: (fdDate: FdDate) => fdDate.getDay() === 1`, which will mark all sundays as special day.\n     */\n    @Input()\n    specialDaysRules: SpecialDayRule<D>[] = [];\n\n    /**\n     * Object to customize year grid,\n     * Row, Columns and method to display year can be modified\n     */\n    @Input()\n    yearGrid: CalendarYearGrid = {\n        rows: 4,\n        cols: 5\n    };\n\n    /**\n     * Object to customize aggregated year grid,\n     * Row, Columns and method to display year can be modified\n     */\n    @Input()\n    aggregatedYearGrid: CalendarYearGrid = {\n        rows: 4,\n        cols: 3\n    };\n\n    /**\n     * Whether user wants to mark sunday/saturday with `fd-calendar__item--weekend` class\n     */\n    @Input()\n    markWeekends = true;\n\n    /** @Input Whether to show spinner buttons */\n    @Input()\n    spinnerButtons = true;\n\n    /**\n     * Whether user wants to show week numbers next to days\n     */\n    @Input()\n    showWeekNumbers = true;\n\n    /** Whether or not to show the datetime picker footer with OK/cancel buttons. */\n    @Input()\n    showFooter = true;\n\n    /**\n     * Whether to recalculate value from the input as user types or on blur.\n     * By default, updates the value as user types.\n     * @default false\n     */\n    @Input()\n    set processInputOnBlur(v: boolean) {\n        this._processInputOnBlur = coerceBooleanProperty(v);\n    }\n    get processInputOnBlur(): boolean {\n        return this._processInputOnBlur;\n    }\n\n    /** @hidden */\n    _processInputOnBlur = false;\n\n    /** Event emitted when the state of the isOpen property changes. */\n    @Output()\n    isOpenChange = new EventEmitter<boolean>();\n\n    /** Event thrown every time calendar active view is changed */\n    @Output()\n    public readonly activeViewChange: EventEmitter<FdCalendarView> = new EventEmitter<FdCalendarView>();\n\n    /** Event emitted when the date changes. This can be a time or day change. */\n    @Output()\n    readonly dateChange: EventEmitter<D> = new EventEmitter<D>();\n\n    /** Event emitted when the day changes from the calendar. */\n    @Output()\n    readonly calendarChange: EventEmitter<D> = new EventEmitter<D>();\n\n    /** Event emitted when the time changes from the time component. */\n    @Output()\n    readonly timeChange: EventEmitter<D> = new EventEmitter<D>();\n\n    /** Event emitted when popover closes. */\n    @Output()\n    // eslint-disable-next-line @angular-eslint/no-output-on-prefix\n    readonly onClose: EventEmitter<void> = new EventEmitter<void>();\n\n    /** Event emitted when datepicker changes it's \"touched\" state. */\n    @Output()\n    readonly touched: EventEmitter<void> = new EventEmitter<void>();\n\n    /** Indicates when datetime input is in invalid state. */\n    get isInvalidDateInput(): boolean {\n        return this._isInvalidDateInput && this._touched;\n    }\n\n    /** @hidden Reference to the inner calendar component. */\n    @ViewChild(CalendarComponent)\n    _calendarComponent: CalendarComponent<D>;\n\n    /** @hidden */\n    @ViewChild('inputGroupComponent', { read: ElementRef })\n    _inputGroupElement: ElementRef;\n\n    /** @hidden */\n    @ViewChild(InputGroupInputDirective, { read: ElementRef })\n    _inputElement: ElementRef;\n\n    /**\n     * @hidden\n     * Date of the input field. Internal use.\n     * For programmatic selection, use two-way binding on the date input.\n     */\n    _inputFieldDate: string = null;\n\n    /** @hidden */\n    _isInvalidDateInput = false;\n\n    /** @hidden The temporary Time object for use before 'OK' is pressed. Internal use. */\n    _tempTime: D;\n\n    /** @hidden The temporary CalendarDay object for use before 'OK' is pressed. Internal use. */\n    _tempDate: D;\n\n    /** @hidden */\n    _meridian: boolean;\n\n    /** @hidden */\n    _displaySeconds: boolean;\n\n    /** @hidden */\n    _displayMinutes: boolean;\n\n    /** @hidden */\n    _displayHours: boolean;\n\n    /** @hidden */\n    private readonly _onDestroy$: Subject<void> = new Subject<void>();\n\n    /** @hidden */\n    private _subscriptions = new Subscription();\n\n    /** @hidden */\n    private _touched = false;\n\n    /** @hidden */\n    onChange: (value: D) => void = () => {};\n\n    /** @hidden */\n    onTouched = (): void => {};\n\n    /**\n     * Function used to disable certain dates in the calendar.\n     * @param fdDate FdDate\n     */\n    @Input()\n    disableFunction: (value: D) => boolean = () => false;\n\n    /** @hidden */\n    constructor(\n        private _elRef: ElementRef,\n        private _changeDetRef: ChangeDetectorRef,\n        @Optional() private _contentDensityService: ContentDensityService,\n        // Use @Optional to avoid angular injection error message and throw our own which is more precise one\n        @Optional() private _dateTimeAdapter: DatetimeAdapter<D>,\n        @Optional() @Inject(DATE_TIME_FORMATS) private _dateTimeFormats: DateTimeFormats,\n        private _popoverFormMessage: PopoverFormMessageService\n    ) {\n        if (!this._dateTimeAdapter) {\n            throw createMissingDateImplementationError('DateTimeAdapter');\n        }\n        if (!this._dateTimeFormats) {\n            throw createMissingDateImplementationError('DATE_TIME_FORMATS');\n        }\n\n        // default model value\n        this.date = _dateTimeAdapter.now();\n    }\n\n    /** @hidden */\n    ngOnChanges(changes): void {\n        if (changes.date) {\n            this._setTempDateTime();\n        }\n\n        if (['displayHours', 'displayMinutes', 'displaySeconds', 'meridian'].some((input) => input in changes)) {\n            this._calculateTimeOptions();\n        }\n    }\n\n    /** @hidden */\n    ngOnInit(): void {\n        if (this.date) {\n            this._setTempDateTime();\n        }\n\n        this._calculateTimeOptions();\n\n        this._dateTimeAdapter.localeChanges\n            .pipe(\n                takeUntil(this._onDestroy$),\n                filter(() => this._inputFieldDate !== '')\n            )\n            .subscribe(() => {\n                this._setInput(this.date);\n                this._calculateTimeOptions();\n                this._changeDetRef.detectChanges();\n            });\n\n        if (this.compact === undefined && this._contentDensityService) {\n            this._subscriptions.add(\n                this._contentDensityService._isCompactDensity.subscribe((isCompact) => {\n                    this.compact = isCompact;\n                    this._changeDetRef.markForCheck();\n                })\n            );\n        }\n    }\n\n    /** @hidden */\n    ngOnDestroy(): void {\n        this._subscriptions.unsubscribe();\n        this._onDestroy$.next();\n        this._onDestroy$.complete();\n    }\n\n    /** @hidden */\n    ngAfterViewInit(): void {\n        this._InitialiseVariablesInMessageService();\n        // update bindings after rendering\n        // is needed to preperly reflect error state\n        setTimeout(() => {\n            this._changeDetRef.markForCheck();\n        });\n    }\n\n    /**\n     * @hidden\n     * Function that implements Validator Interface, adds validation support for forms\n     */\n    validate(): { [key: string]: any } {\n        return this.isCurrentModelValid() && !this._isInvalidDateInput\n            ? null\n            : {\n                  dateValidation: {\n                      valid: false\n                  }\n              };\n    }\n\n    /** Toggles the popover. */\n    togglePopover(): void {\n        this.handleOnTouched();\n        if (this.isOpen) {\n            this.closePopover();\n        } else {\n            this.openPopover();\n        }\n    }\n\n    /**\n     * Method that handles calendar active view change and throws event.\n     */\n    handleCalendarActiveViewChange(activeView: FdCalendarView): void {\n        this.activeViewChange.emit(activeView);\n    }\n\n    /** Method that handles blur events on datetime picker input */\n    handleOnTouched(event?: FocusEvent): void {\n        this._touched = true;\n        this.onTouched();\n        this.touched.next();\n        if (event) {\n            this.handleInputChange((<HTMLInputElement>event.target).value, false);\n        }\n    }\n\n    /** Opens the popover. */\n    openPopover(): void {\n        if (!this.isOpen && !this.disabled) {\n            this.handleOnTouched();\n            this.isOpen = true;\n            this._onOpenStateChanged(this.isOpen);\n        }\n    }\n\n    /** Closes the popover and refresh model */\n    closePopover(): void {\n        if (this.isOpen) {\n            this.onClose.emit();\n            this.isOpen = false;\n            this._onOpenStateChanged(this.isOpen);\n        }\n    }\n\n    /** @hidden */\n    setInvalidDateInputHandler(isInvalid: boolean): void {\n        this._isInvalidDateInput = isInvalid;\n    }\n\n    /** @hidden */\n    registerOnChange(fn: (selected: any) => { void }): void {\n        this.onChange = fn;\n    }\n\n    /** @hidden */\n    registerOnTouched(fn: any): void {\n        this.onTouched = fn;\n    }\n\n    /** @hidden */\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n        this._changeDetRef.detectChanges();\n    }\n\n    /**\n     * @hidden\n     * Function that provides support for ControlValueAccessor that allows to use [(ngModel)] or forms\n     */\n    writeValue(selected: D): void {\n        this.date = selected;\n        this._isInvalidDateInput = !this._isModelValid(this.date);\n        if (this.isCurrentModelValid()) {\n            this._setTempDateTime();\n            this._refreshCurrentlyDisplayedCalendarDate(this.date);\n        }\n        this._setInput(this.date);\n    }\n\n    /**\n     * @hidden\n     * Method that is triggered by events from calendar component, when there is selected date changed.\n     * If invalid time model is detected, it takes time model data from TimeComponent.\n     */\n    handleDateChange(date: D): void {\n        this._tempDate = date;\n        if (!this.showFooter) {\n            this.submit();\n        }\n    }\n\n    /**\n     * @hidden\n     * Method that is triggered by events from time component, when there is selected time changed\n     */\n    handleTimeChange(time: D): void {\n        this._tempTime = time;\n        if (!this.showFooter) {\n            this.submit();\n        }\n    }\n\n    /**\n     * @hidden\n     * Method that is triggered when 'OK' button is pressed.\n     */\n    submit(): void {\n        const currentDate = this._tempDate;\n        const currentTime = this._tempTime;\n\n        this.date = this._dateTimeAdapter.setTime(\n            currentDate,\n            this._dateTimeAdapter.getHours(currentTime),\n            this._dateTimeAdapter.getMinutes(currentTime),\n            this._dateTimeAdapter.getSeconds(currentTime)\n        );\n\n        this._isInvalidDateInput = !this.isCurrentModelValid();\n\n        this._setInput(this.date);\n\n        this.onChange(this.date);\n\n        if (this.showFooter) {\n            this.closePopover();\n            this._changeDetRef.detectChanges();\n        }\n    }\n\n    /**\n     * @hidden\n     * Function that is called when 'Cancel' button is pressed.\n     */\n    cancel(): void {\n        this._tempDate = this.date;\n        this._tempTime = this.date;\n        this.closePopover();\n    }\n\n    /**\n     * @hidden\n     * Looks like no one uses it. Should be removed?\n     */\n    focusArrowLeft(): void {\n        if (this._elRef.nativeElement.querySelector('#' + this._calendarComponent.id + '-left-arrow')) {\n            this._elRef.nativeElement.querySelector('#' + this._calendarComponent.id + '-left-arrow').focus();\n        }\n    }\n\n    /**\n     * @hidden\n     * Method, which is responsible for transforming string to datetime, depending on type or\n     * validation the results are different. It also changes to state of _isInvalidDateInput.\n     */\n    handleInputChange(inputStr: string, isTypeEvent: boolean): void {\n        if ((isTypeEvent && this.processInputOnBlur) || (!isTypeEvent && !this.processInputOnBlur)) {\n            // if processInputOnBlur === true, ignore type event\n            // if processInputOnBlur === false, ignore blur/enter event\n            return;\n        }\n        this._inputFieldDate = inputStr ?? '';\n        if (!inputStr) {\n            this._isInvalidDateInput = !this.allowNull;\n            this.onChange(null);\n            return;\n        }\n        this.date = this._dateTimeAdapter.parse(inputStr, this._dateTimeFormats.parse.dateTimeInput);\n        this._isInvalidDateInput = !this._isModelValid(this.date);\n\n        if (!this._isInvalidDateInput) {\n            this._setTempDateTime();\n            this._refreshCurrentlyDisplayedCalendarDate(this.date);\n        }\n        this.onChange(this.date);\n    }\n\n    /** @hidden */\n    _changeMessageVisibility(): void {\n        if (this.isOpen) {\n            this._popoverFormMessage.hide();\n        } else {\n            this._popoverFormMessage.show();\n        }\n    }\n\n    /** @hidden */\n    _onOpenStateChanged(isOpen: boolean): void {\n        this.isOpenChange.emit(isOpen);\n        this._changeMessageVisibility();\n        // focus input control every time popup is closed\n        if (!isOpen && this._inputElement) {\n            this._inputElement.nativeElement.focus();\n        }\n        // focus calendar cell on opening\n        if (isOpen && this._calendarComponent) {\n            this._calendarComponent.initialFocus();\n        }\n    }\n\n    /** Method that provides information if model selected date/dates have properly types and are valid */\n    isCurrentModelValid(): boolean {\n        return this._isModelValid(this.date);\n    }\n\n    /** Method that provides information if FdDateTime passed as arg has properly types and is valid */\n    private _isModelValid(date: D): boolean {\n        return this._dateTimeAdapter.isValid(date);\n    }\n\n    private _setInput(dateTime: D): void {\n        this._inputFieldDate = dateTime && this._isModelValid ? this._formatDateTime(dateTime) : '';\n        this._changeDetRef.detectChanges();\n    }\n\n    /** @hidden */\n    private _refreshCurrentlyDisplayedCalendarDate(date: D): void {\n        if (this._calendarComponent) {\n            this._calendarComponent.setCurrentlyDisplayed(date);\n        }\n    }\n\n    /**\n     * @hidden\n     * Format date time entity.\n     */\n    private _formatDateTime(dateTime: D): string {\n        const formattedDate: string = this._dateTimeAdapter.format(\n            dateTime,\n            this._dateTimeFormats.display.dateTimeInput\n        );\n        return formattedDate || '';\n    }\n\n    /** @hidden */\n    private _InitialiseVariablesInMessageService(): void {\n        this._popoverFormMessage.init(this._inputGroupElement);\n        this._popoverFormMessage.message = this._message;\n        this._popoverFormMessage.triggers = this._messageTriggers;\n        this._popoverFormMessage.messageType = this._state;\n    }\n\n    /** @hidden */\n    private _setTempDateTime(): void {\n        this._tempDate = this.date;\n        this._tempTime = this.date;\n    }\n\n    /** @hidden */\n    private _calculateTimeOptions(): void {\n        const format = this._dateTimeFormats.display.dateTimeInput;\n\n        // default meridian option based on format option\n        this._meridian =\n            this.meridian != null ? this.meridian : this._dateTimeAdapter.isTimeFormatIncludesDayPeriod(format);\n\n        // default seconds option based on format option\n        this._displaySeconds =\n            this.displaySeconds != null\n                ? this.displaySeconds\n                : this._dateTimeAdapter.isTimeFormatIncludesSeconds(format);\n\n        // default minutes option based on format option\n        this._displayMinutes =\n            this.displayMinutes != null\n                ? this.displayMinutes\n                : this._dateTimeAdapter.isTimeFormatIncludesMinutes(format);\n\n        // default hours option based on format option\n        this._displayHours =\n            this.displayHours != null ? this.displayHours : this._dateTimeAdapter.isTimeFormatIncludesHours(format);\n    }\n}\n","<div class=\"fd-datetime\">\n    <fd-popover\n        [(isOpen)]=\"isOpen\"\n        (isOpenChange)=\"_onOpenStateChanged($event)\"\n        [focusTrapped]=\"true\"\n        [focusAutoCapture]=\"false\"\n        [triggers]=\"[]\"\n        [disabled]=\"disabled\"\n        [placement]=\"placement\"\n        [appendTo]=\"appendTo\"\n    >\n        <fd-popover-control>\n            <fd-input-group\n                #inputGroupComponent\n                [compact]=\"compact\"\n                [state]=\"state\"\n                [disabled]=\"disabled\"\n                [isControl]=\"true\"\n                [button]=\"true\"\n                [buttonFocusable]=\"buttonFocusable\"\n                glyph=\"date-time\"\n                [isExpanded]=\"isOpen\"\n                [glyphAriaLabel]=\"displayDatetimeToggleLabel\"\n                [iconTitle]=\"displayDatetimeToggleLabel\"\n                (addOnButtonClicked)=\"togglePopover()\"\n            >\n                <input\n                    type=\"text\"\n                    class=\"fd-input\"\n                    fd-input-group-input\n                    [attr.aria-label]=\"datetimeInputLabel\"\n                    [attr.id]=\"inputId\"\n                    [attr.aria-required]=\"required\"\n                    [placeholder]=\"placeholder\"\n                    [compact]=\"compact\"\n                    [disabled]=\"disabled\"\n                    [ngModel]=\"_inputFieldDate\"\n                    (keyup.enter)=\"handleInputChange($event.target.value, false)\"\n                    (ngModelChange)=\"handleInputChange($event, true)\"\n                    (blur)=\"handleOnTouched($event)\"\n                />\n            </fd-input-group>\n        </fd-popover-control>\n        <fd-popover-body\n            aria-labelledby=\"fd-form-message\"\n            [attr.aria-expanded]=\"isOpen\"\n            [attr.aria-hidden]=\"!isOpen\"\n            [style.display]=\"'block'\"\n        >\n            <div class=\"fd-popover__wrapper fd-datetime__wrapper\">\n                <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                    {{ _message }}\n                </fd-form-message>\n                <ng-content></ng-content>\n                <div class=\"fd-datetime__container\">\n                    <fd-calendar\n                        calType=\"single\"\n                        [activeView]=\"activeView\"\n                        [disableFunction]=\"disableFunction || null\"\n                        [selectedDate]=\"_tempDate\"\n                        [escapeFocusFunction]=\"null\"\n                        [compact]=\"compact\"\n                        [markWeekends]=\"markWeekends\"\n                        [specialDaysRules]=\"specialDaysRules\"\n                        [showWeekNumbers]=\"showWeekNumbers\"\n                        [aggregatedYearGrid]=\"aggregatedYearGrid\"\n                        [yearGrid]=\"yearGrid\"\n                        [startingDayOfWeek]=\"startingDayOfWeek\"\n                        (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n                        (selectedDateChange)=\"handleDateChange($event)\"\n                        (isValidDateChange)=\"setInvalidDateInputHandler($event)\"\n                    ></fd-calendar>\n                    <div class=\"fd-datetime__separator\"></div>\n                    <fd-time\n                        *ngIf=\"isOpen\"\n                        [disabled]=\"disabled\"\n                        [elementsAtOnce]=\"5\"\n                        [keepTwoDigits]=\"keepTwoDigitsTime\"\n                        [ngModel]=\"_tempTime\"\n                        [compact]=\"compact\"\n                        [spinnerButtons]=\"spinnerButtons\"\n                        [meridian]=\"_meridian\"\n                        [displaySeconds]=\"_displaySeconds\"\n                        [displayMinutes]=\"_displayMinutes\"\n                        [displayHours]=\"_displayHours\"\n                        (ngModelChange)=\"handleTimeChange($event)\"\n                    ></fd-time>\n                </div>\n                <div fd-popover-body-footer *ngIf=\"showFooter\">\n                    <div fd-bar barDesign=\"footer\" [cozy]=\"!compact\">\n                        <div fd-bar-right>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"emphasized\"\n                                    label=\"OK\"\n                                    [compact]=\"compact\"\n                                    (click)=\"submit()\"\n                                ></button>\n                            </fd-bar-element>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [compact]=\"compact\"\n                                    label=\"Cancel\"\n                                    (click)=\"cancel()\"\n                                ></button>\n                            </fd-bar-element>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n","import { NgModule } from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { IconModule } from '@fundamental-ngx/core/icon';\nimport { PopoverModule } from '@fundamental-ngx/core/popover';\nimport { CalendarModule } from '@fundamental-ngx/core/calendar';\nimport { FormsModule } from '@angular/forms';\nimport { DatetimePickerComponent } from './datetime-picker.component';\nimport { TimeModule } from '@fundamental-ngx/core/time';\nimport { ButtonModule } from '@fundamental-ngx/core/button';\nimport { InputGroupModule } from '@fundamental-ngx/core/input-group';\nimport { BarModule } from '@fundamental-ngx/core/bar';\nimport { FormMessageModule } from '@fundamental-ngx/core/form';\n\n@NgModule({\n    declarations: [DatetimePickerComponent],\n    imports: [\n        CommonModule,\n        IconModule,\n        PopoverModule,\n        CalendarModule,\n        FormsModule,\n        TimeModule,\n        InputGroupModule,\n        ButtonModule,\n        BarModule,\n        FormMessageModule\n    ],\n    exports: [DatetimePickerComponent]\n})\nexport class DatetimePickerModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -6,7 +6,9 @@ import { __decorate, __metadata } from 'tslib';
 import * as i10 from '@angular/forms';
 import { FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { SPACE, ENTER, DOWN_ARROW, UP_ARROW, ESCAPE, TAB } from '@angular/cdk/keycodes';
+import { SelectionModel } from '@angular/cdk/collections';
 import { BehaviorSubject, Subscription, combineLatest } from 'rxjs';
+import { takeUntil, distinctUntilChanged, map, first, startWith } from 'rxjs/operators';
 import * as i2$1 from '@fundamental-ngx/core/popover';
 import { PopoverComponent, PopoverModule } from '@fundamental-ngx/core/popover';
 import { MenuKeyboardService } from '@fundamental-ngx/core/menu';
@@ -18,15 +20,12 @@ import * as i1$1 from '@fundamental-ngx/core/utils';
 import { RangeSelector, uuidv4, KeyUtil, applyCssClass, PipeModule, AutoCompleteModule } from '@fundamental-ngx/core/utils';
 import * as i1 from '@fundamental-ngx/core/dialog';
 import { DialogModule } from '@fundamental-ngx/core/dialog';
-import { takeUntil, distinctUntilChanged, first, startWith, map, shareReplay } from 'rxjs/operators';
 import { MobileModeBase, MobileModeControl, MOBILE_MODE_CONFIG } from '@fundamental-ngx/core/mobile-mode';
 import * as i2 from '@fundamental-ngx/core/title';
 import * as i3 from '@fundamental-ngx/core/button';
 import { ButtonModule } from '@fundamental-ngx/core/button';
 import * as i4 from '@fundamental-ngx/core/bar';
 import { BarModule } from '@fundamental-ngx/core/bar';
-import { SelectionModel } from '@angular/cdk/collections';
-import { uniqBy } from 'lodash-es';
 import * as i3$1 from '@fundamental-ngx/core/input-group';
 import { InputGroupModule } from '@fundamental-ngx/core/input-group';
 import * as i5 from '@fundamental-ngx/core/form';
@@ -62,8 +61,8 @@ class MultiInputMobileComponent extends MobileModeBase {
         super.onDestroy();
     }
     /** Throw select all event, it's handled by multi input component */
-    selectAll() {
-        this._component.selectAllItems();
+    selectAll(selectAll) {
+        this._component.selectAllItems(!selectAll);
     }
     /** @hidden */
     handleDismiss() {
@@ -88,6 +87,9 @@ class MultiInputMobileComponent extends MobileModeBase {
     /** @hidden */
     _listenOnMultiInputOpenChange() {
         this._component.openChange.pipe(takeUntil(this._onDestroy$)).subscribe((isOpen) => this._toggleDialog(isOpen));
+        this._component.allItemsSelectedChange
+            .pipe(takeUntil(this._onDestroy$))
+            .subscribe((allItemsSelected) => (this.allItemsSelected = allItemsSelected));
     }
     /** @hidden */
     _open() {
@@ -102,10 +104,10 @@ class MultiInputMobileComponent extends MobileModeBase {
     }
 }
 MultiInputMobileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MultiInputMobileComponent, deps: [{ token: i0.ElementRef }, { token: i1.DialogService }, { token: MULTI_INPUT_COMPONENT }, { token: MOBILE_MODE_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiInputMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: MultiInputMobileComponent, selector: "fd-multi-input-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<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\"></ng-container>\n                    </fd-bar-element>\n                    <fd-bar-element class=\"custom-multi-input-select-all-bar-element\">\n                        <button fd-button glyph=\"multiselect-all\" fdType=\"transparent\" (click)=\"selectAll()\"></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\"></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", styles: [".custom-multi-input-select-all-bar-element{min-width:2.25rem}.custom-multi-input-mobile-control-element{width:calc(100% - 2.25rem)}.custom-multi-input-mobile-control-element .fd-multi-input-input-group-custom{width:100%}\n"], components: [{ type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { type: i2.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { type: i1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "compact", "ariaLabel", "ariaLabelledby", "id"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { type: i4.BarMiddleDirective, selector: "[fd-bar-middle]" }, { type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+MultiInputMobileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: MultiInputMobileComponent, selector: "fd-multi-input-mobile", viewQueries: [{ propertyName: "dialogTemplate", first: true, predicate: ["dialogTemplate"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<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\"></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\"></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", styles: [".custom-multi-input-select-all-bar-element{min-width:2.25rem}.custom-multi-input-mobile-control-element{width:calc(100% - 2.25rem)}.custom-multi-input-mobile-control-element .fd-multi-input-input-group-custom{width:100%}\n"], components: [{ type: i1.DialogComponent, selector: "fd-dialog", inputs: ["class", "dialogRef", "dialogConfig"] }, { type: i1.DialogHeaderComponent, selector: "fd-dialog-header" }, { type: i2.TitleComponent, selector: "h1[fd-title], h2[fd-title], h3[fd-title], h4[fd-title], h5[fd-title], h6[fd-title]", inputs: ["headerSize", "wrap"], exportAs: ["fd-title"] }, { type: i1.DialogCloseButtonComponent, selector: "[fd-dialog-close-button]", inputs: ["mobile", "title"] }, { type: i3.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { type: i1.DialogBodyComponent, selector: "fd-dialog-body" }, { type: i1.DialogFooterComponent, selector: "fd-dialog-footer" }, { type: i4.ButtonBarComponent, selector: "fd-button-bar", inputs: ["fullWidth", "fdType", "title", "compact", "ariaLabel", "ariaLabelledby", "id"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.TemplateDirective, selector: "[fdTemplate]", inputs: ["fdTemplate"] }, { type: i4.BarMiddleDirective, selector: "[fd-bar-middle]" }, { type: i4.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MultiInputMobileComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fd-multi-input-mobile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<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\"></ng-container>\n                    </fd-bar-element>\n                    <fd-bar-element class=\"custom-multi-input-select-all-bar-element\">\n                        <button fd-button glyph=\"multiselect-all\" fdType=\"transparent\" (click)=\"selectAll()\"></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\"></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", styles: [".custom-multi-input-select-all-bar-element{min-width:2.25rem}.custom-multi-input-mobile-control-element{width:calc(100% - 2.25rem)}.custom-multi-input-mobile-control-element .fd-multi-input-input-group-custom{width:100%}\n"] }]
+            args: [{ selector: 'fd-multi-input-mobile', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<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\"></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\"></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", styles: [".custom-multi-input-select-all-bar-element{min-width:2.25rem}.custom-multi-input-mobile-control-element{width:calc(100% - 2.25rem)}.custom-multi-input-mobile-control-element .fd-multi-input-input-group-custom{width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i1.DialogService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MULTI_INPUT_COMPONENT]
@@ -241,6 +243,8 @@ class MultiInputComponent {
         this.displayAddonButton = true;
         /** Event emitted, when the multi input's popover body is opened or closed */
         this.openChange = new EventEmitter();
+        /** Event emitted, when the multi input's all item checked or not */
+        this.allItemsSelectedChange = new EventEmitter();
         /** @hidden */
         this.optionItems$ = new BehaviorSubject([]);
         /** @hidden */
@@ -295,6 +299,9 @@ class MultiInputComponent {
             // resetting existing selection state, if any
             this._rangeSelector.reset();
         }));
+        this._subscriptions.add(this._getViewModel()
+            .pipe(map((viewModel) => !viewModel.displayedOptions.some((c) => !c.isSelected)))
+            .subscribe((allItemsSelected) => this.allItemsSelectedChange.emit(allItemsSelected)));
     }
     /** @hidden */
     ngOnChanges(changes) {
@@ -392,8 +399,13 @@ class MultiInputComponent {
         this._changeDetRef.detectChanges();
     }
     /** Method that selects all possible options. */
-    selectAllItems() {
-        this.selected = [...this.dropdownValues];
+    selectAllItems(selectAll) {
+        if (selectAll) {
+            this.selected = this.optionItems$.getValue().map((c) => c.value);
+        }
+        else {
+            this.selected = [];
+        }
         // On Mobile mode changes are propagated only on approve.
         this._propagateChange();
     }
@@ -439,8 +451,8 @@ class MultiInputComponent {
         }
         if (resetSearch) {
             this._resetSearchTerm();
+            this.searchInputElement.nativeElement.focus();
         }
-        this.searchInputElement.nativeElement.focus();
         // On Mobile mode changes are propagated only on approve.
         this._propagateChange();
     }
@@ -508,9 +520,9 @@ class MultiInputComponent {
      * Handle dialog dismissing, closes popover and sets backup data.
      */
     dialogDismiss(selectedBackup) {
-        this.selected = selectedBackup;
         this.openChangeHandle(false);
         this._resetSearchTerm();
+        this.selected = selectedBackup;
     }
     /**
      * Handle dialog approval, closes popover and propagates data changes.
@@ -545,8 +557,9 @@ class MultiInputComponent {
     /** @hidden */
     _selectFirstFiltered(searchTerm) {
         const filtered = this.filterFn(this.dropdownValues, searchTerm);
-        if (Array.isArray(filtered) && filtered.length > 0 && !this.includes && this.autoComplete) {
-            this._handleSelect(true, filtered[0]);
+        if (Array.isArray(filtered) && filtered.length > 0 && this.autoComplete) {
+            const optionItem = this._getOptionItem(filtered[0]);
+            this._handleSelect(true, optionItem.value);
             this._searchTermCtrl.setValue('');
             this.open = false;
             return true;
@@ -604,7 +617,10 @@ class MultiInputComponent {
             providers: [{ provide: MULTI_INPUT_COMPONENT, useValue: this }],
             parent: this._injector
         });
-        await this._dynamicComponentService.createDynamicModule({ listTemplate: this.listTemplate, controlTemplate: this.controlTemplate }, MultiInputMobileModule, MultiInputMobileComponent, this._viewContainerRef, injector);
+        await this._dynamicComponentService.createDynamicModule({
+            listTemplate: this.listTemplate,
+            controlTemplate: this.controlTemplate
+        }, MultiInputMobileModule, MultiInputMobileComponent, this._viewContainerRef, injector);
     }
     /** @hidden */
     _resetSearchTerm() {
@@ -613,53 +629,50 @@ class MultiInputComponent {
     }
     /** @hidden */
     _getOptionItem(item) {
+        const { label, value } = this._getValueAndLabel(item);
         return {
             item,
-            label: this.displayFn(item),
-            value: this.valueFn(item)
+            label,
+            value,
+            isSelected: false
         };
     }
     /** @hidden */
+    _getValueAndLabel(itemOrValue, optionItems = []) {
+        if (optionItems.length > 0) {
+            itemOrValue = optionItems.find((c) => c.value === itemOrValue)?.item ?? itemOrValue;
+        }
+        const defaultDisplay = typeof itemOrValue === 'object' ? itemOrValue[Object.keys(itemOrValue)[0]] : itemOrValue;
+        const value = this.valueFn(itemOrValue) ?? defaultDisplay;
+        const label = this.displayFn(itemOrValue) ?? defaultDisplay;
+        return { label, value };
+    }
+    /** @hidden */
     _getViewModel() {
-        let previouslySelected = [];
         return combineLatest([
             this._searchTermCtrl.valueChanges.pipe(startWith(this._searchTermCtrl.value)),
-            this.optionItems$,
-            this._selectionModel.changed.pipe(startWith(undefined))
-        ]).pipe(map(([, optionItems]) => {
+            this._selectionModel.changed.pipe(startWith(null)),
+            this.optionItems$
+        ]).pipe(map(([, , optionItems]) => {
+            const selected = this.selected.map((c) => this._getValueAndLabel(c, optionItems));
             // not using "searchTerm" value from combineLatest as it will be wrong for late subscribers, if any
             const searchTerm = this._searchTermCtrl.value;
-            let displayedOptions = optionItems;
-            if (searchTerm) {
-                const filtered = this.filterFn(this.dropdownValues, searchTerm);
-                displayedOptions = (Array.isArray(filtered) ? filtered : []).map((item) => this._getOptionItem(item));
-            }
-            // selected options should be displayed in the same order as they're selected
-            const orderMap = new Map(this._selectionModel.selected.map((v, i) => [v, i]));
-            // combining previously selected options with current selection
-            // in order to display selected items even if they're not present in the list of options
-            // (e.g. if only a subset of all options is provided to the control)
-            const selectedNotUnique = optionItems
-                .concat(previouslySelected)
-                .filter((item) => this._selectionModel.isSelected(item.value));
-            const selectedOptions = uniqBy(selectedNotUnique, 'value').sort((a, b) => orderMap.get(a.value) - orderMap.get(b.value));
-            previouslySelected = selectedOptions;
-            return {
-                selectedOptions,
-                displayedOptions
-            };
-        }), shareReplay({ refCount: true, bufferSize: 1 }));
+            const filtered = this.filterFn(optionItems.map((c) => c.item), searchTerm);
+            const displayedOptions = (Array.isArray(filtered) ? filtered : []).map((item) => this._getOptionItem(item));
+            displayedOptions.forEach((c) => (c.isSelected = selected.findIndex((d) => d.value === c.value) > -1));
+            return { selectedOptions: selected, displayedOptions };
+        }));
     }
 }
 MultiInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.1.2", ngImport: i0, type: MultiInputComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1$1.DynamicComponentService }, { token: i0.Injector }, { token: i0.ViewContainerRef }, { token: i1$1.RtlService, optional: true }, { token: i1$1.ContentDensityService, optional: true }, { token: i1$1.FocusTrapService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: MultiInputComponent, selector: "fd-multi-input", inputs: { placeholder: "placeholder", disabled: "disabled", compact: "compact", required: "required", compactCollapse: "compactCollapse", maxHeight: "maxHeight", glyph: "glyph", dropdownValues: "dropdownValues", searchTerm: "searchTerm", inputId: "inputId", highlight: "highlight", selected: "selected", class: "class", filterFn: "filterFn", valueFn: "valueFn", displayFn: "displayFn", newTokenParseFn: "newTokenParseFn", newTokenValidateFn: "newTokenValidateFn", multiInputBodyLabel: "multiInputBodyLabel", fillControlMode: "fillControlMode", state: "state", buttonFocusable: "buttonFocusable", allowNewTokens: "allowNewTokens", mobile: "mobile", showAllButton: "showAllButton", bodyMaxWidth: "bodyMaxWidth", mobileConfig: "mobileConfig", includes: "includes", itemTemplate: "itemTemplate", title: "title", autoComplete: "autoComplete", open: "open", displayAddonButton: "displayAddonButton" }, outputs: { searchTermChange: "searchTermChange", selectedChange: "selectedChange", openChange: "openChange" }, host: { listeners: { "blur": "onTouched()" } }, providers: [
+MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.1.2", type: MultiInputComponent, selector: "fd-multi-input", inputs: { placeholder: "placeholder", disabled: "disabled", compact: "compact", required: "required", compactCollapse: "compactCollapse", maxHeight: "maxHeight", glyph: "glyph", dropdownValues: "dropdownValues", searchTerm: "searchTerm", inputId: "inputId", highlight: "highlight", selected: "selected", class: "class", filterFn: "filterFn", valueFn: "valueFn", displayFn: "displayFn", newTokenParseFn: "newTokenParseFn", newTokenValidateFn: "newTokenValidateFn", multiInputBodyLabel: "multiInputBodyLabel", fillControlMode: "fillControlMode", state: "state", buttonFocusable: "buttonFocusable", allowNewTokens: "allowNewTokens", mobile: "mobile", showAllButton: "showAllButton", bodyMaxWidth: "bodyMaxWidth", mobileConfig: "mobileConfig", includes: "includes", itemTemplate: "itemTemplate", title: "title", autoComplete: "autoComplete", open: "open", displayAddonButton: "displayAddonButton" }, outputs: { searchTermChange: "searchTermChange", selectedChange: "selectedChange", openChange: "openChange", allItemsSelectedChange: "allItemsSelectedChange" }, host: { listeners: { "blur": "onTouched()" } }, providers: [
         {
             provide: NG_VALUE_ACCESSOR,
             useExisting: forwardRef(() => MultiInputComponent),
             multi: true
         },
         MenuKeyboardService
-    ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"viewModel$ | async as vm\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile && !open\"></ng-container>\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                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!vm.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\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            [compact]=\"compact\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && vm.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked()\"\n        >\n            <fd-tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [compact]=\"compact\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                [class.fd-multi-input-tokenizer-custom--compact]=\"compact\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of vm.selectedOptions\"\n                    [compact]=\"compact\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option.value, true, $event)\"\n                    (onRemove)=\"_onTokenClick(option.value, false)\"\n                >\n                    <span [innerHtml]=\"option.label\"></span>\n                </fd-token>\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                    [compact]=\"compact\"\n                    [attr.aria-required]=\"required\"\n                    [class.fd-input--compact]=\"compact\"\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=\"vm.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [compact]=\"compact\"\n            [style.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of vm.displayedOptions; let idx = index\"\n                fd-list-item\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"_selectionModel.isSelected(option.value)\"\n            >\n                <fd-checkbox\n                    [compact]=\"compact\"\n                    [value]=\"_selectionModel.isSelected(option.value)\"\n                    (click)=\"_onCheckboxClick(option.value, $event, idx)\"\n                >\n                    <!-- TODO -->\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n            <li\n                *ngIf=\"showAllButton && vm.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        >\n        </span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-popover-custom.fd-popover-custom .fd-tokenizer{height:100%}.fd-multi-input-menu-overflow{max-width:37.5rem;overflow:auto}.fd-input.fd-multi-input-tokenizer-input{margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"], components: [{ type: i2$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { type: i2$1.PopoverControlComponent, selector: "fd-popover-control" }, { type: i2$1.PopoverBodyComponent, selector: "fd-popover-body" }, { type: i3$1.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "compact", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby"], outputs: ["addOnButtonClicked", "search"] }, { type: i4$1.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "ariaRoleDescription", "compact", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { type: i4$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "compact", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick"] }, { type: i5.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "compact", "type", "class"] }, { type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "compact", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "tabindex", "noData", "action", "interactive", "growing", "counter", "unread"], outputs: ["keyDown"] }, { type: i7.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "compact", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { type: i8.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i10.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class", "compact"] }, { type: i1$1.AutoCompleteDirective, selector: "[fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }], pipes: { "async": i9.AsyncPipe, "highlight": i1$1.SearchHighlightPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"viewModel$ | async as vm\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile && !open\"></ng-container>\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                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!vm.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\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            [compact]=\"compact\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && vm.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked()\"\n        >\n            <fd-tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [compact]=\"compact\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                [class.fd-multi-input-tokenizer-custom--compact]=\"compact\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of vm.selectedOptions; trackBy: valueFn\"\n                    [compact]=\"compact\"\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                <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                    [compact]=\"compact\"\n                    [attr.aria-required]=\"required\"\n                    [class.fd-input--compact]=\"compact\"\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=\"vm.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [compact]=\"compact\"\n            [style.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of vm.displayedOptions; index as idx; trackBy: valueFn\"\n                fd-list-item\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"option.isSelected\"\n            >\n                <fd-checkbox\n                    [compact]=\"compact\"\n                    (click)=\"_onCheckboxClick(option.value, $event, idx)\"\n                    [value]=\"option.isSelected\"\n                >\n                    <!-- TODO -->\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n            <li\n                *ngIf=\"showAllButton && vm.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        >\n        </span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-popover-custom.fd-popover-custom .fd-tokenizer{height:100%}.fd-multi-input-menu-overflow{max-width:37.5rem;overflow:auto}.fd-input.fd-multi-input-tokenizer-input{margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"], components: [{ type: i2$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { type: i2$1.PopoverControlComponent, selector: "fd-popover-control" }, { type: i2$1.PopoverBodyComponent, selector: "fd-popover-body" }, { type: i3$1.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "compact", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby"], outputs: ["addOnButtonClicked", "search"] }, { type: i4$1.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "ariaRoleDescription", "compact", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { type: i4$1.TokenComponent, selector: "fd-token", inputs: ["disabled", "compact", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick"] }, { type: i5.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "compact", "type", "class"] }, { type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "compact", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "tabindex", "noData", "action", "interactive", "growing", "counter", "unread"], outputs: ["keyDown"] }, { type: i7.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "compact", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { type: i8.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle"] }], directives: [{ type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i10.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i10.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i10.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i9.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i10.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i3$1.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class", "compact"] }, { type: i1$1.AutoCompleteDirective, selector: "[fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { type: i10.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i10.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }], pipes: { "async": i9.AsyncPipe, "highlight": i1$1.SearchHighlightPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),
@@ -677,7 +690,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                             multi: true
                         },
                         MenuKeyboardService
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"viewModel$ | async as vm\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile && !open\"></ng-container>\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                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!vm.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\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            [compact]=\"compact\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && vm.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked()\"\n        >\n            <fd-tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [compact]=\"compact\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                [class.fd-multi-input-tokenizer-custom--compact]=\"compact\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of vm.selectedOptions\"\n                    [compact]=\"compact\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option.value, true, $event)\"\n                    (onRemove)=\"_onTokenClick(option.value, false)\"\n                >\n                    <span [innerHtml]=\"option.label\"></span>\n                </fd-token>\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                    [compact]=\"compact\"\n                    [attr.aria-required]=\"required\"\n                    [class.fd-input--compact]=\"compact\"\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=\"vm.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [compact]=\"compact\"\n            [style.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of vm.displayedOptions; let idx = index\"\n                fd-list-item\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"_selectionModel.isSelected(option.value)\"\n            >\n                <fd-checkbox\n                    [compact]=\"compact\"\n                    [value]=\"_selectionModel.isSelected(option.value)\"\n                    (click)=\"_onCheckboxClick(option.value, $event, idx)\"\n                >\n                    <!-- TODO -->\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n            <li\n                *ngIf=\"showAllButton && vm.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        >\n        </span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-popover-custom.fd-popover-custom .fd-tokenizer{height:100%}.fd-multi-input-menu-overflow{max-width:37.5rem;overflow:auto}.fd-input.fd-multi-input-tokenizer-input{margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *ngIf=\"viewModel$ | async as vm\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile && !open\"></ng-container>\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                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!vm.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\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            [compact]=\"compact\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && vm.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked()\"\n        >\n            <fd-tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [compact]=\"compact\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                [class.fd-multi-input-tokenizer-custom--compact]=\"compact\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of vm.selectedOptions; trackBy: valueFn\"\n                    [compact]=\"compact\"\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                <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                    [compact]=\"compact\"\n                    [attr.aria-required]=\"required\"\n                    [class.fd-input--compact]=\"compact\"\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=\"vm.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [compact]=\"compact\"\n            [style.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of vm.displayedOptions; index as idx; trackBy: valueFn\"\n                fd-list-item\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"option.isSelected\"\n            >\n                <fd-checkbox\n                    [compact]=\"compact\"\n                    (click)=\"_onCheckboxClick(option.value, $event, idx)\"\n                    [value]=\"option.isSelected\"\n                >\n                    <!-- TODO -->\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n            <li\n                *ngIf=\"showAllButton && vm.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        >\n        </span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n", styles: [".fd-multi-input-tokenizer-custom{width:calc(100% - 2.25rem)}.fd-multi-input-tokenizer-custom--compact{width:calc(100% - 2rem)}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-popover-custom.fd-popover-custom .fd-tokenizer{height:100%}.fd-multi-input-menu-overflow{max-width:37.5rem;overflow:auto}.fd-input.fd-multi-input-tokenizer-input{margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1$1.DynamicComponentService }, { type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i1$1.RtlService, decorators: [{
                     type: Optional
                 }] }, { type: i1$1.ContentDensityService, decorators: [{
@@ -756,6 +769,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.1.2", ngImpor
                 type: Input
             }], openChange: [{
                 type: Output
+            }], allItemsSelectedChange: [{
+                type: Output
             }], popoverRef: [{
                 type: ViewChild,
                 args: [PopoverComponent]