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