@pongrass/utils 0.0.1-v20

package/fesm2022/pongrass-utils.mjs

@@ -0,0 +1,1434 @@
+import * as i0 from '@angular/core';
+import { signal, Injectable, Component, ViewChild, inject, EventEmitter, Input, Output, ElementRef, HostListener, Directive, Renderer2, NgModule } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule, NgClass } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormsModule, NgControl, FormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
+import * as i4 from '@coreui/angular-pro';
+import { FormModule, ButtonModule, MultiSelectModule, MultiSelectComponent, InputGroupComponent, DatePickerModule, ModalModule, TooltipModule } from '@coreui/angular-pro';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+import { lastValueFrom } from 'rxjs';
+import * as i5 from '@coreui/icons-angular';
+import { IconModule } from '@coreui/icons-angular';
+import * as i8 from 'ngx-bootstrap/datepicker';
+import { BsDatepickerModule } from 'ngx-bootstrap/datepicker';
+import Swal from 'sweetalert2';
+import { Tooltip } from '@coreui/coreui-pro';
+
+class ConfigurationServiceLib {
+    currentTablePreference;
+    allConfigValues;
+    constructor() {
+        this.currentTablePreference = signal({}, ...(ngDevMode ? [{ debugName: "currentTablePreference" }] : []));
+        this.allConfigValues = signal(null, ...(ngDevMode ? [{ debugName: "allConfigValues" }] : []));
+    }
+    /* Generate Unique ID as String */
+    generateUniqueId() {
+        return `${Math.floor(Date.now() / 1000)}`;
+    }
+    setTablePreference(tableName, preference) {
+        const allTablePreference = this.currentTablePreference();
+        allTablePreference[tableName] = preference;
+        this.currentTablePreference.set(allTablePreference);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ConfigurationServiceLib, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ConfigurationServiceLib, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ConfigurationServiceLib, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+class ColorCellRendererComponent {
+    params;
+    colorsList = [];
+    colorCode = '';
+    agInit(params) {
+        this.params = params;
+        this.colorsList = params.colDef?.cellRendererParams?.colorsList ?? [];
+        this.setColorCode(this.params?.value);
+        this.refresh(params);
+    }
+    // Return Cell Value
+    refresh(params) {
+        return true;
+    }
+    setColorCode(colorKey) {
+        if (this.colorsList && this.colorsList.length > 0 && colorKey) {
+            const selectedColor = this.colorsList.find(color => color.color_name === colorKey);
+            if (selectedColor) {
+                this.colorCode = selectedColor.value;
+            }
+            else {
+                this.colorCode = ''; // Default color if not found
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ColorCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: ColorCellRendererComponent, isStandalone: true, selector: "app-color-cell-renderer", ngImport: i0, template: `
+    <div class="cell-wrapper align-items-center d-inline-flex gap-2">
+      <span class="color-box" [ngStyle]="{ 'background-color': colorCode }"></span>
+      <span class="text-truncate">
+        {{ params.value }}
+      </span>
+    </div>
+  `, isInline: true, styles: [".color-box{height:1.5rem}.cell-wrapper{display:flex;align-items:center;gap:.5rem;width:100%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ColorCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [CommonModule], selector: 'app-color-cell-renderer', template: `
+    <div class="cell-wrapper align-items-center d-inline-flex gap-2">
+      <span class="color-box" [ngStyle]="{ 'background-color': colorCode }"></span>
+      <span class="text-truncate">
+        {{ params.value }}
+      </span>
+    </div>
+  `, styles: [".color-box{height:1.5rem}.cell-wrapper{display:flex;align-items:center;gap:.5rem;width:100%;overflow:hidden}\n"] }]
+        }] });
+
+class CustomSelectFilterComponent {
+    params;
+    uniqueValues = [];
+    filteredValues = [];
+    selectedValues = new Set();
+    searchText = '';
+    isIndeterminate = false;
+    agInit(params) {
+        this.params = params;
+        this.uniqueValues = this.getUniqueValues();
+        this.filteredValues = [...this.uniqueValues];
+        this.uniqueValues.forEach(val => this.selectedValues.add(val));
+    }
+    searchInputRef;
+    afterGuiAttached() {
+        this.searchInputRef?.nativeElement?.focus();
+    }
+    getUniqueValues() {
+        const values = new Set();
+        this.params.api.forEachNode(node => {
+            values.add(node.data[this.params.colDef.field]);
+        });
+        return Array.from(values).sort();
+    }
+    isValueSelected(value) {
+        return this.selectedValues.has(value);
+    }
+    isAllSelected() {
+        return this.filteredValues.length > 0 && this.filteredValues.every(val => this.selectedValues.has(val));
+    }
+    onSelectAllChanged(event) {
+        const checked = event.target.checked;
+        if (checked) {
+            this.filteredValues.forEach(val => this.selectedValues.add(val));
+        }
+        else {
+            this.filteredValues.forEach(val => this.selectedValues.delete(val));
+        }
+        this.updateIndeterminate();
+        this.params.filterChangedCallback();
+    }
+    onValueChanged(value, event) {
+        const checked = event.target.checked;
+        if (checked) {
+            this.selectedValues.add(value);
+        }
+        else {
+            this.selectedValues.delete(value);
+        }
+        this.updateIndeterminate();
+        // If all are now selected, ensure isIndeterminate is false
+        if (this.isAllSelected()) {
+            this.isIndeterminate = false;
+        }
+        this.params.filterChangedCallback();
+    }
+    updateIndeterminate() {
+        // isIndeterminate is true if at least one but not all filteredValues are selected
+        const selectedCount = this.filteredValues.filter(val => this.selectedValues.has(val)).length;
+        this.isIndeterminate = selectedCount > 0 && selectedCount < this.filteredValues.length;
+    }
+    onSearchChange() {
+        const lower = this.searchText.toLowerCase();
+        this.filteredValues = this.uniqueValues.filter(val => val?.toString().toLowerCase().includes(lower));
+        this.updateIndeterminate();
+    }
+    doesFilterPass(params) {
+        const value = params.data[this.params.colDef.field];
+        return this.selectedValues.has(value);
+    }
+    isFilterActive() {
+        return this.selectedValues.size !== this.uniqueValues.length;
+    }
+    getModel() {
+        return { values: Array.from(this.selectedValues) };
+    }
+    setModel(model) {
+        if (model?.values) {
+            this.selectedValues = new Set(model.values);
+        }
+        else {
+            this.selectedValues = new Set(this.uniqueValues);
+        }
+        this.filteredValues = [...this.uniqueValues];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomSelectFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: CustomSelectFilterComponent, isStandalone: true, selector: "app-custom-set-filter", viewQueries: [{ propertyName: "searchInputRef", first: true, predicate: ["searchInput"], descendants: true }], ngImport: i0, template: `
+    <div class="select-filter-container">
+      <input type="text" #searchInput cFormControl [(ngModel)]="searchText" (input)="onSearchChange()" placeholder="Search..." class="search-box" />
+      @if (filteredValues.length > 0) {
+        <div>
+          <label class="checkbox-item">
+            <input cFormCheckInput [indeterminate]="isIndeterminate" type="checkbox" [checked]="isAllSelected()" (change)="onSelectAllChanged($event)" />
+            (Select All)
+          </label>
+        </div>
+      } @else {
+        <div>
+          <label> No matches </label>
+        </div>
+      }
+
+      <div class="checkbox-list">
+        @for (value of filteredValues; track value) {
+          <label [attr.aria-label]="'Select ' + value" class="checkbox-item">
+            <input cFormCheckInput type="checkbox" [value]="value" [checked]="isValueSelected(value)" (change)="onValueChanged(value, $event)" />
+            {{ value }}
+          </label>
+        }
+      </div>
+    </div>
+  `, isInline: true, styles: [".select-filter-container{padding:10px}.select-filter-container label{display:flex;gap:5px}.search-box{width:100%;margin-bottom:5px;padding:4px}.checkbox-list{max-height:200px;overflow-y:auto}.checkbox-item{padding:4px 6px;cursor:pointer;border-radius:4px}.checkbox-item:hover{background-color:#f0f0f0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i4.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CustomSelectFilterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-custom-set-filter', standalone: true, imports: [FormsModule, FormModule], template: `
+    <div class="select-filter-container">
+      <input type="text" #searchInput cFormControl [(ngModel)]="searchText" (input)="onSearchChange()" placeholder="Search..." class="search-box" />
+      @if (filteredValues.length > 0) {
+        <div>
+          <label class="checkbox-item">
+            <input cFormCheckInput [indeterminate]="isIndeterminate" type="checkbox" [checked]="isAllSelected()" (change)="onSelectAllChanged($event)" />
+            (Select All)
+          </label>
+        </div>
+      } @else {
+        <div>
+          <label> No matches </label>
+        </div>
+      }
+
+      <div class="checkbox-list">
+        @for (value of filteredValues; track value) {
+          <label [attr.aria-label]="'Select ' + value" class="checkbox-item">
+            <input cFormCheckInput type="checkbox" [value]="value" [checked]="isValueSelected(value)" (change)="onValueChanged(value, $event)" />
+            {{ value }}
+          </label>
+        }
+      </div>
+    </div>
+  `, styles: [".select-filter-container{padding:10px}.select-filter-container label{display:flex;gap:5px}.search-box{width:100%;margin-bottom:5px;padding:4px}.checkbox-list{max-height:200px;overflow-y:auto}.checkbox-item{padding:4px 6px;cursor:pointer;border-radius:4px}.checkbox-item:hover{background-color:#f0f0f0}\n"] }]
+        }], propDecorators: { searchInputRef: [{
+                type: ViewChild,
+                args: ['searchInput']
+            }] } });
+
+class CheckboxCellRendererComponent {
+    value;
+    params;
+    ischeckboxDisabled = true;
+    agInit(params) {
+        this.params = params;
+        this.ischeckboxDisabled = params.colDef?.cellRendererParams?.data?.disabled ?? true;
+        this.refresh(params);
+    }
+    // Return Cell Value
+    refresh(params) {
+        this.value = params.value === '1' ? true : false;
+        return true;
+    }
+    onChangeCheckBox(event) {
+        const checked = event.target.checked;
+        this.value = checked;
+        // Emit the change event to the parent via a callback
+        if (this.params.colDef?.cellRendererParams?.onCheckboxChange) {
+            this.params.colDef.cellRendererParams.onCheckboxChange(this.params.data, checked, this.params.colDef?.field);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CheckboxCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: CheckboxCellRendererComponent, isStandalone: true, selector: "ng-component", ngImport: i0, template: ` <div class="d-flex justify-content-start align-items-center h-100 mt-2">
+    <input
+      cFormCheckInput
+      type="checkbox"
+      class="me-2 cell-renderer-checkbox"
+      [checked]="value"
+      (change)="onChangeCheckBox($event)"
+      [disabled]="ischeckboxDisabled" />
+  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: FormModule }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CheckboxCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{
+                    standalone: true,
+                    imports: [FormModule],
+                    template: ` <div class="d-flex justify-content-start align-items-center h-100 mt-2">
+    <input
+      cFormCheckInput
+      type="checkbox"
+      class="me-2 cell-renderer-checkbox"
+      [checked]="value"
+      (change)="onChangeCheckBox($event)"
+      [disabled]="ischeckboxDisabled" />
+  </div>`
+                }]
+        }] });
+
+class CommentsButtonCellRendererComponent {
+    params;
+    agInit(params) {
+        this.params = params;
+    }
+    refresh(params) {
+        this.params = params;
+        return true;
+    }
+    onCommentClick() {
+        if (this.params?.colDef?.cellRendererParams?.onCommentClick) {
+            this.params.colDef.cellRendererParams.onCommentClick(this.params.data);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CommentsButtonCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.9", type: CommentsButtonCellRendererComponent, isStandalone: true, selector: "app-comments-button-cell-renderer", ngImport: i0, template: `
+    <div>
+      <button cButton [color]="params.data?.orders_notes ? 'primary' : 'secondary'" size="sm" data-action="comment-action" (click)="onCommentClick()">
+        Comments
+      </button>
+    </div>
+  `, isInline: true, styles: [""], dependencies: [{ kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CommentsButtonCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'app-comments-button-cell-renderer', imports: [ButtonModule], template: `
+    <div>
+      <button cButton [color]="params.data?.orders_notes ? 'primary' : 'secondary'" size="sm" data-action="comment-action" (click)="onCommentClick()">
+        Comments
+      </button>
+    </div>
+  ` }]
+        }] });
+
+var BrowserConstantsEnum;
+(function (BrowserConstantsEnum) {
+    BrowserConstantsEnum["sessionid"] = "sessionId";
+    BrowserConstantsEnum["loginUid"] = "uid";
+    BrowserConstantsEnum["tablePreference"] = "table_preference";
+})(BrowserConstantsEnum || (BrowserConstantsEnum = {}));
+
+var JSONRPCMethods;
+(function (JSONRPCMethods) {
+    JSONRPCMethods["getFormsConfig"] = "get_form";
+    JSONRPCMethods["tableSearch"] = "table_search";
+    JSONRPCMethods["tableUpdate"] = "table_update";
+    JSONRPCMethods["tableList"] = "table_list";
+    JSONRPCMethods["generateAccountId"] = "generate_accountid";
+    JSONRPCMethods["updateTablePreference"] = "update_form_preference";
+    JSONRPCMethods["listPhotoQueue"] = "photo_queue";
+    JSONRPCMethods["updateFileStatus"] = "update_photo_status";
+    JSONRPCMethods["report"] = "report";
+    JSONRPCMethods["adStatusList"] = "list_adstatus";
+    JSONRPCMethods["adApprovedList"] = "get_approval_adlist";
+    JSONRPCMethods["updateApprovedList"] = "update_approve_adlist";
+    JSONRPCMethods["getEditionPublicationList"] = "get_edition";
+    JSONRPCMethods["nationaROPReport"] = "national_rop_report";
+    JSONRPCMethods["nationaInserts"] = "national_inserts";
+    JSONRPCMethods["prodStatusList"] = "list_prodstatus";
+    JSONRPCMethods["updateAdStatus"] = "update_ad_status";
+    JSONRPCMethods["ordersNotes"] = "orders_notes";
+    JSONRPCMethods["getPageStatus"] = "get_page_status";
+    JSONRPCMethods["listPageStatus"] = "list_pagestatus";
+    JSONRPCMethods["updatePageStatus"] = "update_page_status";
+    JSONRPCMethods["markads"] = "markads";
+    JSONRPCMethods["updateReport"] = "update_report";
+    JSONRPCMethods["listFileStatus"] = "list_filestatus";
+    JSONRPCMethods["getIndustryList"] = "get_industry";
+})(JSONRPCMethods || (JSONRPCMethods = {}));
+
+class UtilsService {
+    httpService = inject(HttpClient);
+    configurationServiceLib = inject(ConfigurationServiceLib);
+    allConfigValues = this.configurationServiceLib.allConfigValues() || {};
+    constructor() { }
+    // JSONRPC POST Request With promise
+    async postJsonRpcRequestPromiseLib(method, params) {
+        const headers = new HttpHeaders({ 'Content-Type': 'application/json' });
+        const body = {
+            jsonrpc: '2.0',
+            method: method,
+            params: params,
+            id: this.configurationServiceLib.generateUniqueId()
+        };
+        const request$ = this.httpService.post(this.allConfigValues.apiBaseURLWebMaint, body, { headers });
+        const response = await lastValueFrom(request$);
+        return { ...response, timestamp: new Date().toISOString() };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: UtilsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: UtilsService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: UtilsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [] });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class EditionListGroupedComponent {
+    utilsService = inject(UtilsService);
+    isActive;
+    editionPublicationList;
+    selectedRegions;
+    selectedEditions;
+    selectedEditionsChange = new EventEmitter();
+    label;
+    multiple;
+    hasFormError;
+    constructor() {
+        this.isActive = true;
+        this.editionPublicationList = [];
+        this.selectedEditions = [];
+        this.selectedRegions = [];
+        this.label = '';
+        this.hasFormError = false;
+        this.multiple = true;
+    }
+    ngOnInit() {
+        this.getEditionPublicationList();
+    }
+    ngOnDestroy() {
+        this.isActive = false;
+    }
+    async getEditionPublicationList() {
+        const params = {
+            uid: +localStorage.getItem(BrowserConstantsEnum.loginUid),
+            for_approval: true
+        };
+        await this.utilsService
+            .postJsonRpcRequestPromiseLib(JSONRPCMethods.getEditionPublicationList, params)
+            .then((response) => {
+            if (response.result) {
+                const result = response.result;
+                result.forEach(ed => {
+                    ed['selected'] = false;
+                });
+                const groupedByRegion = result.reduce((acc, current) => {
+                    const region = current.region;
+                    if (region) {
+                        if (!acc[region]) {
+                            acc[region] = {
+                                region: region,
+                                values: []
+                            };
+                        }
+                        acc[region].values.push(current);
+                    }
+                    return acc;
+                }, {});
+                this.editionPublicationList = Object.values(groupedByRegion);
+            }
+        });
+    }
+    onEditionSelection(option) {
+        this.selectedEditions = [];
+        if (Array.isArray(option)) {
+            if (option.length > 0) {
+                option.forEach(editionData => {
+                    this.selectedEditions.push(editionData.edname);
+                });
+            }
+        }
+        else {
+            if (option && option.edname) {
+                this.selectedEditions.push(option.edname);
+            }
+        }
+        this.selectedEditionsChange.emit(this.selectedEditions);
+    }
+    onSelectEditionGroup(region, index) {
+        const isSelected = this.selectedRegions.includes(region);
+        if (isSelected) {
+            this.selectedRegions.splice(index, 1);
+        }
+        else {
+            this.selectedRegions.push(region);
+        }
+        this.editionPublicationList.forEach(element => {
+            if (element.region === region) {
+                element.values.forEach(regionValues => {
+                    regionValues.selected = !isSelected;
+                });
+            }
+        });
+    }
+    onVisibleChange(isActive) {
+        const elements = document.getElementsByClassName('form-multi-select-cleaner');
+        Array.from(elements).forEach((element) => {
+            element.style.display = isActive ? 'inline-block' : 'none';
+        });
+    }
+    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: "app-edition-list-grouped", inputs: { label: "label", multiple: "multiple", hasFormError: "hasFormError" }, outputs: { selectedEditionsChange: "selectedEditionsChange" }, ngImport: i0, template: "<div class=\"row\">\n  <div class=\"col-12\">\n    @if (label) {\n      <label for=\"sel-group-edition\">{{ label }}</label>\n    }\n    <c-multi-select\n      [cleaner]=\"true\"\n      [selectionType]=\"multiple ? 'counter' : 'text'\"\n      [multiple]=\"multiple\"\n      clearSearchOnSelect\n      [ngClass]=\"{ 'form-invalid': hasFormError }\"\n      placeholder=\"All Editions\"\n      visibleItems=\"8\"\n      (valueChange)=\"onEditionSelection($event)\"\n      (visibleChange)=\"onVisibleChange($event)\">\n      @for (option of editionPublicationList; track $index + '_' + option.region) {\n        <c-multi-select-optgroup>\n          <c-multi-select-optgroup-label (click)=\"onSelectEditionGroup(option.region, $index)\" class=\"region-selector cursor-pointer\">{{\n            option?.region\n          }}</c-multi-select-optgroup-label>\n          @for (item of option.values; track item?.description) {\n            <c-multi-select-option [value]=\"item\" [selected]=\"item.selected\">{{ '[' + item?.edname + ']' }} {{ item?.description }}</c-multi-select-option>\n          }\n        </c-multi-select-optgroup>\n      }\n    </c-multi-select>\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: MultiSelectModule }, { kind: "component", type: i4.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i4.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "component", type: i4.MultiSelectOptgroupComponent, selector: "c-multi-select-optgroup", inputs: ["label", "disabled"] }, { kind: "component", type: i4.MultiSelectOptgroupLabelComponent, selector: "c-multi-select-optgroup-label" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: EditionListGroupedComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-edition-list-grouped', imports: [MultiSelectModule, FormsModule, NgClass], standalone: true, 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" }]
+        }], ctorParameters: () => [], propDecorators: { selectedEditionsChange: [{
+                type: Output
+            }], label: [{
+                type: Input
+            }], multiple: [{
+                type: Input
+            }], hasFormError: [{
+                type: Input
+            }] } });
+
+class IndustryUpdateListboxCellRendererComponent {
+    industryList = [];
+    selectedIndustry;
+    params;
+    agInit(params) {
+        this.params = params;
+        this.industryList = params.colDef?.cellRendererParams?.data?.industryList ?? [];
+        this.selectedIndustry = params.data?.industry;
+        if (!this.selectedIndustry) {
+            this.selectedIndustry = 'select-industry';
+        }
+    }
+    refresh(params) {
+        this.selectedIndustry = params.data?.industry;
+        if (!this.selectedIndustry) {
+            this.selectedIndustry = 'select-industry';
+        }
+        return true;
+    }
+    onIndustryChange(event) {
+        const value = event.target.value;
+        if (this.params.colDef?.cellRendererParams?.onUpdateIndustry) {
+            this.params.colDef.cellRendererParams.onUpdateIndustry(this.params.data, value);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IndustryUpdateListboxCellRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: IndustryUpdateListboxCellRendererComponent, isStandalone: true, selector: "app-industry-update-listbox-cell-renderer", ngImport: i0, template: "<select\n  class=\"form-select select-industry\"\n  [ngClass]=\"{ 'select-industry-red': selectedIndustry === 'select-industry' }\"\n  [(ngModel)]=\"selectedIndustry\"\n  (change)=\"onIndustryChange($event)\"\n  id=\"sel-industry\"\n  name=\"sel-industry\">\n  <option value=\"select-industry\" disabled class=\"select-industry-opt\">Select Industry</option>\n  @for (industry of industryList; track industry.industry) {\n    <option [value]=\"industry?.industry\" class=\"select-industry-opt\">\n      {{ industry?.description }}\n    </option>\n  }\n</select>\n", styles: [".form-select.select-industry{color:#000}.form-select.select-industry.select-industry-red{color:#666666b3}.form-select.select-industry option{color:#000}.form-select.select-industry option[value=select-industry]{color:gray}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: IndustryUpdateListboxCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-industry-update-listbox-cell-renderer', imports: [FormsModule, NgClass], standalone: true, template: "<select\n  class=\"form-select select-industry\"\n  [ngClass]=\"{ 'select-industry-red': selectedIndustry === 'select-industry' }\"\n  [(ngModel)]=\"selectedIndustry\"\n  (change)=\"onIndustryChange($event)\"\n  id=\"sel-industry\"\n  name=\"sel-industry\">\n  <option value=\"select-industry\" disabled class=\"select-industry-opt\">Select Industry</option>\n  @for (industry of industryList; track industry.industry) {\n    <option [value]=\"industry?.industry\" class=\"select-industry-opt\">\n      {{ industry?.description }}\n    </option>\n  }\n</select>\n", styles: [".form-select.select-industry{color:#000}.form-select.select-industry.select-industry-red{color:#666666b3}.form-select.select-industry option{color:#000}.form-select.select-industry option[value=select-industry]{color:gray}\n"] }]
+        }] });
+
+class PageStatusCellRendererComponent {
+    pageStatusList = [];
+    params;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    pageStatus = undefined;
+    agInit(params) {
+        this.params = params;
+        this.pageStatusList = params.colDef?.cellRendererParams?.data?.pageStatusList ?? [];
+        this.refresh(params);
+    }
+    // Return Cell Value
+    refresh(params) {
+        this.pageStatus = params.data;
+        return true;
+    }
+    updatePageStatus(value) {
+        if (this.params.colDef?.cellRendererParams?.onUpdatePageStatus) {
+            this.params.colDef.cellRendererParams.onUpdatePageStatus(this.params.data, value);
+        }
+    }
+    getStatusColor() {
+        const selectedStatus = this.pageStatusList.find(status => status.page_status_name === this.pageStatus.page_status_name);
+        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: "app-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: i1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormModule }, { kind: "directive", type: i4.FormSelectDirective, selector: "select[cSelect]", inputs: ["sizing", "valid"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: PageStatusCellRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'app-page-status-cell-renderer', imports: [FormsModule, CommonModule, FormModule], standalone: true, 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"] }]
+        }] });
+
+var FormFieldType;
+(function (FormFieldType) {
+    FormFieldType["Text"] = "text";
+    FormFieldType["Email"] = "email";
+    FormFieldType["Number"] = "number";
+    FormFieldType["Select"] = "select";
+    FormFieldType["Textarea"] = "textarea";
+    FormFieldType["Date"] = "date";
+    FormFieldType["Checkbox"] = "checkbox";
+    FormFieldType["Float"] = "float";
+    FormFieldType["Edition"] = "edition";
+    FormFieldType["Separator"] = "seperator";
+    FormFieldType["FormHeader"] = "form-header";
+    FormFieldType["Password"] = "password";
+    FormFieldType["Url"] = "url";
+    FormFieldType["Tel"] = "tel";
+})(FormFieldType || (FormFieldType = {}));
+
+const ColorsCodes = [
+    {
+        color_name: 'AliceBlue',
+        color_code: '#F0F8FF'
+    },
+    {
+        color_name: 'Aqua',
+        color_code: '#00FFFF'
+    },
+    {
+        color_name: 'Aquamarine',
+        color_code: '#7FFFD4'
+    },
+    {
+        color_name: 'Beige',
+        color_code: '#F5F5DC'
+    },
+    {
+        color_name: 'Black',
+        color_code: '#000000'
+    },
+    {
+        color_name: 'Blue',
+        color_code: '#0000FF'
+    },
+    {
+        color_name: 'Chartreuse',
+        color_code: '#7FFF00'
+    },
+    {
+        color_name: 'Coral',
+        color_code: '#FF7F50'
+    },
+    {
+        color_name: 'DarkGray',
+        color_code: '#A9A9A9'
+    },
+    {
+        color_name: 'DarkGrey',
+        color_code: '#A9A9A9'
+    },
+    {
+        color_name: 'DarkGreen',
+        color_code: '#006400'
+    },
+    {
+        color_name: 'DarkOrange',
+        color_code: '#FF8C00'
+    },
+    {
+        color_name: 'Fuchsia',
+        color_code: '#FF00FF'
+    },
+    {
+        color_name: 'GoldenRod',
+        color_code: '#DAA520'
+    },
+    {
+        color_name: 'Gray',
+        color_code: '#808080'
+    },
+    {
+        color_name: 'Grey',
+        color_code: '#808080'
+    },
+    {
+        color_name: 'Green',
+        color_code: '#008000'
+    },
+    {
+        color_name: 'GreenYellow',
+        color_code: '#ADFF2F'
+    },
+    {
+        color_name: 'Khaki',
+        color_code: '#F0E68C'
+    },
+    {
+        color_name: 'Lavender',
+        color_code: '#E6E6FA'
+    },
+    {
+        color_name: 'LightGray',
+        color_code: '#D3D3D3'
+    },
+    {
+        color_name: 'LightGrey',
+        color_code: '#D3D3D3'
+    },
+    {
+        color_name: 'LightGreen',
+        color_code: '#90EE90'
+    },
+    {
+        color_name: 'LightSalmon',
+        color_code: '#FFA07A'
+    },
+    {
+        color_name: 'LightSkyBlue',
+        color_code: '#87CEFA'
+    },
+    {
+        color_name: 'Lime',
+        color_code: '#00FF00'
+    },
+    {
+        color_name: 'LimeGreen',
+        color_code: '#32CD32'
+    },
+    {
+        color_name: 'Magenta',
+        color_code: '#FF00FF'
+    },
+    {
+        color_name: 'Maroon',
+        color_code: '#800000'
+    },
+    {
+        color_name: 'MediumSpringGreen',
+        color_code: '#00FA9A'
+    },
+    {
+        color_name: 'Navy',
+        color_code: '#000080'
+    },
+    {
+        color_name: 'Olive',
+        color_code: '#808000'
+    },
+    {
+        color_name: 'Orange',
+        color_code: '#FFA500'
+    },
+    {
+        color_name: 'OrangeRed',
+        color_code: '#FF4500'
+    },
+    {
+        color_name: 'Orchid',
+        color_code: '#DA70D6'
+    },
+    {
+        color_name: 'PaleGreen',
+        color_code: '#98FB98'
+    },
+    {
+        color_name: 'PaleTurquoise',
+        color_code: '#AFEEEE'
+    },
+    {
+        color_name: 'Plum',
+        color_code: '#DDA0DD'
+    },
+    {
+        color_name: 'Purple',
+        color_code: '#800080'
+    },
+    {
+        color_name: 'Red',
+        color_code: '#FF0000'
+    },
+    {
+        color_name: 'Salmon',
+        color_code: '#FA8072'
+    },
+    {
+        color_name: 'SandyBrown',
+        color_code: '#F4A460'
+    },
+    {
+        color_name: 'Silver',
+        color_code: '#C0C0C0'
+    },
+    {
+        color_name: 'SkyBlue',
+        color_code: '#87CEEB'
+    },
+    {
+        color_name: 'Teal',
+        color_code: '#008080'
+    },
+    {
+        color_name: 'Tomato',
+        color_code: '#FF6347'
+    },
+    {
+        color_name: 'Violet',
+        color_code: '#EE82EE'
+    },
+    {
+        color_name: 'Wheat',
+        color_code: '#F5DEB3'
+    },
+    {
+        color_name: 'White',
+        color_code: '#FFFFFF'
+    },
+    {
+        color_name: 'Yellow',
+        color_code: '#FFFF00'
+    }
+];
+
+class CircularFocusDirective {
+    el = inject(ElementRef);
+    formId = '';
+    formGroup = null;
+    focusableElements = [];
+    formSubscription = null;
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.collectFocusableElements();
+            // Subscribe to form value changes if formGroup is provided
+            if (this.formGroup) {
+                this.formSubscription = this.formGroup.valueChanges.subscribe(() => {
+                    // Wait for DOM to update after form changes
+                    setTimeout(() => {
+                        this.collectFocusableElements();
+                    }, 0);
+                });
+            }
+        }, 0);
+    }
+    ngOnDestroy() {
+        // Clean up subscription when directive is destroyed
+        if (this.formSubscription) {
+            this.formSubscription.unsubscribe();
+        }
+    }
+    collectFocusableElements() {
+        if (!this.formId) {
+            // If no formId is provided, use the current element
+            this.focusableElements = this.getFocusableElements(this.el.nativeElement);
+        }
+        else {
+            const formElement = document.getElementById(this.formId);
+            if (formElement) {
+                this.focusableElements = this.getFocusableElements(formElement);
+            }
+        }
+    }
+    getFocusableElements(element) {
+        return Array.from(element.querySelectorAll('input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [contenteditable]:not([disabled]), c-multi-select:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])')).filter(el => {
+            // Filter out hidden elements
+            const element = el;
+            return element.offsetParent !== null; // Check if element is visible
+        });
+    }
+    onKeyDown(event) {
+        // ToDo: Plan to escape the circular navigation when Escape is pressed
+        // if (event.key === 'Escape') {}
+        // Only handle Tab key events
+        if (event.key !== 'Tab')
+            return;
+        // If no focusable elements, do nothing
+        if (this.focusableElements.length === 0)
+            return;
+        const currentElement = document.activeElement;
+        const currentIndex = this.focusableElements.indexOf(currentElement);
+        // If current element is not in our list, do nothing
+        if (currentIndex === -1)
+            return;
+        // Handle circular navigation
+        if (event.shiftKey) {
+            // Going backward with Shift+Tab
+            if (currentIndex === 0) {
+                event.preventDefault();
+                const lastElement = this.focusableElements[this.focusableElements.length - 1];
+                lastElement.focus();
+            }
+        }
+        else {
+            // Going forward with Tab
+            if (currentIndex === this.focusableElements.length - 1) {
+                event.preventDefault();
+                const firstElement = this.focusableElements[0];
+                firstElement.focus();
+            }
+        }
+    }
+    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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: CircularFocusDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appCircularFocus]',
+                    standalone: true
+                }]
+        }], propDecorators: { formId: [{
+                type: Input
+            }], formGroup: [{
+                type: Input
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class DecimalInputDirective {
+    el = inject((ElementRef));
+    control = inject(NgControl);
+    sub;
+    appDecimalInput = 4;
+    specialKeys = ['Backspace', 'Tab', 'End', 'Home', 'ArrowLeft', 'ArrowRight', 'Delete'];
+    ngOnInit() {
+        // Only format when value comes from patchValue / setValue (not typing)
+        this.sub = this.control.valueChanges?.subscribe(value => {
+            const inputEl = this.el.nativeElement;
+            // Skip if input element is focused (user typing)
+            if (document.activeElement === inputEl)
+                return;
+            this.formatValue(value);
+        });
+    }
+    ngOnDestroy() {
+        this.sub?.unsubscribe();
+    }
+    onKeyDown(event) {
+        const input = this.el.nativeElement;
+        const value = input.value;
+        if (this.specialKeys.includes(event.key))
+            return;
+        if (event.key === '.' && value.includes('.')) {
+            event.preventDefault();
+            return;
+        }
+        const cursorPos = input.selectionStart ?? value.length;
+        const nextValue = this.getNextValue(value, event.key, cursorPos);
+        if (!this.isValidInput(nextValue)) {
+            event.preventDefault();
+        }
+    }
+    onBlur() {
+        this.formatValue(this.el.nativeElement.value);
+    }
+    formatValue(value) {
+        if (value === null || value === undefined || value === '')
+            return;
+        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);
+        }
+        this.control.control?.setValue(formatted, { emitEvent: false });
+        this.el.nativeElement.value = formatted;
+    }
+    isValidInput(value) {
+        const regex = new RegExp(`^\\d*\\.?\\d{0,${this.appDecimalInput}}$`);
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: DecimalInputDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appDecimalInput]',
+                    standalone: true
+                }]
+        }], propDecorators: { appDecimalInput: [{
+                type: Input
+            }], onKeyDown: [{
+                type: HostListener,
+                args: ['keydown', ['$event']]
+            }], onBlur: [{
+                type: HostListener,
+                args: ['blur']
+            }] } });
+
+/// <reference path="../types/coreui-pro.d.ts" />
+class ShowTooltipIfTruncatedDirective {
+    tooltipText = '';
+    el = inject(ElementRef);
+    constructor() { }
+    onMouseEnter() {
+        if (!this.isTextTruncated()) {
+            return;
+        }
+        Tooltip.getOrCreateInstance(this.el.nativeElement, {
+            trigger: 'manual',
+            title: this.tooltipText
+        }).show();
+    }
+    onMouseLeave() {
+        Tooltip.getOrCreateInstance(this.el.nativeElement)?.hide();
+    }
+    isTextTruncated() {
+        const el = this.el.nativeElement;
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ShowTooltipIfTruncatedDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[appShowTooltipIfTruncated]', standalone: true }]
+        }], ctorParameters: () => [], propDecorators: { tooltipText: [{
+                type: Input,
+                args: ['appShowTooltipIfTruncated']
+            }], onMouseEnter: [{
+                type: HostListener,
+                args: ['mouseenter']
+            }], onMouseLeave: [{
+                type: HostListener,
+                args: ['mouseleave']
+            }] } });
+
+class MultiSelectStylerDirective {
+    ngControl = inject(NgControl, { optional: true });
+    renderer = inject(Renderer2);
+    el = inject(ElementRef);
+    mutationObserver;
+    appMultiSelectStyler = true;
+    options = [];
+    multiSelect = inject(MultiSelectComponent, { optional: true });
+    ngOnInit() {
+        if (!this.appMultiSelectStyler)
+            return;
+        if (!this.ngControl) {
+            return;
+        }
+        // Initial update
+        setTimeout(() => this.updateSelectedItem(), 0);
+        // Watch for control value changes
+        this.ngControl.valueChanges?.subscribe(() => {
+            setTimeout(() => this.updateSelectedItem(), 0);
+        });
+        this.setupMutationObserver();
+    }
+    setupMutationObserver() {
+        const container = this.getSelectionContainer();
+        if (!container)
+            return;
+        this.mutationObserver = new MutationObserver(() => {
+            this.updateSelectedItem();
+        });
+        this.mutationObserver.observe(container, {
+            childList: true,
+            subtree: true
+        });
+    }
+    getSelectionContainer() {
+        return this.el.nativeElement.querySelector('.form-multi-select-selection');
+    }
+    updateSelectedItem() {
+        const container = this.getSelectionContainer();
+        if (!container)
+            return;
+        // Clear existing custom element
+        const existingItem = container.querySelector('.color-box');
+        if (existingItem) {
+            existingItem.remove();
+        }
+        const selectedValue = this.ngControl?.value;
+        if (!selectedValue)
+            return;
+        const textElement = container.querySelector('.form-multi-select-text');
+        if (!textElement)
+            return;
+        const option = this.options.find(opt => opt.label === selectedValue);
+        if (!option) {
+            return;
+        }
+        // const option = { color: 'red'};
+        this.renderer.setStyle(container, 'flex-wrap', 'unset');
+        this.renderer.addClass(container, 'gap-2');
+        // Create and insert color box
+        const colorBox = this.renderer.createElement('span');
+        this.renderer.addClass(colorBox, 'color-box');
+        this.renderer.setStyle(colorBox, 'background-color', option.value);
+        this.renderer.insertBefore(textElement.parentNode, colorBox, textElement);
+    }
+    ngOnDestroy() {
+        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 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiSelectStylerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appMultiSelectStyler]',
+                    standalone: true
+                }]
+        }], propDecorators: { appMultiSelectStyler: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }] } });
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+class MultiFormComponent {
+    formBuilder = inject(FormBuilder);
+    configurationService = inject(ConfigurationServiceLib);
+    config;
+    showUnsavedFlags;
+    currentTableGridsSelectedIndex;
+    formId;
+    fieldAction = new EventEmitter();
+    formSavedUnsavedListen = new EventEmitter();
+    selectionChangeEvent = new EventEmitter();
+    multiForm;
+    isFormSubmitted;
+    initialFormValues;
+    isFormSaved = false;
+    isFormSavedModalActive = false;
+    isSelectionChange = false;
+    inputType = {
+        colorSelect: 'color-select'
+    };
+    colorCodes$ = ColorsCodes;
+    FormFieldType = FormFieldType;
+    constructor() {
+        this.multiForm = this.formBuilder.group({});
+        this.isFormSubmitted = false;
+        this.showUnsavedFlags = false;
+        this.formId = '';
+    }
+    ngOnInit() {
+        this.buildFormControls();
+        this.saveInitialFormValues();
+        console.log('config ->>>', this.configurationService);
+    }
+    ngOnChanges(changes) {
+        if (changes['config'] && !changes['config'].isFirstChange()) {
+            if (this.showUnsavedFlags) {
+                if (this.hasUnsavedChanges() && !this.isFormSaved && !this.isSelectionChange) {
+                    Swal.fire({
+                        icon: 'warning',
+                        title: 'Do you want to save the changes?',
+                        showDenyButton: true,
+                        confirmButtonText: 'Save',
+                        denyButtonText: `Don't save`
+                    }).then((result) => {
+                        if (result.isConfirmed) {
+                            this.proceedToSaveUnsavedForm();
+                        }
+                        else if (result.isDenied) {
+                            this.proceedWithoutSavingForm();
+                        }
+                    });
+                    return;
+                }
+                this.updateFormControls();
+            }
+            else {
+                this.updateFormControls();
+            }
+        }
+    }
+    buildFormControls() {
+        if (this.config?.rows?.length) {
+            this.config.rows.forEach(row => {
+                row.forEach(field => {
+                    if (field?.type === FormFieldType.Separator || field?.type === FormFieldType.FormHeader)
+                        return;
+                    const validators = this.getValidators(field.validations);
+                    if (field.type === FormFieldType.Checkbox) {
+                        this.multiForm.addControl(field.controlName, this.formBuilder.control({ value: this.getTruthyOrFalsy(field.value) || false, disabled: field.validations?.readonly || false }, validators));
+                    }
+                    else if (field.type === FormFieldType.Date) {
+                        // If field value is "", dont set the default advance date
+                        this.multiForm.addControl(field.controlName, this.formBuilder.control({
+                            value: field?.value !== '' ? this.setDefaultAdvanceDate(new Date(), field?.validations?.defaultAdvance || '') : '',
+                            disabled: field.validations?.readonly || false
+                        }, validators));
+                    }
+                    else {
+                        this.multiForm.addControl(field.controlName, this.formBuilder.control({ value: field?.value || '', disabled: field.validations?.readonly || false }, validators));
+                    }
+                });
+            });
+        }
+    }
+    /** Reload the field action */
+    onClickFieldAction(action, field) {
+        this.fieldAction.emit({ action: 'reload', field });
+    }
+    updateFormControls() {
+        if (!this.config?.rows?.length)
+            return;
+        this.config.rows.forEach(row => {
+            row.forEach(field => {
+                if (field?.type === FormFieldType.Separator || field?.type === FormFieldType.FormHeader)
+                    return;
+                const isReadOnly = !!field.validations?.readonly;
+                const validators = this.getValidators(field.validations);
+                let control = this.multiForm.get(field.controlName);
+                // If control does not exist, add it as enabled
+                if (!control) {
+                    let initialValue = '';
+                    if (field.type === FormFieldType.Checkbox) {
+                        initialValue = this.getTruthyOrFalsy(field.value) || false;
+                    }
+                    else if (field.type === FormFieldType.Date) {
+                        initialValue = field?.value ? new Date(field.value) : this.setDefaultAdvanceDate(new Date(), field?.validations?.defaultAdvance || '');
+                    }
+                    else {
+                        initialValue = field.value || '';
+                    }
+                    control = this.formBuilder.control(initialValue, { validators, nonNullable: true });
+                    this.multiForm.addControl(field.controlName, control);
+                }
+                // Always enable before setting value
+                control.enable({ emitEvent: false });
+                // Set value
+                if (field.type === FormFieldType.Checkbox) {
+                    control.setValue(this.getTruthyOrFalsy(field.value) || false, { emitEvent: false });
+                }
+                else if (field.type === FormFieldType.Date) {
+                    control.setValue(field?.value ? new Date(field.value) : '', { emitEvent: false });
+                }
+                else {
+                    control.setValue(field.value || '', { emitEvent: false });
+                }
+                // Disable if readonly
+                if (isReadOnly) {
+                    control.disable({ emitEvent: false });
+                }
+            });
+        });
+        this.saveInitialFormValues();
+        this.isFormSaved = false;
+        this.multiForm.markAsPristine();
+    }
+    getTruthyOrFalsy(value) {
+        return value === '1' ? true : false;
+    }
+    getValidators(validations) {
+        const validators = [];
+        if (validations) {
+            if (validations.required) {
+                validators.push(Validators.required);
+            }
+            if (validations.minLength) {
+                validators.push(Validators.minLength(validations.minLength));
+            }
+            if (validations.maxLength) {
+                validators.push(Validators.maxLength(validations.maxLength));
+            }
+            if (validations.pattern) {
+                validators.push(Validators.pattern(validations.pattern));
+            }
+        }
+        return validators;
+    }
+    /** Get the form values */
+    getFormValues() {
+        this.isFormSubmitted = true;
+        this.isFormSaved = true;
+        const formSubmissionEmit = { isValid: this.multiForm.valid, values: this.multiForm.getRawValue(), controls: this.multiForm.controls };
+        return formSubmissionEmit;
+    }
+    /** Reset the form */
+    resetForm() {
+        this.multiForm.reset();
+        this.isFormSubmitted = false;
+    }
+    /**Set Value to form */
+    setValue(control, value) {
+        this.multiForm.controls[control].setValue(value);
+    }
+    /**Get Value from form */
+    getValue(control) {
+        return this.multiForm.controls[control].value;
+    }
+    /**Get Form Control */
+    getFormControl(control) {
+        return this.multiForm.controls[control];
+    }
+    hasUnsavedChanges() {
+        return JSON.stringify(this.multiForm.getRawValue()) !== JSON.stringify(this.initialFormValues);
+    }
+    saveInitialFormValues() {
+        this.initialFormValues = this.multiForm.getRawValue();
+    }
+    proceedToSaveUnsavedForm() {
+        this.formSavedUnsavedListen.emit({ isValid: this.multiForm.valid, values: this.multiForm.getRawValue(), controls: this.multiForm.controls });
+    }
+    proceedWithoutSavingForm() {
+        this.formSavedUnsavedListen.emit(null);
+        this.updateFormControls();
+    }
+    onValueChange(event, control) {
+        this.selectionChangeEvent.emit({ control, value: event });
+        this.isSelectionChange = true;
+    }
+    onDateValueChange(value, control) {
+        const stopControl = this.findStopControl();
+        if (stopControl) {
+            if (control === '@start' && value && stopControl?.validations?.defaultAdvance) {
+                const startDate = new Date(value);
+                if (this.multiForm.contains('@stop')) {
+                    this.multiForm.controls['@stop'].setValue(this.setDefaultAdvanceDate(startDate, stopControl?.validations?.defaultAdvance));
+                }
+            }
+        }
+    }
+    onEditionChange(event) {
+        const controlNameWithAt = '@edname';
+        const controlNameWithoutAt = 'edname';
+        if (this.multiForm.contains(controlNameWithAt)) {
+            this.multiForm.controls[controlNameWithAt].setValue(event);
+        }
+        else if (this.multiForm.contains(controlNameWithoutAt)) {
+            this.multiForm.controls[controlNameWithoutAt].setValue(event);
+        }
+        else {
+            this.multiForm.addControl(controlNameWithAt, this.formBuilder.control(event));
+        }
+    }
+    setDefaultAdvanceDate(currentDate, defaultAdvance) {
+        if (defaultAdvance === 'weekly') {
+            return this.advanceDate(currentDate, 6);
+        }
+        else if (defaultAdvance === 'monthly') {
+            const month = currentDate.getMonth();
+            const year = currentDate.getFullYear();
+            // Get days in current month
+            const daysInMonth = new Date(year, month + 1, 0).getDate();
+            let daysToAdd = 30;
+            if (daysInMonth === 31) {
+                daysToAdd = 30;
+            }
+            else if (daysInMonth === 30) {
+                daysToAdd = 29;
+            }
+            else if (month === 1) {
+                const isLeap = (year % 4 === 0 && year % 100 !== 0) || year % 400 === 0;
+                daysToAdd = isLeap ? 28 : 27;
+            }
+            return this.advanceDate(currentDate, daysToAdd);
+        }
+        else if (defaultAdvance === 'quarterly') {
+            return this.advanceDate(currentDate, 90);
+        }
+        else if (defaultAdvance === 'halfyearly') {
+            return this.advanceDate(currentDate, 180);
+        }
+        else if (defaultAdvance === 'yearly') {
+            return this.advanceDate(currentDate, 365);
+        }
+        else {
+            return this.advanceDate(currentDate, 0);
+        }
+    }
+    advanceDate(currentDate, advancedBy) {
+        if (advancedBy || advancedBy === 0) {
+            const advanceDate = new Date(currentDate.setDate(currentDate.getDate() + advancedBy));
+            return advanceDate;
+        }
+    }
+    findStopControl() {
+        for (const row of this.config.rows) {
+            for (const field of row) {
+                if (field.controlName === '@stop') {
+                    return field;
+                }
+            }
+        }
+        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: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i4.MultiSelectComponent, selector: "c-multi-select", inputs: ["allowCreateOptions", "cleaner", "clearSearchOnSelect", "disabled", "loading", "multiple", "options", "optionsMaxHeight", "optionsStyle", "placeholder", "resetSelectionOnOptionsChange", "search", "searchNoResultsLabel", "searchValue", "selectAll", "selectAllLabel", "selectionType", "selectionTypeCounterText", "selectionTypeCounterTextPluralMap", "size", "value", "valid", "virtualScroller", "visibleItems", "itemSize", "itemMinWidth", "visible", "popperOptions"], outputs: ["searchValueChange", "valueChange", "visibleChange"], exportAs: ["cMultiSelect"] }, { kind: "component", type: i4.MultiSelectOptionComponent, selector: "c-multi-select-option", inputs: ["optionsStyle", "label", "text", "visible", "disabled", "selected", "value", "active", "role"], outputs: ["selectedChange", "focusChange"], exportAs: ["cMultiSelectOption"] }, { kind: "directive", type: i4.FormDirective, selector: "form[cForm]", inputs: ["validated"] }, { kind: "directive", type: i4.FormCheckLabelDirective, selector: "label[cFormCheckLabel]" }, { kind: "directive", type: i4.FormCheckInputDirective, selector: "input[cFormCheckInput]", inputs: ["type", "indeterminate", "valid"] }, { kind: "directive", type: i4.FormControlDirective, selector: "input[cFormControl], textarea[cFormControl]", inputs: ["sizing", "valid", "type", "plaintext"] }, { kind: "directive", type: i4.FormLabelDirective, selector: "[cLabel]", inputs: ["cLabel", "sizing"] }, { kind: "directive", type: i5.IconDirective, selector: "svg[cIcon]", inputs: ["cIcon", "customClasses", "size", "title", "height", "width", "name", "viewBox", "xmlns", "pointer-events", "role"], exportAs: ["cIcon"] }, { kind: "directive", type: DecimalInputDirective, selector: "[appDecimalInput]", inputs: ["appDecimalInput"] }, { kind: "directive", type: ShowTooltipIfTruncatedDirective, selector: "[appShowTooltipIfTruncated]", inputs: ["appShowTooltipIfTruncated"] }, { kind: "directive", type: i4.TooltipDirective, selector: "[cTooltip]", inputs: ["cTooltip", "cTooltipOptions", "cTooltipPlacement", "cTooltipRef", "cTooltipTrigger", "cTooltipVisible"], outputs: ["cTooltipVisibleChange"], exportAs: ["cTooltip"] }, { kind: "directive", type: i4.ButtonDirective, selector: "[cButton]", inputs: ["active", "color", "disabled", "shape", "size", "tabindex", "type", "variant"], exportAs: ["cButton"] }, { kind: "directive", type: i8.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "ignoreMinMaxErrors", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i8.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "component", type: EditionListGroupedComponent, selector: "app-edition-list-grouped", inputs: ["label", "multiple", "hasFormError"], outputs: ["selectedEditionsChange"] }, { kind: "directive", type: MultiSelectStylerDirective, selector: "[appMultiSelectStyler]", inputs: ["appMultiSelectStyler", "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"] }]
+        }], ctorParameters: () => [], propDecorators: { config: [{
+                type: Input
+            }], showUnsavedFlags: [{
+                type: Input
+            }], currentTableGridsSelectedIndex: [{
+                type: Input
+            }], formId: [{
+                type: Input
+            }], fieldAction: [{
+                type: Output
+            }], formSavedUnsavedListen: [{
+                type: Output
+            }], selectionChangeEvent: [{
+                type: Output
+            }] } });
+
+class MultiFormModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.9", ngImport: i0, type: MultiFormModule, declarations: [MultiFormComponent], imports: [CircularFocusDirective,
+            CommonModule,
+            ReactiveFormsModule,
+            MultiSelectModule,
+            FormModule,
+            IconModule,
+            InputGroupComponent,
+            DatePickerModule,
+            DecimalInputDirective,
+            ShowTooltipIfTruncatedDirective,
+            ModalModule,
+            TooltipModule,
+            ButtonModule,
+            BsDatepickerModule,
+            EditionListGroupedComponent,
+            MultiSelectStylerDirective], exports: [MultiFormComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormModule, imports: [CommonModule,
+            ReactiveFormsModule,
+            MultiSelectModule,
+            FormModule,
+            IconModule,
+            InputGroupComponent,
+            DatePickerModule,
+            ModalModule,
+            TooltipModule,
+            ButtonModule,
+            BsDatepickerModule,
+            EditionListGroupedComponent] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: MultiFormModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [MultiFormComponent],
+                    imports: [
+                        CircularFocusDirective,
+                        CommonModule,
+                        ReactiveFormsModule,
+                        MultiSelectModule,
+                        FormModule,
+                        IconModule,
+                        InputGroupComponent,
+                        DatePickerModule,
+                        DecimalInputDirective,
+                        ShowTooltipIfTruncatedDirective,
+                        ModalModule,
+                        TooltipModule,
+                        ButtonModule,
+                        BsDatepickerModule,
+                        EditionListGroupedComponent,
+                        MultiSelectStylerDirective
+                    ],
+                    exports: [MultiFormComponent]
+                }]
+        }] });
+
+/*
+ * Public API Surface of utils
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CheckboxCellRendererComponent, ColorCellRendererComponent, CommentsButtonCellRendererComponent, ConfigurationServiceLib, CustomSelectFilterComponent, EditionListGroupedComponent, FormFieldType, IndustryUpdateListboxCellRendererComponent, MultiFormComponent, MultiFormModule, PageStatusCellRendererComponent };
+//# sourceMappingURL=pongrass-utils.mjs.map