@memberjunction/ng-generic-dialog 4.0.0 → 4.1.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.
Files changed (2) hide show
  1. package/README.md +60 -350
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,21 +1,6 @@
1
1
  # @memberjunction/ng-generic-dialog
2
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
- ## Overview
6
-
7
- The `@memberjunction/ng-generic-dialog` package provides a reusable Angular dialog component built on top of Kendo UI's dialog and button components. It offers a standardized way to create modals with configurable content, actions, and behavior while maintaining consistency across your MemberJunction application.
8
-
9
- ## Features
10
-
11
- - **Customizable Content**: Easily insert any content inside the dialog body using content projection
12
- - **Flexible Button Options**: Show/hide standard OK and Cancel buttons with customizable text
13
- - **Custom Actions**: Add custom buttons and actions through the `custom-actions` content projection slot
14
- - **Responsive Design**: Configure width and height in pixels or percentages
15
- - **Event Handling**: Built-in events for dialog closure and data refresh lifecycle
16
- - **Auto-refresh**: Automatically triggers data refresh when dialog becomes visible
17
- - **Kendo UI Integration**: Seamlessly integrates with Kendo UI theming system
18
- - **TypeScript Support**: Full TypeScript support with proper typing
3
+ A flexible, customizable modal dialog component for Angular applications in the MemberJunction framework. Built on Kendo UI Dialog, it provides a consistent way to create modals with standard OK/Cancel buttons and custom action slots.
19
4
 
20
5
  ## Installation
21
6
 
@@ -23,160 +8,80 @@ The `@memberjunction/ng-generic-dialog` package provides a reusable Angular dial
23
8
  npm install @memberjunction/ng-generic-dialog
24
9
  ```
25
10
 
26
- ### Peer Dependencies
27
-
28
- This package requires the following peer dependencies:
11
+ ## Overview
29
12
 
30
- - `@angular/common`: ^18.0.2
31
- - `@angular/core`: ^18.0.2
32
- - `@progress/kendo-angular-buttons`: ^16.2.0
33
- - `@progress/kendo-angular-dialog`: ^16.2.0
13
+ The Generic Dialog wraps Kendo UI's dialog with a standardized API for content projection, configurable buttons, and a data refresh lifecycle. It serves as the foundation for many dialog experiences throughout MemberJunction applications.
14
+
15
+ ```mermaid
16
+ flowchart TD
17
+ A["Parent Component"] -->|DialogVisible=true| B["GenericDialogComponent"]
18
+ B --> C["RefreshData event"]
19
+ B --> D["Content Projection (body)"]
20
+ B --> E["custom-actions slot"]
21
+ B -->|OK clicked| F["DialogClosed(true)"]
22
+ B -->|Cancel clicked| G["DialogClosed(false)"]
23
+
24
+ style A fill:#2d6a9f,stroke:#1a4971,color:#fff
25
+ style B fill:#7c5295,stroke:#563a6b,color:#fff
26
+ style D fill:#2d8659,stroke:#1a5c3a,color:#fff
27
+ style E fill:#2d8659,stroke:#1a5c3a,color:#fff
28
+ style F fill:#b8762f,stroke:#8a5722,color:#fff
29
+ style G fill:#b8762f,stroke:#8a5722,color:#fff
30
+ ```
34
31
 
35
32
  ## Usage
36
33
 
37
- ### Import the Module
34
+ ### Module Import
38
35
 
39
36
  ```typescript
40
37
  import { GenericDialogModule } from '@memberjunction/ng-generic-dialog';
41
38
 
42
39
  @NgModule({
43
- imports: [
44
- GenericDialogModule,
45
- // other imports
46
- ],
47
- // ...
40
+ imports: [GenericDialogModule]
48
41
  })
49
- export class YourModule { }
42
+ export class YourModule {}
50
43
  ```
51
44
 
52
- ### Basic Component Usage
45
+ ### Basic Confirmation Dialog
53
46
 
54
47
  ```html
