@sotoa-ui/dynamic-form 0.0.4 → 0.0.5
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.
|
@@ -601,6 +601,9 @@ class MatArrayComponent extends AbstractControlFieldComponent {
|
|
|
601
601
|
super();
|
|
602
602
|
}
|
|
603
603
|
addItem() {
|
|
604
|
+
if (!this.field.instances) {
|
|
605
|
+
this.field.instances = [];
|
|
606
|
+
}
|
|
604
607
|
const i = this.field.instances.length > 0 ? this.field.instances[this.field.instances.length - 1].number + 1 : 0;
|
|
605
608
|
const fields = _.cloneDeep(this.field.field.fields);
|
|
606
609
|
const grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null);
|
|
@@ -613,21 +616,18 @@ class MatArrayComponent extends AbstractControlFieldComponent {
|
|
|
613
616
|
this.ref.detectChanges();
|
|
614
617
|
}
|
|
615
618
|
deleteItem(index, inst) {
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
this.dynamicFormService.pathFieldMap.delete(key);
|
|
622
|
-
}
|
|
619
|
+
this.field.instances.splice(index, 1);
|
|
620
|
+
for (const key of this.dynamicService.data.pathFieldConfigMap.keys()) {
|
|
621
|
+
if (key.startsWith(`${this.path}[${inst.number}]`)) {
|
|
622
|
+
this.dynamicFormService.data.pathFieldConfigMap.delete(key);
|
|
623
|
+
}
|
|
623
624
|
}
|
|
624
|
-
|
|
625
|
-
*/
|
|
625
|
+
;
|
|
626
626
|
this.array.removeAt(index);
|
|
627
627
|
this.ref.detectChanges();
|
|
628
628
|
}
|
|
629
629
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
630
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatArrayComponent, isStandalone: true, selector: "sot-mat-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n @if (field.accordion) {\n <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n <mat-expansion-panel [expanded]=\"field.opened\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n </mat-panel-title>\n </mat-expansion-panel-header>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </mat-expansion-panel>\n </mat-accordion>\n } @else {\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div class=\"sot-formfield-array-content\">\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </div>\n }\n </fieldset>\n</div>\n\n<ng-template #groupFields>\n <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n <div [formArrayName]=\"field.name\">\n @for (inst of field.instances; track inst; let i = $index) {\n <fieldset class=\"sot-formfield-array-element\"\n [ngClass]=\"field.elementClassName\">\n <legend class=\"sot-formfield-array-element-label\">\n {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n </legend>\n <div class=\"sot-formfield-array-element-content\"\n [ngClass]=\"field.elementContentClassName\">\n @for (f of inst.fields; track f.name + f.type) {\n <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n <ng-container matDynamicField\n [type]=\"f.type\"\n [path]=\"path + '.' + f.name\"\n [field]=\"f\"\n [group]=\"inst.group\"\n [instancePath]=\"path + '[' + inst.number + ']'\"\n ></ng-container>\n </div>\n }\n </div>\n <div class=\"sot-formfield-array-element-action\">\n @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n @if (field.deleteButton && field.deleteButton.matIcon) {\n <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n {{ field.deleteButton!.matIcon }}\n </mat-icon>\n }\n {{ field.deleteButton ? field.deleteButton
|
|
630
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatArrayComponent, isStandalone: true, selector: "sot-mat-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n @if (field.accordion) {\n <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n <mat-expansion-panel [expanded]=\"field.opened\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n </mat-panel-title>\n </mat-expansion-panel-header>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </mat-expansion-panel>\n </mat-accordion>\n } @else {\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div class=\"sot-formfield-array-content\">\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </div>\n }\n </fieldset>\n</div>\n\n<ng-template #groupFields>\n <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n <div [formArrayName]=\"field.name\">\n @for (inst of field.instances; track inst; let i = $index) {\n <fieldset class=\"sot-formfield-array-element\"\n [ngClass]=\"field.elementClassName\">\n <legend class=\"sot-formfield-array-element-label\">\n {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n </legend>\n <div class=\"sot-formfield-array-element-content\"\n [ngClass]=\"field.elementContentClassName\">\n @for (f of inst.fields; track f.name + f.type) {\n <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n <ng-container matDynamicField\n [type]=\"f.type\"\n [path]=\"path + '.' + f.name\"\n [field]=\"f\"\n [group]=\"inst.group\"\n [instancePath]=\"path + '[' + inst.number + ']'\"\n ></ng-container>\n </div>\n }\n </div>\n <div class=\"sot-formfield-array-element-action\">\n @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n @if (field.deleteButton && field.deleteButton.matIcon) {\n <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n {{ field.deleteButton!.matIcon }}\n </mat-icon>\n }\n {{ field.deleteButton ? field.deleteButton!.label : 'Supprimer' }}\n </button>\n }\n </div>\n </fieldset>\n }\n @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n <div class=\"sot-formfield-array-add-button\">\n <button mat-raised-button\n color=\"primary\"\n type=\"button\"\n (click)=\"addItem()\"\n >\n @if (field.addButton && field.addButton.matIcon) {\n <mat-icon [title]=\"field.addButton!.title ? field.addButton!.title : ''\">\n {{ field.addButton!.matIcon }}\n </mat-icon>\n }\n {{ field.addButton ? field.addButton.label : 'Ajouter' }}\n </button>\n </div>\n }\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (array && !array.untouched && array.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n </div>\n </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "directive", type: i0.forwardRef(() => i1$2.MatAccordion), selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i0.forwardRef(() => i1$2.MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => i1$2.MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => i1$2.MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => MatButton), selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
631
631
|
}
|
|
632
632
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatArrayComponent, decorators: [{
|
|
633
633
|
type: Component,
|
|
@@ -641,7 +641,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
641
641
|
ReactiveFormsModule,
|
|
642
642
|
MatError,
|
|
643
643
|
NgTemplateOutlet
|
|
644
|
-
], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n @if (field.accordion) {\n <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n <mat-expansion-panel [expanded]=\"field.opened\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n </mat-panel-title>\n </mat-expansion-panel-header>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </mat-expansion-panel>\n </mat-accordion>\n } @else {\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div class=\"sot-formfield-array-content\">\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </div>\n }\n </fieldset>\n</div>\n\n<ng-template #groupFields>\n <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n <div [formArrayName]=\"field.name\">\n @for (inst of field.instances; track inst; let i = $index) {\n <fieldset class=\"sot-formfield-array-element\"\n [ngClass]=\"field.elementClassName\">\n <legend class=\"sot-formfield-array-element-label\">\n {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n </legend>\n <div class=\"sot-formfield-array-element-content\"\n [ngClass]=\"field.elementContentClassName\">\n @for (f of inst.fields; track f.name + f.type) {\n <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n <ng-container matDynamicField\n [type]=\"f.type\"\n [path]=\"path + '.' + f.name\"\n [field]=\"f\"\n [group]=\"inst.group\"\n [instancePath]=\"path + '[' + inst.number + ']'\"\n ></ng-container>\n </div>\n }\n </div>\n <div class=\"sot-formfield-array-element-action\">\n @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n @if (field.deleteButton && field.deleteButton.matIcon) {\n <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n {{ field.deleteButton!.matIcon }}\n </mat-icon>\n }\n {{ field.deleteButton ? field.deleteButton
|
|
644
|
+
], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n @if (field.accordion) {\n <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n <mat-expansion-panel [expanded]=\"field.opened\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n </mat-panel-title>\n </mat-expansion-panel-header>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </mat-expansion-panel>\n </mat-accordion>\n } @else {\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div class=\"sot-formfield-array-content\">\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </div>\n }\n </fieldset>\n</div>\n\n<ng-template #groupFields>\n <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n <div [formArrayName]=\"field.name\">\n @for (inst of field.instances; track inst; let i = $index) {\n <fieldset class=\"sot-formfield-array-element\"\n [ngClass]=\"field.elementClassName\">\n <legend class=\"sot-formfield-array-element-label\">\n {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n </legend>\n <div class=\"sot-formfield-array-element-content\"\n [ngClass]=\"field.elementContentClassName\">\n @for (f of inst.fields; track f.name + f.type) {\n <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n <ng-container matDynamicField\n [type]=\"f.type\"\n [path]=\"path + '.' + f.name\"\n [field]=\"f\"\n [group]=\"inst.group\"\n [instancePath]=\"path + '[' + inst.number + ']'\"\n ></ng-container>\n </div>\n }\n </div>\n <div class=\"sot-formfield-array-element-action\">\n @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n @if (field.deleteButton && field.deleteButton.matIcon) {\n <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n {{ field.deleteButton!.matIcon }}\n </mat-icon>\n }\n {{ field.deleteButton ? field.deleteButton!.label : 'Supprimer' }}\n </button>\n }\n </div>\n </fieldset>\n }\n @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n <div class=\"sot-formfield-array-add-button\">\n <button mat-raised-button\n color=\"primary\"\n type=\"button\"\n (click)=\"addItem()\"\n >\n @if (field.addButton && field.addButton.matIcon) {\n <mat-icon [title]=\"field.addButton!.title ? field.addButton!.title : ''\">\n {{ field.addButton!.matIcon }}\n </mat-icon>\n }\n {{ field.addButton ? field.addButton.label : 'Ajouter' }}\n </button>\n </div>\n }\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (array && !array.untouched && array.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n </div>\n </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"] }]
|
|
645
645
|
}], ctorParameters: () => [] });
|
|
646
646
|
|
|
647
647
|
class MatRowComponent extends AbstractFieldComponent {
|