mis-crystal-design-system 14.0.44 → 14.0.46

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 (10) hide show
  1. package/dynamic-form/dynamic-form.component.d.ts +4 -1
  2. package/dynamic-form/dynamic-form.namespace.d.ts +1 -0
  3. package/esm2020/dynamic-form/dynamic-form.component.mjs +120 -71
  4. package/esm2020/dynamic-form/dynamic-form.namespace.mjs +1 -1
  5. package/fesm2015/mis-crystal-design-system-dynamic-form.mjs +122 -70
  6. package/fesm2015/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
  7. package/fesm2020/mis-crystal-design-system-dynamic-form.mjs +119 -70
  8. package/fesm2020/mis-crystal-design-system-dynamic-form.mjs.map +1 -1
  9. package/package.json +1 -1
  10. package/table/filter/filter.component.d.ts +1 -1
package/fesm2020/mis-crystal-design-system-dynamic-form.mjs CHANGED
@@ -66,7 +66,8 @@ function DynamicFormComponent_ng_template_3_div_0_ng_container_5_Template(rf, ct
66
66
  const _r3 = i0.ɵɵreference(6);
67
67
  i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
68
68
  } }
69
- const _c3 = function (a0) { return { "border": a0 }; };
69
+ const _c3 = function (a0) { return { "border-bottom": a0 }; };
70
+ const _c4 = function (a0) { return { "border": a0 }; };
70
71
  function DynamicFormComponent_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1) {
71
72
  const _r27 = i0.ɵɵgetCurrentView();
72
73
  i0.ɵɵelementStart(0, "div", 12)(1, "p", 13);
@@ -80,12 +81,15 @@ function DynamicFormComponent_ng_template_3_div_0_Template(rf, ctx) { if (rf & 1
80
81
  i0.ɵɵelementEnd();
81
82
  } if (rf & 2) {
82
83
  const ctx_r28 = i0.ɵɵnextContext();
84
+ const formgroup_r14 = ctx_r28.formGroup;
83
85
  const field_r12 = ctx_r28.$implicit;
84
86
  const control_r13 = ctx_r28.control;
87
+ const ctx_r15 = i0.ɵɵnextContext();
88
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r15.removeSepratorForSubFields ? "none" : ""));
85
89
  i0.ɵɵadvance(2);
86
90
  i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
87
91
  i0.ɵɵadvance(2);
88
- i0.ɵɵproperty("type", field_r12.fieldInputType)("formControl", control_r13)("ngStyle", i0.ɵɵpureFunction1(7, _c3, control_r13.touched && control_r13.errors ? "1px solid #B00020" : ""))("placeholder", field_r12.placeholderText ? field_r12.placeholderText : "Input Text")("min", field_r12.fieldInputType === "number" ? 0 : "");
92
+ i0.ɵɵproperty("type", field_r12.fieldInputType)("formControl", control_r13)("ngStyle", i0.ɵɵpureFunction1(10, _c4, control_r13.touched && control_r13.errors ? "1px solid #B00020" : ""))("placeholder", field_r12.placeholderText ? field_r12.placeholderText : "Input Text")("min", field_r12.fieldInputType === "number" ? 0 : "");
89
93
  i0.ɵɵadvance(1);
90
94
  i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
91
95
  } }
@@ -110,12 +114,15 @@ function DynamicFormComponent_ng_template_3_div_1_Template(rf, ctx) { if (rf & 1
110
114
  i0.ɵɵelementEnd();
111
115
  } if (rf & 2) {
112
116
  const ctx_r34 = i0.ɵɵnextContext();
117
+ const formgroup_r14 = ctx_r34.formGroup;
113
118
  const field_r12 = ctx_r34.$implicit;
114
119
  const control_r13 = ctx_r34.control;
120
+ const ctx_r16 = i0.ɵɵnextContext();
121
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(6, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r16.removeSepratorForSubFields ? "none" : ""));
115
122
  i0.ɵɵadvance(2);
116
123
  i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
117
124
  i0.ɵɵadvance(2);
118
- i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(5, _c3, control_r13.touched && control_r13.errors ? "1px solid #B00020" : ""))("placeholder", field_r12.placeholderText ? field_r12.placeholderText : "Input Text")("formControl", control_r13);
125
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c4, control_r13.touched && control_r13.errors ? "1px solid #B00020" : ""))("placeholder", field_r12.placeholderText ? field_r12.placeholderText : "Input Text")("formControl", control_r13);
119
126
  i0.ɵɵadvance(1);
120
127
  i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
121
128
  } }
