fx-form-builder-wrapper 0.0.72 → 0.0.74
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.
|
@@ -2,7 +2,7 @@ import * as i0 from '@angular/core';
|
|
|
2
2
|
import { Injectable, inject, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
|
|
3
3
|
import * as i1 from '@instantsys-labs/fx';
|
|
4
4
|
import { FxUtils, FxBaseComponent, FxStringSetting, FxValidatorService, FxComponent, FxMode, FxSelectSetting, FxScope, FxComponentBuilder, FxFormComponent } from '@instantsys-labs/fx';
|
|
5
|
-
import { BehaviorSubject, Subject, takeUntil } from 'rxjs';
|
|
5
|
+
import { BehaviorSubject, Subject, takeUntil, map, forkJoin } from 'rxjs';
|
|
6
6
|
import * as i2 from '@angular/common';
|
|
7
7
|
import { CommonModule } from '@angular/common';
|
|
8
8
|
import * as i1$1 from '@angular/forms';
|
|
@@ -267,6 +267,7 @@ class DynamicTableComponent extends FxBaseComponent {
|
|
|
267
267
|
],
|
|
268
268
|
};
|
|
269
269
|
destroy$ = new Subject();
|
|
270
|
+
// public uploadedImages: Array<Record<string, string | File | null> | null> = [];
|
|
270
271
|
uploadedImages = [];
|
|
271
272
|
generalValues;
|
|
272
273
|
tableFormControl = new FormControl();
|
|
@@ -338,19 +339,39 @@ class DynamicTableComponent extends FxBaseComponent {
|
|
|
338
339
|
});
|
|
339
340
|
});
|
|
340
341
|
}
|
|
342
|
+
// public uploadImage(event: Event, rowIndex: number): void {
|
|
343
|
+
// const file = (event.target as HTMLInputElement).files?.[0];
|
|
344
|
+
// if (file) {
|
|
345
|
+
// const reader = new FileReader();
|
|
346
|
+
// reader.onload = () => {
|
|
347
|
+
// this.uploadedImages[rowIndex] = {
|
|
348
|
+
// result: reader.result as string,
|
|
349
|
+
// file: file
|
|
350
|
+
// }
|
|
351
|
+
// this.tableConfig.rows[rowIndex][this.tableConfig.columns.find((f: any) => f.cellType === 'file-upload')?.header] = file;
|
|
352
|
+
// console.log("tableConfig", this.tableConfig);
|
|
353
|
+
// };
|
|
354
|
+
// reader.readAsDataURL(file);
|
|
355
|
+
// }
|
|
356
|
+
// }
|
|
341
357
|
uploadImage(event, rowIndex) {
|
|
342
|
-
const
|
|
343
|
-
if (
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
358
|
+
const files = event.target.files;
|
|
359
|
+
if (files && files.length > 0) {
|
|
360
|
+
this.uploadedImages[rowIndex] = this.uploadedImages[rowIndex] || [];
|
|
361
|
+
Array.from(files).forEach((file) => {
|
|
362
|
+
const reader = new FileReader();
|
|
363
|
+
reader.onload = () => {
|
|
364
|
+
this.uploadedImages[rowIndex].push({
|
|
365
|
+
result: reader.result,
|
|
366
|
+
file: file
|
|
367
|
+
});
|
|
368
|
+
// Optionally add to tableConfig if only one file is tracked there
|
|
369
|
+
const columnHeader = this.tableConfig.columns.find((f) => f.cellType === 'file-upload')?.header;
|
|
370
|
+
this.tableConfig.rows[rowIndex][columnHeader] = this.uploadedImages[rowIndex].map(img => img.file);
|
|
371
|
+
console.log("tableConfig", this.tableConfig);
|
|
349
372
|
};
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
};
|
|
353
|
-
reader.readAsDataURL(file);
|
|
373
|
+
reader.readAsDataURL(file);
|
|
374
|
+
});
|
|
354
375
|
}
|
|
355
376
|
}
|
|
356
377
|
settings() {
|
|
@@ -446,23 +467,79 @@ class DynamicTableComponent extends FxBaseComponent {
|
|
|
446
467
|
}
|
|
447
468
|
});
|
|
448
469
|
}
|
|
449
|
-
deleteFile(file, index) {
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
470
|
+
// public deleteFile(file: any, index: number): void {
|
|
471
|
+
// this.uploadedImages.splice(index, 1, null);
|
|
472
|
+
// this.tableConfig.rows[index][this.tableConfig.columns.find((f: any) => f.cellType === 'file-upload')?.header] = null;
|
|
473
|
+
// console.log("tableConfig", this.tableConfig);
|
|
474
|
+
// this.tableFormControl.setValue(this.tableConfig);
|
|
475
|
+
// }
|
|
476
|
+
deleteFile(rowIndex, imageIndex) {
|
|
477
|
+
if (this.uploadedImages[rowIndex]) {
|
|
478
|
+
this.uploadedImages[rowIndex].splice(imageIndex, 1);
|
|
479
|
+
const columnHeader = this.tableConfig.columns.find((f) => f.cellType === 'file-upload')?.header;
|
|
480
|
+
this.tableConfig.rows[rowIndex][columnHeader] = this.uploadedImages[rowIndex].map(img => img.file);
|
|
481
|
+
console.log("tableConfig", this.tableConfig);
|
|
482
|
+
this.tableFormControl.setValue(this.tableConfig);
|
|
483
|
+
}
|
|
454
484
|
}
|
|
455
|
-
parseUrls(url, index) {
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
485
|
+
// public parseUrls(url: string, index: number): void {
|
|
486
|
+
// this.http.get(url, { responseType: 'blob' }).subscribe({
|
|
487
|
+
// next: (imageBlob: Blob) => {
|
|
488
|
+
// const imageURL = URL.createObjectURL(imageBlob);
|
|
489
|
+
// this.uploadedImages[index] = {
|
|
490
|
+
// result: imageURL,
|
|
491
|
+
// file: null
|
|
492
|
+
// };
|
|
493
|
+
// },
|
|
494
|
+
// error: (error) => {
|
|
495
|
+
// console.error('Error fetching image:', error);
|
|
496
|
+
// }
|
|
497
|
+
// });
|
|
498
|
+
// }
|
|
499
|
+
// public parseUrls(url: string, rowIndex: number): void {
|
|
500
|
+
// this.http.get(url, { responseType: 'blob' }).subscribe({
|
|
501
|
+
// next: (imageBlob: Blob) => {
|
|
502
|
+
// const imageURL = URL.createObjectURL(imageBlob);
|
|
503
|
+
// this.uploadedImages[rowIndex] = this.uploadedImages[rowIndex] || [];
|
|
504
|
+
// this.uploadedImages[rowIndex].push({
|
|
505
|
+
// result: imageURL,
|
|
506
|
+
// file: null
|
|
507
|
+
// });
|
|
508
|
+
// const columnHeader = this.tableConfig.columns.find((f: any) => f.cellType === 'file-upload')?.header;
|
|
509
|
+
// this.tableConfig.rows[rowIndex][columnHeader] = this.uploadedImages[rowIndex].map(img => img.file);
|
|
510
|
+
// this.tableFormControl.setValue(this.tableConfig);
|
|
511
|
+
// },
|
|
512
|
+
// error: (error) => {
|
|
513
|
+
// console.error('Error fetching image:', error);
|
|
514
|
+
// }
|
|
515
|
+
// });
|
|
516
|
+
// }
|
|
517
|
+
parseUrls(urls, rowIndex) {
|
|
518
|
+
if (!urls || !Array.isArray(urls))
|
|
519
|
+
return;
|
|
520
|
+
this.uploadedImages[rowIndex] = this.uploadedImages[rowIndex] || [];
|
|
521
|
+
const columnHeader = this.tableConfig.columns.find((f) => f.cellType === 'file-upload')?.header;
|
|
522
|
+
const imageFetches = [];
|
|
523
|
+
urls.forEach(({ url }) => {
|
|
524
|
+
const image$ = this.http.get(url, { responseType: 'blob' }).pipe(map((imageBlob) => {
|
|
525
|
+
return URL.createObjectURL(imageBlob);
|
|
526
|
+
}));
|
|
527
|
+
imageFetches.push(image$);
|
|
528
|
+
});
|
|
529
|
+
forkJoin(imageFetches).subscribe({
|
|
530
|
+
next: (imageURLs) => {
|
|
531
|
+
imageURLs.forEach((imageURL) => {
|
|
532
|
+
this.uploadedImages[rowIndex].push({
|
|
533
|
+
result: imageURL,
|
|
534
|
+
file: null
|
|
535
|
+
});
|
|
536
|
+
});
|
|
537
|
+
// Set the files as `null` because these are from URLs (not File objects)
|
|
538
|
+
this.tableConfig.rows[rowIndex][columnHeader] = this.uploadedImages[rowIndex].map(img => img.file);
|
|
539
|
+
this.tableFormControl.setValue(this.tableConfig);
|
|
463
540
|
},
|
|
464
541
|
error: (error) => {
|
|
465
|
-
console.error('Error fetching
|
|
542
|
+
console.error('Error fetching one or more images:', error);
|
|
466
543
|
}
|
|
467
544
|
});
|
|
468
545
|
}
|
|
@@ -471,11 +548,11 @@ class DynamicTableComponent extends FxBaseComponent {
|
|
|
471
548
|
this.destroy$.complete();
|
|
472
549
|
}
|
|
473
550
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicTableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: FxBuilderWrapperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
474
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicTableComponent, isStandalone: true, selector: "fx-dynamic-table", inputs: { tableRows: "tableRows", previewType: "previewType", tableConfig: "tableConfig" }, usesInheritance: true, ngImport: i0, template: "<fx-settings-panel [fxData]=\"fxData\" [tableData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n <div *ngIf=\"fxData\">\r\n <table style=\"width: 100%;\" class=\"formBuilder_dynamic_table\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of tableConfig.columns\">{{ column.header }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of tableConfig.rows; let rowIndex = index\">\r\n <td *ngFor=\"let column of tableConfig.columns\">\r\n <ng-container [ngSwitch]=\"column.cellType\">\r\n <span [class]=\"column?.className\" *ngSwitchCase=\"'text'\">{{row[column.header]}}</span>\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'input-text'\" type=\"text\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <!-- <option value=\"\">Select {{column.header}}</option> -->\r\n <option *ngFor=\"let option of column?.options\" [value]=\"option?.optionValue\"> \r\n {{ option?.optionName }}\r\n </option>\r\n </select>\r\n \r\n <select [class]=\"column?.className\" style=\"width: 60%;\" *ngSwitchCase=\"'smart-dropdown'\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <!-- <option value=\"\">Select {{column.header}}</option> -->\r\n <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n {{option?.name }}\r\n </option>\r\n </select>\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <input name=\"radio-{{rowIndex}}\" [class]=\"column?.className\" *ngSwitchCase=\"'radio'\" type=\"radio\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <div [class]=\"column?.className\" style=\"display: flex; justify-content: center; gap: 10px;\"\r\n *ngSwitchCase=\"'radio-group'\">\r\n <label *ngFor=\"let option of column.options\">\r\n <input name=\"radio-group-{{rowIndex}}\" type=\"radio\" [value]=\"option?.optionName\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n {{ option?.optionName }}\r\n </label>\r\n </div>\r\n \r\n <ng-container *ngSwitchCase=\"'file-upload'\">\r\n <!-- <div style=\"display: flex; flex-direction: column; align-items: end;justify-content: end;\">\r\n <img width=\"100\" *ngIf=\"uploadedImages?.[rowIndex]?.['result']\" [src]=\"uploadedImages[rowIndex]?.['result']\"\r\n alt=\"Uploaded Image\" (click)=\"deleteFile(uploadedImages[rowIndex], rowIndex)\"/>\r\n <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile hidden multiple\r\n (change)=\"uploadImage($event, rowIndex)\" />\r\n <button (click)=\"uploadFile.click()\">Upload</button>\r\n </div> -->\r\n <div class=\"flex flex-col items-end justify-end relative\">\r\n <div class=\"relative\">\r\n <img \r\n width=\"100\" \r\n *ngIf=\"uploadedImages?.[rowIndex]?.['result']\" \r\n [src]=\"uploadedImages[rowIndex]?.['result']\"\r\n alt=\"Uploaded Image\"\r\n class=\"rounded shadow\"\r\n />\r\n <button \r\n *ngIf=\"uploadedImages?.[rowIndex]?.['result']\"\r\n (click)=\"deleteFile(uploadedImages[rowIndex], rowIndex)\" \r\n class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n >\r\n \u274C\r\n </button>\r\n </div>\r\n \r\n <input \r\n [class]=\"column?.className\" \r\n type=\"file\" \r\n name=\"file\" \r\n #uploadFile \r\n hidden \r\n multiple\r\n (change)=\"uploadImage($event, rowIndex)\" \r\n />\r\n \r\n <button (click)=\"uploadFile.click()\" class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\">\r\n Upload\r\n </button>\r\n </div>\r\n \r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"></textarea>\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n</fx-settings-panel>", styles: [".formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}\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: "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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: "component", type: SettingsPanelComponent, selector: "fx-settings-panel", inputs: ["tableData"], outputs: ["configuration"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
551
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DynamicTableComponent, isStandalone: true, selector: "fx-dynamic-table", inputs: { tableRows: "tableRows", previewType: "previewType", tableConfig: "tableConfig" }, usesInheritance: true, ngImport: i0, template: "<fx-settings-panel [fxData]=\"fxData\" [tableData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n <div *ngIf=\"fxData\">\r\n <table style=\"width: 100%;\" class=\"formBuilder_dynamic_table\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of tableConfig.columns\">{{ column.header }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of tableConfig.rows; let rowIndex = index\">\r\n <td *ngFor=\"let column of tableConfig.columns\">\r\n <ng-container [ngSwitch]=\"column.cellType\">\r\n <span [class]=\"column?.className\" *ngSwitchCase=\"'text'\">{{row[column.header]}}</span>\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'input-text'\" type=\"text\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <!-- <option value=\"\">Select {{column.header}}</option> -->\r\n <option *ngFor=\"let option of column?.options\" [value]=\"option?.optionValue\"> \r\n {{ option?.optionName }}\r\n </option>\r\n </select>\r\n \r\n <select [class]=\"column?.className\" style=\"width: 60%;\" *ngSwitchCase=\"'smart-dropdown'\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <!-- <option value=\"\">Select {{column.header}}</option> -->\r\n <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n {{option?.name }}\r\n </option>\r\n </select>\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <input name=\"radio-{{rowIndex}}\" [class]=\"column?.className\" *ngSwitchCase=\"'radio'\" type=\"radio\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <div [class]=\"column?.className\" style=\"display: flex; justify-content: center; gap: 10px;\"\r\n *ngSwitchCase=\"'radio-group'\">\r\n <label *ngFor=\"let option of column.options\">\r\n <input name=\"radio-group-{{rowIndex}}\" type=\"radio\" [value]=\"option?.optionName\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n {{ option?.optionName }}\r\n </label>\r\n </div>\r\n \r\n <ng-container *ngSwitchCase=\"'file-upload'\">\r\n <!-- <div style=\"display: flex; flex-direction: column; align-items: end;justify-content: end;\">\r\n <img width=\"100\" *ngIf=\"uploadedImages?.[rowIndex]?.['result']\" [src]=\"uploadedImages[rowIndex]?.['result']\"\r\n alt=\"Uploaded Image\" (click)=\"deleteFile(uploadedImages[rowIndex], rowIndex)\"/>\r\n <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile hidden multiple\r\n (change)=\"uploadImage($event, rowIndex)\" />\r\n <button (click)=\"uploadFile.click()\">Upload</button>\r\n </div> -->\r\n <!-- <div class=\"flex flex-col items-end justify-end relative\">\r\n <div class=\"relative\">\r\n <img \r\n width=\"100\" \r\n *ngIf=\"uploadedImages?.[rowIndex]?.['result']\" \r\n [src]=\"uploadedImages[rowIndex]?.['result']\"\r\n alt=\"Uploaded Image\"\r\n class=\"rounded shadow\"\r\n />\r\n <button \r\n *ngIf=\"uploadedImages?.[rowIndex]?.['result']\"\r\n (click)=\"deleteFile(uploadedImages[rowIndex], rowIndex)\" \r\n class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n >\r\n \u274C\r\n </button>\r\n </div>\r\n \r\n <input \r\n [class]=\"column?.className\" \r\n type=\"file\" \r\n name=\"file\" \r\n #uploadFile \r\n hidden \r\n multiple\r\n (change)=\"uploadImage($event, rowIndex)\" \r\n />\r\n \r\n <button (click)=\"uploadFile.click()\" class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\">\r\n Upload\r\n </button>\r\n </div> -->\r\n\r\n <div class=\"flex flex-col items-end justify-end relative\">\r\n <div class=\"flex gap-2 flex-wrap\">\r\n <div \r\n class=\"relative\" \r\n *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\"\r\n >\r\n <img \r\n width=\"100\" \r\n [src]=\"image?.result\"\r\n alt=\"Uploaded Image\"\r\n class=\"rounded shadow\"\r\n />\r\n <button \r\n (click)=\"deleteFile(rowIndex, i)\" \r\n class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n >\r\n \u274C\r\n </button>\r\n </div>\r\n </div>\r\n \r\n <input \r\n [class]=\"column?.className\" \r\n type=\"file\" \r\n name=\"file\" \r\n #uploadFile \r\n hidden \r\n multiple\r\n (change)=\"uploadImage($event, rowIndex)\" \r\n />\r\n \r\n <button \r\n (click)=\"uploadFile.click()\" \r\n class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\"\r\n >\r\n Upload\r\n </button>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"></textarea>\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n</fx-settings-panel>", styles: [".formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}\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: "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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { 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: "component", type: SettingsPanelComponent, selector: "fx-settings-panel", inputs: ["tableData"], outputs: ["configuration"] }, { kind: "ngmodule", type: ReactiveFormsModule }] });
|
|
475
552
|
}
|
|
476
553
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DynamicTableComponent, decorators: [{
|
|
477
554
|
type: Component,
|
|
478
|
-
args: [{ selector: 'fx-dynamic-table', standalone: true, imports: [CommonModule, FormsModule, SettingsPanelComponent, ReactiveFormsModule], template: "<fx-settings-panel [fxData]=\"fxData\" [tableData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n <div *ngIf=\"fxData\">\r\n <table style=\"width: 100%;\" class=\"formBuilder_dynamic_table\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of tableConfig.columns\">{{ column.header }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of tableConfig.rows; let rowIndex = index\">\r\n <td *ngFor=\"let column of tableConfig.columns\">\r\n <ng-container [ngSwitch]=\"column.cellType\">\r\n <span [class]=\"column?.className\" *ngSwitchCase=\"'text'\">{{row[column.header]}}</span>\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'input-text'\" type=\"text\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <!-- <option value=\"\">Select {{column.header}}</option> -->\r\n <option *ngFor=\"let option of column?.options\" [value]=\"option?.optionValue\"> \r\n {{ option?.optionName }}\r\n </option>\r\n </select>\r\n \r\n <select [class]=\"column?.className\" style=\"width: 60%;\" *ngSwitchCase=\"'smart-dropdown'\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <!-- <option value=\"\">Select {{column.header}}</option> -->\r\n <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n {{option?.name }}\r\n </option>\r\n </select>\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <input name=\"radio-{{rowIndex}}\" [class]=\"column?.className\" *ngSwitchCase=\"'radio'\" type=\"radio\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <div [class]=\"column?.className\" style=\"display: flex; justify-content: center; gap: 10px;\"\r\n *ngSwitchCase=\"'radio-group'\">\r\n <label *ngFor=\"let option of column.options\">\r\n <input name=\"radio-group-{{rowIndex}}\" type=\"radio\" [value]=\"option?.optionName\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n {{ option?.optionName }}\r\n </label>\r\n </div>\r\n \r\n <ng-container *ngSwitchCase=\"'file-upload'\">\r\n <!-- <div style=\"display: flex; flex-direction: column; align-items: end;justify-content: end;\">\r\n <img width=\"100\" *ngIf=\"uploadedImages?.[rowIndex]?.['result']\" [src]=\"uploadedImages[rowIndex]?.['result']\"\r\n alt=\"Uploaded Image\" (click)=\"deleteFile(uploadedImages[rowIndex], rowIndex)\"/>\r\n <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile hidden multiple\r\n (change)=\"uploadImage($event, rowIndex)\" />\r\n <button (click)=\"uploadFile.click()\">Upload</button>\r\n </div> -->\r\n <div class=\"flex flex-col items-end justify-end relative\">\r\n <div class=\"relative\">\r\n <img \r\n width=\"100\" \r\n *ngIf=\"uploadedImages?.[rowIndex]?.['result']\" \r\n [src]=\"uploadedImages[rowIndex]?.['result']\"\r\n alt=\"Uploaded Image\"\r\n class=\"rounded shadow\"\r\n />\r\n <button \r\n *ngIf=\"uploadedImages?.[rowIndex]?.['result']\"\r\n (click)=\"deleteFile(uploadedImages[rowIndex], rowIndex)\" \r\n class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n >\r\n \u274C\r\n </button>\r\n </div>\r\n \r\n <input \r\n [class]=\"column?.className\" \r\n type=\"file\" \r\n name=\"file\" \r\n #uploadFile \r\n hidden \r\n multiple\r\n (change)=\"uploadImage($event, rowIndex)\" \r\n />\r\n \r\n <button (click)=\"uploadFile.click()\" class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\">\r\n Upload\r\n </button>\r\n </div>\r\n \r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"></textarea>\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n</fx-settings-panel>", styles: [".formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}\n"] }]
|
|
555
|
+
args: [{ selector: 'fx-dynamic-table', standalone: true, imports: [CommonModule, FormsModule, SettingsPanelComponent, ReactiveFormsModule], template: "<fx-settings-panel [fxData]=\"fxData\" [tableData]=\"fxData\" (configuration)=\"onChangeConfiguration($event)\">\r\n <div *ngIf=\"fxData\">\r\n <table style=\"width: 100%;\" class=\"formBuilder_dynamic_table\">\r\n <thead>\r\n <tr>\r\n <th *ngFor=\"let column of tableConfig.columns\">{{ column.header }}</th>\r\n </tr>\r\n </thead>\r\n <tbody>\r\n <tr *ngFor=\"let row of tableConfig.rows; let rowIndex = index\">\r\n <td *ngFor=\"let column of tableConfig.columns\">\r\n <ng-container [ngSwitch]=\"column.cellType\">\r\n <span [class]=\"column?.className\" *ngSwitchCase=\"'text'\">{{row[column.header]}}</span>\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'input-text'\" type=\"text\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'input-number'\" type=\"number\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <select [class]=\"column?.className\" *ngSwitchCase=\"'dropdown'\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <!-- <option value=\"\">Select {{column.header}}</option> -->\r\n <option *ngFor=\"let option of column?.options\" [value]=\"option?.optionValue\"> \r\n {{ option?.optionName }}\r\n </option>\r\n </select>\r\n \r\n <select [class]=\"column?.className\" style=\"width: 60%;\" *ngSwitchCase=\"'smart-dropdown'\"\r\n [(ngModel)]=\"row[column.header]\">\r\n <!-- <option value=\"\">Select {{column.header}}</option> -->\r\n <option *ngFor=\"let option of smartDropdownOptions[column.header]\" [value]=\"option?.value\">\r\n {{option?.name }}\r\n </option>\r\n </select>\r\n \r\n <input [class]=\"column?.className\" *ngSwitchCase=\"'checkbox'\" type=\"checkbox\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <input name=\"radio-{{rowIndex}}\" [class]=\"column?.className\" *ngSwitchCase=\"'radio'\" type=\"radio\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n \r\n <div [class]=\"column?.className\" style=\"display: flex; justify-content: center; gap: 10px;\"\r\n *ngSwitchCase=\"'radio-group'\">\r\n <label *ngFor=\"let option of column.options\">\r\n <input name=\"radio-group-{{rowIndex}}\" type=\"radio\" [value]=\"option?.optionName\"\r\n [(ngModel)]=\"row[column.header]\" />\r\n {{ option?.optionName }}\r\n </label>\r\n </div>\r\n \r\n <ng-container *ngSwitchCase=\"'file-upload'\">\r\n <!-- <div style=\"display: flex; flex-direction: column; align-items: end;justify-content: end;\">\r\n <img width=\"100\" *ngIf=\"uploadedImages?.[rowIndex]?.['result']\" [src]=\"uploadedImages[rowIndex]?.['result']\"\r\n alt=\"Uploaded Image\" (click)=\"deleteFile(uploadedImages[rowIndex], rowIndex)\"/>\r\n <input [class]=\"column?.className\" type=\"file\" name=\"file\" #uploadFile hidden multiple\r\n (change)=\"uploadImage($event, rowIndex)\" />\r\n <button (click)=\"uploadFile.click()\">Upload</button>\r\n </div> -->\r\n <!-- <div class=\"flex flex-col items-end justify-end relative\">\r\n <div class=\"relative\">\r\n <img \r\n width=\"100\" \r\n *ngIf=\"uploadedImages?.[rowIndex]?.['result']\" \r\n [src]=\"uploadedImages[rowIndex]?.['result']\"\r\n alt=\"Uploaded Image\"\r\n class=\"rounded shadow\"\r\n />\r\n <button \r\n *ngIf=\"uploadedImages?.[rowIndex]?.['result']\"\r\n (click)=\"deleteFile(uploadedImages[rowIndex], rowIndex)\" \r\n class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n >\r\n \u274C\r\n </button>\r\n </div>\r\n \r\n <input \r\n [class]=\"column?.className\" \r\n type=\"file\" \r\n name=\"file\" \r\n #uploadFile \r\n hidden \r\n multiple\r\n (change)=\"uploadImage($event, rowIndex)\" \r\n />\r\n \r\n <button (click)=\"uploadFile.click()\" class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\">\r\n Upload\r\n </button>\r\n </div> -->\r\n\r\n <div class=\"flex flex-col items-end justify-end relative\">\r\n <div class=\"flex gap-2 flex-wrap\">\r\n <div \r\n class=\"relative\" \r\n *ngFor=\"let image of uploadedImages?.[rowIndex]; let i = index\"\r\n >\r\n <img \r\n width=\"100\" \r\n [src]=\"image?.result\"\r\n alt=\"Uploaded Image\"\r\n class=\"rounded shadow\"\r\n />\r\n <button \r\n (click)=\"deleteFile(rowIndex, i)\" \r\n class=\"absolute top-0 right-0 text-white rounded-md w-5 h-5 flex items-center justify-center shadow-lg hover:bg-red-600\"\r\n >\r\n \u274C\r\n </button>\r\n </div>\r\n </div>\r\n \r\n <input \r\n [class]=\"column?.className\" \r\n type=\"file\" \r\n name=\"file\" \r\n #uploadFile \r\n hidden \r\n multiple\r\n (change)=\"uploadImage($event, rowIndex)\" \r\n />\r\n \r\n <button \r\n (click)=\"uploadFile.click()\" \r\n class=\"mt-2 bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600\"\r\n >\r\n Upload\r\n </button>\r\n </div>\r\n \r\n \r\n </ng-container>\r\n \r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <textarea [class]=\"column?.className\" name=\"\" id=\"\" cols=\"30\" rows=\"2\"></textarea>\r\n </ng-container>\r\n </ng-container>\r\n </td>\r\n </tr>\r\n </tbody>\r\n </table>\r\n </div>\r\n</fx-settings-panel>", styles: [".formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}\n"] }]
|
|
479
556
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: FxBuilderWrapperService }], propDecorators: { tableRows: [{
|
|
480
557
|
type: Input
|
|
481
558
|
}], previewType: [{
|