mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ACS-7570] [ADF] Create generic dialog component (#9724)
This commit is contained in:
Darya Blavanovich
committed by
GitHub
GitHub
parent
0ea35b1f12
commit
f1167b1bc5
96
docs/core/dialogs/dialog.md
Normal file
96
docs/core/dialogs/dialog.md
Normal file
@@ -0,0 +1,96 @@
|
||||
---
|
||||
Title: Dialog component
|
||||
Added: v6.10.0
|
||||
Status: Active
|
||||
Last reviewed: 2024-05-24
|
||||
---
|
||||
|
||||
# [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.
|
||||
|
||||
## 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`;
|
||||
|
||||
|
||||
|
||||
### Alert dialogs
|
||||
|
||||
Standard:
|
||||
|
||||
|
||||
|
||||
With icon:
|
||||
|
||||
|
||||
|
||||
### Dialog with additional buttons
|
||||
|
||||
|
||||
|
||||
## 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(false),
|
||||
contentTemplate: this.contentDialogTemplate, // or contentComponent: this.contentDialogTemplate
|
||||
additionalActionButtons: [{
|
||||
title: 'Reset',
|
||||
class: 'reset-button',
|
||||
onClick: () => {
|
||||
this.isConfirmButtonDisabled$.next(true);
|
||||
}
|
||||
}] // or actionsTemplate: this.actionsDialogTemplate
|
||||
};
|
||||
|
||||
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
|
||||
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)
|
||||
- [AdditionalDialogActionButton Interface](../interfaces/additional-dialog-action-button.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)
|
||||
56
docs/core/interfaces/dialog.interface.md
Normal file
56
docs/core/interfaces/dialog.interface.md
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
Title: Dialog Data Interface
|
||||
Added: v6.10.0
|
||||
Status: Active
|
||||
Last reviewed: 2024-05-24
|
||||
---
|
||||
|
||||
# [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).
|
||||
|
||||
## 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;
|
||||
additionalActionButtons?: AdditionalDialogActionButton[];
|
||||
}
|
||||
```
|
||||
|
||||
## 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. 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)
|
||||
53
docs/core/models/dialog.model.md
Normal file
53
docs/core/models/dialog.model.md
Normal file
@@ -0,0 +1,53 @@
|
||||
---
|
||||
Title: Dialog Size Model
|
||||
Added: v6.10.0
|
||||
Status: Active
|
||||
Last reviewed: 2024-05-24
|
||||
---
|
||||
|
||||
# [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).
|
||||
|
||||
## 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)
|
||||
- [AdditionalDialogActionButton Interface](./additional-dialog-action-button.md)
|
||||
Reference in New Issue
Block a user