@pongrass/utils 1.1.11-v20 → 1.1.13-v20

package/fesm2022/pongrass-utils.mjs

@@ -4,11 +4,11 @@ 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 i1 from '@coreui/angular-pro';
+import * as i2$1 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 i1$1 from '@coreui/icons-angular';
+import { BehaviorSubject, map, lastValueFrom, Subject, timer } from 'rxjs';
+import * as i1 from '@coreui/icons-angular';
 import { IconModule } from '@coreui/icons-angular';
 import * as i8 from 'ngx-bootstrap/datepicker';
 import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
@@ -16,12 +16,13 @@ import Swal from 'sweetalert2';
 import { Tooltip } from '@coreui/coreui-pro';
 import { ToastrService } from 'ngx-toastr';
 import { auditTime, takeUntil } from 'rxjs/operators';
-import * as i1$2 from '@ag-grid-community/angular';
+import * as i1$1 from '@ag-grid-community/angular';
 import { AgGridModule } from '@ag-grid-community/angular';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ModuleRegistry, _EditCoreModule } from '@ag-grid-community/core';
 import { CsvExportModule } from '@ag-grid-community/csv-export';
 import * as ExcelJS from 'exceljs';
+import { Router } from '@angular/router';
 
 class ConfigurationServiceLib {
     currentTablePreference;
@@ -79,24 +80,24 @@ class ColorCellRendererComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ColorCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ColorCellRendererComponent, isStandalone: true, selector: "prg-ws-color-cell-renderer", ngImport: i0, template: `
-    <div class="cell-wrapper align-items-center d-inline-flex gap-2">
-      <span class="color-box" [ngStyle]="{ 'background-color': colorCode }"></span>
-      <span class="text-truncate">
-        {{ params.value }}
-      </span>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ColorCellRendererComponent, isStandalone: true, selector: "prg-ws-color-cell-renderer", ngImport: i0, template: `
+    <div class="cell-wrapper align-items-center d-inline-flex gap-2">
+      <span class="color-box" [ngStyle]="{ 'background-color': colorCode }"></span>
+      <span class="text-truncate">
+        {{ params.value }}
+      </span>
+    </div>
   `, isInline: true, styles: [".color-box{height:1.5rem}.cell-wrapper{display:flex;align-items:center;gap:.5rem;width:100%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ColorCellRendererComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'prg-ws-color-cell-renderer', template: `
-    <div class="cell-wrapper align-items-center d-inline-flex gap-2">
-      <span class="color-box" [ngStyle]="{ 'background-color': colorCode }"></span>
-      <span class="text-truncate">
-        {{ params.value }}
-      </span>
-    </div>
+            args: [{ standalone: true, imports: [CommonModule], selector: 'prg-ws-color-cell-renderer', template: `
+    <div class="cell-wrapper align-items-center d-inline-flex gap-2">
+      <span class="color-box" [ngStyle]="{ 'background-color': colorCode }"></span>
+      <span class="text-truncate">
+        {{ params.value }}
+      </span>
+    </div>
   `, styles: [".color-box{height:1.5rem}.cell-wrapper{display:flex;align-items:center;gap:.5rem;width:100%;overflow:hidden}\n"] }]
         }] });
 
