@pongrass/utils 1.1.3-v20 → 1.1.5-v20

package/fesm2022/pongrass-utils.mjs

@@ -1,13 +1,13 @@
 import * as i0 from '@angular/core';
-import { signal, Injectable, Component, ViewChild, inject, EventEmitter, Input, Output, ElementRef, HostListener, Directive, Renderer2, NgModule, effect, input, output } from '@angular/core';
+import { signal, Injectable, Component, ViewChild, inject, EventEmitter, Input, Output, ElementRef, HostListener, Directive, Renderer2, forwardRef, NgModule, effect, input, output } from '@angular/core';
 import * as i2 from '@angular/common';
 import { CommonModule, NgClass } from '@angular/common';
 import * as i3 from '@angular/forms';
-import { FormsModule, NgControl, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
-import * as i1 from '@coreui/angular-pro';
-import { FormModule, ButtonModule, MultiSelectModule, MultiSelectComponent, InputGroupComponent, DatePickerModule, ModalModule, TooltipModule, OffcanvasModule, SpinnerModule, FormPasswordDirective, AlertModule } from '@coreui/angular-pro';
+import { FormsModule, NgControl, NG_VALUE_ACCESSOR, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@coreui/angular-pro';
+import { FormModule, ButtonModule, MultiSelectModule, MultiSelectComponent, InputGroupComponent, DatePickerModule, ModalModule, TooltipModule, AutocompleteModule, FormCheckInputDirective, OffcanvasModule, SpinnerModule, FormPasswordDirective, AlertModule } from '@coreui/angular-pro';
 import { HttpClient, HttpHeaders } from '@angular/common/http';
-import { map, lastValueFrom, Subject } from 'rxjs';
+import { BehaviorSubject, map, lastValueFrom, Subject } from 'rxjs';
 import * as i5 from '@coreui/icons-angular';
 import { IconModule } from '@coreui/icons-angular';
 import * as i8 from 'ngx-bootstrap/datepicker';
@@ -16,7 +16,7 @@ import Swal from 'sweetalert2';
 import { Tooltip } from '@coreui/coreui-pro';
 import { ToastrService } from 'ngx-toastr';
 import { auditTime, takeUntil } from 'rxjs/operators';
-import * as i1$1 from '@ag-grid-community/angular';
+import * as i1 from '@ag-grid-community/angular';
 import { AgGridModule } from '@ag-grid-community/angular';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ModuleRegistry, _EditCoreModule } from '@ag-grid-community/core';
@@ -79,24 +79,24 @@ class ColorCellRendererComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ColorCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ColorCellRendererComponent, isStandalone: true, selector: "prg-ws-color-cell-renderer", ngImport: i0, template: `
-    <div class="cell-wrapper align-items-center d-inline-flex gap-2">
-      <span class="color-box" [ngStyle]="{ 'background-color': colorCode }"></span>
-      <span class="text-truncate">
-        {{ params.value }}
-      </span>
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ColorCellRendererComponent, isStandalone: true, selector: "prg-ws-color-cell-renderer", ngImport: i0, template: `
+    <div class="cell-wrapper align-items-center d-inline-flex gap-2">
+      <span class="color-box" [ngStyle]="{ 'background-color': colorCode }"></span>
+      <span class="text-truncate">
+        {{ params.value }}
+      </span>
+    </div>
   `, isInline: true, styles: [".color-box{height:1.5rem}.cell-wrapper{display:flex;align-items:center;gap:.5rem;width:100%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ColorCellRendererComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, imports: [CommonModule], selector: 'prg-ws-color-cell-renderer', template: `
-    <div class="cell-wrapper align-items-center d-inline-flex gap-2">
-      <span class="color-box" [ngStyle]="{ 'background-color': colorCode }"></span>
-      <span class="text-truncate">
-        {{ params.value }}
-      </span>
-    </div>
+            args: [{ standalone: true, imports: [CommonModule], selector: 'prg-ws-color-cell-renderer', template: `
+    <div class="cell-wrapper align-items-center d-inline-flex gap-2">
+      <span class="color-box" [ngStyle]="{ 'background-color': colorCode }"></span>
+      <span class="text-truncate">
+        {{ params.value }}
+      </span>
+    </div>
   `, styles: [".color-box{height:1.5rem}.cell-wrapper{display:flex;align-items:center;gap:.5rem;width:100%;overflow:hidden}\n"] }]
         }] });
 
