fx-form-builder-wrapper 2.0.81 → 2.0.83
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 +129 -0
- package/esm2022/lib/components/fx-form-component/fx-form-component.component.mjs +5 -1
- 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 +243 -0
- package/esm2022/lib/components/multiselect-with-form-fields/multiselect-dropdown.component.mjs +166 -0
- package/esm2022/lib/components/radio-group/radio-group.component.mjs +8 -3
- package/esm2022/lib/fx-builder-wrapper.component.mjs +9 -1
- package/fesm2022/fx-form-builder-wrapper.mjs +149 -10
- 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 +29 -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 +59 -0
- package/lib/components/multiselect-with-form-fields/multiselect-dropdown.component.d.ts +51 -0
- package/lib/components/radio-group/radio-group.component.d.ts +2 -0
- package/package.json +1 -1
|
@@ -16,6 +16,7 @@ import { ButtonModule } from 'primeng/button';
|
|
|
16
16
|
import { InputTextModule } from 'primeng/inputtext';
|
|
17
17
|
import * as i5$1 from 'primeng/dialog';
|
|
18
18
|
import { DialogModule } from 'primeng/dialog';
|
|
19
|
+
import * as i4$1 from 'primeng/dropdown';
|
|
19
20
|
import { DropdownModule } from 'primeng/dropdown';
|
|
20
21
|
import * as i2 from 'primeng/api';
|
|
21
22
|
import { MessageService, ConfirmationService } from 'primeng/api';
|
|
@@ -2261,11 +2262,11 @@ class DatePickerComponent extends FxBaseComponent {
|
|
|
2261
2262
|
return [FxValidatorService.required];
|
|
2262
2263
|
}
|
|
2263
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 });
|
|
2264
|
-
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.2em;margin-left:5px}\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 }] });
|
|
2265
2266
|
}
|
|
2266
2267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
2267
2268
|
type: Component,
|
|
2268
|
-
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.2em;margin-left:5px}\n"] }]
|
|
2269
2270
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }], propDecorators: { fxComponent: [{
|
|
2270
2271
|
type: ViewChild,
|
|
2271
2272
|
args: ['fxComponent']
|
|
@@ -2288,6 +2289,7 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2288
2289
|
// { optionValue: 'other', optionName: 'Other' }
|
|
2289
2290
|
// ];
|
|
2290
2291
|
options = [];
|
|
2292
|
+
isRequired = false;
|
|
2291
2293
|
dropDownForm = this.fb.group({
|
|
2292
2294
|
selectedOption: [''],
|
|
2293
2295
|
otherInput: [{ value: '', disabled: true }],
|
|
@@ -2312,6 +2314,7 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2312
2314
|
setTimeout(() => {
|
|
2313
2315
|
const mainControl = this.dropDownForm.get('selectedOption');
|
|
2314
2316
|
if (this.setting('isRequired') === 'true') {
|
|
2317
|
+
this.isRequired = true;
|
|
2315
2318
|
mainControl?.setValidators([Validators.required]);
|
|
2316
2319
|
mainControl?.updateValueAndValidity();
|
|
2317
2320
|
}
|
|
@@ -2391,11 +2394,11 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2391
2394
|
});
|
|
2392
2395
|
}
|
|
2393
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 });
|
|
2394
|
-
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\">\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\">\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') }} <sup class=\"field-required\" *ngIf=\"isRequired\">*</sup>\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.2em;margin-left:5px}\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 }] });
|
|
2395
2398
|
}
|
|
2396
2399
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithOtherComponent, decorators: [{
|
|
2397
2400
|
type: Component,
|
|
2398
|
-
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\">\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\">\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') }} <sup class=\"field-required\" *ngIf=\"isRequired\">*</sup>\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.2em;margin-left:5px}\n"] }]
|
|
2399
2402
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2400
2403
|
type: ViewChild,
|
|
2401
2404
|
args: ['fxComponent']
|
|
@@ -2425,6 +2428,8 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2425
2428
|
fxComponent;
|
|
2426
2429
|
radoioMap = new Map();
|
|
2427
2430
|
compareValue;
|
|
2431
|
+
isRequired = false;
|
|
2432
|
+
isChildRequired = false;
|
|
2428
2433
|
constructor(cdr, http, fxBuilderWrapperService, fxApiService) {
|
|
2429
2434
|
super(cdr);
|
|
2430
2435
|
this.cdr = cdr;
|
|
@@ -2453,6 +2458,7 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2453
2458
|
setTimeout(() => {
|
|
2454
2459
|
const mainControl = this.confirmationForm.get('confirmation');
|
|
2455
2460
|
if (this.setting('isRadioRequired') === 'true') {
|
|
2461
|
+
this.isRequired = true;
|
|
2456
2462
|
mainControl?.setValidators([Validators.required]);
|
|
2457
2463
|
mainControl?.updateValueAndValidity();
|
|
2458
2464
|
}
|
|
@@ -2524,22 +2530,24 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2524
2530
|
const valueToShowTextArea = this.confirmationForm.get('valueToShowTextArea');
|
|
2525
2531
|
valueToShowTextArea?.setValue(this.setting('value-show-text'));
|
|
2526
2532
|
const otherControl = this.confirmationForm.get('remarks');
|
|
2533
|
+
this.isChildRequired = true;
|
|
2527
2534
|
otherControl?.setValidators([Validators.required]);
|
|
2528
2535
|
otherControl?.updateValueAndValidity();
|
|
2529
2536
|
}
|
|
2530
2537
|
else {
|
|
2531
2538
|
const otherControl = this.confirmationForm.get('remarks');
|
|
2539
|
+
this.isChildRequired = false;
|
|
2532
2540
|
otherControl?.reset();
|
|
2533
2541
|
otherControl?.clearValidators();
|
|
2534
2542
|
otherControl?.updateValueAndValidity();
|
|
2535
2543
|
}
|
|
2536
2544
|
}
|
|
2537
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 });
|
|
2538
|
-
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') }} <sup class=\"field-required\" *ngIf=\"isRequired\">*</sup>\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.2em;margin-left:5px}\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 }] });
|
|
2539
2547
|
}
|
|
2540
2548
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
2541
2549
|
type: Component,
|
|
2542
|
-
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') }} <sup class=\"field-required\" *ngIf=\"isRequired\">*</sup>\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.2em;margin-left:5px}\n"] }]
|
|
2543
2551
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { showOnSelection: [{
|
|
2544
2552
|
type: Input
|
|
2545
2553
|
}], fxComponent: [{
|
|
@@ -2558,6 +2566,7 @@ class MultiselectDropdownComponent extends FxBaseComponent {
|
|
|
2558
2566
|
multiselectDropdownMap = new Map();
|
|
2559
2567
|
fxComponent;
|
|
2560
2568
|
options = [];
|
|
2569
|
+
isRequired = false;
|
|
2561
2570
|
multiselectDropDownForm = this.fb.group({
|
|
2562
2571
|
multipleSelectedOption: [[]],
|
|
2563
2572
|
});
|
|
@@ -2584,6 +2593,7 @@ class MultiselectDropdownComponent extends FxBaseComponent {
|
|
|
2584
2593
|
setTimeout(() => {
|
|
2585
2594
|
const mainControl = this.multiselectDropDownForm.get('multipleSelectedOption');
|
|
2586
2595
|
if (this.setting('isMultiRequired') === 'true') {
|
|
2596
|
+
this.isRequired = true;
|
|
2587
2597
|
mainControl?.setValidators([Validators.required]);
|
|
2588
2598
|
mainControl?.updateValueAndValidity();
|
|
2589
2599
|
}
|
|
@@ -2644,11 +2654,11 @@ class MultiselectDropdownComponent extends FxBaseComponent {
|
|
|
2644
2654
|
}
|
|
2645
2655
|
}
|
|
2646
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 });
|
|
2647
|
-
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\">\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') }} <sup class=\"field-required\" *ngIf=\"isRequired\">*</sup>\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.2em;margin-left:5px}\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"] }] });
|
|
2648
2658
|
}
|
|
2649
2659
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownComponent, decorators: [{
|
|
2650
2660
|
type: Component,
|
|
2651
|
-
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\">\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') }} <sup class=\"field-required\" *ngIf=\"isRequired\">*</sup>\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.2em;margin-left:5px}\n"] }]
|
|
2652
2662
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2653
2663
|
type: ViewChild,
|
|
2654
2664
|
args: ['fxComponent']
|
|
@@ -2665,6 +2675,9 @@ class MultiselectDropdownWithChildsComponent extends FxBaseComponent {
|
|
|
2665
2675
|
multiChildDropdownMap = new Map();
|
|
2666
2676
|
fxComponent;
|
|
2667
2677
|
options = [];
|
|
2678
|
+
isRequired = false;
|
|
2679
|
+
isChild1Required = false;
|
|
2680
|
+
isChild2Required = false;
|
|
2668
2681
|
multiChildDropDownForm = this.fb.group({
|
|
2669
2682
|
multipleChildSelectedOption: [[]],
|
|
2670
2683
|
child1: [''],
|
|
@@ -2703,14 +2716,17 @@ class MultiselectDropdownWithChildsComponent extends FxBaseComponent {
|
|
|
2703
2716
|
const child1Control = this.multiChildDropDownForm.get('child1');
|
|
2704
2717
|
const child2Control = this.multiChildDropDownForm.get('child2');
|
|
2705
2718
|
if (this.setting('isMultiChildRequired') === 'true') {
|
|
2719
|
+
this.isRequired = true;
|
|
2706
2720
|
mainControl?.setValidators([Validators.required]);
|
|
2707
2721
|
mainControl?.updateValueAndValidity();
|
|
2708
2722
|
}
|
|
2709
2723
|
if (this.setting('isChild1Required') === 'true') {
|
|
2724
|
+
this.isChild1Required = true;
|
|
2710
2725
|
child1Control?.setValidators([Validators.required]);
|
|
2711
2726
|
child1Control?.updateValueAndValidity();
|
|
2712
2727
|
}
|
|
2713
2728
|
if (this.setting('isChild2Required') === 'true') {
|
|
2729
|
+
this.isChild2Required = true;
|
|
2714
2730
|
child2Control?.setValidators([Validators.required]);
|
|
2715
2731
|
child2Control?.updateValueAndValidity();
|
|
2716
2732
|
}
|
|
@@ -2779,16 +2795,130 @@ class MultiselectDropdownWithChildsComponent extends FxBaseComponent {
|
|
|
2779
2795
|
}
|
|
2780
2796
|
}
|
|
2781
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 });
|
|
2782
|
-
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\">\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\">\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\">\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') }} <sup class=\"field-required\" *ngIf=\"isRequired\">*</sup>\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.2em;vertical-align:super;margin-left:5px}\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"] }] });
|
|
2783
2799
|
}
|
|
2784
2800
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownWithChildsComponent, decorators: [{
|
|
2785
2801
|
type: Component,
|
|
2786
|
-
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\">\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\">\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\">\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') }} <sup class=\"field-required\" *ngIf=\"isRequired\">*</sup>\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.2em;vertical-align:super;margin-left:5px}\n"] }]
|
|
2787
2803
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2788
2804
|
type: ViewChild,
|
|
2789
2805
|
args: ['fxComponent']
|
|
2790
2806
|
}] } });
|
|
2791
2807
|
|
|
2808
|
+
class DropdownWithSearchComponent extends FxBaseComponent {
|
|
2809
|
+
cdr;
|
|
2810
|
+
http;
|
|
2811
|
+
fxBuilderWrapperService;
|
|
2812
|
+
fxApiService;
|
|
2813
|
+
fb = inject(FormBuilder);
|
|
2814
|
+
destroy$ = new Subject();
|
|
2815
|
+
formObject = {};
|
|
2816
|
+
searchDropdownMap = new Map();
|
|
2817
|
+
fxComponent;
|
|
2818
|
+
options = [];
|
|
2819
|
+
isRequired = false;
|
|
2820
|
+
searchDropDownForm = this.fb.group({
|
|
2821
|
+
searchSelectedOption: [''],
|
|
2822
|
+
});
|
|
2823
|
+
constructor(cdr, http, fxBuilderWrapperService, fxApiService) {
|
|
2824
|
+
super(cdr);
|
|
2825
|
+
this.cdr = cdr;
|
|
2826
|
+
this.http = http;
|
|
2827
|
+
this.fxBuilderWrapperService = fxBuilderWrapperService;
|
|
2828
|
+
this.fxApiService = fxApiService;
|
|
2829
|
+
this.onInit.subscribe(() => {
|
|
2830
|
+
this._register(this.searchDropDownForm);
|
|
2831
|
+
});
|
|
2832
|
+
}
|
|
2833
|
+
ngAfterViewInit() {
|
|
2834
|
+
if (!this.setting('searchSelectOptionAPIURL')) {
|
|
2835
|
+
this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'itemsSearchOption')?.options || [];
|
|
2836
|
+
// this.options.unshift({ option: 'Select', value: '' });
|
|
2837
|
+
}
|
|
2838
|
+
setTimeout(() => {
|
|
2839
|
+
const key = this.fxComponent?.fxData?.name;
|
|
2840
|
+
if (key && this.searchDropdownMap.has(key)) {
|
|
2841
|
+
this.searchDropDownForm.patchValue(this.searchDropdownMap.get(key));
|
|
2842
|
+
}
|
|
2843
|
+
}, 200);
|
|
2844
|
+
setTimeout(() => {
|
|
2845
|
+
const mainControl = this.searchDropDownForm.get('searchSelectedOption');
|
|
2846
|
+
if (this.setting('isSearchRequired') === 'true') {
|
|
2847
|
+
this.isRequired = true;
|
|
2848
|
+
mainControl?.setValidators([Validators.required]);
|
|
2849
|
+
mainControl?.updateValueAndValidity();
|
|
2850
|
+
}
|
|
2851
|
+
}, 100);
|
|
2852
|
+
}
|
|
2853
|
+
ngOnInit() {
|
|
2854
|
+
this.fxBuilderWrapperService.variables$
|
|
2855
|
+
.pipe(takeUntil(this.destroy$))
|
|
2856
|
+
.subscribe((variables) => {
|
|
2857
|
+
if (!variables)
|
|
2858
|
+
return;
|
|
2859
|
+
// for (const [key, value] of Object.entries(variables) as [string, any][]) {
|
|
2860
|
+
// if (key.includes('dropdown-with-other')) {
|
|
2861
|
+
// this.formObject = value;
|
|
2862
|
+
// }
|
|
2863
|
+
// }
|
|
2864
|
+
for (const [key, value] of Object.entries(variables)) {
|
|
2865
|
+
if (value &&
|
|
2866
|
+
typeof value === 'object' &&
|
|
2867
|
+
'searchSelectedOption' in value) {
|
|
2868
|
+
this.searchDropdownMap.set(key, value);
|
|
2869
|
+
}
|
|
2870
|
+
}
|
|
2871
|
+
});
|
|
2872
|
+
const serviceUrl = this.fxApiService.getServiceUrl(this.setting('serviceSearchName'));
|
|
2873
|
+
this.getOptions(serviceUrl, this.setting('searchSelectOptionAPIURL'));
|
|
2874
|
+
}
|
|
2875
|
+
settings() {
|
|
2876
|
+
return [
|
|
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' }]),
|
|
2878
|
+
new FxStringSetting({ key: 'searchSelectOptionAPIURL', $title: 'API Url', value: '' }),
|
|
2879
|
+
new FxStringSetting({ key: 'customClassSearch', $title: 'Custom Class Name', value: '' }),
|
|
2880
|
+
new FxStringSetting({ key: 'select-label-search', $title: 'Label', value: '' }),
|
|
2881
|
+
new FxStringSetting({ key: 'label-key-search', $title: 'Label Key', value: 'option' }),
|
|
2882
|
+
new FxStringSetting({ key: 'value-key-search', $title: 'Label Key', value: 'value' }),
|
|
2883
|
+
new FxSelectSetting({ key: 'serviceSearchName', $title: 'Service', value: '' }, [{ option: 'User Service', value: 'user_service' }, { option: 'Patient Service', value: 'patient_service' }, { option: 'Workflow Service', value: 'workflow_service' }]),
|
|
2884
|
+
new FxSelectSetting({ key: 'isSearchRequired', $title: 'Required', value: 'true' }, [{ option: 'Yes', value: 'true' }, { option: 'No', value: 'false' }]),
|
|
2885
|
+
new FxStringSetting({ key: 'multiErrorSearch', $title: 'Error Message', value: 'Please select' }),
|
|
2886
|
+
new FxStringSetting({ key: 'placeholderSearch', $title: 'Placeholder', value: 'Select' }),
|
|
2887
|
+
];
|
|
2888
|
+
}
|
|
2889
|
+
validations() {
|
|
2890
|
+
return [];
|
|
2891
|
+
}
|
|
2892
|
+
getOptions(serviceUrl, url) {
|
|
2893
|
+
if (url) {
|
|
2894
|
+
const finalUrl = serviceUrl + url;
|
|
2895
|
+
this.http.get(finalUrl).subscribe({
|
|
2896
|
+
next: (response) => {
|
|
2897
|
+
this.options = response?.content || [];
|
|
2898
|
+
this.options.unshift({ option: 'Select', value: '' });
|
|
2899
|
+
},
|
|
2900
|
+
error: (err) => {
|
|
2901
|
+
console.error('Error fetching options', err);
|
|
2902
|
+
}
|
|
2903
|
+
});
|
|
2904
|
+
}
|
|
2905
|
+
else {
|
|
2906
|
+
this.options = this.fxComponent?.fxData?.settings?.find((s) => s.key === 'itemsSearchOption')?.options || [];
|
|
2907
|
+
// this.options.unshift({ option: 'Select', value: '' });
|
|
2908
|
+
}
|
|
2909
|
+
}
|
|
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 });
|
|
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') }} <sup class=\"field-required\" *ngIf=\"isRequired\">*</sup>\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.2em;margin-left:5px}\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"] }] });
|
|
2912
|
+
}
|
|
2913
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithSearchComponent, decorators: [{
|
|
2914
|
+
type: Component,
|
|
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') }} <sup class=\"field-required\" *ngIf=\"isRequired\">*</sup>\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.2em;margin-left:5px}\n"] }]
|
|
2916
|
+
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2917
|
+
type: ViewChild,
|
|
2918
|
+
args: ['fxComponent']
|
|
2919
|
+
}] } });
|
|
2920
|
+
|
|
2921
|
+
// import { CustomizeDropdownComponent } from './components/multiselect-with-form-fields/customize-dropdown.component';
|
|
2792
2922
|
class FxBuilderWrapperComponent {
|
|
2793
2923
|
fxWrapperService;
|
|
2794
2924
|
componentBuilder;
|
|
@@ -2838,6 +2968,12 @@ class FxBuilderWrapperComponent {
|
|
|
2838
2968
|
if (!Boolean(this.fxWrapperService.getComponent('lib-multiselect-dropdown-with-childs'))) {
|
|
2839
2969
|
this.fxWrapperService.registerCustomComponent('Multiselect Dropdown with Childs', 'lib-multiselect-dropdown-with-childs', MultiselectDropdownWithChildsComponent);
|
|
2840
2970
|
}
|
|
2971
|
+
if (!Boolean(this.fxWrapperService.getComponent('lib-dropdown-with-search'))) {
|
|
2972
|
+
this.fxWrapperService.registerCustomComponent('Dropdown with Search', 'lib-dropdown-with-search', DropdownWithSearchComponent);
|
|
2973
|
+
}
|
|
2974
|
+
// if (!Boolean(this.fxWrapperService.getComponent('lib-customize-dropdown'))) {
|
|
2975
|
+
// this.fxWrapperService.registerCustomComponent('Multiselect with Form', 'lib-customize-dropdown', CustomizeDropdownComponent);
|
|
2976
|
+
// }
|
|
2841
2977
|
}
|
|
2842
2978
|
;
|
|
2843
2979
|
getParsedForm() {
|
|
@@ -2876,6 +3012,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
2876
3012
|
args: [{ alias: 'fx-form', required: true }]
|
|
2877
3013
|
}] } });
|
|
2878
3014
|
|
|
3015
|
+
// import { CustomizeDropdownComponent } from '../multiselect-with-form-fields/customize-dropdown.component';
|
|
2879
3016
|
class FxFormWrapperComponent {
|
|
2880
3017
|
fxWrapperService;
|
|
2881
3018
|
form;
|
|
@@ -2924,6 +3061,8 @@ class FxFormWrapperComponent {
|
|
|
2924
3061
|
{ name: 'Radio Group with Other', key: 'radio-group-custom', component: RadioGroupComponent },
|
|
2925
3062
|
{ name: 'Multiselect Dropdown', key: 'lib-multiselect-dropdown', component: MultiselectDropdownComponent },
|
|
2926
3063
|
{ name: 'Multiselect Dropdown with Childs', key: 'lib-multiselect-dropdown-with-childs', component: MultiselectDropdownWithChildsComponent },
|
|
3064
|
+
{ name: 'Dropdown with Search', key: 'lib-dropdown-with-search', component: DropdownWithSearchComponent },
|
|
3065
|
+
// { name: 'Multiselect with Form ', key: 'lib-customize-dropdown', component: CustomizeDropdownComponent },
|
|
2927
3066
|
];
|
|
2928
3067
|
components.forEach(({ name, key, component }) => {
|
|
2929
3068
|
if (!this.fxWrapperService.getComponent(key)) {
|