From f1fab8700ad548a72883d2a46f02a3da48eb6938 Mon Sep 17 00:00:00 2001
From: Darya Balvanovich <darya.balvanovich@hyland.com>
Date: Thu, 13 Jun 2024 00:00:22 +0200
Subject: [PATCH] ACS-8198 add injection to component data

---
 docs/core/dialogs/dialog.md                   | 24 +++++++++++++++++++
 docs/core/interfaces/dialog.interface.md      |  2 ++
 .../dialogs/dialog/dialog-data.interface.ts   |  1 +
 .../lib/dialogs/dialog/dialog.component.html  |  2 +-
 .../lib/dialogs/dialog/dialog.component.ts    |  9 ++++++-
 5 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/docs/core/dialogs/dialog.md b/docs/core/dialogs/dialog.md
index 86cc8d78a5..ae1403e6ed 100644
--- a/docs/core/dialogs/dialog.md
+++ b/docs/core/dialogs/dialog.md
@@ -79,6 +79,30 @@ function openDialog() {
 }
 ```
 
+To use dialog with provided component as a content `componentData` should be passed as data parameter. Inside component `DIALOG_COMPONENT_DATA` should be injected.
+
+```ts
+//...
+
+function openDialog() {
+    const data: DialogData = {
+        title: 'Dialog title',
+        contentComponent: ExampleDialogComponent,
+        componentData: { nodeId: 'nodeId', name: 'node name' } // any data can be passed
+    };
+
+    this.dialog.open(DialogComponent, { data });
+}
+```
+
+in `ExampleDialogComponent`:
+```ts
+export class ManageHoldsDialogComponent {
+    inputs = inject(DIALOG_COMPONENT_DATA); // inputs = { nodeId: 'nodeId',  name: 'node name' }
+}
+```
+
+
 Note that **fixed width** may be provided which will work correctly on smaller screens. But don't specify any values ​​for **height**, as this may break the scrollable content and hide the buttons.
 To display the design well, it is necessary to provide no more than 2 additional buttons.
 
diff --git a/docs/core/interfaces/dialog.interface.md b/docs/core/interfaces/dialog.interface.md
index 60e2c7f44a..96560993db 100644
--- a/docs/core/interfaces/dialog.interface.md
+++ b/docs/core/interfaces/dialog.interface.md
@@ -26,6 +26,7 @@ interface DialogData {
     descriptionTemplate?: TemplateRef<any>;
     headerIcon?: string;
     additionalActionButtons?: AdditionalDialogActionButton[];
+    componentData: any;
 }
 ```
 
@@ -48,6 +49,7 @@ interface DialogData {
 | actionsTemplate | `TemplateRef<any>` |    | Inserts a template styled on the left. Should be used for additional `mat-button` style buttons. (optional) |
 | descriptionTemplate | `TemplateRef<any>` |    | Inserts a description template. (optional) |
 | additionalActionButtons | `AdditionalDialogActionButton[]` |    | Inserts additional base-styled buttons into the action bar on the left. (optional) |
+| componentData | `any` |    | Data that injected in contentComponent. (optional) |
 
 ## See also
 
diff --git a/lib/core/src/lib/dialogs/dialog/dialog-data.interface.ts b/lib/core/src/lib/dialogs/dialog/dialog-data.interface.ts
index b003b395bb..233847ca40 100644
--- a/lib/core/src/lib/dialogs/dialog/dialog-data.interface.ts
+++ b/lib/core/src/lib/dialogs/dialog/dialog-data.interface.ts
@@ -35,6 +35,7 @@ export interface DialogData {
     descriptionTemplate?: TemplateRef<any>;
     headerIcon?: string;
     additionalActionButtons?: AdditionalDialogActionButton[];
+    componentData: any;
 }
 
 export interface AdditionalDialogActionButton {
diff --git a/lib/core/src/lib/dialogs/dialog/dialog.component.html b/lib/core/src/lib/dialogs/dialog/dialog.component.html
index e695ed6f09..d1c8adcfd5 100644
--- a/lib/core/src/lib/dialogs/dialog/dialog.component.html
+++ b/lib/core/src/lib/dialogs/dialog/dialog.component.html
@@ -37,7 +37,7 @@
 
     <mat-dialog-content *ngIf="data.contentTemplate || data.contentComponent || data.contentText" class="adf-dialog-content">
         <ng-container [ngTemplateOutlet]="data.contentTemplate"></ng-container>
-        <ng-container [ngComponentOutlet]="data.contentComponent"></ng-container>
+        <ng-container *ngComponentOutlet="data.contentComponent; injector: dataInjector"></ng-container>
         <ng-container>{{ data.contentText }}</ng-container>
     </mat-dialog-content>
 
diff --git a/lib/core/src/lib/dialogs/dialog/dialog.component.ts b/lib/core/src/lib/dialogs/dialog/dialog.component.ts
index a341933678..4396779455 100644
--- a/lib/core/src/lib/dialogs/dialog/dialog.component.ts
+++ b/lib/core/src/lib/dialogs/dialog/dialog.component.ts
@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, Inject, OnDestroy, ViewEncapsulation } from '@angular/core';
+import { Component, Inject, InjectionToken, Injector, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AdditionalDialogActionButton, DialogData } from './dialog-data.interface';
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -25,6 +25,8 @@ import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { takeUntil } from 'rxjs/operators';
 
+export const DIALOG_COMPONENT_DATA = new InjectionToken<any>('dialog component data');
+
 @Component({
     standalone: true,
     selector: 'adf-dialog',
@@ -42,6 +44,8 @@ export class DialogComponent implements OnDestroy {
     dialogSize: DialogSizes;
     additionalActionButtons: AdditionalDialogActionButton[];
 
+    dataInjector: Injector;
+
     private onDestroy$ = new Subject<void>();
 
     constructor(
@@ -57,6 +61,9 @@ export class DialogComponent implements OnDestroy {
             this.cancelButtonTitle = data.cancelButtonTitle || 'COMMON.CANCEL';
             this.additionalActionButtons = data.additionalActionButtons;
             this.dialogRef.addPanelClass(`${this.dialogSize}-dialog-panel`);
+            this.dataInjector = Injector.create({
+                providers: [{ provide: DIALOG_COMPONENT_DATA, useValue: data.componentData }]
+            });
 
             if (data.isConfirmButtonDisabled$) {
                 data.isConfirmButtonDisabled$.pipe(takeUntil(this.onDestroy$)).subscribe((value) => this.isConfirmButtonDisabled$.next(value));