@@ -150,9 +157,11 @@ function DynamicFormComponent_ng_template_3_div_2_Template(rf, ctx) { if (rf & 1
150
157
  i0.ɵɵelementEnd();
151
158
  } if (rf & 2) {
152
159
  const ctx_r44 = i0.ɵɵnextContext();
160
+ const formgroup_r14 = ctx_r44.formGroup;
153
161
  const field_r12 = ctx_r44.$implicit;
154
162
  const control_r13 = ctx_r44.control;
155
163
  const ctx_r17 = i0.ɵɵnextContext();
164
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(8, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r17.removeSepratorForSubFields ? "none" : ""));
156
165
  i0.ɵɵadvance(2);
157
166
  i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
158
167
  i0.ɵɵadvance(2);
@@ -182,8 +191,11 @@ function DynamicFormComponent_ng_template_3_div_3_Template(rf, ctx) { if (rf & 1
182
191
  i0.ɵɵelementEnd();
183
192
  } if (rf & 2) {
184
193
  const ctx_r50 = i0.ɵɵnextContext();
194
+ const formgroup_r14 = ctx_r50.formGroup;
185
195
  const field_r12 = ctx_r50.$implicit;
186
196
  const control_r13 = ctx_r50.control;
197
+ const ctx_r18 = i0.ɵɵnextContext();
198
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r18.removeSepratorForSubFields ? "none" : ""));
187
199
  i0.ɵɵadvance(2);
188
200
  i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
189
201
  i0.ɵɵadvance(1);
@@ -191,7 +203,16 @@ function DynamicFormComponent_ng_template_3_div_3_Template(rf, ctx) { if (rf & 1
191
203
  i0.ɵɵadvance(1);
192
204
  i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
193
205
  } }
194
- function DynamicFormComponent_ng_template_3_div_4_ng_container_4_Template(rf, ctx) { if (rf & 1) {
206
+ function DynamicFormComponent_ng_template_3_div_4_img_5_Template(rf, ctx) { if (rf & 1) {
207
+ const _r55 = i0.ɵɵgetCurrentView();
208
+ i0.ɵɵelementStart(0, "img", 29);
209
+ i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_4_img_5_Template_img_click_0_listener() { i0.ɵɵrestoreView(_r55); const field_r12 = i0.ɵɵnextContext(2).$implicit; const ctx_r53 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r53.fieldRemoved.emit(field_r12)); });
210
+ i0.ɵɵelementEnd();
211
+ } if (rf & 2) {
212
+ const ctx_r51 = i0.ɵɵnextContext(3);
213
+ i0.ɵɵproperty("src", ctx_r51.removeIconUrl, i0.ɵɵsanitizeUrl);
214
+ } }
215
+ function DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template(rf, ctx) { if (rf & 1) {
195
216
  i0.ɵɵelementContainer(0, 6);
196
217
  } if (rf & 2) {
197
218
  const control_r13 = i0.ɵɵnextContext(2).control;
@@ -199,51 +220,61 @@ function DynamicFormComponent_ng_template_3_div_4_ng_container_4_Template(rf, ct
199
220
  const _r3 = i0.ɵɵreference(6);
200
221
  i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
201
222
  } }
223
+ const _c5 = function (a0) { return { "removeable-container": a0 }; };
202
224
  function DynamicFormComponent_ng_template_3_div_4_Template(rf, ctx) { if (rf & 1) {
203
- const _r55 = i0.ɵɵgetCurrentView();
225
+ const _r59 = i0.ɵɵgetCurrentView();
204
226
  i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
205
227
  i0.ɵɵtext(2);
206
228
  i0.ɵɵelementEnd();
207
- i0.ɵɵelementStart(3, "mis-dropdown", 26);
208
- i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_4_Template_mis_dropdown_onChange_3_listener($event) { i0.ɵɵrestoreView(_r55); const ctx_r54 = i0.ɵɵnextContext(); const field_r12 = ctx_r54.$implicit; const control_r13 = ctx_r54.control; const formgroup_r14 = ctx_r54.formGroup; const ctx_r53 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r53.updateSelectedValueForSingleSelect(field_r12, control_r13, formgroup_r14, $event)); });
229
+ i0.ɵɵelementStart(3, "div", 26)(4, "mis-dropdown", 27);
230
+ i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_4_Template_mis_dropdown_onChange_4_listener($event) { i0.ɵɵrestoreView(_r59); const ctx_r58 = i0.ɵɵnextContext(); const field_r12 = ctx_r58.$implicit; const control_r13 = ctx_r58.control; const formgroup_r14 = ctx_r58.formGroup; const ctx_r57 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r57.updateSelectedValueForSingleSelect(field_r12, control_r13, formgroup_r14, $event)); });
231
+ i0.ɵɵelementEnd();
232
+ i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_4_img_5_Template, 1, 1, "img", 28);
209
233
  i0.ɵɵelementEnd();
210
- i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_ng_container_4_Template, 1, 4, "ng-container", 16);
234
+ i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_4_ng_container_6_Template, 1, 4, "ng-container", 16);
211
235
  i0.ɵɵelementEnd();
212
236
  } if (rf & 2) {
213
- const ctx_r56 = i0.ɵɵnextContext();
214
- const field_r12 = ctx_r56.$implicit;
215
- const control_r13 = ctx_r56.control;
237
+ const ctx_r60 = i0.ɵɵnextContext();
238
+ const formgroup_r14 = ctx_r60.formGroup;
239
+ const field_r12 = ctx_r60.$implicit;
240
+ const control_r13 = ctx_r60.control;
241
+ const ctx_r19 = i0.ɵɵnextContext();
242
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(9, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r19.removeSepratorForSubFields ? "none" : ""));
216
243
  i0.ɵɵadvance(2);
217
244
  i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
218
245
  i0.ɵɵadvance(1);
246
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(11, _c5, field_r12 == null ? null : field_r12.isRemoveable));
247
+ i0.ɵɵadvance(1);
219
248
  i0.ɵɵproperty("searchEnabled", false)("width", "140px")("data", field_r12.itemsList)("selectedItem", control_r13.value);
220
249
  i0.ɵɵadvance(1);
250
+ i0.ɵɵproperty("ngIf", field_r12.isRemoveable && ctx_r19.removeIconUrl);
251
+ i0.ɵɵadvance(1);
221
252
  i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
222
253
  } }
223
254
  function DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template(rf, ctx) { if (rf & 1) {
224
- i0.ɵɵelement(0, "img", 31);
255
+ i0.ɵɵelement(0, "img", 34);
225
256
  } if (rf & 2) {
226
- const ctx_r60 = i0.ɵɵnextContext(4);
227
- i0.ɵɵproperty("src", ctx_r60.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
257
+ const ctx_r64 = i0.ɵɵnextContext(4);
258
+ i0.ɵɵproperty("src", ctx_r64.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
228
259
  } }
229
- const _c4 = function (a0) { return { "checkbox-active": a0 }; };
260
+ const _c6 = function (a0) { return { "checkbox-active": a0 }; };
230
261
  function DynamicFormComponent_ng_template_3_div_5_div_5_Template(rf, ctx) { if (rf & 1) {
231
- const _r63 = i0.ɵɵgetCurrentView();
232
- i0.ɵɵelementStart(0, "div", 29);
233
- i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_5_div_5_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r63); const item_r59 = restoredCtx.$implicit; const ctx_r62 = i0.ɵɵnextContext(2); const field_r12 = ctx_r62.$implicit; const control_r13 = ctx_r62.control; const formgroup_r14 = ctx_r62.formGroup; const ctx_r61 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r61.updateSelectedValueForSingleSelect(field_r12, control_r13, formgroup_r14, item_r59)); });
234
- i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template, 1, 1, "img", 30);
262
+ const _r67 = i0.ɵɵgetCurrentView();
263
+ i0.ɵɵelementStart(0, "div", 32);
264
+ i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_5_div_5_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r67); const item_r63 = restoredCtx.$implicit; const ctx_r66 = i0.ɵɵnextContext(2); const field_r12 = ctx_r66.$implicit; const control_r13 = ctx_r66.control; const formgroup_r14 = ctx_r66.formGroup; const ctx_r65 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r65.updateSelectedValueForSingleSelect(field_r12, control_r13, formgroup_r14, item_r63)); });
265
+ i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_5_div_5_img_1_Template, 1, 1, "img", 33);
235
266
  i0.ɵɵelementStart(2, "p", 19);
