@pongrass/utils 1.1.6-v20 → 1.1.7-v20

package/fesm2022/pongrass-utils.mjs

@@ -1,14 +1,14 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, Component, ViewChild, inject, EventEmitter, Input, Output, ElementRef, HostListener, Directive, Renderer2, forwardRef, NgModule, effect, input, output } from '@angular/core';
+import { signal, Injectable, Component, ViewChild, inject, EventEmitter, Input, Output, ElementRef, HostListener, Directive, Renderer2, forwardRef, NgModule, effect, input, output, ChangeDetectorRef, NgZone, untracked, ViewContainerRef, ApplicationRef, EnvironmentInjector, Injector, createComponent } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
 import * as i3 from '@angular/forms';
 import { FormsModule, NgControl, NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i4 from '@coreui/angular-pro';
-import { FormModule, ButtonModule, MultiSelectModule, MultiSelectComponent, InputGroupComponent, DatePickerModule, ModalModule, TooltipModule, AutocompleteModule, FormCheckInputDirective, TimePickerModule, OffcanvasModule, SpinnerModule, FormPasswordDirective, AlertModule } from '@coreui/angular-pro';
+import * as i1 from '@coreui/angular-pro';
+import { FormModule, ButtonModule, CalendarModule, MultiSelectModule, BadgeModule, MultiSelectComponent, InputGroupComponent, DatePickerModule, ModalModule, TooltipModule, AutocompleteModule, FormCheckInputDirective, TimePickerModule, OffcanvasModule, SpinnerModule, FormPasswordDirective, AlertModule } from '@coreui/angular-pro';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { BehaviorSubject, map, lastValueFrom, Subject } from 'rxjs';
-import * as i5 from '@coreui/icons-angular';
+import * as i1$1 from '@coreui/icons-angular';
 import { IconModule } from '@coreui/icons-angular';
 import * as i8 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@@ -16,7 +16,7 @@ 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 * as i1$2 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';
@@ -120,9 +120,36 @@ class CustomSelectFilterComponent {
     getUniqueValues() {
         const values = new Set();
         this.params.api.forEachNode(node => {
-            values.add(node.data[this.params.colDef.field]);
+            const value = node.data[this.params.colDef.field];
+            const formattedValue = this.getFormattedValue(node, value);
+            values.add(formattedValue);
         });
-        return Array.from(values).sort();
+        return Array.from(values).sort((a, b) => {
+            if (a === 'BLANK')
+                return -1;
+            if (b === 'BLANK')
+                return 1;
+            return a.toLowerCase().localeCompare(b.toLowerCase());
+        });
+    }
+    getFormattedValue(node, value) {
+        const formatter = this.params.colDef.valueFormatter;
+        let formattedValue = value;
+        if (formatter && typeof formatter === 'function') {
+            formattedValue = formatter({
+                value,
+                data: node.data,
+                node,
+                colDef: this.params.colDef,
+                column: this.params.column,
+                api: this.params.api,
+                context: this.params.context
+            });
+        }
+        if (formattedValue === null || formattedValue === undefined || formattedValue === '') {
+            return 'BLANK';
+        }
+        return String(formattedValue);
     }
     isValueSelected(value) {
         return this.selectedValues.has(value);
@@ -168,7 +195,8 @@ class CustomSelectFilterComponent {
     }
     doesFilterPass(params) {
         const value = params.data[this.params.colDef.field];
-        return this.selectedValues.has(value);
+        const formattedValue = this.getFormattedValue(params.node, value);
+        return this.selectedValues.has(formattedValue);
     }
     isFilterActive() {
         return this.selectedValues.size !== this.uniqueValues.length;
@@ -185,6 +213,13 @@ class CustomSelectFilterComponent {
         }
         this.filteredValues = [...this.uniqueValues];
     }
+    onReset() {
+        this.searchText = '';
+        this.selectedValues = new Set(this.uniqueValues);
+        this.filteredValues = [...this.uniqueValues];
+        this.isIndeterminate = false;
+        this.params.filterChangedCallback();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomSelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CustomSelectFilterComponent, isStandalone: true, selector: "prg-ws-custom-set-filter", viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `
     <div class="select-filter-container">
@@ -210,12 +245,15 @@ class CustomSelectFilterComponent {
           </label>
         }
       </div>
+      <div class="filter-actions">
+        <button cButton color="primary" size="sm" variant="outline" (click)="onReset()">Reset</button>
+      </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: 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: 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}.filter-actions{display:flex;justify-content:flex-end;margin-top:8px;border-top:1px solid #e0e0e0;padding-top:8px}\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: i1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.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: CustomSelectFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'prg-ws-custom-set-filter', standalone: true, imports: [FormsModule, FormModule], template: `
+            args: [{ selector: 'prg-ws-custom-set-filter', standalone: true, imports: [FormsModule, FormModule, ButtonModule], template: `
     <div class="select-filter-container">
       <input type="text" #searchInput cFormControl [(ngModel)]="searchText" (input)="onSearchChange()" placeholder="Search..." class="search-box" />
       @if (filteredValues.length > 0) {
@@ -239,13 +277,382 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
           </label>
         }
       </div>
+      <div class="filter-actions">
+        <button cButton color="primary" size="sm" variant="outline" (click)="onReset()">Reset</button>
+      </div>
     </div>
-  `, 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"] }]
+  `, 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}.filter-actions{display:flex;justify-content:flex-end;margin-top:8px;border-top:1px solid #e0e0e0;padding-top:8px}\n"] }]
         }], propDecorators: { searchInputRef: [{
                 type: ViewChild,
                 args: ['searchInput']
             }] } });
 
+class AgDateRangeFilterComponent {
+    cdr;
+    params;
+    startDate = null;
+    endDate = null;
+    viewDate = new Date();
+    selectedPresetLabel = null;
+    presets = [
+        {
+            label: 'Today',
+            isSelected: false,
+            calculate: () => {
+                const now = new Date();
+                now.setHours(0, 0, 0, 0);
+                return { start: now, end: now };
+            }
+        },
+        {
+            label: 'Yesterday',
+            isSelected: false,
+            calculate: () => {
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                const yesterday = new Date(today);
+                yesterday.setDate(today.getDate() - 1);
+                return { start: yesterday, end: yesterday };
+            }
+        },
+        {
+            label: 'This Week',
+            isSelected: false,
+            calculate: () => {
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                const day = today.getDay() || 7;
+                const start = new Date(today);
+                if (day !== 1)
+                    start.setDate(today.getDate() - (day - 1));
+                const end = new Date(start);
+                end.setDate(start.getDate() + 6);
+                return { start, end };
+            }
+        },
+        {
+            label: 'This Month',
+            isSelected: false,
+            calculate: () => {
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                const start = new Date(today.getFullYear(), today.getMonth(), 1);
+                const end = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+                return { start, end };
+            }
+        },
+        {
+            label: 'This Quarter',
+            isSelected: false,
+            calculate: () => {
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                const currQuarter = Math.floor(today.getMonth() / 3);
+                const start = new Date(today.getFullYear(), currQuarter * 3, 1);
+                const end = new Date(today.getFullYear(), start.getMonth() + 3, 0);
+                return { start, end };
+            }
+        },
+        {
+            label: 'Last Week',
+            isSelected: false,
+            calculate: () => {
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                const start = new Date(today);
+                const day = start.getDay() || 7;
+                start.setDate(today.getDate() - day - 6);
+                const end = new Date(start);
+                end.setDate(start.getDate() + 6);
+                return { start, end };
+            }
+        },
+        {
+            label: 'Last Month',
+            isSelected: false,
+            calculate: () => {
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                const start = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+                const end = new Date(today.getFullYear(), today.getMonth(), 0);
+                return { start, end };
+            }
+        },
+        {
+            label: 'Last Quarter',
+            isSelected: false,
+            calculate: () => {
+                const today = new Date();
+                today.setHours(0, 0, 0, 0);
+                const lastQuarter = Math.floor(today.getMonth() / 3) - 1;
+                const start = new Date(today.getFullYear(), lastQuarter * 3, 1);
+                const end = new Date(today.getFullYear(), start.getMonth() + 3, 0);
+                return { start, end };
+            }
+        },
+        {
+            label: 'Past 7 days',
+            isSelected: false,
+            calculate: () => this.calculatePastDays(7)
+        },
+        {
+            label: 'Past 30 days',
+            isSelected: false,
+            calculate: () => this.calculatePastDays(30)
+        },
+        {
+            label: 'Past 90 days',
+            isSelected: false,
+            calculate: () => this.calculatePastDays(90)
+        },
+        {
+            label: 'Past 180 days',
+            isSelected: false,
+            calculate: () => this.calculatePastDays(180)
+        },
+        {
+            label: 'Past 365 days',
+            isSelected: false,
+            calculate: () => this.calculatePastDays(365)
+        }
+    ];
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    agInit(params) {
+        this.params = params;
+    }
+    ngAfterViewInit() {
+        // Attempt to match preset after view initialization
+        if (this.startDate && this.endDate) {
+            this.matchAndSelectPreset();
+            this.cdr.detectChanges();
+        }
+    }
+    onStartDateChange(date) {
+        this.startDate = date;
+        this.selectedPresetLabel = null;
+        this.clearPresetSelection();
+        // Check if both dates are now set and try to match a preset
+        if (this.startDate && this.endDate) {
+            this.matchAndSelectPreset();
+        }
+        this.params.filterChangedCallback();
+    }
+    onEndDateChange(date) {
+        this.endDate = date;
+        this.selectedPresetLabel = null;
+        this.clearPresetSelection();
+        // Check if both dates are now set and try to match a preset
+        if (this.startDate && this.endDate) {
+            this.matchAndSelectPreset();
+        }
+        this.params.filterChangedCallback();
+    }
+    clearPresetSelection() {
+        this.presets.forEach(p => p.isSelected = false);
+    }
+    calculatePastDays(days) {
+        const today = new Date();
+        today.setHours(0, 0, 0, 0);
+        const start = new Date(today);
+        start.setDate(today.getDate() - days);
+        return { start, end: today };
+    }
+    normalizeDate(date) {
+        return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+    }
+    areDatesEqual(date1, date2) {
+        if (!date1 && !date2)
+            return true;
+        if (!date1 || !date2)
+            return false;
+        return this.normalizeDate(date1) === this.normalizeDate(date2);
+    }
+    matchAndSelectPreset() {
+        if (!this.startDate || !this.endDate) {
+            this.clearPresetSelection();
+            this.selectedPresetLabel = null;
+            return;
+        }
+        for (const preset of this.presets) {
+            if (preset.calculate) {
+                try {
+                    const { start, end } = preset.calculate();
+                    if (this.areDatesEqual(this.startDate, start) &&
+                        this.areDatesEqual(this.endDate, end)) {
+                        this.clearPresetSelection();
+                        preset.isSelected = true;
+                        this.selectedPresetLabel = preset.label;
+                        console.log('Matched preset:', preset.label);
+                        return;
+                    }
+                }
+                catch (error) {
+                    console.error('Error calculating preset:', preset.label, error);
+                }
+            }
+        }
+        this.clearPresetSelection();
+        this.selectedPresetLabel = null;
+    }
+    onPresetClick(preset) {
+        if (preset.calculate) {
+            const { start, end } = preset.calculate();
+            this.clearPresetSelection();
+            preset.isSelected = true;
+            this.selectedPresetLabel = preset.label;
+            this.startDate = start;
+            this.endDate = end;
+            this.viewDate = new Date(start);
+            this.cdr.detectChanges();
+            setTimeout(() => {
+                this.params.filterChangedCallback();
+            }, 0);
+        }
+    }
+    isFilterActive() {
+        return !!this.startDate || !!this.endDate;
+    }
+    doesFilterPass(params) {
+        const field = this.params.colDef.field;
+        if (!field)
+            return false;
+        const value = params.data[field];
+        if (!value)
+            return false;
+        const rowDate = new Date(value);
+        const rowTime = new Date(rowDate.getFullYear(), rowDate.getMonth(), rowDate.getDate()).getTime();
+        let startLimit = -Infinity;
+        if (this.startDate) {
+            startLimit = new Date(this.startDate.getFullYear(), this.startDate.getMonth(), this.startDate.getDate()).getTime();
+        }
+        let endLimit = Infinity;
+        if (this.endDate) {
+            endLimit = new Date(this.endDate.getFullYear(), this.endDate.getMonth(), this.endDate.getDate()).getTime();
+        }
+        return rowTime >= startLimit && rowTime <= endLimit;
+    }
+    getModel() {
+        return {
+            startDate: this.startDate,
+            endDate: this.endDate,
+            selectedPreset: this.selectedPresetLabel
+        };
+    }
+    setModel(model) {
+        console.log('setModel called with:', model);
+        if (model) {
+            // Parse dates from model
+            this.startDate = model.startDate ? new Date(model.startDate) : null;
+            this.endDate = model.endDate ? new Date(model.endDate) : null;
+            this.selectedPresetLabel = model.selectedPreset || null;
+            // Set view date
+            if (this.startDate) {
+                this.viewDate = new Date(this.startDate);
+            }
+            else {
+                this.viewDate = new Date();
+            }
+            // Clear all selections first
+            this.clearPresetSelection();
+            // If we have a saved preset label, try to select it directly
+            if (this.selectedPresetLabel) {
+                const preset = this.presets.find(p => p.label === this.selectedPresetLabel);
+                if (preset) {
+                    preset.isSelected = true;
+                    console.log('Restored preset selection:', this.selectedPresetLabel);
+                }
+            }
+            else if (this.startDate && this.endDate) {
+                // Otherwise try to match dates to a preset
+                this.matchAndSelectPreset();
+            }
+        }
+        else {
+            this.startDate = null;
+            this.endDate = null;
+            this.selectedPresetLabel = null;
+            this.clearPresetSelection();
+            this.viewDate = new Date();
+        }
+        this.cdr.detectChanges();
+    }
+    onReset() {
+        this.startDate = null;
+        this.endDate = null;
+        this.selectedPresetLabel = null;
+        this.clearPresetSelection();
+        this.viewDate = new Date();
+        this.cdr.detectChanges();
+        this.params.filterChangedCallback();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgDateRangeFilterComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: AgDateRangeFilterComponent, isStandalone: true, selector: "prg-ws-ag-date-range-filter", ngImport: i0, template: `
+    <div class="date-range-filter-container">
+      <div class="filter-body">
+        <div class="calendar-wrapper">
+          <c-calendar
+            [range]="true"
+            [calendars]="2"
+            [startDate]="startDate"
+            [endDate]="endDate"
+            [calendarDate]="viewDate"
+            (startDateChange)="onStartDateChange($event)"
+            (endDateChange)="onEndDateChange($event)"
+            locale="en-US">
+          </c-calendar>
+        </div>
+        <div class="presets-list">
+          @for (preset of presets; track preset.label) {
+            <div class="preset-item" 
+                 [class.active]="preset.isSelected"
+                 (click)="onPresetClick(preset)">
+              {{ preset.label }}
+            </div>
+          }
+        </div>
+      </div>
+      <div class="filter-actions d-flex justify-content-end mt-2 pt-2 border-top">
+        <button cButton color="primary" size="sm" variant="outline" (click)="onReset()">Reset</button>
+      </div>
+    </div>
+  `, isInline: true, styles: [".date-range-filter-container{padding:10px;min-width:600px}.filter-body{display:flex;gap:10px}.calendar-wrapper{flex:1;border:1px solid #e0e0e0;border-radius:4px}.presets-list{width:150px;border-left:1px solid #e0e0e0;padding-left:10px;display:flex;flex-direction:column;gap:4px}.preset-item{padding:6px 10px;cursor:pointer;border-radius:4px;font-size:.9em;transition:background-color .2s,color .2s}.preset-item:hover{background-color:#f0f0f0}.preset-item.active{background-color:var(--cui-primary, #321fdb);color:#fff}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: FormModule }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i1.CalendarComponent, selector: "c-calendar", inputs: ["calendarDate", "calendars", "dayFormat", "disabledDates", "startDate", "endDate", "firstDayOfWeek", "locale", "maxDate", "minDate", "navigation", "navYearFirst", "range", "view", "weekdayFormat", "dateFilter", "selectAdjacentDays", "showAdjacentDays", "selectionType", "showWeekNumber", "weekNumbersLabel", "ariaNextMonthLabel", "ariaNextYearLabel", "ariaPrevMonthLabel", "ariaPrevYearLabel"], outputs: ["calendarDateChange", "endDateChange", "startDateChange", "viewChange", "calendarCellHover"], exportAs: ["cCalendar"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: AgDateRangeFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'prg-ws-ag-date-range-filter', standalone: true, imports: [CommonModule, FormsModule, FormModule, ButtonModule, CalendarModule], template: `
+    <div class="date-range-filter-container">
+      <div class="filter-body">
+        <div class="calendar-wrapper">
+          <c-calendar
+            [range]="true"
+            [calendars]="2"
+            [startDate]="startDate"
+            [endDate]="endDate"
+            [calendarDate]="viewDate"
+            (startDateChange)="onStartDateChange($event)"
+            (endDateChange)="onEndDateChange($event)"
+            locale="en-US">
+          </c-calendar>
+        </div>
+        <div class="presets-list">
+          @for (preset of presets; track preset.label) {
+            <div class="preset-item" 
+                 [class.active]="preset.isSelected"
+                 (click)="onPresetClick(preset)">
+              {{ preset.label }}
+            </div>
+          }
+        </div>
+      </div>
+      <div class="filter-actions d-flex justify-content-end mt-2 pt-2 border-top">
+        <button cButton color="primary" size="sm" variant="outline" (click)="onReset()">Reset</button>
+      </div>
+    </div>
+  `, styles: [".date-range-filter-container{padding:10px;min-width:600px}.filter-body{display:flex;gap:10px}.calendar-wrapper{flex:1;border:1px solid #e0e0e0;border-radius:4px}.presets-list{width:150px;border-left:1px solid #e0e0e0;padding-left:10px;display:flex;flex-direction:column;gap:4px}.preset-item{padding:6px 10px;cursor:pointer;border-radius:4px;font-size:.9em;transition:background-color .2s,color .2s}.preset-item:hover{background-color:#f0f0f0}.preset-item.active{background-color:var(--cui-primary, #321fdb);color:#fff}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }] });
+
 class CheckboxCellRendererComponent {
     value;
     params;
@@ -277,7 +684,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: i1.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,
@@ -317,7 +724,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: i1.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,
@@ -607,7 +1014,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: "prg-ws-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: "prg-ws-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: i1.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: i1.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "component", type: i1.MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: ["label", "disabled"] }, { kind: "component", type: i1.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,
@@ -680,7 +1087,7 @@ 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: "prg-ws-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: 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: "prg-ws-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: i1.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PageStatusCellRendererComponent, decorators: [{
             type: Component,
@@ -712,22 +1119,262 @@ class StatusSelectCellRendererComponent {
         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: "prg-ws-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: i4.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: StatusSelectCellRendererComponent, isStandalone: true, selector: "prg-ws-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: i1.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: 'prg-ws-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"] }]
         }] });
 
+class BadgeCellRendererComponent {
+    displayValue = '';
+    badgeColor = 'secondary';
+    textColor = 'black';
+    customStyles = {};
+    agInit(params) {
+        this.updateValue(params);
+    }
+    refresh(params) {
+        this.updateValue(params);
+        return true;
+    }
+    updateValue(params) {
+        // Determine the value to display
+        this.displayValue = params.valueFormatted || params.value;
+        const rendererParams = params.colDef?.cellRendererParams;
+        // reset defaults
+        this.badgeColor = 'secondary';
+        this.textColor = 'black';
+        this.customStyles = {};
+        if (rendererParams) {
+            if (rendererParams.textColor) {
+                this.textColor = rendererParams.textColor;
+            }
+            // 1. Check for static color
+            if (rendererParams.color) {
+                this.applyColor(rendererParams.color);
+            }
+            // 2. Check for dynamic color map
+            if (rendererParams.colorMap) {
+                // value could be anything, assume string key
+                const key = params.value;
+                if (rendererParams.colorMap[key]) {
+                    this.applyColor(rendererParams.colorMap[key]);
+                }
+            }
+            // 3. Check if color depends on another field in the row
+            if (rendererParams.colorField && params.data) {
+                const colorValue = params.data[rendererParams.colorField];
+                if (colorValue) {
+                    this.applyColor(colorValue);
+                }
+            }
+        }
+    }
+    applyColor(color) {
+        if (!color)
+            return;
+        const themeColors = ['primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', 'dark'];
+        if (themeColors.includes(color.toLowerCase())) {
+            this.badgeColor = color;
+            delete this.customStyles['background-color'];
+        }
+        else {
+            // Assume it's a custom CSS color (hex, rgb, named color, etc.)
+            this.badgeColor = ''; // Remove utility class color
+            this.customStyles['background-color'] = color;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BadgeCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: BadgeCellRendererComponent, isStandalone: true, selector: "prg-ws-badge-cell-renderer", ngImport: i0, template: `
+    @if (displayValue) {
+    <c-badge
+      [color]="badgeColor"
+      [ngStyle]="customStyles"
+      [textColor]="textColor"
+      class="text-wrap"
+    >
+      {{ displayValue }}
+    </c-badge>
+    }
+  `, isInline: true, styles: ["c-badge{font-size:.875rem;font-weight:500}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: BadgeModule }, { kind: "component", type: i1.BadgeComponent, selector: "c-badge", inputs: ["color", "position", "shape", "size", "textColor", "textBgColor"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BadgeCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'prg-ws-badge-cell-renderer', standalone: true, imports: [CommonModule, BadgeModule], template: `
+    @if (displayValue) {
+    <c-badge
+      [color]="badgeColor"
+      [ngStyle]="customStyles"
+      [textColor]="textColor"
+      class="text-wrap"
+    >
+      {{ displayValue }}
+    </c-badge>
+    }
+  `, styles: ["c-badge{font-size:.875rem;font-weight:500}\n"] }]
+        }] });
+
+class IconTextCellRendererComponent {
+    displayValue = '';
+    iconName = '';
+    iconPosition = 'start';
+    isRed = false;
+    agInit(params) {
+        this.updateValue(params);
+    }
+    refresh(params) {
+        this.updateValue(params);
+        return true;
+    }
+    updateValue(params) {
+        this.displayValue = params.valueFormatted || params.value;
+        const rendererParams = params.colDef?.cellRendererParams;
+        if (rendererParams) {
+            // Icon Logic
+            if (typeof rendererParams.iconName === 'function') {
+                this.iconName = rendererParams.iconName(params);
+            }
+            else {
+                this.iconName = rendererParams.iconName || '';
+            }
+            this.iconPosition = rendererParams.iconPosition || 'start';
+            // Red Condition Logic
+            if (rendererParams.isRedCondition && typeof rendererParams.isRedCondition === 'function') {
+                this.isRed = rendererParams.isRedCondition(params);
+            }
+            else {
+                this.isRed = false;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IconTextCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: IconTextCellRendererComponent, isStandalone: true, selector: "prg-ws-icon-text-cell-renderer", ngImport: i0, template: `
+    <div class="d-flex align-items-center" [style.color]="isRed ? 'red' : 'inherit'">
+      @if (iconName && iconPosition === 'start') {
+        <c-icon [name]="iconName" [size]="'sm'" class="me-2"></c-icon>
+      }
+
+      <span class="text-truncate">{{ displayValue }}</span>
+
+      @if (iconName && iconPosition === 'end') {
+        <c-icon [name]="iconName" [size]="'sm'" class="ms-2"></c-icon>
+      }
+    </div>
+  `, isInline: true, styles: [":host{display:block;width:100%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1$1.IconComponent, selector: "c-icon", inputs: ["content", "attributes", "customClasses", "size", "title", "use", "height", "width", "name", "viewBox"], exportAs: ["cIconComponent"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IconTextCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'prg-ws-icon-text-cell-renderer', standalone: true, imports: [CommonModule, IconModule], template: `
+    <div class="d-flex align-items-center" [style.color]="isRed ? 'red' : 'inherit'">
+      @if (iconName && iconPosition === 'start') {
+        <c-icon [name]="iconName" [size]="'sm'" class="me-2"></c-icon>
+      }
+
+      <span class="text-truncate">{{ displayValue }}</span>
+
+      @if (iconName && iconPosition === 'end') {
+        <c-icon [name]="iconName" [size]="'sm'" class="ms-2"></c-icon>
+      }
+    </div>
+  `, styles: [":host{display:block;width:100%;overflow:hidden}\n"] }]
+        }] });
+
+class HyperlinkCellRendererComponent {
+    displayValue = '';
+    href = '';
+    target = '_blank';
+    isLink = false;
+    agInit(params) {
+        this.updateValue(params);
+    }
+    refresh(params) {
+        this.updateValue(params);
+        return true;
+    }
+    updateValue(params) {
+        this.displayValue = params.valueFormatted || params.value;
+        const value = params.value;
+        if (!value) {
+            this.isLink = false;
+            return;
+        }
+        const rendererParams = params.colDef?.cellRendererParams || {};
+        const type = rendererParams.type || 'auto'; // 'link', 'email', 'auto'
+        if (type === 'email') {
+            this.setAsEmail(value);
+        }
+        else if (type === 'link') {
+            this.setAsLink(value, rendererParams.target);
+        }
+        else {
+            // Auto detection
+            if (typeof value === 'string' && value.includes('@') && !value.includes(' ')) { // Simple email check
+                this.setAsEmail(value);
+            }
+            else if (typeof value === 'string' && (value.startsWith('http') || value.startsWith('www.'))) {
+                this.setAsLink(value, rendererParams.target);
+            }
+            else {
+                this.isLink = false;
+            }
+        }
+    }
+    setAsEmail(value) {
+        this.isLink = true;
+        this.href = `mailto:${value}`;
+        this.target = '_self';
+    }
+    setAsLink(value, targetParam) {
+        this.isLink = true;
+        let url = value;
+        // If it starts with www. but no protocol, add https://
+        if (url.startsWith('www.')) {
+            url = `https://${url}`;
+        }
+        else if (!url.startsWith('http') && !url.startsWith('//')) {
+            // If forced as link but no protocol, keep as is or assume https? 
+            // Usually browsers handle "google.com" as relative if in href, so prepending https is safer for external links.
+            // However, if it's a relative link intended, we shouldn't touch it.
+            // Given "display link or email", it's likely external or at least absolute.
+            // But to be safe, if strictly 'link' type and no protocol, I might leave it or prepend.
+            // Let's prepend https:// if it looks like a domain (contains dot).
+            if (url.includes('.')) {
+                url = `https://${url}`;
+            }
+        }
+        this.href = url;
+        this.target = targetParam || '_blank';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HyperlinkCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: HyperlinkCellRendererComponent, isStandalone: true, selector: "prg-ws-hyperlink-cell-renderer", ngImport: i0, template: `
+    @if (isLink) {
+      <a [href]="href" [target]="target" (click)="$event.stopPropagation()">{{ displayValue }}</a>
+    } @else {
+      <span>{{ displayValue }}</span>
+    }
+  `, isInline: true, styles: [":host{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a{text-decoration:underline;cursor:pointer}a:hover{text-decoration:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: HyperlinkCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'prg-ws-hyperlink-cell-renderer', standalone: true, imports: [CommonModule], template: `
+    @if (isLink) {
+      <a [href]="href" [target]="target" (click)="$event.stopPropagation()">{{ displayValue }}</a>
+    } @else {
+      <span>{{ displayValue }}</span>
+    }
+  `, styles: [":host{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}a{text-decoration:underline;cursor:pointer}a:hover{text-decoration:none}\n"] }]
+        }] });
+
 var FormFieldType;
 (function (FormFieldType) {
     FormFieldType["Text"] = "text";
     FormFieldType["Email"] = "email";
     FormFieldType["Number"] = "number";
     FormFieldType["Select"] = "select";
-    FormFieldType["Autosuggest"] = "autosuggest";
     FormFieldType["Textarea"] = "textarea";
     FormFieldType["Date"] = "date";
+    FormFieldType["NewDate"] = "new-date";
     FormFieldType["Datetime"] = "datetime";
     FormFieldType["Switch"] = "switch";
     FormFieldType["Checkbox"] = "checkbox";
@@ -1400,7 +2047,7 @@ class DateTimePickerComponent {
                 useExisting: forwardRef(() => DateTimePickerComponent),
                 multi: true
             }
-        ], ngImport: i0, template: "<div class=\"row g-3 align-items-end\">\r\n  <div class=\"col-12 col-md-6\">\r\n    <c-date-picker\r\n      [date]=\"date\"\r\n      [disabled]=\"disabled\"\r\n      (valueChange)=\"onDateChange($event)\"\r\n      inputReadOnly=\"true\"\r\n      [showAdjacentDays]=\"false\"\r\n      [value]=\"date\"\r\n      [calendarDate]=\"date\"\r\n      locale=\"en-US\">\r\n    </c-date-picker>\r\n  </div>\r\n\r\n  <div class=\"col-12 col-md-6\">\r\n    <select cSelect class=\"form-select\" [value]=\"timeValue\" [disabled]=\"disabled\" (change)=\"onTimeChange($any($event.target).value)\">\r\n      @if (!date) {\r\n        <option value=\"\">Select time</option>\r\n      }\r\n      @for (time of timeDropdwons; track time.value) {\r\n        <option [value]=\"time.value\">\r\n          {{ time.label }}\r\n        </option>\r\n      }\r\n    </select>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: i4.DatePickerComponent, selector: "c-date-picker", inputs: ["calendars", "placeholder", "date"], outputs: ["dateChange"], exportAs: ["cDatePicker"] }] });
+        ], ngImport: i0, template: "<div class=\"row g-3 align-items-end\">\r\n  <div class=\"col-12 col-md-6\">\r\n    <c-date-picker\r\n      [date]=\"date\"\r\n      [disabled]=\"disabled\"\r\n      (valueChange)=\"onDateChange($event)\"\r\n      inputReadOnly=\"true\"\r\n      [showAdjacentDays]=\"false\"\r\n      [value]=\"date\"\r\n      [calendarDate]=\"date\"\r\n      locale=\"en-US\">\r\n    </c-date-picker>\r\n  </div>\r\n\r\n  <div class=\"col-12 col-md-6\">\r\n    <select cSelect class=\"form-select\" [value]=\"timeValue\" [disabled]=\"disabled\" (change)=\"onTimeChange($any($event.target).value)\">\r\n      @if (!date) {\r\n        <option value=\"\">Select time</option>\r\n      }\r\n      @for (time of timeDropdwons; track time.value) {\r\n        <option [value]=\"time.value\">\r\n          {{ time.label }}\r\n        </option>\r\n      }\r\n    </select>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: i1.DatePickerComponent, selector: "c-date-picker", inputs: ["calendars", "placeholder", "date"], outputs: ["dateChange"], exportAs: ["cDatePicker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
@@ -1436,6 +2083,7 @@ class MultiFormComponent {
     };
     colorCodes$ = ColorsCodes;
     FormFieldType = FormFieldType;
+    today = new Date();
     constructor() {
         this.multiForm = this.formBuilder.group({});
         this.isFormSubmitted = false;
@@ -1517,7 +2165,7 @@ class MultiFormComponent {
                     if (field.type === FormFieldType.Checkbox) {
                         initialValue = this.getTruthyOrFalsy(field.value) || false;
                     }
-                    else if (field.type === FormFieldType.Date) {
+                    else if (field.type === FormFieldType.Date || field.type === FormFieldType.NewDate) {
                         initialValue = field?.value ? new Date(field.value) : this.setDefaultAdvanceDate(new Date(), field?.validations?.defaultAdvance || '');
                     }
                     else {
@@ -1532,7 +2180,7 @@ class MultiFormComponent {
                 if (field.type === FormFieldType.Checkbox) {
                     control.setValue(this.getTruthyOrFalsy(field.value) || false, { emitEvent: false });
                 }
-                else if (field.type === FormFieldType.Date) {
+                else if (field.type === FormFieldType.Date || field.type === FormFieldType.NewDate) {
                     control.setValue(field?.value ? new Date(field.value) : '', { emitEvent: false });
                 }
                 else {
@@ -1621,6 +2269,16 @@ class MultiFormComponent {
             }
         }
     }
+    // public onDateChange(event: any, controlName: string): void {
+    //   const control = this.multiForm.get(controlName);
+    //   if (control && event && event.toString() !== control.value?.toString()) {
+    //     // Use setTimeout to avoid NG0600 signal error if this is called during a signal update cycle
+    //     setTimeout(() => {
+    //       control.setValue(event);
+    //       this.onDateValueChange(event, controlName);
+    //     });
+    //   }
+    // }
     onEditionChange(event) {
         const controlNameWithAt = '@edname';
         const controlNameWithoutAt = 'edname';
@@ -1635,10 +2293,9 @@ class MultiFormComponent {
         }
     }
     handleSearch(field, keyword) {
-        let param = { keyword, userid: 'luke' };
         const fieldConfig = field.config;
-        this.jsonrpcService.postJsonRpcRequest(fieldConfig.method, param).subscribe((response) => {
-            response.result = response.result || [];
+        this.jsonrpcService.postJsonRpcRequest(fieldConfig.method, { keyword }).subscribe((response) => {
+            field.options = response?.result || [];
         });
     }
     setDefaultAdvanceDate(currentDate, defaultAdvance) {
@@ -1693,11 +2350,11 @@ 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: "prg-ws-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\" wsCircularFocus>\r\n  @for (row of config?.rows; track $index; let isLast = $last) {\r\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\r\n      @for (field of row; track $index) {\r\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\r\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\r\n            @if (multiForm.controls[field.controlName]) {\r\n              <!-- Label  -->\r\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\r\n                <label\r\n                  [wsShowTooltipIfTruncated]=\"field.label\"\r\n                  cLabel\r\n                  class=\"mb-1 label-multiform single-line-label\"\r\n                  [for]=\"field.controlName\"\r\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\r\n                  [ngStyle]=\"field.styles?.label\"\r\n                  >{{ field.label }}\r\n                  @if (field?.validations?.required || false) {\r\n                    <strong class=\"text-danger\">*</strong>\r\n                  }\r\n                </label>\r\n              }\r\n\r\n              <!-- Text, Email, Number Inputs -->\r\n              @if (\r\n                field.type === FormFieldType.Text ||\r\n                field.type === FormFieldType.Email ||\r\n                field.type === FormFieldType.Number ||\r\n                field.type === FormFieldType.Password ||\r\n                field.type === FormFieldType.Url ||\r\n                field.type === FormFieldType.Tel\r\n              ) {\r\n                <div class=\"position-relative w-100\">\r\n                  <input\r\n                    [type]=\"field.type\"\r\n                    cFormControl\r\n                    [formControlName]=\"field.controlName\"\r\n                    [id]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\r\n                      'no-label-margin': !field.label\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n\r\n                  @if (field.actionButton) {\r\n                    <button\r\n                      type=\"button\"\r\n                      [cTooltip]=\"field.actionButton?.tooltip\"\r\n                      tooltipPlacement=\"top\"\r\n                      cButton\r\n                      color=\"primary\"\r\n                      variant=\"outline\"\r\n                      aria-label=\"action\"\r\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\r\n                      (click)=\"onClickFieldAction($event, field)\">\r\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\r\n                    </button>\r\n                  }\r\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\r\n                    @if (multiForm.controls[field.controlName]?.errors) {\r\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Minimum length {{ field?.validations?.minLength }} characters is required\r\n                        </small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                        </small>\r\n                      }\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <!-- Select Inputs -->\r\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n                <ng-container>\r\n                  <c-multi-select\r\n                    [multiple]=\"field?.multiple || false\"\r\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\r\n                    [clearSearchOnSelect]=\"true\"\r\n                    [selectionType]=\"field?.selectionType || 'tags'\"\r\n                    [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Select'\"\r\n                    [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n                    [options]=\"colorCodes$\"\r\n                    [optionsMaxHeight]=\"400\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\r\n                    [ngStyle]=\"field.styles?.field\">\r\n                    @if (field.type === inputType?.colorSelect) {\r\n                      @for (option of colorCodes$; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.label\">\r\n                          <label class=\"d-flex gap-2\">\r\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n                            {{ option.label }}\r\n                          </label>\r\n                        </c-multi-select-option>\r\n                      }\r\n                    } @else {\r\n                      @for (option of field.options; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.value\">\r\n                          {{ option.label }}\r\n                        </c-multi-select-option>\r\n                      }\r\n                    }\r\n                  </c-multi-select>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Autosuggest Inputs -->\r\n              @else if (field.type === FormFieldType.Autosuggest) {\r\n                <ng-container>\r\n                  <input\r\n                    cAutocomplete\r\n                    [options]=\"field.options\"\r\n                    [searchNoResultsLabel]=\"'No results found'\"\r\n                    cleaner\r\n                    highlightOptionsOnSearch\r\n                    indicator\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Type and search...'\"\r\n                    (inputChange)=\"handleSearch(field, $event)\"\r\n                    [search]=\"{ external: true, global: true }\" />\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Date) {\r\n                <ng-container>\r\n                  <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"field?.label || 'Select Date'\"\r\n                    class=\"form-control\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n                    [bsConfig]=\"{\r\n                      containerClass: 'pongrass-red-datepicker',\r\n                      showWeekNumbers: false,\r\n                      adaptivePosition: true,\r\n                      useUtc: false\r\n                    }\"\r\n                    bsDatepicker\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Datetime) {\r\n                <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n              }\r\n\r\n              <!-- Textarea  -->\r\n              @else if (field.type === FormFieldType.Textarea) {\r\n                <ng-container>\r\n                  <textarea\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    [rows]=\"field?.textareaRows || 4\"\r\n                    [columns]=\"field?.textareaColumns || 4\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [ngStyle]=\"field.styles?.field\"></textarea>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n              <!-- Checkbox  -->\r\n              @else if (field.type === FormFieldType.Checkbox) {\r\n                <div class=\"no-label-margin\">\r\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n                </div>\r\n\r\n              } @else if (field.type === FormFieldType.Switch) {\r\n                <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n                </c-form-check>\r\n              }\r\n              <!-- Decimal input  -->\r\n              @else if (field.type === FormFieldType.Float) {\r\n                <ng-container>\r\n                  <input\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    type=\"number\"\r\n                    class=\"me-2\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [wsDecimalInput]=\"field.validations?.precision || 2\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              } @else if (field.type === FormFieldType.Edition) {\r\n                <ng-container>\r\n                  <prg-ws-edition-list-grouped\r\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\r\n                    [multiple]=\"field?.multiple === false ? false : true\"\r\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\r\n                  </prg-ws-edition-list-grouped>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              } @else if (field.type === FormFieldType.Timepicker) {\r\n                <c-time-picker [formControlName]=\"field.controlName\" seconds />\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (field?.type === FormFieldType.Separator) {\r\n          <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\r\n        }\r\n        @if (field?.type === FormFieldType.FormHeader) {\r\n          <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</form>\r\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}::ng-deep [data-coreui-theme=dark] .bs-datepicker{background:#212631;box-shadow:0 0 10px #323a49}::ng-deep [data-coreui-theme=dark] .bs-datepicker .bs-datepicker-body{border:1px solid #323a49}::ng-deep .pongrass-red-datepicker .bs-datepicker-head{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td span.selected,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td.selected span,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td span[class*=select-]:after,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td[class*=select-] span:after{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td.week span{color:#ff4d5c}\n"], dependencies: [{ kind: "directive", type: CircularFocusDirective, selector: "[wsCircularFocus]", 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: 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: "component", type: i4.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { 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: "[wsDecimalInput]", inputs: ["wsDecimalInput"] }, { kind: "directive", type: ShowTooltipIfTruncatedDirective, selector: "[wsShowTooltipIfTruncated]", inputs: ["wsShowTooltipIfTruncated"] }, { 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: "directive", type: i4.AutocompleteDirective, selector: "input[cAutocomplete]", inputs: ["popperOptionsInput", "allowOnlyDefinedOptions", "cleaner", "clearSearchOnSelect", "delay", "disabled", "highlightOptionsOnSearch", "id", "indicator", "itemSize", "loading", "options", "optionsMaxHeight", "optionTemplate", "optionGroupTemplate", "placeholder", "readOnly", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "showHints", "sizing", "valid", "value", "virtualScroller", "visible", "visibleItems"], outputs: ["inputChange", "optionChange", "valueChange", "visibleChange"], exportAs: ["cAutocomplete"] }, { kind: "component", type: EditionListGroupedComponent, selector: "prg-ws-edition-list-grouped", inputs: ["label", "multiple", "hasFormError"], outputs: ["selectedEditionsChange"] }, { kind: "directive", type: MultiSelectStylerDirective, selector: "[wsMultiSelectStyler]", inputs: ["wsMultiSelectStyler", "options"] }, { kind: "component", type: i4.TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MultiFormComponent, isStandalone: false, selector: "prg-ws-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\" wsCircularFocus>\r\n  @for (row of config?.rows; track $index; let isLast = $last) {\r\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\r\n      @for (field of row; track $index) {\r\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\r\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\r\n            @if (multiForm.controls[field.controlName]) {\r\n              <!-- Label  -->\r\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\r\n                <label\r\n                  [wsShowTooltipIfTruncated]=\"field.label\"\r\n                  cLabel\r\n                  class=\"mb-1 label-multiform single-line-label\"\r\n                  [for]=\"field.controlName\"\r\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\r\n                  [ngStyle]=\"field.styles?.label\"\r\n                  >{{ field.label }}\r\n                  @if (field?.validations?.required || false) {\r\n                    <strong class=\"text-danger\">*</strong>\r\n                  }\r\n                </label>\r\n              }\r\n\r\n              <!-- Text, Email, Number Inputs -->\r\n              @if (\r\n                field.type === FormFieldType.Text ||\r\n                field.type === FormFieldType.Email ||\r\n                field.type === FormFieldType.Number ||\r\n                field.type === FormFieldType.Password ||\r\n                field.type === FormFieldType.Url ||\r\n                field.type === FormFieldType.Tel\r\n              ) {\r\n                <div class=\"position-relative w-100\">\r\n                  <input\r\n                    [type]=\"field.type\"\r\n                    cFormControl\r\n                    [formControlName]=\"field.controlName\"\r\n                    [id]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\r\n                      'no-label-margin': !field.label\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n\r\n                  @if (field.actionButton) {\r\n                    <button\r\n                      type=\"button\"\r\n                      [cTooltip]=\"field.actionButton?.tooltip\"\r\n                      tooltipPlacement=\"top\"\r\n                      cButton\r\n                      color=\"primary\"\r\n                      variant=\"outline\"\r\n                      aria-label=\"action\"\r\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\r\n                      (click)=\"onClickFieldAction($event, field)\">\r\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\r\n                    </button>\r\n                  }\r\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\r\n                    @if (multiForm.controls[field.controlName]?.errors) {\r\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Minimum length {{ field?.validations?.minLength }} characters is required\r\n                        </small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                        </small>\r\n                      }\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <!-- Select Inputs -->\r\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n                <ng-container>\r\n                  <c-multi-select\r\n                    [multiple]=\"field?.multiple || false\"\r\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || field?.search || false\"\r\n                    [searchNoResultsLabel]=\"field?.searchNoResultsLabel || 'No results found'\"\r\n                    [clearSearchOnSelect]=\"true\"\r\n                    [selectionType]=\"field?.selectionType || 'tags'\"\r\n                    [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Select'\"\r\n                    [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n                    [options]=\"colorCodes$\"\r\n                    [optionsMaxHeight]=\"400\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (searchValueChange)=\"handleSearch(field, $event)\"\r\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\r\n                    [ngStyle]=\"field.styles?.field\">\r\n                    @if (field.type === inputType?.colorSelect) {\r\n                      @for (option of colorCodes$; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.label\">\r\n                          <label class=\"d-flex gap-2\">\r\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n                            {{ option.label }}\r\n                          </label>\r\n                        </c-multi-select-option>\r\n                      }\r\n                    } @else {\r\n                      @for (option of field.options; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.value\">\r\n                          {{ option.label }}\r\n                        </c-multi-select-option>\r\n                      }\r\n                    }\r\n                  </c-multi-select>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Date) {\r\n                <ng-container>\r\n                  <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"field?.label || 'Select Date'\"\r\n                    class=\"form-control\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n                    [bsConfig]=\"{\r\n                      containerClass: 'pongrass-red-datepicker',\r\n                      showWeekNumbers: false,\r\n                      adaptivePosition: true,\r\n                      useUtc: false\r\n                    }\"\r\n                    bsDatepicker\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              @else if (field.type === FormFieldType.NewDate) {\r\n                <ng-container>\r\n                  <c-date-picker\r\n                    [formControlName]=\"field.controlName\"\r\n                    [calendarDate]=\"multiForm.controls[field.controlName]?.value\"\r\n                    inputReadOnly=\"true\"\r\n                    [showAdjacentDays]=\"false\"\r\n                    locale=\"en-US\">\r\n                  </c-date-picker>\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date Time input  -->\r\n              @else if (field.type === FormFieldType.Datetime) {\r\n                <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n              }\r\n\r\n              <!-- Textarea  -->\r\n              @else if (field.type === FormFieldType.Textarea) {\r\n                <ng-container>\r\n                  <textarea\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    [rows]=\"field?.textareaRows || 4\"\r\n                    [columns]=\"field?.textareaColumns || 4\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [ngStyle]=\"field.styles?.field\"></textarea>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n              <!-- Checkbox  -->\r\n              @else if (field.type === FormFieldType.Checkbox) {\r\n                <div class=\"no-label-margin\">\r\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n                </div>\r\n              }\r\n\r\n              @else if (field.type === FormFieldType.Switch) {\r\n                <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n                 <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n                </c-form-check>\r\n              }\r\n              <!-- Decimal input  -->\r\n              @else if (field.type === FormFieldType.Float) {\r\n                <ng-container>\r\n                  <input\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    type=\"number\"\r\n                    class=\"me-2\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [wsDecimalInput]=\"field.validations?.precision || 2\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              } @else if (field.type === FormFieldType.Edition) {\r\n                <ng-container>\r\n                  <prg-ws-edition-list-grouped\r\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\r\n                    [multiple]=\"field?.multiple === false ? false : true\"\r\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\r\n                  </prg-ws-edition-list-grouped>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              } @else if (field.type === FormFieldType.Timepicker) {\r\n                <c-time-picker [formControlName]=\"field.controlName\" seconds />\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (field?.type === FormFieldType.Separator) {\r\n          <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\r\n        }\r\n        @if (field?.type === FormFieldType.FormHeader) {\r\n          <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</form>\r\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}::ng-deep [data-coreui-theme=dark] .bs-datepicker{background:#212631;box-shadow:0 0 10px #323a49}::ng-deep [data-coreui-theme=dark] .bs-datepicker .bs-datepicker-body{border:1px solid #323a49}::ng-deep .pongrass-red-datepicker .bs-datepicker-head{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td span.selected,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td.selected span,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td span[class*=select-]:after,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td[class*=select-] span:after{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td.week span{color:#ff4d5c}\n"], dependencies: [{ kind: "directive", type: CircularFocusDirective, selector: "[wsCircularFocus]", 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: i1.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: i1.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: i1.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "component", type: i1.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: i1.FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: i1$1.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "component", type: i1.DatePickerComponent, selector: "c-date-picker", inputs: ["calendars", "placeholder", "date"], outputs: ["dateChange"], exportAs: ["cDatePicker"] }, { kind: "directive", type: DecimalInputDirective, selector: "[wsDecimalInput]", inputs: ["wsDecimalInput"] }, { kind: "directive", type: ShowTooltipIfTruncatedDirective, selector: "[wsShowTooltipIfTruncated]", inputs: ["wsShowTooltipIfTruncated"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i1.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: "prg-ws-edition-list-grouped", inputs: ["label", "multiple", "hasFormError"], outputs: ["selectedEditionsChange"] }, { kind: "directive", type: MultiSelectStylerDirective, selector: "[wsMultiSelectStyler]", inputs: ["wsMultiSelectStyler", "options"] }, { kind: "component", type: i1.TimePickerComponent, selector: "c-time-picker", inputs: ["cleaner", "dateTimeFormatOptions", "disabled", "filterHours", "filterMinutes", "filterSeconds", "indicator", "inputReadOnly", "locale", "placeholder", "seconds", "size", "time", "variant", "valid", "visible"], outputs: ["timeChange"], exportAs: ["cTimePicker"] }, { kind: "component", type: DateTimePickerComponent, selector: "app-date-time-picker" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'prg-ws-multi-form', standalone: false, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" wsCircularFocus>\r\n  @for (row of config?.rows; track $index; let isLast = $last) {\r\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\r\n      @for (field of row; track $index) {\r\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\r\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\r\n            @if (multiForm.controls[field.controlName]) {\r\n              <!-- Label  -->\r\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\r\n                <label\r\n                  [wsShowTooltipIfTruncated]=\"field.label\"\r\n                  cLabel\r\n                  class=\"mb-1 label-multiform single-line-label\"\r\n                  [for]=\"field.controlName\"\r\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\r\n                  [ngStyle]=\"field.styles?.label\"\r\n                  >{{ field.label }}\r\n                  @if (field?.validations?.required || false) {\r\n                    <strong class=\"text-danger\">*</strong>\r\n                  }\r\n                </label>\r\n              }\r\n\r\n              <!-- Text, Email, Number Inputs -->\r\n              @if (\r\n                field.type === FormFieldType.Text ||\r\n                field.type === FormFieldType.Email ||\r\n                field.type === FormFieldType.Number ||\r\n                field.type === FormFieldType.Password ||\r\n                field.type === FormFieldType.Url ||\r\n                field.type === FormFieldType.Tel\r\n              ) {\r\n                <div class=\"position-relative w-100\">\r\n                  <input\r\n                    [type]=\"field.type\"\r\n                    cFormControl\r\n                    [formControlName]=\"field.controlName\"\r\n                    [id]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\r\n                      'no-label-margin': !field.label\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n\r\n                  @if (field.actionButton) {\r\n                    <button\r\n                      type=\"button\"\r\n                      [cTooltip]=\"field.actionButton?.tooltip\"\r\n                      tooltipPlacement=\"top\"\r\n                      cButton\r\n                      color=\"primary\"\r\n                      variant=\"outline\"\r\n                      aria-label=\"action\"\r\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\r\n                      (click)=\"onClickFieldAction($event, field)\">\r\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\r\n                    </button>\r\n                  }\r\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\r\n                    @if (multiForm.controls[field.controlName]?.errors) {\r\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Minimum length {{ field?.validations?.minLength }} characters is required\r\n                        </small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                        </small>\r\n                      }\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <!-- Select Inputs -->\r\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n                <ng-container>\r\n                  <c-multi-select\r\n                    [multiple]=\"field?.multiple || false\"\r\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\r\n                    [clearSearchOnSelect]=\"true\"\r\n                    [selectionType]=\"field?.selectionType || 'tags'\"\r\n                    [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Select'\"\r\n                    [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n                    [options]=\"colorCodes$\"\r\n                    [optionsMaxHeight]=\"400\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\r\n                    [ngStyle]=\"field.styles?.field\">\r\n                    @if (field.type === inputType?.colorSelect) {\r\n                      @for (option of colorCodes$; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.label\">\r\n                          <label class=\"d-flex gap-2\">\r\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n                            {{ option.label }}\r\n                          </label>\r\n                        </c-multi-select-option>\r\n                      }\r\n                    } @else {\r\n                      @for (option of field.options; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.value\">\r\n                          {{ option.label }}\r\n                        </c-multi-select-option>\r\n                      }\r\n                    }\r\n                  </c-multi-select>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Autosuggest Inputs -->\r\n              @else if (field.type === FormFieldType.Autosuggest) {\r\n                <ng-container>\r\n                  <input\r\n                    cAutocomplete\r\n                    [options]=\"field.options\"\r\n                    [searchNoResultsLabel]=\"'No results found'\"\r\n                    cleaner\r\n                    highlightOptionsOnSearch\r\n                    indicator\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Type and search...'\"\r\n                    (inputChange)=\"handleSearch(field, $event)\"\r\n                    [search]=\"{ external: true, global: true }\" />\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Date) {\r\n                <ng-container>\r\n                  <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"field?.label || 'Select Date'\"\r\n                    class=\"form-control\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n                    [bsConfig]=\"{\r\n                      containerClass: 'pongrass-red-datepicker',\r\n                      showWeekNumbers: false,\r\n                      adaptivePosition: true,\r\n                      useUtc: false\r\n                    }\"\r\n                    bsDatepicker\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Datetime) {\r\n                <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n              }\r\n\r\n              <!-- Textarea  -->\r\n              @else if (field.type === FormFieldType.Textarea) {\r\n                <ng-container>\r\n                  <textarea\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    [rows]=\"field?.textareaRows || 4\"\r\n                    [columns]=\"field?.textareaColumns || 4\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [ngStyle]=\"field.styles?.field\"></textarea>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n              <!-- Checkbox  -->\r\n              @else if (field.type === FormFieldType.Checkbox) {\r\n                <div class=\"no-label-margin\">\r\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n                </div>\r\n\r\n              } @else if (field.type === FormFieldType.Switch) {\r\n                <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n                </c-form-check>\r\n              }\r\n              <!-- Decimal input  -->\r\n              @else if (field.type === FormFieldType.Float) {\r\n                <ng-container>\r\n                  <input\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    type=\"number\"\r\n                    class=\"me-2\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [wsDecimalInput]=\"field.validations?.precision || 2\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              } @else if (field.type === FormFieldType.Edition) {\r\n                <ng-container>\r\n                  <prg-ws-edition-list-grouped\r\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\r\n                    [multiple]=\"field?.multiple === false ? false : true\"\r\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\r\n                  </prg-ws-edition-list-grouped>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              } @else if (field.type === FormFieldType.Timepicker) {\r\n                <c-time-picker [formControlName]=\"field.controlName\" seconds />\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (field?.type === FormFieldType.Separator) {\r\n          <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\r\n        }\r\n        @if (field?.type === FormFieldType.FormHeader) {\r\n          <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</form>\r\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}::ng-deep [data-coreui-theme=dark] .bs-datepicker{background:#212631;box-shadow:0 0 10px #323a49}::ng-deep [data-coreui-theme=dark] .bs-datepicker .bs-datepicker-body{border:1px solid #323a49}::ng-deep .pongrass-red-datepicker .bs-datepicker-head{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td span.selected,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td.selected span,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td span[class*=select-]:after,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td[class*=select-] span:after{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td.week span{color:#ff4d5c}\n"] }]
+            args: [{ selector: 'prg-ws-multi-form', standalone: false, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" wsCircularFocus>\r\n  @for (row of config?.rows; track $index; let isLast = $last) {\r\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\r\n      @for (field of row; track $index) {\r\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\r\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\r\n            @if (multiForm.controls[field.controlName]) {\r\n              <!-- Label  -->\r\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\r\n                <label\r\n                  [wsShowTooltipIfTruncated]=\"field.label\"\r\n                  cLabel\r\n                  class=\"mb-1 label-multiform single-line-label\"\r\n                  [for]=\"field.controlName\"\r\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\r\n                  [ngStyle]=\"field.styles?.label\"\r\n                  >{{ field.label }}\r\n                  @if (field?.validations?.required || false) {\r\n                    <strong class=\"text-danger\">*</strong>\r\n                  }\r\n                </label>\r\n              }\r\n\r\n              <!-- Text, Email, Number Inputs -->\r\n              @if (\r\n                field.type === FormFieldType.Text ||\r\n                field.type === FormFieldType.Email ||\r\n                field.type === FormFieldType.Number ||\r\n                field.type === FormFieldType.Password ||\r\n                field.type === FormFieldType.Url ||\r\n                field.type === FormFieldType.Tel\r\n              ) {\r\n                <div class=\"position-relative w-100\">\r\n                  <input\r\n                    [type]=\"field.type\"\r\n                    cFormControl\r\n                    [formControlName]=\"field.controlName\"\r\n                    [id]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\r\n                      'no-label-margin': !field.label\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n\r\n                  @if (field.actionButton) {\r\n                    <button\r\n                      type=\"button\"\r\n                      [cTooltip]=\"field.actionButton?.tooltip\"\r\n                      tooltipPlacement=\"top\"\r\n                      cButton\r\n                      color=\"primary\"\r\n                      variant=\"outline\"\r\n                      aria-label=\"action\"\r\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\r\n                      (click)=\"onClickFieldAction($event, field)\">\r\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\r\n                    </button>\r\n                  }\r\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\r\n                    @if (multiForm.controls[field.controlName]?.errors) {\r\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Minimum length {{ field?.validations?.minLength }} characters is required\r\n                        </small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                        </small>\r\n                      }\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <!-- Select Inputs -->\r\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n                <ng-container>\r\n                  <c-multi-select\r\n                    [multiple]=\"field?.multiple || false\"\r\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || field?.search || false\"\r\n                    [searchNoResultsLabel]=\"field?.searchNoResultsLabel || 'No results found'\"\r\n                    [clearSearchOnSelect]=\"true\"\r\n                    [selectionType]=\"field?.selectionType || 'tags'\"\r\n                    [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Select'\"\r\n                    [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n                    [options]=\"colorCodes$\"\r\n                    [optionsMaxHeight]=\"400\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (searchValueChange)=\"handleSearch(field, $event)\"\r\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\r\n                    [ngStyle]=\"field.styles?.field\">\r\n                    @if (field.type === inputType?.colorSelect) {\r\n                      @for (option of colorCodes$; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.label\">\r\n                          <label class=\"d-flex gap-2\">\r\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n                            {{ option.label }}\r\n                          </label>\r\n                        </c-multi-select-option>\r\n                      }\r\n                    } @else {\r\n                      @for (option of field.options; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.value\">\r\n                          {{ option.label }}\r\n                        </c-multi-select-option>\r\n                      }\r\n                    }\r\n                  </c-multi-select>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Date) {\r\n                <ng-container>\r\n                  <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"field?.label || 'Select Date'\"\r\n                    class=\"form-control\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n                    [bsConfig]=\"{\r\n                      containerClass: 'pongrass-red-datepicker',\r\n                      showWeekNumbers: false,\r\n                      adaptivePosition: true,\r\n                      useUtc: false\r\n                    }\"\r\n                    bsDatepicker\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              @else if (field.type === FormFieldType.NewDate) {\r\n                <ng-container>\r\n                  <c-date-picker\r\n                    [formControlName]=\"field.controlName\"\r\n                    [calendarDate]=\"multiForm.controls[field.controlName]?.value\"\r\n                    inputReadOnly=\"true\"\r\n                    [showAdjacentDays]=\"false\"\r\n                    locale=\"en-US\">\r\n                  </c-date-picker>\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date Time input  -->\r\n              @else if (field.type === FormFieldType.Datetime) {\r\n                <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n              }\r\n\r\n              <!-- Textarea  -->\r\n              @else if (field.type === FormFieldType.Textarea) {\r\n                <ng-container>\r\n                  <textarea\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    [rows]=\"field?.textareaRows || 4\"\r\n                    [columns]=\"field?.textareaColumns || 4\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [ngStyle]=\"field.styles?.field\"></textarea>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n              <!-- Checkbox  -->\r\n              @else if (field.type === FormFieldType.Checkbox) {\r\n                <div class=\"no-label-margin\">\r\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n                </div>\r\n              }\r\n\r\n              @else if (field.type === FormFieldType.Switch) {\r\n                <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n                 <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n                </c-form-check>\r\n              }\r\n              <!-- Decimal input  -->\r\n              @else if (field.type === FormFieldType.Float) {\r\n                <ng-container>\r\n                  <input\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    type=\"number\"\r\n                    class=\"me-2\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [wsDecimalInput]=\"field.validations?.precision || 2\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              } @else if (field.type === FormFieldType.Edition) {\r\n                <ng-container>\r\n                  <prg-ws-edition-list-grouped\r\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\r\n                    [multiple]=\"field?.multiple === false ? false : true\"\r\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\r\n                  </prg-ws-edition-list-grouped>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              } @else if (field.type === FormFieldType.Timepicker) {\r\n                <c-time-picker [formControlName]=\"field.controlName\" seconds />\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (field?.type === FormFieldType.Separator) {\r\n          <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\r\n        }\r\n        @if (field?.type === FormFieldType.FormHeader) {\r\n          <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</form>\r\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}::ng-deep [data-coreui-theme=dark] .bs-datepicker{background:#212631;box-shadow:0 0 10px #323a49}::ng-deep [data-coreui-theme=dark] .bs-datepicker .bs-datepicker-body{border:1px solid #323a49}::ng-deep .pongrass-red-datepicker .bs-datepicker-head{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td span.selected,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td.selected span,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td span[class*=select-]:after,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td[class*=select-] span:after{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td.week span{color:#ff4d5c}\n"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], showUnsavedFlags: [{
@@ -1827,7 +2484,7 @@ class GenericFilterModelComponent {
         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: "prg-ws-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: "ngmodule", type: ModalModule }, { kind: "component", type: i4.ModalBodyComponent, selector: "c-modal-body" }, { kind: "component", type: i4.ModalComponent, selector: "c-modal", inputs: ["alignment", "backdrop", "fullscreen", "keyboard", "id", "size", "transition", "role", "ariaModal", "scrollable", "visible"], outputs: ["visibleChange"], exportAs: ["cModal"] }, { kind: "component", type: i4.ModalFooterComponent, selector: "c-modal-footer" }, { kind: "component", type: i4.ModalHeaderComponent, selector: "c-modal-header" }, { kind: "directive", type: i4.ModalTitleDirective, selector: "[cModalTitle]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: GenericFilterModelComponent, isStandalone: true, selector: "prg-ws-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: "ngmodule", type: ModalModule }, { kind: "component", type: i1.ModalBodyComponent, selector: "c-modal-body" }, { kind: "component", type: i1.ModalComponent, selector: "c-modal", inputs: ["alignment", "backdrop", "fullscreen", "keyboard", "id", "size", "transition", "role", "ariaModal", "scrollable", "visible"], outputs: ["visibleChange"], exportAs: ["cModal"] }, { kind: "component", type: i1.ModalFooterComponent, selector: "c-modal-footer" }, { kind: "component", type: i1.ModalHeaderComponent, selector: "c-modal-header" }, { kind: "directive", type: i1.ModalTitleDirective, selector: "[cModalTitle]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.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,
@@ -1849,6 +2506,7 @@ var FilterType;
     FilterType["TEXT"] = "TEXT_FILTER";
     FilterType["NUMBER"] = "NUMBER_FILTER";
     FilterType["DATE"] = "DATE_FILTER";
+    FilterType["DATE_RANGE"] = "DATE_RANGE_FILTER";
 })(FilterType || (FilterType = {}));
 // Built-in AG Grid filters
 const AgGridFilters = {
@@ -1858,7 +2516,8 @@ const AgGridFilters = {
 };
 // Custom filters that can be used in the table grid
 const TABLE_GRID_FILTER_COMPONENTS = {
-    [FilterType.SELECT]: CustomSelectFilterComponent
+    [FilterType.SELECT]: CustomSelectFilterComponent,
+    [FilterType.DATE_RANGE]: AgDateRangeFilterComponent,
     // Add others as needed
 };
 
@@ -2263,7 +2922,7 @@ class TableGridComponent {
         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: "prg-ws-table-grid", inputs: { tableConfiguration: "tableConfiguration", columnToolVisible: "columnToolVisible", initialPageNumber: "initialPageNumber" }, outputs: { tableGridReady: "tableGridReady", tableRowSelection: "tableRowSelection", tableRowSelectionChanged: "tableRowSelectionChanged", tableRowClicked: "tableRowClicked", columnStateEvent: "columnStateEvent", pageChange: "pageChange", filterChanged: "filterChanged", cellValueChanged: "cellValueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col-12 d-md-flex\">\r\n    <div class=\"table-list-wrapper flex-fill\">\r\n      <!-- style=\"width: 100%; height: 567px\" -->\r\n      <ag-grid-angular\r\n        style=\"width: 100%\"\r\n        [rowData]=\"tableConfiguration.rows\"\r\n        [columnDefs]=\"tableConfiguration.columnDefs\"\r\n        [defaultColDef]=\"tableConfiguration.defaultColDef\"\r\n        [rowSelection]=\"tableConfiguration.rowSelectionOption\"\r\n        [pagination]=\"tableConfiguration.pagination.enabled\"\r\n        [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\r\n        [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\r\n        [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\r\n        [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\r\n        (gridReady)=\"onGridReady($event)\"\r\n        (rowSelected)=\"onRowSelected($event)\"\r\n        (rowClicked)=\"onRowClicked($event)\"\r\n        (columnResized)=\"onColumnResized($event)\"\r\n        (columnMoved)=\"onColumnMoved($event)\"\r\n        (sortChanged)=\"onSortChanged($event)\"\r\n        (paginationChanged)=\"onPaginationChanged($event)\"\r\n        (firstDataRendered)=\"onFirstDataRendered($event)\"\r\n        (filterChanged)=\"onFilterChanged($event)\"\r\n        (cellValueChanged)=\"onCellValueChanged($event)\"\r\n         (selectionChanged)=\"onRowSelectionChanged($event)\" \r\n        [masterDetail]=\"tableConfiguration.masterDetail\"\r\n        [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\r\n        [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\r\n        [enableCellTextSelection]=\"true\"\r\n        [gridOptions]=\"gridOptions\"\r\n        [ensureDomOrder]=\"true\"\r\n        [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\r\n    </div>\r\n\r\n    @if (columnToolVisible && columnsListselectionForm) {\r\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\">\r\n        <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\r\n          <span\r\n            class=\"cursor-pointer text-primary\"\r\n            tooltipPlacement=\"top\"\r\n            cTooltip=\"Column Preference\"\r\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\r\n            <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\r\n          </span>\r\n\r\n          <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\r\n            <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\r\n        <c-offcanvas-header>\r\n          <h5 cOffcanvasTitle>Table Column Preference</h5>\r\n          <button\r\n            cButtonClose\r\n            size=\"sm\"\r\n            class=\"text-reset ms-auto\"\r\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\r\n            aria-label=\"Close\"></button>\r\n        </c-offcanvas-header>\r\n        <c-offcanvas-body>\r\n          <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\r\n            @for (item of this.tableGridState; track $index) {\r\n              <div class=\"checkbox-item px-1\">\r\n                <c-form-check>\r\n                  <input\r\n                    (change)=\"getCheckboxStatus($event, item.key)\"\r\n                    [checked]=\"columnsListselectionForm.get(item.key)?.value\"\r\n                    cFormCheckInput\r\n                    [id]=\"'cb_' + item.key\"\r\n                    type=\"checkbox\"\r\n                    [formControl]=\"columnsListselectionForm.controls[item.key]\" />\r\n                  <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\r\n                    {{ item?.headerName || item?.label }}</label\r\n                  >\r\n                </c-form-check>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div class=\"align d-flex gap-3 justify-content-end\">\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"resetTablePreferenceV2()\">\r\n              Clear\r\n            </button>\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"resetTablePreference()\">\r\n              Reset\r\n            </button>\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"updatetablePreference()\">\r\n              Update\r\n            </button>\r\n          </div>\r\n        </c-offcanvas-body>\r\n      </c-offcanvas>\r\n    }\r\n  </div>\r\n</div>\r\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: i4.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i4.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i4.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: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i4.ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { kind: "component", type: i4.OffcanvasBodyComponent, selector: "c-offcanvas-body" }, { kind: "component", type: i4.OffcanvasComponent, selector: "c-offcanvas", inputs: ["backdrop", "keyboard", "placement", "responsive", "id", "role", "ariaModal", "scroll", "visible"], outputs: ["visibleChange"], exportAs: ["cOffcanvas"] }, { kind: "component", type: i4.OffcanvasHeaderComponent, selector: "c-offcanvas-header" }, { kind: "directive", type: i4.OffcanvasTitleDirective, selector: "[cOffcanvasTitle]" }, { kind: "directive", type: i4.OffcanvasToggleDirective, selector: "[cOffcanvasToggle]", inputs: ["cOffcanvasToggle"] }, { kind: "directive", type: i4.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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: TableGridComponent, isStandalone: false, selector: "prg-ws-table-grid", inputs: { tableConfiguration: "tableConfiguration", columnToolVisible: "columnToolVisible", initialPageNumber: "initialPageNumber" }, outputs: { tableGridReady: "tableGridReady", tableRowSelection: "tableRowSelection", tableRowSelectionChanged: "tableRowSelectionChanged", tableRowClicked: "tableRowClicked", columnStateEvent: "columnStateEvent", pageChange: "pageChange", filterChanged: "filterChanged", cellValueChanged: "cellValueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col-12 d-md-flex\">\r\n    <div class=\"table-list-wrapper flex-fill\">\r\n      <!-- style=\"width: 100%; height: 567px\" -->\r\n      <ag-grid-angular\r\n        style=\"width: 100%\"\r\n        [rowData]=\"tableConfiguration.rows\"\r\n        [columnDefs]=\"tableConfiguration.columnDefs\"\r\n        [defaultColDef]=\"tableConfiguration.defaultColDef\"\r\n        [rowSelection]=\"tableConfiguration.rowSelectionOption\"\r\n        [pagination]=\"tableConfiguration.pagination.enabled\"\r\n        [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\r\n        [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\r\n        [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\r\n        [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\r\n        (gridReady)=\"onGridReady($event)\"\r\n        (rowSelected)=\"onRowSelected($event)\"\r\n        (rowClicked)=\"onRowClicked($event)\"\r\n        (columnResized)=\"onColumnResized($event)\"\r\n        (columnMoved)=\"onColumnMoved($event)\"\r\n        (sortChanged)=\"onSortChanged($event)\"\r\n        (paginationChanged)=\"onPaginationChanged($event)\"\r\n        (firstDataRendered)=\"onFirstDataRendered($event)\"\r\n        (filterChanged)=\"onFilterChanged($event)\"\r\n        (cellValueChanged)=\"onCellValueChanged($event)\"\r\n         (selectionChanged)=\"onRowSelectionChanged($event)\" \r\n        [masterDetail]=\"tableConfiguration.masterDetail\"\r\n        [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\r\n        [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\r\n        [enableCellTextSelection]=\"true\"\r\n        [gridOptions]=\"gridOptions\"\r\n        [ensureDomOrder]=\"true\"\r\n        [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\r\n    </div>\r\n\r\n    @if (columnToolVisible && columnsListselectionForm) {\r\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\">\r\n        <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\r\n          <span\r\n            class=\"cursor-pointer text-primary\"\r\n            tooltipPlacement=\"top\"\r\n            cTooltip=\"Column Preference\"\r\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\r\n            <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\r\n          </span>\r\n\r\n          <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\r\n            <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\r\n        <c-offcanvas-header>\r\n          <h5 cOffcanvasTitle>Table Column Preference</h5>\r\n          <button\r\n            cButtonClose\r\n            size=\"sm\"\r\n            class=\"text-reset ms-auto\"\r\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\r\n            aria-label=\"Close\"></button>\r\n        </c-offcanvas-header>\r\n        <c-offcanvas-body>\r\n          <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\r\n            @for (item of this.tableGridState; track $index) {\r\n              <div class=\"checkbox-item px-1\">\r\n                <c-form-check>\r\n                  <input\r\n                    (change)=\"getCheckboxStatus($event, item.key)\"\r\n                    [checked]=\"columnsListselectionForm.get(item.key)?.value\"\r\n                    cFormCheckInput\r\n                    [id]=\"'cb_' + item.key\"\r\n                    type=\"checkbox\"\r\n                    [formControl]=\"columnsListselectionForm.controls[item.key]\" />\r\n                  <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\r\n                    {{ item?.headerName || item?.label }}</label\r\n                  >\r\n                </c-form-check>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div class=\"align d-flex gap-3 justify-content-end\">\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"resetTablePreferenceV2()\">\r\n              Clear\r\n            </button>\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"resetTablePreference()\">\r\n              Reset\r\n            </button>\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"updatetablePreference()\">\r\n              Update\r\n            </button>\r\n          </div>\r\n        </c-offcanvas-body>\r\n      </c-offcanvas>\r\n    }\r\n  </div>\r\n</div>\r\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$2.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: i1.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i1.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: i1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i1.ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { kind: "component", type: i1.OffcanvasBodyComponent, selector: "c-offcanvas-body" }, { kind: "component", type: i1.OffcanvasComponent, selector: "c-offcanvas", inputs: ["backdrop", "keyboard", "placement", "responsive", "id", "role", "ariaModal", "scroll", "visible"], outputs: ["visibleChange"], exportAs: ["cOffcanvas"] }, { kind: "component", type: i1.OffcanvasHeaderComponent, selector: "c-offcanvas-header" }, { kind: "directive", type: i1.OffcanvasTitleDirective, selector: "[cOffcanvasTitle]" }, { kind: "directive", type: i1.OffcanvasToggleDirective, selector: "[cOffcanvasToggle]", inputs: ["cOffcanvasToggle"] }, { kind: "directive", type: i1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i1$1.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,
@@ -2729,7 +3388,7 @@ class LoginComponent {
         // }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LoginComponent, isStandalone: false, selector: "prg-ws-login", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, showInactivityLogoutMessage: { classPropertyName: "showInactivityLogoutMessage", publicName: "showInactivityLogoutMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "<div\r\n  class=\"container-fluid login-wrapper\"\r\n  wsBackgroundImage\r\n  [random]=\"config()?.backgroundDirective?.random\"\r\n  [backgroundImage]=\"config()?.backgroundDirective?.backgroundImages\">\r\n  <div class=\"row align-items-center justify-content-center vh-100\">\r\n    <div class=\"col-xxl-3 col-xl-4 col-lg-6 col-12 login-fields glass-card\">\r\n      <div class=\"logo-wrapper max-w-300 text-center mt-4 mx-5\">\r\n        <img [src]=\"config()?.logoUrl\" alt=\"pongrass-logo\" class=\"img-fluid max-w-320\" />\r\n        <p class=\"fs-19 login-card-title mb-4 \">{{ config()?.title }}</p>\r\n      </div>\r\n      <div class=\"mb-4 d-flex align-items-center justify-content-center flex-column\">\r\n        @if (showInactivityLogoutMessage()) {\r\n          <c-alert ngClass=\"mb-4\" color=\"danger\" class=\"text-center\">You have been logged out due to inactivity!</c-alert>\r\n        }\r\n        <form cForm [formGroup]=\"loginForm\" class=\"needs-validation max-w-300\" [validated]=\"isFormSubmitted()\" noValidate (ngSubmit)=\"onSubmit()\">\r\n          <div class=\"mb-4\">\r\n            <c-input-group class=\"mb-3\">\r\n              <span cInputGroupText id=\"group-username-login\" class=\"transparent-input\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"width: 15px\">\r\n                  <path\r\n                    d=\"M224 248a120 120 0 1 0 0-240 120 120 0 1 0 0 240zm-29.7 56C95.8 304 16 383.8 16 482.3 16 498.7 29.3 512 45.7 512l356.6 0c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3l-59.4 0z\" />\r\n                </svg>\r\n              </span>\r\n\r\n              <input\r\n                cFormControl\r\n                id=\"txt-auth-username\"\r\n                type=\"text\"\r\n                sizing=\"lg\"\r\n                formControlName=\"uid\"\r\n                required\r\n                autocomplete=\"username\"\r\n                class=\"transparent-input text-white\"\r\n                [placeholder]=\"config()?.usernamePlaceholder\" />\r\n              <c-form-feedback [valid]=\"false\">User Name is required.</c-form-feedback>\r\n            </c-input-group>\r\n          </div>\r\n          <div class=\"mb-4\">\r\n            <c-input-group class=\"mb-3\">\r\n              <span cInputGroupText id=\"group-password-login\" class=\"transparent-input\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\" style=\"width: 15px\">\r\n                  <path\r\n                    d=\"M128 96l0 64 128 0 0-64c0-35.3-28.7-64-64-64s-64 28.7-64 64zM64 160l0-64C64 25.3 121.3-32 192-32S320 25.3 320 96l0 64c35.3 0 64 28.7 64 64l0 224c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 224c0-35.3 28.7-64 64-64z\" />\r\n                </svg>\r\n              </span>\r\n              <input \r\n                cFormControl\r\n                id=\"txt-auth-password\"\r\n                type=\"password\"\r\n                sizing=\"lg\"\r\n                formControlName=\"pwd\"\r\n                required\r\n                autocomplete=\"current-password\"\r\n                class=\"transparent-input text-white\"\r\n                [placeholder]=\"config()?.passwordPlaceholder\" />\r\n\r\n              <c-form-feedback [valid]=\"false\">Password is required.</c-form-feedback>\r\n            </c-input-group>\r\n          </div>\r\n\r\n          <div class=\"submit-form mt-4\">\r\n            <button type=\"submit\" cButton color=\"dark\" size=\"lg\" class=\"w-100 btn text-white fw-semibold\">\r\n              {{ config()?.submitButtonText }}\r\n            </button>\r\n          </div>\r\n          @if (config()?.version) {\r\n            @if (config()?.version?.currentVersion) {\r\n              <div class=\"mt-4 text-center pt-8\">{{ 'v' + config()?.version?.currentVersion || '' }}</div>\r\n            }\r\n            @if (config()?.version?.copyrightYear) {\r\n              <div class=\"mt-2 text-center copyright-text pt-8\">\r\n                {{ '&copy;' + config()?.version?.copyrightYear + ' ' + config()?.version?.brandName }}\r\n              </div>\r\n            }\r\n          } @else {\r\n            @if (configService.allConfigValues()?.project?.currentVersion) {\r\n              <div class=\"mt-4 text-center pt-8\">{{ 'v' + configService.allConfigValues()?.project?.currentVersion || '' }}</div>\r\n            }\r\n            @if (configService.allConfigValues()?.project?.copyrightYear) {\r\n              <div class=\"mt-2 text-center copyright-text pt-8\">\r\n                {{ '&copy;' + configService.allConfigValues()?.project?.copyrightYear + ' ' + configService.allConfigValues()?.project?.brandName }}\r\n              </div>\r\n            }\r\n          }\r\n        </form>\r\n\r\n        @if (contactSupportValue) {\r\n          <div class=\"mt-4 fs-5\">\r\n            Don't have an account?\r\n            <span class=\"cursor-pointer\">\r\n              <a [href]=\"contactSupportValue\" class=\"text-decoration-none primary-text\" id=\"contact-us\">Contact Support</a>\r\n            </span>\r\n          </div>\r\n        }\r\n\r\n        <!-- <div class=\"mt-4 fs-5 text-center\">\r\n          <span class=\"cursor-pointer\">\r\n            <a [href]=\"forgetPasswordValue\" class=\"text-decoration-none primary-text\" id=\"forget-password\">Forget Password?</a>\r\n            <a class=\"text-decoration-none text-white\" id=\"forget-password\" (click)=\"goToForgetPassword()\">Forget Password?</a>\r\n          </span>\r\n        </div> -->\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#txt-auth-password,#txt-auth-username{border-bottom-right-radius:4px;border-top-right-radius:4px}.max-w-300{width:300px}.pt-8{font-size:10.66px}.login-card-title{color:#fff;font-size:24px}.form-invalid .form-multi-select-input-group,.form-invalid .date-picker-input-group{border:2px solid #e55353}.glass-card{color:#fff;background:#32241980;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:var(--cui-border-radius-lg);position:relative;overflow:hidden;max-width:400px;display:flex;align-items:center;flex-direction:column}.glass-card:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}.glass-card:after{content:\"\";position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent,rgba(255,255,255,.3))}.transparent-input{background-color:transparent;border:1px solid #8a9db2;outline:none}.transparent-input:focus{background-color:transparent}.transparent-input::placeholder{color:#8a9db2;font-size:16px}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,input:-internal-autofill-selected{-webkit-box-shadow:0 0 0 1000px transparent inset!important;box-shadow:0 0 0 1000px transparent inset!important;background-color:transparent!important;background-image:none!important;-webkit-text-fill-color:#fff!important;transition:background-color 5000s ease-in-out 0s!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BackgroundImageDirective, selector: "[wsBackgroundImage]", inputs: ["random", "backgroundImage"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "directive", type: i4.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "directive", type: i4.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: i4.FormFeedbackComponent, selector: "c-form-feedback", inputs: ["tooltip", "valid"] }, { kind: "component", type: i4.InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: i4.InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "directive", type: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: i4.AlertComponent, selector: "c-alert", inputs: ["color", "role", "variant", "dismissible", "fade", "visible"], outputs: ["visibleChange"], exportAs: ["cAlert"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LoginComponent, isStandalone: false, selector: "prg-ws-login", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, showInactivityLogoutMessage: { classPropertyName: "showInactivityLogoutMessage", publicName: "showInactivityLogoutMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "<div\r\n  class=\"container-fluid login-wrapper\"\r\n  wsBackgroundImage\r\n  [random]=\"config()?.backgroundDirective?.random\"\r\n  [backgroundImage]=\"config()?.backgroundDirective?.backgroundImages\">\r\n  <div class=\"row align-items-center justify-content-center vh-100\">\r\n    <div class=\"col-xxl-3 col-xl-4 col-lg-6 col-12 login-fields glass-card\">\r\n      <div class=\"logo-wrapper max-w-300 text-center mt-4 mx-5\">\r\n        <img [src]=\"config()?.logoUrl\" alt=\"pongrass-logo\" class=\"img-fluid max-w-320\" />\r\n        <p class=\"fs-19 login-card-title mb-4 \">{{ config()?.title }}</p>\r\n      </div>\r\n      <div class=\"mb-4 d-flex align-items-center justify-content-center flex-column\">\r\n        @if (showInactivityLogoutMessage()) {\r\n          <c-alert ngClass=\"mb-4\" color=\"danger\" class=\"text-center\">You have been logged out due to inactivity!</c-alert>\r\n        }\r\n        <form cForm [formGroup]=\"loginForm\" class=\"needs-validation max-w-300\" [validated]=\"isFormSubmitted()\" noValidate (ngSubmit)=\"onSubmit()\">\r\n          <div class=\"mb-4\">\r\n            <c-input-group class=\"mb-3\">\r\n              <span cInputGroupText id=\"group-username-login\" class=\"transparent-input\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"width: 15px\">\r\n                  <path\r\n                    d=\"M224 248a120 120 0 1 0 0-240 120 120 0 1 0 0 240zm-29.7 56C95.8 304 16 383.8 16 482.3 16 498.7 29.3 512 45.7 512l356.6 0c16.4 0 29.7-13.3 29.7-29.7 0-98.5-79.8-178.3-178.3-178.3l-59.4 0z\" />\r\n                </svg>\r\n              </span>\r\n\r\n              <input\r\n                cFormControl\r\n                id=\"txt-auth-username\"\r\n                type=\"text\"\r\n                sizing=\"lg\"\r\n                formControlName=\"uid\"\r\n                required\r\n                autocomplete=\"username\"\r\n                class=\"transparent-input text-white\"\r\n                [placeholder]=\"config()?.usernamePlaceholder\" />\r\n              <c-form-feedback [valid]=\"false\">User Name is required.</c-form-feedback>\r\n            </c-input-group>\r\n          </div>\r\n          <div class=\"mb-4\">\r\n            <c-input-group class=\"mb-3\">\r\n              <span cInputGroupText id=\"group-password-login\" class=\"transparent-input\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 384 512\" style=\"width: 15px\">\r\n                  <path\r\n                    d=\"M128 96l0 64 128 0 0-64c0-35.3-28.7-64-64-64s-64 28.7-64 64zM64 160l0-64C64 25.3 121.3-32 192-32S320 25.3 320 96l0 64c35.3 0 64 28.7 64 64l0 224c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 224c0-35.3 28.7-64 64-64z\" />\r\n                </svg>\r\n              </span>\r\n              <input \r\n                cFormControl\r\n                id=\"txt-auth-password\"\r\n                type=\"password\"\r\n                sizing=\"lg\"\r\n                formControlName=\"pwd\"\r\n                required\r\n                autocomplete=\"current-password\"\r\n                class=\"transparent-input text-white\"\r\n                [placeholder]=\"config()?.passwordPlaceholder\" />\r\n\r\n              <c-form-feedback [valid]=\"false\">Password is required.</c-form-feedback>\r\n            </c-input-group>\r\n          </div>\r\n\r\n          <div class=\"submit-form mt-4\">\r\n            <button type=\"submit\" cButton color=\"dark\" size=\"lg\" class=\"w-100 btn text-white fw-semibold\">\r\n              {{ config()?.submitButtonText }}\r\n            </button>\r\n          </div>\r\n          @if (config()?.version) {\r\n            @if (config()?.version?.currentVersion) {\r\n              <div class=\"mt-4 text-center pt-8\">{{ 'v' + config()?.version?.currentVersion || '' }}</div>\r\n            }\r\n            @if (config()?.version?.copyrightYear) {\r\n              <div class=\"mt-2 text-center copyright-text pt-8\">\r\n                {{ '&copy;' + config()?.version?.copyrightYear + ' ' + config()?.version?.brandName }}\r\n              </div>\r\n            }\r\n          } @else {\r\n            @if (configService.allConfigValues()?.project?.currentVersion) {\r\n              <div class=\"mt-4 text-center pt-8\">{{ 'v' + configService.allConfigValues()?.project?.currentVersion || '' }}</div>\r\n            }\r\n            @if (configService.allConfigValues()?.project?.copyrightYear) {\r\n              <div class=\"mt-2 text-center copyright-text pt-8\">\r\n                {{ '&copy;' + configService.allConfigValues()?.project?.copyrightYear + ' ' + configService.allConfigValues()?.project?.brandName }}\r\n              </div>\r\n            }\r\n          }\r\n        </form>\r\n\r\n        @if (contactSupportValue) {\r\n          <div class=\"mt-4 fs-5\">\r\n            Don't have an account?\r\n            <span class=\"cursor-pointer\">\r\n              <a [href]=\"contactSupportValue\" class=\"text-decoration-none primary-text\" id=\"contact-us\">Contact Support</a>\r\n            </span>\r\n          </div>\r\n        }\r\n\r\n        <!-- <div class=\"mt-4 fs-5 text-center\">\r\n          <span class=\"cursor-pointer\">\r\n            <a [href]=\"forgetPasswordValue\" class=\"text-decoration-none primary-text\" id=\"forget-password\">Forget Password?</a>\r\n            <a class=\"text-decoration-none text-white\" id=\"forget-password\" (click)=\"goToForgetPassword()\">Forget Password?</a>\r\n          </span>\r\n        </div> -->\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#txt-auth-password,#txt-auth-username{border-bottom-right-radius:4px;border-top-right-radius:4px}.max-w-300{width:300px}.pt-8{font-size:10.66px}.login-card-title{color:#fff;font-size:24px}.form-invalid .form-multi-select-input-group,.form-invalid .date-picker-input-group{border:2px solid #e55353}.glass-card{color:#fff;background:#32241980;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:var(--cui-border-radius-lg);position:relative;overflow:hidden;max-width:400px;display:flex;align-items:center;flex-direction:column}.glass-card:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}.glass-card:after{content:\"\";position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent,rgba(255,255,255,.3))}.transparent-input{background-color:transparent;border:1px solid #8a9db2;outline:none}.transparent-input:focus{background-color:transparent}.transparent-input::placeholder{color:#8a9db2;font-size:16px}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,input:-internal-autofill-selected{-webkit-box-shadow:0 0 0 1000px transparent inset!important;box-shadow:0 0 0 1000px transparent inset!important;background-color:transparent!important;background-image:none!important;-webkit-text-fill-color:#fff!important;transition:background-color 5000s ease-in-out 0s!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BackgroundImageDirective, selector: "[wsBackgroundImage]", inputs: ["random", "backgroundImage"] }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { 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: "directive", type: i1.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "directive", type: i1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: i1.FormFeedbackComponent, selector: "c-form-feedback", inputs: ["tooltip", "valid"] }, { kind: "component", type: i1.InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: i1.InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "directive", type: i1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: i1.AlertComponent, selector: "c-alert", inputs: ["color", "role", "variant", "dismissible", "fade", "visible"], outputs: ["visibleChange"], exportAs: ["cAlert"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LoginComponent, decorators: [{
             type: Component,
@@ -2777,6 +3436,493 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }] });
 
+class DialogRef {
+    closeFn;
+    _result = new Subject();
+    /** Observable that emits when any button is clicked in the wrapper */
+    buttonClick$ = new Subject();
+    /** Observable that emits when the dialog is closed */
+    afterClosed() {
+        return this._result.asObservable();
+    }
+    constructor(closeFn) {
+        this.closeFn = closeFn;
+    }
+    setCloseFn(fn) {
+        this.closeFn = fn;
+    }
+    close(result) {
+        if (this.closeFn) {
+            this.closeFn(result);
+        }
+        if (!this._result.closed) {
+            this._result.next(result);
+            this._result.complete();
+        }
+    }
+}
+
+class DynamicModalWrapperComponent {
+    title = '';
+    message = '';
+    size = 'lg';
+    buttons = [];
+    scrollable = true;
+    alignment = 'top';
+    childInjector;
+    backdropIndex = 1;
+    customClose = false;
+    _result;
+    // New Signal-based inputs for child component
+    _childComponentType = signal(null, ...(ngDevMode ? [{ debugName: "_childComponentType" }] : []));
+    set childComponentType(value) {
+        this._childComponentType.set(value);
+    }
+    _childComponentData = signal(null, ...(ngDevMode ? [{ debugName: "_childComponentData" }] : []));
+    set childComponentData(value) {
+        this._childComponentData.set(value);
+    }
+    contentHost;
+    modalElement;
+    visibleSignal = signal(false, ...(ngDevMode ? [{ debugName: "visibleSignal" }] : []));
+    componentRef;
+    closeCallback = () => { };
+    cdr = inject(ChangeDetectorRef);
+    zone = inject(NgZone);
+    dialogRef = inject(DialogRef, { optional: true });
+    isDestroyed = false;
+    isViewInit = false;
+    constructor() {
+        // React to child component type changes
+        effect(() => {
+            const type = this._childComponentType();
+            if (type && this.isViewInit) {
+                untracked(() => this.loadComponent());
+            }
+        });
+        // React to data changes
+        effect(() => {
+            const data = this._childComponentData();
+            if (data && this.componentRef && this.isViewInit) {
+                untracked(() => this.applyData(data));
+            }
+        });
+    }
+    ngAfterViewInit() {
+        this.isViewInit = true;
+        // Load component immediately once view is ready
+        this.loadComponent();
+        // Small delay before showing modal to avoid CD/Signal race conditions
+        this.zone.run(() => {
+            setTimeout(() => {
+                if (!this.isDestroyed) {
+                    this.visibleSignal.set(true);
+                    this.cdr.detectChanges();
+                    // Add backdrop class after modal is visible
+                    this.addBackdropClass();
+                }
+            }, 50);
+        });
+    }
+    ngOnDestroy() {
+        this.isDestroyed = true;
+        if (this.componentRef) {
+            this.componentRef.destroy();
+        }
+    }
+    loadComponent() {
+        if (!this._childComponentType() || !this.contentHost)
+            return;
+        this.contentHost.clear();
+        this.componentRef = this.contentHost.createComponent(this._childComponentType(), {
+            injector: this.childInjector || this.contentHost.injector
+        });
+        const data = this._childComponentData();
+        if (data) {
+            this.applyData(data);
+        }
+        this.cdr.detectChanges();
+    }
+    applyData(data) {
+        if (!this.componentRef)
+            return;
+        if (this.componentRef.instance.setData) {
+            this.componentRef.instance.setData(data);
+        }
+        else {
+            Object.assign(this.componentRef.instance, data);
+        }
+        this.cdr.detectChanges();
+    }
+    onButtonClick(btn) {
+        // Notify the child component that a button was clicked
+        if (this.dialogRef) {
+            this.dialogRef.buttonClick$.next(btn);
+        }
+        if (btn.type === 'close') {
+            if (!this.customClose) {
+                this.close();
+            }
+        }
+        if (btn.onClick) {
+            btn.onClick(this.componentRef?.instance);
+        }
+    }
+    topClose() {
+        this.dialogRef?.buttonClick$.next({
+            type: 'close',
+            label: 'T-Close',
+        });
+        if (!this.customClose) {
+            this.close();
+        }
+    }
+    close(result) {
+        this._result = result;
+        this.visibleSignal.set(false);
+        this.cdr.detectChanges();
+    }
+    onVisibleChange(event) {
+        if (this.visibleSignal() === event)
+            return;
+        this.visibleSignal.set(event);
+        if (!event) {
+            // Cleanup delay to prevent view[EFFECTS] error
+            this.zone.runOutsideAngular(() => {
+                setTimeout(() => {
+                    this.zone.run(() => {
+                        if (!this.isDestroyed) {
+                            this.closeCallback(this._result);
+                        }
+                    });
+                }, 400);
+            });
+        }
+    }
+    addBackdropClass() {
+        // Wait a bit for the backdrop to be rendered by CoreUI
+        this.zone.runOutsideAngular(() => {
+            setTimeout(() => {
+                // Set modal z-index
+                if (this.modalElement) {
+                    const modalEl = this.modalElement.nativeElement;
+                    const baseModalZIndex = 1055;
+                    const modalZIndex = baseModalZIndex + ((this.backdropIndex - 1) * 10);
+                    modalEl.style.setProperty('--cui-modal-zindex', modalZIndex.toString());
+                }
+                // Find all backdrops
+                const backdrops = document.querySelectorAll('.modal-backdrop.show');
+                if (backdrops.length > 0) {
+                    // Get the most recently added backdrop (last one)
+                    const latestBackdrop = backdrops[backdrops.length - 1];
+                    // Set the backdrop z-index dynamically
+                    const baseBackdropZIndex = 1050;
+                    const backdropZIndex = baseBackdropZIndex + ((this.backdropIndex - 1) * 10);
+                    latestBackdrop.style.zIndex = backdropZIndex.toString();
+                }
+            }, 100);
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DynamicModalWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: DynamicModalWrapperComponent, isStandalone: true, selector: "prg-ws-dynamic-modal-wrapper", inputs: { title: "title", message: "message", size: "size", buttons: "buttons", scrollable: "scrollable", alignment: "alignment", childInjector: "childInjector", backdropIndex: "backdropIndex", customClose: "customClose", childComponentType: "childComponentType", childComponentData: "childComponentData" }, viewQueries: [{ propertyName: "contentHost", first: true, predicate: ["contentHost"], descendants: true, read: ViewContainerRef }, { propertyName: "modalElement", first: true, predicate: ["modalElement"], descendants: true, read: ElementRef }], ngImport: i0, template: `
+    <c-modal
+      #modalElement
+      [visible]="visibleSignal()"
+      [size]="size"
+      [alignment]="alignment"
+      [scrollable]="scrollable"
+      backdrop="static"
+      (visibleChange)="onVisibleChange($event)"
+    >
+      <c-modal-header>
+        <h5 cModalTitle>{{ title }}</h5>
+        <button (click)="topClose()" cButtonClose></button>
+      </c-modal-header>
+      <c-modal-body>
+        @if (message) {
+          <div [innerHTML]="message" class="mb-3"></div>
+        }
+        <ng-template #contentHost></ng-template>
+      </c-modal-body>
+      @if (buttons?.length) {
+        <c-modal-footer>
+          @for (btn of buttons; track btn) {
+            <button
+              cButton
+              [color]="btn.color || 'primary'"
+              [variant]="btn.variant"
+              [className]="btn.class || ''"
+              (click)="onButtonClick(btn)"
+            >
+              {{ btn.label }}
+            </button>
+          }
+        </c-modal-footer>
+      }
+    </c-modal>
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i1.ModalBodyComponent, selector: "c-modal-body" }, { kind: "component", type: i1.ModalComponent, selector: "c-modal", inputs: ["alignment", "backdrop", "fullscreen", "keyboard", "id", "size", "transition", "role", "ariaModal", "scrollable", "visible"], outputs: ["visibleChange"], exportAs: ["cModal"] }, { kind: "component", type: i1.ModalFooterComponent, selector: "c-modal-footer" }, { kind: "component", type: i1.ModalHeaderComponent, selector: "c-modal-header" }, { kind: "directive", type: i1.ModalTitleDirective, selector: "[cModalTitle]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i1.ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DynamicModalWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'prg-ws-dynamic-modal-wrapper',
+                    standalone: true,
+                    imports: [CommonModule, ModalModule, ButtonModule],
+                    template: `
+    <c-modal
+      #modalElement
+      [visible]="visibleSignal()"
+      [size]="size"
+      [alignment]="alignment"
+      [scrollable]="scrollable"
+      backdrop="static"
+      (visibleChange)="onVisibleChange($event)"
+    >
+      <c-modal-header>
+        <h5 cModalTitle>{{ title }}</h5>
+        <button (click)="topClose()" cButtonClose></button>
+      </c-modal-header>
+      <c-modal-body>
+        @if (message) {
+          <div [innerHTML]="message" class="mb-3"></div>
+        }
+        <ng-template #contentHost></ng-template>
+      </c-modal-body>
+      @if (buttons?.length) {
+        <c-modal-footer>
+          @for (btn of buttons; track btn) {
+            <button
+              cButton
+              [color]="btn.color || 'primary'"
+              [variant]="btn.variant"
+              [className]="btn.class || ''"
+              (click)="onButtonClick(btn)"
+            >
+              {{ btn.label }}
+            </button>
+          }
+        </c-modal-footer>
+      }
+    </c-modal>
+  `
+                }]
+        }], ctorParameters: () => [], propDecorators: { title: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], size: [{
+                type: Input
+            }], buttons: [{
+                type: Input
+            }], scrollable: [{
+                type: Input
+            }], alignment: [{
+                type: Input
+            }], childInjector: [{
+                type: Input
+            }], backdropIndex: [{
+                type: Input
+            }], customClose: [{
+                type: Input
+            }], childComponentType: [{
+                type: Input
+            }], childComponentData: [{
+                type: Input
+            }], contentHost: [{
+                type: ViewChild,
+                args: ['contentHost', { read: ViewContainerRef }]
+            }], modalElement: [{
+                type: ViewChild,
+                args: ['modalElement', { read: ElementRef }]
+            }] } });
+
+class PgDialogService {
+    appRef = inject(ApplicationRef);
+    injector = inject(EnvironmentInjector);
+    viewContainerRef;
+    openDialogs = new Set();
+    registerViewContainerRef(vcr) {
+        this.viewContainerRef = vcr;
+    }
+    add(config) {
+        const subject = new Subject();
+        const component = config.component || null;
+        const dialogRef = this.open(component, config);
+        // Inject result handling into buttons if they don't have onClick
+        if (config.buttons) {
+            config.buttons.forEach(btn => {
+                const originalOnClick = btn.onClick;
+                btn.onClick = (context) => {
+                    if (originalOnClick) {
+                        originalOnClick(context);
+                    }
+                    subject.next(btn.label); // Or we could pass btn itself
+                    if (btn.type !== 'submit') {
+                        dialogRef.close(btn.label);
+                    }
+                };
+            });
+        }
+        // Subscribe to afterClosed to finish the subject
+        dialogRef.afterClosed().subscribe(result => {
+            if (!subject.closed) {
+                subject.next(result || 'close');
+                subject.complete();
+            }
+        });
+        return subject.asObservable();
+    }
+    alert(message, title = 'Alert') {
+        const subject = new Subject();
+        this.add({
+            title,
+            message,
+            size: 'md',
+            alignment: 'center',
+            buttons: [
+                {
+                    label: 'OK',
+                    color: 'primary',
+                    onClick: () => {
+                        subject.next();
+                        subject.complete();
+                    }
+                }
+            ]
+        });
+        return subject.asObservable();
+    }
+    confirm(message, title = 'Confirm') {
+        const subject = new Subject();
+        this.add({
+            title,
+            message,
+            alignment: 'center',
+            size: 'md',
+            buttons: [
+                {
+                    label: 'Cancel',
+                    variant: 'outline',
+                    color: 'secondary',
+                    onClick: () => {
+                        subject.next(false);
+                        subject.complete();
+                    }
+                },
+                {
+                    label: 'Confirm',
+                    color: 'primary',
+                    onClick: () => {
+                        subject.next(true);
+                        subject.complete();
+                    }
+                }
+            ]
+        });
+        return subject.asObservable();
+    }
+    open(component, config = {}) {
+        if (!this.viewContainerRef) {
+            console.error('PgDialogService: ViewContainerRef not registered. Please register it in AppComponent.');
+            // Fallback (might fail with EFFECTS error but better than crashing immediately)
+            return this.openManual(component, config);
+        }
+        const dialogRef = new DialogRef();
+        const childInjector = Injector.create({
+            providers: [{
+                    provide: DialogRef,
+                    useValue: dialogRef
+                }],
+            parent: this.injector
+        });
+        // Create the wrapper component using VCR
+        const wrapperRef = this.viewContainerRef.createComponent(DynamicModalWrapperComponent, {
+            injector: childInjector // Give the wrapper access to DialogRef too
+        });
+        // Now initialize the DialogRef with the actual wrapper instance
+        dialogRef.setCloseFn((res) => wrapperRef.instance.close(res));
+        wrapperRef.instance.childInjector = childInjector;
+        this.configureWrapper(wrapperRef, component, config);
+        // Handle close cleanup
+        wrapperRef.instance.closeCallback = () => {
+            this.removeDialog(dialogRef);
+            wrapperRef.destroy();
+        };
+        this.openDialogs.add(dialogRef);
+        return dialogRef;
+    }
+    // Fallback implementation (old manual way)
+    openManual(component, config = {}) {
+        const wrapperRef = createComponent(DynamicModalWrapperComponent, {
+            environmentInjector: this.injector
+        });
+        const dialogRef = new DialogRef();
+        const childInjector = Injector.create({
+            providers: [{
+                    provide: DialogRef,
+                    useValue: dialogRef
+                }],
+            parent: this.injector
+        });
+        wrapperRef.instance.childInjector = childInjector;
+        dialogRef.setCloseFn((res) => wrapperRef.instance.close(res));
+        this.configureWrapper(wrapperRef, component, config);
+        // Attach to the view
+        this.appRef.attachView(wrapperRef.hostView);
+        const domElem = wrapperRef.hostView.rootNodes[0];
+        document.body.appendChild(domElem);
+        // Trigger change detection to ensure inputs are applied
+        wrapperRef.changeDetectorRef.detectChanges();
+        // Handle close cleanup
+        wrapperRef.instance.closeCallback = (result) => {
+            this.removeDialog(dialogRef);
+            this.appRef.detachView(wrapperRef.hostView);
+            wrapperRef.destroy();
+            domElem.remove();
+        };
+        this.openDialogs.add(dialogRef);
+        return dialogRef;
+    }
+    configureWrapper(wrapperRef, component, config) {
+        wrapperRef.instance.title = config.title || '';
+        wrapperRef.instance.message = config.message || '';
+        wrapperRef.instance.size = config.size || 'lg';
+        wrapperRef.instance.childComponentType = component;
+        wrapperRef.instance.childComponentData = config.data;
+        // Set backdrop index based on current dialog count (1-based index)
+        wrapperRef.instance.backdropIndex = this.openDialogs.size + 1;
+        if (config.buttons) {
+            wrapperRef.instance.buttons = config.buttons;
+        }
+        if (config.scrollable !== undefined) {
+            wrapperRef.instance.scrollable = config.scrollable;
+        }
+        if (config.alignment) {
+            wrapperRef.instance.alignment = config.alignment;
+        }
+        if (config.customClose) {
+            wrapperRef.instance.customClose = config.customClose;
+        }
+    }
+    removeDialog(dialogRef) {
+        this.openDialogs.delete(dialogRef);
+    }
+    closeAll() {
+        // Clone to array to safely iterate as items might be deleted during iteration
+        const dialogs = Array.from(this.openDialogs);
+        dialogs.forEach(dialog => dialog.close());
+        this.openDialogs.clear();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PgDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PgDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PgDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
 /*
  * Public API Surface of utils
  */
@@ -2785,5 +3931,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BackgroundImageDirective, CheckboxCellRendererComponent, CircularFocusDirective, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, DateTimePickerComponent, DecimalInputDirective, EditionListGroupedComponent, ExcelType, ExportToExcelNames, FormFieldType, GenericFilterModelComponent, ILOGIN_ACTION, ITableGridConfiguration, ITableGridPagination, IndustryUpdateListboxCellRendererComponent, JsonrpcServiceLib, LoginComponent, LoginModule, MultiFormComponent, MultiFormModule, MultiSelectStylerDirective, PageStatusCellRendererComponent, ShowTooltipIfTruncatedDirective, StatusSelectCellRendererComponent, TableGridComponent, TableGridModule, UtilsService, convertDateShort, convertIsoToFormat, convertToISOnString, generateTimeOptions, getTimeValueFromDateTime, regionalDateFormat };
+export { AgDateRangeFilterComponent, BackgroundImageDirective, BadgeCellRendererComponent, CheckboxCellRendererComponent, CircularFocusDirective, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, DateTimePickerComponent, DecimalInputDirective, DialogRef, DynamicModalWrapperComponent, EditionListGroupedComponent, ExcelType, ExportToExcelNames, FormFieldType, GenericFilterModelComponent, HyperlinkCellRendererComponent, ILOGIN_ACTION, ITableGridConfiguration, ITableGridPagination, IconTextCellRendererComponent, IndustryUpdateListboxCellRendererComponent, JsonrpcServiceLib, LoginComponent, LoginModule, MultiFormComponent, MultiFormModule, MultiSelectStylerDirective, PageStatusCellRendererComponent, PgDialogService, ShowTooltipIfTruncatedDirective, StatusSelectCellRendererComponent, TableGridComponent, TableGridModule, UtilsService, convertDateShort, convertIsoToFormat, convertToISOnString, generateTimeOptions, getTimeValueFromDateTime, regionalDateFormat };
 //# sourceMappingURL=pongrass-utils.mjs.map