[ACS-7570] [ADF] Create generic dialog component (#9678)

docs/README.md

@@ -342,6 +342,7 @@ for more information about installing and using the source code.
 
 | Name | Description | Source link |
 | ---- | ----------- | ----------- |
+| [Dialog component](content-services/dialogs/dialog.md) | Dialog styled wrapper. | [Source](../lib/content-services/src/lib/dialogs/dialog/dialog.component.ts) |
 | [Confirm dialog component](content-services/dialogs/confirm.dialog.md) | Requests a yes/no choice from the user. | [Source](../lib/content-services/src/lib/dialogs/confirm.dialog.ts) |
 | [Library dialog component](content-services/dialogs/library.dialog.md) | Creates a new Content Services document library/site. | [Source](../lib/content-services/src/lib/dialogs/library/library.dialog.ts) |
 

docs/content-services/dialogs/dialog.md

@@ -0,0 +1,86 @@
+---
+Title: Dialog component
+Added: v6.9.0
+Status: Active
+Last reviewed: 2024-05-17
+---
+
+# [Dialog component](../../../lib/content-services/src/lib/dialogs/dialog/ "Defined in dialog.component.ts")
+
+Dialog wrapper styled according to a consistent design system.
+
+## Dialog views
+
+### Large size and Medium
+
+Looks the same but have different sizes.
+Max-width for Large dialog is `1075px`;
+Max-width for Medium dialog is `778px`;
+
+![Large and Medium dialog component](../../docassets/images/adf-dialog.png)
+
+### Alert dialogs
+
+Standard:
+
+![Standard alert dialog component](../../docassets/images/adf-dialog-alert-standart.png)
+
+With icon:
+
+![Alert dialog component with icon](../../docassets/images/adf-dialog-alert-with-icon.png)
+
+### Dialog with additional buttons
+
+![Dialog with additional buttons](../../docassets/images/adf-dialog-with-additional-buttons.png)
+
+## Basic Usage 
+
+```html
+
+<ng-template #contentDialogTemplate>
+  Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique nihil, natus corrupti asperiores voluptas, incidunt veritatis.
+</ng-template>
+
+<ng-template #actionsDialogTemplate>
+  <button mat-button>
+    Reset
+  </button>
+
+  <button mat-button>
+    Clean
+  </button>
+</ng-template>
+```
+
+```ts
+@ViewChild('contentDialogTemplate') contentDialogTemplate: TemplateRef<any>;
+@ViewChild('actionsDialogTemplate') actionsDialogTemplate: TemplateRef<any>;
+
+constructor(private dialog: MatDialog) {}
+
+//...
+
+function openDialog() {
+    const data: DialogData = {
+        title: 'Dialog title',
+        dialogSize: DialogSize.Alert,
+        isConfirmButtonDisabled$: of(true),
+        contentTemplate: this.contentDialogTemplate,
+        actionsTemplate: this.actionsDialogTemplate
+    };
+
+    this.dialog.open(DialogComponent, { data });
+}
+```
+
+## Details
+
+This component lets the user reuse styled dialog wrapper. Use the
+Angular [`MatDialog`](https://material.angular.io/components/dialog/overview)
+service to open the dialog, as shown in the example, and pass a `data` object
+with properties.
+
+## See also
+
+- [Dialog Data Interface](../interfaces/dialog.interface.md)
+- [Dialog Model](../models/dialog.model.md)

docs/content-services/interfaces/dialog.interface.md

@@ -0,0 +1,51 @@
+---
+Title: Dialog Data Interface
+Added: v6.9.0
+Status: Active
+Last reviewed: 2024-05-17
+---
+
+# [Dialog Data Interface](../../../lib/content-services/src/lib/dialogs/dialog/dialog-data.interface.ts "Defined in dialog-data.interface.ts")
+
+Specifies interface for [Dialog Component](../dialogs/dialog.md).
+
+## Basic usage
+
+```ts
+interface DialogData {
+    title: string;
+    description?: string;
+    confirmButtonTitle?: string;
+    cancelButtonTitle?: string;
+    isConfirmButtonDisabled$?: Subject<boolean>;
+    isCloseButtonHidden?: boolean;
+    isCancelButtonHidden?: boolean;
+    dialogSize?: DialogSizes;
+    contentTemplate?: TemplateRef<any>;
+    actionsTemplate?: TemplateRef<any>;
+    descriptionTemplate?: TemplateRef<any>;
+    headerIcon?: string;
+}
+```
+
+## Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| title | `string` |    | It will be placed in the dialog title section. |
+| headerIcon | `string` |    | It will be placed in header section. Should be used with Alert dialogs. (optional) |
+| description | `string` |    | It will be placed first in the dialog content section. (optional) |
+| confirmButtonTitle | `string` | `COMMON.APPLY` | Confirmation action. After this, the dialog is closed and the `isConfirmButtonDisabled$` is set to `true`. (optional) |
+| cancelButtonTitle | `string` | `COMMON.CANCEL` | Cancellation action. After this, the dialog is closed |
+| isCancelButtonHidden | `boolean` | `false` | Toggles cancel button visibility. (optional) |
+| isCloseButtonHidden | `boolean` | `false` | Toggles close button visibility. (optional) |
+| isConfirmButtonDisabled$ | `Subject<boolean>` | `false` | Toggles confirm button disability. (optional) |
+| dialogSize | `DialogSize` | `Medium` | Set dialog size. Can be `Large`, `Medium`, `Alert`. (optional) |
+| contentTemplate | `TemplateRef<any>` |    | Inserts a content template. (optional) |
+| 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) |
+
+## See also
+
+- [Dialog Component](../dialogs/dialog.md)
+- [Dialog Model](../models/dialog.model.md)

docs/content-services/models/dialog.model.md

@@ -0,0 +1,52 @@
+---
+Title: Dialog Size Model
+Added: v6.9.0
+Status: Active
+Last reviewed: 2024-05-17
+---
+
+# [Dialog Size model](../../../lib/content-services/src/lib/dialogs/dialog/dialog.model.ts "Defined in dialog.model.ts")
+
+Sets a specific CSS class to [Dialog Component](../dialogs/dialog.md). 
+
+## Basic usage
+
+```ts
+const DialogSize = {
+    Large: 'adf-large',
+    Medium: 'adf-medium',
+    Alert: 'adf-alert'
+} as const;
+
+type DialogSizes = typeof DialogSize[keyof typeof DialogSize];
+```
+
+## Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| Large | `string` | `adf-large` | Add `afd-large` class to Dialog container |
+| Medium | `string` | `adf-medium` | Add `afd-medium` class to Dialog container |
+| Alert | `string` | `adf-alert` | Add `afd-alert` class to Dialog container |
+
+### Examples
+
+```ts
+constructor(private dialog: MatDialog) {}
+
+...
+
+function openDialog() {
+    const data: DialogData = {
+        title: 'Dialog title',
+        dialogSize: DialogSize.Large,
+    };
+
+    this.dialog.open(DialogComponent, { data });
+}
+```
+
+## See also
+
+- [Dialog Component](../dialogs/dialog.md)
+- [Dialog Data Interface](../interfaces/dialog.interface.md)