@memberjunction/ng-record-selector 3.4.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.
- package/README.md +69 -333
- package/dist/lib/dialog.component.d.ts.map +1 -1
- package/dist/lib/dialog.component.js +5 -5
- package/dist/lib/dialog.component.js.map +1 -1
- package/dist/lib/record-selector.component.d.ts.map +1 -1
- package/dist/lib/record-selector.component.js +6 -7
- package/dist/lib/record-selector.component.js.map +1 -1
- package/package.json +16 -16
package/README.md
CHANGED
|
@@ -1,22 +1,6 @@
|
|
|
1
1
|
# @memberjunction/ng-record-selector
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
## Overview
|
|
6
|
-
|
|
7
|
-
The `@memberjunction/ng-record-selector` package provides Angular components that allow users to select and deselect items from a possible set using a dual listbox interface. It's designed to work seamlessly with MemberJunction's BaseEntity objects and provides a clean, intuitive UI for managing selections.
|
|
8
|
-
|
|
9
|
-
## Features
|
|
10
|
-
|
|
11
|
-
- **Dual Listbox Interface**: Side-by-side lists for available and selected items
|
|
12
|
-
- **Drag and Drop**: Intuitive item movement between lists using Kendo UI's drag and drop functionality
|
|
13
|
-
- **Double-Click Support**: Quickly move items between lists by double-clicking
|
|
14
|
-
- **Icon Support**: Display icons alongside item text using CSS classes from entity fields
|
|
15
|
-
- **Configurable Toolbar**: Customize available toolbar actions (move up/down, transfer items, transfer all)
|
|
16
|
-
- **Dialog Integration**: Optional dialog wrapper for modal usage with OK/Cancel functionality
|
|
17
|
-
- **Entity Integration**: Works natively with MemberJunction BaseEntity objects
|
|
18
|
-
- **State Management**: Dialog component maintains selection state and can revert changes on cancel
|
|
19
|
-
- **Responsive Design**: Uses MemberJunction's container directives for proper layout
|
|
3
|
+
A dual-listbox Angular component for selecting entity records in MemberJunction applications. Provides a drag-and-drop or button-based interface for moving records between "available" and "selected" lists.
|
|
20
4
|
|
|
21
5
|
## Installation
|
|
22
6
|
|
|
@@ -24,354 +8,106 @@ The `@memberjunction/ng-record-selector` package provides Angular components tha
|
|
|
24
8
|
npm install @memberjunction/ng-record-selector
|
|
25
9
|
```
|
|
26
10
|
|
|
27
|
-
|
|
11
|
+
## Overview
|
|
12
|
+
|
|
13
|
+
The Record Selector renders two side-by-side Kendo ListBox panels: one for available records and one for selected records. Users can transfer records between lists using toolbar buttons or drag-and-drop. It supports loading data from any MemberJunction entity and emits events when selections change.
|
|
14
|
+
|
|
15
|
+
```mermaid
|
|
16
|
+
flowchart LR
|
|
17
|
+
subgraph Available["Available Records"]
|
|
18
|
+
A["Record 1"]
|
|
19
|
+
B["Record 2"]
|
|
20
|
+
C["Record 3"]
|
|
21
|
+
end
|
|
22
|
+
subgraph Controls["Transfer Controls"]
|
|
23
|
+
D["Move Right >>"]
|
|
24
|
+
E["<< Move Left"]
|
|
25
|
+
F["Move All >>"]
|
|
26
|
+
G["<< Move All"]
|
|
27
|
+
end
|
|
28
|
+
subgraph Selected["Selected Records"]
|
|
29
|
+
H["Record 4"]
|
|
30
|
+
I["Record 5"]
|
|
31
|
+
end
|
|
32
|
+
|
|
33
|
+
Available --> Controls
|
|
34
|
+
Controls --> Selected
|
|
35
|
+
|
|
36
|
+
style Available fill:#2d6a9f,stroke:#1a4971,color:#fff
|
|
37
|
+
style Controls fill:#7c5295,stroke:#563a6b,color:#fff
|
|
38
|
+
style Selected fill:#2d8659,stroke:#1a5c3a,color:#fff
|
|
39
|
+
```
|
|
28
40
|
|
|
29
41
|
## Usage
|
|
30
42
|
|
|
31
|
-
### Import
|
|
43
|
+
### Module Import
|
|
32
44
|
|
|
33
45
|
```typescript
|
|
34
46
|
import { RecordSelectorModule } from '@memberjunction/ng-record-selector';
|
|
35
47
|
|
|
36
48
|
@NgModule({
|
|
37
|
-
imports: [
|
|
38
|
-
RecordSelectorModule,
|
|
39
|
-
// other imports
|
|
40
|
-
],
|
|
41
|
-
// ...
|
|
49
|
+
imports: [RecordSelectorModule]
|
|
42
50
|
})
|
|
43
|
-
export class YourModule {
|
|
51
|
+
export class YourModule {}
|
|
44
52
|
```
|
|
45
53
|
|
|
46
|
-
### Basic
|
|
54
|
+
### Basic Usage
|
|
47
55
|
|
|
48
56
|
```html
|
|
49
|
-
<!-- Standalone selector component -->
|
|
50
57
|
<mj-record-selector
|
|
51
58
|
[EntityName]="'Users'"
|
|
52
|
-
[DisplayField]="'
|
|
53
|
-
[
|
|
54
|
-
|
|
55
|
-
[SelectedRecords]="selectedUsers"
|
|
56
|
-
[UnselectedRecords]="unselectedUsers"
|
|
57
|
-
(RecordSelected)="onUserSelected($event)"
|
|
58
|
-
(RecordUnselected)="onUserUnselected($event)">
|
|
59
|
+
[DisplayField]="'UserName'"
|
|
60
|
+
[SelectedRecords]="preSelectedUsers"
|
|
61
|
+
(OnRecordListChanged)="onSelectionChanged($event)">
|
|
59
62
|
</mj-record-selector>
|
|
60
63
|
```
|
|
61
64
|
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
### Dialog Component Usage
|
|
65
|
+
### With Custom Configuration
|
|
65
66
|
|
|
66
67
|
```html
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
Select Users
|
|
70
|
-
</button>
|
|
71
|
-
|
|
72
|
-
<mj-record-selector-dialog
|
|
73
|
-
*ngIf="showSelectorDialog"
|
|
74
|
-
[EntityName]="'Users'"
|
|
68
|
+
<mj-record-selector
|
|
69
|
+
[EntityName]="'Products'"
|
|
75
70
|
[DisplayField]="'Name'"
|
|
76
|
-
[DisplayIconField]="'
|
|
77
|
-
[AvailableRecords]="
|
|
78
|
-
[
|
|
79
|
-
[
|
|
80
|
-
[
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
(RecordSelected)="onUserSelected($event)"
|
|
84
|
-
(RecordUnselected)="onUserUnselected($event)">
|
|
85
|
-
</mj-record-selector-dialog>
|
|
86
|
-
```
|
|
87
|
-
|
|
88
|
-
### TypeScript Component Example
|
|
89
|
-
|
|
90
|
-
```typescript
|
|
91
|
-
import { Component, OnInit } from '@angular/core';
|
|
92
|
-
import { BaseEntity, Metadata, RunView } from '@memberjunction/core';
|
|
93
|
-
import { UserEntity } from '@memberjunction/core-entities';
|
|
94
|
-
import { ListBoxToolbarConfig } from '@progress/kendo-angular-listbox';
|
|
95
|
-
|
|
96
|
-
@Component({
|
|
97
|
-
selector: 'app-user-role-assignment',
|
|
98
|
-
template: `
|
|
99
|
-
<h3>Assign Users to Role</h3>
|
|
100
|
-
<button kendoButton (click)="openUserSelector()">Select Users</button>
|
|
101
|
-
|
|
102
|
-
<div *ngIf="selectedUsers.length > 0">
|
|
103
|
-
<h4>Selected Users ({{ selectedUsers.length }}):</h4>
|
|
104
|
-
<ul>
|
|
105
|
-
<li *ngFor="let user of selectedUsers">
|
|
106
|
-
{{ user.Name }} - {{ user.Email }}
|
|
107
|
-
</li>
|
|
108
|
-
</ul>
|
|
109
|
-
<button kendoButton (click)="saveUserAssignments()">Save Assignments</button>
|
|
110
|
-
</div>
|
|
111
|
-
|
|
112
|
-
<mj-record-selector-dialog
|
|
113
|
-
*ngIf="selectorDialogVisible"
|
|
114
|
-
[EntityName]="'Users'"
|
|
115
|
-
[DisplayField]="'Name'"
|
|
116
|
-
[DisplayIconField]="'IconCSSClass'"
|
|
117
|
-
[AvailableRecords]="allUsers"
|
|
118
|
-
[SelectedRecords]="selectedUsers"
|
|
119
|
-
[UnselectedRecords]="unselectedUsers"
|
|
120
|
-
[ToolbarSettings]="toolbarSettings"
|
|
121
|
-
[DialogTitle]="'Select Users for Role'"
|
|
122
|
-
[DialogVisible]="selectorDialogVisible"
|
|
123
|
-
[DialogWidth]="'800px'"
|
|
124
|
-
[DialogHeight]="'600px'"
|
|
125
|
-
(DialogClosed)="onSelectorDialogClosed($event)">
|
|
126
|
-
</mj-record-selector-dialog>
|
|
127
|
-
`
|
|
128
|
-
})
|
|
129
|
-
export class UserRoleAssignmentComponent implements OnInit {
|
|
130
|
-
allUsers: UserEntity[] = [];
|
|
131
|
-
selectedUsers: UserEntity[] = [];
|
|
132
|
-
unselectedUsers: UserEntity[] = [];
|
|
133
|
-
selectorDialogVisible = false;
|
|
134
|
-
|
|
135
|
-
toolbarSettings: ListBoxToolbarConfig = {
|
|
136
|
-
position: "right",
|
|
137
|
-
tools: ["transferFrom", "transferAllFrom", "transferAllTo", "transferTo"]
|
|
138
|
-
};
|
|
139
|
-
|
|
140
|
-
constructor(private metadata: Metadata) {}
|
|
141
|
-
|
|
142
|
-
async ngOnInit() {
|
|
143
|
-
await this.loadUsers();
|
|
144
|
-
}
|
|
145
|
-
|
|
146
|
-
async loadUsers() {
|
|
147
|
-
// Load all users using MemberJunction's recommended pattern
|
|
148
|
-
const rv = new RunView();
|
|
149
|
-
const result = await rv.RunView<UserEntity>({
|
|
150
|
-
EntityName: 'Users',
|
|
151
|
-
ResultType: 'entity_object'
|
|
152
|
-
});
|
|
153
|
-
|
|
154
|
-
if (result.Success) {
|
|
155
|
-
this.allUsers = result.Results;
|
|
156
|
-
// Initially all users are unselected
|
|
157
|
-
this.unselectedUsers = [...this.allUsers];
|
|
158
|
-
this.selectedUsers = [];
|
|
159
|
-
} else {
|
|
160
|
-
console.error('Failed to load users:', result.ErrorMessage);
|
|
161
|
-
}
|
|
162
|
-
}
|
|
163
|
-
|
|
164
|
-
openUserSelector() {
|
|
165
|
-
this.selectorDialogVisible = true;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
onSelectorDialogClosed(confirmed: boolean) {
|
|
169
|
-
this.selectorDialogVisible = false;
|
|
170
|
-
|
|
171
|
-
if (confirmed) {
|
|
172
|
-
console.log('User selection confirmed:', this.selectedUsers);
|
|
173
|
-
// The selectedUsers array has been updated by the dialog component
|
|
174
|
-
} else {
|
|
175
|
-
console.log('User selection cancelled');
|
|
176
|
-
// The dialog component has already reverted any changes
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
|
|
180
|
-
async saveUserAssignments() {
|
|
181
|
-
// Example: Save user role assignments
|
|
182
|
-
for (const user of this.selectedUsers) {
|
|
183
|
-
// Create role assignment records or update user roles
|
|
184
|
-
console.log(`Assigning role to user: ${user.Name} (${user.ID})`);
|
|
185
|
-
}
|
|
186
|
-
}
|
|
187
|
-
}
|
|
71
|
+
[DisplayIconField]="'IconClass'"
|
|
72
|
+
[AvailableRecords]="filteredProducts"
|
|
73
|
+
[UnselectedRecords]="unselectedProducts"
|
|
74
|
+
[SelectedRecords]="selectedProducts"
|
|
75
|
+
[ToolbarSettings]="toolbarConfig"
|
|
76
|
+
(OnRecordListChanged)="handleChange($event)">
|
|
77
|
+
</mj-record-selector>
|
|
188
78
|
```
|
|
189
79
|
|
|
190
80
|
## API Reference
|
|
191
81
|
|
|
192
|
-
###
|
|
193
|
-
|
|
194
|
-
The base component that provides the dual listbox functionality for selecting records.
|
|
195
|
-
|
|
196
|
-
**Selector**: `mj-record-selector`
|
|
197
|
-
|
|
198
|
-
#### Inputs
|
|
199
|
-
|
|
200
|
-
| Input | Type | Default | Description |
|
|
201
|
-
|-------|------|---------|-------------|
|
|
202
|
-
| `EntityName` | `string` | `''` | The name of the entity to show records for |
|
|
203
|
-
| `DisplayField` | `string` | `''` | The field name to display in the list items |
|
|
204
|
-
| `DisplayIconField` | `string` | `''` | The field name containing CSS class for icons (optional) |
|
|
205
|
-
| `AvailableRecords` | `BaseEntity[]` | `[]` | List of all available records |
|
|
206
|
-
| `SelectedRecords` | `BaseEntity[]` | `[]` | List of currently selected records |
|
|
207
|
-
| `UnselectedRecords` | `BaseEntity[]` | `[]` | List of currently unselected records |
|
|
208
|
-
| `ToolbarSettings` | `ListBoxToolbarConfig` | See below | Configuration for the listbox toolbar |
|
|
209
|
-
|
|
210
|
-
Default toolbar settings:
|
|
211
|
-
```typescript
|
|
212
|
-
{
|
|
213
|
-
position: "right",
|
|
214
|
-
tools: ["moveUp", "transferFrom", "transferAllFrom", "transferAllTo", "transferTo", "moveDown"]
|
|
215
|
-
}
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
#### Outputs
|
|
219
|
-
|
|
220
|
-
| Output | Type | Description |
|
|
221
|
-
|--------|------|-------------|
|
|
222
|
-
| `RecordSelected` | `EventEmitter<BaseEntity[]>` | Emitted when records are moved to the selected list |
|
|
223
|
-
| `RecordUnselected` | `EventEmitter<BaseEntity[]>` | Emitted when records are moved to the unselected list |
|
|
224
|
-
|
|
225
|
-
#### Methods
|
|
226
|
-
|
|
227
|
-
The component handles double-click events internally to move items between lists. No public methods are exposed.
|
|
228
|
-
|
|
229
|
-
### RecordSelectorDialogComponent
|
|
230
|
-
|
|
231
|
-
A dialog wrapper that contains the RecordSelectorComponent with OK/Cancel functionality.
|
|
82
|
+
### Selector
|
|
232
83
|
|
|
233
|
-
|
|
84
|
+
`mj-record-selector`
|
|
234
85
|
|
|
235
|
-
|
|
86
|
+
### Inputs
|
|
236
87
|
|
|
237
|
-
|
|
88
|
+
| Property | Type | Default | Description |
|
|
89
|
+
|----------|------|---------|-------------|
|
|
90
|
+
| `EntityName` | `string` | `''` | MemberJunction entity to load records from |
|
|
91
|
+
| `DisplayField` | `string` | `''` | Field name to display as the label in each list item |
|
|
92
|
+
| `DisplayIconField` | `string` | `''` | Optional field for icon class on list items |
|
|
93
|
+
| `AvailableRecords` | `BaseEntity[]` | `[]` | Full set of available records |
|
|
94
|
+
| `SelectedRecords` | `BaseEntity[]` | `[]` | Records already selected |
|
|
95
|
+
| `UnselectedRecords` | `BaseEntity[]` | `[]` | Records explicitly unselected |
|
|
96
|
+
| `ToolbarSettings` | `ToolbarSettings` | default | Kendo ListBox toolbar configuration |
|
|
238
97
|
|
|
239
|
-
|
|
240
|
-
|-------|------|---------|-------------|
|
|
241
|
-
| `DialogTitle` | `string` | `'Select Records'` | Title displayed in the dialog header |
|
|
242
|
-
| `DialogWidth` | `string` | `'700px'` | Width of the dialog |
|
|
243
|
-
| `DialogHeight` | `string` | `'450px'` | Height of the dialog |
|
|
244
|
-
| `DialogVisible` | `boolean` | `false` | Controls the visibility of the dialog |
|
|
98
|
+
### Outputs
|
|
245
99
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
| Output | Type | Description |
|
|
251
|
-
|--------|------|-------------|
|
|
252
|
-
| `DialogClosed` | `EventEmitter<boolean>` | Emitted when the dialog is closed. `true` if OK was clicked, `false` if Cancel was clicked or dialog was closed by other means |
|
|
253
|
-
|
|
254
|
-
#### Behavior
|
|
255
|
-
|
|
256
|
-
- When the dialog is opened, it saves the initial state of selected/unselected records
|
|
257
|
-
- Clicking OK commits the changes and closes the dialog
|
|
258
|
-
- Clicking Cancel or closing the dialog by other means reverts all changes to the initial state
|
|
259
|
-
- The component maintains references to the same arrays passed in as inputs, modifying them in place
|
|
260
|
-
|
|
261
|
-
## Toolbar Configuration
|
|
262
|
-
|
|
263
|
-
The component accepts a `ListBoxToolbarConfig` object to customize the available toolbar actions:
|
|
264
|
-
|
|
265
|
-
```typescript
|
|
266
|
-
const toolbarSettings: ListBoxToolbarConfig = {
|
|
267
|
-
position: "right", // or "left", "top", "bottom"
|
|
268
|
-
tools: [
|
|
269
|
-
"moveUp", // Move selected item up
|
|
270
|
-
"transferFrom", // Move selected item from unselected to selected
|
|
271
|
-
"transferAllFrom", // Move all items from unselected to selected
|
|
272
|
-
"transferAllTo", // Move all items from selected to unselected
|
|
273
|
-
"transferTo", // Move selected item from selected to unselected
|
|
274
|
-
"moveDown" // Move selected item down
|
|
275
|
-
]
|
|
276
|
-
};
|
|
277
|
-
```
|
|
278
|
-
|
|
279
|
-
## Selection Behavior
|
|
280
|
-
|
|
281
|
-
The component uses Kendo UI ListBox components with the following interaction patterns:
|
|
282
|
-
|
|
283
|
-
1. **Toolbar Actions**: Use the toolbar buttons to move items between lists
|
|
284
|
-
2. **Drag and Drop**: Items can be dragged from one list to another
|
|
285
|
-
3. **Double-Click**: Double-clicking an item instantly moves it to the opposite list
|
|
286
|
-
4. **Multi-Select**: Hold Ctrl/Cmd to select multiple items, or Shift to select a range
|
|
287
|
-
5. **Dialog State Management**: When using the dialog wrapper:
|
|
288
|
-
- Changes are held in memory until confirmed
|
|
289
|
-
- OK button commits all changes
|
|
290
|
-
- Cancel button reverts to the initial state
|
|
291
|
-
|
|
292
|
-
## Styling
|
|
293
|
-
|
|
294
|
-
The component uses Kendo UI ListBox styles with additional custom styling:
|
|
295
|
-
|
|
296
|
-
- `.list-box`: Applied to each listbox container
|
|
297
|
-
- `.item-icon`: Applied to icon spans when DisplayIconField is used
|
|
298
|
-
|
|
299
|
-
You can override these styles in your application's CSS:
|
|
300
|
-
|
|
301
|
-
```css
|
|
302
|
-
/* Example: Custom styling for the record selector */
|
|
303
|
-
mj-record-selector .list-box {
|
|
304
|
-
min-height: 300px;
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
mj-record-selector .item-icon {
|
|
308
|
-
margin-right: 8px;
|
|
309
|
-
color: #666;
|
|
310
|
-
}
|
|
311
|
-
```
|
|
100
|
+
| Event | Type | Description |
|
|
101
|
+
|-------|------|-------------|
|
|
102
|
+
| `OnRecordListChanged` | `EventEmitter<RecordListChangedEvent>` | Emitted when records move between lists |
|
|
312
103
|
|
|
313
104
|
## Dependencies
|
|
314
105
|
|
|
315
|
-
|
|
316
|
-
- `@
|
|
317
|
-
- `@
|
|
318
|
-
- `@memberjunction/global`: ^2.43.0 - Global utilities and types
|
|
319
|
-
- `@memberjunction/ng-container-directives`: ^2.43.0 - Layout directives
|
|
320
|
-
- `@memberjunction/ng-shared`: ^2.43.0 - Shared Angular utilities
|
|
321
|
-
|
|
322
|
-
### Peer Dependencies
|
|
323
|
-
- `@angular/common`: 18.0.2
|
|
324
|
-
- `@angular/core`: 18.0.2
|
|
325
|
-
- `@angular/forms`: 18.0.2
|
|
326
|
-
- `@angular/router`: 18.0.2
|
|
327
|
-
- `@progress/kendo-angular-buttons`: 16.2.0
|
|
328
|
-
- `@progress/kendo-angular-dialog`: 16.2.0
|
|
329
|
-
- `@progress/kendo-angular-listbox`: 16.2.0
|
|
330
|
-
|
|
331
|
-
## Integration with Other MemberJunction Packages
|
|
332
|
-
|
|
333
|
-
This package integrates seamlessly with other MemberJunction components:
|
|
334
|
-
|
|
335
|
-
- **Entity Framework**: Works with any BaseEntity subclass from `@memberjunction/core`
|
|
336
|
-
- **Metadata System**: Compatible with entities loaded through the MJ metadata system
|
|
337
|
-
- **Container Directives**: Uses `mjFillContainer` directive for proper layout integration
|
|
338
|
-
- **RunView**: Designed to work with records loaded via RunView queries
|
|
339
|
-
|
|
340
|
-
## Common Use Cases
|
|
341
|
-
|
|
342
|
-
1. **User Role Assignment**: Select users to assign to specific roles
|
|
343
|
-
2. **Permission Management**: Choose permissions to grant to users or roles
|
|
344
|
-
3. **Category Assignment**: Assign items to multiple categories
|
|
345
|
-
4. **Team Membership**: Manage team member selections
|
|
346
|
-
5. **Feature Selection**: Enable/disable features for specific tenants
|
|
347
|
-
|
|
348
|
-
## Best Practices
|
|
349
|
-
|
|
350
|
-
1. **Data Loading**: Always use the MemberJunction RunView pattern with `ResultType: 'entity_object'` for optimal performance
|
|
351
|
-
2. **Memory Management**: The dialog component maintains state internally, so you don't need to manage temporary arrays
|
|
352
|
-
3. **Field Names**: Ensure DisplayField matches actual property names in your entities (not the Get() method parameters)
|
|
353
|
-
4. **Icon Fields**: If using DisplayIconField, ensure the field contains valid CSS class names (e.g., 'fa-user', 'fas fa-star')
|
|
354
|
-
5. **Array References**: The component modifies the input arrays in place, so use the same array references throughout your component's lifecycle
|
|
355
|
-
|
|
356
|
-
## Troubleshooting
|
|
357
|
-
|
|
358
|
-
### Records not displaying
|
|
359
|
-
- Verify that DisplayField matches an actual property name in your BaseEntity objects
|
|
360
|
-
- Check that AvailableRecords is populated with valid BaseEntity instances
|
|
361
|
-
- Ensure SelectedRecords and UnselectedRecords are subsets of AvailableRecords
|
|
362
|
-
|
|
363
|
-
### Icons not showing
|
|
364
|
-
- Confirm DisplayIconField contains valid CSS class names
|
|
365
|
-
- Ensure required icon fonts (Font Awesome, etc.) are loaded in your application
|
|
366
|
-
|
|
367
|
-
### Dialog state issues
|
|
368
|
-
- Make sure DialogVisible is properly bound and updated
|
|
369
|
-
- Handle the DialogClosed event to update your component's state
|
|
370
|
-
|
|
371
|
-
## Version History
|
|
372
|
-
|
|
373
|
-
See [CHANGELOG.md](./CHANGELOG.md) for detailed version history.
|
|
106
|
+
- [@memberjunction/core](../../MJCore/README.md) -- Metadata, BaseEntity
|
|
107
|
+
- `@progress/kendo-angular-listbox` -- Dual listbox rendering
|
|
108
|
+
- `@progress/kendo-angular-buttons` -- Toolbar buttons
|
|
374
109
|
|
|
375
|
-
##
|
|
110
|
+
## Related Packages
|
|
376
111
|
|
|
377
|
-
|
|
112
|
+
- [@memberjunction/ng-find-record](../find-record/README.md) -- Search-based record selection
|
|
113
|
+
- [@memberjunction/ng-join-grid](../join-grid/README.md) -- Grid-based many-to-many management
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.component.d.ts","sourceRoot":"","sources":["../../src/lib/dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,YAAY,EAAkD,MAAM,eAAe,CAAC;AAEvI,OAAO,EAAY,UAAU,EAAoD,MAAM,sBAAsB,CAAC;AAG9G,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;;AAEvE,
|
|
1
|
+
{"version":3,"file":"dialog.component.d.ts","sourceRoot":"","sources":["../../src/lib/dialog.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4C,YAAY,EAAkD,MAAM,eAAe,CAAC;AAEvI,OAAO,EAAY,UAAU,EAAoD,MAAM,sBAAsB,CAAC;AAG9G,OAAO,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;;AAEvE,qBAMa,6BAA6B;IAC/B,WAAW,EAAE,MAAM,CAAoB;IACvC,WAAW,EAAE,MAAM,CAAW;IAC9B,YAAY,EAAE,MAAM,CAAW;IAExC,IAAa,aAAa,IAAI,OAAO,CAEpC;IACD,IAAI,aAAa,CAAC,KAAK,EAAE,OAAO,EAM/B;IACD,OAAO,CAAC,cAAc,CAAkB;IACxC;;OAEG;IACO,YAAY,wBAA+B;IAGrD;;OAEG;IACM,UAAU,EAAE,MAAM,CAAM;IACjC;;OAEG;IACM,YAAY,EAAE,MAAM,CAAM;IACnC;;OAEG;IACM,gBAAgB,EAAE,MAAM,CAAM;IACvC;;OAEG;IACM,gBAAgB,EAAE,UAAU,EAAE,CAAM;IAE7C;;OAEG;IACM,eAAe,EAAE,UAAU,EAAE,CAAM;IAC5C;;OAEG;IACM,iBAAiB,EAAE,UAAU,EAAE,CAAM;IAG9C;;OAEG;IACa,eAAe,EAAE,oBAAoB,CAGnD;IAEQ,cAAc,sCAAoC;IAClD,gBAAgB,sCAAoC;IAE9D,SAAS,CAAC,gBAAgB,EAAE,UAAU,EAAE,CAAM;IAC9C,SAAS,CAAC,kBAAkB,EAAE,UAAU,EAAE,CAAM;IAEhD,SAAS,CAAC,oBAAoB;IAKvB,QAAQ;IAYR,IAAI;yCAhFA,6BAA6B;2CAA7B,6BAA6B;CAwFzC"}
|
|
@@ -98,15 +98,15 @@ export class RecordSelectorDialogComponent {
|
|
|
98
98
|
this.DialogClosed.emit(true);
|
|
99
99
|
}
|
|
100
100
|
static ɵfac = function RecordSelectorDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RecordSelectorDialogComponent)(); };
|
|
101
|
-
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordSelectorDialogComponent, selectors: [["mj-record-selector-dialog"]], inputs: { DialogTitle: "DialogTitle", DialogWidth: "DialogWidth", DialogHeight: "DialogHeight", DialogVisible: "DialogVisible", EntityName: "EntityName", DisplayField: "DisplayField", DisplayIconField: "DisplayIconField", AvailableRecords: "AvailableRecords", SelectedRecords: "SelectedRecords", UnselectedRecords: "UnselectedRecords", ToolbarSettings: "ToolbarSettings" }, outputs: { DialogClosed: "DialogClosed", RecordSelected: "RecordSelected", RecordUnselected: "RecordUnselected" }, decls: 1, vars: 1, consts: [[3, "width", "height", "title"], [3, "close", "width", "height", "title"], [3, "AvailableRecords", "DisplayField", "SelectedRecords", "EntityName", "ToolbarSettings", "DisplayIconField", "UnselectedRecords"], ["kendoButton", "", "themeColor", "primary", 3, "click"], ["kendoButton", "", 3, "click"]], template: function RecordSelectorDialogComponent_Template(rf, ctx) { if (rf & 1) {
|
|
102
|
-
i0.ɵɵ
|
|
101
|
+
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordSelectorDialogComponent, selectors: [["mj-record-selector-dialog"]], inputs: { DialogTitle: "DialogTitle", DialogWidth: "DialogWidth", DialogHeight: "DialogHeight", DialogVisible: "DialogVisible", EntityName: "EntityName", DisplayField: "DisplayField", DisplayIconField: "DisplayIconField", AvailableRecords: "AvailableRecords", SelectedRecords: "SelectedRecords", UnselectedRecords: "UnselectedRecords", ToolbarSettings: "ToolbarSettings" }, outputs: { DialogClosed: "DialogClosed", RecordSelected: "RecordSelected", RecordUnselected: "RecordUnselected" }, standalone: false, decls: 1, vars: 1, consts: [[3, "width", "height", "title"], [3, "close", "width", "height", "title"], [3, "AvailableRecords", "DisplayField", "SelectedRecords", "EntityName", "ToolbarSettings", "DisplayIconField", "UnselectedRecords"], ["kendoButton", "", "themeColor", "primary", 3, "click"], ["kendoButton", "", 3, "click"]], template: function RecordSelectorDialogComponent_Template(rf, ctx) { if (rf & 1) {
|
|
102
|
+
i0.ɵɵconditionalCreate(0, RecordSelectorDialogComponent_Conditional_0_Template, 7, 10, "kendo-dialog", 0);
|
|
103
103
|
} if (rf & 2) {
|
|
104
104
|
i0.ɵɵconditional(ctx.DialogVisible ? 0 : -1);
|
|
105
|
-
} }, dependencies: [i1.DialogComponent, i1.DialogActionsComponent, i2.ButtonComponent, i3.RecordSelectorComponent] });
|
|
105
|
+
} }, dependencies: [i1.DialogComponent, i1.DialogActionsComponent, i2.ButtonComponent, i3.RecordSelectorComponent], encapsulation: 2 });
|
|
106
106
|
}
|
|
107
107
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecordSelectorDialogComponent, [{
|
|
108
108
|
type: Component,
|
|
109
|
-
args: [{ selector: 'mj-record-selector-dialog', template: "@if (DialogVisible) {\n <kendo-dialog\n [width]=\"DialogWidth\"\n [height]=\"DialogHeight\"\n [title]=\"DialogTitle\" \n (close)=\"OnCancel()\"\n >\n <mj-record-selector\n [AvailableRecords]=\"AvailableRecords\"\n [DisplayField]=\"DisplayField\"\n [SelectedRecords]=\"SelectedRecords\"\n [EntityName]=\"EntityName\"\n [ToolbarSettings]=\"ToolbarSettings\"\n [DisplayIconField]=\"DisplayIconField\"\n [UnselectedRecords]=\"UnselectedRecords\"\n >\n </mj-record-selector>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"OnOK()\" themeColor=\"primary\">OK</button>\n <button kendoButton (click)=\"OnCancel()\">Cancel</button>\n </kendo-dialog-actions> \n </kendo-dialog> \n}" }]
|
|
109
|
+
args: [{ standalone: false, selector: 'mj-record-selector-dialog', template: "@if (DialogVisible) {\n <kendo-dialog\n [width]=\"DialogWidth\"\n [height]=\"DialogHeight\"\n [title]=\"DialogTitle\" \n (close)=\"OnCancel()\"\n >\n <mj-record-selector\n [AvailableRecords]=\"AvailableRecords\"\n [DisplayField]=\"DisplayField\"\n [SelectedRecords]=\"SelectedRecords\"\n [EntityName]=\"EntityName\"\n [ToolbarSettings]=\"ToolbarSettings\"\n [DisplayIconField]=\"DisplayIconField\"\n [UnselectedRecords]=\"UnselectedRecords\"\n >\n </mj-record-selector>\n <kendo-dialog-actions>\n <button kendoButton (click)=\"OnOK()\" themeColor=\"primary\">OK</button>\n <button kendoButton (click)=\"OnCancel()\">Cancel</button>\n </kendo-dialog-actions> \n </kendo-dialog> \n}" }]
|
|
110
110
|
}], null, { DialogTitle: [{
|
|
111
111
|
type: Input
|
|
112
112
|
}], DialogWidth: [{
|
|
@@ -136,5 +136,5 @@ export class RecordSelectorDialogComponent {
|
|
|
136
136
|
}], RecordUnselected: [{
|
|
137
137
|
type: Output
|
|
138
138
|
}] }); })();
|
|
139
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordSelectorDialogComponent, { className: "RecordSelectorDialogComponent", filePath: "src/lib/dialog.component.ts", lineNumber:
|
|
139
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordSelectorDialogComponent, { className: "RecordSelectorDialogComponent", filePath: "src/lib/dialog.component.ts", lineNumber: 14 }); })();
|
|
140
140
|
//# sourceMappingURL=dialog.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.component.js","sourceRoot":"","sources":["../../src/lib/dialog.component.ts","../../src/lib/dialog.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAyB,MAAM,EAAE,YAAY,EAAU,KAAK,EAAmC,MAAM,eAAe,CAAC;;;;;;;ICCnI,uCAKC;IADG,uMAAS,iBAAU,KAAC;IAEpB,wCASqB;IAEjB,AADJ,4CAAsB,gBACwC;IAAtC,iMAAS,aAAM,KAAC;IAAsB,kBAAE;IAAA,iBAAS;IACrE,iCAAyC;IAArB,iMAAS,iBAAU,KAAC;IAAC,sBAAM;IAEvD,AADI,AADmD,iBAAS,EACrC,EACZ;;;IAjBX,AADA,AADA,0CAAqB,+BACE,6BACF;IAIjB,cAAqC;IAMrC,AADA,AADA,AADA,AADA,AADA,AADA,0DAAqC,qCACR,2CACM,iCACV,2CACU,6CACE,+CACE;;
|
|
1
|
+
{"version":3,"file":"dialog.component.js","sourceRoot":"","sources":["../../src/lib/dialog.component.ts","../../src/lib/dialog.component.html"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-selector.component.d.ts","sourceRoot":"","sources":["../../src/lib/record-selector.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAoB,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,UAAU,EAAG,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;;AAEzF,
|
|
1
|
+
{"version":3,"file":"record-selector.component.d.ts","sourceRoot":"","sources":["../../src/lib/record-selector.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAoB,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,UAAU,EAAG,MAAM,sBAAsB,CAAC;AAEnD,OAAO,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;;AAEzF,qBAMa,uBAAuB;IAClC;;OAEG;IACM,UAAU,EAAE,MAAM,CAAM;IACjC;;OAEG;IACM,YAAY,EAAE,MAAM,CAAM;IAEnC;;OAEG;IACM,gBAAgB,EAAE,MAAM,CAAM;IAEvC;;OAEG;IACM,gBAAgB,EAAE,UAAU,EAAE,CAAM;IAE7C;;OAEG;IACM,eAAe,EAAE,UAAU,EAAE,CAAM;IAC5C;;OAEG;IACM,iBAAiB,EAAE,UAAU,EAAE,CAAM;IAG9C;;OAEG;IACa,eAAe,EAAE,oBAAoB,CAGnD;IAEQ,cAAc,sCAAoC;IAClD,gBAAgB,sCAAoC;IAGlB,iBAAiB,EAAG,gBAAgB,CAAC;IACvC,eAAe,EAAG,gBAAgB,CAAC;IAG7E,UAAU,CAAC,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,GAAG,UAAU,GAAG,IAAI;yCA9C7D,uBAAuB;2CAAvB,uBAAuB;CAqEnC"}
|
|
@@ -12,7 +12,7 @@ function RecordSelectorComponent_ng_template_3_Conditional_0_Template(rf, ctx) {
|
|
|
12
12
|
i0.ɵɵproperty("ngClass", dataItem_r2[ctx_r2.DisplayIconField] + " item-icon");
|
|
13
13
|
} }
|
|
14
14
|
function RecordSelectorComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
|
|
15
|
-
i0.ɵɵ
|
|
15
|
+
i0.ɵɵconditionalCreate(0, RecordSelectorComponent_ng_template_3_Conditional_0_Template, 1, 1, "span", 5);
|
|
16
16
|
i0.ɵɵelementStart(1, "span");
|
|
17
17
|
i0.ɵɵtext(2);
|
|
18
18
|
i0.ɵɵelementEnd();
|
|
@@ -31,7 +31,7 @@ function RecordSelectorComponent_ng_template_6_Conditional_0_Template(rf, ctx) {
|
|
|
31
31
|
i0.ɵɵproperty("ngClass", dataItem_r4[ctx_r2.DisplayIconField] + " item-icon");
|
|
32
32
|
} }
|
|
33
33
|
function RecordSelectorComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
|
|
34
|
-
i0.ɵɵ
|
|
34
|
+
i0.ɵɵconditionalCreate(0, RecordSelectorComponent_ng_template_6_Conditional_0_Template, 1, 1, "span", 5);
|
|
35
35
|
i0.ɵɵelementStart(1, "span");
|
|
36
36
|
i0.ɵɵtext(2);
|
|
37
37
|
i0.ɵɵelementEnd();
|
|
@@ -101,13 +101,12 @@ export class RecordSelectorComponent {
|
|
|
101
101
|
}
|
|
102
102
|
static ɵfac = function RecordSelectorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RecordSelectorComponent)(); };
|
|
103
103
|
static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: RecordSelectorComponent, selectors: [["mj-record-selector"]], viewQuery: function RecordSelectorComponent_Query(rf, ctx) { if (rf & 1) {
|
|
104
|
-
i0.ɵɵviewQuery(_c0, 5);
|
|
105
|
-
i0.ɵɵviewQuery(_c1, 5);
|
|
104
|
+
i0.ɵɵviewQuery(_c0, 5)(_c1, 5);
|
|
106
105
|
} if (rf & 2) {
|
|
107
106
|
let _t;
|
|
108
107
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.unselectedListBox = _t.first);
|
|
109
108
|
i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.selectedListBox = _t.first);
|
|
110
|
-
} }, inputs: { EntityName: "EntityName", DisplayField: "DisplayField", DisplayIconField: "DisplayIconField", AvailableRecords: "AvailableRecords", SelectedRecords: "SelectedRecords", UnselectedRecords: "UnselectedRecords", ToolbarSettings: "ToolbarSettings" }, outputs: { RecordSelected: "RecordSelected", RecordUnselected: "RecordUnselected" }, decls: 7, vars: 7, consts: [["unselected", ""], ["selected", ""], ["kendoListBoxDataBinding", "", 1, "list-box", 3, "dblclick", "data", "textField", "connectedWith", "toolbar"], ["kendoListBoxItemTemplate", ""], [1, "list-box", 3, "dblclick", "data", "textField", "toolbar"], [3, "ngClass"]], template: function RecordSelectorComponent_Template(rf, ctx) { if (rf & 1) {
|
|
109
|
+
} }, inputs: { EntityName: "EntityName", DisplayField: "DisplayField", DisplayIconField: "DisplayIconField", AvailableRecords: "AvailableRecords", SelectedRecords: "SelectedRecords", UnselectedRecords: "UnselectedRecords", ToolbarSettings: "ToolbarSettings" }, outputs: { RecordSelected: "RecordSelected", RecordUnselected: "RecordUnselected" }, standalone: false, decls: 7, vars: 7, consts: [["unselected", ""], ["selected", ""], ["kendoListBoxDataBinding", "", 1, "list-box", 3, "dblclick", "data", "textField", "connectedWith", "toolbar"], ["kendoListBoxItemTemplate", ""], [1, "list-box", 3, "dblclick", "data", "textField", "toolbar"], [3, "ngClass"]], template: function RecordSelectorComponent_Template(rf, ctx) { if (rf & 1) {
|
|
111
110
|
const _r1 = i0.ɵɵgetCurrentView();
|
|
112
111
|
i0.ɵɵelementStart(0, "div")(1, "kendo-listbox", 2, 0);
|
|
113
112
|
i0.ɵɵlistener("dblclick", function RecordSelectorComponent_Template_kendo_listbox_dblclick_1_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDblClick($event, "unselected")); });
|
|
@@ -127,7 +126,7 @@ export class RecordSelectorComponent {
|
|
|
127
126
|
}
|
|
128
127
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RecordSelectorComponent, [{
|
|
129
128
|
type: Component,
|
|
130
|
-
args: [{ selector: 'mj-record-selector', template: "<div > \n <kendo-listbox\n class=\"list-box\"\n #unselected\n kendoListBoxDataBinding\n [data]=\"UnselectedRecords\"\n [textField]=\"DisplayField\"\n [connectedWith]=\"selected\"\n [toolbar]=\"ToolbarSettings\"\n (dblclick)=\"onDblClick($event, 'unselected')\"\n >\n <ng-template kendoListBoxItemTemplate let-dataItem>\n @if (this.DisplayIconField) {\n <span [ngClass]=\"dataItem[this.DisplayIconField] + ' item-icon'\"></span>\n }\n <span>{{ dataItem[DisplayField] }}</span>\n </ng-template>\n </kendo-listbox>\n <kendo-listbox \n class=\"list-box\"\n #selected \n [data]=\"SelectedRecords\" \n [textField]=\"DisplayField\"\n [toolbar]=\"false\"\n (dblclick)=\"onDblClick($event, 'selected')\"\n >\n <ng-template kendoListBoxItemTemplate let-dataItem>\n @if (this.DisplayIconField) {\n <span [ngClass]=\"dataItem[this.DisplayIconField] + ' item-icon'\"></span>\n }\n <span>{{ dataItem[DisplayField] }}</span>\n </ng-template>\n </kendo-listbox>\n</div>", styles: [".list-box {\n width: 300px;\n height: 300px;\n}\n\n.k-listbox-actions-right {\n margin-left: 10px;\n}\n\n.item-icon {\n font-size: 16px;\n width: 25px;\n margin-right: 5px;\n}"] }]
|
|
129
|
+
args: [{ standalone: false, selector: 'mj-record-selector', template: "<div > \n <kendo-listbox\n class=\"list-box\"\n #unselected\n kendoListBoxDataBinding\n [data]=\"UnselectedRecords\"\n [textField]=\"DisplayField\"\n [connectedWith]=\"selected\"\n [toolbar]=\"ToolbarSettings\"\n (dblclick)=\"onDblClick($event, 'unselected')\"\n >\n <ng-template kendoListBoxItemTemplate let-dataItem>\n @if (this.DisplayIconField) {\n <span [ngClass]=\"dataItem[this.DisplayIconField] + ' item-icon'\"></span>\n }\n <span>{{ dataItem[DisplayField] }}</span>\n </ng-template>\n </kendo-listbox>\n <kendo-listbox \n class=\"list-box\"\n #selected \n [data]=\"SelectedRecords\" \n [textField]=\"DisplayField\"\n [toolbar]=\"false\"\n (dblclick)=\"onDblClick($event, 'selected')\"\n >\n <ng-template kendoListBoxItemTemplate let-dataItem>\n @if (this.DisplayIconField) {\n <span [ngClass]=\"dataItem[this.DisplayIconField] + ' item-icon'\"></span>\n }\n <span>{{ dataItem[DisplayField] }}</span>\n </ng-template>\n </kendo-listbox>\n</div>", styles: [".list-box {\n width: 300px;\n height: 300px;\n}\n\n.k-listbox-actions-right {\n margin-left: 10px;\n}\n\n.item-icon {\n font-size: 16px;\n width: 25px;\n margin-right: 5px;\n}"] }]
|
|
131
130
|
}], null, { EntityName: [{
|
|
132
131
|
type: Input
|
|
133
132
|
}], DisplayField: [{
|
|
@@ -153,5 +152,5 @@ export class RecordSelectorComponent {
|
|
|
153
152
|
type: ViewChild,
|
|
154
153
|
args: ['selected', { static: false }]
|
|
155
154
|
}] }); })();
|
|
156
|
-
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordSelectorComponent, { className: "RecordSelectorComponent", filePath: "src/lib/record-selector.component.ts", lineNumber:
|
|
155
|
+
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RecordSelectorComponent, { className: "RecordSelectorComponent", filePath: "src/lib/record-selector.component.ts", lineNumber: 13 }); })();
|
|
157
156
|
//# sourceMappingURL=record-selector.component.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"record-selector.component.js","sourceRoot":"","sources":["../../src/lib/record-selector.component.ts","../../src/lib/record-selector.component.html"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,YAAY,EAAE,KAAK,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;;;;;;;ICalE,0BAAwE;;;;IAAlE,6EAA0D;;;IADpE
|
|
1
|
+
{"version":3,"file":"record-selector.component.js","sourceRoot":"","sources":["../../src/lib/record-selector.component.ts","../../src/lib/record-selector.component.html"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@memberjunction/ng-record-selector",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "MemberJunction: Angular Components to allow a user to select/deselect items from a possible set",
|
|
5
5
|
"main": "./dist/public-api.js",
|
|
6
6
|
"typings": "./dist/public-api.d.ts",
|
|
@@ -15,25 +15,25 @@
|
|
|
15
15
|
"author": "",
|
|
16
16
|
"license": "ISC",
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@angular/compiler": "
|
|
19
|
-
"@angular/compiler-cli": "
|
|
18
|
+
"@angular/compiler": "21.1.3",
|
|
19
|
+
"@angular/compiler-cli": "21.1.3"
|
|
20
20
|
},
|
|
21
21
|
"peerDependencies": {
|
|
22
|
-
"@angular/common": "
|
|
23
|
-
"@angular/core": "
|
|
24
|
-
"@angular/forms": "
|
|
25
|
-
"@angular/router": "
|
|
26
|
-
"@progress/kendo-angular-buttons": "
|
|
27
|
-
"@progress/kendo-angular-dialog": "
|
|
28
|
-
"@progress/kendo-angular-listbox": "
|
|
22
|
+
"@angular/common": "21.1.3",
|
|
23
|
+
"@angular/core": "21.1.3",
|
|
24
|
+
"@angular/forms": "21.1.3",
|
|
25
|
+
"@angular/router": "21.1.3",
|
|
26
|
+
"@progress/kendo-angular-buttons": "22.0.1",
|
|
27
|
+
"@progress/kendo-angular-dialog": "22.0.1",
|
|
28
|
+
"@progress/kendo-angular-listbox": "22.0.1"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@memberjunction/core-entities": "
|
|
32
|
-
"@memberjunction/global": "
|
|
33
|
-
"@memberjunction/core": "
|
|
34
|
-
"@memberjunction/ng-container-directives": "
|
|
35
|
-
"@memberjunction/ng-shared": "
|
|
36
|
-
"tslib": "^2.
|
|
31
|
+
"@memberjunction/core-entities": "4.1.0",
|
|
32
|
+
"@memberjunction/global": "4.1.0",
|
|
33
|
+
"@memberjunction/core": "4.1.0",
|
|
34
|
+
"@memberjunction/ng-container-directives": "4.1.0",
|
|
35
|
+
"@memberjunction/ng-shared": "4.1.0",
|
|
36
|
+
"tslib": "^2.8.1"
|
|
37
37
|
},
|
|
38
38
|
"sideEffects": false,
|
|
39
39
|
"repository": {
|