@dbg-riskit/angular-error 9999.9999.9999-rc.445675 → 9999.9999.9999-rc.4579154

package/docs/README.md

@@ -1,13 +1,12 @@
-![CI](https://github.deutsche-boerse.de/dev/risk-angular-common/workflows/CI/badge.svg?event=push)
-![lint-bash](https://github.deutsche-boerse.de/dev/risk-angular-common/workflows/lint-bash/badge.svg?event=push)
-![lint-docker](https://github.deutsche-boerse.de/dev/risk-angular-common/workflows/lint-docker/badge.svg?event=push)
+![CI](https://github.deutsche-boerse.de/RiskIT/risk-angular-common/workflows/CI/badge.svg?event=push)
+![lint-bash](https://github.deutsche-boerse.de/RiskIT/risk-angular-common/workflows/lint-bash/badge.svg?event=push)
+![lint-docker](https://github.deutsche-boerse.de/RiskIT/risk-angular-common/workflows/lint-docker/badge.svg?event=push)
 
 # risk-angular-common (Angular 13 and @angular/material based library for RiskIT applications)
 
 Used by:
- - [dev/DAVe-UI](https://github.deutsche-boerse.de/dev/DAVe-UI)
- - [dev/DAVe-MarginEstimator-UI](https://github.deutsche-boerse.de/dev/DAVe-MarginEstimator-UI)
- - [dev/MDH-UI](https://github.deutsche-boerse.de/dev/MDH-UI)
+ - [RiskIT/CPME-UI](https://github.deutsche-boerse.de/RiskIT/CPME-UI)
+ - [RiskIT/MDH-UI](https://github.deutsche-boerse.de/RiskIT/MDH-UI)
  - [RiskIT/openid-k8s-token-generator](https://github.deutsche-boerse.de/RiskIT/openid-k8s-token-generator)
 
 ## Packages

package/fesm2022/dbg-riskit-angular-error.mjs

@@ -1,17 +1,16 @@
 import * as i0 from '@angular/core';
-import { ErrorHandler, Injectable, Optional, Inject, Component, ChangeDetectionStrategy, Input, EventEmitter, ViewChildren, NgModule } from '@angular/core';
-import { AUTH_PROVIDER, DATE_FORMAT } from '@dbg-riskit/angular-common';
+import { ErrorHandler, inject, Injectable, Injector, signal, input, afterNextRender, ChangeDetectionStrategy, Component, viewChildren, computed, effect, untracked } from '@angular/core';
+import { AUTH_PROVIDER, DATE_FORMAT, intervalSignal } from '@dbg-riskit/angular-common';
 import { toString, ErrorType } from '@dbg-riskit/common';
-import { ReplaySubject, EMPTY, Subject, merge, timer } from 'rxjs';
-import { trigger, state, style, transition, animate, keyframes } from '@angular/animations';
-import { BaseComponent, CommonViewModule } from '@dbg-riskit/angular-view';
-import { filter, takeUntil, map, catchError, defaultIfEmpty } from 'rxjs/operators';
-import * as i1 from '@angular/common';
-import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/material/card';
-import * as i3 from '@angular/material/icon';
-import * as i3$1 from '@angular/material/button';
-import * as i5 from '@angular/material/menu';
+import { ReplaySubject, EMPTY } from 'rxjs';
+import { trigger, state, transition, style, animate, keyframes } from '@angular/animations';
+import { toSignal } from '@angular/core/rxjs-interop';
+import { MatIconButton } from '@angular/material/button';
+import { MatIcon } from '@angular/material/icon';
+import { MatMenu, MatMenuTrigger } from '@angular/material/menu';
+import { DatePipe } from '@angular/common';
+import { MatCard, MatCardAvatar, MatCardContent, MatCardHeader, MatCardSubtitle, MatCardTitle } from '@angular/material/card';
+import { catchError, defaultIfEmpty } from 'rxjs/operators';
 
 function toErrorMessage(err) {
     let errorMessage;
@@ -34,9 +33,10 @@ function toErrorMessage(err) {
     return errorMessage;
 }
 class ErrorCollectorService extends ErrorHandler {
-    constructor(authProvider) {
+    constructor() {
         super();
         this._errorObservable = new ReplaySubject(10);
+        const authProvider = inject(AUTH_PROVIDER, { optional: true });
         if (authProvider) {
             authProvider.loggedInStream.subscribe((auth) => {
                 this._errorObservable = new ReplaySubject(10);
@@ -61,41 +61,36 @@ class ErrorCollectorService extends ErrorHandler {
         this.handleError(err);
         return EMPTY;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorCollectorService, deps: [{ token: AUTH_PROVIDER, optional: true }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorCollectorService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ErrorCollectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ErrorCollectorService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorCollectorService, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [AUTH_PROVIDER]
-                }] }]; } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ErrorCollectorService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
-class ErrorMessageComponent {
-    constructor(dateFormat, changeDetectorRef) {
-        this.dateFormat = dateFormat;
-        this.changeDetectorRef = changeDetectorRef;
-        this.readState = null;
-        this.isLast = false;
+class RiskErrorMessageComponent {
+    constructor() {
+        this.dateFormat = inject(DATE_FORMAT);
+        this.injector = inject(Injector);
+        this.readState = signal(null, ...(ngDevMode ? [{ debugName: "readState" }] : []));
+        this.error = input.required(...(ngDevMode ? [{ debugName: "error" }] : []));
+        this.isLast = input(false, ...(ngDevMode ? [{ debugName: "isLast" }] : []));
     }
     animate() {
-        if (this.error != null && !this.error.read && this.readState !== 'read') {
-            setTimeout(() => {
-                this.readState = 'read';
-                this.changeDetectorRef.markForCheck();
-            });
+        const err = this.error();
+        if (!err.read() && this.readState() !== 'read') {
+            afterNextRender(() => this.readState.set('read'), { injector: this.injector });
         }
     }
     markRead(event) {
-        if (this.error != null && event.toState === 'read') {
-            this.error.markRead();
-            this.changeDetectorRef.markForCheck();
+        const err = this.error();
+        if (err && event.toState === 'read') {
+            err.markRead();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorMessageComponent, deps: [{ token: DATE_FORMAT }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ErrorMessageComponent, selector: "risk-error-message", inputs: { error: "error", isLast: "isLast" }, host: { properties: { "class.risk-error-message": "true" } }, ngImport: i0, template: "<mat-card [class.risk-error-message-last]=\"isLast\" [@readState]=\"readState\" (@readState.done)=\"markRead($event)\">\n    <mat-card-header>\n        <mat-icon color=\"warn\" mat-card-avatar>error_outline</mat-icon>\n        <mat-card-title *ngIf=\"error?.type.isNetworkError()\">Network error</mat-card-title>\n        <mat-card-title *ngIf=\"error?.type.isRequestError()\">API error</mat-card-title>\n        <mat-card-title *ngIf=\"error?.type.isAuthError()\">Authorization error</mat-card-title>\n        <mat-card-title\n            *ngIf=\"!error?.type.isNetworkError() && !error?.type.isRequestError() && !error?.type.isAuthError()\">\n            General error\n        </mat-card-title>\n        <mat-card-subtitle>{{error?.date | date:dateFormat}}</mat-card-subtitle>\n    </mat-card-header>\n    <mat-card-content>\n        <p *ngIf=\"error?.statusCode\" class=\"risk-error-message-code\">Error code: {{error?.statusCode}}</p>\n        <p>\n            {{error?.message}}\n        </p>\n    </mat-card-content>\n</mat-card>\n", styles: [":host{display:block;padding:0;margin:0}:host>*{vertical-align:bottom}\n", ":host .mat-mdc-card{margin:0 10px 7px}:host .mat-mdc-card.risk-error-message-last{margin-bottom:0}:host .mat-mdc-card .mat-mdc-card-subtitle{margin-bottom:5px}:host .mat-mdc-card p{margin:0}:host .mat-mdc-card p.risk-error-message-code{position:absolute;bottom:10px;right:10px}:host .mat-mdc-card p.risk-error-message-code+p:last-child{margin-bottom:15px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i2.MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: i2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: i2.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i2.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i2.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RiskErrorMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RiskErrorMessageComponent, isStandalone: true, selector: "risk-error-message", inputs: { error: { classPropertyName: "error", publicName: "error", isSignal: true, isRequired: true, transformFunction: null }, isLast: { classPropertyName: "isLast", publicName: "isLast", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.risk-error-message": "true" } }, ngImport: i0, template: "<mat-card (@readState.done)=\"markRead($event)\" [@readState]=\"readState()\" [class.risk-error-message-last]=\"isLast()\">\n    @let err = error();\n    <mat-card-header>\n        <mat-icon color=\"warn\" mat-card-avatar>error_outline</mat-icon>\n        @if (err.type.isNetworkError()) {\n            <mat-card-title>Network error</mat-card-title>\n        }\n        @if (err.type.isRequestError()) {\n            <mat-card-title>API error</mat-card-title>\n        }\n        @if (err.type.isAuthError()) {\n            <mat-card-title>Authorization error</mat-card-title>\n        }\n        @if (!err.type.isNetworkError() && !err.type.isRequestError() && !err.type.isAuthError()) {\n            <mat-card-title>General error</mat-card-title>\n        }\n        <mat-card-subtitle>{{ err.date | date:dateFormat }}</mat-card-subtitle>\n    </mat-card-header>\n    <mat-card-content>\n        @if (err.statusCode) {\n            <p class=\"risk-error-message-code\">Error code: {{ err.statusCode }}</p>\n        }\n        <p> {{ err.message }} </p>\n    </mat-card-content>\n</mat-card>\n", styles: [":host{display:block;padding:0;margin:0}:host>*{vertical-align:bottom}\n", ":host .mat-mdc-card{margin:0 10px 7px}:host .mat-mdc-card.risk-error-message-last{margin-bottom:0}:host .mat-mdc-card .mat-mdc-card-subtitle{margin-bottom:5px}:host .mat-mdc-card p{margin:0}:host .mat-mdc-card p.risk-error-message-code{position:absolute;bottom:10px;right:10px}:host .mat-mdc-card p.risk-error-message-code+p:last-child{margin-bottom:15px}\n"], dependencies: [{ kind: "component", type: MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: MatCardAvatar, selector: "[mat-card-avatar], [matCardAvatar]" }, { kind: "directive", type: MatCardContent, selector: "mat-card-content" }, { kind: "component", type: MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "pipe", type: DatePipe, name: "date" }], animations: [
             trigger('readState', [
                 state('read', style({ background: 'transparent' })),
                 transition(':enter', [
@@ -109,9 +104,7 @@ class ErrorMessageComponent {
                     }))
                 ]),
                 transition('* => read', [
-                    style({
-                        background: 'transparent'
-                    }),
+                    style({ background: 'transparent' }),
                     animate('1500ms', keyframes([
                         style({
                             background: 'rgba(204, 51, 51, .5)',
@@ -134,9 +127,18 @@ class ErrorMessageComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorMessageComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RiskErrorMessageComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'risk-error-message', animations: [
+            args: [{ selector: 'risk-error-message', changeDetection: ChangeDetectionStrategy.OnPush, host: { '[class.risk-error-message]': 'true' }, imports: [
+                        DatePipe,
+                        MatCard,
+                        MatCardAvatar,
+                        MatCardContent,
+                        MatCardHeader,
+                        MatCardSubtitle,
+                        MatCardTitle,
+                        MatIcon
+                    ], animations: [
                         trigger('readState', [
                             state('read', style({ background: 'transparent' })),
                             transition(':enter', [
@@ -150,9 +152,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 }))
                             ]),
                             transition('* => read', [
-                                style({
-                                    background: 'transparent'
-                                }),
+                                style({ background: 'transparent' }),
                                 animate('1500ms', keyframes([
                                     style({
                                         background: 'rgba(204, 51, 51, .5)',
@@ -173,23 +173,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 ]))
                             ])
                         ])
-                    ], host: {
-                        '[class.risk-error-message]': 'true'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<mat-card [class.risk-error-message-last]=\"isLast\" [@readState]=\"readState\" (@readState.done)=\"markRead($event)\">\n    <mat-card-header>\n        <mat-icon color=\"warn\" mat-card-avatar>error_outline</mat-icon>\n        <mat-card-title *ngIf=\"error?.type.isNetworkError()\">Network error</mat-card-title>\n        <mat-card-title *ngIf=\"error?.type.isRequestError()\">API error</mat-card-title>\n        <mat-card-title *ngIf=\"error?.type.isAuthError()\">Authorization error</mat-card-title>\n        <mat-card-title\n            *ngIf=\"!error?.type.isNetworkError() && !error?.type.isRequestError() && !error?.type.isAuthError()\">\n            General error\n        </mat-card-title>\n        <mat-card-subtitle>{{error?.date | date:dateFormat}}</mat-card-subtitle>\n    </mat-card-header>\n    <mat-card-content>\n        <p *ngIf=\"error?.statusCode\" class=\"risk-error-message-code\">Error code: {{error?.statusCode}}</p>\n        <p>\n            {{error?.message}}\n        </p>\n    </mat-card-content>\n</mat-card>\n", styles: [":host{display:block;padding:0;margin:0}:host>*{vertical-align:bottom}\n", ":host .mat-mdc-card{margin:0 10px 7px}:host .mat-mdc-card.risk-error-message-last{margin-bottom:0}:host .mat-mdc-card .mat-mdc-card-subtitle{margin-bottom:5px}:host .mat-mdc-card p{margin:0}:host .mat-mdc-card p.risk-error-message-code{position:absolute;bottom:10px;right:10px}:host .mat-mdc-card p.risk-error-message-code+p:last-child{margin-bottom:15px}\n"] }]
-        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DATE_FORMAT]
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { error: [{
-                type: Input
-            }], isLast: [{
-                type: Input
-            }] } });
+                    ], template: "<mat-card (@readState.done)=\"markRead($event)\" [@readState]=\"readState()\" [class.risk-error-message-last]=\"isLast()\">\n    @let err = error();\n    <mat-card-header>\n        <mat-icon color=\"warn\" mat-card-avatar>error_outline</mat-icon>\n        @if (err.type.isNetworkError()) {\n            <mat-card-title>Network error</mat-card-title>\n        }\n        @if (err.type.isRequestError()) {\n            <mat-card-title>API error</mat-card-title>\n        }\n        @if (err.type.isAuthError()) {\n            <mat-card-title>Authorization error</mat-card-title>\n        }\n        @if (!err.type.isNetworkError() && !err.type.isRequestError() && !err.type.isAuthError()) {\n            <mat-card-title>General error</mat-card-title>\n        }\n        <mat-card-subtitle>{{ err.date | date:dateFormat }}</mat-card-subtitle>\n    </mat-card-header>\n    <mat-card-content>\n        @if (err.statusCode) {\n            <p class=\"risk-error-message-code\">Error code: {{ err.statusCode }}</p>\n        }\n        <p> {{ err.message }} </p>\n    </mat-card-content>\n</mat-card>\n", styles: [":host{display:block;padding:0;margin:0}:host>*{vertical-align:bottom}\n", ":host .mat-mdc-card{margin:0 10px 7px}:host .mat-mdc-card.risk-error-message-last{margin-bottom:0}:host .mat-mdc-card .mat-mdc-card-subtitle{margin-bottom:5px}:host .mat-mdc-card p{margin:0}:host .mat-mdc-card p.risk-error-message-code{position:absolute;bottom:10px;right:10px}:host .mat-mdc-card p.risk-error-message-code+p:last-child{margin-bottom:15px}\n"] }]
+        }], propDecorators: { error: [{ type: i0.Input, args: [{ isSignal: true, alias: "error", required: true }] }], isLast: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLast", required: false }] }] } });
 
 class ErrorMessageWrapper {
     constructor(error) {
         this._date = new Date();
-        this._read = false;
-        this.readStateChanged = new EventEmitter();
+        this.read = signal(false, ...(ngDevMode ? [{ debugName: "read" }] : []));
         this._error = error;
     }
     get message() {
@@ -204,14 +194,9 @@ class ErrorMessageWrapper {
     get date() {
         return this._date;
     }
-    get read() {
-        return this._read;
-    }
     markRead() {
-        if (!this._read) {
-            this._read = true;
-            this.readStateChanged.emit(this._read);
-            this.readStateChanged.complete();
+        if (!this.read()) {
+            this.read.set(true);
         }
     }
 }
@@ -254,104 +239,79 @@ const JIGGLE_ANIMATION = animate('1s ease-in', keyframes([
         offset: 0.9
     })
 ]));
-class ErrorComponent extends BaseComponent {
-    constructor(errorCollector, authProvider, changeDetectorRef) {
-        super();
-        this.errorCollector = errorCollector;
-        this.authProvider = authProvider;
-        this.changeDetectorRef = changeDetectorRef;
-        this.state = null;
+class RiskErrorComponent {
+    constructor() {
+        this.errorCollector = inject(ErrorCollectorService);
+        this.authProvider = inject(AUTH_PROVIDER, { optional: true });
+        this.state = signal(null, ...(ngDevMode ? [{ debugName: "state" }] : []));
+        this.keepVisibleOnClick = input(...(ngDevMode ? [undefined, { debugName: "keepVisibleOnClick" }] : []));
+        this.errorMessages = viewChildren(RiskErrorMessageComponent, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
+        this.lastErrorFromCollector = toSignal(this.errorCollector.errorStream);
+        this.authenticated = this.authProvider == null
+            ? signal(true)
+            : toSignal(this.authProvider.loggedInStream, { initialValue: false });
         this._errors = [];
-        this._menuState = new Subject();
-    }
-    ngOnInit() {
-        // Init Jiggle animation loop
-        this.initAnimation();
-        // Subscribe to error stream
-        this.subscribeToErrors();
-        // Once opened animate messages and set as read after animation
-        this._menuState.pipe(filter((opened) => opened), takeUntil(this.destroyed)).subscribe(() => this.animateOnMenuOpened());
-        // Refresh on "logged-in" state changes
-        if (this.authProvider) {
-            this.authProvider.loggedInStream.pipe(takeUntil(this.destroyed)).subscribe((auth) => this.loggedInChanged(auth));
-        }
-    }
-    animateOnMenuOpened() {
-        const animateMessages = () => this.errorMessages.forEach((message) => message.animate());
-        animateMessages();
-        this.errorMessages.changes.pipe(takeUntil(merge(this.destroyed, this._menuState))).subscribe(() => animateMessages());
-    }
-    loggedInChanged(auth) {
-        // Subscribe to errors once logged in again
-        if (auth) {
-            this.subscribeToErrors();
-        }
-        else {
-            while (this._errors.length > 0) {
+        this.errors = computed(() => {
+            if (!this.authenticated()) {
+                this._errors = [];
+                return this._errors;
+            }
+            const lastError = this.lastErrorFromCollector();
+            if (!lastError) {
+                return this._errors;
+            }
+            const errorMessageWrapper = new ErrorMessageWrapper(lastError);
+            this._errors.unshift(errorMessageWrapper);
+            while (this._errors.length > 10) {
                 this._errors.pop();
             }
-        }
-        this.changeDetectorRef.markForCheck();
-    }
-    subscribeToErrors() {
-        let until = this.destroyed;
-        // Stop receiving errors once user was logged out
-        if (this.authProvider) {
-            until = merge(until, this.authProvider.loggedInStream.pipe(filter((auth) => !auth), map(() => undefined)));
-        }
-        this.errorCollector.errorStream.pipe(takeUntil(until)).subscribe((error) => this.errorReceived(error, until));
-    }
-    errorReceived(error, until) {
-        const errorMessageWrapper = new ErrorMessageWrapper(error);
-        // Subscribe for state changes
-        errorMessageWrapper.readStateChanged.pipe(takeUntil(until)).subscribe(() => this.changeDetectorRef.detectChanges());
-        this._errors.unshift(errorMessageWrapper);
-        while (this._errors.length > 10) {
-            this._errors.pop();
-        }
-        this.changeDetectorRef.markForCheck();
-    }
-    get color() {
-        if (this.errors.some((error) => !error.read)) {
-            return 'warn';
-        }
-        return null;
-    }
-    menuOpened() {
-        this._menuState.next(true);
-    }
-    menuClosed() {
-        this._menuState.next(false);
-    }
-    get errors() {
-        return this._errors;
+            return [...this._errors];
+        }, ...(ngDevMode ? [{ debugName: "errors" }] : []));
+        this.color = computed(() => {
+            for (const error of this.errors()) {
+                if (!error.read()) {
+                    return 'warn';
+                }
+            }
+            return null;
+        }, ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.menuOpened = signal(false, ...(ngDevMode ? [{ debugName: "menuOpened" }] : []));
+        effect(() => {
+            if (this.menuOpened()) {
+                for (const message of this.errorMessages()) {
+                    message.animate();
+                }
+            }
+        });
+        const timerSignal = intervalSignal(100, 2000);
+        effect(() => {
+            timerSignal();
+            let animate = false;
+            for (const error of untracked(this.errors)) {
+                if (!error.read()) {
+                    animate = true;
+                    break;
+                }
+            }
+            if (animate) {
+                switch (untracked(this.state)) {
+                    case null:
+                        this.state.set('active');
+                        break;
+                    case 'active':
+                        this.state.set('newError');
+                        break;
+                }
+            }
+        });
     }
-    // <editor-fold desc="Animation control" defaultstate="collapsed">
     animationDone(event) {
         if (event.toState === 'newError') {
-            // Reset after annimation
-            this.state = 'active';
-            // Called from animation controller we need to re-check
-            this.changeDetectorRef.markForCheck();
+            this.state.set('active');
         }
     }
-    initAnimation() {
-        timer(100, 2000).pipe(
-        // Run animation everytime we have non-read errors
-        filter(() => this.errors.some((error) => !error.read)), takeUntil(this.destroyed)).subscribe(() => {
-            switch (this.state) {
-                case null:
-                    this.state = 'active';
-                    break;
-                case 'active':
-                    this.state = 'newError';
-                    break;
-            }
-            this.changeDetectorRef.markForCheck();
-        });
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorComponent, deps: [{ token: ErrorCollectorService }, { token: AUTH_PROVIDER, optional: true }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ErrorComponent, selector: "risk-error-menu", inputs: { keepVisibleOnClick: "keepVisibleOnClick" }, host: { properties: { "class.risk-error-menu": "true" } }, viewQueries: [{ propertyName: "errorMessages", predicate: ErrorMessageComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: "<button *ngIf=\"state != null\"\n        mat-icon-button\n        [color]=\"color\"\n        type=\"button\"\n        [@buttonState]=\"state\"\n        (@buttonState.done)=\"animationDone($event)\"\n        [matMenuTriggerFor]=\"errorMenu\"\n        #errorMenuTrigger=\"matMenuTrigger\"\n        (menuOpened)=\"menuOpened()\"\n        (menuClosed)=\"menuClosed()\"\n        [class.risk-menu-open]=\"errorMenuTrigger.menuOpen\">\n    <mat-icon>error_outline</mat-icon>\n</button>\n\n<mat-menu #errorMenu=\"matMenu\"\n          class=\"risk-error-menu-mat-menu\"\n          [overlapTrigger]=\"false\">\n    <risk-error-message *ngFor=\"let error of errors; last as isLast\"\n                        [error]=\"error\"\n                        (click)=\"keepVisibleOnClick ? $event.stopPropagation() : null\"\n                        [isLast]=\"isLast\"></risk-error-message>\n</mat-menu>\n", styles: [":host{display:block;padding:0;margin:0}:host>*{vertical-align:bottom}\n", "::ng-deep .risk-error-menu-mat-menu{max-width:600px!important}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3$1.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i5.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: ErrorMessageComponent, selector: "risk-error-message", inputs: ["error", "isLast"] }], animations: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RiskErrorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: RiskErrorComponent, isStandalone: true, selector: "risk-error-menu", inputs: { keepVisibleOnClick: { classPropertyName: "keepVisibleOnClick", publicName: "keepVisibleOnClick", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.risk-error-menu": "true" } }, viewQueries: [{ propertyName: "errorMessages", predicate: RiskErrorMessageComponent, descendants: true, isSignal: true }], ngImport: i0, template: "@if (state() != null) {\n    <button\n        #errorMenuTrigger=\"matMenuTrigger\"\n        (@buttonState.done)=\"animationDone($event)\"\n        [@buttonState]=\"state()\"\n        (menuClosed)=\"menuOpened.set(false)\"\n        (menuOpened)=\"menuOpened.set(true)\"\n        [class.risk-menu-open]=\"errorMenuTrigger.menuOpen\"\n        [color]=\"color()\"\n        [matMenuTriggerFor]=\"errorMenu\"\n        mat-icon-button\n        type=\"button\">\n        <mat-icon>error_outline</mat-icon>\n    </button>\n}\n\n<mat-menu #errorMenu=\"matMenu\"\n          [overlapTrigger]=\"false\"\n          class=\"risk-error-menu-mat-menu\">\n    @for (error of errors(); track error; let isLast = $last) {\n        <risk-error-message\n            (click)=\"keepVisibleOnClick() ? $event.stopPropagation() : null\"\n            [error]=\"error\"\n            [isLast]=\"isLast\"/>\n    }\n</mat-menu>\n", styles: [":host{display:block;padding:0;margin:0}:host>*{vertical-align:bottom}\n", "::ng-deep .risk-error-menu-mat-menu{max-width:600px!important}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: RiskErrorMessageComponent, selector: "risk-error-message", inputs: ["error", "isLast"] }], animations: [
             trigger('buttonState', [
                 state('inactive', style({ transform: 'translateX(0) scale(0)' })),
                 state('active', style({ transform: 'translateX(0) scale(1)' })),
@@ -371,9 +331,17 @@ class ErrorComponent extends BaseComponent {
             ])
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: RiskErrorComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'risk-error-menu', animations: [
+            args: [{ selector: 'risk-error-menu', changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.risk-error-menu]': 'true'
+                    }, imports: [
+                        MatIcon,
+                        MatIconButton,
+                        MatMenu,
+                        MatMenuTrigger,
+                        RiskErrorMessageComponent
+                    ], animations: [
                         trigger('buttonState', [
                             state('inactive', style({ transform: 'translateX(0) scale(0)' })),
                             state('active', style({ transform: 'translateX(0) scale(1)' })),
@@ -391,58 +359,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                                 JIGGLE_ANIMATION
                             ])
                         ])
-                    ], host: {
-                        '[class.risk-error-menu]': 'true'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, preserveWhitespaces: false, template: "<button *ngIf=\"state != null\"\n        mat-icon-button\n        [color]=\"color\"\n        type=\"button\"\n        [@buttonState]=\"state\"\n        (@buttonState.done)=\"animationDone($event)\"\n        [matMenuTriggerFor]=\"errorMenu\"\n        #errorMenuTrigger=\"matMenuTrigger\"\n        (menuOpened)=\"menuOpened()\"\n        (menuClosed)=\"menuClosed()\"\n        [class.risk-menu-open]=\"errorMenuTrigger.menuOpen\">\n    <mat-icon>error_outline</mat-icon>\n</button>\n\n<mat-menu #errorMenu=\"matMenu\"\n          class=\"risk-error-menu-mat-menu\"\n          [overlapTrigger]=\"false\">\n    <risk-error-message *ngFor=\"let error of errors; last as isLast\"\n                        [error]=\"error\"\n                        (click)=\"keepVisibleOnClick ? $event.stopPropagation() : null\"\n                        [isLast]=\"isLast\"></risk-error-message>\n</mat-menu>\n", styles: [":host{display:block;padding:0;margin:0}:host>*{vertical-align:bottom}\n", "::ng-deep .risk-error-menu-mat-menu{max-width:600px!important}\n"] }]
-        }], ctorParameters: function () { return [{ type: ErrorCollectorService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [AUTH_PROVIDER]
-                }] }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { keepVisibleOnClick: [{
-                type: Input
-            }], errorMessages: [{
-                type: ViewChildren,
-                args: [ErrorMessageComponent]
-            }] } });
+                    ], template: "@if (state() != null) {\n    <button\n        #errorMenuTrigger=\"matMenuTrigger\"\n        (@buttonState.done)=\"animationDone($event)\"\n        [@buttonState]=\"state()\"\n        (menuClosed)=\"menuOpened.set(false)\"\n        (menuOpened)=\"menuOpened.set(true)\"\n        [class.risk-menu-open]=\"errorMenuTrigger.menuOpen\"\n        [color]=\"color()\"\n        [matMenuTriggerFor]=\"errorMenu\"\n        mat-icon-button\n        type=\"button\">\n        <mat-icon>error_outline</mat-icon>\n    </button>\n}\n\n<mat-menu #errorMenu=\"matMenu\"\n          [overlapTrigger]=\"false\"\n          class=\"risk-error-menu-mat-menu\">\n    @for (error of errors(); track error; let isLast = $last) {\n        <risk-error-message\n            (click)=\"keepVisibleOnClick() ? $event.stopPropagation() : null\"\n            [error]=\"error\"\n            [isLast]=\"isLast\"/>\n    }\n</mat-menu>\n", styles: [":host{display:block;padding:0;margin:0}:host>*{vertical-align:bottom}\n", "::ng-deep .risk-error-menu-mat-menu{max-width:600px!important}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { keepVisibleOnClick: [{ type: i0.Input, args: [{ isSignal: true, alias: "keepVisibleOnClick", required: false }] }], errorMessages: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => RiskErrorMessageComponent), { isSignal: true }] }] } });
 
-class ErrorModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: ErrorModule, declarations: [ErrorComponent,
-            ErrorMessageComponent], imports: [CommonModule,
-            CommonViewModule], exports: [ErrorComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorModule, providers: [
-            ErrorCollectorService,
-            {
-                provide: ErrorHandler,
-                useExisting: ErrorCollectorService
-            }
-        ], imports: [CommonModule,
-            CommonViewModule] }); }
+function provideErrorHandler() {
+    return [
+        {
+            provide: ErrorHandler,
+            useExisting: ErrorCollectorService
+        }
+    ];
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ErrorModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CommonModule,
-                        CommonViewModule
-                    ],
-                    exports: [
-                        ErrorComponent
-                    ],
-                    declarations: [
-                        ErrorComponent,
-                        ErrorMessageComponent
-                    ],
-                    providers: [
-                        ErrorCollectorService,
-                        {
-                            provide: ErrorHandler,
-                            useExisting: ErrorCollectorService
-                        }
-                    ]
-                }]
-        }] });
 
 /**
  * Collects all error using error collector and returns the "otherwise" error instead.
@@ -457,5 +384,5 @@ function collectErrors(errorCollector, otherwise) {
  * Generated bundle index. Do not edit.
  */
 
-export { ErrorCollectorService, ErrorComponent, ErrorModule, JIGGLE_ANIMATION, collectErrors, toErrorMessage };
+export { ErrorCollectorService, JIGGLE_ANIMATION, RiskErrorComponent, collectErrors, provideErrorHandler, toErrorMessage };
 //# sourceMappingURL=dbg-riskit-angular-error.mjs.map