fx-form-builder-wrapper 2.0.83 → 2.0.85
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 +6 -3
- package/esm2022/lib/components/dropdown-with-search/dropdown-with-search.component.mjs +3 -3
- package/esm2022/lib/components/multiselect-dropdown/multiselect-dropdown.component.mjs +3 -3
- package/esm2022/lib/components/multiselect-dropdown-with-childs/multiselect-dropdown-with-childs.component.mjs +3 -3
- package/esm2022/lib/components/radio-group/radio-group.component.mjs +3 -3
- package/fesm2022/fx-form-builder-wrapper.mjs +15 -12
- 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/package.json +1 -1
|
@@ -2262,11 +2262,11 @@ class DatePickerComponent extends FxBaseComponent {
|
|
|
2262
2262
|
return [FxValidatorService.required];
|
|
2263
2263
|
}
|
|
2264
2264
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.HttpClient }, { token: FxBuilderWrapperService }], target: i0.ɵɵFactoryTarget.Component });
|
|
2265
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerComponent, isStandalone: true, selector: "lib-date-picker", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-date-picker relative\">\r\n <form [formGroup]=\"datePickerForm\">\r\n <!-- <p-calendar formControlName=\"date\" [showIcon]=\"true\" [minDate]=\"minDate\" [maxDate]=\"maxDate\"\r\n [iconDisplay]=\"'input'\" [showOnFocus]=\"false\" dateFormat=\"dd/mm/yy\" [showButtonBar]=\"true\"\r\n placeholder=\"{{ setting('placeHolder') }}\">\r\n <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </p-calendar> -->\r\n <!-- <p-calendar formControlName=\"date\"\r\n dateFormat=\"dd/mm/yy\"\r\n placeholder=\"{{ setting('placeHolder') }}\"> -->\r\n <label for=\"date\">{{ setting('label') }}<
|
|
2265
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DatePickerComponent, isStandalone: true, selector: "lib-date-picker", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-date-picker relative\">\r\n <form [formGroup]=\"datePickerForm\">\r\n <!-- <p-calendar formControlName=\"date\" [showIcon]=\"true\" [minDate]=\"minDate\" [maxDate]=\"maxDate\"\r\n [iconDisplay]=\"'input'\" [showOnFocus]=\"false\" dateFormat=\"dd/mm/yy\" [showButtonBar]=\"true\"\r\n placeholder=\"{{ setting('placeHolder') }}\">\r\n <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </p-calendar> -->\r\n <!-- <p-calendar formControlName=\"date\"\r\n dateFormat=\"dd/mm/yy\"\r\n placeholder=\"{{ setting('placeHolder') }}\"> -->\r\n <label for=\"date\">{{ setting('label') }}<span class=\"field-required\">*</span></label>\r\n <div class=\"relative\">\r\n <input type=\"date\" id=\"date\" name=\"date\" formControlName=\"date\" [min]=\"minDate\" [max]=\"maxDate\">\r\n </div>\r\n <!-- <label for=\"date\" class=\"placeholder\">Select Date</label> -->\r\n <!-- <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template> -->\r\n <!-- </p-calendar> -->\r\n <div>\r\n <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('datePickerErrorMessage') }}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n</fx-component>", styles: [".cursor-pointer{cursor:pointer!important}input[type=date]{border-color:#ccc;width:100%;height:38px!important;padding:.5rem .75rem!important;border-radius:4px!important}input[type=date]::placeholder{color:#aaa}input[type=date]:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b33}input[type=date]::-webkit-calendar-picker-indicator{background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f59e0b' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E\") no-repeat center;background-size:20px 20px;cursor:pointer;opacity:.8}input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}input[type=date]:not(:focus):invalid+.placeholder{color:gray;position:absolute;left:10px;top:8px;pointer-events:none}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }] });
|
|
2266
2266
|
}
|
|
2267
2267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DatePickerComponent, decorators: [{
|
|
2268
2268
|
type: Component,
|
|
2269
|
-
args: [{ selector: 'lib-date-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-date-picker relative\">\r\n <form [formGroup]=\"datePickerForm\">\r\n <!-- <p-calendar formControlName=\"date\" [showIcon]=\"true\" [minDate]=\"minDate\" [maxDate]=\"maxDate\"\r\n [iconDisplay]=\"'input'\" [showOnFocus]=\"false\" dateFormat=\"dd/mm/yy\" [showButtonBar]=\"true\"\r\n placeholder=\"{{ setting('placeHolder') }}\">\r\n <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </p-calendar> -->\r\n <!-- <p-calendar formControlName=\"date\"\r\n dateFormat=\"dd/mm/yy\"\r\n placeholder=\"{{ setting('placeHolder') }}\"> -->\r\n <label for=\"date\">{{ setting('label') }}<
|
|
2269
|
+
args: [{ selector: 'lib-date-picker', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-date-picker relative\">\r\n <form [formGroup]=\"datePickerForm\">\r\n <!-- <p-calendar formControlName=\"date\" [showIcon]=\"true\" [minDate]=\"minDate\" [maxDate]=\"maxDate\"\r\n [iconDisplay]=\"'input'\" [showOnFocus]=\"false\" dateFormat=\"dd/mm/yy\" [showButtonBar]=\"true\"\r\n placeholder=\"{{ setting('placeHolder') }}\">\r\n <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template>\r\n </p-calendar> -->\r\n <!-- <p-calendar formControlName=\"date\"\r\n dateFormat=\"dd/mm/yy\"\r\n placeholder=\"{{ setting('placeHolder') }}\"> -->\r\n <label for=\"date\">{{ setting('label') }}<span class=\"field-required\">*</span></label>\r\n <div class=\"relative\">\r\n <input type=\"date\" id=\"date\" name=\"date\" formControlName=\"date\" [min]=\"minDate\" [max]=\"maxDate\">\r\n </div>\r\n <!-- <label for=\"date\" class=\"placeholder\">Select Date</label> -->\r\n <!-- <ng-template pTemplate=\"inputicon\">\r\n <span class=\"absolute right-0 pt-2 pr-2\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"\r\n class=\"cursor-pointer\">\r\n <path\r\n d=\"M19.5624 2.25991H18.1956V3.13582C18.1956 3.61948 17.7982 4.01173 17.3078 4.01173C16.8177 4.01173 16.4202 3.61948 16.4202 3.13582V2.25991H7.58001V3.13582C7.58001 3.61948 7.18253 4.01173 6.69244 4.01173C6.20209 4.01173 5.80486 3.61948 5.80486 3.13582V2.25991H4.43787C3.26107 2.2604 2.13252 2.72182 1.30042 3.54299C0.468323 4.36441 0.000507185 5.47813 0 6.63946V19.6204C0.000495266 20.7818 0.468304 21.8955 1.30042 22.7167C2.13252 23.5381 3.26107 23.9995 4.43787 24H19.5621C20.7389 23.9995 21.8675 23.5381 22.6996 22.7167C23.5317 21.8955 23.9995 20.7818 24 19.6204V6.63946C23.9995 5.47813 23.5317 4.36441 22.6996 3.54299C21.8675 2.72183 20.7389 2.26041 19.5621 2.25991H19.5624ZM19.5624 22.2482H4.43818C3.73262 22.246 3.05655 21.9686 2.55779 21.4761C2.05878 20.9839 1.77768 20.3167 1.77546 19.6204V9.05698H22.2252V19.6204C22.2229 20.3167 21.9419 20.9839 21.4428 21.4761C20.9441 21.9686 20.268 22.246 19.5624 22.2482ZM7.58001 2.25991H5.80486L5.80505 0.87591C5.80505 0.392251 6.20227 0 6.69262 0C7.18272 0 7.58019 0.392251 7.58019 0.87591L7.58001 2.25991ZM18.1956 2.25991H16.4202L16.4202 0.87591C16.4202 0.392251 16.8177 0 17.3078 0C17.7981 0 18.1953 0.392251 18.1953 0.87591L18.1956 2.25991Z\"\r\n fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"5.33203\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"10.3711\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"11.5547\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n <rect x=\"15.4062\" y=\"16.5898\" width=\"2.96296\" height=\"2.96296\" rx=\"0.444444\" fill=\"#F3A041\" />\r\n </svg>\r\n </span>\r\n </ng-template> -->\r\n <!-- </p-calendar> -->\r\n <div>\r\n <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('datePickerErrorMessage') }}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n</fx-component>", styles: [".cursor-pointer{cursor:pointer!important}input[type=date]{border-color:#ccc;width:100%;height:38px!important;padding:.5rem .75rem!important;border-radius:4px!important}input[type=date]::placeholder{color:#aaa}input[type=date]:focus{border-color:#f59e0b;box-shadow:0 0 0 3px #f59e0b33}input[type=date]::-webkit-calendar-picker-indicator{background:url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23f59e0b' viewBox='0 0 24 24'%3E%3Cpath d='M19 4h-1V2h-2v2H8V2H6v2H5c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2V6c0-1.11-.89-2-2-2zm0 16H5V9h14v11z'/%3E%3C/svg%3E\") no-repeat center;background-size:20px 20px;cursor:pointer;opacity:.8}input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1}input[type=date]:not(:focus):invalid+.placeholder{color:gray;position:absolute;left:10px;top:8px;pointer-events:none}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2270
2270
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }], propDecorators: { fxComponent: [{
|
|
2271
2271
|
type: ViewChild,
|
|
2272
2272
|
args: ['fxComponent']
|
|
@@ -2290,6 +2290,7 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2290
2290
|
// ];
|
|
2291
2291
|
options = [];
|
|
2292
2292
|
isRequired = false;
|
|
2293
|
+
isChildRequired = false;
|
|
2293
2294
|
dropDownForm = this.fb.group({
|
|
2294
2295
|
selectedOption: [''],
|
|
2295
2296
|
otherInput: [{ value: '', disabled: true }],
|
|
@@ -2354,9 +2355,11 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2354
2355
|
const otherControl = this.dropDownForm.get('otherInput');
|
|
2355
2356
|
if (value === 'other') {
|
|
2356
2357
|
otherControl?.enable();
|
|
2358
|
+
this.isChildRequired = true;
|
|
2357
2359
|
otherControl?.setValidators([Validators.required]);
|
|
2358
2360
|
}
|
|
2359
2361
|
else {
|
|
2362
|
+
this.isChildRequired = false;
|
|
2360
2363
|
otherControl?.disable();
|
|
2361
2364
|
otherControl?.reset();
|
|
2362
2365
|
otherControl?.clearValidators();
|
|
@@ -2394,11 +2397,11 @@ class DropdownWithOtherComponent extends FxBaseComponent {
|
|
|
2394
2397
|
});
|
|
2395
2398
|
}
|
|
2396
2399
|
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 });
|
|
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') }} <
|
|
2400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithOtherComponent, isStandalone: true, selector: "dropdown-with-other", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-center custom-dropdown\" [ngClass]=\"setting('customClass')\" *ngIf=\"false\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex flex-row gap-4 items-start\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n\r\n <!-- <label class=\"mb-1 font-semibold text-sm\"></label> -->\r\n <span class=\"input-label dark:text-gray-300\">{{ setting('select-label') }}</span>\r\n <select formControlName=\"selectedOption\" class=\"border p-2 rounded w-full\">\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <!-- Other input (only if 'Other' selected) -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n <label class=\"input-label dark:text-gray-300\">{{ setting('other-label') }}</label>\r\n <div class=\"relative\">\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{setting('other-placeholder')}}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n </div>\r\n <small *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Other is required.\r\n </small>\r\n </div>\r\n </div>\r\n\r\n \r\n </form>\r\n</div>\r\n\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClass')\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <select\r\n formControlName=\"selectedOption\"\r\n class=\"border p-2 rounded w-full\"\r\n >\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('other-label') }} <span class=\"field-required\" *ngIf=\"isChildRequired\">*</span>\r\n </label>\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{ setting('other-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n\r\n <small\r\n *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('errorMessageOther')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n\r\n\r\n\r\n</fx-component>\r\n\r\n <!-- <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small> -->", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:is() .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:is() .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:is() .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:is() .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }] });
|
|
2398
2401
|
}
|
|
2399
2402
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithOtherComponent, decorators: [{
|
|
2400
2403
|
type: Component,
|
|
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') }} <
|
|
2404
|
+
args: [{ selector: 'dropdown-with-other', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"flex justify-center custom-dropdown\" [ngClass]=\"setting('customClass')\" *ngIf=\"false\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex flex-row gap-4 items-start\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n\r\n <!-- <label class=\"mb-1 font-semibold text-sm\"></label> -->\r\n <span class=\"input-label dark:text-gray-300\">{{ setting('select-label') }}</span>\r\n <select formControlName=\"selectedOption\" class=\"border p-2 rounded w-full\">\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n </div>\r\n\r\n <!-- Other input (only if 'Other' selected) -->\r\n <div class=\"flex flex-col w-1/2\">\r\n <div class=\"relative\">\r\n <label class=\"input-label dark:text-gray-300\">{{ setting('other-label') }}</label>\r\n <div class=\"relative\">\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{setting('other-placeholder')}}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n </div>\r\n <small *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Other is required.\r\n </small>\r\n </div>\r\n </div>\r\n\r\n \r\n </form>\r\n</div>\r\n\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClass')\">\r\n <form [formGroup]=\"dropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <select\r\n formControlName=\"selectedOption\"\r\n class=\"border p-2 rounded w-full\"\r\n >\r\n <option value=\"\">Select</option>\r\n <option *ngFor=\"let option of options\" [value]=\"option.value\">\r\n {{ option?.label }}\r\n </option>\r\n </select>\r\n <small *ngIf=\"dropDownForm.get('selectedOption')?.touched && dropDownForm.get('selectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('errorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('other-label') }} <span class=\"field-required\" *ngIf=\"isChildRequired\">*</span>\r\n </label>\r\n <textarea\r\n formControlName=\"otherInput\"\r\n placeholder=\"{{ setting('other-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n ></textarea>\r\n\r\n <small\r\n *ngIf=\"dropDownForm.get('otherInput')?.touched && dropDownForm.get('otherInput')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('errorMessageOther')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n\r\n\r\n\r\n</fx-component>\r\n\r\n <!-- <small *ngIf=\"datePickerForm.get('date')?.touched && datePickerForm.get('date')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n Date is required.\r\n </small> -->", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";.formBuilder_dynamic_table{border:.6px solid #ccc}.formBuilder_dynamic_table>thead>tr{background-color:#4682b4;color:#fff}.formBuilder_dynamic_table>thead>tr>th{font-weight:400!important;padding:.25rem .55rem;font-size:.875rem;text-align:left}.formBuilder_dynamic_table>tbody>tr:nth-child(odd){background-color:#fff}.formBuilder_dynamic_table>tbody>tr:nth-child(2n){background-color:#f6f6f6}.formBuilder_dynamic_table>tbody>tr>td{text-align:left;padding:.25rem .55rem}[type=text],[type=email],[type=url],[type=password],[type=number],[type=date],[type=datetime-local],[type=month],[type=search],[type=tel],[type=time],[type=week],[multiple],textarea,select{border:1px solid #ccc;border-radius:4px;padding:4px}select:not([size]){background:url('data:image/svg+xml,<svg width=\"22\" height=\"20\" viewBox=\"0 0 26 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">%0D%0A <rect x=\"0.5\" width=\"24.766\" height=\"24\" rx=\"3\" fill=\"%23FF7900\" fill-opacity=\"0.1\"/>%0D%0A <path d=\"M12.8918 16.5019C12.7255 16.5019 12.5695 16.4736 12.4239 16.4169C12.2783 16.3602 12.1431 16.2628 12.0183 16.1248L6.27803 9.8162C6.04925 9.56477 5.92946 9.25025 5.91864 8.87265C5.90783 8.49505 6.02762 8.16956 6.27803 7.89619C6.50681 7.64476 6.79799 7.51905 7.15155 7.51905C7.50512 7.51905 7.7963 7.64476 8.02508 7.89619L12.8918 13.2105L17.7586 7.89619C17.9874 7.64476 18.2736 7.51356 18.6172 7.50259C18.9607 7.49162 19.2569 7.62282 19.5056 7.89619C19.7344 8.14762 19.8488 8.46762 19.8488 8.85619C19.8488 9.24477 19.7344 9.56477 19.5056 9.8162L13.7654 16.1248C13.6406 16.2619 13.5054 16.3593 13.3598 16.4169C13.2142 16.4745 13.0582 16.5028 12.8918 16.5019Z\" fill=\"%23FAA762\"/>%0D%0A</svg>%0D%0A') right .4rem center no-repeat #fff;border:1px solid #cdcdcd;padding:6px 30px 6px 10px;border-radius:4px;font-size:14px;font-weight:400;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%!important}.dd_down_icon{background:#f3a04126;border-radius:3px!important;padding:2px}[type=checkbox]{padding:12px}[type=checkbox]:checked{background-color:#f3a041!important;padding:12px;background-size:1em 1em!important}[type=radio]{width:20px;height:20px}[type=radio]:checked{background-color:#f3a041!important;background-size:1.5em 1.5em}[type=checkbox]:focus,[type=radio]:focus{--tw-ring-color: #f3a041 !important}:is() .p-multiselect{height:37.6px!important;border:1px solid #cdcdcd}:is() .p-multiselect .p-multiselect-label{padding:.5rem .75rem}:is() .p-multiselect .p-multiselect-label .p-placeholder{color:#454545}:is() .p-multiselect .p-multiselect-trigger{width:2.5rem!important}.dd_down_icon span{color:#f3a041}.orientation{height:82%!important}.confirmation-dialog .p-dialog-content{text-align:center}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2402
2405
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2403
2406
|
type: ViewChild,
|
|
2404
2407
|
args: ['fxComponent']
|
|
@@ -2543,11 +2546,11 @@ class RadioGroupComponent extends FxBaseComponent {
|
|
|
2543
2546
|
}
|
|
2544
2547
|
}
|
|
2545
2548
|
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 });
|
|
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') }} <
|
|
2549
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: RadioGroupComponent, isStandalone: true, selector: "radio-group-custom", inputs: { showOnSelection: "showOnSelection" }, viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div [ngClass]=\"setting('customClasss')\">\r\n<form [formGroup]=\"confirmationForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 w-full\">\r\n <!-- Title -->\r\n <label class=\"font-semibold text-gray-800\">\r\n {{ setting('select-label') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n\r\n <!-- TWO COLUMN LAYOUT -->\r\n \r\n\r\n <!-- LEFT COLUMN (RADIO GROUP) -->\r\n <div class=\"flex-1\">\r\n\r\n <div class=\"flex gap-3 my-2\"> \r\n <!-- stack vertically so height is correct -->\r\n <label\r\n *ngFor=\"let opt of options\"\r\n class=\"flex items-center gap-2 cursor-pointer text-gray-700\"\r\n >\r\n <input\r\n type=\"radio\"\r\n formControlName=\"confirmation\"\r\n [value]=\"opt.value\"\r\n (change)=\"onSelectionChange(opt.value)\"\r\n class=\"w-4 h-4 accent-blue-600 cursor-pointer\"\r\n />\r\n <span>{{ opt.option }}</span>\r\n </label>\r\n </div>\r\n\r\n <!-- Radio error -->\r\n <small\r\n *ngIf=\"\r\n confirmationForm.get('confirmation')?.touched &&\r\n confirmationForm.get('confirmation')?.errors?.['required']\r\n \"\r\n class=\"text-red-500 mt-1\"\r\n >\r\n {{ setting('error-msg') }}\r\n </small>\r\n\r\n </div>\r\n\r\n </div>\r\n \r\n <!-- RIGHT COLUMN (TEXTAREA) -->\r\n <div *ngIf=\"showTextArea\" class=\"flex-1\">\r\n\r\n <label class=\"mb-2 font-medium text-gray-700\">\r\n {{ setting('additional-field-label') }} <span class=\"field-required\" *ngIf=\"isChildRequired\">*</span>\r\n </label>\r\n\r\n <textarea\r\n formControlName=\"remarks\"\r\n rows=\"3\"\r\n placeholder=\"{{ setting('remark-placeholder') }}\"\r\n class=\"border border-gray-300 rounded-lg p-3 w-full resize-none shadow-sm\r\n focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n ></textarea>\r\n\r\n <!-- Textarea error -->\r\n <small\r\n *ngIf=\"\r\n confirmationForm.get('remarks')?.touched &&\r\n confirmationForm.get('remarks')?.errors?.['required']\r\n \"\r\n class=\"text-red-500 mt-1\"\r\n >\r\n {{ setting('additional-field-error-msg') }}\r\n </small>\r\n\r\n </div>\r\n\r\n\r\n\r\n</form>\r\n</div>\r\n\r\n\r\n</fx-component>\r\n", styles: [".custom-gap{gap:1rem}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.RadioControlValueAccessor, selector: "input[type=radio][formControlName],input[type=radio][formControl],input[type=radio][ngModel]", inputs: ["name", "formControlName", "value"] }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "ngmodule", type: RadioButtonModule }] });
|
|
2547
2550
|
}
|
|
2548
2551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
2549
2552
|
type: Component,
|
|
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') }} <
|
|
2553
|
+
args: [{ selector: 'radio-group-custom', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, RadioButtonModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div [ngClass]=\"setting('customClasss')\">\r\n<form [formGroup]=\"confirmationForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 w-full\">\r\n <!-- Title -->\r\n <label class=\"font-semibold text-gray-800\">\r\n {{ setting('select-label') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n\r\n <!-- TWO COLUMN LAYOUT -->\r\n \r\n\r\n <!-- LEFT COLUMN (RADIO GROUP) -->\r\n <div class=\"flex-1\">\r\n\r\n <div class=\"flex gap-3 my-2\"> \r\n <!-- stack vertically so height is correct -->\r\n <label\r\n *ngFor=\"let opt of options\"\r\n class=\"flex items-center gap-2 cursor-pointer text-gray-700\"\r\n >\r\n <input\r\n type=\"radio\"\r\n formControlName=\"confirmation\"\r\n [value]=\"opt.value\"\r\n (change)=\"onSelectionChange(opt.value)\"\r\n class=\"w-4 h-4 accent-blue-600 cursor-pointer\"\r\n />\r\n <span>{{ opt.option }}</span>\r\n </label>\r\n </div>\r\n\r\n <!-- Radio error -->\r\n <small\r\n *ngIf=\"\r\n confirmationForm.get('confirmation')?.touched &&\r\n confirmationForm.get('confirmation')?.errors?.['required']\r\n \"\r\n class=\"text-red-500 mt-1\"\r\n >\r\n {{ setting('error-msg') }}\r\n </small>\r\n\r\n </div>\r\n\r\n </div>\r\n \r\n <!-- RIGHT COLUMN (TEXTAREA) -->\r\n <div *ngIf=\"showTextArea\" class=\"flex-1\">\r\n\r\n <label class=\"mb-2 font-medium text-gray-700\">\r\n {{ setting('additional-field-label') }} <span class=\"field-required\" *ngIf=\"isChildRequired\">*</span>\r\n </label>\r\n\r\n <textarea\r\n formControlName=\"remarks\"\r\n rows=\"3\"\r\n placeholder=\"{{ setting('remark-placeholder') }}\"\r\n class=\"border border-gray-300 rounded-lg p-3 w-full resize-none shadow-sm\r\n focus:outline-none focus:ring-2 focus:ring-blue-500\"\r\n ></textarea>\r\n\r\n <!-- Textarea error -->\r\n <small\r\n *ngIf=\"\r\n confirmationForm.get('remarks')?.touched &&\r\n confirmationForm.get('remarks')?.errors?.['required']\r\n \"\r\n class=\"text-red-500 mt-1\"\r\n >\r\n {{ setting('additional-field-error-msg') }}\r\n </small>\r\n\r\n </div>\r\n\r\n\r\n\r\n</form>\r\n</div>\r\n\r\n\r\n</fx-component>\r\n", styles: [".custom-gap{gap:1rem}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2551
2554
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { showOnSelection: [{
|
|
2552
2555
|
type: Input
|
|
2553
2556
|
}], fxComponent: [{
|
|
@@ -2654,11 +2657,11 @@ class MultiselectDropdownComponent extends FxBaseComponent {
|
|
|
2654
2657
|
}
|
|
2655
2658
|
}
|
|
2656
2659
|
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 });
|
|
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') }} <
|
|
2660
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownComponent, isStandalone: true, selector: "lib-multiselect-dropdown", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorMessage')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] });
|
|
2658
2661
|
}
|
|
2659
2662
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownComponent, decorators: [{
|
|
2660
2663
|
type: Component,
|
|
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') }} <
|
|
2664
|
+
args: [{ selector: 'lib-multiselect-dropdown', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMulti')\">\r\n <form [formGroup]=\"multiselectDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleSelectedOption\" [optionLabel]=\"setting('label-key')\"\r\n [placeholder]=\"setting('placeholderMulti')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiselectDropDownForm.get('multipleSelectedOption')?.touched && multiselectDropDownForm.get('multipleSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorMessage')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2662
2665
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2663
2666
|
type: ViewChild,
|
|
2664
2667
|
args: ['fxComponent']
|
|
@@ -2795,11 +2798,11 @@ class MultiselectDropdownWithChildsComponent extends FxBaseComponent {
|
|
|
2795
2798
|
}
|
|
2796
2799
|
}
|
|
2797
2800
|
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 });
|
|
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') }} <
|
|
2801
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: MultiselectDropdownWithChildsComponent, isStandalone: true, selector: "lib-multiselect-dropdown-with-childs", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMultiChild')\">\r\n <form [formGroup]=\"multiChildDropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi-child') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleChildSelectedOption\" [optionLabel]=\"setting('label-key-child')\"\r\n [placeholder]=\"setting('placeholderMultiChild')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('multipleChildSelectedOption')?.touched && multiChildDropDownForm.get('multipleChildSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiChildErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-1-label') }} <sup class=\"field-required\" *ngIf=\"isChild1Required\">*</sup>\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child1\"\r\n placeholder=\"{{ setting('child-1-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child1')?.touched && multiChildDropDownForm.get('child1')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child1ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-2-label') }} <sup class=\"field-required\" *ngIf=\"isChild2Required\">*</sup>\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child2\"\r\n placeholder=\"{{ setting('child-2-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child2')?.touched && multiChildDropDownForm.get('child2')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child2ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i7.MultiSelect, selector: "p-multiSelect", inputs: ["id", "ariaLabel", "style", "styleClass", "panelStyle", "panelStyleClass", "inputId", "disabled", "readonly", "group", "filter", "filterPlaceHolder", "filterLocale", "overlayVisible", "tabindex", "variant", "appendTo", "dataKey", "name", "ariaLabelledBy", "displaySelectedLabel", "maxSelectedLabels", "selectionLimit", "selectedItemsLabel", "showToggleAll", "emptyFilterMessage", "emptyMessage", "resetFilterOnHide", "dropdownIcon", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "showHeader", "filterBy", "scrollHeight", "lazy", "virtualScroll", "loading", "virtualScrollItemSize", "loadingIcon", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "filterMatchMode", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "autofocusFilter", "display", "autocomplete", "showClear", "autofocus", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "defaultLabel", "placeholder", "options", "filterValue", "itemSize", "selectAll", "focusOnHover", "filterFields", "selectOnFocus", "autoOptionFocus"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onClear", "onPanelShow", "onPanelHide", "onLazyLoad", "onRemove", "onSelectAllChange"] }] });
|
|
2799
2802
|
}
|
|
2800
2803
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: MultiselectDropdownWithChildsComponent, decorators: [{
|
|
2801
2804
|
type: Component,
|
|
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') }} <
|
|
2805
|
+
args: [{ selector: 'lib-multiselect-dropdown-with-childs', standalone: true, imports: [CommonModule, ReactiveFormsModule, FormsModule, FxComponent, CalendarModule, MultiSelectModule], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n<div class=\"custom-dropdown\" [ngClass]=\"setting('customClassMultiChild')\">\r\n <form [formGroup]=\"multiChildDropDownForm\" class=\"flex gap-4 w-full\">\r\n \r\n <!-- Dropdown -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-multi-child') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-multiSelect [options]=\"options\" formControlName=\"multipleChildSelectedOption\" [optionLabel]=\"setting('label-key-child')\"\r\n [placeholder]=\"setting('placeholderMultiChild')\" class=\"multiselect\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-multiSelect>\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('multipleChildSelectedOption')?.touched && multiChildDropDownForm.get('multipleChildSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiChildErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <!-- Other input -->\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-1-label') }} <sup class=\"field-required\" *ngIf=\"isChild1Required\">*</sup>\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child1\"\r\n placeholder=\"{{ setting('child-1-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child1')?.touched && multiChildDropDownForm.get('child1')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child1ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('child-2-label') }} <sup class=\"field-required\" *ngIf=\"isChild2Required\">*</sup>\r\n </label>\r\n <input\r\n type=\"text\"\r\n formControlName=\"child2\"\r\n placeholder=\"{{ setting('child-2-placeholder') }}\"\r\n class=\"border p-2 rounded w-full\"\r\n rows=\"2\"\r\n >\r\n\r\n <small\r\n *ngIf=\"multiChildDropDownForm.get('child2')?.touched && multiChildDropDownForm.get('child2')?.errors?.['required']\"\r\n class=\"text-red-500\"\r\n >\r\n {{ setting('child2ErrorMessage')}}\r\n </small>\r\n </div>\r\n\r\n </form>\r\n</div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-multiselect.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2803
2806
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2804
2807
|
type: ViewChild,
|
|
2805
2808
|
args: ['fxComponent']
|
|
@@ -2908,11 +2911,11 @@ class DropdownWithSearchComponent extends FxBaseComponent {
|
|
|
2908
2911
|
}
|
|
2909
2912
|
}
|
|
2910
2913
|
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') }} <
|
|
2914
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: DropdownWithSearchComponent, isStandalone: true, selector: "lib-dropdown-with-search", viewQueries: [{ propertyName: "fxComponent", first: true, predicate: ["fxComponent"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassSearch')\">\r\n <form [formGroup]=\"searchDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-search') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-dropdown [options]=\"options\" formControlName=\"searchSelectedOption\" [optionLabel]=\"setting('label-key-search')\" [filter]=\"true\" [showClear]=\"true\" \r\n [placeholder]=\"setting('placeholderSearch')\" class=\"multiselect\" [optionValue]=\"setting('value-key-search')\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-dropdown>\r\n\r\n\r\n <small\r\n *ngIf=\"searchDropDownForm.get('searchSelectedOption')?.touched && searchDropDownForm.get('searchSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorSearch')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-dropdown.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"], dependencies: [{ kind: "ngmodule", type: DropdownModule }, { kind: "component", type: i4$1.Dropdown, selector: "p-dropdown", inputs: ["id", "scrollHeight", "filter", "name", "style", "panelStyle", "styleClass", "panelStyleClass", "readonly", "required", "editable", "appendTo", "tabindex", "placeholder", "loadingIcon", "filterPlaceholder", "filterLocale", "variant", "inputId", "dataKey", "filterBy", "filterFields", "autofocus", "resetFilterOnHide", "checkmark", "dropdownIcon", "loading", "optionLabel", "optionValue", "optionDisabled", "optionGroupLabel", "optionGroupChildren", "autoDisplayFirst", "group", "showClear", "emptyFilterMessage", "emptyMessage", "lazy", "virtualScroll", "virtualScrollItemSize", "virtualScrollOptions", "overlayOptions", "ariaFilterLabel", "ariaLabel", "ariaLabelledBy", "filterMatchMode", "maxlength", "tooltip", "tooltipPosition", "tooltipPositionStyle", "tooltipStyleClass", "focusOnHover", "selectOnFocus", "autoOptionFocus", "autofocusFilter", "autoShowPanelOnPrintableCharacterKeyDown", "disabled", "itemSize", "autoZIndex", "baseZIndex", "showTransitionOptions", "hideTransitionOptions", "filterValue", "options"], outputs: ["onChange", "onFilter", "onFocus", "onBlur", "onClick", "onShow", "onHide", "onClear", "onLazyLoad"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i5.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i5.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: FxComponent, selector: "fx-component", inputs: ["fxData"] }] });
|
|
2912
2915
|
}
|
|
2913
2916
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: DropdownWithSearchComponent, decorators: [{
|
|
2914
2917
|
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') }} <
|
|
2918
|
+
args: [{ selector: 'lib-dropdown-with-search', standalone: true, imports: [DropdownModule, CommonModule, FormsModule, ReactiveFormsModule, CalendarModule, MultiSelectModule, FxComponent], template: "<fx-component [fxData]=\"fxData\" #fxComponent>\r\n <div class=\"custom-dropdown\" [ngClass]=\"setting('customClassSearch')\">\r\n <form [formGroup]=\"searchDropDownForm\" class=\"flex gap-4 w-full\">\r\n <div class=\"flex-1 relative\">\r\n <label class=\"input-label dark:text-gray-300\">\r\n {{ setting('select-label-search') }} <span class=\"field-required\" *ngIf=\"isRequired\">*</span>\r\n </label>\r\n <p-dropdown [options]=\"options\" formControlName=\"searchSelectedOption\" [optionLabel]=\"setting('label-key-search')\" [filter]=\"true\" [showClear]=\"true\" \r\n [placeholder]=\"setting('placeholderSearch')\" class=\"multiselect\" [optionValue]=\"setting('value-key-search')\">\r\n\r\n <!-- Custom Dropdown Icon -->\r\n <ng-template pTemplate=\"dropdownicon\">\r\n <div class=\"flex align-items-center dd_down_icon\">\r\n <span class=\"pi pi-angle-down text-xl\"></span>\r\n </div>\r\n </ng-template>\r\n </p-dropdown>\r\n\r\n\r\n <small\r\n *ngIf=\"searchDropDownForm.get('searchSelectedOption')?.touched && searchDropDownForm.get('searchSelectedOption')?.errors?.['required']\"\r\n class=\"text-red-500\">\r\n {{ setting('multiErrorSearch')}}\r\n </small>\r\n </div>\r\n </form>\r\n </div>\r\n</fx-component>", styles: ["@import\"https://unpkg.com/primeng@17.18.10/resources/themes/lara-light-blue/theme.css\";@import\"https://unpkg.com/primeng@17.18.10/resources/primeng.min.css\";@import\"https://unpkg.com/primeicons@6.0.0/primeicons.css\";::ng-deep .p-dropdown.p-component.p-inputwrapper{height:37.6px!important;border:1px solid #cdcdcd!important;width:100%!important}.dd_down_icon span{color:#f3a041}.field-required{color:red;font-size:1.1em}\n"] }]
|
|
2916
2919
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.HttpClient }, { type: FxBuilderWrapperService }, { type: i3$2.ApiServiceRegistry }], propDecorators: { fxComponent: [{
|
|
2917
2920
|
type: ViewChild,
|
|
2918
2921
|
args: ['fxComponent']
|