ngx-iso-form 2.0.0 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +53 -32
- package/esm2022/lib/Models/Schema.mjs +1 -1
- package/esm2022/lib/ngx-iso-form.component.mjs +24 -7
- package/esm2022/lib/ngx-iso-form.module.mjs +7 -5
- package/esm2022/lib/ngx-iso-form.service.mjs +55 -25
- package/esm2022/lib/shared/services/component.service.mjs +13 -8
- package/esm2022/lib/shared/services/control.service.mjs +11 -1
- package/esm2022/lib/shared/services/custom-date-adapter.mjs +34 -0
- package/esm2022/public-api.mjs +1 -1
- package/fesm2022/ngx-iso-form.mjs +139 -48
- package/fesm2022/ngx-iso-form.mjs.map +1 -1
- package/lib/Models/Schema.d.ts +1 -2
- package/lib/ngx-iso-form.component.d.ts +2 -0
- package/lib/ngx-iso-form.service.d.ts +3 -1
- package/lib/shared/services/component.service.d.ts +3 -0
- package/lib/shared/services/control.service.d.ts +3 -0
- package/lib/shared/services/custom-date-adapter.d.ts +9 -0
- package/lib/styles/index.scss +1 -0
- package/lib/styles/ngx-iso-form.component.scss +10 -0
- package/package.json +3 -3
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, Input, Pipe, Directive, ViewChild, forwardRef,
|
|
2
|
+
import { Component, ChangeDetectionStrategy, Input, Pipe, Injectable, Directive, ViewChild, forwardRef, NgModule } from '@angular/core';
|
|
3
3
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
|
4
4
|
import { BrowserModule } from '@angular/platform-browser';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
@@ -9,7 +9,7 @@ import { MatExpansionModule } from '@angular/material/expansion';
|
|
|
9
9
|
import * as i3 from '@angular/material/form-field';
|
|
10
10
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
11
11
|
import * as i5$1 from '@angular/material/core';
|
|
12
|
-
import { MatNativeDateModule } from '@angular/material/core';
|
|
12
|
+
import { NativeDateAdapter, MatNativeDateModule, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
|
|
13
13
|
import * as i9 from '@angular/material/icon';
|
|
14
14
|
import { MatIconModule } from '@angular/material/icon';
|
|
15
15
|
import * as i4 from '@angular/material/input';
|
|
@@ -23,7 +23,6 @@ import { MatSelectModule } from '@angular/material/select';
|
|
|
23
23
|
import * as i1 from '@ngx-translate/core';
|
|
24
24
|
import { TranslateModule } from '@ngx-translate/core';
|
|
25
25
|
import * as i1$1 from '@angular/common';
|
|
26
|
-
import { __decorate } from 'tslib';
|
|
27
26
|
|
|
28
27
|
class IsoBaseControlComponent {
|
|
29
28
|
getKeys(errors) {
|
|
@@ -239,7 +238,15 @@ class ControlService {
|
|
|
239
238
|
return new ComponentModel(IsoMatInput, { "control": controlModel, "formControl": formControl });
|
|
240
239
|
}
|
|
241
240
|
}
|
|
241
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ControlService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
242
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ControlService, providedIn: 'root' }); }
|
|
242
243
|
}
|
|
244
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ControlService, decorators: [{
|
|
245
|
+
type: Injectable,
|
|
246
|
+
args: [{
|
|
247
|
+
providedIn: 'root'
|
|
248
|
+
}]
|
|
249
|
+
}] });
|
|
243
250
|
|
|
244
251
|
class ComponentDirective {
|
|
245
252
|
constructor(viewContainerRef) {
|
|
@@ -350,29 +357,71 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
|
|
|
350
357
|
type: Input
|
|
351
358
|
}] } });
|
|
352
359
|
|
|
360
|
+
class CustomDateAdapter extends NativeDateAdapter {
|
|
361
|
+
format(date, displayFormat) {
|
|
362
|
+
const day = this._to2digit(date.getDate());
|
|
363
|
+
const month = this._to2digit(date.getMonth() + 1); // Months are zero-based
|
|
364
|
+
const year = date.getFullYear();
|
|
365
|
+
return `${year}-${month}-${day}`;
|
|
366
|
+
}
|
|
367
|
+
_to2digit(n) {
|
|
368
|
+
return ('00' + n).slice(-2);
|
|
369
|
+
}
|
|
370
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: CustomDateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
371
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: CustomDateAdapter, providedIn: 'root' }); }
|
|
372
|
+
}
|
|
373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: CustomDateAdapter, decorators: [{
|
|
374
|
+
type: Injectable,
|
|
375
|
+
args: [{
|
|
376
|
+
providedIn: 'root'
|
|
377
|
+
}]
|
|
378
|
+
}] });
|
|
379
|
+
const CUSTOM_DATE_FORMATS = {
|
|
380
|
+
parse: {
|
|
381
|
+
dateInput: 'YYYY-MM-DD',
|
|
382
|
+
},
|
|
383
|
+
display: {
|
|
384
|
+
dateInput: 'YYYY-MM-DD',
|
|
385
|
+
monthYearLabel: 'MMM YYYY',
|
|
386
|
+
dateA11yLabel: 'LL',
|
|
387
|
+
monthYearA11yLabel: 'MMMM YYYY',
|
|
388
|
+
},
|
|
389
|
+
};
|
|
390
|
+
|
|
353
391
|
class NgxIsoService {
|
|
354
|
-
constructor(fb) {
|
|
392
|
+
constructor(fb, dateService) {
|
|
355
393
|
this.fb = fb;
|
|
394
|
+
this.dateService = dateService;
|
|
356
395
|
this._formModel = [];
|
|
357
396
|
this.sanitize = (obj) => {
|
|
358
|
-
if (obj === null || obj ===
|
|
397
|
+
if (obj === null || obj === '') {
|
|
359
398
|
return null;
|
|
360
399
|
}
|
|
361
400
|
if (Array.isArray(obj)) {
|
|
362
401
|
const cleanedObj = [];
|
|
363
402
|
for (const index in obj) {
|
|
364
403
|
const cleanedValue = this.sanitize(obj[index]);
|
|
365
|
-
if (cleanedValue !== null &&
|
|
404
|
+
if (cleanedValue !== null &&
|
|
405
|
+
cleanedValue !== '' &&
|
|
406
|
+
Object.keys(cleanedValue).length > 0 &&
|
|
407
|
+
(!Array.isArray(cleanedValue) || cleanedValue.length > 0)) {
|
|
366
408
|
cleanedObj.push(cleanedValue);
|
|
367
409
|
}
|
|
368
410
|
}
|
|
369
411
|
return cleanedObj;
|
|
370
412
|
}
|
|
413
|
+
else if (typeof obj === 'object' && obj instanceof Date) {
|
|
414
|
+
const cleanedObj = this.dateService.format(obj, 'YYYY-MM-DD');
|
|
415
|
+
return cleanedObj;
|
|
416
|
+
}
|
|
371
417
|
else if (typeof obj === 'object') {
|
|
372
418
|
const cleanedObj = {};
|
|
373
419
|
for (const key in obj) {
|
|
374
420
|
const cleanedValue = this.sanitize(obj[key]);
|
|
375
|
-
if (cleanedValue !== null &&
|
|
421
|
+
if (cleanedValue !== null &&
|
|
422
|
+
cleanedValue !== '' &&
|
|
423
|
+
Object.keys(cleanedValue).length > 0 &&
|
|
424
|
+
(!Array.isArray(cleanedValue) || cleanedValue.length > 0)) {
|
|
376
425
|
cleanedObj[key] = cleanedValue;
|
|
377
426
|
}
|
|
378
427
|
}
|
|
@@ -412,14 +461,16 @@ class NgxIsoService {
|
|
|
412
461
|
const formArray = form.get(key);
|
|
413
462
|
if (formArray && formArray.length !== item.length) {
|
|
414
463
|
const newEle = structuredClone(parentNode.elements[parentNode.elements.length - 1]);
|
|
415
|
-
if (!(newEle.maxOccurs &&
|
|
464
|
+
if (!(newEle.maxOccurs &&
|
|
465
|
+
parseInt(newEle.maxOccurs, 10) <= parentNode.elements.length)) {
|
|
416
466
|
const newKeys = [];
|
|
417
467
|
const groupControls = this.getFormGroupControls(newEle.elements, newKeys, parentNode.elements.length - 1);
|
|
418
468
|
parentNode.elements.push(newEle);
|
|
419
469
|
formArray.push(groupControls);
|
|
420
470
|
parentNode.elements.forEach((element) => {
|
|
421
|
-
if (!element.minOccurs ||
|
|
422
|
-
element.minOccurs
|
|
471
|
+
if (!element.minOccurs ||
|
|
472
|
+
parseInt(element.minOccurs, 10) === 0) {
|
|
473
|
+
element.minOccurs = '1';
|
|
423
474
|
}
|
|
424
475
|
});
|
|
425
476
|
}
|
|
@@ -437,14 +488,14 @@ class NgxIsoService {
|
|
|
437
488
|
else if (typeof model[key] === 'object') {
|
|
438
489
|
const node = this.getFormModel(this._formModel[0], key);
|
|
439
490
|
if (node && (!node.minOccurs || parseInt(node.minOccurs, 10) === 0)) {
|
|
440
|
-
node.minOccurs =
|
|
491
|
+
node.minOccurs = '1';
|
|
441
492
|
}
|
|
442
493
|
const _form = form.get(key);
|
|
443
494
|
if (_form) {
|
|
444
495
|
if (node.dataType === 'choice') {
|
|
445
|
-
const
|
|
446
|
-
const choiceEle = node.elements.find((item) => item.id ===
|
|
447
|
-
node.
|
|
496
|
+
const choiceKey = Object.keys(model[key])[0];
|
|
497
|
+
const choiceEle = node.elements.find((item) => item.id === choiceKey);
|
|
498
|
+
node.choiceKey = choiceKey;
|
|
448
499
|
choiceEle.hidden = false;
|
|
449
500
|
const newNode = structuredClone(choiceEle);
|
|
450
501
|
if (newNode.elements.length) {
|
|
@@ -484,11 +535,16 @@ class NgxIsoService {
|
|
|
484
535
|
if (item.elements.length > 0) {
|
|
485
536
|
let choice = item.dataType === 'choice';
|
|
486
537
|
if (choice) {
|
|
487
|
-
element.
|
|
538
|
+
element.choiceKey = '';
|
|
488
539
|
}
|
|
489
540
|
if (this.maxOccurs(item.maxOccurs)) {
|
|
490
541
|
element.uniqueId = `${element.id}_${index}`;
|
|
491
|
-
keys.push({
|
|
542
|
+
keys.push({
|
|
543
|
+
id: element.id,
|
|
544
|
+
multi: true,
|
|
545
|
+
xpath: element.xpath,
|
|
546
|
+
elements: [element],
|
|
547
|
+
});
|
|
492
548
|
const data = this.getFormGroupControls(item.elements, element.elements, index, choice);
|
|
493
549
|
controls = this.fb.array([]);
|
|
494
550
|
if (!choice) {
|
|
@@ -497,7 +553,12 @@ class NgxIsoService {
|
|
|
497
553
|
control[id] = controls;
|
|
498
554
|
}
|
|
499
555
|
else if (item.multi && !item.isFormControls) {
|
|
500
|
-
keys.push({
|
|
556
|
+
keys.push({
|
|
557
|
+
id: element.id,
|
|
558
|
+
multi: true,
|
|
559
|
+
xpath: element.xpath,
|
|
560
|
+
elements: element.elements,
|
|
561
|
+
});
|
|
501
562
|
const data = this.getFormGroupControls(item.elements[item.elements.length - 1].elements, element.elements, index, choice);
|
|
502
563
|
controls = this.fb.array([]);
|
|
503
564
|
if (!choice) {
|
|
@@ -510,7 +571,7 @@ class NgxIsoService {
|
|
|
510
571
|
item.elements.splice(1, item.elements.length - 1);
|
|
511
572
|
}
|
|
512
573
|
keys.push(item);
|
|
513
|
-
control[id] = this.fb.array([this.getFormControl(item.value ||
|
|
574
|
+
control[id] = this.fb.array([this.getFormControl(item.value || '')]);
|
|
514
575
|
}
|
|
515
576
|
else {
|
|
516
577
|
keys.push(element);
|
|
@@ -524,7 +585,13 @@ class NgxIsoService {
|
|
|
524
585
|
}
|
|
525
586
|
}
|
|
526
587
|
else if (this.maxOccurs(item.maxOccurs)) {
|
|
527
|
-
keys.push({
|
|
588
|
+
keys.push({
|
|
589
|
+
id: element.id,
|
|
590
|
+
multi: true,
|
|
591
|
+
xpath: element.xpath,
|
|
592
|
+
elements: [element],
|
|
593
|
+
isFormControls: true,
|
|
594
|
+
});
|
|
528
595
|
control[id] = this.fb.array([this.getFormControl(item.value)]);
|
|
529
596
|
}
|
|
530
597
|
else if (item.isCurrency) {
|
|
@@ -535,14 +602,14 @@ class NgxIsoService {
|
|
|
535
602
|
}
|
|
536
603
|
else {
|
|
537
604
|
keys.push(element);
|
|
538
|
-
control[id] = this.getFormControl(item.value ||
|
|
605
|
+
control[id] = this.getFormControl(item.value || '');
|
|
539
606
|
}
|
|
540
607
|
});
|
|
541
608
|
return new FormGroup(control);
|
|
542
609
|
}
|
|
543
610
|
getFormControl(values) {
|
|
544
|
-
return new FormControl(values ||
|
|
545
|
-
updateOn: 'blur'
|
|
611
|
+
return new FormControl(values || '', {
|
|
612
|
+
updateOn: 'blur',
|
|
546
613
|
});
|
|
547
614
|
}
|
|
548
615
|
getAmountCurrency(item) {
|
|
@@ -550,10 +617,10 @@ class NgxIsoService {
|
|
|
550
617
|
const ccy = structuredClone(item);
|
|
551
618
|
const amt = structuredClone(item);
|
|
552
619
|
ccy.id = `${ccy.id}_ccy`;
|
|
553
|
-
ccy.name =
|
|
620
|
+
ccy.name = 'Ccy';
|
|
554
621
|
ccy.fractionDigits = '';
|
|
555
622
|
ccy.totalDigits = '';
|
|
556
|
-
ccy.maxLength =
|
|
623
|
+
ccy.maxLength = '3';
|
|
557
624
|
ccy.xpath = `${ccy.xpath}@ccy`;
|
|
558
625
|
ccy.isCurrency = false;
|
|
559
626
|
elements.push(ccy);
|
|
@@ -564,15 +631,15 @@ class NgxIsoService {
|
|
|
564
631
|
elements.push(amt);
|
|
565
632
|
return elements;
|
|
566
633
|
}
|
|
567
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NgxIsoService, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
634
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NgxIsoService, deps: [{ token: i2.FormBuilder }, { token: CustomDateAdapter }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
568
635
|
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NgxIsoService, providedIn: 'root' }); }
|
|
569
636
|
}
|
|
570
637
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NgxIsoService, decorators: [{
|
|
571
638
|
type: Injectable,
|
|
572
639
|
args: [{
|
|
573
|
-
providedIn: 'root'
|
|
640
|
+
providedIn: 'root',
|
|
574
641
|
}]
|
|
575
|
-
}], ctorParameters: function () { return [{ type: i2.FormBuilder }]; } });
|
|
642
|
+
}], ctorParameters: function () { return [{ type: i2.FormBuilder }, { type: CustomDateAdapter }]; } });
|
|
576
643
|
|
|
577
644
|
class NgxIsoFormComponent {
|
|
578
645
|
constructor(service, changeDetection) {
|
|
@@ -595,15 +662,27 @@ class NgxIsoFormComponent {
|
|
|
595
662
|
return this.service._formModel;
|
|
596
663
|
}
|
|
597
664
|
initiateForm() {
|
|
598
|
-
this.service._formModel = [structuredClone(this.schema)];
|
|
665
|
+
this.service._formModel = [this.structuredClone(this.schema)];
|
|
599
666
|
this.service._formModel[0].elements = [];
|
|
600
667
|
let group = {};
|
|
601
|
-
|
|
668
|
+
const schemaElements = this.schema.elements.length > 0 ? this.structuredClone(this.schema.elements) : this.schema.elements;
|
|
669
|
+
const formElements = this.service._formModel[0].elements.length > 0 ? this.structuredClone(this.service._formModel[0].elements) : this.service._formModel[0].elements;
|
|
670
|
+
group[this.schema.id] = this.service.getFormGroupControls(schemaElements, formElements);
|
|
602
671
|
this._form = new FormGroup(group);
|
|
603
672
|
if (!this._isFormInitiate) {
|
|
604
673
|
this.initiateFormModel();
|
|
605
674
|
}
|
|
606
675
|
}
|
|
676
|
+
structuredClone(data) {
|
|
677
|
+
let cloneData;
|
|
678
|
+
try {
|
|
679
|
+
cloneData = structuredClone(data);
|
|
680
|
+
}
|
|
681
|
+
catch (e) {
|
|
682
|
+
cloneData = JSON.parse(JSON.stringify(data));
|
|
683
|
+
}
|
|
684
|
+
return cloneData;
|
|
685
|
+
}
|
|
607
686
|
initiateFormModel() {
|
|
608
687
|
if (this._form) {
|
|
609
688
|
this._ngModel = this.form._model;
|
|
@@ -643,7 +722,7 @@ class NgxIsoFormComponent {
|
|
|
643
722
|
if (node.maxOccurs && parseInt(node.maxOccurs, 10) <= parentNode.elements.length) {
|
|
644
723
|
return;
|
|
645
724
|
}
|
|
646
|
-
const newEle = structuredClone(parentNode.elements[0]);
|
|
725
|
+
const newEle = this.structuredClone(parentNode.elements[0]);
|
|
647
726
|
const newKeys = [];
|
|
648
727
|
const groupControls = this.service.getFormGroupControls(newEle.elements, newKeys, parentNode.elements.length - 1);
|
|
649
728
|
parentNode.elements.push(newEle);
|
|
@@ -664,7 +743,7 @@ class NgxIsoFormComponent {
|
|
|
664
743
|
}
|
|
665
744
|
const control = parentFormEle.get(node.id);
|
|
666
745
|
const newControl = this.service.getFormControl('');
|
|
667
|
-
const newEle = structuredClone(parentNode.elements[parentNode.elements.length - 1]);
|
|
746
|
+
const newEle = this.structuredClone(parentNode.elements[parentNode.elements.length - 1]);
|
|
668
747
|
control.push(newControl);
|
|
669
748
|
parentNode.elements.push(newEle);
|
|
670
749
|
this.changeDetection.detectChanges();
|
|
@@ -719,12 +798,17 @@ class NgxIsoFormComponent {
|
|
|
719
798
|
debugger;
|
|
720
799
|
return this.service.getFormControl('');
|
|
721
800
|
}
|
|
801
|
+
getChoiceFormControl(choiceKey) {
|
|
802
|
+
const formControl = this.service.getFormControl('');
|
|
803
|
+
formControl.setValue(choiceKey);
|
|
804
|
+
return formControl;
|
|
805
|
+
}
|
|
722
806
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NgxIsoFormComponent, deps: [{ token: NgxIsoService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NgxIsoFormComponent, selector: "ngx-iso-form", inputs: { form: "form", schema: "schema" }, usesOnChanges: true, ngImport: i0, template: "<form *ngIf=\"_form && schema\" [formGroup]=\"_form\">\r\n <div class=\"form-group\">\r\n <ng-template #nodeTemplateRef let-node=\"node\" let-formElement=\"formElement\" let-index=\"index\"\r\n let-parentNode=\"parentNode\" let-parentFormElement=\"parentFormElement\">\r\n <ng-container *ngIf=\"node.multi then arr else obj\"></ng-container>\r\n <ng-template #arr>\r\n <ng-template *ngFor=\"let model of node.elements;let i = index\" [ngTemplateOutlet]=\"nodeTemplateRef\"\r\n [ngTemplateOutletContext]=\"{\r\n node: model,\r\n formElement: formElement,\r\n parentFormElement: parentFormElement,\r\n parentNode: node,\r\n index: i\r\n }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #obj>\r\n <ng-container *ngIf=\"node.elements.length\">\r\n <mat-accordion [formGroup]=\"formElement\" *ngIf=\"!node.hidden\">\r\n <mat-expansion-panel multi [expanded]=\"expand(node.minOccurs)\" #expan>\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{ node.name | trans: node.id : node.name }}\r\n </mat-panel-title>\r\n <mat-panel-description *ngIf=\"maxOccurs(node.maxOccurs)\">\r\n \r\n <button *ngIf=\"index < 1\" mat-icon-button (click)=\"addSection($event, node,parentNode, parentFormElement)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n <button *ngIf=\"index > 0\" mat-icon-button (click)=\"removeSection($event,parentNode,parentFormElement,index)\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <ng-container *ngIf=\"expan.expanded\">\r\n <mat-form-field *ngIf=\"node.dataType === 'choice'\">\r\n <mat-label>{{ node.name | trans: node.id : node.name }}</mat-label>\r\n <mat-select (selectionChange)=\"onChoiceSelectionChange($event.value,formElement, node)\" [formControl]=\"node.
|
|
807
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.2", type: NgxIsoFormComponent, selector: "ngx-iso-form", inputs: { form: "form", schema: "schema" }, usesOnChanges: true, ngImport: i0, template: "<form *ngIf=\"_form && schema\" [formGroup]=\"_form\">\r\n <div class=\"form-group\">\r\n <ng-template #nodeTemplateRef let-node=\"node\" let-formElement=\"formElement\" let-index=\"index\"\r\n let-parentNode=\"parentNode\" let-parentFormElement=\"parentFormElement\">\r\n <ng-container *ngIf=\"node.multi then arr else obj\"></ng-container>\r\n <ng-template #arr>\r\n <ng-template *ngFor=\"let model of node.elements;let i = index\" [ngTemplateOutlet]=\"nodeTemplateRef\"\r\n [ngTemplateOutletContext]=\"{\r\n node: model,\r\n formElement: formElement,\r\n parentFormElement: parentFormElement,\r\n parentNode: node,\r\n index: i\r\n }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #obj>\r\n <ng-container *ngIf=\"node.elements.length\">\r\n <mat-accordion [formGroup]=\"formElement\" *ngIf=\"!node.hidden\">\r\n <mat-expansion-panel multi [expanded]=\"expand(node.minOccurs)\" #expan>\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{ node.name | trans: node.id : node.name }}\r\n </mat-panel-title>\r\n <mat-panel-description *ngIf=\"maxOccurs(node.maxOccurs)\">\r\n \r\n <button *ngIf=\"index < 1\" mat-icon-button (click)=\"addSection($event, node,parentNode, parentFormElement)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n <button *ngIf=\"index > 0\" mat-icon-button (click)=\"removeSection($event,parentNode,parentFormElement,index)\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <ng-container *ngIf=\"expan.expanded\">\r\n <mat-form-field *ngIf=\"node.dataType === 'choice'\">\r\n <mat-label>{{ node.name | trans: node.id : node.name }}</mat-label>\r\n <mat-select (selectionChange)=\"onChoiceSelectionChange($event.value,formElement, node)\" [formControl]=\"getChoiceFormControl(node.choiceKey)\">\r\n <mat-option *ngFor=\"let item of node.elements\" [value]=\"item.id\">\r\n {{item.name}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <ng-container *ngIf=\"!isEmpty(formElement)\">\r\n <ng-template *ngFor=\"let model of node.elements; let i = index\" [ngTemplateOutlet]=\"nodeTemplateRef\"\r\n [ngTemplateOutletContext]=\"{\r\n node: model,\r\n formElement: getElement(formElement,model),\r\n parentFormElement: formElement\r\n }\">\r\n </ng-template>\r\n </ng-container>\r\n <div *ngIf=\"node.elements.length === 0\">\r\n <ngx-iso-control *ngIf=\"!node.hidden\" [formControl]=\"formElement\" [control]=\"node\"></ngx-iso-control>\r\n </div>\r\n </ng-container>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </ng-container>\r\n <ng-container *ngIf=\"!node.elements.length && !node.hidden\">\r\n <div *ngIf=\"maxOccurs(node.maxOccurs)\" class=\"form-add-section\">\r\n \r\n <button *ngIf=\"index < 1\" mat-icon-button (click)=\"addNewControl($event, node,parentNode,parentFormElement)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n <button *ngIf=\"index > 0\" mat-icon-button (click)=\"removeNewControl($event,parentNode,parentFormElement,index)\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <ngx-iso-control [formControl]=\"formElement\" [control]=\"node\"></ngx-iso-control>\r\n </ng-container>\r\n </ng-template>\r\n </ng-template>\r\n <ng-container *ngFor=\"let model of getFormModel; let i = index\">\r\n <ng-container *ngIf=\"isArray(model);then formArray else formObject\">\r\n </ng-container>\r\n <ng-template #formArray>\r\n <ng-template *ngFor=\"let key of model;let i = index\" [ngTemplateOutlet]=\"nodeTemplateRef\"\r\n [ngTemplateOutletContext]=\"{\r\n node: key,\r\n formElement: getElement(_form,key),\r\n parentFormElement: _form,\r\n index:i\r\n }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #formObject>\r\n <ng-template [ngTemplateOutlet]=\"nodeTemplateRef\" [ngTemplateOutletContext]=\"{\r\n node: model,\r\n formElement: getElement(_form,model),\r\n parentFormElement: _form,\r\n index: i,\r\n }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n</form>", styles: [":host .mat-expansion-panel-header-description{justify-content:space-between;align-items:center}:host .mat-expansion-panel{width:100%;margin:5px 0}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4$2.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i4$2.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i4$2.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i4$2.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i4$2.MatExpansionPanelDescription, selector: "mat-panel-description" }, { kind: "component", type: i3.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "component", type: i6.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i4$1.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i5$1.MatOption, selector: "mat-option", exportAs: ["matOption"] }, { kind: "component", type: i9.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: NgxIsoControlComponent, selector: "ngx-iso-control", inputs: ["formControl", "control"] }, { kind: "pipe", type: IsoTranslatePipe, name: "trans" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
724
808
|
}
|
|
725
809
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NgxIsoFormComponent, decorators: [{
|
|
726
810
|
type: Component,
|
|
727
|
-
args: [{ selector: 'ngx-iso-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form *ngIf=\"_form && schema\" [formGroup]=\"_form\">\r\n <div class=\"form-group\">\r\n <ng-template #nodeTemplateRef let-node=\"node\" let-formElement=\"formElement\" let-index=\"index\"\r\n let-parentNode=\"parentNode\" let-parentFormElement=\"parentFormElement\">\r\n <ng-container *ngIf=\"node.multi then arr else obj\"></ng-container>\r\n <ng-template #arr>\r\n <ng-template *ngFor=\"let model of node.elements;let i = index\" [ngTemplateOutlet]=\"nodeTemplateRef\"\r\n [ngTemplateOutletContext]=\"{\r\n node: model,\r\n formElement: formElement,\r\n parentFormElement: parentFormElement,\r\n parentNode: node,\r\n index: i\r\n }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #obj>\r\n <ng-container *ngIf=\"node.elements.length\">\r\n <mat-accordion [formGroup]=\"formElement\" *ngIf=\"!node.hidden\">\r\n <mat-expansion-panel multi [expanded]=\"expand(node.minOccurs)\" #expan>\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{ node.name | trans: node.id : node.name }}\r\n </mat-panel-title>\r\n <mat-panel-description *ngIf=\"maxOccurs(node.maxOccurs)\">\r\n \r\n <button *ngIf=\"index < 1\" mat-icon-button (click)=\"addSection($event, node,parentNode, parentFormElement)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n <button *ngIf=\"index > 0\" mat-icon-button (click)=\"removeSection($event,parentNode,parentFormElement,index)\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <ng-container *ngIf=\"expan.expanded\">\r\n <mat-form-field *ngIf=\"node.dataType === 'choice'\">\r\n <mat-label>{{ node.name | trans: node.id : node.name }}</mat-label>\r\n <mat-select (selectionChange)=\"onChoiceSelectionChange($event.value,formElement, node)\" [formControl]=\"node.
|
|
811
|
+
args: [{ selector: 'ngx-iso-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "<form *ngIf=\"_form && schema\" [formGroup]=\"_form\">\r\n <div class=\"form-group\">\r\n <ng-template #nodeTemplateRef let-node=\"node\" let-formElement=\"formElement\" let-index=\"index\"\r\n let-parentNode=\"parentNode\" let-parentFormElement=\"parentFormElement\">\r\n <ng-container *ngIf=\"node.multi then arr else obj\"></ng-container>\r\n <ng-template #arr>\r\n <ng-template *ngFor=\"let model of node.elements;let i = index\" [ngTemplateOutlet]=\"nodeTemplateRef\"\r\n [ngTemplateOutletContext]=\"{\r\n node: model,\r\n formElement: formElement,\r\n parentFormElement: parentFormElement,\r\n parentNode: node,\r\n index: i\r\n }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #obj>\r\n <ng-container *ngIf=\"node.elements.length\">\r\n <mat-accordion [formGroup]=\"formElement\" *ngIf=\"!node.hidden\">\r\n <mat-expansion-panel multi [expanded]=\"expand(node.minOccurs)\" #expan>\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{ node.name | trans: node.id : node.name }}\r\n </mat-panel-title>\r\n <mat-panel-description *ngIf=\"maxOccurs(node.maxOccurs)\">\r\n \r\n <button *ngIf=\"index < 1\" mat-icon-button (click)=\"addSection($event, node,parentNode, parentFormElement)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n <button *ngIf=\"index > 0\" mat-icon-button (click)=\"removeSection($event,parentNode,parentFormElement,index)\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </mat-panel-description>\r\n </mat-expansion-panel-header>\r\n <ng-container *ngIf=\"expan.expanded\">\r\n <mat-form-field *ngIf=\"node.dataType === 'choice'\">\r\n <mat-label>{{ node.name | trans: node.id : node.name }}</mat-label>\r\n <mat-select (selectionChange)=\"onChoiceSelectionChange($event.value,formElement, node)\" [formControl]=\"getChoiceFormControl(node.choiceKey)\">\r\n <mat-option *ngFor=\"let item of node.elements\" [value]=\"item.id\">\r\n {{item.name}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n <ng-container *ngIf=\"!isEmpty(formElement)\">\r\n <ng-template *ngFor=\"let model of node.elements; let i = index\" [ngTemplateOutlet]=\"nodeTemplateRef\"\r\n [ngTemplateOutletContext]=\"{\r\n node: model,\r\n formElement: getElement(formElement,model),\r\n parentFormElement: formElement\r\n }\">\r\n </ng-template>\r\n </ng-container>\r\n <div *ngIf=\"node.elements.length === 0\">\r\n <ngx-iso-control *ngIf=\"!node.hidden\" [formControl]=\"formElement\" [control]=\"node\"></ngx-iso-control>\r\n </div>\r\n </ng-container>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </ng-container>\r\n <ng-container *ngIf=\"!node.elements.length && !node.hidden\">\r\n <div *ngIf=\"maxOccurs(node.maxOccurs)\" class=\"form-add-section\">\r\n \r\n <button *ngIf=\"index < 1\" mat-icon-button (click)=\"addNewControl($event, node,parentNode,parentFormElement)\">\r\n <mat-icon>add</mat-icon>\r\n </button>\r\n <button *ngIf=\"index > 0\" mat-icon-button (click)=\"removeNewControl($event,parentNode,parentFormElement,index)\">\r\n <mat-icon>remove</mat-icon>\r\n </button>\r\n </div>\r\n <ngx-iso-control [formControl]=\"formElement\" [control]=\"node\"></ngx-iso-control>\r\n </ng-container>\r\n </ng-template>\r\n </ng-template>\r\n <ng-container *ngFor=\"let model of getFormModel; let i = index\">\r\n <ng-container *ngIf=\"isArray(model);then formArray else formObject\">\r\n </ng-container>\r\n <ng-template #formArray>\r\n <ng-template *ngFor=\"let key of model;let i = index\" [ngTemplateOutlet]=\"nodeTemplateRef\"\r\n [ngTemplateOutletContext]=\"{\r\n node: key,\r\n formElement: getElement(_form,key),\r\n parentFormElement: _form,\r\n index:i\r\n }\">\r\n </ng-template>\r\n </ng-template>\r\n <ng-template #formObject>\r\n <ng-template [ngTemplateOutlet]=\"nodeTemplateRef\" [ngTemplateOutletContext]=\"{\r\n node: model,\r\n formElement: getElement(_form,model),\r\n parentFormElement: _form,\r\n index: i,\r\n }\">\r\n </ng-template>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n</form>", styles: [":host .mat-expansion-panel-header-description{justify-content:space-between;align-items:center}:host .mat-expansion-panel{width:100%;margin:5px 0}\n"] }]
|
|
728
812
|
}], ctorParameters: function () { return [{ type: NgxIsoService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
|
|
729
813
|
type: Input,
|
|
730
814
|
args: [{ required: true }]
|
|
@@ -733,19 +817,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
|
|
|
733
817
|
args: [{ required: true }]
|
|
734
818
|
}] } });
|
|
735
819
|
|
|
736
|
-
let ComponentService = class ComponentService {
|
|
737
|
-
getComponent(viewContainerRef, dynamicModel) {
|
|
738
|
-
const componentRef = viewContainerRef.createComponent(dynamicModel.component);
|
|
739
|
-
if (dynamicModel.prop) {
|
|
740
|
-
componentRef.instance.prop = dynamicModel.prop;
|
|
741
|
-
}
|
|
742
|
-
return componentRef;
|
|
743
|
-
}
|
|
744
|
-
};
|
|
745
|
-
ComponentService = __decorate([
|
|
746
|
-
Inject('root')
|
|
747
|
-
], ComponentService);
|
|
748
|
-
|
|
749
820
|
// // AoT requires an exported function for factories
|
|
750
821
|
// export function HttpLoaderFactory(http: HttpClient) {
|
|
751
822
|
// return new TranslateHttpLoader(http);
|
|
@@ -780,7 +851,8 @@ class NgxIsoFormModule {
|
|
|
780
851
|
MatSelectModule,
|
|
781
852
|
MatIconModule], exports: [NgxIsoFormComponent] }); }
|
|
782
853
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NgxIsoFormModule, providers: [
|
|
783
|
-
|
|
854
|
+
{ provide: DateAdapter, useClass: CustomDateAdapter },
|
|
855
|
+
{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
|
|
784
856
|
], imports: [BrowserModule,
|
|
785
857
|
BrowserAnimationsModule,
|
|
786
858
|
TranslateModule,
|
|
@@ -831,7 +903,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
|
|
|
831
903
|
MatIconModule,
|
|
832
904
|
],
|
|
833
905
|
providers: [
|
|
834
|
-
|
|
906
|
+
{ provide: DateAdapter, useClass: CustomDateAdapter },
|
|
907
|
+
{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
|
|
835
908
|
],
|
|
836
909
|
exports: [
|
|
837
910
|
NgxIsoFormComponent
|
|
@@ -839,6 +912,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
|
|
|
839
912
|
}]
|
|
840
913
|
}] });
|
|
841
914
|
|
|
915
|
+
class ComponentService {
|
|
916
|
+
getComponent(viewContainerRef, dynamicModel) {
|
|
917
|
+
const componentRef = viewContainerRef.createComponent(dynamicModel.component);
|
|
918
|
+
if (dynamicModel.prop) {
|
|
919
|
+
componentRef.instance.prop = dynamicModel.prop;
|
|
920
|
+
}
|
|
921
|
+
return componentRef;
|
|
922
|
+
}
|
|
923
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
924
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ComponentService, providedIn: 'root' }); }
|
|
925
|
+
}
|
|
926
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ComponentService, decorators: [{
|
|
927
|
+
type: Injectable,
|
|
928
|
+
args: [{
|
|
929
|
+
providedIn: 'root'
|
|
930
|
+
}]
|
|
931
|
+
}] });
|
|
932
|
+
|
|
842
933
|
class IsoForm {
|
|
843
934
|
constructor(model) {
|
|
844
935
|
this.getFormModel = () => {
|