236
267
  i0.ɵɵtext(3);
237
268
  i0.ɵɵelementEnd()();
238
269
  } if (rf & 2) {
239
- const item_r59 = ctx.$implicit;
270
+ const item_r63 = ctx.$implicit;
240
271
  const control_r13 = i0.ɵɵnextContext(2).control;
241
- const ctx_r57 = i0.ɵɵnextContext();
242
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c4, item_r59.label === (control_r13.value == null ? null : control_r13.value.label)));
272
+ const ctx_r61 = i0.ɵɵnextContext();
273
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, item_r63.label === (control_r13.value == null ? null : control_r13.value.label)));
243
274
  i0.ɵɵadvance(1);
244
- i0.ɵɵproperty("ngIf", item_r59.label === (control_r13.value == null ? null : control_r13.value.label) && ctx_r57.activeBtnIconUrl);
275
+ i0.ɵɵproperty("ngIf", item_r63.label === (control_r13.value == null ? null : control_r13.value.label) && ctx_r61.activeBtnIconUrl);
245
276
  i0.ɵɵadvance(2);
246
- i0.ɵɵtextInterpolate(item_r59.label);
277
+ i0.ɵɵtextInterpolate(item_r63.label);
247
278
  } }
248
279
  function DynamicFormComponent_ng_template_3_div_5_ng_container_6_Template(rf, ctx) { if (rf & 1) {
249
280
  i0.ɵɵelementContainer(0, 6);
@@ -258,15 +289,18 @@ function DynamicFormComponent_ng_template_3_div_5_Template(rf, ctx) { if (rf & 1
258
289
  i0.ɵɵtext(2);
259
290
  i0.ɵɵelementEnd();
260
291
  i0.ɵɵelement(3, "div", 14);
261
- i0.ɵɵelementStart(4, "div", 27);
262
- i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_div_5_Template, 4, 5, "div", 28);
292
+ i0.ɵɵelementStart(4, "div", 30);
293
+ i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_div_5_Template, 4, 5, "div", 31);
263
294
  i0.ɵɵelementEnd();
264
295
  i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_5_ng_container_6_Template, 1, 4, "ng-container", 16);
265
296
  i0.ɵɵelementEnd();
266
297
  } if (rf & 2) {
267
- const ctx_r66 = i0.ɵɵnextContext();
268
- const field_r12 = ctx_r66.$implicit;
269
- const control_r13 = ctx_r66.control;
298
+ const ctx_r70 = i0.ɵɵnextContext();
299
+ const formgroup_r14 = ctx_r70.formGroup;
300
+ const field_r12 = ctx_r70.$implicit;
301
+ const control_r13 = ctx_r70.control;
302
+ const ctx_r20 = i0.ɵɵnextContext();
303
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r20.removeSepratorForSubFields ? "none" : ""));
270
304
  i0.ɵɵadvance(2);
271
305
  i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
272
306
  i0.ɵɵadvance(3);
@@ -275,28 +309,28 @@ function DynamicFormComponent_ng_template_3_div_5_Template(rf, ctx) { if (rf & 1
275
309
  i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
276
310
  } }
277
311
  function DynamicFormComponent_ng_template_3_div_6_div_5_img_1_Template(rf, ctx) { if (rf & 1) {
278
- i0.ɵɵelement(0, "img", 31);
312
+ i0.ɵɵelement(0, "img", 34);
279
313
  } if (rf & 2) {
280
- const ctx_r70 = i0.ɵɵnextContext(4);
281
- i0.ɵɵproperty("src", ctx_r70.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
314
+ const ctx_r74 = i0.ɵɵnextContext(4);
315
+ i0.ɵɵproperty("src", ctx_r74.activeBtnIconUrl, i0.ɵɵsanitizeUrl);
282
316
  } }
283
317
  function DynamicFormComponent_ng_template_3_div_6_div_5_Template(rf, ctx) { if (rf & 1) {
284
- const _r73 = i0.ɵɵgetCurrentView();
285
- i0.ɵɵelementStart(0, "div", 29);
286
- i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_6_div_5_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r73); const item_r69 = restoredCtx.$implicit; const ctx_r72 = i0.ɵɵnextContext(2); const field_r12 = ctx_r72.$implicit; const control_r13 = ctx_r72.control; const formgroup_r14 = ctx_r72.formGroup; const ctx_r71 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r71.updateSelectedValueForMultiSelect(field_r12, control_r13, formgroup_r14, [item_r69])); });
287
- i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_6_div_5_img_1_Template, 1, 1, "img", 30);
318
+ const _r77 = i0.ɵɵgetCurrentView();
319
+ i0.ɵɵelementStart(0, "div", 32);
320
+ i0.ɵɵlistener("click", function DynamicFormComponent_ng_template_3_div_6_div_5_Template_div_click_0_listener() { const restoredCtx = i0.ɵɵrestoreView(_r77); const item_r73 = restoredCtx.$implicit; const ctx_r76 = i0.ɵɵnextContext(2); const field_r12 = ctx_r76.$implicit; const control_r13 = ctx_r76.control; const formgroup_r14 = ctx_r76.formGroup; const ctx_r75 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r75.updateSelectedValueForMultiSelect(field_r12, control_r13, formgroup_r14, [item_r73])); });
321
+ i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_6_div_5_img_1_Template, 1, 1, "img", 33);
288
322
  i0.ɵɵelementStart(2, "p", 19);
289
323
  i0.ɵɵtext(3);
290
324
  i0.ɵɵelementEnd()();
291
325
  } if (rf & 2) {
292
- const item_r69 = ctx.$implicit;
326
+ const item_r73 = ctx.$implicit;
293
327
  const control_r13 = i0.ɵɵnextContext(2).control;
294
- const ctx_r67 = i0.ɵɵnextContext();
295
- i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c4, ctx_r67.isCheckBoxSelected(item_r69.label, control_r13.value)));
328
+ const ctx_r71 = i0.ɵɵnextContext();
329
+ i0.ɵɵproperty("ngClass", i0.ɵɵpureFunction1(3, _c6, ctx_r71.isCheckBoxSelected(item_r73.label, control_r13.value)));
296
330
  i0.ɵɵadvance(1);
297
- i0.ɵɵproperty("ngIf", ctx_r67.isCheckBoxSelected(item_r69.label, control_r13.value) && ctx_r67.activeBtnIconUrl);
331
+ i0.ɵɵproperty("ngIf", ctx_r71.isCheckBoxSelected(item_r73.label, control_r13.value) && ctx_r71.activeBtnIconUrl);
298
332
  i0.ɵɵadvance(2);
