angular-material-wrap 0.1.0-beta.6 → 0.1.0-beta.7

package/fesm2022/angular-material-wrap.mjs

@@ -7370,74 +7370,286 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
                 }] }], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], content: [{ type: i0.Input, args: [{ isSignal: true, alias: "content", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], showCloseButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showCloseButton", required: false }] }], showHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeader", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], closable: [{ type: i0.Input, args: [{ isSignal: true, alias: "closable", required: false }] }], backdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdrop", required: false }] }], escapeKeyClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "escapeKeyClose", required: false }] }], clickOutsideClose: [{ type: i0.Input, args: [{ isSignal: true, alias: "clickOutsideClose", required: false }] }], maxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxWidth", required: false }] }], maxHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxHeight", required: false }] }], minWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "minWidth", required: false }] }], minHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "minHeight", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], height: [{ type: i0.Input, args: [{ isSignal: true, alias: "height", required: false }] }], autoFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoFocus", required: false }] }], restoreFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "restoreFocus", required: false }] }], hasBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasBackdrop", required: false }] }], backdropClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "backdropClass", required: false }] }], panelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "panelClass", required: false }] }], dialogOpen: [{ type: i0.Output, args: ["dialogOpen"] }], dialogClose: [{ type: i0.Output, args: ["dialogClose"] }], dialogAfterOpen: [{ type: i0.Output, args: ["dialogAfterOpen"] }], dialogAfterClose: [{ type: i0.Output, args: ["dialogAfterClose"] }], actionClick: [{ type: i0.Output, args: ["actionClick"] }], closeClick: [{ type: i0.Output, args: ["closeClick"] }], headerTemplate: [{ type: i0.ContentChild, args: ['dialogHeader', { isSignal: true }] }], contentTemplate: [{ type: i0.ContentChild, args: ['dialogContent', { isSignal: true }] }], footerTemplate: [{ type: i0.ContentChild, args: ['dialogFooter', { isSignal: true }] }] } });
 
 /**
- * Service for managing dialogs programmatically
+ * Modern dialog reference that provides typed access to the component instance.
+ * Use with signal-based communication patterns for reactive dialog interactions.
  *
- * Provides convenient methods for creating and managing various types of dialogs
- * including alerts, confirmations, prompts, and custom dialogs.
+ * @example
+ * ```typescript
+ * const dialogRef = this.dialogService.open('Edit User', EditUserComponent, {
+ *   data: { userId: 123 }
+ * });
+ *
+ * // Signal-based communication (recommended)
+ * effect(() => {
+ *   const savedData = dialogRef.instance.saveSignal();
+ *   if (savedData) {
+ *     this.handleSave(savedData);
+ *     dialogRef.close();
+ *   }
+ * });
+ * ```
+ */
+class AmwDialogRef {
+    matDialogRef;
+    _instance;
+    _afterClosed = new Subject();
+    _afterOpened = new Subject();
+    constructor(matDialogRef, _instance) {
+        this.matDialogRef = matDialogRef;
+        this._instance = _instance;
+        // Forward MatDialogRef events
+        this.matDialogRef.afterClosed().subscribe(result => {
+            this._afterClosed.next(result);
+            this._afterClosed.complete();
+        });
+        this.matDialogRef.afterOpened().subscribe(() => {
+            this._afterOpened.next();
+            this._afterOpened.complete();
+        });
+    }
+    /**
+     * The component instance inside the dialog.
+     * Use this to access signals and methods on your dialog component.
+     */
+    get instance() {
+        return this._instance;
+    }
+    /**
+     * Closes the dialog with an optional result value.
+     */
+    close(result) {
+        this.matDialogRef.close(result);
+    }
+    /**
+     * Observable that emits when the dialog is closed.
+     */
+    afterClosed() {
+        return this._afterClosed.asObservable();
+    }
+    /**
+     * Observable that emits when the dialog is opened.
+     */
+    afterOpened() {
+        return this._afterOpened.asObservable();
+    }
+    /**
+     * Updates the dialog's position.
+     */
+    updatePosition(position) {
+        this.matDialogRef.updatePosition(position);
+        return this;
+    }
+    /**
+     * Updates the dialog's size.
+     */
+    updateSize(width, height) {
+        this.matDialogRef.updateSize(width, height);
+        return this;
+    }
+    /**
+     * Adds a CSS class to the dialog panel.
+     */
+    addPanelClass(classes) {
+        this.matDialogRef.addPanelClass(classes);
+        return this;
+    }
+    /**
+     * Removes a CSS class from the dialog panel.
+     */
+    removePanelClass(classes) {
+        this.matDialogRef.removePanelClass(classes);
+        return this;
+    }
+}
+/**
+ * Service for managing dialogs programmatically.
+ *
+ * ## Recommended Usage (Signal-based)
+ *
+ * The preferred way to use dialogs is with the `open()` method and signal-based
+ * communication for reactive interactions:
  *
  * @example
  * ```typescript
+ * // In your component
  * constructor(private dialogService: DialogService) {}
  *
- * showAlert() {
- *   this.dialogService.alert('Operation completed!', 'Success');
- * }
+ * openEditor() {
+ *   const dialogRef = this.dialogService.open('Edit Item', EditItemComponent, {
+ *     data: { itemId: this.itemId }
+ *   });
  *
- * confirmAction() {
- *   this.dialogService.confirm('Are you sure?', 'Confirm').subscribe(result => {
- *     if (result === 'confirm') {
- *       // Handle confirmation
+ *   // React to signals from the dialog component
+ *   effect(() => {
+ *     const savedItem = dialogRef.instance.savedItem();
+ *     if (savedItem) {
+ *       this.items.update(items => [...items, savedItem]);
+ *       dialogRef.close();
  *     }
  *   });
  * }
  * ```
+ *
+ * ```typescript
+ * // In your dialog component
+ * import { getAmwDialogTitle, AmwDialogData } from '@amw/dialog';
+ *
+ * @Component({
+ *   selector: 'app-edit-item',
+ *   template: `
+ *     <h2 mat-dialog-title>{{ title }}</h2>
+ *     <mat-dialog-content>
+ *       <!-- form content -->
+ *     </mat-dialog-content>
+ *     <mat-dialog-actions>
+ *       <amw-button (click)="cancel()">Cancel</amw-button>
+ *       <amw-button color="primary" (click)="save()">Save</amw-button>
+ *     </mat-dialog-actions>
+ *   `
+ * })
+ * export class EditItemComponent {
+ *   readonly data = inject<{ itemId: number } & AmwDialogData>(MAT_DIALOG_DATA);
+ *   readonly title = getAmwDialogTitle(this.data);
+ *
+ *   // Signal for communicating save events to parent
+ *   readonly savedItem = signal<Item | null>(null);
+ *
+ *   save() {
+ *     // Setting the signal triggers the effect in the parent
+ *     this.savedItem.set(this.form.value);
+ *   }
+ *
+ *   cancel() {
+ *     this.savedItem.set(null); // Parent handles closing
+ *   }
+ * }
+ * ```
+ *
+ * ## Legacy Usage
+ *
+ * The convenience methods (alert, confirm, etc.) are still available but
+ * are considered legacy patterns. Prefer the signal-based approach for
+ * new development.
  */
 class DialogService {
     dialog;
-    constructor(dialog) {
+    injector;
+    constructor(dialog, injector) {
         this.dialog = dialog;
+        this.injector = injector;
     }
     /**
-     * Opens a standard dialog with custom configuration
+     * Opens a dialog with a custom component.
      *
-     * @param options - Dialog configuration options
-     * @returns MatDialogRef for the opened dialog
+     * This is the recommended way to open dialogs. It returns an AmwDialogRef
+     * that provides typed access to the component instance for signal-based
+     * communication.
+     *
+     * @param title - The dialog title (accessible via getAmwDialogTitle(data) in your component)
+     * @param component - The Angular component to display in the dialog
+     * @param config - Optional dialog configuration
+     * @returns AmwDialogRef with typed access to the component instance
      *
      * @example
      * ```typescript
-     * const dialogRef = this.dialogService.open({
-     *   title: 'Custom Dialog',
-     *   content: 'This is a custom dialog',
-     *   type: 'info',
-     *   size: 'medium',
-     *   actions: [
-     *     { label: 'OK', action: 'close', color: 'primary' }
-     *   ]
+     * const dialogRef = this.dialogService.open('Edit User', EditUserComponent, {
+     *   width: '600px',
+     *   data: { userId: 123 }
      * });
      *
-     * dialogRef.afterClosed().subscribe(result => {
-     *   console.log('Dialog closed with result:', result);
+     * // Access component signals
+     * effect(() => {
+     *   const saved = dialogRef.instance.saveSignal();
+     *   if (saved) {
+     *     this.handleSave(saved);
+     *     dialogRef.close();
+     *   }
      * });
      * ```
      */
-    open(options) {
+    open(title, component, config) {
+        // Embed the title in the data object for component access via getAmwDialogTitle()
+        const dataWithTitle = {
+            ...(config?.data ?? {}),
+            _amwTitle: title
+        };
+        const matConfig = {
+            width: config?.width ?? '500px',
+            height: config?.height,
+            maxWidth: config?.maxWidth ?? '90vw',
+            maxHeight: config?.maxHeight ?? '90vh',
+            minWidth: config?.minWidth,
+            minHeight: config?.minHeight,
+            position: config?.position,
+            hasBackdrop: config?.hasBackdrop ?? true,
+            backdropClass: config?.backdropClass ?? 'amw-dialog-backdrop',
+            panelClass: config?.panelClass ?? 'amw-dialog-panel',
+            disableClose: config?.disableClose ?? false,
+            autoFocus: config?.autoFocus ?? 'first-tabbable',
+            restoreFocus: config?.restoreFocus ?? true,
+            data: dataWithTitle
+        };
+        const matDialogRef = this.dialog.open(component, matConfig);
+        // Create and return our typed dialog ref
+        const dialogRef = new AmwDialogRef(matDialogRef, matDialogRef.componentInstance);
+        // Inject the dialog ref into the component if it has a dialogRef property
+        if (matDialogRef.componentInstance && typeof matDialogRef.componentInstance === 'object') {
+            matDialogRef.componentInstance._amwDialogRef = dialogRef;
+        }
+        return dialogRef;
+    }
+    /**
+     * @deprecated Use `open(title, component, config)` instead.
+     * Opens a standard dialog with custom configuration using the legacy options pattern.
+     *
+     * Migrate to the new signal-based pattern:
+     * ```typescript
+     * // Old pattern (deprecated)
+     * this.dialogService.openWithOptions({ title: 'My Dialog', content: '...' });
+     *
+     * // New pattern (recommended)
+     * const ref = this.dialogService.open('My Dialog', MyDialogComponent);
+     * ```
+     */
+    openWithOptions(options) {
+        console.warn('[DialogService] openWithOptions() is deprecated. ' +
+            'Use open(title, component, config) with signal-based communication instead.');
         const config = this.getDialogConfig(options);
         return this.dialog.open(AmwDialogComponent, config);
     }
     /**
-     * Opens an alert dialog with a single OK button
+     * @deprecated Use `open(title, component, config)` instead.
+     * Opens a custom dialog with any Angular component.
      *
-     * @param message - Alert message to display
-     * @param title - Dialog title (default: 'Alert')
-     * @returns MatDialogRef for the opened dialog
+     * Migrate to the new pattern:
+     * ```typescript
+     * // Old pattern (deprecated)
+     * this.dialogService.openComponent(MyComponent, { data: { id: 1 } });
      *
-     * @example
+     * // New pattern (recommended)
+     * const ref = this.dialogService.open('Title', MyComponent, { data: { id: 1 } });
+     * ```
+     */
+    openComponent(component, config) {
+        console.warn('[DialogService] openComponent() is deprecated. ' +
+            'Use open(title, component, config) with signal-based communication instead.');
+        return this.dialog.open(component, config);
+    }
+    /**
+     * @deprecated Use a custom dialog component with signal-based communication instead.
+     * Opens an alert dialog with a single OK button.
+     *
+     * For new code, create a reusable alert component and use signals:
      * ```typescript
-     * this.dialogService.alert('Operation completed successfully!', 'Success');
+     * const ref = this.dialogService.open('Alert', AlertComponent, {
+     *   data: { message: 'Operation completed!' }
+     * });
      * ```
      */
     alert(message, title = 'Alert') {
-        return this.open({
+        console.warn('[DialogService] alert() is deprecated. ' +
+            'Use open(title, component, config) with a custom alert component instead.');
+        return this.openWithOptions({
             title,
             content: message,
             type: 'alert',
@@ -7448,24 +7660,26 @@ class DialogService {
         });
     }
     /**
-     * Opens a confirmation dialog with Cancel and Confirm buttons
+     * @deprecated Use a custom dialog component with signal-based communication instead.
+     * Opens a confirmation dialog with Cancel and Confirm buttons.
      *
-     * @param message - Confirmation message to display
-     * @param title - Dialog title (default: 'Confirm')
-     * @returns Observable that emits the result when dialog closes
-     *
-     * @example
+     * For new code, create a reusable confirm component and use signals:
      * ```typescript
-     * this.dialogService.confirm('Are you sure you want to delete this item?', 'Delete Item')
-     *   .subscribe(result => {
-     *     if (result === 'confirm') {
-     *       this.deleteItem();
-     *     }
-     *   });
+     * const ref = this.dialogService.open('Confirm', ConfirmComponent, {
+     *   data: { message: 'Are you sure?' }
+     * });
+     * effect(() => {
+     *   if (ref.instance.confirmed()) {
+     *     // Handle confirmation
+     *     ref.close();
+     *   }
+     * });
      * ```
      */
     confirm(message, title = 'Confirm') {
-        const dialogRef = this.open({
+        console.warn('[DialogService] confirm() is deprecated. ' +
+            'Use open(title, component, config) with a custom confirm component instead.');
+        const dialogRef = this.openWithOptions({
             title,
             content: message,
             type: 'confirm',
@@ -7478,25 +7692,13 @@ class DialogService {
         return dialogRef.afterClosed();
     }
     /**
-     * Opens a prompt dialog for user input
-     *
-     * @param message - Prompt message to display
-     * @param title - Dialog title (default: 'Prompt')
-     * @param defaultValue - Default input value (default: '')
-     * @returns Observable that emits the result when dialog closes
-     *
-     * @example
-     * ```typescript
-     * this.dialogService.prompt('Enter your name:', 'User Input', 'John Doe')
-     *   .subscribe(result => {
-     *     if (result === 'confirm') {
-     *       console.log('User input:', result);
-     *     }
-     *   });
-     * ```
+     * @deprecated Use a custom dialog component with signal-based communication instead.
+     * Opens a prompt dialog for user input.
      */
     prompt(message, title = 'Prompt', defaultValue = '') {
-        const dialogRef = this.open({
+        console.warn('[DialogService] prompt() is deprecated. ' +
+            'Use open(title, component, config) with a custom prompt component instead.');
+        const dialogRef = this.openWithOptions({
             title,
             content: message,
             type: 'prompt',
@@ -7510,19 +7712,13 @@ class DialogService {
         return dialogRef.afterClosed();
     }
     /**
-     * Opens an informational dialog
-     *
-     * @param message - Information message to display
-     * @param title - Dialog title (default: 'Information')
-     * @returns MatDialogRef for the opened dialog
-     *
-     * @example
-     * ```typescript
-     * this.dialogService.info('This feature is coming soon!', 'Feature Notice');
-     * ```
+     * @deprecated Use a custom dialog component with signal-based communication instead.
+     * Opens an informational dialog.
      */
     info(message, title = 'Information') {
-        return this.open({
+        console.warn('[DialogService] info() is deprecated. ' +
+            'Use open(title, component, config) with a custom info component instead.');
+        return this.openWithOptions({
             title,
             content: message,
             type: 'info',
@@ -7533,24 +7729,13 @@ class DialogService {
         });
     }
     /**
-     * Opens a warning dialog with Cancel and Proceed buttons
-     *
-     * @param message - Warning message to display
-     * @param title - Dialog title (default: 'Warning')
-     * @returns Observable that emits the result when dialog closes
-     *
-     * @example
-     * ```typescript
-     * this.dialogService.warning('This action cannot be undone!', 'Warning')
-     *   .subscribe(result => {
-     *     if (result === 'confirm') {
-     *       this.performDestructiveAction();
-     *     }
-     *   });
-     * ```
+     * @deprecated Use a custom dialog component with signal-based communication instead.
+     * Opens a warning dialog with Cancel and Proceed buttons.
      */
     warning(message, title = 'Warning') {
-        const dialogRef = this.open({
+        console.warn('[DialogService] warning() is deprecated. ' +
+            'Use open(title, component, config) with a custom warning component instead.');
+        const dialogRef = this.openWithOptions({
             title,
             content: message,
             type: 'warning',
@@ -7563,19 +7748,13 @@ class DialogService {
         return dialogRef.afterClosed();
     }
     /**
-     * Opens an error dialog
-     *
-     * @param message - Error message to display
-     * @param title - Dialog title (default: 'Error')
-     * @returns MatDialogRef for the opened dialog
-     *
-     * @example
-     * ```typescript
-     * this.dialogService.error('Failed to save data. Please try again.', 'Save Error');
-     * ```
+     * @deprecated Use a custom dialog component with signal-based communication instead.
+     * Opens an error dialog.
      */
     error(message, title = 'Error') {
-        return this.open({
+        console.warn('[DialogService] error() is deprecated. ' +
+            'Use open(title, component, config) with a custom error component instead.');
+        return this.openWithOptions({
             title,
             content: message,
             type: 'error',
@@ -7586,19 +7765,13 @@ class DialogService {
         });
     }
     /**
-     * Opens a success dialog
-     *
-     * @param message - Success message to display
-     * @param title - Dialog title (default: 'Success')
-     * @returns MatDialogRef for the opened dialog
-     *
-     * @example
-     * ```typescript
-     * this.dialogService.success('Data saved successfully!', 'Success');
-     * ```
+     * @deprecated Use a custom dialog component with signal-based communication instead.
+     * Opens a success dialog.
      */
     success(message, title = 'Success') {
-        return this.open({
+        console.warn('[DialogService] success() is deprecated. ' +
+            'Use open(title, component, config) with a custom success component instead.');
+        return this.openWithOptions({
             title,
             content: message,
             type: 'success',
@@ -7609,25 +7782,13 @@ class DialogService {
         });
     }
     /**
-     * Opens a loading dialog with spinner
-     *
-     * @param message - Loading message to display (default: 'Loading...')
-     * @param title - Dialog title (default: 'Please wait')
-     * @returns MatDialogRef for the opened dialog
-     *
-     * @example
-     * ```typescript
-     * const loadingDialog = this.dialogService.loading('Processing your request...', 'Please wait');
-     *
-     * // Simulate async operation
-     * setTimeout(() => {
-     *   loadingDialog.close();
-     *   this.dialogService.success('Complete!', 'Success');
-     * }, 3000);
-     * ```
+     * @deprecated Use a custom dialog component with signal-based communication instead.
+     * Opens a loading dialog with spinner.
      */
     loading(message = 'Loading...', title = 'Please wait') {
-        return this.open({
+        console.warn('[DialogService] loading() is deprecated. ' +
+            'Use open(title, component, config) with a custom loading component instead.');
+        return this.openWithOptions({
             title,
             content: message,
             loading: true,
@@ -7639,60 +7800,19 @@ class DialogService {
         });
     }
     /**
-     * Opens a custom dialog with any Angular component
-     *
-     * @param component - Angular component to display in dialog
-     * @param config - Optional MatDialog configuration
-     * @returns MatDialogRef for the opened dialog
-     *
-     * @example
-     * ```typescript
-     * const dialogRef = this.dialogService.openComponent(MyCustomComponent, {
-     *   width: '600px',
-     *   height: '400px',
-     *   data: { userId: 123 }
-     * });
-     * ```
-     */
-    openComponent(component, config) {
-        return this.dialog.open(component, config);
-    }
-    /**
-     * Closes all currently open dialogs
-     *
-     * @example
-     * ```typescript
-     * this.dialogService.closeAll();
-     * ```
+     * Closes all currently open dialogs.
      */
     closeAll() {
         this.dialog.closeAll();
     }
     /**
-     * Gets all currently open dialogs
-     *
-     * @returns Array of MatDialogRef instances for open dialogs
-     *
-     * @example
-     * ```typescript
-     * const openDialogs = this.dialogService.getOpenDialogs();
-     * console.log(`Currently ${openDialogs.length} dialogs are open`);
-     * ```
+     * Gets all currently open dialogs.
      */
     getOpenDialogs() {
         return this.dialog.openDialogs;
     }
     /**
-     * Checks if any dialogs are currently open
-     *
-     * @returns True if any dialogs are open, false otherwise
-     *
-     * @example
-     * ```typescript
-     * if (this.dialogService.hasOpenDialogs()) {
-     *   console.log('Some dialogs are still open');
-     * }
-     * ```
+     * Checks if any dialogs are currently open.
      */
     hasOpenDialogs() {
         return this.dialog.openDialogs.length > 0;
@@ -7700,10 +7820,6 @@ class DialogService {
     getDialogConfig(options) {
         const backdropClass = this.getBackdropClass(options.type) || 'amw-dialog-backdrop';
         const panelClass = this.getPanelClass(options.type, options.size) || 'amw-dialog-panel';
-        // Final validation to ensure no whitespace in class names
-        if (backdropClass.includes(' ') || panelClass.includes(' ')) {
-            // Handle whitespace in class names if needed
-        }
         const config = {
             data: {
                 title: options.title || '',
@@ -7740,7 +7856,6 @@ class DialogService {
             restoreFocus: options.restoreFocus !== false,
             closeOnNavigation: true
         };
-        // Apply position
         if (options.position) {
             config.position = this.getPosition(options.position);
         }
@@ -7757,9 +7872,6 @@ class DialogService {
     }
     getDefaultHeight(size) {
         switch (size) {
-            case 'small': return 'auto';
-            case 'medium': return 'auto';
-            case 'large': return 'auto';
             case 'fullscreen': return '100vh';
             default: return 'auto';
         }
@@ -7793,9 +7905,6 @@ class DialogService {
     }
     getDefaultMinHeight(size) {
         switch (size) {
-            case 'small': return 'auto';
-            case 'medium': return 'auto';
-            case 'large': return 'auto';
             case 'fullscreen': return '100vh';
             default: return 'auto';
         }
@@ -7811,7 +7920,6 @@ class DialogService {
         }
     }
     getBackdropClass(type) {
-        // Angular Material expects a single class name, not multiple classes
         const baseClass = 'amw-dialog-backdrop';
         if (type && typeof type === 'string' && type.trim()) {
             const cleanType = this.sanitizeClassName(type);
@@ -7822,7 +7930,6 @@ class DialogService {
         return baseClass;
     }
     getPanelClass(type, size) {
-        // Angular Material expects a single class name, not multiple classes
         const baseClass = 'amw-dialog-panel';
         if (type && typeof type === 'string' && type.trim()) {
             const cleanType = this.sanitizeClassName(type);
@@ -7841,25 +7948,17 @@ class DialogService {
     sanitizeClassName(value) {
         if (!value || typeof value !== 'string')
             return '';
-        // First, ensure we have a string and trim it
         let sanitized = String(value).trim();
-        // If empty after trim, return empty string
         if (!sanitized)
             return '';
-        // Replace any whitespace (including tabs, newlines, etc.) with hyphens
         sanitized = sanitized.replace(/\s+/g, '-');
-        // Remove any characters that are not alphanumeric, hyphens, or underscores
         sanitized = sanitized.replace(/[^a-zA-Z0-9-_]/g, '');
-        // Replace multiple consecutive hyphens with single hyphen
         sanitized = sanitized.replace(/-+/g, '-');
-        // Remove leading and trailing hyphens
         sanitized = sanitized.replace(/^-+|-+$/g, '');
-        // Final check: ensure no whitespace characters remain
         sanitized = sanitized.replace(/\s/g, '');
-        // Return empty string if nothing valid remains
         return sanitized || '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DialogService, deps: [{ token: i3.MatDialog }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DialogService, deps: [{ token: i3.MatDialog }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DialogService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: DialogService, decorators: [{
@@ -7867,7 +7966,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
             args: [{
                     providedIn: 'root'
                 }]
-        }], ctorParameters: () => [{ type: i3.MatDialog }] });
+        }], ctorParameters: () => [{ type: i3.MatDialog }, { type: i0.Injector }] });
+/**
+ * Helper function to extract the dialog title from MAT_DIALOG_DATA.
+ * Use this in your dialog component to access the title passed to DialogService.open()
+ *
+ * @example
+ * ```typescript
+ * import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+ * import { getAmwDialogTitle } from '@amw/dialog';
+ *
+ * @Component({ ... })
+ * export class MyDialogComponent {
+ *   private readonly data = inject(MAT_DIALOG_DATA);
+ *   readonly title = getAmwDialogTitle(this.data);
+ * }
+ * ```
+ */
+function getAmwDialogTitle(data) {
+    return data?._amwTitle ?? '';
+}
 
 /**
  * AMW Data Table Component
@@ -17463,5 +17581,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AmwAccordionComponent, AmwAccordionPanelComponent, AmwAutoFocusDirective, AmwAutocompleteComponent, AmwBadgeDirective, AmwButtonComponent, AmwButtonToggleComponent, AmwButtonToggleGroupComponent, AmwCalendarBaseComponent, AmwCalendarFullComponent, AmwCalendarMiniComponent, AmwCalendarPickerComponent, AmwCardComponent, AmwCheckboxComponent, AmwChipComponent, AmwChipInputComponent, AmwChipsComponent, AmwClickOutsideDirective, AmwColorPickerComponent, AmwCopyToClipboardDirective, AmwCurrencyPipe, AmwDashboardPageComponent, AmwDataTableComponent, AmwDatePipe, AmwDatepickerComponent, AmwDetailPageComponent, AmwDialogComponent, AmwDividerComponent, AmwFileInputComponent, AmwFormPageComponent, AmwFormValidationComponent, AmwIconButtonComponent, AmwIconComponent, AmwInputComponent, AmwListComponent, AmwListItemComponent, AmwListPageComponent, AmwLoadingService, AmwMasterDetailPageComponent, AmwMenuComponent, AmwMenuItemComponent, AmwMenuTriggerForDirective, AmwMessagingService, AmwNotificationService, AmwPaginatorComponent, AmwPopoverComponent, AmwProgressBarComponent, AmwProgressSpinnerComponent, AmwRadioComponent, AmwRadioGroupComponent, AmwRangeSliderComponent, AmwReportPageComponent, AmwSearchPageComponent, AmwSelectComponent, AmwSidenavComponent, AmwSliderComponent, AmwStepperComponent, AmwSwitchComponent, AmwTabComponent, AmwTabsComponent, AmwTextTransformPipe, AmwTextareaComponent, AmwTimepickerComponent, AmwToggleComponent, AmwToolbarComponent, AmwTooltipComponent, AmwTooltipDirective, AmwWorkflowPageComponent, BaseComponent, CacheConfigService, CacheSyncService, CardService, DefaultDashboardDataSource, DefaultFormPageDataSource, DefaultMasterDetailDataSource, DefaultReportPageDataSource, DefaultWorkflowPageDataSource, DialogService, HttpCacheInterceptor, HttpCacheService, IndexedDbStorageService, LIST_PAGE_DATA_SOURCE, ThemeEditorComponent, ThemeManagerComponent, ThemePickerComponent, ThemeService, WORKFLOW_PAGE_DATA_SOURCE, httpCacheInterceptor };
+export { AmwAccordionComponent, AmwAccordionPanelComponent, AmwAutoFocusDirective, AmwAutocompleteComponent, AmwBadgeDirective, AmwButtonComponent, AmwButtonToggleComponent, AmwButtonToggleGroupComponent, AmwCalendarBaseComponent, AmwCalendarFullComponent, AmwCalendarMiniComponent, AmwCalendarPickerComponent, AmwCardComponent, AmwCheckboxComponent, AmwChipComponent, AmwChipInputComponent, AmwChipsComponent, AmwClickOutsideDirective, AmwColorPickerComponent, AmwCopyToClipboardDirective, AmwCurrencyPipe, AmwDashboardPageComponent, AmwDataTableComponent, AmwDatePipe, AmwDatepickerComponent, AmwDetailPageComponent, AmwDialogComponent, AmwDialogRef, AmwDividerComponent, AmwFileInputComponent, AmwFormPageComponent, AmwFormValidationComponent, AmwIconButtonComponent, AmwIconComponent, AmwInputComponent, AmwListComponent, AmwListItemComponent, AmwListPageComponent, AmwLoadingService, AmwMasterDetailPageComponent, AmwMenuComponent, AmwMenuItemComponent, AmwMenuTriggerForDirective, AmwMessagingService, AmwNotificationService, AmwPaginatorComponent, AmwPopoverComponent, AmwProgressBarComponent, AmwProgressSpinnerComponent, AmwRadioComponent, AmwRadioGroupComponent, AmwRangeSliderComponent, AmwReportPageComponent, AmwSearchPageComponent, AmwSelectComponent, AmwSidenavComponent, AmwSliderComponent, AmwStepperComponent, AmwSwitchComponent, AmwTabComponent, AmwTabsComponent, AmwTextTransformPipe, AmwTextareaComponent, AmwTimepickerComponent, AmwToggleComponent, AmwToolbarComponent, AmwTooltipComponent, AmwTooltipDirective, AmwWorkflowPageComponent, BaseComponent, CacheConfigService, CacheSyncService, CardService, DefaultDashboardDataSource, DefaultFormPageDataSource, DefaultMasterDetailDataSource, DefaultReportPageDataSource, DefaultWorkflowPageDataSource, DialogService, HttpCacheInterceptor, HttpCacheService, IndexedDbStorageService, LIST_PAGE_DATA_SOURCE, ThemeEditorComponent, ThemeManagerComponent, ThemePickerComponent, ThemeService, WORKFLOW_PAGE_DATA_SOURCE, getAmwDialogTitle, httpCacheInterceptor };
 //# sourceMappingURL=angular-material-wrap.mjs.map