@memberjunction/ng-generic-dialog 2.32.2 → 2.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +197 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,197 @@
|
|
|
1
|
+
# Generic Dialog Component
|
|
2
|
+
|
|
3
|
+
A flexible and customizable dialog component for Angular applications in the MemberJunction framework. This component provides a consistent way to create modal dialogs with standard features like OK/Cancel buttons and custom action slots.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Customizable Content**: Easily insert any content inside the dialog body
|
|
8
|
+
- **Flexible Button Options**: Show/hide standard OK and Cancel buttons
|
|
9
|
+
- **Custom Actions**: Add custom buttons and actions through content projection
|
|
10
|
+
- **Responsive Design**: Configure width and height in pixels or percentages
|
|
11
|
+
- **Event Handling**: Events for dialog closure and data refreshing
|
|
12
|
+
- **Simple Integration**: Easy to use in any Angular component
|
|
13
|
+
|
|
14
|
+
## Installation
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install @memberjunction/ng-generic-dialog
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## Usage
|
|
21
|
+
|
|
22
|
+
### Import the Module
|
|
23
|
+
|
|
24
|
+
```typescript
|
|
25
|
+
import { GenericDialogModule } from '@memberjunction/ng-generic-dialog';
|
|
26
|
+
|
|
27
|
+
@NgModule({
|
|
28
|
+
imports: [
|
|
29
|
+
GenericDialogModule,
|
|
30
|
+
// other imports
|
|
31
|
+
],
|
|
32
|
+
// ...
|
|
33
|
+
})
|
|
34
|
+
export class YourModule { }
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### Basic Component Usage
|
|
38
|
+
|
|
39
|
+
```html
|
|
40
|
+
<!-- Simple dialog with default buttons -->
|
|
41
|
+
<mj-generic-dialog
|
|
42
|
+
DialogTitle="Confirmation"
|
|
43
|
+
[DialogVisible]="showDialog"
|
|
44
|
+
(DialogClosed)="onDialogClosed($event)">
|
|
45
|
+
|
|
46
|
+
<div>
|
|
47
|
+
Are you sure you want to proceed with this action?
|
|
48
|
+
</div>
|
|
49
|
+
</mj-generic-dialog>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### With Custom Actions
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<!-- Dialog with custom action buttons -->
|
|
56
|
+
<mj-generic-dialog
|
|
57
|
+
DialogTitle="Advanced Options"
|
|
58
|
+
DialogWidth="800px"
|
|
59
|
+
DialogHeight="500px"
|
|
60
|
+
[DialogVisible]="showDialog"
|
|
61
|
+
[ShowOKButton]="false"
|
|
62
|
+
[ShowCancelButton]="true"
|
|
63
|
+
CancelButtonText="Close"
|
|
64
|
+
(DialogClosed)="onDialogClosed($event)">
|
|
65
|
+
|
|
66
|
+
<div>
|
|
67
|
+
<p>Configure the advanced settings below:</p>
|
|
68
|
+
<!-- Your form or content here -->
|
|
69
|
+
<form>
|
|
70
|
+
<!-- Form fields -->
|
|
71
|
+
</form>
|
|
72
|
+
</div>
|
|
73
|
+
|
|
74
|
+
<div custom-actions>
|
|
75
|
+
<button kendoButton (click)="saveSettings()" themeColor="primary">Save Settings</button>
|
|
76
|
+
<button kendoButton (click)="applySettings()" themeColor="info">Apply</button>
|
|
77
|
+
<button kendoButton (click)="resetSettings()">Reset</button>
|
|
78
|
+
</div>
|
|
79
|
+
</mj-generic-dialog>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### TypeScript Component Example
|
|
83
|
+
|
|
84
|
+
```typescript
|
|
85
|
+
import { Component } from '@angular/core';
|
|
86
|
+
|
|
87
|
+
@Component({
|
|
88
|
+
selector: 'app-settings-dialog',
|
|
89
|
+
template: `
|
|
90
|
+
<button kendoButton (click)="openDialog()">Open Settings</button>
|
|
91
|
+
|
|
92
|
+
<mj-generic-dialog
|
|
93
|
+
DialogTitle="User Settings"
|
|
94
|
+
DialogWidth="600px"
|
|
95
|
+
DialogHeight="400px"
|
|
96
|
+
[DialogVisible]="dialogVisible"
|
|
97
|
+
[ShowOKButton]="true"
|
|
98
|
+
[ShowCancelButton]="true"
|
|
99
|
+
OKButtonText="Save Changes"
|
|
100
|
+
CancelButtonText="Discard"
|
|
101
|
+
(DialogClosed)="onDialogClosed($event)"
|
|
102
|
+
(RefreshData)="refreshSettings()">
|
|
103
|
+
|
|
104
|
+
<div class="settings-form">
|
|
105
|
+
<h3>Edit Your Settings</h3>
|
|
106
|
+
|
|
107
|
+
<div class="form-group">
|
|
108
|
+
<label>Display Name:</label>
|
|
109
|
+
<input kendoTextBox [(ngModel)]="settings.displayName" />
|
|
110
|
+
</div>
|
|
111
|
+
|
|
112
|
+
<div class="form-group">
|
|
113
|
+
<label>Email Notifications:</label>
|
|
114
|
+
<input kendoCheckBox [(ngModel)]="settings.emailNotifications" />
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<div class="form-group">
|
|
118
|
+
<label>Theme:</label>
|
|
119
|
+
<kendo-dropdownlist
|
|
120
|
+
[data]="themeOptions"
|
|
121
|
+
[(ngModel)]="settings.theme">
|
|
122
|
+
</kendo-dropdownlist>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</mj-generic-dialog>
|
|
126
|
+
`
|
|
127
|
+
})
|
|
128
|
+
export class SettingsDialogComponent {
|
|
129
|
+
dialogVisible = false;
|
|
130
|
+
|
|
131
|
+
settings = {
|
|
132
|
+
displayName: 'User',
|
|
133
|
+
emailNotifications: true,
|
|
134
|
+
theme: 'light'
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
themeOptions = ['light', 'dark', 'blue', 'high-contrast'];
|
|
138
|
+
|
|
139
|
+
openDialog() {
|
|
140
|
+
this.dialogVisible = true;
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
onDialogClosed(confirmed: boolean) {
|
|
144
|
+
this.dialogVisible = false;
|
|
145
|
+
|
|
146
|
+
if (confirmed) {
|
|
147
|
+
console.log('Saving settings:', this.settings);
|
|
148
|
+
// Save the settings
|
|
149
|
+
} else {
|
|
150
|
+
console.log('Discarding changes');
|
|
151
|
+
// Reset settings to original values
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
refreshSettings() {
|
|
156
|
+
console.log('Refreshing settings data');
|
|
157
|
+
// Load the latest settings
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
## API Reference
|
|
163
|
+
|
|
164
|
+
### Inputs
|
|
165
|
+
|
|
166
|
+
- `DialogTitle`: string - Title displayed in the dialog header (default: 'Default Title')
|
|
167
|
+
- `DialogWidth`: string - Width of the dialog (default: '700px')
|
|
168
|
+
- `DialogHeight`: string - Height of the dialog (default: '450px')
|
|
169
|
+
- `ShowOKButton`: boolean - Whether to show the OK button (default: true)
|
|
170
|
+
- `OKButtonText`: string - Text for the OK button (default: 'OK')
|
|
171
|
+
- `ShowCancelButton`: boolean - Whether to show the Cancel button (default: true)
|
|
172
|
+
- `CancelButtonText`: string - Text for the Cancel button (default: 'Cancel')
|
|
173
|
+
- `DialogVisible`: boolean - Controls the visibility of the dialog
|
|
174
|
+
|
|
175
|
+
### Outputs
|
|
176
|
+
|
|
177
|
+
- `DialogClosed`: EventEmitter<boolean> - Emitted when the dialog is closed (true if OK, false if Cancel)
|
|
178
|
+
- `RefreshData`: EventEmitter<void> - Emitted when the dialog needs to refresh its content data
|
|
179
|
+
|
|
180
|
+
### Methods
|
|
181
|
+
|
|
182
|
+
- `HandleOKClick()`: Programmatically trigger the OK button click
|
|
183
|
+
- `HandleCancelClick()`: Programmatically trigger the Cancel button click
|
|
184
|
+
|
|
185
|
+
### Content Projection
|
|
186
|
+
|
|
187
|
+
- Default content slot: Content displayed in the dialog body
|
|
188
|
+
- `custom-actions` slot: Projected into the dialog action area for custom buttons
|
|
189
|
+
|
|
190
|
+
## Styling
|
|
191
|
+
|
|
192
|
+
The component uses Kendo UI dialog and button components, which follow the Kendo UI theming system. You can apply your own styles to the content within the dialog.
|
|
193
|
+
|
|
194
|
+
## Dependencies
|
|
195
|
+
|
|
196
|
+
- `@progress/kendo-angular-dialog`: For the dialog component
|
|
197
|
+
- `@progress/kendo-angular-buttons`: For the buttons
|
package/package.json
CHANGED