fx-form-builder-wrapper 0.0.99 → 0.0.100

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.
Files changed (5) hide show
  1. package/esm2022/lib/components/uploader-checkbox/uploader-checkbox.component.mjs +180 -169
  2. package/fesm2022/fx-form-builder-wrapper.mjs +178 -167
  3. package/fesm2022/fx-form-builder-wrapper.mjs.map +1 -1
  4. package/lib/components/uploader-checkbox/uploader-checkbox.component.d.ts +11 -3
  5. package/package.json +1 -1
package/fesm2022/fx-form-builder-wrapper.mjs CHANGED
@@ -989,6 +989,7 @@ class UploaderCheckboxComponent extends FxBaseComponent {
989
989
  cdr;
990
990
  fxBuilderWrapperService;
991
991
  // public uploadFileControl = new UntypedFormControl();
992
+ fxComponent;
992
993
  uploadFileControl = new FormControl();
993
994
  uploadedFiles = [];
994
995
  formattedData = {
@@ -996,6 +997,7 @@ class UploaderCheckboxComponent extends FxBaseComponent {
996
997
  deletedFiles: [],
997
998
  checkboxEnabled: false
998
999
  };
1000
+ uploadedFilesMap = {};
999
1001
  destroy$ = new Subject();
1000
1002
  http = inject(HttpClient);
1001
1003
  checkboxEnabled = false;
@@ -1005,199 +1007,203 @@ class UploaderCheckboxComponent extends FxBaseComponent {
1005
1007
  this.fxBuilderWrapperService = fxBuilderWrapperService;
1006
1008
  this.onInit.subscribe((fxData) => {
1007
1009
  this._register(this.uploadFileControl);
1010
+ console.log("contextid", this.getContextBaseId());
1008
1011
  });
1009
1012
  }
1013
+ // ngAfterViewInit(): void {
1014
+ // console.log("fxcomp",this.fxComponent);
1015
+ // this.getContextBaseId();
1016
+ // }
1010
1017
  uploadedImages = {};
1011
1018
  deletedFiles = [];
1012
- // public ngOnInit(): void {
1013
- // this.fxBuilderWrapperService.variables$
1014
- // .pipe(takeUntil(this.destroy$))
1015
- // .subscribe((variables: any) => {
1016
- // if (!variables) return;
1017
- // const uploadedFiles: { [key: string]: string[] } = {};
1018
- // for (const [key, value] of Object.entries(variables)) {
1019
- // if (key.includes('uploader') && Array.isArray(value)) {
1020
- // uploadedFiles[key] = value;
1021
- // }
1022
- // }
1023
- // for (const [uploaderKey, urls] of Object.entries(uploadedFiles)) {
1024
- // const imageFetches: Observable<string>[] = [];
1025
- // urls.forEach((url: string) => {
1026
- // if (url) {
1027
- // const image$ = this.http.get(url, { responseType: 'blob' }).pipe(
1028
- // map((blob: Blob) => URL.createObjectURL(blob))
1029
- // );
1030
- // imageFetches.push(image$);
1031
- // }
1032
- // });
1033
- // if (imageFetches.length) {
1034
- // forkJoin(imageFetches).subscribe({
1035
- // next: (imageUrls: string[]) => {
1036
- // this.uploadedImages[uploaderKey] = imageUrls.map(result => ({
1037
- // result,
1038
- // file: null
1039
- // }));
1040
- // // this.uploadedFiles = [...this.uploadedImages]
1041
- // this.uploadedFiles = Object.values(this.uploadedImages).flat();
1042
- // },
1043
- // error: (err) => {
1044
- // console.error(`Failed to fetch images for ${uploaderKey}:`, err);
1045
- // }
1046
- // });
1047
- // }
1019
+ // ngOnInit(): void {
1020
+ // this.fxBuilderWrapperService.variables$
1021
+ // .pipe(takeUntil(this.destroy$))
1022
+ // .subscribe((variables: any) => {
1023
+ // if (!variables) return;
1024
+ // const uploadedFilesMap: { [key: string]: string[] } = {};
1025
+ // // Extract uploader keys and their corresponding URL arrays
1026
+ // for (const [key, value] of Object.entries(variables)) {
1027
+ // if (key.includes('uploader-checkbox') && Array.isArray(value)) {
1028
+ // uploadedFilesMap[key] = value;
1029
+ // }
1030
+ // }
1031
+ // for (const [uploaderKey, urls] of Object.entries(uploadedFilesMap)) {
1032
+ // const imageFetches: Observable<{ result: string; originalUrl: any }>[] = [];
1033
+ // urls.forEach((originalUrl:any) => {
1034
+ // if (originalUrl) {
1035
+ // const image$ = this.http.get(originalUrl?.originalUrl, { responseType: 'blob' }).pipe(
1036
+ // map((blob: Blob) => ({
1037
+ // result: URL.createObjectURL(blob), // for preview
1038
+ // originalUrl: originalUrl?.originalUrl // preserve original
1039
+ // }))
1040
+ // );
1041
+ // imageFetches.push(image$);
1042
+ // }
1043
+ // });
1044
+ // if (imageFetches.length > 0) {
1045
+ // forkJoin(imageFetches).subscribe({
1046
+ // next: (imageData) => {
1047
+ // const formatted = imageData.map(item => ({
1048
+ // id: uuidv4(),
1049
+ // file: null,
1050
+ // originalUrl: item.originalUrl,
1051
+ // result: item.result
1052
+ // }));
1053
+ // this.uploadedFiles = [...this.uploadedFiles, ...formatted];
1054
+ // this.formattedData.uploadedFiles = this.uploadedFiles;
1055
+ // this.uploadFileControl.setValue(this.formattedData);
1056
+ // },
1057
+ // error: (err) => {
1058
+ // console.error(`Failed to fetch images for ${uploaderKey}:`, err);
1059
+ // }
1060
+ // });
1061
+ // }
1062
+ // }
1063
+ // });
1064
+ // }
1065
+ // public onFileSelected(event: Event) {
1066
+ // const input = event.target as HTMLInputElement;
1067
+ // if (input.files) {
1068
+ // for(let i = 0; i < input?.files?.length; i++) {
1069
+ // const file = input.files[i];
1070
+ // const reader = new FileReader();
1071
+ // reader.onload = e => {
1072
+ // this.uploadedFiles.push({
1073
+ // file: file,
1074
+ // result: e.target?.result,
1075
+ // name: file?.name,
1076
+ // id: uuidv4()
1077
+ // })
1078
+ // this.uploadFileControl.setValue(this.uploadedFiles);
1079
+ // console.log(this.uploadFileControl);
1048
1080
  // }
1049
- // });
1081
+ // reader.readAsDataURL(file);
1082
+ // }
1083
+ // }
1050
1084
  // }
1051
- // ngOnInit(): void {
1085
+ // ngOnInit(): void {
1086
+ // // Extract uploader keys and their corresponding URL arrays and store them in uploadedFilesMap
1052
1087
  // this.fxBuilderWrapperService.variables$
1053
1088
  // .pipe(takeUntil(this.destroy$))
1054
1089
  // .subscribe((variables: any) => {
1055
1090
  // if (!variables) return;
1056
- // const uploadedFiles: { [key: string]: string[] } = {};
1091
+ // const uploadedFilesMap: { [key: string]: string[] } = {};
1092
+ // // Extract uploader keys and their corresponding URL arrays
1057
1093
  // for (const [key, value] of Object.entries(variables)) {
1058
- // if (key.includes('uploader') && Array.isArray(value)) {
1059
- // uploadedFiles[key] = value;
1094
+ // if (key.includes('uploader-checkbox') && Array.isArray(value)) {
1095
+ // uploadedFilesMap[key] = value;
1060
1096
  // }
1061
1097
  // }
1062
- // for (const [uploaderKey, urls] of Object.entries(uploadedFiles)) {
1063
- // const imageFetches: Observable<{ result: string, originalUrl: string }>[] = [];
1064
- // urls.forEach((url: string) => {
1065
- // if (url) {
1066
- // const image$ = this.http.get(url, { responseType: 'blob' }).pipe(
1067
- // map((blob: Blob) => ({
1068
- // result: URL.createObjectURL(blob), // just for preview
1069
- // originalUrl: url
1070
- // }))
1071
- // );
1072
- // imageFetches.push(image$);
1073
- // }
1074
- // });
1075
- // if (imageFetches.length) {
1076
- // forkJoin(imageFetches).subscribe({
1077
- // next: (imageData) => {
1078
- // const formatted = imageData.map(item => ({
1079
- // id: uuidv4(),
1080
- // file: null,
1081
- // originalUrl: item.originalUrl,
1082
- // result: item.result
1083
- // }));
1084
- // this.uploadedFiles = [...this.uploadedFiles, ...formatted];
1085
- // this.uploadFileControl.setValue(this.uploadedFiles);
1086
- // },
1087
- // error: (err) => {
1088
- // console.error(`Failed to fetch images for ${uploaderKey}:`, err);
1089
- // }
1090
- // });
1091
- // }
1098
+ // this.uploadedFilesMap = uploadedFilesMap; // Store the map for later use
1099
+ // });
1100
+ // }
1101
+ // ngAfterViewInit(): void {
1102
+ // console.log("fxcomp", this.fxComponent);
1103
+ // const key = this.fxComponent?.fxData?.name;
1104
+ // if (key && this.uploadedFilesMap?.[key]) {
1105
+ // const urls = this.uploadedFilesMap[key];
1106
+ // const imageFetches: Observable<{ result: string; originalUrl: any }>[] = [];
1107
+ // urls.forEach((originalUrl: any) => {
1108
+ // if (originalUrl) {
1109
+ // const image$ = this.http.get(originalUrl?.originalUrl, { responseType: 'blob' }).pipe(
1110
+ // map((blob: Blob) => ({
1111
+ // result: URL.createObjectURL(blob),
1112
+ // originalUrl: originalUrl?.originalUrl
1113
+ // }))
1114
+ // );
1115
+ // imageFetches.push(image$);
1092
1116
  // }
1093
1117
  // });
1118
+ // if (imageFetches.length > 0) {
1119
+ // forkJoin(imageFetches).subscribe({
1120
+ // next: (imageData) => {
1121
+ // const formatted = imageData.map(item => ({
1122
+ // id: uuidv4(),
1123
+ // file: null,
1124
+ // originalUrl: item.originalUrl,
1125
+ // result: item.result
1126
+ // }));
1127
+ // this.uploadedFiles = [...this.uploadedFiles, ...formatted];
1128
+ // this.formattedData.uploadedFiles = this.uploadedFiles;
1129
+ // this.uploadFileControl.setValue(this.formattedData);
1130
+ // },
1131
+ // error: (err) => {
1132
+ // console.error(`Failed to fetch images for ${key}:`, err);
1133
+ // }
1134
+ // });
1135
+ // }
1136
+ // } else {
1137
+ // console.error('No files found for the provided key:', key);
1138
+ // }
1139
+ // this.getContextBaseId();
1094
1140
  // }
1095
1141
  ngOnInit() {
1142
+ // Extract uploader keys and their corresponding file objects and store them in uploadedFilesMap
1096
1143
  this.fxBuilderWrapperService.variables$
1097
1144
  .pipe(takeUntil(this.destroy$))
1098
1145
  .subscribe((variables) => {
1099
1146
  if (!variables)
1100
1147
  return;
1148
+ // Initialize the map to store the structure of uploaded files and other data
1101
1149
  const uploadedFilesMap = {};
1102
- // Extract uploader keys and their corresponding URL arrays
1150
+ // Iterate over the variables to extract uploader keys and their corresponding uploaded files data
1103
1151
  for (const [key, value] of Object.entries(variables)) {
1104
- if (key.includes('uploader-checkbox') && Array.isArray(value)) {
1105
- uploadedFilesMap[key] = value;
1152
+ // Check if the key starts with 'uploader-checkbox' and if value is an object containing 'uploadedFiles'
1153
+ if (key.startsWith('uploader-checkbox') && value.uploadedFiles) {
1154
+ uploadedFilesMap[key] = {
1155
+ uploadedFiles: value.uploadedFiles,
1156
+ checkboxEnabled: value.checkboxEnabled || false
1157
+ };
1106
1158
  }
1107
1159
  }
1108
- for (const [uploaderKey, urls] of Object.entries(uploadedFilesMap)) {
1109
- const imageFetches = [];
1110
- urls.forEach((originalUrl) => {
1111
- if (originalUrl) {
1112
- const image$ = this.http.get(originalUrl?.originalUrl, { responseType: 'blob' }).pipe(map((blob) => ({
1113
- result: URL.createObjectURL(blob), // for preview
1114
- originalUrl: originalUrl?.originalUrl // preserve original
1115
- })));
1116
- imageFetches.push(image$);
1160
+ this.uploadedFilesMap = uploadedFilesMap; // Store the map for later use
1161
+ });
1162
+ }
1163
+ ngAfterViewInit() {
1164
+ console.log("fxcomp", this.fxComponent);
1165
+ const key = this.fxComponent?.fxData?.name;
1166
+ if (key && this.uploadedFilesMap?.[key]) {
1167
+ const uploadedFiles = this.uploadedFilesMap[key]?.uploadedFiles;
1168
+ this.checkboxEnabled = this.uploadedFilesMap[key]?.checkboxEnabled; // Get the uploadedFiles array
1169
+ const imageFetches = [];
1170
+ // Iterate over the uploaded files and fetch the images
1171
+ uploadedFiles.forEach((file) => {
1172
+ const originalUrl = file?.originalUrl;
1173
+ if (originalUrl) {
1174
+ const image$ = this.http.get(originalUrl, { responseType: 'blob' }).pipe(map((blob) => ({
1175
+ result: URL.createObjectURL(blob), // Blob URL for preview
1176
+ originalUrl: file?.originalUrl // Preserve the original URL
1177
+ })));
1178
+ imageFetches.push(image$);
1179
+ }
1180
+ });
1181
+ // Fetch all images concurrently using forkJoin
1182
+ if (imageFetches.length > 0) {
1183
+ forkJoin(imageFetches).subscribe({
1184
+ next: (imageData) => {
1185
+ const formatted = imageData.map(item => ({
1186
+ id: v4(),
1187
+ file: null,
1188
+ originalUrl: item.originalUrl,
1189
+ result: item.result
1190
+ }));
1191
+ this.uploadedFiles = [...this.uploadedFiles, ...formatted];
1192
+ this.formattedData.uploadedFiles = this.uploadedFiles;
1193
+ this.formattedData.checkboxEnabled = this.checkboxEnabled;
1194
+ this.uploadFileControl.setValue(this.formattedData);
1195
+ },
1196
+ error: (err) => {
1197
+ console.error(`Failed to fetch images for ${key}:`, err);
1117
1198
  }
1118
1199
  });
1119
- if (imageFetches.length > 0) {
1120
- forkJoin(imageFetches).subscribe({
1121
- next: (imageData) => {
1122
- const formatted = imageData.map(item => ({
1123
- id: v4(),
1124
- file: null,
1125
- originalUrl: item.originalUrl,
1126
- result: item.result
1127
- }));
1128
- this.uploadedFiles = [...this.uploadedFiles, ...formatted];
1129
- this.formattedData.uploadedFiles = this.uploadedFiles;
1130
- this.uploadFileControl.setValue(this.formattedData);
1131
- },
1132
- error: (err) => {
1133
- console.error(`Failed to fetch images for ${uploaderKey}:`, err);
1134
- }
1135
- });
1136
- }
1137
1200
  }
1138
- });
1201
+ }
1202
+ else {
1203
+ console.error('No files found for the provided key:', key);
1204
+ }
1205
+ this.getContextBaseId();
1139
1206
  }
1140
- // ngOnInit(): void {
1141
- // this.fxBuilderWrapperService.variables$
1142
- // .pipe(takeUntil(this.destroy$))
1143
- // .subscribe((variables: any) => {
1144
- // if (!variables) return;
1145
- // const uploadedFilesMap: { [key: string]: { originalUrl: string }[] } = variables.uploadedFiles;
1146
- // for (const [uploaderKey, urls] of Object.entries(uploadedFilesMap)) {
1147
- // const imageFetches: Observable<{ result: string; originalUrl: string }>[] = [];
1148
- // urls.forEach((fileObj: any) => {
1149
- // const originalUrl = fileObj?.originalUrl;
1150
- // if (originalUrl) {
1151
- // const image$ = this.http.get(originalUrl, { responseType: 'blob' }).pipe(
1152
- // map((blob: Blob) => ({
1153
- // result: URL.createObjectURL(blob), // for preview
1154
- // originalUrl
1155
- // }))
1156
- // );
1157
- // imageFetches.push(image$);
1158
- // }
1159
- // });
1160
- // if (imageFetches.length > 0) {
1161
- // forkJoin(imageFetches).subscribe({
1162
- // next: (imageData) => {
1163
- // const formatted = imageData.map(item => ({
1164
- // id: uuidv4(),
1165
- // file: null,
1166
- // originalUrl: item.originalUrl,
1167
- // result: item.result
1168
- // }));
1169
- // this.uploadedFiles = [...this.uploadedFiles, ...formatted];
1170
- // this.formattedData.uploadedFiles = this.uploadedFiles;
1171
- // this.uploadFileControl.setValue(this.formattedData);
1172
- // },
1173
- // error: (err) => {
1174
- // console.error(`Failed to fetch images for ${uploaderKey}:`, err);
1175
- // }
1176
- // });
1177
- // }
1178
- // }
1179
- // });
1180
- // }
1181
- // public onFileSelected(event: Event) {
1182
- // const input = event.target as HTMLInputElement;
1183
- // if (input.files) {
1184
- // for(let i = 0; i < input?.files?.length; i++) {
1185
- // const file = input.files[i];
1186
- // const reader = new FileReader();
1187
- // reader.onload = e => {
1188
- // this.uploadedFiles.push({
1189
- // file: file,
1190
- // result: e.target?.result,
1191
- // name: file?.name,
1192
- // id: uuidv4()
1193
- // })
1194
- // this.uploadFileControl.setValue(this.uploadedFiles);
1195
- // console.log(this.uploadFileControl);
1196
- // }
1197
- // reader.readAsDataURL(file);
1198
- // }
1199
- // }
1200
- // }
1201
1207
  onFileSelected(event) {
1202
1208
  const input = event.target;
1203
1209
  if (input.files) {
@@ -1214,6 +1220,7 @@ class UploaderCheckboxComponent extends FxBaseComponent {
1214
1220
  };
1215
1221
  this.uploadedFiles.push(newFile);
1216
1222
  this.formattedData.uploadedFiles = this.uploadedFiles;
1223
+ this.formattedData.checkboxEnabled = this.checkboxEnabled;
1217
1224
  this.uploadFileControl.setValue(this.formattedData);
1218
1225
  };
1219
1226
  reader.readAsDataURL(file);
@@ -1249,7 +1256,8 @@ class UploaderCheckboxComponent extends FxBaseComponent {
1249
1256
  this.formattedData = {
1250
1257
  ...this.formattedData,
1251
1258
  uploadedFiles: this.uploadedFiles,
1252
- deletedFiles: this.deletedFiles
1259
+ deletedFiles: this.deletedFiles,
1260
+ checkboxEnabled: this.checkboxEnabled
1253
1261
  };
1254
1262
  // Set the value of the uploadFileControl
1255
1263
  this.uploadFileControl.setValue(this.formattedData);
@@ -1274,12 +1282,15 @@ class UploaderCheckboxComponent extends FxBaseComponent {
1274
1282
  return [FxValidatorService.required];
1275
1283
  }
1276
1284
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploaderCheckboxComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FxBuilderWrapperService }], target: i0.ɵɵFactoryTarget.Component });
1277
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UploaderCheckboxComponent, isStandalone: true, selector: "uploader-checkbox", usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\">\r\n <label class=\"inline-flex items-center gap-2\">\r\n <input\r\n type=\"checkbox\"\r\n [(ngModel)] = \"checkboxEnabled\"\r\n (change)=\"onCheckboxChange()\"\r\n />\r\n {{ setting('checkbox-label') }}\r\n </label>\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\" (click)=\"deleteFile(i)\"\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>\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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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 }] });
1285
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: UploaderCheckboxComponent, isStandalone: true, selector: "uploader-checkbox", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <label class=\"inline-flex items-center gap-2\">\r\n <input\r\n type=\"checkbox\"\r\n [(ngModel)] = \"checkboxEnabled\"\r\n (change)=\"onCheckboxChange()\"\r\n />\r\n {{ setting('checkbox-label') }}\r\n </label>\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\" (click)=\"deleteFile(i)\"\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>\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.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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 }] });
1278
1286
  }
1279
1287
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: UploaderCheckboxComponent, decorators: [{
1280
1288
  type: Component,
1281
- args: [{ selector: 'uploader-checkbox', standalone: true, imports: [CommonModule, FxComponent, FormsModule, ReactiveFormsModule], template: "<fx-component [fxData]=\"fxData\">\r\n <label class=\"inline-flex items-center gap-2\">\r\n <input\r\n type=\"checkbox\"\r\n [(ngModel)] = \"checkboxEnabled\"\r\n (change)=\"onCheckboxChange()\"\r\n />\r\n {{ setting('checkbox-label') }}\r\n </label>\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\" (click)=\"deleteFile(i)\"\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>\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"] }]
1282
- }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FxBuilderWrapperService }] });
1289
+ args: [{ selector: 'uploader-checkbox', standalone: true, imports: [CommonModule, FxComponent, FormsModule, ReactiveFormsModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <label class=\"inline-flex items-center gap-2\">\r\n <input\r\n type=\"checkbox\"\r\n [(ngModel)] = \"checkboxEnabled\"\r\n (change)=\"onCheckboxChange()\"\r\n />\r\n {{ setting('checkbox-label') }}\r\n </label>\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\" (click)=\"deleteFile(i)\"\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>\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"] }]
1290
+ }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FxBuilderWrapperService }], propDecorators: { fxComponent: [{
1291
+ type: ViewChild,
1292
+ args: ['fxComponent']
1293
+ }] } });
1283
1294
 
1284
1295
  class FxBuilderWrapperComponent {
1285
1296
  fxWrapperService;