@fundamental-ngx/platform 0.44.0-rc.2 → 0.44.0-rc.4

package/fesm2022/fundamental-ngx-platform-message-popover.mjs

@@ -2,11 +2,11 @@ import * as i0 from '@angular/core';
 import { InjectionToken, EventEmitter, ElementRef, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, Input, Output, ViewChild, HostBinding, Directive, Optional, ContentChildren, NgModule } from '@angular/core';
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule } from '@angular/common';
-import * as i6$1 from '@angular/forms';
+import * as i5$1 from '@angular/forms';
 import { FormGroup, ControlContainer, NgModel, FormsModule } from '@angular/forms';
-import * as i4$1 from '@fundamental-ngx/core/bar';
+import * as i3$1 from '@fundamental-ngx/core/bar';
 import { BarModule } from '@fundamental-ngx/core/bar';
-import * as i7$1 from '@fundamental-ngx/core/button';
+import * as i6$1 from '@fundamental-ngx/core/button';
 import { ButtonModule } from '@fundamental-ngx/core/button';
 import { IconModule } from '@fundamental-ngx/core/icon';
 import * as i6 from '@fundamental-ngx/core/link';
@@ -15,22 +15,23 @@ import * as i3 from '@fundamental-ngx/core/list';
 import { ListModule } from '@fundamental-ngx/core/list';
 import * as i4 from '@fundamental-ngx/core/object-status';
 import { ObjectStatusModule } from '@fundamental-ngx/core/object-status';
-import * as i3$1 from '@fundamental-ngx/core/popover';
+import * as i2$1 from '@fundamental-ngx/core/popover';
 import { PopoverModule } from '@fundamental-ngx/core/popover';
 import * as i5 from '@fundamental-ngx/core/scrollbar';
 import { ScrollbarModule } from '@fundamental-ngx/core/scrollbar';
-import * as i5$1 from '@fundamental-ngx/core/segmented-button';
+import * as i4$1 from '@fundamental-ngx/core/segmented-button';
 import { SegmentedButtonModule } from '@fundamental-ngx/core/segmented-button';
 import * as i1 from '@fundamental-ngx/cdk/utils';
-import { resizeObservable, DestroyedService, TabbableElementService, InitialFocusModule } from '@fundamental-ngx/cdk/utils';
+import { resizeObservable, TabbableElementService, InitialFocusModule } from '@fundamental-ngx/cdk/utils';
 import * as i7 from '@fundamental-ngx/i18n';
 import { I18nModule } from '@fundamental-ngx/i18n';
 import { PlatformButtonModule } from '@fundamental-ngx/platform/button';
 import { PlatformObjectStatusModule } from '@fundamental-ngx/platform/object-status';
 import { countBy, flatten, mergeWith } from 'lodash-es';
 import { getFormState } from '@fundamental-ngx/platform/form';
