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

package/fesm2022/fundamental-ngx-platform-messages-shared.mjs

@@ -0,0 +1,803 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Input, Optional, Directive, signal, ContentChildren, Inject, ViewEncapsulation, ChangeDetectionStrategy, Component, EventEmitter, inject, DOCUMENT, ElementRef, ViewChild, Output, computed, NgModule } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormGroup, ControlContainer } from '@angular/forms';
+import { FD_FORM_FIELD_CONTROL } from '@fundamental-ngx/cdk/forms';
+import { Subject, Subscription, startWith, switchMap, filter, zip, debounceTime } from 'rxjs';
+import { CdkScrollable } from '@angular/cdk/overlay';
+import { NgTemplateOutlet } from '@angular/common';
+import * as i1$1 from '@fundamental-ngx/cdk/utils';
+import { resizeObservable, ClickedDirective, TabbableElementService, countBy, mergeWith } 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 { TextComponent } from '@fundamental-ngx/core/text';
+import { FdTranslatePipe } from '@fundamental-ngx/i18n';
+import { getFormState } from '@fundamental-ngx/platform/form';
+
+const FDP_MESSAGE_POPOVER_DEFAULT_CONFIG = {
+    errors: {
+        email: 'platformMessagePopover.defaultErrors.email',
+        max: 'platformMessagePopover.defaultErrors.max',
+        maxlength: 'platformMessagePopover.defaultErrors.maxLength',
+        min: 'platformMessagePopover.defaultErrors.min',
+        minlength: 'platformMessagePopover.defaultErrors.minLength',
+        pattern: 'platformMessagePopover.defaultErrors.pattern',
+        required: 'platformMessagePopover.defaultErrors.required',
+        requiredTrue: 'platformMessagePopover.defaultErrors.requiredTrue'
+    }
+};
+const FDP_MESSAGE_POPOVER_CONFIG = new InjectionToken('FdpMessagePopoverConfig');
+
+class MessagePopoverFormItemDirective {
+    /** @hidden */
+    constructor(elementRef, control) {
+        this.elementRef = elementRef;
+        this.control = control;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", 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: "22.2.1", type: MessagePopoverFormItemDirective, isStandalone: true, selector: "[fdpMessagePopoverFormItem]", inputs: { label: ["fdpMessagePopoverFormItem", "label"], errorTypes: "errorTypes" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: MessagePopoverFormItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[fdpMessagePopoverFormItem]'
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.NgControl, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { label: [{
+                type: Input,
+                args: ['fdpMessagePopoverFormItem']
+            }], errorTypes: [{
+                type: Input
+            }] } });
+
+/**
+ * Converts Object Status into Message Popover State
+ * @param status Object status
+ * @returns Message Popover State.
+ */
+function convertFormStateToMessagePopoverState(state) {
+    switch (state) {
+        case 'error':
+            return 'negative';
+        case 'warning':
+            return 'critical';
+        case 'default':
+            return 'neutral';
+        default:
+            return state;
+    }
+}
+/**
+ * Converts Form State into Object status type.
+ * @param type Form state.
+ * @returns `ObjectStatus` type.
+ */
+function convertFormState(type) {
+    switch (type) {
+        case 'success':
+            return 'positive';
+        case 'error':
+            return 'negative';
+        case 'warning':
+            return 'critical';
+        case 'information':
+            return 'informative';
+        default:
+            return 'neutral';
+    }
+}
+/**
+ * Maps message type to icon name.
+ * @param type Message type (error, success, warning, information, default).
+ * @returns Icon name for the given message type.
+ */
+function getIconForMessageType(type) {
+    switch (type) {
+        case 'error':
+            return 'error';
+        case 'success':
+            return 'sys-enter-2';
+        case 'warning':
+            return 'alert';
+        case 'information':
+            return 'information';
+        default:
+            return 'sys-help-2';
+    }
+}
+
+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();
+        /**
+         * Error models Signal. Emitted when form submitted and contains invalid fields.
+         */
+        this.errors$ = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "errors$" }] : /* istanbul ignore next */ []));
+        /** @hidden */
+        this._formFields = [];
+        /** @hidden */
+        this._ngForms = [];
+        /** @hidden */
+        this._formItemErrorsSubscription = new Subscription();
+        /** @hidden */
+        this._formSubmitted = false;
+    }
+    /** @hidden */
+    ngAfterViewInit() {
+        // Forms are passed via input property.
+        if (this._ngForms.length > 0) {
+            return;
+        }
+        this._projectedForm?.changes.pipe(startWith(null), takeUntilDestroyed(this._destroyRef)).subscribe(() => {
+            this._ngForms = this._projectedForm.toArray();
+            this._startListeningForErrors();
+        });
+    }
+    /**
+     * Sets Message Popover component instance.
+     */
+    setMessagePopover(messagePopover) {
+        this.messagePopover$.next(messagePopover);
+        // this.messagePopover = messagePopover;
+    }
+    /**
+     * Programmatically add new form to array of forms.
+     * @param forms
+     */
+    addForms(forms) {
+        const formsArray = Array.isArray(forms) ? forms : [forms];
+        this._ngForms.push(...formsArray);
+        this._startListeningForErrors();
+    }
+    /**
+     * Programmatically add new form fields to array of listened form fields.
+     * @param formFields
+     */
+    addFormFields(formFields) {
+        this._formFields.push(...formFields);
+        this._listenToFormFieldErrors(this._formFields);
+    }
+    /** @hidden */
+    ngOnDestroy() {
+        this._formItemErrorsSubscription.unsubscribe();
+    }
+    /**
+     * @hidden
+     * Listens to the form submission and collects form control errors.
+     */
+    _startListeningForErrors() {
+        if (!this._ngForms) {
+            return;
+        }
+        this._formErrorsSubscription?.unsubscribe();
+        this.errors$.set([]);
+        const formSubmitEvents = this._ngForms.map((form) => form.ngSubmit.pipe(switchMap(() => form.statusChanges.pipe(startWith(form.status), filter((status) => status.toLowerCase() !== 'pending')))));
+        this._formErrorsSubscription = zip(...formSubmitEvents)
+            .pipe(takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            this._formSubmitted = true;
+            const errors = this._directiveItems.length > 0 ? this._collectPlainFormData() : this._collectAdvancedFormData();
+            this.errors$.set(errors);
+        });
+        this._listenToFormFieldErrors(this._projectedFormFieldControls.toArray());
+        this._projectedFormFieldControls?.changes.subscribe(() => {
+            this._listenToFormFieldErrors(this._projectedFormFieldControls.toArray());
+        });
+    }
+    /** @hidden */
+    _listenToFormFieldErrors(fields) {
+        this._formItemErrorsSubscription.unsubscribe();
+        this._formItemErrorsSubscription = new Subscription();
+        fields?.forEach((field) => {
+            this._formItemErrorsSubscription.add(field.formField?.errorsChange$.subscribe(() => {
+                if (!this._formSubmitted) {
+                    return;
+                }
+                const errors = this._directiveItems.length > 0
+                    ? this._collectPlainFormData()
+                    : this._collectAdvancedFormData();
+                this.errors$.set(errors);
+            }));
+        });
+    }
+    /** @hidden */
+    _collectPlainFormData() {
+        const errors = [
+            {
+                errors: []
+            }
+        ];
+        const fields = this._directiveItems.toArray();
+        this._ngForms.forEach((form) => {
+            Object.keys(form.form.controls).forEach((controlName) => {
+                const control = form.form.get(controlName);
+                const field = fields.find((formField) => formField.control?.name === controlName);
+                if (!control?.errors || !field) {
+                    return;
+                }
+                const configErrors = Object.keys(this._config.errors);
+                Object.keys(control.errors)
+                    .filter((error) => configErrors.includes(error))
+                    .forEach((errorKey) => {
+                    const errorObj = control.errors[errorKey];
+                    const errorTextModel = this._getConfigErrorModel(errorKey, field.errorTypes);
+                    const errorConfig = field?.errorTypes ? field?.errorTypes[errorKey] : null;
+                    const errorState = errorConfig && this._isAdvancedError(errorConfig) && errorConfig.type
+                        ? errorConfig.type
+                        : 'error';
+                    const error = {
+                        name: controlName,
+                        type: errorTextModel.type,
+                        state: convertFormState(errorState),
+                        fieldName: field?.label ?? '',
+                        element: field?.elementRef,
+                        heading: {
+                            type: 'string',
+                            error: errorObj,
+                            message: errorTextModel.heading
+                        },
+                        description: {
+                            type: 'string',
+                            error: errorObj,
+                            message: errorTextModel.description
+                        },
+                        errors: control.errors
+                    };
+                    errors[0].errors.push(error);
+                });
+            });
+        });
+        return errors;
+    }
+    /** @hidden */
+    _collectAdvancedFormData() {
+        let errors = [];
+        const fields = this.formFields.length > 0 ? this.formFields : this._projectedFormFieldControls.toArray();
+        /**
+         * Iterates over form controls to collect their errors.
+         * @param form Form Group or a collection of Form Groups.
+         */
+        const iterateOverForm = (form) => {
+            if (Array.isArray(form)) {
+                form.forEach((formGroup) => {
+                    errors = iterateOverForm(formGroup);
+                });
+                return errors;
+            }
+            Object.keys(form.controls).forEach((controlName) => {
+                const control = form.get(controlName);
+                const field = fields.find((formField) => formField.id === controlName);
+                if (control instanceof FormGroup) {
+                    errors = iterateOverForm(control);
+                }
+                if (!control?.errors || !field) {
+                    return;
+                }
+                Object.keys(control.errors).forEach((errorKey) => {
+                    const errorDirective = field.formField?.groupedErrors.find((groupedError) => groupedError.directive.error === errorKey);
+                    const groupName = this._getGroupName(field?.formField);
+                    const error = this._getErrorModel(controlName, groupName, control, field, errorKey, errorDirective, control.errors[errorKey]);
+                    let errorGroupIndex = errors.findIndex((errorGroup) => errorGroup.group === groupName);
+                    if (errorGroupIndex === -1) {
+                        errorGroupIndex =
+                            errors.push({
+                                group: groupName,
+                                errors: []
+                            }) - 1;
+                    }
+                    const group = errors[errorGroupIndex];
+                    group.errors.push(error);
+                });
+            });
+            return errors;
+        };
+        return iterateOverForm(this._ngForms.map((form) => form.form));
+    }
+    /**
+     * @hidden
+     * Creates error model
+     */
+    _getErrorModel(controlName, groupName, control, field, errorKey, errorDirective, error) {
+        let state = 'error';
+        const configError = this._config.errors[errorKey];
+        if (errorDirective?.directive.type) {
+            state = errorDirective.directive.type;
+        }
+        else if (this._isAdvancedError(configError)) {
+            state = configError.type;
+        }
+        return {
+            name: controlName,
+            type: state,
+            state: convertFormState(state),
+            group: groupName,
+            fieldName: field?.formField?.label ?? '',
+            heading: this._getErrorText(field, errorDirective, 'heading', errorKey, error),
+            description: this._getErrorText(field, errorDirective, 'description', errorKey, error),
+            errors: control.errors,
+            formField: field,
+            element: field?.elementRef
+        };
+    }
+    /**
+     * @hidden
+     * Creates error text based on the type of the error.
+     * @param field Form Field Control.
+     * @param errorDirective Optional Error directive
+     * @param section Section where text should be rendered.
+     * @param errorKey
+     * @param error
+     */
+    _getErrorText(field, errorDirective, section = 'heading', errorKey, error) {
+        const errorTextObj = {
+            error: errorDirective?.error,
+            type: errorDirective?.directive ? 'directive' : field?.formField?.i18Strings ? 'templateRef' : 'string'
+        };
+        if (errorTextObj.type === 'string') {
+            const errorTextModel = this._getConfigErrorModel(errorKey);
+            errorTextObj.error = error;
+            errorTextObj.message = errorTextModel[section];
+            return errorTextObj;
+        }
+        if (errorDirective?.directive) {
+            errorTextObj.message =
+                section === 'heading'
+                    ? (errorDirective.directive._headingTemplateRef ?? errorDirective.directive._descriptionTemplateRef)
+                    : errorDirective.directive._descriptionTemplateRef;
+            return errorTextObj;
+        }
+        errorTextObj.message = field?.formField?.i18Strings ?? null;
+        return errorTextObj;
+    }
+    /** @hidden */
+    _getGroupName(formField) {
+        const parts = [];
+        if (formField?.formGroupContainer?.mainTitle) {
+            parts.push(formField.formGroupContainer.mainTitle);
+        }
+        if (formField?.formFieldGroup?.label) {
+            parts.push(formField.formFieldGroup.label);
+        }
+        return parts.join(', ');
+    }
+    /** @hidden */
+    _getConfigErrorModel(errorKey, customErrorTypes) {
+        const configError = customErrorTypes && customErrorTypes[errorKey] ? customErrorTypes[errorKey] : this._config.errors[errorKey];
+        const isPlainError = !this._isAdvancedError(configError);
+        const errorType = isPlainError ? 'error' : configError.type;
+        const headingMessage = isPlainError ? configError : configError.heading;
+        const descriptionMessage = isPlainError ? undefined : configError.description;
+        return {
+            type: errorType,
+            heading: headingMessage,
+            description: descriptionMessage
+        };
+    }
+    /** @hidden */
+    _isAdvancedError(error) {
+        return !!error && typeof error !== 'string';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: MessagePopoverFormWrapperComponent, deps: [{ token: i0.DestroyRef }, { token: FDP_MESSAGE_POPOVER_CONFIG }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.2.1", type: MessagePopoverFormWrapperComponent, isStandalone: true, selector: "fdp-message-popover-form-wrapper", inputs: { forms: "forms", formFields: "formFields" }, queries: [{ propertyName: "_projectedForm", predicate: ControlContainer, descendants: true }, { propertyName: "_projectedFormFieldControls", predicate: FD_FORM_FIELD_CONTROL, descendants: true }, { propertyName: "_directiveItems", predicate: MessagePopoverFormItemDirective, descendants: true }], exportAs: ["messagePopoverWrapper"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: MessagePopoverFormWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'fdp-message-popover-form-wrapper',
+                    template: `<ng-content></ng-content>`,
+                    exportAs: 'messagePopoverWrapper',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    encapsulation: ViewEncapsulation.None
+                }]
+        }], ctorParameters: () => [{ type: i0.DestroyRef }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [FDP_MESSAGE_POPOVER_CONFIG]
+                }] }], propDecorators: { _projectedForm: [{
+                type: ContentChildren,
+                args: [ControlContainer, { descendants: true }]
+            }], _projectedFormFieldControls: [{
+                type: ContentChildren,
+                args: [FD_FORM_FIELD_CONTROL, { descendants: true }]
+            }], _directiveItems: [{
+                type: ContentChildren,
+                args: [MessagePopoverFormItemDirective, { descendants: true }]
+            }], forms: [{
+                type: Input
+            }], formFields: [{
+                type: Input
+            }] } });
+
+const ANIMATION_EASING = 'cubic-bezier(0, 0, 0.2, 1)';
+const ANIMATION_DURATION = 100;
+class MessagesListComponent {
+    /** Current Message Popover screen. Can be either `list` or `details`. */
+    set currentScreen(value) {
+        const prev = this._currentScreen;
+        this._currentScreen = value;
+        if (prev && prev !== value) {
+            this._animateScreenTransition(value);
+        }
+    }
+    get currentScreen() {
+        return this._currentScreen;
+    }
+    /** @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._currentScreen = 'list';
+        /** @hidden */
+        this._activeListElement = null;
+        /** @hidden */
+        this._listAnimation = null;
+        /** @hidden */
+        this._detailsAnimation = null;
+        /** @hidden */
+        this._translatePipe = inject(FdTranslatePipe);
+        /** @hidden */
+        this._additionalInfoText = this._translatePipe.transform('platformMessageView.additionalInformation');
+        this._destroyRef.onDestroy(() => {
+            this._listAnimation?.cancel();
+            this._listAnimation = null;
+            this._detailsAnimation?.cancel();
+            this._detailsAnimation = null;
+        });
+    }
+    /** @hidden */
+    ngAfterViewInit() {
+        resizeObservable(this.detailsView.nativeElement)
+            .pipe(debounceTime(20), takeUntilDestroyed(this._destroyRef))
+            .subscribe(() => {
+            const { height } = this.detailsView.nativeElement.getBoundingClientRect();
+            this.listSection.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 Map message type to icon name */
+    getIconForType(type) {
+        return getIconForMessageType(type);
+    }
+    /** @hidden Get heading text for fd-text component */
+    getHeadingText(item) {
+        if (item.heading.type === 'string' && typeof item.heading.message === 'string') {
+            return item.heading.message;
+        }
+        return '';
+    }
+    /** @hidden Get announcement text for screen reader when navigating to details */
+    getAnnouncementText(entry) {
+        let headingText = '';
+        if (entry.heading.type === 'string' && entry.heading.message) {
+            headingText = typeof entry.heading.message === 'string' ? entry.heading.message : '';
+        }
+        const additionalInfoText = this._additionalInfoText();
+        return headingText ? `${headingText}. ${additionalInfoText}` : '';
+    }
+    /** @hidden Animate the transition between list and details screens. */
+    _animateScreenTransition(screen) {
+        const listEl = this.listSection?.nativeElement;
+        const detailsEl = this.detailsSection?.nativeElement;
+        if (!listEl || !detailsEl) {
+            return;
+        }
+        this._listAnimation?.cancel();
+        this._detailsAnimation?.cancel();
+        if (screen === 'details') {
+            this._animateListToDetails(listEl, detailsEl);
+        }
+        else {
+            this._animateDetailsToList(listEl, detailsEl);
+        }
+    }
+    /** @hidden Slide list out left, details in from right. */
+    _animateListToDetails(listEl, detailsEl) {
+        if (typeof listEl.animate !== 'function') {
+            this._focusDetailsView();
+            return;
+        }
+        this._listAnimation = listEl.animate([
+            { transform: 'translateX(0)', opacity: 1 },
+            { transform: 'translateX(-50px)', opacity: 0 }
+        ], { duration: ANIMATION_DURATION, easing: ANIMATION_EASING, fill: 'forwards' });
+        this._detailsAnimation = detailsEl.animate([
+            { transform: 'translateX(50px)', opacity: 0 },
+            { transform: 'translateX(0)', opacity: 1 }
+        ], { duration: ANIMATION_DURATION, easing: ANIMATION_EASING, fill: 'forwards' });
+        this._detailsAnimation.finished
+            .then(() => {
+            this._detailsAnimation = null;
+            this._focusDetailsView();
+        })
+            .catch(() => {
+            this._detailsAnimation = null;
+        });
+    }
+    /** @hidden Slide details out right, list in from left. */
+    _animateDetailsToList(listEl, detailsEl) {
+        if (typeof listEl.animate !== 'function') {
+            return;
+        }
+        this._detailsAnimation = detailsEl.animate([
+            { transform: 'translateX(0)', opacity: 1 },
+            { transform: 'translateX(50px)', opacity: 0 }
+        ], { duration: ANIMATION_DURATION, easing: ANIMATION_EASING, fill: 'forwards' });
+        this._listAnimation = listEl.animate([
+            { transform: 'translateX(-50px)', opacity: 0 },
+            { transform: 'translateX(0)', opacity: 1 }
+        ], { duration: ANIMATION_DURATION, easing: ANIMATION_EASING, fill: 'forwards' });
+        this._listAnimation.finished
+            .then(() => {
+            this._listAnimation = null;
+            if (this._activeListElement) {
+                this._activeListElement.focus();
+                this._activeListElement = null;
+            }
+        })
+            .catch(() => {
+            this._listAnimation = null;
+        });
+    }
+    /** @hidden Focus the first interactive element in the details view. */
+    _focusDetailsView() {
+        if (!this.detailsView?.nativeElement) {
+            return;
+        }
+        // Try to find the first tabbable element in the details view
+        const firstTabbable = this._tabbableService.getTabbableElement(this.detailsView.nativeElement);
+        if (firstTabbable) {
+            firstTabbable.focus();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: MessagesListComponent, deps: [{ token: i0.DestroyRef }, { token: i1$1.TabbableElementService }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.2.1", type: MessagesListComponent, isStandalone: true, selector: "fdp-messages-list", inputs: { currentScreen: "currentScreen", filteredErrors: "filteredErrors", currentEntry: "currentEntry" }, outputs: { openDetails: "openDetails", focusItem: "focusItem", closePopover: "closePopover" }, host: { classAttribute: "fd-message-popover__view-container" }, providers: [TabbableElementService, FdTranslatePipe], viewQueries: [{ propertyName: "listView", first: true, predicate: ["listView"], descendants: true, read: ElementRef }, { propertyName: "detailsView", first: true, predicate: ["detailsView"], descendants: true, read: ElementRef }, { propertyName: "listSection", first: true, predicate: ["listSection"], descendants: true, read: ElementRef }, { propertyName: "detailsSection", first: true, predicate: ["detailsSection"], 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.description.type === 'directive'\n                ? directiveDescription\n                : item.description.type === 'string'\n                  ? stringDescription\n                  : i18nDescription\n        \"\n    ></ng-template>\n</ng-template>\n<div class=\"fd-message-view\">\n    <!-- Screen reader announcement region for details view navigation -->\n    <div aria-live=\"assertive\" aria-atomic=\"true\" class=\"fd-message-view__sr-only\">\n        @if (currentScreen === 'details' && currentEntry) {\n            {{ getAnnouncementText(currentEntry) }}\n        }\n    </div>\n    <section\n        #listSection\n        class=\"fd-message-view__list\"\n        [class.fd-message-view__list--hidden]=\"currentScreen === 'details'\"\n        [attr.inert]=\"currentScreen === 'details' ? '' : null\"\n        [attr.aria-hidden]=\"currentScreen === 'details'\"\n        tabindex=\"-1\"\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\n                        fd-list-item\n                        [tabindex]=\"i === 0 ? 0 : -1\"\n                        [byline]=\"true\"\n                        [counter]=\"item.aggregatedMessages!\"\n                        (fdkClicked)=\"showDetails(item)\"\n                    >\n                        <ng-template #itemIcon>\n                            <span\n                                fd-object-status\n                                class=\"fd-list__icon\"\n                                [status]=\"item.state\"\n                                [glyph]=\"getIconForType(item.type)\"\n                            ></span>\n                        </ng-template>\n                        <ng-template #listSubtitle>\n                            @if (item.heading.type === 'string' && item.heading.message) {\n                                <fd-text\n                                    [text]=\"getHeadingText(item)\"\n                                    [maxLines]=\"3\"\n                                    [expandable]=\"true\"\n                                    (fdkClicked)=\"$event.stopPropagation()\"\n                                ></fd-text>\n                            } @else {\n                                <span fd-list-subline>\n                                    <ng-template\n                                        [ngTemplateOutlet]=\"headingTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                                    ></ng-template>\n                                </span>\n                            }\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 (fdkClicked)=\"_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\n        #detailsSection\n        class=\"fd-message-view__details\"\n        [class.fd-message-view__details--visible]=\"currentScreen === 'details'\"\n        [attr.inert]=\"currentScreen === 'list' ? '' : null\"\n        [attr.aria-hidden]=\"currentScreen === 'list'\"\n    >\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]=\"getIconForType(currentEntry.type)\"\n                    ></span>\n                    <ng-template\n                        [ngTemplateOutlet]=\"headingTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                    ></ng-template>\n                </span>\n                @if (currentEntry.subtitle) {\n                    <span class=\"fd-message-view__details-subtitle\">\n                        {{ currentEntry.subtitle }}\n                    </span>\n                }\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                @if (currentEntry.link) {\n                    <span class=\"fd-message-view__details-link\">\n                        @if (currentEntry.link.href) {\n                            <a\n                                fd-link\n                                [attr.href]=\"currentEntry.link.href\"\n                                [attr.target]=\"currentEntry.link.target || '_blank'\"\n                            >\n                                {{ currentEntry.link.text }}\n                            </a>\n                        } @else {\n                            <a fd-link tabindex=\"0\" (fdkClicked)=\"currentEntry.link.callback?.()\">\n                                {{ currentEntry.link.text }}\n                            </a>\n                        }\n                    </span>\n                }\n            }\n        </div>\n    </section>\n</div>\n", styles: [".fd-message-view__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.fd-message-view__details-subtitle{display:block;color:var(--sapContent_LabelColor);margin-block-start:.25rem;margin-block-end:.5rem}.message-popover__list.fd-list--navigation-indication .fd-list__link--navigation-indicator:after{min-width:3rem}.fd-list__content fd-text{display:block;width:100%}.fd-list__content fd-text .fd-text{white-space:normal;margin:0;padding:0;line-height:normal}.fd-list__content fd-text .fd-text__lineclamp{display:block;line-height:normal}.fd-list__content fd-text .fd-text__link--more{pointer-events:auto}.fd-list__content fd-text .fd-text__link--more:hover{text-decoration:underline}\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", "subline", "theme", "unreadIndicator", "role", "settingsList", "settingsListFooter", "notification", "searchResultsList"], outputs: ["focusEscapeList"] }, { kind: "component", type: i2.ListItemComponent, selector: "[fdListItem] ,[fd-list-item]", inputs: ["selected", "noData", "action", "interactive", "growing", "counter", "counterRole", "counterAriaLabel", "active", "unread", "byline", "ariaRole", "id", "preventClick", "settingsListTpl", "suggestion"], outputs: ["keyDown"], exportAs: ["fdListItem"] }, { kind: "directive", type: i2.ListTitleDirective, selector: "[fd-list-title], [fdListTitle]", inputs: ["wrap", "truncate", "scope"] }, { 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: "directive", type: i2.ListSublineDirective, selector: "[fdListSubline], [fd-list-subline]", inputs: ["truncate"] }, { kind: "component", type: ObjectStatusComponent, selector: "[fd-object-status]", inputs: ["status", "statusMessage", "glyph", "glyphFont", "label", "ariaLabel", "glyphAriaLabel", "indicationColor", "clickable", "inverted", "large", "secondaryIndication", "textTemplate", "ariaRoleDescription"] }, { kind: "component", type: LinkComponent, selector: "[fdLink], [fd-link]", inputs: ["emphasized", "disabled", "inverted", "subtle", "undecorated", "touchTarget"] }, { kind: "directive", type: ClickedDirective, selector: "[fdkClicked]", outputs: ["fdkClicked"] }, { kind: "component", type: TextComponent, selector: "fd-text", inputs: ["text", "maxLines", "whitespaces", "hyphenation", "expandable", "isCollapsed", "subline"], outputs: ["isCollapsedChange"] }, { kind: "pipe", type: FdTranslatePipe, name: "fdTranslate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: MessagesListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fdp-messages-list', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [TabbableElementService, FdTranslatePipe], host: {
+                        class: 'fd-message-popover__view-container'
+                    }, imports: [
+                        NgTemplateOutlet,
+                        CdkScrollable,
+                        ScrollbarDirective,
+                        ListModule,
+                        ObjectStatusComponent,
+                        LinkComponent,
+                        FdTranslatePipe,
+                        ClickedDirective,
+                        TextComponent
+                    ], 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.description.type === 'directive'\n                ? directiveDescription\n                : item.description.type === 'string'\n                  ? stringDescription\n                  : i18nDescription\n        \"\n    ></ng-template>\n</ng-template>\n<div class=\"fd-message-view\">\n    <!-- Screen reader announcement region for details view navigation -->\n    <div aria-live=\"assertive\" aria-atomic=\"true\" class=\"fd-message-view__sr-only\">\n        @if (currentScreen === 'details' && currentEntry) {\n            {{ getAnnouncementText(currentEntry) }}\n        }\n    </div>\n    <section\n        #listSection\n        class=\"fd-message-view__list\"\n        [class.fd-message-view__list--hidden]=\"currentScreen === 'details'\"\n        [attr.inert]=\"currentScreen === 'details' ? '' : null\"\n        [attr.aria-hidden]=\"currentScreen === 'details'\"\n        tabindex=\"-1\"\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\n                        fd-list-item\n                        [tabindex]=\"i === 0 ? 0 : -1\"\n                        [byline]=\"true\"\n                        [counter]=\"item.aggregatedMessages!\"\n                        (fdkClicked)=\"showDetails(item)\"\n                    >\n                        <ng-template #itemIcon>\n                            <span\n                                fd-object-status\n                                class=\"fd-list__icon\"\n                                [status]=\"item.state\"\n                                [glyph]=\"getIconForType(item.type)\"\n                            ></span>\n                        </ng-template>\n                        <ng-template #listSubtitle>\n                            @if (item.heading.type === 'string' && item.heading.message) {\n                                <fd-text\n                                    [text]=\"getHeadingText(item)\"\n                                    [maxLines]=\"3\"\n                                    [expandable]=\"true\"\n                                    (fdkClicked)=\"$event.stopPropagation()\"\n                                ></fd-text>\n                            } @else {\n                                <span fd-list-subline>\n                                    <ng-template\n                                        [ngTemplateOutlet]=\"headingTemplate\"\n                                        [ngTemplateOutletContext]=\"{ $implicit: item }\"\n                                    ></ng-template>\n                                </span>\n                            }\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 (fdkClicked)=\"_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\n        #detailsSection\n        class=\"fd-message-view__details\"\n        [class.fd-message-view__details--visible]=\"currentScreen === 'details'\"\n        [attr.inert]=\"currentScreen === 'list' ? '' : null\"\n        [attr.aria-hidden]=\"currentScreen === 'list'\"\n    >\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]=\"getIconForType(currentEntry.type)\"\n                    ></span>\n                    <ng-template\n                        [ngTemplateOutlet]=\"headingTemplate\"\n                        [ngTemplateOutletContext]=\"{ $implicit: currentEntry }\"\n                    ></ng-template>\n                </span>\n                @if (currentEntry.subtitle) {\n                    <span class=\"fd-message-view__details-subtitle\">\n                        {{ currentEntry.subtitle }}\n                    </span>\n                }\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                @if (currentEntry.link) {\n                    <span class=\"fd-message-view__details-link\">\n                        @if (currentEntry.link.href) {\n                            <a\n                                fd-link\n                                [attr.href]=\"currentEntry.link.href\"\n                                [attr.target]=\"currentEntry.link.target || '_blank'\"\n                            >\n                                {{ currentEntry.link.text }}\n                            </a>\n                        } @else {\n                            <a fd-link tabindex=\"0\" (fdkClicked)=\"currentEntry.link.callback?.()\">\n                                {{ currentEntry.link.text }}\n                            </a>\n                        }\n                    </span>\n                }\n            }\n        </div>\n    </section>\n</div>\n", styles: [".fd-message-view__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.fd-message-view__details-subtitle{display:block;color:var(--sapContent_LabelColor);margin-block-start:.25rem;margin-block-end:.5rem}.message-popover__list.fd-list--navigation-indication .fd-list__link--navigation-indicator:after{min-width:3rem}.fd-list__content fd-text{display:block;width:100%}.fd-list__content fd-text .fd-text{white-space:normal;margin:0;padding:0;line-height:normal}.fd-list__content fd-text .fd-text__lineclamp{display:block;line-height:normal}.fd-list__content fd-text .fd-text__link--more{pointer-events:auto}.fd-list__content fd-text .fd-text__link--more:hover{text-decoration:underline}\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 }]
+            }], listSection: [{
+                type: ViewChild,
+                args: ['listSection', { read: ElementRef }]
+            }], detailsSection: [{
+                type: ViewChild,
+                args: ['detailsSection', { read: ElementRef }]
+            }] } });
+
+/**
+ * Abstract base class for message list components (MessagePopover and MessageView).
+ * Contains shared logic for managing error states, filtering, and navigation between list/detail views.
+ */
+class MessageListShared {
+    constructor() {
+        /** 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';
+        /** Current error entry. */
+        this.currentEntry = null;
+        /** @hidden */
+        this._currentErrorType = signal('all', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_currentErrorType" }] : /* istanbul ignore next */ []));
+        /** @hidden */
+        this._errorTypes$ = computed(() => {
+            const countedErrors = this.countedErrors$();
+            const errorTypes = Object.keys(countedErrors);
+            return errorTypes.map((errorType) => ({
+                group: errorType,
+                count: countedErrors[errorType],
+                state: convertFormState(errorType)
+            }));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_errorTypes$" }] : /* istanbul ignore next */ []));
+        /** @hidden */
+        this._priorityStateItemsCount$ = computed(() => this.countedErrors$()[this._priorityFormState$()] || 0, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_priorityStateItemsCount$" }] : /* istanbul ignore next */ []));
+        /** @hidden */
+        this._priorityFormState$ = computed(() => {
+            const countedErrors = this.countedErrors$();
+            const errorTypes = Object.keys(countedErrors);
+            return getFormState(errorTypes);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_priorityFormState$" }] : /* istanbul ignore next */ []));
+        /** @hidden */
+        this._priorityState$ = computed(() => convertFormStateToMessagePopoverState(this._priorityFormState$()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_priorityState$" }] : /* istanbul ignore next */ []));
+        /** @hidden */
+        this._filteredErrors$ = computed(() => {
+            const groupedErrors = this.groupedErrors$();
+            const errorType = this._currentErrorType();
+            if (errorType === 'all') {
+                return groupedErrors;
+            }
+            const filteredErrors = [];
+            groupedErrors.forEach((group) => {
+                const errors = group.errors.filter((error) => error.type === errorType);
+                if (errors.length === 0) {
+                    return;
+                }
+                filteredErrors.push({
+                    group: group.group,
+                    errors
+                });
+            });
+            return filteredErrors;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_filteredErrors$" }] : /* istanbul ignore next */ []));
+        /** @hidden */
+        this.groupedErrors$ = computed(() => this.wrapper$()?.errors$() || [], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupedErrors$" }] : /* istanbul ignore next */ []));
+        /** @hidden */
+        this.wrapper$ = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "wrapper$" }] : /* istanbul ignore next */ []));
+        /** @hidden */
+        this.countedErrors$ = computed(() => {
+            const allErrors = this.groupedErrors$().flatMap((group) => group.errors);
+            return countBy(allErrors, 'type');
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "countedErrors$" }] : /* istanbul ignore next */ []));
+    }
+    /** @hidden */
+    showList() {
+        this.currentScreen = 'list';
+        this.currentEntry = null;
+    }
+    /** @hidden */
+    showDetails(entry) {
+        this.currentScreen = 'details';
+        this.currentEntry = entry;
+    }
+}
+
+/**
+ * @deprecated
+ * Use direct imports of components and directives.
+ */
+class PlatformMessagesSharedModule {
+    /**
+     * Method allows users to apply custom configuration.
+     * @param config Object containing error definitions.
+     */
+    static withConfig(config) {
+        const customConfig = mergeWith(FDP_MESSAGE_POPOVER_DEFAULT_CONFIG, config, (obj, src) => {
+            if (typeof obj === 'object' && !Array.isArray(obj)) {
+                return Object.assign(obj, src);
+            }
+            else if (Array.isArray(obj)) {
+                return obj.concat(src);
+            }
+            else {
+                return src;
+            }
+        });
+        return {
+            ngModule: PlatformMessagesSharedModule,
+            providers: [
+                {
+                    provide: FDP_MESSAGE_POPOVER_CONFIG,
+                    useValue: customConfig
+                }
+            ]
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PlatformMessagesSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.2.1", ngImport: i0, type: PlatformMessagesSharedModule, imports: [MessagePopoverFormWrapperComponent, MessagesListComponent, MessagePopoverFormItemDirective], exports: [MessagePopoverFormWrapperComponent, MessagesListComponent, MessagePopoverFormItemDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PlatformMessagesSharedModule, providers: [
+            {
+                provide: FDP_MESSAGE_POPOVER_CONFIG,
+                useValue: FDP_MESSAGE_POPOVER_DEFAULT_CONFIG
+            }
+        ], imports: [MessagesListComponent] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.2.1", ngImport: i0, type: PlatformMessagesSharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [MessagePopoverFormWrapperComponent, MessagesListComponent, MessagePopoverFormItemDirective],
+                    exports: [MessagePopoverFormWrapperComponent, MessagesListComponent, MessagePopoverFormItemDirective],
+                    providers: [
+                        {
+                            provide: FDP_MESSAGE_POPOVER_CONFIG,
+                            useValue: FDP_MESSAGE_POPOVER_DEFAULT_CONFIG
+                        }
+                    ]
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FDP_MESSAGE_POPOVER_CONFIG, FDP_MESSAGE_POPOVER_DEFAULT_CONFIG, MessageListShared, MessagePopoverFormItemDirective, MessagePopoverFormWrapperComponent, MessagesListComponent, PlatformMessagesSharedModule, convertFormState, convertFormStateToMessagePopoverState, getIconForMessageType };
+//# sourceMappingURL=fundamental-ngx-platform-messages-shared.mjs.map