[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)

lib/content-services/src/lib/dialogs/dialog/dialog-data.interface.ts

@@ -0,0 +1,35 @@
+/*!
+ * @license
+ * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { TemplateRef } from '@angular/core';
+import { Subject } from 'rxjs';
+import { DialogSizes } from './dialog.model';
+
+export 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;
+}

lib/content-services/src/lib/dialogs/dialog/dialog.component.html

@@ -0,0 +1,68 @@
+<div
+    data-automation-id="adf-dialog-container"
+    class="adf-dialog-container {{dialogSize}}"
+>
+    <div
+        mat-dialog-title
+        data-automation-id="adf-dialog-header"
+        class="adf-dialog-header"
+        [ngClass]="{'adf-centered-header': data.headerIcon}"
+    >
+        <div class="adf-dialog-title-container" [ngClass]="{ 'adf-centered-title': data.headerIcon }">
+            <mat-icon
+                *ngIf="data.headerIcon"
+                color="primary"
+                class="adf-dialog-header-icon"
+            >
+                {{data.headerIcon}}
+            </mat-icon>
+            <h2 class="adf-dialog-title">{{data.title}}</h2>
+        </div>
+        <button
+            *ngIf="!isCloseButtonHidden"
+            mat-icon-button
+            mat-dialog-close
+            data-automation-id="adf-dialog-close-button"
+        >
+            <mat-icon>close</mat-icon>
+        </button>
+    </div>
+
+    <div
+        [ngTemplateOutlet]="data.descriptionTemplate"
+        [ngClass]="{ 'adf-description': data.description || data.descriptionTemplate }"
+    >
+        <ng-container>{{data.description}}</ng-container>
+    </div>
+
+    <mat-dialog-content class="adf-dialog-content">
+        <ng-container [ngTemplateOutlet]="data.contentTemplate"></ng-container>
+    </mat-dialog-content>
+
+    <mat-dialog-actions class="adf-dialog-actions" [ngClass]="{ 'adf-additional-actions': data.actionsTemplate }">
+        <div>
+            <ng-container [ngTemplateOutlet]="data.actionsTemplate"></ng-container>
+        </div>
+        <div>
+            <button
+                *ngIf="!isCancelButtonHidden"
+                mat-button
+                mat-dialog-close
+                adf-auto-focus
+                data-automation-id="adf-dialog-actions-cancel"
+            >
+                {{cancelButtonTitle | translate}}
+            </button>
+
+            <button
+                mat-flat-button
+                color="primary"
+                data-automation-id="adf-dialog-actions-confirm"
+                [disabled]="isConfirmButtonDisabled$ | async"
+                (click)="onConfirm()"
+            >
+                {{confirmButtonTitle | translate}}
+            </button>
+        </div>
+    </mat-dialog-actions>
+</div>