@fundamental-ngx/core 0.45.1 → 0.46.0-rc.0

package/esm2022/multi-combobox/multi-combobox.component.mjs

@@ -550,7 +550,7 @@ export class MultiComboboxComponent extends BaseMultiCombobox {
                 provide: MULTI_COMBOBOX_COMPONENT,
                 useExisting: MultiComboboxComponent
             }
-        ], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true }, { propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "_inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i2.CvaDirective, inputs: ["id", "inputId", "placeholder", "placeholder", "state", "state", "stateMessage", "stateMessage", "disabled", "disabled", "readonly", "readonly", "name", "name"] }, { directive: i3.DataSourceDirective, inputs: ["dataSource", "dataSource"], outputs: ["dataChanged", "dataChanged"] }], ngImport: i0, template: "<div class=\"fd-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"this._cva.disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            #inputGroup\n            [id]=\"this._cva.id + '-input-group-container'\"\n            [state]=\"this._cva.state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!this._cva.readonly\"\n            [glyph]=\"!this._cva.readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [glyphAriaLabel]=\"this._cva.ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && _onPrimaryButtonClick(false)\"\n            (keydown)=\"_navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"_moreClicked()\"\n            >\n                <fd-token\n                    [readOnly]=\"this._cva.disabled\"\n                    (onCloseClick)=\"_removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdkAutoComplete\n                    (onComplete)=\"_onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"this._cva.ariaLabel\"\n                    [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"this._cva.id\"\n                    [name]=\"this._cva.name\"\n                    (keydown)=\"_onInputKeydownHandler($event)\"\n                    [disabled]=\"this._cva.disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"_searchTermChanged()\"\n                    [placeholder]=\"this._cva.placeholder\"\n                    (focus)=\"this._cva.onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"this._cva.readonly\"\n                    [attr.aria-readonly]=\"this._cva.readonly\"\n                    [attr.aria-required]=\"this._cva.required\"\n                    [displayFn]=\"_displayFn\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"this._cva.id + '-input-group-container'\"\n        class=\"fd-multi-combobox-input-group-custom\"\n        [state]=\"this._cva.state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [attr.aria-readonly]=\"this._cva.readonly\"\n        [glyphAriaLabel]=\"this._cva.ariaLabel\"\n    >\n        <input\n            fdkAutoComplete\n            (onComplete)=\"_onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"this._cva.ariaLabel\"\n            [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"this._cva.id\"\n            [name]=\"this._cva.name\"\n            (keydown)=\"_onInputKeydownHandler($event)\"\n            [disabled]=\"this._cva.disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"_searchTermChanged()\"\n            [placeholder]=\"this._cva.placeholder\"\n            (focus)=\"this._cva.onTouched()\"\n            (blur)=\"!mobile && _onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [displayFn]=\"_displayFn\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"_handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fd-multi-combobox__list fd-list--multi-input\"\n        [id]=\"this._cva.id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"this._cva.id + '-search'\"\n        aria-multiselectable=\"true\"\n    >\n        <fd-form-message\n            *ngIf=\"!!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n        <fd-multi-combobox-select-all-toggler\n            *ngIf=\"showSelectAll\"\n            [selectAllHandler]=\"_handleSelectAllItems\"\n            [valueChanges]=\"selectionChange\"\n            [selectedItems]=\"_selectedSuggestions\"\n            [flatItems]=\"_flatSuggestions\"\n        ></fd-multi-combobox-select-all-toggler>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (click)=\"!mobile && close()\"\n                    (keyDown)=\"_onItemKeyDownHandler($event, i)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"_onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"_toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!isGroup\">\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                (click)=\"!mobile && _onOptionClicked($event, i)\"\n                (keyDown)=\"_onItemKeyDownHandler($event, i)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"_onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"_toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 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-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{display:block;max-width:100%}\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: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i7.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i8.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i8.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i9.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i9.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i10.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i10.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i10.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListSecondaryDirective, selector: "[fd-list-secondary] ,[fdListSecondary]" }, { kind: "directive", type: i11.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: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.AutoCompleteDirective, selector: "[fdkAutoComplete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { kind: "component", type: i12.SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: ["selectAllHandler", "valueChanges", "selectedItems", "flatItems"] }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1.SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "customTemplates", predicate: TemplateDirective }], viewQueries: [{ propertyName: "searchInputElement", first: true, predicate: ["searchInputElement"], descendants: true, read: ElementRef }, { propertyName: "listComponent", first: true, predicate: FD_LIST_COMPONENT, descendants: true }, { propertyName: "mobileControlTemplate", first: true, predicate: ["mobileControlTemplate"], descendants: true }, { propertyName: "listTemplate", first: true, predicate: ["listTemplate"], descendants: true }, { propertyName: "_tokenizer", first: true, predicate: TokenizerComponent, descendants: true }, { propertyName: "_inputGroup", first: true, predicate: ["inputGroup"], descendants: true, read: ElementRef }], usesInheritance: true, hostDirectives: [{ directive: i2.CvaDirective, inputs: ["id", "inputId", "placeholder", "placeholder", "state", "state", "stateMessage", "stateMessage", "disabled", "disabled", "readonly", "readonly", "name", "name"] }, { directive: i3.DataSourceDirective, inputs: ["dataSource", "dataSource"], outputs: ["dataChanged", "dataChanged"] }], ngImport: i0, template: "<div class=\"fd-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"this._cva.disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            #inputGroup\n            [id]=\"this._cva.id + '-input-group-container'\"\n            [state]=\"this._cva.state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!this._cva.readonly\"\n            [glyph]=\"!this._cva.readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [glyphAriaLabel]=\"this._cva.ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && _onPrimaryButtonClick(false)\"\n            (keydown)=\"_navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"_moreClicked()\"\n            >\n                <fd-token\n                    [readOnly]=\"this._cva.disabled\"\n                    (onCloseClick)=\"_removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdkAutoComplete\n                    (onComplete)=\"_onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"this._cva.ariaLabel\"\n                    [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"this._cva.id\"\n                    [name]=\"this._cva.name\"\n                    (keydown)=\"_onInputKeydownHandler($event)\"\n                    [disabled]=\"this._cva.disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"_searchTermChanged()\"\n                    [placeholder]=\"this._cva.placeholder\"\n                    (focus)=\"this._cva.onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"this._cva.readonly\"\n                    [attr.aria-readonly]=\"this._cva.readonly\"\n                    [attr.aria-required]=\"this._cva.required\"\n                    [displayFn]=\"_displayFn\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"this._cva.id + '-input-group-container'\"\n        class=\"fd-multi-combobox-input-group-custom\"\n        [state]=\"this._cva.state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [attr.aria-readonly]=\"this._cva.readonly\"\n        [glyphAriaLabel]=\"this._cva.ariaLabel\"\n    >\n        <input\n            fdkAutoComplete\n            (onComplete)=\"_onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"this._cva.ariaLabel\"\n            [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"this._cva.id\"\n            [name]=\"this._cva.name\"\n            (keydown)=\"_onInputKeydownHandler($event)\"\n            [disabled]=\"this._cva.disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"_searchTermChanged()\"\n            [placeholder]=\"this._cva.placeholder\"\n            (focus)=\"this._cva.onTouched()\"\n            (blur)=\"!mobile && _onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [displayFn]=\"_displayFn\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"_handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fd-multi-combobox__list fd-list--multi-input\"\n        [id]=\"this._cva.id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"this._cva.id + '-search'\"\n        aria-multiselectable=\"true\"\n    >\n        <fd-form-message\n            *ngIf=\"!!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n        <fd-multi-combobox-select-all-toggler\n            *ngIf=\"showSelectAll\"\n            [selectAllHandler]=\"_handleSelectAllItems\"\n            [valueChanges]=\"selectionChange\"\n            [selectedItems]=\"_selectedSuggestions\"\n            [flatItems]=\"_flatSuggestions\"\n        ></fd-multi-combobox-select-all-toggler>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (click)=\"!mobile && close()\"\n                    (keyDown)=\"_onItemKeyDownHandler($event, i)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"_onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"_toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!isGroup\">\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                (click)=\"!mobile && _onOptionClicked($event, i)\"\n                (keyDown)=\"_onItemKeyDownHandler($event, i)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"_onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"_toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 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-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{display:block;max-width:100%}\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: "component", type: i6.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i7.InputGroupComponent, selector: "fd-input-group", inputs: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i7.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i8.TokenComponent, selector: "fd-token", inputs: ["disabled", "selected", "readOnly"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i8.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i9.FormMessageComponent, selector: "fd-form-message", inputs: ["type", "static", "embedded", "class"] }, { kind: "component", type: i9.FormInputMessageGroupComponent, selector: "fd-form-input-message-group", inputs: ["triggers", "closeOnOutsideClick", "fillControlMode", "noArrow", "closeOnEscapeKey", "placement", "placementContainer", "isOpen"], outputs: ["isOpenChange"] }, { kind: "component", type: i10.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i10.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i10.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i10.ListSecondaryDirective, selector: "[fd-list-secondary], [fdListSecondary]", inputs: ["type"] }, { kind: "directive", type: i11.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: i11.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i11.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1.AutoCompleteDirective, selector: "[fdkAutoComplete]", inputs: ["options", "inputText", "enable", "displayFn"], outputs: ["onComplete"] }, { kind: "component", type: i12.SelectAllTogglerComponent, selector: "fd-multi-combobox-select-all-toggler", inputs: ["selectAllHandler", "valueChanges", "selectedItems", "flatItems"] }, { kind: "pipe", type: i13.FdTranslatePipe, name: "fdTranslate" }, { kind: "pipe", type: i1.SearchHighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MultiComboboxComponent, decorators: [{
             type: Component,
@@ -578,7 +578,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                             provide: MULTI_COMBOBOX_COMPONENT,
                             useExisting: MultiComboboxComponent
                         }
