fx-form-builder-wrapper 2.0.64 → 2.0.66
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 +21 -13
- package/esm2022/lib/components/radio-group/radio-group.component.mjs +35 -21
- package/esm2022/lib/components/uploader/uploader.component.mjs +2 -3
- package/fesm2022/fx-form-builder-wrapper.mjs +53 -32
- package/fesm2022/fx-form-builder-wrapper.mjs.map +1 -1
- package/lib/components/radio-group/radio-group.component.d.ts +1 -0
- package/package.json +1 -1
|
@@ -3,7 +3,7 @@ import { inject, Injectable, Component, EventEmitter, Input, Output, ViewChild }
|
|
|
3
3
|
import * as i3$2 from '@instantsys-labs/core';
|
|
4
4
|
import { ApiServiceRegistry } from '@instantsys-labs/core';
|
|
5
5
|
import * as i1 from '@instantsys-labs/fx';
|
|
6
|
-
import { FxUtils, FxBaseComponent, FxStringSetting, FxValidatorService, FxComponent, FxMode, FxSelectSetting,
|
|
6
|
+
import { FxUtils, FxBaseComponent, FxStringSetting, FxValidatorService, FxComponent, FxMode, FxSelectSetting, FxOptionSetting, FxScope, FxComponentBuilder, FxFormComponent } from '@instantsys-labs/fx';
|
|
7
7
|
import { BehaviorSubject, Subject, takeUntil, map, forkJoin } from 'rxjs';
|
|
8
8
|
import * as i5 from '@angular/common';
|
|
9
9
|
import { CommonModule } from '@angular/common';
|
|
@@ -1586,7 +1586,6 @@ class UploaderComponent extends FxBaseComponent {
|
|
|
1586
1586
|
new FxStringSetting({ key: 'maxFileNo', $title: 'Maximum File Upload Allowed', value: 8 }),
|
|
1587
1587
|
new FxStringSetting({ key: 'maxFileSize', $title: 'Maximum File Size Allowed', value: 10 }),
|
|
1588
1588
|
new FxStringSetting({ key: 'maxFileSize', $title: 'Maximum File Size Allowed', value: 10 }),
|
|
1589
|
-
new FxJsonSetting({ key: 'categories', $title: 'File Categories', value: this.categories }),
|
|
1590
1589
|
];
|
|
1591
1590
|
}
|
|
1592
1591
|
validations() {
|
|
@@ -2128,17 +2127,25 @@ class DatePickerComponent extends FxBaseComponent {
|
|
|
2128
2127
|
});
|
|
2129
2128
|
}
|
|
2130
2129
|
ngOnInit() {
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
|
|
2140
|
-
|
|
2141
|
-
|
|
2130
|
+
this.fxBuilderWrapperService.variables$
|
|
2131
|
+
.pipe(takeUntil(this.destroy$))
|
|
2132
|
+
.subscribe((variables) => {
|
|
2133
|
+
if (!variables)
|
|
2134
|
+
return;
|
|
2135
|
+
this.datePickerMap = new Map();
|
|
2136
|
+
// for (const [key, value] of Object.entries(variables) as [string, any][]) {
|
|
2137
|
+
// if (key.includes('lib-date-picker')) {
|
|
2138
|
+
// this.datePickerMap.set(key, value);
|
|
2139
|
+
// }
|
|
2140
|
+
// }
|
|
2141
|
+
for (const [key, value] of Object.entries(variables)) {
|
|
2142
|
+
if (value &&
|
|
2143
|
+
typeof value === 'object' &&
|
|
2144
|
+
'date' in value) {
|
|
2145
|
+
this.datePickerMap.set(key, value);
|
|
2146
|
+
}
|
|
2147
|
+
}
|
|
2148
|
+
});
|
|
2142
2149
|
// const today = new Date();
|
|
2143
2150
|
// this.minDate = new Date(today);
|
|
2144
2151
|
// this.minDate.setDate(today.getDate() - 30);
|
|
@@ -2359,8 +2366,8 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2359
2366
|
showOnSelection = 'yes'; // configurable: show textarea on Yes or No
|
|
2360
2367
|
showTextArea = false;
|
|
2361
2368
|
confirmationForm = this.fb.group({
|
|
2362
|
-
confirmation: [''],
|
|
2363
|
-
remarks: ['']
|
|
2369
|
+
confirmation: ['', Validators.required],
|
|
2370
|
+
remarks: [''],
|
|
2364
2371
|
});
|
|
2365
2372
|
options = [
|
|
2366
2373
|
{ option: 'Yes', value: 'YES' },
|
|
@@ -2368,6 +2375,7 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2368
2375
|
{ option: 'NA', value: 'NA' }
|
|
2369
2376
|
];
|
|
2370
2377
|
fxComponent;
|
|
2378
|
+
radoioMap = new Map();
|
|
2371
2379
|
constructor(cdr, http, fxBuilderWrapperService, fxApiService) {
|
|
2372
2380
|
super(cdr);
|
|
2373
2381
|
this.cdr = cdr;
|
|
@@ -2381,9 +2389,11 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2381
2389
|
ngAfterViewInit() {
|
|
2382
2390
|
this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'items')?.options || [];
|
|
2383
2391
|
setTimeout(() => {
|
|
2384
|
-
this.
|
|
2385
|
-
|
|
2386
|
-
|
|
2392
|
+
const key = this.fxComponent?.fxData?.name;
|
|
2393
|
+
if (key && this.radoioMap.has(key)) {
|
|
2394
|
+
this.confirmationForm.patchValue(this.radoioMap.get(key));
|
|
2395
|
+
}
|
|
2396
|
+
}, 200);
|
|
2387
2397
|
}
|
|
2388
2398
|
ngOnInit() {
|
|
2389
2399
|
this.fxBuilderWrapperService.variables$
|
|
@@ -2391,23 +2401,31 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2391
2401
|
.subscribe((variables) => {
|
|
2392
2402
|
if (!variables)
|
|
2393
2403
|
return;
|
|
2404
|
+
// for (const [key, value] of Object.entries(variables) as [string, any][]) {
|
|
2405
|
+
// if (key.includes('radio-group-custom')) {
|
|
2406
|
+
// this.formObject = value;
|
|
2407
|
+
// }
|
|
2408
|
+
// }
|
|
2394
2409
|
for (const [key, value] of Object.entries(variables)) {
|
|
2395
|
-
if (
|
|
2396
|
-
|
|
2410
|
+
if (value &&
|
|
2411
|
+
typeof value === 'object' &&
|
|
2412
|
+
'confirmation' in value) {
|
|
2413
|
+
this.radoioMap.set(key, value);
|
|
2397
2414
|
}
|
|
2398
2415
|
}
|
|
2399
2416
|
});
|
|
2400
2417
|
this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'items')?.options || [];
|
|
2401
2418
|
// this.setting('items').length > 0 ? this.options = this.setting('items') : null;
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2419
|
+
this.confirmationForm.get('confirmation')?.valueChanges.subscribe(value => {
|
|
2420
|
+
const otherControl = this.confirmationForm.get('remarks');
|
|
2421
|
+
if (value) {
|
|
2422
|
+
otherControl?.setValidators([Validators.required]);
|
|
2423
|
+
}
|
|
2424
|
+
else {
|
|
2425
|
+
otherControl?.setValidators([Validators.required]);
|
|
2426
|
+
otherControl?.reset();
|
|
2427
|
+
}
|
|
2428
|
+
});
|
|
2411
2429
|
}
|
|
2412
2430
|
settings() {
|
|
2413
2431
|
return [
|
|
@@ -2420,7 +2438,10 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2420
2438
|
// new FxStringSetting({ key: 'option-label-two', $title: 'Label two', value: 'Label two' }),
|
|
2421
2439
|
new FxStringSetting({ key: 'value-show-text', $title: 'Value to show textarea', value: 'Value to show textarea' }),
|
|
2422
2440
|
new FxOptionSetting({ key: 'items', $title: 'Options', value: [{ option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }] }, [{ option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }]),
|
|
2423
|
-
|
|
2441
|
+
new FxStringSetting({ key: 'additional-field-label', $title: 'Additional field label', value: '' }),
|
|
2442
|
+
new FxStringSetting({ key: 'additional-field-error-msg', $title: 'Additional field error message', value: 'Please fill out the field' }),
|
|
2443
|
+
new FxStringSetting({ key: 'error-msg', $title: 'Error message', value: 'Please select' }),
|
|
2444
|
+
new FxStringSetting({ key: 'remark-placeholder', $title: 'Error message', value: 'Please select' }),
|
|
2424
2445
|
// new FxStringSetting({ key: 'other-placeholder', $title: 'Other Placeholder', value: '' }),
|
|
2425
2446
|
// new FxSelectSetting({key: 'serviceName', $title: 'Service', value: ''}, [{option: 'User Service', value: 'user_service'}, {option: 'Patient Service', value: 'patient_service'},{option: 'Workflow Service', value: 'workflow_service'}]),
|
|
2426
2447
|
// // new FxSelectSetting({key: 'service', $title: 'Service', value: 'local'}, [{option: 'Local', value: 'local'}, {option: 'QA', value: 'qa'},{option: 'UAT', value: 'uat'},{option: 'Production', value: 'prod'}]),
|
|
@@ -2435,11 +2456,11 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2435
2456
|
this.showTextArea = selection === this.setting('value-show-text');
|
|
2436
2457
|
}
|
|
2437
2458
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$2.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
2438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RadioGroupComponent, isStandalone: true, selector: "radio-group-custom", inputs: { showOnSelection: "showOnSelection" }, viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "
|
|
2459
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RadioGroupComponent, isStandalone: true, selector: "radio-group-custom", inputs: { showOnSelection: "showOnSelection" }, viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <form [formGroup]=\"confirmationForm\" class=\"flex flex-col gap-4\">\r\n\r\n <!-- Title -->\r\n <label class=\"font-semibold text-gray-800\">\r\n {{ setting('select-label') }}\r\n </label>\r\n\r\n <!-- ROW -->\r\n <div class=\"flex items-start gap-16\">\r\n\r\n <!-- RADIO GROUP -->\r\n <div class=\"flex flex-col\">\r\n <div class=\"flex items-center custom-gap\">\r\n\r\n <label\r\n *ngFor=\"let opt of options\"\r\n class=\"flex items-center gap-2 cursor-pointer text-gray-700\"\r\n >\r\n <input\r\n type=\"radio\"\r\n formControlName=\"confirmation\"\r\n [value]=\"opt.value\"\r\n (change)=\"onSelectionChange(opt.value)\"\r\n class=\"w-4 h-4 accent-blue-600 cursor-pointer\"\r\n />\r\n <span>{{ opt.option }}</span>\r\n </label>\r\n\r\n </div>\r\n\r\n <!-- Radio error -->\r\n <small\r\n *ngIf=\"\r\n confirmationForm.get('confirmation')?.touched &&\r\n confirmationForm.get('confirmation')?.errors?.['required']\r\n \"\r\n class=\"text-red-500 mt-1\"\r\n >\r\n {{ setting('error-msg') }}\r\n </small>\r\n </div>\r\n\r\n <!-- REMARKS -->\r\n <div *ngIf=\"showTextArea\" class=\"flex flex-col w-80 ml-4\">\r\n\r\n <label class=\"mb-2 font-medium text-gray-700\">\r\n {{ setting('additional-field-label') }}\r\n </label>\r\n\r\n <textarea\r\n formControlName=\"remarks\"\r\n rows=\"3\"\r\n placeholder=\"Enter details...\"\r\n class=\"border border-gray-300 rounded-lg p-3 w-full \r\n resize-none shadow-sm\r\n focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n ></textarea>\r\n\r\n <!-- Error -->\r\n <small\r\n *ngIf=\"\r\n confirmationForm.get('remarks')?.touched &&\r\n confirmationForm.get('remarks')?.errors?.['required']\r\n \"\r\n class=\"text-red-500 mt-1\"\r\n >\r\n {{ setting('additional-field-error-msg') }}\r\n </small>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n</fx-component>\r\n", styles: [".custom-gap{gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.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.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.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.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: "ngmodule", type: RadioButtonModule }] });
|
|
2439
2460
|
}
|
|
2440
2461
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
2441
2462
|
type: Component,
|
|
2442
|
-
args: [{ selector: 'radio-group-custom', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, RadioButtonModule], template: "
|
|
2463
|
+
args: [{ selector: 'radio-group-custom', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, RadioButtonModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <form [formGroup]=\"confirmationForm\" class=\"flex flex-col gap-4\">\r\n\r\n <!-- Title -->\r\n <label class=\"font-semibold text-gray-800\">\r\n {{ setting('select-label') }}\r\n </label>\r\n\r\n <!-- ROW -->\r\n <div class=\"flex items-start gap-16\">\r\n\r\n <!-- RADIO GROUP -->\r\n <div class=\"flex flex-col\">\r\n <div class=\"flex items-center custom-gap\">\r\n\r\n <label\r\n *ngFor=\"let opt of options\"\r\n class=\"flex items-center gap-2 cursor-pointer text-gray-700\"\r\n >\r\n <input\r\n type=\"radio\"\r\n formControlName=\"confirmation\"\r\n [value]=\"opt.value\"\r\n (change)=\"onSelectionChange(opt.value)\"\r\n class=\"w-4 h-4 accent-blue-600 cursor-pointer\"\r\n />\r\n <span>{{ opt.option }}</span>\r\n </label>\r\n\r\n </div>\r\n\r\n <!-- Radio error -->\r\n <small\r\n *ngIf=\"\r\n confirmationForm.get('confirmation')?.touched &&\r\n confirmationForm.get('confirmation')?.errors?.['required']\r\n \"\r\n class=\"text-red-500 mt-1\"\r\n >\r\n {{ setting('error-msg') }}\r\n </small>\r\n </div>\r\n\r\n <!-- REMARKS -->\r\n <div *ngIf=\"showTextArea\" class=\"flex flex-col w-80 ml-4\">\r\n\r\n <label class=\"mb-2 font-medium text-gray-700\">\r\n {{ setting('additional-field-label') }}\r\n </label>\r\n\r\n <textarea\r\n formControlName=\"remarks\"\r\n rows=\"3\"\r\n placeholder=\"Enter details...\"\r\n class=\"border border-gray-300 rounded-lg p-3 w-full \r\n resize-none shadow-sm\r\n focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n ></textarea>\r\n\r\n <!-- Error -->\r\n <small\r\n *ngIf=\"\r\n confirmationForm.get('remarks')?.touched &&\r\n confirmationForm.get('remarks')?.errors?.['required']\r\n \"\r\n class=\"text-red-500 mt-1\"\r\n >\r\n {{ setting('additional-field-error-msg') }}\r\n </small>\r\n\r\n </div>\r\n\r\n </div>\r\n\r\n </form>\r\n</fx-component>\r\n", styles: [".custom-gap{gap:1rem}\n"] }]
|
|
2443
2464
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$2.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { showOnSelection: [{
|
|
2444
2465
|
type: Input
|
|
2445
2466
|
}], fxComponent: [{
|