@pongrass/utils 1.1.10-v20 → 1.1.12-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;
@@ -249,7 +250,7 @@ class CustomSelectFilterComponent {
         <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"] }] });
+  `, 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,
@@ -617,7 +618,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,
@@ -684,7 +685,7 @@ class CheckboxCellRendererComponent {
       [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"] }] });
+  </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,
@@ -724,7 +725,7 @@ class CommentsButtonCellRendererComponent {
         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"] }] });
+  `, 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,
@@ -1014,7 +1015,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 +1088,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 +1120,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,
@@ -1197,7 +1198,7 @@ class BadgeCellRendererComponent {
       {{ 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,
@@ -1261,7 +1262,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,
@@ -2058,7 +2059,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\">\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: 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,
@@ -2140,23 +2141,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 +2174,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 +2210,7 @@ class MultiFormComponent {
                     control.setValue(field.value || '', { emitEvent: false });
                 }
                 // Disable if readonly
+                const isReadOnly = this.shouldBeReadOnly(field);
                 if (isReadOnly) {
                     control.disable({ emitEvent: false });
                 }
@@ -2237,6 +2238,12 @@ class MultiFormComponent {
             if (validations.pattern) {
                 validators.push(Validators.pattern(validations.pattern));
             }
+            if (validations.min) {
+                validators.push(Validators.min(validations.min));
+            }
+            if (validations.max) {
+                validators.push(Validators.max(validations.max));
+            }
         }
         return validators;
     }
@@ -2374,6 +2381,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
@@ -2397,11 +2459,11 @@ class MultiFormComponent {
         return null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MultiFormComponent, isStandalone: false, selector: "prg-ws-multi-form", inputs: { config: "config", showUnsavedFlags: "showUnsavedFlags", currentTableGridsSelectedIndex: "currentTableGridsSelectedIndex", formId: "formId" }, outputs: { fieldAction: "fieldAction", formSavedUnsavedListen: "formSavedUnsavedListen", selectionChangeEvent: "selectionChangeEvent" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" wsCircularFocus>\r\n  @for (row of config?.rows; track $index; let isLast = $last) {\r\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\r\n      @for (field of row; track $index) {\r\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\r\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\r\n            @if (multiForm.controls[field.controlName]) {\r\n              <!-- Label  -->\r\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\r\n                <label\r\n                  [wsShowTooltipIfTruncated]=\"field.label\"\r\n                  cLabel\r\n                  class=\"mb-1 label-multiform single-line-label\"\r\n                  [for]=\"field.controlName\"\r\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\r\n                  [ngStyle]=\"field.styles?.label\"\r\n                  >{{ field.label }}\r\n                  @if (field?.validations?.required || false) {\r\n                    <strong class=\"text-danger\">*</strong>\r\n                  }\r\n                </label>\r\n              }\r\n\r\n              <!-- Text, Email, Number Inputs -->\r\n              @if (\r\n                field.type === FormFieldType.Text ||\r\n                field.type === FormFieldType.Email ||\r\n                field.type === FormFieldType.Number ||\r\n                field.type === FormFieldType.Password ||\r\n                field.type === FormFieldType.Url ||\r\n                field.type === FormFieldType.Tel\r\n              ) {\r\n                <div class=\"position-relative w-100\">\r\n                  <input\r\n                    [type]=\"field.type\"\r\n                    cFormControl\r\n                    [formControlName]=\"field.controlName\"\r\n                    [id]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\r\n                      'no-label-margin': !field.label\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n\r\n                  @if (field.actionButton) {\r\n                    <button\r\n                      type=\"button\"\r\n                      [cTooltip]=\"field.actionButton?.tooltip\"\r\n                      tooltipPlacement=\"top\"\r\n                      cButton\r\n                      color=\"primary\"\r\n                      variant=\"outline\"\r\n                      aria-label=\"action\"\r\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\r\n                      (click)=\"onClickFieldAction($event, field)\">\r\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\r\n                    </button>\r\n                  }\r\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\r\n                    @if (multiForm.controls[field.controlName]?.errors) {\r\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Minimum length {{ field?.validations?.minLength }} characters is required\r\n                        </small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                        </small>\r\n                      }\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <!-- Select Inputs -->\r\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n                <ng-container>\r\n                  <c-multi-select\r\n                    [multiple]=\"field?.multiple || false\"\r\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || field?.search || false\"\r\n                    [searchNoResultsLabel]=\"field?.searchNoResultsLabel || 'No results found'\"\r\n                    [clearSearchOnSelect]=\"true\"\r\n                    [selectionType]=\"field?.selectionType || 'tags'\"\r\n                    [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Select'\"\r\n                    [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n                    [options]=\"colorCodes$\"\r\n                    [optionsMaxHeight]=\"400\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (searchValueChange)=\"handleSearch(field, $event)\"\r\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\r\n                    [ngStyle]=\"field.styles?.field\">\r\n                    @if (field.type === inputType?.colorSelect) {\r\n                      @for (option of colorCodes$; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.label\">\r\n                          <label class=\"d-flex gap-2\">\r\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n                            {{ option.label }}\r\n                          </label>\r\n                        </c-multi-select-option>\r\n                      }\r\n                    } @else {\r\n                      @for (option of field.options; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.value\">\r\n                          {{ option.label }}\r\n                        </c-multi-select-option>\r\n                      }\r\n                    }\r\n                  </c-multi-select>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Date) {\r\n                <ng-container>\r\n                  <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"field?.label || 'Select Date'\"\r\n                    class=\"form-control\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n                    [bsConfig]=\"{\r\n                      containerClass: 'pongrass-red-datepicker',\r\n                      showWeekNumbers: false,\r\n                      adaptivePosition: true,\r\n                      useUtc: false\r\n                    }\"\r\n                    bsDatepicker\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              @else if (field.type === FormFieldType.NewDate) {\r\n                <ng-container>\r\n                  <c-date-picker\r\n                    [formControlName]=\"field.controlName\"\r\n                    [calendarDate]=\"multiForm.controls[field.controlName]?.value\"\r\n                    inputReadOnly=\"true\"\r\n                    [showAdjacentDays]=\"false\"\r\n                    locale=\"en-US\">\r\n                  </c-date-picker>\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date Time input  -->\r\n              @else if (field.type === FormFieldType.Datetime) {\r\n                <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n              }\r\n\r\n              <!-- Textarea  -->\r\n              @else if (field.type === FormFieldType.Textarea) {\r\n                <ng-container>\r\n                  <textarea\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    [rows]=\"field?.textareaRows || 4\"\r\n                    [columns]=\"field?.textareaColumns || 4\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [ngStyle]=\"field.styles?.field\"></textarea>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n              <!-- Checkbox  -->\r\n              @else if (field.type === FormFieldType.Checkbox) {\r\n                <div class=\"no-label-margin\">\r\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n                </div>\r\n              }\r\n\r\n              @else if (field.type === FormFieldType.Switch) {\r\n                <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n                 <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n                </c-form-check>\r\n              }\r\n              <!-- Decimal input  -->\r\n              @else if (field.type === FormFieldType.Float) {\r\n                <ng-container>\r\n                  <input\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    type=\"number\"\r\n                    class=\"me-2\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [wsDecimalInput]=\"field.validations?.precision || configurationService?.allConfigValues()?.formConfig?.formValidations?.defaultDecimalPrecision || 2\"\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\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: 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                      }\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <!-- Select Inputs -->\r\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n                <ng-container>\r\n                  <c-multi-select\r\n                    [multiple]=\"field?.multiple || false\"\r\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || field?.search || false\"\r\n                    [searchNoResultsLabel]=\"field?.searchNoResultsLabel || 'No results found'\"\r\n                    [clearSearchOnSelect]=\"true\"\r\n                    [selectionType]=\"field?.selectionType || 'tags'\"\r\n                    [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Select'\"\r\n                    [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n                    [options]=\"colorCodes$\"\r\n                    [optionsMaxHeight]=\"400\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (searchValueChange)=\"handleSearch(field, $event)\"\r\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\r\n                    [ngStyle]=\"field.styles?.field\">\r\n                    @if (field.type === inputType?.colorSelect) {\r\n                      @for (option of colorCodes$; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.label\">\r\n                          <label class=\"d-flex gap-2\">\r\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n                            {{ option.label }}\r\n                          </label>\r\n                        </c-multi-select-option>\r\n                      }\r\n                    } @else {\r\n                      @for (option of field.options; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.value\">\r\n                          {{ option.label }}\r\n                        </c-multi-select-option>\r\n                      }\r\n                    }\r\n                  </c-multi-select>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Date) {\r\n                <ng-container>\r\n                  <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"field?.label || 'Select Date'\"\r\n                    class=\"form-control\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n                    [bsConfig]=\"{\r\n                      containerClass: 'pongrass-red-datepicker',\r\n                      showWeekNumbers: false,\r\n                      adaptivePosition: true,\r\n                      useUtc: false\r\n                    }\"\r\n                    bsDatepicker\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              @else if (field.type === FormFieldType.NewDate) {\r\n                <ng-container>\r\n                  <c-date-picker\r\n                    [formControlName]=\"field.controlName\"\r\n                    [calendarDate]=\"multiForm.controls[field.controlName]?.value\"\r\n                    inputReadOnly=\"true\"\r\n                    [showAdjacentDays]=\"false\"\r\n                    locale=\"en-US\">\r\n                  </c-date-picker>\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date Time input  -->\r\n              @else if (field.type === FormFieldType.Datetime) {\r\n                <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n              }\r\n\r\n              <!-- Textarea  -->\r\n              @else if (field.type === FormFieldType.Textarea) {\r\n                <ng-container>\r\n                  <textarea\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    [rows]=\"field?.textareaRows || 4\"\r\n                    [columns]=\"field?.textareaColumns || 4\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [ngStyle]=\"field.styles?.field\"></textarea>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n              <!-- Checkbox  -->\r\n              @else if (field.type === FormFieldType.Checkbox) {\r\n                <div class=\"no-label-margin\">\r\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n                </div>\r\n              }\r\n\r\n              @else if (field.type === FormFieldType.Switch) {\r\n                <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n                 <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n                </c-form-check>\r\n              }\r\n              <!-- Decimal input  -->\r\n              @else if (field.type === FormFieldType.Float) {\r\n                <ng-container>\r\n                  <input\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    type=\"number\"\r\n                    class=\"me-2\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [wsDecimalInput]=\"field.validations?.precision || configurationService?.allConfigValues()?.formConfig?.formValidations?.defaultDecimalPrecision || 2\"\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\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"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], showUnsavedFlags: [{
@@ -2531,7 +2593,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,
@@ -2969,7 +3031,7 @@ class TableGridComponent {
         this.subscribeUntil$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: TableGridComponent, isStandalone: false, selector: "prg-ws-table-grid", inputs: { tableConfiguration: "tableConfiguration", columnToolVisible: "columnToolVisible", initialPageNumber: "initialPageNumber" }, outputs: { tableGridReady: "tableGridReady", tableRowSelection: "tableRowSelection", tableRowSelectionChanged: "tableRowSelectionChanged", tableRowClicked: "tableRowClicked", columnStateEvent: "columnStateEvent", pageChange: "pageChange", filterChanged: "filterChanged", cellValueChanged: "cellValueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col-12 d-md-flex\">\r\n    <div class=\"table-list-wrapper flex-fill\">\r\n      <!-- style=\"width: 100%; height: 567px\" -->\r\n      <ag-grid-angular\r\n        style=\"width: 100%\"\r\n        [rowData]=\"tableConfiguration.rows\"\r\n        [columnDefs]=\"tableConfiguration.columnDefs\"\r\n        [defaultColDef]=\"tableConfiguration.defaultColDef\"\r\n        [rowSelection]=\"tableConfiguration.rowSelectionOption\"\r\n        [pagination]=\"tableConfiguration.pagination.enabled\"\r\n        [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\r\n        [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\r\n        [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\r\n        [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\r\n        (gridReady)=\"onGridReady($event)\"\r\n        (rowSelected)=\"onRowSelected($event)\"\r\n        (rowClicked)=\"onRowClicked($event)\"\r\n        (columnResized)=\"onColumnResized($event)\"\r\n        (columnMoved)=\"onColumnMoved($event)\"\r\n        (sortChanged)=\"onSortChanged($event)\"\r\n        (paginationChanged)=\"onPaginationChanged($event)\"\r\n        (firstDataRendered)=\"onFirstDataRendered($event)\"\r\n        (filterChanged)=\"onFilterChanged($event)\"\r\n        (cellValueChanged)=\"onCellValueChanged($event)\"\r\n         (selectionChanged)=\"onRowSelectionChanged($event)\" \r\n        [masterDetail]=\"tableConfiguration.masterDetail\"\r\n        [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\r\n        [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\r\n        [enableCellTextSelection]=\"true\"\r\n        [gridOptions]=\"gridOptions\"\r\n        [ensureDomOrder]=\"true\"\r\n        [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\r\n    </div>\r\n\r\n    @if (columnToolVisible && columnsListselectionForm) {\r\n      <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\r\n        <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\r\n          <span\r\n            class=\"cursor-pointer text-primary\"\r\n            tooltipPlacement=\"top\"\r\n            cTooltip=\"Column Preference\"\r\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\r\n            <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\r\n          </span>\r\n\r\n          <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\r\n            <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\r\n        <c-offcanvas-header>\r\n          <h5 cOffcanvasTitle>Table Column Preference</h5>\r\n          <button\r\n            cButtonClose\r\n            size=\"sm\"\r\n            class=\"text-reset ms-auto\"\r\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\r\n            aria-label=\"Close\"></button>\r\n        </c-offcanvas-header>\r\n        <c-offcanvas-body>\r\n          <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\r\n            @for (item of this.tableGridState; track $index) {\r\n              <div class=\"checkbox-item px-1\">\r\n                <c-form-check>\r\n                  <input\r\n                    (change)=\"getCheckboxStatus($event, item.key)\"\r\n                    [checked]=\"columnsListselectionForm.get(item.key)?.value\"\r\n                    cFormCheckInput\r\n                    [id]=\"'cb_' + item.key\"\r\n                    type=\"checkbox\"\r\n                    [formControl]=\"columnsListselectionForm.controls[item.key]\" />\r\n                  <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\r\n                    {{ item?.headerName || item?.label }}</label\r\n                  >\r\n                </c-form-check>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div class=\"align d-flex gap-3 justify-content-end\">\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"resetTablePreferenceV2()\">\r\n              Clear\r\n            </button>\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"resetTablePreference()\">\r\n              Reset\r\n            </button>\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"updatetablePreference()\">\r\n              Update\r\n            </button>\r\n          </div>\r\n        </c-offcanvas-body>\r\n      </c-offcanvas>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: i1$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,
@@ -3376,6 +3438,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 {
@@ -3427,19 +3490,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\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: 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\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"] }]
         }], 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 {
@@ -3707,7 +3777,7 @@ class DynamicModalWrapperComponent {
         </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,
@@ -3970,6 +4040,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\r\n  class=\"container 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 m-auto\">\r\n      <div class=\"glass-card\">\r\n        <div class=\"logo-wrapper max-w-300 text-center mt-4 mx-5\">\r\n          <img src=\"./assets/img/brand/pongrass_logo.png\" alt=\"pongrass-logo\" class=\"img-fluid max-w-320\" />\r\n          <p class=\"fs-19 login-card-title mb-4\">Maintenance Portal</p>\r\n        </div>\r\n        <div class=\"mt-2\">\r\n          <div class=\"h5 mb-3\">Forget Password</div>\r\n          @if (emailSentSuccessfully()) {\r\n            <div class=\"alert alert-success\" role=\"alert\">\r\n              <strong>Success!</strong> An email has been sent to your registered email address with instructions to reset your password.\r\n            </div>\r\n            <button cButton color=\"primary\" (click)=\"backToLogin()\">Back to Login</button>\r\n          } @else {\r\n            <form cForm [formGroup]=\"forgetPasswordForm\" class=\"needs-validation\" [validated]=\"isFormSubmitted\" noValidate (ngSubmit)=\"submitResetPassword()\">\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=\"username\"\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\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\" [disabled]=\"isLoading()\">\r\n                  @if (isLoading()) {\r\n                    <c-spinner aria-hidden=\"true\" size=\"sm\" class=\"margin-bottom-small\" />\r\n                  }\r\n                  {{ config()?.submitButtonText || 'Reset' }}\r\n                </button>\r\n              </div>\r\n            </form>\r\n\r\n            <div class=\"mt-4 text-center\">\r\n              <button cButton color=\"dark\" variant=\"ghost\" size=\"lg\" id=\"back-to-login\" class=\"w-100 text-white\" (click)=\"backToLogin()\">Back to Login</button>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\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\r\n  class=\"container 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 m-auto\">\r\n      <div class=\"glass-card\">\r\n        <div class=\"logo-wrapper max-w-300 text-center mt-4 mx-5\">\r\n          <img src=\"./assets/img/brand/pongrass_logo.png\" alt=\"pongrass-logo\" class=\"img-fluid max-w-320\" />\r\n          <p class=\"fs-19 login-card-title mb-4\">Maintenance Portal</p>\r\n        </div>\r\n        <div class=\"mt-2\">\r\n          <div class=\"h5 mb-3\">Forget Password</div>\r\n          @if (emailSentSuccessfully()) {\r\n            <div class=\"alert alert-success\" role=\"alert\">\r\n              <strong>Success!</strong> An email has been sent to your registered email address with instructions to reset your password.\r\n            </div>\r\n            <button cButton color=\"primary\" (click)=\"backToLogin()\">Back to Login</button>\r\n          } @else {\r\n            <form cForm [formGroup]=\"forgetPasswordForm\" class=\"needs-validation\" [validated]=\"isFormSubmitted\" noValidate (ngSubmit)=\"submitResetPassword()\">\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=\"username\"\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\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\" [disabled]=\"isLoading()\">\r\n                  @if (isLoading()) {\r\n                    <c-spinner aria-hidden=\"true\" size=\"sm\" class=\"margin-bottom-small\" />\r\n                  }\r\n                  {{ config()?.submitButtonText || 'Reset' }}\r\n                </button>\r\n              </div>\r\n            </form>\r\n\r\n            <div class=\"mt-4 text-center\">\r\n              <button cButton color=\"dark\" variant=\"ghost\" size=\"lg\" id=\"back-to-login\" class=\"w-100 text-white\" (click)=\"backToLogin()\">Back to Login</button>\r\n            </div>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\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
  */
@@ -3978,5 +4140,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