@sotoa-ui/dynamic-form 0.0.4 → 0.0.6
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 {
|
|
@@ -922,7 +922,12 @@ class MatInputFileComponent {
|
|
|
922
922
|
}
|
|
923
923
|
ngOnInit() {
|
|
924
924
|
if (this.group().get(this.field().name)?.value) {
|
|
925
|
-
|
|
925
|
+
if (!this.field().multiple) {
|
|
926
|
+
this.fichier = this.group().get(this.field().name)?.value;
|
|
927
|
+
}
|
|
928
|
+
else {
|
|
929
|
+
this.fileList = this.group().get(this.field().name)?.value;
|
|
930
|
+
}
|
|
926
931
|
}
|
|
927
932
|
// @ts-ignore
|
|
928
933
|
this.group()
|
|
@@ -950,13 +955,15 @@ class MatInputFileComponent {
|
|
|
950
955
|
onSelectFile(event) {
|
|
951
956
|
if (event && event.target && event.target.files && event.target.files.length > 0) {
|
|
952
957
|
this.fichier = event.target.files[0];
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
958
|
-
|
|
959
|
-
|
|
958
|
+
if (!this.field().multiple) {
|
|
959
|
+
this.writeValue(this.fichier);
|
|
960
|
+
if (this.field().onAddFile) {
|
|
961
|
+
this.field().onAddFile(this.fichier ?? null);
|
|
962
|
+
}
|
|
963
|
+
}
|
|
964
|
+
else {
|
|
965
|
+
this.addFile();
|
|
966
|
+
}
|
|
960
967
|
}
|
|
961
968
|
}
|
|
962
969
|
addFile() {
|
|
@@ -975,11 +982,17 @@ class MatInputFileComponent {
|
|
|
975
982
|
}
|
|
976
983
|
this.writeValue(this.fileList);
|
|
977
984
|
}
|
|
978
|
-
deleteFile(
|
|
979
|
-
|
|
980
|
-
|
|
985
|
+
deleteFile(file) {
|
|
986
|
+
if (!this.field().multiple) {
|
|
987
|
+
this.fichier = null;
|
|
988
|
+
this.writeValue(null);
|
|
989
|
+
}
|
|
990
|
+
else {
|
|
991
|
+
this.fileList.splice(this.fileList.indexOf(file), 1);
|
|
992
|
+
this.writeValue(this.fileList);
|
|
993
|
+
}
|
|
981
994
|
if (this.field().onDeleteFile) {
|
|
982
|
-
this.field().onDeleteFile(
|
|
995
|
+
this.field().onDeleteFile(file);
|
|
983
996
|
}
|
|
984
997
|
}
|
|
985
998
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatInputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
@@ -989,7 +1002,7 @@ class MatInputFileComponent {
|
|
|
989
1002
|
multi: true,
|
|
990
1003
|
useExisting: forwardRef(() => MatInputFileComponent),
|
|
991
1004
|
},
|
|
992
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div>\n @if (field().multiple) {\n <
|
|
1005
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sot-file-wrapper\">\n @if (field().multiple) {\n <label [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <ul>\n @for (item of fileList; track item) {\n <li class=\"file-list-item\">\n <div>\n {{ item.name }}\n </div>\n <div>\n @if (!field().disabled) {\n <button mat-icon-button\n (click)=\"deleteFile(item)\"\n title=\"Supprimer\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </li>\n }\n </ul>\n <div>\n <button matButton (click)=\"fileInput.click()\" [disabled]=\"field().disabled\">Choisir un\n fichier\n </button>\n <input\n #fileInput\n hidden\n type=\"file\"\n [attr.id]=\"'file-upload-' + field().id\"\n name=\"file-upload\"\n (change)=\"onSelectFile($event)\"\n [accept]=\"field().accept ? field().accept : '*/*'\"\n />\n </div>\n } @else {\n <label [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <input\n #fileInput\n hidden\n type=\"file\"\n [attr.id]=\"'file-upload-' + field().id\"\n name=\"file-upload\"\n (change)=\"onSelectFile($event)\"\n [accept]=\"field().accept ? field().accept : '*/*'\"\n />\n <button matButton (click)=\"fileInput.click()\" [disabled]=\"field().disabled\">Choisir un fichier\n </button>\n\n @if (fichier) {\n <div class=\"file-list-item\">\n <div>{{ fichier!.name }}</div>\n @if (!field().disabled) {\n <button mat-button (click)=\"deleteFile(fichier!)\">Supprimer</button>\n }\n </div>\n }\n }\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i1$1.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: "component", type: i1$1.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
|
|
993
1006
|
}
|
|
994
1007
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatInputFileComponent, decorators: [{
|
|
995
1008
|
type: Component,
|
|
@@ -999,7 +1012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
999
1012
|
multi: true,
|
|
1000
1013
|
useExisting: forwardRef(() => MatInputFileComponent),
|
|
1001
1014
|
},
|
|
1002
|
-
], template: "<div>\n @if (field().multiple) {\n <
|
|
1015
|
+
], template: "<div class=\"sot-file-wrapper\">\n @if (field().multiple) {\n <label [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <ul>\n @for (item of fileList; track item) {\n <li class=\"file-list-item\">\n <div>\n {{ item.name }}\n </div>\n <div>\n @if (!field().disabled) {\n <button mat-icon-button\n (click)=\"deleteFile(item)\"\n title=\"Supprimer\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </li>\n }\n </ul>\n <div>\n <button matButton (click)=\"fileInput.click()\" [disabled]=\"field().disabled\">Choisir un\n fichier\n </button>\n <input\n #fileInput\n hidden\n type=\"file\"\n [attr.id]=\"'file-upload-' + field().id\"\n name=\"file-upload\"\n (change)=\"onSelectFile($event)\"\n [accept]=\"field().accept ? field().accept : '*/*'\"\n />\n </div>\n } @else {\n <label [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <input\n #fileInput\n hidden\n type=\"file\"\n [attr.id]=\"'file-upload-' + field().id\"\n name=\"file-upload\"\n (change)=\"onSelectFile($event)\"\n [accept]=\"field().accept ? field().accept : '*/*'\"\n />\n <button matButton (click)=\"fileInput.click()\" [disabled]=\"field().disabled\">Choisir un fichier\n </button>\n\n @if (fichier) {\n <div class=\"file-list-item\">\n <div>{{ fichier!.name }}</div>\n @if (!field().disabled) {\n <button mat-button (click)=\"deleteFile(fichier!)\">Supprimer</button>\n }\n </div>\n }\n }\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"] }]
|
|
1003
1016
|
}], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], fileInput: [{
|
|
1004
1017
|
type: ViewChild,
|
|
1005
1018
|
args: ['fileInput']
|