@sotoa-ui/dynamic-form 0.0.5 → 0.0.7
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.
|
@@ -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 type=\"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 type=\"button\" (click)=\"fileInput.click()\" [disabled]=\"field().disabled\">\n 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 type=\"button\" (click)=\"fileInput.click()\" [disabled]=\"field().disabled\">\n 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 type=\"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 type=\"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 type=\"button\" (click)=\"fileInput.click()\" [disabled]=\"field().disabled\">\n 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 type=\"button\" (click)=\"fileInput.click()\" [disabled]=\"field().disabled\">\n 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 type=\"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']
|