-import { debounceTime, takeUntil, Subject, BehaviorSubject, Subscription, switchMap, startWith, filter, zip } from 'rxjs';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
+import { debounceTime, Subject, BehaviorSubject, Subscription, switchMap, startWith, filter, zip } from 'rxjs';
 import { PlatformFormFieldControl } from '@fundamental-ngx/platform/shared';
 
 const FDP_MESSAGE_POPOVER_DEFAULT_CONFIG = {
@@ -69,8 +70,8 @@ function convertFormState(type) {
 
 class MessageViewComponent {
     /** @hidden */
-    constructor(_destroy$, _tabbableService, _document) {
-        this._destroy$ = _destroy$;
+    constructor(_destroyRef, _tabbableService, _document) {
+        this._destroyRef = _destroyRef;
         this._tabbableService = _tabbableService;
         this._document = _document;
         /** Event emitted when user clicks on error entry containing additional description. */
@@ -87,7 +88,7 @@ class MessageViewComponent {
     /** @hidden */
     ngAfterViewInit() {
         resizeObservable(this._detailsView.nativeElement)
-            .pipe(debounceTime(20), takeUntil(this._destroy$))
+            .pipe(debounceTime(20), takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             const { height } = this._detailsView.nativeElement.getBoundingClientRect();
             this._listView.nativeElement.style.minHeight = `${height}px`;
@@ -123,8 +124,8 @@ class MessageViewComponent {
             this._activeListElement = null;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessageViewComponent, deps: [{ token: i1.DestroyedService }, { token: i1.TabbableElementService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: MessageViewComponent, selector: "fdp-message-view", inputs: { currentScreen: "currentScreen", filteredErrors: "filteredErrors", currentEntry: "currentEntry" }, outputs: { openDetails: "openDetails", focusItem: "focusItem", closePopover: "closePopover" }, host: { properties: { "class": "this._initialClass" } }, providers: [DestroyedService, TabbableElementService], viewQueries: [{ propertyName: "_listView", first: true, predicate: ["listView"], descendants: true, read: ElementRef }, { propertyName: "_detailsView", first: true, predicate: ["detailsView"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-template #headingTemplate let-item>\n    <ng-template #directiveHeading>\n        <ng-template\n            [ngTemplateOutlet]=\"item.heading.message || item.description.message\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.heading.error }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #i18nHeading>\n        <ng-template\n            [ngTemplateOutlet]=\"item.heading.message\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.errors }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #stringHeading>\n        {{ item.heading.message | fdTranslate : { error: item.heading.error } : item.heading.message }}\n    </ng-template>\n    <ng-template\n        [ngTemplateOutlet]=\"\n            item.heading.type === 'directive'\n                ? directiveHeading\n                : item.heading.type === 'string'\n                ? stringHeading\n                : i18nHeading\n        \"\n    ></ng-template>\n</ng-template>\n\n<ng-template #descriptionTemplate let-item>\n    <ng-template #directiveDescription>\n        <ng-template\n            [ngTemplateOutlet]=\"item.description.message!\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.description.error }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #i18nDescription>\n        <ng-template\n            [ngTemplateOutlet]=\"item.description.message!\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.errors }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #stringDescription>\n        {{ item.description.message | fdTranslate : { error: item.description.error } : item.description.message }}\n    </ng-template>\n    <ng-template\n        [ngTemplateOutlet]=\"\n            item.heading.type === 'directive'\n                ? directiveDescription\n                : item.heading.type === 'string'\n                ? stringDescription\n                : i18nDescription\n        \"\n    ></ng-template>\n</ng-template>\n\n<div class=\"fd-message-view\">\n    <section\n        class=\"fd-message-view__list\"\n        tabindex=\"-1\"\n        [@openCloseList]=\"currentScreen === 'list' ? 'open' : 'closed'\"\n        (@openCloseList.done)=\"_onListAnimationComplete($event)\"\n        fd-scrollbar\n        [overrideTabindex]=\"false\"\n    >\n        <ul #listView fd-list class=\"message-popover__list fd-list--message-view\" [navigationIndicator]=\"true\">\n            <ng-container *ngFor=\"let group of filteredErrors\">\n                <li fd-list-group-header *ngIf=\"group.group\">\n                    <span fd-list-title>{{ group.group }}</span>\n                </li>\n                <ng-container *ngFor=\"let item of group.errors; let i = index\">\n                    <li fd-list-item [tabindex]=\"i === 0 ? 0 : -1\" [byline]=\"true\" (click)=\"_showDetails(item)\">\n                        <ng-template #itemIcon>\n                            <span\n                                fd-object-status\n                                class=\"fd-list__icon\"\n                                [status]=\"item.state\"\n                                [glyph]=\"'message-' + item.type\"\n                            ></span>\n                        </ng-template>\n                        <ng-template #listSubtitle>\n                            <span class=\"fd-list__subtitle\">\n                                <ng-template\n                                    [ngTemplateOutlet]=\"headingTemplate\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                                ></ng-template>\n                            </span>\n                        </ng-template>\n                        <span\n                            fd-list-link\n                            [navigationIndicator]=\"!!item.description.message\"\n                            *ngIf=\"item.element && !!item.description.message; else anchorListLink\"\n                        >\n                            <ng-template [ngTemplateOutlet]=\"itemIcon\"></ng-template>\n                            <span fd-list-content>\n                                <span fd-list-title>\n                                    <a tabindex=\"0\" fd-link (click)=\"_focusElement($event, item)\">\n                                        {{ item.fieldName }}\n                                    </a>\n                                </span>\n                                <ng-template [ngTemplateOutlet]=\"listSubtitle\"></ng-template>\n                            </span>\n                        </span>\n                        <ng-template #anchorListLink>\n                            <a fd-list-link [navigationIndicator]=\"!!item.description.message\">\n                                <ng-template [ngTemplateOutlet]=\"itemIcon\"></ng-template>\n                                <span fd-list-content>\n                                    <span fd-list-title>{{ item.fieldName }}</span>\n                                    <ng-template [ngTemplateOutlet]=\"listSubtitle\"></ng-template>\n                                </span>\n                            </a>\n                        </ng-template>\n                    </li>\n                </ng-container>\n            </ng-container>\n        </ul>\n    </section>\n    <section class=\"fd-message-view__details\" [@openCloseDetails]=\"currentScreen === 'details' ? 'open' : 'closed'\">\n        <div #detailsView>\n            <ng-container *ngIf=\"currentEntry\">\n                <span class=\"fd-message-view__details-title\">\n                    <span\n                        fd-object-status\n                        class=\"fd-message-view__icon\"\n                        [status]=\"currentEntry.state\"\n                        [glyph]=\"'message-' + currentEntry.type\"\n                    ></span>\n                    <ng-template\n                        [ngTemplateOutlet]=\"headingTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                    ></ng-template>\n                </span>\n                <span class=\"fd-message-view__details-description\" *ngIf=\"currentEntry.description.message\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"descriptionTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                    ></ng-template>\n                </span>\n            </ng-container>\n        </div>\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i3.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i3.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i3.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i3.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i3.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "component", type: i4.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "directive", type: i5.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }, { kind: "component", type: i6.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "pipe", type: i7.FdTranslatePipe, name: "fdTranslate" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessageViewComponent, deps: [{ token: i0.DestroyRef }, { token: i1.TabbableElementService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: MessageViewComponent, selector: "fdp-message-view", inputs: { currentScreen: "currentScreen", filteredErrors: "filteredErrors", currentEntry: "currentEntry" }, outputs: { openDetails: "openDetails", focusItem: "focusItem", closePopover: "closePopover" }, host: { properties: { "class": "this._initialClass" } }, providers: [TabbableElementService], viewQueries: [{ propertyName: "_listView", first: true, predicate: ["listView"], descendants: true, read: ElementRef }, { propertyName: "_detailsView", first: true, predicate: ["detailsView"], descendants: true, read: ElementRef }], ngImport: i0, template: "<ng-template #headingTemplate let-item>\n    <ng-template #directiveHeading>\n        <ng-template\n            [ngTemplateOutlet]=\"item.heading.message || item.description.message\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.heading.error }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #i18nHeading>\n        <ng-template\n            [ngTemplateOutlet]=\"item.heading.message\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.errors }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #stringHeading>\n        {{ item.heading.message | fdTranslate : { error: item.heading.error } : item.heading.message }}\n    </ng-template>\n    <ng-template\n        [ngTemplateOutlet]=\"\n            item.heading.type === 'directive'\n                ? directiveHeading\n                : item.heading.type === 'string'\n                ? stringHeading\n                : i18nHeading\n        \"\n    ></ng-template>\n</ng-template>\n\n<ng-template #descriptionTemplate let-item>\n    <ng-template #directiveDescription>\n        <ng-template\n            [ngTemplateOutlet]=\"item.description.message!\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.description.error }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #i18nDescription>\n        <ng-template\n            [ngTemplateOutlet]=\"item.description.message!\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.errors }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #stringDescription>\n        {{ item.description.message | fdTranslate : { error: item.description.error } : item.description.message }}\n    </ng-template>\n    <ng-template\n        [ngTemplateOutlet]=\"\n            item.heading.type === 'directive'\n                ? directiveDescription\n                : item.heading.type === 'string'\n                ? stringDescription\n                : i18nDescription\n        \"\n    ></ng-template>\n</ng-template>\n\n<div class=\"fd-message-view\">\n    <section\n        class=\"fd-message-view__list\"\n        tabindex=\"-1\"\n        [@openCloseList]=\"currentScreen === 'list' ? 'open' : 'closed'\"\n        (@openCloseList.done)=\"_onListAnimationComplete($event)\"\n        fd-scrollbar\n        [overrideTabindex]=\"false\"\n    >\n        <ul #listView fd-list class=\"message-popover__list fd-list--message-view\" [navigationIndicator]=\"true\">\n            <ng-container *ngFor=\"let group of filteredErrors\">\n                <li fd-list-group-header *ngIf=\"group.group\">\n                    <span fd-list-title>{{ group.group }}</span>\n                </li>\n                <ng-container *ngFor=\"let item of group.errors; let i = index\">\n                    <li fd-list-item [tabindex]=\"i === 0 ? 0 : -1\" [byline]=\"true\" (click)=\"_showDetails(item)\">\n                        <ng-template #itemIcon>\n                            <span\n                                fd-object-status\n                                class=\"fd-list__icon\"\n                                [status]=\"item.state\"\n                                [glyph]=\"'message-' + item.type\"\n                            ></span>\n                        </ng-template>\n                        <ng-template #listSubtitle>\n                            <span class=\"fd-list__subtitle\">\n                                <ng-template\n                                    [ngTemplateOutlet]=\"headingTemplate\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                                ></ng-template>\n                            </span>\n                        </ng-template>\n                        <span\n                            fd-list-link\n                            [navigationIndicator]=\"!!item.description.message\"\n                            *ngIf=\"item.element && !!item.description.message; else anchorListLink\"\n                        >\n                            <ng-template [ngTemplateOutlet]=\"itemIcon\"></ng-template>\n                            <span fd-list-content>\n                                <span fd-list-title>\n                                    <a tabindex=\"0\" fd-link (click)=\"_focusElement($event, item)\">\n                                        {{ item.fieldName }}\n                                    </a>\n                                </span>\n                                <ng-template [ngTemplateOutlet]=\"listSubtitle\"></ng-template>\n                            </span>\n                        </span>\n                        <ng-template #anchorListLink>\n                            <a fd-list-link [navigationIndicator]=\"!!item.description.message\">\n                                <ng-template [ngTemplateOutlet]=\"itemIcon\"></ng-template>\n                                <span fd-list-content>\n                                    <span fd-list-title>{{ item.fieldName }}</span>\n                                    <ng-template [ngTemplateOutlet]=\"listSubtitle\"></ng-template>\n                                </span>\n                            </a>\n                        </ng-template>\n                    </li>\n                </ng-container>\n            </ng-container>\n        </ul>\n    </section>\n    <section class=\"fd-message-view__details\" [@openCloseDetails]=\"currentScreen === 'details' ? 'open' : 'closed'\">\n        <div #detailsView>\n            <ng-container *ngIf=\"currentEntry\">\n                <span class=\"fd-message-view__details-title\">\n                    <span\n                        fd-object-status\n                        class=\"fd-message-view__icon\"\n                        [status]=\"currentEntry.state\"\n                        [glyph]=\"'message-' + currentEntry.type\"\n                    ></span>\n                    <ng-template\n                        [ngTemplateOutlet]=\"headingTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                    ></ng-template>\n                </span>\n                <span class=\"fd-message-view__details-description\" *ngIf=\"currentEntry.description.message\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"descriptionTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                    ></ng-template>\n                </span>\n            </ng-container>\n        </div>\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i3.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator"], outputs: ["focusEscapeList"] }, { kind: "component", type: i3.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "ariaDescribedBy", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "selectedListItemScreenReaderText", "navigatedListItemScreenReaderText", "navigatableListItemScreenReaderText"], outputs: ["keyDown"] }, { kind: "directive", type: i3.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i3.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i3.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i3.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "component", type: i4.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "directive", type: i5.ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible", "overrideTabindex"] }, { kind: "component", type: i6.LinkComponent, selector: "[fdLink], [fd-link], [fd-breadcrumb-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "pipe", type: i7.FdTranslatePipe, name: "fdTranslate" }], animations: [
             trigger('openCloseList', [
                 // ...
                 state('open', style({
@@ -173,7 +174,7 @@ class MessageViewComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessageViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-message-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [DestroyedService, TabbableElementService], animations: [
+            args: [{ selector: 'fdp-message-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [TabbableElementService], animations: [
                         trigger('openCloseList', [
                             // ...
                             state('open', style({
@@ -219,7 +220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
                             ])
                         ])
                     ], template: "<ng-template #headingTemplate let-item>\n    <ng-template #directiveHeading>\n        <ng-template\n            [ngTemplateOutlet]=\"item.heading.message || item.description.message\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.heading.error }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #i18nHeading>\n        <ng-template\n            [ngTemplateOutlet]=\"item.heading.message\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.errors }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #stringHeading>\n        {{ item.heading.message | fdTranslate : { error: item.heading.error } : item.heading.message }}\n    </ng-template>\n    <ng-template\n        [ngTemplateOutlet]=\"\n            item.heading.type === 'directive'\n                ? directiveHeading\n                : item.heading.type === 'string'\n                ? stringHeading\n                : i18nHeading\n        \"\n    ></ng-template>\n</ng-template>\n\n<ng-template #descriptionTemplate let-item>\n    <ng-template #directiveDescription>\n        <ng-template\n            [ngTemplateOutlet]=\"item.description.message!\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.description.error }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #i18nDescription>\n        <ng-template\n            [ngTemplateOutlet]=\"item.description.message!\"\n            [ngTemplateOutletContext]=\"{ $implicit: item.errors }\"\n        ></ng-template>\n    </ng-template>\n    <ng-template #stringDescription>\n        {{ item.description.message | fdTranslate : { error: item.description.error } : item.description.message }}\n    </ng-template>\n    <ng-template\n        [ngTemplateOutlet]=\"\n            item.heading.type === 'directive'\n                ? directiveDescription\n                : item.heading.type === 'string'\n                ? stringDescription\n                : i18nDescription\n        \"\n    ></ng-template>\n</ng-template>\n\n<div class=\"fd-message-view\">\n    <section\n        class=\"fd-message-view__list\"\n        tabindex=\"-1\"\n        [@openCloseList]=\"currentScreen === 'list' ? 'open' : 'closed'\"\n        (@openCloseList.done)=\"_onListAnimationComplete($event)\"\n        fd-scrollbar\n        [overrideTabindex]=\"false\"\n    >\n        <ul #listView fd-list class=\"message-popover__list fd-list--message-view\" [navigationIndicator]=\"true\">\n            <ng-container *ngFor=\"let group of filteredErrors\">\n                <li fd-list-group-header *ngIf=\"group.group\">\n                    <span fd-list-title>{{ group.group }}</span>\n                </li>\n                <ng-container *ngFor=\"let item of group.errors; let i = index\">\n                    <li fd-list-item [tabindex]=\"i === 0 ? 0 : -1\" [byline]=\"true\" (click)=\"_showDetails(item)\">\n                        <ng-template #itemIcon>\n                            <span\n                                fd-object-status\n                                class=\"fd-list__icon\"\n                                [status]=\"item.state\"\n                                [glyph]=\"'message-' + item.type\"\n                            ></span>\n                        </ng-template>\n                        <ng-template #listSubtitle>\n                            <span class=\"fd-list__subtitle\">\n                                <ng-template\n                                    [ngTemplateOutlet]=\"headingTemplate\"\n                                    [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                                ></ng-template>\n                            </span>\n                        </ng-template>\n                        <span\n                            fd-list-link\n                            [navigationIndicator]=\"!!item.description.message\"\n                            *ngIf=\"item.element && !!item.description.message; else anchorListLink\"\n                        >\n                            <ng-template [ngTemplateOutlet]=\"itemIcon\"></ng-template>\n                            <span fd-list-content>\n                                <span fd-list-title>\n                                    <a tabindex=\"0\" fd-link (click)=\"_focusElement($event, item)\">\n                                        {{ item.fieldName }}\n                                    </a>\n                                </span>\n                                <ng-template [ngTemplateOutlet]=\"listSubtitle\"></ng-template>\n                            </span>\n                        </span>\n                        <ng-template #anchorListLink>\n                            <a fd-list-link [navigationIndicator]=\"!!item.description.message\">\n                                <ng-template [ngTemplateOutlet]=\"itemIcon\"></ng-template>\n                                <span fd-list-content>\n                                    <span fd-list-title>{{ item.fieldName }}</span>\n                                    <ng-template [ngTemplateOutlet]=\"listSubtitle\"></ng-template>\n                                </span>\n                            </a>\n                        </ng-template>\n                    </li>\n                </ng-container>\n            </ng-container>\n        </ul>\n    </section>\n    <section class=\"fd-message-view__details\" [@openCloseDetails]=\"currentScreen === 'details' ? 'open' : 'closed'\">\n        <div #detailsView>\n            <ng-container *ngIf=\"currentEntry\">\n                <span class=\"fd-message-view__details-title\">\n                    <span\n                        fd-object-status\n                        class=\"fd-message-view__icon\"\n                        [status]=\"currentEntry.state\"\n                        [glyph]=\"'message-' + currentEntry.type\"\n                    ></span>\n                    <ng-template\n                        [ngTemplateOutlet]=\"headingTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                    ></ng-template>\n                </span>\n                <span class=\"fd-message-view__details-description\" *ngIf=\"currentEntry.description.message\">\n                    <ng-template\n                        [ngTemplateOutlet]=\"descriptionTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                    ></ng-template>\n                </span>\n            </ng-container>\n        </div>\n    </section>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.DestroyedService }, { type: i1.TabbableElementService }, { type: Document, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.DestroyRef }, { type: i1.TabbableElementService }, { type: Document, decorators: [{
                     type: Inject,
                     args: [DOCUMENT]
                 }] }]; }, propDecorators: { currentScreen: [{
@@ -247,9 +248,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
 
 class MessagePopoverComponent {
     /** @hidden */
-    constructor(_cdr, _destroy$) {
+    constructor(_cdr, _destroyRef) {
         this._cdr = _cdr;
-        this._destroy$ = _destroy$;
+        this._destroyRef = _destroyRef;
         /** Event emits when user clicks on error entry and item's element needs to be focused. */
         this.focusItem = new EventEmitter();
         /** Current message popover screen. Can be `list` or `details`. */
@@ -268,7 +269,7 @@ class MessagePopoverComponent {
     /** @hidden */
     ngOnInit() {
         this.wrapper?.setMessagePopover(this);
-        this.wrapper?.errors.pipe(takeUntil(this._destroy$)).subscribe((errors) => {
+        this.wrapper?.errors.pipe(takeUntilDestroyed(this._destroyRef)).subscribe((errors) => {
             this._groupedErrors = errors;
             this._errorTypes = [];
             const countedErrors = countBy(flatten(Object.values(this._groupedErrors.map((group) => group.errors))), 'type');
@@ -319,19 +320,19 @@ class MessagePopoverComponent {
             });
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessagePopoverComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.DestroyedService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: MessagePopoverComponent, selector: "fdp-message-popover", inputs: { wrapper: "wrapper" }, outputs: { focusItem: "focusItem" }, providers: [DestroyedService], viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "<fd-popover\n    #popover\n    placement=\"top-start\"\n    *ngIf=\"_errorTypes.length > 0\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"true\"\n    [disableScrollbar]=\"true\"\n>\n    <fd-popover-control>\n        <button\n            fd-button\n            type=\"button\"\n            class=\"fd-message-popover__trigger fd-message-popover__trigger\"\n            [ngClass]=\"'fd-message-popover__trigger--' + _priorityState\"\n            [glyph]=\"'message-' + _priorityFormState\"\n            [label]=\"_priorityStateItemsCount.toString()\"\n        ></button>\n    </fd-popover-control>\n    <div>\n        <div fd-popover-body-header>\n            <div fd-bar barDesign=\"header\" class=\"fd-bar--growing\">\n                <div fd-bar-left>\n                    <fd-segmented-button\n                        [(ngModel)]=\"_currentErrorType\"\n                        *ngIf=\"currentScreen === 'list'\"\n                        (ngModelChange)=\"_filterErrors()\"\n                    >\n                        <button\n                            fd-button\n                            [label]=\"'platformMessagePopover.allErrors' | fdTranslate\"\n                            value=\"all\"\n                        ></button>\n                        <button fd-button *ngFor=\"let type of _errorTypes\" [value]=\"type.group\">\n                            <span fd-object-status [status]=\"type.state\" [glyph]=\"'message-' + type.group\"></span>\n                            <span class=\"fd-button__text\">{{ type.count }}</span>\n                        </button>\n                    </fd-segmented-button>\n                    <button\n                        *ngIf=\"currentScreen === 'details'\"\n                        fd-button\n                        fdInitialFocus\n                        fdType=\"transparent\"\n                        glyph=\"navigation-left-arrow\"\n                        title=\"Go back\"\n                        (click)=\"_showList()\"\n                    ></button>\n                </div>\n                <div fd-bar-right>\n                    <button fd-button fdType=\"transparent\" (click)=\"popover.close()\" glyph=\"decline\"></button>\n                </div>\n            </div>\n        </div>\n        <fdp-message-view\n            [currentScreen]=\"currentScreen\"\n            [filteredErrors]=\"_filteredErrors\"\n            [currentEntry]=\"currentEntry\"\n            (openDetails)=\"_showDetails($event)\"\n            (closePopover)=\"_closePopover($event)\"\n            (focusItem)=\"focusItem.emit($event)\"\n        ></fdp-message-view>\n    </div>\n</fd-popover>\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-message-view{-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;overflow:hidden;padding:0;position:relative}.fd-message-view:after,.fd-message-view:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list{-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;max-height:50vh;max-width:26rem;padding:0}.fd-message-view__list:after,.fd-message-view__list:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list--hidden{opacity:0}.fd-message-view__details{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:none;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;inset:0;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 1rem 1rem 3.5rem;position:absolute}.fd-message-view__details:after,.fd-message-view__details:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details[dir=rtl],[dir=rtl] .fd-message-view__details{padding:1rem 3.5rem 1rem 1rem}.fd-message-view__details-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);display:block;font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-title:after,.fd-message-view__details-title:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details-title .fd-message-view__icon{font-size:1rem;margin:0 .5rem 0 -2rem}.fd-message-view__details-title .fd-message-view__icon[dir=rtl],[dir=rtl] .fd-message-view__details-title .fd-message-view__icon{margin:0 -2rem 0 .5rem}.fd-message-view__details-description{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1.4;margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-description:after,.fd-message-view__details-description:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details--visible{display:block}.fd-message-popover__trigger.is-focus,.fd-message-popover__trigger:focus{outline-color:var(--sapContent_ContrastFocusColor);z-index:5}.fd-message-popover__trigger--critical{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor)}.fd-message-popover__trigger--critical.is-hover,.fd-message-popover__trigger--critical:hover{--fdButtonColor:var(--sapButton_Critical_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Hover_Background);--fdButtonBorderColor:var(--sapButton_Critical_Hover_BorderColor)}.fd-message-popover__trigger--critical.is-active,.fd-message-popover__trigger--critical:active{--fdButtonColor:var(--sapButton_Critical_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Active_Background);--fdButtonBorderColor:var(--sapButton_Critical_Active_BorderColor)}.fd-message-popover__trigger--negative{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor)}.fd-message-popover__trigger--negative.is-hover,.fd-message-popover__trigger--negative:hover{--fdButtonColor:var(--sapButton_Negative_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Hover_Background);--fdButtonBorderColor:var(--sapButton_Negative_Hover_BorderColor)}.fd-message-popover__trigger--negative.is-active,.fd-message-popover__trigger--negative:active{--fdButtonColor:var(--sapButton_Negative_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Active_Background);--fdButtonBorderColor:var(--sapButton_Negative_Active_BorderColor)}.fd-message-popover__trigger--success{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor)}.fd-message-popover__trigger--success.is-hover,.fd-message-popover__trigger--success:hover{--fdButtonColor:var(--sapButton_Success_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Hover_Background);--fdButtonBorderColor:var(--sapButton_Success_Hover_BorderColor)}.fd-message-popover__trigger--success.is-active,.fd-message-popover__trigger--success:active{--fdButtonColor:var(--sapButton_Success_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Active_Background);--fdButtonBorderColor:var(--sapButton_Success_Active_BorderColor)}.fd-message-popover__trigger--information{--fdButtonColor:var(--sapButton_Neutral_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Background);--fdButtonBorderColor:var(--sapButton_Neutral_BorderColor)}.fd-message-popover__trigger--information.is-hover,.fd-message-popover__trigger--information:hover{--fdButtonColor:var(--sapButton_Neutral_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Hover_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Hover_BorderColor)}.fd-message-popover__trigger--information.is-active,.fd-message-popover__trigger--information:active{--fdButtonColor:var(--sapButton_Neutral_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Active_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Active_BorderColor)}.fd-message-popover__view-container{border-bottom-left-radius:var(--fdPopover_Border_Radius);border-bottom-right-radius:var(--fdPopover_Border_Radius);overflow:hidden;display:block;max-height:40vh}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child:before{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child:before{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-view__list{min-width:20rem;min-height:10rem;max-height:40vh}.fd-message-view__list .fd-link{font-size:inherit}.fd-message-view__list .fd-list__link:active,.fd-message-view__list .fd-list__link.is-active{--sapLinkColor: var(--sapList_Active_TextColor);--sapLink_Active_Color: var(--sapList_Active_TextColor)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "directive", type: i3$1.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i3$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i4$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i4$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i4$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i5$1.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { kind: "directive", type: i6$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i7$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "directive", type: i1.InitialFocusDirective, selector: "[fdkInitialFocus], [fdInitialFocus], [fd-initial-focus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1.DeprecatedInitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus"] }, { kind: "component", type: MessageViewComponent, selector: "fdp-message-view", inputs: ["currentScreen", "filteredErrors", "currentEntry"], outputs: ["openDetails", "focusItem", "closePopover"] }, { kind: "pipe", type: i7.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessagePopoverComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: MessagePopoverComponent, selector: "fdp-message-popover", inputs: { wrapper: "wrapper" }, outputs: { focusItem: "focusItem" }, viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "<fd-popover\n    #popover\n    placement=\"top-start\"\n    *ngIf=\"_errorTypes.length > 0\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"true\"\n    [disableScrollbar]=\"true\"\n>\n    <fd-popover-control>\n        <button\n            fd-button\n            type=\"button\"\n            class=\"fd-message-popover__trigger fd-message-popover__trigger\"\n            [ngClass]=\"'fd-message-popover__trigger--' + _priorityState\"\n            [glyph]=\"'message-' + _priorityFormState\"\n            [label]=\"_priorityStateItemsCount.toString()\"\n        ></button>\n    </fd-popover-control>\n    <div>\n        <div fd-popover-body-header>\n            <div fd-bar barDesign=\"header\" class=\"fd-bar--growing\">\n                <div fd-bar-left>\n                    <fd-segmented-button\n                        [(ngModel)]=\"_currentErrorType\"\n                        *ngIf=\"currentScreen === 'list'\"\n                        (ngModelChange)=\"_filterErrors()\"\n                    >\n                        <button\n                            fd-button\n                            [label]=\"'platformMessagePopover.allErrors' | fdTranslate\"\n                            value=\"all\"\n                        ></button>\n                        <button fd-button *ngFor=\"let type of _errorTypes\" [value]=\"type.group\">\n                            <span fd-object-status [status]=\"type.state\" [glyph]=\"'message-' + type.group\"></span>\n                            <span class=\"fd-button__text\">{{ type.count }}</span>\n                        </button>\n                    </fd-segmented-button>\n                    <button\n                        *ngIf=\"currentScreen === 'details'\"\n                        fd-button\n                        fdInitialFocus\n                        fdType=\"transparent\"\n                        glyph=\"navigation-left-arrow\"\n                        title=\"Go back\"\n                        (click)=\"_showList()\"\n                    ></button>\n                </div>\n                <div fd-bar-right>\n                    <button fd-button fdType=\"transparent\" (click)=\"popover.close()\" glyph=\"decline\"></button>\n                </div>\n            </div>\n        </div>\n        <fdp-message-view\n            [currentScreen]=\"currentScreen\"\n            [filteredErrors]=\"_filteredErrors\"\n            [currentEntry]=\"currentEntry\"\n            (openDetails)=\"_showDetails($event)\"\n            (closePopover)=\"_closePopover($event)\"\n            (focusItem)=\"focusItem.emit($event)\"\n        ></fdp-message-view>\n    </div>\n</fd-popover>\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-message-view{-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;overflow:hidden;padding:0;position:relative}.fd-message-view:after,.fd-message-view:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list{-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;max-height:50vh;max-width:26rem;padding:0}.fd-message-view__list:after,.fd-message-view__list:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list--hidden{opacity:0}.fd-message-view__details{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:none;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;inset:0;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 1rem 1rem 3.5rem;position:absolute}.fd-message-view__details:after,.fd-message-view__details:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details[dir=rtl],[dir=rtl] .fd-message-view__details{padding:1rem 3.5rem 1rem 1rem}.fd-message-view__details-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);display:block;font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-title:after,.fd-message-view__details-title:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details-title .fd-message-view__icon{font-size:1rem;margin:0 .5rem 0 -2rem}.fd-message-view__details-title .fd-message-view__icon[dir=rtl],[dir=rtl] .fd-message-view__details-title .fd-message-view__icon{margin:0 -2rem 0 .5rem}.fd-message-view__details-description{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1.4;margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-description:after,.fd-message-view__details-description:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details--visible{display:block}.fd-message-popover__trigger.is-focus,.fd-message-popover__trigger:focus{outline-color:var(--sapContent_ContrastFocusColor);z-index:5}.fd-message-popover__trigger--critical{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor)}.fd-message-popover__trigger--critical.is-hover,.fd-message-popover__trigger--critical:hover{--fdButtonColor:var(--sapButton_Critical_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Hover_Background);--fdButtonBorderColor:var(--sapButton_Critical_Hover_BorderColor)}.fd-message-popover__trigger--critical.is-active,.fd-message-popover__trigger--critical:active{--fdButtonColor:var(--sapButton_Critical_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Active_Background);--fdButtonBorderColor:var(--sapButton_Critical_Active_BorderColor)}.fd-message-popover__trigger--negative{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor)}.fd-message-popover__trigger--negative.is-hover,.fd-message-popover__trigger--negative:hover{--fdButtonColor:var(--sapButton_Negative_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Hover_Background);--fdButtonBorderColor:var(--sapButton_Negative_Hover_BorderColor)}.fd-message-popover__trigger--negative.is-active,.fd-message-popover__trigger--negative:active{--fdButtonColor:var(--sapButton_Negative_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Active_Background);--fdButtonBorderColor:var(--sapButton_Negative_Active_BorderColor)}.fd-message-popover__trigger--success{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor)}.fd-message-popover__trigger--success.is-hover,.fd-message-popover__trigger--success:hover{--fdButtonColor:var(--sapButton_Success_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Hover_Background);--fdButtonBorderColor:var(--sapButton_Success_Hover_BorderColor)}.fd-message-popover__trigger--success.is-active,.fd-message-popover__trigger--success:active{--fdButtonColor:var(--sapButton_Success_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Active_Background);--fdButtonBorderColor:var(--sapButton_Success_Active_BorderColor)}.fd-message-popover__trigger--information{--fdButtonColor:var(--sapButton_Neutral_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Background);--fdButtonBorderColor:var(--sapButton_Neutral_BorderColor)}.fd-message-popover__trigger--information.is-hover,.fd-message-popover__trigger--information:hover{--fdButtonColor:var(--sapButton_Neutral_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Hover_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Hover_BorderColor)}.fd-message-popover__trigger--information.is-active,.fd-message-popover__trigger--information:active{--fdButtonColor:var(--sapButton_Neutral_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Active_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Active_BorderColor)}.fd-message-popover__view-container{border-bottom-left-radius:var(--fdPopover_Border_Radius);border-bottom-right-radius:var(--fdPopover_Border_Radius);overflow:hidden;display:block;max-height:40vh}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child:before{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child:before{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-view__list{min-width:20rem;min-height:10rem;max-height:40vh}.fd-message-view__list .fd-link{font-size:inherit}.fd-message-view__list .fd-list__link:active,.fd-message-view__list .fd-list__link.is-active{--sapLinkColor: var(--sapList_Active_TextColor);--sapLink_Active_Color: var(--sapList_Active_TextColor)}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$1.PopoverControlComponent, selector: "fd-popover-control" }, { kind: "directive", type: i2$1.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i2$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: i3$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i3$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i3$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: i4$1.SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle"] }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i6$1.ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "component", type: i4.ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large"] }, { kind: "directive", type: i1.InitialFocusDirective, selector: "[fdkInitialFocus], [fdInitialFocus], [fd-initial-focus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "directive", type: i1.DeprecatedInitialFocusDirective, selector: "[fdInitialFocus], [fd-initial-focus]", inputs: ["fd-initial-focus"] }, { kind: "component", type: MessageViewComponent, selector: "fdp-message-view", inputs: ["currentScreen", "filteredErrors", "currentEntry"], outputs: ["openDetails", "focusItem", "closePopover"] }, { kind: "pipe", type: i7.FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessagePopoverComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-message-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [DestroyedService], template: "<fd-popover\n    #popover\n    placement=\"top-start\"\n    *ngIf=\"_errorTypes.length > 0\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"true\"\n    [disableScrollbar]=\"true\"\n>\n    <fd-popover-control>\n        <button\n            fd-button\n            type=\"button\"\n            class=\"fd-message-popover__trigger fd-message-popover__trigger\"\n            [ngClass]=\"'fd-message-popover__trigger--' + _priorityState\"\n            [glyph]=\"'message-' + _priorityFormState\"\n            [label]=\"_priorityStateItemsCount.toString()\"\n        ></button>\n    </fd-popover-control>\n    <div>\n        <div fd-popover-body-header>\n            <div fd-bar barDesign=\"header\" class=\"fd-bar--growing\">\n                <div fd-bar-left>\n                    <fd-segmented-button\n                        [(ngModel)]=\"_currentErrorType\"\n                        *ngIf=\"currentScreen === 'list'\"\n                        (ngModelChange)=\"_filterErrors()\"\n                    >\n                        <button\n                            fd-button\n                            [label]=\"'platformMessagePopover.allErrors' | fdTranslate\"\n                            value=\"all\"\n                        ></button>\n                        <button fd-button *ngFor=\"let type of _errorTypes\" [value]=\"type.group\">\n                            <span fd-object-status [status]=\"type.state\" [glyph]=\"'message-' + type.group\"></span>\n                            <span class=\"fd-button__text\">{{ type.count }}</span>\n                        </button>\n                    </fd-segmented-button>\n                    <button\n                        *ngIf=\"currentScreen === 'details'\"\n                        fd-button\n                        fdInitialFocus\n                        fdType=\"transparent\"\n                        glyph=\"navigation-left-arrow\"\n                        title=\"Go back\"\n                        (click)=\"_showList()\"\n                    ></button>\n                </div>\n                <div fd-bar-right>\n                    <button fd-button fdType=\"transparent\" (click)=\"popover.close()\" glyph=\"decline\"></button>\n                </div>\n            </div>\n        </div>\n        <fdp-message-view\n            [currentScreen]=\"currentScreen\"\n            [filteredErrors]=\"_filteredErrors\"\n            [currentEntry]=\"currentEntry\"\n            (openDetails)=\"_showDetails($event)\"\n            (closePopover)=\"_closePopover($event)\"\n            (focusItem)=\"focusItem.emit($event)\"\n        ></fdp-message-view>\n    </div>\n</fd-popover>\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-message-view{-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;overflow:hidden;padding:0;position:relative}.fd-message-view:after,.fd-message-view:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list{-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;max-height:50vh;max-width:26rem;padding:0}.fd-message-view__list:after,.fd-message-view__list:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list--hidden{opacity:0}.fd-message-view__details{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:none;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;inset:0;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 1rem 1rem 3.5rem;position:absolute}.fd-message-view__details:after,.fd-message-view__details:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details[dir=rtl],[dir=rtl] .fd-message-view__details{padding:1rem 3.5rem 1rem 1rem}.fd-message-view__details-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);display:block;font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-title:after,.fd-message-view__details-title:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details-title .fd-message-view__icon{font-size:1rem;margin:0 .5rem 0 -2rem}.fd-message-view__details-title .fd-message-view__icon[dir=rtl],[dir=rtl] .fd-message-view__details-title .fd-message-view__icon{margin:0 -2rem 0 .5rem}.fd-message-view__details-description{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1.4;margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-description:after,.fd-message-view__details-description:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details--visible{display:block}.fd-message-popover__trigger.is-focus,.fd-message-popover__trigger:focus{outline-color:var(--sapContent_ContrastFocusColor);z-index:5}.fd-message-popover__trigger--critical{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor)}.fd-message-popover__trigger--critical.is-hover,.fd-message-popover__trigger--critical:hover{--fdButtonColor:var(--sapButton_Critical_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Hover_Background);--fdButtonBorderColor:var(--sapButton_Critical_Hover_BorderColor)}.fd-message-popover__trigger--critical.is-active,.fd-message-popover__trigger--critical:active{--fdButtonColor:var(--sapButton_Critical_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Active_Background);--fdButtonBorderColor:var(--sapButton_Critical_Active_BorderColor)}.fd-message-popover__trigger--negative{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor)}.fd-message-popover__trigger--negative.is-hover,.fd-message-popover__trigger--negative:hover{--fdButtonColor:var(--sapButton_Negative_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Hover_Background);--fdButtonBorderColor:var(--sapButton_Negative_Hover_BorderColor)}.fd-message-popover__trigger--negative.is-active,.fd-message-popover__trigger--negative:active{--fdButtonColor:var(--sapButton_Negative_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Active_Background);--fdButtonBorderColor:var(--sapButton_Negative_Active_BorderColor)}.fd-message-popover__trigger--success{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor)}.fd-message-popover__trigger--success.is-hover,.fd-message-popover__trigger--success:hover{--fdButtonColor:var(--sapButton_Success_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Hover_Background);--fdButtonBorderColor:var(--sapButton_Success_Hover_BorderColor)}.fd-message-popover__trigger--success.is-active,.fd-message-popover__trigger--success:active{--fdButtonColor:var(--sapButton_Success_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Active_Background);--fdButtonBorderColor:var(--sapButton_Success_Active_BorderColor)}.fd-message-popover__trigger--information{--fdButtonColor:var(--sapButton_Neutral_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Background);--fdButtonBorderColor:var(--sapButton_Neutral_BorderColor)}.fd-message-popover__trigger--information.is-hover,.fd-message-popover__trigger--information:hover{--fdButtonColor:var(--sapButton_Neutral_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Hover_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Hover_BorderColor)}.fd-message-popover__trigger--information.is-active,.fd-message-popover__trigger--information:active{--fdButtonColor:var(--sapButton_Neutral_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Active_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Active_BorderColor)}.fd-message-popover__view-container{border-bottom-left-radius:var(--fdPopover_Border_Radius);border-bottom-right-radius:var(--fdPopover_Border_Radius);overflow:hidden;display:block;max-height:40vh}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child:before{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child:before{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-view__list{min-width:20rem;min-height:10rem;max-height:40vh}.fd-message-view__list .fd-link{font-size:inherit}.fd-message-view__list .fd-list__link:active,.fd-message-view__list .fd-list__link.is-active{--sapLinkColor: var(--sapList_Active_TextColor);--sapLink_Active_Color: var(--sapList_Active_TextColor)}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.DestroyedService }]; }, propDecorators: { wrapper: [{
+            args: [{ selector: 'fdp-message-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<fd-popover\n    #popover\n    placement=\"top-start\"\n    *ngIf=\"_errorTypes.length > 0\"\n    [focusTrapped]=\"true\"\n    [focusAutoCapture]=\"true\"\n    [disableScrollbar]=\"true\"\n>\n    <fd-popover-control>\n        <button\n            fd-button\n            type=\"button\"\n            class=\"fd-message-popover__trigger fd-message-popover__trigger\"\n            [ngClass]=\"'fd-message-popover__trigger--' + _priorityState\"\n            [glyph]=\"'message-' + _priorityFormState\"\n            [label]=\"_priorityStateItemsCount.toString()\"\n        ></button>\n    </fd-popover-control>\n    <div>\n        <div fd-popover-body-header>\n            <div fd-bar barDesign=\"header\" class=\"fd-bar--growing\">\n                <div fd-bar-left>\n                    <fd-segmented-button\n                        [(ngModel)]=\"_currentErrorType\"\n                        *ngIf=\"currentScreen === 'list'\"\n                        (ngModelChange)=\"_filterErrors()\"\n                    >\n                        <button\n                            fd-button\n                            [label]=\"'platformMessagePopover.allErrors' | fdTranslate\"\n                            value=\"all\"\n                        ></button>\n                        <button fd-button *ngFor=\"let type of _errorTypes\" [value]=\"type.group\">\n                            <span fd-object-status [status]=\"type.state\" [glyph]=\"'message-' + type.group\"></span>\n                            <span class=\"fd-button__text\">{{ type.count }}</span>\n                        </button>\n                    </fd-segmented-button>\n                    <button\n                        *ngIf=\"currentScreen === 'details'\"\n                        fd-button\n                        fdInitialFocus\n                        fdType=\"transparent\"\n                        glyph=\"navigation-left-arrow\"\n                        title=\"Go back\"\n                        (click)=\"_showList()\"\n                    ></button>\n                </div>\n                <div fd-bar-right>\n                    <button fd-button fdType=\"transparent\" (click)=\"popover.close()\" glyph=\"decline\"></button>\n                </div>\n            </div>\n        </div>\n        <fdp-message-view\n            [currentScreen]=\"currentScreen\"\n            [filteredErrors]=\"_filteredErrors\"\n            [currentEntry]=\"currentEntry\"\n            (openDetails)=\"_showDetails($event)\"\n            (closePopover)=\"_closePopover($event)\"\n            (focusItem)=\"focusItem.emit($event)\"\n        ></fdp-message-view>\n    </div>\n</fd-popover>\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-message-view{-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;overflow:hidden;padding:0;position:relative}.fd-message-view:after,.fd-message-view:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list{-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;max-height:50vh;max-width:26rem;padding:0}.fd-message-view__list:after,.fd-message-view__list:before{box-sizing:inherit;font-size:inherit}.fd-message-view__list--hidden{opacity:0}.fd-message-view__details{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:none;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;inset:0;line-height:var(--sapContent_LineHeight);margin:0;padding:1rem 1rem 1rem 3.5rem;position:absolute}.fd-message-view__details:after,.fd-message-view__details:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details[dir=rtl],[dir=rtl] .fd-message-view__details{padding:1rem 3.5rem 1rem 1rem}.fd-message-view__details-title{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);color:var(--sapGroup_TitleTextColor);display:block;font-family:var(--sapFontFamily);font-family:var(--sapFontHeaderFamily);font-size:var(--sapFontSize);font-size:var(--sapFontHeader5Size);font-weight:400;font-weight:var(--sapFontHeaderWeight);forced-color-adjust:none;line-height:var(--sapContent_LineHeight);margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-title:after,.fd-message-view__details-title:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details-title .fd-message-view__icon{font-size:1rem;margin:0 .5rem 0 -2rem}.fd-message-view__details-title .fd-message-view__icon[dir=rtl],[dir=rtl] .fd-message-view__details-title .fd-message-view__icon{margin:0 -2rem 0 .5rem}.fd-message-view__details-description{-webkit-box-sizing:border-box;border:0;box-sizing:border-box;color:var(--sapTextColor);display:block;font-family:var(--sapFontFamily);font-size:var(--sapFontSize);font-weight:400;forced-color-adjust:none;line-height:var(--sapContent_LineHeight);line-height:1.4;margin:0 0 1rem;padding:0;white-space:normal}.fd-message-view__details-description:after,.fd-message-view__details-description:before{box-sizing:inherit;font-size:inherit}.fd-message-view__details--visible{display:block}.fd-message-popover__trigger.is-focus,.fd-message-popover__trigger:focus{outline-color:var(--sapContent_ContrastFocusColor);z-index:5}.fd-message-popover__trigger--critical{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor)}.fd-message-popover__trigger--critical.is-hover,.fd-message-popover__trigger--critical:hover{--fdButtonColor:var(--sapButton_Critical_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Hover_Background);--fdButtonBorderColor:var(--sapButton_Critical_Hover_BorderColor)}.fd-message-popover__trigger--critical.is-active,.fd-message-popover__trigger--critical:active{--fdButtonColor:var(--sapButton_Critical_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Active_Background);--fdButtonBorderColor:var(--sapButton_Critical_Active_BorderColor)}.fd-message-popover__trigger--negative{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor)}.fd-message-popover__trigger--negative.is-hover,.fd-message-popover__trigger--negative:hover{--fdButtonColor:var(--sapButton_Negative_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Hover_Background);--fdButtonBorderColor:var(--sapButton_Negative_Hover_BorderColor)}.fd-message-popover__trigger--negative.is-active,.fd-message-popover__trigger--negative:active{--fdButtonColor:var(--sapButton_Negative_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Active_Background);--fdButtonBorderColor:var(--sapButton_Negative_Active_BorderColor)}.fd-message-popover__trigger--success{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor)}.fd-message-popover__trigger--success.is-hover,.fd-message-popover__trigger--success:hover{--fdButtonColor:var(--sapButton_Success_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Hover_Background);--fdButtonBorderColor:var(--sapButton_Success_Hover_BorderColor)}.fd-message-popover__trigger--success.is-active,.fd-message-popover__trigger--success:active{--fdButtonColor:var(--sapButton_Success_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Active_Background);--fdButtonBorderColor:var(--sapButton_Success_Active_BorderColor)}.fd-message-popover__trigger--information{--fdButtonColor:var(--sapButton_Neutral_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Background);--fdButtonBorderColor:var(--sapButton_Neutral_BorderColor)}.fd-message-popover__trigger--information.is-hover,.fd-message-popover__trigger--information:hover{--fdButtonColor:var(--sapButton_Neutral_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Hover_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Hover_BorderColor)}.fd-message-popover__trigger--information.is-active,.fd-message-popover__trigger--information:active{--fdButtonColor:var(--sapButton_Neutral_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Neutral_Active_Background);--fdButtonBorderColor:var(--sapButton_Neutral_Active_BorderColor)}.fd-message-popover__view-container{border-bottom-left-radius:var(--fdPopover_Border_Radius);border-bottom-right-radius:var(--fdPopover_Border_Radius);overflow:hidden;display:block;max-height:40vh}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:first-child:before{border-top-left-radius:0;border-top-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-popover__view-container .fd-message-view .fd-list__item:last-child:before{border-bottom-left-radius:0;border-bottom-right-radius:0}.fd-message-view__list{min-width:20rem;min-height:10rem;max-height:40vh}.fd-message-view__list .fd-link{font-size:inherit}.fd-message-view__list .fd-list__link:active,.fd-message-view__list .fd-list__link.is-active{--sapLinkColor: var(--sapList_Active_TextColor);--sapLink_Active_Color: var(--sapList_Active_TextColor)}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }]; }, propDecorators: { _popover: [{
+                type: ViewChild,
+                args: ['popover']
+            }], wrapper: [{
                 type: Input
             }], focusItem: [{
                 type: Output
-            }], _popover: [{
-                type: ViewChild,
-                args: ['popover']
             }] } });
 
 class MessagePopoverFormItemDirective {
@@ -340,7 +341,7 @@ class MessagePopoverFormItemDirective {
         this.elementRef = elementRef;
         this.control = control;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessagePopoverFormItemDirective, deps: [{ token: i0.ElementRef }, { token: i6$1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessagePopoverFormItemDirective, deps: [{ token: i0.ElementRef }, { token: i5$1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.0", type: MessagePopoverFormItemDirective, selector: "[fdpMessagePopoverFormItem]", inputs: { label: ["fdpMessagePopoverFormItem", "label"] }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessagePopoverFormItemDirective, decorators: [{
@@ -348,7 +349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             args: [{
                     selector: '[fdpMessagePopoverFormItem]'
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i6$1.NgControl, decorators: [{
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i5$1.NgControl, decorators: [{
                     type: Optional
                 }] }]; }, propDecorators: { label: [{
                 type: Input,
@@ -378,25 +379,26 @@ class MessagePopoverFormWrapperComponent {
         return this._formFields;
     }
     /** @hidden */
-    constructor(_destroy$, _config) {
-        this._destroy$ = _destroy$;
+    constructor(_destroyRef, _config) {
+        this._destroyRef = _destroyRef;
         this._config = _config;
         /** Message Popover instance. */
         this.messagePopover$ = new Subject();
         /** @hidden */
-        this._formFields = [];
-        /** @hidden */
         this._errors$ = new BehaviorSubject([]);
+        /**
+         * Error models Observable. Emitted when form submitted and contains invalid fields.
+         */
+        // eslint-disable-next-line @typescript-eslint/member-ordering
+        this.errors = this._errors$.asObservable();
+        /** @hidden */
+        this._formFields = [];
         /** @hidden */
         this._ngForms = [];
         /** @hidden */
         this._formItemErrorsSubscription = new Subscription();
         /** @hidden */
         this._formSubmitted = false;
-        /**
-         * Error models Observable. Emitted when form submitted and contains invalid fields.
-         */
-        this.errors = this._errors$.asObservable();
     }
     /** @hidden */
     ngAfterViewInit() {
@@ -406,7 +408,7 @@ class MessagePopoverFormWrapperComponent {
         }
         this._ngForms = this._projectedForm?.toArray();
         this._startListeningForErrors();
-        this._projectedForm?.changes.pipe(takeUntil(this._destroy$)).subscribe(() => {
+        this._projectedForm?.changes.pipe(takeUntilDestroyed(this._destroyRef)).subscribe(() => {
             this._ngForms = this._projectedForm.toArray();
             this._startListeningForErrors();
         });
@@ -420,7 +422,7 @@ class MessagePopoverFormWrapperComponent {
     }
     /**
      * Programmatically add new form to array of forms.
-     * @param form
+     * @param forms
      */
     addForms(forms) {
         const formsArray = Array.isArray(forms) ? forms : [forms];
@@ -435,6 +437,10 @@ class MessagePopoverFormWrapperComponent {
         this._formFields.push(...formFields);
         this._listenToFormFieldErrors(this._formFields);
     }
+    /** @hidden */
+    ngOnDestroy() {
+        this._formItemErrorsSubscription.unsubscribe();
+    }
     /**
      * @hidden
      * Listens to the form submission and collects form control errors.
@@ -447,7 +453,7 @@ class MessagePopoverFormWrapperComponent {
         this._errors$.next([]);
         const formSubmitEvents = this._ngForms.map((form) => form.ngSubmit.pipe(switchMap(() => form.statusChanges.pipe(startWith(form.status), filter((status) => status.toLowerCase() !== 'pending')))));
         this._formErrorsSubscription = zip(...formSubmitEvents)
-            .pipe(takeUntil(this._destroy$))
+            .pipe(takeUntilDestroyed(this._destroyRef))
             .subscribe(() => {
             this._formSubmitted = true;
             const errors = this._directiveItems.length > 0 ? this._collectPlainFormData() : this._collectAdvancedFormData();
@@ -475,10 +481,6 @@ class MessagePopoverFormWrapperComponent {
         });
     }
     /** @hidden */
-    ngOnDestroy() {
-        this._formItemErrorsSubscription.unsubscribe();
-    }
-    /** @hidden */
     _collectPlainFormData() {
         const errors = [
             {
@@ -599,6 +601,8 @@ class MessagePopoverFormWrapperComponent {
      * @param field Form Field Control.
      * @param errorDirective Optional Error directive
      * @param section Section where text should be rendered.
+     * @param errorKey
+     * @param error
      */
     _getErrorText(field, errorDirective, section = 'heading', errorKey, error) {
         const errorTextObj = {
@@ -649,20 +653,16 @@ class MessagePopoverFormWrapperComponent {
     _isAdvancedError(error) {
         return !!error && typeof error !== 'string';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessagePopoverFormWrapperComponent, deps: [{ token: i1.DestroyedService }, { token: FDP_MESSAGE_POPOVER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: MessagePopoverFormWrapperComponent, selector: "fdp-message-popover-form-wrapper", inputs: { forms: "forms", formFields: "formFields" }, providers: [DestroyedService], queries: [{ propertyName: "_projectedForm", predicate: ControlContainer, descendants: true }, { propertyName: "_projectedFormItems", predicate: NgModel, descendants: true }, { propertyName: "_projectedFormFieldControls", predicate: PlatformFormFieldControl, descendants: true }, { propertyName: "_directiveItems", predicate: MessagePopoverFormItemDirective, descendants: true }], exportAs: ["messagePopoverWrapper"], ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessagePopoverFormWrapperComponent, deps: [{ token: i0.DestroyRef }, { token: FDP_MESSAGE_POPOVER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.0", type: MessagePopoverFormWrapperComponent, selector: "fdp-message-popover-form-wrapper", inputs: { forms: "forms", formFields: "formFields" }, queries: [{ propertyName: "_projectedForm", predicate: ControlContainer, descendants: true }, { propertyName: "_projectedFormItems", predicate: NgModel, descendants: true }, { propertyName: "_projectedFormFieldControls", predicate: PlatformFormFieldControl, descendants: true }, { propertyName: "_directiveItems", predicate: MessagePopoverFormItemDirective, descendants: true }], exportAs: ["messagePopoverWrapper"], ngImport: i0, template: "<ng-content></ng-content>\n", changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImport: i0, type: MessagePopoverFormWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'fdp-message-popover-form-wrapper', exportAs: 'messagePopoverWrapper', providers: [DestroyedService], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
-        }], ctorParameters: function () { return [{ type: i1.DestroyedService }, { type: undefined, decorators: [{
+            args: [{ selector: 'fdp-message-popover-form-wrapper', exportAs: 'messagePopoverWrapper', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content></ng-content>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.DestroyRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [FDP_MESSAGE_POPOVER_CONFIG]
-                }] }]; }, propDecorators: { forms: [{
-                type: Input
-            }], formFields: [{
-                type: Input
-            }], _projectedForm: [{
+                }] }]; }, propDecorators: { _projectedForm: [{
                 type: ContentChildren,
                 args: [ControlContainer, { descendants: true }]
             }], _projectedFormItems: [{
@@ -674,6 +674,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.0", ngImpor
             }], _directiveItems: [{
                 type: ContentChildren,
                 args: [MessagePopoverFormItemDirective, { descendants: true }]
+            }], forms: [{
+                type: Input
+            }], formFields: [{
+                type: Input
             }] } });
 
 class PlatformMessagePopoverModule {