299
- i0.ɵɵtextInterpolate(item_r69.label);
333
+ i0.ɵɵtextInterpolate(item_r73.label);
300
334
  } }
301
335
  function DynamicFormComponent_ng_template_3_div_6_ng_container_6_Template(rf, ctx) { if (rf & 1) {
302
336
  i0.ɵɵelementContainer(0, 6);
@@ -311,15 +345,18 @@ function DynamicFormComponent_ng_template_3_div_6_Template(rf, ctx) { if (rf & 1
311
345
  i0.ɵɵtext(2);
312
346
  i0.ɵɵelementEnd();
313
347
  i0.ɵɵelement(3, "div", 14);
314
- i0.ɵɵelementStart(4, "div", 27);
315
- i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_6_div_5_Template, 4, 5, "div", 28);
348
+ i0.ɵɵelementStart(4, "div", 30);
349
+ i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_6_div_5_Template, 4, 5, "div", 31);
316
350
  i0.ɵɵelementEnd();
317
351
  i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_ng_container_6_Template, 1, 4, "ng-container", 16);
318
352
  i0.ɵɵelementEnd();
319
353
  } if (rf & 2) {
320
- const ctx_r76 = i0.ɵɵnextContext();
321
- const field_r12 = ctx_r76.$implicit;
322
- const control_r13 = ctx_r76.control;
354
+ const ctx_r80 = i0.ɵɵnextContext();
355
+ const formgroup_r14 = ctx_r80.formGroup;
356
+ const field_r12 = ctx_r80.$implicit;
357
+ const control_r13 = ctx_r80.control;
358
+ const ctx_r21 = i0.ɵɵnextContext();
359
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(4, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r21.removeSepratorForSubFields ? "none" : ""));
323
360
  i0.ɵɵadvance(2);
324
361
  i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
325
362
  i0.ɵɵadvance(3);
@@ -336,19 +373,22 @@ function DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template(rf, ct
336
373
  i0.ɵɵproperty("ngTemplateOutlet", _r3)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c2, control_r13.errors));
337
374
  } }
338
375
  function DynamicFormComponent_ng_template_3_div_7_Template(rf, ctx) { if (rf & 1) {
339
- const _r81 = i0.ɵɵgetCurrentView();
376
+ const _r85 = i0.ɵɵgetCurrentView();
340
377
  i0.ɵɵelementStart(0, "div", 18)(1, "p", 19);
341
378
  i0.ɵɵtext(2);
342
379
  i0.ɵɵelementEnd();
343
- i0.ɵɵelementStart(3, "mis-multi-select-dropdown", 32);
344
- i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_7_Template_mis_multi_select_dropdown_onChange_3_listener($event) { i0.ɵɵrestoreView(_r81); const ctx_r80 = i0.ɵɵnextContext(); const field_r12 = ctx_r80.$implicit; const control_r13 = ctx_r80.control; const formgroup_r14 = ctx_r80.formGroup; const ctx_r79 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r79.updateSelectedValueForMultiSelect(field_r12, control_r13, formgroup_r14, $event)); });
380
+ i0.ɵɵelementStart(3, "mis-multi-select-dropdown", 35);
381
+ i0.ɵɵlistener("onChange", function DynamicFormComponent_ng_template_3_div_7_Template_mis_multi_select_dropdown_onChange_3_listener($event) { i0.ɵɵrestoreView(_r85); const ctx_r84 = i0.ɵɵnextContext(); const field_r12 = ctx_r84.$implicit; const control_r13 = ctx_r84.control; const formgroup_r14 = ctx_r84.formGroup; const ctx_r83 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r83.updateSelectedValueForMultiSelect(field_r12, control_r13, formgroup_r14, $event)); });
345
382
  i0.ɵɵelementEnd();
346
383
  i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_7_ng_container_4_Template, 1, 4, "ng-container", 16);
347
384
  i0.ɵɵelementEnd();
348
385
  } if (rf & 2) {
349
- const ctx_r82 = i0.ɵɵnextContext();
350
- const field_r12 = ctx_r82.$implicit;
351
- const control_r13 = ctx_r82.control;
386
+ const ctx_r86 = i0.ɵɵnextContext();
387
+ const formgroup_r14 = ctx_r86.formGroup;
388
+ const field_r12 = ctx_r86.$implicit;
389
+ const control_r13 = ctx_r86.control;
390
+ const ctx_r22 = i0.ɵɵnextContext();
391
+ i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(10, _c3, (formgroup_r14 == null ? null : formgroup_r14.controls == null ? null : formgroup_r14.controls.subFields == null ? null : formgroup_r14.controls.subFields.controls == null ? null : formgroup_r14.controls.subFields.controls.length) && ctx_r22.removeSepratorForSubFields ? "none" : ""));
352
392
  i0.ɵɵadvance(2);
353
393
  i0.ɵɵtextInterpolate1(" ", field_r12.title, " ");
354
394
  i0.ɵɵadvance(1);
@@ -357,14 +397,14 @@ function DynamicFormComponent_ng_template_3_div_7_Template(rf, ctx) { if (rf & 1
357
397
  i0.ɵɵproperty("ngIf", control_r13.touched && control_r13.errors);
358
398
  } }
359
399
  function DynamicFormComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
