Merged PR 1926: feat(libs-ui-dialog-feedback-dialog): add auto-close functionality with confi...

feat(libs-ui-dialog-feedback-dialog): add auto-close functionality with configurable delay

Implement automatic dialog closure after a configurable delay period.
The dialog now auto-closes by default after 1500ms, with options to
disable auto-close or customize the delay duration through the
FeedbackDialogData interface.

- Add autoClose and autoCloseDelay properties to FeedbackDialogData
- Implement auto-close logic using RxJS asapScheduler in constructor
- Add comprehensive test coverage for auto-close behavior
- Update JSDoc documentation for better clarity

Ref: #5297

libs/ui/dialog/src/lib/feedback-dialog/feedback-dialog.component.spec.ts

@@ -55,4 +55,12 @@ describe('FeedbackDialogComponent', () => {
     const iconElement = spectator.query('ng-icon');
     expect(iconElement).toBeTruthy();
   });
+
+  it('should auto-close after delay by default', (done) => {
+    // The component should auto-close after the default delay (1500ms)
+    setTimeout(() => {
+      expect(mockDialogRef.close).toHaveBeenCalled();
+      done();
+    }, 1600); // Wait slightly longer than default delay
+  });
 });

libs/ui/dialog/src/lib/feedback-dialog/feedback-dialog.component.ts

@@ -1,8 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-
 import { DialogContentDirective } from '../dialog-content.directive';
 import { NgIcon, provideIcons } from '@ng-icons/core';
 import { isaActionCheck } from '@isa/icons';
+import { asapScheduler } from 'rxjs';
 
 /**
  * Input data for the message dialog
@@ -10,12 +10,15 @@ import { isaActionCheck } from '@isa/icons';
 export interface FeedbackDialogData {
   /** The message text to display in the dialog */
   message: string;
+  /** Optional flag to control whether the dialog auto-closes (default is true) */
+  autoClose?: boolean;
+  /** Optional delay in milliseconds before the dialog auto-closes (default is 1500ms) */
+  autoCloseDelay?: number;
 }
 
 /**
- * Simple message dialog component
- * Used for displaying informational messages to the user
- * Returns void when closed (no result)
+ * A simple feedback dialog component that displays a message and an icon.
+ * The dialog can be configured to auto-close after a short delay.
  */
 @Component({
   selector: 'ui-feedback-dialog',
@@ -30,4 +33,14 @@ export interface FeedbackDialogData {
 export class FeedbackDialogComponent extends DialogContentDirective<
   FeedbackDialogData,
   void
-> {}
+> {
+  constructor() {
+    super();
+    if (this.data?.autoClose ?? true) {
+      asapScheduler.schedule(
+        () => this.close(),
+        this.data?.autoCloseDelay ?? 1500,
+      );
+    }
+  }
+}

libs/ui/dialog/src/lib/injects.ts

@@ -100,7 +100,7 @@ export function injectDialog<C extends DialogContentDirective<any, any>>(
         {
           provide: DISPLAY_DIALOG_CLOSE,
           useValue:
-            openOptions?.displayClose ?? injectOptions?.displayClose ?? false, // #5275 Default false -> Bei true müssten ALLE eingesetzten Dialoge überprüft werden, da bei close ein undefined emitted wird und mit diesem Wert evtl. bereits Logik verbunden ist
+            openOptions?.displayClose ?? injectOptions?.displayClose ?? false, // #5275 Die Anzeige des X Buttons im Dialog ist defaultmäßig auf false -> Bei true müssten ALLE eingesetzten Dialoge überprüft werden, da bei close ein undefined emitted wird und mit diesem Wert evtl. bereits Logik verbunden ist
         },
         {
           provide: DIALOG_CLASS_LIST,