ngx-iso-form 2.0.1 → 2.1.1
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 +1 -1
- package/esm2022/lib/Models/Schema.mjs +1 -1
- package/esm2022/lib/ngx-iso-form.component.mjs +11 -6
- package/esm2022/lib/ngx-iso-form.module.mjs +7 -5
- package/esm2022/lib/ngx-iso-form.service.mjs +59 -29
- 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/fesm2022/ngx-iso-form.mjs +130 -51
- 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 +1 -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/package.json +1 -1
|
@@ -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,44 +602,44 @@ 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) {
|
|
549
616
|
const elements = [];
|
|
550
617
|
const ccy = structuredClone(item);
|
|
551
618
|
const amt = structuredClone(item);
|
|
552
|
-
ccy.id = `${ccy.id}
|
|
553
|
-
ccy.name =
|
|
619
|
+
ccy.id = `${ccy.id}_Ccy`;
|
|
620
|
+
ccy.name = 'Ccy';
|
|
554
621
|
ccy.fractionDigits = '';
|
|
555
622
|
ccy.totalDigits = '';
|
|
556
|
-
ccy.maxLength =
|
|
557
|
-
ccy.xpath = `${ccy.xpath}@
|
|
623
|
+
ccy.maxLength = '3';
|
|
624
|
+
ccy.xpath = `${ccy.xpath}@Ccy`;
|
|
558
625
|
ccy.isCurrency = false;
|
|
559
626
|
elements.push(ccy);
|
|
560
|
-
amt.id = `${amt.id}
|
|
561
|
-
amt.xpath = `${amt.xpath}/
|
|
627
|
+
amt.id = `${amt.id}_Amt`;
|
|
628
|
+
amt.xpath = `${amt.xpath}/Amt`;
|
|
562
629
|
amt.isCurrency = false;
|
|
563
630
|
amt.pattern = '';
|
|
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) {
|
|
@@ -598,7 +665,9 @@ class NgxIsoFormComponent {
|
|
|
598
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();
|
|
@@ -610,7 +679,6 @@ class NgxIsoFormComponent {
|
|
|
610
679
|
cloneData = structuredClone(data);
|
|
611
680
|
}
|
|
612
681
|
catch (e) {
|
|
613
|
-
debugger;
|
|
614
682
|
cloneData = JSON.parse(JSON.stringify(data));
|
|
615
683
|
}
|
|
616
684
|
return cloneData;
|
|
@@ -727,15 +795,19 @@ class NgxIsoFormComponent {
|
|
|
727
795
|
return formControl;
|
|
728
796
|
}
|
|
729
797
|
getFormControl(node) {
|
|
730
|
-
debugger;
|
|
731
798
|
return this.service.getFormControl('');
|
|
732
799
|
}
|
|
800
|
+
getChoiceFormControl(choiceKey) {
|
|
801
|
+
const formControl = this.service.getFormControl('');
|
|
802
|
+
formControl.setValue(choiceKey);
|
|
803
|
+
return formControl;
|
|
804
|
+
}
|
|
733
805
|
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 }); }
|
|
734
|
-
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.
|
|
806
|
+
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 }); }
|
|
735
807
|
}
|
|
736
808
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NgxIsoFormComponent, decorators: [{
|
|
737
809
|
type: Component,
|
|
738
|
-
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.
|
|
810
|
+
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"] }]
|
|
739
811
|
}], ctorParameters: function () { return [{ type: NgxIsoService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { form: [{
|
|
740
812
|
type: Input,
|
|
741
813
|
args: [{ required: true }]
|
|
@@ -744,19 +816,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
|
|
|
744
816
|
args: [{ required: true }]
|
|
745
817
|
}] } });
|
|
746
818
|
|
|
747
|
-
let ComponentService = class ComponentService {
|
|
748
|
-
getComponent(viewContainerRef, dynamicModel) {
|
|
749
|
-
const componentRef = viewContainerRef.createComponent(dynamicModel.component);
|
|
750
|
-
if (dynamicModel.prop) {
|
|
751
|
-
componentRef.instance.prop = dynamicModel.prop;
|
|
752
|
-
}
|
|
753
|
-
return componentRef;
|
|
754
|
-
}
|
|
755
|
-
};
|
|
756
|
-
ComponentService = __decorate([
|
|
757
|
-
Inject('root')
|
|
758
|
-
], ComponentService);
|
|
759
|
-
|
|
760
819
|
// // AoT requires an exported function for factories
|
|
761
820
|
// export function HttpLoaderFactory(http: HttpClient) {
|
|
762
821
|
// return new TranslateHttpLoader(http);
|
|
@@ -791,7 +850,8 @@ class NgxIsoFormModule {
|
|
|
791
850
|
MatSelectModule,
|
|
792
851
|
MatIconModule], exports: [NgxIsoFormComponent] }); }
|
|
793
852
|
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: NgxIsoFormModule, providers: [
|
|
794
|
-
|
|
853
|
+
{ provide: DateAdapter, useClass: CustomDateAdapter },
|
|
854
|
+
{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
|
|
795
855
|
], imports: [BrowserModule,
|
|
796
856
|
BrowserAnimationsModule,
|
|
797
857
|
TranslateModule,
|
|
@@ -842,7 +902,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
|
|
|
842
902
|
MatIconModule,
|
|
843
903
|
],
|
|
844
904
|
providers: [
|
|
845
|
-
|
|
905
|
+
{ provide: DateAdapter, useClass: CustomDateAdapter },
|
|
906
|
+
{ provide: MAT_DATE_FORMATS, useValue: CUSTOM_DATE_FORMATS }
|
|
846
907
|
],
|
|
847
908
|
exports: [
|
|
848
909
|
NgxIsoFormComponent
|
|
@@ -850,6 +911,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImpor
|
|
|
850
911
|
}]
|
|
851
912
|
}] });
|
|
852
913
|
|
|
914
|
+
class ComponentService {
|
|
915
|
+
getComponent(viewContainerRef, dynamicModel) {
|
|
916
|
+
const componentRef = viewContainerRef.createComponent(dynamicModel.component);
|
|
917
|
+
if (dynamicModel.prop) {
|
|
918
|
+
componentRef.instance.prop = dynamicModel.prop;
|
|
919
|
+
}
|
|
920
|
+
return componentRef;
|
|
921
|
+
}
|
|
922
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
923
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ComponentService, providedIn: 'root' }); }
|
|
924
|
+
}
|
|
925
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.2", ngImport: i0, type: ComponentService, decorators: [{
|
|
926
|
+
type: Injectable,
|
|
927
|
+
args: [{
|
|
928
|
+
providedIn: 'root'
|
|
929
|
+
}]
|
|
930
|
+
}] });
|
|
931
|
+
|
|
853
932
|
class IsoForm {
|
|
854
933
|
constructor(model) {
|
|
855
934
|
this.getFormModel = () => {
|