ngx-material-entity 0.1.2 → 0.1.3

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 (97) hide show
  1. package/classes/base-builder.class.d.ts +35 -0
  2. package/classes/entity-service.class.d.ts +1 -1
  3. package/classes/entity-utilities.class.d.ts +36 -3
  4. package/components/confirm-dialog/confirm-dialog-data.builder.d.ts +10 -11
  5. package/components/confirm-dialog/confirm-dialog-data.d.ts +4 -0
  6. package/components/confirm-dialog/confirm-dialog.component.d.ts +11 -0
  7. package/components/input/{array-table/add-array-item-dialog/add-array-item-dialog-data.builder.d.ts → add-array-item-dialog-data.builder.d.ts} +11 -7
  8. package/components/input/{array-table/add-array-item-dialog/add-array-item-dialog-data.d.ts → add-array-item-dialog-data.d.ts} +5 -2
  9. package/components/input/input.component.d.ts +100 -7
  10. package/components/input/input.module.d.ts +6 -4
  11. package/components/table/create-dialog/create-dialog-data.builder.d.ts +9 -8
  12. package/components/table/create-dialog/create-entity-dialog-data.builder.d.ts +9 -3
  13. package/components/table/create-dialog/create-entity-dialog.component.d.ts +15 -3
  14. package/components/table/edit-dialog/edit-dialog-data.builder.d.ts +9 -11
  15. package/components/table/edit-dialog/edit-entity-dialog.builder.d.ts +9 -3
  16. package/components/table/edit-dialog/edit-entity-dialog.component.d.ts +19 -3
  17. package/components/table/table-data.builder.d.ts +20 -9
  18. package/components/table/table-data.d.ts +14 -2
  19. package/components/table/table.component.d.ts +46 -0
  20. package/components/table/table.module.d.ts +3 -1
  21. package/decorators/array/array-decorator-internal.data.d.ts +13 -2
  22. package/decorators/array/array-decorator.data.d.ts +21 -12
  23. package/decorators/array/array.decorator.d.ts +1 -1
  24. package/decorators/base/property-decorator-internal.data.d.ts +16 -3
  25. package/decorators/base/property-decorator.data.d.ts +26 -5
  26. package/decorators/boolean/boolean-decorator-internal.data.d.ts +9 -0
  27. package/decorators/boolean/boolean-decorator.data.d.ts +9 -0
  28. package/decorators/boolean/boolean.decorator.d.ts +1 -1
  29. package/decorators/number/number-decorator-internal.data.d.ts +6 -0
  30. package/decorators/number/number-decorator.data.d.ts +6 -0
  31. package/decorators/number/number.decorator.d.ts +1 -1
  32. package/decorators/object/object-decorator-internal.data.d.ts +3 -0
  33. package/decorators/object/object-decorator.data.d.ts +3 -0
  34. package/decorators/object/object.decorator.d.ts +1 -1
  35. package/decorators/string/string-decorator-internal.data.d.ts +12 -0
  36. package/decorators/string/string-decorator.data.d.ts +12 -0
  37. package/decorators/string/string.decorator.d.ts +1 -1
  38. package/esm2020/classes/base-builder.class.mjs +43 -0
  39. package/esm2020/classes/entity-service.class.mjs +2 -2
  40. package/esm2020/classes/entity-utilities.class.mjs +81 -33
  41. package/esm2020/components/confirm-dialog/confirm-dialog-data.builder.mjs +15 -48
  42. package/esm2020/components/confirm-dialog/confirm-dialog-data.mjs +1 -1
  43. package/esm2020/components/confirm-dialog/confirm-dialog.component.mjs +13 -2
  44. package/esm2020/components/get-validation-error-message.function.mjs +5 -1
  45. package/esm2020/components/input/add-array-item-dialog-data.builder.mjs +30 -0
  46. package/esm2020/components/input/add-array-item-dialog-data.mjs +2 -0
  47. package/esm2020/components/input/input.component.mjs +170 -31
  48. package/esm2020/components/input/input.module.mjs +19 -9
  49. package/esm2020/components/table/create-dialog/create-dialog-data.builder.mjs +18 -40
  50. package/esm2020/components/table/create-dialog/create-entity-dialog-data.builder.mjs +15 -7
  51. package/esm2020/components/table/create-dialog/create-entity-dialog.component.mjs +24 -17
  52. package/esm2020/components/table/create-dialog/create-entity-dialog.module.mjs +20 -4
  53. package/esm2020/components/table/edit-dialog/edit-dialog-data.builder.mjs +23 -63
  54. package/esm2020/components/table/edit-dialog/edit-entity-dialog.builder.mjs +15 -7
  55. package/esm2020/components/table/edit-dialog/edit-entity-dialog.component.mjs +35 -24
  56. package/esm2020/components/table/table-data.builder.mjs +30 -14
  57. package/esm2020/components/table/table-data.mjs +1 -1
  58. package/esm2020/components/table/table.component.mjs +57 -10
  59. package/esm2020/components/table/table.module.mjs +12 -4
  60. package/esm2020/decorators/array/array-decorator-internal.data.mjs +15 -4
  61. package/esm2020/decorators/array/array-decorator.data.mjs +1 -1
  62. package/esm2020/decorators/array/array.decorator.mjs +2 -2
  63. package/esm2020/decorators/base/property-decorator-internal.data.mjs +28 -5
  64. package/esm2020/decorators/base/property-decorator.data.mjs +1 -1
  65. package/esm2020/decorators/boolean/boolean-decorator-internal.data.mjs +12 -1
  66. package/esm2020/decorators/boolean/boolean-decorator.data.mjs +1 -1
  67. package/esm2020/decorators/boolean/boolean.decorator.mjs +2 -2
  68. package/esm2020/decorators/number/number-decorator-internal.data.mjs +7 -1
  69. package/esm2020/decorators/number/number-decorator.data.mjs +1 -1
  70. package/esm2020/decorators/number/number.decorator.mjs +2 -2
  71. package/esm2020/decorators/object/object-decorator-internal.data.mjs +4 -1
  72. package/esm2020/decorators/object/object-decorator.data.mjs +1 -1
  73. package/esm2020/decorators/object/object.decorator.mjs +2 -2
  74. package/esm2020/decorators/string/string-decorator-internal.data.mjs +13 -1
  75. package/esm2020/decorators/string/string-decorator.data.mjs +1 -1
  76. package/esm2020/decorators/string/string.decorator.mjs +2 -2
  77. package/esm2020/public-api.mjs +1 -1
  78. package/fesm2015/ngx-material-entity.mjs +708 -703
  79. package/fesm2015/ngx-material-entity.mjs.map +1 -1
  80. package/fesm2020/ngx-material-entity.mjs +750 -723
  81. package/fesm2020/ngx-material-entity.mjs.map +1 -1
  82. package/package.json +1 -1
  83. package/public-api.d.ts +0 -1
  84. package/components/input/array-table/add-array-item-dialog/add-array-item-dialog.component.d.ts +0 -22
  85. package/components/input/array-table/add-array-item-dialog/add-array-item-dialog.module.d.ts +0 -12
  86. package/components/input/array-table/array-table.component.d.ts +0 -34
  87. package/components/input/array-table/array-table.module.d.ts +0 -19
  88. package/components/input/internal-input/internal-input.component.d.ts +0 -54
  89. package/components/input/internal-input/internal-input.module.d.ts +0 -16
  90. package/esm2020/components/input/array-table/add-array-item-dialog/add-array-item-dialog-data.builder.mjs +0 -33
  91. package/esm2020/components/input/array-table/add-array-item-dialog/add-array-item-dialog-data.mjs +0 -2
  92. package/esm2020/components/input/array-table/add-array-item-dialog/add-array-item-dialog.component.mjs +0 -45
  93. package/esm2020/components/input/array-table/add-array-item-dialog/add-array-item-dialog.module.mjs +0 -22
  94. package/esm2020/components/input/array-table/array-table.component.mjs +0 -119
  95. package/esm2020/components/input/array-table/array-table.module.mjs +0 -66
  96. package/esm2020/components/input/internal-input/internal-input.component.mjs +0 -70
  97. package/esm2020/components/input/internal-input/internal-input.module.mjs +0 -54
@@ -6,37 +6,36 @@ import * as i0 from '@angular/core';
6
6
  import { Component, Inject, NgModule, Input, ViewChild } from '@angular/core';
7
7
  import * as i1 from '@angular/material/dialog';
8
8
  import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
9
- import * as i5 from '@angular/material/checkbox';
9
+ import * as i6 from '@angular/material/checkbox';
10
10
  import { MatCheckboxModule } from '@angular/material/checkbox';
11
11
  import * as i3 from '@angular/material/button';
12
12
  import { MatButtonModule } from '@angular/material/button';
13
- import * as i7 from '@angular/common';
13
+ import * as i11 from '@angular/common';
14
14
  import { CommonModule } from '@angular/common';
15
- import * as i12 from '@angular/forms';
15
+ import * as i13 from '@angular/forms';
16
16
  import { FormsModule } from '@angular/forms';
17
- import * as i1$1 from '@angular/material/form-field';
17
+ import * as i9 from '@angular/material/table';
18
+ import { MatTableDataSource, MatTableModule } from '@angular/material/table';
19
+ import { SelectionModel } from '@angular/cdk/collections';
20
+ import * as i2 from '@angular/material/form-field';
18
21
  import { MatFormFieldModule } from '@angular/material/form-field';
19
- import * as i2 from '@angular/material/autocomplete';
22
+ import * as i3$1 from '@angular/material/autocomplete';
20
23
  import { MatAutocompleteModule } from '@angular/material/autocomplete';
21
- import * as i3$1 from '@angular/material/core';
22
- import * as i4 from '@angular/material/select';
24
+ import * as i4 from '@angular/material/core';
25
+ import * as i5 from '@angular/material/select';
23
26
  import { MatSelectModule } from '@angular/material/select';
24
- import * as i6 from '@angular/material/slide-toggle';
27
+ import * as i7 from '@angular/material/slide-toggle';
25
28
  import { MatSlideToggleModule } from '@angular/material/slide-toggle';
26
- import { SelectionModel } from '@angular/cdk/collections';
27
- import * as i4$1 from '@angular/material/table';
28
- import { MatTableDataSource, MatTableModule } from '@angular/material/table';
29
- import * as i8 from '@angular/material/input';
30
- import { MatInputModule } from '@angular/material/input';
31
- import * as i10 from '@angular/cdk/text-field';
32
- import * as i8$1 from '@angular/material/chips';
29
+ import * as i10 from '@angular/material/chips';
33
30
  import { MatChipsModule } from '@angular/material/chips';
34
- import * as i9 from '@angular/material/icon';
31
+ import * as i12 from '@angular/material/input';
32
+ import { MatInputModule } from '@angular/material/input';
33
+ import * as i14 from '@angular/cdk/text-field';
35
34
  import { MatIconModule } from '@angular/material/icon';
36
35
  import * as i7$1 from '@angular/material/paginator';
37
36
  import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
38
37
  import { MatSort } from '@angular/material/sort';
39
- import * as i4$2 from '@angular/material/menu';
38
+ import * as i4$1 from '@angular/material/menu';
40
39
  import { MatMenuModule } from '@angular/material/menu';
41
40
 
42
41
  /**
@@ -73,21 +72,47 @@ var DecoratorTypes;
73
72
  DecoratorTypes["ARRAY_STRING_AUTOCOMPLETE_CHIPS"] = "arrayStringAutocompleteChips";
74
73
  })(DecoratorTypes || (DecoratorTypes = {}));
75
74
 
76
- class PropertyDecoratorConfigInternal {
75
+ /**
76
+ * The internal Position. Sets default values and validates user input.
77
+ */
78
+ class PositionInternal {
77
79
  constructor(data) {
78
- if (data.order && (data.order < 0)) {
79
- throw new Error('order must be at least 0');
80
+ this.validateInput(data);
81
+ this.row = data?.row ? data.row : -1;
82
+ this.order = data?.order ? data.order : -1;
83
+ }
84
+ validateInput(data) {
85
+ if (data?.order) {
86
+ if (data.order < 1) {
87
+ throw new Error('order must be at least 1');
88
+ }
89
+ if (data.order > 12) {
90
+ throw new Error('order cannot be bigger than 12 (the minimum value for a bootstrap column)');
91
+ }
80
92
  }
93
+ if (data?.row && (data.row < 1)) {
94
+ throw new Error('row must be at least 1');
95
+ }
96
+ }
97
+ }
98
+ /**
99
+ * The internal PropertyDecoratorConfig. Sets default values.
100
+ */
101
+ class PropertyDecoratorConfigInternal {
102
+ constructor(data) {
81
103
  this.display = data.display != undefined ? data.display : true;
82
104
  this.displayName = data.displayName;
83
105
  this.required = data.required != undefined ? data.required : true;
84
106
  this.omitForCreate = data.omitForCreate != undefined ? data.omitForCreate : false;
85
107
  this.omitForUpdate = data.omitForUpdate != undefined ? data.omitForUpdate : false;
86
108
  this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 6, 12];
87
- this.order = data.order ? data.order : -1;
109
+ this.position = new PositionInternal(data.position);
88
110
  }
89
111
  }
90
112
 
113
+ /**
114
+ * The internal DropdownStringDecoratorConfig. Sets default values.
115
+ */
91
116
  class DropdownStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
92
117
  constructor(data) {
93
118
  super(data);
@@ -95,6 +120,9 @@ class DropdownStringDecoratorConfigInternal extends PropertyDecoratorConfigInter
95
120
  this.dropdownValues = data.dropdownValues;
96
121
  }
97
122
  }
123
+ /**
124
+ * The internal DefaultStringDecoratorConfig. Sets default values.
125
+ */
98
126
  class DefaultStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
99
127
  constructor(data) {
100
128
  super(data);
@@ -104,6 +132,9 @@ class DefaultStringDecoratorConfigInternal extends PropertyDecoratorConfigIntern
104
132
  this.regex = data.regex;
105
133
  }
106
134
  }
135
+ /**
136
+ * The internal TextboxStringDecoratorConfig. Sets default values.
137
+ */
107
138
  class TextboxStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
108
139
  constructor(data) {
109
140
  super(data);
@@ -112,6 +143,9 @@ class TextboxStringDecoratorConfigInternal extends PropertyDecoratorConfigIntern
112
143
  this.maxLength = data.maxLength;
113
144
  }
114
145
  }
146
+ /**
147
+ * The internal AutocompleteStringDecoratorConfig. Sets default values.
148
+ */
115
149
  class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
116
150
  constructor(data) {
117
151
  super(data);
@@ -124,7 +158,7 @@ class AutocompleteStringDecoratorConfigInternal extends PropertyDecoratorConfigI
124
158
  }
125
159
 
126
160
  /**
127
- * Decorator for setting and getting string propery metadata.
161
+ * Decorator for setting and getting string Property metadata.
128
162
  *
129
163
  * @param metadata - The metadata of the string property.
130
164
  * @returns The method that defines the metadata.
@@ -174,8 +208,8 @@ class EntityUtilities {
174
208
  */
