fx-form-builder-wrapper 2.0.4 → 2.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.
- package/esm2022/lib/components/date-picker/date-picker.component.mjs +5 -3
- package/esm2022/lib/components/uploader/uploader.component.mjs +215 -79
- package/fesm2022/fx-form-builder-wrapper.mjs +216 -79
- package/fesm2022/fx-form-builder-wrapper.mjs.map +1 -1
- package/lib/components/uploader/uploader.component.d.ts +2 -0
- package/package.json +2 -2
|
@@ -967,6 +967,12 @@ class UploaderComponent extends FxBaseComponent {
|
|
|
967
967
|
uploadedFiles: [],
|
|
968
968
|
deletedFiles: []
|
|
969
969
|
};
|
|
970
|
+
categories = [
|
|
971
|
+
'Oral Images',
|
|
972
|
+
'Past Docs',
|
|
973
|
+
'X-Rays',
|
|
974
|
+
'Profile',
|
|
975
|
+
];
|
|
970
976
|
destroy$ = new Subject();
|
|
971
977
|
http = inject(HttpClient);
|
|
972
978
|
constructor(cdr, fxBuilderWrapperService) {
|
|
@@ -1062,67 +1068,68 @@ class UploaderComponent extends FxBaseComponent {
|
|
|
1062
1068
|
// }
|
|
1063
1069
|
// });
|
|
1064
1070
|
// }
|
|
1065
|
-
ngOnInit() {
|
|
1066
|
-
|
|
1067
|
-
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
1080
|
-
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
|
|
1092
|
-
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
|
|
1100
|
-
|
|
1101
|
-
|
|
1102
|
-
|
|
1103
|
-
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
|
|
1107
|
-
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
|
|
1125
|
-
}
|
|
1071
|
+
// ngOnInit(): void {
|
|
1072
|
+
// this.fxBuilderWrapperService.variables$
|
|
1073
|
+
// .pipe(takeUntil(this.destroy$))
|
|
1074
|
+
// .subscribe((variables: any) => {
|
|
1075
|
+
// if (!variables) return;
|
|
1076
|
+
// const uploadedFilesMap: { [key: string]: string[] } = {};
|
|
1077
|
+
// // Extract uploader keys and their corresponding URL arrays
|
|
1078
|
+
// for (const [key, value] of Object.entries(variables)) {
|
|
1079
|
+
// if (key.includes('uploader') && Array.isArray(value)) {
|
|
1080
|
+
// uploadedFilesMap[key] = value;
|
|
1081
|
+
// }
|
|
1082
|
+
// }
|
|
1083
|
+
// for (const [uploaderKey, urls] of Object.entries(uploadedFilesMap)) {
|
|
1084
|
+
// // const imageFetches: Observable<{ result: string; originalUrl: any; title:string ; notes:string }>[] = [];
|
|
1085
|
+
// // urls.forEach((originalUrl:any) => {
|
|
1086
|
+
// // if (originalUrl) {
|
|
1087
|
+
// // const image$ = this.http.get(originalUrl?.originalUrl, { responseType: 'blob' }).pipe(
|
|
1088
|
+
// // map((blob: Blob) => ({
|
|
1089
|
+
// // result: URL.createObjectURL(blob), // for preview
|
|
1090
|
+
// // originalUrl: originalUrl?.originalUrl // preserve original
|
|
1091
|
+
// // }))
|
|
1092
|
+
// // );
|
|
1093
|
+
// // imageFetches.push(image$);
|
|
1094
|
+
// // }
|
|
1095
|
+
// // });
|
|
1096
|
+
// const imageFetches: Observable<{ result: string; originalUrl: any; title: string; notes: string }>[] = [];
|
|
1097
|
+
// urls.forEach((originalUrl: any) => {
|
|
1098
|
+
// if (originalUrl) {
|
|
1099
|
+
// const image$ = this.http.get(originalUrl?.originalUrl, { responseType: 'blob' }).pipe(
|
|
1100
|
+
// map((blob: Blob) => ({
|
|
1101
|
+
// result: URL.createObjectURL(blob), // for preview
|
|
1102
|
+
// originalUrl: originalUrl?.originalUrl, // preserve original
|
|
1103
|
+
// title: originalUrl?.title || '', // default empty if not present
|
|
1104
|
+
// notes: originalUrl?.notes || ''
|
|
1105
|
+
// }))
|
|
1106
|
+
// );
|
|
1107
|
+
// imageFetches.push(image$);
|
|
1108
|
+
// }
|
|
1109
|
+
// });
|
|
1110
|
+
// if (imageFetches.length > 0) {
|
|
1111
|
+
// forkJoin(imageFetches).subscribe({
|
|
1112
|
+
// next: (imageData) => {
|
|
1113
|
+
// const formatted = imageData.map(item => ({
|
|
1114
|
+
// id: uuidv4(),
|
|
1115
|
+
// file: null,
|
|
1116
|
+
// originalUrl: item.originalUrl,
|
|
1117
|
+
// result: item.result,
|
|
1118
|
+
// title: item.title,
|
|
1119
|
+
// notes: ''
|
|
1120
|
+
// }));
|
|
1121
|
+
// this.uploadedFiles = [...this.uploadedFiles, ...formatted];
|
|
1122
|
+
// this.formattedData.uploadedFiles = this.uploadedFiles;
|
|
1123
|
+
// this.uploadFileControl.setValue(this.formattedData);
|
|
1124
|
+
// },
|
|
1125
|
+
// error: (err) => {
|
|
1126
|
+
// console.error(`Failed to fetch images for ${uploaderKey}:`, err);
|
|
1127
|
+
// }
|
|
1128
|
+
// });
|
|
1129
|
+
// }
|
|
1130
|
+
// }
|
|
1131
|
+
// });
|
|
1132
|
+
// }
|
|
1126
1133
|
// ngOnInit(): void {
|
|
1127
1134
|
// this.fxBuilderWrapperService.variables$
|
|
1128
1135
|
// .pipe(takeUntil(this.destroy$))
|
|
@@ -1184,29 +1191,147 @@ class UploaderComponent extends FxBaseComponent {
|
|
|
1184
1191
|
// }
|
|
1185
1192
|
// }
|
|
1186
1193
|
// }
|
|
1194
|
+
// onFileSelected(event: Event) {
|
|
1195
|
+
// const input = event.target as HTMLInputElement;
|
|
1196
|
+
// if (input.files) {
|
|
1197
|
+
// for (let i = 0; i < input.files.length; i++) {
|
|
1198
|
+
// const file = input.files[i];
|
|
1199
|
+
// const reader = new FileReader();
|
|
1200
|
+
// reader.onload = e => {
|
|
1201
|
+
// const newFile = {
|
|
1202
|
+
// id: uuidv4(),
|
|
1203
|
+
// file: file,
|
|
1204
|
+
// originalUrl: null,
|
|
1205
|
+
// result: e.target?.result,
|
|
1206
|
+
// name: file.name,
|
|
1207
|
+
// title: '',
|
|
1208
|
+
// notes: '',
|
|
1209
|
+
// category: '',
|
|
1210
|
+
// type: this.detectFileType(file),
|
|
1211
|
+
// };
|
|
1212
|
+
// this.uploadedFiles.push(newFile);
|
|
1213
|
+
// this.formattedData.uploadedFiles = this.uploadedFiles;
|
|
1214
|
+
// this.uploadFileControl.setValue(this.formattedData);
|
|
1215
|
+
// };
|
|
1216
|
+
// reader.readAsDataURL(file);
|
|
1217
|
+
// }
|
|
1218
|
+
// }
|
|
1219
|
+
// }
|
|
1220
|
+
// ngOnInit(): void {
|
|
1221
|
+
// this.fxBuilderWrapperService.variables$
|
|
1222
|
+
// .pipe(takeUntil(this.destroy$))
|
|
1223
|
+
// .subscribe((variables: any) => {
|
|
1224
|
+
// if (!variables) return;
|
|
1225
|
+
// const uploadedFilesMap: { [key: string]: any[] } = {};
|
|
1226
|
+
// for (const [key, value] of Object.entries(variables)) {
|
|
1227
|
+
// if (key.includes('uploader') && Array.isArray(value)) {
|
|
1228
|
+
// uploadedFilesMap[key] = value;
|
|
1229
|
+
// }
|
|
1230
|
+
// }
|
|
1231
|
+
// for (const [uploaderKey, urls] of Object.entries(uploadedFilesMap)) {
|
|
1232
|
+
// const formatted = urls
|
|
1233
|
+
// .filter((fileObj: any) => !!fileObj)
|
|
1234
|
+
// .map((fileObj: any) => {
|
|
1235
|
+
// // const fileType = this.detectFileTypeFromUrl(fileObj?.originalUrl || fileObj?.name);
|
|
1236
|
+
// return {
|
|
1237
|
+
// id: uuidv4(),
|
|
1238
|
+
// file: null,
|
|
1239
|
+
// originalUrl: fileObj.originalUrl,
|
|
1240
|
+
// result: fileObj?.type === 'image' ? fileObj.originalUrl.previewUrl : null,
|
|
1241
|
+
// name: fileObj?.name || '',
|
|
1242
|
+
// title: fileObj?.title || '',
|
|
1243
|
+
// notes: fileObj?.notes || '',
|
|
1244
|
+
// category: fileObj?.category || '',
|
|
1245
|
+
// type: fileObj?.type,
|
|
1246
|
+
// };
|
|
1247
|
+
// });
|
|
1248
|
+
// if (formatted.length > 0) {
|
|
1249
|
+
// this.uploadedFiles = [...this.uploadedFiles, ...formatted];
|
|
1250
|
+
// this.formattedData.uploadedFiles = this.uploadedFiles;
|
|
1251
|
+
// this.uploadFileControl.setValue(this.formattedData);
|
|
1252
|
+
// }
|
|
1253
|
+
// }
|
|
1254
|
+
// });
|
|
1255
|
+
// }
|
|
1256
|
+
ngOnInit() {
|
|
1257
|
+
this.fxBuilderWrapperService.variables$
|
|
1258
|
+
.pipe(takeUntil(this.destroy$))
|
|
1259
|
+
.subscribe((variables) => {
|
|
1260
|
+
if (!variables)
|
|
1261
|
+
return;
|
|
1262
|
+
const uploadedFilesMap = {};
|
|
1263
|
+
for (const [key, value] of Object.entries(variables)) {
|
|
1264
|
+
if (key.includes('uploader') && value?.uploadedFiles) {
|
|
1265
|
+
uploadedFilesMap[key] = value.uploadedFiles;
|
|
1266
|
+
}
|
|
1267
|
+
}
|
|
1268
|
+
for (const [uploaderKey, files] of Object.entries(uploadedFilesMap)) {
|
|
1269
|
+
const formatted = files
|
|
1270
|
+
.filter((fileObj) => !!fileObj)
|
|
1271
|
+
.map((fileObj) => {
|
|
1272
|
+
const originalUrlObj = fileObj.originalUrl;
|
|
1273
|
+
const fileName = originalUrlObj?.fileName || '';
|
|
1274
|
+
const fileUrl = originalUrlObj?.fileUrl || '';
|
|
1275
|
+
const previewUrl = originalUrlObj?.previewUrl;
|
|
1276
|
+
const type = fileObj?.type;
|
|
1277
|
+
// detect type based on file extension
|
|
1278
|
+
// const fileType = this.detectFileTypeFromUrl(fileName || fileUrl);
|
|
1279
|
+
return {
|
|
1280
|
+
id: v4(),
|
|
1281
|
+
file: null, // nothing local
|
|
1282
|
+
originalUrl: originalUrlObj, // keep whole object
|
|
1283
|
+
result: type === 'image'
|
|
1284
|
+
? (previewUrl) // prefer previewUrl, fallback to fileUrl
|
|
1285
|
+
: null,
|
|
1286
|
+
name: fileName,
|
|
1287
|
+
title: fileObj?.title || '',
|
|
1288
|
+
notes: fileObj?.notes || '',
|
|
1289
|
+
category: fileObj?.category || '',
|
|
1290
|
+
type: type, // computed type
|
|
1291
|
+
};
|
|
1292
|
+
});
|
|
1293
|
+
if (formatted.length > 0) {
|
|
1294
|
+
this.uploadedFiles = [...this.uploadedFiles, ...formatted];
|
|
1295
|
+
this.formattedData.uploadedFiles = this.uploadedFiles;
|
|
1296
|
+
this.uploadFileControl.setValue(this.formattedData);
|
|
1297
|
+
}
|
|
1298
|
+
}
|
|
1299
|
+
});
|
|
1300
|
+
}
|
|
1187
1301
|
onFileSelected(event) {
|
|
1188
1302
|
const input = event.target;
|
|
1189
|
-
if (input.files)
|
|
1190
|
-
|
|
1191
|
-
|
|
1303
|
+
if (!input.files)
|
|
1304
|
+
return;
|
|
1305
|
+
Array.from(input.files).forEach(file => {
|
|
1306
|
+
const fileType = this.detectFileType(file);
|
|
1307
|
+
const newFile = {
|
|
1308
|
+
id: v4(),
|
|
1309
|
+
file: file,
|
|
1310
|
+
originalUrl: null,
|
|
1311
|
+
result: null, // will be filled for images only
|
|
1312
|
+
name: file.name,
|
|
1313
|
+
title: '',
|
|
1314
|
+
notes: '',
|
|
1315
|
+
category: '',
|
|
1316
|
+
type: fileType, // <-- keep detected type
|
|
1317
|
+
};
|
|
1318
|
+
if (fileType === 'image') {
|
|
1192
1319
|
const reader = new FileReader();
|
|
1193
1320
|
reader.onload = e => {
|
|
1194
|
-
|
|
1195
|
-
id: v4(),
|
|
1196
|
-
file: file,
|
|
1197
|
-
originalUrl: null,
|
|
1198
|
-
result: e.target?.result,
|
|
1199
|
-
name: file.name,
|
|
1200
|
-
title: '',
|
|
1201
|
-
notes: ''
|
|
1202
|
-
};
|
|
1321
|
+
newFile.result = e.target?.result;
|
|
1203
1322
|
this.uploadedFiles.push(newFile);
|
|
1204
1323
|
this.formattedData.uploadedFiles = this.uploadedFiles;
|
|
1205
1324
|
this.uploadFileControl.setValue(this.formattedData);
|
|
1206
1325
|
};
|
|
1207
|
-
reader.readAsDataURL(file);
|
|
1326
|
+
reader.readAsDataURL(file); // only images need preview
|
|
1208
1327
|
}
|
|
1209
|
-
|
|
1328
|
+
else {
|
|
1329
|
+
// non-image → push directly
|
|
1330
|
+
this.uploadedFiles.push(newFile);
|
|
1331
|
+
this.formattedData.uploadedFiles = this.uploadedFiles;
|
|
1332
|
+
this.uploadFileControl.setValue(this.formattedData);
|
|
1333
|
+
}
|
|
1334
|
+
});
|
|
1210
1335
|
}
|
|
1211
1336
|
onMetaChange() {
|
|
1212
1337
|
this.formattedData.uploadedFiles = this.uploadedFiles;
|
|
@@ -1255,12 +1380,23 @@ class UploaderComponent extends FxBaseComponent {
|
|
|
1255
1380
|
validations() {
|
|
1256
1381
|
return [FxValidatorService.required];
|
|
1257
1382
|
}
|
|
1383
|
+
detectFileType(file) {
|
|
1384
|
+
const mime = (file.type || '').toLowerCase();
|
|
1385
|
+
const name = (file.name || '').toLowerCase();
|
|
1386
|
+
if (mime.startsWith('image/') || /\.(png|jpe?g|gif|webp|bmp|svg)$/i.test(name))
|
|
1387
|
+
return 'image';
|
|
1388
|
+
if (mime === 'text/csv' || name.endsWith('.csv'))
|
|
1389
|
+
return 'csv';
|
|
1390
|
+
if (mime.startsWith('text/') || /\.(txt|md|rtf|log|json|xml|yaml|yml)$/i.test(name))
|
|
1391
|
+
return 'text';
|
|
1392
|
+
return 'other';
|
|
1393
|
+
}
|
|
1258
1394
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploaderComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FxBuilderWrapperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1259
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UploaderComponent, isStandalone: true, selector: "fx-uploader", usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\">\r\n <div class=\"custom-upload flex flex-row items-center gap-2 p-2 pb-0 rounded-sm\">\r\n <div class=\"flex flex-col justify-center items-center\" (click)=\"fileInput.click()\">\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.001 3.00195C11.5322 3.00195 9.16722 3.86956 7.23641 5.38414L7.23598 4.59695C7.23598 4.52473 7.22175 4.45321 7.19411 4.38648C7.16647 4.31975 7.12596 4.25912 7.07489 4.20804C7.02381 4.15697 6.96318 4.11646 6.89645 4.08882C6.82972 4.06118 6.7582 4.04695 6.68598 4.04695C6.61375 4.04695 6.54223 4.06118 6.4755 4.08882C6.40877 4.11646 6.34814 4.15697 6.29707 4.20804C6.24599 4.25912 6.20548 4.31975 6.17784 4.38648C6.1502 4.45321 6.13598 4.52473 6.13598 4.59695L6.13642 6.68652C6.13643 6.83239 6.19438 6.97228 6.29752 7.07542C6.40067 7.17856 6.54055 7.23651 6.68642 7.23652H8.77598C8.8482 7.23652 8.91972 7.2223 8.98645 7.19466C9.05318 7.16702 9.11381 7.12651 9.16489 7.07543C9.21596 7.02436 9.25647 6.96373 9.28411 6.897C9.31175 6.83027 9.32598 6.75875 9.32598 6.68652C9.32598 6.6143 9.31175 6.54278 9.28411 6.47605C9.25647 6.40932 9.21596 6.34869 9.16489 6.29761C9.11381 6.24654 9.05318 6.20603 8.98645 6.17839C8.91972 6.15075 8.8482 6.13652 8.77598 6.13652H8.0584C9.7702 4.84387 11.8399 4.10195 14.001 4.10195C19.4751 4.10195 23.901 8.52782 23.901 14.002C23.901 19.4761 19.4751 23.902 14.001 23.902C8.52684 23.902 4.10098 19.4761 4.10098 14.002C4.10098 12.6381 4.38263 11.2888 4.92855 10.0389C4.98691 9.90532 4.98982 9.75399 4.93665 9.61822C4.88347 9.48246 4.77855 9.37336 4.64496 9.31492C4.57877 9.28596 4.50753 9.27032 4.4353 9.2689C4.36306 9.26747 4.29126 9.2803 4.22398 9.30663C4.15671 9.33297 4.09528 9.3723 4.04321 9.42238C3.99114 9.47247 3.94944 9.53232 3.92051 9.59852C3.31393 10.9872 3.00098 12.4866 3.00098 14.002C3.00098 20.0706 7.93236 25.002 14.001 25.002C20.0696 25.002 25.001 20.0706 25.001 14.002C25.001 7.93334 20.0696 3.00195 14.001 3.00195Z\"\r\n fill=\"#F3A041\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M13.9988 6.13965C9.6616 6.13965 6.13379 9.66746 6.13379 14.0046C6.13379 18.3418 9.6616 21.8696 13.9988 21.8696C18.336 21.8696 21.8638 18.3418 21.8638 14.0046C21.8638 9.66746 18.336 6.13965 13.9988 6.13965ZM13.9988 8.22965C14.1447 8.22965 14.2846 8.28759 14.3877 8.39074C14.4908 8.49388 14.5488 8.63378 14.5488 8.77965V13.7769L17.5227 16.7508C17.6258 16.8539 17.6837 16.9938 17.6837 17.1396C17.6837 17.2855 17.6258 17.4254 17.5227 17.5285C17.4195 17.6316 17.2796 17.6896 17.1338 17.6896C16.9879 17.6896 16.8481 17.6316 16.7449 17.5285L13.6099 14.3935C13.5068 14.2904 13.4488 14.1505 13.4488 14.0046V8.77965C13.4488 8.63378 13.5067 8.49388 13.6099 8.39074C13.713 8.28759 13.8529 8.22965 13.9988 8.22965Z\"\r\n fill=\"#F3A041\" />\r\n <rect width=\"28.56\" height=\"28\" rx=\"1.51479\" fill=\"#F3A041\" />\r\n <path\r\n d=\"M15.068 22.7391V17.6708H18.4968L14.2108 12.6025L9.9248 17.6708H13.3536V22.7391H9.06759V22.6969C8.92358 22.7053 8.78643 22.7391 8.63899 22.7391C6.93391 22.7391 5.29866 22.0717 4.09298 20.8835C2.8873 19.6954 2.20996 18.084 2.20996 16.4037C2.20996 13.1532 4.70443 10.5042 7.90523 10.141C8.18585 8.6953 8.96892 7.39118 10.1197 6.45292C11.2706 5.51465 12.7172 5.00089 14.2108 5C15.7047 5.00082 17.1515 5.51452 18.3026 6.45277C19.4537 7.39101 20.2371 8.69516 20.5181 10.141C23.7189 10.5042 26.21 13.1532 26.21 16.4037C26.21 18.084 25.5326 19.6954 24.3269 20.8835C23.1213 22.0717 21.486 22.7391 19.7809 22.7391C19.6369 22.7391 19.4981 22.7053 19.3523 22.6969V22.7391H15.068Z\"\r\n fill=\"white\" />\r\n </svg>\r\n </div>\r\n <a type=\"button\" (click)=\"fileInput.click()\" class=\"text-base cursor-pointer\">\r\n {{ setting('upload-text') }}\r\n </a>\r\n </div>\r\n <input #fileInput type=\"file\" [multiple]=\"setting('multiple-upload')\" (change)=\"onFileSelected($event)\" hidden />\r\n <div class=\"separator\"></div>\r\n <div class=\"file-list flex items-center gap-4 flex-wrap\">\r\n <ng-container *ngIf=\"uploadedFiles?.length\">\r\n <div *ngFor=\"let file of uploadedFiles; let i = index\"\r\n class=\"flex flex-col items-center justify-center\">\r\n <div class=\"relative\">\r\n <div class=\"close_icon cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6837_29683)\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n <mask id=\"mask0_6837_29683\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"4\" y=\"4\" width=\"24\"\r\n height=\"24\">\r\n <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" fill=\"#D9D9D9\" />\r\n </mask>\r\n <g mask=\"url(#mask0_6837_29683)\">\r\n <path\r\n d=\"M8.2045 8.99815L5.81802 6.61167L6.61351 5.81617L9 8.20266L11.3865 5.81617L12.182 6.61167L9.7955 8.99815L12.182 11.3846L11.3865 12.1801L9 9.79365L6.61351 12.1801L5.81802 11.3846L8.2045 8.99815Z\"\r\n fill=\"white\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6837_29683\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <img class=\"file-thumbnail\" style=\"border-radius: 4px\" [src]=\"file?.result\" alt=\"\" />\r\n <div class=\"flex flex-col w-full\">\r\n <label class=\"font-semibold text-sm mb-1\">Title</label>\r\n <input [(ngModel)]=\"file.title\"\r\n name=\"title{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter title\"\r\n class=\"border border-orange-300 rounded px-3 py-2 mb-3 w-full outline-none focus:ring focus:ring-orange-200\" />\r\n \r\n <label class=\"font-semibold text-sm mb-1\">Notes</label>\r\n <textarea [(ngModel)]=\"file.notes\"\r\n name=\"notes{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter notes\"\r\n class=\"border border-orange-300 rounded px-3 py-2 w-full outline-none focus:ring focus:ring-orange-200\"\r\n rows=\"2\"></textarea>\r\n </div>\r\n \r\n\r\n </div>\r\n\r\n <p>{{file?.name}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</fx-component>", styles: [".custom-upload{border:1px solid #ccc}.custom-upload a{color:#000}.custom-upload .file-list .file-thumbnail{width:120px;height:auto;border:1px solid #ccc;background-color:#fff;padding:4px}.custom-upload .separator{height:56px;width:2px;background-color:#ccc;margin:10px}.close_icon{position:absolute;top:-8px;right:-8px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1395
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UploaderComponent, isStandalone: true, selector: "fx-uploader", usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\">\r\n <div class=\"custom-upload flex flex-row items-center gap-2 p-2 pb-0 rounded-sm\">\r\n <div class=\"flex flex-col justify-center items-center\" (click)=\"fileInput.click()\">\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.001 3.00195C11.5322 3.00195 9.16722 3.86956 7.23641 5.38414L7.23598 4.59695C7.23598 4.52473 7.22175 4.45321 7.19411 4.38648C7.16647 4.31975 7.12596 4.25912 7.07489 4.20804C7.02381 4.15697 6.96318 4.11646 6.89645 4.08882C6.82972 4.06118 6.7582 4.04695 6.68598 4.04695C6.61375 4.04695 6.54223 4.06118 6.4755 4.08882C6.40877 4.11646 6.34814 4.15697 6.29707 4.20804C6.24599 4.25912 6.20548 4.31975 6.17784 4.38648C6.1502 4.45321 6.13598 4.52473 6.13598 4.59695L6.13642 6.68652C6.13643 6.83239 6.19438 6.97228 6.29752 7.07542C6.40067 7.17856 6.54055 7.23651 6.68642 7.23652H8.77598C8.8482 7.23652 8.91972 7.2223 8.98645 7.19466C9.05318 7.16702 9.11381 7.12651 9.16489 7.07543C9.21596 7.02436 9.25647 6.96373 9.28411 6.897C9.31175 6.83027 9.32598 6.75875 9.32598 6.68652C9.32598 6.6143 9.31175 6.54278 9.28411 6.47605C9.25647 6.40932 9.21596 6.34869 9.16489 6.29761C9.11381 6.24654 9.05318 6.20603 8.98645 6.17839C8.91972 6.15075 8.8482 6.13652 8.77598 6.13652H8.0584C9.7702 4.84387 11.8399 4.10195 14.001 4.10195C19.4751 4.10195 23.901 8.52782 23.901 14.002C23.901 19.4761 19.4751 23.902 14.001 23.902C8.52684 23.902 4.10098 19.4761 4.10098 14.002C4.10098 12.6381 4.38263 11.2888 4.92855 10.0389C4.98691 9.90532 4.98982 9.75399 4.93665 9.61822C4.88347 9.48246 4.77855 9.37336 4.64496 9.31492C4.57877 9.28596 4.50753 9.27032 4.4353 9.2689C4.36306 9.26747 4.29126 9.2803 4.22398 9.30663C4.15671 9.33297 4.09528 9.3723 4.04321 9.42238C3.99114 9.47247 3.94944 9.53232 3.92051 9.59852C3.31393 10.9872 3.00098 12.4866 3.00098 14.002C3.00098 20.0706 7.93236 25.002 14.001 25.002C20.0696 25.002 25.001 20.0706 25.001 14.002C25.001 7.93334 20.0696 3.00195 14.001 3.00195Z\"\r\n fill=\"#F3A041\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M13.9988 6.13965C9.6616 6.13965 6.13379 9.66746 6.13379 14.0046C6.13379 18.3418 9.6616 21.8696 13.9988 21.8696C18.336 21.8696 21.8638 18.3418 21.8638 14.0046C21.8638 9.66746 18.336 6.13965 13.9988 6.13965ZM13.9988 8.22965C14.1447 8.22965 14.2846 8.28759 14.3877 8.39074C14.4908 8.49388 14.5488 8.63378 14.5488 8.77965V13.7769L17.5227 16.7508C17.6258 16.8539 17.6837 16.9938 17.6837 17.1396C17.6837 17.2855 17.6258 17.4254 17.5227 17.5285C17.4195 17.6316 17.2796 17.6896 17.1338 17.6896C16.9879 17.6896 16.8481 17.6316 16.7449 17.5285L13.6099 14.3935C13.5068 14.2904 13.4488 14.1505 13.4488 14.0046V8.77965C13.4488 8.63378 13.5067 8.49388 13.6099 8.39074C13.713 8.28759 13.8529 8.22965 13.9988 8.22965Z\"\r\n fill=\"#F3A041\" />\r\n <rect width=\"28.56\" height=\"28\" rx=\"1.51479\" fill=\"#F3A041\" />\r\n <path\r\n d=\"M15.068 22.7391V17.6708H18.4968L14.2108 12.6025L9.9248 17.6708H13.3536V22.7391H9.06759V22.6969C8.92358 22.7053 8.78643 22.7391 8.63899 22.7391C6.93391 22.7391 5.29866 22.0717 4.09298 20.8835C2.8873 19.6954 2.20996 18.084 2.20996 16.4037C2.20996 13.1532 4.70443 10.5042 7.90523 10.141C8.18585 8.6953 8.96892 7.39118 10.1197 6.45292C11.2706 5.51465 12.7172 5.00089 14.2108 5C15.7047 5.00082 17.1515 5.51452 18.3026 6.45277C19.4537 7.39101 20.2371 8.69516 20.5181 10.141C23.7189 10.5042 26.21 13.1532 26.21 16.4037C26.21 18.084 25.5326 19.6954 24.3269 20.8835C23.1213 22.0717 21.486 22.7391 19.7809 22.7391C19.6369 22.7391 19.4981 22.7053 19.3523 22.6969V22.7391H15.068Z\"\r\n fill=\"white\" />\r\n </svg>\r\n </div>\r\n <a type=\"button\" (click)=\"fileInput.click()\" class=\"text-base cursor-pointer\">\r\n {{ setting('upload-text') }}\r\n </a>\r\n </div>\r\n <!-- <input #fileInput type=\"file\" [multiple]=\"setting('multiple-upload')\" (change)=\"onFileSelected($event)\" hidden />\r\n <div class=\"separator\"></div>\r\n <div class=\"file-list flex items-center gap-4 flex-wrap\">\r\n <ng-container *ngIf=\"uploadedFiles?.length\">\r\n <div *ngFor=\"let file of uploadedFiles; let i = index\" \r\n class=\"flex flex-col items-center justify-center\" (click)=\"deleteFile(i)\">\r\n <div class=\"relative\">\r\n <div class=\"close_icon cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6837_29683)\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n <mask id=\"mask0_6837_29683\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"4\" y=\"4\" width=\"24\"\r\n height=\"24\">\r\n <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" fill=\"#D9D9D9\" />\r\n </mask>\r\n <g mask=\"url(#mask0_6837_29683)\">\r\n <path\r\n d=\"M8.2045 8.99815L5.81802 6.61167L6.61351 5.81617L9 8.20266L11.3865 5.81617L12.182 6.61167L9.7955 8.99815L12.182 11.3846L11.3865 12.1801L9 9.79365L6.61351 12.1801L5.81802 11.3846L8.2045 8.99815Z\"\r\n fill=\"white\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6837_29683\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <img class=\"file-thumbnail\" style=\"border-radius: 4px\" [src]=\"file?.result\" alt=\"\" />\r\n <div class=\"flex flex-col w-full\">\r\n <label class=\"font-semibold text-sm mb-1\">Title</label>\r\n <input [(ngModel)]=\"file.title\"\r\n name=\"title{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter title\"\r\n class=\"border border-orange-300 rounded px-3 py-2 mb-3 w-full outline-none focus:ring focus:ring-orange-200\" />\r\n \r\n <label class=\"font-semibold text-sm mb-1\">Notes</label>\r\n <textarea [(ngModel)]=\"file.notes\"\r\n name=\"notes{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter notes\"\r\n class=\"border border-orange-300 rounded px-3 py-2 w-full outline-none focus:ring focus:ring-orange-200\"\r\n rows=\"2\"></textarea>\r\n </div>\r\n \r\n\r\n </div>\r\n\r\n <p>{{file?.name}}</p>\r\n </div>\r\n </ng-container>\r\n </div> -->\r\n\r\n <input #fileInput\r\n type=\"file\"\r\n [multiple]=\"setting('multiple-upload')\"\r\n (change)=\"onFileSelected($event)\"\r\n hidden />\r\n\r\n<div class=\"separator\"></div>\r\n\r\n<div class=\"file-list flex items-center gap-6 flex-wrap\" *ngIf=\"false\">\r\n <ng-container *ngIf=\"uploadedFiles?.length\">\r\n <div *ngFor=\"let file of uploadedFiles; let i = index\"\r\n class=\"flex flex-col items-center justify-center\">\r\n\r\n <div class=\"relative p-3 border rounded-lg shadow-sm bg-white w-64\">\r\n <!-- Close icon -->\r\n <div class=\"close_icon cursor-pointer absolute top-2 right-2\" (click)=\"deleteFile(i)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n <path d=\"M8.2 9l-2.4-2.4.8-.8L9 8.2l2.4-2.4.8.8L9.8 9l2.4 2.4-.8.8L9 9.8l-2.4 2.4-.8-.8L8.2 9z\"\r\n fill=\"white\"/>\r\n </svg>\r\n </div>\r\n\r\n <!-- Thumbnail -->\r\n <ng-container *ngIf=\"file.type === 'image'; else nonImageThumb\">\r\n <img class=\"file-thumbnail w-full h-32 object-cover rounded mb-3\"\r\n [src]=\"file?.result\"\r\n alt=\"preview\" />\r\n </ng-container>\r\n\r\n <ng-template #nonImageThumb>\r\n <div class=\"file-thumbnail flex items-center justify-center border rounded mb-3 w-full h-32 bg-gray-50\">\r\n <ng-container [ngSwitch]=\"file.type\">\r\n <!-- CSV -->\r\n <svg *ngSwitchCase=\"'csv'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#22c55e\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#22c55e\" stroke-width=\"2\"/>\r\n <text x=\"14\" y=\"34\" font-size=\"10\" font-family=\"monospace\" fill=\"#22c55e\">CSV</text>\r\n </svg>\r\n\r\n <!-- TEXT -->\r\n <svg *ngSwitchCase=\"'text'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#3b82f6\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#3b82f6\" stroke-width=\"2\"/>\r\n <path d=\"M14 24h20M14 29h20M14 34h12\" stroke=\"#3b82f6\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n </svg>\r\n\r\n <!-- Generic -->\r\n <svg *ngSwitchDefault xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#9ca3af\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#9ca3af\" stroke-width=\"2\"/>\r\n <path d=\"M16 30h16\" stroke=\"#9ca3af\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n </svg>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Metadata -->\r\n <div class=\"flex flex-col w-full\">\r\n <label class=\"font-semibold text-sm mb-1\">Title</label>\r\n <input [(ngModel)]=\"file.title\"\r\n name=\"title{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter title\"\r\n class=\"border border-orange-300 rounded px-3 py-2 mb-3 w-full outline-none focus:ring focus:ring-orange-200\" />\r\n\r\n <label class=\"font-semibold text-sm mb-1\">Notes</label>\r\n <textarea [(ngModel)]=\"file.notes\"\r\n name=\"notes{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter notes\"\r\n class=\"border border-orange-300 rounded px-3 py-2 w-full outline-none focus:ring focus:ring-orange-200\"\r\n rows=\"2\"></textarea>\r\n\r\n <label class=\"font-semibold text-sm mt-3 mb-1\">Category</label>\r\n <select [(ngModel)]=\"file.category\"\r\n name=\"category{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Select Category\"\r\n class=\"border border-orange-300 rounded px-3 py-2 w-full outline-none focus:ring focus:ring-orange-200\">\r\n <option *ngFor=\"let c of categories\" [ngValue]=\"c\">{{ c }}</option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <p class=\"mt-2 text-sm text-gray-600\">{{ file?.name }}</p>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"file-list flex items-center gap-8 flex-wrap\">\r\n <ng-container *ngIf=\"uploadedFiles?.length\">\r\n <div *ngFor=\"let file of uploadedFiles; let i = index\"\r\n class=\"relative p-3 border rounded-lg shadow-sm bg-white w-[500px] flex\">\r\n\r\n <!-- Close icon -->\r\n <div class=\"close_icon cursor-pointer absolute top-2 right-2\" (click)=\"deleteFile(i)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n <path d=\"M8.2 9l-2.4-2.4.8-.8L9 8.2l2.4-2.4.8.8L9.8 9l2.4 2.4-.8.8L9 9.8l-2.4 2.4-.8-.8L8.2 9z\"\r\n fill=\"white\"/>\r\n </svg>\r\n </div>\r\n\r\n <!-- Thumbnail on left -->\r\n <div class=\"w-28 h-28 flex-shrink-0\">\r\n <ng-container *ngIf=\"file.type === 'image'; else nonImageThumb\">\r\n <img class=\"file-thumbnail w-full h-full object-cover rounded\"\r\n [src]=\"file?.result\"\r\n alt=\"preview\" />\r\n </ng-container>\r\n\r\n <ng-template #nonImageThumb>\r\n <div class=\"file-thumbnail flex items-center justify-center border rounded w-full h-full bg-gray-50\">\r\n <ng-container [ngSwitch]=\"file.type\">\r\n <!-- CSV -->\r\n <svg *ngSwitchCase=\"'csv'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#22c55e\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#22c55e\" stroke-width=\"2\"/>\r\n <text x=\"14\" y=\"34\" font-size=\"10\" font-family=\"monospace\" fill=\"#22c55e\">CSV</text>\r\n </svg>\r\n <!-- TEXT -->\r\n <svg *ngSwitchCase=\"'text'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#3b82f6\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#3b82f6\" stroke-width=\"2\"/>\r\n <path d=\"M14 24h20M14 29h20M14 34h12\" stroke=\"#3b82f6\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n </svg>\r\n <!-- Generic -->\r\n <svg *ngSwitchDefault xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#9ca3af\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#9ca3af\" stroke-width=\"2\"/>\r\n <path d=\"M16 30h16\" stroke=\"#9ca3af\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n </svg>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <!-- Metadata on right -->\r\n <div class=\"flex flex-col flex-1 ml-4\">\r\n <!-- Title -->\r\n <label class=\"font-semibold text-sm mb-1\">Title</label>\r\n <input [(ngModel)]=\"file.title\"\r\n name=\"title{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter title\"\r\n class=\"border border-orange-300 rounded px-3 py-2 mb-3 w-full outline-none focus:ring focus:ring-orange-200\" />\r\n\r\n <!-- Notes -->\r\n <label class=\"font-semibold text-sm mb-1\">Notes</label>\r\n <textarea [(ngModel)]=\"file.notes\"\r\n name=\"notes{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter notes\"\r\n class=\"border border-orange-300 rounded px-3 py-2 mb-3 w-full outline-none focus:ring focus:ring-orange-200\"\r\n rows=\"2\"></textarea>\r\n\r\n <!-- Category -->\r\n <label class=\"font-semibold text-sm mb-1\">Category</label>\r\n <select [(ngModel)]=\"file.category\"\r\n name=\"category{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n class=\"border border-orange-300 rounded px-3 py-2 w-full outline-none focus:ring focus:ring-orange-200\">\r\n <option value=\"\">Select Category</option>\r\n <option *ngFor=\"let c of categories\" [ngValue]=\"c\">{{ c }}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n\r\n\r\n </div>\r\n</fx-component>", styles: [".custom-upload{border:1px solid #ccc}.custom-upload a{color:#000}.custom-upload .file-list .file-thumbnail{width:234px;height:234px;border:1px solid #ccc;background-color:#fff;padding:4px}.custom-upload .separator{height:56px;width:2px;background-color:#ccc;margin:10px}.close_icon{position:absolute;top:-8px;right:-8px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}.gap-8{gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i2.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
1260
1396
|
}
|
|
1261
1397
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploaderComponent, decorators: [{
|
|
1262
1398
|
type: Component,
|
|
1263
|
-
args: [{ selector: 'fx-uploader', standalone: true, imports: [CommonModule, FxComponent, FormsModule, ReactiveFormsModule], template: "<fx-component [fxData]=\"fxData\">\r\n <div class=\"custom-upload flex flex-row items-center gap-2 p-2 pb-0 rounded-sm\">\r\n <div class=\"flex flex-col justify-center items-center\" (click)=\"fileInput.click()\">\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.001 3.00195C11.5322 3.00195 9.16722 3.86956 7.23641 5.38414L7.23598 4.59695C7.23598 4.52473 7.22175 4.45321 7.19411 4.38648C7.16647 4.31975 7.12596 4.25912 7.07489 4.20804C7.02381 4.15697 6.96318 4.11646 6.89645 4.08882C6.82972 4.06118 6.7582 4.04695 6.68598 4.04695C6.61375 4.04695 6.54223 4.06118 6.4755 4.08882C6.40877 4.11646 6.34814 4.15697 6.29707 4.20804C6.24599 4.25912 6.20548 4.31975 6.17784 4.38648C6.1502 4.45321 6.13598 4.52473 6.13598 4.59695L6.13642 6.68652C6.13643 6.83239 6.19438 6.97228 6.29752 7.07542C6.40067 7.17856 6.54055 7.23651 6.68642 7.23652H8.77598C8.8482 7.23652 8.91972 7.2223 8.98645 7.19466C9.05318 7.16702 9.11381 7.12651 9.16489 7.07543C9.21596 7.02436 9.25647 6.96373 9.28411 6.897C9.31175 6.83027 9.32598 6.75875 9.32598 6.68652C9.32598 6.6143 9.31175 6.54278 9.28411 6.47605C9.25647 6.40932 9.21596 6.34869 9.16489 6.29761C9.11381 6.24654 9.05318 6.20603 8.98645 6.17839C8.91972 6.15075 8.8482 6.13652 8.77598 6.13652H8.0584C9.7702 4.84387 11.8399 4.10195 14.001 4.10195C19.4751 4.10195 23.901 8.52782 23.901 14.002C23.901 19.4761 19.4751 23.902 14.001 23.902C8.52684 23.902 4.10098 19.4761 4.10098 14.002C4.10098 12.6381 4.38263 11.2888 4.92855 10.0389C4.98691 9.90532 4.98982 9.75399 4.93665 9.61822C4.88347 9.48246 4.77855 9.37336 4.64496 9.31492C4.57877 9.28596 4.50753 9.27032 4.4353 9.2689C4.36306 9.26747 4.29126 9.2803 4.22398 9.30663C4.15671 9.33297 4.09528 9.3723 4.04321 9.42238C3.99114 9.47247 3.94944 9.53232 3.92051 9.59852C3.31393 10.9872 3.00098 12.4866 3.00098 14.002C3.00098 20.0706 7.93236 25.002 14.001 25.002C20.0696 25.002 25.001 20.0706 25.001 14.002C25.001 7.93334 20.0696 3.00195 14.001 3.00195Z\"\r\n fill=\"#F3A041\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M13.9988 6.13965C9.6616 6.13965 6.13379 9.66746 6.13379 14.0046C6.13379 18.3418 9.6616 21.8696 13.9988 21.8696C18.336 21.8696 21.8638 18.3418 21.8638 14.0046C21.8638 9.66746 18.336 6.13965 13.9988 6.13965ZM13.9988 8.22965C14.1447 8.22965 14.2846 8.28759 14.3877 8.39074C14.4908 8.49388 14.5488 8.63378 14.5488 8.77965V13.7769L17.5227 16.7508C17.6258 16.8539 17.6837 16.9938 17.6837 17.1396C17.6837 17.2855 17.6258 17.4254 17.5227 17.5285C17.4195 17.6316 17.2796 17.6896 17.1338 17.6896C16.9879 17.6896 16.8481 17.6316 16.7449 17.5285L13.6099 14.3935C13.5068 14.2904 13.4488 14.1505 13.4488 14.0046V8.77965C13.4488 8.63378 13.5067 8.49388 13.6099 8.39074C13.713 8.28759 13.8529 8.22965 13.9988 8.22965Z\"\r\n fill=\"#F3A041\" />\r\n <rect width=\"28.56\" height=\"28\" rx=\"1.51479\" fill=\"#F3A041\" />\r\n <path\r\n d=\"M15.068 22.7391V17.6708H18.4968L14.2108 12.6025L9.9248 17.6708H13.3536V22.7391H9.06759V22.6969C8.92358 22.7053 8.78643 22.7391 8.63899 22.7391C6.93391 22.7391 5.29866 22.0717 4.09298 20.8835C2.8873 19.6954 2.20996 18.084 2.20996 16.4037C2.20996 13.1532 4.70443 10.5042 7.90523 10.141C8.18585 8.6953 8.96892 7.39118 10.1197 6.45292C11.2706 5.51465 12.7172 5.00089 14.2108 5C15.7047 5.00082 17.1515 5.51452 18.3026 6.45277C19.4537 7.39101 20.2371 8.69516 20.5181 10.141C23.7189 10.5042 26.21 13.1532 26.21 16.4037C26.21 18.084 25.5326 19.6954 24.3269 20.8835C23.1213 22.0717 21.486 22.7391 19.7809 22.7391C19.6369 22.7391 19.4981 22.7053 19.3523 22.6969V22.7391H15.068Z\"\r\n fill=\"white\" />\r\n </svg>\r\n </div>\r\n <a type=\"button\" (click)=\"fileInput.click()\" class=\"text-base cursor-pointer\">\r\n {{ setting('upload-text') }}\r\n </a>\r\n </div>\r\n <input #fileInput type=\"file\" [multiple]=\"setting('multiple-upload')\" (change)=\"onFileSelected($event)\" hidden />\r\n <div class=\"separator\"></div>\r\n <div class=\"file-list flex items-center gap-4 flex-wrap\">\r\n <ng-container *ngIf=\"uploadedFiles?.length\">\r\n <div *ngFor=\"let file of uploadedFiles; let i = index\"\r\n class=\"flex flex-col items-center justify-center\">\r\n <div class=\"relative\">\r\n <div class=\"close_icon cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6837_29683)\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n <mask id=\"mask0_6837_29683\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"4\" y=\"4\" width=\"24\"\r\n height=\"24\">\r\n <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" fill=\"#D9D9D9\" />\r\n </mask>\r\n <g mask=\"url(#mask0_6837_29683)\">\r\n <path\r\n d=\"M8.2045 8.99815L5.81802 6.61167L6.61351 5.81617L9 8.20266L11.3865 5.81617L12.182 6.61167L9.7955 8.99815L12.182 11.3846L11.3865 12.1801L9 9.79365L6.61351 12.1801L5.81802 11.3846L8.2045 8.99815Z\"\r\n fill=\"white\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6837_29683\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <img class=\"file-thumbnail\" style=\"border-radius: 4px\" [src]=\"file?.result\" alt=\"\" />\r\n <div class=\"flex flex-col w-full\">\r\n <label class=\"font-semibold text-sm mb-1\">Title</label>\r\n <input [(ngModel)]=\"file.title\"\r\n name=\"title{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter title\"\r\n class=\"border border-orange-300 rounded px-3 py-2 mb-3 w-full outline-none focus:ring focus:ring-orange-200\" />\r\n \r\n <label class=\"font-semibold text-sm mb-1\">Notes</label>\r\n <textarea [(ngModel)]=\"file.notes\"\r\n name=\"notes{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter notes\"\r\n class=\"border border-orange-300 rounded px-3 py-2 w-full outline-none focus:ring focus:ring-orange-200\"\r\n rows=\"2\"></textarea>\r\n </div>\r\n \r\n\r\n </div>\r\n\r\n <p>{{file?.name}}</p>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n</fx-component>", styles: [".custom-upload{border:1px solid #ccc}.custom-upload a{color:#000}.custom-upload .file-list .file-thumbnail{width:120px;height:auto;border:1px solid #ccc;background-color:#fff;padding:4px}.custom-upload .separator{height:56px;width:2px;background-color:#ccc;margin:10px}.close_icon{position:absolute;top:-8px;right:-8px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}\n"] }]
|
|
1399
|
+
args: [{ selector: 'fx-uploader', standalone: true, imports: [CommonModule, FxComponent, FormsModule, ReactiveFormsModule], template: "<fx-component [fxData]=\"fxData\">\r\n <div class=\"custom-upload flex flex-row items-center gap-2 p-2 pb-0 rounded-sm\">\r\n <div class=\"flex flex-col justify-center items-center\" (click)=\"fileInput.click()\">\r\n <div>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"29\" height=\"28\" viewBox=\"0 0 29 28\" fill=\"none\">\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M14.001 3.00195C11.5322 3.00195 9.16722 3.86956 7.23641 5.38414L7.23598 4.59695C7.23598 4.52473 7.22175 4.45321 7.19411 4.38648C7.16647 4.31975 7.12596 4.25912 7.07489 4.20804C7.02381 4.15697 6.96318 4.11646 6.89645 4.08882C6.82972 4.06118 6.7582 4.04695 6.68598 4.04695C6.61375 4.04695 6.54223 4.06118 6.4755 4.08882C6.40877 4.11646 6.34814 4.15697 6.29707 4.20804C6.24599 4.25912 6.20548 4.31975 6.17784 4.38648C6.1502 4.45321 6.13598 4.52473 6.13598 4.59695L6.13642 6.68652C6.13643 6.83239 6.19438 6.97228 6.29752 7.07542C6.40067 7.17856 6.54055 7.23651 6.68642 7.23652H8.77598C8.8482 7.23652 8.91972 7.2223 8.98645 7.19466C9.05318 7.16702 9.11381 7.12651 9.16489 7.07543C9.21596 7.02436 9.25647 6.96373 9.28411 6.897C9.31175 6.83027 9.32598 6.75875 9.32598 6.68652C9.32598 6.6143 9.31175 6.54278 9.28411 6.47605C9.25647 6.40932 9.21596 6.34869 9.16489 6.29761C9.11381 6.24654 9.05318 6.20603 8.98645 6.17839C8.91972 6.15075 8.8482 6.13652 8.77598 6.13652H8.0584C9.7702 4.84387 11.8399 4.10195 14.001 4.10195C19.4751 4.10195 23.901 8.52782 23.901 14.002C23.901 19.4761 19.4751 23.902 14.001 23.902C8.52684 23.902 4.10098 19.4761 4.10098 14.002C4.10098 12.6381 4.38263 11.2888 4.92855 10.0389C4.98691 9.90532 4.98982 9.75399 4.93665 9.61822C4.88347 9.48246 4.77855 9.37336 4.64496 9.31492C4.57877 9.28596 4.50753 9.27032 4.4353 9.2689C4.36306 9.26747 4.29126 9.2803 4.22398 9.30663C4.15671 9.33297 4.09528 9.3723 4.04321 9.42238C3.99114 9.47247 3.94944 9.53232 3.92051 9.59852C3.31393 10.9872 3.00098 12.4866 3.00098 14.002C3.00098 20.0706 7.93236 25.002 14.001 25.002C20.0696 25.002 25.001 20.0706 25.001 14.002C25.001 7.93334 20.0696 3.00195 14.001 3.00195Z\"\r\n fill=\"#F3A041\" />\r\n <path fill-rule=\"evenodd\" clip-rule=\"evenodd\"\r\n d=\"M13.9988 6.13965C9.6616 6.13965 6.13379 9.66746 6.13379 14.0046C6.13379 18.3418 9.6616 21.8696 13.9988 21.8696C18.336 21.8696 21.8638 18.3418 21.8638 14.0046C21.8638 9.66746 18.336 6.13965 13.9988 6.13965ZM13.9988 8.22965C14.1447 8.22965 14.2846 8.28759 14.3877 8.39074C14.4908 8.49388 14.5488 8.63378 14.5488 8.77965V13.7769L17.5227 16.7508C17.6258 16.8539 17.6837 16.9938 17.6837 17.1396C17.6837 17.2855 17.6258 17.4254 17.5227 17.5285C17.4195 17.6316 17.2796 17.6896 17.1338 17.6896C16.9879 17.6896 16.8481 17.6316 16.7449 17.5285L13.6099 14.3935C13.5068 14.2904 13.4488 14.1505 13.4488 14.0046V8.77965C13.4488 8.63378 13.5067 8.49388 13.6099 8.39074C13.713 8.28759 13.8529 8.22965 13.9988 8.22965Z\"\r\n fill=\"#F3A041\" />\r\n <rect width=\"28.56\" height=\"28\" rx=\"1.51479\" fill=\"#F3A041\" />\r\n <path\r\n d=\"M15.068 22.7391V17.6708H18.4968L14.2108 12.6025L9.9248 17.6708H13.3536V22.7391H9.06759V22.6969C8.92358 22.7053 8.78643 22.7391 8.63899 22.7391C6.93391 22.7391 5.29866 22.0717 4.09298 20.8835C2.8873 19.6954 2.20996 18.084 2.20996 16.4037C2.20996 13.1532 4.70443 10.5042 7.90523 10.141C8.18585 8.6953 8.96892 7.39118 10.1197 6.45292C11.2706 5.51465 12.7172 5.00089 14.2108 5C15.7047 5.00082 17.1515 5.51452 18.3026 6.45277C19.4537 7.39101 20.2371 8.69516 20.5181 10.141C23.7189 10.5042 26.21 13.1532 26.21 16.4037C26.21 18.084 25.5326 19.6954 24.3269 20.8835C23.1213 22.0717 21.486 22.7391 19.7809 22.7391C19.6369 22.7391 19.4981 22.7053 19.3523 22.6969V22.7391H15.068Z\"\r\n fill=\"white\" />\r\n </svg>\r\n </div>\r\n <a type=\"button\" (click)=\"fileInput.click()\" class=\"text-base cursor-pointer\">\r\n {{ setting('upload-text') }}\r\n </a>\r\n </div>\r\n <!-- <input #fileInput type=\"file\" [multiple]=\"setting('multiple-upload')\" (change)=\"onFileSelected($event)\" hidden />\r\n <div class=\"separator\"></div>\r\n <div class=\"file-list flex items-center gap-4 flex-wrap\">\r\n <ng-container *ngIf=\"uploadedFiles?.length\">\r\n <div *ngFor=\"let file of uploadedFiles; let i = index\" \r\n class=\"flex flex-col items-center justify-center\" (click)=\"deleteFile(i)\">\r\n <div class=\"relative\">\r\n <div class=\"close_icon cursor-pointer\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <g clip-path=\"url(#clip0_6837_29683)\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n <mask id=\"mask0_6837_29683\" style=\"mask-type:alpha\" maskUnits=\"userSpaceOnUse\" x=\"4\" y=\"4\" width=\"24\"\r\n height=\"24\">\r\n <rect x=\"4\" y=\"4\" width=\"24\" height=\"24\" fill=\"#D9D9D9\" />\r\n </mask>\r\n <g mask=\"url(#mask0_6837_29683)\">\r\n <path\r\n d=\"M8.2045 8.99815L5.81802 6.61167L6.61351 5.81617L9 8.20266L11.3865 5.81617L12.182 6.61167L9.7955 8.99815L12.182 11.3846L11.3865 12.1801L9 9.79365L6.61351 12.1801L5.81802 11.3846L8.2045 8.99815Z\"\r\n fill=\"white\" />\r\n </g>\r\n </g>\r\n <defs>\r\n <clipPath id=\"clip0_6837_29683\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"white\" />\r\n </clipPath>\r\n </defs>\r\n </svg>\r\n </div>\r\n <img class=\"file-thumbnail\" style=\"border-radius: 4px\" [src]=\"file?.result\" alt=\"\" />\r\n <div class=\"flex flex-col w-full\">\r\n <label class=\"font-semibold text-sm mb-1\">Title</label>\r\n <input [(ngModel)]=\"file.title\"\r\n name=\"title{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter title\"\r\n class=\"border border-orange-300 rounded px-3 py-2 mb-3 w-full outline-none focus:ring focus:ring-orange-200\" />\r\n \r\n <label class=\"font-semibold text-sm mb-1\">Notes</label>\r\n <textarea [(ngModel)]=\"file.notes\"\r\n name=\"notes{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter notes\"\r\n class=\"border border-orange-300 rounded px-3 py-2 w-full outline-none focus:ring focus:ring-orange-200\"\r\n rows=\"2\"></textarea>\r\n </div>\r\n \r\n\r\n </div>\r\n\r\n <p>{{file?.name}}</p>\r\n </div>\r\n </ng-container>\r\n </div> -->\r\n\r\n <input #fileInput\r\n type=\"file\"\r\n [multiple]=\"setting('multiple-upload')\"\r\n (change)=\"onFileSelected($event)\"\r\n hidden />\r\n\r\n<div class=\"separator\"></div>\r\n\r\n<div class=\"file-list flex items-center gap-6 flex-wrap\" *ngIf=\"false\">\r\n <ng-container *ngIf=\"uploadedFiles?.length\">\r\n <div *ngFor=\"let file of uploadedFiles; let i = index\"\r\n class=\"flex flex-col items-center justify-center\">\r\n\r\n <div class=\"relative p-3 border rounded-lg shadow-sm bg-white w-64\">\r\n <!-- Close icon -->\r\n <div class=\"close_icon cursor-pointer absolute top-2 right-2\" (click)=\"deleteFile(i)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n <path d=\"M8.2 9l-2.4-2.4.8-.8L9 8.2l2.4-2.4.8.8L9.8 9l2.4 2.4-.8.8L9 9.8l-2.4 2.4-.8-.8L8.2 9z\"\r\n fill=\"white\"/>\r\n </svg>\r\n </div>\r\n\r\n <!-- Thumbnail -->\r\n <ng-container *ngIf=\"file.type === 'image'; else nonImageThumb\">\r\n <img class=\"file-thumbnail w-full h-32 object-cover rounded mb-3\"\r\n [src]=\"file?.result\"\r\n alt=\"preview\" />\r\n </ng-container>\r\n\r\n <ng-template #nonImageThumb>\r\n <div class=\"file-thumbnail flex items-center justify-center border rounded mb-3 w-full h-32 bg-gray-50\">\r\n <ng-container [ngSwitch]=\"file.type\">\r\n <!-- CSV -->\r\n <svg *ngSwitchCase=\"'csv'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#22c55e\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#22c55e\" stroke-width=\"2\"/>\r\n <text x=\"14\" y=\"34\" font-size=\"10\" font-family=\"monospace\" fill=\"#22c55e\">CSV</text>\r\n </svg>\r\n\r\n <!-- TEXT -->\r\n <svg *ngSwitchCase=\"'text'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#3b82f6\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#3b82f6\" stroke-width=\"2\"/>\r\n <path d=\"M14 24h20M14 29h20M14 34h12\" stroke=\"#3b82f6\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n </svg>\r\n\r\n <!-- Generic -->\r\n <svg *ngSwitchDefault xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#9ca3af\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#9ca3af\" stroke-width=\"2\"/>\r\n <path d=\"M16 30h16\" stroke=\"#9ca3af\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n </svg>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n\r\n <!-- Metadata -->\r\n <div class=\"flex flex-col w-full\">\r\n <label class=\"font-semibold text-sm mb-1\">Title</label>\r\n <input [(ngModel)]=\"file.title\"\r\n name=\"title{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter title\"\r\n class=\"border border-orange-300 rounded px-3 py-2 mb-3 w-full outline-none focus:ring focus:ring-orange-200\" />\r\n\r\n <label class=\"font-semibold text-sm mb-1\">Notes</label>\r\n <textarea [(ngModel)]=\"file.notes\"\r\n name=\"notes{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter notes\"\r\n class=\"border border-orange-300 rounded px-3 py-2 w-full outline-none focus:ring focus:ring-orange-200\"\r\n rows=\"2\"></textarea>\r\n\r\n <label class=\"font-semibold text-sm mt-3 mb-1\">Category</label>\r\n <select [(ngModel)]=\"file.category\"\r\n name=\"category{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Select Category\"\r\n class=\"border border-orange-300 rounded px-3 py-2 w-full outline-none focus:ring focus:ring-orange-200\">\r\n <option *ngFor=\"let c of categories\" [ngValue]=\"c\">{{ c }}</option>\r\n </select>\r\n </div>\r\n </div>\r\n\r\n <p class=\"mt-2 text-sm text-gray-600\">{{ file?.name }}</p>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n<div class=\"file-list flex items-center gap-8 flex-wrap\">\r\n <ng-container *ngIf=\"uploadedFiles?.length\">\r\n <div *ngFor=\"let file of uploadedFiles; let i = index\"\r\n class=\"relative p-3 border rounded-lg shadow-sm bg-white w-[500px] flex\">\r\n\r\n <!-- Close icon -->\r\n <div class=\"close_icon cursor-pointer absolute top-2 right-2\" (click)=\"deleteFile(i)\">\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"18\" viewBox=\"0 0 18 18\" fill=\"none\">\r\n <rect width=\"18\" height=\"18\" rx=\"9\" fill=\"#F3A041\" />\r\n <path d=\"M8.2 9l-2.4-2.4.8-.8L9 8.2l2.4-2.4.8.8L9.8 9l2.4 2.4-.8.8L9 9.8l-2.4 2.4-.8-.8L8.2 9z\"\r\n fill=\"white\"/>\r\n </svg>\r\n </div>\r\n\r\n <!-- Thumbnail on left -->\r\n <div class=\"w-28 h-28 flex-shrink-0\">\r\n <ng-container *ngIf=\"file.type === 'image'; else nonImageThumb\">\r\n <img class=\"file-thumbnail w-full h-full object-cover rounded\"\r\n [src]=\"file?.result\"\r\n alt=\"preview\" />\r\n </ng-container>\r\n\r\n <ng-template #nonImageThumb>\r\n <div class=\"file-thumbnail flex items-center justify-center border rounded w-full h-full bg-gray-50\">\r\n <ng-container [ngSwitch]=\"file.type\">\r\n <!-- CSV -->\r\n <svg *ngSwitchCase=\"'csv'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#22c55e\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#22c55e\" stroke-width=\"2\"/>\r\n <text x=\"14\" y=\"34\" font-size=\"10\" font-family=\"monospace\" fill=\"#22c55e\">CSV</text>\r\n </svg>\r\n <!-- TEXT -->\r\n <svg *ngSwitchCase=\"'text'\" xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#3b82f6\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#3b82f6\" stroke-width=\"2\"/>\r\n <path d=\"M14 24h20M14 29h20M14 34h12\" stroke=\"#3b82f6\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n </svg>\r\n <!-- Generic -->\r\n <svg *ngSwitchDefault xmlns=\"http://www.w3.org/2000/svg\" width=\"48\" height=\"48\" viewBox=\"0 0 48 48\" fill=\"none\">\r\n <rect x=\"8\" y=\"6\" width=\"28\" height=\"36\" rx=\"3\" stroke=\"#9ca3af\" stroke-width=\"2\"/>\r\n <path d=\"M28 6v8a2 2 0 0 0 2 2h6\" stroke=\"#9ca3af\" stroke-width=\"2\"/>\r\n <path d=\"M16 30h16\" stroke=\"#9ca3af\" stroke-width=\"2\" stroke-linecap=\"round\"/>\r\n </svg>\r\n </ng-container>\r\n </div>\r\n </ng-template>\r\n </div>\r\n\r\n <!-- Metadata on right -->\r\n <div class=\"flex flex-col flex-1 ml-4\">\r\n <!-- Title -->\r\n <label class=\"font-semibold text-sm mb-1\">Title</label>\r\n <input [(ngModel)]=\"file.title\"\r\n name=\"title{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter title\"\r\n class=\"border border-orange-300 rounded px-3 py-2 mb-3 w-full outline-none focus:ring focus:ring-orange-200\" />\r\n\r\n <!-- Notes -->\r\n <label class=\"font-semibold text-sm mb-1\">Notes</label>\r\n <textarea [(ngModel)]=\"file.notes\"\r\n name=\"notes{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n placeholder=\"Enter notes\"\r\n class=\"border border-orange-300 rounded px-3 py-2 mb-3 w-full outline-none focus:ring focus:ring-orange-200\"\r\n rows=\"2\"></textarea>\r\n\r\n <!-- Category -->\r\n <label class=\"font-semibold text-sm mb-1\">Category</label>\r\n <select [(ngModel)]=\"file.category\"\r\n name=\"category{{i}}\"\r\n (ngModelChange)=\"onMetaChange()\"\r\n class=\"border border-orange-300 rounded px-3 py-2 w-full outline-none focus:ring focus:ring-orange-200\">\r\n <option value=\"\">Select Category</option>\r\n <option *ngFor=\"let c of categories\" [ngValue]=\"c\">{{ c }}</option>\r\n </select>\r\n </div>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n\r\n\r\n </div>\r\n</fx-component>", styles: [".custom-upload{border:1px solid #ccc}.custom-upload a{color:#000}.custom-upload .file-list .file-thumbnail{width:234px;height:234px;border:1px solid #ccc;background-color:#fff;padding:4px}.custom-upload .separator{height:56px;width:2px;background-color:#ccc;margin:10px}.close_icon{position:absolute;top:-8px;right:-8px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}.gap-8{gap:8px}\n"] }]
|
|
1264
1400
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FxBuilderWrapperService }] });
|
|
1265
1401
|
|
|
1266
1402
|
class ToggleComponent extends FxBaseComponent {
|
|
@@ -1691,17 +1827,18 @@ class DatePickerComponent extends FxBaseComponent {
|
|
|
1691
1827
|
new FxStringSetting({ key: 'apiURL', $title: 'API Url', value: '' }),
|
|
1692
1828
|
new FxStringSetting({ key: 'minDateKey', $title: 'Min Range API Key', value: '' }),
|
|
1693
1829
|
new FxStringSetting({ key: 'maxDateKey', $title: 'Max Range API Key', value: '' }),
|
|
1830
|
+
new FxStringSetting({ key: 'placeHolder', $title: 'Placeholder', value: 'Select Date' }),
|
|
1694
1831
|
];
|
|
1695
1832
|
}
|
|
1696
1833
|
validations() {
|
|
1697
1834
|
return [FxValidatorService.required];
|
|
1698
1835
|
}
|
|
1699
1836
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.HttpClient }, { token: FxBuilderWrapperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
1700
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerComponent, isStandalone: true, selector: "lib-date-picker", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n
|
|
1837
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerComponent, isStandalone: true, selector: "lib-date-picker", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-content-center relative\">\r\n <form [formGroup]=\"datePickerForm\" class=\"flex flex-column gap-2\">\r\n <p-calendar #dateCalendar formControlName=\"date\" [showIcon]=\"true\" [minDate]=\"minDate\" [maxDate]=\"maxDate\"\r\n [iconDisplay]=\"'input'\" [showOnFocus]=\"false\" dateFormat=\"dd/mm/yy\" [showButtonBar]=\"true\"\r\n placeholder=\"{{ setting('placeHolder') }}\">\r\n <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n (click)=\"dateCalendar.toggle()\" class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </p-calendar>\r\n <div>\r\n <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n</fx-component>", styles: [".cursor-pointer{cursor:pointer!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i5$2.Calendar, selector: "p-calendar", inputs: ["iconDisplay", "style", "styleClass", "inputStyle", "inputId", "name", "inputStyleClass", "placeholder", "ariaLabelledBy", "ariaLabel", "iconAriaLabel", "disabled", "dateFormat", "multipleSeparator", "rangeSeparator", "inline", "showOtherMonths", "selectOtherMonths", "showIcon", "icon", "appendTo", "readonlyInput", "shortYearCutoff", "monthNavigator", "yearNavigator", "hourFormat", "timeOnly", "stepYearPicker", "stepHour", "stepMinute", "stepSecond", "showSeconds", "required", "showOnFocus", "showWeek", "startWeekFromFirstDayOfYear", "showClear", "dataType", "selectionMode", "maxDateCount", "showButtonBar", "todayButtonStyleClass", "clearButtonStyleClass", "autofocus", "autoZIndex", "baseZIndex", "panelStyleClass", "panelStyle", "keepInvalid", "hideOnDateTimeSelect", "touchUI", "timeSeparator", "focusTrap", "showTransitionOptions", "hideTransitionOptions", "tabindex", "variant", "minDate", "maxDate", "disabledDates", "disabledDays", "yearRange", "showTime", "responsiveOptions", "numberOfMonths", "firstDayOfWeek", "locale", "view", "defaultDate"], outputs: ["onFocus", "onBlur", "onClose", "onSelect", "onClear", "onInput", "onTodayClick", "onClearClick", "onMonthChange", "onYearChange", "onClickOutside", "onShow"] }, { kind: "directive", type: i2$1.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }] });
|
|
1701
1838
|
}
|
|
1702
1839
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
1703
1840
|
type: Component,
|
|
1704
|
-
args: [{ selector: 'lib-date-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n
|
|
1841
|
+
args: [{ selector: 'lib-date-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-content-center relative\">\r\n <form [formGroup]=\"datePickerForm\" class=\"flex flex-column gap-2\">\r\n <p-calendar #dateCalendar formControlName=\"date\" [showIcon]=\"true\" [minDate]=\"minDate\" [maxDate]=\"maxDate\"\r\n [iconDisplay]=\"'input'\" [showOnFocus]=\"false\" dateFormat=\"dd/mm/yy\" [showButtonBar]=\"true\"\r\n placeholder=\"{{ setting('placeHolder') }}\">\r\n <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n (click)=\"dateCalendar.toggle()\" class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </p-calendar>\r\n <div>\r\n <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n</fx-component>", styles: [".cursor-pointer{cursor:pointer!important}\n"] }]
|
|
1705
1842
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.HttpClient }, { type: FxBuilderWrapperService }], propDecorators: { fxComponent: [{
|
|
1706
1843
|
type: ViewChild,
|
|
1707
1844
|
args: ['fxComponent']
|