360
- i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 6, 9, "div", 10);
361
- i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_1_Template, 6, 7, "div", 10);
362
- i0.ɵɵtemplate(2, DynamicFormComponent_ng_template_3_div_2_Template, 8, 7, "div", 11);
363
- i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_Template, 5, 3, "div", 11);
364
- i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_Template, 5, 6, "div", 11);
365
- i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_Template, 7, 3, "div", 10);
366
- i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_Template, 7, 3, "div", 10);
367
- i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_7_Template, 5, 9, "div", 11);
400
+ i0.ɵɵtemplate(0, DynamicFormComponent_ng_template_3_div_0_Template, 6, 12, "div", 10);
401
+ i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_3_div_1_Template, 6, 10, "div", 10);
402
+ i0.ɵɵtemplate(2, DynamicFormComponent_ng_template_3_div_2_Template, 8, 10, "div", 11);
403
+ i0.ɵɵtemplate(3, DynamicFormComponent_ng_template_3_div_3_Template, 5, 6, "div", 11);
404
+ i0.ɵɵtemplate(4, DynamicFormComponent_ng_template_3_div_4_Template, 7, 13, "div", 11);
405
+ i0.ɵɵtemplate(5, DynamicFormComponent_ng_template_3_div_5_Template, 7, 6, "div", 10);
406
+ i0.ɵɵtemplate(6, DynamicFormComponent_ng_template_3_div_6_Template, 7, 6, "div", 10);
407
+ i0.ɵɵtemplate(7, DynamicFormComponent_ng_template_3_div_7_Template, 5, 12, "div", 11);
368
408
  } if (rf & 2) {
369
409
  const field_r12 = ctx.$implicit;
370
410
  i0.ɵɵproperty("ngIf", field_r12.fieldType === "input" && (field_r12.fieldInputType === "text" || field_r12.fieldInputType === "number"));
@@ -385,25 +425,25 @@ function DynamicFormComponent_ng_template_3_Template(rf, ctx) { if (rf & 1) {
385
425
  } }
386
426
  function DynamicFormComponent_ng_template_5_ng_container_1_Template(rf, ctx) { if (rf & 1) {
387
427
  i0.ɵɵelementContainerStart(0);
388
- i0.ɵɵelementStart(1, "p", 34);
428
+ i0.ɵɵelementStart(1, "p", 37);
389
429
  i0.ɵɵtext(2);
390
430
  i0.ɵɵelementEnd();
391
- i0.ɵɵelement(3, "div", 35);
431
+ i0.ɵɵelement(3, "div", 38);
392
432
  i0.ɵɵelementContainerEnd();
393
433
  } if (rf & 2) {
394
- const error_r85 = ctx.$implicit;
434
+ const error_r89 = ctx.$implicit;
395
435
  i0.ɵɵadvance(2);
396
- i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r85.value, " ");
436
+ i0.ɵɵtextInterpolate1(" ", " \u2022 \u00A0" + error_r89.value, " ");
397
437
  } }
398
438
  function DynamicFormComponent_ng_template_5_Template(rf, ctx) { if (rf & 1) {
399
- i0.ɵɵelementStart(0, "div", 33);
439
+ i0.ɵɵelementStart(0, "div", 36);
400
440
  i0.ɵɵtemplate(1, DynamicFormComponent_ng_template_5_ng_container_1_Template, 4, 1, "ng-container", 9);
401
441
  i0.ɵɵpipe(2, "keyvalue");
402
442
  i0.ɵɵelementEnd();
403
443
  } if (rf & 2) {
404
- const errors_r83 = ctx.$implicit;
444
+ const errors_r87 = ctx.$implicit;
405
445
  i0.ɵɵadvance(1);
406
- i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r83));
446
+ i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(2, 1, errors_r87));
407
447
  } }
