@fovestta2/web-angular 1.1.9 → 1.2.0
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/fv-checkbox/fv-checkbox.component.mjs +3 -3
- package/esm2022/lib/query-form/query-form.component.mjs +13 -56
- package/fesm2022/fovestta2-web-angular.mjs +14 -58
- package/fesm2022/fovestta2-web-angular.mjs.map +1 -1
- package/lib/query-form/query-form.component.d.ts +1 -2
- package/package.json +1 -1
|
@@ -6,7 +6,7 @@ import * as i2 from '@angular/forms';
|
|
|
6
6
|
import { ReactiveFormsModule, FormControl, NG_VALUE_ACCESSOR, FormsModule, Validators } from '@angular/forms';
|
|
7
7
|
import { Validator } from '@fovestta2/validation-engine';
|
|
8
8
|
import * as i1$1 from '@angular/platform-browser';
|
|
9
|
-
import { distinctUntilChanged } from 'rxjs/operators';
|
|
9
|
+
import { distinctUntilChanged, debounceTime } from 'rxjs/operators';
|
|
10
10
|
import { Subscription } from 'rxjs';
|
|
11
11
|
|
|
12
12
|
class FvEntryFieldComponent {
|
|
@@ -586,11 +586,11 @@ class FvCheckboxComponent {
|
|
|
586
586
|
this.valueChange.emit(checked);
|
|
587
587
|
}
|
|
588
588
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvCheckboxComponent, isStandalone: true, selector: "fv-checkbox", inputs: { label: "label", control: "control", disabled: "disabled", required: "required" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-checkbox-container\">\r\n <label class=\"fv-checkbox-label\">\r\n <input type=\"checkbox\" [formControl]=\"control\" [disabled]=\"disabled\" (change)=\"onChange($event)\"\r\n class=\"fv-checkbox-input\" />\r\n <span class=\"fv-checkbox-custom\"></span>\r\n <span class=\"fv-checkbox-text\">\r\n {{ label }}\r\n <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n </span>\r\n </label>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-checkbox-container{margin-bottom:12px}.fv-checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-checkbox-custom{position:absolute;left:0;top:0;height:18px;width:18px;background-color:#fff;border:1px solid #8CBBA8;border-radius:4px;transition:all .2s}.fv-checkbox-label:hover .fv-checkbox-custom{border-color:#3498db}.fv-checkbox-input:checked~.fv-checkbox-custom{background-color:#3498db;border-color:#3498db}.fv-checkbox-custom:after{content:\"\";position:absolute;display:none;left:5px;top:1px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.fv-checkbox-input:checked~.fv-checkbox-custom:after{display:block}.fv-checkbox-input:disabled~.fv-checkbox-custom{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-checkbox-text{font-size:14px;font-weight:600;color:#151d48}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
589
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: FvCheckboxComponent, isStandalone: true, selector: "fv-checkbox", inputs: { label: "label", control: "control", disabled: "disabled", required: "required" }, outputs: { valueChange: "valueChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"fv-checkbox-container\">\r\n <label class=\"fv-checkbox-label\">\r\n <input type=\"checkbox\" [formControl]=\"control\" [disabled]=\"disabled\" (change)=\"onChange($event)\"\r\n class=\"fv-checkbox-input\" />\r\n <span class=\"fv-checkbox-custom\"></span>\r\n <span class=\"fv-checkbox-text\">\r\n {{ label }}\r\n <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n </span>\r\n </label>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-checkbox-container{margin-bottom:12px}.fv-checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-checkbox-custom{position:absolute;left:0;top:0;height:18px;width:18px;background-color:#fff;border:1px solid #8CBBA8;border-radius:4px;transition:all .2s}.fv-checkbox-label:hover .fv-checkbox-custom{border-color:#3498db}.fv-checkbox-input:checked~.fv-checkbox-custom{background-color:#3498db;border-color:#3498db}.fv-checkbox-custom:after{content:\"\";position:absolute;display:none;left:5px;top:1px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.fv-checkbox-input:checked~.fv-checkbox-custom:after{display:block}.fv-checkbox-input:disabled:not(:checked)~.fv-checkbox-custom{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-checkbox-input:disabled:checked~.fv-checkbox-custom{background-color:#3498db!important;opacity:.6;cursor:not-allowed}.fv-checkbox-text{font-size:14px;font-weight:600;color:#151d48}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
590
590
|
}
|
|
591
591
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: FvCheckboxComponent, decorators: [{
|
|
592
592
|
type: Component,
|
|
593
|
-
args: [{ selector: 'fv-checkbox', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-checkbox-container\">\r\n <label class=\"fv-checkbox-label\">\r\n <input type=\"checkbox\" [formControl]=\"control\" [disabled]=\"disabled\" (change)=\"onChange($event)\"\r\n class=\"fv-checkbox-input\" />\r\n <span class=\"fv-checkbox-custom\"></span>\r\n <span class=\"fv-checkbox-text\">\r\n {{ label }}\r\n <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n </span>\r\n </label>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-checkbox-container{margin-bottom:12px}.fv-checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-checkbox-custom{position:absolute;left:0;top:0;height:18px;width:18px;background-color:#fff;border:1px solid #8CBBA8;border-radius:4px;transition:all .2s}.fv-checkbox-label:hover .fv-checkbox-custom{border-color:#3498db}.fv-checkbox-input:checked~.fv-checkbox-custom{background-color:#3498db;border-color:#3498db}.fv-checkbox-custom:after{content:\"\";position:absolute;display:none;left:5px;top:1px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.fv-checkbox-input:checked~.fv-checkbox-custom:after{display:block}.fv-checkbox-input:disabled~.fv-checkbox-custom{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-checkbox-text{font-size:14px;font-weight:600;color:#151d48}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}\n"] }]
|
|
593
|
+
args: [{ selector: 'fv-checkbox', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: "<div class=\"fv-checkbox-container\">\r\n <label class=\"fv-checkbox-label\">\r\n <input type=\"checkbox\" [formControl]=\"control\" [disabled]=\"disabled\" (change)=\"onChange($event)\"\r\n class=\"fv-checkbox-input\" />\r\n <span class=\"fv-checkbox-custom\"></span>\r\n <span class=\"fv-checkbox-text\">\r\n {{ label }}\r\n <span *ngIf=\"required\" class=\"fv-required-asterisk\">*</span>\r\n </span>\r\n </label>\r\n</div>", styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";*{font-family:Poppins,sans-serif}.fv-checkbox-container{margin-bottom:12px}.fv-checkbox-label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;position:relative;padding-left:32px;min-height:24px}.fv-checkbox-input{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.fv-checkbox-custom{position:absolute;left:0;top:0;height:18px;width:18px;background-color:#fff;border:1px solid #8CBBA8;border-radius:4px;transition:all .2s}.fv-checkbox-label:hover .fv-checkbox-custom{border-color:#3498db}.fv-checkbox-input:checked~.fv-checkbox-custom{background-color:#3498db;border-color:#3498db}.fv-checkbox-custom:after{content:\"\";position:absolute;display:none;left:5px;top:1px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.fv-checkbox-input:checked~.fv-checkbox-custom:after{display:block}.fv-checkbox-input:disabled:not(:checked)~.fv-checkbox-custom{background-color:#ecf0f1;cursor:not-allowed;opacity:.6}.fv-checkbox-input:disabled:checked~.fv-checkbox-custom{background-color:#3498db!important;opacity:.6;cursor:not-allowed}.fv-checkbox-text{font-size:14px;font-weight:600;color:#151d48}.fv-required-asterisk{color:#e74c3c;margin-left:4px;font-weight:700}\n"] }]
|
|
594
594
|
}], propDecorators: { label: [{
|
|
595
595
|
type: Input
|
|
596
596
|
}], control: [{
|
|
@@ -4734,7 +4734,6 @@ class QueryFormComponent {
|
|
|
4734
4734
|
onBack = new EventEmitter();
|
|
4735
4735
|
form;
|
|
4736
4736
|
showExportMenu = false;
|
|
4737
|
-
showValidationError = false;
|
|
4738
4737
|
subs = [];
|
|
4739
4738
|
constructor(fb) {
|
|
4740
4739
|
this.fb = fb;
|
|
@@ -4753,20 +4752,12 @@ class QueryFormComponent {
|
|
|
4753
4752
|
});
|
|
4754
4753
|
}
|
|
4755
4754
|
this.form = this.fb.group(group);
|
|
4756
|
-
//
|
|
4757
|
-
|
|
4758
|
-
|
|
4759
|
-
|
|
4760
|
-
|
|
4761
|
-
|
|
4762
|
-
// For simplicity, we can pass value[col.key] but strictly we should check diff.
|
|
4763
|
-
// However, simple approach:
|
|
4764
|
-
// This runs on every change, might be noisy but acceptable for now.
|
|
4765
|
-
// A better approach would be subscribing to individual controls if performance matters.
|
|
4766
|
-
}
|
|
4767
|
-
});
|
|
4768
|
-
});
|
|
4769
|
-
}));
|
|
4755
|
+
// No submit/view button: filter results automatically as soon as the
|
|
4756
|
+
// form becomes valid, and again whenever the user changes any field.
|
|
4757
|
+
this.subs.push(this.form.valueChanges
|
|
4758
|
+
.pipe(debounceTime(300), distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)))
|
|
4759
|
+
.subscribe(() => this.emitIfValid()));
|
|
4760
|
+
this.emitIfValid();
|
|
4770
4761
|
// Subscribe individually to support onChange
|
|
4771
4762
|
this.config.rows.forEach((row) => {
|
|
4772
4763
|
row.columns.forEach((col) => {
|
|
@@ -4879,15 +4870,10 @@ class QueryFormComponent {
|
|
|
4879
4870
|
this.onExport.emit(format);
|
|
4880
4871
|
this.showExportMenu = false;
|
|
4881
4872
|
}
|
|
4882
|
-
|
|
4873
|
+
emitIfValid() {
|
|
4883
4874
|
if (this.form.valid) {
|
|
4884
|
-
this.showValidationError = false;
|
|
4885
4875
|
this.onSubmit.emit(this.form.value);
|
|
4886
4876
|
}
|
|
4887
|
-
else {
|
|
4888
|
-
this.showValidationError = true;
|
|
4889
|
-
this.form.markAllAsTouched();
|
|
4890
|
-
}
|
|
4891
4877
|
}
|
|
4892
4878
|
onBackClick() {
|
|
4893
4879
|
this.onBack.emit();
|
|
@@ -4930,12 +4916,6 @@ class QueryFormComponent {
|
|
|
4930
4916
|
</div>
|
|
4931
4917
|
</div>
|
|
4932
4918
|
</div>
|
|
4933
|
-
|
|
4934
|
-
<!-- Validation Error Message -->
|
|
4935
|
-
<div *ngIf="showValidationError" class="validation-message">
|
|
4936
|
-
<i class="material-icons">error</i>
|
|
4937
|
-
Please fill all required fields
|
|
4938
|
-
</div>
|
|
4939
4919
|
|
|
4940
4920
|
<div class="form-content">
|
|
4941
4921
|
<form [formGroup]="form">
|
|
@@ -5074,17 +5054,8 @@ class QueryFormComponent {
|
|
|
5074
5054
|
</div>
|
|
5075
5055
|
|
|
5076
5056
|
<!-- Buttons Row -->
|
|
5077
|
-
<div class="button-row">
|
|
5057
|
+
<div class="button-row" *ngIf="config.showBackButton">
|
|
5078
5058
|
<button
|
|
5079
|
-
type="button"
|
|
5080
|
-
class="view-button"
|
|
5081
|
-
(click)="onButtonClick()"
|
|
5082
|
-
[attr.title]="config.buttonText || 'View'"
|
|
5083
|
-
>
|
|
5084
|
-
{{ config.buttonText || 'View' }}
|
|
5085
|
-
</button>
|
|
5086
|
-
<button
|
|
5087
|
-
*ngIf="config.showBackButton"
|
|
5088
5059
|
type="button"
|
|
5089
5060
|
class="back-button"
|
|
5090
5061
|
(click)="onBackClick()"
|
|
@@ -5096,7 +5067,7 @@ class QueryFormComponent {
|
|
|
5096
5067
|
</form>
|
|
5097
5068
|
</div>
|
|
5098
5069
|
</div>
|
|
5099
|
-
`, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:
|
|
5070
|
+
`, isInline: true, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.export-buttons{display:flex;gap:10px}.export-btn{cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .3s ease;border:none;padding:8px 16px;border-radius:7px;background:#006aff;color:#fff}.export-btn:hover{background:#0045a6;box-shadow:0 4px 8px #00000026}.export-menu-container{position:relative;border-radius:7px}.export-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;margin-top:5px;min-width:180px;z-index:1000}.menu-item{width:100%;color:#000;text-align:left;background:#fff;border:none;cursor:pointer;font-size:14px;transition:background .2s;padding:12px 16px;display:flex;align-items:center;gap:10px}.menu-item:hover{background:#f5f5f5}.query-form-container{background:#f2f2f2;border-radius:8px;padding:4px 8px 6px;margin:auto;box-shadow:0 2px 5px #0000001a;margin-bottom:.5rem;overflow:visible}.form-title{font-size:16px;font-weight:700;color:#303030;margin:0;font-family:Poppins}.form-content{display:flex;flex-direction:column;gap:4px;background-color:#fff;padding:6px 8px;border:.5px solid #cfcfcf;border-radius:10px;overflow:visible}.form-row{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:visible;padding-bottom:2px}.form-field{display:flex;flex-direction:column;flex:1 1 150px;min-width:150px;position:relative;overflow:visible;box-sizing:border-box}.button-row{display:flex;justify-content:flex-end;gap:12px;padding-top:4px;margin-top:2px}.back-button{padding:8px 20px;background-color:#303030;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s}.back-button:hover{background-color:#2b2b2b}@media (max-width: 768px){.form-row{gap:6px}.form-field{flex-basis:130px;min-width:130px}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FvEntryFieldComponent, selector: "fv-entry-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "type", "allowAlphabetsOnly", "maxLength"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDropdownComponent, selector: "fv-dropdown", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvNumberFieldComponent, selector: "fv-number-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly", "min", "max", "step"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvDateFieldComponent, selector: "fv-date-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvMonthYearFieldComponent, selector: "fv-month-year-field", inputs: ["label", "schema", "control", "disabled", "readonly", "min", "max"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvFileSelectorComponent, selector: "fv-file-selector", inputs: ["label", "placeholder", "schema", "control", "disabled", "accept", "maxSize"], outputs: ["valueChange", "blur"] }, { kind: "component", type: FvNameCodeComponent, selector: "fv-name-code", inputs: ["label", "placeholder", "options", "schema", "control", "disabled"], outputs: ["valueChange"] }, { kind: "component", type: FvPhoneFieldComponent, selector: "fv-phone-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvUanFieldComponent, selector: "fv-uan-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvPfFieldComponent, selector: "fv-pf-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEsiFieldComponent, selector: "fv-esi-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIfscFieldComponent, selector: "fv-ifsc-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvMicrFieldComponent, selector: "fv-micr-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvIbanFieldComponent, selector: "fv-iban-field", inputs: ["label", "control", "disabled", "schema"], outputs: ["blur", "focus"] }, { kind: "component", type: FvEmailFieldComponent, selector: "fv-email-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvPasswordFieldComponent, selector: "fv-password-field", inputs: ["label", "placeholder", "schema", "control", "disabled", "readonly"], outputs: ["valueChange", "blur", "focus"] }, { kind: "component", type: FvToggleComponent, selector: "fv-toggle", inputs: ["label", "control", "disabled", "required"], outputs: ["valueChange"] }] });
|
|
5100
5071
|
}
|
|
5101
5072
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: QueryFormComponent, decorators: [{
|
|
5102
5073
|
type: Component,
|
|
@@ -5157,12 +5128,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
5157
5128
|
</div>
|
|
5158
5129
|
</div>
|
|
5159
5130
|
</div>
|
|
5160
|
-
|
|
5161
|
-
<!-- Validation Error Message -->
|
|
5162
|
-
<div *ngIf="showValidationError" class="validation-message">
|
|
5163
|
-
<i class="material-icons">error</i>
|
|
5164
|
-
Please fill all required fields
|
|
5165
|
-
</div>
|
|
5166
5131
|
|
|
5167
5132
|
<div class="form-content">
|
|
5168
5133
|
<form [formGroup]="form">
|
|
@@ -5301,17 +5266,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
5301
5266
|
</div>
|
|
5302
5267
|
|
|
5303
5268
|
<!-- Buttons Row -->
|
|
5304
|
-
<div class="button-row">
|
|
5305
|
-
<button
|
|
5306
|
-
type="button"
|
|
5307
|
-
class="view-button"
|
|
5308
|
-
(click)="onButtonClick()"
|
|
5309
|
-
[attr.title]="config.buttonText || 'View'"
|
|
5310
|
-
>
|
|
5311
|
-
{{ config.buttonText || 'View' }}
|
|
5312
|
-
</button>
|
|
5269
|
+
<div class="button-row" *ngIf="config.showBackButton">
|
|
5313
5270
|
<button
|
|
5314
|
-
*ngIf="config.showBackButton"
|
|
5315
5271
|
type="button"
|
|
5316
5272
|
class="back-button"
|
|
5317
5273
|
(click)="onBackClick()"
|
|
@@ -5323,7 +5279,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
5323
5279
|
</form>
|
|
5324
5280
|
</div>
|
|
5325
5281
|
</div>
|
|
5326
|
-
`, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:
|
|
5282
|
+
`, styles: ["@import\"https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap\";@import\"https://fonts.googleapis.com/icon?family=Material+Icons\";*{font-family:Poppins}.material-icons{font-family:Material Icons!important;font-size:22px;display:inline-block}.cont{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}.export-buttons{display:flex;gap:10px}.export-btn{cursor:pointer;display:flex;align-items:center;gap:5px;transition:all .3s ease;border:none;padding:8px 16px;border-radius:7px;background:#006aff;color:#fff}.export-btn:hover{background:#0045a6;box-shadow:0 4px 8px #00000026}.export-menu-container{position:relative;border-radius:7px}.export-menu{position:absolute;top:100%;right:0;background:#fff;border-radius:4px;box-shadow:0 4px 12px #00000026;margin-top:5px;min-width:180px;z-index:1000}.menu-item{width:100%;color:#000;text-align:left;background:#fff;border:none;cursor:pointer;font-size:14px;transition:background .2s;padding:12px 16px;display:flex;align-items:center;gap:10px}.menu-item:hover{background:#f5f5f5}.query-form-container{background:#f2f2f2;border-radius:8px;padding:4px 8px 6px;margin:auto;box-shadow:0 2px 5px #0000001a;margin-bottom:.5rem;overflow:visible}.form-title{font-size:16px;font-weight:700;color:#303030;margin:0;font-family:Poppins}.form-content{display:flex;flex-direction:column;gap:4px;background-color:#fff;padding:6px 8px;border:.5px solid #cfcfcf;border-radius:10px;overflow:visible}.form-row{display:flex;flex-wrap:nowrap;align-items:flex-start;gap:8px;width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:visible;padding-bottom:2px}.form-field{display:flex;flex-direction:column;flex:1 1 150px;min-width:150px;position:relative;overflow:visible;box-sizing:border-box}.button-row{display:flex;justify-content:flex-end;gap:12px;padding-top:4px;margin-top:2px}.back-button{padding:8px 20px;background-color:#303030;color:#fff;border:none;border-radius:7px;font-size:12px;font-weight:600;cursor:pointer;transition:background-color .2s}.back-button:hover{background-color:#2b2b2b}@media (max-width: 768px){.form-row{gap:6px}.form-field{flex-basis:130px;min-width:130px}}\n"] }]
|
|
5327
5283
|
}], ctorParameters: () => [{ type: i2.FormBuilder }], propDecorators: { config: [{
|
|
5328
5284
|
type: Input
|
|
5329
5285
|
}], onSubmit: [{
|