ng-prime-tools 1.0.82 → 1.0.83
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2496,39 +2496,103 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImpo
|
|
|
2496
2496
|
}] } });
|
|
2497
2497
|
|
|
2498
2498
|
class PTSwitchInputComponent {
|
|
2499
|
+
constructor() {
|
|
2500
|
+
/**
|
|
2501
|
+
* Two-way standalone value.
|
|
2502
|
+
*/
|
|
2503
|
+
this.value = null;
|
|
2504
|
+
this.valueChange = new EventEmitter();
|
|
2505
|
+
this.switchChange = new EventEmitter();
|
|
2506
|
+
this.standaloneFormGroup = new FormGroup({});
|
|
2507
|
+
}
|
|
2499
2508
|
ngOnInit() {
|
|
2500
2509
|
this.setupControl();
|
|
2501
2510
|
}
|
|
2502
2511
|
ngOnChanges(changes) {
|
|
2503
|
-
if (changes['
|
|
2512
|
+
if (changes['formGroup'] ||
|
|
2513
|
+
changes['formField'] ||
|
|
2514
|
+
changes['config'] ||
|
|
2515
|
+
changes['value']) {
|
|
2504
2516
|
this.setupControl();
|
|
2505
2517
|
}
|
|
2506
2518
|
}
|
|
2519
|
+
ngOnDestroy() {
|
|
2520
|
+
this.valueChangesSubscription?.unsubscribe();
|
|
2521
|
+
}
|
|
2522
|
+
get activeFormGroup() {
|
|
2523
|
+
return this.formGroup || this.standaloneFormGroup;
|
|
2524
|
+
}
|
|
2525
|
+
get controlName() {
|
|
2526
|
+
return this.formField?.name || this.config?.name || 'switch';
|
|
2527
|
+
}
|
|
2507
2528
|
get inputId() {
|
|
2508
|
-
return `pt-switch-${this.
|
|
2529
|
+
return `pt-switch-${this.controlName}`;
|
|
2530
|
+
}
|
|
2531
|
+
get labelId() {
|
|
2532
|
+
return `pt-switch-label-${this.controlName}`;
|
|
2533
|
+
}
|
|
2534
|
+
get resolvedHidden() {
|
|
2535
|
+
return this.formField?.hidden ?? this.config?.hidden ?? false;
|
|
2536
|
+
}
|
|
2537
|
+
get resolvedLabel() {
|
|
2538
|
+
return this.formField?.label || this.config?.label;
|
|
2539
|
+
}
|
|
2540
|
+
get resolvedWidth() {
|
|
2541
|
+
return this.formField?.width || this.config?.width || '100%';
|
|
2542
|
+
}
|
|
2543
|
+
get resolvedRequired() {
|
|
2544
|
+
return this.formField?.required ?? this.config?.required ?? false;
|
|
2545
|
+
}
|
|
2546
|
+
get resolvedDisabled() {
|
|
2547
|
+
return this.formField?.disabled ?? this.config?.disabled ?? false;
|
|
2548
|
+
}
|
|
2549
|
+
get resolvedErrorText() {
|
|
2550
|
+
return this.formField?.errorText || this.config?.errorText;
|
|
2509
2551
|
}
|
|
2510
2552
|
setupControl() {
|
|
2511
|
-
const name = this.
|
|
2512
|
-
if (!name
|
|
2553
|
+
const name = this.controlName;
|
|
2554
|
+
if (!name) {
|
|
2513
2555
|
return;
|
|
2514
2556
|
}
|
|
2515
|
-
|
|
2557
|
+
const initialValue = this.getInitialValue();
|
|
2558
|
+
const hasExplicitValue = this.hasExplicitFieldValue(initialValue);
|
|
2559
|
+
let control = this.activeFormGroup.get(name);
|
|
2516
2560
|
if (!control) {
|
|
2517
|
-
control = new FormControl(
|
|
2518
|
-
this.
|
|
2561
|
+
control = new FormControl(hasExplicitValue ? initialValue : this.resolvedRequired ? null : false);
|
|
2562
|
+
this.activeFormGroup.addControl(name, control);
|
|
2563
|
+
}
|
|
2564
|
+
else if (!this.formGroup && this.hasExplicitFieldValue(this.value)) {
|
|
2565
|
+
control.setValue(this.value, { emitEvent: false });
|
|
2519
2566
|
}
|
|
2520
2567
|
control.setValidators(this.getValidators());
|
|
2521
|
-
if (this.
|
|
2568
|
+
if (this.resolvedDisabled) {
|
|
2522
2569
|
control.disable({ emitEvent: false });
|
|
2523
2570
|
}
|
|
2524
2571
|
else {
|
|
2525
2572
|
control.enable({ emitEvent: false });
|
|
2526
2573
|
}
|
|
2527
2574
|
control.updateValueAndValidity({ emitEvent: false });
|
|
2575
|
+
this.valueChangesSubscription?.unsubscribe();
|
|
2576
|
+
this.valueChangesSubscription = control.valueChanges.subscribe((selectedValue) => {
|
|
2577
|
+
this.valueChange.emit(selectedValue);
|
|
2578
|
+
this.switchChange.emit(selectedValue);
|
|
2579
|
+
});
|
|
2580
|
+
}
|
|
2581
|
+
getInitialValue() {
|
|
2582
|
+
if (this.formField?.value !== undefined) {
|
|
2583
|
+
return this.formField.value;
|
|
2584
|
+
}
|
|
2585
|
+
if (this.value !== undefined && this.value !== null) {
|
|
2586
|
+
return this.value;
|
|
2587
|
+
}
|
|
2588
|
+
return this.config?.value ?? null;
|
|
2589
|
+
}
|
|
2590
|
+
hasExplicitFieldValue(value) {
|
|
2591
|
+
return value !== null && value !== undefined;
|
|
2528
2592
|
}
|
|
2529
2593
|
getValidators() {
|
|
2530
2594
|
const validators = [];
|
|
2531
|
-
if (this.
|
|
2595
|
+
if (this.resolvedRequired) {
|
|
2532
2596
|
validators.push(this.requireChoiceValidator());
|
|
2533
2597
|
}
|
|
2534
2598
|
return validators;
|
|
@@ -2541,22 +2605,31 @@ class PTSwitchInputComponent {
|
|
|
2541
2605
|
};
|
|
2542
2606
|
}
|
|
2543
2607
|
getErrorMessage() {
|
|
2544
|
-
const control = this.
|
|
2608
|
+
const control = this.activeFormGroup.get(this.controlName);
|
|
2545
2609
|
if (control?.errors?.['requiredChoice']) {
|
|
2546
|
-
return this.
|
|
2610
|
+
return (this.resolvedErrorText ||
|
|
2611
|
+
`${this.resolvedLabel || this.controlName} is required`);
|
|
2547
2612
|
}
|
|
2548
2613
|
return '';
|
|
2549
2614
|
}
|
|
2550
2615
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSwitchInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2551
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSwitchInputComponent, isStandalone: false, selector: "pt-switch-input", inputs: { formGroup: "formGroup", formField: "formField" }, usesOnChanges: true, ngImport: i0, template: "@if (!
|
|
2616
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTSwitchInputComponent, isStandalone: false, selector: "pt-switch-input", inputs: { formGroup: "formGroup", formField: "formField", config: "config", value: "value" }, outputs: { valueChange: "valueChange", switchChange: "switchChange" }, usesOnChanges: true, ngImport: i0, template: "@if (!resolvedHidden) {\n <div\n [formGroup]=\"activeFormGroup\"\n class=\"form-field\"\n [ngStyle]=\"{ width: resolvedWidth }\"\n >\n <div class=\"switch-container\">\n <p-toggleswitch\n [inputId]=\"inputId\"\n [formControlName]=\"controlName\"\n [ariaLabelledBy]=\"labelId\"\n ></p-toggleswitch>\n\n @if (resolvedLabel) {\n <label [id]=\"labelId\" [for]=\"inputId\" class=\"switch-label\">\n {{ resolvedLabel }}\n </label>\n }\n </div>\n\n @if (\n activeFormGroup.get(controlName)?.errors &&\n (activeFormGroup.get(controlName)?.touched ||\n activeFormGroup.get(controlName)?.dirty)\n ) {\n <div class=\"error-container\">\n <small class=\"field-error\">{{ getErrorMessage() }}</small>\n </div>\n }\n </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.switch-container{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}.switch-label{display:inline-flex;align-items:center;margin:0;padding:0;font-weight:600;font-size:1rem;line-height:1;cursor:pointer}.error-container{margin-top:.25rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch-slider,.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch-slider{border-color:#dc2626}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i3$3.ToggleSwitch, selector: "p-toggleswitch, p-toggleSwitch, p-toggle-switch", inputs: ["styleClass", "tabindex", "inputId", "readonly", "trueValue", "falseValue", "ariaLabel", "size", "ariaLabelledBy", "autofocus"], outputs: ["onChange"] }] }); }
|
|
2552
2617
|
}
|
|
2553
2618
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTSwitchInputComponent, decorators: [{
|
|
2554
2619
|
type: Component,
|
|
2555
|
-
args: [{ selector: 'pt-switch-input', standalone: false, template: "@if (!
|
|
2620
|
+
args: [{ selector: 'pt-switch-input', standalone: false, template: "@if (!resolvedHidden) {\n <div\n [formGroup]=\"activeFormGroup\"\n class=\"form-field\"\n [ngStyle]=\"{ width: resolvedWidth }\"\n >\n <div class=\"switch-container\">\n <p-toggleswitch\n [inputId]=\"inputId\"\n [formControlName]=\"controlName\"\n [ariaLabelledBy]=\"labelId\"\n ></p-toggleswitch>\n\n @if (resolvedLabel) {\n <label [id]=\"labelId\" [for]=\"inputId\" class=\"switch-label\">\n {{ resolvedLabel }}\n </label>\n }\n </div>\n\n @if (\n activeFormGroup.get(controlName)?.errors &&\n (activeFormGroup.get(controlName)?.touched ||\n activeFormGroup.get(controlName)?.dirty)\n ) {\n <div class=\"error-container\">\n <small class=\"field-error\">{{ getErrorMessage() }}</small>\n </div>\n }\n </div>\n}\n", styles: [".form-field{margin-bottom:1rem}.switch-container{display:flex;align-items:center;gap:.5rem;min-height:2.75rem}.switch-label{display:inline-flex;align-items:center;margin:0;padding:0;font-weight:600;font-size:1rem;line-height:1;cursor:pointer}.error-container{margin-top:.25rem}.field-error{display:block;color:#dc2626;font-size:.8rem;font-weight:500;line-height:1.2}.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-touched .p-toggleswitch-slider,.form-field ::ng-deep .p-toggleswitch.ng-invalid.ng-dirty .p-toggleswitch-slider{border-color:#dc2626}\n"] }]
|
|
2556
2621
|
}], propDecorators: { formGroup: [{
|
|
2557
2622
|
type: Input
|
|
2558
2623
|
}], formField: [{
|
|
2559
2624
|
type: Input
|
|
2625
|
+
}], config: [{
|
|
2626
|
+
type: Input
|
|
2627
|
+
}], value: [{
|
|
2628
|
+
type: Input
|
|
2629
|
+
}], valueChange: [{
|
|
2630
|
+
type: Output
|
|
2631
|
+
}], switchChange: [{
|
|
2632
|
+
type: Output
|
|
2560
2633
|
}] } });
|
|
2561
2634
|
|
|
2562
2635
|
class PTTextAreaInputComponent {
|
|
@@ -3076,11 +3149,11 @@ class PTDynamicFormFieldComponent {
|
|
|
3076
3149
|
return field;
|
|
3077
3150
|
}
|
|
3078
3151
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3079
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDynamicFormFieldComponent, isStandalone: false, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n [formGroup]=\"form\"\n class=\"form-field\"\n [ngStyle]=\"{\n width:\n field.type !== FormInputTypeEnum.CHECKBOX
|
|
3152
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTDynamicFormFieldComponent, isStandalone: false, selector: "pt-dynamic-form-field", inputs: { field: "field", form: "form", inputWidth: "inputWidth" }, ngImport: i0, template: "<div\n [formGroup]=\"form\"\n class=\"form-field\"\n [ngStyle]=\"{\n width:\n field.type !== FormInputTypeEnum.CHECKBOX\n ? field.width || inputWidth\n : 'auto',\n }\"\n>\n @switch (field.type) {\n <!-- TEXT -->\n @case (FormInputTypeEnum.TEXT) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- EMAIL -->\n @case (FormInputTypeEnum.EMAIL) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- NUMBER -->\n @case (FormInputTypeEnum.NUMBER) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- AMOUNT -->\n @case (FormInputTypeEnum.AMOUNT) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- TEXTAREA -->\n @case (FormInputTypeEnum.TEXTAREA) {\n <pt-text-area-input\n [formGroup]=\"form\"\n [formField]=\"asTextAreaField(field)\"\n ></pt-text-area-input>\n }\n\n <!-- DATE -->\n @case (FormInputTypeEnum.DATE) {\n <pt-date-input\n [formGroup]=\"form\"\n [formField]=\"asDateField(field)\"\n ></pt-date-input>\n }\n\n <!-- MULTISELECT -->\n @case (FormInputTypeEnum.MULTISELECT) {\n <pt-multi-select\n [formGroup]=\"form\"\n [formField]=\"asMultiSelectField(field)\"\n ></pt-multi-select>\n }\n\n <!-- SELECT -->\n @case (FormInputTypeEnum.SELECT) {\n <pt-dropdown\n [formGroup]=\"form\"\n [formField]=\"asSelectField(field)\"\n ></pt-dropdown>\n }\n\n <!-- CHECKBOX -->\n @case (FormInputTypeEnum.CHECKBOX) {\n <pt-check-box-input\n [formGroup]=\"form\"\n [formField]=\"asCheckboxField(field)\"\n ></pt-check-box-input>\n }\n\n <!-- SWITCH -->\n @case (FormInputTypeEnum.SWITCH) {\n <pt-switch-input\n [formGroup]=\"form\"\n [formField]=\"asSwitchField(field)\"\n ></pt-switch-input>\n }\n }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: PTCheckBoxInputComponent, selector: "pt-check-box-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDateInputComponent, selector: "pt-date-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "dateChange"] }, { kind: "component", type: PTNumberInputComponent, selector: "pt-number-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTSwitchInputComponent, selector: "pt-switch-input", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "switchChange"] }, { kind: "component", type: PTTextAreaInputComponent, selector: "pt-text-area-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTTextInputComponent, selector: "pt-text-input", inputs: ["formGroup", "formField"] }, { kind: "component", type: PTDropdownComponent, selector: "pt-dropdown", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }, { kind: "component", type: PTMultiSelectComponent, selector: "pt-multi-select", inputs: ["formGroup", "formField", "config", "value"], outputs: ["valueChange", "selectionChange"] }] }); }
|
|
3080
3153
|
}
|
|
3081
3154
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTDynamicFormFieldComponent, decorators: [{
|
|
3082
3155
|
type: Component,
|
|
3083
|
-
args: [{ selector: 'pt-dynamic-form-field', standalone: false, template: "<div\n [formGroup]=\"form\"\n class=\"form-field\"\n [ngStyle]=\"{\n width:\n field.type !== FormInputTypeEnum.CHECKBOX
|
|
3156
|
+
args: [{ selector: 'pt-dynamic-form-field', standalone: false, template: "<div\n [formGroup]=\"form\"\n class=\"form-field\"\n [ngStyle]=\"{\n width:\n field.type !== FormInputTypeEnum.CHECKBOX\n ? field.width || inputWidth\n : 'auto',\n }\"\n>\n @switch (field.type) {\n <!-- TEXT -->\n @case (FormInputTypeEnum.TEXT) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- EMAIL -->\n @case (FormInputTypeEnum.EMAIL) {\n <pt-text-input\n [formGroup]=\"form\"\n [formField]=\"asTextField(field)\"\n ></pt-text-input>\n }\n\n <!-- NUMBER -->\n @case (FormInputTypeEnum.NUMBER) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- AMOUNT -->\n @case (FormInputTypeEnum.AMOUNT) {\n <pt-number-input\n [formGroup]=\"form\"\n [formField]=\"asNumberField(field)\"\n ></pt-number-input>\n }\n\n <!-- TEXTAREA -->\n @case (FormInputTypeEnum.TEXTAREA) {\n <pt-text-area-input\n [formGroup]=\"form\"\n [formField]=\"asTextAreaField(field)\"\n ></pt-text-area-input>\n }\n\n <!-- DATE -->\n @case (FormInputTypeEnum.DATE) {\n <pt-date-input\n [formGroup]=\"form\"\n [formField]=\"asDateField(field)\"\n ></pt-date-input>\n }\n\n <!-- MULTISELECT -->\n @case (FormInputTypeEnum.MULTISELECT) {\n <pt-multi-select\n [formGroup]=\"form\"\n [formField]=\"asMultiSelectField(field)\"\n ></pt-multi-select>\n }\n\n <!-- SELECT -->\n @case (FormInputTypeEnum.SELECT) {\n <pt-dropdown\n [formGroup]=\"form\"\n [formField]=\"asSelectField(field)\"\n ></pt-dropdown>\n }\n\n <!-- CHECKBOX -->\n @case (FormInputTypeEnum.CHECKBOX) {\n <pt-check-box-input\n [formGroup]=\"form\"\n [formField]=\"asCheckboxField(field)\"\n ></pt-check-box-input>\n }\n\n <!-- SWITCH -->\n @case (FormInputTypeEnum.SWITCH) {\n <pt-switch-input\n [formGroup]=\"form\"\n [formField]=\"asSwitchField(field)\"\n ></pt-switch-input>\n }\n }\n</div>\n", styles: [".form-field{margin-bottom:1rem}.form-field label{display:block;margin-bottom:.5rem;font-weight:700}\n"] }]
|
|
3084
3157
|
}], propDecorators: { field: [{
|
|
3085
3158
|
type: Input
|
|
3086
3159
|
}], form: [{
|
|
@@ -3095,11 +3168,11 @@ class PTFormBuilderComponent {
|
|
|
3095
3168
|
this.mainGroup = { fields: [], groups: [] };
|
|
3096
3169
|
this.buttons = [];
|
|
3097
3170
|
/**
|
|
3098
|
-
* Largeur des inputs/champs
|
|
3171
|
+
* Largeur des inputs/champs.
|
|
3099
3172
|
*/
|
|
3100
3173
|
this.inputWidth = '100%';
|
|
3101
3174
|
/**
|
|
3102
|
-
*
|
|
3175
|
+
* Largeur globale du composant pt-form-builder.
|
|
3103
3176
|
*/
|
|
3104
3177
|
this.formWidth = '100%';
|
|
3105
3178
|
this.language = 'en';
|
|
@@ -3148,10 +3221,26 @@ class PTFormBuilderComponent {
|
|
|
3148
3221
|
buildFormGroup(group) {
|
|
3149
3222
|
(group?.fields ?? []).forEach((field) => {
|
|
3150
3223
|
const validators = this.buildValidators(field);
|
|
3151
|
-
|
|
3224
|
+
const anyField = field;
|
|
3225
|
+
this.form.addControl(field.name, this.fb.control({
|
|
3226
|
+
value: this.resolveInitialValue(field),
|
|
3227
|
+
disabled: !!anyField.disabled,
|
|
3228
|
+
}, validators));
|
|
3152
3229
|
});
|
|
3153
3230
|
(group?.groups ?? []).forEach((subGroup) => this.buildFormGroup(subGroup));
|
|
3154
3231
|
}
|
|
3232
|
+
resolveInitialValue(field) {
|
|
3233
|
+
if (field.value !== undefined && field.value !== null) {
|
|
3234
|
+
return field.value;
|
|
3235
|
+
}
|
|
3236
|
+
if (field.type === FormInputTypeEnum.SWITCH) {
|
|
3237
|
+
return field.required ? null : false;
|
|
3238
|
+
}
|
|
3239
|
+
if (field.type === FormInputTypeEnum.CHECKBOX) {
|
|
3240
|
+
return false;
|
|
3241
|
+
}
|
|
3242
|
+
return null;
|
|
3243
|
+
}
|
|
3155
3244
|
buildValidators(field) {
|
|
3156
3245
|
const validators = [];
|
|
3157
3246
|
const anyField = field;
|
|
@@ -3180,13 +3269,14 @@ class PTFormBuilderComponent {
|
|
|
3180
3269
|
return validators;
|
|
3181
3270
|
}
|
|
3182
3271
|
isInvalid(field) {
|
|
3183
|
-
const
|
|
3184
|
-
return !!
|
|
3272
|
+
const control = this.form.get(field.name);
|
|
3273
|
+
return !!control && control.invalid && (control.touched || control.dirty);
|
|
3185
3274
|
}
|
|
3186
3275
|
getErrorMessage(field) {
|
|
3187
3276
|
const control = this.form.get(field.name);
|
|
3188
|
-
if (!control)
|
|
3277
|
+
if (!control) {
|
|
3189
3278
|
return '';
|
|
3279
|
+
}
|
|
3190
3280
|
const lang = this.language;
|
|
3191
3281
|
if (control.hasError('required')) {
|
|
3192
3282
|
return (field.errorText ||
|
|
@@ -3221,11 +3311,11 @@ class PTFormBuilderComponent {
|
|
|
3221
3311
|
this.formChange.emit(this.form.getRawValue());
|
|
3222
3312
|
}
|
|
3223
3313
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, deps: [{ token: i2.FormBuilder }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3224
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTFormBuilderComponent, isStandalone: false, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", formWidth: "formWidth", language: "language" }, outputs: { formSubmit: "formSubmit", formReady: "formReady", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n ></pt-dynamic-form-field>\n }\n\n @for (group of mainGroup.groups; track $index) {\n <div\n class=\"form-field-group\"\n [ngStyle]=\"{ width: group.width || '100%' }\"\n >\n @for (field of group.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n class=\"flex-item\"\n ></pt-dynamic-form-field>\n }\n </div>\n }\n\n <div class=\"button-group\">\n
|
|
3314
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.14", type: PTFormBuilderComponent, isStandalone: false, selector: "pt-form-builder", inputs: { mainGroup: "mainGroup", buttons: "buttons", title: "title", titleStyle: "titleStyle", inputWidth: "inputWidth", formWidth: "formWidth", language: "language" }, outputs: { formSubmit: "formSubmit", formReady: "formReady", formChange: "formChange" }, usesOnChanges: true, ngImport: i0, template: "<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n ></pt-dynamic-form-field>\n }\n\n @for (group of mainGroup.groups; track $index) {\n <div\n class=\"form-field-group\"\n [ngStyle]=\"{ width: group.width || '100%' }\"\n >\n @for (field of group.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n class=\"flex-item\"\n ></pt-dynamic-form-field>\n }\n </div>\n }\n\n @if (buttons.length) {\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <button\n type=\"button\"\n pButton\n [label]=\"button.text\"\n [icon]=\"button.icon || ''\"\n [class]=\"button.color || ''\"\n [disabled]=\"button.disabled || false\"\n [ngStyle]=\"{\n color: button.fontColor || null,\n 'background-color': button.backgroundColor || null,\n 'border-color':\n button.borderColor || button.backgroundColor || null,\n }\"\n (click)=\"\n button.isSubmit\n ? onSubmit()\n : button.isClear\n ? onClear()\n : button.action\n ? button.action()\n : null\n \"\n ></button>\n }\n </div>\n }\n </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i6.ButtonDirective, selector: "[pButton]", inputs: ["ptButtonDirective", "pButtonPT", "pButtonUnstyled", "hostName", "text", "plain", "raised", "size", "outlined", "rounded", "iconPos", "loadingIcon", "fluid", "label", "icon", "loading", "buttonProps", "severity"] }, { kind: "component", type: PTDynamicFormFieldComponent, selector: "pt-dynamic-form-field", inputs: ["field", "form", "inputWidth"] }] }); }
|
|
3225
3315
|
}
|
|
3226
3316
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.14", ngImport: i0, type: PTFormBuilderComponent, decorators: [{
|
|
3227
3317
|
type: Component,
|
|
3228
|
-
args: [{ selector: 'pt-form-builder', standalone: false, template: "<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n ></pt-dynamic-form-field>\n }\n\n @for (group of mainGroup.groups; track $index) {\n <div\n class=\"form-field-group\"\n [ngStyle]=\"{ width: group.width || '100%' }\"\n >\n @for (field of group.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n class=\"flex-item\"\n ></pt-dynamic-form-field>\n }\n </div>\n }\n\n <div class=\"button-group\">\n
|
|
3318
|
+
args: [{ selector: 'pt-form-builder', standalone: false, template: "<div\n class=\"pt-form-builder-wrapper\"\n [ngStyle]=\"{ width: formWidth, maxWidth: formWidth }\"\n>\n @if (title) {\n <div [ngStyle]=\"titleStyle\" class=\"form-title\">{{ title }}</div>\n }\n\n <form [formGroup]=\"form\" (ngSubmit)=\"onSubmit()\">\n @for (field of mainGroup.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n ></pt-dynamic-form-field>\n }\n\n @for (group of mainGroup.groups; track $index) {\n <div\n class=\"form-field-group\"\n [ngStyle]=\"{ width: group.width || '100%' }\"\n >\n @for (field of group.fields; track field.name) {\n <pt-dynamic-form-field\n [field]=\"field\"\n [form]=\"form\"\n [inputWidth]=\"inputWidth\"\n class=\"flex-item\"\n ></pt-dynamic-form-field>\n }\n </div>\n }\n\n @if (buttons.length) {\n <div class=\"button-group\">\n @for (button of buttons; track button.text) {\n <button\n type=\"button\"\n pButton\n [label]=\"button.text\"\n [icon]=\"button.icon || ''\"\n [class]=\"button.color || ''\"\n [disabled]=\"button.disabled || false\"\n [ngStyle]=\"{\n color: button.fontColor || null,\n 'background-color': button.backgroundColor || null,\n 'border-color':\n button.borderColor || button.backgroundColor || null,\n }\"\n (click)=\"\n button.isSubmit\n ? onSubmit()\n : button.isClear\n ? onClear()\n : button.action\n ? button.action()\n : null\n \"\n ></button>\n }\n </div>\n }\n </form>\n</div>\n", styles: [".pt-form-builder-wrapper{width:100%;margin:0 auto;color:var(--pt-form-builder-text, inherit)}.form-title{text-align:center;margin-bottom:1rem;font-size:1.5rem;font-weight:700;color:var(--pt-form-builder-title, #333333)}.form-field{margin-bottom:1rem;color:var(--pt-form-builder-text, inherit)}.form-field label{display:block;margin-bottom:.5rem;font-weight:700;color:var(--pt-form-builder-label, #333333)}::ng-deep .p-inputtext,::ng-deep .p-inputtextarea,::ng-deep .p-calendar,::ng-deep .p-inputnumber,::ng-deep .p-multiselect,::ng-deep .p-dropdown{width:100%!important}::ng-deep .p-inputnumber,::ng-deep p-inputnumber{display:flex!important}.button-group{display:flex;gap:1rem;margin-top:1rem;justify-content:space-between}.button-group button{flex:1;display:flex;align-items:center;justify-content:center}.button-group button i{margin-right:.5rem}.button-group button.p-button-primary{background-color:var(--pt-form-builder-button-primary-bg, #007bff);color:var(--pt-form-builder-button-primary-text, #ffffff)}.button-group button.p-button-secondary{background-color:var(--pt-form-builder-button-secondary-bg, #6c757d);color:var(--pt-form-builder-button-secondary-text, #ffffff)}.button-group button.p-button-success{background-color:var(--pt-form-builder-button-success-bg, #28a745);color:var(--pt-form-builder-button-success-text, #ffffff)}.button-group button:hover{opacity:.9}.form-field-group{display:flex;gap:1rem}.form-field-group .flex-item{flex:1}\n"] }]
|
|
3229
3319
|
}], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { mainGroup: [{
|
|
3230
3320
|
type: Input
|
|
3231
3321
|
}], buttons: [{
|