@pongrass/utils 1.1.1-v20 → 1.1.3-v20

package/fesm2022/pongrass-utils.mjs

@@ -4,7 +4,7 @@ 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 i2$1 from '@coreui/angular-pro';
+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 { HttpClient, HttpHeaders } from '@angular/common/http';
 import { map, lastValueFrom, Subject } from 'rxjs';
@@ -16,7 +16,7 @@ import Swal from 'sweetalert2';
 import { Tooltip } from '@coreui/coreui-pro';
 import { ToastrService } from 'ngx-toastr';
 import { auditTime, takeUntil } from 'rxjs/operators';
-import * as i1 from '@ag-grid-community/angular';
+import * as i1$1 from '@ag-grid-community/angular';
 import { AgGridModule } from '@ag-grid-community/angular';
 import { ClientSideRowModelModule } from '@ag-grid-community/client-side-row-model';
 import { ModuleRegistry, _EditCoreModule } from '@ag-grid-community/core';
@@ -211,7 +211,7 @@ class CustomSelectFilterComponent {
         }
       </div>
     </div>
-  `, isInline: true, styles: [".select-filter-container{padding:10px}.select-filter-container label{display:flex;gap:5px}.search-box{width:100%;margin-bottom:5px;padding:4px}.checkbox-list{max-height:200px;overflow-y:auto}.checkbox-item{padding:4px 6px;cursor:pointer;border-radius:4px}.checkbox-item:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }] });
+  `, 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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomSelectFilterComponent, decorators: [{
             type: Component,
@@ -277,7 +277,7 @@ class CheckboxCellRendererComponent {
       [checked]="value"
       (change)="onChangeCheckBox($event)"
       [disabled]="ischeckboxDisabled" />
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "directive", type: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }] });
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "directive", type: i1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CheckboxCellRendererComponent, decorators: [{
             type: Component,
@@ -317,7 +317,7 @@ class CommentsButtonCellRendererComponent {
         Comments
       </button>
     </div>
-  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CommentsButtonCellRendererComponent, decorators: [{
             type: Component,
@@ -597,7 +597,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: i2$1.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i2$1.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "component", type: i2$1.MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: ["label", "disabled"] }, { kind: "component", type: i2$1.MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: EditionListGroupedComponent, isStandalone: true, selector: "prg-ws-edition-list-grouped", inputs: { label: "label", multiple: "multiple", hasFormError: "hasFormError" }, outputs: { selectedEditionsChange: "selectedEditionsChange" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    @if (label) {\n      <label for=\"sel-group-edition\">{{ label }}</label>\n    }\n    <c-multi-select\n      [cleaner]=\"true\"\n      [selectionType]=\"multiple ? 'counter' : 'text'\"\n      [multiple]=\"multiple\"\n      clearSearchOnSelect\n      [ngClass]=\"{ 'form-invalid': hasFormError }\"\n      placeholder=\"All Editions\"\n      visibleItems=\"8\"\n      (valueChange)=\"onEditionSelection($event)\"\n      (visibleChange)=\"onVisibleChange($event)\">\n      @for (option of editionPublicationList; track $index + '_' + option.region) {\n        <c-multi-select-optgroup>\n          <c-multi-select-optgroup-label (click)=\"onSelectEditionGroup(option.region, $index)\" class=\"region-selector cursor-pointer\">{{\n            option?.region\n          }}</c-multi-select-optgroup-label>\n          @for (item of option.values; track item?.description) {\n            <c-multi-select-option [value]=\"item\" [selected]=\"item.selected\">{{ '[' + item?.edname + ']' }} {{ item?.description }}</c-multi-select-option>\n          }\n        </c-multi-select-optgroup>\n      }\n    </c-multi-select>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i1.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i1.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "component", type: i1.MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: ["label", "disabled"] }, { kind: "component", type: i1.MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: EditionListGroupedComponent, decorators: [{
             type: Component,
@@ -670,7 +670,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: i2$1.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: PageStatusCellRendererComponent, isStandalone: true, selector: "prg-ws-page-status-cell-renderer", ngImport: i0, template: "<div class=\"wrapper-production-status-select\">\n  <select\n    class=\"status-dropdown\"\n    aria-label=\"status-dropdown\"\n    cSelect\n    sizing=\"sm\"\n    (click)=\"$event.stopPropagation()\"\n    [ngModel]=\"pageStatus!.page_status_name\"\n    (ngModelChange)=\"updatePageStatus($event)\"\n    [ngStyle]=\"{ '--select-background': getStatusColor() }\">\n    @for (status of pageStatusList; track $index) {\n      <option [value]=\"status.page_status_name\">\n        {{ status.page_status_name }}\n      </option>\n    }\n  </select>\n</div>\n", styles: [".status-dropdown:not(.options){background-color:var(--select-background)}.status-dropdown option{background-color:#fff;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i1.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PageStatusCellRendererComponent, decorators: [{
             type: Component,
@@ -702,7 +702,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: i2$1.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: StatusSelectCellRendererComponent, isStandalone: true, selector: "prg-ws-status-select-cell-renderer", ngImport: i0, template: "<div class=\"wrapper-production-status-select\">\n  <select\n    class=\"status-dropdown\"\n    aria-label=\"status-dropdown\"\n    cSelect\n    sizing=\"sm\"\n    (click)=\"$event.stopPropagation()\"\n    [ngModel]=\"this.fileStatus!.it_prodstatusid\"\n    (ngModelChange)=\"updatePageStatus($event)\"\n    [ngStyle]=\"{ '--select-background': getStatusColor() }\">\n    @for (status of prodStatusList; track $index) {\n      <option [value]=\"status.statusid\">\n        {{ status.statusdesc }}\n      </option>\n    }\n  </select>\n</div>\n", styles: [".status-dropdown:not(.options){background-color:var(--select-background)}.status-dropdown option{background-color:#fff;color:#000}\n"], dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "directive", type: i1.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: StatusSelectCellRendererComponent, decorators: [{
             type: Component,
@@ -1008,12 +1008,12 @@ class CircularFocusDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CircularFocusDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: CircularFocusDirective, isStandalone: true, selector: "[appCircularFocus]", inputs: { formId: "formId", formGroup: "formGroup" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: CircularFocusDirective, isStandalone: true, selector: "[wsCircularFocus]", inputs: { formId: "formId", formGroup: "formGroup" }, host: { listeners: { "keydown": "onKeyDown($event)" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CircularFocusDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appCircularFocus]',
+                    selector: '[wsCircularFocus]',
                     standalone: true
                 }]
         }], propDecorators: { formId: [{
@@ -1030,7 +1030,7 @@ class DecimalInputDirective {
     el = inject((ElementRef));
     control = inject(NgControl);
     sub;
-    appDecimalInput = 4;
+    wsDecimalInput = 4;
     specialKeys = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Delete'];
     ngOnInit() {
         // Only format when value comes from patchValue / setValue (not typing)
@@ -1069,30 +1069,30 @@ class DecimalInputDirective {
         if (isNaN(Number(value)))
             return;
         const [integerPart, decimalPart = ''] = value.toString().split('.');
-        let formatted = integerPart + '.' + decimalPart.padEnd(this.appDecimalInput, '0');
-        if (decimalPart.length > this.appDecimalInput) {
-            formatted = integerPart + '.' + decimalPart.slice(0, this.appDecimalInput);
+        let formatted = integerPart + '.' + decimalPart.padEnd(this.wsDecimalInput, '0');
+        if (decimalPart.length > this.wsDecimalInput) {
+            formatted = integerPart + '.' + decimalPart.slice(0, this.wsDecimalInput);
         }
         this.control.control?.setValue(formatted, { emitEvent: false });
         this.el.nativeElement.value = formatted;
     }
     isValidInput(value) {
-        const regex = new RegExp(`^\\d*\\.?\\d{0,${this.appDecimalInput}}$`);
+        const regex = new RegExp(`^\\d*\\.?\\d{0,${this.wsDecimalInput}}$`);
         return regex.test(value);
     }
     getNextValue(currentValue, key, cursorPos) {
         return currentValue.slice(0, cursorPos) + key + currentValue.slice(cursorPos);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DecimalInputDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: DecimalInputDirective, isStandalone: true, selector: "[appDecimalInput]", inputs: { appDecimalInput: "appDecimalInput" }, host: { listeners: { "keydown": "onKeyDown($event)", "blur": "onBlur()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: DecimalInputDirective, isStandalone: true, selector: "[wsDecimalInput]", inputs: { wsDecimalInput: "wsDecimalInput" }, host: { listeners: { "keydown": "onKeyDown($event)", "blur": "onBlur()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DecimalInputDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appDecimalInput]',
+                    selector: '[wsDecimalInput]',
                     standalone: true
                 }]
-        }], propDecorators: { appDecimalInput: [{
+        }], propDecorators: { wsDecimalInput: [{
                 type: Input
             }], onKeyDown: [{
                 type: HostListener,
@@ -1124,14 +1124,14 @@ class ShowTooltipIfTruncatedDirective {
         return el.scrollWidth > el.clientWidth;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShowTooltipIfTruncatedDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: ShowTooltipIfTruncatedDirective, isStandalone: true, selector: "[appShowTooltipIfTruncated]", inputs: { tooltipText: ["appShowTooltipIfTruncated", "tooltipText"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: ShowTooltipIfTruncatedDirective, isStandalone: true, selector: "[wsShowTooltipIfTruncated]", inputs: { tooltipText: ["wsShowTooltipIfTruncated", "tooltipText"] }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()" } }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShowTooltipIfTruncatedDirective, decorators: [{
             type: Directive,
-            args: [{ selector: '[appShowTooltipIfTruncated]', standalone: true }]
+            args: [{ selector: '[wsShowTooltipIfTruncated]', standalone: true }]
         }], ctorParameters: () => [], propDecorators: { tooltipText: [{
                 type: Input,
-                args: ['appShowTooltipIfTruncated']
+                args: ['wsShowTooltipIfTruncated']
             }], onMouseEnter: [{
                 type: HostListener,
                 args: ['mouseenter']
@@ -1145,11 +1145,11 @@ class MultiSelectStylerDirective {
     renderer = inject(Renderer2);
     el = inject(ElementRef);
     mutationObserver;
-    appMultiSelectStyler = true;
+    wsMultiSelectStyler = true;
     options = [];
     multiSelect = inject(MultiSelectComponent, { optional: true });
     ngOnInit() {
-        if (!this.appMultiSelectStyler)
+        if (!this.wsMultiSelectStyler)
             return;
         if (!this.ngControl) {
             return;
@@ -1209,15 +1209,15 @@ class MultiSelectStylerDirective {
         this.mutationObserver?.disconnect();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiSelectStylerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: MultiSelectStylerDirective, isStandalone: true, selector: "[appMultiSelectStyler]", inputs: { appMultiSelectStyler: "appMultiSelectStyler", options: "options" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: MultiSelectStylerDirective, isStandalone: true, selector: "[wsMultiSelectStyler]", inputs: { wsMultiSelectStyler: "wsMultiSelectStyler", options: "options" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiSelectStylerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appMultiSelectStyler]',
+                    selector: '[wsMultiSelectStyler]',
                     standalone: true
                 }]
-        }], propDecorators: { appMultiSelectStyler: [{
+        }], propDecorators: { wsMultiSelectStyler: [{
                 type: Input
             }], options: [{
                 type: Input
@@ -1495,11 +1495,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: "app-multi-form", inputs: { config: "config", showUnsavedFlags: "showUnsavedFlags", currentTableGridsSelectedIndex: "currentTableGridsSelectedIndex", formId: "formId" }, outputs: { fieldAction: "fieldAction", formSavedUnsavedListen: "formSavedUnsavedListen", selectionChangeEvent: "selectionChangeEvent" }, usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" appCircularFocus>\n  @for (row of config?.rows; track $index; let isLast = $last) {\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\n      @for (field of row; track $index) {\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\n            @if (multiForm.controls[field.controlName]) {\n              <!-- Label  -->\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\n                <label\n                  [appShowTooltipIfTruncated]=\"field.label\"\n                  cLabel\n                  class=\"mb-1 label-multiform single-line-label\"\n                  [for]=\"field.controlName\"\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\n                  [ngStyle]=\"field.styles?.label\"\n                  >{{ field.label }}\n                  @if (field?.validations?.required || false) {\n                    <strong class=\"text-danger\">*</strong>\n                  }\n                </label>\n              }\n\n              <!-- Text, Email, Number Inputs -->\n              @if (\n                field.type === FormFieldType.Text ||\n                field.type === FormFieldType.Email ||\n                field.type === FormFieldType.Number ||\n                field.type === FormFieldType.Password ||\n                field.type === FormFieldType.Url ||\n                field.type === FormFieldType.Tel\n              ) {\n                <div class=\"position-relative w-100\">\n                  <input\n                    [type]=\"field.type\"\n                    cFormControl\n                    [formControlName]=\"field.controlName\"\n                    [id]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\n                      'no-label-margin': !field.label\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n\n                  @if (field.actionButton) {\n                    <button\n                      type=\"button\"\n                      [cTooltip]=\"field.actionButton?.tooltip\"\n                      tooltipPlacement=\"top\"\n                      cButton\n                      color=\"primary\"\n                      variant=\"outline\"\n                      aria-label=\"action\"\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\n                      (click)=\"onClickFieldAction($event, field)\">\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\n                    </button>\n                  }\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\n                    @if (multiForm.controls[field.controlName]?.errors) {\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Minimum length {{ field?.validations?.minLength }} characters is required\n                        </small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                        </small>\n                      }\n                    }\n                  }\n                </div>\n              }\n\n              <!-- Select Inputs -->\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\n                <ng-container>\n                  <c-multi-select\n                    [multiple]=\"field?.multiple || false\"\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\n                    [clearSearchOnSelect]=\"true\"\n                    [selectionType]=\"field?.selectionType || 'tags'\"\n                    [cleaner]=\"field?.allowCleaner || true\"\n                    [formControlName]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || 'Select'\"\n                    [appMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\n                    [options]=\"colorCodes$\"\n                    [optionsMaxHeight]=\"400\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\n                    [ngStyle]=\"field.styles?.field\">\n                    @if (field.type === inputType?.colorSelect) {\n                      @for (option of colorCodes$; track $index) {\n                        <c-multi-select-option [value]=\"option?.label\">\n                          <label class=\"d-flex gap-2\">\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\n                            {{ option.label }}\n                          </label>\n                        </c-multi-select-option>\n                      }\n                    } @else {\n                      @for (option of field.options; track $index) {\n                        <c-multi-select-option [value]=\"option?.value\">\n                          {{ option.label }}\n                        </c-multi-select-option>\n                      }\n                    }\n                  </c-multi-select>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <!-- Date input  -->\n              @else if (field.type === FormFieldType.Date) {\n                <ng-container>\n                  <input\n                    type=\"text\"\n                    [placeholder]=\"field?.label || 'Select Date'\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\n                    [formControlName]=\"field.controlName\"\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\n                    [bsConfig]=\"{\n                      containerClass: 'pongrass-red-datepicker',\n                      showWeekNumbers: false,\n                      adaptivePosition: true,\n                      useUtc: false\n                    }\"\n                    bsDatepicker\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Textarea  -->\n              @else if (field.type === FormFieldType.Textarea) {\n                <ng-container>\n                  <textarea\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    [rows]=\"field?.textareaRows || 4\"\n                    [columns]=\"field?.textareaColumns || 4\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [formControlName]=\"field.controlName\"\n                    [ngStyle]=\"field.styles?.field\"></textarea>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Checkbox  -->\n              @else if (field.type === FormFieldType.Checkbox) {\n                <div class=\"no-label-margin\">\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\n                </div>\n              }\n              <!-- Decimal input  -->\n              @else if (field.type === FormFieldType.Float) {\n                <ng-container>\n                  <input\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    type=\"number\"\n                    class=\"me-2\"\n                    [formControlName]=\"field.controlName\"\n                    [appDecimalInput]=\"field.validations?.precision || 2\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              } @else if (field.type === FormFieldType.Edition) {\n                <ng-container>\n                  <app-edition-list-grouped\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\n                    [multiple]=\"field?.multiple || true\"\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\n                  </app-edition-list-grouped>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n            }\n          </div>\n        }\n\n        @if (field?.type === FormFieldType.Separator) {\n          <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\n        }\n        @if (field?.type === FormFieldType.FormHeader) {\n          <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\n        }\n      }\n    </div>\n  }\n</form>\n", styles: [".no-label-margin{margin-top:1.6rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.h-135{height:135px}.single-line-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.label-multiform{font-size:16px;font-weight:400}.field-checkbox{display:flex;align-items:center}\n"], dependencies: [{ kind: "directive", type: CircularFocusDirective, selector: "[appCircularFocus]", inputs: ["formId", "formGroup"] }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i3.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i2$1.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: i2$1.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "directive", type: i2$1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: i2$1.FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: DecimalInputDirective, selector: "[appDecimalInput]", inputs: ["appDecimalInput"] }, { kind: "directive", type: ShowTooltipIfTruncatedDirective, selector: "[appShowTooltipIfTruncated]", inputs: ["appShowTooltipIfTruncated"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i8.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i8.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: MultiSelectStylerDirective, selector: "[appMultiSelectStyler]", inputs: ["appMultiSelectStyler", "options"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: MultiFormComponent, isStandalone: false, selector: "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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-multi-form', standalone: false, template: "<form [formGroup]=\"multiForm\" cForm class=\"multiform-wrapper\" appCircularFocus>\n  @for (row of config?.rows; track $index; let isLast = $last) {\n    <div class=\"row gx-3 multiform-inner\" [id]=\"formId\" [ngClass]=\"config?.rows?.length > 1 && !isLast ? 'border-bottom mb-3' : ''\">\n      @for (field of row; track $index) {\n        @if (field?.type !== FormFieldType.Separator && field?.type !== FormFieldType.FormHeader) {\n          <div class=\"mb-3\" [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\" [attr.data-id]=\"field.controlName\">\n            @if (multiForm.controls[field.controlName]) {\n              <!-- Label  -->\n              @if (field.label && field.type !== FormFieldType.Checkbox) {\n                <label\n                  [appShowTooltipIfTruncated]=\"field.label\"\n                  cLabel\n                  class=\"mb-1 label-multiform single-line-label\"\n                  [for]=\"field.controlName\"\n                  [ngClass]=\"{ 'text-danger': isFormSubmitted && multiForm.controls[field.controlName]?.errors }\"\n                  [ngStyle]=\"field.styles?.label\"\n                  >{{ field.label }}\n                  @if (field?.validations?.required || false) {\n                    <strong class=\"text-danger\">*</strong>\n                  }\n                </label>\n              }\n\n              <!-- Text, Email, Number Inputs -->\n              @if (\n                field.type === FormFieldType.Text ||\n                field.type === FormFieldType.Email ||\n                field.type === FormFieldType.Number ||\n                field.type === FormFieldType.Password ||\n                field.type === FormFieldType.Url ||\n                field.type === FormFieldType.Tel\n              ) {\n                <div class=\"position-relative w-100\">\n                  <input\n                    [type]=\"field.type\"\n                    cFormControl\n                    [formControlName]=\"field.controlName\"\n                    [id]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors,\n                      'no-label-margin': !field.label\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n\n                  @if (field.actionButton) {\n                    <button\n                      type=\"button\"\n                      [cTooltip]=\"field.actionButton?.tooltip\"\n                      tooltipPlacement=\"top\"\n                      cButton\n                      color=\"primary\"\n                      variant=\"outline\"\n                      aria-label=\"action\"\n                      class=\"d-flex position-absolute top-50 end-0 translate-middle-y me-2 btn p-0 border-0 bg-transparent\"\n                      (click)=\"onClickFieldAction($event, field)\">\n                      <svg cIcon class=\"text-primary\" [name]=\"field.actionButton.icon\" size=\"xl\"></svg>\n                    </button>\n                  }\n                  @if (multiForm.controls[field.controlName]?.touched || isFormSubmitted) {\n                    @if (multiForm.controls[field.controlName]?.errors) {\n                      @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Minimum length {{ field?.validations?.minLength }} characters is required\n                        </small>\n                      } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                        <small class=\"text-danger fst-italic form-invalid-label\">\n                          Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                        </small>\n                      }\n                    }\n                  }\n                </div>\n              }\n\n              <!-- Select Inputs -->\n              @else if (field.type === FormFieldType.Select || field.type === inputType?.colorSelect) {\n                <ng-container>\n                  <c-multi-select\n                    [multiple]=\"field?.multiple || false\"\n                    [allowCreateOptions]=\"field?.allowCreateOptions || false\"\n                    [search]=\"field?.allowCreateOptions || field?.allowSearch || false\"\n                    [clearSearchOnSelect]=\"true\"\n                    [selectionType]=\"field?.selectionType || 'tags'\"\n                    [cleaner]=\"field?.allowCleaner || true\"\n                    [formControlName]=\"field.controlName\"\n                    [placeholder]=\"field.placeholder || 'Select'\"\n                    [appMultiSelectStyler]=\"field.type === inputType?.colorSelect\"\n                    [options]=\"colorCodes$\"\n                    [optionsMaxHeight]=\"400\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (valueChange)=\"onValueChange($event, field.controlName)\"\n                    [ngStyle]=\"field.styles?.field\">\n                    @if (field.type === inputType?.colorSelect) {\n                      @for (option of colorCodes$; track $index) {\n                        <c-multi-select-option [value]=\"option?.label\">\n                          <label class=\"d-flex gap-2\">\n                            <span class=\"color-box\" [style.background-color]=\"option?.value\"></span>\n                            {{ option.label }}\n                          </label>\n                        </c-multi-select-option>\n                      }\n                    } @else {\n                      @for (option of field.options; track $index) {\n                        <c-multi-select-option [value]=\"option?.value\">\n                          {{ option.label }}\n                        </c-multi-select-option>\n                      }\n                    }\n                  </c-multi-select>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n\n              <!-- Date input  -->\n              @else if (field.type === FormFieldType.Date) {\n                <ng-container>\n                  <input\n                    type=\"text\"\n                    [placeholder]=\"field?.label || 'Select Date'\"\n                    class=\"form-control\"\n                    [ngClass]=\"{\n                      'form-invalid': (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    (bsValueChange)=\"onDateValueChange($event, field.controlName)\"\n                    [formControlName]=\"field.controlName\"\n                    [dateInputFormat]=\"configurationService?.allConfigValues()?.defaultDateFormat || 'MM/DD/YYYY'\"\n                    [bsConfig]=\"{\n                      containerClass: 'pongrass-red-datepicker',\n                      showWeekNumbers: false,\n                      adaptivePosition: true,\n                      useUtc: false\n                    }\"\n                    bsDatepicker\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Textarea  -->\n              @else if (field.type === FormFieldType.Textarea) {\n                <ng-container>\n                  <textarea\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    [rows]=\"field?.textareaRows || 4\"\n                    [columns]=\"field?.textareaColumns || 4\"\n                    [placeholder]=\"field.placeholder || ''\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [formControlName]=\"field.controlName\"\n                    [ngStyle]=\"field.styles?.field\"></textarea>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              }\n              <!-- Checkbox  -->\n              @else if (field.type === FormFieldType.Checkbox) {\n                <div class=\"no-label-margin\">\n                  <input cFormCheckInput [id]=\"field.controlName\" type=\"checkbox\" [formControlName]=\"field.controlName\" [ngStyle]=\"field.styles?.field\" />\n                  <label cFormCheckLabel [for]=\"field.controlName\" class=\"ms-2\" [ngStyle]=\"field.styles?.label\">{{ field.label }}</label>\n                </div>\n              }\n              <!-- Decimal input  -->\n              @else if (field.type === FormFieldType.Float) {\n                <ng-container>\n                  <input\n                    cFormControl\n                    [id]=\"field.controlName\"\n                    type=\"number\"\n                    class=\"me-2\"\n                    [formControlName]=\"field.controlName\"\n                    [appDecimalInput]=\"field.validations?.precision || 2\"\n                    [ngClass]=\"{\n                      'form-invalid border-danger border border-2':\n                        (multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors\n                    }\"\n                    [min]=\"field.validations?.min\"\n                    [max]=\"field.validations?.max\"\n                    [ngStyle]=\"field.styles?.field\" />\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['pattern']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is invalid</small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['minlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Minimum length {{ field?.validations?.minLength }} characters is required\n                      </small>\n                    } @else if (multiForm.controls[field.controlName]?.errors?.['maxlength']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">\n                        Maximum length {{ field?.validations?.maxLength }} characters is allowed\n                      </small>\n                    }\n                  }\n                </ng-container>\n              } @else if (field.type === FormFieldType.Edition) {\n                <ng-container>\n                  <app-edition-list-grouped\n                    (selectedEditionsChange)=\"onEditionChange($event)\"\n                    [multiple]=\"field?.multiple || true\"\n                    [hasFormError]=\"isFormSubmitted && multiForm.controls[field.controlName]?.errors\">\n                  </app-edition-list-grouped>\n                  @if ((multiForm.controls[field.controlName]?.touched || isFormSubmitted) && multiForm.controls[field.controlName]?.errors) {\n                    @if (multiForm.controls[field.controlName]?.errors?.['required']) {\n                      <small class=\"text-danger fst-italic form-invalid-label\">{{ field?.label }} is required</small>\n                    }\n                  }\n                </ng-container>\n              }\n            }\n          </div>\n        }\n\n        @if (field?.type === FormFieldType.Separator) {\n          <div [class]=\"'field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\"></div>\n        }\n        @if (field?.type === FormFieldType.FormHeader) {\n          <div [class]=\"'fs-6 fw-bold my-2 field-' + field.type\" [ngClass]=\"field.colspan ? 'col-md-' + field.colspan : 'col'\">{{ field?.label }}</div>\n        }\n      }\n    </div>\n  }\n</form>\n", styles: [".no-label-margin{margin-top:1.6rem}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.h-135{height:135px}.single-line-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;display:block}.label-multiform{font-size:16px;font-weight:400}.field-checkbox{display:flex;align-items:center}\n"] }]
+            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"] }]
         }], ctorParameters: () => [], propDecorators: { config: [{
                 type: Input
             }], showUnsavedFlags: [{
@@ -1621,7 +1621,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: "component", type: MultiFormComponent, selector: "app-multi-form", inputs: ["config", "showUnsavedFlags", "currentTableGridsSelectedIndex", "formId"], outputs: ["fieldAction", "formSavedUnsavedListen", "selectionChangeEvent"] }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i2$1.ModalBodyComponent, selector: "c-modal-body" }, { kind: "component", type: i2$1.ModalComponent, selector: "c-modal", inputs: ["alignment", "backdrop", "fullscreen", "keyboard", "id", "size", "transition", "role", "ariaModal", "scrollable", "visible"], outputs: ["visibleChange"], exportAs: ["cModal"] }, { kind: "component", type: i2$1.ModalFooterComponent, selector: "c-modal-footer" }, { kind: "component", type: i2$1.ModalHeaderComponent, selector: "c-modal-header" }, { kind: "directive", type: i2$1.ModalTitleDirective, selector: "[cModalTitle]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: GenericFilterModelComponent, isStandalone: true, selector: "prg-ws-generic-filter-model", inputs: { filterFormConfiguration: "filterFormConfiguration", tableName: "tableName" }, outputs: { sendFilteredData: "sendFilteredData" }, viewQueries: [{ propertyName: "filterFormComponent", first: true, predicate: ["filterFormComponent"], descendants: true }], ngImport: i0, template: "<!-- Filter Modal  -->\n<c-modal id=\"generic-filter-modal\" [visible]=\"isFilterModalActive\" (visibleChange)=\"handleFilterModal($event)\" size=\"md\" alignment=\"center\" scrollable>\n  <c-modal-header>\n    <h5 cModalTitle>Advanced Search</h5>\n    <!-- <button (click)=\"commonService.openFilterModal.set(false)\" cButtonClose></button> -->\n  </c-modal-header>\n  <c-modal-body>\n    @if (filterFormConfiguration) {\n      <app-multi-form [config]=\"filterFormConfiguration\" #filterFormComponent></app-multi-form>\n    }\n  </c-modal-body>\n  <c-modal-footer>\n    <button (click)=\"close()\" cButton color=\"secondary\">Close</button>\n    <button (click)=\"resetFilter()\" cButton color=\"primary\">Reset</button>\n    <button cButton color=\"primary\" (click)=\"onFilter()\">Search</button>\n  </c-modal-footer>\n</c-modal>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MultiFormModule }, { kind: "ngmodule", type: ModalModule }, { kind: "component", type: i1.ModalBodyComponent, selector: "c-modal-body" }, { kind: "component", type: i1.ModalComponent, selector: "c-modal", inputs: ["alignment", "backdrop", "fullscreen", "keyboard", "id", "size", "transition", "role", "ariaModal", "scrollable", "visible"], outputs: ["visibleChange"], exportAs: ["cModal"] }, { kind: "component", type: i1.ModalFooterComponent, selector: "c-modal-footer" }, { kind: "component", type: i1.ModalHeaderComponent, selector: "c-modal-header" }, { kind: "directive", type: i1.ModalTitleDirective, selector: "[cModalTitle]" }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: GenericFilterModelComponent, decorators: [{
             type: Component,
@@ -2047,11 +2047,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: "app-table-grid", inputs: { tableConfiguration: "tableConfiguration", columnToolVisible: "columnToolVisible", initialPageNumber: "initialPageNumber" }, outputs: { tableGridReady: "tableGridReady", tableRowSelection: "tableRowSelection", tableRowClicked: "tableRowClicked", columnStateEvent: "columnStateEvent", pageChange: "pageChange", filterChanged: "filterChanged", cellValueChanged: "cellValueChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12 d-md-flex\">\n    <div class=\"table-list-wrapper flex-fill\">\n      <!-- style=\"width: 100%; height: 567px\" -->\n      <ag-grid-angular\n        style=\"width: 100%\"\n        [rowData]=\"tableConfiguration.rows\"\n        [columnDefs]=\"tableConfiguration.columnDefs\"\n        [defaultColDef]=\"tableConfiguration.defaultColDef\"\n        [rowSelection]=\"tableConfiguration.rowSelectionOption\"\n        [pagination]=\"tableConfiguration.pagination.enabled\"\n        [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\n        [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\n        [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\n        [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\n        (gridReady)=\"onGridReady($event)\"\n        (rowSelected)=\"onRowSelected($event)\"\n        (rowClicked)=\"onRowClicked($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (columnMoved)=\"onColumnMoved($event)\"\n        (sortChanged)=\"onSortChanged($event)\"\n        (paginationChanged)=\"onPaginationChanged($event)\"\n        (firstDataRendered)=\"onFirstDataRendered($event)\"\n        (filterChanged)=\"onFilterChanged($event)\"\n        (cellValueChanged)=\"onCellValueChanged($event)\"\n        [masterDetail]=\"tableConfiguration.masterDetail\"\n        [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\n        [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\n        [enableCellTextSelection]=\"true\"\n        [gridOptions]=\"gridOptions\"\n        [ensureDomOrder]=\"true\"\n        [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\n    </div>\n\n    @if (columnToolVisible && columnsListselectionForm) {\n      <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\n        <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\n          <span\n            class=\"cursor-pointer text-primary\"\n            tooltipPlacement=\"top\"\n            cTooltip=\"Column Preference\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\n            <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\n          </span>\n\n          <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\n            <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\n          </span>\n        </div>\n      </div>\n\n      <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\n        <c-offcanvas-header>\n          <h5 cOffcanvasTitle>Table Column Preference</h5>\n          <button\n            cButtonClose\n            size=\"sm\"\n            class=\"text-reset ms-auto\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\n            aria-label=\"Close\"></button>\n        </c-offcanvas-header>\n        <c-offcanvas-body>\n          <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\n            @for (item of this.tableGridState; track $index) {\n              <div class=\"checkbox-item px-1\">\n                <c-form-check>\n                  <input\n                    (change)=\"getCheckboxStatus($event, item.key)\"\n                    [checked]=\"columnsListselectionForm.get(item.key)?.value\"\n                    cFormCheckInput\n                    [id]=\"'cb_' + item.key\"\n                    type=\"checkbox\"\n                    [formControl]=\"columnsListselectionForm.controls[item.key]\" />\n                  <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\n                    {{ item?.headerName || item?.label }}</label\n                  >\n                </c-form-check>\n              </div>\n            }\n          </div>\n          <div class=\"align d-flex gap-3 justify-content-end\">\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreferenceV2()\">\n              Clear\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreference()\">\n              Reset\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"updatetablePreference()\">\n              Update\n            </button>\n          </div>\n        </c-offcanvas-body>\n      </c-offcanvas>\n    }\n  </div>\n</div>\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: i1.AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "advancedFilterModel", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressAsyncEvents", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "enableCellChangeFlash", "cellFlashDuration", "cellFlashDelay", "cellFadeDuration", "cellFadeDelay", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "suppressGroupMaintainValueType", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupIncludeFooter", "groupIncludeTotalFooter", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "suppressMakeColumnVisibleAfterUnGroup", "treeData", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideInfiniteScroll", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSideSortOnServer", "serverSideFilterOnServer", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: i2$1.FormCheckComponent, selector: "c-form-check", inputs: ["inline", "reverse", "sizing", "switch"], exportAs: ["cFormCheck"] }, { kind: "directive", type: i2$1.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i2$1.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i3.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i2$1.ButtonCloseDirective, selector: "[cButtonClose]", inputs: ["white"] }, { kind: "component", type: i2$1.OffcanvasBodyComponent, selector: "c-offcanvas-body" }, { kind: "component", type: i2$1.OffcanvasComponent, selector: "c-offcanvas", inputs: ["backdrop", "keyboard", "placement", "responsive", "id", "role", "ariaModal", "scroll", "visible"], outputs: ["visibleChange"], exportAs: ["cOffcanvas"] }, { kind: "component", type: i2$1.OffcanvasHeaderComponent, selector: "c-offcanvas-header" }, { kind: "directive", type: i2$1.OffcanvasTitleDirective, selector: "[cOffcanvasTitle]" }, { kind: "directive", type: i2$1.OffcanvasToggleDirective, selector: "[cOffcanvasToggle]", inputs: ["cOffcanvasToggle"] }, { kind: "directive", type: i2$1.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: TableGridComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'app-table-grid', standalone: false, template: "<div class=\"row\">\n  <div class=\"col-12 d-md-flex\">\n    <div class=\"table-list-wrapper flex-fill\">\n      <!-- style=\"width: 100%; height: 567px\" -->\n      <ag-grid-angular\n        style=\"width: 100%\"\n        [rowData]=\"tableConfiguration.rows\"\n        [columnDefs]=\"tableConfiguration.columnDefs\"\n        [defaultColDef]=\"tableConfiguration.defaultColDef\"\n        [rowSelection]=\"tableConfiguration.rowSelectionOption\"\n        [pagination]=\"tableConfiguration.pagination.enabled\"\n        [paginationPageSize]=\"tableConfiguration.pagination.paginationPageSize\"\n        [paginationPageSizeSelector]=\"tableConfiguration.pagination.paginationPageSizeSelector\"\n        [class]=\"[tableConfiguration.tableClasses, tableConfiguration.tableTheme]\"\n        [selectionColumnDef]=\"tableConfiguration.selectionColumnDef\"\n        (gridReady)=\"onGridReady($event)\"\n        (rowSelected)=\"onRowSelected($event)\"\n        (rowClicked)=\"onRowClicked($event)\"\n        (columnResized)=\"onColumnResized($event)\"\n        (columnMoved)=\"onColumnMoved($event)\"\n        (sortChanged)=\"onSortChanged($event)\"\n        (paginationChanged)=\"onPaginationChanged($event)\"\n        (firstDataRendered)=\"onFirstDataRendered($event)\"\n        (filterChanged)=\"onFilterChanged($event)\"\n        (cellValueChanged)=\"onCellValueChanged($event)\"\n        [masterDetail]=\"tableConfiguration.masterDetail\"\n        [detailCellRendererParams]=\"tableConfiguration.detailCellRendererParams\"\n        [detailCellRenderer]=\"tableConfiguration.detailCellRenderer\"\n        [enableCellTextSelection]=\"true\"\n        [gridOptions]=\"gridOptions\"\n        [ensureDomOrder]=\"true\"\n        [tooltipShowDelay]=\"tableConfiguration.tooltipShowDelay\" />\n    </div>\n\n    @if (columnToolVisible && columnsListselectionForm) {\n      <div class=\"columns-list ms-3 p-3 d-md-flex flex-column h-100 d-none border border-1 rounded hide columns-tool\" [id]=\"tableConfiguration.tablename\">\n        <div class=\"d-flex justify-content-between align-items-center mb-3 gap-2 columns-heading\">\n          <span\n            class=\"cursor-pointer text-primary\"\n            tooltipPlacement=\"top\"\n            cTooltip=\"Column Preference\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\">\n            <svg cIcon name=\"cilColumns\" size=\"xl\"></svg>\n          </span>\n\n          <span class=\"cursor-pointer text-primary\" tooltipPlacement=\"top\" cTooltip=\"Auto Resize Columns\" (click)=\"autoSizeAll()\">\n            <svg cIcon name=\"cilResizeWidth\" size=\"xl\"></svg>\n          </span>\n        </div>\n      </div>\n\n      <c-offcanvas placement=\"end\" [id]=\"tableConfiguration.tablename + 'config-columns'\" width=\"550\">\n        <c-offcanvas-header>\n          <h5 cOffcanvasTitle>Table Column Preference</h5>\n          <button\n            cButtonClose\n            size=\"sm\"\n            class=\"text-reset ms-auto\"\n            [cOffcanvasToggle]=\"tableConfiguration.tablename + 'config-columns'\"\n            aria-label=\"Close\"></button>\n        </c-offcanvas-header>\n        <c-offcanvas-body>\n          <div class=\"columns-wrapper mb-2\" [formGroup]=\"columnsListselectionForm\">\n            @for (item of this.tableGridState; track $index) {\n              <div class=\"checkbox-item px-1\">\n                <c-form-check>\n                  <input\n                    (change)=\"getCheckboxStatus($event, item.key)\"\n                    [checked]=\"columnsListselectionForm.get(item.key)?.value\"\n                    cFormCheckInput\n                    [id]=\"'cb_' + item.key\"\n                    type=\"checkbox\"\n                    [formControl]=\"columnsListselectionForm.controls[item.key]\" />\n                  <label class=\"truncate-preference-label\" cFormCheckLabel [for]=\"'cb_' + item.key\" [title]=\"item?.headerName || item?.label\">\n                    {{ item?.headerName || item?.label }}</label\n                  >\n                </c-form-check>\n              </div>\n            }\n          </div>\n          <div class=\"align d-flex gap-3 justify-content-end\">\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableRemovecolumn\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreferenceV2()\">\n              Clear\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableResetPreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"resetTablePreference()\">\n              Reset\n            </button>\n            <button\n              cButton\n              [disabled]=\"tableConfiguration.tablePreference.disableUpdatePreference\"\n              color=\"primary\"\n              class=\"px-2 mt-auto\"\n              variant=\"outline\"\n              (click)=\"updatetablePreference()\">\n              Update\n            </button>\n          </div>\n        </c-offcanvas-body>\n      </c-offcanvas>\n    }\n  </div>\n</div>\n", styles: [".offcanvas.offcanvas-end{--cui-offcanvas-width: 350px}.border{--cui-border-color: color-mix(in srgb, transparent, #181d1f 15%)}.columns-list{width:210px;transition:width .2s ease-in,padding .2s ease-in;overflow:hidden;display:flex;flex-direction:column;max-height:calc(100vh - 210px)}.default-ag-layout{height:calc(100vh - 210px)}.small-table-container{max-height:calc(100vh - 210px)}.columns-wrapper{flex-grow:1;overflow-y:auto;overflow-x:hidden;transition:opacity .2s ease-in,height .2s ease-in;opacity:1;height:calc(92vh - 93px);overflow:auto}.columns-tool.hide{width:32px;transition:width .2s ease-in,padding .2s ease-in}.columns-tool.hide button,.columns-tool.hide .columns-wrapper{opacity:0;height:0;pointer-events:none}.columns-tool.hide .columns-heading{flex-direction:column}.columns-tool.hide .columns-heading p{margin:50px 0 0;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;font-size:.8rem;transition:margin .2s ease-in,font-size .2s ease-in}.columns-tool button{transform:scale(1);opacity:1;transition:opacity .2s ease-in,transform .1s ease-in;will-change:opacity,transform;height:40px}.columns-tool.hide button{opacity:0;transform:scale(.95)}.columns-heading{display:flex;justify-content:space-between;align-items:center;transition:flex-direction .2s ease-in}.columns-heading p{margin:0;font-size:1rem;text-align:center;letter-spacing:normal}.truncate-preference-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n"] }]
+            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"] }]
         }], ctorParameters: () => [], propDecorators: { tableConfiguration: [{
                 type: Input
             }], columnToolVisible: [{
@@ -2178,12 +2178,12 @@ class BackgroundImageDirective {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BackgroundImageDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: BackgroundImageDirective, isStandalone: true, selector: "[appBackgroundImage]", inputs: { random: "random", backgroundImage: "backgroundImage" }, ngImport: i0 });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.9", type: BackgroundImageDirective, isStandalone: true, selector: "[wsBackgroundImage]", inputs: { random: "random", backgroundImage: "backgroundImage" }, ngImport: i0 });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: BackgroundImageDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[appBackgroundImage]',
+                    selector: '[wsBackgroundImage]',
                     standalone: true
                 }]
         }], propDecorators: { random: [{
@@ -2524,9 +2524,9 @@ class LoginComponent {
     rendererService = inject(Renderer2);
     formBuilder = inject(FormBuilder);
     config = input.required(...(ngDevMode ? [{ debugName: "config" }] : [{}]));
-    action = output();
-    isFormSubmitted = input(false, ...(ngDevMode ? [{ debugName: "isFormSubmitted" }] : []));
     showInactivityLogoutMessage = input(false, ...(ngDevMode ? [{ debugName: "showInactivityLogoutMessage" }] : []));
+    action = output();
+    isFormSubmitted = signal(false, ...(ngDevMode ? [{ debugName: "isFormSubmitted" }] : []));
     loginForm;
     contactSupportValue;
     forgetPasswordValue;
@@ -2555,6 +2555,7 @@ class LoginComponent {
         });
     }
     onSubmit() {
+        this.isFormSubmitted.set(true);
         this.action.emit({ type: ILOGIN_ACTION.SUBMIT, data: this.loginForm });
     }
     initializeInitialValues() {
@@ -2575,12 +2576,12 @@ 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 }, isFormSubmitted: { classPropertyName: "isFormSubmitted", publicName: "isFormSubmitted", isSignal: true, isRequired: false, transformFunction: null }, showInactivityLogoutMessage: { classPropertyName: "showInactivityLogoutMessage", publicName: "showInactivityLogoutMessage", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { action: "action" }, ngImport: i0, template: "<div\r\n  class=\"container login-wrapper\"\r\n  appBackgroundImage\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\">Maintenance Portal</p>\r\n      </div>\r\n      <div class=\"mt-5 d-flex align-items-center justify-content-center\">\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: 20px\">\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: 20px\">\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                cFormPassword\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 btn-primary text-white fw-semibold\">\r\n              {{ config()?.submitButtonText }}\r\n            </button>\r\n          </div>\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        </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}\n"], dependencies: [{ kind: "directive", type: BackgroundImageDirective, selector: "[appBackgroundImage]", inputs: ["random", "backgroundImage"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i3.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i3.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i2$1.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "directive", type: i2$1.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "component", type: i2$1.FormFeedbackComponent, selector: "c-form-feedback", inputs: ["tooltip", "valid"] }, { kind: "directive", type: i2$1.FormPasswordDirective, selector: "input[cFormPassword]", inputs: ["ariaLabelToggler", "disabled", "floatingLabel", "readOnly", "sizing", "valid", "showPassword"] }, { kind: "component", type: i2$1.InputGroupComponent, selector: "c-input-group", inputs: ["sizing"] }, { kind: "directive", type: i2$1.InputGroupTextDirective, selector: "[cInputGroupText]" }, { kind: "directive", type: i2$1.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "component", type: i2$1.AlertComponent, selector: "c-alert", inputs: ["color", "role", "variant", "dismissible", "fade", "visible"], outputs: ["visibleChange"], exportAs: ["cAlert"] }] });
+    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"] }] });
 }
 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 login-wrapper\"\r\n  appBackgroundImage\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\">Maintenance Portal</p>\r\n      </div>\r\n      <div class=\"mt-5 d-flex align-items-center justify-content-center\">\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: 20px\">\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: 20px\">\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                cFormPassword\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 btn-primary text-white fw-semibold\">\r\n              {{ config()?.submitButtonText }}\r\n            </button>\r\n          </div>\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        </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}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], action: [{ type: i0.Output, args: ["action"] }], isFormSubmitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFormSubmitted", required: false }] }], showInactivityLogoutMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "showInactivityLogoutMessage", required: false }] }] } });
+            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"] }]
+        }], 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 {
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: LoginModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });