@sotoa-ui/dynamic-form 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, inject, DestroyRef, Component, forwardRef, ChangeDetectorRef, ViewContainerRef, EnvironmentInjector, input, EventEmitter, Output, Optional, Host, SkipSelf, Directive, computed, output, effect } from '@angular/core';
|
|
3
|
-
import { distinctUntilChanged, isObservable } from 'rxjs';
|
|
3
|
+
import { distinctUntilChanged, isObservable, take } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { FormBuilder, Validators, ReactiveFormsModule, NgControl } from '@angular/forms';
|
|
6
6
|
import * as _ from 'lodash-es';
|
|
@@ -29,6 +29,8 @@ import * as i2$3 from '@angular/material/slide-toggle';
|
|
|
29
29
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
30
30
|
import { MatBadge } from '@angular/material/badge';
|
|
31
31
|
import { MatMenuItem } from '@angular/material/menu';
|
|
32
|
+
import * as i2$4 from '@angular/material/dialog';
|
|
33
|
+
import { MatDialogRef, MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
32
34
|
|
|
33
35
|
class ConditionsService {
|
|
34
36
|
constructor() {
|
|
@@ -1074,13 +1076,51 @@ class AcMaterialDynamicFormComponent {
|
|
|
1074
1076
|
// TODO
|
|
1075
1077
|
}
|
|
1076
1078
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1077
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcMaterialDynamicFormComponent, isStandalone: true, selector: "sot-material-dynamic-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formCancel: "formCancel", formSubmit: "formSubmit", formChange: "formChange" }, providers: [DynamicFormService], exportAs: ["dynamicForm"], ngImport: i0, template: "@if (form && config()) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n (submit)=\"handleSubmit($event)\"\r\n [ngClass]=\"config()!.className?.form\">\r\n @if (this.config()!.fields) {\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"config()!.className?.formContent\">\r\n @for (field of config()!.fields; track field.type + field.name) {\r\n <div [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n sotDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- TODO Revoir l'affichage des erreurs -->\r\n @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n <mat-error class=\"dynamic-form-error\">\r\n @for (validation of config()!.validations!; track validation) {\r\n @if (form.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n @if (config()!.buttons) {\r\n <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n @for (button of config()!.buttons; track $index) {\r\n <sot-material-button\r\n [type]=\"button.type\"\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType
|
|
1079
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcMaterialDynamicFormComponent, isStandalone: true, selector: "sot-material-dynamic-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formCancel: "formCancel", formSubmit: "formSubmit", formChange: "formChange" }, providers: [DynamicFormService], exportAs: ["dynamicForm"], ngImport: i0, template: "@if (form && config()) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n (submit)=\"handleSubmit($event)\"\r\n [ngClass]=\"config()!.className?.form\">\r\n @if (this.config()!.fields) {\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"config()!.className?.formContent\">\r\n @for (field of config()!.fields; track field.type + field.name) {\r\n <div [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n sotDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- TODO Revoir l'affichage des erreurs -->\r\n @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n <mat-error class=\"dynamic-form-error\">\r\n @for (validation of config()!.validations!; track validation) {\r\n @if (form.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n @if (config()!.buttons) {\r\n <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n @for (button of config()!.buttons; track $index) {\r\n <sot-material-button\r\n [type]=\"button.type\"\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType\"\r\n [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n [matIcon]=\"button.matIcon\"\r\n [label]=\"button.label\"\r\n [title]=\"button.title\"\r\n [ariaLabel]=\"button.ariaLabel\"\r\n (buttonClick)=\"onClickButton(button)\"\r\n ></sot-material-button>\r\n }\r\n </div>\r\n }\r\n </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: AcDynamicFieldDirective$2, selector: "[sotDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: MaterialButton, selector: "sot-material-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
|
|
1078
1080
|
}
|
|
1079
1081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormComponent, decorators: [{
|
|
1080
1082
|
type: Component,
|
|
1081
|
-
args: [{ exportAs: 'dynamicForm', selector: 'sot-material-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective$2, NgClass, ReactiveFormsModule, MatError, MatIconModule, MatButtonModule, MaterialButton], providers: [DynamicFormService], template: "@if (form && config()) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n (submit)=\"handleSubmit($event)\"\r\n [ngClass]=\"config()!.className?.form\">\r\n @if (this.config()!.fields) {\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"config()!.className?.formContent\">\r\n @for (field of config()!.fields; track field.type + field.name) {\r\n <div [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n sotDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- TODO Revoir l'affichage des erreurs -->\r\n @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n <mat-error class=\"dynamic-form-error\">\r\n @for (validation of config()!.validations!; track validation) {\r\n @if (form.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n @if (config()!.buttons) {\r\n <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n @for (button of config()!.buttons; track $index) {\r\n <sot-material-button\r\n [type]=\"button.type\"\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType
|
|
1083
|
+
args: [{ exportAs: 'dynamicForm', selector: 'sot-material-dynamic-form', standalone: true, imports: [AcDynamicFieldDirective$2, NgClass, ReactiveFormsModule, MatError, MatIconModule, MatButtonModule, MaterialButton], providers: [DynamicFormService], template: "@if (form && config()) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n (submit)=\"handleSubmit($event)\"\r\n [ngClass]=\"config()!.className?.form\">\r\n @if (this.config()!.fields) {\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"config()!.className?.formContent\">\r\n @for (field of config()!.fields; track field.type + field.name) {\r\n <div [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n sotDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n }\r\n\r\n <!-- TODO Revoir l'affichage des erreurs -->\r\n @if (config()!.validations && form && !form.untouched && form.invalid) {\r\n <mat-error class=\"dynamic-form-error\">\r\n @for (validation of config()!.validations!; track validation) {\r\n @if (form.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n @if (config()!.buttons) {\r\n <div class=\"dynamic-form-buttons\" [ngClass]=\"config()!.className?.formButtons\">\r\n @for (button of config()!.buttons; track $index) {\r\n <sot-material-button\r\n [type]=\"button.type\"\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType\"\r\n [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n [matIcon]=\"button.matIcon\"\r\n [label]=\"button.label\"\r\n [title]=\"button.title\"\r\n [ariaLabel]=\"button.ariaLabel\"\r\n (buttonClick)=\"onClickButton(button)\"\r\n ></sot-material-button>\r\n }\r\n </div>\r\n }\r\n </form>\r\n}\r\n", styles: [".dynamic-form-horizontal{display:flex;flex-direction:row;flex-wrap:wrap}.dynamic-form-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}.dynamic-form-error{margin-bottom:2rem}\n"] }]
|
|
1082
1084
|
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], initialValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValues", required: false }] }], formCancel: [{ type: i0.Output, args: ["formCancel"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formChange: [{ type: i0.Output, args: ["formChange"] }] } });
|
|
1083
1085
|
|
|
1086
|
+
class AcMaterialDynamicFormModalComponent {
|
|
1087
|
+
dialogRef = inject((MatDialogRef));
|
|
1088
|
+
dynamicFormService = inject(DynamicFormService);
|
|
1089
|
+
data = inject(MAT_DIALOG_DATA);
|
|
1090
|
+
status;
|
|
1091
|
+
message;
|
|
1092
|
+
get form() {
|
|
1093
|
+
return this.dynamicFormService.form;
|
|
1094
|
+
}
|
|
1095
|
+
constructor() {
|
|
1096
|
+
this.dynamicFormService.createForm(this.data.fields, this.data.validations, this.data.updateOn ?? "change", this.data.initialObject);
|
|
1097
|
+
}
|
|
1098
|
+
ngOnInit() {
|
|
1099
|
+
}
|
|
1100
|
+
onClickButton(button) {
|
|
1101
|
+
if (button.type === 'reset') {
|
|
1102
|
+
this.dialogRef.close();
|
|
1103
|
+
}
|
|
1104
|
+
if (button.action) {
|
|
1105
|
+
button.action(this.form, this.data.initialObject).pipe(take(1)).subscribe((resp) => {
|
|
1106
|
+
if (resp === true) {
|
|
1107
|
+
this.dialogRef.close();
|
|
1108
|
+
}
|
|
1109
|
+
else if (resp) {
|
|
1110
|
+
this.message = resp.message;
|
|
1111
|
+
this.status = resp.status;
|
|
1112
|
+
}
|
|
1113
|
+
});
|
|
1114
|
+
}
|
|
1115
|
+
}
|
|
1116
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1117
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcMaterialDynamicFormModalComponent, isStandalone: true, selector: "ac-dynamic-form-modal", providers: [DynamicFormService], ngImport: i0, template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n @if (data.description) {\r\n <p [innerHTML]=\"data.description\"></p>\r\n }\r\n @if (form) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n [ngClass]=\"data.className?.form\">\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"data.className?.formContent\">\r\n @for (field of data.fields; track field) {\r\n <div\r\n [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n sotDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n </form>\r\n }\r\n @if (message) {\r\n <div [innerHTML]=\"message\"\r\n [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n ></div>\r\n }\r\n</div>\r\n\r\n<div matDialogActions>\r\n <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n @for (button of data.buttons; track $index) {\r\n <sot-material-button\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType\"\r\n [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n [matIcon]=\"button.matIcon\"\r\n [label]=\"button.label\"\r\n [title]=\"button.title\"\r\n [ariaLabel]=\"button.ariaLabel\"\r\n (buttonClick)=\"onClickButton(button)\"\r\n ></sot-material-button>\r\n }\r\n </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i2$4.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2$4.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2$4.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: AcDynamicFieldDirective$2, selector: "[sotDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "component", type: MaterialButton, selector: "sot-material-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
|
|
1118
|
+
}
|
|
1119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcMaterialDynamicFormModalComponent, decorators: [{
|
|
1120
|
+
type: Component,
|
|
1121
|
+
args: [{ selector: "ac-dynamic-form-modal", standalone: true, imports: [NgClass, ReactiveFormsModule, MatIconModule, MatButtonModule, MatDialogModule, AcDynamicFieldDirective$2, MaterialButton], providers: [DynamicFormService], template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n @if (data.description) {\r\n <p [innerHTML]=\"data.description\"></p>\r\n }\r\n @if (form) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n [ngClass]=\"data.className?.form\">\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"data.className?.formContent\">\r\n @for (field of data.fields; track field) {\r\n <div\r\n [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n sotDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n </form>\r\n }\r\n @if (message) {\r\n <div [innerHTML]=\"message\"\r\n [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n ></div>\r\n }\r\n</div>\r\n\r\n<div matDialogActions>\r\n <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n @for (button of data.buttons; track $index) {\r\n <sot-material-button\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType\"\r\n [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n [matIcon]=\"button.matIcon\"\r\n [label]=\"button.label\"\r\n [title]=\"button.title\"\r\n [ariaLabel]=\"button.ariaLabel\"\r\n (buttonClick)=\"onClickButton(button)\"\r\n ></sot-material-button>\r\n }\r\n </div>\r\n</div>\r\n" }]
|
|
1122
|
+
}], ctorParameters: () => [] });
|
|
1123
|
+
|
|
1084
1124
|
let AcDivTextComponent$1 = class AcDivTextComponent extends AbstractFieldComponent {
|
|
1085
1125
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1086
1126
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcDivTextComponent, isStandalone: true, selector: "sot-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n <div [innerHTML]=\"field.label\"></div>\n @if(field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
@@ -1936,5 +1976,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1936
1976
|
* Generated bundle index. Do not edit.
|
|
1937
1977
|
*/
|
|
1938
1978
|
|
|
1939
|
-
export { AbstractControlFieldComponent, AbstractFieldComponent, AcClassicDynamicFormComponent, AcDsfrDynamicFormComponent, AcMaterialDynamicFormComponent, AutocompleteAttribute, ConditionsService, DynamicFormService };
|
|
1979
|
+
export { AbstractControlFieldComponent, AbstractFieldComponent, AcClassicDynamicFormComponent, AcDsfrDynamicFormComponent, AcMaterialDynamicFormComponent, AcMaterialDynamicFormModalComponent, AutocompleteAttribute, ConditionsService, DynamicFormService };
|
|
1940
1980
|
//# sourceMappingURL=sotoa-ui-dynamic-form.mjs.map
|