fx-form-builder-wrapper 2.0.82 → 2.0.84
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 +3 -3
- package/esm2022/lib/components/dropdown-with-other/dropdown-with-other.component.mjs +5 -3
- package/esm2022/lib/components/dropdown-with-search/dropdown-with-search.component.mjs +9 -4
- package/esm2022/lib/components/fx-form-component/fx-form-component.component.mjs +3 -3
- package/esm2022/lib/components/multiselect-dropdown/multiselect-dropdown.component.mjs +5 -3
- package/esm2022/lib/components/multiselect-dropdown-with-childs/multiselect-dropdown-with-childs.component.mjs +9 -3
- package/esm2022/lib/components/multiselect-with-form-fields/customize-dropdown.component.mjs +54 -36
- package/esm2022/lib/components/radio-group/radio-group.component.mjs +8 -3
- package/esm2022/lib/fx-builder-wrapper.component.mjs +5 -5
- package/fesm2022/fx-form-builder-wrapper.mjs +40 -232
- package/fesm2022/fx-form-builder-wrapper.mjs.map +1 -1
- package/lib/components/dropdown-with-other/dropdown-with-other.component.d.ts +1 -0
- package/lib/components/dropdown-with-search/dropdown-with-search.component.d.ts +1 -0
- package/lib/components/multiselect-dropdown/multiselect-dropdown.component.d.ts +1 -0
- package/lib/components/multiselect-dropdown-with-childs/multiselect-dropdown-with-childs.component.d.ts +3 -0
- package/lib/components/multiselect-with-form-fields/customize-dropdown.component.d.ts +4 -4
- package/lib/components/radio-group/radio-group.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { inject, Injectable, Component, EventEmitter, Input, Output, ViewChild
|
|
2
|
+
import { inject, Injectable, Component, EventEmitter, Input, Output, ViewChild } from '@angular/core';
|
|
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';
|
|
@@ -2262,11 +2262,11 @@ class DatePickerComponent extends FxBaseComponent {
|
|
|
2262
2262
|
return [FxValidatorService.required];
|
|
2263
2263
|
}
|
|
2264
2264
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2265
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerComponent, isStandalone: true, selector: "lib-date-picker", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-date-picker relative\">\r\n <form [formGroup]=\"datePickerForm\">\r\n <!-- <p-calendar formControlName=\"date\" [showIcon]=\"true\" [minDate]=\"minDate\" [maxDate]=\"maxDate\"\r\n [iconDisplay]=\"'input'\" [showOnFocus]=\"false\" dateFormat=\"dd/mm/yy\" [showButtonBar]=\"true\"\r\n placeholder=\"{{ setting('placeHolder') }}\">\r\n <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </p-calendar> -->\r\n <!-- <p-calendar formControlName=\"date\"\r\n dateFormat=\"dd/mm/yy\"\r\n placeholder=\"{{ setting('placeHolder') }}\"> -->\r\n <label for=\"date\">{{ setting('label') }}
|
|
2265
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerComponent, isStandalone: true, selector: "lib-date-picker", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-date-picker relative\">\r\n <form [formGroup]=\"datePickerForm\">\r\n <!-- <p-calendar formControlName=\"date\" [showIcon]=\"true\" [minDate]=\"minDate\" [maxDate]=\"maxDate\"\r\n [iconDisplay]=\"'input'\" [showOnFocus]=\"false\" dateFormat=\"dd/mm/yy\" [showButtonBar]=\"true\"\r\n placeholder=\"{{ setting('placeHolder') }}\">\r\n <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </p-calendar> -->\r\n <!-- <p-calendar formControlName=\"date\"\r\n dateFormat=\"dd/mm/yy\"\r\n placeholder=\"{{ setting('placeHolder') }}\"> -->\r\n <label for=\"date\">{{ setting('label') }}<sup class=\"field-required\">*</sup></label>\r\n <div class=\"relative\">\r\n <input type=\"date\" id=\"date\" name=\"date\" formControlName=\"date\" [min]=\"minDate\" [max]=\"maxDate\">\r\n </div>\r\n <!-- <label for=\"date\" class=\"placeholder\">Select Date</label> -->\r\n <!-- <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template> -->\r\n <!-- </p-calendar> -->\r\n <div>\r\n <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('datePickerErrorMessage') }}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n</fx-component>", styles: [".cursor-pointer{cursor:pointer!important}input[type=date]{border-color:#ccc;width:100%;height:38px!important;padding:.5rem .75rem!important;border-radius:4px!important}input[type=date]::placeholder{color:#aaa}input[type=date]:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b33}input[type=date]::-webkit-calendar-picker-indicator{background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f59e0b' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E\") no-repeat center;background-size:20px 20px;cursor:pointer;opacity:.8}input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}input[type=date]:not(:focus):invalid+.placeholder{color:gray;position:absolute;left:10px;top:8px;pointer-events:none}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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.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: "directive", type: i5.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 }] });
|
|
2266
2266
|
}
|
|
2267
2267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
2268
2268
|
type: Component,
|
|
2269
|
-
args: [{ selector: 'lib-date-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-date-picker relative\">\r\n <form [formGroup]=\"datePickerForm\">\r\n <!-- <p-calendar formControlName=\"date\" [showIcon]=\"true\" [minDate]=\"minDate\" [maxDate]=\"maxDate\"\r\n [iconDisplay]=\"'input'\" [showOnFocus]=\"false\" dateFormat=\"dd/mm/yy\" [showButtonBar]=\"true\"\r\n placeholder=\"{{ setting('placeHolder') }}\">\r\n <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </p-calendar> -->\r\n <!-- <p-calendar formControlName=\"date\"\r\n dateFormat=\"dd/mm/yy\"\r\n placeholder=\"{{ setting('placeHolder') }}\"> -->\r\n <label for=\"date\">{{ setting('label') }}
|
|
2269
|
+
args: [{ selector: 'lib-date-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-date-picker relative\">\r\n <form [formGroup]=\"datePickerForm\">\r\n <!-- <p-calendar formControlName=\"date\" [showIcon]=\"true\" [minDate]=\"minDate\" [maxDate]=\"maxDate\"\r\n [iconDisplay]=\"'input'\" [showOnFocus]=\"false\" dateFormat=\"dd/mm/yy\" [showButtonBar]=\"true\"\r\n placeholder=\"{{ setting('placeHolder') }}\">\r\n <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </p-calendar> -->\r\n <!-- <p-calendar formControlName=\"date\"\r\n dateFormat=\"dd/mm/yy\"\r\n placeholder=\"{{ setting('placeHolder') }}\"> -->\r\n <label for=\"date\">{{ setting('label') }}<sup class=\"field-required\">*</sup></label>\r\n <div class=\"relative\">\r\n <input type=\"date\" id=\"date\" name=\"date\" formControlName=\"date\" [min]=\"minDate\" [max]=\"maxDate\">\r\n </div>\r\n <!-- <label for=\"date\" class=\"placeholder\">Select Date</label> -->\r\n <!-- <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template> -->\r\n <!-- </p-calendar> -->\r\n <div>\r\n <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('datePickerErrorMessage') }}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n</fx-component>", styles: [".cursor-pointer{cursor:pointer!important}input[type=date]{border-color:#ccc;width:100%;height:38px!important;padding:.5rem .75rem!important;border-radius:4px!important}input[type=date]::placeholder{color:#aaa}input[type=date]:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b33}input[type=date]::-webkit-calendar-picker-indicator{background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f59e0b' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E\") no-repeat center;background-size:20px 20px;cursor:pointer;opacity:.8}input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}input[type=date]:not(:focus):invalid+.placeholder{color:gray;position:absolute;left:10px;top:8px;pointer-events:none}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2270
2270
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }], propDecorators: { fxComponent: [{
|
|
2271
2271
|
type: ViewChild,
|
|
2272
2272
|
args: ['fxComponent']
|
|
@@ -2289,6 +2289,7 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2289
2289
|
// { optionValue: 'other', optionName: 'Other' }
|
|
2290
2290
|
// ];
|
|
2291
2291
|
options = [];
|
|
2292
|
+
isRequired = false;
|
|
2292
2293
|
dropDownForm = this.fb.group({
|
|
2293
2294
|
selectedOption: [''],
|
|
2294
2295
|
otherInput: [{ value: '', disabled: true }],
|
|
@@ -2313,6 +2314,7 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2313
2314
|
setTimeout(() => {
|
|
2314
2315
|
const mainControl = this.dropDownForm.get('selectedOption');
|
|
2315
2316
|
if (this.setting('isRequired') === 'true') {
|
|
2317
|
+
this.isRequired = true;
|
|
2316
2318
|
mainControl?.setValidators([Validators.required]);
|
|
2317
2319
|
mainControl?.updateValueAndValidity();
|
|
2318
2320
|
}
|
|
@@ -2392,11 +2394,11 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2392
2394
|
});
|
|
2393
2395
|
}
|
|
2394
2396
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithOtherComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
2395
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithOtherComponent, isStandalone: true, selector: "dropdown-with-other", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-center custom-dropdown\" [ngClass]=\"setting('customClass')\" *ngIf=\"false\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex flex-row gap-4 items-start\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n\r\n <!-- <label class=\"mb-1 font-semibold text-sm\"></label> -->\r\n <span class=\"input-label dark:text-gray-300\">{{ setting('select-label') }}</span>\r\n <select formControlName=\"selectedOption\" class=\"border p-2 rounded w-full\">\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <!-- Other input (only if 'Other' selected) -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n <label class=\"input-label dark:text-gray-300\">{{ setting('other-label') }}</label>\r\n <div class=\"relative\">\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{setting('other-placeholder')}}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n </div>\r\n <small *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Other is required.\r\n </small>\r\n </div>\r\n </div>\r\n\r\n \r\n </form>\r\n</div>\r\n\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClass')\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label') }}\r\n </label>\r\n <select\r\n formControlName=\"selectedOption\"\r\n class=\"border p-2 rounded w-full\"\r\n >\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('other-label') }}\r\n </label>\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{ setting('other-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n\r\n <small\r\n *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('errorMessageOther')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n\r\n\r\n\r\n</fx-component>\r\n\r\n <!-- <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small> -->", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.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}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path 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\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:is() .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:is() .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:is() .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:is() .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i5.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 }] });
|
|
2397
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithOtherComponent, isStandalone: true, selector: "dropdown-with-other", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-center custom-dropdown\" [ngClass]=\"setting('customClass')\" *ngIf=\"false\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex flex-row gap-4 items-start\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n\r\n <!-- <label class=\"mb-1 font-semibold text-sm\"></label> -->\r\n <span class=\"input-label dark:text-gray-300\">{{ setting('select-label') }}</span>\r\n <select formControlName=\"selectedOption\" class=\"border p-2 rounded w-full\">\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <!-- Other input (only if 'Other' selected) -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n <label class=\"input-label dark:text-gray-300\">{{ setting('other-label') }}</label>\r\n <div class=\"relative\">\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{setting('other-placeholder')}}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n </div>\r\n <small *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Other is required.\r\n </small>\r\n </div>\r\n </div>\r\n\r\n \r\n </form>\r\n</div>\r\n\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClass')\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <select\r\n formControlName=\"selectedOption\"\r\n class=\"border p-2 rounded w-full\"\r\n >\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('other-label') }} <sup class=\"field-required\">*</sup>\r\n </label>\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{ setting('other-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n\r\n <small\r\n *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('errorMessageOther')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n\r\n\r\n\r\n</fx-component>\r\n\r\n <!-- <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small> -->", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.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}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path 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\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:is() .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:is() .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:is() .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:is() .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { 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: "directive", type: i5.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 }] });
|
|
2396
2398
|
}
|
|
2397
2399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithOtherComponent, decorators: [{
|
|
2398
2400
|
type: Component,
|
|
2399
|
-
args: [{ selector: 'dropdown-with-other', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-center custom-dropdown\" [ngClass]=\"setting('customClass')\" *ngIf=\"false\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex flex-row gap-4 items-start\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n\r\n <!-- <label class=\"mb-1 font-semibold text-sm\"></label> -->\r\n <span class=\"input-label dark:text-gray-300\">{{ setting('select-label') }}</span>\r\n <select formControlName=\"selectedOption\" class=\"border p-2 rounded w-full\">\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <!-- Other input (only if 'Other' selected) -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n <label class=\"input-label dark:text-gray-300\">{{ setting('other-label') }}</label>\r\n <div class=\"relative\">\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{setting('other-placeholder')}}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n </div>\r\n <small *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Other is required.\r\n </small>\r\n </div>\r\n </div>\r\n\r\n \r\n </form>\r\n</div>\r\n\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClass')\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label') }}\r\n </label>\r\n <select\r\n formControlName=\"selectedOption\"\r\n class=\"border p-2 rounded w-full\"\r\n >\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('other-label') }}\r\n </label>\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{ setting('other-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n\r\n <small\r\n *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('errorMessageOther')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n\r\n\r\n\r\n</fx-component>\r\n\r\n <!-- <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small> -->", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.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}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path 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\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:is() .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:is() .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:is() .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:is() .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}\n"] }]
|
|
2401
|
+
args: [{ selector: 'dropdown-with-other', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-center custom-dropdown\" [ngClass]=\"setting('customClass')\" *ngIf=\"false\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex flex-row gap-4 items-start\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n\r\n <!-- <label class=\"mb-1 font-semibold text-sm\"></label> -->\r\n <span class=\"input-label dark:text-gray-300\">{{ setting('select-label') }}</span>\r\n <select formControlName=\"selectedOption\" class=\"border p-2 rounded w-full\">\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <!-- Other input (only if 'Other' selected) -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n <label class=\"input-label dark:text-gray-300\">{{ setting('other-label') }}</label>\r\n <div class=\"relative\">\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{setting('other-placeholder')}}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n </div>\r\n <small *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Other is required.\r\n </small>\r\n </div>\r\n </div>\r\n\r\n \r\n </form>\r\n</div>\r\n\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClass')\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <select\r\n formControlName=\"selectedOption\"\r\n class=\"border p-2 rounded w-full\"\r\n >\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('other-label') }} <sup class=\"field-required\">*</sup>\r\n </label>\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{ setting('other-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n\r\n <small\r\n *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('errorMessageOther')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n\r\n\r\n\r\n</fx-component>\r\n\r\n <!-- <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small> -->", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.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}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path 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\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:is() .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:is() .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:is() .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:is() .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2400
2402
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2401
2403
|
type: ViewChild,
|
|
2402
2404
|
args: ['fxComponent']
|
|
@@ -2426,6 +2428,8 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2426
2428
|
fxComponent;
|
|
2427
2429
|
radoioMap = new Map();
|
|
2428
2430
|
compareValue;
|
|
2431
|
+
isRequired = false;
|
|
2432
|
+
isChildRequired = false;
|
|
2429
2433
|
constructor(cdr, http, fxBuilderWrapperService, fxApiService) {
|
|
2430
2434
|
super(cdr);
|
|
2431
2435
|
this.cdr = cdr;
|
|
@@ -2454,6 +2458,7 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2454
2458
|
setTimeout(() => {
|
|
2455
2459
|
const mainControl = this.confirmationForm.get('confirmation');
|
|
2456
2460
|
if (this.setting('isRadioRequired') === 'true') {
|
|
2461
|
+
this.isRequired = true;
|
|
2457
2462
|
mainControl?.setValidators([Validators.required]);
|
|
2458
2463
|
mainControl?.updateValueAndValidity();
|
|
2459
2464
|
}
|
|
@@ -2525,22 +2530,24 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2525
2530
|
const valueToShowTextArea = this.confirmationForm.get('valueToShowTextArea');
|
|
2526
2531
|
valueToShowTextArea?.setValue(this.setting('value-show-text'));
|
|
2527
2532
|
const otherControl = this.confirmationForm.get('remarks');
|
|
2533
|
+
this.isChildRequired = true;
|
|
2528
2534
|
otherControl?.setValidators([Validators.required]);
|
|
2529
2535
|
otherControl?.updateValueAndValidity();
|
|
2530
2536
|
}
|
|
2531
2537
|
else {
|
|
2532
2538
|
const otherControl = this.confirmationForm.get('remarks');
|
|
2539
|
+
this.isChildRequired = false;
|
|
2533
2540
|
otherControl?.reset();
|
|
2534
2541
|
otherControl?.clearValidators();
|
|
2535
2542
|
otherControl?.updateValueAndValidity();
|
|
2536
2543
|
}
|
|
2537
2544
|
}
|
|
2538
2545
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioGroupComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
2539
|
-
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 <div [ngClass]=\"setting('customClasss')\">\r\n<form [formGroup]=\"confirmationForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 w-full\">\r\n <!-- Title -->\r\n <label class=\"font-semibold text-gray-800\">\r\n {{ setting('select-label') }}\r\n </label>\r\n\r\n <!-- TWO COLUMN LAYOUT -->\r\n \r\n\r\n <!-- LEFT COLUMN (RADIO GROUP) -->\r\n <div class=\"flex-1\">\r\n\r\n <div class=\"flex gap-3 my-2\"> \r\n <!-- stack vertically so height is correct -->\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 </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\r\n </div>\r\n\r\n </div>\r\n \r\n <!-- RIGHT COLUMN (TEXTAREA) -->\r\n <div *ngIf=\"showTextArea\" class=\"flex-1\">\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=\"{{ setting('remark-placeholder') }}\"\r\n class=\"border border-gray-300 rounded-lg p-3 w-full resize-none shadow-sm\r\n focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n ></textarea>\r\n\r\n <!-- Textarea 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\r\n\r\n</form>\r\n</div>\r\n\r\n\r\n</fx-component>\r\n", styles: [".custom-gap{gap:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: "directive", type: i5.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 }] });
|
|
2546
|
+
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 <div [ngClass]=\"setting('customClasss')\">\r\n<form [formGroup]=\"confirmationForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 w-full\">\r\n <!-- Title -->\r\n <label class=\"font-semibold text-gray-800\">\r\n {{ setting('select-label') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n\r\n <!-- TWO COLUMN LAYOUT -->\r\n \r\n\r\n <!-- LEFT COLUMN (RADIO GROUP) -->\r\n <div class=\"flex-1\">\r\n\r\n <div class=\"flex gap-3 my-2\"> \r\n <!-- stack vertically so height is correct -->\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 </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\r\n </div>\r\n\r\n </div>\r\n \r\n <!-- RIGHT COLUMN (TEXTAREA) -->\r\n <div *ngIf=\"showTextArea\" class=\"flex-1\">\r\n\r\n <label class=\"mb-2 font-medium text-gray-700\">\r\n {{ setting('additional-field-label') }} <sup class=\"field-required\" *ngIf=\"isChildRequired\">*</sup>\r\n </label>\r\n\r\n <textarea\r\n formControlName=\"remarks\"\r\n rows=\"3\"\r\n placeholder=\"{{ setting('remark-placeholder') }}\"\r\n class=\"border border-gray-300 rounded-lg p-3 w-full resize-none shadow-sm\r\n focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n ></textarea>\r\n\r\n <!-- Textarea 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\r\n\r\n</form>\r\n</div>\r\n\r\n\r\n</fx-component>\r\n", styles: [".custom-gap{gap:1rem}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: "directive", type: i5.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 }] });
|
|
2540
2547
|
}
|
|
2541
2548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
2542
2549
|
type: Component,
|
|
2543
|
-
args: [{ selector: 'radio-group-custom', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, RadioButtonModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div [ngClass]=\"setting('customClasss')\">\r\n<form [formGroup]=\"confirmationForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 w-full\">\r\n <!-- Title -->\r\n <label class=\"font-semibold text-gray-800\">\r\n {{ setting('select-label') }}\r\n </label>\r\n\r\n <!-- TWO COLUMN LAYOUT -->\r\n \r\n\r\n <!-- LEFT COLUMN (RADIO GROUP) -->\r\n <div class=\"flex-1\">\r\n\r\n <div class=\"flex gap-3 my-2\"> \r\n <!-- stack vertically so height is correct -->\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 </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\r\n </div>\r\n\r\n </div>\r\n \r\n <!-- RIGHT COLUMN (TEXTAREA) -->\r\n <div *ngIf=\"showTextArea\" class=\"flex-1\">\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=\"{{ setting('remark-placeholder') }}\"\r\n class=\"border border-gray-300 rounded-lg p-3 w-full resize-none shadow-sm\r\n focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n ></textarea>\r\n\r\n <!-- Textarea 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\r\n\r\n</form>\r\n</div>\r\n\r\n\r\n</fx-component>\r\n", styles: [".custom-gap{gap:1rem}\n"] }]
|
|
2550
|
+
args: [{ selector: 'radio-group-custom', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, RadioButtonModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div [ngClass]=\"setting('customClasss')\">\r\n<form [formGroup]=\"confirmationForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 w-full\">\r\n <!-- Title -->\r\n <label class=\"font-semibold text-gray-800\">\r\n {{ setting('select-label') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n\r\n <!-- TWO COLUMN LAYOUT -->\r\n \r\n\r\n <!-- LEFT COLUMN (RADIO GROUP) -->\r\n <div class=\"flex-1\">\r\n\r\n <div class=\"flex gap-3 my-2\"> \r\n <!-- stack vertically so height is correct -->\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 </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\r\n </div>\r\n\r\n </div>\r\n \r\n <!-- RIGHT COLUMN (TEXTAREA) -->\r\n <div *ngIf=\"showTextArea\" class=\"flex-1\">\r\n\r\n <label class=\"mb-2 font-medium text-gray-700\">\r\n {{ setting('additional-field-label') }} <sup class=\"field-required\" *ngIf=\"isChildRequired\">*</sup>\r\n </label>\r\n\r\n <textarea\r\n formControlName=\"remarks\"\r\n rows=\"3\"\r\n placeholder=\"{{ setting('remark-placeholder') }}\"\r\n class=\"border border-gray-300 rounded-lg p-3 w-full resize-none shadow-sm\r\n focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n ></textarea>\r\n\r\n <!-- Textarea 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\r\n\r\n</form>\r\n</div>\r\n\r\n\r\n</fx-component>\r\n", styles: [".custom-gap{gap:1rem}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2544
2551
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { showOnSelection: [{
|
|
2545
2552
|
type: Input
|
|
2546
2553
|
}], fxComponent: [{
|
|
@@ -2559,6 +2566,7 @@ class MultiselectDropdownComponent extends FxBaseComponent {
|
|
|
2559
2566
|
multiselectDropdownMap = new Map();
|
|
2560
2567
|
fxComponent;
|
|
2561
2568
|
options = [];
|
|
2569
|
+
isRequired = false;
|
|
2562
2570
|
multiselectDropDownForm = this.fb.group({
|
|
2563
2571
|
multipleSelectedOption: [[]],
|
|
2564
2572
|
});
|
|
@@ -2585,6 +2593,7 @@ class MultiselectDropdownComponent extends FxBaseComponent {
|
|
|
2585
2593
|
setTimeout(() => {
|
|
2586
2594
|
const mainControl = this.multiselectDropDownForm.get('multipleSelectedOption');
|
|
2587
2595
|
if (this.setting('isMultiRequired') === 'true') {
|
|
2596
|
+
this.isRequired = true;
|
|
2588
2597
|
mainControl?.setValidators([Validators.required]);
|
|
2589
2598
|
mainControl?.updateValueAndValidity();
|
|
2590
2599
|
}
|
|
@@ -2645,11 +2654,11 @@ class MultiselectDropdownComponent extends FxBaseComponent {
|
|
|
2645
2654
|
}
|
|
2646
2655
|
}
|
|
2647
2656
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
2648
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownComponent, isStandalone: true, selector: "lib-multiselect-dropdown", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi') }}\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorMessage')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: "directive", type: i5.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: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] });
|
|
2657
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownComponent, isStandalone: true, selector: "lib-multiselect-dropdown", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorMessage')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: "directive", type: i5.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: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] });
|
|
2649
2658
|
}
|
|
2650
2659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownComponent, decorators: [{
|
|
2651
2660
|
type: Component,
|
|
2652
|
-
args: [{ selector: 'lib-multiselect-dropdown', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi') }}\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorMessage')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"] }]
|
|
2661
|
+
args: [{ selector: 'lib-multiselect-dropdown', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorMessage')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2653
2662
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2654
2663
|
type: ViewChild,
|
|
2655
2664
|
args: ['fxComponent']
|
|
@@ -2666,6 +2675,9 @@ class MultiselectDropdownWithChildsComponent extends FxBaseComponent {
|
|
|
2666
2675
|
multiChildDropdownMap = new Map();
|
|
2667
2676
|
fxComponent;
|
|
2668
2677
|
options = [];
|
|
2678
|
+
isRequired = false;
|
|
2679
|
+
isChild1Required = false;
|
|
2680
|
+
isChild2Required = false;
|
|
2669
2681
|
multiChildDropDownForm = this.fb.group({
|
|
2670
2682
|
multipleChildSelectedOption: [[]],
|
|
2671
2683
|
child1: [''],
|
|
@@ -2704,14 +2716,17 @@ class MultiselectDropdownWithChildsComponent extends FxBaseComponent {
|
|
|
2704
2716
|
const child1Control = this.multiChildDropDownForm.get('child1');
|
|
2705
2717
|
const child2Control = this.multiChildDropDownForm.get('child2');
|
|
2706
2718
|
if (this.setting('isMultiChildRequired') === 'true') {
|
|
2719
|
+
this.isRequired = true;
|
|
2707
2720
|
mainControl?.setValidators([Validators.required]);
|
|
2708
2721
|
mainControl?.updateValueAndValidity();
|
|
2709
2722
|
}
|
|
2710
2723
|
if (this.setting('isChild1Required') === 'true') {
|
|
2724
|
+
this.isChild1Required = true;
|
|
2711
2725
|
child1Control?.setValidators([Validators.required]);
|
|
2712
2726
|
child1Control?.updateValueAndValidity();
|
|
2713
2727
|
}
|
|
2714
2728
|
if (this.setting('isChild2Required') === 'true') {
|
|
2729
|
+
this.isChild2Required = true;
|
|
2715
2730
|
child2Control?.setValidators([Validators.required]);
|
|
2716
2731
|
child2Control?.updateValueAndValidity();
|
|
2717
2732
|
}
|
|
@@ -2780,11 +2795,11 @@ class MultiselectDropdownWithChildsComponent extends FxBaseComponent {
|
|
|
2780
2795
|
}
|
|
2781
2796
|
}
|
|
2782
2797
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownWithChildsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
2783
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownWithChildsComponent, isStandalone: true, selector: "lib-multiselect-dropdown-with-childs", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMultiChild')\">\r\n <form [formGroup]=\"multiChildDropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi-child') }}\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleChildSelectedOption\" [optionLabel]=\"setting('label-key-child')\"\r\n [placeholder]=\"setting('placeholderMultiChild')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('multipleChildSelectedOption')?.touched && multiChildDropDownForm.get('multipleChildSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiChildErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-1-label') }}\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child1\"\r\n placeholder=\"{{ setting('child-1-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child1')?.touched && multiChildDropDownForm.get('child1')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child1ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-2-label') }}\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child2\"\r\n placeholder=\"{{ setting('child-2-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child2')?.touched && multiChildDropDownForm.get('child2')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child2ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: "directive", type: i5.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: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] });
|
|
2798
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownWithChildsComponent, isStandalone: true, selector: "lib-multiselect-dropdown-with-childs", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMultiChild')\">\r\n <form [formGroup]=\"multiChildDropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi-child') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleChildSelectedOption\" [optionLabel]=\"setting('label-key-child')\"\r\n [placeholder]=\"setting('placeholderMultiChild')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('multipleChildSelectedOption')?.touched && multiChildDropDownForm.get('multipleChildSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiChildErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-1-label') }} <sup class=\"field-required\" *ngIf=\"isChild1Required\">*</sup>\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child1\"\r\n placeholder=\"{{ setting('child-1-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child1')?.touched && multiChildDropDownForm.get('child1')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child1ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-2-label') }} <sup class=\"field-required\" *ngIf=\"isChild2Required\">*</sup>\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child2\"\r\n placeholder=\"{{ setting('child-2-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child2')?.touched && multiChildDropDownForm.get('child2')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child2ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.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: "directive", type: i5.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: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] });
|
|
2784
2799
|
}
|
|
2785
2800
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownWithChildsComponent, decorators: [{
|
|
2786
2801
|
type: Component,
|
|
2787
|
-
args: [{ selector: 'lib-multiselect-dropdown-with-childs', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMultiChild')\">\r\n <form [formGroup]=\"multiChildDropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi-child') }}\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleChildSelectedOption\" [optionLabel]=\"setting('label-key-child')\"\r\n [placeholder]=\"setting('placeholderMultiChild')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('multipleChildSelectedOption')?.touched && multiChildDropDownForm.get('multipleChildSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiChildErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-1-label') }}\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child1\"\r\n placeholder=\"{{ setting('child-1-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child1')?.touched && multiChildDropDownForm.get('child1')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child1ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-2-label') }}\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child2\"\r\n placeholder=\"{{ setting('child-2-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child2')?.touched && multiChildDropDownForm.get('child2')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child2ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}\n"] }]
|
|
2802
|
+
args: [{ selector: 'lib-multiselect-dropdown-with-childs', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMultiChild')\">\r\n <form [formGroup]=\"multiChildDropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi-child') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleChildSelectedOption\" [optionLabel]=\"setting('label-key-child')\"\r\n [placeholder]=\"setting('placeholderMultiChild')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('multipleChildSelectedOption')?.touched && multiChildDropDownForm.get('multipleChildSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiChildErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-1-label') }} <sup class=\"field-required\" *ngIf=\"isChild1Required\">*</sup>\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child1\"\r\n placeholder=\"{{ setting('child-1-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child1')?.touched && multiChildDropDownForm.get('child1')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child1ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-2-label') }} <sup class=\"field-required\" *ngIf=\"isChild2Required\">*</sup>\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child2\"\r\n placeholder=\"{{ setting('child-2-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child2')?.touched && multiChildDropDownForm.get('child2')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child2ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2788
2803
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2789
2804
|
type: ViewChild,
|
|
2790
2805
|
args: ['fxComponent']
|
|
@@ -2801,6 +2816,7 @@ class DropdownWithSearchComponent extends FxBaseComponent {
|
|
|
2801
2816
|
searchDropdownMap = new Map();
|
|
2802
2817
|
fxComponent;
|
|
2803
2818
|
options = [];
|
|
2819
|
+
isRequired = false;
|
|
2804
2820
|
searchDropDownForm = this.fb.group({
|
|
2805
2821
|
searchSelectedOption: [''],
|
|
2806
2822
|
});
|
|
@@ -2817,6 +2833,7 @@ class DropdownWithSearchComponent extends FxBaseComponent {
|
|
|
2817
2833
|
ngAfterViewInit() {
|
|
2818
2834
|
if (!this.setting('searchSelectOptionAPIURL')) {
|
|
2819
2835
|
this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'itemsSearchOption')?.options || [];
|
|
2836
|
+
// this.options.unshift({ option: 'Select', value: '' });
|
|
2820
2837
|
}
|
|
2821
2838
|
setTimeout(() => {
|
|
2822
2839
|
const key = this.fxComponent?.fxData?.name;
|
|
@@ -2827,6 +2844,7 @@ class DropdownWithSearchComponent extends FxBaseComponent {
|
|
|
2827
2844
|
setTimeout(() => {
|
|
2828
2845
|
const mainControl = this.searchDropDownForm.get('searchSelectedOption');
|
|
2829
2846
|
if (this.setting('isSearchRequired') === 'true') {
|
|
2847
|
+
this.isRequired = true;
|
|
2830
2848
|
mainControl?.setValidators([Validators.required]);
|
|
2831
2849
|
mainControl?.updateValueAndValidity();
|
|
2832
2850
|
}
|
|
@@ -2856,7 +2874,7 @@ class DropdownWithSearchComponent extends FxBaseComponent {
|
|
|
2856
2874
|
}
|
|
2857
2875
|
settings() {
|
|
2858
2876
|
return [
|
|
2859
|
-
new FxOptionSetting({ key: 'itemsSearchOption', $title: 'Options', value: [{ option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }] }, [{ option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }]),
|
|
2877
|
+
new FxOptionSetting({ key: 'itemsSearchOption', $title: 'Options', value: [{ option: 'Select', value: '' }, { option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }] }, [{ option: 'Yes', value: 'yes' }, { option: 'No', value: 'no' }]),
|
|
2860
2878
|
new FxStringSetting({ key: 'searchSelectOptionAPIURL', $title: 'API Url', value: '' }),
|
|
2861
2879
|
new FxStringSetting({ key: 'customClassSearch', $title: 'Custom Class Name', value: '' }),
|
|
2862
2880
|
new FxStringSetting({ key: 'select-label-search', $title: 'Label', value: '' }),
|
|
@@ -2877,6 +2895,7 @@ class DropdownWithSearchComponent extends FxBaseComponent {
|
|
|
2877
2895
|
this.http.get(finalUrl).subscribe({
|
|
2878
2896
|
next: (response) => {
|
|
2879
2897
|
this.options = response?.content || [];
|
|
2898
|
+
this.options.unshift({ option: 'Select', value: '' });
|
|
2880
2899
|
},
|
|
2881
2900
|
error: (err) => {
|
|
2882
2901
|
console.error('Error fetching options', err);
|
|
@@ -2885,233 +2904,21 @@ class DropdownWithSearchComponent extends FxBaseComponent {
|
|
|
2885
2904
|
}
|
|
2886
2905
|
else {
|
|
2887
2906
|
this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'itemsSearchOption')?.options || [];
|
|
2907
|
+
// this.options.unshift({ option: 'Select', value: '' });
|
|
2888
2908
|
}
|
|
2889
2909
|
}
|
|
2890
2910
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithSearchComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }, { token: i3$2.ApiServiceRegistry }], target: i0.ɵɵFactoryTarget.Component });
|
|
2891
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithSearchComponent, isStandalone: true, selector: "lib-dropdown-with-search", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassSearch')\">\r\n <form [formGroup]=\"searchDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-search') }}\r\n </label>\r\n <p-dropdown [options]=\"options\" formControlName=\"searchSelectedOption\" [optionLabel]=\"setting('label-key-search')\" [filter]=\"true\" [showClear]=\"true\" \r\n [placeholder]=\"setting('placeholderSearch')\" class=\"multiselect\" [optionValue]=\"setting('value-key-search')\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-dropdown>\r\n\r\n\r\n <small\r\n *ngIf=\"searchDropDownForm.get('searchSelectedOption')?.touched && searchDropDownForm.get('searchSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorSearch')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-dropdown.p-component.p-inputwrapper
|
|
2911
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithSearchComponent, isStandalone: true, selector: "lib-dropdown-with-search", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassSearch')\">\r\n <form [formGroup]=\"searchDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-search') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-dropdown [options]=\"options\" formControlName=\"searchSelectedOption\" [optionLabel]=\"setting('label-key-search')\" [filter]=\"true\" [showClear]=\"true\" \r\n [placeholder]=\"setting('placeholderSearch')\" class=\"multiselect\" [optionValue]=\"setting('value-key-search')\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-dropdown>\r\n\r\n\r\n <small\r\n *ngIf=\"searchDropDownForm.get('searchSelectedOption')?.touched && searchDropDownForm.get('searchSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorSearch')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-dropdown.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }] });
|
|
2892
2912
|
}
|
|
2893
2913
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithSearchComponent, decorators: [{
|
|
2894
2914
|
type: Component,
|
|
2895
|
-
args: [{ selector: 'lib-dropdown-with-search', standalone: true, imports: [DropdownModule, CommonModule, FormsModule, ReactiveFormsModule, CalendarModule, MultiSelectModule, FxComponent], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassSearch')\">\r\n <form [formGroup]=\"searchDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-search') }}\r\n </label>\r\n <p-dropdown [options]=\"options\" formControlName=\"searchSelectedOption\" [optionLabel]=\"setting('label-key-search')\" [filter]=\"true\" [showClear]=\"true\" \r\n [placeholder]=\"setting('placeholderSearch')\" class=\"multiselect\" [optionValue]=\"setting('value-key-search')\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-dropdown>\r\n\r\n\r\n <small\r\n *ngIf=\"searchDropDownForm.get('searchSelectedOption')?.touched && searchDropDownForm.get('searchSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorSearch')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-dropdown.p-component.p-inputwrapper
|
|
2915
|
+
args: [{ selector: 'lib-dropdown-with-search', standalone: true, imports: [DropdownModule, CommonModule, FormsModule, ReactiveFormsModule, CalendarModule, MultiSelectModule, FxComponent], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassSearch')\">\r\n <form [formGroup]=\"searchDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-search') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-dropdown [options]=\"options\" formControlName=\"searchSelectedOption\" [optionLabel]=\"setting('label-key-search')\" [filter]=\"true\" [showClear]=\"true\" \r\n [placeholder]=\"setting('placeholderSearch')\" class=\"multiselect\" [optionValue]=\"setting('value-key-search')\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-dropdown>\r\n\r\n\r\n <small\r\n *ngIf=\"searchDropDownForm.get('searchSelectedOption')?.touched && searchDropDownForm.get('searchSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorSearch')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-dropdown.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2896
2916
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2897
2917
|
type: ViewChild,
|
|
2898
2918
|
args: ['fxComponent']
|
|
2899
2919
|
}] } });
|
|
2900
2920
|
|
|
2901
|
-
|
|
2902
|
-
cdr;
|
|
2903
|
-
http;
|
|
2904
|
-
fxBuilderWrapperService;
|
|
2905
|
-
fxApiService;
|
|
2906
|
-
fb;
|
|
2907
|
-
eRef;
|
|
2908
|
-
destroy$ = new Subject();
|
|
2909
|
-
form;
|
|
2910
|
-
formObject = {};
|
|
2911
|
-
dropdownOpen = false;
|
|
2912
|
-
formSubmitted = false;
|
|
2913
|
-
findingsOptions = [
|
|
2914
|
-
{
|
|
2915
|
-
label: 'Proclination',
|
|
2916
|
-
value: 'proclination',
|
|
2917
|
-
info: 'Forward inclination of teeth',
|
|
2918
|
-
selected: false,
|
|
2919
|
-
subOptions: [
|
|
2920
|
-
{ label: 'Mild', value: 'mild' },
|
|
2921
|
-
{ label: 'Moderate', value: 'moderate' },
|
|
2922
|
-
{ label: 'Severe', value: 'severe' }
|
|
2923
|
-
]
|
|
2924
|
-
},
|
|
2925
|
-
{
|
|
2926
|
-
label: 'Crowding',
|
|
2927
|
-
value: 'crowding',
|
|
2928
|
-
selected: false,
|
|
2929
|
-
subOptions: [
|
|
2930
|
-
{ label: 'Mild', value: 'mild' },
|
|
2931
|
-
{ label: 'Moderate', value: 'moderate' },
|
|
2932
|
-
{ label: 'Severe', value: 'severe' }
|
|
2933
|
-
]
|
|
2934
|
-
},
|
|
2935
|
-
{
|
|
2936
|
-
label: 'Spacing',
|
|
2937
|
-
value: 'spacing',
|
|
2938
|
-
selected: false,
|
|
2939
|
-
subOptions: [
|
|
2940
|
-
{ label: 'Mild', value: 'mild' },
|
|
2941
|
-
{ label: 'Moderate', value: 'moderate' },
|
|
2942
|
-
{ label: 'Severe', value: 'severe' }
|
|
2943
|
-
]
|
|
2944
|
-
},
|
|
2945
|
-
{
|
|
2946
|
-
label: 'Retroclination',
|
|
2947
|
-
value: 'retroclination',
|
|
2948
|
-
info: 'Backward inclination of teeth',
|
|
2949
|
-
selected: false
|
|
2950
|
-
},
|
|
2951
|
-
{
|
|
2952
|
-
label: 'Rotation',
|
|
2953
|
-
value: 'rotation',
|
|
2954
|
-
selected: false
|
|
2955
|
-
}
|
|
2956
|
-
];
|
|
2957
|
-
onClickOutside(event) {
|
|
2958
|
-
if (this.dropdownOpen && !this.eRef.nativeElement.contains(event.target)) {
|
|
2959
|
-
this.dropdownOpen = false;
|
|
2960
|
-
this.cdr.detectChanges();
|
|
2961
|
-
}
|
|
2962
|
-
}
|
|
2963
|
-
config = {
|
|
2964
|
-
displayMode: 'ellipsis',
|
|
2965
|
-
placeholderLabel: 'Select Finding'
|
|
2966
|
-
};
|
|
2967
|
-
constructor(cdr, http, fxBuilderWrapperService, fxApiService, fb, eRef) {
|
|
2968
|
-
super(cdr);
|
|
2969
|
-
this.cdr = cdr;
|
|
2970
|
-
this.http = http;
|
|
2971
|
-
this.fxBuilderWrapperService = fxBuilderWrapperService;
|
|
2972
|
-
this.fxApiService = fxApiService;
|
|
2973
|
-
this.fb = fb;
|
|
2974
|
-
this.eRef = eRef;
|
|
2975
|
-
this.form = this.fb.group({
|
|
2976
|
-
findings: [[]]
|
|
2977
|
-
});
|
|
2978
|
-
this.onInit.subscribe(() => this._register(this.form));
|
|
2979
|
-
}
|
|
2980
|
-
ngOnInit() {
|
|
2981
|
-
this.fxBuilderWrapperService.variables$
|
|
2982
|
-
.pipe(takeUntil(this.destroy$))
|
|
2983
|
-
.subscribe((variables) => {
|
|
2984
|
-
console.log("Variables");
|
|
2985
|
-
});
|
|
2986
|
-
const serviceUrl = this.fxApiService.getServiceUrl(this.setting('serviceName'));
|
|
2987
|
-
this.getOptions(serviceUrl, this.setting('clinicalNotesURL'));
|
|
2988
|
-
}
|
|
2989
|
-
getOptions(serviceUrl, url) {
|
|
2990
|
-
const finalUrl = serviceUrl + url;
|
|
2991
|
-
this.http.get(finalUrl).subscribe({
|
|
2992
|
-
next: (response) => {
|
|
2993
|
-
// Future API logic here
|
|
2994
|
-
},
|
|
2995
|
-
error: (err) => console.error('Error fetching options', err)
|
|
2996
|
-
});
|
|
2997
|
-
}
|
|
2998
|
-
settings() {
|
|
2999
|
-
return [
|
|
3000
|
-
new FxSelectSetting({ key: 'displayMode', $title: 'Display Mode', value: 'ellipsis' }, [{ option: 'Ellipsis', value: 'ellipsis' }, { option: 'Compact', value: 'compact' }]),
|
|
3001
|
-
new FxStringSetting({ key: 'placeholderLabel', $title: 'Placeholder', value: 'Select Options' }),
|
|
3002
|
-
];
|
|
3003
|
-
}
|
|
3004
|
-
validations() {
|
|
3005
|
-
return [FxValidatorService.required];
|
|
3006
|
-
}
|
|
3007
|
-
/** Dropdown Behavior **/
|
|
3008
|
-
toggleDropdown() {
|
|
3009
|
-
this.dropdownOpen = !this.dropdownOpen;
|
|
3010
|
-
}
|
|
3011
|
-
toggleOption(option, event) {
|
|
3012
|
-
event.stopPropagation();
|
|
3013
|
-
// Toggle checkbox value
|
|
3014
|
-
option.selected = !option.selected;
|
|
3015
|
-
// Reset radios when unchecked
|
|
3016
|
-
if (!option.selected) {
|
|
3017
|
-
option.subSelection = null;
|
|
3018
|
-
option.touched = false;
|
|
3019
|
-
}
|
|
3020
|
-
// ✅ Force UI refresh so radios appear instantly
|
|
3021
|
-
this.cdr.detectChanges();
|
|
3022
|
-
// Update reactive form
|
|
3023
|
-
this.updateFindings();
|
|
3024
|
-
}
|
|
3025
|
-
/** Form & Label Helpers **/
|
|
3026
|
-
get hasSelectedFindings() {
|
|
3027
|
-
return this.findingsOptions.some(f => f.selected);
|
|
3028
|
-
}
|
|
3029
|
-
get selectedFindingsLabel() {
|
|
3030
|
-
const selected = this.findingsOptions
|
|
3031
|
-
.filter(f => {
|
|
3032
|
-
if (f.selected) {
|
|
3033
|
-
// If finding has sub-options → only show if a sub-option is selected
|
|
3034
|
-
if (f.subOptions?.length) {
|
|
3035
|
-
return !!f.subSelection;
|
|
3036
|
-
}
|
|
3037
|
-
// If no sub-options → always show
|
|
3038
|
-
return true;
|
|
3039
|
-
}
|
|
3040
|
-
return false;
|
|
3041
|
-
})
|
|
3042
|
-
.map(f => f.label);
|
|
3043
|
-
if (selected.length === 0)
|
|
3044
|
-
return this.setting('placeholderLabel');
|
|
3045
|
-
// Display mode logic (Compact or Ellipsis)
|
|
3046
|
-
const maxCount = this.setting('displayMode') === 'compact' ? 2 : 3;
|
|
3047
|
-
if (this.setting('displayMode') === 'compact') {
|
|
3048
|
-
return selected.length <= maxCount
|
|
3049
|
-
? selected.join(', ')
|
|
3050
|
-
: `${selected.slice(0, maxCount).join(', ')} +${selected.length - maxCount} more`;
|
|
3051
|
-
}
|
|
3052
|
-
if (this.setting('displayMode') === 'ellipsis') {
|
|
3053
|
-
return selected.length > maxCount
|
|
3054
|
-
? `${selected.slice(0, maxCount).join(', ')}, ...`
|
|
3055
|
-
: selected.join(', ');
|
|
3056
|
-
}
|
|
3057
|
-
return selected.join(', ');
|
|
3058
|
-
}
|
|
3059
|
-
/** Update Findings + Validation **/
|
|
3060
|
-
updateFindings() {
|
|
3061
|
-
const selected = this.findingsOptions
|
|
3062
|
-
.filter(f => {
|
|
3063
|
-
if (f.selected) {
|
|
3064
|
-
// Only include in final form if:
|
|
3065
|
-
// - no subOptions, or
|
|
3066
|
-
// - subOptions with valid subSelection
|
|
3067
|
-
if (f.subOptions?.length) {
|
|
3068
|
-
return !!f.subSelection;
|
|
3069
|
-
}
|
|
3070
|
-
return true;
|
|
3071
|
-
}
|
|
3072
|
-
return false;
|
|
3073
|
-
})
|
|
3074
|
-
.map(f => {
|
|
3075
|
-
const sub = f.subOptions?.find(s => s.value === f.subSelection) || null;
|
|
3076
|
-
return {
|
|
3077
|
-
label: f.label,
|
|
3078
|
-
value: f.value,
|
|
3079
|
-
subSelection: sub ? { label: sub.label, value: sub.value } : null
|
|
3080
|
-
};
|
|
3081
|
-
});
|
|
3082
|
-
// Update reactive form value
|
|
3083
|
-
this.form.patchValue({ findings: selected }, { emitEvent: false });
|
|
3084
|
-
// Validation logic remains same
|
|
3085
|
-
const invalidItems = this.findingsOptions.filter(f => f.selected && f.subOptions && !f.subSelection);
|
|
3086
|
-
this.form.get('findings')?.setErrors(invalidItems.length > 0 ? { missingSubSelection: true } : null);
|
|
3087
|
-
}
|
|
3088
|
-
onSubmit() {
|
|
3089
|
-
this.formSubmitted = true;
|
|
3090
|
-
if (this.form.invalid) {
|
|
3091
|
-
console.warn('⚠️ Please select a sub-option for all selected findings with sub-options.');
|
|
3092
|
-
return;
|
|
3093
|
-
}
|
|
3094
|
-
console.log('✅ Form Value:', this.form.value);
|
|
3095
|
-
}
|
|
3096
|
-
patchExistingValues(data) {
|
|
3097
|
-
this.findingsOptions.forEach(opt => {
|
|
3098
|
-
const match = data.find(x => x.value === opt.value);
|
|
3099
|
-
opt.selected = !!match;
|
|
3100
|
-
opt.subSelection = match?.severity?.value || null;
|
|
3101
|
-
});
|
|
3102
|
-
this.updateFindings();
|
|
3103
|
-
}
|
|
3104
|
-
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 });
|
|
3105
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomizeDropdownComponent, isStandalone: true, selector: "lib-customize-dropdown", host: { listeners: { "document:click": "onClickOutside($event)" } }, 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 <div #dropdownWrapper class=\"relative w-80\">\r\n <button\r\n type=\"button\"\r\n class=\"w-full border border-gray-300 rounded-md 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\r\n class=\"w-5 h-5 ml-2 text-gray-500 transform transition-transform duration-200\"\r\n [class.rotate-180]=\"dropdownOpen\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\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)=\"option.subSelection = s.value; option.touched = true; updateFindings()\"\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 && (option.touched || formSubmitted)\"\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 </form>\r\n </div>\r\n</fx-component>\r\n", styles: [".container{width:300px}.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}\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"] }] });
|
|
3106
|
-
}
|
|
3107
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomizeDropdownComponent, decorators: [{
|
|
3108
|
-
type: Component,
|
|
3109
|
-
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 <div #dropdownWrapper class=\"relative w-80\">\r\n <button\r\n type=\"button\"\r\n class=\"w-full border border-gray-300 rounded-md 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\r\n class=\"w-5 h-5 ml-2 text-gray-500 transform transition-transform duration-200\"\r\n [class.rotate-180]=\"dropdownOpen\"\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M19 9l-7 7-7-7\" />\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)=\"option.subSelection = s.value; option.touched = true; updateFindings()\"\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 && (option.touched || formSubmitted)\"\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 </form>\r\n </div>\r\n</fx-component>\r\n", styles: [".container{width:300px}.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}\n"] }]
|
|
3110
|
-
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }, { type: i5.FormBuilder }, { type: i0.ElementRef }], propDecorators: { onClickOutside: [{
|
|
3111
|
-
type: HostListener,
|
|
3112
|
-
args: ['document:click', ['$event']]
|
|
3113
|
-
}] } });
|
|
3114
|
-
|
|
2921
|
+
// import { CustomizeDropdownComponent } from './components/multiselect-with-form-fields/customize-dropdown.component';
|
|
3115
2922
|
class FxBuilderWrapperComponent {
|
|
3116
2923
|
fxWrapperService;
|
|
3117
2924
|
componentBuilder;
|
|
@@ -3164,9 +2971,9 @@ class FxBuilderWrapperComponent {
|
|
|
3164
2971
|
if (!Boolean(this.fxWrapperService.getComponent('lib-dropdown-with-search'))) {
|
|
3165
2972
|
this.fxWrapperService.registerCustomComponent('Dropdown with Search', 'lib-dropdown-with-search', DropdownWithSearchComponent);
|
|
3166
2973
|
}
|
|
3167
|
-
if (!Boolean(this.fxWrapperService.getComponent('lib-customize-dropdown'))) {
|
|
3168
|
-
|
|
3169
|
-
}
|
|
2974
|
+
// if (!Boolean(this.fxWrapperService.getComponent('lib-customize-dropdown'))) {
|
|
2975
|
+
// this.fxWrapperService.registerCustomComponent('Multiselect with Form', 'lib-customize-dropdown', CustomizeDropdownComponent);
|
|
2976
|
+
// }
|
|
3170
2977
|
}
|
|
3171
2978
|
;
|
|
3172
2979
|
getParsedForm() {
|
|
@@ -3205,6 +3012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
3205
3012
|
args: [{ alias: 'fx-form', required: true }]
|
|
3206
3013
|
}] } });
|
|
3207
3014
|
|
|
3015
|
+
// import { CustomizeDropdownComponent } from '../multiselect-with-form-fields/customize-dropdown.component';
|
|
3208
3016
|
class FxFormWrapperComponent {
|
|
3209
3017
|
fxWrapperService;
|
|
3210
3018
|
form;
|
|
@@ -3254,7 +3062,7 @@ class FxFormWrapperComponent {
|
|
|
3254
3062
|
{ name: 'Multiselect Dropdown', key: 'lib-multiselect-dropdown', component: MultiselectDropdownComponent },
|
|
3255
3063
|
{ name: 'Multiselect Dropdown with Childs', key: 'lib-multiselect-dropdown-with-childs', component: MultiselectDropdownWithChildsComponent },
|
|
3256
3064
|
{ name: 'Dropdown with Search', key: 'lib-dropdown-with-search', component: DropdownWithSearchComponent },
|
|
3257
|
-
{ name: 'Multiselect with Form ', key: 'lib-customize-dropdown', component: CustomizeDropdownComponent },
|
|
3065
|
+
// { name: 'Multiselect with Form ', key: 'lib-customize-dropdown', component: CustomizeDropdownComponent },
|
|
3258
3066
|
];
|
|
3259
3067
|
components.forEach(({ name, key, component }) => {
|
|
3260
3068
|
if (!this.fxWrapperService.getComponent(key)) {
|