@@ -221,66 +222,66 @@ class CustomSelectFilterComponent {
         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">
-      <input type="text" #searchInput cFormControl [(ngModel)]="searchText" (input)="onSearchChange()" placeholder="Search..." class="search-box" />
-      @if (filteredValues.length > 0) {
-        <div>
-          <label class="checkbox-item">
-            <input cFormCheckInput [indeterminate]="isIndeterminate" type="checkbox" [checked]="isAllSelected()" (change)="onSelectAllChanged($event)" />
-            (Select All)
-          </label>
-        </div>
-      } @else {
-        <div>
-          <label> No matches </label>
-        </div>
-      }
-
-      <div class="checkbox-list">
-        @for (value of filteredValues; track value) {
-          <label [attr.aria-label]="'Select ' + value" class="checkbox-item">
-            <input cFormCheckInput type="checkbox" [value]="value" [checked]="isValueSelected(value)" (change)="onValueChanged(value, $event)" />
-            {{ value }}
-          </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}.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"] }] });
+    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">
+      <input type="text" #searchInput cFormControl [(ngModel)]="searchText" (input)="onSearchChange()" placeholder="Search..." class="search-box" />
+      @if (filteredValues.length > 0) {
+        <div>
+          <label class="checkbox-item">
+            <input cFormCheckInput [indeterminate]="isIndeterminate" type="checkbox" [checked]="isAllSelected()" (change)="onSelectAllChanged($event)" />
+            (Select All)
+          </label>
+        </div>
+      } @else {
+        <div>
+          <label> No matches </label>
+        </div>
+      }
+
+      <div class="checkbox-list">
+        @for (value of filteredValues; track value) {
+          <label [attr.aria-label]="'Select ' + value" class="checkbox-item">
+            <input cFormCheckInput type="checkbox" [value]="value" [checked]="isValueSelected(value)" (change)="onValueChanged(value, $event)" />
+            {{ value }}
+          </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}.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: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomSelectFilterComponent, decorators: [{
             type: Component,
-            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) {
-        <div>
-          <label class="checkbox-item">
-            <input cFormCheckInput [indeterminate]="isIndeterminate" type="checkbox" [checked]="isAllSelected()" (change)="onSelectAllChanged($event)" />
-            (Select All)
-          </label>
-        </div>
-      } @else {
-        <div>
-          <label> No matches </label>
-        </div>
-      }
-
-      <div class="checkbox-list">
-        @for (value of filteredValues; track value) {
-          <label [attr.aria-label]="'Select ' + value" class="checkbox-item">
-            <input cFormCheckInput type="checkbox" [value]="value" [checked]="isValueSelected(value)" (change)="onValueChanged(value, $event)" />
-            {{ value }}
-          </label>
-        }
-      </div>
-      <div class="filter-actions">
-        <button cButton color="primary" size="sm" variant="outline" (click)="onReset()">Reset</button>
-      </div>
-    </div>
+            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) {
+        <div>
+          <label class="checkbox-item">
+            <input cFormCheckInput [indeterminate]="isIndeterminate" type="checkbox" [checked]="isAllSelected()" (change)="onSelectAllChanged($event)" />
+            (Select All)
+          </label>
+        </div>
+      } @else {
+        <div>
+          <label> No matches </label>
+        </div>
+      }
+
+      <div class="checkbox-list">
+        @for (value of filteredValues; track value) {
+          <label [attr.aria-label]="'Select ' + value" class="checkbox-item">
+            <input cFormCheckInput type="checkbox" [value]="value" [checked]="isValueSelected(value)" (change)="onValueChanged(value, $event)" />
+            {{ value }}
+          </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}.filter-actions{display:flex;justify-content:flex-end;margin-top:8px;border-top:1px solid #e0e0e0;padding-top:8px}\n"] }]
         }], propDecorators: { searchInputRef: [{
                 type: ViewChild,
@@ -450,7 +451,7 @@ class AgDateRangeFilterComponent {
         this.params.filterChangedCallback();
     }
     clearPresetSelection() {
-        this.presets.forEach(p => p.isSelected = false);
+        this.presets.forEach(p => (p.isSelected = false));
     }
     calculatePastDays(days) {
         const today = new Date();
@@ -479,8 +480,7 @@ class AgDateRangeFilterComponent {
             if (preset.calculate) {
                 try {
                     const { start, end } = preset.calculate();
-                    if (this.areDatesEqual(this.startDate, start) &&
-                        this.areDatesEqual(this.endDate, end)) {
+                    if (this.areDatesEqual(this.startDate, start) && this.areDatesEqual(this.endDate, end)) {
                         this.clearPresetSelection();
                         preset.isSelected = true;
                         this.selectedPresetLabel = preset.label;
@@ -605,9 +605,7 @@ class AgDateRangeFilterComponent {
         </div>
         <div class="presets-list">
           @for (preset of presets; track preset.label) {
-            <div class="preset-item" 
-                 [class.active]="preset.isSelected"
-                 (click)="onPresetClick(preset)">
+            <div class="preset-item" [class.active]="preset.isSelected" (click)="onPresetClick(preset)">
               {{ preset.label }}
             </div>
           }
@@ -617,7 +615,7 @@ class AgDateRangeFilterComponent {
         <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"] }] });
+  `, 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: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "ngmodule", type: CalendarModule }, { kind: "component", type: i2$1.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,
@@ -638,9 +636,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
         </div>
         <div class="presets-list">
           @for (preset of presets; track preset.label) {
-            <div class="preset-item" 
-                 [class.active]="preset.isSelected"
-                 (click)="onPresetClick(preset)">
+            <div class="preset-item" [class.active]="preset.isSelected" (click)="onPresetClick(preset)">
               {{ preset.label }}
             </div>
           }
@@ -676,29 +672,29 @@ class CheckboxCellRendererComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CheckboxCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: CheckboxCellRendererComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: ` <div class="d-flex justify-content-start align-items-center h-100 mt-2">
-    <input
-      cFormCheckInput
-      type="checkbox"
-      class="me-2 cell-renderer-checkbox"
-      [checked]="value"
-      (change)="onChangeCheckBox($event)"
-      [disabled]="ischeckboxDisabled" />
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "directive", type: i1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: CheckboxCellRendererComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: ` <div class="d-flex justify-content-start align-items-center h-100 mt-2">
+    <input
+      cFormCheckInput
+      type="checkbox"
+      class="me-2 cell-renderer-checkbox"
+      [checked]="value"
+      (change)="onChangeCheckBox($event)"
+      [disabled]="ischeckboxDisabled" />
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "directive", type: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CheckboxCellRendererComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     imports: [FormModule],
-                    template: ` <div class="d-flex justify-content-start align-items-center h-100 mt-2">
-    <input
-      cFormCheckInput
-      type="checkbox"
-      class="me-2 cell-renderer-checkbox"
-      [checked]="value"
-      (change)="onChangeCheckBox($event)"
-      [disabled]="ischeckboxDisabled" />
+                    template: ` <div class="d-flex justify-content-start align-items-center h-100 mt-2">
+    <input
+      cFormCheckInput
+      type="checkbox"
+      class="me-2 cell-renderer-checkbox"
+      [checked]="value"
+      (change)="onChangeCheckBox($event)"
+      [disabled]="ischeckboxDisabled" />
   </div>`
                 }]
         }] });
@@ -718,22 +714,22 @@ class CommentsButtonCellRendererComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CommentsButtonCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: CommentsButtonCellRendererComponent, isStandalone: true, selector: "prg-ws-comments-button-cell-renderer", ngImport: i0, template: `
-    <div>
-      <button cButton [color]="params.data?.orders_notes ? 'primary' : 'secondary'" size="sm" data-action="comment-action" (click)="onCommentClick()">
-        Comments
-      </button>
-    </div>
-  `, 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: CommentsButtonCellRendererComponent, isStandalone: true, selector: "prg-ws-comments-button-cell-renderer", ngImport: i0, template: `
+    <div>
+      <button cButton [color]="params.data?.orders_notes ? 'primary' : 'secondary'" size="sm" data-action="comment-action" (click)="onCommentClick()">
+        Comments
+      </button>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CommentsButtonCellRendererComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'prg-ws-comments-button-cell-renderer', imports: [ButtonModule], template: `
-    <div>
-      <button cButton [color]="params.data?.orders_notes ? 'primary' : 'secondary'" size="sm" data-action="comment-action" (click)="onCommentClick()">
-        Comments
-      </button>
-    </div>
+            args: [{ standalone: true, selector: 'prg-ws-comments-button-cell-renderer', imports: [ButtonModule], template: `
+    <div>
+      <button cButton [color]="params.data?.orders_notes ? 'primary' : 'secondary'" size="sm" data-action="comment-action" (click)="onCommentClick()">
+        Comments
+      </button>
+    </div>
   ` }]
         }] });
 
@@ -803,9 +799,7 @@ class JsonrpcServiceLib {
             params: params,
             id: this.configService.generateUniqueId()
         };
-        return this.httpService
-            .post(this.baseURL, body, { headers })
-            .pipe(map(response => ({ ...response, timestamp: new Date().toISOString() })));
+        return this.httpService.post(this.baseURL, body, { headers }).pipe(map(response => ({ ...response, timestamp: new Date().toISOString() })));
     }
     // JSONRPC POST Request With promise
     async postJsonRpcRequestPromise(method, params) {
@@ -1014,7 +1008,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: 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"] }] });
+    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: i2$1.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i2$1.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "component", type: i2$1.MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: ["label", "disabled"] }, { kind: "component", type: i2$1.MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: EditionListGroupedComponent, decorators: [{
             type: Component,
@@ -1087,7 +1081,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: i1.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: i2$1.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PageStatusCellRendererComponent, decorators: [{
             type: Component,
@@ -1119,7 +1113,7 @@ 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: 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"] }] });
+    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: i2$1.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: StatusSelectCellRendererComponent, decorators: [{
             type: Component,
@@ -1188,29 +1182,19 @@ class BadgeCellRendererComponent {
     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>
+      <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"] }] });
+  `, 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: i2$1.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>
+      <c-badge [color]="badgeColor" [ngStyle]="customStyles" [textColor]="textColor" class="text-wrap">
+        {{ displayValue }}
+      </c-badge>
     }
   `, styles: ["c-badge{font-size:.875rem;font-weight:500}\n"] }]
         }] });
@@ -1261,7 +1245,7 @@ class IconTextCellRendererComponent {
         <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"] }] });
+  `, isInline: true, styles: [":host{display:block;width:100%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: i1.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,
@@ -1309,7 +1293,8 @@ class HyperlinkCellRendererComponent {
         }
         else {
             // Auto detection
-            if (typeof value === 'string' && value.includes('@') && !value.includes(' ')) { // Simple email check
+            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.'))) {
@@ -1333,7 +1318,7 @@ class HyperlinkCellRendererComponent {
             url = `https://${url}`;
         }
         else if (!url.startsWith('http') && !url.startsWith('//')) {
-            // If forced as link but no protocol, keep as is or assume https? 
+            // 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.
@@ -2058,7 +2043,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: 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"] }] });
+        ], ngImport: i0, template: "<div class=\"row g-3 align-items-end\">\n  <div class=\"col-12 col-md-6\">\n    <c-date-picker\n      [date]=\"date\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"onDateChange($event)\"\n      inputReadOnly=\"true\"\n      [showAdjacentDays]=\"false\"\n      [value]=\"date\"\n      [calendarDate]=\"date\"\n      locale=\"en-US\">\n    </c-date-picker>\n  </div>\n\n  <div class=\"col-12 col-md-6\">\n    <select cSelect class=\"form-select\" [value]=\"timeValue\" [disabled]=\"disabled\" (change)=\"onTimeChange($any($event.target).value)\">\n      @if (!date) {\n        <option value=\"\">Select time</option>\n      }\n      @for (time of timeDropdwons; track time.value) {\n        <option [value]=\"time.value\">\n          {{ time.label }}\n        </option>\n      }\n    </select>\n  </div>\n</div>\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: i2$1.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: i2$1.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,
@@ -2068,7 +2053,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                             useExisting: forwardRef(() => DateTimePickerComponent),
                             multi: true
                         }
-                    ], 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" }]
+                    ], template: "<div class=\"row g-3 align-items-end\">\n  <div class=\"col-12 col-md-6\">\n    <c-date-picker\n      [date]=\"date\"\n      [disabled]=\"disabled\"\n      (valueChange)=\"onDateChange($event)\"\n      inputReadOnly=\"true\"\n      [showAdjacentDays]=\"false\"\n      [value]=\"date\"\n      [calendarDate]=\"date\"\n      locale=\"en-US\">\n    </c-date-picker>\n  </div>\n\n  <div class=\"col-12 col-md-6\">\n    <select cSelect class=\"form-select\" [value]=\"timeValue\" [disabled]=\"disabled\" (change)=\"onTimeChange($any($event.target).value)\">\n      @if (!date) {\n        <option value=\"\">Select time</option>\n      }\n      @for (time of timeDropdwons; track time.value) {\n        <option [value]=\"time.value\">\n          {{ time.label }}\n        </option>\n      }\n    </select>\n  </div>\n</div>\n" }]
         }] });
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -2108,7 +2093,7 @@ class MultiFormComponent {
     ngOnChanges(changes) {
         if (changes['config'] && !changes['config'].isFirstChange()) {
             if (this.showUnsavedFlags) {
-                if (this.hasUnsavedChanges() && !this.isFormSaved && !this.isSelectionChange) {
+                if (this.hasUnsavedChanges() && !this.isFormSaved) {
                     Swal.fire({
                         icon: 'warning',
                         title: 'Do you want to save the changes?',
@@ -2140,23 +2125,23 @@ class MultiFormComponent {
                         return;
                     const validators = this.getValidators(field.validations);
                     if (field.type === FormFieldType.Checkbox) {
-                        this.multiForm.addControl(field.controlName, this.formBuilder.control({ value: this.getTruthyOrFalsy(field.value) || false, disabled: field.validations?.readonly || false }, validators));
+                        this.multiForm.addControl(field.controlName, this.formBuilder.control({ value: this.getTruthyOrFalsy(field.value) || false, disabled: this.shouldBeReadOnly(field) }, validators));
                     }
                     else if (field.type === FormFieldType.Date) {
                         // If field value is "", dont set the default advance date
                         this.multiForm.addControl(field.controlName, this.formBuilder.control({
                             value: field?.value !== '' ? this.setDefaultAdvanceDate(new Date(), field?.validations?.defaultAdvance || '') : '',
-                            disabled: field.validations?.readonly || false
+                            disabled: this.shouldBeReadOnly(field)
                         }, validators));
                     }
                     else if (field.type === FormFieldType.Float) {
                         this.multiForm.addControl(field.controlName, this.formBuilder.control({
                             value: field?.value !== '' ? this.updateFloatValue(field.value) : '',
-                            disabled: field.validations?.readonly || false
+                            disabled: this.shouldBeReadOnly(field)
                         }, validators));
                     }
                     else {
-                        this.multiForm.addControl(field.controlName, this.formBuilder.control({ value: field?.value || '', disabled: field.validations?.readonly || false }, validators));
+                        this.multiForm.addControl(field.controlName, this.formBuilder.control({ value: field?.value || '', disabled: this.shouldBeReadOnly(field) }, validators));
                     }
                 });
             });
@@ -2173,7 +2158,6 @@ class MultiFormComponent {
             row.forEach(field => {
                 if (field?.type === FormFieldType.Separator || field?.type === FormFieldType.FormHeader)
                     return;
-                const isReadOnly = !!field.validations?.readonly;
                 const validators = this.getValidators(field.validations);
                 let control = this.multiForm.get(field.controlName);
                 // If control does not exist, add it as enabled
@@ -2210,6 +2194,7 @@ class MultiFormComponent {
                     control.setValue(field.value || '', { emitEvent: false });
                 }
                 // Disable if readonly
+                const isReadOnly = this.shouldBeReadOnly(field);
                 if (isReadOnly) {
                     control.disable({ emitEvent: false });
                 }
@@ -2380,6 +2365,61 @@ class MultiFormComponent {
         }
         return null;
     }
+    /**
+     * Determines if a field should be read-only based on its configuration
+     * @param field The field configuration
+     * @returns boolean indicating if the field should be read-only
+     */
+    shouldBeReadOnly(field) {
+        // Check explicit readonly validation
+        if (field?.validations?.readonly) {
+            return true;
+        }
+        // Check readonlyIfNotEmpty - field is disabled if it has a value
+        if (field?.readonlyIfNotEmpty && this.fieldHasValue(field)) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Checks if a field currently has a value
+     * @param field The field configuration
+     * @returns boolean indicating if the field has a value
+     */
+    fieldHasValue(field) {
+        const control = this.multiForm.get(field.controlName);
+        if (!control) {
+            // Fallback to initial value if control doesn't exist yet
+            const value = field.value;
+            return value !== undefined && value !== null && value !== '';
+        }
+        const currentValue = control.value;
+        return currentValue !== undefined && currentValue !== null && currentValue !== '';
+    }
+    /**
+     * Updates the readonly state for all fields based on their current values and configurations
+     * This can be called externally when field values change dynamically
+     */
+    updateReadonlyStates() {
+        if (!this.config?.rows?.length)
+            return;
+        this.config.rows.forEach(row => {
+            row.forEach(field => {
+                if (field?.type === FormFieldType.Separator || field?.type === FormFieldType.FormHeader)
+                    return;
+                const control = this.multiForm.get(field.controlName);
+                if (!control)
+                    return;
+                const shouldBeReadOnly = this.shouldBeReadOnly(field);
+                if (shouldBeReadOnly && !control.disabled) {
+                    control.disable({ emitEvent: false });
+                }
+                else if (!shouldBeReadOnly && control.disabled) {
+                    control.enable({ emitEvent: false });
+                }
+            });
+        });
+    }
     /**
      * Set precision for float type
      * @param value
@@ -2403,11 +2443,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                      } @else if (multiForm.controls[field.controlName]?.errors?.['min']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">Minimum value {{ field?.validations?.min }} is required</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['max']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">Maximum value {{ field?.validations?.max }} is allowed</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                    [minDate]=\"field?.validations?.minDate || ''\"\r\n                    [maxDate]=\"field?.validations?.maxDate || ''\">\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              } @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              } @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]=\"\r\n                      field.validations?.precision || configurationService?.allConfigValues()?.formConfig?.formValidations?.defaultDecimalPrecision || 2\r\n                    \"\r\n                    [wsAcceptStringInput]=\"false\"\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                    [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", "wsAcceptStringInput"] }, { 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" }] });
+    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                      } @else if (multiForm.controls[field.controlName]?.errors?.['min']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">Minimum value {{ field?.validations?.min }} is required</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['max']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">Maximum value {{ field?.validations?.max }} is allowed</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                    [minDate]=\"field?.validations?.minDate || ''\"\r\n                    [maxDate]=\"field?.validations?.maxDate || ''\" />\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.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              } @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]=\"\r\n                      field.validations?.precision || configurationService?.allConfigValues()?.formConfig?.formValidations?.defaultDecimalPrecision || 2\r\n                    \"\r\n                    [wsAcceptStringInput]=\"false\"\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                    [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: i2$1.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i2$1.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: i2$1.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "component", type: i2$1.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i2$1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: i2$1.FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: i1.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "component", type: i2$1.DatePickerComponent, selector: "c-date-picker", inputs: ["calendars", "placeholder", "date"], outputs: ["dateChange"], exportAs: ["cDatePicker"] }, { kind: "directive", type: DecimalInputDirective, selector: "[wsDecimalInput]", inputs: ["wsDecimalInput", "wsAcceptStringInput"] }, { kind: "directive", type: ShowTooltipIfTruncatedDirective, selector: "[wsShowTooltipIfTruncated]", inputs: ["wsShowTooltipIfTruncated"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i8.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i8.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: EditionListGroupedComponent, selector: "prg-ws-edition-list-grouped", inputs: ["label", "multiple", "hasFormError"], outputs: ["selectedEditionsChange"] }, { kind: "directive", type: MultiSelectStylerDirective, selector: "[wsMultiSelectStyler]", inputs: ["wsMultiSelectStyler", "options"] }, { kind: "component", type: i2$1.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                      } @else if (multiForm.controls[field.controlName]?.errors?.['min']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">Minimum value {{ field?.validations?.min }} is required</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['max']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">Maximum value {{ field?.validations?.max }} is allowed</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                    [minDate]=\"field?.validations?.minDate || ''\"\r\n                    [maxDate]=\"field?.validations?.maxDate || ''\">\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              } @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              } @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]=\"\r\n                      field.validations?.precision || configurationService?.allConfigValues()?.formConfig?.formValidations?.defaultDecimalPrecision || 2\r\n                    \"\r\n                    [wsAcceptStringInput]=\"false\"\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                    [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                      } @else if (multiForm.controls[field.controlName]?.errors?.['min']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">Minimum value {{ field?.validations?.min }} is required</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['max']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">Maximum value {{ field?.validations?.max }} is allowed</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                    [minDate]=\"field?.validations?.minDate || ''\"\r\n                    [maxDate]=\"field?.validations?.maxDate || ''\" />\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.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              } @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]=\"\r\n                      field.validations?.precision || configurationService?.allConfigValues()?.formConfig?.formValidations?.defaultDecimalPrecision || 2\r\n                    \"\r\n                    [wsAcceptStringInput]=\"false\"\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                    [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: [{
@@ -2483,7 +2523,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         FormCheckInputDirective,
                         EditionListGroupedComponent,
                         MultiSelectStylerDirective,
-                        TimePickerModule,
+                        TimePickerModule
                     ],
                     exports: [MultiFormComponent, DateTimePickerComponent]
                 }]
@@ -2537,7 +2577,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: 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"] }] });
+    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: i2$1.ModalBodyComponent, selector: "c-modal-body" }, { kind: "component", type: i2$1.ModalComponent, selector: "c-modal", inputs: ["alignment", "backdrop", "fullscreen", "keyboard", "id", "size", "transition", "role", "ariaModal", "scrollable", "visible"], outputs: ["visibleChange"], exportAs: ["cModal"] }, { kind: "component", type: i2$1.ModalFooterComponent, selector: "c-modal-footer" }, { kind: "component", type: i2$1.ModalHeaderComponent, selector: "c-modal-header" }, { kind: "directive", type: i2$1.ModalTitleDirective, selector: "[cModalTitle]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GenericFilterModelComponent, decorators: [{
             type: Component,
@@ -2570,7 +2610,7 @@ const AgGridFilters = {
 // Custom filters that can be used in the table grid
 const TABLE_GRID_FILTER_COMPONENTS = {
     [FilterType.SELECT]: CustomSelectFilterComponent,
-    [FilterType.DATE_RANGE]: AgDateRangeFilterComponent,
+    [FilterType.DATE_RANGE]: AgDateRangeFilterComponent
     // Add others as needed
 };
 
@@ -2975,11 +3015,11 @@ 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$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"] }] });
+    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$1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: i2$1.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i2$1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i2$1.ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { kind: "component", type: i2$1.OffcanvasBodyComponent, selector: "c-offcanvas-body" }, { kind: "component", type: i2$1.OffcanvasComponent, selector: "c-offcanvas", inputs: ["backdrop", "keyboard", "placement", "responsive", "id", "role", "ariaModal", "scroll", "visible"], outputs: ["visibleChange"], exportAs: ["cOffcanvas"] }, { kind: "component", type: i2$1.OffcanvasHeaderComponent, selector: "c-offcanvas-header" }, { kind: "directive", type: i2$1.OffcanvasTitleDirective, selector: "[cOffcanvasTitle]" }, { kind: "directive", type: i2$1.OffcanvasToggleDirective, selector: "[cOffcanvasToggle]", inputs: ["cOffcanvasToggle"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i1.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'prg-ws-table-grid', standalone: false, 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"] }]
+            args: [{ selector: 'prg-ws-table-grid', standalone: false, 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"] }]
         }], ctorParameters: () => [], propDecorators: { tableConfiguration: [{
                 type: Input
             }], columnToolVisible: [{
@@ -3298,47 +3338,47 @@ class UtilsService {
                 .join('');
             footerHTML = `<tr>${totalRow}</tr>`;
         }
-        const tableHTML = `
-      <table style="width: 100%; border-collapse: collapse;">
-        <thead>${headerHTML}</thead>
-        <tbody>${bodyHTML}</tbody>
-        <tfoot>${footerHTML}</tfoot>
-      </table>
+        const tableHTML = `
+      <table style="width: 100%; border-collapse: collapse;">
+        <thead>${headerHTML}</thead>
+        <tbody>${bodyHTML}</tbody>
+        <tfoot>${footerHTML}</tfoot>
+      </table>
     `;
         // Create a new window for printing
         const printWindow = window.open('', '', 'width=800, height=600');
         if (printWindow) {
-            printWindow.document.write(`
-        <html>
-          <head>
-            <style>
-              @media print {
-                @page {
-                  size: landscape; 
-                }
-                body {
-                  -webkit-print-color-adjust: exact; 
-                  print-color-adjust: exact; 
-                }
-                table { width: 100%; border-collapse: collapse; }
-                th, td { border: 1px solid black; padding: 10px; }
-                th { background-color: #f2f2f2; }
-                p { margin: 0; padding: 0; }
-              }
-            </style>
-          </head>
-          <body>
-            <title>Report</title>
-            ${headersAndHeadings} 
-            ${tableHTML}
-            <script type="text/javascript">
-              window.onload = function() {
-                window.print();
-                window.onafterprint = window.close();
-              };
-            </script>
-          </body>
-        </html>
+            printWindow.document.write(`
+        <html>
+          <head>
+            <style>
+              @media print {
+                @page {
+                  size: landscape; 
+                }
+                body {
+                  -webkit-print-color-adjust: exact; 
+                  print-color-adjust: exact; 
+                }
+                table { width: 100%; border-collapse: collapse; }
+                th, td { border: 1px solid black; padding: 10px; }
+                th { background-color: #f2f2f2; }
+                p { margin: 0; padding: 0; }
+              }
+            </style>
+          </head>
+          <body>
+            <title>Report</title>
+            ${headersAndHeadings} 
+            ${tableHTML}
+            <script type="text/javascript">
+              window.onload = function() {
+                window.print();
+                window.onafterprint = window.close();
+              };
+            </script>
+          </body>
+        </html>
       `);
             printWindow.document.close();
             printWindow.focus();
@@ -3382,6 +3422,7 @@ var ILOGIN_ACTION;
 (function (ILOGIN_ACTION) {
     ILOGIN_ACTION["SUBMIT"] = "submit";
     ILOGIN_ACTION["BACK_TO_LOGIN"] = "backToLogin";
+    ILOGIN_ACTION["FORGET_PASSWORD"] = "forgetPassword";
 })(ILOGIN_ACTION || (ILOGIN_ACTION = {}));
 
 class LoginComponent {
@@ -3433,19 +3474,26 @@ class LoginComponent {
                 this.contactSupportValue = `mailto:${this.configService.allConfigValues()?.contactSupport}`;
             }
         }
-        // if (this.configService.allConfigValues()?.forgetPassword.startsWith('http')) {
-        //   this.forgetPasswordValue = this.configService.allConfigValues()?.forgetPassword;
-        //   this.rendererService.setAttribute(document.getElementById('forget-password'), 'target', '_blank');
-        // } else {
-        //   this.forgetPasswordValue = `mailto:${this.configService.allConfigValues()?.forgetPassword}`;
-        // }
+        if (this.configService.allConfigValues() && this.configService.allConfigValues()?.forgetPassword) {
+            if (this.configService.allConfigValues()?.forgetPassword?.externalLink) {
+                if (this.configService.allConfigValues()?.forgetPassword?.externalLink?.startsWith('http')) {
+                    this.forgetPasswordValue = this.configService.allConfigValues()?.forgetPassword?.externalLink || '';
+                }
+                else {
+                    this.forgetPasswordValue = `mailto:${this.configService.allConfigValues()?.forgetPassword?.externalLink}`;
+                }
+            }
+        }
+    }
+    goToForgetPassword() {
+        this.action.emit({ type: ILOGIN_ACTION.FORGET_PASSWORD });
     }
     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: 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"] }] });
+    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\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          @if (configService.allConfigValues()?.forgetPassword?.enabled) {\r\n            <div class=\"mt-4 fs-5 text-center\">\r\n              <span class=\"cursor-pointer\">\r\n                @if (forgetPasswordValue) {\r\n                  <a [href]=\"forgetPasswordValue\" class=\"text-decoration-none text-white\" id=\"forget-password\" target=\"_blank\">Forget Password?</a>\r\n                } @else {\r\n                  <a class=\"text-decoration-none text-white\" (click)=\"goToForgetPassword()\">Forget Password?</a>\r\n                }\r\n              </span>\r\n            </div>\r\n          }\r\n\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      </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: i2$1.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: i2$1.FormFeedbackComponent, selector: "c-form-feedback", inputs: ["tooltip", "valid"] }, { kind: "component", type: i2$1.InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: i2$1.InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: i2$1.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,
-            args: [{ selector: 'prg-ws-login', standalone: false, 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"] }]
+            args: [{ selector: 'prg-ws-login', standalone: false, 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\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          @if (configService.allConfigValues()?.forgetPassword?.enabled) {\r\n            <div class=\"mt-4 fs-5 text-center\">\r\n              <span class=\"cursor-pointer\">\r\n                @if (forgetPasswordValue) {\r\n                  <a [href]=\"forgetPasswordValue\" class=\"text-decoration-none text-white\" id=\"forget-password\" target=\"_blank\">Forget Password?</a>\r\n                } @else {\r\n                  <a class=\"text-decoration-none text-white\" (click)=\"goToForgetPassword()\">Forget Password?</a>\r\n                }\r\n              </span>\r\n            </div>\r\n          }\r\n\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      </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"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], showInactivityLogoutMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInactivityLogoutMessage", required: false }] }], action: [{ type: i0.Output, args: ["action"] }] } });
 
 class LoginModule {
@@ -3624,7 +3672,7 @@ class DynamicModalWrapperComponent {
     topClose() {
         this.dialogRef?.buttonClick$.next({
             type: 'close',
-            label: 'T-Close',
+            label: 'T-Close'
         });
         if (!this.customClose) {
             this.close();
@@ -3660,7 +3708,7 @@ class DynamicModalWrapperComponent {
                 if (this.modalElement) {
                     const modalEl = this.modalElement.nativeElement;
                     const baseModalZIndex = 1055;
-                    const modalZIndex = baseModalZIndex + ((this.backdropIndex - 1) * 10);
+                    const modalZIndex = baseModalZIndex + (this.backdropIndex - 1) * 10;
                     modalEl.style.setProperty('--cui-modal-zindex', modalZIndex.toString());
                 }
                 // Find all backdrops
@@ -3670,7 +3718,7 @@ class DynamicModalWrapperComponent {
                     const latestBackdrop = backdrops[backdrops.length - 1];
                     // Set the backdrop z-index dynamically
                     const baseBackdropZIndex = 1050;
-                    const backdropZIndex = baseBackdropZIndex + ((this.backdropIndex - 1) * 10);
+                    const backdropZIndex = baseBackdropZIndex + (this.backdropIndex - 1) * 10;
                     latestBackdrop.style.zIndex = backdropZIndex.toString();
                 }
             }, 100);
@@ -3685,8 +3733,7 @@ class DynamicModalWrapperComponent {
       [alignment]="alignment"
       [scrollable]="scrollable"
       backdrop="static"
-      (visibleChange)="onVisibleChange($event)"
-    >
+      (visibleChange)="onVisibleChange($event)">
       <c-modal-header>
         <h5 cModalTitle>{{ title }}</h5>
         <button (click)="topClose()" cButtonClose></button>
@@ -3700,20 +3747,14 @@ class DynamicModalWrapperComponent {
       @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)"
-            >
+            <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"] }] });
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2$1.ModalBodyComponent, selector: "c-modal-body" }, { kind: "component", type: i2$1.ModalComponent, selector: "c-modal", inputs: ["alignment", "backdrop", "fullscreen", "keyboard", "id", "size", "transition", "role", "ariaModal", "scrollable", "visible"], outputs: ["visibleChange"], exportAs: ["cModal"] }, { kind: "component", type: i2$1.ModalFooterComponent, selector: "c-modal-footer" }, { kind: "component", type: i2$1.ModalHeaderComponent, selector: "c-modal-header" }, { kind: "directive", type: i2$1.ModalTitleDirective, selector: "[cModalTitle]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i2$1.ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DynamicModalWrapperComponent, decorators: [{
             type: Component,
@@ -3729,8 +3770,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
       [alignment]="alignment"
       [scrollable]="scrollable"
       backdrop="static"
-      (visibleChange)="onVisibleChange($event)"
-    >
+      (visibleChange)="onVisibleChange($event)">
       <c-modal-header>
         <h5 cModalTitle>{{ title }}</h5>
         <button (click)="topClose()" cButtonClose></button>
@@ -3744,13 +3784,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
       @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)"
-            >
+            <button cButton [color]="btn.color || 'primary'" [variant]="btn.variant" [className]="btn.class || ''" (click)="onButtonClick(btn)">
               {{ btn.label }}
             </button>
           }
@@ -3805,7 +3839,7 @@ class PgDialogService {
         if (config.buttons) {
             config.buttons.forEach(btn => {
                 const originalOnClick = btn.onClick;
-                btn.onClick = (context) => {
+                btn.onClick = context => {
                     if (originalOnClick) {
                         originalOnClick(context);
                     }
@@ -3882,10 +3916,12 @@ class PgDialogService {
         }
         const dialogRef = new DialogRef();
         const childInjector = Injector.create({
-            providers: [{
+            providers: [
+                {
                     provide: DialogRef,
                     useValue: dialogRef
-                }],
+                }
+            ],
             parent: this.injector
         });
         // Create the wrapper component using VCR
@@ -3893,7 +3929,7 @@ class PgDialogService {
             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));
+        dialogRef.setCloseFn(res => wrapperRef.instance.close(res));
         wrapperRef.instance.childInjector = childInjector;
         this.configureWrapper(wrapperRef, component, config);
         // Handle close cleanup
@@ -3911,14 +3947,16 @@ class PgDialogService {
         });
         const dialogRef = new DialogRef();
         const childInjector = Injector.create({
-            providers: [{
+            providers: [
+                {
                     provide: DialogRef,
                     useValue: dialogRef
-                }],
+                }
+            ],
             parent: this.injector
         });
         wrapperRef.instance.childInjector = childInjector;
-        dialogRef.setCloseFn((res) => wrapperRef.instance.close(res));
+        dialogRef.setCloseFn(res => wrapperRef.instance.close(res));
         this.configureWrapper(wrapperRef, component, config);
         // Attach to the view
         this.appRef.attachView(wrapperRef.hostView);
@@ -3927,7 +3965,7 @@ class PgDialogService {
         // Trigger change detection to ensure inputs are applied
         wrapperRef.changeDetectorRef.detectChanges();
         // Handle close cleanup
-        wrapperRef.instance.closeCallback = (result) => {
+        wrapperRef.instance.closeCallback = result => {
             this.removeDialog(dialogRef);
             this.appRef.detachView(wrapperRef.hostView);
             wrapperRef.destroy();
@@ -3976,6 +4014,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 }]
         }] });
 
+const API_ENDPOINT = {
+    checkEmail: '/api/v1/check-email',
+    resetPassword: '/api/v1/reset-password-email',
+    resetPassword_V2: '/api/v2/reset-password-email',
+    resetPassword_V3: '/api/v3/reset-password-email',
+    changePassword: '/api/v1/changePassword'
+};
+class MiscApiService {
+    httpService = inject(HttpClient);
+    async checkIfEmailExists(username) {
+        const response = await lastValueFrom(this.httpService.get(window.config.apiBaseURLSecurity + API_ENDPOINT.checkEmail, {
+            params: { username: username }
+        }));
+        return response;
+    }
+    async sendEmailForReset(userId) {
+        const response = await lastValueFrom(this.httpService.get(window.config.apiBaseURLSecurity + API_ENDPOINT.resetPassword, {
+            params: { user: userId }
+        }));
+        return response;
+    }
+    async sendEmailForResetV2(userId) {
+        const response = await lastValueFrom(this.httpService.get(window.config.apiBaseURLSecurity + API_ENDPOINT.resetPassword_V2, {
+            params: { user: userId }
+        }));
+        return response;
+    }
+    async sendEmailForResetV3(userId) {
+        const response = await lastValueFrom(this.httpService.get(window.config.apiBaseURLSecurity + API_ENDPOINT.resetPassword_V3, {
+            params: { user: userId }
+        }));
+        return response;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MiscApiService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MiscApiService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MiscApiService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class ForgetPasswordLibComponent {
+    formBuilder = inject(FormBuilder);
+    router = inject(Router);
+    miscApiService = inject(MiscApiService);
+    toastrService = inject(ToastrService);
+    forgetPasswordForm;
+    isFormSubmitted = false;
+    isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+    emailSentSuccessfully = signal(false, ...(ngDevMode ? [{ debugName: "emailSentSuccessfully" }] : []));
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : [{}]));
+    action = output();
+    constructor() {
+        this.forgetPasswordForm = this.formBuilder.group({
+            username: ['', Validators.required]
+        });
+    }
+    async submitResetPassword() {
+        this.isFormSubmitted = true;
+        if (this.forgetPasswordForm.valid) {
+            this.isLoading.set(true);
+            const response = await this.miscApiService.checkIfEmailExists(this.forgetPasswordForm.value.username).catch(() => { });
+            if (response.result && response.result.exists) {
+                const sendEmail = await this.miscApiService.sendEmailForResetV3(this.forgetPasswordForm.value.username).catch(() => {
+                    this.isLoading.set(false);
+                });
+                if (sendEmail?.result) {
+                    this.isLoading.set(false);
+                    this.emailSentSuccessfully.set(true);
+                }
+            }
+            else {
+                this.toastrService.error(response?.message || 'Email does not exist', 'Error');
+                timer(500).subscribe(() => {
+                    this.isLoading.set(false);
+                });
+            }
+        }
+    }
+    backToLogin() {
+        this.action.emit({ type: ILOGIN_ACTION.BACK_TO_LOGIN });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ForgetPasswordLibComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: ForgetPasswordLibComponent, isStandalone: true, selector: "prg-ws-forget-password", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "<div\n  class=\"container login-wrapper\"\n  wsBackgroundImage\n  [random]=\"config()?.backgroundDirective?.random\"\n  [backgroundImage]=\"config()?.backgroundDirective?.backgroundImages\">\n  <div class=\"row align-items-center justify-content-center vh-100\">\n    <div class=\"col-xxl-3 col-xl-4 col-lg-6 col-12 m-auto\">\n      <div class=\"glass-card\">\n        <div class=\"logo-wrapper max-w-300 text-center mt-4 mx-5\">\n          <img src=\"./assets/img/brand/pongrass_logo.png\" alt=\"pongrass-logo\" class=\"img-fluid max-w-320\" />\n          <p class=\"fs-19 login-card-title mb-4\">Maintenance Portal</p>\n        </div>\n        <div class=\"mt-2\">\n          <div class=\"h5 mb-3\">Forget Password</div>\n          @if (emailSentSuccessfully()) {\n            <div class=\"alert alert-success\" role=\"alert\">\n              <strong>Success!</strong> An email has been sent to your registered email address with instructions to reset your password.\n            </div>\n            <button cButton color=\"primary\" (click)=\"backToLogin()\">Back to Login</button>\n          } @else {\n            <form cForm [formGroup]=\"forgetPasswordForm\" class=\"needs-validation\" [validated]=\"isFormSubmitted\" noValidate (ngSubmit)=\"submitResetPassword()\">\n              <div class=\"mb-4\">\n                <c-input-group class=\"mb-3\">\n                  <span cInputGroupText id=\"group-username-login\" class=\"transparent-input\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"width: 15px\">\n                      <path\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\" />\n                    </svg>\n                  </span>\n\n                  <input\n                    cFormControl\n                    id=\"txt-auth-username\"\n                    type=\"text\"\n                    sizing=\"lg\"\n                    formControlName=\"username\"\n                    required\n                    autocomplete=\"username\"\n                    class=\"transparent-input text-white\"\n                    [placeholder]=\"config()?.usernamePlaceholder\" />\n                  <c-form-feedback [valid]=\"false\">User Name is required.</c-form-feedback>\n                </c-input-group>\n              </div>\n\n              <div class=\"submit-form mt-4\">\n                <button type=\"submit\" cButton color=\"dark\" size=\"lg\" class=\"w-100 btn text-white fw-semibold\" [disabled]=\"isLoading()\">\n                  @if (isLoading()) {\n                    <c-spinner aria-hidden=\"true\" size=\"sm\" class=\"margin-bottom-small\" />\n                  }\n                  {{ config()?.submitButtonText || 'Reset' }}\n                </button>\n              </div>\n            </form>\n\n            <div class=\"mt-4 text-center\">\n              <button cButton color=\"dark\" variant=\"ghost\" size=\"lg\" id=\"back-to-login\" class=\"w-100 text-white\" (click)=\"backToLogin()\">Back to Login</button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".margin-bottom-small{margin-bottom:2px}.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;padding:2rem}.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}.max-w-300{width:300px}.login-card-title{color:#fff;font-size:24px}.pt-8{font-size:10.66px}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: "ngmodule", type: ReactiveFormsModule }, { 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: "ngmodule", type: FormModule }, { kind: "directive", type: i2$1.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: i2$1.FormFeedbackComponent, selector: "c-form-feedback", inputs: ["tooltip", "valid"] }, { kind: "component", type: i2$1.InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: i2$1.InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "directive", type: BackgroundImageDirective, selector: "[wsBackgroundImage]", inputs: ["random", "backgroundImage"] }, { kind: "ngmodule", type: SpinnerModule }, { kind: "component", type: i2$1.SpinnerComponent, selector: "c-spinner", inputs: ["color", "label", "size", "variant", "role"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ForgetPasswordLibComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'prg-ws-forget-password', imports: [ReactiveFormsModule, FormModule, BackgroundImageDirective, SpinnerModule, ButtonModule], template: "<div\n  class=\"container login-wrapper\"\n  wsBackgroundImage\n  [random]=\"config()?.backgroundDirective?.random\"\n  [backgroundImage]=\"config()?.backgroundDirective?.backgroundImages\">\n  <div class=\"row align-items-center justify-content-center vh-100\">\n    <div class=\"col-xxl-3 col-xl-4 col-lg-6 col-12 m-auto\">\n      <div class=\"glass-card\">\n        <div class=\"logo-wrapper max-w-300 text-center mt-4 mx-5\">\n          <img src=\"./assets/img/brand/pongrass_logo.png\" alt=\"pongrass-logo\" class=\"img-fluid max-w-320\" />\n          <p class=\"fs-19 login-card-title mb-4\">Maintenance Portal</p>\n        </div>\n        <div class=\"mt-2\">\n          <div class=\"h5 mb-3\">Forget Password</div>\n          @if (emailSentSuccessfully()) {\n            <div class=\"alert alert-success\" role=\"alert\">\n              <strong>Success!</strong> An email has been sent to your registered email address with instructions to reset your password.\n            </div>\n            <button cButton color=\"primary\" (click)=\"backToLogin()\">Back to Login</button>\n          } @else {\n            <form cForm [formGroup]=\"forgetPasswordForm\" class=\"needs-validation\" [validated]=\"isFormSubmitted\" noValidate (ngSubmit)=\"submitResetPassword()\">\n              <div class=\"mb-4\">\n                <c-input-group class=\"mb-3\">\n                  <span cInputGroupText id=\"group-username-login\" class=\"transparent-input\">\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 448 512\" style=\"width: 15px\">\n                      <path\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\" />\n                    </svg>\n                  </span>\n\n                  <input\n                    cFormControl\n                    id=\"txt-auth-username\"\n                    type=\"text\"\n                    sizing=\"lg\"\n                    formControlName=\"username\"\n                    required\n                    autocomplete=\"username\"\n                    class=\"transparent-input text-white\"\n                    [placeholder]=\"config()?.usernamePlaceholder\" />\n                  <c-form-feedback [valid]=\"false\">User Name is required.</c-form-feedback>\n                </c-input-group>\n              </div>\n\n              <div class=\"submit-form mt-4\">\n                <button type=\"submit\" cButton color=\"dark\" size=\"lg\" class=\"w-100 btn text-white fw-semibold\" [disabled]=\"isLoading()\">\n                  @if (isLoading()) {\n                    <c-spinner aria-hidden=\"true\" size=\"sm\" class=\"margin-bottom-small\" />\n                  }\n                  {{ config()?.submitButtonText || 'Reset' }}\n                </button>\n              </div>\n            </form>\n\n            <div class=\"mt-4 text-center\">\n              <button cButton color=\"dark\" variant=\"ghost\" size=\"lg\" id=\"back-to-login\" class=\"w-100 text-white\" (click)=\"backToLogin()\">Back to Login</button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n", styles: [".margin-bottom-small{margin-bottom:2px}.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;padding:2rem}.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}.max-w-300{width:300px}.login-card-title{color:#fff;font-size:24px}.pt-8{font-size:10.66px}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"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], action: [{ type: i0.Output, args: ["action"] }] } });
+
 /*
  * Public API Surface of utils
  */
@@ -3984,5 +4114,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-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 };
+export { AgDateRangeFilterComponent, BackgroundImageDirective, BadgeCellRendererComponent, CheckboxCellRendererComponent, CircularFocusDirective, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, DateTimePickerComponent, DecimalInputDirective, DialogRef, DynamicModalWrapperComponent, EditionListGroupedComponent, ExcelType, ExportToExcelNames, ForgetPasswordLibComponent, 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