175
209
  static getOmitForUpdate(entity) {
176
210
  const res = [];
177
- for (const key of Reflect.ownKeys(entity)) {
178
- const metadata = Reflect.getMetadata('metadata', entity, key);
211
+ for (const key of EntityUtilities.keysOf(entity)) {
212
+ const metadata = EntityUtilities.getPropertyMetadata(entity, key);
179
213
  if (metadata.omitForUpdate) {
180
214
  res.push(key);
181
215
  }
@@ -190,8 +224,8 @@ class EntityUtilities {
190
224
  */
191
225
  static getOmitForCreate(entity) {
192
226
  const res = [];
193
- for (const key of Reflect.ownKeys(entity)) {
194
- const metadata = Reflect.getMetadata('metadata', entity, key);
227
+ for (const key of EntityUtilities.keysOf(entity)) {
228
+ const metadata = EntityUtilities.getPropertyMetadata(entity, key);
195
229
  if (metadata.omitForCreate) {
196
230
  res.push(key);
197
231
  }
@@ -284,7 +318,7 @@ class EntityUtilities {
284
318
  * Also checks all the validators given by the metadata ("required", "maxLength" etc.).
285
319
  *
286
320
  * @param entity - The entity to validate.
287
- * @param omit - Whether to check for creatiung or editing validity.
321
+ * @param omit - Whether to check for creating or editing validity.
288
322
  * @returns Whether or not the entity is valid.
289
323
  */
290
324
  static isEntityValid(entity, omit) {
@@ -309,7 +343,6 @@ class EntityUtilities {
309
343
  const metadata = this.getPropertyMetadata(entity, key, type);
310
344
  const metadataDefaultString = metadata;
311
345
  const metadataTextboxString = metadata;
312
- const metadataAutocompleteString = metadata;
313
346
  const metadataDefaultNumber = metadata;
314
347
  const objectProperty = entity[key];
315
348
  const metadataEntityArray = metadata;
@@ -324,7 +357,14 @@ class EntityUtilities {
324
357
  return false;
325
358
  }
326
359
  switch (type) {
360
+ case DecoratorTypes.BOOLEAN_DROPDOWN:
361
+ case DecoratorTypes.BOOLEAN_CHECKBOX:
362
+ case DecoratorTypes.BOOLEAN_TOGGLE:
363
+ return true;
364
+ case DecoratorTypes.STRING_DROPDOWN:
365
+ return true;
327
366
  case DecoratorTypes.STRING:
367
+ case DecoratorTypes.STRING_AUTOCOMPLETE:
328
368
  if (metadataDefaultString.maxLength
329
369
  && entity[key].length > metadataDefaultString.maxLength) {
330
370
  return false;
@@ -338,20 +378,6 @@ class EntityUtilities {
338
378
  return false;
339
379
  }
340
380
  break;
341
- case DecoratorTypes.STRING_AUTOCOMPLETE:
342
- if (metadataAutocompleteString.maxLength
343
- && entity[key].length > metadataAutocompleteString.maxLength) {
344
- return false;
345
- }
346
- if (metadataAutocompleteString.minLength
347
- && entity[key].length < metadataAutocompleteString.minLength) {
348
- return false;
349
- }
350
- if (metadataAutocompleteString.regex
351
- && !entity[key].match(metadataAutocompleteString.regex)) {
352
- return false;
353
- }
354
- break;
355
381
  case DecoratorTypes.STRING_TEXTBOX:
356
382
  if (metadataTextboxString.maxLength
357
383
  && entity[key].length > metadataTextboxString.maxLength) {
@@ -362,6 +388,8 @@ class EntityUtilities {
362
388
  return false;
363
389
  }
364
390
  break;
391
+ case DecoratorTypes.NUMBER_DROPDOWN:
392
+ return true;
365
393
  case DecoratorTypes.NUMBER:
366
394
  if (metadataDefaultNumber.max && entity[key] > metadataDefaultNumber.max) {
367
395
  return false;
@@ -436,31 +464,29 @@ class EntityUtilities {
436
464
  * @returns 0 if both values have the same order, a negative value if X, a positive value if Y.
437
465
  */
438
466
  static compareOrder(a, b, entity) {
439
- const metadataA = EntityUtilities.getPropertyMetadata(entity, a, EntityUtilities.getPropertyType(entity, a));
440
- const metadataB = EntityUtilities.getPropertyMetadata(entity, b, EntityUtilities.getPropertyType(entity, b));
441
- if (metadataA.order === -1) {
442
- if (metadataB.order === -1) {
467
+ const metadataA = EntityUtilities.getPropertyMetadata(entity, a);
468
+ const metadataB = EntityUtilities.getPropertyMetadata(entity, b);
469
+ if (metadataA.position.order === -1) {
470
+ if (metadataB.position.order === -1) {
443
471
  return 0;
444
472
  }
445
473
  return 1;
446
474
  }
447
- else if (metadataB.order === -1) {
475
+ else if (metadataB.position.order === -1) {
448
476
  return -1;
449
477
  }
450
- return ((metadataA.order) - (metadataB.order));
478
+ return ((metadataA.position.order) - (metadataB.position.order));
451
479
  }
452
480
  /**
453
481
  * Gets the bootstrap column values for "lg", "md", "sm".
454
482
  *
455
483
  * @param entity - Entity to get the bootstrap column values of the key.
456
484
  * @param key - Key of the property to get bootstrap column values from.
457
- * @param type - Defines for which screensize the column values should be returned.
485
+ * @param type - Defines for which screen size the column values should be returned.
458
486
  * @returns Bootstrap column value.
459
487
  */
460
488
  static getWidth(entity, key, type) {
461
- const propertyType = EntityUtilities.getPropertyType(entity, key);
462
- const metadata = EntityUtilities.getPropertyMetadata(entity, key, propertyType);
463
- metadata.defaultWidths = metadata.defaultWidths;
489
+ const metadata = EntityUtilities.getPropertyMetadata(entity, key);
464
490
  switch (type) {
465
491
  case 'lg':
466
492
  return metadata.defaultWidths[0];
@@ -481,11 +507,67 @@ class EntityUtilities {
481
507
  Reflect.set(entity, key, Reflect.get(entityPriorChanges, key));
482
508
  }
483
509
  }
510
+ /**
511
+ * Gets the rows that are used to display the given entity.
512
+ *
513
+ * @param entity - The entity to get the rows from.
514
+ * @param hideOmitForCreate - Whether or not keys with the metadata omitForCreate should be filtered out.
515
+ * @param hideOmitForEdit - Whether or not keys with the metadata omitForUpdate should be filtered out.
516
+ * @returns The sorted Rows containing the row number and the keys to display in that row.
517
+ */
518
+ static getEntityRows(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
519
+ const res = [];
520
+ const keys = EntityUtilities.keysOf(entity, hideOmitForCreate, hideOmitForEdit);
521
+ const numberOfRows = EntityUtilities.getNumberOfRows(keys, entity);
522
+ for (let i = 1; i <= numberOfRows; i++) {
523
+ const row = {
524
+ row: i,
525
+ keys: EntityUtilities.getKeysForRow(keys, entity, i)
526
+ };
527
+ res.push(row);
528
+ }
529
+ const lastRow = {
530
+ row: numberOfRows + 1,
531
+ keys: EntityUtilities.getKeysForRow(keys, entity, -1)
532
+ };
533
+ res.push(lastRow);
534
+ return res;
535
+ }
536
+ static getKeysForRow(keys, entity, i) {
537
+ return keys
538
+ .filter(k => EntityUtilities.getPropertyMetadata(entity, k).position.row === i)
539
+ .sort((a, b) => EntityUtilities.compareOrder(a, b, entity));
540
+ }
541
+ static getNumberOfRows(keys, entity) {
542
+ return keys
543
+ .map(k => EntityUtilities.getPropertyMetadata(entity, k).position.row)
544
+ .sort((a, b) => (a > b ? -1 : 1))[0];
545
+ }
546
+ /**
547
+ * Gets the keys of the provided entity correctly typed.
548
+ *
549
+ * @param entity - The entity to get the keys of.
550
+ * @param hideOmitForCreate - Whether or not keys with the metadata omitForCreate should be filtered out.
551
+ * @param hideOmitForEdit - Whether or not keys with the metadata omitForUpdate should be filtered out.
552
+ * @returns An array of keys of the entity.
553
+ */
554
+ static keysOf(entity, hideOmitForCreate = false, hideOmitForEdit = false) {
555
+ let keys = Reflect.ownKeys(entity);
556
+ if (hideOmitForCreate) {
557
+ const omitForCreateKeys = EntityUtilities.getOmitForCreate(entity);
558
+ keys = keys.filter(k => !omitForCreateKeys.includes(k));
559
+ }
560
+ if (hideOmitForEdit) {
561
+ const omitForUpdateKeys = EntityUtilities.getOmitForUpdate(entity);
562
+ keys = keys.filter(k => !omitForUpdateKeys.includes(k));
563
+ }
564
+ return keys;
565
+ }
484
566
  }
485
567
  _a = EntityUtilities;
486
- // eslint-disable-next-line @typescript-eslint/member-ordering
568
+ // eslint-disable-next-line @typescript-eslint/member-ordering, jsdoc/require-jsdoc
487
569
  EntityUtilities.construct = _a.new;
488
- // eslint-disable-next-line @typescript-eslint/member-ordering
570
+ // eslint-disable-next-line @typescript-eslint/member-ordering, jsdoc/require-jsdoc
489
571
  EntityUtilities.build = _a.new;
490
572
 
491
573
  /**
@@ -526,7 +608,7 @@ class EntityService {
526
608
  return e;
527
609
  }
528
610
  /**
529
- * Gets all existing entities and pushes them to the entites array.
611
+ * Gets all existing entities and pushes them to the entities array.
530
612
  *
531
613
  * @returns A Promise of all received Entities.
532
614
  */
@@ -561,6 +643,52 @@ class EntityService {
561
643
  }
562
644
  }
563
645
 
646
+ /**
647
+ * The abstract BaseBuilder class.
648
+ */
649
+ class BaseBuilder {
650
+ constructor(data) {
651
+ this.validateInput(data);
652
+ this.inputData = data;
653
+ this.data = this.generateBaseData(data);
654
+ return this;
655
+ }
656
+ /**
657
+ * Used to validate the user input in the constructor.
658
+ *
659
+ * @param data - The user input.
660
+ */
661
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
662
+ validateInput(data) {
663
+ // By default, no validation is done
664
+ }
665
+ ;
666
+ /**
667
+ * Sets the value for the given key if no user value was provided.
668
+ *
669
+ * @param key - The key to set the default value for.
670
+ * @param value - The value to set when nothing was provided.
671
+ * @returns The Builder.
672
+ */
673
+ withDefault(key, value) {
674
+ if (!this.inputData || !this.inputData[key]) {
675
+ this.data[key] = value;
676
+ }
677
+ return this;
678
+ }
679
+ /**
680
+ * Method used to get the final build value after applying all chaining.
681
+ *
682
+ * @returns The build value.
683
+ */
684
+ getResult() {
685
+ return this.data;
686
+ }
687
+ }
688
+
689
+ /**
690
+ * The internal ConfirmDialogData. Requires all default values the user can leave out.
691
+ */
564
692
  class ConfirmDialogDataInternal {
565
693
  constructor(text, type, confirmButtonLabel, cancelButtonLabel, title, requireConfirmation, confirmationText) {
566
694
  this.text = text;
@@ -572,13 +700,18 @@ class ConfirmDialogDataInternal {
572
700
  this.confirmationText = confirmationText;
573
701
  }
574
702
  }
575
- class ConfirmDialogDataBuilder {
703
+ /**
704
+ * The Builder for the ConfirmDialogData. Sets default values.
705
+ */
706
+ class ConfirmDialogDataBuilder extends BaseBuilder {
576
707
  constructor(data) {
577
- this.validateInput(data);
578
- this.dataInput = data;
579
- this.confirmDialogData = new ConfirmDialogDataInternal(data?.text ? data.text : ['Do you really want to do this?'], data?.type ? data.type : 'default', data?.confirmButtonLabel ? data.confirmButtonLabel : 'Confirm', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.title ? data.title : 'Confirmation', data?.requireConfirmation ? data.requireConfirmation : false, data?.confirmationText);
580
- return this;
708
+ super(data);
709
+ }
710
+ // eslint-disable-next-line jsdoc/require-jsdoc
711
+ generateBaseData(data) {
712
+ return new ConfirmDialogDataInternal(data?.text ? data.text : ['Do you really want to do this?'], data?.type ? data.type : 'default', data?.confirmButtonLabel ? data.confirmButtonLabel : 'Confirm', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.title ? data.title : 'Confirmation', data?.requireConfirmation ? data.requireConfirmation : false, data?.confirmationText);
581
713
  }
714
+ // eslint-disable-next-line jsdoc/require-jsdoc
582
715
  validateInput(data) {
583
716
  if (!data) {
584
717
  return;
@@ -594,50 +727,13 @@ class ConfirmDialogDataBuilder {
594
727
  throw new Error('The "cancelButtonLabel" will never be shown because "type" is set to "info-only"');
595
728
  }
596
729
  }
597
- withDefaultText(text) {
598
- if (!this.dataInput?.text) {
599
- this.confirmDialogData.text = text;
600
- }
601
- return this;
602
- }
603
- withDefaultType(type) {
604
- if (!this.dataInput?.type) {
605
- this.confirmDialogData.type = type;
606
- }
607
- return this;
608
- }
609
- withDefaultConfirmButtonLabel(label) {
610
- if (!this.dataInput?.confirmButtonLabel) {
611
- this.confirmDialogData.confirmButtonLabel = label;
612
- }
613
- return this;
614
- }
615
- withDefaultCancelButtonLabel(label) {
616
- if (!this.dataInput?.cancelButtonLabel) {
617
- this.confirmDialogData.cancelButtonLabel = label;
618
- }
619
- return this;
620
- }
621
- withDefaultTitle(title) {
622
- if (!this.dataInput?.title) {
623
- this.confirmDialogData.title = title;
624
- }
625
- return this;
626
- }
627
- withDefaultRequireConfirmation(requireConfirmation) {
628
- if (this.dataInput?.requireConfirmation === undefined) {
629
- this.confirmDialogData.requireConfirmation = requireConfirmation;
630
- }
631
- return this;
632
- }
633
- withDefaultConfirmationText(confirmationText) {
634
- if (!this.dataInput?.confirmationText) {
635
- this.confirmDialogData.confirmationText = confirmationText;
636
- }
637
- return this;
638
- }
639
730
  }
640
731
 
732
+ /**
733
+ * The Dialog used whenever confirmation by the user is required (e.g. When the user tries to delete an entity).
734
+ *
735
+ * Can be customized with the MAT_DIALOG_DATA "inputData". Customization options are defined in "ConfirmDialogData".
736
+ */
641
737
  class NgxMatEntityConfirmDialogComponent {
642
738
  constructor(dialogRef, inputData) {
643
739
  this.dialogRef = dialogRef;
@@ -645,18 +741,24 @@ class NgxMatEntityConfirmDialogComponent {
645
741
  this.confirm = false;
646
742
  }
647
743
  ngOnInit() {
648
- this.data = new ConfirmDialogDataBuilder(this.inputData).confirmDialogData;
744
+ this.data = new ConfirmDialogDataBuilder(this.inputData).getResult();
649
745
  this.dialogRef.disableClose = true;
650
746
  }
747
+ /**
748
+ * Closes the dialog with value 1 to signal that the action should be run.
749
+ */
651
750
  confirmAction() {
652
751
  this.dialogRef.close(1);
653
752
  }
753
+ /**
754
+ * Closes the dialog.
755
+ */
654
756
  cancel() {
655
757
  this.dialogRef.close();
656
758
  }
657
759
  }
658
760
  NgxMatEntityConfirmDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
659
- NgxMatEntityConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityConfirmDialogComponent, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n {{data.confirmationText}}\n </mat-checkbox>\n </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
761
+ NgxMatEntityConfirmDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityConfirmDialogComponent, selector: "ngx-mat-entity-confirm-dialog", ngImport: i0, template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n {{data.confirmationText}}\n </mat-checkbox>\n </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
660
762
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityConfirmDialogComponent, decorators: [{
661
763
  type: Component,
662
764
  args: [{ selector: 'ngx-mat-entity-confirm-dialog', template: "<h2 mat-dialog-title *ngIf=\"data.title\">{{data.title}}</h2>\n\n<mat-dialog-content>\n <p *ngFor=\"let paragraph of data.text\">{{paragraph}}</p>\n <div *ngIf=\"data.requireConfirmation\" class=\"checkbox-wrapper\">\n <mat-checkbox [(ngModel)]=\"confirm\" name=\"confirm\">\n {{data.confirmationText}}\n </mat-checkbox>\n </div>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button *ngIf=\"data.type === 'delete'\" mat-raised-button color=\"warn\" (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button *ngIf=\"data.type !== 'delete'\" mat-raised-button (click)=\"confirmAction()\" [disabled]=\"data.requireConfirmation && !confirm\" class=\"confirm-button\">\n {{data.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: [".checkbox-wrapper{min-height:50px;display:flex}.checkbox-wrapper>mat-checkbox{align-self:center}mat-dialog-actions{display:flex;justify-content:space-between}\n"] }]
@@ -707,11 +809,18 @@ function getValidationErrorMessage(model) {
707
809
  else if (model.hasError('required')) {
708
810
  return 'required';
709
811
  }
812
+ // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
813
+ else if (model.hasError('pattern') && model.getError('pattern').requiredPattern === '^true$') {
814
+ return 'needs to be selected';
815
+ }
710
816
  else {
711
817
  return 'invalid input';
712
818
  }
713
819
  }
714
820
 
821
+ /**
822
+ * The internal CreateDialogData. Requires all default values the user can leave out.
823
+ */
715
824
  class CreateDialogDataInternal {
716
825
  constructor(title, createButtonLabel, cancelButtonLabel, createRequiresConfirmDialog, confirmCreateDialogData) {
717
826
  this.title = title;
@@ -721,50 +830,27 @@ class CreateDialogDataInternal {
721
830
  this.confirmCreateDialogData = confirmCreateDialogData;
722
831
  }
723
832
  }
724
- class CreateDialogDataBuilder {
833
+ /**
834
+ * The Builder for the CreateDialogData. Sets default values.
835
+ */
836
+ class CreateDialogDataBuilder extends BaseBuilder {
725
837
  constructor(data) {
726
- // this.validateInput(data);
727
- this.dataInput = data;
728
- const confirmCreateDialogData = new ConfirmDialogDataBuilder(data?.confirmCreateDialogData)
729
- .withDefaultConfirmButtonLabel('Create')
730
- .withDefaultText(['Do you really want to create this entity?'])
731
- .withDefaultTitle('Create')
732
- .confirmDialogData;
733
- this.createDialogData = new CreateDialogDataInternal(data?.title ? data.title : 'Create', data?.createButtonLabel ? data.createButtonLabel : 'Create', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.createRequiresConfirmDialog ? data.createRequiresConfirmDialog : false, confirmCreateDialogData);
734
- return this;
735
- }
736
- withDefaultTitle(title) {
737
- if (!this.dataInput?.title) {
738
- this.createDialogData.title = title;
739
- }
740
- return this;
741
- }
742
- withDefaultCreateButtonLabel(label) {
743
- if (!this.dataInput?.createButtonLabel) {
744
- this.createDialogData.createButtonLabel = label;
745
- }
746
- return this;
747
- }
748
- withDefaultCancelButtonLabel(label) {
749
- if (!this.dataInput?.cancelButtonLabel) {
750
- this.createDialogData.cancelButtonLabel = label;
751
- }
752
- return this;
753
- }
754
- withDefaultCreateRequiresConfirmDialog(createRequiresConfirmDialog) {
755
- if (this.dataInput?.createRequiresConfirmDialog === undefined) {
756
- this.createDialogData.createRequiresConfirmDialog = createRequiresConfirmDialog;
757
- }
758
- return this;
838
+ super(data);
759
839
  }
760
- withDefaultConfirmCreateDialogData(confirmCreateDialogData) {
761
- if (this.dataInput?.confirmCreateDialogData === undefined) {
762
- this.createDialogData.confirmCreateDialogData = confirmCreateDialogData;
763
- }
764
- return this;
840
+ // eslint-disable-next-line jsdoc/require-jsdoc
841
+ generateBaseData(data) {
842
+ const confirmCreateDialogData = new ConfirmDialogDataBuilder(data?.confirmCreateDialogData)
843
+ .withDefault('confirmButtonLabel', 'create')
844
+ .withDefault('text', ['Do you really want to create this entity?'])
845
+ .withDefault('title', 'Create')
846
+ .getResult();
847
+ return new CreateDialogDataInternal(data?.title ? data.title : 'Create', data?.createButtonLabel ? data.createButtonLabel : 'Create', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.createRequiresConfirmDialog ? data.createRequiresConfirmDialog : false, confirmCreateDialogData);
765
848
  }
766
849
  }
767
850
 
851
+ /**
852
+ * The internal AddArrayItemDialogData. Requires all default values the user can leave out.
853
+ */
768
854
  class AddArrayItemDialogDataInternal {
769
855
  constructor(entity, createDialogData, getValidationErrorMessage) {
770
856
  this.entity = entity;
@@ -772,35 +858,46 @@ class AddArrayItemDialogDataInternal {
772
858
  this.getValidationErrorMessage = getValidationErrorMessage;
773
859
  }
774
860
  }
775
- class AddArrayItemDialogDataBuilder {
861
+ /**
862
+ * The Builder for the AddArrayItemDialogData. Sets default values.
863
+ */
864
+ class AddArrayItemDialogDataBuilder extends BaseBuilder {
776
865
  constructor(data) {
777
- this.dataInput = data;
778
- const createDialogData = new CreateDialogDataBuilder(data.createDialogData)
779
- .withDefaultCreateButtonLabel('Add')
780
- .withDefaultTitle('Add to array')
781
- .createDialogData;
782
- this.addArrayItemDialogData = new AddArrayItemDialogDataInternal(data.entity, createDialogData, data.getValidationErrorMessage ? data.getValidationErrorMessage : getValidationErrorMessage);
783
- return this;
784
- }
785
- withDefaultCreateDialogData(createDialogData) {
786
- if (!this.dataInput.createDialogData) {
787
- this.addArrayItemDialogData.createDialogData = createDialogData;
788
- }
789
- return this;
866
+ super(data);
790
867
  }
791
- withDefaultGetValidationErrorMessage(getValidationErrorMessage) {
792
- if (!this.dataInput.getValidationErrorMessage) {
793
- this.addArrayItemDialogData.getValidationErrorMessage = getValidationErrorMessage;
794
- }
795
- return this;
868
+ // eslint-disable-next-line jsdoc/require-jsdoc
869
+ generateBaseData(data) {
870
+ const createDialogData = new CreateDialogDataBuilder(data.createDialogData)
871
+ .withDefault('createButtonLabel', 'Add')
872
+ .withDefault('title', 'Add to array')
873
+ .getResult();
874
+ return new AddArrayItemDialogDataInternal(data.entity, createDialogData, data.getValidationErrorMessage ? data.getValidationErrorMessage : getValidationErrorMessage);
796
875
  }
797
876
  }
798
877
 
799
- class NgxMatEntityInternalInputComponent {
800
- constructor() {
878
+ /**
879
+ * The default input component. It gets the metadata of the property from the given @Input "entity" and @Input "propertyKey"
880
+ * and displays the input field accordingly.
881
+ *
882
+ * You can also define a method that generates error-messages and if the input should be hidden when its metadata says
883
+ * that it should be omitted for creating or updating.
884
+ * The last part being mostly relevant if you want to use this component inside an ngFor.
885
+ */
886
+ class NgxMatEntityInputComponent {
887
+ constructor(dialog) {
888
+ this.dialog = dialog;
889
+ this.chipsInput = '';
890
+ this.selection = new SelectionModel(true, []);
801
891
  this.DecoratorTypes = DecoratorTypes;
892
+ this.EntityUtilities = EntityUtilities;
802
893
  this.getWidth = EntityUtilities.getWidth;
803
894
  }
895
+ /**
896
+ * This is needed for the inputs to work inside an ngFor.
897
+ *
898
+ * @param index - The index of the element in the ngFor.
899
+ * @returns The index.
900
+ */
804
901
  trackByFn(index) {
805
902
  return index;
806
903
  }
@@ -816,283 +913,143 @@ class NgxMatEntityInternalInputComponent {
816
913
  this.metadataDefaultString = this.metadata;
817
914
  this.metadataTextboxString = this.metadata;
818
915
  this.metadataAutocompleteString = this.metadata;
916
+ this.autocompleteStrings = this.metadataAutocompleteString.autocompleteValues;
917
+ this.filteredAutocompleteStrings = cloneDeep(this.autocompleteStrings);
819
918
  this.metadataDropdownString = this.metadata;
820
919
  this.metadataDropdownBoolean = this.metadata;
920
+ if ((this.type === DecoratorTypes.BOOLEAN_CHECKBOX || this.type === DecoratorTypes.BOOLEAN_TOGGLE)
921
+ && this.entity[this.propertyKey] === undefined) {
922
+ this.entity[this.propertyKey] = false;
923
+ }
821
924
  this.metadataDefaultNumber = this.metadata;
822
925
  this.metadataDropdownNumber = this.metadata;
823
926
  this.metadataDefaultObject = this.metadata;
824
927
  this.objectProperty = this.entity[this.propertyKey];
825
- }
826
- getObjectProperties() {
827
- const res = [];
828
- for (const property in this.objectProperty) {
829
- const metadata = EntityUtilities.getPropertyMetadata(this.objectProperty, property, EntityUtilities.getPropertyType(this.objectProperty, property));
830
- if (!(this.hideOmitForCreate && metadata.omitForCreate)
831
- && !(this.hideOmitForEdit && metadata.omitForUpdate)) {
832
- res.push(property);
928
+ if (this.type === DecoratorTypes.OBJECT) {
929
+ this.objectPropertyRows = EntityUtilities.getEntityRows(this.objectProperty, this.hideOmitForCreate, this.hideOmitForEdit);
930
+ }
931
+ this.metadataEntityArray = this.metadata;
932
+ if (this.type === DecoratorTypes.ARRAY) {
933
+ if (!this.entity[this.propertyKey]) {
934
+ this.entity[this.propertyKey] = [];
935
+ }
936
+ this.entityArrayValues = this.entity[this.propertyKey];
937
+ if (this.metadataEntityArray.createInline === undefined) {
938
+ this.metadataEntityArray.createInline = true;
939
+ }
940
+ if (!this.metadataEntityArray.createInline && !this.metadataEntityArray.createDialogData) {
941
+ this.metadataEntityArray.createDialogData = {
942
+ title: 'Add'
943
+ };
833
944
  }
945
+ // TODO
946
+ const givenDisplayColumns = this.metadataEntityArray.displayColumns.map((v) => v.displayName);
947
+ if (givenDisplayColumns.find((s) => s === 'select')) {
948
+ throw new Error(`The name "select" for a display column is reserved.
949
+ Please choose a different name.`);
950
+ }
951
+ this.displayedColumns = ['select'].concat(givenDisplayColumns);
952
+ this.dataSource = new MatTableDataSource();
953
+ this.dataSource.data = this.entityArrayValues;
954
+ this.arrayItem = new this.metadataEntityArray.EntityClass();
955
+ this.arrayItemInlineRows = EntityUtilities.getEntityRows(this.arrayItem, this.hideOmitForCreate === false ? false : true, this.hideOmitForEdit ? true : false);
956
+ this.arrayItemPriorChanges = cloneDeep(this.arrayItem);
957
+ this.dialogInputData = {
958
+ entity: this.arrayItem,
959
+ createDialogData: this.metadataEntityArray.createDialogData,
960
+ getValidationErrorMessage: this.getValidationErrorMessage
961
+ };
962
+ this.dialogData = new AddArrayItemDialogDataBuilder(this.dialogInputData).getResult();
963
+ this.arrayItemDialogRows = EntityUtilities.getEntityRows(this.dialogData.entity, true);
964
+ }
965
+ this.metadataStringChipsArray = this.metadata;
966
+ if ((this.type === DecoratorTypes.ARRAY_STRING_CHIPS || this.type === DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS)
967
+ && this.entity[this.propertyKey]?.length) {
968
+ this.stringChipsArrayValues = this.entity[this.propertyKey];
969
+ }
970
+ this.metadataAutocompleteStringChipsArray = this.metadata;
971
+ if (!this.getValidationErrorMessage) {
972
+ this.getValidationErrorMessage = getValidationErrorMessage;
834
973
  }
835
- return res.sort((a, b) => EntityUtilities.compareOrder(a, b, this.objectProperty));
836
974
  }
837
- }
838
- NgxMatEntityInternalInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInternalInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
839
- NgxMatEntityInternalInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityInternalInputComponent, selector: "ngx-mat-entity-internal-input", inputs: { entity: "entity", propertyKey: "propertyKey", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit", getValidationErrorMessage: "getValidationErrorMessage" }, ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <textarea\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"10\"\n [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n >\n </textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [matAutocomplete]=\"auto\"\n [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let value of metadataAutocompleteString.autocompleteValues\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n <mat-form-field>\n <mat-checkbox [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n {{metadata.displayName}}\n </mat-checkbox>\n <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n <mat-form-field>\n <mat-slide-toggle [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n {{metadata.displayName}}\n </mat-slide-toggle>\n <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n <mat-option [value]=\"undefined\">-</mat-option>\n <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n type=\"number\"\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n <div class=\"row\">\n <!--\n displays another ngx-material-entity with the:\n object as the entity,\n the current key in the loop received by the keyvalue direction as the propertyKey\n and the getValidationErrorMessage of the current component\n -->\n <ngx-mat-entity-internal-input\n *ngFor=\"let key of getObjectProperties(); let i = index; trackBy: trackByFn\"\n [entity]=\"objectProperty\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n class=\"col-lg-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{getWidth(objectProperty, key, 'sm')}}\"\n >\n </ngx-mat-entity-internal-input>\n </div>\n </div>\n\n <div *ngSwitchDefault>ERROR: The type {{type}}is not known.</div>\n</div>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: NgxMatEntityInternalInputComponent, selector: "ngx-mat-entity-internal-input", inputs: ["entity", "propertyKey", "hideOmitForCreate", "hideOmitForEdit", "getValidationErrorMessage"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.MatLabel, selector: "mat-label" }, { type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i12.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i12.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i10.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i12.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i12.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i12.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
840
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInternalInputComponent, decorators: [{
841
- type: Component,
842
- args: [{ selector: 'ngx-mat-entity-internal-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <textarea\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"10\"\n [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n >\n </textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [matAutocomplete]=\"auto\"\n [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let value of metadataAutocompleteString.autocompleteValues\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n <mat-form-field>\n <mat-checkbox [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n {{metadata.displayName}}\n </mat-checkbox>\n <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n <mat-form-field>\n <mat-slide-toggle [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n {{metadata.displayName}}\n </mat-slide-toggle>\n <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n <mat-option [value]=\"undefined\">-</mat-option>\n <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n type=\"number\"\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\">\n <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n <div class=\"row\">\n <!--\n displays another ngx-material-entity with the:\n object as the entity,\n the current key in the loop received by the keyvalue direction as the propertyKey\n and the getValidationErrorMessage of the current component\n -->\n <ngx-mat-entity-internal-input\n *ngFor=\"let key of getObjectProperties(); let i = index; trackBy: trackByFn\"\n [entity]=\"objectProperty\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n class=\"col-lg-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{getWidth(objectProperty, key, 'sm')}}\"\n >\n </ngx-mat-entity-internal-input>\n </div>\n </div>\n\n <div *ngSwitchDefault>ERROR: The type {{type}}is not known.</div>\n</div>", styles: ["mat-form-field{width:100%}\n"] }]
843
- }], propDecorators: { entity: [{
844
- type: Input
845
- }], propertyKey: [{
846
- type: Input
847
- }], hideOmitForCreate: [{
848
- type: Input
849
- }], hideOmitForEdit: [{
850
- type: Input
851
- }], getValidationErrorMessage: [{
852
- type: Input
853
- }] } });
854
-
855
- class NgxMatEntityAddArrayItemDialogComponent {
856
- constructor(inputData, dialogRef) {
857
- this.inputData = inputData;
858
- this.dialogRef = dialogRef;
859
- this.EntityUtilities = EntityUtilities;
860
- this.getWidth = EntityUtilities.getWidth;
975
+ /**
976
+ * Tries to add an item to the array.
977
+ * Does this either inline if the "createInline"-metadata is set to true
978
+ * or in a separate dialog if it is set to false.
979
+ */
980
+ add() {
981
+ if (this.metadataEntityArray.createInline) {
982
+ this.entityArrayValues.push(cloneDeep(this.arrayItem));
983
+ this.dataSource.data = this.entityArrayValues;
984
+ EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
985
+ }
986
+ else {
987
+ this.addArrayItemDialogRef = this.dialog.open(this.addArrayItemDialog, {
988
+ data: this.dialogData,
989
+ autoFocus: false,
990
+ restoreFocus: false
991
+ });
992
+ }
861
993
  }
862
- ngOnInit() {
863
- this.data = new AddArrayItemDialogDataBuilder(this.inputData).addArrayItemDialogData;
864
- this.dialogRef.disableClose = true;
865
- this.setEntityKeys();
994
+ /**
995
+ * Adds the array item defined in the dialog.
996
+ */
997
+ addArrayItem() {
998
+ this.addArrayItemDialogRef.close();
999
+ this.entityArrayValues.push(cloneDeep(this.arrayItem));
1000
+ this.dataSource.data = this.entityArrayValues;
1001
+ EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
866
1002
  }
867
- setEntityKeys() {
868
- this.entityKeys = Reflect.ownKeys(this.data.entity);
869
- const omitCreateKeys = EntityUtilities.getOmitForCreate(this.data.entity);
870
- this.entityKeys = this.entityKeys.filter((k) => !omitCreateKeys.includes(k))
871
- .sort((a, b) => EntityUtilities.compareOrder(a, b, this.data.entity));
1003
+ /**
1004
+ * Cancels adding the array item defined in the dialog.
1005
+ */
1006
+ cancelAddArrayItem() {
1007
+ this.addArrayItemDialogRef.close();
1008
+ EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
872
1009
  }
873
- create() {
874
- this.dialogRef.close(1);
1010
+ /**
1011
+ * Removes all selected entries from the array.
1012
+ */
1013
+ remove() {
1014
+ this.selection.selected.forEach(s => {
1015
+ this.entityArrayValues.splice(this.entityArrayValues.indexOf(s), 1);
1016
+ });
1017
+ this.dataSource.data = this.entityArrayValues;
1018
+ this.selection.clear();
875
1019
  }
876
- cancel() {
877
- this.dialogRef.close();
878
- }
879
- }
880
- NgxMatEntityAddArrayItemDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityAddArrayItemDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }], target: i0.ɵɵFactoryTarget.Component });
881
- NgxMatEntityAddArrayItemDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityAddArrayItemDialogComponent, selector: "ngx-mat-entity-add-array-item-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <ngx-mat-entity-internal-input\n *ngFor=\"let key of entityKeys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"data.getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-internal-input>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"create()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'create')\">\n {{data.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.createDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: NgxMatEntityInternalInputComponent, selector: "ngx-mat-entity-internal-input", inputs: ["entity", "propertyKey", "hideOmitForCreate", "hideOmitForEdit", "getValidationErrorMessage"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i12.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i12.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i12.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
882
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityAddArrayItemDialogComponent, decorators: [{
883
- type: Component,
884
- args: [{ selector: 'ngx-mat-entity-add-array-item-dialog', template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <ngx-mat-entity-internal-input\n *ngFor=\"let key of entityKeys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"data.getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-internal-input>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"create()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'create')\">\n {{data.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.createDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"] }]
885
- }], ctorParameters: function () { return [{ type: undefined, decorators: [{
886
- type: Inject,
887
- args: [MAT_DIALOG_DATA]
888
- }] }, { type: i1.MatDialogRef }]; } });
889
-
890
- class EntityArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
891
- constructor(data) {
892
- super(data);
893
- this.createDialogData = data.createDialogData;
894
- this.displayStyle = data.displayStyle;
895
- this.itemType = data.itemType;
896
- this.EntityClass = data.EntityClass;
897
- this.displayColumns = data.displayColumns;
898
- this.createInline = data.createInline != undefined ? data.createInline : true;
899
- this.missingErrorMessage = data.missingErrorMessage ? data.missingErrorMessage : 'Needs to contain at least one value';
900
- this.defaultWidths = data.defaultWidths ? data.defaultWidths : [12, 12, 12];
901
- }
902
- }
903
- class StringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
904
- constructor(data) {
905
- super(data);
906
- this.deleteHtml = data.deleteHtml;
907
- this.displayStyle = data.displayStyle;
908
- this.itemType = data.itemType;
909
- this.maxLength = data.maxLength;
910
- this.minLength = data.minLength;
911
- this.regex = data.regex;
912
- this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 12, 12];
913
- }
914
- }
915
- class AutocompleteStringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
916
- constructor(data) {
917
- super(data);
918
- this.autocompleteValues = data.autocompleteValues;
919
- this.deleteHtml = data.deleteHtml;
920
- this.displayStyle = data.displayStyle;
921
- this.itemType = data.itemType;
922
- this.maxLength = data.maxLength;
923
- this.minLength = data.minLength;
924
- this.regex = data.regex;
925
- this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 12, 12];
926
- }
927
- }
928
-
929
- class NgxMatEntityArrayTableComponent {
930
- constructor(dialog) {
931
- this.dialog = dialog;
932
- this.selection = new SelectionModel(true, []);
933
- this.getWidth = EntityUtilities.getWidth;
934
- this.EntityUtilities = EntityUtilities;
935
- }
936
- trackByFn(index) {
937
- return index;
938
- }
939
- ngOnInit() {
940
- const givenDisplayColumns = this.metadata.displayColumns.map((v) => v.displayName);
941
- this.validateInput(givenDisplayColumns);
942
- this.displayedColumns = ['select'].concat(givenDisplayColumns);
943
- this.dataSource = new MatTableDataSource();
944
- this.dataSource.data = this.arrayItems;
945
- this.arrayItem = new this.metadata.EntityClass();
946
- this.arrayItemPriorChanges = cloneDeep(this.arrayItem);
947
- }
948
- validateInput(givenDisplayColumns) {
949
- if (givenDisplayColumns.find((s) => s === 'select')) {
950
- throw new Error(`The name "select" for a display column is reserved.
951
- Please choose a different name.`);
952
- }
953
- if (!this.metadata.createInline && !this.metadata.createDialogData) {
954
- throw new Error(`Missing required Input data "createDialogData".
955
- You can only omit this value when the creation is inline.`);
956
- }
957
- }
958
- add() {
959
- if (this.metadata.createInline) {
960
- this.arrayItems.push(cloneDeep(this.arrayItem));
961
- this.dataSource.data = this.arrayItems;
962
- EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
963
- }
964
- else {
965
- const dialogInputData = {
966
- entity: this.arrayItem,
967
- createDialogData: this.metadata.createDialogData,
968
- getValidationErrorMessage: this.getValidationErrorMessage
969
- };
970
- const dialogData = new AddArrayItemDialogDataBuilder(dialogInputData)
971
- .addArrayItemDialogData;
972
- firstValueFrom(this.dialog.open(NgxMatEntityAddArrayItemDialogComponent, {
973
- data: dialogData,
974
- autoFocus: false,
975
- restoreFocus: false
976
- }).afterClosed()).then((res) => {
977
- if (res === 1) {
978
- this.arrayItems.push(cloneDeep(this.arrayItem));
979
- this.dataSource.data = this.arrayItems;
980
- }
981
- EntityUtilities.resetChangesOnEntity(this.arrayItem, this.arrayItemPriorChanges);
982
- });
983
- }
984
- }
985
- remove() {
986
- this.selection.selected.forEach(s => {
987
- this.arrayItems.splice(this.arrayItems.indexOf(s), 1);
988
- });
989
- this.dataSource.data = this.arrayItems;
990
- this.selection.clear();
991
- }
992
- getObjectProperties() {
993
- const res = [];
994
- for (const property in this.arrayItem) {
995
- const metadata = EntityUtilities.getPropertyMetadata(this.arrayItem, property, EntityUtilities.getPropertyType(this.arrayItem, property));
996
- if (!(metadata.omitForCreate)) {
997
- res.push(property);
998
- }
999
- }
1000
- return res.sort((a, b) => EntityUtilities.compareOrder(a, b, this.arrayItem));
1001
- }
1002
- masterToggle() {
1003
- if (this.isAllSelected()) {
1004
- this.selection.clear();
1005
- }
1006
- else {
1007
- this.dataSource.data.forEach((row) => this.selection.select(row));
1008
- }
1020
+ /**
1021
+ * Toggles all array-items in the table.
1022
+ */
1023
+ masterToggle() {
1024
+ if (this.isAllSelected()) {
1025
+ this.selection.clear();
1026
+ }
1027
+ else {
1028
+ this.dataSource.data.forEach((row) => this.selection.select(row));
1029
+ }
1009
1030
  }
1031
+ /**
1032
+ * Checks if all array-items in the table have been selected.
1033
+ * This is needed to display the "masterToggle"-checkbox correctly.
1034
+ *
1035
+ * @returns Whether or not all array-items in the table have been selected.
1036
+ */
1010
1037
  isAllSelected() {
1011
1038
  const numSelected = this.selection.selected.length;
1012
1039
  const numRows = this.dataSource.data.length;
1013
1040
  return numSelected === numRows;
1014
1041
  }
1015
- }
1016
- NgxMatEntityArrayTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityArrayTableComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
1017
- NgxMatEntityArrayTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityArrayTableComponent, selector: "ngx-mat-entity-array-table", inputs: { arrayItems: "arrayItems", metadata: "metadata", getValidationErrorMessage: "getValidationErrorMessage", omit: "omit" }, ngImport: i0, template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n\n <div style=\"padding-bottom: 10px\">\n <b>{{metadata.displayName}}</b>\n </div>\n <div class=\"row\" *ngIf=\"metadata.createInline\">\n <ngx-mat-entity-internal-input\n *ngFor=\"let key of getObjectProperties(); let i = index; trackBy: trackByFn\"\n [entity]=\"arrayItem\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(arrayItem, key, 'lg')}} col-md-{{getWidth(arrayItem, key, 'md')}} col-sm-{{getWidth(arrayItem, key, 'sm')}}\"\n >\n </ngx-mat-entity-internal-input>\n </div>\n <div class=\"buttons\">\n <button mat-raised-button\n [disabled]=\"metadata.createInline && !EntityUtilities.isEntityValid(arrayItem, 'create')\"\n (click)=\"add()\">\n Add\n </button>\n <button mat-raised-button\n [disabled]=\"!selection.selected.length\"\n (click)=\"remove()\">\n Remove\n </button>\n </div>\n\n <mat-table [dataSource]=\"dataSource\">\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n </mat-cell>\n </ng-container>\n \n <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n \n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n\n <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n {{metadata.missingErrorMessage}}\n </div>\n</div>", styles: [".buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], components: [{ type: NgxMatEntityInternalInputComponent, selector: "ngx-mat-entity-internal-input", inputs: ["entity", "propertyKey", "hideOmitForCreate", "hideOmitForEdit", "getValidationErrorMessage"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$1.MatCellDef, selector: "[matCellDef]" }, { type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
1018
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityArrayTableComponent, decorators: [{
1019
- type: Component,
1020
- args: [{ selector: 'ngx-mat-entity-array-table', template: "<div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n\n <div style=\"padding-bottom: 10px\">\n <b>{{metadata.displayName}}</b>\n </div>\n <div class=\"row\" *ngIf=\"metadata.createInline\">\n <ngx-mat-entity-internal-input\n *ngFor=\"let key of getObjectProperties(); let i = index; trackBy: trackByFn\"\n [entity]=\"arrayItem\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(arrayItem, key, 'lg')}} col-md-{{getWidth(arrayItem, key, 'md')}} col-sm-{{getWidth(arrayItem, key, 'sm')}}\"\n >\n </ngx-mat-entity-internal-input>\n </div>\n <div class=\"buttons\">\n <button mat-raised-button\n [disabled]=\"metadata.createInline && !EntityUtilities.isEntityValid(arrayItem, 'create')\"\n (click)=\"add()\">\n Add\n </button>\n <button mat-raised-button\n [disabled]=\"!selection.selected.length\"\n (click)=\"remove()\">\n Remove\n </button>\n </div>\n\n <mat-table [dataSource]=\"dataSource\">\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n </mat-cell>\n </ng-container>\n \n <ng-container *ngFor=\"let dCol of metadata.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n \n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n\n <div class=\"array-error\" *ngIf=\"metadata.required && !dataSource.data.length\">\n {{metadata.missingErrorMessage}}\n </div>\n</div>", styles: [".buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.mat-column-select{flex:0 0 75px}.array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
1021
- }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { arrayItems: [{
1022
- type: Input
1023
- }], metadata: [{
1024
- type: Input
1025
- }], getValidationErrorMessage: [{
1026
- type: Input
1027
- }], omit: [{
1028
- type: Input
1029
- }] } });
1030
-
1031
- class NgxMatEntityInputComponent {
1032
- constructor() {
1033
- this.chipsInput = '';
1034
- this.DecoratorTypes = DecoratorTypes;
1035
- this.getWidth = EntityUtilities.getWidth;
1036
- }
1037
- trackByFn(index) {
1038
- return index;
1039
- }
1040
- ngOnInit() {
1041
- if (!this.entity) {
1042
- throw new Error('Missing required Input data "entity"');
1043
- }
1044
- if (!this.propertyKey) {
1045
- throw new Error('Missing required Input data "propertyKey"');
1046
- }
1047
- this.type = EntityUtilities.getPropertyType(this.entity, this.propertyKey);
1048
- this.metadata = EntityUtilities.getPropertyMetadata(this.entity, this.propertyKey, this.type);
1049
- this.metadataDefaultString = this.metadata;
1050
- this.metadataTextboxString = this.metadata;
1051
- this.metadataAutocompleteString = this.metadata;
1052
- this.autocompleteStrings = this.metadataAutocompleteString.autocompleteValues;
1053
- this.filteredAutocompleteStrings = cloneDeep(this.autocompleteStrings);
1054
- this.metadataDropdownString = this.metadata;
1055
- this.metadataDropdownBoolean = this.metadata;
1056
- this.metadataDefaultNumber = this.metadata;
1057
- this.metadataDropdownNumber = this.metadata;
1058
- this.metadataDefaultObject = this.metadata;
1059
- this.objectProperty = this.entity[this.propertyKey];
1060
- this.metadataEntityArray = this.metadata;
1061
- if (this.metadataEntityArray.EntityClass) {
1062
- if (!this.entity[this.propertyKey]) {
1063
- this.entity[this.propertyKey] = [];
1064
- }
1065
- this.entityArrayValues = this.entity[this.propertyKey];
1066
- if (this.metadataEntityArray.createInline === undefined) {
1067
- this.metadataEntityArray.createInline = true;
1068
- }
1069
- if (!this.metadataEntityArray.createInline && !this.metadataEntityArray.createDialogData) {
1070
- this.metadataEntityArray.createDialogData = {
1071
- title: 'Add'
1072
- };
1073
- }
1074
- }
1075
- this.metadataStringChipsArray = this.metadata;
1076
- if (this.metadataStringChipsArray.itemType
1077
- && this.entity[this.propertyKey]?.length) {
1078
- this.stringChipsArrayValues = this.entity[this.propertyKey];
1079
- }
1080
- this.metadataAutocompleteStringChipsArray = this.metadata;
1081
- if (!this.getValidationErrorMessage) {
1082
- this.getValidationErrorMessage = getValidationErrorMessage;
1083
- }
1084
- }
1085
- getObjectProperties() {
1086
- const res = [];
1087
- for (const property in this.objectProperty) {
1088
- const metadata = EntityUtilities.getPropertyMetadata(this.objectProperty, property, EntityUtilities.getPropertyType(this.objectProperty, property));
1089
- if (!(this.hideOmitForCreate && metadata.omitForCreate)
1090
- && !(this.hideOmitForEdit && metadata.omitForUpdate)) {
1091
- res.push(property);
1092
- }
1093
- }
1094
- return res.sort((a, b) => EntityUtilities.compareOrder(a, b, this.objectProperty));
1095
- }
1042
+ /**
1043
+ * Handles adding strings to the chipsArray.
1044
+ * Checks validation and also creates a new array if it is undefined.
1045
+ * This is needed because two things are validated: The array itself
1046
+ * and the contents of the array. And we need a way to display an
1047
+ * mat-error. As the only validation for the array is whether or not
1048
+ * it contains values, we can set it to undefined when the last element is removed
1049
+ * (removeStringChipArrayValue). That way we can use the "required" validator.
1050
+ *
1051
+ * @param event - The event that fires when a new chip is completed.
1052
+ */
1096
1053
  addStringChipArrayValue(event) {
1097
1054
  const value = (event.value || '').trim();
1098
1055
  if (value) {
@@ -1115,6 +1072,16 @@ class NgxMatEntityInputComponent {
1115
1072
  }
1116
1073
  event.chipInput.clear();
1117
1074
  }
1075
+ /**
1076
+ * Removes the given value from the array.
1077
+ * Sets the array to undefined if it is now empty.
1078
+ * This is needed because two things are validated: The array itself
1079
+ * and the contents of the array. And we need a way to display an
1080
+ * mat-error. As the only validation for the array is whether or not
1081
+ * it is empty, setting it to undefined here enables us to use the "required" validator.
1082
+ *
1083
+ * @param value - The string to remove from the array.
1084
+ */
1118
1085
  removeStringChipArrayValue(value) {
1119
1086
  this.stringChipsArrayValues.splice(this.stringChipsArrayValues.indexOf(value), 1);
1120
1087
  if (!this.stringChipsArrayValues.length) {
@@ -1122,6 +1089,12 @@ class NgxMatEntityInputComponent {
1122
1089
  this.stringChipsArrayValues = this.entity[this.propertyKey];
1123
1090
  }
1124
1091
  }
1092
+ /**
1093
+ * Handles adding a string to the array when an autocomplete value has been selected.
1094
+ *
1095
+ * @param event - The autocomplete selected event.
1096
+ * @param chipsInput - The element where the user typed the value.
1097
+ */
1125
1098
  selected(event, chipsInput) {
1126
1099
  const value = (event.option.viewValue || '').trim();
1127
1100
  if (this.metadataStringChipsArray.minLength && value.length < this.metadataStringChipsArray.minLength) {
@@ -1142,17 +1115,22 @@ class NgxMatEntityInputComponent {
1142
1115
  this.stringChipsArrayValues.push(value);
1143
1116
  chipsInput.value = '';
1144
1117
  }
1118
+ /**
1119
+ * Dynamically filters the Autocomplete options when the user inputs something.
1120
+ *
1121
+ * @param input - The input of the user.
1122
+ */
1145
1123
  filterAutocompleteStrings(input) {
1146
1124
  const filterValue = input.toLowerCase();
1147
1125
  this.filteredAutocompleteStrings = this.autocompleteStrings.filter(s => s.toLowerCase().includes(filterValue));
1148
1126
  }
1149
1127
  }
1150
- NgxMatEntityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
1151
- NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit" }, ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <textarea\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"10\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n >\n </textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [matAutocomplete]=\"auto\"\n (keyup)=\"filterAutocompleteStrings(entity[propertyKey])\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n <mat-form-field>\n <mat-checkbox [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n {{metadata.displayName}}\n </mat-checkbox>\n <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n <mat-form-field>\n <mat-slide-toggle [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n {{metadata.displayName}}\n </mat-slide-toggle>\n <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option [value]=\"undefined\">-</mat-option>\n <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n type=\"number\"\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n <div class=\"row\">\n <!--\n displays another ngx-material-entity with the:\n object as the entity,\n the current key in the loop received by the keyvalue direction as the propertyKey\n and the getValidationErrorMessage of the current component\n -->\n <ngx-mat-entity-input\n *ngFor=\"let key of getObjectProperties(); let i = index; trackBy: trackByFn\"\n [entity]=\"objectProperty\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n class=\"col-lg-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{getWidth(objectProperty, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n <ngx-mat-entity-array-table\n [arrayItems]=\"entityArrayValues\"\n [metadata]=\"metadataEntityArray\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [omit]=\"hideOmitForCreate ? 'create' : 'update'\"\n >\n </ngx-mat-entity-array-table>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove *ngIf=\"metadataStringChipsArray.deleteHtml\" [innerHtml]=\"metadataStringChipsArray.deleteHtml\">\n </button>\n <button matChipRemove *ngIf=\"!metadataStringChipsArray.deleteHtml\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove *ngIf=\"metadataStringChipsArray.deleteHtml\" [innerHtml]=\"metadataStringChipsArray.deleteHtml\">\n </button>\n <button matChipRemove *ngIf=\"!metadataStringChipsArray.deleteHtml\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matAutocomplete]=\"auto\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n #chipsElement\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchDefault>ERROR: The type {{type}}is not known.</div>\n</div>", styles: ["mat-form-field{width:100%}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i3$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i4.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i6.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }, { type: NgxMatEntityArrayTableComponent, selector: "ngx-mat-entity-array-table", inputs: ["arrayItems", "metadata", "getValidationErrorMessage", "omit"] }, { type: i8$1.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }, { type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }], directives: [{ type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i7.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i1$1.MatLabel, selector: "mat-label" }, { type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i12.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i12.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i12.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i12.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i12.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i12.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i12.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i1$1.MatError, selector: "mat-error", inputs: ["id"] }, { type: i10.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.MatCheckboxRequiredValidator, selector: "mat-checkbox[required][formControlName], mat-checkbox[required][formControl], mat-checkbox[required][ngModel]" }, { type: i6.MatSlideToggleRequiredValidator, selector: "mat-slide-toggle[required][formControlName], mat-slide-toggle[required][formControl], mat-slide-toggle[required][ngModel]" }, { type: i12.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i12.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i12.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i8$1.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i8$1.MatChipRemove, selector: "[matChipRemove]" }, { type: i8$1.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i7.NgSwitchDefault, selector: "[ngSwitchDefault]" }] });
1128
+ NgxMatEntityInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputComponent, deps: [{ token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
1129
+ NgxMatEntityInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: { entity: "entity", propertyKey: "propertyKey", getValidationErrorMessage: "getValidationErrorMessage", hideOmitForCreate: "hideOmitForCreate", hideOmitForEdit: "hideOmitForEdit" }, viewQueries: [{ propertyName: "addArrayItemDialog", first: true, predicate: ["addArrayItemDialog"], descendants: true }], ngImport: i0, template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <textarea\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"10\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n >\n </textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [matAutocomplete]=\"auto\"\n (keyup)=\"filterAutocompleteStrings(entity[propertyKey])\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n <mat-form-field class=\"hideUnderline\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-checkbox (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-checkbox>\n <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n <input matInput hidden\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString() + 'Helper'\"\n #model=\"ngModel\"\n [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n [required]=\"metadata.required\">\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n <mat-form-field class=\"hideUnderline\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-slide-toggle (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-slide-toggle>\n <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n <input matInput hidden\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString() + 'Helper'\"\n #model=\"ngModel\"\n [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n [required]=\"metadata.required\">\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option [value]=\"undefined\">-</mat-option>\n <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n type=\"number\"\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n\n <div class=\"row\" *ngFor=\"let row of objectPropertyRows\">\n <!--\n displays another ngx-material-entity with the:\n object as the entity,\n the current key in the loop received by the keyvalue direction as the propertyKey\n and the getValidationErrorMessage of the current component\n -->\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n [entity]=\"objectProperty\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n class=\"col-lg-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{getWidth(objectProperty, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n <div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n\n <div style=\"padding-bottom: 10px\">\n <b>{{metadataEntityArray.displayName}}</b>\n </div>\n <div *ngIf=\"metadataEntityArray.createInline\">\n <div class=\"row\" *ngFor=\"let row of arrayItemInlineRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n [entity]=\"arrayItem\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(arrayItem, key, 'lg')}} col-md-{{getWidth(arrayItem, key, 'md')}} col-sm-{{getWidth(arrayItem, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n \n <div class=\"buttons\">\n <button mat-raised-button\n [disabled]=\"metadataEntityArray.createInline && !EntityUtilities.isEntityValid(arrayItem, 'create')\"\n (click)=\"add()\">\n {{metadataEntityArray.addButtonLabel}}\n </button>\n <button mat-raised-button\n [disabled]=\"!selection.selected.length\"\n (click)=\"remove()\">\n {{metadataEntityArray.removeButtonLabel}}\n </button>\n </div>\n \n <mat-table [dataSource]=\"dataSource\">\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n </mat-cell>\n </ng-container>\n \n <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n \n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n \n <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n {{metadataEntityArray.missingErrorMessage}}\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove>\n <i class=\"{{metadataStringChipsArray.deleteIcon}}\"></i>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove>\n <i class=\"{{metadataStringChipsArray.deleteIcon}}\"></i>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matAutocomplete]=\"auto\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n #chipsElement\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n <h2 mat-dialog-title>{{dialogData.createDialogData.title}}</h2>\n\n <mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <div class=\"row\" *ngFor=\"let row of arrayItemDialogRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"dialogData.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(dialogData.entity, key, 'lg')}} col-md-{{getWidth(dialogData.entity, key, 'md')}} col-sm-{{getWidth(dialogData.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n </mat-dialog-content>\n\n <mat-dialog-actions>\n <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!EntityUtilities.isEntityValid(dialogData.entity, 'create')\">\n {{dialogData.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n {{dialogData.createDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n\n</ng-template>", styles: ["mat-form-field{width:100%}::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3$1.MatAutocomplete, selector: "mat-autocomplete", inputs: ["disableRipple"], exportAs: ["matAutocomplete"] }, { type: i4.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { type: i5.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex"], exportAs: ["matSelect"] }, { type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i7.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex", "name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "checked"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i10.MatChipList, selector: "mat-chip-list", inputs: ["errorStateMatcher", "multiple", "compareWith", "value", "required", "placeholder", "disabled", "aria-orientation", "selectable", "tabIndex"], outputs: ["change", "valueChange"], exportAs: ["matChipList"] }], directives: [{ type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i11.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i11.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i2.MatLabel, selector: "mat-label" }, { type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i13.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i13.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i13.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i13.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { type: i13.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { type: i13.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { type: i13.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { type: i2.MatError, selector: "mat-error", inputs: ["id"] }, { type: i14.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { type: i3$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", exportAs: ["matAutocompleteTrigger"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { type: i13.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { type: i13.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }, { type: i10.MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["color", "disableRipple", "tabIndex", "selected", "value", "selectable", "disabled", "removable"], outputs: ["selectionChange", "destroyed", "removed"], exportAs: ["matChip"] }, { type: i10.MatChipRemove, selector: "[matChipRemove]" }, { type: i10.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { type: i11.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i13.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i13.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i13.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
1152
1130
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputComponent, decorators: [{
1153
1131
  type: Component,
1154
- args: [{ selector: 'ngx-mat-entity-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <textarea\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"10\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n >\n </textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [matAutocomplete]=\"auto\"\n (keyup)=\"filterAutocompleteStrings(entity[propertyKey])\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n <mat-form-field>\n <mat-checkbox [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n {{metadata.displayName}}\n </mat-checkbox>\n <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n <mat-form-field>\n <mat-slide-toggle [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n {{metadata.displayName}}\n </mat-slide-toggle>\n <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n <textarea matInput hidden></textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option [value]=\"undefined\">-</mat-option>\n <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n type=\"number\"\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n <div class=\"row\">\n <!--\n displays another ngx-material-entity with the:\n object as the entity,\n the current key in the loop received by the keyvalue direction as the propertyKey\n and the getValidationErrorMessage of the current component\n -->\n <ngx-mat-entity-input\n *ngFor=\"let key of getObjectProperties(); let i = index; trackBy: trackByFn\"\n [entity]=\"objectProperty\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n class=\"col-lg-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{getWidth(objectProperty, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n <ngx-mat-entity-array-table\n [arrayItems]=\"entityArrayValues\"\n [metadata]=\"metadataEntityArray\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [omit]=\"hideOmitForCreate ? 'create' : 'update'\"\n >\n </ngx-mat-entity-array-table>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove *ngIf=\"metadataStringChipsArray.deleteHtml\" [innerHtml]=\"metadataStringChipsArray.deleteHtml\">\n </button>\n <button matChipRemove *ngIf=\"!metadataStringChipsArray.deleteHtml\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove *ngIf=\"metadataStringChipsArray.deleteHtml\" [innerHtml]=\"metadataStringChipsArray.deleteHtml\">\n </button>\n <button matChipRemove *ngIf=\"!metadataStringChipsArray.deleteHtml\">\n <mat-icon>cancel</mat-icon>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matAutocomplete]=\"auto\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n #chipsElement\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchDefault>ERROR: The type {{type}}is not known.</div>\n</div>", styles: ["mat-form-field{width:100%}\n"] }]
1155
- }], ctorParameters: function () { return []; }, propDecorators: { entity: [{
1132
+ args: [{ selector: 'ngx-mat-entity-input', template: "<div [ngSwitch]=\"type\" *ngIf=\"!(hideOmitForCreate && metadata.omitForCreate) && !(hideOmitForEdit && metadata.omitForUpdate)\">\n <!-------------------------------------------->\n <!-----------------Strings-------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.STRING\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [pattern]=\"metadataDefaultString.regex ? metadataDefaultString.regex : '[\\\\s\\\\S]*'\"\n [minlength]=\"metadataDefaultString.minLength ? metadataDefaultString.minLength : null\"\n [maxlength]=\"metadataDefaultString.maxLength ? metadataDefaultString.maxLength : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_TEXTBOX\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <textarea\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n cdkTextareaAutosize\n cdkAutosizeMinRows=\"10\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataTextboxString.minLength ? metadataTextboxString.minLength : null\"\n [maxlength]=\"metadataTextboxString.maxLength ? metadataTextboxString.maxLength : null\"\n >\n </textarea>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_AUTOCOMPLETE\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [matAutocomplete]=\"auto\"\n (keyup)=\"filterAutocompleteStrings(entity[propertyKey])\"\n [required]=\"metadata.required\"\n [minlength]=\"metadataAutocompleteString.minLength ? metadataAutocompleteString.minLength : null\"\n [maxlength]=\"metadataAutocompleteString.maxLength ? metadataAutocompleteString.maxLength : null\"\n [pattern]=\"metadataAutocompleteString.regex ? metadataAutocompleteString.regex : '[\\\\s\\\\S]*'\"\n />\n <mat-autocomplete #auto=\"matAutocomplete\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.STRING_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownString.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-----------------Booleans------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_CHECKBOX\">\n <mat-form-field class=\"hideUnderline\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-checkbox (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-checkbox>\n <!-- hidden input is needed so that the checkbox can be used inside a mat-form-field -->\n <input matInput hidden\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString() + 'Helper'\"\n #model=\"ngModel\"\n [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n [required]=\"metadata.required\">\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_TOGGLE\">\n <mat-form-field class=\"hideUnderline\">\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-slide-toggle (click)=\"model.control.markAsTouched()\" [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\"></mat-slide-toggle>\n <!-- hidden input is needed so that the toggle can be used inside a mat-form-field -->\n <input matInput hidden\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString() + 'Helper'\"\n #model=\"ngModel\"\n [pattern]=\"metadata.required ? 'true' : '[\\\\s\\\\S]*'\"\n [required]=\"metadata.required\">\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.BOOLEAN_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option [value]=\"undefined\">-</mat-option>\n <mat-option [value]=\"true\">{{metadataDropdownBoolean.dropdownTrue}}</mat-option>\n <mat-option [value]=\"false\">{{metadataDropdownBoolean.dropdownFalse}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!------------------Numbers------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <input\n matInput\n type=\"number\"\n [(ngModel)]=\"entity[propertyKey]\"\n [name]=\"propertyKey.toString()\"\n #model=\"ngModel\"\n [required]=\"metadata.required\"\n [min]=\"metadataDefaultNumber.min ? metadataDefaultNumber.min : null\"\n [max]=\"metadataDefaultNumber.max ? metadataDefaultNumber.max : null\"\n />\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.NUMBER_DROPDOWN\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-select [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\" [required]=\"metadata.required\">\n <mat-option *ngFor=\"let value of metadataDropdownNumber.dropdownValues\" [value]=\"value.value\">{{value.displayName}}</mat-option>\n </mat-select>\n <mat-error>{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Object------------------->\n <!-------------------------------------------->\n <div *ngSwitchCase=\"DecoratorTypes.OBJECT\">\n <b>{{metadataDefaultObject.displayName}}</b>\n <!-- iterates over the object properties -->\n\n <div class=\"row\" *ngFor=\"let row of objectPropertyRows\">\n <!--\n displays another ngx-material-entity with the:\n object as the entity,\n the current key in the loop received by the keyvalue direction as the propertyKey\n and the getValidationErrorMessage of the current component\n -->\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n [entity]=\"objectProperty\"\n [propertyKey]=\"key\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n [hideOmitForCreate]=\"hideOmitForCreate\"\n [hideOmitForEdit]=\"hideOmitForEdit\"\n class=\"col-lg-{{getWidth(objectProperty, key, 'lg')}} col-md-{{getWidth(objectProperty, key, 'md')}} col-sm-{{getWidth(objectProperty, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n\n <!-------------------------------------------->\n <!-------------------Array-------------------->\n <!-------------------------------------------->\n <div class=\"entityArray\" *ngSwitchCase=\"DecoratorTypes.ARRAY\">\n <div class=\"mat-elevation-z8\" style=\"border-radius: 5px;padding: 15px;margin-bottom: 15px;margin-top: 15px;\">\n\n <div style=\"padding-bottom: 10px\">\n <b>{{metadataEntityArray.displayName}}</b>\n </div>\n <div *ngIf=\"metadataEntityArray.createInline\">\n <div class=\"row\" *ngFor=\"let row of arrayItemInlineRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys; let i = index; trackBy: trackByFn\"\n [entity]=\"arrayItem\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(arrayItem, key, 'lg')}} col-md-{{getWidth(arrayItem, key, 'md')}} col-sm-{{getWidth(arrayItem, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </div>\n \n <div class=\"buttons\">\n <button mat-raised-button\n [disabled]=\"metadataEntityArray.createInline && !EntityUtilities.isEntityValid(arrayItem, 'create')\"\n (click)=\"add()\">\n {{metadataEntityArray.addButtonLabel}}\n </button>\n <button mat-raised-button\n [disabled]=\"!selection.selected.length\"\n (click)=\"remove()\">\n {{metadataEntityArray.removeButtonLabel}}\n </button>\n </div>\n \n <mat-table [dataSource]=\"dataSource\">\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox [disabled]=\"!dataSource.data.length\" (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"></mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"></mat-checkbox>\n </mat-cell>\n </ng-container>\n \n <ng-container *ngFor=\"let dCol of metadataEntityArray.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n \n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n \n <div class=\"array-error\" *ngIf=\"metadataEntityArray.required && !dataSource.data.length\">\n {{metadataEntityArray.missingErrorMessage}}\n </div>\n </div>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove>\n <i class=\"{{metadataStringChipsArray.deleteIcon}}\"></i>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchCase=\"DecoratorTypes.ARRAY_STRING_AUTOCOMPLETE_CHIPS\">\n <mat-form-field>\n <mat-label>{{metadata.displayName}}</mat-label>\n <mat-chip-list #chipList\n [(ngModel)]=\"entity[propertyKey]\" [name]=\"propertyKey.toString()\" #model=\"ngModel\"\n [required]=\"metadata.required\"\n >\n <mat-chip *ngFor=\"let value of stringChipsArrayValues\" (removed)=\"removeStringChipArrayValue(value)\">\n {{value}}\n <button matChipRemove>\n <i class=\"{{metadataStringChipsArray.deleteIcon}}\"></i>\n </button>\n </mat-chip>\n <input matInput\n [matChipInputFor]=\"chipList\"\n [matAutocomplete]=\"auto\"\n [matChipInputAddOnBlur]=\"true\"\n (matChipInputTokenEnd)=\"addStringChipArrayValue($event)\"\n (keyup)=\"filterAutocompleteStrings(chipsInput)\"\n [(ngModel)]=\"chipsInput\" [name]=\"propertyKey.toString()\" #chipsModel=\"ngModel\"\n #chipsElement\n [minlength]='metadataStringChipsArray.minLength ? metadataStringChipsArray.minLength : null'\n [maxlength]='metadataStringChipsArray.maxLength ? metadataStringChipsArray.maxLength : null'\n [pattern]=\"metadataStringChipsArray.regex ? metadataStringChipsArray.regex : '[\\\\s\\\\S]*'\"\n >\n <mat-error *ngIf=\"chipsModel.errors\">{{getValidationErrorMessage(chipsModel)}}</mat-error>\n </mat-chip-list>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selected($event, chipsElement)\">\n <mat-option *ngFor=\"let value of filteredAutocompleteStrings\" [value]=\"value\">\n {{value}}\n </mat-option>\n </mat-autocomplete>\n <mat-error *ngIf=\"!chipsModel.errors\">{{getValidationErrorMessage(model)}}</mat-error>\n </mat-form-field>\n </div>\n\n <div *ngSwitchDefault>ERROR: The type {{type}} is not known.</div>\n</div>\n\n<!--------------------------------------------------------->\n<!--------------------Add Array Item Dialog---------------->\n<!--------------------------------------------------------->\n<ng-template #addArrayItemDialog>\n <h2 mat-dialog-title>{{dialogData.createDialogData.title}}</h2>\n\n <mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <div class=\"row\" *ngFor=\"let row of arrayItemDialogRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"dialogData.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n [getValidationErrorMessage]=\"dialogData.getValidationErrorMessage\"\n class=\"col-lg-{{getWidth(dialogData.entity, key, 'lg')}} col-md-{{getWidth(dialogData.entity, key, 'md')}} col-sm-{{getWidth(dialogData.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n </mat-dialog-content>\n\n <mat-dialog-actions>\n <button mat-raised-button (click)=\"addArrayItem()\" [disabled]=\"!EntityUtilities.isEntityValid(dialogData.entity, 'create')\">\n {{dialogData.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancelAddArrayItem()\" class=\"cancel-button\">\n {{dialogData.createDialogData.cancelButtonLabel}}\n </button>\n </mat-dialog-actions>\n\n</ng-template>", styles: ["mat-form-field{width:100%}::ng-deep .hideUnderline .mat-form-field-underline{opacity:0%}.entityArray .buttons{display:flex;justify-content:space-between;margin-bottom:10px;margin-top:5px}.entityArray mat-table{border:1px solid #E0E0E0;border-radius:5px;padding-top:5px;padding-bottom:25px}.entityArray .mat-column-select{flex:0 0 75px}.entityArray .array-error{display:flex;align-items:center;justify-content:center;margin-top:-25.8px;border:1px solid #E0E0E0;background-color:#f8d3d7;color:#721c24;height:25.8px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}\n"] }]
1133
+ }], ctorParameters: function () { return [{ type: i1.MatDialog }]; }, propDecorators: { entity: [{
1156
1134
  type: Input
1157
1135
  }], propertyKey: [{
1158
1136
  type: Input
@@ -1162,115 +1140,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
1162
1140
  type: Input
1163
1141
  }], hideOmitForEdit: [{
1164
1142
  type: Input
1143
+ }], addArrayItemDialog: [{
1144
+ type: ViewChild,
1145
+ args: ['addArrayItemDialog']
1165
1146
  }] } });
1166
1147
 
1167
- class NgxMatEntityInternalInputModule {
1168
- }
1169
- NgxMatEntityInternalInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInternalInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1170
- NgxMatEntityInternalInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInternalInputModule, declarations: [NgxMatEntityInternalInputComponent], imports: [CommonModule,
1171
- MatInputModule,
1172
- FormsModule,
1173
- MatFormFieldModule,
1174
- MatSelectModule,
1175
- MatAutocompleteModule,
1176
- MatCheckboxModule,
1177
- MatSlideToggleModule,
1178
- MatTableModule], exports: [NgxMatEntityInternalInputComponent] });
1179
- NgxMatEntityInternalInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInternalInputModule, imports: [[
1180
- CommonModule,
1181
- MatInputModule,
1182
- FormsModule,
1183
- MatFormFieldModule,
1184
- MatSelectModule,
1185
- MatAutocompleteModule,
1186
- MatCheckboxModule,
1187
- MatSlideToggleModule,
1188
- MatTableModule
1189
- ]] });
1190
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInternalInputModule, decorators: [{
1191
- type: NgModule,
1192
- args: [{
1193
- declarations: [NgxMatEntityInternalInputComponent],
1194
- imports: [
1195
- CommonModule,
1196
- MatInputModule,
1197
- FormsModule,
1198
- MatFormFieldModule,
1199
- MatSelectModule,
1200
- MatAutocompleteModule,
1201
- MatCheckboxModule,
1202
- MatSlideToggleModule,
1203
- MatTableModule
1204
- ],
1205
- exports: [NgxMatEntityInternalInputComponent]
1206
- }]
1207
- }] });
1208
-
1209
- class NgxMatEntityAddArrayItemDialogModule {
1210
- }
1211
- NgxMatEntityAddArrayItemDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityAddArrayItemDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1212
- NgxMatEntityAddArrayItemDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityAddArrayItemDialogModule, declarations: [NgxMatEntityAddArrayItemDialogComponent], imports: [CommonModule, NgxMatEntityInternalInputModule, MatDialogModule, FormsModule, MatButtonModule], exports: [NgxMatEntityAddArrayItemDialogComponent] });
1213
- NgxMatEntityAddArrayItemDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityAddArrayItemDialogModule, imports: [[CommonModule, NgxMatEntityInternalInputModule, MatDialogModule, FormsModule, MatButtonModule]] });
1214
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityAddArrayItemDialogModule, decorators: [{
1215
- type: NgModule,
1216
- args: [{
1217
- declarations: [NgxMatEntityAddArrayItemDialogComponent],
1218
- imports: [CommonModule, NgxMatEntityInternalInputModule, MatDialogModule, FormsModule, MatButtonModule],
1219
- exports: [NgxMatEntityAddArrayItemDialogComponent]
1220
- }]
1221
- }] });
1222
-
1223
- class NgxMatEntityArrayTableModule {
1224
- }
1225
- NgxMatEntityArrayTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityArrayTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1226
- NgxMatEntityArrayTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityArrayTableModule, declarations: [NgxMatEntityArrayTableComponent], imports: [CommonModule,
1227
- MatInputModule,
1228
- FormsModule,
1229
- MatFormFieldModule,
1230
- MatSelectModule,
1231
- MatAutocompleteModule,
1232
- MatCheckboxModule,
1233
- MatSlideToggleModule,
1234
- MatTableModule,
1235
- NgxMatEntityInternalInputModule,
1236
- MatButtonModule,
1237
- NgxMatEntityAddArrayItemDialogModule], exports: [NgxMatEntityArrayTableComponent] });
1238
- NgxMatEntityArrayTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityArrayTableModule, imports: [[
1239
- CommonModule,
1240
- MatInputModule,
1241
- FormsModule,
1242
- MatFormFieldModule,
1243
- MatSelectModule,
1244
- MatAutocompleteModule,
1245
- MatCheckboxModule,
1246
- MatSlideToggleModule,
1247
- MatTableModule,
1248
- NgxMatEntityInternalInputModule,
1249
- MatButtonModule,
1250
- NgxMatEntityAddArrayItemDialogModule
1251
- ]] });
1252
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityArrayTableModule, decorators: [{
1253
- type: NgModule,
1254
- args: [{
1255
- declarations: [NgxMatEntityArrayTableComponent],
1256
- imports: [
1257
- CommonModule,
1258
- MatInputModule,
1259
- FormsModule,
1260
- MatFormFieldModule,
1261
- MatSelectModule,
1262
- MatAutocompleteModule,
1263
- MatCheckboxModule,
1264
- MatSlideToggleModule,
1265
- MatTableModule,
1266
- NgxMatEntityInternalInputModule,
1267
- MatButtonModule,
1268
- NgxMatEntityAddArrayItemDialogModule
1269
- ],
1270
- exports: [NgxMatEntityArrayTableComponent]
1271
- }]
1272
- }] });
1273
-
1274
1148
  class NgxMatEntityInputModule {
1275
1149
  }
1276
1150
  NgxMatEntityInputModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
@@ -1282,9 +1156,11 @@ NgxMatEntityInputModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
1282
1156
  MatAutocompleteModule,
1283
1157
  MatCheckboxModule,
1284
1158
  MatSlideToggleModule,
1285
- NgxMatEntityArrayTableModule,
1286
1159
  MatChipsModule,
1287
- MatIconModule], exports: [NgxMatEntityInputComponent] });
1160
+ MatIconModule,
1161
+ MatTableModule,
1162
+ MatDialogModule,
1163
+ MatButtonModule], exports: [NgxMatEntityInputComponent] });
1288
1164
  NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, imports: [[
1289
1165
  CommonModule,
1290
1166
  MatInputModule,
@@ -1294,14 +1170,18 @@ NgxMatEntityInputModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0",
1294
1170
  MatAutocompleteModule,
1295
1171
  MatCheckboxModule,
1296
1172
  MatSlideToggleModule,
1297
- NgxMatEntityArrayTableModule,
1298
1173
  MatChipsModule,
1299
- MatIconModule
1174
+ MatIconModule,
1175
+ MatTableModule,
1176
+ MatDialogModule,
1177
+ MatButtonModule
1300
1178
  ]] });
1301
1179
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityInputModule, decorators: [{
1302
1180
  type: NgModule,
1303
1181
  args: [{
1304
- declarations: [NgxMatEntityInputComponent],
1182
+ declarations: [
1183
+ NgxMatEntityInputComponent,
1184
+ ],
1305
1185
  imports: [
1306
1186
  CommonModule,
1307
1187
  MatInputModule,
@@ -1311,14 +1191,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
1311
1191
  MatAutocompleteModule,
1312
1192
  MatCheckboxModule,
1313
1193
  MatSlideToggleModule,
1314
- NgxMatEntityArrayTableModule,
1315
1194
  MatChipsModule,
1316
- MatIconModule
1195
+ MatIconModule,
1196
+ MatTableModule,
1197
+ MatDialogModule,
1198
+ MatButtonModule
1317
1199
  ],
1318
1200
  exports: [NgxMatEntityInputComponent]
1319
1201
  }]
1320
1202
  }] });
1321
1203
 
1204
+ /**
1205
+ * The internal CreateEntityDialogData. Requires all default values the user can leave out.
1206
+ */
1322
1207
  class CreateEntityDialogDataInternal {
1323
1208
  constructor(entity, EntityServiceClass, createDialogData) {
1324
1209
  this.entity = entity;
@@ -1326,16 +1211,26 @@ class CreateEntityDialogDataInternal {
1326
1211
  this.createDialogData = createDialogData;
1327
1212
  }
1328
1213
  }
1329
- class CreateEntityDialogDataBuilder {
1214
+ /**
1215
+ * The Builder for the CreateEntityDialogData. Sets default values.
1216
+ */
1217
+ class CreateEntityDialogDataBuilder extends BaseBuilder {
1330
1218
  constructor(data) {
1331
- // this.validateInput(data);
1332
- this.dataInput = data;
1333
- const createDialogData = new CreateDialogDataBuilder(data.createDialogData).createDialogData;
1334
- this.createDialogData = new CreateEntityDialogDataInternal(data.entity, data.EntityServiceClass, createDialogData);
1335
- return this;
1219
+ super(data);
1220
+ }
1221
+ // eslint-disable-next-line jsdoc/require-jsdoc
1222
+ generateBaseData(data) {
1223
+ const createDialogData = new CreateDialogDataBuilder(data.createDialogData).getResult();
1224
+ return new CreateEntityDialogDataInternal(data.entity, data.EntityServiceClass, createDialogData);
1336
1225
  }
1337
1226
  }
1338
1227
 
1228
+ /**
1229
+ * The default dialog used to create new entities based on the configuration passed in the MAT_DIALOG_DATA "inputData".
1230
+ * Used by the ngx-mat-entity-table.
1231
+ *
1232
+ * It offers a lot of customization options which can be found in "CreateEntityDialogData".
1233
+ */
1339
1234
  class NgxMatEntityCreateDialogComponent {
1340
1235
  constructor(inputData, dialogRef, injector, dialog) {
1341
1236
  this.inputData = inputData;
@@ -1346,32 +1241,30 @@ class NgxMatEntityCreateDialogComponent {
1346
1241
  this.getWidth = EntityUtilities.getWidth;
1347
1242
  }
1348
1243
  ngOnInit() {
1349
- this.data = new CreateEntityDialogDataBuilder(this.inputData).createDialogData;
1244
+ this.data = new CreateEntityDialogDataBuilder(this.inputData).getResult();
1350
1245
  this.dialogRef.disableClose = true;
1351
- this.setEntityKeys();
1246
+ this.entityRows = EntityUtilities.getEntityRows(this.data.entity, true);
1352
1247
  this.entityService = this.injector.get(this.data.EntityServiceClass);
1353
1248
  }
1354
- setEntityKeys() {
1355
- this.entityKeys = Reflect.ownKeys(this.data.entity);
1356
- const omitCreateKeys = EntityUtilities.getOmitForCreate(this.data.entity);
1357
- this.entityKeys = this.entityKeys.filter((k) => !omitCreateKeys.includes(k))
1358
- .sort((a, b) => EntityUtilities.compareOrder(a, b, this.data.entity));
1359
- }
1249
+ /**
1250
+ * Tries add the new entity and close the dialog afterwards.
1251
+ * Also handles the confirmation if required.
1252
+ */
1360
1253
  create() {
1361
1254
  if (!this.data.createDialogData?.createRequiresConfirmDialog) {
1362
1255
  return this.confirmCreate();
1363
1256
  }
1364
1257
  const dialogData = new ConfirmDialogDataBuilder(this.data.createDialogData?.confirmCreateDialogData)
1365
- .withDefaultText(['Do you really want to create this entity?'])
1366
- .withDefaultConfirmButtonLabel('Create')
1367
- .withDefaultTitle('Create')
1368
- .confirmDialogData;
1369
- const dialogref = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
1258
+ .withDefault('text', ['Do you really want to create this entity?'])
1259
+ .withDefault('confirmButtonLabel', 'Create')
1260
+ .withDefault('title', 'Create')
1261
+ .getResult();
1262
+ const dialogRef = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
1370
1263
  data: dialogData,
1371
1264
  autoFocus: false,
1372
1265
  restoreFocus: false
1373
1266
  });
1374
- dialogref.afterClosed().subscribe((res) => {
1267
+ dialogRef.afterClosed().subscribe((res) => {
1375
1268
  if (res === 1) {
1376
1269
  this.confirmCreate();
1377
1270
  }
@@ -1380,20 +1273,26 @@ class NgxMatEntityCreateDialogComponent {
1380
1273
  confirmCreate() {
1381
1274
  this.entityService.create(this.data.entity).then(() => this.dialogRef.close());
1382
1275
  }
1276
+ /**
1277
+ * Closes the dialog.
1278
+ */
1383
1279
  cancel() {
1384
1280
  this.dialogRef.close();
1385
1281
  }
1386
1282
  }
1387
1283
  NgxMatEntityCreateDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.Injector }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
1388
- NgxMatEntityCreateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityCreateDialogComponent, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <ngx-mat-entity-input\n *ngFor=\"let key of entityKeys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"create()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'create')\">\n {{data.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.createDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i12.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i12.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i12.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
1284
+ NgxMatEntityCreateDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityCreateDialogComponent, selector: "ngx-mat-entity-create-dialog", ngImport: i0, template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\">\n <div class=\"row\" *ngFor=\"let row of entityRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"create()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'create')\">\n {{data.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.createDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"], components: [{ type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i13.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i13.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i13.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
1389
1285
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogComponent, decorators: [{
1390
1286
  type: Component,
1391
- args: [{ selector: 'ngx-mat-entity-create-dialog', template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <ngx-mat-entity-input\n *ngFor=\"let key of entityKeys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"create()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'create')\">\n {{data.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.createDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"] }]
1287
+ args: [{ selector: 'ngx-mat-entity-create-dialog', template: "<h2 mat-dialog-title>{{data.createDialogData.title}}</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\">\n <div class=\"row\" *ngFor=\"let row of entityRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForCreate]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"create()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'create')\">\n {{data.createDialogData.createButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.createDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}\n"] }]
1392
1288
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
1393
1289
  type: Inject,
1394
1290
  args: [MAT_DIALOG_DATA]
1395
1291
  }] }, { type: i1.MatDialogRef }, { type: i0.Injector }, { type: i1.MatDialog }]; } });
1396
1292
 
1293
+ /**
1294
+ * The internal EditDialogData. Requires all default values the user can leave out.
1295
+ */
1397
1296
  class EditDialogDataInternal {
1398
1297
  constructor(title, confirmButtonLabel, deleteButtonLabel, cancelButtonLabel, deleteRequiresConfirmDialog, editRequiresConfirmDialog, confirmDeleteDialogData, confirmEditDialogData) {
1399
1298
  this.title = title;
@@ -1406,74 +1305,33 @@ class EditDialogDataInternal {
1406
1305
  this.confirmEditDialogData = confirmEditDialogData;
1407
1306
  }
1408
1307
  }
1409
- class EditDialogDataBuilder {
1308
+ /**
1309
+ * The Builder for the EditDialogData. Sets default values.
1310
+ */
1311
+ class EditDialogDataBuilder extends BaseBuilder {
1410
1312
  constructor(data) {
1411
- // this.validateInput(data);
1412
- this.dataInput = data;
1313
+ super(data);
1314
+ }
1315
+ // eslint-disable-next-line jsdoc/require-jsdoc
1316
+ generateBaseData(data) {
1413
1317
  const confirmEditDialogData = new ConfirmDialogDataBuilder(data?.confirmEditDialogData)
1414
- .withDefaultConfirmButtonLabel('Save')
1415
- .withDefaultText(['Do you really want to save all changes?'])
1416
- .withDefaultTitle('Edit')
1417
- .confirmDialogData;
1318
+ .withDefault('confirmButtonLabel', 'Save')
1319
+ .withDefault('text', ['Do you really want to save all changes?'])
1320
+ .withDefault('title', 'Edit')
1321
+ .getResult();
1418
1322
  const confirmDeleteDialogData = new ConfirmDialogDataBuilder(data?.confirmDeleteDialogData)
1419
- .withDefaultConfirmButtonLabel('Delete')
1420
- .withDefaultType('delete')
1421
- .withDefaultText(['Do you really want to delete this entity?'])
1422
- .withDefaultTitle('Delete')
1423
- .confirmDialogData;
1424
- this.editDialogData = new EditDialogDataInternal(data?.title ? data.title : () => 'Edit', data?.confirmButtonLabel ? data.confirmButtonLabel : 'Save', data?.deleteButtonLabel ? data.deleteButtonLabel : 'Delete', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.deleteRequiresConfirmDialog ? data.deleteRequiresConfirmDialog : true, data?.editRequiresConfirmDialog ? data.editRequiresConfirmDialog : false, confirmDeleteDialogData, confirmEditDialogData);
1425
- return this;
1426
- }
1427
- withDefaultTitle(title) {
1428
- if (!this.dataInput?.title) {
1429
- this.editDialogData.title = title;
1430
- }
1431
- return this;
1432
- }
1433
- withDefaultConfirmButtonLabel(label) {
1434
- if (!this.dataInput?.confirmButtonLabel) {
1435
- this.editDialogData.confirmButtonLabel = label;
1436
- }
1437
- return this;
1438
- }
1439
- withDefaultDeleteButtonLabel(label) {
1440
- if (!this.dataInput?.deleteButtonLabel) {
1441
- this.editDialogData.deleteButtonLabel = label;
1442
- }
1443
- return this;
1444
- }
1445
- withDefaultCancelButtonLabel(label) {
1446
- if (!this.dataInput?.cancelButtonLabel) {
1447
- this.editDialogData.cancelButtonLabel = label;
1448
- }
1449
- return this;
1450
- }
1451
- withDefaultDeleteRequiresConfirmDialog(deleteRequiresConfirmDialog) {
1452
- if (!this.dataInput?.deleteRequiresConfirmDialog) {
1453
- this.editDialogData.deleteRequiresConfirmDialog = deleteRequiresConfirmDialog;
1454
- }
1455
- return this;
1456
- }
1457
- withDefaultEditRequiresConfirmDialog(editRequiresConfirmDialog) {
1458
- if (!this.dataInput?.editRequiresConfirmDialog) {
1459
- this.editDialogData.editRequiresConfirmDialog = editRequiresConfirmDialog;
1460
- }
1461
- return this;
1462
- }
1463
- withDefaultConfirmDeleteDialogData(confirmDeleteDialogData) {
1464
- if (!this.dataInput?.confirmDeleteDialogData) {
1465
- this.editDialogData.confirmDeleteDialogData = confirmDeleteDialogData;
1466
- }
1467
- return this;
1468
- }
1469
- withDefaultConfirmEditDialogData(confirmEditDialogData) {
1470
- if (!this.dataInput?.confirmEditDialogData) {
1471
- this.editDialogData.confirmEditDialogData = confirmEditDialogData;
1472
- }
1473
- return this;
1323
+ .withDefault('confirmButtonLabel', 'Delete')
1324
+ .withDefault('type', 'delete')
1325
+ .withDefault('text', ['Do you really want to delete this entity?'])
1326
+ .withDefault('title', 'Delete')
1327
+ .getResult();
1328
+ return new EditDialogDataInternal(data?.title ? data.title : () => 'Edit', data?.confirmButtonLabel ? data.confirmButtonLabel : 'Save', data?.deleteButtonLabel ? data.deleteButtonLabel : 'Delete', data?.cancelButtonLabel ? data.cancelButtonLabel : 'Cancel', data?.deleteRequiresConfirmDialog ? data.deleteRequiresConfirmDialog : true, data?.editRequiresConfirmDialog ? data.editRequiresConfirmDialog : false, confirmDeleteDialogData, confirmEditDialogData);
1474
1329
  }
1475
1330
  }
1476
1331
 
1332
+ /**
1333
+ * The internal EditEntityDialogData. Requires all default values the user can leave out.
1334
+ */
1477
1335
  class EditEntityDialogDataInternal {
1478
1336
  constructor(entity, EntityServiceClass, editDialogData, allowDelete) {
1479
1337
  this.entity = entity;
@@ -1482,16 +1340,26 @@ class EditEntityDialogDataInternal {
1482
1340
  this.allowDelete = allowDelete;
1483
1341
  }
1484
1342
  }
1485
- class EditEntityDialogDataBuilder {
1343
+ /**
1344
+ * The Builder for the EditEntityDialogData. Sets default values.
1345
+ */
1346
+ class EditEntityDialogDataBuilder extends BaseBuilder {
1486
1347
  constructor(data) {
1487
- // this.validateInput(data);
1488
- this.dataInput = data;
1489
- const editDialogData = new EditDialogDataBuilder(data.editDialogData).editDialogData;
1490
- this.editDialogData = new EditEntityDialogDataInternal(data.entity, data.EntityServiceClass, editDialogData, data.allowDelete ? data.allowDelete : () => true);
1491
- return this;
1348
+ super(data);
1349
+ }
1350
+ // eslint-disable-next-line jsdoc/require-jsdoc
1351
+ generateBaseData(data) {
1352
+ const editDialogData = new EditDialogDataBuilder(data.editDialogData).getResult();
1353
+ return new EditEntityDialogDataInternal(data.entity, data.EntityServiceClass, editDialogData, data.allowDelete ? data.allowDelete : () => true);
1492
1354
  }
1493
1355
  }
1494
1356
 
1357
+ /**
1358
+ * The default dialog used to edit an existing entity based on the configuration passed in the MAT_DIALOG_DATA "inputData".
1359
+ * Used by the ngx-mat-entity-table.
1360
+ *
1361
+ * It offers a lot of customization options which can be found in "EditEntityDialogData".
1362
+ */
1495
1363
  class NgxMatEntityEditDialogComponent {
1496
1364
  constructor(inputData, dialogRef, injector, dialog) {
1497
1365
  this.inputData = inputData;
@@ -1502,33 +1370,31 @@ class NgxMatEntityEditDialogComponent {
1502
1370
  this.getWidth = EntityUtilities.getWidth;
1503
1371
  }
1504
1372
  ngOnInit() {
1505
- this.data = new EditEntityDialogDataBuilder(this.inputData).editDialogData;
1373
+ this.data = new EditEntityDialogDataBuilder(this.inputData).getResult();
1506
1374
  this.dialogRef.disableClose = true;
1507
- this.setEntityKeys();
1375
+ this.entityRows = EntityUtilities.getEntityRows(this.data.entity, false, true);
1508
1376
  this.entityService = this.injector.get(this.data.EntityServiceClass);
1509
1377
  this.entityPriorChanges = cloneDeep(this.data.entity);
1510
1378
  }
1511
- setEntityKeys() {
1512
- this.entityKeys = Reflect.ownKeys(this.data.entity);
1513
- const omitUpdateKeys = EntityUtilities.getOmitForUpdate(this.data.entity);
1514
- this.entityKeys = this.entityKeys.filter((k) => !omitUpdateKeys.includes(k))
1515
- .sort((a, b) => EntityUtilities.compareOrder(a, b, this.data.entity));
1516
- }
1379
+ /**
1380
+ * Tries to save the changes and close the dialog afterwards.
1381
+ * Also handles the confirmation if required.
1382
+ */
1517
1383
  edit() {
1518
1384
  if (!this.data.editDialogData.editRequiresConfirmDialog) {
1519
1385
  return this.confirmEdit();
1520
1386
  }
1521
1387
  const dialogData = new ConfirmDialogDataBuilder(this.data.editDialogData.confirmEditDialogData)
1522
- .withDefaultText(['Do you really want to save all changes?'])
1523
- .withDefaultConfirmButtonLabel('Save')
1524
- .withDefaultTitle('Edit')
1525
- .confirmDialogData;
1526
- const dialogref = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
1388
+ .withDefault('text', ['Do you really want to save all changes?'])
1389
+ .withDefault('confirmButtonLabel', 'Save')
1390
+ .withDefault('title', 'Edit')
1391
+ .getResult();
1392
+ const dialogRef = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
1527
1393
  data: dialogData,
1528
1394
  autoFocus: false,
1529
1395
  restoreFocus: false
1530
1396
  });
1531
- dialogref.afterClosed().subscribe((res) => {
1397
+ dialogRef.afterClosed().subscribe((res) => {
1532
1398
  if (res === 1) {
1533
1399
  this.confirmEdit();
1534
1400
  }
@@ -1537,22 +1403,26 @@ class NgxMatEntityEditDialogComponent {
1537
1403
  confirmEdit() {
1538
1404
  this.entityService.update(this.data.entity, this.entityPriorChanges).then(() => this.dialogRef.close(1));
1539
1405
  }
1406
+ /**
1407
+ * Tries to delete the entity and close the dialog afterwards.
1408
+ * Also handles the confirmation if required.
1409
+ */
1540
1410
  delete() {
1541
1411
  if (!this.data.editDialogData.deleteRequiresConfirmDialog) {
1542
1412
  return this.confirmDelete();
1543
1413
  }
1544
1414
  const dialogData = new ConfirmDialogDataBuilder(this.data.editDialogData.confirmDeleteDialogData)
1545
- .withDefaultText(['Do you really want to delete this entity?'])
1546
- .withDefaultType('delete')
1547
- .withDefaultConfirmButtonLabel('Delete')
1548
- .withDefaultTitle('Delete')
1549
- .confirmDialogData;
1550
- const dialogref = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
1415
+ .withDefault('text', ['Do you really want to delete this entity?'])
1416
+ .withDefault('type', 'delete')
1417
+ .withDefault('confirmButtonLabel', 'Delete')
1418
+ .withDefault('title', 'Delete')
1419
+ .getResult();
1420
+ const dialogRef = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
1551
1421
  data: dialogData,
1552
1422
  autoFocus: false,
1553
1423
  restoreFocus: false
1554
1424
  });
1555
- dialogref.afterClosed().subscribe((res) => {
1425
+ dialogRef.afterClosed().subscribe((res) => {
1556
1426
  if (res === 1) {
1557
1427
  this.confirmDelete();
1558
1428
  }
@@ -1561,21 +1431,27 @@ class NgxMatEntityEditDialogComponent {
1561
1431
  confirmDelete() {
1562
1432
  this.entityService.delete(this.entityPriorChanges.id).then(() => this.dialogRef.close(2));
1563
1433
  }
1434
+ /**
1435
+ * Reverts all changes made and closes the dialog.
1436
+ */
1564
1437
  cancel() {
1565
1438
  EntityUtilities.resetChangesOnEntity(this.data.entity, this.entityPriorChanges);
1566
1439
  this.dialogRef.close(0);
1567
1440
  }
1568
1441
  }
1569
1442
  NgxMatEntityEditDialogComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityEditDialogComponent, deps: [{ token: MAT_DIALOG_DATA }, { token: i1.MatDialogRef }, { token: i0.Injector }, { token: i1.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
1570
- NgxMatEntityEditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n {{data.editDialogData.title(data.entity)}}\n <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n {{data.editDialogData.deleteButtonLabel}}\n </button>\n</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <ngx-mat-entity-input\n *ngFor=\"let key of entityKeys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"edit()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'update') || !EntityUtilities.dirty(data.entity, entityPriorChanges)\">\n {{data.editDialogData.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.editDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i12.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i12.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i12.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
1443
+ NgxMatEntityEditDialogComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityEditDialogComponent, selector: "ngx-mat-entity-edit-dialog", ngImport: i0, template: "<h2 mat-dialog-title>\n {{data.editDialogData.title(data.entity)}}\n <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n {{data.editDialogData.deleteButtonLabel}}\n </button>\n</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <div class=\"row\" *ngFor=\"let row of entityRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"edit()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'update') || !EntityUtilities.dirty(data.entity, entityPriorChanges)\">\n {{data.editDialogData.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.editDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"], components: [{ type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: NgxMatEntityInputComponent, selector: "ngx-mat-entity-input", inputs: ["entity", "propertyKey", "getValidationErrorMessage", "hideOmitForCreate", "hideOmitForEdit"] }], directives: [{ type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { type: i13.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { type: i13.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i13.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]" }] });
1571
1444
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityEditDialogComponent, decorators: [{
1572
1445
  type: Component,
1573
- args: [{ selector: 'ngx-mat-entity-edit-dialog', template: "<h2 mat-dialog-title>\n {{data.editDialogData.title(data.entity)}}\n <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n {{data.editDialogData.deleteButtonLabel}}\n </button>\n</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <ngx-mat-entity-input\n *ngFor=\"let key of entityKeys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"edit()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'update') || !EntityUtilities.dirty(data.entity, entityPriorChanges)\">\n {{data.editDialogData.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.editDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"] }]
1446
+ args: [{ selector: 'ngx-mat-entity-edit-dialog', template: "<h2 mat-dialog-title>\n {{data.editDialogData.title(data.entity)}}\n <button *ngIf=\"data.allowDelete(data.entity)\" mat-raised-button (click)=\"delete()\" color=\"warn\" class=\"delete-button\" tabindex=\"-1\">\n {{data.editDialogData.deleteButtonLabel}}\n </button>\n</h2>\n\n<mat-dialog-content>\n <form #form=\"ngForm\" class=\"row\">\n <div class=\"row\" *ngFor=\"let row of entityRows\">\n <ngx-mat-entity-input\n *ngFor=\"let key of row.keys\"\n [entity]=\"data.entity\"\n [propertyKey]=\"key\"\n [hideOmitForEdit]=\"true\"\n class=\"col-lg-{{getWidth(data.entity, key, 'lg')}} col-md-{{getWidth(data.entity, key, 'md')}} col-sm-{{getWidth(data.entity, key, 'sm')}}\"\n >\n </ngx-mat-entity-input>\n </div>\n </form>\n</mat-dialog-content>\n\n<mat-dialog-actions>\n <button mat-raised-button (click)=\"edit()\" [disabled]=\"!EntityUtilities.isEntityValid(data.entity, 'update') || !EntityUtilities.dirty(data.entity, entityPriorChanges)\">\n {{data.editDialogData.confirmButtonLabel}}\n </button>\n <button mat-raised-button (click)=\"cancel()\" class=\"cancel-button\">\n {{data.editDialogData.cancelButtonLabel}}\n </button>\n</mat-dialog-actions>\n", styles: ["mat-dialog-actions{display:flex;justify-content:space-between}.delete-button{float:right}\n"] }]
1574
1447
  }], ctorParameters: function () { return [{ type: undefined, decorators: [{
1575
1448
  type: Inject,
1576
1449
  args: [MAT_DIALOG_DATA]
1577
1450
  }] }, { type: i1.MatDialogRef }, { type: i0.Injector }, { type: i1.MatDialog }]; } });
1578
1451
 
1452
+ /**
1453
+ * The internal TableData. Requires all default values the user can leave out.
1454
+ */
1579
1455
  class TableDataInternal {
1580
1456
  constructor(baseData, createDialogData, editDialogData) {
1581
1457
  this.baseData = baseData;
@@ -1583,14 +1459,21 @@ class TableDataInternal {
1583
1459
  this.editDialogData = editDialogData;
1584
1460
  }
1585
1461
  }
1586
- class BaseDataBuilder {
1462
+ /**
1463
+ * The Builder for the table BaseData. Sets default values.
1464
+ */
1465
+ class BaseDataBuilder extends BaseBuilder {
1587
1466
  constructor(data) {
1588
- //this.validateInput(data);
1589
- this.dataInput = data;
1590
- this.baseData = new BaseDataInternal(data.title, data.displayColumns, data.EntityServiceClass, data.searchLabel ? data.searchLabel : 'Search', data.createButtonLabel ? data.createButtonLabel : 'Create', data.searchString ? data.searchString : defaultSearchFunction, data.allowCreate ? data.allowCreate : true, data.allowEdit ? data.allowEdit : () => true, data.allowDelete ? data.allowDelete : () => true, data.multiSelectActions ? data.multiSelectActions : [], data.multiSelectLabel ? data.multiSelectLabel : 'Actions', data.EntityClass, data.edit, data.create);
1591
- return this;
1467
+ super(data);
1468
+ }
1469
+ // eslint-disable-next-line jsdoc/require-jsdoc
1470
+ generateBaseData(data) {
1471
+ return new BaseDataInternal(data.title, data.displayColumns, data.EntityServiceClass, data.searchLabel ? data.searchLabel : 'Search', data.createButtonLabel ? data.createButtonLabel : 'Create', data.searchString ? data.searchString : defaultSearchFunction, data.allowCreate === false ? data.allowCreate : true, data.allowEdit ? data.allowEdit : () => true, data.allowDelete ? data.allowDelete : () => true, data.multiSelectActions ? data.multiSelectActions : [], data.multiSelectLabel ? data.multiSelectLabel : 'Actions', data.EntityClass, data.edit, data.create);
1592
1472
  }
1593
1473
  }
1474
+ /**
1475
+ * The internal TableData. Requires all default values the user can leave out.
1476
+ */
1594
1477
  class BaseDataInternal {
1595
1478
  constructor(title, displayColumns, EntityServiceClass, searchLabel, createButtonLabel, searchString, allowCreate, allowEdit, allowDelete, multiSelectActions, multiSelectLabel, EntityClass, edit, create) {
1596
1479
  this.title = title;
@@ -1609,16 +1492,21 @@ class BaseDataInternal {
1609
1492
  this.create = create;
1610
1493
  }
1611
1494
  }
1612
- class TableDataBuilder {
1495
+ /**
1496
+ * The Builder for the complete TableData. Sets default values and validates user input.
1497
+ */
1498
+ class TableDataBuilder extends BaseBuilder {
1613
1499
  constructor(data) {
1614
- this.validateInput(data);
1615
- this.dataInput = data;
1616
- const createDialogData = new CreateDialogDataBuilder(data.createDialogData).createDialogData;
1617
- const editDialogData = new EditDialogDataBuilder(data.editDialogData).editDialogData;
1618
- const baseData = new BaseDataBuilder(data.baseData).baseData;
1619
- this.tableData = new TableDataInternal(baseData, createDialogData, editDialogData);
1620
- return this;
1500
+ super(data);
1621
1501
  }
1502
+ // eslint-disable-next-line jsdoc/require-jsdoc
1503
+ generateBaseData(data) {
1504
+ const createDialogData = new CreateDialogDataBuilder(data.createDialogData).getResult();
1505
+ const editDialogData = new EditDialogDataBuilder(data.editDialogData).getResult();
1506
+ const baseData = new BaseDataBuilder(data.baseData).getResult();
1507
+ return new TableDataInternal(baseData, createDialogData, editDialogData);
1508
+ }
1509
+ // eslint-disable-next-line jsdoc/require-jsdoc
1622
1510
  validateInput(data) {
1623
1511
  if (data.baseData.multiSelectActions?.length && data.baseData.displayColumns.find(dp => dp.displayName === 'select')) {
1624
1512
  throw new Error(`The name "select" for a display column is reserved for the multi-select action functionality.
@@ -1663,6 +1551,12 @@ function defaultSearchFunction(entity) {
1663
1551
  return searchString;
1664
1552
  }
1665
1553
 
1554
+ /**
1555
+ * Generates a fully functional table for displaying, creating, updating and deleting entities
1556
+ * based on the configuration passed in the @Input "tableData".
1557
+ *
1558
+ * It offers a lot of customization options which can be found in "TableData".
1559
+ */
1666
1560
  class NgxMatEntityTableComponent {
1667
1561
  constructor(dialog, injector) {
1668
1562
  this.dialog = dialog;
@@ -1671,8 +1565,11 @@ class NgxMatEntityTableComponent {
1671
1565
  this.dataSource = new MatTableDataSource();
1672
1566
  this.selection = new SelectionModel(true, []);
1673
1567
  }
1568
+ /**
1569
+ * Sets up all the configuration for the table and the EntityService.
1570
+ */
1674
1571
  ngOnInit() {
1675
- this.data = new TableDataBuilder(this.tableData).tableData;
1572
+ this.data = new TableDataBuilder(this.tableData).getResult();
1676
1573
  this.entityService = this.injector.get(this.data.baseData.EntityServiceClass);
1677
1574
  const givenDisplayColumns = this.data.baseData.displayColumns.map((v) => v.displayName);
1678
1575
  if (this.data.baseData.multiSelectActions.length) {
@@ -1701,6 +1598,12 @@ class NgxMatEntityTableComponent {
1701
1598
  });
1702
1599
  this.entityService.read();
1703
1600
  }
1601
+ /**
1602
+ * Edits an entity. This either calls the edit-Method provided by the user or uses a default edit-dialog.
1603
+ *
1604
+ * @param entity - The entity that should be updated.
1605
+ * @throws When no EntityClass was provided, as a new call is needed to initialize metadata.
1606
+ */
1704
1607
  editEntity(entity) {
1705
1608
  if (this.data.baseData.allowEdit(entity)) {
1706
1609
  if (!this.data.baseData.EntityClass) {
@@ -1721,7 +1624,7 @@ class NgxMatEntityTableComponent {
1721
1624
  allowDelete: this.data.baseData.allowDelete,
1722
1625
  editDialogData: this.data.editDialogData
1723
1626
  };
1724
- const dialogData = new EditEntityDialogDataBuilder(inputDialogData).editDialogData;
1627
+ const dialogData = new EditEntityDialogDataBuilder(inputDialogData).getResult();
1725
1628
  firstValueFrom(this.dialog.open(NgxMatEntityEditDialogComponent, {
1726
1629
  data: dialogData,
1727
1630
  minWidth: '60%',
@@ -1736,6 +1639,11 @@ class NgxMatEntityTableComponent {
1736
1639
  }
1737
1640
  });
1738
1641
  }
1642
+ /**
1643
+ * Creates a new Entity. This either calls the create-Method provided by the user or uses a default create-dialog.
1644
+ *
1645
+ * @throws When no EntityClass was provided, as a new call is needed to initialize metadata.
1646
+ */
1739
1647
  createEntity() {
1740
1648
  if (this.data.baseData.allowCreate) {
1741
1649
  if (!this.data.baseData.EntityClass) {
@@ -1754,7 +1662,7 @@ class NgxMatEntityTableComponent {
1754
1662
  entity: entity,
1755
1663
  EntityServiceClass: this.data.baseData.EntityServiceClass,
1756
1664
  createDialogData: this.data.createDialogData
1757
- }).createDialogData;
1665
+ }).getResult();
1758
1666
  this.dialog.open(NgxMatEntityCreateDialogComponent, {
1759
1667
  data: dialogData,
1760
1668
  minWidth: '60%',
@@ -1762,19 +1670,26 @@ class NgxMatEntityTableComponent {
1762
1670
  restoreFocus: false
1763
1671
  });
1764
1672
  }
1673
+ /**
1674
+ * Runs the MultiAction for all selected entries.
1675
+ * Also handles confirmation with an additional dialog if configured.
1676
+ *
1677
+ * @param action - The MultiAction to run.
1678
+ */
1765
1679
  runMultiAction(action) {
1766
1680
  if (!action.requireConfirmDialog || !action.requireConfirmDialog(this.selection.selected)) {
1767
1681
  return this.confirmRunMultiAction(action);
1768
1682
  }
1769
1683
  const dialogData = new ConfirmDialogDataBuilder(action.confirmDialogData)
1770
- .withDefaultText([`Do you really want to run this action on ${this.selection.selected.length} entries?`])
1771
- .withDefaultTitle(action.displayName).confirmDialogData;
1772
- const dialogref = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
1684
+ .withDefault('text', [`Do you really want to run this action on ${this.selection.selected.length} entries?`])
1685
+ .withDefault('title', action.displayName)
1686
+ .getResult();
1687
+ const dialogRef = this.dialog.open(NgxMatEntityConfirmDialogComponent, {
1773
1688
  data: dialogData,
1774
1689
  autoFocus: false,
1775
1690
  restoreFocus: false
1776
1691
  });
1777
- dialogref.afterClosed().subscribe((res) => {
1692
+ dialogRef.afterClosed().subscribe((res) => {
1778
1693
  if (res === 1) {
1779
1694
  this.confirmRunMultiAction(action);
1780
1695
  }
@@ -1783,6 +1698,12 @@ class NgxMatEntityTableComponent {
1783
1698
  confirmRunMultiAction(action) {
1784
1699
  action.action(this.selection.selected);
1785
1700
  }
1701
+ /**
1702
+ * Checks if an MultiAction is disabled (e.g. Because no entries have been selected).
1703
+ *
1704
+ * @param action - The MultiAction to check.
1705
+ * @returns Whether or not the Action can be used.
1706
+ */
1786
1707
  multiActionDisabled(action) {
1787
1708
  if (!this.selection.selected.length) {
1788
1709
  return true;
@@ -1792,6 +1713,9 @@ class NgxMatEntityTableComponent {
1792
1713
  }
1793
1714
  return false;
1794
1715
  }
1716
+ /**
1717
+ * Toggles all entries in the table.
1718
+ */
1795
1719
  masterToggle() {
1796
1720
  if (this.isAllSelected()) {
1797
1721
  this.selection.clear();
@@ -1800,6 +1724,12 @@ class NgxMatEntityTableComponent {
1800
1724
  this.dataSource.data.forEach((row) => this.selection.select(row));
1801
1725
  }
1802
1726
  }
1727
+ /**
1728
+ * Checks if all entries in the table have been selected.
1729
+ * This is needed to display the "masterToggle"-checkbox correctly.
1730
+ *
1731
+ * @returns Whether or not all entries in the table have been selected.
1732
+ */
1803
1733
  isAllSelected() {
1804
1734
  const numSelected = this.selection.selected.length;
1805
1735
  const numRows = this.dataSource.data.length;
@@ -1809,16 +1739,21 @@ class NgxMatEntityTableComponent {
1809
1739
  this.onDestroy.next(undefined);
1810
1740
  this.onDestroy.complete();
1811
1741
  }
1742
+ /**
1743
+ * Applies the search input to filter the table entries.
1744
+ *
1745
+ * @param event - The keyup-event which contains the search-string of the user.
1746
+ */
1812
1747
  applyFilter(event) {
1813
1748
  const filterValue = event.target.value;
1814
1749
  this.dataSource.filter = filterValue.trim().toLowerCase();
1815
1750
  }
1816
1751
  }
1817
1752
  NgxMatEntityTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableComponent, deps: [{ token: i1.MatDialog }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
1818
- NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityTableComponent, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n <mat-label>{{data.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyFilter($event)\" />\n </mat-form-field>\n <div\n *ngIf=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-2]=\"data.baseData.allowCreate\"\n [class.col-lg-4]=\"!data.baseData.allowCreate\"\n [class.col-md-3]=\"data.baseData.allowCreate\"\n [class.col-md-6]=\"!data.baseData.allowCreate\"\n [class.col-sm-6]=\"data.baseData.allowCreate\"\n [class.col-sm-12]=\"!data.baseData.allowCreate\"\n >\n <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n {{data.baseData.multiSelectLabel}}\n </button>\n </div>\n <mat-menu #menu=\"matMenu\">\n <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n {{action.displayName}}\n </button>\n </mat-menu>\n\n <div\n *ngIf=\"data.baseData.allowCreate\"\n [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n >\n <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n {{data.baseData.createButtonLabel}}\n </button>\n </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowEdit(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n\n <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button{margin-bottom:15px}}@media (max-width: 575px){.create-button{margin-bottom:15px}}\n"], components: [{ type: i1$1.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$2.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$2.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i4$1.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i5.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i4$1.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i4$1.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i1$1.MatLabel, selector: "mat-label" }, { type: i8.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$2.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i7.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4$1.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i4$1.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i4$1.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i4$1.MatCellDef, selector: "[matCellDef]" }, { type: i4$1.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i4$1.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i4$1.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
1753
+ NgxMatEntityTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.11", type: NgxMatEntityTableComponent, selector: "ngx-mat-entity-table", inputs: { tableData: "tableData" }, viewQueries: [{ propertyName: "paginator", first: true, predicate: MatPaginator, descendants: true, static: true }, { propertyName: "sort", first: true, predicate: MatSort, descendants: true, static: true }, { propertyName: "filter", first: true, predicate: ["filter"], descendants: true, static: true }], ngImport: i0, template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n <mat-label>{{data.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyFilter($event)\" />\n </mat-form-field>\n <div\n *ngIf=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-2]=\"data.baseData.allowCreate\"\n [class.col-lg-4]=\"!data.baseData.allowCreate\"\n [class.col-md-3]=\"data.baseData.allowCreate\"\n [class.col-md-6]=\"!data.baseData.allowCreate\"\n [class.col-sm-6]=\"data.baseData.allowCreate\"\n [class.col-sm-12]=\"!data.baseData.allowCreate\"\n >\n <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n {{data.baseData.multiSelectLabel}}\n </button>\n </div>\n <mat-menu #menu=\"matMenu\">\n <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n {{action.displayName}}\n </button>\n </mat-menu>\n\n <div\n *ngIf=\"data.baseData.allowCreate\"\n [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n >\n <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n {{data.baseData.createButtonLabel}}\n </button>\n </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowEdit(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n\n <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"], components: [{ type: i2.MatFormField, selector: "mat-form-field", inputs: ["color", "appearance", "hideRequiredMarker", "hintLabel", "floatLabel"], exportAs: ["matFormField"] }, { type: i3.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button], button[mat-fab], button[mat-mini-fab], button[mat-stroked-button], button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { type: i4$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { type: i4$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { type: i9.MatTable, selector: "mat-table, table[mat-table]", exportAs: ["matTable"] }, { type: i6.MatCheckbox, selector: "mat-checkbox", inputs: ["disableRipple", "color", "tabIndex", "aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { type: i9.MatHeaderRow, selector: "mat-header-row, tr[mat-header-row]", exportAs: ["matHeaderRow"] }, { type: i9.MatRow, selector: "mat-row, tr[mat-row]", exportAs: ["matRow"] }, { type: i7$1.MatPaginator, selector: "mat-paginator", inputs: ["disabled"], exportAs: ["matPaginator"] }], directives: [{ type: i2.MatLabel, selector: "mat-label" }, { type: i12.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { type: i11.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { type: i11.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i9.MatColumnDef, selector: "[matColumnDef]", inputs: ["sticky", "matColumnDef"] }, { type: i9.MatHeaderCellDef, selector: "[matHeaderCellDef]" }, { type: i9.MatHeaderCell, selector: "mat-header-cell, th[mat-header-cell]" }, { type: i9.MatCellDef, selector: "[matCellDef]" }, { type: i9.MatCell, selector: "mat-cell, td[mat-cell]" }, { type: i9.MatHeaderRowDef, selector: "[matHeaderRowDef]", inputs: ["matHeaderRowDef", "matHeaderRowDefSticky"] }, { type: i9.MatRowDef, selector: "[matRowDef]", inputs: ["matRowDefColumns", "matRowDefWhen"] }] });
1819
1754
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableComponent, decorators: [{
1820
1755
  type: Component,
1821
- args: [{ selector: 'ngx-mat-entity-table', template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n <mat-label>{{data.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyFilter($event)\" />\n </mat-form-field>\n <div\n *ngIf=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-2]=\"data.baseData.allowCreate\"\n [class.col-lg-4]=\"!data.baseData.allowCreate\"\n [class.col-md-3]=\"data.baseData.allowCreate\"\n [class.col-md-6]=\"!data.baseData.allowCreate\"\n [class.col-sm-6]=\"data.baseData.allowCreate\"\n [class.col-sm-12]=\"!data.baseData.allowCreate\"\n >\n <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n {{data.baseData.multiSelectLabel}}\n </button>\n </div>\n <mat-menu #menu=\"matMenu\">\n <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n {{action.displayName}}\n </button>\n </mat-menu>\n\n <div\n *ngIf=\"data.baseData.allowCreate\"\n [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n >\n <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n {{data.baseData.createButtonLabel}}\n </button>\n </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowEdit(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n\n <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button{margin-bottom:15px}}@media (max-width: 575px){.create-button{margin-bottom:15px}}\n"] }]
1756
+ args: [{ selector: 'ngx-mat-entity-table', template: "<h1 class=\"title\">{{data.baseData.title}}</h1>\n\n<div class=\"row\">\n <mat-form-field class=\"col-lg-8 col-md-6 col-sm-12\">\n <mat-label>{{data.baseData.searchLabel}}</mat-label>\n <input matInput (keyup)=\"applyFilter($event)\" />\n </mat-form-field>\n <div\n *ngIf=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-2]=\"data.baseData.allowCreate\"\n [class.col-lg-4]=\"!data.baseData.allowCreate\"\n [class.col-md-3]=\"data.baseData.allowCreate\"\n [class.col-md-6]=\"!data.baseData.allowCreate\"\n [class.col-sm-6]=\"data.baseData.allowCreate\"\n [class.col-sm-12]=\"!data.baseData.allowCreate\"\n >\n <button class=\"actions-button\" [matMenuTriggerFor]=\"menu\" mat-raised-button>\n {{data.baseData.multiSelectLabel}}\n </button>\n </div>\n <mat-menu #menu=\"matMenu\">\n <button *ngFor=\"let action of data.baseData.multiSelectActions\" [disabled]=\"multiActionDisabled(action)\" (click)=\"runMultiAction(action)\" mat-menu-item>\n {{action.displayName}}\n </button>\n </mat-menu>\n\n <div\n *ngIf=\"data.baseData.allowCreate\"\n [class.col-lg-2]=\"data.baseData.multiSelectActions.length\"\n [class.col-lg-4]=\"!data.baseData.multiSelectActions.length\"\n [class.col-md-3]=\"data.baseData.multiSelectActions.length\"\n [class.col-md-6]=\"!data.baseData.multiSelectActions.length\"\n [class.col-sm-6]=\"data.baseData.multiSelectActions.length\"\n [class.col-sm-12]=\"!data.baseData.multiSelectActions.length\"\n >\n <button class=\"create-button\" (click)=\"createEntity()\" mat-raised-button>\n {{data.baseData.createButtonLabel}}\n </button>\n </div>\n</div>\n\n<div class=\"mat-elevation-z8\">\n <mat-table *ngIf=\"dataSource\" [dataSource]=\"dataSource\" matSort>\n <!-- select Column -->\n <ng-container matColumnDef=\"select\">\n <mat-header-cell *matHeaderCellDef>\n <mat-checkbox (change)=\"$event ? masterToggle() : null\" [checked]=\"selection.hasValue() && isAllSelected()\" [indeterminate]=\"selection.hasValue() && !isAllSelected()\"> </mat-checkbox>\n </mat-header-cell>\n <mat-cell *matCellDef=\"let module\" class=\"module\">\n <mat-checkbox (click)=\"$event.stopPropagation()\" (change)=\"$event ? selection.toggle(module) : null\" [checked]=\"selection.isSelected(module)\"> </mat-checkbox>\n </mat-cell>\n </ng-container>\n\n <ng-container *ngFor=\"let dCol of data.baseData.displayColumns\" [matColumnDef]=\"dCol.displayName\">\n <mat-header-cell *matHeaderCellDef mat-sort-header>\n {{dCol.displayName}}\n </mat-header-cell>\n <mat-cell class=\"entity\" [class.enabled]=\"data.baseData.allowEdit(entity)\" (click)=\"editEntity(entity)\" *matCellDef=\"let entity\">\n {{dCol.value(entity)}}\n </mat-cell>\n </ng-container>\n\n <mat-header-row *matHeaderRowDef=\"displayedColumns\"></mat-header-row>\n <mat-row *matRowDef=\"let row; columns: displayedColumns\"></mat-row>\n </mat-table>\n\n <mat-paginator *ngIf=\"dataSource\" id=\"paginator\" [length]=\"dataSource.filteredData.length\" [pageIndex]=\"0\" [pageSize]=\"10\" [pageSizeOptions]=\"[5, 10, 25, 50]\"> </mat-paginator>\n</div>\n", styles: [".title{text-align:center}button{width:100%}.mat-column-select{flex:0 0 75px}.enabled:hover{cursor:pointer}@media (max-width: 767px){.actions-button,.create-button{margin-bottom:15px}}\n"] }]
1822
1757
  }], ctorParameters: function () { return [{ type: i1.MatDialog }, { type: i0.Injector }]; }, propDecorators: { tableData: [{
1823
1758
  type: Input
1824
1759
  }], paginator: [{
@@ -1832,61 +1767,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
1832
1767
  args: ['filter', { static: true }]
1833
1768
  }] } });
1834
1769
 
1835
- class NgxMatEntityTableModule {
1770
+ class NgxMatEntityCreateDialogModule {
1836
1771
  }
1837
- NgxMatEntityTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1838
- NgxMatEntityTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, declarations: [NgxMatEntityTableComponent], imports: [CommonModule,
1839
- MatInputModule,
1772
+ NgxMatEntityCreateDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1773
+ NgxMatEntityCreateDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, declarations: [NgxMatEntityCreateDialogComponent], imports: [CommonModule,
1774
+ NgxMatEntityInputModule,
1775
+ MatDialogModule,
1840
1776
  FormsModule,
1841
- MatFormFieldModule,
1842
- MatCheckboxModule,
1843
- MatTableModule,
1844
- MatPaginatorModule,
1845
- MatButtonModule,
1846
- MatMenuModule,
1847
- MatDialogModule], exports: [NgxMatEntityTableComponent] });
1848
- NgxMatEntityTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, imports: [[
1777
+ MatButtonModule], exports: [NgxMatEntityCreateDialogComponent] });
1778
+ NgxMatEntityCreateDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, imports: [[
1849
1779
  CommonModule,
1850
- MatInputModule,
1780
+ NgxMatEntityInputModule,
1781
+ MatDialogModule,
1851
1782
  FormsModule,
1852
- MatFormFieldModule,
1853
- MatCheckboxModule,
1854
- MatTableModule,
1855
- MatPaginatorModule,
1856
- MatButtonModule,
1857
- MatMenuModule,
1858
- MatDialogModule
1783
+ MatButtonModule
1859
1784
  ]] });
1860
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, decorators: [{
1785
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, decorators: [{
1861
1786
  type: NgModule,
1862
1787
  args: [{
1863
- declarations: [NgxMatEntityTableComponent],
1788
+ declarations: [NgxMatEntityCreateDialogComponent],
1864
1789
  imports: [
1865
1790
  CommonModule,
1866
- MatInputModule,
1791
+ NgxMatEntityInputModule,
1792
+ MatDialogModule,
1867
1793
  FormsModule,
1868
- MatFormFieldModule,
1869
- MatCheckboxModule,
1870
- MatTableModule,
1871
- MatPaginatorModule,
1872
- MatButtonModule,
1873
- MatMenuModule,
1874
- MatDialogModule
1794
+ MatButtonModule
1875
1795
  ],
1876
- exports: [NgxMatEntityTableComponent]
1877
- }]
1878
- }] });
1879
-
1880
- class NgxMatEntityCreateDialogModule {
1881
- }
1882
- NgxMatEntityCreateDialogModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1883
- NgxMatEntityCreateDialogModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, declarations: [NgxMatEntityCreateDialogComponent], imports: [CommonModule, NgxMatEntityInputModule, MatDialogModule, FormsModule, MatButtonModule], exports: [NgxMatEntityCreateDialogComponent] });
1884
- NgxMatEntityCreateDialogModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, imports: [[CommonModule, NgxMatEntityInputModule, MatDialogModule, FormsModule, MatButtonModule]] });
1885
- i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityCreateDialogModule, decorators: [{
1886
- type: NgModule,
1887
- args: [{
1888
- declarations: [NgxMatEntityCreateDialogComponent],
1889
- imports: [CommonModule, NgxMatEntityInputModule, MatDialogModule, FormsModule, MatButtonModule],
1890
1796
  exports: [NgxMatEntityCreateDialogComponent]
1891
1797
  }]
1892
1798
  }] });
@@ -1924,8 +1830,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImpo
1924
1830
  }]
1925
1831
  }] });
1926
1832
 
1833
+ class NgxMatEntityTableModule {
1834
+ }
1835
+ NgxMatEntityTableModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
1836
+ NgxMatEntityTableModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, declarations: [NgxMatEntityTableComponent], imports: [CommonModule,
1837
+ MatInputModule,
1838
+ FormsModule,
1839
+ MatFormFieldModule,
1840
+ MatCheckboxModule,
1841
+ MatTableModule,
1842
+ MatPaginatorModule,
1843
+ MatButtonModule,
1844
+ MatMenuModule,
1845
+ MatDialogModule,
1846
+ NgxMatEntityCreateDialogModule,
1847
+ NgxMatEntityEditDialogModule], exports: [NgxMatEntityTableComponent] });
1848
+ NgxMatEntityTableModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, imports: [[
1849
+ CommonModule,
1850
+ MatInputModule,
1851
+ FormsModule,
1852
+ MatFormFieldModule,
1853
+ MatCheckboxModule,
1854
+ MatTableModule,
1855
+ MatPaginatorModule,
1856
+ MatButtonModule,
1857
+ MatMenuModule,
1858
+ MatDialogModule,
1859
+ NgxMatEntityCreateDialogModule,
1860
+ NgxMatEntityEditDialogModule,
1861
+ ]] });
1862
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.11", ngImport: i0, type: NgxMatEntityTableModule, decorators: [{
1863
+ type: NgModule,
1864
+ args: [{
1865
+ declarations: [NgxMatEntityTableComponent],
1866
+ imports: [
1867
+ CommonModule,
1868
+ MatInputModule,
1869
+ FormsModule,
1870
+ MatFormFieldModule,
1871
+ MatCheckboxModule,
1872
+ MatTableModule,
1873
+ MatPaginatorModule,
1874
+ MatButtonModule,
1875
+ MatMenuModule,
1876
+ MatDialogModule,
1877
+ NgxMatEntityCreateDialogModule,
1878
+ NgxMatEntityEditDialogModule,
1879
+ ],
1880
+ exports: [NgxMatEntityTableComponent]
1881
+ }]
1882
+ }] });
1883
+
1884
+ /**
1885
+ * The internal EntityArrayDecoratorConfig. Sets default values.
1886
+ */
1887
+ class EntityArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
1888
+ constructor(data) {
1889
+ super(data);
1890
+ this.createInline = data.createInline != undefined ? data.createInline : true;
1891
+ this.displayStyle = data.displayStyle;
1892
+ this.itemType = data.itemType;
1893
+ this.EntityClass = data.EntityClass;
1894
+ this.displayColumns = data.displayColumns;
1895
+ this.createInline = data.createInline != undefined ? data.createInline : true;
1896
+ this.missingErrorMessage = data.missingErrorMessage ? data.missingErrorMessage : 'Needs to contain at least one value';
1897
+ this.defaultWidths = data.defaultWidths ? data.defaultWidths : [12, 12, 12];
1898
+ this.addButtonLabel = data.addButtonLabel ? data.addButtonLabel : 'Add';
1899
+ this.removeButtonLabel = data.removeButtonLabel ? data.removeButtonLabel : 'Remove';
1900
+ }
1901
+ }
1902
+ /**
1903
+ * The internal StringChipsArrayDecoratorConfig. Sets default values.
1904
+ */
1905
+ class StringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
1906
+ constructor(data) {
1907
+ super(data);
1908
+ this.deleteIcon = data.deleteIcon ? data.deleteIcon : 'fas fa-circle-minus';
1909
+ this.displayStyle = data.displayStyle;
1910
+ this.itemType = data.itemType;
1911
+ this.maxLength = data.maxLength;
1912
+ this.minLength = data.minLength;
1913
+ this.regex = data.regex;
1914
+ this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 12, 12];
1915
+ }
1916
+ }
1917
+ /**
1918
+ * The internal AutocompleteStringChipsArrayDecoratorConfig. Sets default values.
1919
+ */
1920
+ class AutocompleteStringChipsArrayDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
1921
+ constructor(data) {
1922
+ super(data);
1923
+ this.autocompleteValues = data.autocompleteValues;
1924
+ this.deleteIcon = data.deleteIcon ? data.deleteIcon : 'fas fa-circle-minus';
1925
+ this.displayStyle = data.displayStyle;
1926
+ this.itemType = data.itemType;
1927
+ this.maxLength = data.maxLength;
1928
+ this.minLength = data.minLength;
1929
+ this.regex = data.regex;
1930
+ this.defaultWidths = data.defaultWidths ? data.defaultWidths : [6, 12, 12];
1931
+ }
1932
+ }
1933
+
1927
1934
  /**
1928
- * Decorator for setting and getting array propery metadata.
1935
+ * Decorator for setting and getting array property metadata.
1929
1936
  *
1930
1937
  * @param metadata - The metadata of the array property.
1931
1938
  * @returns The method that defines the metadata.
@@ -1957,6 +1964,9 @@ class PropertyDecoratorConfig {
1957
1964
  class ArrayDecoratorConfig extends PropertyDecoratorConfig {
1958
1965
  }
1959
1966
 
1967
+ /**
1968
+ * The internal DropdownBooleanDecoratorConfig. Sets default values.
1969
+ */
1960
1970
  class DropdownBooleanDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
1961
1971
  constructor(data) {
1962
1972
  super(data);
@@ -1965,21 +1975,29 @@ class DropdownBooleanDecoratorConfigInternal extends PropertyDecoratorConfigInte
1965
1975
  this.dropdownFalse = data.dropdownFalse;
1966
1976
  }
1967
1977
  }
1978
+ /**
1979
+ * The internal CheckboxBooleanDecoratorConfig. Sets default values.
1980
+ */
1968
1981
  class CheckboxBooleanDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
1969
1982
  constructor(data) {
1970
1983
  super(data);
1971
1984
  this.displayStyle = data.displayStyle;
1985
+ this.required = data.required === undefined ? false : data.required;
1972
1986
  }
1973
1987
  }
1988
+ /**
1989
+ * The internal ToggleBooleanDecoratorConfig. Sets default values.
1990
+ */
1974
1991
  class ToggleBooleanDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
1975
1992
  constructor(data) {
1976
1993
  super(data);
1977
1994
  this.displayStyle = data.displayStyle;
1995
+ this.required = data.required === undefined ? false : data.required;
1978
1996
  }
1979
1997
  }
1980
1998
 
1981
1999
  /**
1982
- * Decorator for setting and getting boolean propery metadata.
2000
+ * Decorator for setting and getting boolean property metadata.
1983
2001
  *
1984
2002
  * @param metadata - The metadata of the boolean property.
1985
2003
  * @returns The method that defines the metadata.
@@ -2002,6 +2020,9 @@ function boolean(metadata) {
2002
2020
  class BooleanDecoratorConfig extends PropertyDecoratorConfig {
2003
2021
  }
2004
2022
 
2023
+ /**
2024
+ * The internal DefaultNumberDecoratorConfig. Sets default values.
2025
+ */
2005
2026
  class DefaultNumberDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
2006
2027
  constructor(data) {
2007
2028
  super(data);
@@ -2010,6 +2031,9 @@ class DefaultNumberDecoratorConfigInternal extends PropertyDecoratorConfigIntern
2010
2031
  this.min = data.min;
2011
2032
  }
2012
2033
  }
2034
+ /**
2035
+ * The internal DropdownNumberDecoratorConfig. Sets default values.
2036
+ */
2013
2037
  class DropdownNumberDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
2014
2038
  constructor(data) {
2015
2039
  super(data);
@@ -2019,7 +2043,7 @@ class DropdownNumberDecoratorConfigInternal extends PropertyDecoratorConfigInter
2019
2043
  }
2020
2044
 
2021
2045
  /**
2022
- * Decorator for setting and getting string propery metadata.
2046
+ * Decorator for setting and getting string property metadata.
2023
2047
  *
2024
2048
  * @param metadata - The metadata of the string property.
2025
2049
  * @returns The method that defines the metadata.
@@ -2039,6 +2063,9 @@ function number(metadata) {
2039
2063
  class NumberDecoratorConfig extends PropertyDecoratorConfig {
2040
2064
  }
2041
2065
 
2066
+ /**
2067
+ * The internal DefaultObjectDecoratorConfig. Sets default values.
2068
+ */
2042
2069
  class DefaultObjectDecoratorConfigInternal extends PropertyDecoratorConfigInternal {
2043
2070
  constructor(data) {
2044
2071
  super(data);
@@ -2048,7 +2075,7 @@ class DefaultObjectDecoratorConfigInternal extends PropertyDecoratorConfigIntern
2048
2075
  }
2049
2076
 
2050
2077
  /**
2051
- * Decorator for setting and getting object propery metadata.
2078
+ * Decorator for setting and getting object property metadata.
2052
2079
  *
2053
2080
  * @param metadata - The metadata of the object property.
2054
2081
  * @returns The method that defines the metadata.