408
448
  class DynamicFormComponent {
409
449
  constructor() {
@@ -417,6 +457,8 @@ class DynamicFormComponent {
417
457
  // Need to deprecate these inputs and use constants.
418
458
  this.activeBtnIconUrl = "";
419
459
  this.calendarIconUrl = "";
460
+ this.removeIconUrl = "";
461
+ this.removeSepratorForSubFields = false;
420
462
  /**
421
463
  * formUpdated: Emits formValues Object whenever there is a change in the dynamic form.
422
464
  */
@@ -429,6 +471,7 @@ class DynamicFormComponent {
429
471
  * formInitialized: Emits dynamic form API on form initilization
430
472
  */
431
473
  this.formInitialized = new EventEmitter();
474
+ this.fieldRemoved = new EventEmitter();
432
475
  }
433
476
  ngOnInit() {
434
477
  // Building the form
@@ -635,7 +678,7 @@ class DynamicFormComponent {
635
678
  }
636
679
  }
637
680
  DynamicFormComponent.ɵfac = function DynamicFormComponent_Factory(t) { return new (t || DynamicFormComponent)(); };
638
- DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DynamicFormComponent, selectors: [["mis-dynamic-form"]], inputs: { formFields: "formFields", formValues: "formValues", activeBtnIconUrl: "activeBtnIconUrl", calendarIconUrl: "calendarIconUrl" }, outputs: { formUpdated: "formUpdated", formValid: "formValid", formInitialized: "formInitialized" }, decls: 7, vars: 2, consts: [[3, "formGroup"], ["formArrayName", "dynamicFields"], [3, "formGroupName", 4, "ngFor", "ngForOf"], ["dynamicField", ""], ["dynamicFieldErrors", ""], [3, "formGroupName"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "sub-dynamic-form", 4, "ngIf"], [1, "sub-dynamic-form"], [4, "ngFor", "ngForOf"], ["class", "dynamic-field multi-line-field-container", 4, "ngIf"], ["class", "dynamic-field single-line-field-container", 4, "ngIf"], [1, "dynamic-field", "multi-line-field-container"], [1, "h7", "field-title-sm"], [2, "flex-basis", "100%"], [1, "input-field", "ip-text", 3, "type", "formControl", "ngStyle", "placeholder", "min", "ngModelChange"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["type", "text", 1, "input-field", "ip-textarea", 3, "ngStyle", "placeholder", "formControl", "ngModelChange"], [1, "dynamic-field", "single-line-field-container"], [1, "h6"], [1, "date-picker-container"], ["readonly", "", "misTzDp", "", 1, "date-picker", 3, "dpConfig", "selectedDate", "offsetY", "value", "dateChange"], ["dp", ""], ["alt", "data-picker", "class", "date-picker-icon", 3, "src", "click", 4, "ngIf"], ["alt", "data-picker", 1, "date-picker-icon", 3, "src", "click"], [3, "control", "valueChanged"], [3, "searchEnabled", "width", "data", "selectedItem", "onChange"], ["id", "checkboxes-container"], ["class", "radio-checkbox-common", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "radio-checkbox-common", 3, "ngClass", "click"], ["alt", "", 3, "src", 4, "ngIf"], ["alt", "", 3, "src"], [3, "width", "showSelectedCount", "dropdownListWidth", "searchEnabled", "hideApplyButton", "data", "selectedItems", "onChange"], ["id", "error-messages-container"], [1, "h8"], [2, "flex-basis", "100%", "height", "0"]], template: function DynamicFormComponent_Template(rf, ctx) { if (rf & 1) {
681
+ DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DynamicFormComponent, selectors: [["mis-dynamic-form"]], inputs: { formFields: "formFields", formValues: "formValues", activeBtnIconUrl: "activeBtnIconUrl", calendarIconUrl: "calendarIconUrl", removeIconUrl: "removeIconUrl", removeSepratorForSubFields: "removeSepratorForSubFields" }, outputs: { formUpdated: "formUpdated", formValid: "formValid", formInitialized: "formInitialized", fieldRemoved: "fieldRemoved" }, decls: 7, vars: 2, consts: [[3, "formGroup"], ["formArrayName", "dynamicFields"], [3, "formGroupName", 4, "ngFor", "ngForOf"], ["dynamicField", ""], ["dynamicFieldErrors", ""], [3, "formGroupName"], [3, "ngTemplateOutlet", "ngTemplateOutletContext"], ["class", "sub-dynamic-form", 4, "ngIf"], [1, "sub-dynamic-form"], [4, "ngFor", "ngForOf"], ["class", "dynamic-field multi-line-field-container", 3, "ngStyle", 4, "ngIf"], ["class", "dynamic-field single-line-field-container", 3, "ngStyle", 4, "ngIf"], [1, "dynamic-field", "multi-line-field-container", 3, "ngStyle"], [1, "h7", "field-title-sm"], [2, "flex-basis", "100%"], [1, "input-field", "ip-text", 3, "type", "formControl", "ngStyle", "placeholder", "min", "ngModelChange"], [3, "ngTemplateOutlet", "ngTemplateOutletContext", 4, "ngIf"], ["type", "text", 1, "input-field", "ip-textarea", 3, "ngStyle", "placeholder", "formControl", "ngModelChange"], [1, "dynamic-field", "single-line-field-container", 3, "ngStyle"], [1, "h6"], [1, "date-picker-container"], ["readonly", "", "misTzDp", "", 1, "date-picker", 3, "dpConfig", "selectedDate", "offsetY", "value", "dateChange"], ["dp", ""], ["alt", "data-picker", "class", "date-picker-icon", 3, "src", "click", 4, "ngIf"], ["alt", "data-picker", 1, "date-picker-icon", 3, "src", "click"], [3, "control", "valueChanged"], [3, "ngClass"], [3, "searchEnabled", "width", "data", "selectedItem", "onChange"], ["class", "remove-icon", 3, "src", "click", 4, "ngIf"], [1, "remove-icon", 3, "src", "click"], ["id", "checkboxes-container"], ["class", "radio-checkbox-common", 3, "ngClass", "click", 4, "ngFor", "ngForOf"], [1, "radio-checkbox-common", 3, "ngClass", "click"], ["alt", "", 3, "src", 4, "ngIf"], ["alt", "", 3, "src"], [3, "width", "showSelectedCount", "dropdownListWidth", "searchEnabled", "hideApplyButton", "data", "selectedItems", "onChange"], ["id", "error-messages-container"], [1, "h8"], [2, "flex-basis", "100%", "height", "0"]], template: function DynamicFormComponent_Template(rf, ctx) { if (rf & 1) {
639
682
  i0.ɵɵelementStart(0, "form", 0);
640
683
  i0.ɵɵelementContainerStart(1, 1);
641
684
  i0.ɵɵtemplate(2, DynamicFormComponent_ng_container_2_Template, 3, 8, "ng-container", 2);
@@ -647,10 +690,10 @@ DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dynami
647
690
  i0.ɵɵproperty("formGroup", ctx.dynamicForm);
648
691
  i0.ɵɵadvance(2);
649
692
  i0.ɵɵproperty("ngForOf", ctx.getDynamicFieldsControls().controls);
650
- } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormControlDirective, i2.FormGroupDirective, i2.FormGroupName, i2.FormArrayName, i3.DropdownComponent, i4.SwitchComponent, i5.MultiSelectDropdownComponent, i6.TzDatepickerDirective, i1.KeyValuePipe], styles: ["p[_ngcontent-%COMP%]{margin:0;cursor:default} .main-container{margin:0;max-width:100%}.sub-dynamic-form[_ngcontent-%COMP%]{padding-left:24px}.dynamic-field[_ngcontent-%COMP%] .container{height:32px!important}.single-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm[_ngcontent-%COMP%]{margin-bottom:8px;cursor:default}.input-field[_ngcontent-%COMP%]{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text[_ngcontent-%COMP%]{height:44px;padding:8px 12px}.ip-textarea[_ngcontent-%COMP%]{max-height:94px;padding:8px}input[_ngcontent-%COMP%]:focus{outline:none}input[_ngcontent-%COMP%]::placeholder{color:var(--grey-seperators)}textarea[_ngcontent-%COMP%]:focus{outline:none}.date-picker-container[_ngcontent-%COMP%]{position:relative;width:140px}.date-picker-container[_ngcontent-%COMP%] .date-picker[_ngcontent-%COMP%]{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container[_ngcontent-%COMP%] .date-picker[_ngcontent-%COMP%]:hover{background-color:var(--grey-hover)}.date-picker-container[_ngcontent-%COMP%] .date-picker-icon[_ngcontent-%COMP%]{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form[_ngcontent-%COMP%] .dynamic-field[_ngcontent-%COMP%]:last-child{border-bottom:none!important}#checkboxes-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--text-muted);cursor:pointer}.radio-checkbox-common[_ngcontent-%COMP%] img[_ngcontent-%COMP%]{margin-right:8px}.checkbox-active[_ngcontent-%COMP%]{background-color:var(--pmry-500)}.checkbox-active[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--text-white)}#error-messages-container[_ngcontent-%COMP%]{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--sem-error)}"] });
693
+ } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i1.NgTemplateOutlet, i1.NgStyle, i2.ɵNgNoValidate, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.FormControlDirective, i2.FormGroupDirective, i2.FormGroupName, i2.FormArrayName, i3.DropdownComponent, i4.SwitchComponent, i5.MultiSelectDropdownComponent, i6.TzDatepickerDirective, i1.KeyValuePipe], styles: ["p[_ngcontent-%COMP%]{margin:0;cursor:default} .main-container{margin:0;max-width:100%}.sub-dynamic-form[_ngcontent-%COMP%]{padding-left:24px;border-bottom:1px solid var(--grey-seperators)}.dynamic-field[_ngcontent-%COMP%] .container{height:32px!important}.single-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm[_ngcontent-%COMP%]{margin-bottom:8px;cursor:default}.input-field[_ngcontent-%COMP%]{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text[_ngcontent-%COMP%]{height:44px;padding:8px 12px}.ip-textarea[_ngcontent-%COMP%]{max-height:94px;padding:8px}input[_ngcontent-%COMP%]:focus{outline:none}input[_ngcontent-%COMP%]::placeholder{color:var(--grey-seperators)}textarea[_ngcontent-%COMP%]:focus{outline:none}.date-picker-container[_ngcontent-%COMP%]{position:relative;width:140px}.date-picker-container[_ngcontent-%COMP%] .date-picker[_ngcontent-%COMP%]{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container[_ngcontent-%COMP%] .date-picker[_ngcontent-%COMP%]:hover{background-color:var(--grey-hover)}.date-picker-container[_ngcontent-%COMP%] .date-picker-icon[_ngcontent-%COMP%]{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form[_ngcontent-%COMP%] .dynamic-field[_ngcontent-%COMP%]:last-child{border-bottom:none!important}#checkboxes-container[_ngcontent-%COMP%]{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--text-muted);cursor:pointer}.radio-checkbox-common[_ngcontent-%COMP%] img[_ngcontent-%COMP%]{margin-right:8px}.checkbox-active[_ngcontent-%COMP%]{background-color:var(--pmry-500)}.checkbox-active[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--text-white)}#error-messages-container[_ngcontent-%COMP%]{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container[_ngcontent-%COMP%] p[_ngcontent-%COMP%]{color:var(--sem-error)}.removeable-container[_ngcontent-%COMP%]{display:flex;justify-content:center;align-items:center}.removeable-container[_ngcontent-%COMP%] .remove-icon[_ngcontent-%COMP%]{cursor:pointer;margin-left:8px;max-width:24px}"] });
651
694
  (function () { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DynamicFormComponent, [{
652
695
  type: Component,
653
- args: [{ selector: "mis-dynamic-form", template: "<form [formGroup]=\"dynamicForm\">\n <ng-container formArrayName=\"dynamicFields\">\n <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i],\n formGroup: fieldControl,\n control: fieldControl.controls.value\n }\"\n >\n </ng-container>\n <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && (!!formFields[i]?.subFields && formFields[i]?.subFields?.length > 0 && matchParentConfig(formFields[i]?.subFields, fieldControl.controls.value.value.value))\">\n <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls;\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i].subFields[findSelectedIndex(formFields[i]?.subFields, fieldControl.controls.value.value.value)],\n control: subFieldControl\n }\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\" \n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" \n [min]=\"field.fieldInputType === 'number' ? 0 : '' \"/>\n <ng-container *ngIf=\"control.touched && control.errors\"\n [ngTemplateOutlet]=\"dynamicFieldErrors\" \n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n >\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <textarea class=\"input-field ip-textarea\" type=\"text\"\n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'date' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <div class=\"date-picker-container\">\n <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n [value]=\"control.value\" #dp />\n <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n (click)=\"dp.click()\" />\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n </mis-dropdown>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n <div class=\"dynamic-field multi-line-field-container\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n <div id=\"error-messages-container\">\n <ng-container *ngFor=\"let error of errors | keyvalue\">\n <p class=\"h8\">\n {{\" \u2022 &nbsp;\" + error.value}}\n </p>\n <div style=\"flex-basis: 100%; height: 0\"></div>\n </ng-container>\n </div>\n</ng-template>", styles: ["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}\n"] }]
696
+ args: [{ selector: "mis-dynamic-form", template: "<form [formGroup]=\"dynamicForm\">\n <ng-container formArrayName=\"dynamicFields\">\n <ng-container [formGroupName]=\"i\" *ngFor=\"let fieldControl of getDynamicFieldsControls().controls; let i = index\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i],\n formGroup: fieldControl,\n control: fieldControl.controls.value\n }\"\n >\n </ng-container>\n <div class=\"sub-dynamic-form\" *ngIf=\"fieldControl.value && (!!formFields[i]?.subFields && formFields[i]?.subFields?.length > 0 && matchParentConfig(formFields[i]?.subFields, fieldControl.controls.value.value.value))\">\n <ng-container *ngFor=\"let subFieldControl of fieldControl.controls.subFields.controls;\">\n <ng-container\n [ngTemplateOutlet]=\"dynamicField\"\n [ngTemplateOutletContext]=\"{\n $implicit: formFields[i].subFields[findSelectedIndex(formFields[i]?.subFields, fieldControl.controls.value.value.value)],\n control: subFieldControl\n }\">\n </ng-container>\n </ng-container>\n </div>\n </ng-container>\n </ng-container>\n</form>\n\n\n<ng-template #dynamicField let-field let-control=\"control\" let-formgroup=\"formGroup\">\n\n <!-- fieldType: 'input' fieldInputType: 'text' | 'number' -->\n <div class=\"dynamic-field multi-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'input' && (field.fieldInputType === 'text' || field.fieldInputType === 'number')\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <input class=\"input-field ip-text\" [type]=\"field.fieldInputType\" [formControl]=\"control\"\n (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\" \n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" \n [min]=\"field.fieldInputType === 'number' ? 0 : '' \"/>\n <ng-container *ngIf=\"control.touched && control.errors\"\n [ngTemplateOutlet]=\"dynamicFieldErrors\" \n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\"\n >\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'textarea' -->\n <div class=\"dynamic-field multi-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'textarea'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <textarea class=\"input-field ip-textarea\" type=\"text\"\n [ngStyle]=\"{'border': control.touched && control.errors ? '1px solid #B00020': ''}\"\n [placeholder]=\"field.placeholderText ? field.placeholderText : 'Input Text'\" [formControl]=\"control\" (ngModelChange)=\"updateSubDynamicFields(field, formgroup, $event)\"></textarea>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'input' fieldInputType: 'date' -->\n <div class=\"dynamic-field single-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'input' && field.fieldInputType === 'date'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <div class=\"date-picker-container\">\n <input class=\"date-picker\" readonly misTzDp [dpConfig]=\"field.fieldConfig\"\n (dateChange)=\"control.setValue($event)\" [selectedDate]=\"control.value\" [offsetY]=\"0\"\n [value]=\"control.value\" #dp />\n <img alt=\"data-picker\" *ngIf=\"calendarIconUrl\" class=\"date-picker-icon\" [src]=\"calendarIconUrl\"\n (click)=\"dp.click()\" />\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'boolean' fieldInputType: 'toggle' -->\n <div class=\"dynamic-field single-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'boolean' && field.fieldInputType === 'toggle'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-switch [control]=\"control\" (valueChanged)=\"updateSubDynamicFields(field, formgroup, $event)\"></mis-switch>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <div [ngClass]=\"{'removeable-container' : field?.isRemoveable}\">\n <mis-dropdown [searchEnabled]=\"false\" [width]=\"'140px'\" [data]=\"field.itemsList\" [selectedItem]=\"control.value\"\n (onChange)=\"updateSelectedValueForSingleSelect(field, control, formgroup, $event);\">\n </mis-dropdown>\n <img *ngIf=\"field.isRemoveable && removeIconUrl\" class=\"remove-icon\" [src]=\"removeIconUrl\" (click)=\"fieldRemoved.emit(field)\">\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'singleSelect' fieldInputType: 'radio' -->\n <div class=\"dynamic-field multi-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'singleSelect' && field.fieldInputType === 'radio'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': item.label === control.value?.label }\"\n (click)=\"updateSelectedValueForSingleSelect(field, control, formgroup, item);\">\n <img *ngIf=\"(item.label === control.value?.label) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\" alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'checkbox' -->\n <div class=\"dynamic-field multi-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'checkbox'\">\n <p class=\"h7 field-title-sm\">\n {{ field.title }}\n </p>\n <div style=\"flex-basis: 100%\"></div>\n <div id=\"checkboxes-container\">\n <div class=\"radio-checkbox-common\" *ngFor=\"let item of field.itemsList\"\n [ngClass]=\"{ 'checkbox-active': isCheckBoxSelected(item.label, control.value) }\"\n (click)=\"updateSelectedValueForMultiSelect(field, control, formgroup, [item])\">\n <img *ngIf=\"isCheckBoxSelected(item.label, control.value) && activeBtnIconUrl\" [src]=\"activeBtnIconUrl\"\n alt=\"\" />\n <p class=\"h6\">{{ item.label }}</p>\n </div>\n </div>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n <!-- fieldType: 'multiSelect' fieldInputType: 'dropdown' -->\n <div class=\"dynamic-field single-line-field-container\"\n [ngStyle]=\"{'border-bottom': (formgroup?.controls?.subFields?.controls?.length && removeSepratorForSubFields) ? 'none':''}\"\n *ngIf=\"field.fieldType === 'multiSelect' && field.fieldInputType === 'dropdown'\">\n <p class=\"h6\">\n {{ field.title }}\n </p>\n <mis-multi-select-dropdown [width]=\"'140px'\" [showSelectedCount]=\"true\" [dropdownListWidth]=\"'256px'\"\n [searchEnabled]=\"false\" [hideApplyButton]=\"true\" [data]=\"field.itemsList\"\n [selectedItems]=\"control.value\" (onChange)=\"updateSelectedValueForMultiSelect(field, control, formgroup, $event);\"></mis-multi-select-dropdown>\n <ng-container *ngIf=\"control.touched && control.errors\" [ngTemplateOutlet]=\"dynamicFieldErrors\"\n [ngTemplateOutletContext]=\"{ $implicit: control.errors }\">\n </ng-container>\n </div>\n\n</ng-template>\n\n<ng-template #dynamicFieldErrors let-errors>\n <div id=\"error-messages-container\">\n <ng-container *ngFor=\"let error of errors | keyvalue\">\n <p class=\"h8\">\n {{\" \u2022 &nbsp;\" + error.value}}\n </p>\n <div style=\"flex-basis: 100%; height: 0\"></div>\n </ng-container>\n </div>\n</ng-template>", styles: ["p{margin:0;cursor:default}::ng-deep .main-container{margin:0;max-width:100%}.sub-dynamic-form{padding-left:24px;border-bottom:1px solid var(--grey-seperators)}.dynamic-field ::ng-deep .container{height:32px!important}.single-line-field-container{display:flex;justify-content:space-between;align-items:center;padding:28px 16px;border-bottom:1px solid var(--grey-seperators)}.multi-line-field-container{display:flex;justify-content:flex-start;align-items:flex-start;padding:28px 16px;flex-wrap:wrap;border-bottom:1px solid var(--grey-seperators)}.field-title-sm{margin-bottom:8px;cursor:default}.input-field{width:100%;background-color:var(--grey-bg-1);border:1px solid var(--grey-seperators);border-radius:6px}.ip-text{height:44px;padding:8px 12px}.ip-textarea{max-height:94px;padding:8px}input:focus{outline:none}input::placeholder{color:var(--grey-seperators)}textarea:focus{outline:none}.date-picker-container{position:relative;width:140px}.date-picker-container .date-picker{cursor:pointer;height:32px;width:100%;font-size:14px;border-radius:6px;padding:0 12px;border:1px solid var(--grey-seperators);inset:10px auto auto 80px;background-color:var(--text-white)}.date-picker-container .date-picker:hover{background-color:var(--grey-hover)}.date-picker-container .date-picker-icon{position:absolute;top:50%;right:12px;transform:translateY(-50%);cursor:pointer}form .dynamic-field:last-child{border-bottom:none!important}#checkboxes-container{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}.radio-checkbox-common{display:flex;justify-content:center;align-items:center;cursor:pointer;margin-right:8px;margin-bottom:8px;background-color:var(--text-white);padding:12px 16px;border:1px solid var(--text-muted);border-radius:8px}.radio-checkbox-common p{color:var(--text-muted);cursor:pointer}.radio-checkbox-common img{margin-right:8px}.checkbox-active{background-color:var(--pmry-500)}.checkbox-active p{color:var(--text-white)}#error-messages-container{margin-top:4px;width:100%;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap}#error-messages-container p{color:var(--sem-error)}.removeable-container{display:flex;justify-content:center;align-items:center}.removeable-container .remove-icon{cursor:pointer;margin-left:8px;max-width:24px}\n"] }]
654
697
  }], function () { return []; }, { formFields: [{
655
698
  type: Input
656
699
  }], formValues: [{
@@ -659,12 +702,18 @@ DynamicFormComponent.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: Dynami
659
702
  type: Input
660
703
  }], calendarIconUrl: [{
661
704
  type: Input
705
+ }], removeIconUrl: [{
706
+ type: Input
707
+ }], removeSepratorForSubFields: [{
708
+ type: Input
662
709
  }], formUpdated: [{
663
710
  type: Output
664
711
  }], formValid: [{
665
712
  type: Output
666
713
  }], formInitialized: [{
667
714
  type: Output
715
+ }], fieldRemoved: [{
716
+ type: Output
668
717
  }] }); })();
669
718
  const dynamicFieldValidator = (validators) => {
670
719
  return (control) => {