55
- <!-- Simple dialog with default buttons -->
56
48
  <mj-generic-dialog
57
- DialogTitle="Confirmation"
58
- [DialogVisible]="showDialog"
59
- (DialogClosed)="onDialogClosed($event)">
60
-
61
- <div>
62
- Are you sure you want to proceed with this action?
63
- </div>
49
+ DialogTitle="Confirm Delete"
50
+ DialogWidth="400px"
51
+ DialogHeight="200px"
52
+ [DialogVisible]="showDeleteConfirm"
53
+ OKButtonText="Delete"
54
+ CancelButtonText="Keep"
55
+ (DialogClosed)="handleDeleteConfirmation($event)">
56
+ <p>Are you sure you want to delete this item?</p>
57
+ <p><strong>This action cannot be undone.</strong></p>
64
58
  </mj-generic-dialog>
65
59
  ```
66
60
 
67
- ### With Custom Actions
61
+ ### Dialog with Custom Actions
68
62
 
69
63
  ```html
70
- <!-- Dialog with custom action buttons -->
71
64
  <mj-generic-dialog
72
65
  DialogTitle="Advanced Options"
73
- DialogWidth="800px"
74
- DialogHeight="500px"
75
66
  [DialogVisible]="showDialog"
76
67
  [ShowOKButton]="false"
77
- [ShowCancelButton]="true"
78
68
  CancelButtonText="Close"
79
- (DialogClosed)="onDialogClosed($event)">
80
-
81
- <div>
82
- <p>Configure the advanced settings below:</p>
83
- <!-- Your form or content here -->
84
- <form>
85
- <!-- Form fields -->
86
- </form>
87
- </div>
88
-
69
+ (DialogClosed)="onDialogClosed($event)"
70
+ (RefreshData)="loadDialogData()">
71
+
72
+ <div>Your dialog content here</div>
73
+
89
74
  <div custom-actions>
90
- <button kendoButton (click)="saveSettings()" themeColor="primary">Save Settings</button>
91
- <button kendoButton (click)="applySettings()" themeColor="info">Apply</button>
92
- <button kendoButton (click)="resetSettings()">Reset</button>
75
+ <button kendoButton (click)="saveSettings()" themeColor="primary">Save</button>
76
+ <button kendoButton (click)="applySettings()">Apply</button>
93
77
  </div>
94
78
  </mj-generic-dialog>