@@ -186,60 +186,60 @@ class CustomSelectFilterComponent {
         this.filteredValues = [...this.uniqueValues];
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomSelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CustomSelectFilterComponent, isStandalone: true, selector: "prg-ws-custom-set-filter", viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `
-    <div class="select-filter-container">
-      <input type="text" #searchInput cFormControl [(ngModel)]="searchText" (input)="onSearchChange()" placeholder="Search..." class="search-box" />
-      @if (filteredValues.length > 0) {
-        <div>
-          <label class="checkbox-item">
-            <input cFormCheckInput [indeterminate]="isIndeterminate" type="checkbox" [checked]="isAllSelected()" (change)="onSelectAllChanged($event)" />
-            (Select All)
-          </label>
-        </div>
-      } @else {
-        <div>
-          <label> No matches </label>
-        </div>
-      }
-
-      <div class="checkbox-list">
-        @for (value of filteredValues; track value) {
-          <label [attr.aria-label]="'Select ' + value" class="checkbox-item">
-            <input cFormCheckInput type="checkbox" [value]="value" [checked]="isValueSelected(value)" (change)="onValueChanged(value, $event)" />
-            {{ value }}
-          </label>
-        }
-      </div>
-    </div>
-  `, isInline: true, styles: [".select-filter-container{padding:10px}.select-filter-container label{display:flex;gap:5px}.search-box{width:100%;margin-bottom:5px;padding:4px}.checkbox-list{max-height:200px;overflow-y:auto}.checkbox-item{padding:4px 6px;cursor:pointer;border-radius:4px}.checkbox-item:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CustomSelectFilterComponent, isStandalone: true, selector: "prg-ws-custom-set-filter", viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `
+    <div class="select-filter-container">
+      <input type="text" #searchInput cFormControl [(ngModel)]="searchText" (input)="onSearchChange()" placeholder="Search..." class="search-box" />
+      @if (filteredValues.length > 0) {
+        <div>
+          <label class="checkbox-item">
+            <input cFormCheckInput [indeterminate]="isIndeterminate" type="checkbox" [checked]="isAllSelected()" (change)="onSelectAllChanged($event)" />
+            (Select All)
+          </label>
+        </div>
+      } @else {
+        <div>
+          <label> No matches </label>
+        </div>
+      }
+
+      <div class="checkbox-list">
+        @for (value of filteredValues; track value) {
+          <label [attr.aria-label]="'Select ' + value" class="checkbox-item">
+            <input cFormCheckInput type="checkbox" [value]="value" [checked]="isValueSelected(value)" (change)="onValueChanged(value, $event)" />
+            {{ value }}
+          </label>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [".select-filter-container{padding:10px}.select-filter-container label{display:flex;gap:5px}.search-box{width:100%;margin-bottom:5px;padding:4px}.checkbox-list{max-height:200px;overflow-y:auto}.checkbox-item{padding:4px 6px;cursor:pointer;border-radius:4px}.checkbox-item:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i4.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomSelectFilterComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'prg-ws-custom-set-filter', standalone: true, imports: [FormsModule, FormModule], template: `
-    <div class="select-filter-container">
-      <input type="text" #searchInput cFormControl [(ngModel)]="searchText" (input)="onSearchChange()" placeholder="Search..." class="search-box" />
-      @if (filteredValues.length > 0) {
-        <div>
-          <label class="checkbox-item">
-            <input cFormCheckInput [indeterminate]="isIndeterminate" type="checkbox" [checked]="isAllSelected()" (change)="onSelectAllChanged($event)" />
-            (Select All)
-          </label>
-        </div>
-      } @else {
-        <div>
-          <label> No matches </label>
-        </div>
-      }
-
-      <div class="checkbox-list">
-        @for (value of filteredValues; track value) {
-          <label [attr.aria-label]="'Select ' + value" class="checkbox-item">
-            <input cFormCheckInput type="checkbox" [value]="value" [checked]="isValueSelected(value)" (change)="onValueChanged(value, $event)" />
-            {{ value }}
-          </label>
-        }
-      </div>
-    </div>
+            args: [{ selector: 'prg-ws-custom-set-filter', standalone: true, imports: [FormsModule, FormModule], template: `
+    <div class="select-filter-container">
+      <input type="text" #searchInput cFormControl [(ngModel)]="searchText" (input)="onSearchChange()" placeholder="Search..." class="search-box" />
+      @if (filteredValues.length > 0) {
+        <div>
+          <label class="checkbox-item">
+            <input cFormCheckInput [indeterminate]="isIndeterminate" type="checkbox" [checked]="isAllSelected()" (change)="onSelectAllChanged($event)" />
+            (Select All)
+          </label>
+        </div>
+      } @else {
+        <div>
+          <label> No matches </label>
+        </div>
+      }
+
+      <div class="checkbox-list">
+        @for (value of filteredValues; track value) {
+          <label [attr.aria-label]="'Select ' + value" class="checkbox-item">
+            <input cFormCheckInput type="checkbox" [value]="value" [checked]="isValueSelected(value)" (change)="onValueChanged(value, $event)" />
+            {{ value }}
+          </label>
+        }
+      </div>
+    </div>
   `, styles: [".select-filter-container{padding:10px}.select-filter-container label{display:flex;gap:5px}.search-box{width:100%;margin-bottom:5px;padding:4px}.checkbox-list{max-height:200px;overflow-y:auto}.checkbox-item{padding:4px 6px;cursor:pointer;border-radius:4px}.checkbox-item:hover{background-color:#f0f0f0}\n"] }]
         }], propDecorators: { searchInputRef: [{
                 type: ViewChild,
@@ -269,29 +269,29 @@ class CheckboxCellRendererComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CheckboxCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: CheckboxCellRendererComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: ` <div class="d-flex justify-content-start align-items-center h-100 mt-2">
-    <input
-      cFormCheckInput
-      type="checkbox"
-      class="me-2 cell-renderer-checkbox"
-      [checked]="value"
-      (change)="onChangeCheckBox($event)"
-      [disabled]="ischeckboxDisabled" />
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "directive", type: i1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: CheckboxCellRendererComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: ` <div class="d-flex justify-content-start align-items-center h-100 mt-2">
+    <input
+      cFormCheckInput
+      type="checkbox"
+      class="me-2 cell-renderer-checkbox"
+      [checked]="value"
+      (change)="onChangeCheckBox($event)"
+      [disabled]="ischeckboxDisabled" />
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CheckboxCellRendererComponent, decorators: [{
             type: Component,
             args: [{
                     standalone: true,
                     imports: [FormModule],
-                    template: ` <div class="d-flex justify-content-start align-items-center h-100 mt-2">
-    <input
-      cFormCheckInput
-      type="checkbox"
-      class="me-2 cell-renderer-checkbox"
-      [checked]="value"
-      (change)="onChangeCheckBox($event)"
-      [disabled]="ischeckboxDisabled" />
+                    template: ` <div class="d-flex justify-content-start align-items-center h-100 mt-2">
+    <input
+      cFormCheckInput
+      type="checkbox"
+      class="me-2 cell-renderer-checkbox"
+      [checked]="value"
+      (change)="onChangeCheckBox($event)"
+      [disabled]="ischeckboxDisabled" />
   </div>`
                 }]
         }] });
@@ -311,22 +311,22 @@ class CommentsButtonCellRendererComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CommentsButtonCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: CommentsButtonCellRendererComponent, isStandalone: true, selector: "prg-ws-comments-button-cell-renderer", ngImport: i0, template: `
-    <div>
-      <button cButton [color]="params.data?.orders_notes ? 'primary' : 'secondary'" size="sm" data-action="comment-action" (click)="onCommentClick()">
-        Comments
-      </button>
-    </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: CommentsButtonCellRendererComponent, isStandalone: true, selector: "prg-ws-comments-button-cell-renderer", ngImport: i0, template: `
+    <div>
+      <button cButton [color]="params.data?.orders_notes ? 'primary' : 'secondary'" size="sm" data-action="comment-action" (click)="onCommentClick()">
+        Comments
+      </button>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CommentsButtonCellRendererComponent, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'prg-ws-comments-button-cell-renderer', imports: [ButtonModule], template: `
-    <div>
-      <button cButton [color]="params.data?.orders_notes ? 'primary' : 'secondary'" size="sm" data-action="comment-action" (click)="onCommentClick()">
-        Comments
-      </button>
-    </div>
+            args: [{ standalone: true, selector: 'prg-ws-comments-button-cell-renderer', imports: [ButtonModule], template: `
+    <div>
+      <button cButton [color]="params.data?.orders_notes ? 'primary' : 'secondary'" size="sm" data-action="comment-action" (click)="onCommentClick()">
+        Comments
+      </button>
+    </div>
   ` }]
         }] });
 
@@ -377,6 +377,16 @@ var JSONRPCMethods;
 class JsonrpcServiceLib {
     httpService = inject(HttpClient);
     configService = inject(ConfigurationServiceLib);
+    baseURL$ = new BehaviorSubject('');
+    get baseURL() {
+        return this.baseURL$.value || this.defaultBaseURl;
+    }
+    get defaultBaseURl() {
+        return window.config?.apiBaseURLWebMaint;
+    }
+    setBaseUrl(url) {
+        this.baseURL$.next(url);
+    }
     // JSONRPC POST Request
     postJsonRpcRequest(method, params) {
         const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
@@ -387,7 +397,7 @@ class JsonrpcServiceLib {
             id: this.configService.generateUniqueId()
         };
         return this.httpService
-            .post(window.config?.apiBaseURLWebMaint, body, { headers })
+            .post(this.baseURL, body, { headers })
             .pipe(map(response => ({ ...response, timestamp: new Date().toISOString() })));
     }
     // JSONRPC POST Request With promise
@@ -399,7 +409,7 @@ class JsonrpcServiceLib {
             params: params,
             id: this.configService.generateUniqueId()
         };
-        const request$ = this.httpService.post(window.config?.apiBaseURLWebMaint, body, { headers });
+        const request$ = this.httpService.post(this.baseURL, body, { headers });
         const response = await lastValueFrom(request$);
         return { ...response, timestamp: new Date().toISOString() };
     }
@@ -597,7 +607,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: i4.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i4.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "component", type: i4.MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: ["label", "disabled"] }, { kind: "component", type: i4.MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: EditionListGroupedComponent, decorators: [{
             type: Component,
@@ -670,7 +680,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: i4.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PageStatusCellRendererComponent, decorators: [{
             type: Component,
@@ -702,7 +712,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: i4.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: StatusSelectCellRendererComponent, decorators: [{
             type: Component,
@@ -715,8 +725,11 @@ var FormFieldType;
     FormFieldType["Email"] = "email";
     FormFieldType["Number"] = "number";
     FormFieldType["Select"] = "select";
+    FormFieldType["Autosuggest"] = "autosuggest";
     FormFieldType["Textarea"] = "textarea";
     FormFieldType["Date"] = "date";
+    FormFieldType["Datetime"] = "datetime";
+    FormFieldType["Switch"] = "switch";
     FormFieldType["Checkbox"] = "checkbox";
     FormFieldType["Float"] = "float";
     FormFieldType["Edition"] = "edition";
@@ -1223,10 +1236,179 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }] } });
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
+// Output: "2024-10-02 15:43:58"
+function convertToISOnString(date) {
+    if (!date)
+        return '';
+    const dateString = date instanceof Date ? date.toISOString() : date;
+    if (dateString.includes('T')) {
+        return dateString.replace('T', ' ').split('.')[0];
+    }
+    return dateString;
+}
+// defaultDateFormat = 'DD/MM/YYYY';
+// Output: "02/10/2024"
+function regionalDateFormat(date) {
+    if (!date)
+        return '';
+    const config = window.config;
+    const month = ('0' + (date.getMonth() + 1)).slice(-2);
+    const day = ('0' + date.getDate()).slice(-2);
+    const year = date.getFullYear();
+    switch (config.defaultDateFormat) {
+        case 'MM/DD/YYYY':
+            return `${month}/${day}/${year}`;
+        case 'DD/MM/YYYY':
+            return `${day}/${month}/${year}`;
+        case 'YYYY/MM/DD':
+            return `${year}/${month}/${day}`;
+        default:
+            return `${month}/${day}/${year}`;
+    }
+}
+// convertIsoToFormat(date, 'YYYY/MM/DD');
+// Output: "2024/10/02"
+function convertIsoToFormat(date, dateFormat) {
+    if (!date)
+        return '';
+    const config = window.config;
+    let format;
+    if (dateFormat)
+        format = dateFormat;
+    else
+        format = config.defaultDateFormat;
+    const dateObj = new Date(date);
+    const year = dateObj.getFullYear();
+    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
+    const day = String(dateObj.getDate()).padStart(2, '0');
+    return format.replace('YYYY', String(year)).replace('MM', month).replace('DD', day);
+}
+// Output: 'Oct 2, 2024, 3:43:58 PM'
+function convertDateShort(dateString) {
+    if (!dateString) {
+        return '';
+    }
+    const date = new Date(dateString);
+    return date.toLocaleString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric',
+        second: 'numeric',
+        hour12: true
+    });
+}
+function generateTimeOptions() {
+    const times = [];
+    for (let hour = 0; hour < 24; hour++) {
+        for (let minute = 0; minute < 60; minute += 15) {
+            const hour12 = hour % 12 === 0 ? 12 : hour % 12;
+            const ampm = hour < 12 ? 'am' : 'pm';
+            times.push({
+                value: `${hour},${minute}`,
+                label: `${hour12}:${minute.toString().padStart(2, '0')}${ampm}`
+            });
+        }
+    }
+    return times;
+}
+
+class DateTimePickerComponent {
+    date = null;
+    timeValue = null;
+    disabled = false;
+    timeDropdwons = generateTimeOptions();
+    DEFAULT_TIME = '0,0'; // 12:00 AM
+    onChange = (_) => { };
+    onTouched = () => { };
+    writeValue(value) {
+        if (!value) {
+            this.date = null;
+            this.timeValue = null;
+            return;
+        }
+        const inputDate = value instanceof Date ? value : new Date(value);
+        // ********** FIX FOR COREUI DATE PICKER (LOCAL TIME REPRESENTATION) **********
+        // Get Y, M, D from the UTC value to ensure the correct day is selected, 
+        // then create a new Date object for the start of that day in the LOCAL time zone.
+        const year = inputDate.getUTCFullYear();
+        const month = inputDate.getUTCMonth();
+        const day = inputDate.getUTCDate();
+        // this.date must be a NEW Date reference for the picker to recognize the change
+        this.date = new Date(year, month, day);
+        // *****************************************************************************
+        // FIX for Time (Using UTC getters and normalization)
+        const h = inputDate.getUTCHours();
+        let m = inputDate.getUTCMinutes();
+        m = Math.round(m / 15) * 15;
+        if (m === 60) {
+            m = 0;
+        }
+        this.timeValue = `${h},${m}`;
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    onDateChange(date) {
+        if (!date)
+            return;
+        this.date = date;
+        if (!this.timeValue) {
+            this.timeValue = this.DEFAULT_TIME;
+        }
+        this.emitValue();
+    }
+    onTimeChange(value) {
+        this.timeValue = value;
+        this.emitValue();
+    }
+    emitValue() {
+        if (!this.date || !this.timeValue) {
+            this.onChange(null);
+            return;
+        }
+        const [h, m] = this.timeValue.split(',').map(Number);
+        // Create a new Date object based on the selected date (which is a local midnight)
+        // The key here is to use the UTC setters to apply the time portion 
+        // so the final output is a UTC timestamp as expected by the parent form.
+        const combined = new Date(this.date);
+        combined.setUTCHours(h, m, 0, 0);
+        this.onChange(combined);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: DateTimePickerComponent, isStandalone: false, selector: "app-date-time-picker", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => DateTimePickerComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"row g-3 align-items-end\">\r\n\r\n  <div class=\"col-12 col-md-6\">\r\n    <c-date-picker\r\n    [date]=\"date\"  [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\r\n      cSelect\r\n      class=\"form-select\"\r\n      [value]=\"timeValue\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onTimeChange($any($event.target).value)\">\r\n\r\n      <option\r\n        *ngIf=\"!date\"\r\n        value=\"\">\r\n        Select time\r\n      </option>\r\n\r\n      <option\r\n        *ngFor=\"let time of timeDropdwons\"\r\n        [value]=\"time.value\">\r\n        {{ time.label }}\r\n      </option>\r\n\r\n    </select>\r\n  </div>\r\n\r\n</div>", dependencies: [{ kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "component", type: i4.DatePickerComponent, selector: "c-date-picker", inputs: ["calendars", "placeholder", "date"], outputs: ["dateChange"], exportAs: ["cDatePicker"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-date-time-picker', standalone: false, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => DateTimePickerComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"row g-3 align-items-end\">\r\n\r\n  <div class=\"col-12 col-md-6\">\r\n    <c-date-picker\r\n    [date]=\"date\"  [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\r\n      cSelect\r\n      class=\"form-select\"\r\n      [value]=\"timeValue\"\r\n      [disabled]=\"disabled\"\r\n      (change)=\"onTimeChange($any($event.target).value)\">\r\n\r\n      <option\r\n        *ngIf=\"!date\"\r\n        value=\"\">\r\n        Select time\r\n      </option>\r\n\r\n      <option\r\n        *ngFor=\"let time of timeDropdwons\"\r\n        [value]=\"time.value\">\r\n        {{ time.label }}\r\n      </option>\r\n\r\n    </select>\r\n  </div>\r\n\r\n</div>" }]
+        }] });
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 class MultiFormComponent {
     formBuilder = inject(FormBuilder);
     configurationService = inject(ConfigurationServiceLib);
+    jsonrpcService = inject(JsonrpcServiceLib);
     config;
     showUnsavedFlags;
     currentTableGridsSelectedIndex;
@@ -1443,6 +1625,13 @@ class MultiFormComponent {
             this.multiForm.addControl(controlNameWithAt, this.formBuilder.control(event));
         }
     }
+    handleSearch(field, keyword) {
+        let param = { keyword, userid: 'luke' };
+        const fieldConfig = field.config;
+        this.jsonrpcService.postJsonRpcRequest(fieldConfig.method, param).subscribe((response) => {
+            response.result = response.result || [];
+        });
+    }
     setDefaultAdvanceDate(currentDate, defaultAdvance) {
         if (defaultAdvance === 'weekly') {
             return this.advanceDate(currentDate, 6);
@@ -1495,11 +1684,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>\n  @for (row of config?.rows; track $index; let isLast = $last) {\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\n      @for (field of row; track $index) {\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\n            @if (multiForm.controls[field.controlName]) {\n              <!-- Label  -->\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\n                <label\n                  [wsShowTooltipIfTruncated]=\"field.label\"\n                  cLabel\n                  class=\"mb-1 label-multiform single-line-label\"\n                  [for]=\"field.controlName\"\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\n                  [ngStyle]=\"field.styles?.label\"\n                  >{{ field.label }}\n                  @if (field?.validations?.required || false) {\n                    <strong class=\"text-danger\">*</strong>\n                  }\n                </label>\n              }\n\n              <!-- Text, Email, Number Inputs -->\n              @if (\n                field.type === FormFieldType.Text ||\n                field.type === FormFieldType.Email ||\n                field.type === FormFieldType.Number ||\n                field.type === FormFieldType.Password ||\n                field.type === FormFieldType.Url ||\n                field.type === FormFieldType.Tel\n              ) {\n                <div class=\"position-relative w-100\">\n                  <input\n                    [type]=\"field.type\"\n                    cFormControl\n                    [formControlName]=\"field.controlName\"\n                    [id]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\n                      'no-label-margin': !field.label\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n\n                  @if (field.actionButton) {\n                    <button\n                      type=\"button\"\n                      [cTooltip]=\"field.actionButton?.tooltip\"\n                      tooltipPlacement=\"top\"\n                      cButton\n                      color=\"primary\"\n                      variant=\"outline\"\n                      aria-label=\"action\"\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\n                      (click)=\"onClickFieldAction($event, field)\">\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\n                    </button>\n                  }\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\n                    @if (multiForm.controls[field.controlName]?.errors) {\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Minimum length {{ field?.validations?.minLength }} characters is required\n                        </small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                        </small>\n                      }\n                    }\n                  }\n                </div>\n              }\n\n              <!-- Select Inputs -->\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\n                <ng-container>\n                  <c-multi-select\n                    [multiple]=\"field?.multiple || false\"\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\n                    [clearSearchOnSelect]=\"true\"\n                    [selectionType]=\"field?.selectionType || 'tags'\"\n                    [cleaner]=\"field?.allowCleaner || true\"\n                    [formControlName]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || 'Select'\"\n                    [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\n                    [options]=\"colorCodes$\"\n                    [optionsMaxHeight]=\"400\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\n                    [ngStyle]=\"field.styles?.field\">\n                    @if (field.type === inputType?.colorSelect) {\n                      @for (option of colorCodes$; track $index) {\n                        <c-multi-select-option [value]=\"option?.label\">\n                          <label class=\"d-flex gap-2\">\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\n                            {{ option.label }}\n                          </label>\n                        </c-multi-select-option>\n                      }\n                    } @else {\n                      @for (option of field.options; track $index) {\n                        <c-multi-select-option [value]=\"option?.value\">\n                          {{ option.label }}\n                        </c-multi-select-option>\n                      }\n                    }\n                  </c-multi-select>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <!-- Date input  -->\n              @else if (field.type === FormFieldType.Date) {\n                <ng-container>\n                  <input\n                    type=\"text\"\n                    [placeholder]=\"field?.label || 'Select Date'\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\n                    [formControlName]=\"field.controlName\"\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\n                    [bsConfig]=\"{\n                      containerClass: 'pongrass-red-datepicker',\n                      showWeekNumbers: false,\n                      adaptivePosition: true,\n                      useUtc: false\n                    }\"\n                    bsDatepicker\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Textarea  -->\n              @else if (field.type === FormFieldType.Textarea) {\n                <ng-container>\n                  <textarea\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    [rows]=\"field?.textareaRows || 4\"\n                    [columns]=\"field?.textareaColumns || 4\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [formControlName]=\"field.controlName\"\n                    [ngStyle]=\"field.styles?.field\"></textarea>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Checkbox  -->\n              @else if (field.type === FormFieldType.Checkbox) {\n                <div class=\"no-label-margin\">\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\n                </div>\n              }\n              <!-- Decimal input  -->\n              @else if (field.type === FormFieldType.Float) {\n                <ng-container>\n                  <input\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    type=\"number\"\n                    class=\"me-2\"\n                    [formControlName]=\"field.controlName\"\n                    [wsDecimalInput]=\"field.validations?.precision || 2\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              } @else if (field.type === FormFieldType.Edition) {\n                <ng-container>\n                  <prg-ws-edition-list-grouped\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\n                    [multiple]=\"field?.multiple === false ? false : true\"\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\n                  </prg-ws-edition-list-grouped>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n            }\n          </div>\n        }\n\n        @if (field?.type === FormFieldType.Separator) {\n          <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\n        }\n        @if (field?.type === FormFieldType.FormHeader) {\n          <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\n        }\n      }\n    </div>\n  }\n</form>\n", styles: [".no-label-margin{margin-top:1.6rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.h-135{height:135px}.single-line-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.label-multiform{font-size:16px;font-weight:400}.field-checkbox{display:flex;align-items:center}::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: "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: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: DecimalInputDirective, selector: "[wsDecimalInput]", inputs: ["wsDecimalInput"] }, { kind: "directive", type: ShowTooltipIfTruncatedDirective, selector: "[wsShowTooltipIfTruncated]", inputs: ["wsShowTooltipIfTruncated"] }, { kind: "directive", type: 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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MultiFormComponent, isStandalone: false, selector: "prg-ws-multi-form", inputs: { config: "config", showUnsavedFlags: "showUnsavedFlags", currentTableGridsSelectedIndex: "currentTableGridsSelectedIndex", formId: "formId" }, outputs: { fieldAction: "fieldAction", formSavedUnsavedListen: "formSavedUnsavedListen", selectionChangeEvent: "selectionChangeEvent" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" wsCircularFocus>\r\n  @for (row of config?.rows; track $index; let isLast = $last) {\r\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\r\n      @for (field of row; track $index) {\r\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\r\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\r\n            @if (multiForm.controls[field.controlName]) {\r\n              <!-- Label  -->\r\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\r\n                <label\r\n                  [wsShowTooltipIfTruncated]=\"field.label\"\r\n                  cLabel\r\n                  class=\"mb-1 label-multiform single-line-label\"\r\n                  [for]=\"field.controlName\"\r\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\r\n                  [ngStyle]=\"field.styles?.label\"\r\n                  >{{ field.label }}\r\n                  @if (field?.validations?.required || false) {\r\n                    <strong class=\"text-danger\">*</strong>\r\n                  }\r\n                </label>\r\n              }\r\n\r\n              <!-- Text, Email, Number Inputs -->\r\n              @if (\r\n                field.type === FormFieldType.Text ||\r\n                field.type === FormFieldType.Email ||\r\n                field.type === FormFieldType.Number ||\r\n                field.type === FormFieldType.Password ||\r\n                field.type === FormFieldType.Url ||\r\n                field.type === FormFieldType.Tel\r\n              ) {\r\n                <div class=\"position-relative w-100\">\r\n                  <input\r\n                    [type]=\"field.type\"\r\n                    cFormControl\r\n                    [formControlName]=\"field.controlName\"\r\n                    [id]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\r\n                      'no-label-margin': !field.label\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n\r\n                  @if (field.actionButton) {\r\n                    <button\r\n                      type=\"button\"\r\n                      [cTooltip]=\"field.actionButton?.tooltip\"\r\n                      tooltipPlacement=\"top\"\r\n                      cButton\r\n                      color=\"primary\"\r\n                      variant=\"outline\"\r\n                      aria-label=\"action\"\r\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\r\n                      (click)=\"onClickFieldAction($event, field)\">\r\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\r\n                    </button>\r\n                  }\r\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\r\n                    @if (multiForm.controls[field.controlName]?.errors) {\r\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Minimum length {{ field?.validations?.minLength }} characters is required\r\n                        </small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                        </small>\r\n                      }\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <!-- Select Inputs -->\r\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n                <ng-container>\r\n                  <c-multi-select\r\n                    [multiple]=\"field?.multiple || false\"\r\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\r\n                    [clearSearchOnSelect]=\"true\"\r\n                    [selectionType]=\"field?.selectionType || 'tags'\"\r\n                    [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Select'\"\r\n                    [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n                    [options]=\"colorCodes$\"\r\n                    [optionsMaxHeight]=\"400\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\r\n                    [ngStyle]=\"field.styles?.field\">\r\n                    @if (field.type === inputType?.colorSelect) {\r\n                      @for (option of colorCodes$; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.label\">\r\n                          <label class=\"d-flex gap-2\">\r\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n                            {{ option.label }}\r\n                          </label>\r\n                        </c-multi-select-option>\r\n                      }\r\n                    } @else {\r\n                      @for (option of field.options; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.value\">\r\n                          {{ option.label }}\r\n                        </c-multi-select-option>\r\n                      }\r\n                    }\r\n                  </c-multi-select>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Autosuggest Inputs -->\r\n              @else if (field.type === FormFieldType.Autosuggest) {\r\n                <ng-container>\r\n                  <input\r\n                    cAutocomplete\r\n                    [options]=\"field.options\"\r\n                    [searchNoResultsLabel]=\"'No results found'\"\r\n                    cleaner highlightOptionsOnSearch indicator\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Type and search...'\"\r\n                    (inputChange)=\"handleSearch(field, $event)\"\r\n                    [search]=\"{ external: true, global: true }\"\r\n                  />\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Date) {\r\n                <ng-container>\r\n                  <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"field?.label || 'Select Date'\"\r\n                    class=\"form-control\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n                    [bsConfig]=\"{\r\n                      containerClass: 'pongrass-red-datepicker',\r\n                      showWeekNumbers: false,\r\n                      adaptivePosition: true,\r\n                      useUtc: false\r\n                    }\"\r\n                    bsDatepicker\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n               <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Datetime) {\r\n                <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n              }\r\n\r\n              <!-- Textarea  -->\r\n              @else if (field.type === FormFieldType.Textarea) {\r\n                <ng-container>\r\n                  <textarea\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    [rows]=\"field?.textareaRows || 4\"\r\n                    [columns]=\"field?.textareaColumns || 4\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [ngStyle]=\"field.styles?.field\"></textarea>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n              <!-- Checkbox  -->\r\n              @else if (field.type === FormFieldType.Checkbox) {\r\n                <div class=\"no-label-margin\">\r\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n                </div>\r\n              }\r\n\r\n              @else if (field.type === FormFieldType.Switch) {\r\n                <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n                 <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n                </c-form-check>\r\n              }\r\n              <!-- Decimal input  -->\r\n              @else if (field.type === FormFieldType.Float) {\r\n                <ng-container>\r\n                  <input\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    type=\"number\"\r\n                    class=\"me-2\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [wsDecimalInput]=\"field.validations?.precision || 2\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              } @else if (field.type === FormFieldType.Edition) {\r\n                <ng-container>\r\n                  <prg-ws-edition-list-grouped\r\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\r\n                    [multiple]=\"field?.multiple === false ? false : true\"\r\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\r\n                  </prg-ws-edition-list-grouped>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n\r\n        @if (field?.type === FormFieldType.Separator) {\r\n          <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\r\n        }\r\n        @if (field?.type === FormFieldType.FormHeader) {\r\n          <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\r\n        }\r\n      }\r\n    </div>\r\n  }\r\n</form>\r\n", styles: [".no-label-margin{margin-top:1.6rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.h-135{height:135px}.single-line-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.label-multiform{font-size:16px;font-weight:400}.field-checkbox{display:flex;align-items:center}::ng-deep [data-coreui-theme=dark] .bs-datepicker{background:#212631;box-shadow:0 0 10px #323a49}::ng-deep [data-coreui-theme=dark] .bs-datepicker .bs-datepicker-body{border:1px solid #323a49}::ng-deep .pongrass-red-datepicker .bs-datepicker-head{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td span.selected,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td.selected span,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td span[class*=select-]:after,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td[class*=select-] span:after{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td.week span{color:#ff4d5c}\n"], dependencies: [{ kind: "directive", type: CircularFocusDirective, selector: "[wsCircularFocus]", inputs: ["formId", "formGroup"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i4.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: i4.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "component", type: i4.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i4.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i4.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: i4.FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: DecimalInputDirective, selector: "[wsDecimalInput]", inputs: ["wsDecimalInput"] }, { kind: "directive", type: ShowTooltipIfTruncatedDirective, selector: "[wsShowTooltipIfTruncated]", inputs: ["wsShowTooltipIfTruncated"] }, { kind: "directive", type: i4.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i8.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i8.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i4.AutocompleteDirective, selector: "input[cAutocomplete]", inputs: ["popperOptionsInput", "allowOnlyDefinedOptions", "cleaner", "clearSearchOnSelect", "delay", "disabled", "highlightOptionsOnSearch", "id", "indicator", "itemSize", "loading", "options", "optionsMaxHeight", "optionTemplate", "optionGroupTemplate", "placeholder", "readOnly", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "showHints", "sizing", "valid", "value", "virtualScroller", "visible", "visibleItems"], outputs: ["inputChange", "optionChange", "valueChange", "visibleChange"], exportAs: ["cAutocomplete"] }, { kind: "component", type: EditionListGroupedComponent, selector: "prg-ws-edition-list-grouped", inputs: ["label", "multiple", "hasFormError"], outputs: ["selectedEditionsChange"] }, { kind: "directive", type: MultiSelectStylerDirective, selector: "[wsMultiSelectStyler]", inputs: ["wsMultiSelectStyler", "options"] }, { kind: "component", type: 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>\n  @for (row of config?.rows; track $index; let isLast = $last) {\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\n      @for (field of row; track $index) {\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\n            @if (multiForm.controls[field.controlName]) {\n              <!-- Label  -->\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\n                <label\n                  [wsShowTooltipIfTruncated]=\"field.label\"\n                  cLabel\n                  class=\"mb-1 label-multiform single-line-label\"\n                  [for]=\"field.controlName\"\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\n                  [ngStyle]=\"field.styles?.label\"\n                  >{{ field.label }}\n                  @if (field?.validations?.required || false) {\n                    <strong class=\"text-danger\">*</strong>\n                  }\n                </label>\n              }\n\n              <!-- Text, Email, Number Inputs -->\n              @if (\n                field.type === FormFieldType.Text ||\n                field.type === FormFieldType.Email ||\n                field.type === FormFieldType.Number ||\n                field.type === FormFieldType.Password ||\n                field.type === FormFieldType.Url ||\n                field.type === FormFieldType.Tel\n              ) {\n                <div class=\"position-relative w-100\">\n                  <input\n                    [type]=\"field.type\"\n                    cFormControl\n                    [formControlName]=\"field.controlName\"\n                    [id]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\n                      'no-label-margin': !field.label\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n\n                  @if (field.actionButton) {\n                    <button\n                      type=\"button\"\n                      [cTooltip]=\"field.actionButton?.tooltip\"\n                      tooltipPlacement=\"top\"\n                      cButton\n                      color=\"primary\"\n                      variant=\"outline\"\n                      aria-label=\"action\"\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\n                      (click)=\"onClickFieldAction($event, field)\">\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\n                    </button>\n                  }\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\n                    @if (multiForm.controls[field.controlName]?.errors) {\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Minimum length {{ field?.validations?.minLength }} characters is required\n                        </small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                        </small>\n                      }\n                    }\n                  }\n                </div>\n              }\n\n              <!-- Select Inputs -->\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\n                <ng-container>\n                  <c-multi-select\n                    [multiple]=\"field?.multiple || false\"\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\n                    [clearSearchOnSelect]=\"true\"\n                    [selectionType]=\"field?.selectionType || 'tags'\"\n                    [cleaner]=\"field?.allowCleaner || true\"\n                    [formControlName]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || 'Select'\"\n                    [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\n                    [options]=\"colorCodes$\"\n                    [optionsMaxHeight]=\"400\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\n                    [ngStyle]=\"field.styles?.field\">\n                    @if (field.type === inputType?.colorSelect) {\n                      @for (option of colorCodes$; track $index) {\n                        <c-multi-select-option [value]=\"option?.label\">\n                          <label class=\"d-flex gap-2\">\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\n                            {{ option.label }}\n                          </label>\n                        </c-multi-select-option>\n                      }\n                    } @else {\n                      @for (option of field.options; track $index) {\n                        <c-multi-select-option [value]=\"option?.value\">\n                          {{ option.label }}\n                        </c-multi-select-option>\n                      }\n                    }\n                  </c-multi-select>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <!-- Date input  -->\n              @else if (field.type === FormFieldType.Date) {\n                <ng-container>\n                  <input\n                    type=\"text\"\n                    [placeholder]=\"field?.label || 'Select Date'\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\n                    [formControlName]=\"field.controlName\"\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\n                    [bsConfig]=\"{\n                      containerClass: 'pongrass-red-datepicker',\n                      showWeekNumbers: false,\n                      adaptivePosition: true,\n                      useUtc: false\n                    }\"\n                    bsDatepicker\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Textarea  -->\n              @else if (field.type === FormFieldType.Textarea) {\n                <ng-container>\n                  <textarea\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    [rows]=\"field?.textareaRows || 4\"\n                    [columns]=\"field?.textareaColumns || 4\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [formControlName]=\"field.controlName\"\n                    [ngStyle]=\"field.styles?.field\"></textarea>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Checkbox  -->\n              @else if (field.type === FormFieldType.Checkbox) {\n                <div class=\"no-label-margin\">\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\n                </div>\n              }\n              <!-- Decimal input  -->\n              @else if (field.type === FormFieldType.Float) {\n                <ng-container>\n                  <input\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    type=\"number\"\n                    class=\"me-2\"\n                    [formControlName]=\"field.controlName\"\n                    [wsDecimalInput]=\"field.validations?.precision || 2\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              } @else if (field.type === FormFieldType.Edition) {\n                <ng-container>\n                  <prg-ws-edition-list-grouped\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\n                    [multiple]=\"field?.multiple === false ? false : true\"\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\n                  </prg-ws-edition-list-grouped>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n            }\n          </div>\n        }\n\n        @if (field?.type === FormFieldType.Separator) {\n          <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\n        }\n        @if (field?.type === FormFieldType.FormHeader) {\n          <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\n        }\n      }\n    </div>\n  }\n</form>\n", styles: [".no-label-margin{margin-top:1.6rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.h-135{height:135px}.single-line-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.label-multiform{font-size:16px;font-weight:400}.field-checkbox{display:flex;align-items:center}::ng-deep [data-coreui-theme=dark] .bs-datepicker{background:#212631;box-shadow:0 0 10px #323a49}::ng-deep [data-coreui-theme=dark] .bs-datepicker .bs-datepicker-body{border:1px solid #323a49}::ng-deep .pongrass-red-datepicker .bs-datepicker-head{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td span.selected,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td.selected span,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td span[class*=select-]:after,::ng-deep .pongrass-red-datepicker .theme-red .bs-datepicker-body table td[class*=select-] span:after{background-color:#ff4d5c}::ng-deep .pongrass-red-datepicker .bs-datepicker-body table td.week span{color:#ff4d5c}\n"] }]
+            args: [{ selector: 'prg-ws-multi-form', standalone: false, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" wsCircularFocus>\r\n  @for (row of config?.rows; track $index; let isLast = $last) {\r\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\r\n      @for (field of row; track $index) {\r\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\r\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\r\n            @if (multiForm.controls[field.controlName]) {\r\n              <!-- Label  -->\r\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\r\n                <label\r\n                  [wsShowTooltipIfTruncated]=\"field.label\"\r\n                  cLabel\r\n                  class=\"mb-1 label-multiform single-line-label\"\r\n                  [for]=\"field.controlName\"\r\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\r\n                  [ngStyle]=\"field.styles?.label\"\r\n                  >{{ field.label }}\r\n                  @if (field?.validations?.required || false) {\r\n                    <strong class=\"text-danger\">*</strong>\r\n                  }\r\n                </label>\r\n              }\r\n\r\n              <!-- Text, Email, Number Inputs -->\r\n              @if (\r\n                field.type === FormFieldType.Text ||\r\n                field.type === FormFieldType.Email ||\r\n                field.type === FormFieldType.Number ||\r\n                field.type === FormFieldType.Password ||\r\n                field.type === FormFieldType.Url ||\r\n                field.type === FormFieldType.Tel\r\n              ) {\r\n                <div class=\"position-relative w-100\">\r\n                  <input\r\n                    [type]=\"field.type\"\r\n                    cFormControl\r\n                    [formControlName]=\"field.controlName\"\r\n                    [id]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\r\n                      'no-label-margin': !field.label\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n\r\n                  @if (field.actionButton) {\r\n                    <button\r\n                      type=\"button\"\r\n                      [cTooltip]=\"field.actionButton?.tooltip\"\r\n                      tooltipPlacement=\"top\"\r\n                      cButton\r\n                      color=\"primary\"\r\n                      variant=\"outline\"\r\n                      aria-label=\"action\"\r\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\r\n                      (click)=\"onClickFieldAction($event, field)\">\r\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\r\n                    </button>\r\n                  }\r\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\r\n                    @if (multiForm.controls[field.controlName]?.errors) {\r\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Minimum length {{ field?.validations?.minLength }} characters is required\r\n                        </small>\r\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                        <small class=\"text-danger fst-italic form-invalid-label\">\r\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                        </small>\r\n                      }\r\n                    }\r\n                  }\r\n                </div>\r\n              }\r\n\r\n              <!-- Select Inputs -->\r\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\r\n                <ng-container>\r\n                  <c-multi-select\r\n                    [multiple]=\"field?.multiple || false\"\r\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\r\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\r\n                    [clearSearchOnSelect]=\"true\"\r\n                    [selectionType]=\"field?.selectionType || 'tags'\"\r\n                    [cleaner]=\"field?.allowCleaner === false ? false : true\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Select'\"\r\n                    [wsMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\r\n                    [options]=\"colorCodes$\"\r\n                    [optionsMaxHeight]=\"400\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\r\n                    [ngStyle]=\"field.styles?.field\">\r\n                    @if (field.type === inputType?.colorSelect) {\r\n                      @for (option of colorCodes$; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.label\">\r\n                          <label class=\"d-flex gap-2\">\r\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\r\n                            {{ option.label }}\r\n                          </label>\r\n                        </c-multi-select-option>\r\n                      }\r\n                    } @else {\r\n                      @for (option of field.options; track $index) {\r\n                        <c-multi-select-option [value]=\"option?.value\">\r\n                          {{ option.label }}\r\n                        </c-multi-select-option>\r\n                      }\r\n                    }\r\n                  </c-multi-select>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Autosuggest Inputs -->\r\n              @else if (field.type === FormFieldType.Autosuggest) {\r\n                <ng-container>\r\n                  <input\r\n                    cAutocomplete\r\n                    [options]=\"field.options\"\r\n                    [searchNoResultsLabel]=\"'No results found'\"\r\n                    cleaner highlightOptionsOnSearch indicator\r\n                    [formControlName]=\"field.controlName\"\r\n                    [placeholder]=\"field.placeholder || 'Type and search...'\"\r\n                    (inputChange)=\"handleSearch(field, $event)\"\r\n                    [search]=\"{ external: true, global: true }\"\r\n                  />\r\n                </ng-container>\r\n              }\r\n\r\n              <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Date) {\r\n                <ng-container>\r\n                  <input\r\n                    type=\"text\"\r\n                    [placeholder]=\"field?.label || 'Select Date'\"\r\n                    class=\"form-control\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\r\n                    [bsConfig]=\"{\r\n                      containerClass: 'pongrass-red-datepicker',\r\n                      showWeekNumbers: false,\r\n                      adaptivePosition: true,\r\n                      useUtc: false\r\n                    }\"\r\n                    bsDatepicker\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n\r\n               <!-- Date input  -->\r\n              @else if (field.type === FormFieldType.Datetime) {\r\n                <app-date-time-picker [formControlName]=\"field.controlName\"></app-date-time-picker>\r\n              }\r\n\r\n              <!-- Textarea  -->\r\n              @else if (field.type === FormFieldType.Textarea) {\r\n                <ng-container>\r\n                  <textarea\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    [rows]=\"field?.textareaRows || 4\"\r\n                    [columns]=\"field?.textareaColumns || 4\"\r\n                    [placeholder]=\"field.placeholder || ''\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [ngStyle]=\"field.styles?.field\"></textarea>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\r\n              <!-- Checkbox  -->\r\n              @else if (field.type === FormFieldType.Checkbox) {\r\n                <div class=\"no-label-margin\">\r\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\r\n                </div>\r\n              }\r\n\r\n              @else if (field.type === FormFieldType.Switch) {\r\n                <c-form-check sizing=\"lg\" [switch]=\"true\">\r\n                 <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\r\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.info }}</label>\r\n                </c-form-check>\r\n              }\r\n              <!-- Decimal input  -->\r\n              @else if (field.type === FormFieldType.Float) {\r\n                <ng-container>\r\n                  <input\r\n                    cFormControl\r\n                    [id]=\"field.controlName\"\r\n                    type=\"number\"\r\n                    class=\"me-2\"\r\n                    [formControlName]=\"field.controlName\"\r\n                    [wsDecimalInput]=\"field.validations?.precision || 2\"\r\n                    [ngClass]=\"{\r\n                      'form-invalid border-danger border border-2':\r\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\r\n                    }\"\r\n                    [min]=\"field.validations?.min\"\r\n                    [max]=\"field.validations?.max\"\r\n                    [ngStyle]=\"field.styles?.field\" />\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Minimum length {{ field?.validations?.minLength }} characters is required\r\n                      </small>\r\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">\r\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\r\n                      </small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              } @else if (field.type === FormFieldType.Edition) {\r\n                <ng-container>\r\n                  <prg-ws-edition-list-grouped\r\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\r\n                    [multiple]=\"field?.multiple === false ? false : true\"\r\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\r\n                  </prg-ws-edition-list-grouped>\r\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\r\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\r\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\r\n                    }\r\n                  }\r\n                </ng-container>\r\n              }\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: [{
@@ -1518,7 +1707,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
 
 class MultiFormModule {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: MultiFormModule, declarations: [MultiFormComponent], imports: [CircularFocusDirective,
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: MultiFormModule, declarations: [MultiFormComponent, DateTimePickerComponent], imports: [CircularFocusDirective,
             CommonModule,
             ReactiveFormsModule,
             MultiSelectModule,
@@ -1532,8 +1721,10 @@ class MultiFormModule {
             TooltipModule,
             ButtonModule,
             BsDatepickerModule,
+            AutocompleteModule,
+            FormCheckInputDirective,
             EditionListGroupedComponent,
-            MultiSelectStylerDirective], exports: [MultiFormComponent] });
+            MultiSelectStylerDirective], exports: [MultiFormComponent, DateTimePickerComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormModule, imports: [CommonModule,
             ReactiveFormsModule,
             MultiSelectModule,
@@ -1545,12 +1736,13 @@ class MultiFormModule {
             TooltipModule,
             ButtonModule,
             BsDatepickerModule,
+            AutocompleteModule,
             EditionListGroupedComponent] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormModule, decorators: [{
             type: NgModule,
             args: [{
-                    declarations: [MultiFormComponent],
+                    declarations: [MultiFormComponent, DateTimePickerComponent],
                     imports: [
                         CircularFocusDirective,
                         CommonModule,
@@ -1566,10 +1758,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                         TooltipModule,
                         ButtonModule,
                         BsDatepickerModule,
+                        AutocompleteModule,
+                        FormCheckInputDirective,
                         EditionListGroupedComponent,
                         MultiSelectStylerDirective
                     ],
-                    exports: [MultiFormComponent]
+                    exports: [MultiFormComponent, DateTimePickerComponent]
                 }]
         }] });
 
@@ -1621,7 +1815,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: i4.ModalBodyComponent, selector: "c-modal-body" }, { kind: "component", type: i4.ModalComponent, selector: "c-modal", inputs: ["alignment", "backdrop", "fullscreen", "keyboard", "id", "size", "transition", "role", "ariaModal", "scrollable", "visible"], outputs: ["visibleChange"], exportAs: ["cModal"] }, { kind: "component", type: i4.ModalFooterComponent, selector: "c-modal-footer" }, { kind: "component", type: i4.ModalHeaderComponent, selector: "c-modal-header" }, { kind: "directive", type: i4.ModalTitleDirective, selector: "[cModalTitle]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GenericFilterModelComponent, decorators: [{
             type: Component,
@@ -1670,6 +1864,7 @@ class TableGridComponent {
     initialPageNumber;
     tableGridReady;
     tableRowSelection;
+    tableRowSelectionChanged;
     tableRowClicked;
     columnStateEvent;
     pageChange;
@@ -1723,6 +1918,7 @@ class TableGridComponent {
     constructor() {
         this.tableGridReady = new EventEmitter();
         this.tableRowSelection = new EventEmitter();
+        this.tableRowSelectionChanged = new EventEmitter();
         this.tableRowClicked = new EventEmitter();
         this.columnStateEvent = new EventEmitter();
         this.pageChange = new EventEmitter();
@@ -1776,6 +1972,14 @@ class TableGridComponent {
     onRowClicked(event) {
         this.tableRowClicked.emit({ event: event, row: event.data });
     }
+    /** Send on checkbox selection event event to parent component when row selection is changed */
+    onRowSelectionChanged(event) {
+        if (this.gridAPI) {
+            const selectedNodes = this.gridAPI.api.getSelectedNodes();
+            const selectedData = selectedNodes.map(node => node.data);
+            this.tableRowSelectionChanged.emit(selectedData);
+        }
+    }
     /** Create column state on initialization of table grid */
     createColumnState() {
         if (this.gridAPI) {
@@ -2047,11 +2251,11 @@ class TableGridComponent {
         this.subscribeUntil$.complete();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: TableGridComponent, isStandalone: false, selector: "prg-ws-table-grid", inputs: { tableConfiguration: "tableConfiguration", columnToolVisible: "columnToolVisible", initialPageNumber: "initialPageNumber" }, outputs: { tableGridReady: "tableGridReady", tableRowSelection: "tableRowSelection", tableRowClicked: "tableRowClicked", columnStateEvent: "columnStateEvent", pageChange: "pageChange", filterChanged: "filterChanged", cellValueChanged: "cellValueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-md-flex\">\n    <div class=\"table-list-wrapper flex-fill\">\n      <!-- style=\"width: 100%; height: 567px\" -->\n      <ag-grid-angular\n        style=\"width: 100%\"\n        [rowData]=\"tableConfiguration.rows\"\n        [columnDefs]=\"tableConfiguration.columnDefs\"\n        [defaultColDef]=\"tableConfiguration.defaultColDef\"\n        [rowSelection]=\"tableConfiguration.rowSelectionOption\"\n        [pagination]=\"tableConfiguration.pagination.enabled\"\n        [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\n        [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\n        [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\n        [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\n        (gridReady)=\"onGridReady($event)\"\n        (rowSelected)=\"onRowSelected($event)\"\n        (rowClicked)=\"onRowClicked($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (columnMoved)=\"onColumnMoved($event)\"\n        (sortChanged)=\"onSortChanged($event)\"\n        (paginationChanged)=\"onPaginationChanged($event)\"\n        (firstDataRendered)=\"onFirstDataRendered($event)\"\n        (filterChanged)=\"onFilterChanged($event)\"\n        (cellValueChanged)=\"onCellValueChanged($event)\"\n        [masterDetail]=\"tableConfiguration.masterDetail\"\n        [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\n        [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\n        [enableCellTextSelection]=\"true\"\n        [gridOptions]=\"gridOptions\"\n        [ensureDomOrder]=\"true\"\n        [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\n    </div>\n\n    @if (columnToolVisible && columnsListselectionForm) {\n      <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\n        <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\n          <span\n            class=\"cursor-pointer text-primary\"\n            tooltipPlacement=\"top\"\n            cTooltip=\"Column Preference\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\n            <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\n          </span>\n\n          <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\n            <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\n          </span>\n        </div>\n      </div>\n\n      <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\n        <c-offcanvas-header>\n          <h5 cOffcanvasTitle>Table Column Preference</h5>\n          <button\n            cButtonClose\n            size=\"sm\"\n            class=\"text-reset ms-auto\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\n            aria-label=\"Close\"></button>\n        </c-offcanvas-header>\n        <c-offcanvas-body>\n          <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\n            @for (item of this.tableGridState; track $index) {\n              <div class=\"checkbox-item px-1\">\n                <c-form-check>\n                  <input\n                    (change)=\"getCheckboxStatus($event, item.key)\"\n                    [checked]=\"columnsListselectionForm.get(item.key)?.value\"\n                    cFormCheckInput\n                    [id]=\"'cb_' + item.key\"\n                    type=\"checkbox\"\n                    [formControl]=\"columnsListselectionForm.controls[item.key]\" />\n                  <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\n                    {{ item?.headerName || item?.label }}</label\n                  >\n                </c-form-check>\n              </div>\n            }\n          </div>\n          <div class=\"align d-flex gap-3 justify-content-end\">\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreferenceV2()\">\n              Clear\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreference()\">\n              Reset\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"updatetablePreference()\">\n              Update\n            </button>\n          </div>\n        </c-offcanvas-body>\n      </c-offcanvas>\n    }\n  </div>\n</div>\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: i1$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: 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: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: TableGridComponent, isStandalone: false, selector: "prg-ws-table-grid", inputs: { tableConfiguration: "tableConfiguration", columnToolVisible: "columnToolVisible", initialPageNumber: "initialPageNumber" }, outputs: { tableGridReady: "tableGridReady", tableRowSelection: "tableRowSelection", tableRowSelectionChanged: "tableRowSelectionChanged", tableRowClicked: "tableRowClicked", columnStateEvent: "columnStateEvent", pageChange: "pageChange", filterChanged: "filterChanged", cellValueChanged: "cellValueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\r\n  <div class=\"col-12 d-md-flex\">\r\n    <div class=\"table-list-wrapper flex-fill\">\r\n      <!-- style=\"width: 100%; height: 567px\" -->\r\n      <ag-grid-angular\r\n        style=\"width: 100%\"\r\n        [rowData]=\"tableConfiguration.rows\"\r\n        [columnDefs]=\"tableConfiguration.columnDefs\"\r\n        [defaultColDef]=\"tableConfiguration.defaultColDef\"\r\n        [rowSelection]=\"tableConfiguration.rowSelectionOption\"\r\n        [pagination]=\"tableConfiguration.pagination.enabled\"\r\n        [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\r\n        [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\r\n        [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\r\n        [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\r\n        (gridReady)=\"onGridReady($event)\"\r\n        (rowSelected)=\"onRowSelected($event)\"\r\n        (rowClicked)=\"onRowClicked($event)\"\r\n        (columnResized)=\"onColumnResized($event)\"\r\n        (columnMoved)=\"onColumnMoved($event)\"\r\n        (sortChanged)=\"onSortChanged($event)\"\r\n        (paginationChanged)=\"onPaginationChanged($event)\"\r\n        (firstDataRendered)=\"onFirstDataRendered($event)\"\r\n        (filterChanged)=\"onFilterChanged($event)\"\r\n        (cellValueChanged)=\"onCellValueChanged($event)\"\r\n         (selectionChanged)=\"onRowSelectionChanged($event)\" \r\n        [masterDetail]=\"tableConfiguration.masterDetail\"\r\n        [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\r\n        [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\r\n        [enableCellTextSelection]=\"true\"\r\n        [gridOptions]=\"gridOptions\"\r\n        [ensureDomOrder]=\"true\"\r\n        [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\r\n    </div>\r\n\r\n    @if (columnToolVisible && columnsListselectionForm) {\r\n      <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\r\n        <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\r\n          <span\r\n            class=\"cursor-pointer text-primary\"\r\n            tooltipPlacement=\"top\"\r\n            cTooltip=\"Column Preference\"\r\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\r\n            <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\r\n          </span>\r\n\r\n          <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\r\n            <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\r\n        <c-offcanvas-header>\r\n          <h5 cOffcanvasTitle>Table Column Preference</h5>\r\n          <button\r\n            cButtonClose\r\n            size=\"sm\"\r\n            class=\"text-reset ms-auto\"\r\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\r\n            aria-label=\"Close\"></button>\r\n        </c-offcanvas-header>\r\n        <c-offcanvas-body>\r\n          <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\r\n            @for (item of this.tableGridState; track $index) {\r\n              <div class=\"checkbox-item px-1\">\r\n                <c-form-check>\r\n                  <input\r\n                    (change)=\"getCheckboxStatus($event, item.key)\"\r\n                    [checked]=\"columnsListselectionForm.get(item.key)?.value\"\r\n                    cFormCheckInput\r\n                    [id]=\"'cb_' + item.key\"\r\n                    type=\"checkbox\"\r\n                    [formControl]=\"columnsListselectionForm.controls[item.key]\" />\r\n                  <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\r\n                    {{ item?.headerName || item?.label }}</label\r\n                  >\r\n                </c-form-check>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div class=\"align d-flex gap-3 justify-content-end\">\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"resetTablePreferenceV2()\">\r\n              Clear\r\n            </button>\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"resetTablePreference()\">\r\n              Reset\r\n            </button>\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"updatetablePreference()\">\r\n              Update\r\n            </button>\r\n          </div>\r\n        </c-offcanvas-body>\r\n      </c-offcanvas>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: i1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: i4.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i4.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i4.ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { kind: "component", type: i4.OffcanvasBodyComponent, selector: "c-offcanvas-body" }, { kind: "component", type: i4.OffcanvasComponent, selector: "c-offcanvas", inputs: ["backdrop", "keyboard", "placement", "responsive", "id", "role", "ariaModal", "scroll", "visible"], outputs: ["visibleChange"], exportAs: ["cOffcanvas"] }, { kind: "component", type: i4.OffcanvasHeaderComponent, selector: "c-offcanvas-header" }, { kind: "directive", type: i4.OffcanvasTitleDirective, selector: "[cOffcanvasTitle]" }, { kind: "directive", type: i4.OffcanvasToggleDirective, selector: "[cOffcanvasToggle]", inputs: ["cOffcanvasToggle"] }, { kind: "directive", type: i4.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'prg-ws-table-grid', standalone: false, template: "<div class=\"row\">\n  <div class=\"col-12 d-md-flex\">\n    <div class=\"table-list-wrapper flex-fill\">\n      <!-- style=\"width: 100%; height: 567px\" -->\n      <ag-grid-angular\n        style=\"width: 100%\"\n        [rowData]=\"tableConfiguration.rows\"\n        [columnDefs]=\"tableConfiguration.columnDefs\"\n        [defaultColDef]=\"tableConfiguration.defaultColDef\"\n        [rowSelection]=\"tableConfiguration.rowSelectionOption\"\n        [pagination]=\"tableConfiguration.pagination.enabled\"\n        [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\n        [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\n        [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\n        [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\n        (gridReady)=\"onGridReady($event)\"\n        (rowSelected)=\"onRowSelected($event)\"\n        (rowClicked)=\"onRowClicked($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (columnMoved)=\"onColumnMoved($event)\"\n        (sortChanged)=\"onSortChanged($event)\"\n        (paginationChanged)=\"onPaginationChanged($event)\"\n        (firstDataRendered)=\"onFirstDataRendered($event)\"\n        (filterChanged)=\"onFilterChanged($event)\"\n        (cellValueChanged)=\"onCellValueChanged($event)\"\n        [masterDetail]=\"tableConfiguration.masterDetail\"\n        [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\n        [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\n        [enableCellTextSelection]=\"true\"\n        [gridOptions]=\"gridOptions\"\n        [ensureDomOrder]=\"true\"\n        [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\n    </div>\n\n    @if (columnToolVisible && columnsListselectionForm) {\n      <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\n        <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\n          <span\n            class=\"cursor-pointer text-primary\"\n            tooltipPlacement=\"top\"\n            cTooltip=\"Column Preference\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\n            <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\n          </span>\n\n          <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\n            <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\n          </span>\n        </div>\n      </div>\n\n      <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\n        <c-offcanvas-header>\n          <h5 cOffcanvasTitle>Table Column Preference</h5>\n          <button\n            cButtonClose\n            size=\"sm\"\n            class=\"text-reset ms-auto\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\n            aria-label=\"Close\"></button>\n        </c-offcanvas-header>\n        <c-offcanvas-body>\n          <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\n            @for (item of this.tableGridState; track $index) {\n              <div class=\"checkbox-item px-1\">\n                <c-form-check>\n                  <input\n                    (change)=\"getCheckboxStatus($event, item.key)\"\n                    [checked]=\"columnsListselectionForm.get(item.key)?.value\"\n                    cFormCheckInput\n                    [id]=\"'cb_' + item.key\"\n                    type=\"checkbox\"\n                    [formControl]=\"columnsListselectionForm.controls[item.key]\" />\n                  <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\n                    {{ item?.headerName || item?.label }}</label\n                  >\n                </c-form-check>\n              </div>\n            }\n          </div>\n          <div class=\"align d-flex gap-3 justify-content-end\">\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreferenceV2()\">\n              Clear\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreference()\">\n              Reset\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"updatetablePreference()\">\n              Update\n            </button>\n          </div>\n        </c-offcanvas-body>\n      </c-offcanvas>\n    }\n  </div>\n</div>\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            args: [{ selector: 'prg-ws-table-grid', standalone: false, template: "<div class=\"row\">\r\n  <div class=\"col-12 d-md-flex\">\r\n    <div class=\"table-list-wrapper flex-fill\">\r\n      <!-- style=\"width: 100%; height: 567px\" -->\r\n      <ag-grid-angular\r\n        style=\"width: 100%\"\r\n        [rowData]=\"tableConfiguration.rows\"\r\n        [columnDefs]=\"tableConfiguration.columnDefs\"\r\n        [defaultColDef]=\"tableConfiguration.defaultColDef\"\r\n        [rowSelection]=\"tableConfiguration.rowSelectionOption\"\r\n        [pagination]=\"tableConfiguration.pagination.enabled\"\r\n        [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\r\n        [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\r\n        [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\r\n        [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\r\n        (gridReady)=\"onGridReady($event)\"\r\n        (rowSelected)=\"onRowSelected($event)\"\r\n        (rowClicked)=\"onRowClicked($event)\"\r\n        (columnResized)=\"onColumnResized($event)\"\r\n        (columnMoved)=\"onColumnMoved($event)\"\r\n        (sortChanged)=\"onSortChanged($event)\"\r\n        (paginationChanged)=\"onPaginationChanged($event)\"\r\n        (firstDataRendered)=\"onFirstDataRendered($event)\"\r\n        (filterChanged)=\"onFilterChanged($event)\"\r\n        (cellValueChanged)=\"onCellValueChanged($event)\"\r\n         (selectionChanged)=\"onRowSelectionChanged($event)\" \r\n        [masterDetail]=\"tableConfiguration.masterDetail\"\r\n        [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\r\n        [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\r\n        [enableCellTextSelection]=\"true\"\r\n        [gridOptions]=\"gridOptions\"\r\n        [ensureDomOrder]=\"true\"\r\n        [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\r\n    </div>\r\n\r\n    @if (columnToolVisible && columnsListselectionForm) {\r\n      <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\r\n        <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\r\n          <span\r\n            class=\"cursor-pointer text-primary\"\r\n            tooltipPlacement=\"top\"\r\n            cTooltip=\"Column Preference\"\r\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\r\n            <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\r\n          </span>\r\n\r\n          <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\r\n            <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\r\n          </span>\r\n        </div>\r\n      </div>\r\n\r\n      <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\r\n        <c-offcanvas-header>\r\n          <h5 cOffcanvasTitle>Table Column Preference</h5>\r\n          <button\r\n            cButtonClose\r\n            size=\"sm\"\r\n            class=\"text-reset ms-auto\"\r\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\r\n            aria-label=\"Close\"></button>\r\n        </c-offcanvas-header>\r\n        <c-offcanvas-body>\r\n          <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\r\n            @for (item of this.tableGridState; track $index) {\r\n              <div class=\"checkbox-item px-1\">\r\n                <c-form-check>\r\n                  <input\r\n                    (change)=\"getCheckboxStatus($event, item.key)\"\r\n                    [checked]=\"columnsListselectionForm.get(item.key)?.value\"\r\n                    cFormCheckInput\r\n                    [id]=\"'cb_' + item.key\"\r\n                    type=\"checkbox\"\r\n                    [formControl]=\"columnsListselectionForm.controls[item.key]\" />\r\n                  <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\r\n                    {{ item?.headerName || item?.label }}</label\r\n                  >\r\n                </c-form-check>\r\n              </div>\r\n            }\r\n          </div>\r\n          <div class=\"align d-flex gap-3 justify-content-end\">\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"resetTablePreferenceV2()\">\r\n              Clear\r\n            </button>\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"resetTablePreference()\">\r\n              Reset\r\n            </button>\r\n            <button\r\n              cButton\r\n              [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\r\n              color=\"primary\"\r\n              class=\"px-2 mt-auto\"\r\n              variant=\"outline\"\r\n              (click)=\"updatetablePreference()\">\r\n              Update\r\n            </button>\r\n          </div>\r\n        </c-offcanvas-body>\r\n      </c-offcanvas>\r\n    }\r\n  </div>\r\n</div>\r\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tableConfiguration: [{
                 type: Input
             }], columnToolVisible: [{
@@ -2062,6 +2266,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Output
             }], tableRowSelection: [{
                 type: Output
+            }], tableRowSelectionChanged: [{
+                type: Output
             }], tableRowClicked: [{
                 type: Output
             }], columnStateEvent: [{
@@ -2192,71 +2398,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
                 type: Input
             }] } });
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-// Output: "2024-10-02 15:43:58"
-function convertToISOnString(date) {
-    if (!date)
-        return '';
-    const dateString = date instanceof Date ? date.toISOString() : date;
-    if (dateString.includes('T')) {
-        return dateString.replace('T', ' ').split('.')[0];
-    }
-    return dateString;
-}
-// defaultDateFormat = 'DD/MM/YYYY';
-// Output: "02/10/2024"
-function regionalDateFormat(date) {
-    if (!date)
-        return '';
-    const config = window.config;
-    const month = ('0' + (date.getMonth() + 1)).slice(-2);
-    const day = ('0' + date.getDate()).slice(-2);
-    const year = date.getFullYear();
-    switch (config.defaultDateFormat) {
-        case 'MM/DD/YYYY':
-            return `${month}/${day}/${year}`;
-        case 'DD/MM/YYYY':
-            return `${day}/${month}/${year}`;
-        case 'YYYY/MM/DD':
-            return `${year}/${month}/${day}`;
-        default:
-            return `${month}/${day}/${year}`;
-    }
-}
-// convertIsoToFormat(date, 'YYYY/MM/DD');
-// Output: "2024/10/02"
-function convertIsoToFormat(date, dateFormat) {
-    if (!date)
-        return '';
-    const config = window.config;
-    let format;
-    if (dateFormat)
-        format = dateFormat;
-    else
-        format = config.defaultDateFormat;
-    const dateObj = new Date(date);
-    const year = dateObj.getFullYear();
-    const month = String(dateObj.getMonth() + 1).padStart(2, '0');
-    const day = String(dateObj.getDate()).padStart(2, '0');
-    return format.replace('YYYY', String(year)).replace('MM', month).replace('DD', day);
-}
-// Output: 'Oct 2, 2024, 3:43:58 PM'
-function convertDateShort(dateString) {
-    if (!dateString) {
-        return '';
-    }
-    const date = new Date(dateString);
-    return date.toLocaleString('en-US', {
-        month: 'short',
-        day: 'numeric',
-        year: 'numeric',
-        hour: 'numeric',
-        minute: 'numeric',
-        second: 'numeric',
-        hour12: true
-    });
-}
-
 var ExportToExcelNames;
 (function (ExportToExcelNames) {
     ExportToExcelNames["ProdStatusReport"] = "Prod_Status_Report";
@@ -2576,11 +2717,11 @@ class LoginComponent {
         // }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LoginComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: LoginComponent, isStandalone: false, selector: "prg-ws-login", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, showInactivityLogoutMessage: { classPropertyName: "showInactivityLogoutMessage", publicName: "showInactivityLogoutMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "<div\r\n  class=\"container-fluid login-wrapper\"\r\n  wsBackgroundImage\r\n  [random]=\"config()?.backgroundDirective?.random\"\r\n  [backgroundImage]=\"config()?.backgroundDirective?.backgroundImages\">\r\n  <div class=\"row align-items-center justify-content-center vh-100\">\r\n    <div class=\"col-xxl-3 col-xl-4 col-lg-6 col-12 login-fields glass-card\">\r\n      <div class=\"logo-wrapper text-center\">\r\n        <img [src]=\"config()?.logoUrl\" alt=\"pongrass-logo\" class=\"img-fluid max-w-320\" />\r\n        <p class=\"fs-19 login-card-title\">{{ config()?.title }}</p>\r\n      </div>\r\n      <div class=\"mt-5 d-flex align-items-center justify-content-center flex-column\">\r\n        @if (showInactivityLogoutMessage()) {\r\n          <c-alert 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      </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}.form-invalid .form-multi-select-input-group,.form-invalid .date-picker-input-group{border:2px solid #e55353}.glass-card{padding:1rem;color:#fff;background:#32241980;border-radius:4px;box-shadow:0 8px 32px #0000001a,inset 0 1px #ffffff80,inset 0 -1px #ffffff1a,inset 0 0 #fff0;position:relative;overflow:hidden;max-width:400px}.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}.logo-wrapper{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}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: 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          @if (config()?.version) {\r\n            @if (config()?.version?.currentVersion) {\r\n              <div class=\"mt-4 text-center pt-8\">{{ 'v' + config()?.version?.currentVersion || '' }}</div>\r\n            }\r\n            @if (config()?.version?.copyrightYear) {\r\n              <div class=\"mt-2 text-center copyright-text pt-8\">\r\n                {{ '&copy;' + config()?.version?.copyrightYear + ' ' + config()?.version?.brandName }}\r\n              </div>\r\n            }\r\n          } @else {\r\n            @if (configService.allConfigValues()?.project?.currentVersion) {\r\n              <div class=\"mt-4 text-center pt-8\">{{ 'v' + configService.allConfigValues()?.project?.currentVersion || '' }}</div>\r\n            }\r\n            @if (configService.allConfigValues()?.project?.copyrightYear) {\r\n              <div class=\"mt-2 text-center copyright-text pt-8\">\r\n                {{ '&copy;' + configService.allConfigValues()?.project?.copyrightYear + ' ' + configService.allConfigValues()?.project?.brandName }}\r\n              </div>\r\n            }\r\n          }\r\n        </form>\r\n\r\n        @if (contactSupportValue) {\r\n          <div class=\"mt-4 fs-5\">\r\n            Don't have an account?\r\n            <span class=\"cursor-pointer\">\r\n              <a [href]=\"contactSupportValue\" class=\"text-decoration-none primary-text\" id=\"contact-us\">Contact Support</a>\r\n            </span>\r\n          </div>\r\n        }\r\n\r\n        <!-- <div class=\"mt-4 fs-5 text-center\">\r\n          <span class=\"cursor-pointer\">\r\n            <a [href]=\"forgetPasswordValue\" class=\"text-decoration-none primary-text\" id=\"forget-password\">Forget Password?</a>\r\n            <a class=\"text-decoration-none text-white\" id=\"forget-password\" (click)=\"goToForgetPassword()\">Forget Password?</a>\r\n          </span>\r\n        </div> -->\r\n\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: ["#txt-auth-password,#txt-auth-username{border-bottom-right-radius:4px;border-top-right-radius:4px}.max-w-300{width:300px}.pt-8{font-size:10.66px}.login-card-title{color:#fff;font-size:24px}.form-invalid .form-multi-select-input-group,.form-invalid .date-picker-input-group{border:2px solid #e55353}.glass-card{color:#fff;background:#32241980;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);border-radius:var(--cui-border-radius-lg);position:relative;overflow:hidden;max-width:400px;display:flex;align-items:center;flex-direction:column}.glass-card:before{content:\"\";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}.glass-card:after{content:\"\";position:absolute;top:0;left:0;width:1px;height:100%;background:linear-gradient(180deg,rgba(255,255,255,.8),transparent,rgba(255,255,255,.3))}.transparent-input{background-color:transparent;border:1px solid #8a9db2;outline:none}.transparent-input:focus{background-color:transparent}.transparent-input::placeholder{color:#8a9db2;font-size:16px}input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,input:-internal-autofill-selected{-webkit-box-shadow:0 0 0 1000px transparent inset!important;box-shadow:0 0 0 1000px transparent inset!important;background-color:transparent!important;background-image:none!important;-webkit-text-fill-color:#fff!important;transition:background-color 5000s ease-in-out 0s!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: BackgroundImageDirective, selector: "[wsBackgroundImage]", inputs: ["random", "backgroundImage"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "directive", type: i4.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: i4.FormFeedbackComponent, selector: "c-form-feedback", inputs: ["tooltip", "valid"] }, { kind: "component", type: i4.InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: i4.InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "directive", type: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: i4.AlertComponent, selector: "c-alert", inputs: ["color", "role", "variant", "dismissible", "fade", "visible"], outputs: ["visibleChange"], exportAs: ["cAlert"] }] });
 }
 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 text-center\">\r\n        <img [src]=\"config()?.logoUrl\" alt=\"pongrass-logo\" class=\"img-fluid max-w-320\" />\r\n        <p class=\"fs-19 login-card-title\">{{ config()?.title }}</p>\r\n      </div>\r\n      <div class=\"mt-5 d-flex align-items-center justify-content-center flex-column\">\r\n        @if (showInactivityLogoutMessage()) {\r\n          <c-alert 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      </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}.form-invalid .form-multi-select-input-group,.form-invalid .date-picker-input-group{border:2px solid #e55353}.glass-card{padding:1rem;color:#fff;background:#32241980;border-radius:4px;box-shadow:0 8px 32px #0000001a,inset 0 1px #ffffff80,inset 0 -1px #ffffff1a,inset 0 0 #fff0;position:relative;overflow:hidden;max-width:400px}.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}.logo-wrapper{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}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          @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"] }]
         }], 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 {
@@ -2632,5 +2773,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { BackgroundImageDirective, CheckboxCellRendererComponent, CircularFocusDirective, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, DecimalInputDirective, EditionListGroupedComponent, ExcelType, ExportToExcelNames, FormFieldType, GenericFilterModelComponent, ILOGIN_ACTION, ITableGridConfiguration, ITableGridPagination, IndustryUpdateListboxCellRendererComponent, LoginComponent, LoginModule, MultiFormComponent, MultiFormModule, MultiSelectStylerDirective, PageStatusCellRendererComponent, ShowTooltipIfTruncatedDirective, StatusSelectCellRendererComponent, TableGridComponent, TableGridModule, UtilsService, convertDateShort, convertIsoToFormat, convertToISOnString, regionalDateFormat };
+export { BackgroundImageDirective, CheckboxCellRendererComponent, CircularFocusDirective, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, DateTimePickerComponent, DecimalInputDirective, EditionListGroupedComponent, ExcelType, ExportToExcelNames, FormFieldType, GenericFilterModelComponent, ILOGIN_ACTION, ITableGridConfiguration, ITableGridPagination, IndustryUpdateListboxCellRendererComponent, JsonrpcServiceLib, LoginComponent, LoginModule, MultiFormComponent, MultiFormModule, MultiSelectStylerDirective, PageStatusCellRendererComponent, ShowTooltipIfTruncatedDirective, StatusSelectCellRendererComponent, TableGridComponent, TableGridModule, UtilsService, convertDateShort, convertIsoToFormat, convertToISOnString, generateTimeOptions, regionalDateFormat };
 //# sourceMappingURL=pongrass-utils.mjs.map