fx-form-builder-wrapper 2.0.101 → 2.0.103
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/customize-dropdown/customize-dropdown.component.mjs +3 -3
- package/esm2022/lib/components/fx-form-component/fx-form-component.component.mjs +3 -1
- package/esm2022/lib/components/heading/heading.component.mjs +45 -0
- package/esm2022/lib/fx-builder-wrapper.component.mjs +5 -1
- package/fesm2022/fx-form-builder-wrapper.mjs +44 -2
- package/fesm2022/fx-form-builder-wrapper.mjs.map +1 -1
- package/lib/components/heading/heading.component.d.ts +19 -0
- package/package.json +1 -1
|
@@ -3418,16 +3418,54 @@ class CustomizeDropdownComponent extends FxBaseComponent {
|
|
|
3418
3418
|
this.updateFindings();
|
|
3419
3419
|
}
|
|
3420
3420
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomizeDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }, { token: i5.FormBuilder }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
3421
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomizeDropdownComponent, isStandalone: true, selector: "lib-customize-dropdown", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"container\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"relative\">\r\n <!-- Header -->\r\n <label for=\"findings\" class=\"input-label\">\r\n {{ setting('findingLabel') }}\r\n <span *ngIf=\"isRequired\" class=\"field-required\">*</span>\r\n </label>\r\n <div #dropdownWrapper class=\"relative\">\r\n <button\r\n type=\"button\"\r\n class=\"w-full border border-gray-300 px-3 py-2 flex justify-between items-center bg-white text-gray-700 hover:border-blue-400\"\r\n (click)=\"toggleDropdown()\"\r\n >\r\n <span *ngIf=\"hasSelectedFindings; else placeholder\">\r\n {{ selectedFindingsLabel }}\r\n </span>\r\n <ng-template #placeholder>\r\n {{ setting('placeholderLabel') }}\r\n </ng-template>\r\n <svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"#FF7900\" fill-opacity=\"0.1\" />\r\n <path\r\n d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\"\r\n fill=\"#FAA762\" />\r\n </svg>\r\n
|
|
3421
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomizeDropdownComponent, isStandalone: true, selector: "lib-customize-dropdown", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"container\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"relative\">\r\n <!-- Header -->\r\n <label for=\"findings\" class=\"input-label\">\r\n {{ setting('findingLabel') }}\r\n <span *ngIf=\"isRequired\" class=\"field-required\">*</span>\r\n </label>\r\n <div #dropdownWrapper class=\"relative\">\r\n <button\r\n type=\"button\"\r\n class=\"w-full border border-gray-300 px-3 py-2 flex justify-between items-center bg-white text-gray-700 hover:border-blue-400\"\r\n (click)=\"toggleDropdown()\"\r\n >\r\n <span *ngIf=\"hasSelectedFindings; else placeholder\">\r\n {{ selectedFindingsLabel }}\r\n </span>\r\n <ng-template #placeholder>\r\n {{ setting('placeholderLabel') }}\r\n </ng-template>\r\n <svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"#FF7900\" fill-opacity=\"0.1\" />\r\n <path\r\n d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\"\r\n fill=\"#FAA762\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Panel -->\r\n <div\r\n *ngIf=\"dropdownOpen\"\r\n class=\"absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-64 overflow-y-auto z-10\"\r\n >\r\n <div\r\n *ngFor=\"let option of findingsOptions\"\r\n class=\"border-b border-gray-100 last:border-none p-2 hover:bg-gray-50 cursor-pointer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Checkbox + Label -->\r\n <div class=\"flex items-center gap-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"w-4 h-4 text-blue-500 border-gray-300 rounded cursor-pointer\"\r\n [(ngModel)]=\"option.selected\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n (click)=\"toggleOption(option, $event)\"\r\n />\r\n <label\r\n class=\"text-gray-800 font-medium cursor-pointer select-none\"\r\n (click)=\"toggleOption(option, $event)\"\r\n >\r\n {{ option.label }}\r\n </label>\r\n\r\n <span\r\n *ngIf=\"option.info\"\r\n class=\"ml-auto text-blue-500 text-sm cursor-pointer\"\r\n title=\"{{ option.info }}\"\r\n >\r\n \u24D8\r\n </span>\r\n </div>\r\n\r\n <!-- Radios -->\r\n <div\r\n class=\"flex items-center flex-wrap gap-4 ml-6 mt-2 text-sm\"\r\n *ngIf=\"option.selected && option.subOptions\"\r\n >\r\n <ng-container *ngFor=\"let s of option.subOptions\">\r\n <label\r\n class=\"flex items-center space-x-1 cursor-pointer\"\r\n (click)=\"selectSubOption(option, s)\"\r\n >\r\n <input\r\n type=\"radio\"\r\n [name]=\"option.value\"\r\n [value]=\"s.value\"\r\n [(ngModel)]=\"option.subSelection\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n class=\"text-blue-600 cursor-pointer\"\r\n />\r\n <span>{{ s.label }}</span>\r\n </label>\r\n</ng-container>\r\n\r\n <!-- Validation Message -->\r\n <div\r\n *ngIf=\"option.selected && option.subOptions && !option.subSelection\"\r\n class=\"text-red-500 text-xs mt-1 w-full ml-1\"\r\n >\r\n Please select one option\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <small *ngIf=\"form.get('findings')?.touched && form.get('findings')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorFindingMessage') }}\r\n </small>\r\n </div>\r\n \r\n </form>\r\n </div>\r\n</fx-component>\r\n", styles: [".dropdown{position:relative;-webkit-user-select:none;user-select:none}.dropdown-header{border:1px solid #ccc;border-radius:4px;padding:6px 8px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.dropdown-panel{position:absolute;width:100%;background:#fff;border:1px solid #ddd;margin-top:4px;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;box-shadow:0 2px 8px #0000001a}.dropdown-item{padding:4px 8px;border-bottom:1px solid #f1f1f1}.dropdown-item:last-child{border-bottom:none}.item-header{display:flex;align-items:center;gap:6px}.label{cursor:pointer;flex-grow:1}.info{margin-left:auto;cursor:help;font-size:12px;color:#666}.sub-options{display:flex;align-items:center;flex-wrap:wrap;padding-left:22px;font-size:13px;margin-top:4px}.error{color:#e63946;font-size:11px;margin-left:22px;margin-top:2px}.arrow{font-size:10px;color:#555}.submit-btn{margin-top:1rem;padding:6px 12px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.field-required{color:red;font-size:1.1em}.container>form>button{height:33.6px;font-size:12px;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.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: i5.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }] });
|
|
3422
3422
|
}
|
|
3423
3423
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomizeDropdownComponent, decorators: [{
|
|
3424
3424
|
type: Component,
|
|
3425
|
-
args: [{ selector: 'lib-customize-dropdown', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"container\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"relative\">\r\n <!-- Header -->\r\n <label for=\"findings\" class=\"input-label\">\r\n {{ setting('findingLabel') }}\r\n <span *ngIf=\"isRequired\" class=\"field-required\">*</span>\r\n </label>\r\n <div #dropdownWrapper class=\"relative\">\r\n <button\r\n type=\"button\"\r\n class=\"w-full border border-gray-300 px-3 py-2 flex justify-between items-center bg-white text-gray-700 hover:border-blue-400\"\r\n (click)=\"toggleDropdown()\"\r\n >\r\n <span *ngIf=\"hasSelectedFindings; else placeholder\">\r\n {{ selectedFindingsLabel }}\r\n </span>\r\n <ng-template #placeholder>\r\n {{ setting('placeholderLabel') }}\r\n </ng-template>\r\n <svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"#FF7900\" fill-opacity=\"0.1\" />\r\n <path\r\n d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\"\r\n fill=\"#FAA762\" />\r\n </svg>\r\n
|
|
3425
|
+
args: [{ selector: 'lib-customize-dropdown', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"container\">\r\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\" class=\"relative\">\r\n <!-- Header -->\r\n <label for=\"findings\" class=\"input-label\">\r\n {{ setting('findingLabel') }}\r\n <span *ngIf=\"isRequired\" class=\"field-required\">*</span>\r\n </label>\r\n <div #dropdownWrapper class=\"relative\">\r\n <button\r\n type=\"button\"\r\n class=\"w-full border border-gray-300 px-3 py-2 flex justify-between items-center bg-white text-gray-700 hover:border-blue-400\"\r\n (click)=\"toggleDropdown()\"\r\n >\r\n <span *ngIf=\"hasSelectedFindings; else placeholder\">\r\n {{ selectedFindingsLabel }}\r\n </span>\r\n <ng-template #placeholder>\r\n {{ setting('placeholderLabel') }}\r\n </ng-template>\r\n <svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"#FF7900\" fill-opacity=\"0.1\" />\r\n <path\r\n d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\"\r\n fill=\"#FAA762\" />\r\n </svg>\r\n </button>\r\n\r\n <!-- Panel -->\r\n <div\r\n *ngIf=\"dropdownOpen\"\r\n class=\"absolute mt-1 w-full bg-white border border-gray-300 rounded-md shadow-lg max-h-64 overflow-y-auto z-10\"\r\n >\r\n <div\r\n *ngFor=\"let option of findingsOptions\"\r\n class=\"border-b border-gray-100 last:border-none p-2 hover:bg-gray-50 cursor-pointer\"\r\n (click)=\"$event.stopPropagation()\"\r\n >\r\n <!-- Checkbox + Label -->\r\n <div class=\"flex items-center gap-2\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"w-4 h-4 text-blue-500 border-gray-300 rounded cursor-pointer\"\r\n [(ngModel)]=\"option.selected\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n (click)=\"toggleOption(option, $event)\"\r\n />\r\n <label\r\n class=\"text-gray-800 font-medium cursor-pointer select-none\"\r\n (click)=\"toggleOption(option, $event)\"\r\n >\r\n {{ option.label }}\r\n </label>\r\n\r\n <span\r\n *ngIf=\"option.info\"\r\n class=\"ml-auto text-blue-500 text-sm cursor-pointer\"\r\n title=\"{{ option.info }}\"\r\n >\r\n \u24D8\r\n </span>\r\n </div>\r\n\r\n <!-- Radios -->\r\n <div\r\n class=\"flex items-center flex-wrap gap-4 ml-6 mt-2 text-sm\"\r\n *ngIf=\"option.selected && option.subOptions\"\r\n >\r\n <ng-container *ngFor=\"let s of option.subOptions\">\r\n <label\r\n class=\"flex items-center space-x-1 cursor-pointer\"\r\n (click)=\"selectSubOption(option, s)\"\r\n >\r\n <input\r\n type=\"radio\"\r\n [name]=\"option.value\"\r\n [value]=\"s.value\"\r\n [(ngModel)]=\"option.subSelection\"\r\n [ngModelOptions]=\"{ standalone: true }\"\r\n class=\"text-blue-600 cursor-pointer\"\r\n />\r\n <span>{{ s.label }}</span>\r\n </label>\r\n</ng-container>\r\n\r\n <!-- Validation Message -->\r\n <div\r\n *ngIf=\"option.selected && option.subOptions && !option.subSelection\"\r\n class=\"text-red-500 text-xs mt-1 w-full ml-1\"\r\n >\r\n Please select one option\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div>\r\n <small *ngIf=\"form.get('findings')?.touched && form.get('findings')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorFindingMessage') }}\r\n </small>\r\n </div>\r\n \r\n </form>\r\n </div>\r\n</fx-component>\r\n", styles: [".dropdown{position:relative;-webkit-user-select:none;user-select:none}.dropdown-header{border:1px solid #ccc;border-radius:4px;padding:6px 8px;background-color:#fff;cursor:pointer;display:flex;justify-content:space-between;align-items:center}.dropdown-panel{position:absolute;width:100%;background:#fff;border:1px solid #ddd;margin-top:4px;border-radius:4px;max-height:250px;overflow-y:auto;z-index:1000;box-shadow:0 2px 8px #0000001a}.dropdown-item{padding:4px 8px;border-bottom:1px solid #f1f1f1}.dropdown-item:last-child{border-bottom:none}.item-header{display:flex;align-items:center;gap:6px}.label{cursor:pointer;flex-grow:1}.info{margin-left:auto;cursor:help;font-size:12px;color:#666}.sub-options{display:flex;align-items:center;flex-wrap:wrap;padding-left:22px;font-size:13px;margin-top:4px}.error{color:#e63946;font-size:11px;margin-left:22px;margin-top:2px}.arrow{font-size:10px;color:#555}.submit-btn{margin-top:1rem;padding:6px 12px;background:#007bff;color:#fff;border:none;border-radius:4px;cursor:pointer}.field-required{color:red;font-size:1.1em}.container>form>button{height:33.6px;font-size:12px;border-radius:4px}\n"] }]
|
|
3426
3426
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }, { type: i5.FormBuilder }, { type: i0.ElementRef }], propDecorators: { fxComponent: [{
|
|
3427
3427
|
type: ViewChild,
|
|
3428
3428
|
args: ['fxComponent']
|
|
3429
3429
|
}] } });
|
|
3430
3430
|
|
|
3431
|
+
class HeadingComponent extends FxBaseComponent {
|
|
3432
|
+
cdr;
|
|
3433
|
+
http;
|
|
3434
|
+
fxBuilderWrapperService;
|
|
3435
|
+
selectedLevel = 1;
|
|
3436
|
+
headingText = '';
|
|
3437
|
+
sectionOpened = true;
|
|
3438
|
+
constructor(cdr, http, fxBuilderWrapperService) {
|
|
3439
|
+
super(cdr);
|
|
3440
|
+
this.cdr = cdr;
|
|
3441
|
+
this.http = http;
|
|
3442
|
+
this.fxBuilderWrapperService = fxBuilderWrapperService;
|
|
3443
|
+
this.onInit.subscribe(() => {
|
|
3444
|
+
// this._register(this.datePickerForm);
|
|
3445
|
+
});
|
|
3446
|
+
}
|
|
3447
|
+
ngOnInit() {
|
|
3448
|
+
this.selectedLevel = this.setting('hType') || 1;
|
|
3449
|
+
this.headingText = this.setting('hLabel') || 'Header';
|
|
3450
|
+
}
|
|
3451
|
+
settings() {
|
|
3452
|
+
return [
|
|
3453
|
+
new FxStringSetting({ key: 'hLabel', $title: 'Label', value: 'Header' }),
|
|
3454
|
+
// new FxSelectSetting({ key: 'hType', $title: 'Heading Type', value: 1 }, [{ option: 'H1', value: 1 }, { option: 'H2', value: 2 }, { option: 'H3', value: 3 }, { option: 'H4', value: 4 }, { option: 'H5', value: 5 }, { option: 'H6', value: 6 }]),
|
|
3455
|
+
new FxStringSetting({ key: 'hClass', $title: 'Custom Class Name', value: '' }),
|
|
3456
|
+
];
|
|
3457
|
+
}
|
|
3458
|
+
validations() {
|
|
3459
|
+
return [];
|
|
3460
|
+
}
|
|
3461
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadingComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
3462
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: HeadingComponent, isStandalone: true, selector: "lib-heading", usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div [ngClass]=\"setting('hClass')\">\r\n {{headingText}}\r\n </div>\r\n</fx-component> ", styles: [""], dependencies: [{ kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
3463
|
+
}
|
|
3464
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: HeadingComponent, decorators: [{
|
|
3465
|
+
type: Component,
|
|
3466
|
+
args: [{ selector: 'lib-heading', standalone: true, imports: [FxComponent, CommonModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div [ngClass]=\"setting('hClass')\">\r\n {{headingText}}\r\n </div>\r\n</fx-component> " }]
|
|
3467
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }] });
|
|
3468
|
+
|
|
3431
3469
|
// import { CustomizeDropdownComponent } from './components/multiselect-with-form-fields/customize-dropdown.component';
|
|
3432
3470
|
class FxBuilderWrapperComponent {
|
|
3433
3471
|
fxWrapperService;
|
|
@@ -3490,6 +3528,9 @@ class FxBuilderWrapperComponent {
|
|
|
3490
3528
|
if (!Boolean(this.fxWrapperService.getComponent('lib-summary'))) {
|
|
3491
3529
|
this.fxWrapperService.registerCustomComponent('Summary', 'lib-summary', SummaryComponent);
|
|
3492
3530
|
}
|
|
3531
|
+
if (!Boolean(this.fxWrapperService.getComponent('lib-heading'))) {
|
|
3532
|
+
this.fxWrapperService.registerCustomComponent('Header', 'lib-heading', HeadingComponent);
|
|
3533
|
+
}
|
|
3493
3534
|
}
|
|
3494
3535
|
;
|
|
3495
3536
|
getParsedForm() {
|
|
@@ -3580,6 +3621,7 @@ class FxFormWrapperComponent {
|
|
|
3580
3621
|
{ name: 'Dropdown with Search', key: 'lib-dropdown-with-search', component: DropdownWithSearchComponent },
|
|
3581
3622
|
{ name: 'Multiselect with Form ', key: 'lib-customize-dropdown', component: CustomizeDropdownComponent },
|
|
3582
3623
|
{ name: 'Summary', key: 'lib-summary', component: SummaryComponent },
|
|
3624
|
+
{ name: 'Header', key: 'lib-heading', component: HeadingComponent },
|
|
3583
3625
|
];
|
|
3584
3626
|
components.forEach(({ name, key, component }) => {
|
|
3585
3627
|
if (!this.fxWrapperService.getComponent(key)) {
|