-                    ], template: "<div class=\"fd-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"this._cva.disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            #inputGroup\n            [id]=\"this._cva.id + '-input-group-container'\"\n            [state]=\"this._cva.state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!this._cva.readonly\"\n            [glyph]=\"!this._cva.readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [glyphAriaLabel]=\"this._cva.ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && _onPrimaryButtonClick(false)\"\n            (keydown)=\"_navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"_moreClicked()\"\n            >\n                <fd-token\n                    [readOnly]=\"this._cva.disabled\"\n                    (onCloseClick)=\"_removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdkAutoComplete\n                    (onComplete)=\"_onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"this._cva.ariaLabel\"\n                    [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"this._cva.id\"\n                    [name]=\"this._cva.name\"\n                    (keydown)=\"_onInputKeydownHandler($event)\"\n                    [disabled]=\"this._cva.disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"_searchTermChanged()\"\n                    [placeholder]=\"this._cva.placeholder\"\n                    (focus)=\"this._cva.onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"this._cva.readonly\"\n                    [attr.aria-readonly]=\"this._cva.readonly\"\n                    [attr.aria-required]=\"this._cva.required\"\n                    [displayFn]=\"_displayFn\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"this._cva.id + '-input-group-container'\"\n        class=\"fd-multi-combobox-input-group-custom\"\n        [state]=\"this._cva.state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [attr.aria-readonly]=\"this._cva.readonly\"\n        [glyphAriaLabel]=\"this._cva.ariaLabel\"\n    >\n        <input\n            fdkAutoComplete\n            (onComplete)=\"_onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"this._cva.ariaLabel\"\n            [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"this._cva.id\"\n            [name]=\"this._cva.name\"\n            (keydown)=\"_onInputKeydownHandler($event)\"\n            [disabled]=\"this._cva.disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"_searchTermChanged()\"\n            [placeholder]=\"this._cva.placeholder\"\n            (focus)=\"this._cva.onTouched()\"\n            (blur)=\"!mobile && _onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [displayFn]=\"_displayFn\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"_handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fd-multi-combobox__list fd-list--multi-input\"\n        [id]=\"this._cva.id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"this._cva.id + '-search'\"\n        aria-multiselectable=\"true\"\n    >\n        <fd-form-message\n            *ngIf=\"!!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n        <fd-multi-combobox-select-all-toggler\n            *ngIf=\"showSelectAll\"\n            [selectAllHandler]=\"_handleSelectAllItems\"\n            [valueChanges]=\"selectionChange\"\n            [selectedItems]=\"_selectedSuggestions\"\n            [flatItems]=\"_flatSuggestions\"\n        ></fd-multi-combobox-select-all-toggler>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (click)=\"!mobile && close()\"\n                    (keyDown)=\"_onItemKeyDownHandler($event, i)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"_onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"_toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!isGroup\">\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                (click)=\"!mobile && _onOptionClicked($event, i)\"\n                (keyDown)=\"_onItemKeyDownHandler($event, i)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"_onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"_toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 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-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{display:block;max-width:100%}\n"] }]
+                    ], template: "<div class=\"fd-multi-combobox\">\n    <ng-container [ngTemplateOutlet]=\"controlTemplate\" *ngIf=\"mobile\"></ng-container>\n\n    <fd-popover\n        *ngIf=\"!mobile\"\n        additionalBodyClass=\"fd-popover-custom-list fd-multi-combobox__list-container\"\n        (isOpenChange)=\"_popoverOpenChangeHandle($event)\"\n        [isOpen]=\"isOpen\"\n        [triggers]=\"[]\"\n        [disabled]=\"this._cva.disabled\"\n        [fillControlMode]=\"fillControlMode\"\n    >\n        <fd-popover-control>\n            <ng-container>\n                <ng-container *ngTemplateOutlet=\"controlTemplate\"></ng-container>\n            </ng-container>\n        </fd-popover-control>\n        <fd-popover-body [style.width.%]=\"!autoResize && 100\">\n            <ng-container *ngTemplateOutlet=\"listTemplate\"></ng-container>\n            <ng-content></ng-content>\n        </fd-popover-body>\n    </fd-popover>\n</div>\n\n<ng-template #controlTemplate>\n    <fd-form-input-message-group>\n        <fd-input-group\n            #inputGroup\n            [id]=\"this._cva.id + '-input-group-container'\"\n            [state]=\"this._cva.state\"\n            [buttonFocusable]=\"buttonFocusable\"\n            [button]=\"!this._cva.readonly\"\n            [glyph]=\"!this._cva.readonly ? 'navigation-down-arrow' : ' '\"\n            [isControl]=\"true\"\n            [disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n            [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [glyphAriaLabel]=\"this._cva.ariaLabel || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            [iconTitle]=\"addonIconTitle || ('platformMultiCombobox.inputGlyphAriaLabel' | fdTranslate)\"\n            (addOnButtonClicked)=\"_addOnClicked($event)\"\n            (click)=\"mobile && !isOpen && _onPrimaryButtonClick(false)\"\n            (keydown)=\"_navigateByTokens($event)\"\n        >\n            <fd-tokenizer\n                *ngIf=\"_selectedSuggestions\"\n                [tokenizerFocusable]=\"false\"\n                [compactCollapse]=\"true\"\n                #tokenizer\n                class=\"fd-multi-combobox-tokenizer-custom\"\n                (moreClickedEvent)=\"_moreClicked()\"\n            >\n                <fd-token\n                    [readOnly]=\"this._cva.disabled\"\n                    (onCloseClick)=\"_removeToken(token, $event)\"\n                    *ngFor=\"let token of _selectedSuggestions\"\n                >\n                    {{ token.label }}\n                </fd-token>\n\n                <input\n                    #searchInputElement\n                    fdkAutoComplete\n                    (onComplete)=\"_onCompleteTerm($event)\"\n                    [options]=\"_suggestions\"\n                    [inputText]=\"inputText\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    autocomplete=\"off\"\n                    [attr.aria-label]=\"this._cva.ariaLabel\"\n                    [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n                    [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n                    [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n                    [attr.aria-haspopup]=\"autoComplete && !mobile\"\n                    fd-form-control\n                    fd-input-group-input\n                    tabindex=\"0\"\n                    [id]=\"this._cva.id\"\n                    [name]=\"this._cva.name\"\n                    (keydown)=\"_onInputKeydownHandler($event)\"\n                    [disabled]=\"this._cva.disabled\"\n                    [(ngModel)]=\"inputText\"\n                    (ngModelChange)=\"_searchTermChanged()\"\n                    [placeholder]=\"this._cva.placeholder\"\n                    (focus)=\"this._cva.onTouched(); tokenizer._showAllTokens()\"\n                    (blur)=\"!mobile && _onBlur($event); tokenizer._hideTokens()\"\n                    [attr.aria-expanded]=\"isOpen\"\n                    [readonly]=\"this._cva.readonly\"\n                    [attr.aria-readonly]=\"this._cva.readonly\"\n                    [attr.aria-required]=\"this._cva.required\"\n                    [displayFn]=\"_displayFn\"\n                    class=\"fd-tokenizer__input\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n\n        <fd-form-message\n            *ngIf=\"mobile && isOpen ? false : !!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n    </fd-form-input-message-group>\n</ng-template>\n\n<ng-template #mobileControlTemplate>\n    <fd-input-group\n        [id]=\"this._cva.id + '-input-group-container'\"\n        class=\"fd-multi-combobox-input-group-custom\"\n        [state]=\"this._cva.state\"\n        [buttonFocusable]=\"false\"\n        [isControl]=\"true\"\n        [disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [isExpanded]=\"!mobile && isOpen && _suggestions.length > 0\"\n        [attr.aria-disabled]=\"this._cva.disabled || this._cva.readonly\"\n        [attr.aria-readonly]=\"this._cva.readonly\"\n        [glyphAriaLabel]=\"this._cva.ariaLabel\"\n    >\n        <input\n            fdkAutoComplete\n            (onComplete)=\"_onCompleteTerm($event)\"\n            [options]=\"_suggestions\"\n            [inputText]=\"inputText\"\n            type=\"text\"\n            role=\"combobox\"\n            autocomplete=\"off\"\n            [attr.aria-label]=\"this._cva.ariaLabel\"\n            [attr.aria-labelledby]=\"this._cva.ariaLabelledBy\"\n            [attr.aria-autocomplete]=\"autoComplete && !mobile ? 'list' : null\"\n            [attr.aria-owns]=\"autoComplete && !mobile ? this._cva.id + '-result' : null\"\n            [attr.aria-haspopup]=\"autoComplete && !mobile\"\n            fd-form-control\n            fd-input-group-input\n            tabindex=\"0\"\n            [id]=\"this._cva.id\"\n            [name]=\"this._cva.name\"\n            (keydown)=\"_onInputKeydownHandler($event)\"\n            [disabled]=\"this._cva.disabled\"\n            [(ngModel)]=\"inputText\"\n            (ngModelChange)=\"_searchTermChanged()\"\n            [placeholder]=\"this._cva.placeholder\"\n            (focus)=\"this._cva.onTouched()\"\n            (blur)=\"!mobile && _onBlur($event)\"\n            [attr.aria-expanded]=\"isOpen\"\n            [readonly]=\"this._cva.readonly\"\n            [attr.aria-readonly]=\"this._cva.readonly\"\n            [displayFn]=\"_displayFn\"\n        />\n    </fd-input-group>\n</ng-template>\n\n<ng-template #listTemplate>\n    <ul\n        fd-list\n        (focusEscapeList)=\"_handleListFocusEscape($event)\"\n        [dropdownMode]=\"true\"\n        class=\"fd-multi-combobox__list fd-list--multi-input\"\n        [id]=\"this._cva.id + '-result'\"\n        role=\"listbox\"\n        [style.max-height]=\"!mobile && maxHeight\"\n        [style.min-width]=\"!mobile && minWidth + 'px'\"\n        [style.max-width]=\"autoResize && maxWidth + 'px'\"\n        [attr.aria-labelledby]=\"this._cva.id + '-search'\"\n        aria-multiselectable=\"true\"\n    >\n        <fd-form-message\n            *ngIf=\"!!this._cva.stateMessage\"\n            [type]=\"this._cva.state\"\n            [innerHtml]=\"this._cva.stateMessage\"\n        ></fd-form-message>\n        <fd-multi-combobox-select-all-toggler\n            *ngIf=\"showSelectAll\"\n            [selectAllHandler]=\"_handleSelectAllItems\"\n            [valueChanges]=\"selectionChange\"\n            [selectedItems]=\"_selectedSuggestions\"\n            [flatItems]=\"_flatSuggestions\"\n        ></fd-multi-combobox-select-all-toggler>\n        <ng-content></ng-content>\n        <ng-container *ngIf=\"isGroup\">\n            <ng-container *ngFor=\"let group of _suggestions\">\n                <ng-container *ngIf=\"!groupItemTemplate\">\n                    <label fd-list-group-header role=\"group\">\n                        <span fd-list-title>{{ group.label }}</span>\n                    </label>\n                </ng-container>\n\n                <ng-container *ngIf=\"groupItemTemplate\">\n                    <ng-container\n                        [ngTemplateOutlet]=\"groupItemTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: { label: group.label } }\"\n                    ></ng-container>\n                </ng-container>\n\n                <li\n                    *ngFor=\"let optionItem of group.children; let i = index\"\n                    fd-list-item\n                    role=\"option\"\n                    [tabindex]=\"0\"\n                    (click)=\"!mobile && close()\"\n                    (keyDown)=\"_onItemKeyDownHandler($event, i)\"\n                    [selected]=\"!!optionItem.selected\"\n                >\n                    <fd-checkbox\n                        (click)=\"_onOptionCheckboxClicked($event, i)\"\n                        (ngModelChange)=\"_toggleSelection(optionItem)\"\n                        [ngModel]=\"optionItem.selected\"\n                    >\n                    </fd-checkbox>\n                    <ng-container\n                        [ngTemplateOutlet]=\"listItem\"\n                        [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                    ></ng-container>\n                </li>\n            </ng-container>\n        </ng-container>\n\n        <ng-container *ngIf=\"!isGroup\">\n            <li\n                *ngFor=\"let optionItem of _suggestions; let i = index\"\n                fd-list-item\n                role=\"option\"\n                [tabindex]=\"0\"\n                (click)=\"!mobile && _onOptionClicked($event, i)\"\n                (keyDown)=\"_onItemKeyDownHandler($event, i)\"\n                [selected]=\"!!optionItem.selected\"\n            >\n                <fd-checkbox\n                    (click)=\"_onOptionCheckboxClicked($event, i)\"\n                    (ngModelChange)=\"_toggleSelection(optionItem)\"\n                    [ngModel]=\"optionItem.selected\"\n                >\n                </fd-checkbox>\n                <ng-container\n                    [ngTemplateOutlet]=\"listItem\"\n                    [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: i }\"\n                ></ng-container>\n            </li>\n        </ng-container>\n    </ul>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #listItem>\n    <ng-container\n        *ngIf=\"optionItem.selected && !!selectedItemTemplate\"\n        [ngTemplateOutlet]=\"selectedItemTemplate\"\n        [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n    ></ng-container>\n\n    <ng-container *ngIf=\"!(optionItem.selected && selectedItemTemplate)\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem, index: index }\"\n        ></ng-container>\n\n        <ng-container\n            [ngTemplateOutlet]=\"secondaryTextSource\"\n            [ngTemplateOutletContext]=\"{ optionItem: optionItem }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" let-index=\"index\" #optionItemSource>\n    <ng-container *ngIf=\"!optionItemTemplate\">\n        <span\n            fd-list-title\n            [attr.title]=\"optionItem.label\"\n            [innerHTML]=\"optionItem.label | highlight : inputText\"\n        ></span>\n    </ng-container>\n\n    <ng-container *ngIf=\"optionItemTemplate\">\n        <ng-container\n            [ngTemplateOutlet]=\"optionItemTemplate\"\n            [ngTemplateOutletContext]=\"{ $implicit: optionItem.value, index: index }\"\n        ></ng-container>\n    </ng-container>\n</ng-template>\n\n<ng-template let-optionItem=\"optionItem\" #secondaryTextSource>\n    <ng-container *ngIf=\"showSecondaryText\">\n        <ng-container *ngIf=\"!secondaryItemTemplate\">\n            <span\n                [style.text-align]=\"secondaryTextAlignment\"\n                fd-list-secondary\n                [attr.title]=\"optionItem.secondaryText\"\n                [innerHTML]=\"optionItem.secondaryText | highlight : inputText\"\n            ></span>\n        </ng-container>\n\n        <ng-container *ngIf=\"secondaryItemTemplate\">\n            <ng-container\n                [ngTemplateOutlet]=\"secondaryItemTemplate\"\n                [ngTemplateOutletContext]=\"{ $implicit: optionItem.value }\"\n            ></ng-container>\n        </ng-container>\n    </ng-container>\n</ng-template>\n", styles: ["/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 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-margin--tiny{margin:.5rem!important}.fd-margin--sm{margin:1rem!important}.fd-margin--md{margin:2rem!important}.fd-margin--lg{margin:3rem!important}.fd-margin--none{margin:0!important}.fd-margin-top--tiny{margin-top:.5rem!important}.fd-margin-top--sm{margin-top:1rem!important}.fd-margin-top--md{margin-top:2rem!important}.fd-margin-top--lg{margin-top:3rem!important}.fd-margin-top--none{margin-top:0!important}.fd-margin-end--tiny{margin-right:.5rem!important}.fd-margin-end--tiny[dir=rtl],[dir=rtl] .fd-margin-end--tiny{margin-left:.5rem!important;margin-right:0!important}.fd-margin-end--sm{margin-right:1rem!important}.fd-margin-end--sm[dir=rtl],[dir=rtl] .fd-margin-end--sm{margin-left:1rem!important;margin-right:0!important}.fd-margin-end--md{margin-right:2rem!important}.fd-margin-end--md[dir=rtl],[dir=rtl] .fd-margin-end--md{margin-left:2rem!important;margin-right:0!important}.fd-margin-end--lg{margin-right:3rem!important}.fd-margin-end--lg[dir=rtl],[dir=rtl] .fd-margin-end--lg{margin-left:3rem!important;margin-right:0!important}.fd-margin-end--none{margin-right:0}.fd-margin-end--none[dir=rtl],[dir=rtl] .fd-margin-end--none{margin-left:0!important}.fd-margin-bottom--tiny{margin-bottom:.5rem!important}.fd-margin-bottom--sm{margin-bottom:1rem!important}.fd-margin-bottom--md{margin-bottom:2rem!important}.fd-margin-bottom--lg{margin-bottom:3rem!important}.fd-margin-bottom--none{margin-bottom:0!important}.fd-margin-begin--tiny{margin-left:.5rem!important}.fd-margin-begin--tiny[dir=rtl],[dir=rtl] .fd-margin-begin--tiny{margin-left:0!important;margin-right:.5rem!important}.fd-margin-begin--sm{margin-left:1rem!important}.fd-margin-begin--sm[dir=rtl],[dir=rtl] .fd-margin-begin--sm{margin-left:0!important;margin-right:1rem!important}.fd-margin-begin--md{margin-left:2rem!important}.fd-margin-begin--md[dir=rtl],[dir=rtl] .fd-margin-begin--md{margin-left:0!important;margin-right:2rem!important}.fd-margin-begin--lg{margin-left:3rem!important}.fd-margin-begin--lg[dir=rtl],[dir=rtl] .fd-margin-begin--lg{margin-left:0!important;margin-right:3rem!important}.fd-margin-begin--none{margin-left:0}.fd-margin-begin--none[dir=rtl],[dir=rtl] .fd-margin-begin--none{margin-right:0!important}.fd-margin-top-bottom--tiny{margin-bottom:.5rem!important;margin-top:.5rem!important}.fd-margin-top-bottom--sm{margin-bottom:1rem!important;margin-top:1rem!important}.fd-margin-top-bottom--md{margin-bottom:2rem!important;margin-top:2rem!important}.fd-margin-top-bottom--lg{margin-bottom:3rem!important;margin-top:3rem!important}.fd-margin-begin-end--tiny{margin-left:.5rem!important;margin-right:.5rem!important}.fd-margin-begin-end--sm{margin-left:1rem!important;margin-right:1rem!important}.fd-margin-begin-end--md{margin-left:2rem!important;margin-right:2rem!important}.fd-margin-begin-end--lg{margin-left:3rem!important;margin-right:3rem!important}.fd-margin-responsive--sm{margin:0 0 1rem!important}.fd-margin-responsive--md{margin:1rem!important}.fd-margin-responsive--lg{margin:1rem 2rem!important}.fd-margin-responsive--xl{margin:1rem 3rem!important}.fd-margin-negative-begin-end--tiny{margin:0 -.5rem!important}.fd-margin-negative-begin-end--sm{margin:0 -1rem!important}.fd-margin-negative-begin-end--md{margin:0 -2rem!important}.fd-margin-negative-begin-end--lg{margin:0 -3rem!important}.fd-multi-combobox-tokenizer-custom{width:calc(100% - 2.25rem)}[class*=--compact] .fd-multi-combobox-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-combobox-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-combobox-tokenizer-custom[class*=--compact],.fd-multi-combobox-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-combobox-input-group-custom{display:inline-block}.fd-multi-combobox .fd-popover-custom{display:block}.fd-multi-combobox__list-container .fd-list .fd-list__item.fd-list__group-header{padding:0 1rem}.fd-multi-combobox__list-container .fd-list .fd-list__item .fd-list__title{max-width:inherit}.fd-multi-combobox__list-container .fd-list.fd-list--compact .fd-list__item.fd-list__group-header{padding:0 .5rem}.fd-multi-combobox__list-container fd-form-message{max-width:100%;border-radius:0!important}.fd-dialog__body fd-form-message{display:block;max-width:100%}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.Injector }, { type: i0.ViewContainerRef }, { type: i1.DynamicComponentService }]; }, propDecorators: { showSelectAll: [{
                 type: Input
             }], selectedItems: [{

package/esm2022/multi-combobox/select-all-toggler/select-all-toggler.component.mjs

@@ -76,7 +76,7 @@ export class SelectAllTogglerComponent extends ListFocusItem {
                 </fd-checkbox>
             </div>
         </fd-toolbar>
-    `, isInline: true, styles: ["fd-multi-combobox-select-all-toggler{display:block;background-color:var(--sapBackgroundColor);cursor:pointer;position:sticky;top:0;z-index:1}fd-multi-combobox-select-all-toggler:focus,fd-multi-combobox-select-all-toggler.is-focus{outline-offset:-.1875rem;outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--sapContent_FocusColor)}fd-multi-combobox-select-all-toggler .fd-toolbar{padding-left:1rem;padding-right:0}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item{display:flex;flex-direction:row;align-items:center;font-weight:700}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox{pointer-events:none}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__checkmark{margin-right:.5rem}[dir=rtl] fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__checkmark,fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__checkmark[dir=rtl]{margin-right:0;margin-left:.5rem}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__text{font-weight:700!important}\n"], dependencies: [{ kind: "component", type: i1.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i2.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex"] }, { kind: "pipe", type: i5.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["fd-multi-combobox-select-all-toggler{display:block;background-color:var(--sapBackgroundColor);cursor:pointer;position:sticky;top:0;z-index:1}fd-multi-combobox-select-all-toggler:focus,fd-multi-combobox-select-all-toggler.is-focus{outline-offset:-.1875rem;outline-width:var(--sapContent_FocusWidth);outline-style:var(--sapContent_FocusStyle);outline-color:var(--sapContent_FocusColor)}fd-multi-combobox-select-all-toggler .fd-toolbar{padding-left:1rem;padding-right:0}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item{display:flex;flex-direction:row;align-items:center;font-weight:700}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox{pointer-events:none}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__checkmark{margin-right:.5rem}[dir=rtl] fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__checkmark,fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__checkmark[dir=rtl]{margin-right:0;margin-left:.5rem}fd-multi-combobox-select-all-toggler .fd-multi-combobox-select-all__form-item fd-checkbox .fd-checkbox__text{font-weight:700!important}\n"], dependencies: [{ kind: "component", type: i1.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i2.FormItemComponent, selector: "[fd-form-item]", inputs: ["isInline", "horizontal"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.ToolbarComponent, selector: "fd-toolbar", inputs: ["titleId", "class", "shouldOverflow", "fdType", "title", "active", "clearBorder", "forceOverflow", "tabindex", "ariaLabel", "ariaLabelledBy"] }, { kind: "pipe", type: i5.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: SelectAllTogglerComponent, decorators: [{
             type: Component,

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

@@ -608,7 +608,7 @@ export class MultiInputComponent {
             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]=\"_popoverMaxWidth\"\n                [disabled]=\"disabled\"\n                [fillControlMode]=\"fillControlMode\"\n                class=\"fd-multi-input-popover-custom\"\n            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container *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($event)\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: 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                    fdkAutoComplete\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                    (focus)=\"tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [style.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            [byline]=\"byline\"\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)}[class*=--compact] .fd-multi-input-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-input-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-input-tokenizer-custom[class*=--compact],.fd-multi-input-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-multi-input-menu-overflow{max-width:37.5rem}.fd-input.fd-multi-input-tokenizer-input{min-width:4rem;margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.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"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i4.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i5.ɵ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", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], 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: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i10.CheckboxComponent, selector: "fd-checkbox", inputs: ["ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i11.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2.AutoCompleteDirective, selector: "[fdkAutoComplete]", 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]=\"_popoverMaxWidth\"\n                [disabled]=\"disabled\"\n                [fillControlMode]=\"fillControlMode\"\n                class=\"fd-multi-input-popover-custom\"\n            >\n                <fd-popover-control>\n                    <form (submit)=\"_onSubmit()\">\n                        <ng-container *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($event)\"\n        >\n            <fd-tokenizer\n                #tokenizer\n                [compactCollapse]=\"compactCollapse\"\n                [open]=\"open\"\n                [tokenizerFocusable]=\"false\"\n                (moreClickedEvent)=\"_moreClicked()\"\n                class=\"fd-multi-input-tokenizer-custom\"\n                tabindex=\"-1\"\n            >\n                <fd-token\n                    *ngFor=\"let option of viewModel.selectedOptions; trackBy: 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                    fdkAutoComplete\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                    (focus)=\"tokenizer._showAllTokens()\"\n                    (blur)=\"tokenizer._hideTokens()\"\n                />\n            </fd-tokenizer>\n        </fd-input-group>\n    </ng-template>\n\n    <ng-template #list>\n        <ul\n            *ngIf=\"viewModel.displayedOptions.length\"\n            fd-list\n            class=\"fd-multi-input-menu-overflow\"\n            [selection]=\"true\"\n            [mobileMode]=\"mobile\"\n            [style.maxHeight]=\"!mobile ? maxHeight : 'auto'\"\n            [byline]=\"byline\"\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)}[class*=--compact] .fd-multi-input-tokenizer-custom:not([class*=\"--cozy\"]):not([class*=\"--condensed\"]),.is-compact .fd-multi-input-tokenizer-custom:not(.is-cozy):not(.is-condensed),.fd-multi-input-tokenizer-custom[class*=--compact],.fd-multi-input-tokenizer-custom.is-compact{width:calc(100% - 2rem)}.fd-multi-input-input-group-custom{max-width:100%}.fd-multi-input-custom{display:block}.fd-multi-input-item{cursor:pointer;padding:0}.fd-multi-input-popover-size{overflow:auto;display:block}.fd-multi-input-popover-custom.fd-popover-custom{max-width:100%;display:block}.fd-multi-input-show-all{width:100%;display:flex;justify-content:flex-end;background-color:transparent}.fd-multi-input-show-all .fd-link:active{color:inherit}.fd-multi-input-checkbox{width:100%;cursor:pointer}.fd-multi-input-checkbox .fd-checkbox__label{color:inherit}.fd-multi-input-menu-overflow{max-width:37.5rem}.fd-input.fd-multi-input-tokenizer-input{min-width:4rem;margin-top:0;margin-bottom:0;padding-left:0;background-color:transparent}.fd-list--multi-input{max-width:100%}.fd-popover__body--hidden{display:none}\n"], dependencies: [{ kind: "directive", type: i3.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"], outputs: ["onCloseClick", "onRemove", "onTokenClick", "onTokenKeydown", "elementFocused"] }, { kind: "component", type: i4.TokenizerComponent, selector: "fd-tokenizer", inputs: ["class", "disableKeyboardDeletion", "compactCollapse", "tokenizerFocusable", "inputValue", "glyph", "moreTerm", "open"], outputs: ["moreClickedEvent"] }, { kind: "directive", type: i5.ɵ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", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i6.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline"], 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: ["placement", "required", "inline", "placeholder", "addOnText", "buttonFocusable", "type", "glyph", "button", "disabled", "readonly", "state", "isControl", "showFocus", "isExpanded", "glyphAriaLabel", "iconTitle", "ariaLabelledBy"], outputs: ["addOnButtonClicked", "search"] }, { kind: "directive", type: i8.InputGroupInputDirective, selector: "[fdInputGroupInput], [fd-input-group-input]", inputs: ["class"] }, { kind: "component", type: i9.FormControlComponent, selector: "[fd-form-control]", inputs: ["state", "type", "class", "ariaLabel", "ariaLabelledBy"] }, { kind: "directive", type: i9.InputFormControlDirective, selector: "input[fd-form-control]" }, { kind: "component", type: i10.CheckboxComponent, selector: "fd-checkbox", inputs: ["wrapLabel", "valignLabel", "ariaLabel", "value", "ariaLabelledBy", "ariaDescribedBy", "title", "inputId", "state", "name", "label", "disabled", "tristate", "tristateSelectable", "labelClass", "required", "displayOnly", "values", "standalone"], outputs: ["focusChange"] }, { kind: "component", type: i11.LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "directive", type: i2.AutoCompleteDirective, selector: "[fdkAutoComplete]", 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,

package/esm2022/notification/notification/notification.component.mjs

@@ -129,7 +129,7 @@ export class NotificationComponent extends AbstractFdNgxClass {
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: NotificationComponent, selector: "fd-notification", inputs: { width: "width", mobile: "mobile" }, host: { attributes: { "role": "alertdialog" }, listeners: { "window:keyup": "_closeNotificationEsc($event)" }, properties: { "attr.aria-labelledby": "ariaLabelledBy", "attr.aria-label": "ariaLabel", "attr.dir": "_dir", "attr.id": "id", "style.width": "this.width", "class.fd-notification--in-dialog": "this._inDialog" } }, viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["vc"], descendants: true, read: ViewContainerRef }], usesInheritance: true, ngImport: i0, template: `
         <ng-content></ng-content>
         <ng-container #vc></ng-container>
-    `, isInline: true, styles: ["@charset \"UTF-8\";/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 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-notification{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_Shadow0);background-color:var(--sapList_Background);border:0;border-radius:.25rem;box-shadow:var(--sapContent_Shadow0);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 1.25rem;max-width:40rem;padding:1rem .5rem 1rem 1rem;width:100%}.fd-notification:after,.fd-notification:before{box-sizing:inherit;font-size:inherit}.fd-notification[dir=rtl],[dir=rtl] .fd-notification{padding-left:.5rem;padding-right:1rem}.fd-notification__body{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-notification__body:after,.fd-notification__body:before{box-sizing:inherit;font-size:inherit}.fd-notification__body--message{padding-top:1rem}.fd-notification__content{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 0 1rem;overflow:auto;padding:0;width:100%}.fd-notification__content:after,.fd-notification__content:before{box-sizing:inherit;font-size:inherit}.fd-notification__content[dir=rtl],[dir=rtl] .fd-notification__content{margin-left:0;margin-right:1rem}.fd-notification__content:first-child{margin-left:0}.fd-notification__content:first-child[dir=rtl],[dir=rtl] .fd-notification__content:first-child{margin-right:0}.fd-notification .fd-notification__title{-webkit-box-sizing:border-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;border:0;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader6Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 .25rem;max-height:2.5rem;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:normal}.fd-notification .fd-notification__title:after,.fd-notification .fd-notification__title:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__title--unread{font-weight:700}.fd-notification .fd-notification__paragraph{-webkit-box-sizing:border-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;border:0;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;max-height:2.75rem;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:normal}.fd-notification .fd-notification__paragraph:after,.fd-notification .fd-notification__paragraph:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__footer{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;padding:0}.fd-notification .fd-notification__footer:after,.fd-notification .fd-notification__footer:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__footer-content{max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-notification .fd-notification__footer-content:only-child{max-width:100%}.fd-notification .fd-notification__separator{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 .5rem;padding:0}.fd-notification .fd-notification__separator:after,.fd-notification .fd-notification__separator:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__separator:before{content:\"\\b7\"}.fd-notification__header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-notification__header:after,.fd-notification__header:before{box-sizing:inherit;font-size:inherit}.fd-notification__actions{-webkit-box-sizing:border-box;-webkit-box-align:start;-ms-flex-align:start;-webkit-box-flex:1;-ms-flex:1 0 auto;align-items:flex-start;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex:1 0 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0 0 0 1rem}.fd-notification__actions:after,.fd-notification__actions:before{box-sizing:inherit;font-size:inherit}.fd-notification__actions[dir=rtl],[dir=rtl] .fd-notification__actions{padding-left:0;padding-right:1rem}.fd-notification__actions>*{margin-left:.5rem}.fd-notification__actions>:first-child{margin-left:0}.fd-notification__actions>[dir=rtl],[dir=rtl] .fd-notification__actions>*{margin-left:0;margin-right:.5rem}.fd-notification__limit{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem;text-align:center}.fd-notification__limit:after,.fd-notification__limit:before{box-sizing:inherit;font-size:inherit}.fd-notification__limit--title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;white-space:break-spaces}.fd-notification__limit--title:after,.fd-notification__limit--title:before{box-sizing:inherit;font-size:inherit}.fd-notification__limit--description{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;padding:0;white-space:break-spaces}.fd-notification__limit--description:after,.fd-notification__limit--description:before{box-sizing:inherit;font-size:inherit}.fd-notification__indicator{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0 .5rem 0 0}.fd-notification__indicator:after,.fd-notification__indicator:before{box-sizing:inherit;font-size:inherit}.fd-notification__indicator[dir=rtl],[dir=rtl] .fd-notification__indicator{padding-left:.5rem;padding-right:0}.fd-notification__indicator--error{color:var(--sapErrorColor)}.fd-notification__indicator--error:before{content:\"\\e0b1\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--success{color:var(--sapSuccessColor)}.fd-notification__indicator--success:before{content:\"\\e203\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--warning{color:var(--sapWarningColor)}.fd-notification__indicator--warning:before{content:\"\\e201\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--information{color:var(--sapInformationColor)}.fd-notification__indicator--information:before{content:\"\\e202\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification--group{-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;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0}.fd-notification--group:after,.fd-notification--group:before{box-sizing:inherit;font-size:inherit}.fd-notification--group .fd-notification__body:last-of-type{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-notification--group .fd-notification__body{border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);padding:1rem .5rem 1rem 1rem}.fd-notification--group .fd-notification__body[dir=rtl],[dir=rtl] .fd-notification--group .fd-notification__body{padding-left:.5rem;padding-right:1rem}.fd-notification--group .fd-notification__group-header{-webkit-box-sizing:border-box;align-items:baseline;border:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.75rem .5rem .25rem 1rem}.fd-notification--group .fd-notification__group-header:after,.fd-notification--group .fd-notification__group-header:before{box-sizing:inherit;font-size:inherit}.fd-notification--group .fd-notification__group-header[dir=rtl],[dir=rtl] .fd-notification--group .fd-notification__group-header{padding-left:.5rem;padding-right:1rem}.fd-notification--group[dir=rtl],[dir=rtl] .fd-notification--group{padding-left:0;padding-right:0}.fd-notification--mobile{padding:0}.fd-notification--mobile .fd-notification__body:last-of-type{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-notification--mobile .fd-notification__indicator{padding-right:.25rem}.fd-notification--mobile .fd-notification__indicator[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__indicator{padding-left:.75rem;padding-right:0}.fd-notification--mobile .fd-notification__group-header{padding:.5rem .5rem 0}.fd-notification--mobile .fd-notification__body{padding:1rem .5rem 1rem .75rem}.fd-notification--mobile .fd-notification__body[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__body{padding-left:.5rem;padding-right:.75rem}.fd-notification--mobile .fd-notification__content{margin-left:.75rem}.fd-notification--mobile .fd-notification__content[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__content{margin-left:0;margin-right:.75rem}.fd-notification--in-dialog{-webkit-box-shadow:none;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;margin-bottom:0}.fd-notification--in-dialog:last-of-type{border-bottom:none}.fd-notification-custom-block{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["@charset \"UTF-8\";/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 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-notification{--fdNotification_Max_Width:40rem;--fdNotification_Border_Radius:.25rem;--fdNotification_Background:var(--sapList_Background);--fdNotification_Box_Shadow:var(--sapContent_Shadow0);--fdNotification_Item_Background:var(--sapList_Background);--fdNotification_Item_Box_Shadow:var(--sapContent_Shadow0);--fdNotification_Item_Border_Radius:.25rem;--fdNotification_Item_Max_Width:40rem;--fdNotification_Item_Paddign_Y:1rem;--fdNotification_Item_Paddign_Left:1rem;--fdNotification_Item_Paddign_Right:.5rem;--fdNotification_Item_Spacing:1rem;--fdNotification_Indicator_Color:var(--sapErrorColor);--fdNotification_Item_Title_Margin_Bottom:.25rem;--fdNotification_Item_Title_Line_Height:1.25rem;--fdNotification_Item_Title_Color:var(--sapTextColor);--fdNotification_Item_Title_Font_Family:var(--sapFontFamily);--fdNotification_Item_Title_Font_Weight:var(--sapFontHeaderWeight);--fdNotification_Item_Paragraph_Font_Size:var(--sapFontSize);--fdNotification_Item_Paragraph_Color:var(--sapTextColor);--fdNotification_Item_Footer_Font_Size:var(--sapFontSize);--fdNotification_Item_Footer_Color:var(--sapTextColor);--fdNotification_Group_Item_Border_Color:var(--fdNotification_Group_Item_Border_Color_Normal);--fdNotification_Group_Item_Border_Bottom_Color:var(--fdNotification_Group_Item_Border_Bottom_Color_Normal);--fdNotification_Group_Item_Children_Indicator_Display:none;--fdNotification_Group_Item_Background:var(--sapList_Background);--fdNotification_Limit_Padding:1rem;-webkit-box-sizing:border-box;-webkit-box-shadow:var(--fdNotification_Box_Shadow);background:var(--fdNotification_Background);border:0;border-radius:var(--fdNotification_Border_Radius);box-shadow:var(--fdNotification_Box_Shadow);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:var(--fdNotification_Max_Width);padding:0;width:100%}.fd-notification:after,.fd-notification:before{box-sizing:inherit;font-size:inherit}.fd-notification__body{-webkit-box-sizing:border-box;background:var(--fdNotification_Item_Background);border:0;border-radius:var(--fdNotification_Item_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:var(--fdNotification_Item_Spacing);line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding:var(--fdNotification_Item_Paddign_Y) var(--fdNotification_Item_Paddign_Right) var(--fdNotification_Item_Paddign_Y) var(--fdNotification_Item_Paddign_Left);position:relative}.fd-notification__body:after,.fd-notification__body:before{box-sizing:inherit;font-size:inherit}.fd-notification__body[dir=rtl],[dir=rtl] .fd-notification__body{padding-left:var(--fdNotification_Item_Paddign_Right);padding-right:var(--fdNotification_Item_Paddign_Left)}.fd-notification__content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.5rem;line-height:var(--sapContent_LineHeight);margin:0;overflow:auto;padding:0;width:100%}.fd-notification__content:after,.fd-notification__content:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__title{-webkit-box-sizing:border-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdNotification_Item_Title_Color);display:-webkit-box;font-family:var(--sapFontFamily);font-family:var(--fdNotification_Item_Title_Font_Family);font-size:var(--sapFontSize);font-size:var(--sapFontHeader6Size);font-weight:400;font-weight:var(--fdNotification_Item_Title_Font_Weight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:var(--fdNotification_Item_Title_Line_Height);margin:0;margin-bottom:var(--fdNotification_Item_Title_Margin_Bottom);max-height:calc(var(--fdNotification_Item_Title_Line_Height) * 2);overflow:hidden;padding:0;text-overflow:ellipsis;white-space:normal}.fd-notification .fd-notification__title:after,.fd-notification .fd-notification__title:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__title--unread{--fdNotification_Item_Title_Font_Weight:bold}.fd-notification .fd-notification__paragraph{-webkit-box-sizing:border-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdNotification_Item_Paragraph_Color);display:-webkit-box;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdNotification_Item_Paragraph_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:2.75rem;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:normal}.fd-notification .fd-notification__paragraph:after,.fd-notification .fd-notification__paragraph:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__footer{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdNotification_Item_Footer_Color);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-notification .fd-notification__footer:after,.fd-notification .fd-notification__footer:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__footer-content{font-size:var(--fdNotification_Item_Footer_Font_Size);max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-notification .fd-notification__footer-content:only-child{max-width:100%}.fd-notification .fd-notification__separator{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 .5rem;padding:0}.fd-notification .fd-notification__separator:after,.fd-notification .fd-notification__separator:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__separator:before{content:\"\\b7\"}.fd-notification__message-container{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem .5rem 0 1rem}.fd-notification__message-container:after,.fd-notification__message-container:before{box-sizing:inherit;font-size:inherit}.fd-notification__message-container[dir=rtl],[dir=rtl] .fd-notification__message-container{padding-left:.5rem;padding-right:1rem}.fd-notification__header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-notification__header:after,.fd-notification__header:before{box-sizing:inherit;font-size:inherit}.fd-notification__actions{-webkit-box-sizing:border-box;align-items:flex-start;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.5rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-notification__actions:after,.fd-notification__actions:before{box-sizing:inherit;font-size:inherit}.fd-notification__limit{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding:var(--fdNotification_Limit_Padding);text-align:center}.fd-notification__limit:after,.fd-notification__limit:before{box-sizing:inherit;font-size:inherit}.fd-notification__limit--title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;white-space:break-spaces}.fd-notification__limit--title:after,.fd-notification__limit--title:before{box-sizing:inherit;font-size:inherit}.fd-notification__limit--description{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;padding:0;white-space:break-spaces}.fd-notification__limit--description:after,.fd-notification__limit--description:before{box-sizing:inherit;font-size:inherit}.fd-notification__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdNotification_Indicator_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 .5rem 0 0;padding:0}.fd-notification__indicator:after,.fd-notification__indicator:before{box-sizing:inherit;font-size:inherit}.fd-notification__indicator[dir=rtl],[dir=rtl] .fd-notification__indicator{margin-left:.5rem;margin-right:0}.fd-notification__indicator--error{--fdNotification_Indicator_Color:var(--sapErrorColor)}.fd-notification__indicator--error:before{content:\"\\e0b1\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--success{--fdNotification_Indicator_Color:var(--sapSuccessColor)}.fd-notification__indicator--success:before{content:\"\\e203\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--warning{--fdNotification_Indicator_Color:var(--sapWarningColor)}.fd-notification__indicator--warning:before{content:\"\\e201\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--information{--fdNotification_Indicator_Color:var(--sapInformationColor)}.fd-notification__indicator--information:before{content:\"\\e202\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__unread-indicator{-webkit-box-sizing:border-box;-webkit-transform:translateY(-50%);background-color:var(--fdNotification_Unread_Indicator_Background);border:0;border-radius:100%;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.5rem;line-height:var(--sapContent_LineHeight);margin:0;max-height:.5rem;max-width:.5rem;min-height:.5rem;min-width:.5rem;padding:0;position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:.5rem}.fd-notification__unread-indicator:after,.fd-notification__unread-indicator:before{box-sizing:inherit;font-size:inherit}.fd-notification__unread-indicator[dir=rtl],[dir=rtl] .fd-notification__unread-indicator{left:.5rem;right:auto}.fd-notification.fd-notification--group{-webkit-box-sizing:border-box;--fdNotification_Item_Border_Radius:0;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0}.fd-notification.fd-notification--group:after,.fd-notification.fd-notification--group:before{box-sizing:inherit;font-size:inherit}.fd-notification.fd-notification--group .fd-notification__body:last-of-type{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-notification.fd-notification--group .fd-notification__body{border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.fd-notification.fd-notification--group .fd-notification__group-header{-webkit-box-sizing:border-box;align-items:baseline;border:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.75rem .5rem .25rem 1rem}.fd-notification.fd-notification--group .fd-notification__group-header:after,.fd-notification.fd-notification--group .fd-notification__group-header:before{box-sizing:inherit;font-size:inherit}.fd-notification.fd-notification--group .fd-notification__group-header[dir=rtl],[dir=rtl] .fd-notification.fd-notification--group .fd-notification__group-header{padding-left:.5rem;padding-right:1rem}.fd-notification.fd-notification--padding{padding:.75rem}.fd-notification--mobile{overflow:hidden;padding:0}.fd-notification--mobile .fd-notification__body:last-of-type{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-notification--mobile .fd-notification__indicator{padding-right:.25rem}.fd-notification--mobile .fd-notification__indicator[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__indicator{padding-left:.25rem;padding-right:0}.fd-notification--mobile .fd-notification__group-header{padding:.5rem .5rem 0}.fd-notification--mobile .fd-notification__body{padding:1rem .5rem 1rem .75rem}.fd-notification--mobile .fd-notification__body[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__body{padding-left:.5rem;padding-right:.75rem}.fd-notification--mobile .fd-notification__content{margin-left:.75rem}.fd-notification--mobile .fd-notification__content[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__content{margin-left:0;margin-right:.75rem}.fd-notification--in-dialog{-webkit-box-shadow:none;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;margin-bottom:0}.fd-notification--in-dialog:last-of-type{border-bottom:none}.fd-notification--btp{--fdNotification_Box_Shadow:none;--fdNotification_Border_Radius:var(--sapElement_BorderCornerRadius);--fdNotification_Item_Box_Shadow:none;--fdNotification_Item_Spacing:.75rem;--fdNotification_Item_Paddign_Y:.75rem;--fdNotification_Item_Paddign_Left:1rem;--fdNotification_Item_Paddign_Right:1.5rem;--fdNotification_Item_Border_Radius:var(--sapElement_BorderCornerRadius);--fdNotification_Item_Paragraph_Font_Size:var(--sapFontSmallSize);--fdNotification_Item_Title_Margin_Bottom:0;--fdNotification_Item_Title_Line_Height:1.25rem;--fdNotification_Item_Title_Color:var(--sapTitleColor);--fdNotification_Item_Title_Font_Family:var(--sapFontSemiboldFamily);--fdNotification_Item_Footer_Font_Size:var(--sapFontSmallSize);--fdNotification_Limit_Padding:1.5rem 0}.fd-notification--btp .fd-notification__body{border:.0625rem solid var(--fdNotification_Item_Border_Color);cursor:pointer}.fd-notification--btp .fd-notification__body.is-hover,.fd-notification--btp .fd-notification__body:hover{--fdNotification_Item_Background:var(--sapList_Hover_Background)}.fd-notification--btp .fd-notification__body.is-active,.fd-notification--btp .fd-notification__body:active{--fdNotification_Item_Background:var(--sapList_Active_Background);--fdNotification_Item_Title_Color:var(--fdNotification_Item_Title_Color_Active);--fdNotification_Item_Paragraph_Color:var(--fdNotification_Item_Paragraph_Color_Active);--fdNotification_Item_Footer_Color:var(--fdNotification_Item_Footer_Color_Active)}.fd-notification--btp .fd-notification__body.is-active.is-focus,.fd-notification--btp .fd-notification__body.is-active:focus,.fd-notification--btp .fd-notification__body:active.is-focus,.fd-notification--btp .fd-notification__body:active:focus{--fdNotification_Item_Background:var(--sapList_Active_Background);outline:none;z-index:5}.fd-notification--btp .fd-notification__body.is-focus,.fd-notification--btp .fd-notification__body:focus{--fdNotification_Item_Background:var(--sapList_Background);outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);z-index:5}.fd-notification--btp.fd-notification--group{--fdNotification_Border_Radius:0;--fdNotification_Background:transparent;--fdNotification_Item_Border_Radius:var(--sapElement_BorderCornerRadius);overflow:visible}.fd-notification--btp.fd-notification--group .fd-notification__group-header{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-transition:var(--fdNotification_Group_Item_Transition);align-items:center;background:var(--fdNotification_Group_Item_Background);border:.0625rem solid var(--fdNotification_Group_Item_Border_Color);border-bottom:.0625rem solid var(--fdNotification_Group_Item_Border_Color);border-bottom-color:var(--fdNotification_Group_Item_Border_Bottom_Color);border-radius:var(--fdNotification_Group_Item_Border_Radius);color:var(--fdNotification_Group_Item_Color);cursor:pointer;display:flex;gap:.4375rem;height:2rem;justify-content:space-between;margin-bottom:.125rem;max-width:24rem;min-width:20rem;padding:.5rem .75rem;transition:var(--fdNotification_Group_Item_Transition)}.fd-notification--btp.fd-notification--group .fd-notification__group-header [class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:inherit;display:flex;display:var(--fdNotification_Group_Item_Children_Indicator_Display);font-size:.75rem;height:.75rem;justify-content:center;width:.75rem}.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-hover,.fd-notification--btp.fd-notification--group .fd-notification__group-header:hover{--fdNotification_Group_Item_Children_Indicator_Display:inline-flex;--fdNotification_Group_Item_Background:var(--sapList_Hover_Background);--fdNotification_Group_Item_Border_Color:var(--fdNotification_Group_Item_Border_Color_Hover)}.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-active,.fd-notification--btp.fd-notification--group .fd-notification__group-header:active{--fdNotification_Group_Item_Children_Indicator_Display:inline-flex;--fdNotification_Group_Item_Background:var(--sapList_Active_Background);--fdNotification_Group_Item_Border_Color:var(--fdNotification_Group_Item_Border_Color_Active);--fdNotification_Group_Item_Color:var(--fdNotification_Group_Item_Color_Active)}.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-active.is-focus,.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-active:focus,.fd-notification--btp.fd-notification--group .fd-notification__group-header:active.is-focus,.fd-notification--btp.fd-notification--group .fd-notification__group-header:active:focus{--fdNotification_Group_Item_Children_Indicator_Display:inline-flex;--fdNotification_Group_Item_Background:var(--sapList_Active_Background);--fdNotification_Group_Item_Border_Color:var(--fdNotification_Group_Item_Border_Color_Active);--fdNotification_Group_Item_Border_Bottom_Color:var(--fdNotification_Group_Item_Border_Color_Active);outline:none;z-index:5}.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-focus,.fd-notification--btp.fd-notification--group .fd-notification__group-header:focus{--fdNotification_Group_Item_Background:var(--sapList_Background);--fdNotification_Group_Item_Border_Bottom_Color:transparent;--fdNotification_Group_Item_Border_Color:var(--fdNotification_Group_Item_Border_Color_Focused);--fdNotification_Group_Item_Children_Indicator_Display:inline-flex;outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);z-index:5}.fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed,.fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed,.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed{--fdNotification_Group_Item_Children_Indicator_Display:inline-flex;max-height:2rem}.fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed [class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed[class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed [class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed[class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed [class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed[class*=sap-icon]{transform:rotate(-90deg)}.fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed [class*=sap-icon][dir=rtl],.fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed[class*=sap-icon][dir=rtl],.fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed [class*=sap-icon][dir=rtl],.fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed[class*=sap-icon][dir=rtl],.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed [class*=sap-icon][dir=rtl],.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed[class*=sap-icon][dir=rtl],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed [class*=sap-icon],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed[class*=sap-icon],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed [class*=sap-icon],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed[class*=sap-icon],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed [class*=sap-icon],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed[class*=sap-icon]{transform:rotate(90deg)}.fd-notification--btp.fd-notification--group .fd-notification__group-header-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:inherit;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;font-weight:semibold;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-notification--btp.fd-notification--group .fd-notification__group-header-title:after,.fd-notification--btp.fd-notification--group .fd-notification__group-header-title:before{box-sizing:inherit;font-size:inherit}.fd-notification--btp.fd-notification--group .fd-notification__body{border:.0625rem solid var(--fdNotification_Item_Border_Color);margin-bottom:.125rem}.fd-notification--btp.fd-notification--group .fd-notification__body:last-of-type{--fdNotification_Item_Border_Radius:var(--sapElement_BorderCornerRadius);border-bottom:.0625rem solid var(--fdNotification_Item_Border_Color);border-bottom-left-radius:var(--sapElement_BorderCornerRadius);border-bottom-right-radius:var(--sapElement_BorderCornerRadius);margin-bottom:1.5rem}.fd-notification-custom-block{display:block}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: NotificationComponent, decorators: [{
             type: Component,
@@ -142,7 +142,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                         '[attr.dir]': '_dir',
                         role: 'alertdialog',
                         '[attr.id]': 'id'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 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-notification{-webkit-box-sizing:border-box;-webkit-box-shadow:var(--sapContent_Shadow0);background-color:var(--sapList_Background);border:0;border-radius:.25rem;box-shadow:var(--sapContent_Shadow0);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 1.25rem;max-width:40rem;padding:1rem .5rem 1rem 1rem;width:100%}.fd-notification:after,.fd-notification:before{box-sizing:inherit;font-size:inherit}.fd-notification[dir=rtl],[dir=rtl] .fd-notification{padding-left:.5rem;padding-right:1rem}.fd-notification__body{-webkit-box-sizing:border-box;-webkit-box-pack:justify;-ms-flex-pack:justify;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;justify-content:space-between;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-notification__body:after,.fd-notification__body:before{box-sizing:inherit;font-size:inherit}.fd-notification__body--message{padding-top:1rem}.fd-notification__content{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 0 1rem;overflow:auto;padding:0;width:100%}.fd-notification__content:after,.fd-notification__content:before{box-sizing:inherit;font-size:inherit}.fd-notification__content[dir=rtl],[dir=rtl] .fd-notification__content{margin-left:0;margin-right:1rem}.fd-notification__content:first-child{margin-left:0}.fd-notification__content:first-child[dir=rtl],[dir=rtl] .fd-notification__content:first-child{margin-right:0}.fd-notification .fd-notification__title{-webkit-box-sizing:border-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;border:0;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader6Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 .25rem;max-height:2.5rem;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:normal}.fd-notification .fd-notification__title:after,.fd-notification .fd-notification__title:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__title--unread{font-weight:700}.fd-notification .fd-notification__paragraph{-webkit-box-sizing:border-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;border:0;box-sizing:border-box;color:var(--sapTextColor);display:-webkit-box;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;max-height:2.75rem;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:normal}.fd-notification .fd-notification__paragraph:after,.fd-notification .fd-notification__paragraph:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__footer{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;padding:0}.fd-notification .fd-notification__footer:after,.fd-notification .fd-notification__footer:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__footer-content{max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-notification .fd-notification__footer-content:only-child{max-width:100%}.fd-notification .fd-notification__separator{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 .5rem;padding:0}.fd-notification .fd-notification__separator:after,.fd-notification .fd-notification__separator:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__separator:before{content:\"\\b7\"}.fd-notification__header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-notification__header:after,.fd-notification__header:before{box-sizing:inherit;font-size:inherit}.fd-notification__actions{-webkit-box-sizing:border-box;-webkit-box-align:start;-ms-flex-align:start;-webkit-box-flex:1;-ms-flex:1 0 auto;align-items:flex-start;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex:1 0 auto;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0 0 0 1rem}.fd-notification__actions:after,.fd-notification__actions:before{box-sizing:inherit;font-size:inherit}.fd-notification__actions[dir=rtl],[dir=rtl] .fd-notification__actions{padding-left:0;padding-right:1rem}.fd-notification__actions>*{margin-left:.5rem}.fd-notification__actions>:first-child{margin-left:0}.fd-notification__actions>[dir=rtl],[dir=rtl] .fd-notification__actions>*{margin-left:0;margin-right:.5rem}.fd-notification__limit{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem;text-align:center}.fd-notification__limit:after,.fd-notification__limit:before{box-sizing:inherit;font-size:inherit}.fd-notification__limit--title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;white-space:break-spaces}.fd-notification__limit--title:after,.fd-notification__limit--title:before{box-sizing:inherit;font-size:inherit}.fd-notification__limit--description{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;padding:0;white-space:break-spaces}.fd-notification__limit--description:after,.fd-notification__limit--description:before{box-sizing:inherit;font-size:inherit}.fd-notification__indicator{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0 .5rem 0 0}.fd-notification__indicator:after,.fd-notification__indicator:before{box-sizing:inherit;font-size:inherit}.fd-notification__indicator[dir=rtl],[dir=rtl] .fd-notification__indicator{padding-left:.5rem;padding-right:0}.fd-notification__indicator--error{color:var(--sapErrorColor)}.fd-notification__indicator--error:before{content:\"\\e0b1\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--success{color:var(--sapSuccessColor)}.fd-notification__indicator--success:before{content:\"\\e203\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--warning{color:var(--sapWarningColor)}.fd-notification__indicator--warning:before{content:\"\\e201\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--information{color:var(--sapInformationColor)}.fd-notification__indicator--information:before{content:\"\\e202\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification--group{-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;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0}.fd-notification--group:after,.fd-notification--group:before{box-sizing:inherit;font-size:inherit}.fd-notification--group .fd-notification__body:last-of-type{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-notification--group .fd-notification__body{border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);padding:1rem .5rem 1rem 1rem}.fd-notification--group .fd-notification__body[dir=rtl],[dir=rtl] .fd-notification--group .fd-notification__body{padding-left:.5rem;padding-right:1rem}.fd-notification--group .fd-notification__group-header{-webkit-box-sizing:border-box;align-items:baseline;border:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.75rem .5rem .25rem 1rem}.fd-notification--group .fd-notification__group-header:after,.fd-notification--group .fd-notification__group-header:before{box-sizing:inherit;font-size:inherit}.fd-notification--group .fd-notification__group-header[dir=rtl],[dir=rtl] .fd-notification--group .fd-notification__group-header{padding-left:.5rem;padding-right:1rem}.fd-notification--group[dir=rtl],[dir=rtl] .fd-notification--group{padding-left:0;padding-right:0}.fd-notification--mobile{padding:0}.fd-notification--mobile .fd-notification__body:last-of-type{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-notification--mobile .fd-notification__indicator{padding-right:.25rem}.fd-notification--mobile .fd-notification__indicator[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__indicator{padding-left:.75rem;padding-right:0}.fd-notification--mobile .fd-notification__group-header{padding:.5rem .5rem 0}.fd-notification--mobile .fd-notification__body{padding:1rem .5rem 1rem .75rem}.fd-notification--mobile .fd-notification__body[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__body{padding-left:.5rem;padding-right:.75rem}.fd-notification--mobile .fd-notification__content{margin-left:.75rem}.fd-notification--mobile .fd-notification__content[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__content{margin-left:0;margin-right:.75rem}.fd-notification--in-dialog{-webkit-box-shadow:none;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;margin-bottom:0}.fd-notification--in-dialog:last-of-type{border-bottom:none}.fd-notification-custom-block{display:block}\n"] }]
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["@charset \"UTF-8\";/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 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-notification{--fdNotification_Max_Width:40rem;--fdNotification_Border_Radius:.25rem;--fdNotification_Background:var(--sapList_Background);--fdNotification_Box_Shadow:var(--sapContent_Shadow0);--fdNotification_Item_Background:var(--sapList_Background);--fdNotification_Item_Box_Shadow:var(--sapContent_Shadow0);--fdNotification_Item_Border_Radius:.25rem;--fdNotification_Item_Max_Width:40rem;--fdNotification_Item_Paddign_Y:1rem;--fdNotification_Item_Paddign_Left:1rem;--fdNotification_Item_Paddign_Right:.5rem;--fdNotification_Item_Spacing:1rem;--fdNotification_Indicator_Color:var(--sapErrorColor);--fdNotification_Item_Title_Margin_Bottom:.25rem;--fdNotification_Item_Title_Line_Height:1.25rem;--fdNotification_Item_Title_Color:var(--sapTextColor);--fdNotification_Item_Title_Font_Family:var(--sapFontFamily);--fdNotification_Item_Title_Font_Weight:var(--sapFontHeaderWeight);--fdNotification_Item_Paragraph_Font_Size:var(--sapFontSize);--fdNotification_Item_Paragraph_Color:var(--sapTextColor);--fdNotification_Item_Footer_Font_Size:var(--sapFontSize);--fdNotification_Item_Footer_Color:var(--sapTextColor);--fdNotification_Group_Item_Border_Color:var(--fdNotification_Group_Item_Border_Color_Normal);--fdNotification_Group_Item_Border_Bottom_Color:var(--fdNotification_Group_Item_Border_Bottom_Color_Normal);--fdNotification_Group_Item_Children_Indicator_Display:none;--fdNotification_Group_Item_Background:var(--sapList_Background);--fdNotification_Limit_Padding:1rem;-webkit-box-sizing:border-box;-webkit-box-shadow:var(--fdNotification_Box_Shadow);background:var(--fdNotification_Background);border:0;border-radius:var(--fdNotification_Border_Radius);box-shadow:var(--fdNotification_Box_Shadow);box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-width:var(--fdNotification_Max_Width);padding:0;width:100%}.fd-notification:after,.fd-notification:before{box-sizing:inherit;font-size:inherit}.fd-notification__body{-webkit-box-sizing:border-box;background:var(--fdNotification_Item_Background);border:0;border-radius:var(--fdNotification_Item_Border_Radius);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:var(--fdNotification_Item_Spacing);line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding:var(--fdNotification_Item_Paddign_Y) var(--fdNotification_Item_Paddign_Right) var(--fdNotification_Item_Paddign_Y) var(--fdNotification_Item_Paddign_Left);position:relative}.fd-notification__body:after,.fd-notification__body:before{box-sizing:inherit;font-size:inherit}.fd-notification__body[dir=rtl],[dir=rtl] .fd-notification__body{padding-left:var(--fdNotification_Item_Paddign_Right);padding-right:var(--fdNotification_Item_Paddign_Left)}.fd-notification__content{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:column;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.5rem;line-height:var(--sapContent_LineHeight);margin:0;overflow:auto;padding:0;width:100%}.fd-notification__content:after,.fd-notification__content:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__title{-webkit-box-sizing:border-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdNotification_Item_Title_Color);display:-webkit-box;font-family:var(--sapFontFamily);font-family:var(--fdNotification_Item_Title_Font_Family);font-size:var(--sapFontSize);font-size:var(--sapFontHeader6Size);font-weight:400;font-weight:var(--fdNotification_Item_Title_Font_Weight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:var(--fdNotification_Item_Title_Line_Height);margin:0;margin-bottom:var(--fdNotification_Item_Title_Margin_Bottom);max-height:calc(var(--fdNotification_Item_Title_Line_Height) * 2);overflow:hidden;padding:0;text-overflow:ellipsis;white-space:normal}.fd-notification .fd-notification__title:after,.fd-notification .fd-notification__title:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__title--unread{--fdNotification_Item_Title_Font_Weight:bold}.fd-notification .fd-notification__paragraph{-webkit-box-sizing:border-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdNotification_Item_Paragraph_Color);display:-webkit-box;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--fdNotification_Item_Paragraph_Font_Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;max-height:2.75rem;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:normal}.fd-notification .fd-notification__paragraph:after,.fd-notification .fd-notification__paragraph:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__footer{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdNotification_Item_Footer_Color);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-notification .fd-notification__footer:after,.fd-notification .fd-notification__footer:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__footer-content{font-size:var(--fdNotification_Item_Footer_Font_Size);max-width:50%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fd-notification .fd-notification__footer-content:only-child{max-width:100%}.fd-notification .fd-notification__separator{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 .5rem;padding:0}.fd-notification .fd-notification__separator:after,.fd-notification .fd-notification__separator:before{box-sizing:inherit;font-size:inherit}.fd-notification .fd-notification__separator:before{content:\"\\b7\"}.fd-notification__message-container{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem .5rem 0 1rem}.fd-notification__message-container:after,.fd-notification__message-container:before{box-sizing:inherit;font-size:inherit}.fd-notification__message-container[dir=rtl],[dir=rtl] .fd-notification__message-container{padding-left:.5rem;padding-right:1rem}.fd-notification__header{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-notification__header:after,.fd-notification__header:before{box-sizing:inherit;font-size:inherit}.fd-notification__actions{-webkit-box-sizing:border-box;align-items:flex-start;border:0;box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;gap:.5rem;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-notification__actions:after,.fd-notification__actions:before{box-sizing:inherit;font-size:inherit}.fd-notification__limit{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;padding:var(--fdNotification_Limit_Padding);text-align:center}.fd-notification__limit:after,.fd-notification__limit:before{box-sizing:inherit;font-size:inherit}.fd-notification__limit--title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0;white-space:break-spaces}.fd-notification__limit--title:after,.fd-notification__limit--title:before{box-sizing:inherit;font-size:inherit}.fd-notification__limit--description{-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;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;padding:0;white-space:break-spaces}.fd-notification__limit--description:after,.fd-notification__limit--description:before{box-sizing:inherit;font-size:inherit}.fd-notification__indicator{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--fdNotification_Indicator_Color);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 .5rem 0 0;padding:0}.fd-notification__indicator:after,.fd-notification__indicator:before{box-sizing:inherit;font-size:inherit}.fd-notification__indicator[dir=rtl],[dir=rtl] .fd-notification__indicator{margin-left:.5rem;margin-right:0}.fd-notification__indicator--error{--fdNotification_Indicator_Color:var(--sapErrorColor)}.fd-notification__indicator--error:before{content:\"\\e0b1\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--success{--fdNotification_Indicator_Color:var(--sapSuccessColor)}.fd-notification__indicator--success:before{content:\"\\e203\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--warning{--fdNotification_Indicator_Color:var(--sapWarningColor)}.fd-notification__indicator--warning:before{content:\"\\e201\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__indicator--information{--fdNotification_Indicator_Color:var(--sapInformationColor)}.fd-notification__indicator--information:before{content:\"\\e202\";font-family:SAP-icons;text-align:center;text-decoration:inherit;text-rendering:optimizeLegibility;text-transform:none}.fd-notification__unread-indicator{-webkit-box-sizing:border-box;-webkit-transform:translateY(-50%);background-color:var(--fdNotification_Unread_Indicator_Background);border:0;border-radius:100%;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:.5rem;line-height:var(--sapContent_LineHeight);margin:0;max-height:.5rem;max-width:.5rem;min-height:.5rem;min-width:.5rem;padding:0;position:absolute;right:.5rem;top:50%;transform:translateY(-50%);width:.5rem}.fd-notification__unread-indicator:after,.fd-notification__unread-indicator:before{box-sizing:inherit;font-size:inherit}.fd-notification__unread-indicator[dir=rtl],[dir=rtl] .fd-notification__unread-indicator{left:.5rem;right:auto}.fd-notification.fd-notification--group{-webkit-box-sizing:border-box;--fdNotification_Item_Border_Radius:0;border:0;box-sizing:border-box;color:var(--sapTextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;height:100%;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0}.fd-notification.fd-notification--group:after,.fd-notification.fd-notification--group:before{box-sizing:inherit;font-size:inherit}.fd-notification.fd-notification--group .fd-notification__body:last-of-type{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-notification.fd-notification--group .fd-notification__body{border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor)}.fd-notification.fd-notification--group .fd-notification__group-header{-webkit-box-sizing:border-box;align-items:baseline;border:0;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);box-sizing:border-box;color:var(--sapTextColor);display:flex;flex-direction:row;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:.75rem .5rem .25rem 1rem}.fd-notification.fd-notification--group .fd-notification__group-header:after,.fd-notification.fd-notification--group .fd-notification__group-header:before{box-sizing:inherit;font-size:inherit}.fd-notification.fd-notification--group .fd-notification__group-header[dir=rtl],[dir=rtl] .fd-notification.fd-notification--group .fd-notification__group-header{padding-left:.5rem;padding-right:1rem}.fd-notification.fd-notification--padding{padding:.75rem}.fd-notification--mobile{overflow:hidden;padding:0}.fd-notification--mobile .fd-notification__body:last-of-type{border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-notification--mobile .fd-notification__indicator{padding-right:.25rem}.fd-notification--mobile .fd-notification__indicator[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__indicator{padding-left:.25rem;padding-right:0}.fd-notification--mobile .fd-notification__group-header{padding:.5rem .5rem 0}.fd-notification--mobile .fd-notification__body{padding:1rem .5rem 1rem .75rem}.fd-notification--mobile .fd-notification__body[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__body{padding-left:.5rem;padding-right:.75rem}.fd-notification--mobile .fd-notification__content{margin-left:.75rem}.fd-notification--mobile .fd-notification__content[dir=rtl],[dir=rtl] .fd-notification--mobile .fd-notification__content{margin-left:0;margin-right:.75rem}.fd-notification--in-dialog{-webkit-box-shadow:none;border-bottom:var(--sapList_BorderWidth) solid var(--sapList_BorderColor);border-bottom-left-radius:0;border-bottom-right-radius:0;box-shadow:none;margin-bottom:0}.fd-notification--in-dialog:last-of-type{border-bottom:none}.fd-notification--btp{--fdNotification_Box_Shadow:none;--fdNotification_Border_Radius:var(--sapElement_BorderCornerRadius);--fdNotification_Item_Box_Shadow:none;--fdNotification_Item_Spacing:.75rem;--fdNotification_Item_Paddign_Y:.75rem;--fdNotification_Item_Paddign_Left:1rem;--fdNotification_Item_Paddign_Right:1.5rem;--fdNotification_Item_Border_Radius:var(--sapElement_BorderCornerRadius);--fdNotification_Item_Paragraph_Font_Size:var(--sapFontSmallSize);--fdNotification_Item_Title_Margin_Bottom:0;--fdNotification_Item_Title_Line_Height:1.25rem;--fdNotification_Item_Title_Color:var(--sapTitleColor);--fdNotification_Item_Title_Font_Family:var(--sapFontSemiboldFamily);--fdNotification_Item_Footer_Font_Size:var(--sapFontSmallSize);--fdNotification_Limit_Padding:1.5rem 0}.fd-notification--btp .fd-notification__body{border:.0625rem solid var(--fdNotification_Item_Border_Color);cursor:pointer}.fd-notification--btp .fd-notification__body.is-hover,.fd-notification--btp .fd-notification__body:hover{--fdNotification_Item_Background:var(--sapList_Hover_Background)}.fd-notification--btp .fd-notification__body.is-active,.fd-notification--btp .fd-notification__body:active{--fdNotification_Item_Background:var(--sapList_Active_Background);--fdNotification_Item_Title_Color:var(--fdNotification_Item_Title_Color_Active);--fdNotification_Item_Paragraph_Color:var(--fdNotification_Item_Paragraph_Color_Active);--fdNotification_Item_Footer_Color:var(--fdNotification_Item_Footer_Color_Active)}.fd-notification--btp .fd-notification__body.is-active.is-focus,.fd-notification--btp .fd-notification__body.is-active:focus,.fd-notification--btp .fd-notification__body:active.is-focus,.fd-notification--btp .fd-notification__body:active:focus{--fdNotification_Item_Background:var(--sapList_Active_Background);outline:none;z-index:5}.fd-notification--btp .fd-notification__body.is-focus,.fd-notification--btp .fd-notification__body:focus{--fdNotification_Item_Background:var(--sapList_Background);outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);z-index:5}.fd-notification--btp.fd-notification--group{--fdNotification_Border_Radius:0;--fdNotification_Background:transparent;--fdNotification_Item_Border_Radius:var(--sapElement_BorderCornerRadius);overflow:visible}.fd-notification--btp.fd-notification--group .fd-notification__group-header{-webkit-box-align:center;-ms-flex-align:center;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-transition:var(--fdNotification_Group_Item_Transition);align-items:center;background:var(--fdNotification_Group_Item_Background);border:.0625rem solid var(--fdNotification_Group_Item_Border_Color);border-bottom:.0625rem solid var(--fdNotification_Group_Item_Border_Color);border-bottom-color:var(--fdNotification_Group_Item_Border_Bottom_Color);border-radius:var(--fdNotification_Group_Item_Border_Radius);color:var(--fdNotification_Group_Item_Color);cursor:pointer;display:flex;gap:.4375rem;height:2rem;justify-content:space-between;margin-bottom:.125rem;max-width:24rem;min-width:20rem;padding:.5rem .75rem;transition:var(--fdNotification_Group_Item_Transition)}.fd-notification--btp.fd-notification--group .fd-notification__group-header [class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header[class*=sap-icon]{-webkit-box-pack:center;-ms-flex-pack:center;align-items:center;color:inherit;display:flex;display:var(--fdNotification_Group_Item_Children_Indicator_Display);font-size:.75rem;height:.75rem;justify-content:center;width:.75rem}.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-hover,.fd-notification--btp.fd-notification--group .fd-notification__group-header:hover{--fdNotification_Group_Item_Children_Indicator_Display:inline-flex;--fdNotification_Group_Item_Background:var(--sapList_Hover_Background);--fdNotification_Group_Item_Border_Color:var(--fdNotification_Group_Item_Border_Color_Hover)}.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-active,.fd-notification--btp.fd-notification--group .fd-notification__group-header:active{--fdNotification_Group_Item_Children_Indicator_Display:inline-flex;--fdNotification_Group_Item_Background:var(--sapList_Active_Background);--fdNotification_Group_Item_Border_Color:var(--fdNotification_Group_Item_Border_Color_Active);--fdNotification_Group_Item_Color:var(--fdNotification_Group_Item_Color_Active)}.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-active.is-focus,.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-active:focus,.fd-notification--btp.fd-notification--group .fd-notification__group-header:active.is-focus,.fd-notification--btp.fd-notification--group .fd-notification__group-header:active:focus{--fdNotification_Group_Item_Children_Indicator_Display:inline-flex;--fdNotification_Group_Item_Background:var(--sapList_Active_Background);--fdNotification_Group_Item_Border_Color:var(--fdNotification_Group_Item_Border_Color_Active);--fdNotification_Group_Item_Border_Bottom_Color:var(--fdNotification_Group_Item_Border_Color_Active);outline:none;z-index:5}.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-focus,.fd-notification--btp.fd-notification--group .fd-notification__group-header:focus{--fdNotification_Group_Item_Background:var(--sapList_Background);--fdNotification_Group_Item_Border_Bottom_Color:transparent;--fdNotification_Group_Item_Border_Color:var(--fdNotification_Group_Item_Border_Color_Focused);--fdNotification_Group_Item_Children_Indicator_Display:inline-flex;outline:var(--sapContent_FocusStyle) var(--sapContent_FocusWidth) var(--sapContent_FocusColor);z-index:5}.fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed,.fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed,.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed{--fdNotification_Group_Item_Children_Indicator_Display:inline-flex;max-height:2rem}.fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed [class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed[class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed [class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed[class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed [class*=sap-icon],.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed[class*=sap-icon]{transform:rotate(-90deg)}.fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed [class*=sap-icon][dir=rtl],.fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed[class*=sap-icon][dir=rtl],.fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed [class*=sap-icon][dir=rtl],.fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed[class*=sap-icon][dir=rtl],.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed [class*=sap-icon][dir=rtl],.fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed[class*=sap-icon][dir=rtl],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed [class*=sap-icon],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header--collapsed[class*=sap-icon],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed [class*=sap-icon],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header.collapsed[class*=sap-icon],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed [class*=sap-icon],[dir=rtl] .fd-notification--btp.fd-notification--group .fd-notification__group-header.is-collapsed[class*=sap-icon]{transform:rotate(90deg)}.fd-notification--btp.fd-notification--group .fd-notification__group-header-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:inherit;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontSmallSize);font-weight:400;font-weight:semibold;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;overflow:hidden;padding:0;text-overflow:ellipsis;white-space:nowrap;width:100%}.fd-notification--btp.fd-notification--group .fd-notification__group-header-title:after,.fd-notification--btp.fd-notification--group .fd-notification__group-header-title:before{box-sizing:inherit;font-size:inherit}.fd-notification--btp.fd-notification--group .fd-notification__body{border:.0625rem solid var(--fdNotification_Item_Border_Color);margin-bottom:.125rem}.fd-notification--btp.fd-notification--group .fd-notification__body:last-of-type{--fdNotification_Item_Border_Radius:var(--sapElement_BorderCornerRadius);border-bottom:.0625rem solid var(--fdNotification_Item_Border_Color);border-bottom-left-radius:var(--sapElement_BorderCornerRadius);border-bottom-right-radius:var(--sapElement_BorderCornerRadius);margin-bottom:1.5rem}.fd-notification-custom-block{display:block}\n"] }]
         }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ComponentFactoryResolver }, { type: i0.ChangeDetectorRef }, { type: i1.Router }, { type: i2.ConfigurableFocusTrapFactory }, { type: i3.NotificationConfig, decorators: [{
                     type: Optional
                 }] }, { type: i4.NotificationRef, decorators: [{

package/esm2022/object-identifier/object-identifier.component.mjs

@@ -42,7 +42,7 @@ export class ObjectIdentifierComponent {
         <p class="fd-object-identifier__text" *ngIf="description">
             {{ description }}
         </p>
-    `, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 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-object-identifier .fd-object-identifier__link{font-size:inherit;font-weight:inherit}.fd-object-identifier__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-object-identifier__title:after,.fd-object-identifier__title:before{box-sizing:inherit;font-size:inherit}.fd-object-identifier__title--bold{font-weight:700}.fd-object-identifier__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;padding:0}.fd-object-identifier__text:after,.fd-object-identifier__text:before{box-sizing:inherit;font-size:inherit}.fd-object-identifier--medium .fd-object-identifier__title{font-size:var(--sapFontSize)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: ["/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 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-object-identifier .fd-object-identifier__link{font-size:inherit;font-weight:inherit}.fd-object-identifier__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-object-identifier__title:after,.fd-object-identifier__title:before{box-sizing:inherit;font-size:inherit}.fd-object-identifier__title--bold{font-weight:700}.fd-object-identifier__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;padding:0}.fd-object-identifier__text:after,.fd-object-identifier__text:before{box-sizing:inherit;font-size:inherit}.fd-object-identifier--medium .fd-object-identifier__title{font-size:var(--sapFontSize)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: ObjectIdentifierComponent, decorators: [{
             type: Component,
@@ -53,7 +53,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
         <p class="fd-object-identifier__text" *ngIf="description">
             {{ description }}
         </p>
-    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/*!\n * Fundamental Library Styles v0.28.3\n * Copyright (c) 2023 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-object-identifier .fd-object-identifier__link{font-size:inherit;font-weight:inherit}.fd-object-identifier__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-object-identifier__title:after,.fd-object-identifier__title:before{box-sizing:inherit;font-size:inherit}.fd-object-identifier__title--bold{font-weight:700}.fd-object-identifier__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;padding:0}.fd-object-identifier__text:after,.fd-object-identifier__text:before{box-sizing:inherit;font-size:inherit}.fd-object-identifier--medium .fd-object-identifier__title{font-size:var(--sapFontSize)}\n"] }]
+    `, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, styles: ["/*!\n * Fundamental Library Styles v0.30.2-rc.6\n * Copyright (c) 2023 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-object-identifier .fd-object-identifier__link{font-size:inherit;font-weight:inherit}.fd-object-identifier__title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapList_TextColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-size:var(--sapFontLargeSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0;padding:0}.fd-object-identifier__title:after,.fd-object-identifier__title:before{box-sizing:inherit;font-size:inherit}.fd-object-identifier__title--bold{font-weight:700}.fd-object-identifier__text{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapContent_LabelColor);font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:.5rem 0 0;padding:0}.fd-object-identifier__text:after,.fd-object-identifier__text:before{box-sizing:inherit;font-size:inherit}.fd-object-identifier--medium .fd-object-identifier__title{font-size:var(--sapFontSize)}\n"] }]
         }], propDecorators: { description: [{
                 type: Input
             }], bold: [{