95
79
  ```
96
80
 
97
- ### TypeScript Component Example
98
-
99
- ```typescript
100
- import { Component } from '@angular/core';
101
-
102
- @Component({
103
- selector: 'app-settings-dialog',
104
- template: `
105
- <button kendoButton (click)="openDialog()">Open Settings</button>
106
-
107
- <mj-generic-dialog
108
- DialogTitle="User Settings"
109
- DialogWidth="600px"
110
- DialogHeight="400px"
111
- [DialogVisible]="dialogVisible"
112
- [ShowOKButton]="true"
113
- [ShowCancelButton]="true"
114
- OKButtonText="Save Changes"
115
- CancelButtonText="Discard"
116
- (DialogClosed)="onDialogClosed($event)"
117
- (RefreshData)="refreshSettings()">
118
-
119
- <div class="settings-form">
120
- <h3>Edit Your Settings</h3>
121
-
122
- <div class="form-group">
123
- <label>Display Name:</label>
124
- <input kendoTextBox [(ngModel)]="settings.displayName" />
125
- </div>
126
-
127
- <div class="form-group">
128
- <label>Email Notifications:</label>
129
- <input kendoCheckBox [(ngModel)]="settings.emailNotifications" />
130
- </div>
131
-
132
- <div class="form-group">
133
- <label>Theme:</label>
134
- <kendo-dropdownlist
135
- [data]="themeOptions"
136
- [(ngModel)]="settings.theme">
137
- </kendo-dropdownlist>
138
- </div>
139
- </div>
140
- </mj-generic-dialog>
141
- `
142
- })
143
- export class SettingsDialogComponent {
144
- dialogVisible = false;
145
-
146
- settings = {
147
- displayName: 'User',
148
- emailNotifications: true,
149
- theme: 'light'
150
- };
151
-
152
- themeOptions = ['light', 'dark', 'blue', 'high-contrast'];
153
-
154
- openDialog() {
155
- this.dialogVisible = true;
156
- }
157
-
158
- onDialogClosed(confirmed: boolean) {
159
- this.dialogVisible = false;
160
-
161
- if (confirmed) {
162
- console.log('Saving settings:', this.settings);
163
- // Save the settings
164
- } else {
165
- console.log('Discarding changes');
166
- // Reset settings to original values
167
- }
168
- }
169
-
170
- refreshSettings() {
171
- console.log('Refreshing settings data');
172
- // Load the latest settings
173
- }
174
- }
175
- ```
176
-
177
- ## Component API
81
+ ## API Reference
178
82
 
179
83
  ### Selector
84
+
180
85
  `mj-generic-dialog`
181
86
 
182
87
  ### Inputs
@@ -184,234 +89,39 @@ export class SettingsDialogComponent {
184
89
  | Property | Type | Default | Description |
185
90
  |----------|------|---------|-------------|
186
91
  | `DialogTitle` | `string` | `'Default Title'` | Title displayed in the dialog header |
187
- | `DialogWidth` | `string` | `'700px'` | Width of the dialog in pixels or percentage |
188
- | `DialogHeight` | `string` | `'450px'` | Height of the dialog in pixels or percentage |
189
- | `DialogVisible` | `boolean` | `false` | Controls the visibility of the dialog. When set to `true`, triggers `RefreshData` event |
92
+ | `DialogWidth` | `string` | `'700px'` | Width of the dialog (pixels or percentage) |
93
+ | `DialogHeight` | `string` | `'450px'` | Height of the dialog (pixels or percentage) |
94
+ | `DialogVisible` | `boolean` | `false` | Controls dialog visibility. Setting to `true` triggers `RefreshData` |
190
95
  | `ShowOKButton` | `boolean` | `true` | Whether to show the OK button |
191
- | `OKButtonText` | `string` | `'OK'` | Text displayed on the OK button |
96
+ | `OKButtonText` | `string` | `'OK'` | Text on the OK button |
192
97
  | `ShowCancelButton` | `boolean` | `true` | Whether to show the Cancel button |
193
- | `CancelButtonText` | `string` | `'Cancel'` | Text displayed on the Cancel button |
98
+ | `CancelButtonText` | `string` | `'Cancel'` | Text on the Cancel button |
194
99
 
195
100
  ### Outputs
196
101
 
197
102
  | Event | Type | Description |
198
103
  |-------|------|-------------|
199
- | `DialogClosed` | `EventEmitter<boolean>` | Emitted when the dialog is closed. Returns `true` if closed via OK button, `false` if closed via Cancel button or X |
200
- | `RefreshData` | `EventEmitter<void>` | Emitted when the dialog becomes visible, allowing parent components to refresh data |
104
+ | `DialogClosed` | `EventEmitter<boolean>` | `true` if OK was clicked, `false` if Cancel or X |
105
+ | `RefreshData` | `EventEmitter<void>` | Emitted when dialog becomes visible, for loading fresh data |
201
106
 
202
107
  ### Public Methods
203
108
 
204
109
  | Method | Description |
205
110
  |--------|-------------|
206
- | `HandleOKClick()` | Programmatically trigger the OK button click. Closes dialog and emits `DialogClosed` with `true` |
207
- | `HandleCancelClick()` | Programmatically trigger the Cancel button click. Closes dialog and emits `DialogClosed` with `false` |
111
+ | `HandleOKClick()` | Programmatically trigger OK (closes dialog, emits `true`) |
112
+ | `HandleCancelClick()` | Programmatically trigger Cancel (closes dialog, emits `false`) |
208
113
 
209
114
  ### Content Projection Slots
210
115
 
211
- - **Default slot**: Content displayed in the dialog body
212
- - **`custom-actions` slot**: Content projected into the dialog action area for custom buttons. Use the `custom-actions` attribute on any element to project it into this slot
213
-
214
- ## Advanced Usage
215
-
216
- ### Programmatic Control
217
-
218
- You can control the dialog programmatically from the parent component:
219
-
220
- ```typescript
221
- import { Component, ViewChild } from '@angular/core';
222
- import { GenericDialogComponent } from '@memberjunction/ng-generic-dialog';
223
-
224
- @Component({
225
- selector: 'app-advanced-dialog',
226
- template: `
227
- <mj-generic-dialog #myDialog
228
- DialogTitle="Programmatic Control"
229
- [DialogVisible]="isDialogVisible"
230
- (DialogClosed)="onDialogClosed($event)">
231
- <div>Dialog content here</div>
232
- </mj-generic-dialog>
233
-
234
- <button (click)="openDialog()">Open Dialog</button>
235
- <button (click)="closeDialogProgrammatically(true)">Close with OK</button>
236
- <button (click)="closeDialogProgrammatically(false)">Close with Cancel</button>
237
- `
238
- })
239
- export class AdvancedDialogComponent {
240
- @ViewChild('myDialog') dialog!: GenericDialogComponent;
241
- isDialogVisible = false;
242
-
243
- openDialog() {
244
- this.isDialogVisible = true;
245
- }
246
-
247
- closeDialogProgrammatically(withOK: boolean) {
248
- if (withOK) {
249
- this.dialog.HandleOKClick();
250
- } else {
251
- this.dialog.HandleCancelClick();
252
- }
253
- }
254
-
255
- onDialogClosed(confirmed: boolean) {
256
- console.log('Dialog closed with:', confirmed ? 'OK' : 'Cancel');
257
- }
258
- }
259
- ```
260
-
261
- ### Data Refresh Pattern
262
-
263
- The dialog automatically emits a `RefreshData` event when it becomes visible. Use this to load fresh data:
264
-
265
- ```typescript
266
- @Component({
267
- selector: 'app-data-dialog',
268
- template: `
269
- <mj-generic-dialog
270
- DialogTitle="User Details"
271
- [DialogVisible]="showUserDialog"
272
- (DialogClosed)="onDialogClosed($event)"
273
- (RefreshData)="loadUserData()">
274
-
275
- <div *ngIf="userData">
276
- <p>Name: {{ userData.name }}</p>
277
- <p>Email: {{ userData.email }}</p>
278
- <p>Last Updated: {{ userData.lastUpdated }}</p>
279
- </div>
280
-
281
- <div *ngIf="loading">Loading...</div>
282
- </mj-generic-dialog>
283
- `
284
- })
285
- export class DataDialogComponent {
286
- showUserDialog = false;
287
- userData: any = null;
288
- loading = false;
289
-
290
- loadUserData() {
291
- this.loading = true;
292
- // Simulate API call
293
- setTimeout(() => {
294
- this.userData = {
295
- name: 'John Doe',
296
- email: 'john@example.com',
297
- lastUpdated: new Date().toLocaleString()
298
- };
299
- this.loading = false;
300
- }, 1000);
301
- }
302
-
303
- onDialogClosed(confirmed: boolean) {
304
- this.showUserDialog = false;
305
- if (confirmed) {
306
- console.log('Saving user data...');
307
- }
308
- }
309
- }
310
- ```
311
-
312
- ## Styling
313
-
314
- The component uses Kendo UI dialog and button components, which inherit the active Kendo theme. You can apply custom styles to the content within the dialog using standard CSS or Angular styling approaches.
315
-
316
- ### Custom Styling Example
317
-
318
- ```css
319
- /* In your component styles */
320
- :host ::ng-deep .k-dialog-title {
321
- background-color: #3f51b5;
322
- color: white;
323
- }
324
-
325
- :host ::ng-deep .k-dialog-content {
326
- padding: 20px;
327
- }
328
-
329
- .settings-form {
330
- display: flex;
331
- flex-direction: column;
332
- gap: 15px;
333
- }
334
-
335
- .form-group {
336
- display: flex;
337
- align-items: center;
338
- gap: 10px;
339
- }
340
- ```
341
-
342
- ## Integration with MemberJunction
343
-
344
- This dialog component is designed to work seamlessly within the MemberJunction framework:
345
-
346
- - **Consistent UI**: Follows MemberJunction's UI patterns and Kendo theme
347
- - **TypeScript Support**: Full type safety for all properties and events
348
- - **Angular Best Practices**: Uses OnPush change detection strategy compatible patterns
349
- - **Accessibility**: Inherits Kendo UI's accessibility features
350
-
351
- ## Common Patterns
352
-
353
- ### Confirmation Dialog
354
- ```typescript
355
- <mj-generic-dialog
356
- DialogTitle="Confirm Delete"
357
- DialogWidth="400px"
358
- DialogHeight="200px"
359
- [DialogVisible]="showDeleteConfirm"
360
- OKButtonText="Delete"
361
- CancelButtonText="Keep"
362
- (DialogClosed)="handleDeleteConfirmation($event)">
363
- <div>
364
- <p>Are you sure you want to delete this item?</p>
365
- <p><strong>This action cannot be undone.</strong></p>
366
- </div>
367
- </mj-generic-dialog>
368
- ```
369
-
370
- ### Form Dialog
371
- ```typescript
372
- <mj-generic-dialog
373
- DialogTitle="Edit User"
374
- DialogWidth="600px"
375
- [DialogVisible]="showEditDialog"
376
- [ShowOKButton]="false"
377
- [ShowCancelButton]="false"
378
- (RefreshData)="loadUserForEdit()">
379
-
380
- <form [formGroup]="userForm">
381
- <!-- Form fields -->
382
- </form>
383
-
384
- <div custom-actions>
385
- <button kendoButton
386
- [disabled]="!userForm.valid"
387
- (click)="saveUser()"
388
- themeColor="primary">
389
- Save Changes
390
- </button>
391
- <button kendoButton (click)="cancelEdit()">Cancel</button>
392
- </div>
393
- </mj-generic-dialog>
394
- ```
395
-
396
- ## Troubleshooting
397
-
398
- ### Dialog Not Showing
399
- - Ensure `DialogVisible` is properly bound to a boolean property
400
- - Check that the module is imported correctly
401
- - Verify Kendo UI dependencies are installed
402
-
403
- ### Custom Actions Not Appearing
404
- - Use the `custom-actions` attribute on the container element
405
- - Ensure the element is a direct child of `mj-generic-dialog`
406
-
407
- ### Dialog Closes Immediately
408
- - Check for any code that might be setting `DialogVisible` to false
409
- - Ensure event handlers aren't causing unintended state changes
116
+ - **Default slot** -- Content displayed in the dialog body
117
+ - **`custom-actions` slot** -- Buttons projected into the action area (use `custom-actions` attribute)
410
118
 
411
- ## Version History
119
+ ## Dependencies
412
120
 
413
- See [CHANGELOG.md](./CHANGELOG.md) for detailed version history.
121
+ - `@progress/kendo-angular-dialog` -- Dialog rendering
122
+ - `@progress/kendo-angular-buttons` -- Button components
414
123
 
415
- ## License
124
+ ## Related Packages
416
125
 
417
- This package is part of the MemberJunction framework and follows the same license terms.
126
+ - [@memberjunction/ng-find-record](../find-record/README.md) -- Uses generic dialog for record search modal
127
+ - [@memberjunction/ng-record-selector](../record-selector/README.md) -- Uses generic dialog for record selection modal
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@memberjunction/ng-generic-dialog",
3
- "version": "4.0.0",
3
+ "version": "4.1.0",
4
4
  "description": "MemberJunction: Angular component for a generic dialog",
5
5
  "main": "./dist/public-api.js",
6
6
  "typings": "./dist/public-api.d.ts",