@fundamental-ngx/core 0.37.0-rc.1 → 0.37.0-rc.2

package/esm2020/action-sheet/action-sheet.component.mjs

@@ -127,7 +127,7 @@ export class ActionSheetComponent {
     }
 }
 ActionSheetComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ActionSheetComponent, deps: [{ token: i1.KeyboardSupportService }, { token: i0.ChangeDetectorRef }, { token: i0.ViewContainerRef }, { token: i1.DynamicComponentService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ActionSheetComponent, selector: "fd-action-sheet", inputs: { mobile: "mobile", placement: "placement", noArrow: "noArrow", isOpen: "isOpen", keyboardSupport: "keyboardSupport", triggers: "triggers" }, outputs: { focusEscapeList: "focusEscapeList", isOpenChange: "isOpenChange" }, providers: [KeyboardSupportService], queries: [{ propertyName: "actionSheetBody", first: true, predicate: ActionSheetBodyComponent, descendants: true }, { propertyName: "actionSheetControl", first: true, predicate: ActionSheetControlComponent, descendants: true }, { propertyName: "actionSheetItems", predicate: ActionSheetItemComponent, descendants: true }], viewQueries: [{ propertyName: "actionSheetBodyTemplate", first: true, predicate: ["actionSheetBodyTemplate"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }], ngImport: i0, template: "<fd-popover\n    *ngIf=\"!mobile\"\n    [placement]=\"placement\"\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandle($event)\"\n    [noArrow]=\"noArrow\"\n    [focusTrapped]=\"true\"\n    [triggers]=\"[]\"\n    [focusAutoCapture]=\"true\"\n>\n    <fd-popover-control>\n        <ng-container *ngTemplateOutlet=\"actionSheetControl\"></ng-container>\n    </fd-popover-control>\n\n    <fd-popover-body>\n        <ng-container *ngTemplateOutlet=\"actionSheetBodyTemplate\"></ng-container>\n    </fd-popover-body>\n</fd-popover>\n\n<ng-container *ngIf=\"mobile\">\n    <ng-container *ngTemplateOutlet=\"actionSheetControl\"></ng-container>\n</ng-container>\n\n<ng-template #actionSheetBodyTemplate>\n    <ng-content select=\"fd-action-sheet-body\"></ng-content>\n</ng-template>\n\n<ng-template #actionSheetControl>\n    <ng-content select=\"fd-action-sheet-control\"></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.1-rc.16\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-action-sheet{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem .5rem;width:100%}.fd-action-sheet:after,.fd-action-sheet:before{box-sizing:inherit;font-size:inherit}.fd-action-sheet__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem 0;width:100%}.fd-action-sheet__item:after,.fd-action-sheet__item:before{box-sizing:inherit;font-size:inherit}.fd-action-sheet__wrapper{display:none}.fd-action-sheet__wrapper,.fd-action-sheet__wrapper:before{border-radius:var(--fdPopover_Border_Radius);height:100%;left:0;position:absolute;top:0;width:100%}.fd-action-sheet__wrapper:before{background-color:var(--sapBlockLayer_Background);content:\"\";display:block;opacity:var(--fdOverlay_Background_Opacity)}.fd-action-sheet__wrapper--active{-webkit-box-pack:end;-ms-flex-pack:end;align-items:flex-start;display:flex;flex-direction:column;justify-content:flex-end}.fd-action-sheet__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);color:var(--sapContent_ContrastTextColor);font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader6Size);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;overflow:hidden;padding:0 1rem .5rem;text-overflow:ellipsis;white-space:nowrap;z-index:1}.fd-action-sheet__title:after,.fd-action-sheet__title:before{box-sizing:inherit;font-size:inherit}.fd-action-sheet--compact{padding:.1875rem .375rem}.fd-action-sheet--compact .fd-action-sheet__item{padding:.1875rem 0}.fd-action-sheet--mobile{-webkit-box-shadow:var(--sapContent_Shadow1);background-color:var(--sapGroup_ContentBackground);border-radius:var(--fdPopover_Border_Radius);box-shadow:var(--sapContent_Shadow1);left:var(--sapGroup_BorderWidth);overflow:auto;position:relative;right:auto;width:calc(100% - var(--sapGroup_BorderWidth) * 2);z-index:1}.fd-action-sheet--mobile[dir=rtl],[dir=rtl] .fd-action-sheet--mobile{left:auto;right:var(--sapGroup_BorderWidth)}fd-action-sheet-body{width:100%}.fd-action-sheet{list-style-type:none}.fd-action-sheet__wrapper--active{position:fixed;z-index:5}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+ActionSheetComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: ActionSheetComponent, selector: "fd-action-sheet", inputs: { mobile: "mobile", placement: "placement", noArrow: "noArrow", isOpen: "isOpen", keyboardSupport: "keyboardSupport", triggers: "triggers" }, outputs: { focusEscapeList: "focusEscapeList", isOpenChange: "isOpenChange" }, providers: [KeyboardSupportService], queries: [{ propertyName: "actionSheetBody", first: true, predicate: ActionSheetBodyComponent, descendants: true }, { propertyName: "actionSheetControl", first: true, predicate: ActionSheetControlComponent, descendants: true }, { propertyName: "actionSheetItems", predicate: ActionSheetItemComponent, descendants: true }], viewQueries: [{ propertyName: "actionSheetBodyTemplate", first: true, predicate: ["actionSheetBodyTemplate"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }], ngImport: i0, template: "<fd-popover\n    *ngIf=\"!mobile\"\n    [placement]=\"placement\"\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandle($event)\"\n    [noArrow]=\"noArrow\"\n    [focusTrapped]=\"true\"\n    [triggers]=\"[]\"\n    [focusAutoCapture]=\"true\"\n>\n    <fd-popover-control>\n        <ng-container *ngTemplateOutlet=\"actionSheetControl\"></ng-container>\n    </fd-popover-control>\n\n    <fd-popover-body>\n        <ng-container *ngTemplateOutlet=\"actionSheetBodyTemplate\"></ng-container>\n    </fd-popover-body>\n</fd-popover>\n\n<ng-container *ngIf=\"mobile\">\n    <ng-container *ngTemplateOutlet=\"actionSheetControl\"></ng-container>\n</ng-container>\n\n<ng-template #actionSheetBodyTemplate>\n    <ng-content select=\"fd-action-sheet-body\"></ng-content>\n</ng-template>\n\n<ng-template #actionSheetControl>\n    <ng-content select=\"fd-action-sheet-control\"></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.1-rc.16\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-action-sheet{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem .5rem;width:100%}.fd-action-sheet:after,.fd-action-sheet:before{box-sizing:inherit;font-size:inherit}.fd-action-sheet__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem 0;width:100%}.fd-action-sheet__item:after,.fd-action-sheet__item:before{box-sizing:inherit;font-size:inherit}.fd-action-sheet__wrapper{display:none}.fd-action-sheet__wrapper,.fd-action-sheet__wrapper:before{border-radius:var(--fdPopover_Border_Radius);height:100%;left:0;position:absolute;top:0;width:100%}.fd-action-sheet__wrapper:before{background-color:var(--sapBlockLayer_Background);content:\"\";display:block;opacity:var(--fdOverlay_Background_Opacity)}.fd-action-sheet__wrapper--active{-webkit-box-pack:end;-ms-flex-pack:end;align-items:flex-start;display:flex;flex-direction:column;justify-content:flex-end}.fd-action-sheet__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);color:var(--sapContent_ContrastTextColor);font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader6Size);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;overflow:hidden;padding:0 1rem .5rem;text-overflow:ellipsis;white-space:nowrap;z-index:1}.fd-action-sheet__title:after,.fd-action-sheet__title:before{box-sizing:inherit;font-size:inherit}.fd-action-sheet--compact{padding:.1875rem .375rem}.fd-action-sheet--compact .fd-action-sheet__item{padding:.1875rem 0}.fd-action-sheet--mobile{-webkit-box-shadow:var(--sapContent_Shadow1);background-color:var(--sapGroup_ContentBackground);border-radius:var(--fdPopover_Border_Radius);box-shadow:var(--sapContent_Shadow1);left:var(--sapGroup_BorderWidth);overflow:auto;position:relative;right:auto;width:calc(100% - var(--sapGroup_BorderWidth) * 2);z-index:1}.fd-action-sheet--mobile[dir=rtl],[dir=rtl] .fd-action-sheet--mobile{left:auto;right:var(--sapGroup_BorderWidth)}fd-action-sheet-body{width:100%}.fd-action-sheet{list-style-type:none}.fd-action-sheet__wrapper--active{position:fixed;z-index:5}\n"], dependencies: [{ kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ActionSheetComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-action-sheet', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [KeyboardSupportService], template: "<fd-popover\n    *ngIf=\"!mobile\"\n    [placement]=\"placement\"\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandle($event)\"\n    [noArrow]=\"noArrow\"\n    [focusTrapped]=\"true\"\n    [triggers]=\"[]\"\n    [focusAutoCapture]=\"true\"\n>\n    <fd-popover-control>\n        <ng-container *ngTemplateOutlet=\"actionSheetControl\"></ng-container>\n    </fd-popover-control>\n\n    <fd-popover-body>\n        <ng-container *ngTemplateOutlet=\"actionSheetBodyTemplate\"></ng-container>\n    </fd-popover-body>\n</fd-popover>\n\n<ng-container *ngIf=\"mobile\">\n    <ng-container *ngTemplateOutlet=\"actionSheetControl\"></ng-container>\n</ng-container>\n\n<ng-template #actionSheetBodyTemplate>\n    <ng-content select=\"fd-action-sheet-body\"></ng-content>\n</ng-template>\n\n<ng-template #actionSheetControl>\n    <ng-content select=\"fd-action-sheet-control\"></ng-content>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.25.1-rc.16\n * Copyright (c) 2022 SAP SE or an SAP affiliate company.\n * Licensed under Apache License 2.0 (https://github.com/SAP/fundamental-styles/blob/main/LICENSE)\n */.fd-action-sheet{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem .5rem;width:100%}.fd-action-sheet:after,.fd-action-sheet:before{box-sizing:inherit;font-size:inherit}.fd-action-sheet__item{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;padding:.25rem 0;width:100%}.fd-action-sheet__item:after,.fd-action-sheet__item:before{box-sizing:inherit;font-size:inherit}.fd-action-sheet__wrapper{display:none}.fd-action-sheet__wrapper,.fd-action-sheet__wrapper:before{border-radius:var(--fdPopover_Border_Radius);height:100%;left:0;position:absolute;top:0;width:100%}.fd-action-sheet__wrapper:before{background-color:var(--sapBlockLayer_Background);content:\"\";display:block;opacity:var(--fdOverlay_Background_Opacity)}.fd-action-sheet__wrapper--active{-webkit-box-pack:end;-ms-flex-pack:end;align-items:flex-start;display:flex;flex-direction:column;justify-content:flex-end}.fd-action-sheet__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);color:var(--sapContent_ContrastTextColor);font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader6Size);font-weight:400;line-height:var(--sapContent_LineHeight);margin:0;max-width:100%;overflow:hidden;padding:0 1rem .5rem;text-overflow:ellipsis;white-space:nowrap;z-index:1}.fd-action-sheet__title:after,.fd-action-sheet__title:before{box-sizing:inherit;font-size:inherit}.fd-action-sheet--compact{padding:.1875rem .375rem}.fd-action-sheet--compact .fd-action-sheet__item{padding:.1875rem 0}.fd-action-sheet--mobile{-webkit-box-shadow:var(--sapContent_Shadow1);background-color:var(--sapGroup_ContentBackground);border-radius:var(--fdPopover_Border_Radius);box-shadow:var(--sapContent_Shadow1);left:var(--sapGroup_BorderWidth);overflow:auto;position:relative;right:auto;width:calc(100% - var(--sapGroup_BorderWidth) * 2);z-index:1}.fd-action-sheet--mobile[dir=rtl],[dir=rtl] .fd-action-sheet--mobile{left:auto;right:var(--sapGroup_BorderWidth)}fd-action-sheet-body{width:100%}.fd-action-sheet{list-style-type:none}.fd-action-sheet__wrapper--active{position:fixed;z-index:5}\n"] }]

package/esm2020/combobox/combobox.component.mjs

@@ -502,7 +502,7 @@ ComboboxComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", vers
         registerFormItemControl(ComboboxComponent),
         MenuKeyboardService,
         contentDensityObserverProviders()
-    ], queries: [{ propertyName: "listMessages", predicate: ListMessageDirective }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "inputGroup", first: true, predicate: InputGroupComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fd-popover-custom-list\"\n        [class.fd-combobox-full-width]=\"isSearch\"\n        [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [scrollStrategy]=\"_repositionScrollStrategy\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readOnly\"\n        [maxWidth]=\"640\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"!displayedValues?.length\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template let-term=\"term\" #itemSource>\n    <span\n        fd-list-title\n        *ngIf=\"!itemTemplate\"\n        [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText:highlighting && filterHighlight\"\n    >\n    </span>\n    <ng-container *ngIf=\"itemTemplate\">\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: term }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"showDropdownButton\"\n        [glyph]=\"showDropdownButton ? glyphValue : null\"\n        [state]=\"state\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readOnly\"\n        [isControl]=\"true\"\n        [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n        [showFocus]=\"!clearInputBtnFocused\"\n        [glyphAriaLabel]=\"ariaLabel\"\n        [iconTitle]=\"title\"\n        (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n        (click)=\"mobile && isOpenChangeHandle(true)\"\n    >\n        <input\n            #searchInputElement\n            fd-auto-complete\n            fd-input-group-input\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? comboboxId + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n            [attr.aria-required]=\"required\"\n            [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n            [enable]=\"autoComplete && !mobile\"\n            [displayFn]=\"displayFn\"\n            [options]=\"dropdownValues\"\n            [inputText]=\"inputText\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readOnly\"\n            [attr.aria-readonly]=\"readOnly\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"inputText\"\n            (onComplete)=\"handleAutoComplete($event)\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            (ngModelChange)=\"handleSearchTermChange()\"\n            (blur)=\"handleBlur()\"\n        />\n        <span\n            class=\"fd-input-group__addon fd-input-group__addon--button\"\n            [class.fd-input-group__addon--compact]=\"_contentDensityObserver.isCompact$ | async\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n            *ngIf=\"isSearch && showClearButton && inputText && inputText.length > 0\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                title=\"Clear input\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                (focus)=\"clearInputBtnFocus()\"\n                (blur)=\"clearInputBtnBlur()\"\n                (click)=\"_handleClearSearchTerm()\"\n            >\n                <fd-icon glyph=\"decline\"></fd-icon>\n            </button>\n        </span>\n    </fd-input-group>\n    <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n        {{ displayedValues?.length || 0 }} result list items\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        class=\"fd-combobox-custom-list fd-combobox-input-menu-overflow\"\n        [dropdownMode]=\"true\"\n        [id]=\"comboboxId + '-result'\"\n        role=\"listbox\"\n        [attr.aria-labelledby]=\"comboboxId + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [hasMessage]=\"listMessages && listMessages.length > 0\"\n        [byline]=\"byline\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n    >\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"groupFn\">\n            <ng-container *ngFor=\"let group of displayedValues | listGroupPipe: groupFn\">\n                <li role=\"group\" fd-list-group-header [tabindex]=\"0\">\n                    <span fd-list-title>{{ group.key }}</span>\n                </li>\n                <li\n                    role=\"option\"\n                    fd-list-item\n                    [attr.aria-placeholder]=\"group.key\"\n                    [tabindex]=\"0\"\n                    class=\"fd-combobox-list-item\"\n                    *ngFor=\"let term of group.value\"\n                    [selected]=\"isSelected(term)\"\n                    (keyDown)=\"onItemKeyDownHandler($event, term)\"\n                    (click)=\"onMenuClickHandler(term)\"\n                >\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemSource\"\n                        [ngTemplateOutletContext]=\"{ term: term }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!groupFn\">\n            <li\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                class=\"fd-combobox-list-item\"\n                *ngFor=\"let term of displayedValues\"\n                [selected]=\"isSelected(term)\"\n                (keyDown)=\"onItemKeyDownHandler($event, term)\"\n                (click)=\"onMenuClickHandler(term)\"\n            >\n                <ng-container [ngTemplateOutlet]=\"itemSource\" [ngTemplateOutletContext]=\"{ term: term }\"></ng-container>\n            </li>\n        </ng-container>\n    </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-combobox-input-menu-overflow{overflow:auto}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i9.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i9.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i9.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i10.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i2.AutoCompleteDirective, selector: "[fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DisplayFnPipe, name: "displayFnPipe" }, { kind: "pipe", type: i2.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i11.ListGroupPipe, name: "listGroupPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "listMessages", predicate: ListMessageDirective }], viewQueries: [{ propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true }, { propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "inputGroup", first: true, predicate: InputGroupComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["controlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngTemplateOutlet=\"mobile ? mobileTemplate : desktopTemplate\"></ng-container>\n\n<ng-template #desktopTemplate>\n    <fd-popover\n        additionalBodyClass=\"fd-popover-custom-list\"\n        [class.fd-combobox-full-width]=\"isSearch\"\n        [isOpen]=\"open && displayedValues && displayedValues.length > 0\"\n        (isOpenChange)=\"isOpenChangeHandle($event)\"\n        [fillControlMode]=\"fillControlMode\"\n        [scrollStrategy]=\"_repositionScrollStrategy\"\n        [focusTrapped]=\"true\"\n        [triggers]=\"triggers\"\n        [disabled]=\"disabled || readOnly\"\n        [maxWidth]=\"640\"\n        [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    >\n        <fd-popover-control>\n            <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n        </fd-popover-control>\n        <fd-popover-body [hidden]=\"!displayedValues?.length\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</ng-template>\n\n<ng-template let-term=\"term\" #itemSource>\n    <span\n        fd-list-title\n        *ngIf=\"!itemTemplate\"\n        [innerHTML]=\"term | displayFnPipe: displayFn | highlight: inputText:highlighting && filterHighlight\"\n    >\n    </span>\n    <ng-container *ngIf=\"itemTemplate\">\n        <ng-container [ngTemplateOutlet]=\"itemTemplate\" [ngTemplateOutletContext]=\"{ $implicit: term }\"></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template #mobileTemplate>\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #controlTemplate>\n    <fd-input-group\n        [button]=\"showDropdownButton\"\n        [glyph]=\"showDropdownButton ? glyphValue : null\"\n        [state]=\"state\"\n        [buttonFocusable]=\"buttonFocusable\"\n        [disabled]=\"disabled\"\n        [readonly]=\"readOnly\"\n        [isControl]=\"true\"\n        [isExpanded]=\"!mobile && open && displayedValues.length > 0\"\n        [showFocus]=\"!clearInputBtnFocused\"\n        [glyphAriaLabel]=\"ariaLabel\"\n        [iconTitle]=\"title\"\n        (addOnButtonClicked)=\"onPrimaryButtonClick()\"\n        (click)=\"mobile && isOpenChangeHandle(true)\"\n    >\n        <input\n            #searchInputElement\n            fd-auto-complete\n            fd-input-group-input\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"ariaLabel\"\n            [attr.aria-labelledby]=\"ariaLabelledBy\"\n            [attr.aria-describedby]=\"comboboxId + '-list-results'\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? comboboxId + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            [attr.aria-expanded]=\"!mobile && open && displayedValues.length\"\n            [attr.aria-required]=\"required\"\n            [attr.tabindex]=\"readOnly || disabled ? -1 : null\"\n            [enable]=\"autoComplete && !mobile\"\n            [displayFn]=\"displayFn\"\n            [options]=\"dropdownValues\"\n            [inputText]=\"inputText\"\n            [disabled]=\"disabled\"\n            [readonly]=\"readOnly\"\n            [attr.aria-readonly]=\"readOnly\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId\"\n            [(ngModel)]=\"inputText\"\n            (onComplete)=\"handleAutoComplete($event)\"\n            (keydown)=\"onInputKeydownHandler($event)\"\n            (ngModelChange)=\"handleSearchTermChange()\"\n            (blur)=\"handleBlur()\"\n        />\n        <span\n            class=\"fd-input-group__addon fd-input-group__addon--button\"\n            [class.fd-input-group__addon--compact]=\"_contentDensityObserver.isCompact$ | async\"\n            [class.fd-shellbar__input-group-addon]=\"inShellbar\"\n            *ngIf=\"isSearch && showClearButton && inputText && inputText.length > 0\"\n        >\n            <button\n                fd-button\n                class=\"fd-input-group__button\"\n                type=\"button\"\n                [fdType]=\"inShellbar ? 'standard' : 'transparent'\"\n                title=\"Clear input\"\n                [class.fd-shellbar__button]=\"inShellbar\"\n                [attr.tabindex]=\"buttonFocusable ? 0 : -1\"\n                (focus)=\"clearInputBtnFocus()\"\n                (blur)=\"clearInputBtnBlur()\"\n                (click)=\"_handleClearSearchTerm()\"\n            >\n                <fd-icon glyph=\"decline\"></fd-icon>\n            </button>\n        </span>\n    </fd-input-group>\n    <div [id]=\"comboboxId + '-list-results'\" class=\"fd-combobox-count-list-results\">\n        {{ displayedValues?.length || 0 }} result list items\n    </div>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        class=\"fd-combobox-custom-list fd-combobox-input-menu-overflow\"\n        [dropdownMode]=\"true\"\n        [id]=\"comboboxId + '-result'\"\n        role=\"listbox\"\n        [attr.aria-labelledby]=\"comboboxId + '-search'\"\n        [style.maxHeight]=\"!mobile && maxHeight\"\n        [hasMessage]=\"listMessages && listMessages.length > 0\"\n        [byline]=\"byline\"\n        (focusEscapeList)=\"handleListFocusEscape($event)\"\n    >\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"groupFn\">\n            <ng-container *ngFor=\"let group of displayedValues | listGroupPipe: groupFn\">\n                <li role=\"group\" fd-list-group-header [tabindex]=\"0\">\n                    <span fd-list-title>{{ group.key }}</span>\n                </li>\n                <li\n                    role=\"option\"\n                    fd-list-item\n                    [attr.aria-placeholder]=\"group.key\"\n                    [tabindex]=\"0\"\n                    class=\"fd-combobox-list-item\"\n                    *ngFor=\"let term of group.value\"\n                    [selected]=\"isSelected(term)\"\n                    (keyDown)=\"onItemKeyDownHandler($event, term)\"\n                    (click)=\"onMenuClickHandler(term)\"\n                >\n                    <ng-container\n                        [ngTemplateOutlet]=\"itemSource\"\n                        [ngTemplateOutletContext]=\"{ term: term }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n        <ng-container *ngIf=\"!groupFn\">\n            <li\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                class=\"fd-combobox-list-item\"\n                *ngFor=\"let term of displayedValues\"\n                [selected]=\"isSelected(term)\"\n                (keyDown)=\"onItemKeyDownHandler($event, term)\"\n                (click)=\"onMenuClickHandler(term)\"\n            >\n                <ng-container [ngTemplateOutlet]=\"itemSource\" [ngTemplateOutletContext]=\"{ term: term }\"></ng-container>\n            </li>\n        </ng-container>\n    </ul>\n</ng-template>\n", styles: [".fd-combobox-custom-class,.fd-combobox-custom-class .fd-combobox-shellbar-custom{display:inline-block}.fd-combobox-input-menu-overflow{overflow:auto}.fd-list__item.fd-combobox-list-item{cursor:pointer}.fd-combobox-full-width{width:100%}.fd-combobox-count-list-results{position:absolute;opacity:0;z-index:-1}\n"], dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i5.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "component", type: i5.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i9.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i9.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i9.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "component", type: i10.IconComponent, selector: "fd-icon", inputs: ["glyph", "font", "class", "ariaLabel"] }, { kind: "directive", type: i2.AutoCompleteDirective, selector: "[fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.DisplayFnPipe, name: "displayFnPipe" }, { kind: "pipe", type: i2.SearchHighlightPipe, name: "highlight" }, { kind: "pipe", type: i11.ListGroupPipe, name: "listGroupPipe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: ComboboxComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-combobox', providers: [

package/esm2020/date-picker/date-picker.component.mjs

@@ -600,7 +600,7 @@ DatePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         registerFormItemControl(DatePickerComponent),
         PopoverFormMessageService,
         PopoverService
-    ], viewQueries: [{ propertyName: "_calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<fd-popover\n    [(isOpen)]=\"isOpen\"\n    (isOpenChange)=\"_onOpenStateChanged($event)\"\n    [triggers]=\"[]\"\n    [placement]=\"placement\"\n    [disabled]=\"disabled\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"false\"\n    [appendTo]=\"appendTo\"\n>\n    <fd-popover-control>\n        <fd-input-group\n            #inputGroupComponent\n            [state]=\"state\"\n            [disabled]=\"disabled\"\n            [isControl]=\"true\"\n            [button]=\"true\"\n            [buttonFocusable]=\"buttonFocusable\"\n            glyph=\"appointment-2\"\n            [isExpanded]=\"isOpen\"\n            [glyphAriaLabel]=\"displayCalendarToggleLabel || ('coreDatePicker.displayCalendarToggleLabel' | fdTranslate)\"\n            [iconTitle]=\"displayCalendarToggleLabel || ('coreDatePicker.displayCalendarToggleLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"toggleCalendar()\"\n        >\n            <input\n                type=\"text\"\n                class=\"fd-input\"\n                fd-input-group-input\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                [attr.id]=\"inputId\"\n                aria-haspopup=\"grid\"\n                aria-autocomplete=\"none\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-label]=\"_dateInputArialLabel || (_dateInputArialLabelKey | fdTranslate)\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"_formValueStateMessageId\"\n                [ngModel]=\"_inputFieldDate\"\n                (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n                (ngModelChange)=\"handleInputChange($event, true)\"\n                (blur)=\"_onBlur($event)\"\n            />\n        </fd-input-group>\n    </fd-popover-control>\n    <fd-popover-body [attr.aria-expanded]=\"isOpen\" [attr.aria-hidden]=\"!isOpen\">\n        <fd-form-message [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n        <ng-content></ng-content>\n\n        <fd-calendar\n            (closeCalendar)=\"closeFromCalendar()\"\n            [activeView]=\"activeView\"\n            [markWeekends]=\"markWeekends\"\n            [specialDaysRules]=\"specialDaysRules\"\n            [showWeekNumbers]=\"showWeekNumbers\"\n            [aggregatedYearGrid]=\"aggregatedYearGrid\"\n            [yearGrid]=\"yearGrid\"\n            (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n            [calType]=\"type\"\n            [rangeHoverEffect]=\"rangeHoverEffect\"\n            [disableFunction]=\"disableFunction ? disableFunction : null\"\n            [disableRangeStartFunction]=\"disableRangeStartFunction ? disableRangeStartFunction : null\"\n            [disableRangeEndFunction]=\"disableRangeEndFunction ? disableRangeEndFunction : null\"\n            [selectedDate]=\"selectedDate\"\n            [selectedRangeDate]=\"selectedRangeDate\"\n            (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n            (selectedDateChange)=\"handleSingleDateChange($event)\"\n            [startingDayOfWeek]=\"startingDayOfWeek\"\n            [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n            [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n        ></fd-calendar>\n\n        <div *ngIf=\"showTodayButton\" fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button fd-button [label]=\"todayButtonLabel\" (click)=\"onTodayButtonClick()\"></button>\n                </fd-bar-element>\n            </div>\n        </div>\n    </fd-popover-body>\n</fd-popover>\n\n<div style=\"display: none\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        <ng-container [ngSwitch]=\"state\">\n            <ng-container *ngSwitchCase=\"'success'\">{{\n                valueStateSuccessMessage || ('coreDatePicker.valueStateSuccessMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'information'\">{{\n                valueStateInformationMessage || ('coreDatePicker.valueStateInformationMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'warning'\">{{\n                valueStateWarningMessage || ('coreDatePicker.valueStateWarningMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'error'\">{{\n                valueStateErrorMessage || ('coreDatePicker.valueStateErrorMessage' | fdTranslate)\n            }}</ng-container>\n        </ng-container>\n        {{ _message }}\n    </div>\n</div>\n", styles: [".fd-date-picker-custom{display:inline-block}.fd-date-picker-custom fd-popover{display:block}.fd-date-picker-custom fd-calendar{border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i5.CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "markWeekends", "showWeekNumbers", "mobileLandscape", "mobilePortrait", "selectedRangeDate", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "previousButtonDisableFunction", "nextButtonDisableFunction", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedRangeDateChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i7.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i8.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i9.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i9.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i9.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "_calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }], ngImport: i0, template: "<fd-popover\n    [(isOpen)]=\"isOpen\"\n    (isOpenChange)=\"_onOpenStateChanged($event)\"\n    [triggers]=\"[]\"\n    [placement]=\"placement\"\n    [disabled]=\"disabled\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"false\"\n    [appendTo]=\"appendTo\"\n>\n    <fd-popover-control>\n        <fd-input-group\n            #inputGroupComponent\n            [state]=\"state\"\n            [disabled]=\"disabled\"\n            [isControl]=\"true\"\n            [button]=\"true\"\n            [buttonFocusable]=\"buttonFocusable\"\n            glyph=\"appointment-2\"\n            [isExpanded]=\"isOpen\"\n            [glyphAriaLabel]=\"displayCalendarToggleLabel || ('coreDatePicker.displayCalendarToggleLabel' | fdTranslate)\"\n            [iconTitle]=\"displayCalendarToggleLabel || ('coreDatePicker.displayCalendarToggleLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"toggleCalendar()\"\n        >\n            <input\n                type=\"text\"\n                class=\"fd-input\"\n                fd-input-group-input\n                [disabled]=\"disabled\"\n                [placeholder]=\"placeholder\"\n                [attr.id]=\"inputId\"\n                aria-haspopup=\"grid\"\n                aria-autocomplete=\"none\"\n                [attr.aria-expanded]=\"isOpen\"\n                [attr.aria-labelledby]=\"ariaLabelledBy\"\n                [attr.aria-label]=\"_dateInputArialLabel || (_dateInputArialLabelKey | fdTranslate)\"\n                [attr.aria-required]=\"required\"\n                [attr.aria-describedby]=\"_formValueStateMessageId\"\n                [ngModel]=\"_inputFieldDate\"\n                (keyup.enter)=\"handleInputChange($any($event.target).value, false)\"\n                (ngModelChange)=\"handleInputChange($event, true)\"\n                (blur)=\"_onBlur($event)\"\n            />\n        </fd-input-group>\n    </fd-popover-control>\n    <fd-popover-body [attr.aria-expanded]=\"isOpen\" [attr.aria-hidden]=\"!isOpen\">\n        <fd-form-message [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n            {{ _message }}\n        </fd-form-message>\n        <ng-content></ng-content>\n\n        <fd-calendar\n            (closeCalendar)=\"closeFromCalendar()\"\n            [activeView]=\"activeView\"\n            [markWeekends]=\"markWeekends\"\n            [specialDaysRules]=\"specialDaysRules\"\n            [showWeekNumbers]=\"showWeekNumbers\"\n            [aggregatedYearGrid]=\"aggregatedYearGrid\"\n            [yearGrid]=\"yearGrid\"\n            (activeViewChange)=\"handleCalendarActiveViewChange($event)\"\n            [calType]=\"type\"\n            [rangeHoverEffect]=\"rangeHoverEffect\"\n            [disableFunction]=\"disableFunction ? disableFunction : null\"\n            [disableRangeStartFunction]=\"disableRangeStartFunction ? disableRangeStartFunction : null\"\n            [disableRangeEndFunction]=\"disableRangeEndFunction ? disableRangeEndFunction : null\"\n            [selectedDate]=\"selectedDate\"\n            [selectedRangeDate]=\"selectedRangeDate\"\n            (selectedRangeDateChange)=\"handleRangeDateChange($event)\"\n            (selectedDateChange)=\"handleSingleDateChange($event)\"\n            [startingDayOfWeek]=\"startingDayOfWeek\"\n            [previousButtonDisableFunction]=\"previousButtonDisableFunction\"\n            [nextButtonDisableFunction]=\"nextButtonDisableFunction\"\n        ></fd-calendar>\n\n        <div *ngIf=\"showTodayButton\" fd-bar barDesign=\"footer\">\n            <div fd-bar-right>\n                <fd-bar-element>\n                    <button fd-button [label]=\"todayButtonLabel\" (click)=\"onTodayButtonClick()\"></button>\n                </fd-bar-element>\n            </div>\n        </div>\n    </fd-popover-body>\n</fd-popover>\n\n<div style=\"display: none\" aria-hidden=\"true\">\n    <div [attr.id]=\"_formValueStateMessageId\" aria-atomic=\"true\" aria-live=\"assertive\">\n        <ng-container [ngSwitch]=\"state\">\n            <ng-container *ngSwitchCase=\"'success'\">{{\n                valueStateSuccessMessage || ('coreDatePicker.valueStateSuccessMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'information'\">{{\n                valueStateInformationMessage || ('coreDatePicker.valueStateInformationMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'warning'\">{{\n                valueStateWarningMessage || ('coreDatePicker.valueStateWarningMessage' | fdTranslate)\n            }}</ng-container>\n            <ng-container *ngSwitchCase=\"'error'\">{{\n                valueStateErrorMessage || ('coreDatePicker.valueStateErrorMessage' | fdTranslate)\n            }}</ng-container>\n        </ng-container>\n        {{ _message }}\n    </div>\n</div>\n", styles: [".fd-date-picker-custom{display:inline-block}.fd-date-picker-custom fd-popover{display:block}.fd-date-picker-custom fd-calendar{border-radius:.25rem;border-radius:var(--sapElement_BorderCornerRadius, .25rem)}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i5.CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "markWeekends", "showWeekNumbers", "mobileLandscape", "mobilePortrait", "selectedRangeDate", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "previousButtonDisableFunction", "nextButtonDisableFunction", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedRangeDateChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i7.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i8.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i9.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i9.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i9.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "pipe", type: i10.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DatePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-date-picker', host: {

package/esm2020/datetime-picker/datetime-picker.component.mjs

@@ -518,7 +518,7 @@ DatetimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
         registerFormItemControl(DatetimePickerComponent),
         PopoverFormMessageService,
         PopoverService
-    ], viewQueries: [{ propertyName: "_calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<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                [state]=\"state\"\n                [disabled]=\"disabled\"\n                [isControl]=\"true\"\n                [button]=\"true\"\n                [buttonFocusable]=\"buttonFocusable\"\n                glyph=\"date-time\"\n                [isExpanded]=\"isOpen\"\n                [glyphAriaLabel]=\"\n                    displayDatetimeToggleLabel || ('coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate)\n                \"\n                [iconTitle]=\"\n                    displayDatetimeToggleLabel || ('coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate)\n                \"\n                (addOnButtonClicked)=\"togglePopover()\"\n            >\n                <input\n                    type=\"text\"\n                    class=\"fd-input\"\n                    fd-input-group-input\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-label]=\"datetimeInputLabel || ('coreDatetimePicker.datetimeInputLabel' | fdTranslate)\"\n                    [attr.id]=\"inputId\"\n                    [attr.aria-required]=\"required\"\n                    [placeholder]=\"placeholder\"\n                    [disabled]=\"disabled\"\n                    [ngModel]=\"_inputFieldDate\"\n                    (keyup.enter)=\"handleInputChange($any($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-datetime__wrapper\">\n                <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                    {{ _message }}\n                </fd-form-message>\n                <div class=\"fd-datetime__display-type-switcher\">\n                    <fd-segmented-button [(ngModel)]=\"_displayType\">\n                        <button\n                            fd-button\n                            [label]=\"displayTypeDateLabel || ('coreDatetimePicker.displayTypeDateLabel' | fdTranslate)\"\n                            value=\"date\"\n                        ></button>\n                        <button\n                            fd-button\n                            [label]=\"displayTypeTimeLabel || ('coreDatetimePicker.displayTypeTimeLabel' | fdTranslate)\"\n                            value=\"time\"\n                        ></button>\n                    </fd-segmented-button>\n                </div>\n                <ng-content></ng-content>\n                <div class=\"fd-datetime__container\">\n                    <fd-calendar\n                        [class.fd-datetime__active-display-type]=\"_displayType === 'date'\"\n                        calType=\"single\"\n                        [activeView]=\"activeView\"\n                        [disableFunction]=\"disableFunction || null\"\n                        [selectedDate]=\"_tempDate\"\n                        [escapeFocusFunction]=\"null\"\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                        [class.fd-datetime__active-display-type]=\"_displayType === 'time'\"\n                        [disabled]=\"disabled\"\n                        [elementsAtOnce]=\"5\"\n                        [keepTwoDigits]=\"keepTwoDigitsTime\"\n                        [ngModel]=\"_tempTime\"\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\">\n                        <div fd-bar-right>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"emphasized\"\n                                    [label]=\"okLabel || ('coreDatetimePicker.datetimeOkLabel' | fdTranslate)\"\n                                    [ariaLabel]=\"okLabel || ('coreDatetimePicker.datetimeOkLabel' | fdTranslate)\"\n                                    (click)=\"submit()\"\n                                ></button>\n                            </fd-bar-element>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [label]=\"cancelLabel || ('coreDatetimePicker.datetimeCancelLabel' | fdTranslate)\"\n                                    [ariaLabel]=\"\n                                        cancelLabel || ('coreDatetimePicker.datetimeCancelLabel' | fdTranslate)\n                                    \"\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", styles: [".fd-datetime{display:block}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 16px;overflow:auto}.fd-datetime__separator{background-color:#d3d3d3;width:1px;margin:42px 28px;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}@media (max-width: 960px){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "directive", type: i4.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i5.CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "markWeekends", "showWeekNumbers", "mobileLandscape", "mobilePortrait", "selectedRangeDate", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "previousButtonDisableFunction", "nextButtonDisableFunction", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedRangeDateChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i10.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i10.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i10.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i11.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { kind: "component", type: i2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "pipe", type: i12.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "_calendarComponent", first: true, predicate: CalendarComponent, descendants: true }, { propertyName: "_inputGroupElement", first: true, predicate: ["inputGroupComponent"], descendants: true, read: ElementRef }, { propertyName: "_inputElement", first: true, predicate: InputGroupInputDirective, descendants: true, read: ElementRef }], usesOnChanges: true, ngImport: i0, template: "<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                [state]=\"state\"\n                [disabled]=\"disabled\"\n                [isControl]=\"true\"\n                [button]=\"true\"\n                [buttonFocusable]=\"buttonFocusable\"\n                glyph=\"date-time\"\n                [isExpanded]=\"isOpen\"\n                [glyphAriaLabel]=\"\n                    displayDatetimeToggleLabel || ('coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate)\n                \"\n                [iconTitle]=\"\n                    displayDatetimeToggleLabel || ('coreDatetimePicker.displayDatetimeToggleLabel' | fdTranslate)\n                \"\n                (addOnButtonClicked)=\"togglePopover()\"\n            >\n                <input\n                    type=\"text\"\n                    class=\"fd-input\"\n                    fd-input-group-input\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    [attr.aria-label]=\"datetimeInputLabel || ('coreDatetimePicker.datetimeInputLabel' | fdTranslate)\"\n                    [attr.id]=\"inputId\"\n                    [attr.aria-required]=\"required\"\n                    [placeholder]=\"placeholder\"\n                    [disabled]=\"disabled\"\n                    [ngModel]=\"_inputFieldDate\"\n                    (keyup.enter)=\"handleInputChange($any($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-datetime__wrapper\">\n                <fd-form-message id=\"fd-form-message\" [embedded]=\"true\" *ngIf=\"_message\" [type]=\"state\">\n                    {{ _message }}\n                </fd-form-message>\n                <div class=\"fd-datetime__display-type-switcher\">\n                    <fd-segmented-button [(ngModel)]=\"_displayType\">\n                        <button\n                            fd-button\n                            [label]=\"displayTypeDateLabel || ('coreDatetimePicker.displayTypeDateLabel' | fdTranslate)\"\n                            value=\"date\"\n                        ></button>\n                        <button\n                            fd-button\n                            [label]=\"displayTypeTimeLabel || ('coreDatetimePicker.displayTypeTimeLabel' | fdTranslate)\"\n                            value=\"time\"\n                        ></button>\n                    </fd-segmented-button>\n                </div>\n                <ng-content></ng-content>\n                <div class=\"fd-datetime__container\">\n                    <fd-calendar\n                        [class.fd-datetime__active-display-type]=\"_displayType === 'date'\"\n                        calType=\"single\"\n                        [activeView]=\"activeView\"\n                        [disableFunction]=\"disableFunction || null\"\n                        [selectedDate]=\"_tempDate\"\n                        [escapeFocusFunction]=\"null\"\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                        [class.fd-datetime__active-display-type]=\"_displayType === 'time'\"\n                        [disabled]=\"disabled\"\n                        [elementsAtOnce]=\"5\"\n                        [keepTwoDigits]=\"keepTwoDigitsTime\"\n                        [ngModel]=\"_tempTime\"\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\">\n                        <div fd-bar-right>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"emphasized\"\n                                    [label]=\"okLabel || ('coreDatetimePicker.datetimeOkLabel' | fdTranslate)\"\n                                    [ariaLabel]=\"okLabel || ('coreDatetimePicker.datetimeOkLabel' | fdTranslate)\"\n                                    (click)=\"submit()\"\n                                ></button>\n                            </fd-bar-element>\n                            <fd-bar-element>\n                                <button\n                                    fd-button\n                                    fdType=\"transparent\"\n                                    [label]=\"cancelLabel || ('coreDatetimePicker.datetimeCancelLabel' | fdTranslate)\"\n                                    [ariaLabel]=\"\n                                        cancelLabel || ('coreDatetimePicker.datetimeCancelLabel' | fdTranslate)\n                                    \"\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", styles: [".fd-datetime{display:block}.fd-datetime__wrapper{max-height:80vh;max-width:80vw}.fd-datetime__container{display:flex;align-items:center;justify-content:center;margin:0 16px;overflow:auto}.fd-datetime__separator{background-color:#d3d3d3;width:1px;margin:42px 28px;align-self:stretch}.fd-datetime fd-time{width:auto}.fd-datetime__display-type-switcher{margin-top:1rem;display:none;width:100%;justify-content:center}@media (max-width: 960px){.fd-datetime__display-type-switcher{display:flex}.fd-datetime__wrapper{min-width:min(20rem,90vw)}.fd-datetime__container>*:not(.fd-datetime__active-display-type){display:none}}\n"], dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "directive", type: i4.PopoverBodyFooterDirective, selector: "[fdPopoverBodyFooter], [fd-popover-body-footer]" }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i5.CalendarComponent, selector: "fd-calendar", inputs: ["selectedDate", "markWeekends", "showWeekNumbers", "mobileLandscape", "mobilePortrait", "selectedRangeDate", "activeView", "startingDayOfWeek", "calType", "id", "specialDaysRules", "yearGrid", "aggregatedYearGrid", "rangeHoverEffect", "previousButtonDisableFunction", "nextButtonDisableFunction", "escapeFocusFunction", "disableFunction", "disableRangeStartFunction", "disableRangeEndFunction"], outputs: ["activeViewChange", "selectedDateChange", "selectedRangeDateChange", "isValidDateChange", "closeCalendar", "closeClicked"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7.TimeComponent, selector: "fd-time", inputs: ["meridian", "validate", "keepTwoDigits", "disabled", "displaySeconds", "displayMinutes", "displayHours", "tablet", "elementsAtOnce", "time", "spinnerButtons"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i10.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i10.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "directive", type: i10.BarElementDirective, selector: "fd-bar-element", inputs: ["fullWidth", "isTitle"] }, { kind: "component", type: i11.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { kind: "component", type: i2.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "pipe", type: i12.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: DatetimePickerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-datetime-picker', providers: [

package/esm2020/form/form-input-message-group/form-input-message-group.component.mjs

@@ -33,7 +33,7 @@ export class FormInputMessageGroupComponent {
     }
 }
 FormInputMessageGroupComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormInputMessageGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-FormInputMessageGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: { triggers: "triggers", closeOnOutsideClick: "closeOnOutsideClick", fillControlMode: "fillControlMode", noArrow: "noArrow", closeOnEscapeKey: "closeOnEscapeKey", placement: "placement", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<fd-popover\n    class=\"fd-form-input-message-group\"\n    additionalBodyClass=\"fd-popover__popper--input-message-group\"\n    [placement]=\"placement\"\n    [triggers]=\"triggers\"\n    [noArrow]=\"noArrow\"\n    [closeOnEscapeKey]=\"closeOnEscapeKey\"\n    [fillControlMode]=\"fillControlMode\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"openChanged($event)\"\n>\n    <fd-popover-control>\n        <ng-content></ng-content>\n    </fd-popover-control>\n    <fd-popover-body>\n        <ng-content select=\"fd-form-message\"></ng-content>\n    </fd-popover-body>\n</fd-popover>\n", styles: [".fd-popover-container-custom--message{flex-grow:1}.fd-popover-container-custom{border:none}.fd-form-input-message-group.fd-popover-custom,.fd-form-input-message-group .fd-input{display:block}.fd-popover__popper.fd-popover__popper--input-message-group{margin-top:0!important;z-index:999}.fd-popover__popper.fd-popover__popper--input-message-group .fd-form-message{display:block}\n"], dependencies: [{ kind: "component", type: i1.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i1.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+FormInputMessageGroupComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: { triggers: "triggers", closeOnOutsideClick: "closeOnOutsideClick", fillControlMode: "fillControlMode", noArrow: "noArrow", closeOnEscapeKey: "closeOnEscapeKey", placement: "placement", isOpen: "isOpen" }, outputs: { isOpenChange: "isOpenChange" }, ngImport: i0, template: "<fd-popover\n    class=\"fd-form-input-message-group\"\n    additionalBodyClass=\"fd-popover__popper--input-message-group\"\n    [placement]=\"placement\"\n    [triggers]=\"triggers\"\n    [noArrow]=\"noArrow\"\n    [closeOnEscapeKey]=\"closeOnEscapeKey\"\n    [fillControlMode]=\"fillControlMode\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"openChanged($event)\"\n>\n    <fd-popover-control>\n        <ng-content></ng-content>\n    </fd-popover-control>\n    <fd-popover-body>\n        <ng-content select=\"fd-form-message\"></ng-content>\n    </fd-popover-body>\n</fd-popover>\n", styles: [".fd-popover-container-custom--message{flex-grow:1}.fd-popover-container-custom{border:none}.fd-form-input-message-group.fd-popover-custom,.fd-form-input-message-group .fd-input{display:block}.fd-popover__popper.fd-popover__popper--input-message-group{margin-top:0!important;z-index:999}.fd-popover__popper.fd-popover__popper--input-message-group .fd-form-message{display:block}\n"], dependencies: [{ kind: "component", type: i1.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i1.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "component", type: i1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: FormInputMessageGroupComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-form-input-message-group', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-popover\n    class=\"fd-form-input-message-group\"\n    additionalBodyClass=\"fd-popover__popper--input-message-group\"\n    [placement]=\"placement\"\n    [triggers]=\"triggers\"\n    [noArrow]=\"noArrow\"\n    [closeOnEscapeKey]=\"closeOnEscapeKey\"\n    [fillControlMode]=\"fillControlMode\"\n    [closeOnOutsideClick]=\"closeOnOutsideClick\"\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"openChanged($event)\"\n>\n    <fd-popover-control>\n        <ng-content></ng-content>\n    </fd-popover-control>\n    <fd-popover-body>\n        <ng-content select=\"fd-form-message\"></ng-content>\n    </fd-popover-body>\n</fd-popover>\n", styles: [".fd-popover-container-custom--message{flex-grow:1}.fd-popover-container-custom{border:none}.fd-form-input-message-group.fd-popover-custom,.fd-form-input-message-group .fd-input{display:block}.fd-popover__popper.fd-popover__popper--input-message-group{margin-top:0!important;z-index:999}.fd-popover__popper.fd-popover__popper--input-message-group .fd-form-message{display:block}\n"] }]

package/esm2020/multi-input/multi-input.component.mjs

@@ -571,7 +571,7 @@ MultiInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", ve
         MenuKeyboardService,
         registerFormItemControl(MultiInputComponent),
         contentDensityObserverProviders()
-    ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile\"></ng-container>\n\n            <fd-popover\n                additionalBodyClass=\"fd-popover-custom-list\"\n                *ngIf=\"!mobile\"\n                [isOpen]=\"open\"\n                (isOpenChange)=\"openChangeHandle($event)\"\n                (input)=\"!open && openChangeHandle(true)\"\n                [triggers]=\"[]\"\n                [maxWidth]=\"bodyMaxWidth\"\n                [focusTrapped]=\"true\"\n                [disabled]=\"disabled\"\n                [fillControlMode]=\"fillControlMode\"\n                class=\"fd-multi-input-popover-custom\"\n            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n                    </form>\n                </fd-popover-control>\n\n                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n                    <ng-content></ng-content>\n                </fd-popover-body>\n            </fd-popover>\n        </div>\n    </div>\n\n    <ng-template #control>\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"displayAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked()\"\n        >\n            <fd-tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                [class.fd-multi-input-tokenizer-custom--compact]=\"_contentDensityObserver.isCompact$ | async\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: valueFn\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option.value, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option.value, false)\"\n                >\n                    <span [innerHtml]=\"option.label\"></span>\n                </fd-token>\n\n                <input\n                    type=\"text\"\n                    class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n                    autocomplete=\"off\"\n                    fd-form-control\n                    fd-input-group-input\n                    fd-auto-complete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [inputText]=\"_searchTermCtrl.value || ''\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [attr.aria-label]=\"ariaLabel\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [style.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: valueFn\"\n                fd-list-item\n                [attr.aria-label]=\"option.label\"\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"option.isSelected\"\n            >\n                <fd-checkbox (click)=\"_onCheckboxClick(option.value, $event, idx)\" [value]=\"option.isSelected\">\n                    <!-- TODO -->\n                </fd-checkbox>\n\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n\n            <li\n                *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n                fd-list-item\n                class=\"fd-multi-input-show-all\"\n                (keyDown)=\"_showAllKeyDown($event)\"\n                (click)=\"_showAllClicked($event)\"\n            >\n                <a fd-link tabindex=\"0\">Show All ({{ dropdownValues.length }})</a>\n            </li>\n        </ul>\n    </ng-template>\n\n    <ng-template let-option=\"option\" #itemSource>\n        <span\n            *ngIf=\"!itemTemplate\"\n            fd-list-title\n            [innerHtml]=\"option.label | highlight: _searchTermCtrl.value || '':highlight\"\n        ></span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n", 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-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"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: i4.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i10.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i11.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2.AutoCompleteDirective, selector: "[fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], viewQueries: [{ propertyName: "popoverRef", first: true, predicate: PopoverComponent, descendants: true }, { propertyName: "controlTemplate", first: true, predicate: ["control"], descendants: true, read: TemplateRef }, { propertyName: "listTemplate", first: true, predicate: ["list"], descendants: true, read: TemplateRef }, { propertyName: "listComponent", first: true, predicate: ListComponent, descendants: true }, { propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "tokenizer", first: true, predicate: TokenizerComponent, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *ngIf=\"_viewModel$ | async as viewModel\">\n    <div class=\"fd-multi-input fd-multi-input-custom\">\n        <div class=\"fd-multi-input-field\">\n            <ng-container [ngTemplateOutlet]=\"control\" *ngIf=\"mobile\"></ng-container>\n\n            <fd-popover\n                additionalBodyClass=\"fd-popover-custom-list\"\n                *ngIf=\"!mobile\"\n                [isOpen]=\"open\"\n                (isOpenChange)=\"openChangeHandle($event)\"\n                (input)=\"!open && openChangeHandle(true)\"\n                [triggers]=\"[]\"\n                [maxWidth]=\"bodyMaxWidth\"\n                [focusTrapped]=\"true\"\n                [disabled]=\"disabled\"\n                [fillControlMode]=\"fillControlMode\"\n                class=\"fd-multi-input-popover-custom\"\n            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container *ngTemplateOutlet=\"control\"></ng-container>\n                    </form>\n                </fd-popover-control>\n\n                <fd-popover-body\n                    [attr.aria-hidden]=\"!open\"\n                    [class.fd-popover__body--hidden]=\"!viewModel.displayedOptions.length\"\n                >\n                    <ng-container *ngTemplateOutlet=\"list\"></ng-container>\n\n                    <ng-content></ng-content>\n                </fd-popover-body>\n            </fd-popover>\n        </div>\n    </div>\n\n    <ng-template #control>\n        <fd-input-group\n            class=\"fd-multi-input-input-group-custom\"\n            [state]=\"state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"displayAddonButton\"\n            [disabled]=\"disabled\"\n            [isExpanded]=\"open && !mobile && viewModel.displayedOptions.length > 0\"\n            [isControl]=\"true\"\n            [glyph]=\"displayAddonButton ? glyph : ''\"\n            [iconTitle]=\"title\"\n            (addOnButtonClicked)=\"_addOnButtonClicked()\"\n        >\n            <fd-tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                [class.fd-multi-input-tokenizer-custom--compact]=\"_contentDensityObserver.isCompact$ | async\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: valueFn\"\n                    [disabled]=\"disabled\"\n                    (onCloseClick)=\"_onTokenClick(option.value, false, $event)\"\n                    (onRemove)=\"_onTokenClick(option.value, false)\"\n                >\n                    <span [innerHtml]=\"option.label\"></span>\n                </fd-token>\n\n                <input\n                    type=\"text\"\n                    class=\"fd-input fd-tokenizer__input fd-multi-input-tokenizer-input\"\n                    autocomplete=\"off\"\n                    fd-form-control\n                    fd-input-group-input\n                    fd-auto-complete\n                    (onComplete)=\"_handleComplete($event)\"\n                    #searchInputElement\n                    [displayFn]=\"displayFn\"\n                    [inputText]=\"_searchTermCtrl.value || ''\"\n                    [options]=\"dropdownValues\"\n                    [enable]=\"autoComplete && !mobile\"\n                    [placeholder]=\"placeholder\"\n                    [formControl]=\"_searchTermCtrl\"\n                    [attr.aria-required]=\"required\"\n                    [attr.aria-label]=\"ariaLabel\"\n                    [attr.aria-labelledby]=\"ariaLabelledBy\"\n                    (keydown)=\"_handleInputKeydown($event)\"\n                    [attr.id]=\"inputId\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [style.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            (focusEscapeList)=\"handleListFocusEscape($event)\"\n            [style.minWidth]=\"'100%'\"\n        >\n            <li\n                *ngFor=\"let option of viewModel.displayedOptions; index as idx; trackBy: valueFn\"\n                fd-list-item\n                [attr.aria-label]=\"option.label\"\n                (click)=\"_onCheckboxClick(option.value, $event, idx, true)\"\n                (keyup)=\"_onCheckboxKeyup(option.value, $event, idx)\"\n                [selected]=\"option.isSelected\"\n            >\n                <fd-checkbox (click)=\"_onCheckboxClick(option.value, $event, idx)\" [value]=\"option.isSelected\">\n                    <!-- TODO -->\n                </fd-checkbox>\n\n                <ng-container\n                    [ngTemplateOutlet]=\"itemSource\"\n                    [ngTemplateOutletContext]=\"{ option: option }\"\n                ></ng-container>\n            </li>\n\n            <li\n                *ngIf=\"showAllButton && viewModel.displayedOptions.length < dropdownValues.length\"\n                fd-list-item\n                class=\"fd-multi-input-show-all\"\n                (keyDown)=\"_showAllKeyDown($event)\"\n                (click)=\"_showAllClicked($event)\"\n            >\n                <a fd-link tabindex=\"0\">Show All ({{ dropdownValues.length }})</a>\n            </li>\n        </ul>\n    </ng-template>\n\n    <ng-template let-option=\"option\" #itemSource>\n        <span\n            *ngIf=\"!itemTemplate\"\n            fd-list-title\n            [innerHtml]=\"option.label | highlight: _searchTermCtrl.value || '':highlight\"\n        ></span>\n\n        <ng-container *ngIf=\"itemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"itemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: option.item }\"\n            ></ng-container>\n        </ng-container>\n    </ng-template>\n</ng-container>\n", 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-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"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i4.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly", "deleteButtonLabel", "ariaRoleDescription"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown"] }, { kind: "component", type: i4.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i6.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i6.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "component", type: i7.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i7.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "component", type: i7.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i8.InputGroupComponent, selector: "fd-input-group", inputs: ["inputTemplate", "placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledby", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i10.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values"], outputs: ["focusChange"] }, { kind: "component", type: i11.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2.AutoCompleteDirective, selector: "[fd-auto-complete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 __decorate([
     applyCssClass,
     __metadata("design:type", Function),

package/esm2020/nested-list/nested-list-popover/nested-list-popover.component.mjs

@@ -81,7 +81,7 @@ export class NestedListPopoverComponent {
     }
 }
 NestedListPopoverComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NestedListPopoverComponent, deps: [{ token: i1.NestedListKeyboardService }, { token: i2.NestedItemService, optional: true }, { token: i3.RtlService, optional: true }], target: i0.ɵɵFactoryTarget.Component });
-NestedListPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: NestedListPopoverComponent, selector: "fd-nested-list-popover", inputs: { title: "title" }, host: { properties: { "class.fd-nested-list__popover": "this.popoverClass" } }, queries: [{ propertyName: "linkDirective", first: true, predicate: NestedLinkDirective, descendants: true }, { propertyName: "contentDirective", first: true, predicate: NestedListContentDirective, descendants: true }], viewQueries: [{ propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }], ngImport: i0, template: "<fd-popover\n    [placement]=\"placement$ | async\"\n    [triggers]=\"['click']\"\n    [noArrow]=\"false\"\n    [isOpen]=\"open\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n>\n    <fd-popover-control>\n        <ng-content select=\"[fd-nested-list-link]\"></ng-content>\n        <ng-content select=\"[fd-nested-list-content]\"></ng-content>\n    </fd-popover-control>\n    <fd-popover-body class=\"fd-nested-list--text-only\">\n        <a fd-nested-list-link class=\"fd-nested-list__popover-header\">\n            <span fd-nested-list-title>{{ title }}</span>\n        </a>\n        <ng-content select=\"[fd-nested-list]\"></ng-content>\n        <ng-content select=\"fd-prepared-nested-list\"></ng-content>\n    </fd-popover-body>\n</fd-popover>\n", styles: [".fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__title{display:inline-flex}.fd-side-nav--condensed .fd-nested-list__popover-header{box-shadow:0 0 .25rem #00000026,inset 0 -.0625rem #d9d9d9}.fd-side-nav--condensed .fd-popover-custom{display:block}[dir=rtl] .fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__link,.fd-side-nav--condensed[dir=rtl] .fd-popover-container-custom .fd-nested-list__link{padding-left:1rem}\n"], dependencies: [{ kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i5.NestedLinkDirective, selector: "[fdNestedLink], [fd-nested-list-link]", inputs: ["onClickCallback", "selected", "ariaDescribedby"], outputs: ["selectedChange"] }, { kind: "directive", type: i6.NestedListTitleDirective, selector: "[fdNestedDirectivesTitle], [fd-nested-list-title]" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+NestedListPopoverComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.1.3", type: NestedListPopoverComponent, selector: "fd-nested-list-popover", inputs: { title: "title" }, host: { properties: { "class.fd-nested-list__popover": "this.popoverClass" } }, queries: [{ propertyName: "linkDirective", first: true, predicate: NestedLinkDirective, descendants: true }, { propertyName: "contentDirective", first: true, predicate: NestedListContentDirective, descendants: true }], viewQueries: [{ propertyName: "popoverComponent", first: true, predicate: PopoverComponent, descendants: true }], ngImport: i0, template: "<fd-popover\n    [placement]=\"placement$ | async\"\n    [triggers]=\"['click']\"\n    [noArrow]=\"false\"\n    [isOpen]=\"open\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n>\n    <fd-popover-control>\n        <ng-content select=\"[fd-nested-list-link]\"></ng-content>\n        <ng-content select=\"[fd-nested-list-content]\"></ng-content>\n    </fd-popover-control>\n    <fd-popover-body class=\"fd-nested-list--text-only\">\n        <a fd-nested-list-link class=\"fd-nested-list__popover-header\">\n            <span fd-nested-list-title>{{ title }}</span>\n        </a>\n        <ng-content select=\"[fd-nested-list]\"></ng-content>\n        <ng-content select=\"fd-prepared-nested-list\"></ng-content>\n    </fd-popover-body>\n</fd-popover>\n", styles: [".fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__title{display:inline-flex}.fd-side-nav--condensed .fd-nested-list__popover-header{box-shadow:0 0 .25rem #00000026,inset 0 -.0625rem #d9d9d9}.fd-side-nav--condensed .fd-popover-custom{display:block}[dir=rtl] .fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__link,.fd-side-nav--condensed[dir=rtl] .fd-popover-container-custom .fd-nested-list__link{padding-left:1rem}\n"], dependencies: [{ kind: "component", type: i4.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i4.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "component", type: i4.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "directive", type: i5.NestedLinkDirective, selector: "[fdNestedLink], [fd-nested-list-link]", inputs: ["onClickCallback", "selected", "ariaDescribedby"], outputs: ["selectedChange"] }, { kind: "directive", type: i6.NestedListTitleDirective, selector: "[fdNestedDirectivesTitle], [fd-nested-list-title]" }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: NestedListPopoverComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-nested-list-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-popover\n    [placement]=\"placement$ | async\"\n    [triggers]=\"['click']\"\n    [noArrow]=\"false\"\n    [isOpen]=\"open\"\n    (isOpenChange)=\"handleOpenChange($event)\"\n>\n    <fd-popover-control>\n        <ng-content select=\"[fd-nested-list-link]\"></ng-content>\n        <ng-content select=\"[fd-nested-list-content]\"></ng-content>\n    </fd-popover-control>\n    <fd-popover-body class=\"fd-nested-list--text-only\">\n        <a fd-nested-list-link class=\"fd-nested-list__popover-header\">\n            <span fd-nested-list-title>{{ title }}</span>\n        </a>\n        <ng-content select=\"[fd-nested-list]\"></ng-content>\n        <ng-content select=\"fd-prepared-nested-list\"></ng-content>\n    </fd-popover-body>\n</fd-popover>\n", styles: [".fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__title{display:inline-flex}.fd-side-nav--condensed .fd-nested-list__popover-header{box-shadow:0 0 .25rem #00000026,inset 0 -.0625rem #d9d9d9}.fd-side-nav--condensed .fd-popover-custom{display:block}[dir=rtl] .fd-side-nav--condensed .fd-popover-container-custom .fd-nested-list__link,.fd-side-nav--condensed[dir=rtl] .fd-popover-container-custom .fd-nested-list__link{padding-left:1rem}\n"] }]

package/esm2020/object-status/object-status.component.mjs

@@ -105,4 +105,4 @@ export const buildObjectStatusCssClasses = (data) => [
     data.clickable ? 'fd-object-status--link' : '',
     data.class || ''
 ];
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2JqZWN0LXN0YXR1cy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2NvcmUvc3JjL2xpYi9vYmplY3Qtc3RhdHVzL29iamVjdC1zdGF0dXMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsS0FBSyxFQUVMLGlCQUFpQixFQUVwQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsYUFBYSxFQUFtQixNQUFNLDZCQUE2QixDQUFDOzs7O0FBOEI3RSxNQUFNLE9BQU8scUJBQXFCO0lBbUQ5QixjQUFjO0lBQ2QsWUFBb0IsV0FBdUI7UUFBdkIsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFoQjNDLDhDQUE4QztRQUU5QyxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBRWxCLDZDQUE2QztRQUU3QyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRWpCLG9EQUFvRDtRQUVwRCxVQUFLLEdBQUcsS0FBSyxDQUFDO0lBTWdDLENBQUM7SUFFL0MsY0FBYztJQUNkLFdBQVc7UUFDUCxJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQztJQUNsQyxDQUFDO0lBRUQsY0FBYztJQUNkLFFBQVE7UUFDSixJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQztJQUNsQyxDQUFDO0lBRUQ7Ozs7T0FJRztJQUVILHNCQUFzQjtRQUNsQixPQUFPLDJCQUEyQixDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFFRCxjQUFjO0lBQ2QsVUFBVTtRQUNOLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQztJQUM1QixDQUFDOztrSEE3RVEscUJBQXFCO3NHQUFyQixxQkFBcUIsa1dBdEJwQjs7Ozs7Ozs7Ozs7Ozs7S0FjVDtBQThFRDtJQURDLGFBQWE7Ozs7bUVBR2I7MkZBeEVRLHFCQUFxQjtrQkF6QmpDLFNBQVM7K0JBRUksb0JBQW9CLFlBQ3BCOzs7Ozs7Ozs7Ozs7OztLQWNULGlCQUVjLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsaUJBQWlCLEVBQUUsb0JBQW9CO3FCQUMxQztpR0FLRCxLQUFLO3NCQURKLEtBQUs7Z0JBU04sTUFBTTtzQkFETCxLQUFLO2dCQU9OLEtBQUs7c0JBREosS0FBSztnQkFLTixLQUFLO3NCQURKLEtBQUs7Z0JBT04sY0FBYztzQkFEYixLQUFLO2dCQVFOLGVBQWU7c0JBRGQsS0FBSztnQkFLTixTQUFTO3NCQURSLEtBQUs7Z0JBS04sUUFBUTtzQkFEUCxLQUFLO2dCQUtOLEtBQUs7c0JBREosS0FBSztnQkF5Qk4sc0JBQXNCO0FBbUIxQixNQUFNLENBQUMsTUFBTSwyQkFBMkIsR0FBRyxDQUFDLElBQXNCLEVBQVksRUFBRSxDQUFDO0lBQzdFLGtCQUFrQjtJQUNsQixJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyw0QkFBNEIsQ0FBQyxDQUFDLENBQUMsRUFBRTtJQUNqRCxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyx5QkFBeUIsQ0FBQyxDQUFDLENBQUMsRUFBRTtJQUMzQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxxQkFBcUIsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFO0lBQ3JELElBQUksQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLGdDQUFnQyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUU7SUFDbEYsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsd0JBQXdCLENBQUMsQ0FBQyxDQUFDLEVBQUU7SUFDOUMsSUFBSSxDQUFDLEtBQUssSUFBSSxFQUFFO0NBQ25CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBFbGVtZW50UmVmLFxuICAgIElucHV0LFxuICAgIE9uQ2hhbmdlcyxcbiAgICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgICBPbkluaXRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBhcHBseUNzc0NsYXNzLCBDc3NDbGFzc0J1aWxkZXIgfSBmcm9tICdAZnVuZGFtZW50YWwtbmd4L2NvcmUvdXRpbHMnO1xuaW1wb3J0IHsgTnVsbGFibGVPYmplY3QsIE51bGxhYmxlIH0gZnJvbSAnQGZ1bmRhbWVudGFsLW5neC9jb3JlL3NoYXJlZCc7XG5cbmV4cG9ydCB0eXBlIE9iamVjdFN0YXR1cyA9ICduZWdhdGl2ZScgfCAnY3JpdGljYWwnIHwgJ3Bvc2l0aXZlJyB8ICdpbmZvcm1hdGl2ZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gICAgc2VsZWN0b3I6ICdbZmQtb2JqZWN0LXN0YXR1c10nLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgICAgIDxmZC1pY29uXG4gICAgICAgICAgICAqbmdJZj1cImdseXBoXCJcbiAgICAgICAgICAgIGNsYXNzPVwiZmQtb2JqZWN0LXN0YXR1c19faWNvblwiXG4gICAgICAgICAgICBbZ2x5cGhdPVwiZ2x5cGhcIlxuICAgICAgICAgICAgW2F0dHIucm9sZV09XCJnbHlwaEFyaWFMYWJlbCA/ICdwcmVzZW50YXRpb24nIDogJydcIlxuICAgICAgICAgICAgW2FyaWFMYWJlbF09XCJnbHlwaEFyaWFMYWJlbFwiXG4gICAgICAgID5cbiAgICAgICAgPC9mZC1pY29uPlxuXG4gICAgICAgIDxzcGFuICpuZ0lmPVwibGFiZWxcIiBjbGFzcz1cImZkLW9iamVjdC1zdGF0dXNfX3RleHRcIiBbY2xhc3NdPVwiX3RleHRDbGFzc1wiPnt7IGxhYmVsIH19PC9zcGFuPlxuXG4gICAgICAgIDwhLS0gREVQUkVDQVRFRCAtIFJlbW92ZSBpbiB2MC4yMy4wIC0tPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgYCxcbiAgICBzdHlsZVVybHM6IFsnLi9vYmplY3Qtc3RhdHVzLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0OiB7XG4gICAgICAgICdbYXR0ci50YWJpbmRleF0nOiAnY2xpY2thYmxlID8gMCA6IC0xJ1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgT2JqZWN0U3RhdHVzQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzLCBPbkluaXQsIENzc0NsYXNzQnVpbGRlciB7XG4gICAgLyoqIFVzZXIncyBjdXN0b20gY2xhc3NlcyAqL1xuICAgIEBJbnB1dCgpXG4gICAgY2xhc3M6IHN0cmluZztcblxuICAgIC8qKlxuICAgICAqIFRoZSBzdGF0dXMgcmVwcmVzZW50ZWQgYnkgdGhlIE9iamVjdCBTdGF0dXMuXG4gICAgICogQ2FuIGJlIG9uZSBvZiB0aGUgZm9sbG93aW5nOiAnbmVnYXRpdmUnIHwgJ2NyaXRpY2FsJyB8ICdwb3NpdGl2ZScgfCAnaW5mb3JtYXRpdmUnXG4gICAgICogRm9yIGRlZmF1bHQgT2JqZWN0IFN0YXR1cyBvbWl0IHRoaXMgcHJvcGVydHlcbiAgICAgKi9cbiAgICBASW5wdXQoKVxuICAgIHN0YXR1czogTnVsbGFibGU8T2JqZWN0U3RhdHVzPjtcblxuICAgIC8qKlxuICAgICAqIEdseXBoIChpY29uKSBvZiB0aGUgT2JqZWN0IFN0YXR1cy5cbiAgICAgKi9cbiAgICBASW5wdXQoKVxuICAgIGdseXBoOiBzdHJpbmc7XG5cbiAgICAvKiogRGVmaW5lIHRoZSB0ZXh0IGNvbnRlbnQgb2YgdGhlIE9iamVjdCBTdGF0dXMgKi9cbiAgICBASW5wdXQoKVxuICAgIGxhYmVsOiBOdWxsYWJsZTxzdHJpbmc+O1xuXG4gICAgLyoqXG4gICAgICogTGFiZWwgYXBwbGllZCB0byBnbHlwaCBlbGVtZW50LCBzaG91bGQgYmUgdXNlZCB3aGVuIHRoZXJlIGlzIG5vIHRleHQgaW5jbHVkZWRcbiAgICAgKi9cbiAgICBASW5wdXQoKVxuICAgIGdseXBoQXJpYUxhYmVsOiBzdHJpbmc7XG5cbiAgICAvKipcbiAgICAgKiBBIG51bWJlciByZXByZXNlbnRpbmcgdGhlIGluZGljYXRpb24gY29sb3IuXG4gICAgICogT3B0aW9uIGluY2x1ZGVzIG51bWJlcnMgZnJvbSAxIHRvIDhcbiAgICAgKi9cbiAgICBASW5wdXQoKVxuICAgIGluZGljYXRpb25Db2xvcjogTnVsbGFibGU8bnVtYmVyPjtcblxuICAgIC8qKiBXaGV0aGVyIHRoZSBPYmplY3QgU3RhdHVzIGlzIGNsaWNrYWJsZS4gKi9cbiAgICBASW5wdXQoKVxuICAgIGNsaWNrYWJsZSA9IGZhbHNlO1xuXG4gICAgLyoqIFdoZXRoZXIgdGhlIE9iamVjdCBTdGF0dXMgaXMgaW52ZXJ0ZWQuICovXG4gICAgQElucHV0KClcbiAgICBpbnZlcnRlZCA9IGZhbHNlO1xuXG4gICAgLyoqIFdoZXRoZXIgdGhlIE9iamVjdCBTdGF0dXMgaXMgaW4gTGFyZ2UgRGVzaWduLiAqL1xuICAgIEBJbnB1dCgpXG4gICAgbGFyZ2UgPSBmYWxzZTtcblxuICAgIC8qKiBAaGlkZGVuICovXG4gICAgX3RleHRDbGFzczogc3RyaW5nO1xuXG4gICAgLyoqIEBoaWRkZW4gKi9cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7fVxuXG4gICAgLyoqIEBoaWRkZW4gKi9cbiAgICBuZ09uQ2hhbmdlcygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5idWlsZENvbXBvbmVudENzc0NsYXNzKCk7XG4gICAgfVxuXG4gICAgLyoqIEBoaWRkZW4gKi9cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5idWlsZENvbXBvbmVudENzc0NsYXNzKCk7XG4gICAgfVxuXG4gICAgLyoqIEBoaWRkZW5cbiAgICAgKiBDc3NDbGFzc0J1aWxkZXIgaW50ZXJmYWNlIGltcGxlbWVudGF0aW9uXG4gICAgICogZnVuY3Rpb24gbXVzdCByZXR1cm4gc2luZ2xlIHN0cmluZ1xuICAgICAqIGZ1bmN0aW9uIGlzIHJlc3BvbnNpYmxlIGZvciBvcmRlciB3aGljaCBjc3MgY2xhc3NlcyBhcmUgYXBwbGllZFxuICAgICAqL1xuICAgIEBhcHBseUNzc0NsYXNzXG4gICAgYnVpbGRDb21wb25lbnRDc3NDbGFzcygpOiBzdHJpbmdbXSB7XG4gICAgICAgIHJldHVybiBidWlsZE9iamVjdFN0YXR1c0Nzc0NsYXNzZXModGhpcyk7XG4gICAgfVxuXG4gICAgLyoqIEBoaWRkZW4gKi9cbiAgICBlbGVtZW50UmVmKCk6IEVsZW1lbnRSZWY8YW55PiB7XG4gICAgICAgIHJldHVybiB0aGlzLl9lbGVtZW50UmVmO1xuICAgIH1cbn1cblxudHlwZSBPYmplY3RTdGF0dXNEYXRhID0gTnVsbGFibGVPYmplY3Q8e1xuICAgIHN0YXR1czogT2JqZWN0U3RhdHVzO1xuICAgIGludmVydGVkOiBib29sZWFuO1xuICAgIGxhcmdlOiBib29sZWFuO1xuICAgIGluZGljYXRpb25Db2xvcjogbnVtYmVyO1xuICAgIGNsaWNrYWJsZTogYm9vbGVhbjtcbiAgICBjbGFzczogc3RyaW5nO1xufT47XG5cbmV4cG9ydCBjb25zdCBidWlsZE9iamVjdFN0YXR1c0Nzc0NsYXNzZXMgPSAoZGF0YTogT2JqZWN0U3RhdHVzRGF0YSk6IHN0cmluZ1tdID0+IFtcbiAgICAnZmQtb2JqZWN0LXN0YXR1cycsXG4gICAgZGF0YS5pbnZlcnRlZCA/ICdmZC1vYmplY3Qtc3RhdHVzLS1pbnZlcnRlZCcgOiAnJyxcbiAgICBkYXRhLmxhcmdlID8gJ2ZkLW9iamVjdC1zdGF0dXMtLWxhcmdlJyA6ICcnLFxuICAgIGRhdGEuc3RhdHVzID8gYGZkLW9iamVjdC1zdGF0dXMtLSR7ZGF0YS5zdGF0dXN9YCA6ICcnLFxuICAgIGRhdGEuaW5kaWNhdGlvbkNvbG9yID8gYGZkLW9iamVjdC1zdGF0dXMtLWluZGljYXRpb24tJHtkYXRhLmluZGljYXRpb25Db2xvcn1gIDogJycsXG4gICAgZGF0YS5jbGlja2FibGUgPyAnZmQtb2JqZWN0LXN0YXR1cy0tbGluaycgOiAnJyxcbiAgICBkYXRhLmNsYXNzIHx8ICcnXG5dO1xuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoib2JqZWN0LXN0YXR1cy5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL2NvcmUvc3JjL2xpYi9vYmplY3Qtc3RhdHVzL29iamVjdC1zdGF0dXMuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0gsdUJBQXVCLEVBQ3ZCLFNBQVMsRUFDVCxVQUFVLEVBQ1YsS0FBSyxFQUVMLGlCQUFpQixFQUVwQixNQUFNLGVBQWUsQ0FBQztBQUN2QixPQUFPLEVBQUUsYUFBYSxFQUFtQixNQUFNLDZCQUE2QixDQUFDOzs7O0FBOEI3RSxNQUFNLE9BQU8scUJBQXFCO0lBbUQ5QixjQUFjO0lBQ2QsWUFBb0IsV0FBdUI7UUFBdkIsZ0JBQVcsR0FBWCxXQUFXLENBQVk7UUFoQjNDLDhDQUE4QztRQUU5QyxjQUFTLEdBQUcsS0FBSyxDQUFDO1FBRWxCLDZDQUE2QztRQUU3QyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBRWpCLG9EQUFvRDtRQUVwRCxVQUFLLEdBQUcsS0FBSyxDQUFDO0lBTWdDLENBQUM7SUFFL0MsY0FBYztJQUNkLFdBQVc7UUFDUCxJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQztJQUNsQyxDQUFDO0lBRUQsY0FBYztJQUNkLFFBQVE7UUFDSixJQUFJLENBQUMsc0JBQXNCLEVBQUUsQ0FBQztJQUNsQyxDQUFDO0lBRUQ7Ozs7T0FJRztJQUVILHNCQUFzQjtRQUNsQixPQUFPLDJCQUEyQixDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzdDLENBQUM7SUFFRCxjQUFjO0lBQ2QsVUFBVTtRQUNOLE9BQU8sSUFBSSxDQUFDLFdBQVcsQ0FBQztJQUM1QixDQUFDOztrSEE3RVEscUJBQXFCO3NHQUFyQixxQkFBcUIsa1dBdEJwQjs7Ozs7Ozs7Ozs7Ozs7S0FjVDtBQThFRDtJQURDLGFBQWE7Ozs7bUVBR2I7MkZBeEVRLHFCQUFxQjtrQkF6QmpDLFNBQVM7K0JBRUksb0JBQW9CLFlBQ3BCOzs7Ozs7Ozs7Ozs7OztLQWNULGlCQUVjLGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sUUFDekM7d0JBQ0YsaUJBQWlCLEVBQUUsb0JBQW9CO3FCQUMxQztpR0FLRCxLQUFLO3NCQURKLEtBQUs7Z0JBU04sTUFBTTtzQkFETCxLQUFLO2dCQU9OLEtBQUs7c0JBREosS0FBSztnQkFLTixLQUFLO3NCQURKLEtBQUs7Z0JBT04sY0FBYztzQkFEYixLQUFLO2dCQVFOLGVBQWU7c0JBRGQsS0FBSztnQkFLTixTQUFTO3NCQURSLEtBQUs7Z0JBS04sUUFBUTtzQkFEUCxLQUFLO2dCQUtOLEtBQUs7c0JBREosS0FBSztnQkF5Qk4sc0JBQXNCO0FBbUIxQixNQUFNLENBQUMsTUFBTSwyQkFBMkIsR0FBRyxDQUFDLElBQXNCLEVBQVksRUFBRSxDQUFDO0lBQzdFLGtCQUFrQjtJQUNsQixJQUFJLENBQUMsUUFBUSxDQUFDLENBQUMsQ0FBQyw0QkFBNEIsQ0FBQyxDQUFDLENBQUMsRUFBRTtJQUNqRCxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQyx5QkFBeUIsQ0FBQyxDQUFDLENBQUMsRUFBRTtJQUMzQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxxQkFBcUIsSUFBSSxDQUFDLE1BQU0sRUFBRSxDQUFDLENBQUMsQ0FBQyxFQUFFO0lBQ3JELElBQUksQ0FBQyxlQUFlLENBQUMsQ0FBQyxDQUFDLGdDQUFnQyxJQUFJLENBQUMsZUFBZSxFQUFFLENBQUMsQ0FBQyxDQUFDLEVBQUU7SUFDbEYsSUFBSSxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsd0JBQXdCLENBQUMsQ0FBQyxDQUFDLEVBQUU7SUFDOUMsSUFBSSxDQUFDLEtBQUssSUFBSSxFQUFFO0NBQ25CLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICAgIENoYW5nZURldGVjdGlvblN0cmF0ZWd5LFxuICAgIENvbXBvbmVudCxcbiAgICBFbGVtZW50UmVmLFxuICAgIElucHV0LFxuICAgIE9uQ2hhbmdlcyxcbiAgICBWaWV3RW5jYXBzdWxhdGlvbixcbiAgICBPbkluaXRcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBhcHBseUNzc0NsYXNzLCBDc3NDbGFzc0J1aWxkZXIgfSBmcm9tICdAZnVuZGFtZW50YWwtbmd4L2NvcmUvdXRpbHMnO1xuaW1wb3J0IHsgTnVsbGFibGVPYmplY3QsIE51bGxhYmxlIH0gZnJvbSAnQGZ1bmRhbWVudGFsLW5neC9jb3JlL3NoYXJlZCc7XG5cbmV4cG9ydCB0eXBlIE9iamVjdFN0YXR1cyA9ICduZWdhdGl2ZScgfCAnY3JpdGljYWwnIHwgJ3Bvc2l0aXZlJyB8ICdpbmZvcm1hdGl2ZScgfCAnbmV1dHJhbCc7XG5cbkBDb21wb25lbnQoe1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvY29tcG9uZW50LXNlbGVjdG9yXG4gICAgc2VsZWN0b3I6ICdbZmQtb2JqZWN0LXN0YXR1c10nLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgICAgIDxmZC1pY29uXG4gICAgICAgICAgICAqbmdJZj1cImdseXBoXCJcbiAgICAgICAgICAgIGNsYXNzPVwiZmQtb2JqZWN0LXN0YXR1c19faWNvblwiXG4gICAgICAgICAgICBbZ2x5cGhdPVwiZ2x5cGhcIlxuICAgICAgICAgICAgW2F0dHIucm9sZV09XCJnbHlwaEFyaWFMYWJlbCA/ICdwcmVzZW50YXRpb24nIDogJydcIlxuICAgICAgICAgICAgW2FyaWFMYWJlbF09XCJnbHlwaEFyaWFMYWJlbFwiXG4gICAgICAgID5cbiAgICAgICAgPC9mZC1pY29uPlxuXG4gICAgICAgIDxzcGFuICpuZ0lmPVwibGFiZWxcIiBjbGFzcz1cImZkLW9iamVjdC1zdGF0dXNfX3RleHRcIiBbY2xhc3NdPVwiX3RleHRDbGFzc1wiPnt7IGxhYmVsIH19PC9zcGFuPlxuXG4gICAgICAgIDwhLS0gREVQUkVDQVRFRCAtIFJlbW92ZSBpbiB2MC4yMy4wIC0tPlxuICAgICAgICA8bmctY29udGVudD48L25nLWNvbnRlbnQ+XG4gICAgYCxcbiAgICBzdHlsZVVybHM6IFsnLi9vYmplY3Qtc3RhdHVzLmNvbXBvbmVudC5zY3NzJ10sXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBob3N0OiB7XG4gICAgICAgICdbYXR0ci50YWJpbmRleF0nOiAnY2xpY2thYmxlID8gMCA6IC0xJ1xuICAgIH1cbn0pXG5leHBvcnQgY2xhc3MgT2JqZWN0U3RhdHVzQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzLCBPbkluaXQsIENzc0NsYXNzQnVpbGRlciB7XG4gICAgLyoqIFVzZXIncyBjdXN0b20gY2xhc3NlcyAqL1xuICAgIEBJbnB1dCgpXG4gICAgY2xhc3M6IHN0cmluZztcblxuICAgIC8qKlxuICAgICAqIFRoZSBzdGF0dXMgcmVwcmVzZW50ZWQgYnkgdGhlIE9iamVjdCBTdGF0dXMuXG4gICAgICogQ2FuIGJlIG9uZSBvZiB0aGUgZm9sbG93aW5nOiAnbmVnYXRpdmUnIHwgJ2NyaXRpY2FsJyB8ICdwb3NpdGl2ZScgfCAnaW5mb3JtYXRpdmUnXG4gICAgICogRm9yIGRlZmF1bHQgT2JqZWN0IFN0YXR1cyBvbWl0IHRoaXMgcHJvcGVydHlcbiAgICAgKi9cbiAgICBASW5wdXQoKVxuICAgIHN0YXR1czogTnVsbGFibGU8T2JqZWN0U3RhdHVzPjtcblxuICAgIC8qKlxuICAgICAqIEdseXBoIChpY29uKSBvZiB0aGUgT2JqZWN0IFN0YXR1cy5cbiAgICAgKi9cbiAgICBASW5wdXQoKVxuICAgIGdseXBoOiBzdHJpbmc7XG5cbiAgICAvKiogRGVmaW5lIHRoZSB0ZXh0IGNvbnRlbnQgb2YgdGhlIE9iamVjdCBTdGF0dXMgKi9cbiAgICBASW5wdXQoKVxuICAgIGxhYmVsOiBOdWxsYWJsZTxzdHJpbmc+O1xuXG4gICAgLyoqXG4gICAgICogTGFiZWwgYXBwbGllZCB0byBnbHlwaCBlbGVtZW50LCBzaG91bGQgYmUgdXNlZCB3aGVuIHRoZXJlIGlzIG5vIHRleHQgaW5jbHVkZWRcbiAgICAgKi9cbiAgICBASW5wdXQoKVxuICAgIGdseXBoQXJpYUxhYmVsOiBzdHJpbmc7XG5cbiAgICAvKipcbiAgICAgKiBBIG51bWJlciByZXByZXNlbnRpbmcgdGhlIGluZGljYXRpb24gY29sb3IuXG4gICAgICogT3B0aW9uIGluY2x1ZGVzIG51bWJlcnMgZnJvbSAxIHRvIDhcbiAgICAgKi9cbiAgICBASW5wdXQoKVxuICAgIGluZGljYXRpb25Db2xvcjogTnVsbGFibGU8bnVtYmVyPjtcblxuICAgIC8qKiBXaGV0aGVyIHRoZSBPYmplY3QgU3RhdHVzIGlzIGNsaWNrYWJsZS4gKi9cbiAgICBASW5wdXQoKVxuICAgIGNsaWNrYWJsZSA9IGZhbHNlO1xuXG4gICAgLyoqIFdoZXRoZXIgdGhlIE9iamVjdCBTdGF0dXMgaXMgaW52ZXJ0ZWQuICovXG4gICAgQElucHV0KClcbiAgICBpbnZlcnRlZCA9IGZhbHNlO1xuXG4gICAgLyoqIFdoZXRoZXIgdGhlIE9iamVjdCBTdGF0dXMgaXMgaW4gTGFyZ2UgRGVzaWduLiAqL1xuICAgIEBJbnB1dCgpXG4gICAgbGFyZ2UgPSBmYWxzZTtcblxuICAgIC8qKiBAaGlkZGVuICovXG4gICAgX3RleHRDbGFzczogc3RyaW5nO1xuXG4gICAgLyoqIEBoaWRkZW4gKi9cbiAgICBjb25zdHJ1Y3Rvcihwcml2YXRlIF9lbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7fVxuXG4gICAgLyoqIEBoaWRkZW4gKi9cbiAgICBuZ09uQ2hhbmdlcygpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5idWlsZENvbXBvbmVudENzc0NsYXNzKCk7XG4gICAgfVxuXG4gICAgLyoqIEBoaWRkZW4gKi9cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgdGhpcy5idWlsZENvbXBvbmVudENzc0NsYXNzKCk7XG4gICAgfVxuXG4gICAgLyoqIEBoaWRkZW5cbiAgICAgKiBDc3NDbGFzc0J1aWxkZXIgaW50ZXJmYWNlIGltcGxlbWVudGF0aW9uXG4gICAgICogZnVuY3Rpb24gbXVzdCByZXR1cm4gc2luZ2xlIHN0cmluZ1xuICAgICAqIGZ1bmN0aW9uIGlzIHJlc3BvbnNpYmxlIGZvciBvcmRlciB3aGljaCBjc3MgY2xhc3NlcyBhcmUgYXBwbGllZFxuICAgICAqL1xuICAgIEBhcHBseUNzc0NsYXNzXG4gICAgYnVpbGRDb21wb25lbnRDc3NDbGFzcygpOiBzdHJpbmdbXSB7XG4gICAgICAgIHJldHVybiBidWlsZE9iamVjdFN0YXR1c0Nzc0NsYXNzZXModGhpcyk7XG4gICAgfVxuXG4gICAgLyoqIEBoaWRkZW4gKi9cbiAgICBlbGVtZW50UmVmKCk6IEVsZW1lbnRSZWY8YW55PiB7XG4gICAgICAgIHJldHVybiB0aGlzLl9lbGVtZW50UmVmO1xuICAgIH1cbn1cblxudHlwZSBPYmplY3RTdGF0dXNEYXRhID0gTnVsbGFibGVPYmplY3Q8e1xuICAgIHN0YXR1czogT2JqZWN0U3RhdHVzO1xuICAgIGludmVydGVkOiBib29sZWFuO1xuICAgIGxhcmdlOiBib29sZWFuO1xuICAgIGluZGljYXRpb25Db2xvcjogbnVtYmVyO1xuICAgIGNsaWNrYWJsZTogYm9vbGVhbjtcbiAgICBjbGFzczogc3RyaW5nO1xufT47XG5cbmV4cG9ydCBjb25zdCBidWlsZE9iamVjdFN0YXR1c0Nzc0NsYXNzZXMgPSAoZGF0YTogT2JqZWN0U3RhdHVzRGF0YSk6IHN0cmluZ1tdID0+IFtcbiAgICAnZmQtb2JqZWN0LXN0YXR1cycsXG4gICAgZGF0YS5pbnZlcnRlZCA/ICdmZC1vYmplY3Qtc3RhdHVzLS1pbnZlcnRlZCcgOiAnJyxcbiAgICBkYXRhLmxhcmdlID8gJ2ZkLW9iamVjdC1zdGF0dXMtLWxhcmdlJyA6ICcnLFxuICAgIGRhdGEuc3RhdHVzID8gYGZkLW9iamVjdC1zdGF0dXMtLSR7ZGF0YS5zdGF0dXN9YCA6ICcnLFxuICAgIGRhdGEuaW5kaWNhdGlvbkNvbG9yID8gYGZkLW9iamVjdC1zdGF0dXMtLWluZGljYXRpb24tJHtkYXRhLmluZGljYXRpb25Db2xvcn1gIDogJycsXG4gICAgZGF0YS5jbGlja2FibGUgPyAnZmQtb2JqZWN0LXN0YXR1cy0tbGluaycgOiAnJyxcbiAgICBkYXRhLmNsYXNzIHx8ICcnXG5dO1xuIl19

package/esm2020/overflow-layout/overflow-layout.component.mjs

@@ -189,7 +189,7 @@ OverflowLayoutComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
             useExisting: OverflowLayoutComponent
         },
         OverflowLayoutService
-    ], queries: [{ propertyName: "_moreButton", first: true, predicate: FD_OVERFLOW_EXPAND, descendants: true }, { propertyName: "_items", predicate: FD_OVERFLOW_ITEM_REF, descendants: true }, { propertyName: "_focusableOverflowItems", predicate: FD_OVERFLOW_FOCUSABLE_ITEM, descendants: true }], viewQueries: [{ propertyName: "_itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true }, { propertyName: "_layoutContainer", first: true, predicate: ["layoutContainer"], descendants: true }, { propertyName: "_showMoreContainer", first: true, predicate: ["showMoreContainer"], descendants: true }, { propertyName: "_visibleItems", predicate: OverflowLayoutItemContainerDirective, descendants: true }], ngImport: i0, template: "<ng-template [ngIf]=\"showMorePosition === 'left'\">\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n</ng-template>\n\n<div class=\"fd-overflow-layout__items-container\" #layoutContainer>\n    <div class=\"fd-overflow-layout__items-wrapper\">\n        <div class=\"fd-overflow-layout__items\" #itemsWrapper>\n            <ng-container *ngFor=\"let item of _allItems; trackBy: _itemsTrackFn\">\n                <div\n                    fdOverflowLayoutItemContainer\n                    [first]=\"item.first\"\n                    [last]=\"item.last\"\n                    [softHidden]=\"item.softHidden\"\n                >\n                    <ng-container *fdOverflowItemContainerRef>\n                        <ng-template\n                            [ngTemplateOutlet]=\"item.templateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: item.hidden,\n                                index: item.index,\n                                first: item.first,\n                                last: item.last,\n                                globalIndex: item.globalIndex\n                            }\"\n                        ></ng-template>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"showMorePosition === 'right'\">\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n</ng-template>\n\n<ng-template #showMore>\n    <div class=\"fd-overflow-layout__more\" [style.display]=\"_showMore ? 'block' : 'none'\" #showMoreContainer>\n        <ng-template #defaultShowMore>\n            <fd-popover\n                (isOpenChange)=\"_onPopoverStateChange($event)\"\n                placement=\"bottom\"\n                [focusTrapped]=\"true\"\n                [focusAutoCapture]=\"true\"\n                [maxWidth]=\"312\"\n            >\n                <fd-popover-control>\n                    <button fd-button [fdMenu]=\"true\" fdType=\"transparent\">\n                        {{ 'coreOverflowLayout.moreItemsButton' | fdTranslate: { count: _hiddenItems.length } }}\n                    </button>\n                </fd-popover-control>\n                <fd-popover-body>\n                    <div fdOverflowLayoutPopoverContent [items]=\"_hiddenItems\">\n                        <ng-container *ngFor=\"let item of _hiddenItems\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"item.templateRef\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: item.hidden,\n                                    index: item.index,\n                                    first: item.first,\n                                    last: item.last,\n                                    globalIndex: item.globalIndex\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n                    </div>\n                </fd-popover-body>\n            </fd-popover>\n        </ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"_moreButton?.templateRef || defaultShowMore\"\n            [ngTemplateOutletContext]=\"{ $implicit: _hiddenItems }\"\n        ></ng-template>\n    </div>\n</ng-template>\n", styles: [".fd-overflow-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:100%;justify-content:space-between}.fd-overflow-layout:before,.fd-overflow-layout:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;display:inline-flex}.fd-overflow-layout__items:before,.fd-overflow-layout__items:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__more{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;flex-shrink:0}.fd-overflow-layout__more:before,.fd-overflow-layout__more:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;position:relative}.fd-overflow-layout__items-container:before,.fd-overflow-layout__items-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items-wrapper{display:inline-flex}.fd-overflow-layout__popover-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:block;white-space:normal}.fd-overflow-layout__popover-container:before,.fd-overflow-layout__popover-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__item--soft-hidden{opacity:0!important;position:absolute!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body" }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i5.OverflowItemContainerRefDirective, selector: "[fdOverflowItemContainerRef]" }, { kind: "directive", type: i6.OverflowLayoutPopoverContentDirective, selector: "[fdOverflowLayoutPopoverContent]", inputs: ["items"] }, { kind: "directive", type: i7.OverflowLayoutItemContainerDirective, selector: "[fdOverflowLayoutItemContainer]", inputs: ["last", "first", "softHidden"] }, { kind: "pipe", type: i8.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    ], queries: [{ propertyName: "_moreButton", first: true, predicate: FD_OVERFLOW_EXPAND, descendants: true }, { propertyName: "_items", predicate: FD_OVERFLOW_ITEM_REF, descendants: true }, { propertyName: "_focusableOverflowItems", predicate: FD_OVERFLOW_FOCUSABLE_ITEM, descendants: true }], viewQueries: [{ propertyName: "_itemsWrapper", first: true, predicate: ["itemsWrapper"], descendants: true }, { propertyName: "_layoutContainer", first: true, predicate: ["layoutContainer"], descendants: true }, { propertyName: "_showMoreContainer", first: true, predicate: ["showMoreContainer"], descendants: true }, { propertyName: "_visibleItems", predicate: OverflowLayoutItemContainerDirective, descendants: true }], ngImport: i0, template: "<ng-template [ngIf]=\"showMorePosition === 'left'\">\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n</ng-template>\n\n<div class=\"fd-overflow-layout__items-container\" #layoutContainer>\n    <div class=\"fd-overflow-layout__items-wrapper\">\n        <div class=\"fd-overflow-layout__items\" #itemsWrapper>\n            <ng-container *ngFor=\"let item of _allItems; trackBy: _itemsTrackFn\">\n                <div\n                    fdOverflowLayoutItemContainer\n                    [first]=\"item.first\"\n                    [last]=\"item.last\"\n                    [softHidden]=\"item.softHidden\"\n                >\n                    <ng-container *fdOverflowItemContainerRef>\n                        <ng-template\n                            [ngTemplateOutlet]=\"item.templateRef\"\n                            [ngTemplateOutletContext]=\"{\n                                $implicit: item.hidden,\n                                index: item.index,\n                                first: item.first,\n                                last: item.last,\n                                globalIndex: item.globalIndex\n                            }\"\n                        ></ng-template>\n                    </ng-container>\n                </div>\n            </ng-container>\n        </div>\n    </div>\n</div>\n\n<ng-template [ngIf]=\"showMorePosition === 'right'\">\n    <ng-template [ngTemplateOutlet]=\"showMore\"></ng-template>\n</ng-template>\n\n<ng-template #showMore>\n    <div class=\"fd-overflow-layout__more\" [style.display]=\"_showMore ? 'block' : 'none'\" #showMoreContainer>\n        <ng-template #defaultShowMore>\n            <fd-popover\n                (isOpenChange)=\"_onPopoverStateChange($event)\"\n                placement=\"bottom\"\n                [focusTrapped]=\"true\"\n                [focusAutoCapture]=\"true\"\n                [maxWidth]=\"312\"\n            >\n                <fd-popover-control>\n                    <button fd-button [fdMenu]=\"true\" fdType=\"transparent\">\n                        {{ 'coreOverflowLayout.moreItemsButton' | fdTranslate: { count: _hiddenItems.length } }}\n                    </button>\n                </fd-popover-control>\n                <fd-popover-body>\n                    <div fdOverflowLayoutPopoverContent [items]=\"_hiddenItems\">\n                        <ng-container *ngFor=\"let item of _hiddenItems\">\n                            <ng-template\n                                [ngTemplateOutlet]=\"item.templateRef\"\n                                [ngTemplateOutletContext]=\"{\n                                    $implicit: item.hidden,\n                                    index: item.index,\n                                    first: item.first,\n                                    last: item.last,\n                                    globalIndex: item.globalIndex\n                                }\"\n                            ></ng-template>\n                        </ng-container>\n                    </div>\n                </fd-popover-body>\n            </fd-popover>\n        </ng-template>\n        <ng-template\n            [ngTemplateOutlet]=\"_moreButton?.templateRef || defaultShowMore\"\n            [ngTemplateOutletContext]=\"{ $implicit: _hiddenItems }\"\n        ></ng-template>\n    </div>\n</ng-template>\n", styles: [".fd-overflow-layout{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;width:100%;justify-content:space-between}.fd-overflow-layout:before,.fd-overflow-layout:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;display:inline-flex}.fd-overflow-layout__items:before,.fd-overflow-layout__items:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__more{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:flex;align-items:center;flex-shrink:0}.fd-overflow-layout__more:before,.fd-overflow-layout__more:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;position:relative}.fd-overflow-layout__items-container:before,.fd-overflow-layout__items-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__items-wrapper{display:inline-flex}.fd-overflow-layout__popover-container{font-size:var(--sapFontSize);line-height:var(--sapContent_LineHeight);color:var(--sapTextColor);font-family:var(--sapFontFamily);font-weight:400;box-sizing:border-box;padding:0;margin:0;border:0;display:block;white-space:normal}.fd-overflow-layout__popover-container:before,.fd-overflow-layout__popover-container:after{box-sizing:inherit;font-size:inherit}.fd-overflow-layout__item--soft-hidden{opacity:0!important;position:absolute!important}\n"], dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "component", type: i3.PopoverBodyComponent, selector: "fd-popover-body", inputs: ["disableScrollbar"] }, { kind: "component", type: i3.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i4.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: i5.OverflowItemContainerRefDirective, selector: "[fdOverflowItemContainerRef]" }, { kind: "directive", type: i6.OverflowLayoutPopoverContentDirective, selector: "[fdOverflowLayoutPopoverContent]", inputs: ["items"] }, { kind: "directive", type: i7.OverflowLayoutItemContainerDirective, selector: "[fdOverflowLayoutItemContainer]", inputs: ["last", "first", "softHidden"] }, { kind: "pipe", type: i8.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.1.3", ngImport: i0, type: OverflowLayoutComponent, decorators: [{
             type: Component,
             args: [{ selector: 'fd-overflow-layout', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [