@sachin9822/reports-lib 0.0.136 → 0.0.138

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.
Files changed (6) hide show
  1. package/esm2020/lib/shared/search-filter/search-filter.component.mjs +3 -3
  2. package/fesm2015/sachin9822-reports-lib.mjs +2 -2
  3. package/fesm2015/sachin9822-reports-lib.mjs.map +1 -1
  4. package/fesm2020/sachin9822-reports-lib.mjs +2 -2
  5. package/fesm2020/sachin9822-reports-lib.mjs.map +1 -1
  6. package/package.json +1 -1
package/fesm2015/sachin9822-reports-lib.mjs CHANGED
@@ -877,10 +877,10 @@ class SearchFilterComponent {
877
877
  }
878
878
  }
879
879
  SearchFilterComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchFilterComponent, deps: [{ token: ReportService }, { token: i2.FormBuilder }, { token: ConfigService }], target: i0.ɵɵFactoryTarget.Component });
880
- SearchFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchFilterComponent, selector: "lib-search-filter", inputs: { ReportName: "ReportName" }, outputs: { searchClicked: "searchClicked" }, ngImport: i0, template: "<h6 class=\"Breadcrumb\">\r\n <a class=\"BreadCrumbLink\" [routerLink]=\"['/reports']\">\r\n <h1>Reports</h1>\r\n </a>\r\n <a href=\"BreadCrumbLink\"></a>\r\n <span class=\"BreadCrumbArrow\"></span>\r\n <a class=\"BreadCrumbLink\">\r\n <h2>{{ ReportName }}</h2>\r\n </a>\r\n</h6>\r\n\r\n<app-loader *ngIf=\"loadingState === ComponentLoadingState.Loading\"></app-loader>\r\n\r\n<section class=\"filter-section\">\r\n <form [formGroup]=\"searchForm\" (ngSubmit)=\"onSearch()\" class=\"report-filter-form\">\r\n <div class=\"row\">\r\n <div class=\"col-custom-10-5\">\r\n <div class=\"grid-container\">\r\n <div class=\"filter-grid\">\r\n\r\n <!-- Dynamically render filters in order -->\r\n <ng-container *ngFor=\"let field of visibleFields\">\r\n <ng-container [ngSwitch]=\"field\">\r\n\r\n <!-- Client -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'client'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Client<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"clients1\" bindLabel=\"businessPartnerName\" bindValue=\"businessPartnerCode\"\r\n placeholder=\"Select Client\" [clearable]=\"false\" formControlName=\"client\" required\r\n (change)=\"onClientChange()\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Branch -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'branch'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Branch<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"branches\" bindLabel=\"businessPartnerBranch\" bindValue=\"branchCode\"\r\n placeholder=\"Select Branch\" [clearable]=\"false\" formControlName=\"branch\" required\r\n (change)=\"onBranchChange()\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- From Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'fromDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">From Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #fromDateInput=\"ngbDatepicker\" formControlName=\"fromDate\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"fromDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- To Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'toDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">To Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Product -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'product'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Product</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"products\" bindLabel=\"productName\" bindValue=\"productCode\"\r\n placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- User -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'userId'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">User<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"users\" bindLabel=\"userName\" bindValue=\"userId\" placeholder=\"Select User\"\r\n [clearable]=\"false\" formControlName=\"userId\" required>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Currency -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'currency'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Currency</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"currencies\" bindLabel=\"currencyCode\" bindValue=\"currencyCode\"\r\n placeholder=\"Select Currency\" [clearable]=\"false\" formControlName=\"currency\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Transaction Status (Multi-select) -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'transactionStatus'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Trans. Status<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select class=\"transaction-status-select\" [items]=\"transactionStatuses\"\r\n bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\" [multiple]=\"true\"\r\n placeholder=\"Select Transaction Status\" formControlName=\"transactionStatus\"\r\n [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\" required>\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.transactionStatus }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Transaction No -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'transactionNo'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Trans. Number</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <input class=\"form-control dpicker\" formControlName=\"transactionNo\"\r\n placeholder=\"Enter transaction number\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Value Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'valueDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-3\">\r\n <label class=\"form-label label-data\">Value Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-9\">\r\n <div class=\"input-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\" />\r\n <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toDateInput.toggle()\">\r\n <i class=\"fa fa-calendar\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Date Type -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'dateType'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Date Type</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select placeholder=\"- Please select -\" formControlName=\"dateType\" [clearable]=\"false\"\r\n required>\r\n <ng-option [value]=\"1\">\r\n Value Date\r\n </ng-option>\r\n <ng-option [value]=\"2\">\r\n Posting Date\r\n </ng-option>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'date'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Date</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"date\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-custom-1-5\">\r\n <!-- View Report Button (Always at Top-Right) -->\r\n <div class=\"form-field view-report-btn\">\r\n <button type=\"submit\" class=\"btn btn-report\">View</button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</section>\r\n<hr>\r\n<!-- Error Messages -->\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"formValidationError && hasSearched\">\r\n Please fill all required fields before submitting the form.\r\n</div>\r\n\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"errorMessage && loadingState === ComponentLoadingState.Error\">\r\n {{ errorMessage }}\r\n <button type=\"button\" class=\"btn-close\" (click)=\"errorMessage = ''\"></button>\r\n</div>", styles: ["@charset \"UTF-8\";.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-column:span 3}.form-field{display:flex;flex-direction:column;padding:0 4px 0 0!important;min-width:0}.col-custom-10-5{flex:0 0 87.5%!important;max-width:87.5%!important}.col-custom-1-5{flex:0 0 12.5%!important;max-width:12.5%!important}::ng-deep .ng-select .ng-select-container .ng-value-container{overflow:hidden;flex-wrap:nowrap}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}::ng-deep .ng-select .ng-select-container{height:32px!important;min-height:32px!important;font-size:12px!important;align-items:center}.form-label{margin-bottom:0!important}.date-group{height:32px!important}::ng-deep .transaction-status-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:4px 0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}::ng-deep .ng-dropdown-panel .ng-option{font-size:12px}.btn-report{border-radius:4px;background-color:#8091a5;color:#fff!important;font-size:14px!important;height:32px;padding:4px 15px!important;margin-left:10px!important}::ng-deep .ng-select .ng-select-container:focus-within{box-shadow:0 0 5px 3px #1877f2!important}::ng-deep .ng-select .ng-select-container:focus{box-shadow:0 0 5px 3px #1877f2!important}.fa-calendar{--fa: \"\\f073\" !important}.dpicker{border:1px solid #ccc!important;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"!important;font-size:12px!important;font-weight:400!important;height:32px!important}.dpicker:focus{box-shadow:0 0 5px 3px #1877f2!important}.cal{height:32px!important;background-color:#1877f2;margin-left:0!important}.cal:focus{box-shadow:none!important}.label-data{font-weight:600!important;font-size:.7rem!important;line-height:1rem}@media (max-width: 768px){.filter-grid{grid-template-columns:1fr;gap:12px}}\n"], dependencies: [{ kind: "directive", type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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: i7.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i7.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i7.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
880
+ SearchFilterComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: SearchFilterComponent, selector: "lib-search-filter", inputs: { ReportName: "ReportName" }, outputs: { searchClicked: "searchClicked" }, ngImport: i0, template: "<div style=\"display: flex; flex-direction: column;\" >\r\n\r\n<h6 class=\"Breadcrumb\">\r\n <a class=\"BreadCrumbLink\" [routerLink]=\"['/reports']\">\r\n <h1>Reports</h1>\r\n </a>\r\n <a href=\"BreadCrumbLink\"></a>\r\n <span class=\"BreadCrumbArrow\"></span>\r\n <a class=\"BreadCrumbLink\">\r\n <h2>{{ ReportName }}</h2>\r\n </a>\r\n</h6>\r\n\r\n<app-loader *ngIf=\"loadingState === ComponentLoadingState.Loading\"></app-loader>\r\n\r\n<section class=\"filter-section\">\r\n <form [formGroup]=\"searchForm\" (ngSubmit)=\"onSearch()\" class=\"report-filter-form\">\r\n <div class=\"row\">\r\n <div class=\"col-custom-10-5\">\r\n <div class=\"grid-container\">\r\n <div class=\"filter-grid\">\r\n\r\n <!-- Dynamically render filters in order -->\r\n <ng-container *ngFor=\"let field of visibleFields\">\r\n <ng-container [ngSwitch]=\"field\">\r\n\r\n <!-- Client -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'client'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Client<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"clients1\" bindLabel=\"businessPartnerName\" bindValue=\"businessPartnerCode\"\r\n placeholder=\"Select Client\" [clearable]=\"false\" formControlName=\"client\" required\r\n (change)=\"onClientChange()\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Branch -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'branch'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Branch<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"branches\" bindLabel=\"businessPartnerBranch\" bindValue=\"branchCode\"\r\n placeholder=\"Select Branch\" [clearable]=\"false\" formControlName=\"branch\" required\r\n (change)=\"onBranchChange()\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- From Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'fromDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">From Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #fromDateInput=\"ngbDatepicker\" formControlName=\"fromDate\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"fromDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- To Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'toDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">To Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Product -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'product'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Product</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"products\" bindLabel=\"productName\" bindValue=\"productCode\"\r\n placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- User -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'userId'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">User<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"users\" bindLabel=\"userName\" bindValue=\"userId\" placeholder=\"Select User\"\r\n [clearable]=\"false\" formControlName=\"userId\" required>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Currency -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'currency'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Currency</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"currencies\" bindLabel=\"currencyCode\" bindValue=\"currencyCode\"\r\n placeholder=\"Select Currency\" [clearable]=\"false\" formControlName=\"currency\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Transaction Status (Multi-select) -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'transactionStatus'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Trans. Status<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select class=\"transaction-status-select\" [items]=\"transactionStatuses\"\r\n bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\" [multiple]=\"true\"\r\n placeholder=\"Select Transaction Status\" formControlName=\"transactionStatus\"\r\n [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\" required>\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.transactionStatus }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Transaction No -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'transactionNo'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Trans. Number</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <input class=\"form-control dpicker\" formControlName=\"transactionNo\"\r\n placeholder=\"Enter transaction number\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Value Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'valueDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-3\">\r\n <label class=\"form-label label-data\">Value Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-9\">\r\n <div class=\"input-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\" />\r\n <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toDateInput.toggle()\">\r\n <i class=\"fa fa-calendar\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Date Type -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'dateType'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Date Type</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select placeholder=\"- Please select -\" formControlName=\"dateType\" [clearable]=\"false\"\r\n required>\r\n <ng-option [value]=\"1\">\r\n Value Date\r\n </ng-option>\r\n <ng-option [value]=\"2\">\r\n Posting Date\r\n </ng-option>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'date'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Date</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"date\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-custom-1-5\">\r\n <!-- View Report Button (Always at Top-Right) -->\r\n <div class=\"form-field view-report-btn\">\r\n <button type=\"submit\" class=\"btn btn-report\">View</button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</section>\r\n<hr>\r\n<!-- Error Messages -->\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"formValidationError && hasSearched\">\r\n Please fill all required fields before submitting the form.\r\n</div>\r\n\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"errorMessage && loadingState === ComponentLoadingState.Error\">\r\n {{ errorMessage }}\r\n <button type=\"button\" class=\"btn-close\" (click)=\"errorMessage = ''\"></button>\r\n</div>\r\n</div>", styles: ["@charset \"UTF-8\";.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-column:span 3}.form-field{display:flex;flex-direction:column;padding:0 4px 0 0!important;min-width:0}.col-custom-10-5{flex:0 0 87.5%!important;max-width:87.5%!important}.col-custom-1-5{flex:0 0 12.5%!important;max-width:12.5%!important}::ng-deep .ng-select .ng-select-container .ng-value-container{overflow:hidden;flex-wrap:nowrap}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}::ng-deep .ng-select .ng-select-container{height:32px!important;min-height:32px!important;font-size:12px!important;align-items:center}.form-label{margin-bottom:0!important}.date-group{height:32px!important}::ng-deep .transaction-status-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:4px 0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}::ng-deep .ng-dropdown-panel .ng-option{font-size:12px}.btn-report{border-radius:4px;background-color:#8091a5;color:#fff!important;font-size:14px!important;height:32px;padding:4px 15px!important;margin-left:10px!important}::ng-deep .ng-select .ng-select-container:focus-within{box-shadow:0 0 5px 3px #1877f2!important}::ng-deep .ng-select .ng-select-container:focus{box-shadow:0 0 5px 3px #1877f2!important}.fa-calendar{--fa: \"\\f073\" !important}.dpicker{border:1px solid #ccc!important;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"!important;font-size:12px!important;font-weight:400!important;height:32px!important}.dpicker:focus{box-shadow:0 0 5px 3px #1877f2!important}.cal{height:32px!important;background-color:#1877f2;margin-left:0!important}.cal:focus{box-shadow:none!important}.label-data{font-weight:600!important;font-size:.7rem!important;line-height:1rem}@media (max-width: 768px){.filter-grid{grid-template-columns:1fr;gap:12px}}.input-group-button{background:none!important;border:1px solid #1877F2!important;background-color:#1877f2!important;border-radius:0 3px 3px 0!important;min-width:35px;margin-left:1px;height:32px!important;cursor:pointer}.input-group-button .fa{color:#fff}.input-group-button:focus{box-shadow:0 0 5px 3px #009ee054}.input-group-button:focus{outline:none!important;box-shadow:none!important}\n"], dependencies: [{ kind: "directive", type: i4.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { 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: i7.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "component", type: i7.NgOptionComponent, selector: "ng-option", inputs: ["value", "disabled"] }, { kind: "directive", type: i7.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "component", type: LoaderComponent, selector: "app-loader" }] });
881
881
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: SearchFilterComponent, decorators: [{
882
882
  type: Component,
883
- args: [{ selector: 'lib-search-filter', template: "<h6 class=\"Breadcrumb\">\r\n <a class=\"BreadCrumbLink\" [routerLink]=\"['/reports']\">\r\n <h1>Reports</h1>\r\n </a>\r\n <a href=\"BreadCrumbLink\"></a>\r\n <span class=\"BreadCrumbArrow\"></span>\r\n <a class=\"BreadCrumbLink\">\r\n <h2>{{ ReportName }}</h2>\r\n </a>\r\n</h6>\r\n\r\n<app-loader *ngIf=\"loadingState === ComponentLoadingState.Loading\"></app-loader>\r\n\r\n<section class=\"filter-section\">\r\n <form [formGroup]=\"searchForm\" (ngSubmit)=\"onSearch()\" class=\"report-filter-form\">\r\n <div class=\"row\">\r\n <div class=\"col-custom-10-5\">\r\n <div class=\"grid-container\">\r\n <div class=\"filter-grid\">\r\n\r\n <!-- Dynamically render filters in order -->\r\n <ng-container *ngFor=\"let field of visibleFields\">\r\n <ng-container [ngSwitch]=\"field\">\r\n\r\n <!-- Client -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'client'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Client<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"clients1\" bindLabel=\"businessPartnerName\" bindValue=\"businessPartnerCode\"\r\n placeholder=\"Select Client\" [clearable]=\"false\" formControlName=\"client\" required\r\n (change)=\"onClientChange()\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Branch -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'branch'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Branch<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"branches\" bindLabel=\"businessPartnerBranch\" bindValue=\"branchCode\"\r\n placeholder=\"Select Branch\" [clearable]=\"false\" formControlName=\"branch\" required\r\n (change)=\"onBranchChange()\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- From Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'fromDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">From Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #fromDateInput=\"ngbDatepicker\" formControlName=\"fromDate\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"fromDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- To Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'toDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">To Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Product -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'product'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Product</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"products\" bindLabel=\"productName\" bindValue=\"productCode\"\r\n placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- User -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'userId'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">User<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"users\" bindLabel=\"userName\" bindValue=\"userId\" placeholder=\"Select User\"\r\n [clearable]=\"false\" formControlName=\"userId\" required>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Currency -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'currency'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Currency</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"currencies\" bindLabel=\"currencyCode\" bindValue=\"currencyCode\"\r\n placeholder=\"Select Currency\" [clearable]=\"false\" formControlName=\"currency\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Transaction Status (Multi-select) -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'transactionStatus'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Trans. Status<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select class=\"transaction-status-select\" [items]=\"transactionStatuses\"\r\n bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\" [multiple]=\"true\"\r\n placeholder=\"Select Transaction Status\" formControlName=\"transactionStatus\"\r\n [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\" required>\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.transactionStatus }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Transaction No -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'transactionNo'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Trans. Number</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <input class=\"form-control dpicker\" formControlName=\"transactionNo\"\r\n placeholder=\"Enter transaction number\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Value Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'valueDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-3\">\r\n <label class=\"form-label label-data\">Value Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-9\">\r\n <div class=\"input-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\" />\r\n <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toDateInput.toggle()\">\r\n <i class=\"fa fa-calendar\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Date Type -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'dateType'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Date Type</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select placeholder=\"- Please select -\" formControlName=\"dateType\" [clearable]=\"false\"\r\n required>\r\n <ng-option [value]=\"1\">\r\n Value Date\r\n </ng-option>\r\n <ng-option [value]=\"2\">\r\n Posting Date\r\n </ng-option>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'date'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Date</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"date\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-custom-1-5\">\r\n <!-- View Report Button (Always at Top-Right) -->\r\n <div class=\"form-field view-report-btn\">\r\n <button type=\"submit\" class=\"btn btn-report\">View</button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</section>\r\n<hr>\r\n<!-- Error Messages -->\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"formValidationError && hasSearched\">\r\n Please fill all required fields before submitting the form.\r\n</div>\r\n\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"errorMessage && loadingState === ComponentLoadingState.Error\">\r\n {{ errorMessage }}\r\n <button type=\"button\" class=\"btn-close\" (click)=\"errorMessage = ''\"></button>\r\n</div>", styles: ["@charset \"UTF-8\";.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-column:span 3}.form-field{display:flex;flex-direction:column;padding:0 4px 0 0!important;min-width:0}.col-custom-10-5{flex:0 0 87.5%!important;max-width:87.5%!important}.col-custom-1-5{flex:0 0 12.5%!important;max-width:12.5%!important}::ng-deep .ng-select .ng-select-container .ng-value-container{overflow:hidden;flex-wrap:nowrap}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}::ng-deep .ng-select .ng-select-container{height:32px!important;min-height:32px!important;font-size:12px!important;align-items:center}.form-label{margin-bottom:0!important}.date-group{height:32px!important}::ng-deep .transaction-status-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:4px 0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}::ng-deep .ng-dropdown-panel .ng-option{font-size:12px}.btn-report{border-radius:4px;background-color:#8091a5;color:#fff!important;font-size:14px!important;height:32px;padding:4px 15px!important;margin-left:10px!important}::ng-deep .ng-select .ng-select-container:focus-within{box-shadow:0 0 5px 3px #1877f2!important}::ng-deep .ng-select .ng-select-container:focus{box-shadow:0 0 5px 3px #1877f2!important}.fa-calendar{--fa: \"\\f073\" !important}.dpicker{border:1px solid #ccc!important;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"!important;font-size:12px!important;font-weight:400!important;height:32px!important}.dpicker:focus{box-shadow:0 0 5px 3px #1877f2!important}.cal{height:32px!important;background-color:#1877f2;margin-left:0!important}.cal:focus{box-shadow:none!important}.label-data{font-weight:600!important;font-size:.7rem!important;line-height:1rem}@media (max-width: 768px){.filter-grid{grid-template-columns:1fr;gap:12px}}\n"] }]
883
+ args: [{ selector: 'lib-search-filter', template: "<div style=\"display: flex; flex-direction: column;\" >\r\n\r\n<h6 class=\"Breadcrumb\">\r\n <a class=\"BreadCrumbLink\" [routerLink]=\"['/reports']\">\r\n <h1>Reports</h1>\r\n </a>\r\n <a href=\"BreadCrumbLink\"></a>\r\n <span class=\"BreadCrumbArrow\"></span>\r\n <a class=\"BreadCrumbLink\">\r\n <h2>{{ ReportName }}</h2>\r\n </a>\r\n</h6>\r\n\r\n<app-loader *ngIf=\"loadingState === ComponentLoadingState.Loading\"></app-loader>\r\n\r\n<section class=\"filter-section\">\r\n <form [formGroup]=\"searchForm\" (ngSubmit)=\"onSearch()\" class=\"report-filter-form\">\r\n <div class=\"row\">\r\n <div class=\"col-custom-10-5\">\r\n <div class=\"grid-container\">\r\n <div class=\"filter-grid\">\r\n\r\n <!-- Dynamically render filters in order -->\r\n <ng-container *ngFor=\"let field of visibleFields\">\r\n <ng-container [ngSwitch]=\"field\">\r\n\r\n <!-- Client -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'client'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Client<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"clients1\" bindLabel=\"businessPartnerName\" bindValue=\"businessPartnerCode\"\r\n placeholder=\"Select Client\" [clearable]=\"false\" formControlName=\"client\" required\r\n (change)=\"onClientChange()\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Branch -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'branch'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Branch<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"branches\" bindLabel=\"businessPartnerBranch\" bindValue=\"branchCode\"\r\n placeholder=\"Select Branch\" [clearable]=\"false\" formControlName=\"branch\" required\r\n (change)=\"onBranchChange()\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- From Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'fromDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">From Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #fromDateInput=\"ngbDatepicker\" formControlName=\"fromDate\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"fromDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- To Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'toDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">To Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Product -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'product'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Product</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"products\" bindLabel=\"productName\" bindValue=\"productCode\"\r\n placeholder=\"Select Product\" [clearable]=\"false\" formControlName=\"product\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- User -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'userId'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">User<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"users\" bindLabel=\"userName\" bindValue=\"userId\" placeholder=\"Select User\"\r\n [clearable]=\"false\" formControlName=\"userId\" required>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Currency -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'currency'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Currency</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select [items]=\"currencies\" bindLabel=\"currencyCode\" bindValue=\"currencyCode\"\r\n placeholder=\"Select Currency\" [clearable]=\"false\" formControlName=\"currency\">\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Transaction Status (Multi-select) -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'transactionStatus'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Trans. Status<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select class=\"transaction-status-select\" [items]=\"transactionStatuses\"\r\n bindLabel=\"transactionStatus\" bindValue=\"transactionStatus\" [multiple]=\"true\"\r\n placeholder=\"Select Transaction Status\" formControlName=\"transactionStatus\"\r\n [closeOnSelect]=\"false\" [clearable]=\"false\" [searchable]=\"false\" required>\r\n <ng-template ng-option-tmp let-item=\"item\" let-item$=\"item$\">\r\n <input type=\"checkbox\" [checked]=\"item$.selected\" /> {{ item.transactionStatus }}\r\n </ng-template>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Transaction No -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'transactionNo'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Trans. Number</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <input class=\"form-control dpicker\" formControlName=\"transactionNo\"\r\n placeholder=\"Enter transaction number\" />\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Value Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'valueDate'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-3\">\r\n <label class=\"form-label label-data\">Value Date<span class=\"text-danger\">*</span></label>\r\n </div>\r\n <div class=\"col-9\">\r\n <div class=\"input-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"toDate\" autocomplete=\"off\" />\r\n <button class=\"btn btn-outline-secondary\" type=\"button\" (click)=\"toDateInput.toggle()\">\r\n <i class=\"fa fa-calendar\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Date Type -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'dateType'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Date Type</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <ng-select placeholder=\"- Please select -\" formControlName=\"dateType\" [clearable]=\"false\"\r\n required>\r\n <ng-option [value]=\"1\">\r\n Value Date\r\n </ng-option>\r\n <ng-option [value]=\"2\">\r\n Posting Date\r\n </ng-option>\r\n </ng-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Date -->\r\n <div class=\"form-field\" *ngSwitchCase=\"'date'\">\r\n <div class=\"row align-items-center\">\r\n <div class=\"col-2\">\r\n <label class=\"form-label label-data\">Date</label>\r\n </div>\r\n <div class=\"col-10\">\r\n <div class=\"input-group date-group\">\r\n <input class=\"form-control dpicker\" placeholder=\"dd/mm/yyyy\" ngbDatepicker\r\n #toDateInput=\"ngbDatepicker\" formControlName=\"date\" autocomplete=\"off\" />\r\n <button class=\"input-group-button cal\" (click)=\"toDateInput.toggle()\" type=\"button\">\r\n <i class=\"fa fa-calendar\" aria-hidden=\"true\"></i>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </ng-container>\r\n </ng-container>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-custom-1-5\">\r\n <!-- View Report Button (Always at Top-Right) -->\r\n <div class=\"form-field view-report-btn\">\r\n <button type=\"submit\" class=\"btn btn-report\">View</button>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</section>\r\n<hr>\r\n<!-- Error Messages -->\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"formValidationError && hasSearched\">\r\n Please fill all required fields before submitting the form.\r\n</div>\r\n\r\n<div class=\"alert alert-danger mt-3\" *ngIf=\"errorMessage && loadingState === ComponentLoadingState.Error\">\r\n {{ errorMessage }}\r\n <button type=\"button\" class=\"btn-close\" (click)=\"errorMessage = ''\"></button>\r\n</div>\r\n</div>", styles: ["@charset \"UTF-8\";.filter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;grid-column:span 3}.form-field{display:flex;flex-direction:column;padding:0 4px 0 0!important;min-width:0}.col-custom-10-5{flex:0 0 87.5%!important;max-width:87.5%!important}.col-custom-1-5{flex:0 0 12.5%!important;max-width:12.5%!important}::ng-deep .ng-select .ng-select-container .ng-value-container{overflow:hidden;flex-wrap:nowrap}::ng-deep .ng-select .ng-select-container .ng-value-container .ng-value{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}::ng-deep .ng-select .ng-select-container{height:32px!important;min-height:32px!important;font-size:12px!important;align-items:center}.form-label{margin-bottom:0!important}.date-group{height:32px!important}::ng-deep .transaction-status-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option{padding:4px 0!important}::ng-deep .ng-select .ng-select-container .ng-value-container{padding-top:0}::ng-deep .ng-dropdown-panel .ng-option{font-size:12px}.btn-report{border-radius:4px;background-color:#8091a5;color:#fff!important;font-size:14px!important;height:32px;padding:4px 15px!important;margin-left:10px!important}::ng-deep .ng-select .ng-select-container:focus-within{box-shadow:0 0 5px 3px #1877f2!important}::ng-deep .ng-select .ng-select-container:focus{box-shadow:0 0 5px 3px #1877f2!important}.fa-calendar{--fa: \"\\f073\" !important}.dpicker{border:1px solid #ccc!important;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"!important;font-size:12px!important;font-weight:400!important;height:32px!important}.dpicker:focus{box-shadow:0 0 5px 3px #1877f2!important}.cal{height:32px!important;background-color:#1877f2;margin-left:0!important}.cal:focus{box-shadow:none!important}.label-data{font-weight:600!important;font-size:.7rem!important;line-height:1rem}@media (max-width: 768px){.filter-grid{grid-template-columns:1fr;gap:12px}}.input-group-button{background:none!important;border:1px solid #1877F2!important;background-color:#1877f2!important;border-radius:0 3px 3px 0!important;min-width:35px;margin-left:1px;height:32px!important;cursor:pointer}.input-group-button .fa{color:#fff}.input-group-button:focus{box-shadow:0 0 5px 3px #009ee054}.input-group-button:focus{outline:none!important;box-shadow:none!important}\n"] }]
884
884
  }], ctorParameters: function () { return [{ type: ReportService }, { type: i2.FormBuilder }, { type: ConfigService }]; }, propDecorators: { ReportName: [{
885
885
  type: Input
886
886
  }], searchClicked: [{