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

docs/core/dialogs/dialog.md

@@ -1,11 +1,11 @@
 ---
 Title: Dialog component
-Added: v6.9.0
+Added: v6.10.0
 Status: Active
-Last reviewed: 2024-05-17
+Last reviewed: 2024-05-24
 ---
 
-# [Dialog component](../../../lib/content-services/src/lib/dialogs/dialog/ "Defined in dialog.component.ts")
+# [Dialog component](../../../lib/core/src/lib/dialogs/dialog/dialog.component.ts "Defined in dialog.component.ts")
 
 Dialog wrapper styled according to a consistent design system.
 
@@ -64,15 +64,24 @@ function openDialog() {
     const data: DialogData = {
         title: 'Dialog title',
         dialogSize: DialogSize.Alert,
-        isConfirmButtonDisabled$: of(true),
+        isConfirmButtonDisabled$: of(false),
-        contentTemplate: this.contentDialogTemplate,
+        contentTemplate: this.contentDialogTemplate, // or  contentComponent: this.contentDialogTemplate
-        actionsTemplate: this.actionsDialogTemplate
+        additionalActionButtons: [{
+            title: 'Reset',
+            class: 'reset-button',
+            onClick: () => {
+                this.isConfirmButtonDisabled$.next(true);
+            }
+        }] // or actionsTemplate: this.actionsDialogTemplate
     };
 
-    this.dialog.open(DialogComponent, { data });
+    this.dialog.open(DialogComponent, { data }, width: '600px');
 }
 ```
 
+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.
+
 ## Details
 
 This component lets the user reuse styled dialog wrapper. Use the
@@ -84,3 +93,4 @@ with properties.
 
 - [Dialog Data Interface](../interfaces/dialog.interface.md)
 - [Dialog Model](../models/dialog.model.md)
+- [AdditionalDialogActionButton Interface](../interfaces/additional-dialog-action-button.md)

docs/core/interfaces/additional-dialog-action-button.interface.md

@@ -0,0 +1,36 @@
+---
+Title: AdditionalDialogActionButton Interface
+Added: v6.10.0
+Status: Active
+Last reviewed: 2024-05-24
+---
+
+# [AdditionalDialogActionButton Interface](../../../lib/core/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 AdditionalDialogActionButton {
+    title: string;
+    onClick: (args?: any) => void;
+    class?: string;
+}
+```
+
+## Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| title | `string` |    | Button title. |
+| onClick | `(args?: any) => void` |    | Callback for button. (optional) |
+| class | `string` |    | Button class. (optional) |
+
+Note that in order for the design to be displayed well, it is necessary to provide no more than 2 additional buttons.
+
+## See also
+
+- [Dialog Component](../dialogs/dialog.md)
+- [Dialog Model](../models/dialog.model.md)
+- [DialogData Interface](./dialog.interface.md)

docs/core/interfaces/dialog.interface.md

@@ -1,11 +1,11 @@
 ---
 Title: Dialog Data Interface
-Added: v6.9.0
+Added: v6.10.0
 Status: Active
-Last reviewed: 2024-05-17
+Last reviewed: 2024-05-24
 ---
 
-# [Dialog Data Interface](../../../lib/content-services/src/lib/dialogs/dialog/dialog-data.interface.ts "Defined in dialog-data.interface.ts")
+# [Dialog Data Interface](../../../lib/core/src/lib/dialogs/dialog/dialog-data.interface.ts "Defined in dialog-data.interface.ts")
 
 Specifies interface for [Dialog Component](../dialogs/dialog.md).
 
