@pongrass/utils 0.0.1-v20 → 0.0.2-v20

package/fesm2022/pongrass-utils.mjs

@@ -1,26 +1,35 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, Component, ViewChild, inject, EventEmitter, Input, Output, ElementRef, HostListener, Directive, Renderer2, NgModule } from '@angular/core';
+import { signal, Injectable, Component, ViewChild, inject, EventEmitter, Input, Output, ElementRef, HostListener, Directive, Renderer2, NgModule, effect } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
-import * as i1 from '@angular/forms';
+import * as i3 from '@angular/forms';
 import { FormsModule, NgControl, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i4 from '@coreui/angular-pro';
-import { FormModule, ButtonModule, MultiSelectModule, MultiSelectComponent, InputGroupComponent, DatePickerModule, ModalModule, TooltipModule } from '@coreui/angular-pro';
+import * as i2$1 from '@coreui/angular-pro';
+import { FormModule, ButtonModule, MultiSelectModule, MultiSelectComponent, InputGroupComponent, DatePickerModule, ModalModule, TooltipModule, OffcanvasModule } from '@coreui/angular-pro';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { lastValueFrom } from 'rxjs';
+import { lastValueFrom, map, Subject } from 'rxjs';
 import * as i5 from '@coreui/icons-angular';
 import { IconModule } from '@coreui/icons-angular';
 import * as i8 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
 import Swal from 'sweetalert2';
 import { Tooltip } from '@coreui/coreui-pro';
+import { ToastrService } from 'ngx-toastr';
+import { auditTime, takeUntil } from 'rxjs/operators';
+import * as i1 from '@ag-grid-community/angular';
+import { AgGridModule } from '@ag-grid-community/angular';
+import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
+import { ModuleRegistry, _EditCoreModule } from '@ag-grid-community/core';
+import { CsvExportModule } from '@ag-grid-community/csv-export';
 
 class ConfigurationServiceLib {
     currentTablePreference;
     allConfigValues;
+    openFilterModal;
     constructor() {
         this.currentTablePreference = signal({}, ...(ngDevMode ? [{ debugName: "currentTablePreference" }] : []));
         this.allConfigValues = signal(null, ...(ngDevMode ? [{ debugName: "allConfigValues" }] : []));
+        this.openFilterModal = signal(false, ...(ngDevMode ? [{ debugName: "openFilterModal" }] : []));
     }
     /* Generate Unique ID as String */
     generateUniqueId() {
@@ -199,7 +208,7 @@ class CustomSelectFilterComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: [".select-filter-container{padding:10px}.select-filter-container label{display:flex;gap:5px}.search-box{width:100%;margin-bottom:5px;padding:4px}.checkbox-list{max-height:200px;overflow-y:auto}.checkbox-item{padding:4px 6px;cursor:pointer;border-radius:4px}.checkbox-item:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i4.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }] });
+  `, isInline: true, styles: [".select-filter-container{padding:10px}.select-filter-container label{display:flex;gap:5px}.search-box{width:100%;margin-bottom:5px;padding:4px}.checkbox-list{max-height:200px;overflow-y:auto}.checkbox-item{padding:4px 6px;cursor:pointer;border-radius:4px}.checkbox-item:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.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: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomSelectFilterComponent, decorators: [{
             type: Component,
@@ -265,7 +274,7 @@ class CheckboxCellRendererComponent {
       [checked]="value"
       (change)="onChangeCheckBox($event)"
       [disabled]="ischeckboxDisabled" />
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }] });
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "directive", type: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CheckboxCellRendererComponent, decorators: [{
             type: Component,
@@ -305,7 +314,7 @@ class CommentsButtonCellRendererComponent {
         Comments
       </button>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CommentsButtonCellRendererComponent, decorators: [{
             type: Component,
@@ -372,6 +381,19 @@ class UtilsService {
         const response = await lastValueFrom(request$);
         return { ...response, timestamp: new Date().toISOString() };
     }
+    // JSONRPC POST Request
+    postJsonRpcRequest(method, params) {
+        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+        const body = {
+            jsonrpc: '2.0',
+            method: method,
+            params: params,
+            id: this.configurationServiceLib.generateUniqueId()
+        };
+        return this.httpService
+            .post(window.config.apiBaseURLWebMaint, body, { headers })
+            .pipe(map(response => ({ ...response, timestamp: new Date().toISOString() })));
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: UtilsService, providedIn: 'root' });
 }
@@ -477,7 +499,7 @@ class EditionListGroupedComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: EditionListGroupedComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: EditionListGroupedComponent, isStandalone: true, selector: "app-edition-list-grouped", inputs: { label: "label", multiple: "multiple", hasFormError: "hasFormError" }, outputs: { selectedEditionsChange: "selectedEditionsChange" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    @if (label) {\n      <label for=\"sel-group-edition\">{{ label }}</label>\n    }\n    <c-multi-select\n      [cleaner]=\"true\"\n      [selectionType]=\"multiple ? 'counter' : 'text'\"\n      [multiple]=\"multiple\"\n      clearSearchOnSelect\n      [ngClass]=\"{ 'form-invalid': hasFormError }\"\n      placeholder=\"All Editions\"\n      visibleItems=\"8\"\n      (valueChange)=\"onEditionSelection($event)\"\n      (visibleChange)=\"onVisibleChange($event)\">\n      @for (option of editionPublicationList; track $index + '_' + option.region) {\n        <c-multi-select-optgroup>\n          <c-multi-select-optgroup-label (click)=\"onSelectEditionGroup(option.region, $index)\" class=\"region-selector cursor-pointer\">{{\n            option?.region\n          }}</c-multi-select-optgroup-label>\n          @for (item of option.values; track item?.description) {\n            <c-multi-select-option [value]=\"item\" [selected]=\"item.selected\">{{ '[' + item?.edname + ']' }} {{ item?.description }}</c-multi-select-option>\n          }\n        </c-multi-select-optgroup>\n      }\n    </c-multi-select>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i4.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "component", type: i4.MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: ["label", "disabled"] }, { kind: "component", type: i4.MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: EditionListGroupedComponent, isStandalone: true, selector: "app-edition-list-grouped", inputs: { label: "label", multiple: "multiple", hasFormError: "hasFormError" }, outputs: { selectedEditionsChange: "selectedEditionsChange" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    @if (label) {\n      <label for=\"sel-group-edition\">{{ label }}</label>\n    }\n    <c-multi-select\n      [cleaner]=\"true\"\n      [selectionType]=\"multiple ? 'counter' : 'text'\"\n      [multiple]=\"multiple\"\n      clearSearchOnSelect\n      [ngClass]=\"{ 'form-invalid': hasFormError }\"\n      placeholder=\"All Editions\"\n      visibleItems=\"8\"\n      (valueChange)=\"onEditionSelection($event)\"\n      (visibleChange)=\"onVisibleChange($event)\">\n      @for (option of editionPublicationList; track $index + '_' + option.region) {\n        <c-multi-select-optgroup>\n          <c-multi-select-optgroup-label (click)=\"onSelectEditionGroup(option.region, $index)\" class=\"region-selector cursor-pointer\">{{\n            option?.region\n          }}</c-multi-select-optgroup-label>\n          @for (item of option.values; track item?.description) {\n            <c-multi-select-option [value]=\"item\" [selected]=\"item.selected\">{{ '[' + item?.edname + ']' }} {{ item?.description }}</c-multi-select-option>\n          }\n        </c-multi-select-optgroup>\n      }\n    </c-multi-select>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i2$1.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i2$1.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "component", type: i2$1.MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: ["label", "disabled"] }, { kind: "component", type: i2$1.MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: EditionListGroupedComponent, decorators: [{
             type: Component,
@@ -518,7 +540,7 @@ class IndustryUpdateListboxCellRendererComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IndustryUpdateListboxCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: IndustryUpdateListboxCellRendererComponent, isStandalone: true, selector: "app-industry-update-listbox-cell-renderer", ngImport: i0, template: "<select\n  class=\"form-select select-industry\"\n  [ngClass]=\"{ 'select-industry-red': selectedIndustry === 'select-industry' }\"\n  [(ngModel)]=\"selectedIndustry\"\n  (change)=\"onIndustryChange($event)\"\n  id=\"sel-industry\"\n  name=\"sel-industry\">\n  <option value=\"select-industry\" disabled class=\"select-industry-opt\">Select Industry</option>\n  @for (industry of industryList; track industry.industry) {\n    <option [value]=\"industry?.industry\" class=\"select-industry-opt\">\n      {{ industry?.description }}\n    </option>\n  }\n</select>\n", styles: [".form-select.select-industry{color:#000}.form-select.select-industry.select-industry-red{color:#666666b3}.form-select.select-industry option{color:#000}.form-select.select-industry option[value=select-industry]{color:gray}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: IndustryUpdateListboxCellRendererComponent, isStandalone: true, selector: "app-industry-update-listbox-cell-renderer", ngImport: i0, template: "<select\n  class=\"form-select select-industry\"\n  [ngClass]=\"{ 'select-industry-red': selectedIndustry === 'select-industry' }\"\n  [(ngModel)]=\"selectedIndustry\"\n  (change)=\"onIndustryChange($event)\"\n  id=\"sel-industry\"\n  name=\"sel-industry\">\n  <option value=\"select-industry\" disabled class=\"select-industry-opt\">Select Industry</option>\n  @for (industry of industryList; track industry.industry) {\n    <option [value]=\"industry?.industry\" class=\"select-industry-opt\">\n      {{ industry?.description }}\n    </option>\n  }\n</select>\n", styles: [".form-select.select-industry{color:#000}.form-select.select-industry.select-industry-red{color:#666666b3}.form-select.select-industry option{color:#000}.form-select.select-industry option[value=select-industry]{color:gray}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IndustryUpdateListboxCellRendererComponent, decorators: [{
             type: Component,
@@ -550,13 +572,174 @@ class PageStatusCellRendererComponent {
         return selectedStatus && selectedStatus.html_color ? selectedStatus.html_color : '#C5B4E3';
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PageStatusCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: PageStatusCellRendererComponent, isStandalone: true, selector: "app-page-status-cell-renderer", ngImport: i0, template: "<div class=\"wrapper-production-status-select\">\n  <select\n    class=\"status-dropdown\"\n    aria-label=\"status-dropdown\"\n    cSelect\n    sizing=\"sm\"\n    (click)=\"$event.stopPropagation()\"\n    [ngModel]=\"pageStatus!.page_status_name\"\n    (ngModelChange)=\"updatePageStatus($event)\"\n    [ngStyle]=\"{ '--select-background': getStatusColor() }\">\n    @for (status of pageStatusList; track $index) {\n      <option [value]=\"status.page_status_name\">\n        {{ status.page_status_name }}\n      </option>\n    }\n  </select>\n</div>\n", styles: [".status-dropdown:not(.options){background-color:var(--select-background)}.status-dropdown option{background-color:#fff;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i4.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: PageStatusCellRendererComponent, isStandalone: true, selector: "app-page-status-cell-renderer", ngImport: i0, template: "<div class=\"wrapper-production-status-select\">\n  <select\n    class=\"status-dropdown\"\n    aria-label=\"status-dropdown\"\n    cSelect\n    sizing=\"sm\"\n    (click)=\"$event.stopPropagation()\"\n    [ngModel]=\"pageStatus!.page_status_name\"\n    (ngModelChange)=\"updatePageStatus($event)\"\n    [ngStyle]=\"{ '--select-background': getStatusColor() }\">\n    @for (status of pageStatusList; track $index) {\n      <option [value]=\"status.page_status_name\">\n        {{ status.page_status_name }}\n      </option>\n    }\n  </select>\n</div>\n", styles: [".status-dropdown:not(.options){background-color:var(--select-background)}.status-dropdown option{background-color:#fff;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i2$1.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PageStatusCellRendererComponent, decorators: [{
             type: Component,
             args: [{ selector: 'app-page-status-cell-renderer', imports: [FormsModule, CommonModule, FormModule], standalone: true, template: "<div class=\"wrapper-production-status-select\">\n  <select\n    class=\"status-dropdown\"\n    aria-label=\"status-dropdown\"\n    cSelect\n    sizing=\"sm\"\n    (click)=\"$event.stopPropagation()\"\n    [ngModel]=\"pageStatus!.page_status_name\"\n    (ngModelChange)=\"updatePageStatus($event)\"\n    [ngStyle]=\"{ '--select-background': getStatusColor() }\">\n    @for (status of pageStatusList; track $index) {\n      <option [value]=\"status.page_status_name\">\n        {{ status.page_status_name }}\n      </option>\n    }\n  </select>\n</div>\n", styles: [".status-dropdown:not(.options){background-color:var(--select-background)}.status-dropdown option{background-color:#fff;color:#000}\n"] }]
         }] });
 
+class StatusSelectCellRendererComponent {
+    prodStatusList = [];
+    params;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    fileStatus = undefined;
+    agInit(params) {
+        this.params = params;
+        this.prodStatusList = params.colDef?.cellRendererParams?.data?.prodStatusList ?? [];
+        this.refresh(params);
+    }
+    // Return Cell Value
+    refresh(params) {
+        this.fileStatus = params.data;
+        return true;
+    }
+    updatePageStatus(value) {
+        if (this.params.colDef?.cellRendererParams?.onUpdateFileStatus) {
+            this.params.colDef.cellRendererParams.onUpdateFileStatus(this.params.data, value);
+        }
+    }
+    getStatusColor() {
+        const selectedStatus = this.prodStatusList.find(status => status.statusid === this.fileStatus.it_prodstatusid);
+        return selectedStatus && selectedStatus.html_color ? selectedStatus.html_color : '#C5B4E3';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: StatusSelectCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: StatusSelectCellRendererComponent, isStandalone: true, selector: "app-status-select-cell-renderer", ngImport: i0, template: "<div class=\"wrapper-production-status-select\">\n  <select\n    class=\"status-dropdown\"\n    aria-label=\"status-dropdown\"\n    cSelect\n    sizing=\"sm\"\n    (click)=\"$event.stopPropagation()\"\n    [ngModel]=\"this.fileStatus!.it_prodstatusid\"\n    (ngModelChange)=\"updatePageStatus($event)\"\n    [ngStyle]=\"{ '--select-background': getStatusColor() }\">\n    @for (status of prodStatusList; track $index) {\n      <option [value]=\"status.statusid\">\n        {{ status.statusdesc }}\n      </option>\n    }\n  </select>\n</div>\n", styles: [".status-dropdown:not(.options){background-color:var(--select-background)}.status-dropdown option{background-color:#fff;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "directive", type: i2$1.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: StatusSelectCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [FormModule, CommonModule, FormsModule], selector: 'app-status-select-cell-renderer', template: "<div class=\"wrapper-production-status-select\">\n  <select\n    class=\"status-dropdown\"\n    aria-label=\"status-dropdown\"\n    cSelect\n    sizing=\"sm\"\n    (click)=\"$event.stopPropagation()\"\n    [ngModel]=\"this.fileStatus!.it_prodstatusid\"\n    (ngModelChange)=\"updatePageStatus($event)\"\n    [ngStyle]=\"{ '--select-background': getStatusColor() }\">\n    @for (status of prodStatusList; track $index) {\n      <option [value]=\"status.statusid\">\n        {{ status.statusdesc }}\n      </option>\n    }\n  </select>\n</div>\n", styles: [".status-dropdown:not(.options){background-color:var(--select-background)}.status-dropdown option{background-color:#fff;color:#000}\n"] }]
+        }] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class JsonrpcService {
+    httpService = inject(HttpClient);
+    configService = inject(ConfigurationServiceLib);
+    // JSONRPC POST Request
+    postJsonRpcRequest(method, params) {
+        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+        const body = {
+            jsonrpc: '2.0',
+            method: method,
+            params: params,
+            id: this.configService.generateUniqueId()
+        };
+        return this.httpService
+            .post(window.config.apiBaseURLWebMaint, body, { headers })
+            .pipe(map(response => ({ ...response, timestamp: new Date().toISOString() })));
+    }
+    // JSONRPC POST Request With promise
+    async postJsonRpcRequestPromise(method, params) {
+        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+        const body = {
+            jsonrpc: '2.0',
+            method: method,
+            params: params,
+            id: this.configService.generateUniqueId()
+        };
+        const request$ = this.httpService.post(window.config.apiBaseURLWebMaint, body, { headers });
+        const response = await lastValueFrom(request$);
+        return { ...response, timestamp: new Date().toISOString() };
+    }
+    /**
+     *
+     * @param formName Form config name
+     * @param tableName Table Name
+     */
+    async getFormConfig(formName, tableName) {
+        const params = {
+            uid: +localStorage.getItem(BrowserConstantsEnum.loginUid),
+            form_name: formName,
+            table_name: tableName
+        };
+        return this.postJsonRpcRequestPromise(JSONRPCMethods.getFormsConfig, params)
+            .then((response) => {
+            return response.result ? response.result[0] : { rows: [] };
+        })
+            .finally(() => { });
+    }
+    /**
+     *
+     * @param formName Report config name
+     * @param reportName Table Name
+     */
+    async getFormConfigReports(formName, reportName) {
+        const params = {
+            uid: +localStorage.getItem(BrowserConstantsEnum.loginUid),
+            form_name: formName,
+            report_name: reportName
+        };
+        return this.postJsonRpcRequestPromise(JSONRPCMethods.report, params)
+            .then((response) => {
+            return response.result ? response.result[0] : { rows: [] };
+        })
+            .finally(() => { });
+    }
+    /** Get available forms */
+    async getTableConfig(tableName) {
+        try {
+            const response = await this.postJsonRpcRequestPromise(JSONRPCMethods.getFormsConfig, {
+                uid: +localStorage.getItem(BrowserConstantsEnum.loginUid),
+                table_name: tableName
+            });
+            if (response.result) {
+                return response.result;
+            }
+            return [];
+        }
+        catch (error) {
+            return [];
+        }
+    }
+    /** Get single row data by their params */
+    async getTableRow(tableName, param) {
+        let params = {
+            uid: +localStorage.getItem(BrowserConstantsEnum.loginUid),
+            table_name: tableName
+        };
+        params = { ...params, ...param };
+        return await this.postJsonRpcRequestPromise(JSONRPCMethods.tableSearch, params);
+    }
+    /**
+     *
+     * @param tableName Table Name
+     * @param param Form values and params needed fo the call
+     * @param action 'U' for update and 'N' for create and 'D' for delete
+     * @returns Promise<any>
+     */
+    async createUpdateDeleteTableRow(tableName, requests, action) {
+        let params = {
+            uid: +localStorage.getItem(BrowserConstantsEnum.loginUid),
+            table_name: tableName,
+            maint_action: action
+        };
+        params = { ...params, ...requests };
+        return await this.postJsonRpcRequestPromise(JSONRPCMethods.tableUpdate, params);
+    }
+    /**
+     *
+     * @param tableName Table Name
+     * @param param Params to get the list of data
+     * @returns Array of data
+     */
+    async getTableList(tableName, param) {
+        let params = {
+            uid: +localStorage.getItem(BrowserConstantsEnum.loginUid),
+            table_name: tableName
+        };
+        params = { ...params, ...param };
+        return await this.postJsonRpcRequestPromise(JSONRPCMethods.tableList, params);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: JsonrpcService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: JsonrpcService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: JsonrpcService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 var FormFieldType;
 (function (FormFieldType) {
     FormFieldType["Text"] = "text";
@@ -1344,7 +1527,7 @@ class MultiFormComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MultiFormComponent, isStandalone: false, selector: "app-multi-form", inputs: { config: "config", showUnsavedFlags: "showUnsavedFlags", currentTableGridsSelectedIndex: "currentTableGridsSelectedIndex", formId: "formId" }, outputs: { fieldAction: "fieldAction", formSavedUnsavedListen: "formSavedUnsavedListen", selectionChangeEvent: "selectionChangeEvent" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" appCircularFocus>\n  @for (row of config?.rows; track $index; let isLast = $last) {\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\n      @for (field of row; track $index) {\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\n            @if (multiForm.controls[field.controlName]) {\n              <!-- Label  -->\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\n                <label\n                  [appShowTooltipIfTruncated]=\"field.label\"\n                  cLabel\n                  class=\"mb-1 label-multiform single-line-label\"\n                  [for]=\"field.controlName\"\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\n                  [ngStyle]=\"field.styles?.label\"\n                  >{{ field.label }}\n                  @if (field?.validations?.required || false) {\n                    <strong class=\"text-danger\">*</strong>\n                  }\n                </label>\n              }\n\n              <!-- Text, Email, Number Inputs -->\n              @if (\n                field.type === FormFieldType.Text ||\n                field.type === FormFieldType.Email ||\n                field.type === FormFieldType.Number ||\n                field.type === FormFieldType.Password ||\n                field.type === FormFieldType.Url ||\n                field.type === FormFieldType.Tel\n              ) {\n                <div class=\"position-relative w-100\">\n                  <input\n                    [type]=\"field.type\"\n                    cFormControl\n                    [formControlName]=\"field.controlName\"\n                    [id]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\n                      'no-label-margin': !field.label\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n\n                  @if (field.actionButton) {\n                    <button\n                      type=\"button\"\n                      [cTooltip]=\"field.actionButton?.tooltip\"\n                      tooltipPlacement=\"top\"\n                      cButton\n                      color=\"primary\"\n                      variant=\"outline\"\n                      aria-label=\"action\"\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\n                      (click)=\"onClickFieldAction($event, field)\">\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\n                    </button>\n                  }\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\n                    @if (multiForm.controls[field.controlName]?.errors) {\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Minimum length {{ field?.validations?.minLength }} characters is required\n                        </small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                        </small>\n                      }\n                    }\n                  }\n                </div>\n              }\n\n              <!-- Select Inputs -->\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\n                <ng-container>\n                  <c-multi-select\n                    [multiple]=\"field?.multiple || false\"\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\n                    [clearSearchOnSelect]=\"true\"\n                    [selectionType]=\"field?.selectionType || 'tags'\"\n                    [cleaner]=\"field?.allowCleaner || true\"\n                    [formControlName]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || 'Select'\"\n                    [appMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\n                    [options]=\"colorCodes$\"\n                    [optionsMaxHeight]=\"400\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\n                    [ngStyle]=\"field.styles?.field\">\n                    @if (field.type === inputType?.colorSelect) {\n                      @for (option of colorCodes$; track $index) {\n                        <c-multi-select-option [value]=\"option?.label\">\n                          <label class=\"d-flex gap-2\">\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\n                            {{ option.label }}\n                          </label>\n                        </c-multi-select-option>\n                      }\n                    } @else {\n                      @for (option of field.options; track $index) {\n                        <c-multi-select-option [value]=\"option?.value\">\n                          {{ option.label }}\n                        </c-multi-select-option>\n                      }\n                    }\n                  </c-multi-select>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <!-- Date input  -->\n              @else if (field.type === FormFieldType.Date) {\n                <ng-container>\n                  <input\n                    type=\"text\"\n                    [placeholder]=\"field?.label || 'Select Date'\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\n                    [formControlName]=\"field.controlName\"\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\n                    [bsConfig]=\"{\n                      containerClass: 'pongrass-red-datepicker',\n                      showWeekNumbers: false,\n                      adaptivePosition: true,\n                      useUtc: false\n                    }\"\n                    bsDatepicker\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Textarea  -->\n              @else if (field.type === FormFieldType.Textarea) {\n                <ng-container>\n                  <textarea\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    [rows]=\"field?.textareaRows || 4\"\n                    [columns]=\"field?.textareaColumns || 4\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [formControlName]=\"field.controlName\"\n                    [ngStyle]=\"field.styles?.field\"></textarea>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Checkbox  -->\n              @else if (field.type === FormFieldType.Checkbox) {\n                <div class=\"no-label-margin\">\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\n                </div>\n              }\n              <!-- Decimal input  -->\n              @else if (field.type === FormFieldType.Float) {\n                <ng-container>\n                  <input\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    type=\"number\"\n                    class=\"me-2\"\n                    [formControlName]=\"field.controlName\"\n                    [appDecimalInput]=\"field.validations?.precision || 2\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              } @else if (field.type === FormFieldType.Edition) {\n                <ng-container>\n                  <app-edition-list-grouped\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\n                    [multiple]=\"field?.multiple || true\"\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\n                  </app-edition-list-grouped>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n            }\n          </div>\n        }\n\n        @if (field?.type === FormFieldType.Separator) {\n          <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\n        }\n        @if (field?.type === FormFieldType.FormHeader) {\n          <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\n        }\n      }\n    </div>\n  }\n</form>\n", styles: [".no-label-margin{margin-top:1.6rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.h-135{height:135px}.single-line-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.label-multiform{font-size:16px;font-weight:400}.field-checkbox{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: CircularFocusDirective, selector: "[appCircularFocus]", inputs: ["formId", "formGroup"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i4.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: i4.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "directive", type: i4.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i4.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: i4.FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: DecimalInputDirective, selector: "[appDecimalInput]", inputs: ["appDecimalInput"] }, { kind: "directive", type: ShowTooltipIfTruncatedDirective, selector: "[appShowTooltipIfTruncated]", inputs: ["appShowTooltipIfTruncated"] }, { kind: "directive", type: i4.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i8.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i8.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: EditionListGroupedComponent, selector: "app-edition-list-grouped", inputs: ["label", "multiple", "hasFormError"], outputs: ["selectedEditionsChange"] }, { kind: "directive", type: MultiSelectStylerDirective, selector: "[appMultiSelectStyler]", inputs: ["appMultiSelectStyler", "options"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MultiFormComponent, isStandalone: false, selector: "app-multi-form", inputs: { config: "config", showUnsavedFlags: "showUnsavedFlags", currentTableGridsSelectedIndex: "currentTableGridsSelectedIndex", formId: "formId" }, outputs: { fieldAction: "fieldAction", formSavedUnsavedListen: "formSavedUnsavedListen", selectionChangeEvent: "selectionChangeEvent" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" appCircularFocus>\n  @for (row of config?.rows; track $index; let isLast = $last) {\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\n      @for (field of row; track $index) {\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\n            @if (multiForm.controls[field.controlName]) {\n              <!-- Label  -->\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\n                <label\n                  [appShowTooltipIfTruncated]=\"field.label\"\n                  cLabel\n                  class=\"mb-1 label-multiform single-line-label\"\n                  [for]=\"field.controlName\"\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\n                  [ngStyle]=\"field.styles?.label\"\n                  >{{ field.label }}\n                  @if (field?.validations?.required || false) {\n                    <strong class=\"text-danger\">*</strong>\n                  }\n                </label>\n              }\n\n              <!-- Text, Email, Number Inputs -->\n              @if (\n                field.type === FormFieldType.Text ||\n                field.type === FormFieldType.Email ||\n                field.type === FormFieldType.Number ||\n                field.type === FormFieldType.Password ||\n                field.type === FormFieldType.Url ||\n                field.type === FormFieldType.Tel\n              ) {\n                <div class=\"position-relative w-100\">\n                  <input\n                    [type]=\"field.type\"\n                    cFormControl\n                    [formControlName]=\"field.controlName\"\n                    [id]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\n                      'no-label-margin': !field.label\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n\n                  @if (field.actionButton) {\n                    <button\n                      type=\"button\"\n                      [cTooltip]=\"field.actionButton?.tooltip\"\n                      tooltipPlacement=\"top\"\n                      cButton\n                      color=\"primary\"\n                      variant=\"outline\"\n                      aria-label=\"action\"\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\n                      (click)=\"onClickFieldAction($event, field)\">\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\n                    </button>\n                  }\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\n                    @if (multiForm.controls[field.controlName]?.errors) {\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Minimum length {{ field?.validations?.minLength }} characters is required\n                        </small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                        </small>\n                      }\n                    }\n                  }\n                </div>\n              }\n\n              <!-- Select Inputs -->\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\n                <ng-container>\n                  <c-multi-select\n                    [multiple]=\"field?.multiple || false\"\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\n                    [clearSearchOnSelect]=\"true\"\n                    [selectionType]=\"field?.selectionType || 'tags'\"\n                    [cleaner]=\"field?.allowCleaner || true\"\n                    [formControlName]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || 'Select'\"\n                    [appMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\n                    [options]=\"colorCodes$\"\n                    [optionsMaxHeight]=\"400\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\n                    [ngStyle]=\"field.styles?.field\">\n                    @if (field.type === inputType?.colorSelect) {\n                      @for (option of colorCodes$; track $index) {\n                        <c-multi-select-option [value]=\"option?.label\">\n                          <label class=\"d-flex gap-2\">\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\n                            {{ option.label }}\n                          </label>\n                        </c-multi-select-option>\n                      }\n                    } @else {\n                      @for (option of field.options; track $index) {\n                        <c-multi-select-option [value]=\"option?.value\">\n                          {{ option.label }}\n                        </c-multi-select-option>\n                      }\n                    }\n                  </c-multi-select>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <!-- Date input  -->\n              @else if (field.type === FormFieldType.Date) {\n                <ng-container>\n                  <input\n                    type=\"text\"\n                    [placeholder]=\"field?.label || 'Select Date'\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\n                    [formControlName]=\"field.controlName\"\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\n                    [bsConfig]=\"{\n                      containerClass: 'pongrass-red-datepicker',\n                      showWeekNumbers: false,\n                      adaptivePosition: true,\n                      useUtc: false\n                    }\"\n                    bsDatepicker\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Textarea  -->\n              @else if (field.type === FormFieldType.Textarea) {\n                <ng-container>\n                  <textarea\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    [rows]=\"field?.textareaRows || 4\"\n                    [columns]=\"field?.textareaColumns || 4\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [formControlName]=\"field.controlName\"\n                    [ngStyle]=\"field.styles?.field\"></textarea>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Checkbox  -->\n              @else if (field.type === FormFieldType.Checkbox) {\n                <div class=\"no-label-margin\">\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\n                </div>\n              }\n              <!-- Decimal input  -->\n              @else if (field.type === FormFieldType.Float) {\n                <ng-container>\n                  <input\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    type=\"number\"\n                    class=\"me-2\"\n                    [formControlName]=\"field.controlName\"\n                    [appDecimalInput]=\"field.validations?.precision || 2\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              } @else if (field.type === FormFieldType.Edition) {\n                <ng-container>\n                  <app-edition-list-grouped\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\n                    [multiple]=\"field?.multiple || true\"\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\n                  </app-edition-list-grouped>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n            }\n          </div>\n        }\n\n        @if (field?.type === FormFieldType.Separator) {\n          <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\n        }\n        @if (field?.type === FormFieldType.FormHeader) {\n          <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\n        }\n      }\n    </div>\n  }\n</form>\n", styles: [".no-label-margin{margin-top:1.6rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.h-135{height:135px}.single-line-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.label-multiform{font-size:16px;font-weight:400}.field-checkbox{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: CircularFocusDirective, selector: "[appCircularFocus]", inputs: ["formId", "formGroup"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i2$1.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: i2$1.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "directive", type: i2$1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: i2$1.FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: DecimalInputDirective, selector: "[appDecimalInput]", inputs: ["appDecimalInput"] }, { kind: "directive", type: ShowTooltipIfTruncatedDirective, selector: "[appShowTooltipIfTruncated]", inputs: ["appShowTooltipIfTruncated"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i8.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i8.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: EditionListGroupedComponent, selector: "app-edition-list-grouped", inputs: ["label", "multiple", "hasFormError"], outputs: ["selectedEditionsChange"] }, { kind: "directive", type: MultiSelectStylerDirective, selector: "[appMultiSelectStyler]", inputs: ["appMultiSelectStyler", "options"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, decorators: [{
             type: Component,
@@ -1422,6 +1605,566 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }] });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class GenericFilterModelComponent {
+    configurationService = inject(ConfigurationServiceLib);
+    jsonrpcService = inject(JsonrpcService);
+    filterFormConfiguration = [];
+    tableName = '';
+    sendFilteredData;
+    filterFormComponent;
+    isFilterModalActive;
+    constructor() {
+        this.isFilterModalActive = false;
+        this.sendFilteredData = new EventEmitter();
+        effect(() => {
+            this.isFilterModalActive = this.configurationService.openFilterModal();
+        });
+    }
+    ngOnInit() {
+        if (!this.tableName)
+            throw new Error('Table name is required to filter data.');
+    }
+    handleFilterModal(event) {
+        this.isFilterModalActive = event;
+        this.configurationService.openFilterModal.set(this.isFilterModalActive);
+    }
+    resetFilter() {
+        this.filterFormComponent.resetForm();
+        this.sendFilteredData.emit({ isReset: true, returnedData: [] });
+    }
+    async onFilter() {
+        const formValues = this.filterAttributesWithValues(this.filterFormComponent.getFormValues().values);
+        if (Object.keys(formValues).length > 0) {
+            const tableData = await this.jsonrpcService.getTableList(this.tableName, formValues);
+            this.sendFilteredData.emit({ isReset: false, returnedData: tableData.result || [] });
+            this.configurationService.openFilterModal.set(false);
+        }
+    }
+    filterAttributesWithValues(object) {
+        return Object.keys(object)
+            .filter(key => object[key] !== null && object[key] !== '' && object[key] !== undefined)
+            .reduce((result, key) => {
+            result[key] = object[key];
+            return result;
+        }, {});
+    }
+    close() {
+        this.configurationService.openFilterModal.set(false);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GenericFilterModelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: GenericFilterModelComponent, isStandalone: true, selector: "app-generic-filter-model", inputs: { filterFormConfiguration: "filterFormConfiguration", tableName: "tableName" }, outputs: { sendFilteredData: "sendFilteredData" }, viewQueries: [{ propertyName: "filterFormComponent", first: true, predicate: ["filterFormComponent"], descendants: true }], ngImport: i0, template: "<!-- Filter Modal  -->\n<c-modal id=\"generic-filter-modal\" [visible]=\"isFilterModalActive\" (visibleChange)=\"handleFilterModal($event)\" size=\"md\" alignment=\"center\" scrollable>\n  <c-modal-header>\n    <h5 cModalTitle>Advanced Search</h5>\n    <!-- <button (click)=\"commonService.openFilterModal.set(false)\" cButtonClose></button> -->\n  </c-modal-header>\n  <c-modal-body>\n    @if (filterFormConfiguration) {\n      <app-multi-form [config]=\"filterFormConfiguration\" #filterFormComponent></app-multi-form>\n    }\n  </c-modal-body>\n  <c-modal-footer>\n    <button (click)=\"close()\" cButton color=\"secondary\">Close</button>\n    <button (click)=\"resetFilter()\" cButton color=\"primary\">Reset</button>\n    <button cButton color=\"primary\" (click)=\"onFilter()\">Search</button>\n  </c-modal-footer>\n</c-modal>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MultiFormModule }, { kind: "component", type: MultiFormComponent, selector: "app-multi-form", inputs: ["config", "showUnsavedFlags", "currentTableGridsSelectedIndex", "formId"], outputs: ["fieldAction", "formSavedUnsavedListen", "selectionChangeEvent"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2$1.ModalBodyComponent, selector: "c-modal-body" }, { kind: "component", type: i2$1.ModalComponent, selector: "c-modal", inputs: ["alignment", "backdrop", "fullscreen", "keyboard", "id", "size", "transition", "role", "ariaModal", "scrollable", "visible"], outputs: ["visibleChange"], exportAs: ["cModal"] }, { kind: "component", type: i2$1.ModalFooterComponent, selector: "c-modal-footer" }, { kind: "component", type: i2$1.ModalHeaderComponent, selector: "c-modal-header" }, { kind: "directive", type: i2$1.ModalTitleDirective, selector: "[cModalTitle]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GenericFilterModelComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-generic-filter-model', standalone: true, imports: [CommonModule, MultiFormModule, ModalModule, ButtonModule], template: "<!-- Filter Modal  -->\n<c-modal id=\"generic-filter-modal\" [visible]=\"isFilterModalActive\" (visibleChange)=\"handleFilterModal($event)\" size=\"md\" alignment=\"center\" scrollable>\n  <c-modal-header>\n    <h5 cModalTitle>Advanced Search</h5>\n    <!-- <button (click)=\"commonService.openFilterModal.set(false)\" cButtonClose></button> -->\n  </c-modal-header>\n  <c-modal-body>\n    @if (filterFormConfiguration) {\n      <app-multi-form [config]=\"filterFormConfiguration\" #filterFormComponent></app-multi-form>\n    }\n  </c-modal-body>\n  <c-modal-footer>\n    <button (click)=\"close()\" cButton color=\"secondary\">Close</button>\n    <button (click)=\"resetFilter()\" cButton color=\"primary\">Reset</button>\n    <button cButton color=\"primary\" (click)=\"onFilter()\">Search</button>\n  </c-modal-footer>\n</c-modal>\n" }]
+        }], ctorParameters: () => [], propDecorators: { filterFormConfiguration: [{
+                type: Input
+            }], tableName: [{
+                type: Input
+            }], sendFilteredData: [{
+                type: Output
+            }], filterFormComponent: [{
+                type: ViewChild,
+                args: ['filterFormComponent']
+            }] } });
+
+var FilterType;
+(function (FilterType) {
+    FilterType["SELECT"] = "SELECT_FILTER";
+    FilterType["TEXT"] = "TEXT_FILTER";
+    FilterType["NUMBER"] = "NUMBER_FILTER";
+    FilterType["DATE"] = "DATE_FILTER";
+})(FilterType || (FilterType = {}));
+// Built-in AG Grid filters
+const AgGridFilters = {
+    [FilterType.TEXT]: 'agTextColumnFilter',
+    [FilterType.NUMBER]: 'agNumberColumnFilter',
+    [FilterType.DATE]: 'agDateColumnFilter'
+};
+// Custom filters that can be used in the table grid
+const TABLE_GRID_FILTER_COMPONENTS = {
+    [FilterType.SELECT]: CustomSelectFilterComponent
+    // Add others as needed
+};
+
+const MessageLabel = {
+    RowPerPage: 'Rows per page'
+};
+
+class TableGridComponent {
+    formBuilder = inject(FormBuilder);
+    utilsService = inject(UtilsService);
+    toastrService = inject(ToastrService);
+    configurationService = inject(ConfigurationServiceLib);
+    tableConfiguration;
+    columnToolVisible;
+    initialPageNumber;
+    tableGridReady;
+    tableRowSelection;
+    tableRowClicked;
+    columnStateEvent;
+    pageChange;
+    filterChanged;
+    cellValueChanged;
+    gridAPI;
+    columnsListselectionForm;
+    tableGridState;
+    autoSizeTrigger$ = new Subject();
+    subscribeUntil$ = new Subject();
+    autoSizeStrategy = {
+        type: 'fitCellContents',
+        defaultMinWidth: 100
+    };
+    /**
+     * Resize all columns to fit the grid width while maintaining their minimum widths.
+     * This method collects the current widths of all columns and applies them as limits
+     */
+    sizeToFit() {
+        const columnLimits = [];
+        this.gridAPI?.api.getColumns().forEach(column => {
+            column.getMaxWidth();
+            columnLimits.push({
+                key: column.getColId(),
+                minWidth: column.getActualWidth()
+            });
+        });
+        this.gridAPI?.api.sizeColumnsToFit({
+            columnLimits: columnLimits
+        });
+    }
+    /**
+     * Automatically resize all columns to fit their content.
+     * This method collects the current widths of all columns and applies them as limits
+     * to ensure that the columns are resized based on their content.
+     */
+    autoSizeAll(skipHeader = false) {
+        this.gridAPI?.api.autoSizeAllColumns(skipHeader);
+        this.sizeToFit();
+    }
+    gridOptions = {
+        onRowDataUpdated: () => {
+            // Trigger auto-size when row data is updated
+            // this.autoSizeTrigger$.next();
+        },
+        localeText: {
+            pageSizeSelectorLabel: `${MessageLabel.RowPerPage}:`,
+            ariaPageSizeSelectorLabel: `${MessageLabel.RowPerPage}`
+        }
+    };
+    constructor() {
+        this.tableGridReady = new EventEmitter();
+        this.tableRowSelection = new EventEmitter();
+        this.tableRowClicked = new EventEmitter();
+        this.columnStateEvent = new EventEmitter();
+        this.pageChange = new EventEmitter();
+        this.filterChanged = new EventEmitter();
+        this.cellValueChanged = new EventEmitter();
+        this.columnToolVisible = false;
+        this.initialPageNumber = 0;
+        this.tableGridState = [];
+        effect(() => {
+            // if (this.layoutService.appliedTheme() === 'dark') {
+            //   this.tableConfiguration.tableTheme = `${this.tableConfiguration.themeClass}-dark`;
+            // } else {
+            //   this.tableConfiguration.tableTheme = this.tableConfiguration.themeClass;
+            // }
+        });
+    }
+    ngOnChanges(changes) {
+        if (changes['tableConfiguration'] && !changes['tableConfiguration'].firstChange) {
+            if (this.gridAPI) {
+                this.gridAPI.api.refreshClientSideRowModel();
+            }
+            setTimeout(() => {
+                this.createColumnState();
+                this.createColumnsListForm();
+            }, 0);
+        }
+    }
+    ngOnInit() {
+        this.createColumnsListForm();
+        this.gridOptions = {
+            ...this.gridOptions,
+            ...this.tableConfiguration.defaultGridOptions
+        };
+        this.autoSizeTrigger$.pipe(auditTime(500), takeUntil(this.subscribeUntil$)).subscribe(() => {
+            this.autoSizeAll();
+        });
+    }
+    /** Send event to parent component when Ag Grid is stabilized*/
+    onGridReady(event) {
+        this.gridAPI = event;
+        this.createColumnState();
+        this.tableGridReady.emit(event);
+    }
+    /** Send event to parent component when a row is selected */
+    onRowSelected(event) {
+        const selectedRows = this.gridAPI?.api.getSelectedRows();
+        this.tableRowSelection.emit({ event: event, rows: selectedRows });
+    }
+    /** Send event to parent component when a row is clicked */
+    onRowClicked(event) {
+        this.tableRowClicked.emit({ event: event, row: event.data });
+    }
+    /** Create column state on initialization of table grid */
+    createColumnState() {
+        if (this.gridAPI) {
+            if (this.tableConfiguration.initialState) {
+                this.tableGridState = this.tableConfiguration.initialState;
+                const initialState = this.tableGridState.map(item => ({
+                    colId: item.key,
+                    hide: item.visible === null || item.visible === undefined ? false : !item.visible,
+                    width: item.width,
+                    sort: item.sort || null
+                }));
+                this.gridAPI.api.applyColumnState({
+                    state: initialState,
+                    defaultState: { sort: null }
+                });
+            }
+            else {
+                const state = this.gridAPI.api.getColumnState();
+                state.forEach((columnState) => {
+                    this.tableGridState.push({
+                        key: columnState.colId,
+                        visible: columnState.hide ? !columnState.hide : true,
+                        width: columnState.width,
+                        sort: columnState.sort
+                    });
+                });
+            }
+            // this.configurationService.currentTablePreference.set({ tableState: this.tableGridState, tableName: this.tableConfiguration.tablename });
+            this.configurationService.setTablePreference(this.tableConfiguration.tablename, this.tableGridState);
+        }
+    }
+    /** Set visibility of columns and send the event and column form to parent component along with last checkbox event data */
+    getCheckboxStatus(event, field) {
+        const isChecked = event.target.checked;
+        const columnIndex = this.tableGridState.findIndex(item => item.key === field);
+        if (columnIndex > -1) {
+            this.tableGridState[columnIndex] = {
+                ...this.tableGridState[columnIndex],
+                visible: isChecked
+            };
+        }
+        if (this.gridAPI) {
+            this.gridAPI.api.setColumnsVisible([field], isChecked);
+            this.gridAPI.api.autoSizeColumns([field]);
+        }
+        // this.configurationService.currentTablePreference.set({ tableState: this.tableGridState, tableName: this.tableConfiguration.tablename });
+        this.configurationService.setTablePreference(this.tableConfiguration.tablename, this.tableGridState);
+    }
+    /** Create form group for column tools menu */
+    createColumnsListForm() {
+        if (!this.columnToolVisible)
+            return;
+        if (!this.tableConfiguration.tablename) {
+            throw new Error('Table name is required for columns tools list');
+        }
+        const controls = {};
+        if (this.tableConfiguration?.columnDefs) {
+            this.tableConfiguration.columnDefs.forEach(col => {
+                col.filter = this.getAppliedFilter(col.filter);
+            });
+            this.tableConfiguration.initialState.forEach((col) => {
+                controls[col.key] = [col.visible === null || col.visible === undefined ? true : col.visible];
+            });
+        }
+        if (Object.entries(controls).length > 0) {
+            this.columnsListselectionForm = this.formBuilder.group(controls);
+        }
+    }
+    getAppliedFilter(filterType) {
+        if (!filterType)
+            return undefined;
+        // Ensure it's a valid FilterType
+        if (Object.values(FilterType).includes(filterType)) {
+            // Check if a custom component exists for this filterType
+            const customComponent = TABLE_GRID_FILTER_COMPONENTS[filterType];
+            return customComponent ?? AgGridFilters[filterType];
+        }
+        return filterType;
+    }
+    /** On resizing columns, update the tableGridState */
+    onColumnResized(event) {
+        if (event.finished && event.column) {
+            const columnId = event.column.colId;
+            const columnWidth = event.column.actualWidth;
+            const columnVisible = event.column.visible;
+            const column = this.tableGridState.find(item => item.key === columnId);
+            if (column) {
+                column.width = columnWidth;
+                column.visible = columnVisible;
+            }
+            // this.configurationService.currentTablePreference.set({ tableState: this.tableGridState, tableName: this.tableConfiguration.tablename });
+            this.configurationService.setTablePreference(this.tableConfiguration.tablename, this.tableGridState);
+        }
+    }
+    /** On moving columns, update the tableGridState */
+    onColumnMoved(event) {
+        if (event.finished) {
+            const { column, toIndex } = event;
+            if (!column || toIndex === undefined || toIndex === null) {
+                return;
+            }
+            const movedColId = column.getColId();
+            const currentIndex = this.tableGridState.findIndex((col) => col.key === movedColId);
+            if (currentIndex > -1) {
+                const [movedColumn] = this.tableGridState.splice(currentIndex, 1);
+                this.tableGridState.splice(toIndex, 0, movedColumn);
+            }
+            // this.configurationService.currentTablePreference.set({ tableState: this.tableGridState, tableName: this.tableConfiguration.tablename });
+            this.configurationService.setTablePreference(this.tableConfiguration.tablename, this.tableGridState);
+        }
+    }
+    onSortChanged(event) {
+        if (event.columns) {
+            event.columns.forEach((col) => {
+                const column = this.tableGridState.find(item => item.key === col.colId);
+                if (column) {
+                    column.sort = col.sort || null;
+                }
+            });
+            // this.configurationService.currentTablePreference.set({ tableState: this.tableGridState, tableName: this.tableConfiguration.tablename });
+            this.configurationService.setTablePreference(this.tableConfiguration.tablename, this.tableGridState);
+        }
+    }
+    /** Emit event when pagination is changed */
+    onPaginationChanged(event) {
+        this.pageChange.emit(event);
+    }
+    /** Emit event when first data is rendered */
+    onFirstDataRendered(event) {
+        event.api.paginationGoToPage(this.initialPageNumber);
+    }
+    /** Emit event to update table preference */
+    updatetablePreference() {
+        this.columnStateEvent.emit({
+            currentEvent: {},
+            currentTableState: this.tableGridState
+        });
+    }
+    /** Reset table preference to default state */
+    resetTablePreference() {
+        if (!this.tableConfiguration.tablename) {
+            throw new Error('Table name is required for columns tools list');
+        }
+        const params = {
+            uid: +localStorage.getItem(BrowserConstantsEnum.loginUid),
+            table_name: this.tableConfiguration.tablename,
+            maint_action: 'D'
+        };
+        this.utilsService.postJsonRpcRequest(JSONRPCMethods.updateTablePreference, params).subscribe({
+            next: (response) => {
+                if (response.result) {
+                    this.tableGridState = [];
+                    if (response.result.fields_to_display && response.result.fields_to_display.length > 0) {
+                        this.tableConfiguration.initialState = response.result.fields_to_display;
+                    }
+                    this.tableConfiguration.initialState.forEach((col) => {
+                        col.visible = col.visible === null || col.visible === undefined ? true : col.visible;
+                        col.width = 200;
+                        col.sort = null;
+                        this.tableGridState.push(col);
+                        this.columnsListselectionForm.controls[col.key].setValue(true);
+                    });
+                    if (this.gridAPI) {
+                        this.gridAPI.api.applyColumnState({
+                            state: this.tableGridState.map(item => ({
+                                colId: item.key,
+                                hide: item.visible === null || item.visible === undefined ? false : !item.visible,
+                                width: 200,
+                                sort: item.sort || null,
+                                flex: 1
+                            })),
+                            defaultState: { sort: null },
+                            applyOrder: true
+                        });
+                        // this.configurationService.currentTablePreference.set({ tableState: this.tableGridState, tableName: this.tableConfiguration.tablename });
+                        this.configurationService.setTablePreference(this.tableConfiguration.tablename, this.tableGridState);
+                    }
+                }
+                else {
+                    this.toastrService.success('Failed to reset table preference');
+                }
+            }
+        });
+    }
+    /** Reset table preference to default state */
+    resetTablePreferenceV2() {
+        if (!this.tableConfiguration?.tablename) {
+            throw new Error('Table name is required for column tools list');
+        }
+        this.tableConfiguration.initialState.forEach((col) => {
+            col.visible = false;
+            delete col.width;
+            delete col.sort;
+        });
+        const params = {
+            uid: +localStorage.getItem(BrowserConstantsEnum.loginUid),
+            table_name: this.tableConfiguration.tablename,
+            display_options: this.tableGridState
+        };
+        this.utilsService.postJsonRpcRequest(JSONRPCMethods.updateTablePreference, params).subscribe({
+            next: (response) => {
+                if (response?.result) {
+                    this.handleSuccessfulReset(response.result);
+                }
+                else {
+                    this.toastrService.error('Failed to reset table preference');
+                }
+            },
+            error: () => {
+                this.toastrService.error('An error occurred while resetting table preference');
+            }
+        });
+    }
+    /** Handle successful reset of table preference */
+    handleSuccessfulReset(result) {
+        this.tableGridState = [];
+        const fieldsToDisplay = result.fields_to_display || [];
+        if (fieldsToDisplay.length > 0) {
+            this.tableConfiguration.initialState = fieldsToDisplay;
+        }
+        this.tableConfiguration.initialState.forEach((col) => {
+            col.visible = false;
+            this.tableGridState.push(col);
+            this.columnsListselectionForm.controls[col.key]?.setValue(false);
+        });
+        this.updateGridState();
+    }
+    /** Update grid state based on the current tableGridState */
+    updateGridState() {
+        if (this.gridAPI) {
+            const columnState = this.tableGridState.map(item => ({
+                colId: item.key,
+                hide: true,
+                width: 200,
+                sort: item.sort || null,
+                flex: 1
+            }));
+            this.gridAPI.api.applyColumnState({
+                state: columnState,
+                defaultState: { sort: null },
+                applyOrder: true
+            });
+            // this.configurationService.currentTablePreference.set({ tableState: this.tableGridState, tableName: this.tableConfiguration.tablename });
+            this.configurationService.setTablePreference(this.tableConfiguration.tablename, this.tableGridState);
+        }
+    }
+    /* Emit event when filter is changed */
+    onFilterChanged(params) {
+        const filterModel = params.api.getFilterModel();
+        const filteredRows = [];
+        params.api.forEachNodeAfterFilter((node) => {
+            if (node.data) {
+                filteredRows.push(node.data);
+            }
+        });
+        const filterChangedParams = {
+            rows: filteredRows,
+            column: params.columns,
+            filters: filterModel
+        };
+        this.filterChanged.emit(filterChangedParams);
+    }
+    /** Emit event when a cell value is changed */
+    onCellValueChanged(event) {
+        this.cellValueChanged.emit(event);
+    }
+    ngOnDestroy() {
+        this.subscribeUntil$.next();
+        this.subscribeUntil$.complete();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: TableGridComponent, isStandalone: false, selector: "app-table-grid", inputs: { tableConfiguration: "tableConfiguration", columnToolVisible: "columnToolVisible", initialPageNumber: "initialPageNumber" }, outputs: { tableGridReady: "tableGridReady", tableRowSelection: "tableRowSelection", tableRowClicked: "tableRowClicked", columnStateEvent: "columnStateEvent", pageChange: "pageChange", filterChanged: "filterChanged", cellValueChanged: "cellValueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-md-flex\">\n    <div class=\"table-list-wrapper flex-fill\">\n      <!-- style=\"width: 100%; height: 567px\" -->\n      <ag-grid-angular\n        style=\"width: 100%\"\n        [rowData]=\"tableConfiguration.rows\"\n        [columnDefs]=\"tableConfiguration.columnDefs\"\n        [defaultColDef]=\"tableConfiguration.defaultColDef\"\n        [rowSelection]=\"tableConfiguration.rowSelectionOption\"\n        [pagination]=\"tableConfiguration.pagination.enabled\"\n        [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\n        [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\n        [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\n        [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\n        (gridReady)=\"onGridReady($event)\"\n        (rowSelected)=\"onRowSelected($event)\"\n        (rowClicked)=\"onRowClicked($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (columnMoved)=\"onColumnMoved($event)\"\n        (sortChanged)=\"onSortChanged($event)\"\n        (paginationChanged)=\"onPaginationChanged($event)\"\n        (firstDataRendered)=\"onFirstDataRendered($event)\"\n        (filterChanged)=\"onFilterChanged($event)\"\n        (cellValueChanged)=\"onCellValueChanged($event)\"\n        [masterDetail]=\"tableConfiguration.masterDetail\"\n        [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\n        [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\n        [enableCellTextSelection]=\"true\"\n        [gridOptions]=\"gridOptions\"\n        [ensureDomOrder]=\"true\"\n        [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\n    </div>\n\n    @if (columnToolVisible && columnsListselectionForm) {\n      <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\n        <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\n          <span\n            class=\"cursor-pointer text-primary\"\n            tooltipPlacement=\"top\"\n            cTooltip=\"Column Preference\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\n            <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\n          </span>\n\n          <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\n            <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\n          </span>\n        </div>\n      </div>\n\n      <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\n        <c-offcanvas-header>\n          <h5 cOffcanvasTitle>Table Column Preference</h5>\n          <button\n            cButtonClose\n            size=\"sm\"\n            class=\"text-reset ms-auto\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\n            aria-label=\"Close\"></button>\n        </c-offcanvas-header>\n        <c-offcanvas-body>\n          <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\n            @for (item of this.tableGridState; track $index) {\n              <div class=\"checkbox-item px-1\">\n                <c-form-check>\n                  <input\n                    (change)=\"getCheckboxStatus($event, item.key)\"\n                    [checked]=\"columnsListselectionForm.get(item.key)?.value\"\n                    cFormCheckInput\n                    [id]=\"'cb_' + item.key\"\n                    type=\"checkbox\"\n                    [formControl]=\"columnsListselectionForm.controls[item.key]\" />\n                  <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\n                    {{ item?.headerName || item?.label }}</label\n                  >\n                </c-form-check>\n              </div>\n            }\n          </div>\n          <div class=\"align d-flex gap-3 justify-content-end\">\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreferenceV2()\">\n              Clear\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreference()\">\n              Reset\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"updatetablePreference()\">\n              Update\n            </button>\n          </div>\n        </c-offcanvas-body>\n      </c-offcanvas>\n    }\n  </div>\n</div>\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: i1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: i2$1.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i2$1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i2$1.ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { kind: "component", type: i2$1.OffcanvasBodyComponent, selector: "c-offcanvas-body" }, { kind: "component", type: i2$1.OffcanvasComponent, selector: "c-offcanvas", inputs: ["backdrop", "keyboard", "placement", "responsive", "id", "role", "ariaModal", "scroll", "visible"], outputs: ["visibleChange"], exportAs: ["cOffcanvas"] }, { kind: "component", type: i2$1.OffcanvasHeaderComponent, selector: "c-offcanvas-header" }, { kind: "directive", type: i2$1.OffcanvasTitleDirective, selector: "[cOffcanvasTitle]" }, { kind: "directive", type: i2$1.OffcanvasToggleDirective, selector: "[cOffcanvasToggle]", inputs: ["cOffcanvasToggle"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-table-grid', standalone: false, template: "<div class=\"row\">\n  <div class=\"col-12 d-md-flex\">\n    <div class=\"table-list-wrapper flex-fill\">\n      <!-- style=\"width: 100%; height: 567px\" -->\n      <ag-grid-angular\n        style=\"width: 100%\"\n        [rowData]=\"tableConfiguration.rows\"\n        [columnDefs]=\"tableConfiguration.columnDefs\"\n        [defaultColDef]=\"tableConfiguration.defaultColDef\"\n        [rowSelection]=\"tableConfiguration.rowSelectionOption\"\n        [pagination]=\"tableConfiguration.pagination.enabled\"\n        [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\n        [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\n        [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\n        [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\n        (gridReady)=\"onGridReady($event)\"\n        (rowSelected)=\"onRowSelected($event)\"\n        (rowClicked)=\"onRowClicked($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (columnMoved)=\"onColumnMoved($event)\"\n        (sortChanged)=\"onSortChanged($event)\"\n        (paginationChanged)=\"onPaginationChanged($event)\"\n        (firstDataRendered)=\"onFirstDataRendered($event)\"\n        (filterChanged)=\"onFilterChanged($event)\"\n        (cellValueChanged)=\"onCellValueChanged($event)\"\n        [masterDetail]=\"tableConfiguration.masterDetail\"\n        [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\n        [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\n        [enableCellTextSelection]=\"true\"\n        [gridOptions]=\"gridOptions\"\n        [ensureDomOrder]=\"true\"\n        [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\n    </div>\n\n    @if (columnToolVisible && columnsListselectionForm) {\n      <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\n        <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\n          <span\n            class=\"cursor-pointer text-primary\"\n            tooltipPlacement=\"top\"\n            cTooltip=\"Column Preference\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\n            <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\n          </span>\n\n          <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\n            <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\n          </span>\n        </div>\n      </div>\n\n      <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\n        <c-offcanvas-header>\n          <h5 cOffcanvasTitle>Table Column Preference</h5>\n          <button\n            cButtonClose\n            size=\"sm\"\n            class=\"text-reset ms-auto\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\n            aria-label=\"Close\"></button>\n        </c-offcanvas-header>\n        <c-offcanvas-body>\n          <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\n            @for (item of this.tableGridState; track $index) {\n              <div class=\"checkbox-item px-1\">\n                <c-form-check>\n                  <input\n                    (change)=\"getCheckboxStatus($event, item.key)\"\n                    [checked]=\"columnsListselectionForm.get(item.key)?.value\"\n                    cFormCheckInput\n                    [id]=\"'cb_' + item.key\"\n                    type=\"checkbox\"\n                    [formControl]=\"columnsListselectionForm.controls[item.key]\" />\n                  <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\n                    {{ item?.headerName || item?.label }}</label\n                  >\n                </c-form-check>\n              </div>\n            }\n          </div>\n          <div class=\"align d-flex gap-3 justify-content-end\">\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreferenceV2()\">\n              Clear\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreference()\">\n              Reset\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"updatetablePreference()\">\n              Update\n            </button>\n          </div>\n        </c-offcanvas-body>\n      </c-offcanvas>\n    }\n  </div>\n</div>\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { tableConfiguration: [{
+                type: Input
+            }], columnToolVisible: [{
+                type: Input
+            }], initialPageNumber: [{
+                type: Input
+            }], tableGridReady: [{
+                type: Output
+            }], tableRowSelection: [{
+                type: Output
+            }], tableRowClicked: [{
+                type: Output
+            }], columnStateEvent: [{
+                type: Output
+            }], pageChange: [{
+                type: Output
+            }], filterChanged: [{
+                type: Output
+            }], cellValueChanged: [{
+                type: Output
+            }] } });
+
+ModuleRegistry.registerModules([ClientSideRowModelModule, CsvExportModule, _EditCoreModule]);
+class TableGridModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: TableGridModule, declarations: [TableGridComponent], imports: [CommonModule, AgGridModule, FormModule, ReactiveFormsModule, ButtonModule, OffcanvasModule, TooltipModule, IconModule], exports: [TableGridComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridModule, imports: [CommonModule, AgGridModule, FormModule, ReactiveFormsModule, ButtonModule, OffcanvasModule, TooltipModule, IconModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [TableGridComponent],
+                    imports: [CommonModule, AgGridModule, FormModule, ReactiveFormsModule, ButtonModule, OffcanvasModule, TooltipModule, IconModule],
+                    exports: [TableGridComponent]
+                }]
+        }] });
+
+class ITableGridConfiguration {
+    initialState;
+    columnDefs = [];
+    rows;
+    defaultColDef;
+    rowSelectionOption;
+    pagination;
+    themeClass;
+    tableTheme;
+    tablename;
+    selectionColumnDef;
+    tablePreference;
+    detailCellRendererParams;
+    detailCellRenderer;
+    frameworkComponents;
+    tooltipShowDelay;
+    masterDetail;
+    tableClasses = ['default-ag-layout'];
+    defaultGridOptions;
+    constructor() {
+        this.pagination = new ITableGridPagination();
+        this.tablename = '';
+        this.tableTheme = '';
+        this.defaultColDef = {
+            filter: 'agTextColumnFilter',
+            floatingFilter: false
+        };
+        this.themeClass = 'ag-theme-quartz';
+        this.rowSelectionOption = {
+            enableClickSelection: true,
+            mode: 'singleRow',
+            checkboxes: false
+        };
+        this.masterDetail = false;
+        this.tablePreference = { disableRemovecolumn: false, disableResetPreference: false, disableUpdatePreference: false };
+        this.tooltipShowDelay = 100;
+    }
+}
+class ITableGridPagination {
+    configurationService = inject(ConfigurationServiceLib);
+    enabled = true;
+    paginationPageSize = this.configurationService.allConfigValues()?.tableGridConfig.defaultPageSize || 20;
+    paginationPageSizeSelector = this.configurationService.allConfigValues()?.tableGridConfig.defaultPageSizeSelector || false;
+}
+
 /*
  * Public API Surface of utils
  */
@@ -1430,5 +2173,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { CheckboxCellRendererComponent, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, EditionListGroupedComponent, FormFieldType, IndustryUpdateListboxCellRendererComponent, MultiFormComponent, MultiFormModule, PageStatusCellRendererComponent };
+export { CheckboxCellRendererComponent, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, EditionListGroupedComponent, FormFieldType, GenericFilterModelComponent, ITableGridConfiguration, ITableGridPagination, IndustryUpdateListboxCellRendererComponent, MultiFormComponent, MultiFormModule, PageStatusCellRendererComponent, StatusSelectCellRendererComponent, TableGridComponent, TableGridModule };
 //# sourceMappingURL=pongrass-utils.mjs.map