@fundamental-ngx/platform 0.48.0-rc.2 → 0.48.0-rc.21

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

@@ -1,29 +1,29 @@
 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 { flatten, countBy, mergeWith } from 'lodash-es';
-import { DOCUMENT, NgTemplateOutlet, NgClass } from '@angular/common';
+import { InjectionToken, Directive, Optional, Input, Component, ChangeDetectionStrategy, ViewEncapsulation, Inject, ContentChildren, EventEmitter, ElementRef, Output, ViewChild, HostBinding, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import * as i3 from '@angular/forms';
-import { FormsModule, FormGroup, ControlContainer } from '@angular/forms';
-import * as i1 from '@fundamental-ngx/cdk/utils';
+import * as i1 from '@angular/forms';
+import { FormGroup, ControlContainer, FormsModule } from '@angular/forms';
+import { FD_FORM_FIELD_CONTROL } from '@fundamental-ngx/cdk/forms';
+import { Subject, BehaviorSubject, Subscription, startWith, filter, switchMap, zip, debounceTime } from 'rxjs';
+import { style, state, animate, transition, trigger, keyframes } from '@angular/animations';
+import { CdkScrollable } from '@angular/cdk/overlay';
+import { DOCUMENT, NgTemplateOutlet, NgClass } from '@angular/common';
+import * as i1$1 from '@fundamental-ngx/cdk/utils';
 import { resizeObservable, TabbableElementService, InitialFocusDirective } from '@fundamental-ngx/cdk/utils';
+import { LinkComponent } from '@fundamental-ngx/core/link';
+import * as i2 from '@fundamental-ngx/core/list';
+import { ListModule } from '@fundamental-ngx/core/list';
+import { ObjectStatusComponent } from '@fundamental-ngx/core/object-status';
+import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
+import { FdTranslatePipe } from '@fundamental-ngx/i18n';
 import * as i2$1 from '@fundamental-ngx/core/bar';
 import { BarModule } from '@fundamental-ngx/core/bar';
 import { ButtonComponent } from '@fundamental-ngx/core/button';
-import { ObjectStatusComponent } from '@fundamental-ngx/core/object-status';
-import * as i1$1 from '@fundamental-ngx/core/popover';
+import * as i1$2 from '@fundamental-ngx/core/popover';
 import { PopoverModule } from '@fundamental-ngx/core/popover';
 import { SegmentedButtonComponent } from '@fundamental-ngx/core/segmented-button';
-import { FdTranslatePipe } from '@fundamental-ngx/i18n';
 import { getFormState } from '@fundamental-ngx/platform/form';
-import { style, state, animate, transition, trigger, keyframes } from '@angular/animations';
-import { CdkScrollable } from '@angular/cdk/overlay';
-import { LinkComponent } from '@fundamental-ngx/core/link';
-import * as i2 from '@fundamental-ngx/core/list';
-import { ListModule } from '@fundamental-ngx/core/list';
-import { ScrollbarDirective } from '@fundamental-ngx/core/scrollbar';
-import { debounceTime, Subject, BehaviorSubject, Subscription, startWith, filter, switchMap, zip } from 'rxjs';
-import { FD_FORM_FIELD_CONTROL } from '@fundamental-ngx/cdk/forms';
+import { flatten, countBy, mergeWith } from 'lodash-es';
 
 const FDP_MESSAGE_POPOVER_DEFAULT_CONFIG = {
     errors: {
@@ -39,190 +39,28 @@ const FDP_MESSAGE_POPOVER_DEFAULT_CONFIG = {
 };
 const FDP_MESSAGE_POPOVER_CONFIG = new InjectionToken('FdpMessagePopoverConfig');
 
-class MessageViewComponent {
-    /** @hidden */
-    constructor(_destroyRef, _tabbableService, _document) {
-        this._destroyRef = _destroyRef;
-        this._tabbableService = _tabbableService;
-        this._document = _document;
-        /** Event emitted when user clicks on error entry containing additional description. */
-        this.openDetails = new EventEmitter();
-        /** Event emitted when user clicks on error entry and item's element should be focused. */
-        this.focusItem = new EventEmitter();
-        /** Event emitted when user clicks on the field link to focus on the field itself. */
-        this.closePopover = new EventEmitter();
-        /** @Hidden */
-        this._initialClass = 'fd-message-popover__view-container';
-        /** @hidden */
-        this._activeListElement = null;
-    }
-    /** @hidden */
-    ngAfterViewInit() {
-        resizeObservable(this._detailsView.nativeElement)
-            .pipe(debounceTime(20), takeUntilDestroyed(this._destroyRef))
-            .subscribe(() => {
-            const { height } = this._detailsView.nativeElement.getBoundingClientRect();
-            this._listView.nativeElement.style.minHeight = `${height}px`;
-        });
-    }
-    /** @hidden */
-    _showDetails(entry) {
-        this._activeListElement = this._document.activeElement;
-        if (!entry.description.message) {
-            this._focusElement(undefined, entry);
-            return;
-        }
-        this.currentScreen = 'details';
-        this.openDetails.emit(entry);
-    }
-    /** @hidden */
-    _focusElement(event, item) {
-        if (!item?.element?.nativeElement) {
-            return;
-        }
-        event?.stopImmediatePropagation();
-        this.closePopover.emit(false);
-        this.focusItem.emit(item);
-        setTimeout(() => {
-            const tabbableElement = this._tabbableService.getTabbableElement(item.element?.nativeElement);
-            tabbableElement?.focus();
-        });
-    }
+class MessagePopoverFormItemDirective {
     /** @hidden */
-    _onListAnimationComplete(event) {
-        if (event.toState === 'open' && this._activeListElement) {
-            this._activeListElement.focus();
-            this._activeListElement = null;
-        }
+    constructor(elementRef, control) {
+        this.elementRef = elementRef;
+        this.control = control;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessageViewComponent, deps: [{ token: i0.DestroyRef }, { token: i1.TabbableElementService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: MessageViewComponent, isStandalone: true, 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<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<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    >\n        <ul #listView fd-list class=\"message-popover__list fd-list--message-view\" [navigationIndicator]=\"true\">\n            @for (group of filteredErrors; track group) {\n                @if (group.group) {\n                    <li fd-list-group-header>\n                        <span fd-list-title>{{ group.group }}</span>\n                    </li>\n                }\n                @for (item of group.errors; track item; 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                        @if (item.element && !!item.description.message) {\n                            <span fd-list-link [navigationIndicator]=\"!!item.description.message\">\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                        } @else {\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                        }\n                    </li>\n                }\n            }\n        </ul>\n    </section>\n    <section class=\"fd-message-view__details\" [@openCloseDetails]=\"currentScreen === 'details' ? 'open' : 'closed'\">\n        <div #detailsView>\n            @if (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                @if (currentEntry.description.message) {\n                    <span class=\"fd-message-view__details-description\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"descriptionTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                        ></ng-template>\n                    </span>\n                }\n            }\n        </div>\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i2.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i2.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i2.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "component", type: ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], animations: [
-            trigger('openCloseList', [
-                // ...
-                state('open', style({
-                    transform: 'translateX(0)',
-                    opacity: 1
-                })),
-                state('closed', style({
-                    transform: 'translateX(-50px)',
-                    opacity: 0
-                })),
-                transition('open => closed', [animate('.1s cubic-bezier(0, 0, 0.2, 1)')]),
-                transition('closed => open', [animate('0.1s .1s cubic-bezier(0, 0, 0.2, 1)')])
-            ]),
-            trigger('openCloseDetails', [
-                state('open', style({
-                    transform: 'translateX(0)',
-                    opacity: 1,
-                    display: 'block'
-                })),
-                state('closed', style({
-                    transform: 'translateX(50px)',
-                    opacity: 0
-                })),
-                transition('open => closed', [
-                    animate('.1s cubic-bezier(0, 0, 0.2, 1)', keyframes([
-                        style({
-                            transform: 'translateX(0)',
-                            opacity: 1,
-                            display: 'block'
-                        }),
-                        style({
-                            transform: 'translateX(50px)',
-                            opacity: 0,
-                            display: 'none'
-                        })
-                    ]))
-                ]),
-                transition('closed => open', [
-                    style({
-                        display: 'block'
-                    }),
-                    animate('0.1s .1s cubic-bezier(0, 0, 0.2, 1)')
-                ])
-            ])
-        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessagePopoverFormItemDirective, deps: [{ token: i0.ElementRef }, { token: i1.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: MessagePopoverFormItemDirective, isStandalone: true, selector: "[fdpMessagePopoverFormItem]", inputs: { label: ["fdpMessagePopoverFormItem", "label"], errorTypes: "errorTypes" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessageViewComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fdp-message-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [TabbableElementService], animations: [
-                        trigger('openCloseList', [
-                            // ...
-                            state('open', style({
-                                transform: 'translateX(0)',
-                                opacity: 1
-                            })),
-                            state('closed', style({
-                                transform: 'translateX(-50px)',
-                                opacity: 0
-                            })),
-                            transition('open => closed', [animate('.1s cubic-bezier(0, 0, 0.2, 1)')]),
-                            transition('closed => open', [animate('0.1s .1s cubic-bezier(0, 0, 0.2, 1)')])
-                        ]),
-                        trigger('openCloseDetails', [
-                            state('open', style({
-                                transform: 'translateX(0)',
-                                opacity: 1,
-                                display: 'block'
-                            })),
-                            state('closed', style({
-                                transform: 'translateX(50px)',
-                                opacity: 0
-                            })),
-                            transition('open => closed', [
-                                animate('.1s cubic-bezier(0, 0, 0.2, 1)', keyframes([
-                                    style({
-                                        transform: 'translateX(0)',
-                                        opacity: 1,
-                                        display: 'block'
-                                    }),
-                                    style({
-                                        transform: 'translateX(50px)',
-                                        opacity: 0,
-                                        display: 'none'
-                                    })
-                                ]))
-                            ]),
-                            transition('closed => open', [
-                                style({
-                                    display: 'block'
-                                }),
-                                animate('0.1s .1s cubic-bezier(0, 0, 0.2, 1)')
-                            ])
-                        ])
-                    ], standalone: true, imports: [
-                        NgTemplateOutlet,
-                        CdkScrollable,
-                        ScrollbarDirective,
-                        ListModule,
-                        ObjectStatusComponent,
-                        LinkComponent,
-                        FdTranslatePipe
-                    ], 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<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<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    >\n        <ul #listView fd-list class=\"message-popover__list fd-list--message-view\" [navigationIndicator]=\"true\">\n            @for (group of filteredErrors; track group) {\n                @if (group.group) {\n                    <li fd-list-group-header>\n                        <span fd-list-title>{{ group.group }}</span>\n                    </li>\n                }\n                @for (item of group.errors; track item; 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                        @if (item.element && !!item.description.message) {\n                            <span fd-list-link [navigationIndicator]=\"!!item.description.message\">\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                        } @else {\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                        }\n                    </li>\n                }\n            }\n        </ul>\n    </section>\n    <section class=\"fd-message-view__details\" [@openCloseDetails]=\"currentScreen === 'details' ? 'open' : 'closed'\">\n        <div #detailsView>\n            @if (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                @if (currentEntry.description.message) {\n                    <span class=\"fd-message-view__details-description\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"descriptionTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                        ></ng-template>\n                    </span>\n                }\n            }\n        </div>\n    </section>\n</div>\n" }]
-        }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i1.TabbableElementService }, { type: Document, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { currentScreen: [{
-                type: Input
-            }], filteredErrors: [{
-                type: Input
-            }], currentEntry: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessagePopoverFormItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdpMessagePopoverFormItem]',
+                    standalone: true
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { label: [{
+                type: Input,
+                args: ['fdpMessagePopoverFormItem']
+            }], errorTypes: [{
                 type: Input
-            }], openDetails: [{
-                type: Output
-            }], focusItem: [{
-                type: Output
-            }], closePopover: [{
-                type: Output
-            }], _listView: [{
-                type: ViewChild,
-                args: ['listView', { read: ElementRef }]
-            }], _detailsView: [{
-                type: ViewChild,
-                args: ['detailsView', { read: ElementRef }]
-            }], _initialClass: [{
-                type: HostBinding,
-                args: ['class']
             }] } });
 
 /**
@@ -262,165 +100,41 @@ function convertFormState(type) {
     }
 }
 
-class MessagePopoverComponent {
+class MessagePopoverFormWrapperComponent {
+    /**
+     * User-passed forms.
+     */
+    set forms(forms) {
+        if (!forms) {
+            return;
+        }
+        if (!Array.isArray(forms)) {
+            forms = [forms];
+        }
+        this._ngForms = forms;
+        this._startListeningForErrors();
+    }
+    /** User-passed form fields. */
+    set formFields(value) {
+        this._formFields = value;
+        this._listenToFormFieldErrors(value);
+    }
+    get formFields() {
+        return this._formFields;
+    }
     /** @hidden */
-    constructor(_cdr, _destroyRef) {
-        this._cdr = _cdr;
+    constructor(_destroyRef, _config) {
         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`. */
-        this.currentScreen = 'list';
+        this._config = _config;
+        /** Message Popover instance. */
+        this.messagePopover$ = new Subject();
         /** @hidden */
-        this._currentErrorType = 'all';
-        /** @hidden */
-        this._errorTypes = [];
-        /** @hidden */
-        this._priorityStateItemsCount = 0;
-        /** @hidden */
-        this._filteredErrors = [];
-        /** @hidden */
-        this._groupedErrors = [];
-    }
-    /** @hidden */
-    ngOnInit() {
-        this.wrapper?.setMessagePopover(this);
-        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');
-            const errorTypes = Object.keys(countedErrors);
-            errorTypes.forEach((errorType) => {
-                this._errorTypes.push({
-                    group: errorType,
-                    count: countedErrors[errorType],
-                    state: convertFormState(errorType)
-                });
-            });
-            this._priorityFormState = getFormState(errorTypes);
-            this._priorityState = convertFormStateToMessagePopoverState(this._priorityFormState);
-            this._priorityStateItemsCount = countedErrors[this._priorityFormState];
-            this._filterErrors();
-            this._cdr.detectChanges();
-        });
-    }
-    /** @hidden */
-    _showList() {
-        this.currentScreen = 'list';
-        this.currentEntry = null;
-    }
-    /** @hidden */
-    _showDetails(entry) {
-        this.currentScreen = 'details';
-        this.currentEntry = entry;
-    }
-    /** @hidden */
-    _closePopover(focusLast = true) {
-        this._popover.close(focusLast);
-    }
-    /** @hidden */
-    _filterErrors() {
-        if (this._currentErrorType === 'all') {
-            this._filteredErrors = this._groupedErrors;
-            return;
-        }
-        this._filteredErrors = [];
-        this._groupedErrors.forEach((group) => {
-            const errors = group.errors.filter((error) => error.type === this._currentErrorType);
-            if (errors.length === 0) {
-                return;
-            }
-            this._filteredErrors.push({
-                group: group.group,
-                errors
-            });
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessagePopoverComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: MessagePopoverComponent, isStandalone: true, selector: "fdp-message-popover", inputs: { wrapper: "wrapper" }, outputs: { focusItem: "focusItem" }, viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "@if (_errorTypes.length > 0) {\n    <fd-popover\n        #popover\n        placement=\"top-start\"\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                        @if (currentScreen === 'list') {\n                            <fd-segmented-button [(ngModel)]=\"_currentErrorType\" (ngModelChange)=\"_filterErrors()\">\n                                <button\n                                    fd-button\n                                    [label]=\"'platformMessagePopover.allErrors' | fdTranslate\"\n                                    value=\"all\"\n                                ></button>\n                                @for (type of _errorTypes; track type) {\n                                    <button fd-button [value]=\"type.group\">\n                                        <span\n                                            fd-object-status\n                                            [status]=\"type.state\"\n                                            [glyph]=\"'message-' + type.group\"\n                                        ></span>\n                                        <span class=\"fd-button__text\">{{ type.count }}</span>\n                                    </button>\n                                }\n                            </fd-segmented-button>\n                        }\n                        @if (currentScreen === 'details') {\n                            <button\n                                fd-button\n                                fdkInitialFocus\n                                fdType=\"transparent\"\n                                glyph=\"navigation-left-arrow\"\n                                title=\"Go back\"\n                                (click)=\"_showList()\"\n                            ></button>\n                        }\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}\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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{--fdButtonFocusColor:var(--sapContent_ContrastFocusColor);border-width:var(--fdMessagePopover_Trigger_Border_Width);text-shadow:var(--fdButtonTextShadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--critical:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--critical:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--critical:hover{--fdButtonColor:var(--sapButton_Critical_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Hover_Background);--fdButtonBorderColor:var(--sapButton_Critical_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--critical:active{--fdButtonColor:var(--sapButton_Critical_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Active_Background);--fdButtonBorderColor:var(--sapButton_Critical_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--critical:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--critical[aria-disabled=true]{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--negative{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--negative:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--negative:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--negative:hover{--fdButtonColor:var(--sapButton_Negative_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Hover_Background);--fdButtonBorderColor:var(--sapButton_Negative_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--negative:active{--fdButtonColor:var(--sapButton_Negative_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Active_Background);--fdButtonBorderColor:var(--sapButton_Negative_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--negative:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--negative[aria-disabled=true]{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--success{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--success:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--success:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--success:hover{--fdButtonColor:var(--sapButton_Success_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Hover_Background);--fdButtonBorderColor:var(--sapButton_Success_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--success:active{--fdButtonColor:var(--sapButton_Success_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Active_Background);--fdButtonBorderColor:var(--sapButton_Success_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--success:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--success[aria-disabled=true]{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--information{--fdButtonColor:var(--fdMessagePopover_Information_Regular_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Regular_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Regular_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Regular_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Information_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--information:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--information:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--information:hover{--fdButtonColor:var(--fdMessagePopover_Information_Hover_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Hover_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Hover_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--information:active{--fdButtonColor:var(--fdMessagePopover_Information_Active_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Active_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Active_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--information:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--information[aria-disabled=true]{--fdButtonColor:var(--fdMessagePopover_Information_Regular_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Regular_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Regular_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.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: "ngmodule", type: PopoverModule }, { kind: "component", type: i1$1.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "directive", type: i1$1.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i1$1.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: BarModule }, { kind: "component", type: i2$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "ngmodule", type: FormsModule }, { 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: ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: MessageViewComponent, selector: "fdp-message-view", inputs: ["currentScreen", "filteredErrors", "currentEntry"], outputs: ["openDetails", "focusItem", "closePopover"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessagePopoverComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'fdp-message-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
-                        PopoverModule,
-                        ButtonComponent,
-                        NgClass,
-                        BarModule,
-                        SegmentedButtonComponent,
-                        FormsModule,
-                        ObjectStatusComponent,
-                        InitialFocusDirective,
-                        MessageViewComponent,
-                        FdTranslatePipe
-                    ], template: "@if (_errorTypes.length > 0) {\n    <fd-popover\n        #popover\n        placement=\"top-start\"\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                        @if (currentScreen === 'list') {\n                            <fd-segmented-button [(ngModel)]=\"_currentErrorType\" (ngModelChange)=\"_filterErrors()\">\n                                <button\n                                    fd-button\n                                    [label]=\"'platformMessagePopover.allErrors' | fdTranslate\"\n                                    value=\"all\"\n                                ></button>\n                                @for (type of _errorTypes; track type) {\n                                    <button fd-button [value]=\"type.group\">\n                                        <span\n                                            fd-object-status\n                                            [status]=\"type.state\"\n                                            [glyph]=\"'message-' + type.group\"\n                                        ></span>\n                                        <span class=\"fd-button__text\">{{ type.count }}</span>\n                                    </button>\n                                }\n                            </fd-segmented-button>\n                        }\n                        @if (currentScreen === 'details') {\n                            <button\n                                fd-button\n                                fdkInitialFocus\n                                fdType=\"transparent\"\n                                glyph=\"navigation-left-arrow\"\n                                title=\"Go back\"\n                                (click)=\"_showList()\"\n                            ></button>\n                        }\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}\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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{--fdButtonFocusColor:var(--sapContent_ContrastFocusColor);border-width:var(--fdMessagePopover_Trigger_Border_Width);text-shadow:var(--fdButtonTextShadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--critical:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--critical:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--critical:hover{--fdButtonColor:var(--sapButton_Critical_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Hover_Background);--fdButtonBorderColor:var(--sapButton_Critical_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--critical:active{--fdButtonColor:var(--sapButton_Critical_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Active_Background);--fdButtonBorderColor:var(--sapButton_Critical_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--critical:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--critical[aria-disabled=true]{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--negative{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--negative:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--negative:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--negative:hover{--fdButtonColor:var(--sapButton_Negative_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Hover_Background);--fdButtonBorderColor:var(--sapButton_Negative_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--negative:active{--fdButtonColor:var(--sapButton_Negative_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Active_Background);--fdButtonBorderColor:var(--sapButton_Negative_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--negative:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--negative[aria-disabled=true]{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--success{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--success:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--success:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--success:hover{--fdButtonColor:var(--sapButton_Success_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Hover_Background);--fdButtonBorderColor:var(--sapButton_Success_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--success:active{--fdButtonColor:var(--sapButton_Success_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Active_Background);--fdButtonBorderColor:var(--sapButton_Success_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--success:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--success[aria-disabled=true]{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--information{--fdButtonColor:var(--fdMessagePopover_Information_Regular_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Regular_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Regular_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Regular_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Information_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--information:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--information:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--information:hover{--fdButtonColor:var(--fdMessagePopover_Information_Hover_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Hover_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Hover_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--information:active{--fdButtonColor:var(--fdMessagePopover_Information_Active_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Active_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Active_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--information:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--information[aria-disabled=true]{--fdButtonColor:var(--fdMessagePopover_Information_Regular_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Regular_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Regular_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.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: () => [{ type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }], propDecorators: { _popover: [{
-                type: ViewChild,
-                args: ['popover']
-            }], wrapper: [{
-                type: Input
-            }], focusItem: [{
-                type: Output
-            }] } });
-
-class MessagePopoverFormItemDirective {
-    /** @hidden */
-    constructor(elementRef, control) {
-        this.elementRef = elementRef;
-        this.control = control;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessagePopoverFormItemDirective, deps: [{ token: i0.ElementRef }, { token: i3.NgControl, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.0.4", type: MessagePopoverFormItemDirective, isStandalone: true, selector: "[fdpMessagePopoverFormItem]", inputs: { label: ["fdpMessagePopoverFormItem", "label"], errorTypes: "errorTypes" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessagePopoverFormItemDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[fdpMessagePopoverFormItem]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i3.NgControl, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { label: [{
-                type: Input,
-                args: ['fdpMessagePopoverFormItem']
-            }], errorTypes: [{
-                type: Input
-            }] } });
-
-class MessagePopoverFormWrapperComponent {
-    /**
-     * User-passed forms.
-     */
-    set forms(forms) {
-        if (!forms) {
-            return;
-        }
-        if (!Array.isArray(forms)) {
-            forms = [forms];
-        }
-        this._ngForms = forms;
-        this._startListeningForErrors();
-    }
-    /** User-passed form fields. */
-    set formFields(value) {
-        this._formFields = value;
-        this._listenToFormFieldErrors(value);
-    }
-    get formFields() {
-        return this._formFields;
-    }
-    /** @hidden */
-    constructor(_destroyRef, _config) {
-        this._destroyRef = _destroyRef;
-        this._config = _config;
-        /** Message Popover instance. */
-        this.messagePopover$ = new Subject();
-        /** @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();
+        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 */
@@ -716,6 +430,292 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImpor
                 type: Input
             }] } });
 
+class MessageViewComponent {
+    /** @hidden */
+    constructor(_destroyRef, _tabbableService, _document) {
+        this._destroyRef = _destroyRef;
+        this._tabbableService = _tabbableService;
+        this._document = _document;
+        /** Event emitted when user clicks on error entry containing additional description. */
+        this.openDetails = new EventEmitter();
+        /** Event emitted when user clicks on error entry and item's element should be focused. */
+        this.focusItem = new EventEmitter();
+        /** Event emitted when user clicks on the field link to focus on the field itself. */
+        this.closePopover = new EventEmitter();
+        /** @Hidden */
+        this._initialClass = 'fd-message-popover__view-container';
+        /** @hidden */
+        this._activeListElement = null;
+    }
+    /** @hidden */
+    ngAfterViewInit() {
+        resizeObservable(this._detailsView.nativeElement)
+            .pipe(debounceTime(20), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            const { height } = this._detailsView.nativeElement.getBoundingClientRect();
+            this._listView.nativeElement.style.minHeight = `${height}px`;
+        });
+    }
+    /** @hidden */
+    _showDetails(entry) {
+        this._activeListElement = this._document.activeElement;
+        if (!entry.description.message) {
+            this._focusElement(undefined, entry);
+            return;
+        }
+        this.currentScreen = 'details';
+        this.openDetails.emit(entry);
+    }
+    /** @hidden */
+    _focusElement(event, item) {
+        if (!item?.element?.nativeElement) {
+            return;
+        }
+        event?.stopImmediatePropagation();
+        this.closePopover.emit(false);
+        this.focusItem.emit(item);
+        setTimeout(() => {
+            const tabbableElement = this._tabbableService.getTabbableElement(item.element?.nativeElement);
+            tabbableElement?.focus();
+        });
+    }
+    /** @hidden */
+    _onListAnimationComplete(event) {
+        if (event.toState === 'open' && this._activeListElement) {
+            this._activeListElement.focus();
+            this._activeListElement = null;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessageViewComponent, deps: [{ token: i0.DestroyRef }, { token: i1$1.TabbableElementService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: MessageViewComponent, isStandalone: true, 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<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<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    >\n        <ul #listView fd-list class=\"message-popover__list fd-list--message-view\" [navigationIndicator]=\"true\">\n            @for (group of filteredErrors; track group) {\n                @if (group.group) {\n                    <li fd-list-group-header>\n                        <span fd-list-title>{{ group.group }}</span>\n                    </li>\n                }\n                @for (item of group.errors; track item; 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                        @if (item.element && !!item.description.message) {\n                            <span fd-list-link [navigationIndicator]=\"!!item.description.message\">\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                        } @else {\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                        }\n                    </li>\n                }\n            }\n        </ul>\n    </section>\n    <section class=\"fd-message-view__details\" [@openCloseDetails]=\"currentScreen === 'details' ? 'open' : 'closed'\">\n        <div #detailsView>\n            @if (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                @if (currentEntry.description.message) {\n                    <span class=\"fd-message-view__details-description\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"descriptionTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                        ></ng-template>\n                    </span>\n                }\n            }\n        </div>\n    </section>\n</div>\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: ScrollbarDirective, selector: "[fdScrollbar], [fd-scrollbar]", inputs: ["noHorizontalScroll", "noVerticalScroll", "alwaysVisible"] }, { kind: "ngmodule", type: ListModule }, { kind: "component", type: i2.ListComponent, selector: "[fd-list], [fdList]", inputs: ["dropdownMode", "multiInputMode", "mobileMode", "hasMessage", "noBorder", "navigationIndicator", "selection", "keyboardSupport", "byline", "unreadIndicator", "role"], outputs: ["focusEscapeList"] }, { kind: "component", type: i2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "unread", "byline", "ariaRole"], outputs: ["keyDown"] }, { kind: "directive", type: i2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap"] }, { kind: "directive", type: i2.ListGroupHeaderDirective, selector: "[fdListGroupHeader], [fd-list-group-header]", inputs: ["nativeElementId"], outputs: ["keyDown"] }, { kind: "directive", type: i2.ListLinkDirective, selector: "[fd-list-link], [fdListLink]", inputs: ["navigationIndicator", "navigated", "focusable"] }, { kind: "directive", type: i2.ListContentDirective, selector: "[fdListContent], [fd-list-content]", inputs: ["twoCol"] }, { kind: "component", type: ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["class", "emphasized", "disabled", "inverted", "subtle", "undecorated"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], animations: [
+            trigger('openCloseList', [
+                // ...
+                state('open', style({
+                    transform: 'translateX(0)',
+                    opacity: 1
+                })),
+                state('closed', style({
+                    transform: 'translateX(-50px)',
+                    opacity: 0
+                })),
+                transition('open => closed', [animate('.1s cubic-bezier(0, 0, 0.2, 1)')]),
+                transition('closed => open', [animate('0.1s .1s cubic-bezier(0, 0, 0.2, 1)')])
+            ]),
+            trigger('openCloseDetails', [
+                state('open', style({
+                    transform: 'translateX(0)',
+                    opacity: 1,
+                    display: 'block'
+                })),
+                state('closed', style({
+                    transform: 'translateX(50px)',
+                    opacity: 0
+                })),
+                transition('open => closed', [
+                    animate('.1s cubic-bezier(0, 0, 0.2, 1)', keyframes([
+                        style({
+                            transform: 'translateX(0)',
+                            opacity: 1,
+                            display: 'block'
+                        }),
+                        style({
+                            transform: 'translateX(50px)',
+                            opacity: 0,
+                            display: 'none'
+                        })
+                    ]))
+                ]),
+                transition('closed => open', [
+                    style({
+                        display: 'block'
+                    }),
+                    animate('0.1s .1s cubic-bezier(0, 0, 0.2, 1)')
+                ])
+            ])
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessageViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fdp-message-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [TabbableElementService], animations: [
+                        trigger('openCloseList', [
+                            // ...
+                            state('open', style({
+                                transform: 'translateX(0)',
+                                opacity: 1
+                            })),
+                            state('closed', style({
+                                transform: 'translateX(-50px)',
+                                opacity: 0
+                            })),
+                            transition('open => closed', [animate('.1s cubic-bezier(0, 0, 0.2, 1)')]),
+                            transition('closed => open', [animate('0.1s .1s cubic-bezier(0, 0, 0.2, 1)')])
+                        ]),
+                        trigger('openCloseDetails', [
+                            state('open', style({
+                                transform: 'translateX(0)',
+                                opacity: 1,
+                                display: 'block'
+                            })),
+                            state('closed', style({
+                                transform: 'translateX(50px)',
+                                opacity: 0
+                            })),
+                            transition('open => closed', [
+                                animate('.1s cubic-bezier(0, 0, 0.2, 1)', keyframes([
+                                    style({
+                                        transform: 'translateX(0)',
+                                        opacity: 1,
+                                        display: 'block'
+                                    }),
+                                    style({
+                                        transform: 'translateX(50px)',
+                                        opacity: 0,
+                                        display: 'none'
+                                    })
+                                ]))
+                            ]),
+                            transition('closed => open', [
+                                style({
+                                    display: 'block'
+                                }),
+                                animate('0.1s .1s cubic-bezier(0, 0, 0.2, 1)')
+                            ])
+                        ])
+                    ], standalone: true, imports: [
+                        NgTemplateOutlet,
+                        CdkScrollable,
+                        ScrollbarDirective,
+                        ListModule,
+                        ObjectStatusComponent,
+                        LinkComponent,
+                        FdTranslatePipe
+                    ], 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<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<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    >\n        <ul #listView fd-list class=\"message-popover__list fd-list--message-view\" [navigationIndicator]=\"true\">\n            @for (group of filteredErrors; track group) {\n                @if (group.group) {\n                    <li fd-list-group-header>\n                        <span fd-list-title>{{ group.group }}</span>\n                    </li>\n                }\n                @for (item of group.errors; track item; 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                        @if (item.element && !!item.description.message) {\n                            <span fd-list-link [navigationIndicator]=\"!!item.description.message\">\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                        } @else {\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                        }\n                    </li>\n                }\n            }\n        </ul>\n    </section>\n    <section class=\"fd-message-view__details\" [@openCloseDetails]=\"currentScreen === 'details' ? 'open' : 'closed'\">\n        <div #detailsView>\n            @if (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                @if (currentEntry.description.message) {\n                    <span class=\"fd-message-view__details-description\">\n                        <ng-template\n                            [ngTemplateOutlet]=\"descriptionTemplate\"\n                            [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                        ></ng-template>\n                    </span>\n                }\n            }\n        </div>\n    </section>\n</div>\n" }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: i1$1.TabbableElementService }, { type: Document, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { currentScreen: [{
+                type: Input
+            }], filteredErrors: [{
+                type: Input
+            }], currentEntry: [{
+                type: Input
+            }], openDetails: [{
+                type: Output
+            }], focusItem: [{
+                type: Output
+            }], closePopover: [{
+                type: Output
+            }], _listView: [{
+                type: ViewChild,
+                args: ['listView', { read: ElementRef }]
+            }], _detailsView: [{
+                type: ViewChild,
+                args: ['detailsView', { read: ElementRef }]
+            }], _initialClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class MessagePopoverComponent {
+    /** @hidden */
+    constructor(_cdr, _destroyRef) {
+        this._cdr = _cdr;
+        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`. */
+        this.currentScreen = 'list';
+        /** @hidden */
+        this._currentErrorType = 'all';
+        /** @hidden */
+        this._errorTypes = [];
+        /** @hidden */
+        this._priorityStateItemsCount = 0;
+        /** @hidden */
+        this._filteredErrors = [];
+        /** @hidden */
+        this._groupedErrors = [];
+    }
+    /** @hidden */
+    ngOnInit() {
+        this.wrapper?.setMessagePopover(this);
+        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');
+            const errorTypes = Object.keys(countedErrors);
+            errorTypes.forEach((errorType) => {
+                this._errorTypes.push({
+                    group: errorType,
+                    count: countedErrors[errorType],
+                    state: convertFormState(errorType)
+                });
+            });
+            this._priorityFormState = getFormState(errorTypes);
+            this._priorityState = convertFormStateToMessagePopoverState(this._priorityFormState);
+            this._priorityStateItemsCount = countedErrors[this._priorityFormState];
+            this._filterErrors();
+            this._cdr.detectChanges();
+        });
+    }
+    /** @hidden */
+    _showList() {
+        this.currentScreen = 'list';
+        this.currentEntry = null;
+    }
+    /** @hidden */
+    _showDetails(entry) {
+        this.currentScreen = 'details';
+        this.currentEntry = entry;
+    }
+    /** @hidden */
+    _closePopover(focusLast = true) {
+        this._popover.close(focusLast);
+    }
+    /** @hidden */
+    _filterErrors() {
+        if (this._currentErrorType === 'all') {
+            this._filteredErrors = this._groupedErrors;
+            return;
+        }
+        this._filteredErrors = [];
+        this._groupedErrors.forEach((group) => {
+            const errors = group.errors.filter((error) => error.type === this._currentErrorType);
+            if (errors.length === 0) {
+                return;
+            }
+            this._filteredErrors.push({
+                group: group.group,
+                errors
+            });
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessagePopoverComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.DestroyRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.4", type: MessagePopoverComponent, isStandalone: true, selector: "fdp-message-popover", inputs: { wrapper: "wrapper" }, outputs: { focusItem: "focusItem" }, viewQueries: [{ propertyName: "_popover", first: true, predicate: ["popover"], descendants: true }], ngImport: i0, template: "@if (_errorTypes.length > 0) {\n    <fd-popover\n        #popover\n        placement=\"top-start\"\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                        @if (currentScreen === 'list') {\n                            <fd-segmented-button [(ngModel)]=\"_currentErrorType\" (ngModelChange)=\"_filterErrors()\">\n                                <button\n                                    fd-button\n                                    [label]=\"'platformMessagePopover.allErrors' | fdTranslate\"\n                                    value=\"all\"\n                                ></button>\n                                @for (type of _errorTypes; track type) {\n                                    <button fd-button [value]=\"type.group\">\n                                        <span\n                                            fd-object-status\n                                            [status]=\"type.state\"\n                                            [glyph]=\"'message-' + type.group\"\n                                        ></span>\n                                        <span class=\"fd-button__text\">{{ type.count }}</span>\n                                    </button>\n                                }\n                            </fd-segmented-button>\n                        }\n                        @if (currentScreen === 'details') {\n                            <button\n                                fd-button\n                                fdkInitialFocus\n                                fdType=\"transparent\"\n                                glyph=\"navigation-left-arrow\"\n                                title=\"Go back\"\n                                (click)=\"_showList()\"\n                            ></button>\n                        }\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}\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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{--fdButtonFocusColor:var(--sapContent_ContrastFocusColor);border-width:var(--fdMessagePopover_Trigger_Border_Width);text-shadow:var(--fdButtonTextShadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--critical:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--critical:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--critical:hover{--fdButtonColor:var(--sapButton_Critical_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Hover_Background);--fdButtonBorderColor:var(--sapButton_Critical_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--critical:active{--fdButtonColor:var(--sapButton_Critical_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Active_Background);--fdButtonBorderColor:var(--sapButton_Critical_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--critical:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--critical[aria-disabled=true]{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--negative{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--negative:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--negative:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--negative:hover{--fdButtonColor:var(--sapButton_Negative_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Hover_Background);--fdButtonBorderColor:var(--sapButton_Negative_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--negative:active{--fdButtonColor:var(--sapButton_Negative_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Active_Background);--fdButtonBorderColor:var(--sapButton_Negative_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--negative:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--negative[aria-disabled=true]{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--success{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--success:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--success:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--success:hover{--fdButtonColor:var(--sapButton_Success_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Hover_Background);--fdButtonBorderColor:var(--sapButton_Success_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--success:active{--fdButtonColor:var(--sapButton_Success_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Active_Background);--fdButtonBorderColor:var(--sapButton_Success_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--success:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--success[aria-disabled=true]{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--information{--fdButtonColor:var(--fdMessagePopover_Information_Regular_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Regular_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Regular_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Regular_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Information_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--information:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--information:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--information:hover{--fdButtonColor:var(--fdMessagePopover_Information_Hover_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Hover_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Hover_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--information:active{--fdButtonColor:var(--fdMessagePopover_Information_Active_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Active_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Active_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--information:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--information[aria-disabled=true]{--fdButtonColor:var(--fdMessagePopover_Information_Regular_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Regular_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Regular_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.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: "ngmodule", type: PopoverModule }, { kind: "component", type: i1$2.PopoverControlComponent, selector: "fd-popover-control, [fdPopoverControl]" }, { kind: "directive", type: i1$2.PopoverBodyHeaderDirective, selector: "[fdPopoverBodyHeader], [fd-popover-body-header]" }, { kind: "component", type: i1$2.PopoverComponent, selector: "fd-popover", inputs: ["title", "trigger", "fixedPosition", "id", "mobile", "mobileConfig"] }, { kind: "component", type: ButtonComponent, selector: "button[fd-button], a[fd-button]", inputs: ["class"], exportAs: ["fd-button"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: BarModule }, { kind: "component", type: i2$1.BarComponent, selector: "[fd-bar]", inputs: ["class", "barDesign", "inPage", "inHomePage", "size"] }, { kind: "directive", type: i2$1.BarLeftDirective, selector: "[fd-bar-left]" }, { kind: "directive", type: i2$1.BarRightDirective, selector: "[fd-bar-right]" }, { kind: "component", type: SegmentedButtonComponent, selector: "fd-segmented-button", inputs: ["toggle", "vertical"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["class", "status", "glyph", "glyphFont", "label", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate"] }, { kind: "directive", type: InitialFocusDirective, selector: "[fdkInitialFocus]", inputs: ["fdkInitialFocus", "enabled", "focusLastElement"] }, { kind: "component", type: MessageViewComponent, selector: "fdp-message-view", inputs: ["currentScreen", "filteredErrors", "currentEntry"], outputs: ["openDetails", "focusItem", "closePopover"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.4", ngImport: i0, type: MessagePopoverComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fdp-message-popover', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [
+                        PopoverModule,
+                        ButtonComponent,
+                        NgClass,
+                        BarModule,
+                        SegmentedButtonComponent,
+                        FormsModule,
+                        ObjectStatusComponent,
+                        InitialFocusDirective,
+                        MessageViewComponent,
+                        FdTranslatePipe
+                    ], template: "@if (_errorTypes.length > 0) {\n    <fd-popover\n        #popover\n        placement=\"top-start\"\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                        @if (currentScreen === 'list') {\n                            <fd-segmented-button [(ngModel)]=\"_currentErrorType\" (ngModelChange)=\"_filterErrors()\">\n                                <button\n                                    fd-button\n                                    [label]=\"'platformMessagePopover.allErrors' | fdTranslate\"\n                                    value=\"all\"\n                                ></button>\n                                @for (type of _errorTypes; track type) {\n                                    <button fd-button [value]=\"type.group\">\n                                        <span\n                                            fd-object-status\n                                            [status]=\"type.state\"\n                                            [glyph]=\"'message-' + type.group\"\n                                        ></span>\n                                        <span class=\"fd-button__text\">{{ type.count }}</span>\n                                    </button>\n                                }\n                            </fd-segmented-button>\n                        }\n                        @if (currentScreen === 'details') {\n                            <button\n                                fd-button\n                                fdkInitialFocus\n                                fdType=\"transparent\"\n                                glyph=\"navigation-left-arrow\"\n                                title=\"Go back\"\n                                (click)=\"_showList()\"\n                            ></button>\n                        }\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}\n", styles: ["/*!\n * Fundamental Library Styles v0.32.0\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{--fdButtonFocusColor:var(--sapContent_ContrastFocusColor);border-width:var(--fdMessagePopover_Trigger_Border_Width);text-shadow:var(--fdButtonTextShadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--critical:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--critical:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--critical:hover{--fdButtonColor:var(--sapButton_Critical_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Hover_Background);--fdButtonBorderColor:var(--sapButton_Critical_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--critical:active{--fdButtonColor:var(--sapButton_Critical_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Active_Background);--fdButtonBorderColor:var(--sapButton_Critical_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--critical.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--critical:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--critical[aria-disabled=true]{--fdButtonColor:var(--sapButton_Critical_TextColor);--fdButtonBackgroundColor:var(--sapButton_Critical_Background);--fdButtonBorderColor:var(--sapButton_Critical_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Critical_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--negative{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--negative:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--negative:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--negative:hover{--fdButtonColor:var(--sapButton_Negative_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Hover_Background);--fdButtonBorderColor:var(--sapButton_Negative_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--negative:active{--fdButtonColor:var(--sapButton_Negative_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Active_Background);--fdButtonBorderColor:var(--sapButton_Negative_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--negative.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--negative:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--negative[aria-disabled=true]{--fdButtonColor:var(--sapButton_Negative_TextColor);--fdButtonBackgroundColor:var(--sapButton_Negative_Background);--fdButtonBorderColor:var(--sapButton_Negative_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Negative_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--success{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Regular_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--success:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--success:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--success:hover{--fdButtonColor:var(--sapButton_Success_Hover_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Hover_Background);--fdButtonBorderColor:var(--sapButton_Success_Hover_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--success:active{--fdButtonColor:var(--sapButton_Success_Active_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Active_Background);--fdButtonBorderColor:var(--sapButton_Success_Active_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--success.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--success:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--success[aria-disabled=true]{--fdButtonColor:var(--sapButton_Success_TextColor);--fdButtonBackgroundColor:var(--sapButton_Success_Background);--fdButtonBorderColor:var(--sapButton_Success_BorderColor);--fdButtonTextShadow:var(--fdMessagePopover_Success_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.fd-message-popover__trigger.fd-message-popover__trigger--information{--fdButtonColor:var(--fdMessagePopover_Information_Regular_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Regular_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Regular_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Regular_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Information_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-focus,.fd-message-popover__trigger.fd-message-popover__trigger--information:focus{z-index:5}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-focus:after,.fd-message-popover__trigger.fd-message-popover__trigger--information:focus:after{border-color:var(--fdButtonFocusColor)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-hover,.fd-message-popover__trigger.fd-message-popover__trigger--information:hover{--fdButtonColor:var(--fdMessagePopover_Information_Hover_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Hover_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Hover_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Hover_Text_Shadow)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-active,.fd-message-popover__trigger.fd-message-popover__trigger--information:active{--fdButtonColor:var(--fdMessagePopover_Information_Active_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Active_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Active_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Active_Text_Shadow);--fdButtonFocusColor:var(--fdMessagePopover_Active_Focus_Outline_Color)}.fd-message-popover__trigger.fd-message-popover__trigger--information.is-disabled,.fd-message-popover__trigger.fd-message-popover__trigger--information:disabled,.fd-message-popover__trigger.fd-message-popover__trigger--information[aria-disabled=true]{--fdButtonColor:var(--fdMessagePopover_Information_Regular_Color);--fdButtonBackgroundColor:var(--fdMessagePopover_Information_Regular_Background_Color);--fdButtonBorderColor:var(--fdMessagePopover_Information_Regular_Border_Color);--fdButtonTextShadow:var(--fdMessagePopover_Information_Regular_Text_Shadow);opacity:var(--sapContent_DisabledOpacity);pointer-events:none}.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: () => [{ type: i0.ChangeDetectorRef }, { type: i0.DestroyRef }], propDecorators: { _popover: [{
+                type: ViewChild,
+                args: ['popover']
+            }], wrapper: [{
+                type: Input
+            }], focusItem: [{
+                type: Output
+            }] } });
+
 class PlatformMessagePopoverModule {
     /**
      * Method allows users to apply custom configuration.