@@ -25,6 +25,7 @@ interface DialogData {
     actionsTemplate?: TemplateRef<any>;
     descriptionTemplate?: TemplateRef<any>;
     headerIcon?: string;
+    additionalActionButtons?: AdditionalDialogActionButton[];
 }
 ```
 
@@ -34,18 +35,22 @@ interface DialogData {
 | ---- | ---- | ------------- | ----------- |
 | 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) |
+| description | `string` |    | It will be placed first in the dialog content section. Non-scrollable content. (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) |
+| contentText | `string` |    | Inserts a content text. (optional) |
+| contentComponent | `Type<any>` |    | Inserts a content component. (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) |
+| additionalActionButtons | `AdditionalDialogActionButton[]` |    | Inserts additional base-styled buttons into the action bar on the left. (optional) |
 
 ## See also
 
 - [Dialog Component](../dialogs/dialog.md)
 - [Dialog Model](../models/dialog.model.md)
+- [AdditionalDialogActionButton Interface](./additional-dialog-action-button.interface.md)

docs/core/models/dialog.model.md

@@ -1,11 +1,11 @@
 ---
 Title: Dialog Size Model
-Added: v6.9.0
+Added: v6.10.0
 Status: Active
-Last reviewed: 2024-05-17
+Last reviewed: 2024-05-24
 ---
 
-# [Dialog Size model](../../../lib/content-services/src/lib/dialogs/dialog/dialog.model.ts "Defined in dialog.model.ts")
+# [Dialog Size model](../../../lib/core/src/lib/dialogs/dialog/dialog.model.ts "Defined in dialog.model.ts")
 
 Sets a specific CSS class to [Dialog Component](../dialogs/dialog.md). 
 
@@ -50,3 +50,4 @@ function openDialog() {
 
 - [Dialog Component](../dialogs/dialog.md)
 - [Dialog Data Interface](../interfaces/dialog.interface.md)
+- [AdditionalDialogActionButton Interface](./additional-dialog-action-button.md)

lib/content-services/src/lib/dialogs/public-api.ts

@@ -22,7 +22,6 @@ export * from './category-selector.dialog';
 
 export * from './dialog.module';
 export * from './library/library.dialog';
-export * from './dialog';
 
 export * from './download-zip/download-zip.dialog';
 export * from './download-zip/download-zip.dialog.module';

lib/core/src/lib/dialogs/dialog/dialog-data.interface.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { TemplateRef } from '@angular/core';
+import { TemplateRef, Type } from '@angular/core';
 import { Subject } from 'rxjs';
 import { DialogSizes } from './dialog.model';
 
@@ -28,8 +28,17 @@ export interface DialogData {
     isCloseButtonHidden?: boolean;
     isCancelButtonHidden?: boolean;
     dialogSize?: DialogSizes;
+    contentText?: string;
+    contentComponent?: Type<any>;
     contentTemplate?: TemplateRef<any>;
     actionsTemplate?: TemplateRef<any>;
     descriptionTemplate?: TemplateRef<any>;
     headerIcon?: string;
+    additionalActionButtons?: AdditionalDialogActionButton[];
+}
+
+export interface AdditionalDialogActionButton {
+    title: string;
+    onClick: (args?: any) => void;
+    class?: string;
 }

lib/core/src/lib/dialogs/dialog/dialog.component.html

@@ -1,12 +1,12 @@
 <div
     data-automation-id="adf-dialog-container"
-    class="adf-dialog-container {{dialogSize}}"
+    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}"
+        [ngClass]="{ 'adf-centered-header': data.headerIcon }"
     >
         <div class="adf-dialog-title-container" [ngClass]="{ 'adf-centered-title': data.headerIcon }">
             <mat-icon
@@ -14,9 +14,9 @@
                 color="primary"
                 class="adf-dialog-header-icon"
             >
-                {{data.headerIcon}}
+                {{ data.headerIcon }}
             </mat-icon>
-            <h2 class="adf-dialog-title">{{data.title}}</h2>
+            <h2 class="adf-dialog-title">{{ data.title | translate }}</h2>
         </div>
         <button
             *ngIf="!isCloseButtonHidden"
@@ -32,26 +32,45 @@
         [ngTemplateOutlet]="data.descriptionTemplate"
         [ngClass]="{ 'adf-description': data.description || data.descriptionTemplate }"
     >
-        <ng-container>{{data.description}}</ng-container>
+        <ng-container>{{ data.description }}</ng-container>
     </div>
 
-    <mat-dialog-content class="adf-dialog-content">
+    <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>{{ data.contentText }}</ng-container>
     </mat-dialog-content>
 
-    <mat-dialog-actions class="adf-dialog-actions" [ngClass]="{ 'adf-additional-actions': data.actionsTemplate }">
+    <mat-dialog-actions
-        <div>
+        class="adf-dialog-actions"
+        [ngClass]="{ 'adf-additional-actions': data.actionsTemplate || additionalActionButtons }"
+    >
+        <div *ngIf="!additionalActionButtons && data.actionsTemplate">
             <ng-container [ngTemplateOutlet]="data.actionsTemplate"></ng-container>
         </div>
+
+        <div *ngIf="!data.actionsTemplate && additionalActionButtons">
+            <button
+                *ngFor="let additionalButton of additionalActionButtons"
+                mat-button
+                color="primary"
+                class="{{ additionalButton.class }}"
+                (click)="additionalButton.onClick()"
+            >
+                {{ additionalButton.title | translate }}
+            </button>
+        </div>
+
         <div>
             <button
                 *ngIf="!isCancelButtonHidden"
-                mat-button
+                mat-stroked-button
+                color="primary"
                 mat-dialog-close
                 adf-auto-focus
                 data-automation-id="adf-dialog-actions-cancel"
             >
-                {{cancelButtonTitle | translate}}
+                {{ cancelButtonTitle | translate }}
             </button>
 
             <button
@@ -61,7 +80,7 @@
                 [disabled]="isConfirmButtonDisabled$ | async"
                 (click)="onConfirm()"
             >
-                {{confirmButtonTitle | translate}}
+                {{ confirmButtonTitle | translate }}
             </button>
         </div>
     </mat-dialog-actions>

lib/core/src/lib/dialogs/dialog/dialog.component.scss

@@ -12,21 +12,97 @@ $dialog-small-s-height: 360px;
 $l-screen: 1920px;
 $m-screen: 1680px;
 $s-screen: 1440px;
-$xs-screen: 375px;
+$xs-screen: 500px;
+$xxs-screen: 375px;
 
-$breakpoint-alert-with-additional-buttons-centered: 1469px;
+$breakpoint-alert-with-additional-buttons-centered: 1501px;
-$breakpoint-medium-with-additional-buttons-centered: 1469px;
+$breakpoint-medium-with-additional-buttons-centered: 1002px;
 $breakpoint-large-with-additional-buttons-centered: 642px;
+$breakpoint-medium-screen: 920px;
 
 $dialog-padding: 24px;
 
+.adf-large-dialog-panel,
+.adf-medium-dialog-panel,
+.adf-alert-dialog-panel {
+    min-width: calc(269px - $dialog-padding * 2);
+
+    @media screen and (max-width: $xxs-screen) {
+        .adf-additional-actions {
+            justify-content: center;
+        }
+    }
+}
+
+.adf-large-dialog-panel {
+    max-width: calc(56vw);
+
+    @media screen and (min-width: $l-screen) {
+        max-width: calc($dialog-large-l-width);
+    }
+
+    @media screen and (max-width: $xs-screen) {
+        max-width: calc(100vw);
+    }
+
+    @media screen and (max-width: $breakpoint-large-with-additional-buttons-centered) {
+        .adf-additional-actions {
+            justify-content: center;
+        }
+    }
+}
+
+.adf-medium-dialog-panel {
+    max-width: calc(36vw);
+
+    @media screen and (min-width: $l-screen) {
+        max-width: calc($dialog-medium-l-width);
+    }
+
+    @media screen and (max-width: $breakpoint-medium-screen) {
+        max-width: calc(84vw);
+    }
+
+    @media screen and (max-width: $xxs-screen) {
+        max-width: calc(100vw);
+    }
+
+    @media screen and (max-width: $breakpoint-medium-with-additional-buttons-centered) {
+        .adf-additional-actions {
+            justify-content: center;
+        }
+    }
+}
+
+.adf-alert-dialog-panel {
+    max-width: 24vw;
+
+    @media screen and (min-width: $m-screen) {
+        max-width: $dialog-small-l-width;
+    }
+
+    @media screen and (max-width: $s-screen) {
+        max-width: $dialog-small-s-width;
+    }
+
+    @media screen and (max-width: $xxs-screen) {
+        max-width: 84vw;
+    }
+
+    @media screen and (max-width: $breakpoint-alert-with-additional-buttons-centered) {
+        .adf-additional-actions {
+            justify-content: center;
+        }
+    }
+}
+
 .adf-dialog-container {
     min-width: calc(269px - $dialog-padding * 2);
-    min-height: calc(300px - $dialog-padding * 2);
+    min-height: calc(188px - $dialog-padding * 2);
+    max-height: calc(84vh - $dialog-padding * 2);
     position: relative;
     display: flex;
     flex-direction: column;
-    max-height: calc(84vh - $dialog-padding * 2);
 
     .adf-dialog-header,
     .adf-dialog-content,
@@ -99,40 +175,16 @@ $dialog-padding: 24px;
         padding-top: $dialog-padding;
         text-transform: capitalize;
         min-height: auto;
-
-        // TODO: Update after migration to Angular 15
-        /* stylelint-disable-next-line selector-class-pattern */
-        .mat-button.mat-button-base + .mat-button-base {
-            margin-left: 16px;
-        }
-
-        // TODO: Update after migration to Angular 15
-        /* stylelint-disable-next-line selector-class-pattern */
-        .mat-button {
-            text-transform: capitalize;
-        }
-    }
-
-    // TODO: Update after migration to Angular 15
-    /* stylelint-disable-next-line selector-class-pattern */
-    .mat-dialog-container {
-        border-radius: 8px;
     }
 
     &.adf-large {
-        max-width: calc(56vw - $dialog-padding * 2);
         max-height: calc(84vh - $dialog-padding * 2);
 
-        @media screen and (min-width: $l-screen) {
-            max-width: calc($dialog-large-l-width - $dialog-padding * 2);
-        }
-
         @media screen and (min-height: $dialog-large-l-width) {
             max-height: calc($dialog-large-l-height - $dialog-padding * 2);
         }
 
-        @media screen and (max-width: $xs-screen) {
+        @media screen and (max-width: $xxs-screen) {
-            max-width: calc(100vw - $dialog-padding * 2);
             max-height: calc(100vh - $dialog-padding * 2);
         }
 
@@ -144,15 +196,9 @@ $dialog-padding: 24px;
     }
 
     &.adf-medium {
-        max-width: calc(36vw - $dialog-padding * 2);
         max-height: calc(72vh - $dialog-padding * 2);
 
-        @media screen and (min-width: $l-screen) {
+        @media screen and (max-width: $xxs-screen) {
-            max-width: calc($dialog-medium-l-width - $dialog-padding * 2);
-        }
-
-        @media screen and (max-width: $xs-screen) {
-            max-width: calc(100vw - $dialog-padding * 2);
             max-height: calc(100vh - $dialog-padding * 2);
         }
 
@@ -189,26 +235,22 @@ $dialog-padding: 24px;
             }
         }
 
-        max-width: calc(24vw - $dialog-padding * 2);
         max-height: calc(40vh - $dialog-padding * 2);
 
         @media screen and (min-width: $m-screen) {
-            max-width: calc($dialog-small-l-width - $dialog-padding * 2);
             max-height: calc($dialog-small-l-height - $dialog-padding * 2);
         }
 
         @media screen and (max-width: $s-screen) {
-            max-width: calc($dialog-small-s-width - $dialog-padding * 2);
             max-height: calc($dialog-small-s-height - $dialog-padding * 2);
         }
 
-        @media screen and (max-width: $xs-screen) {
+        @media screen and (max-width: $xxs-screen) {
-            max-width: calc(84vw - $dialog-padding * 2);
+            max-height: calc(56vh - $dialog-padding * 2);
-            max-height: calc(41vh - $dialog-padding * 2);
         }
 
-        @media screen and (max-height: $dialog-small-l-height) {
+        @media screen and (max-height: $xxs-screen) {
-            max-height: calc(84vh - $dialog-padding * 2);
+            max-height: 84vh;
         }
 
         @media screen and (max-width: $breakpoint-alert-with-additional-buttons-centered) {
@@ -218,9 +260,25 @@ $dialog-padding: 24px;
         }
     }
 
-    @media screen and (max-width: $xs-screen) {
+    @media screen and (max-width: $xxs-screen) {
         .adf-additional-actions {
             justify-content: center;
         }
     }
 }
+
+.adf-additional-actions {
+    color: var(--theme-primary-color);
+}
+
+// TODO: Update after migration to Angular 15
+/* stylelint-disable-next-line selector-class-pattern */
+.mat-dialog-actions .mat-button-base + .mat-button-base {
+    margin-left: 16px;
+}
+
+// TODO: Update after migration to Angular 15
+/* stylelint-disable-next-line selector-class-pattern */
+.mat-dialog-container {
+    border-radius: 8px;
+}

lib/core/src/lib/dialogs/dialog/dialog.component.spec.ts

@@ -17,10 +17,10 @@
 
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { ContentTestingModule } from '../../testing/content.testing.module';
 import { DialogComponent } from './dialog.component';
 import { DialogData } from './dialog-data.interface';
 import { DialogSize } from './dialog.model';
+import { CoreTestingModule } from '../../testing';
 
 describe('DialogComponent', () => {
     let component: DialogComponent;
@@ -36,12 +36,13 @@ describe('DialogComponent', () => {
     };
 
     const dialogRef = {
-        close: jasmine.createSpy('close')
+        close: jasmine.createSpy('close'),
+        addPanelClass: jasmine.createSpy('addPanelClass')
     };
 
     const setupBeforeEach = (dialogOptions: DialogData = data) => {
         TestBed.configureTestingModule({
-            imports: [ContentTestingModule],
+            imports: [CoreTestingModule],
             providers: [
                 { provide: MAT_DIALOG_DATA, useValue: dialogOptions },
                 { provide: MatDialogRef, useValue: dialogRef }
@@ -54,8 +55,7 @@ describe('DialogComponent', () => {
 
         confirmButton = fixture.nativeElement.querySelector('[data-automation-id="adf-dialog-actions-confirm"]');
         closeButton = fixture.nativeElement.querySelector('[data-automation-id="adf-dialog-close-button"]');
-        cancelButton = fixture.nativeElement.querySelector(
+        cancelButton = fixture.nativeElement.querySelector('[data-automation-id="adf-dialog-actions-cancel"]');
-            '[data-automation-id="adf-dialog-actions-cancel"]');
         dialogContainer = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dialog-container"]');
     };
 
@@ -85,7 +85,7 @@ describe('DialogComponent', () => {
     describe('confirm action', () => {
         const mockButtonTitle = 'mockTitle';
         beforeEach(() => {
-            setupBeforeEach({ ...data, confirmButtonTitle: mockButtonTitle});
+            setupBeforeEach({ ...data, confirmButtonTitle: mockButtonTitle });
             fixture.detectChanges();
         });
 
@@ -115,7 +115,7 @@ describe('DialogComponent', () => {
 
         it('should close dialog', () => {
             component.onConfirm();
-            expect(dialogRef.close).toHaveBeenCalled();
+            expect(dialogRef.close).toHaveBeenCalledWith(true);
         });
 
         it('should set correct button title', () => {
@@ -145,24 +145,23 @@ describe('DialogComponent', () => {
         beforeEach(() => {
             setupBeforeEach({
                 ...data,
-                isCloseButtonHidden:  true,
+                isCloseButtonHidden: true,
                 isCancelButtonHidden: true
             });
         });
 
-        it ('should hide close button', () => {
+        it('should hide close button', () => {
             expect(closeButton).toBeNull();
         });
 
-
+        it('should hide close button', () => {
-        it ('should hide close button', () => {
             expect(cancelButton).toBeNull();
         });
     });
 
     describe('when dialog has large size', () => {
         beforeEach(() => {
-            setupBeforeEach({ ...data, dialogSize:  DialogSize.Large});
+            setupBeforeEach({ ...data, dialogSize: DialogSize.Large });
         });
 
         it('should have correct dialogSize value', () => {
@@ -184,7 +183,7 @@ describe('DialogComponent', () => {
 
     describe('when dialog has medium size', () => {
         beforeEach(() => {
-            setupBeforeEach({ ...data, dialogSize:  DialogSize.Medium});
+            setupBeforeEach({ ...data, dialogSize: DialogSize.Medium });
         });
 
         it('should have correct dialogSize value', () => {
@@ -207,7 +206,7 @@ describe('DialogComponent', () => {
     describe('when dialog has alert size', () => {
         describe('when dialog has not an ican', () => {
             beforeEach(() => {
-                setupBeforeEach({ ...data, dialogSize:  DialogSize.Alert});
+                setupBeforeEach({ ...data, dialogSize: DialogSize.Alert });
             });
 
             it('should have correct dialogSize value', () => {
@@ -237,7 +236,7 @@ describe('DialogComponent', () => {
             beforeEach(() => {
                 setupBeforeEach({
                     ...data,
-                    dialogSize:  DialogSize.Alert,
+                    dialogSize: DialogSize.Alert,
                     headerIcon: 'access_time'
                 });
             });
@@ -248,7 +247,6 @@ describe('DialogComponent', () => {
                 expect(headerIcon).toBeDefined();
             });
 
-
             it('should center header content', () => {
                 const header = fixture.nativeElement.querySelector('.adf-centered-header');
 

lib/core/src/lib/dialogs/dialog/dialog.component.ts

@@ -17,7 +17,7 @@
 
 import { Component, Inject, OnDestroy, ViewEncapsulation } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { DialogData } from './dialog-data.interface';
+import { AdditionalDialogActionButton, DialogData } from './dialog-data.interface';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { DialogSize, DialogSizes } from './dialog.model';
 import { MaterialModule } from '../../material.module';
@@ -37,10 +37,10 @@ export class DialogComponent implements OnDestroy {
     isConfirmButtonDisabled$ = new BehaviorSubject<boolean>(false);
     isCloseButtonHidden: boolean;
     isCancelButtonHidden: boolean;
-    dialogSize: DialogSizes;
     confirmButtonTitle: string;
     cancelButtonTitle: string;
-    disableSubmitButton = false;
+    dialogSize: DialogSizes;
+    additionalActionButtons: AdditionalDialogActionButton[];
 
     private onDestroy$ = new Subject<void>();
 
@@ -55,6 +55,8 @@ export class DialogComponent implements OnDestroy {
             this.dialogSize = data.dialogSize || DialogSize.Medium;
             this.confirmButtonTitle = data.confirmButtonTitle || 'COMMON.APPLY';
             this.cancelButtonTitle = data.cancelButtonTitle || 'COMMON.CANCEL';
+            this.additionalActionButtons = data.additionalActionButtons;
+            this.dialogRef.addPanelClass(`${this.dialogSize}-dialog-panel`);
 
             if (data.isConfirmButtonDisabled$) {
                 data.isConfirmButtonDisabled$.pipe(takeUntil(this.onDestroy$)).subscribe((value) => this.isConfirmButtonDisabled$.next(value));
@@ -64,7 +66,7 @@ export class DialogComponent implements OnDestroy {
 
     onConfirm() {
         this.isConfirmButtonDisabled$.next(true);
-        this.dialogRef.close();
+        this.dialogRef.close(true);
     }
 
     ngOnDestroy() {

lib/core/src/lib/dialogs/dialog/dialog.model.ts

@@ -21,4 +21,4 @@ export const DialogSize = {
     Alert: 'adf-alert'
 } as const;
 
-export type DialogSizes = typeof DialogSize[keyof typeof DialogSize];
+export type DialogSizes = (typeof DialogSize)[keyof typeof DialogSize];

lib/core/src/lib/dialogs/public-api.ts

@@ -20,3 +20,4 @@ export * from './edit-json/edit-json.dialog.module';
 export * from './unsaved-changes-dialog/unsaved-changes-dialog.component';
 export * from './unsaved-changes-dialog/unsaved-changes-dialog.module';
 export * from './unsaved-changes-dialog/unsaved-changes.guard';
+export * from './dialog';