@jooler/inputs 0.0.54 → 0.0.56

package/fesm2022/inputs.mjs

@@ -1,277 +1,97 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Component, Input, Output, Injectable, Inject, ContentChild, Pipe, Directive, HostListener, NgModule } from '@angular/core';
-import * as i2$1 from '@angular/forms';
-import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgModel, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { EventEmitter, forwardRef, Component, Input, Output, Injectable, Inject, ContentChild, HostListener, Directive, Pipe, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { CurrencyPipe, DecimalPipe, CommonModule } from '@angular/common';
+import * as i2$1 from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgModel, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i2 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import * as i4 from '@jooler/shared-general-components';
 import { ChipInputType, SharedGeneralComponentsModule } from '@jooler/shared-general-components';
-import * as i2$2 from '@fortawesome/angular-fontawesome';
-import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
+import { Subject, tap, switchMap, filter } from 'rxjs';
 import * as i1$1 from '@angular/common/http';
 import { HttpParams, HttpHeaders } from '@angular/common/http';
 import * as i2$3 from '@angular/material/dialog';
 import * as i6 from '@angular/material/card';
 import * as i1$2 from '@angular/router';
 import * as i3 from '@angular/material/menu';
+import * as i2$2 from '@fortawesome/angular-fontawesome';
+import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i3$1 from '@angular/material/button';
 import { AppMaterialModule } from '@jooler/app-material';
 
-class PrimaryColors {
-    static $primaryBlueColor = '#155ED4';
-    static $primaryPinkColor = '#F0509C';
-    static $primaryTealColor = '#12957E';
-    static $primaryCarbonColor = '#32353B';
-    static $primaryGrayColor = '#676767';
-    static $primaryPurpleColor = '#E3B1EB';
-    static $primaryRedColor = '#A80002';
-    static $primaryLightRedColor = '#FFDBDB';
-    static $primaryLightGrayBlueColor = '#f7f8f9';
-    static $primaryLightGrayColor = '#f0f0f0';
-    static $primaryLightBlueColor = '#b9cff2';
-    static $primaryYellowColor = '#F2CD5C';
-    static $primaryOrangeColor = '#F2921D';
-    static $primaryLimeGreenColor = '#AFFF00';
-    static $primaryNavyBlueColor = '#000080';
-    static $primaryOrangeRedColor = '#FF4500';
-    static $primaryDarkPurpleColor = '#7600BC';
-}
-
-var BOMProductionType;
-(function (BOMProductionType) {
-    BOMProductionType[BOMProductionType["MANUFACTURED_IN_HOUSE"] = 0] = "MANUFACTURED_IN_HOUSE";
-    BOMProductionType[BOMProductionType["PARTIALLY_MANUFACTURED_IN_HOUSE"] = 1] = "PARTIALLY_MANUFACTURED_IN_HOUSE";
-})(BOMProductionType || (BOMProductionType = {}));
-const bomProductionTypeColors = Object.values({
-    [BOMProductionType.MANUFACTURED_IN_HOUSE]: PrimaryColors.$primaryLimeGreenColor,
-    [BOMProductionType.PARTIALLY_MANUFACTURED_IN_HOUSE]: PrimaryColors.$primaryBlueColor,
-});
-
-var SalesOrderStatus;
-(function (SalesOrderStatus) {
-    SalesOrderStatus[SalesOrderStatus["DRAFT"] = 0] = "DRAFT";
-    SalesOrderStatus[SalesOrderStatus["PENDING_APPROVAL"] = 1] = "PENDING_APPROVAL";
-    SalesOrderStatus[SalesOrderStatus["APPROVED"] = 2] = "APPROVED";
-    SalesOrderStatus[SalesOrderStatus["TO_DELIVER_AND_TO_BILL"] = 3] = "TO_DELIVER_AND_TO_BILL";
-    SalesOrderStatus[SalesOrderStatus["TO_BILL"] = 4] = "TO_BILL";
-    SalesOrderStatus[SalesOrderStatus["PARTIALLY_DELIVERED_AND_PARTIALLY_BILLED"] = 5] = "PARTIALLY_DELIVERED_AND_PARTIALLY_BILLED";
-    SalesOrderStatus[SalesOrderStatus["PARTIALLY_DELIVERED_AND_TO_BILL"] = 6] = "PARTIALLY_DELIVERED_AND_TO_BILL";
-    SalesOrderStatus[SalesOrderStatus["COMPLETED"] = 7] = "COMPLETED";
-    SalesOrderStatus[SalesOrderStatus["CANCELED"] = 8] = "CANCELED";
-    SalesOrderStatus[SalesOrderStatus["CLOSED"] = 9] = "CLOSED";
-})(SalesOrderStatus || (SalesOrderStatus = {}));
-const salesOrderStatusColors = Object.values({
-    [SalesOrderStatus.DRAFT]: PrimaryColors.$primaryBlueColor,
-    [SalesOrderStatus.PENDING_APPROVAL]: PrimaryColors.$primaryYellowColor,
-    [SalesOrderStatus.APPROVED]: PrimaryColors.$primaryTealColor,
-    [SalesOrderStatus.TO_DELIVER_AND_TO_BILL]: PrimaryColors.$primaryPurpleColor,
-    [SalesOrderStatus.TO_BILL]: PrimaryColors.$primaryPinkColor,
-    [SalesOrderStatus.PARTIALLY_DELIVERED_AND_PARTIALLY_BILLED]: PrimaryColors.$primaryOrangeColor,
-    [SalesOrderStatus.PARTIALLY_DELIVERED_AND_TO_BILL]: PrimaryColors.$primaryNavyBlueColor,
-    [SalesOrderStatus.COMPLETED]: PrimaryColors.$primaryLimeGreenColor,
-    [SalesOrderStatus.CANCELED]: PrimaryColors.$primaryGrayColor,
-    [SalesOrderStatus.CLOSED]: PrimaryColors.$primaryCarbonColor,
-});
-
-var BillStatus;
-(function (BillStatus) {
-    BillStatus[BillStatus["DRAFT"] = 0] = "DRAFT";
-    BillStatus[BillStatus["RECEIVED"] = 1] = "RECEIVED";
-    BillStatus[BillStatus["PAID"] = 2] = "PAID";
-    BillStatus[BillStatus["CANCELLED"] = 3] = "CANCELLED";
-    BillStatus[BillStatus["RETURN"] = 4] = "RETURN";
-    BillStatus[BillStatus["DEBIT_NOTE_ISSUED"] = 5] = "DEBIT_NOTE_ISSUED";
-    BillStatus[BillStatus["PARTLY_PAID"] = 6] = "PARTLY_PAID";
-    BillStatus[BillStatus["UNPAID"] = 7] = "UNPAID";
-    BillStatus[BillStatus["OVERDUE"] = 8] = "OVERDUE";
-})(BillStatus || (BillStatus = {}));
-const billStatusColors = Object.values({
-    [BillStatus.DRAFT]: PrimaryColors.$primaryBlueColor,
-    [BillStatus.RECEIVED]: PrimaryColors.$primaryTealColor,
-    [BillStatus.PAID]: PrimaryColors.$primaryPurpleColor,
-    [BillStatus.CANCELLED]: PrimaryColors.$primaryGrayColor,
-    [BillStatus.RETURN]: PrimaryColors.$primaryPinkColor,
-    [BillStatus.DEBIT_NOTE_ISSUED]: PrimaryColors.$primaryNavyBlueColor,
-    [BillStatus.PARTLY_PAID]: PrimaryColors.$primaryYellowColor,
-    [BillStatus.UNPAID]: PrimaryColors.$primaryRedColor,
-    [BillStatus.OVERDUE]: PrimaryColors.$primaryOrangeColor,
-});
-
-var ChargeLevel;
-(function (ChargeLevel) {
-    ChargeLevel[ChargeLevel["MAIN"] = 0] = "MAIN";
-    ChargeLevel[ChargeLevel["LINE"] = 1] = "LINE";
-})(ChargeLevel || (ChargeLevel = {}));
-
-var CustomOrderRequestStatus;
-(function (CustomOrderRequestStatus) {
-    CustomOrderRequestStatus[CustomOrderRequestStatus["DRAFT"] = 0] = "DRAFT";
-    CustomOrderRequestStatus[CustomOrderRequestStatus["SENT"] = 1] = "SENT";
-    CustomOrderRequestStatus[CustomOrderRequestStatus["RESPONDED"] = 2] = "RESPONDED";
-    CustomOrderRequestStatus[CustomOrderRequestStatus["REJECTED"] = 3] = "REJECTED";
-    CustomOrderRequestStatus[CustomOrderRequestStatus["CANCELED"] = 4] = "CANCELED";
-    CustomOrderRequestStatus[CustomOrderRequestStatus["DECLINED"] = 5] = "DECLINED";
-    CustomOrderRequestStatus[CustomOrderRequestStatus["ACCEPTED"] = 6] = "ACCEPTED";
-    CustomOrderRequestStatus[CustomOrderRequestStatus["ORDER_CONFIRMED"] = 7] = "ORDER_CONFIRMED";
-    CustomOrderRequestStatus[CustomOrderRequestStatus["DELIVERED"] = 8] = "DELIVERED";
-    CustomOrderRequestStatus[CustomOrderRequestStatus["ON_HOLD"] = 9] = "ON_HOLD";
-    CustomOrderRequestStatus[CustomOrderRequestStatus["IN_PRODUCTION"] = 10] = "IN_PRODUCTION";
-})(CustomOrderRequestStatus || (CustomOrderRequestStatus = {}));
-const customOrderRequestStatusColors = Object.values({
-    [CustomOrderRequestStatus.DRAFT]: PrimaryColors.$primaryBlueColor,
-    [CustomOrderRequestStatus.SENT]: PrimaryColors.$primaryNavyBlueColor,
-    [CustomOrderRequestStatus.RESPONDED]: PrimaryColors.$primaryPurpleColor,
-    [CustomOrderRequestStatus.REJECTED]: PrimaryColors.$primaryRedColor,
-    [CustomOrderRequestStatus.CANCELED]: PrimaryColors.$primaryGrayColor,
-    [CustomOrderRequestStatus.DECLINED]: PrimaryColors.$primaryPinkColor,
-    [CustomOrderRequestStatus.ACCEPTED]: PrimaryColors.$primaryPurpleColor,
-    [CustomOrderRequestStatus.ORDER_CONFIRMED]: PrimaryColors.$primaryDarkPurpleColor,
-    [CustomOrderRequestStatus.IN_PRODUCTION]: PrimaryColors.$primaryLimeGreenColor,
-    [CustomOrderRequestStatus.DELIVERED]: PrimaryColors.$primaryTealColor,
-    [CustomOrderRequestStatus.ON_HOLD]: PrimaryColors.$primaryOrangeColor,
-});
-
-var InvitationStatus;
-(function (InvitationStatus) {
-    InvitationStatus[InvitationStatus["PENDING"] = 0] = "PENDING";
-    InvitationStatus[InvitationStatus["ACCEPTED"] = 1] = "ACCEPTED";
-    InvitationStatus[InvitationStatus["EXPIRED"] = 2] = "EXPIRED";
-    InvitationStatus[InvitationStatus["CANCELED"] = 3] = "CANCELED";
-})(InvitationStatus || (InvitationStatus = {}));
-const invitationStatusColors = Object.values({
-    [InvitationStatus.PENDING]: PrimaryColors.$primaryYellowColor,
-    [InvitationStatus.ACCEPTED]: PrimaryColors.$primaryTealColor,
-    [InvitationStatus.EXPIRED]: PrimaryColors.$primaryGrayColor,
-    [InvitationStatus.CANCELED]: PrimaryColors.$primaryPinkColor,
-});
-
-var InvoiceStatus;
-(function (InvoiceStatus) {
-    InvoiceStatus[InvoiceStatus["DRAFT"] = 0] = "DRAFT";
-    InvoiceStatus[InvoiceStatus["SUBMITTED"] = 1] = "SUBMITTED";
-    InvoiceStatus[InvoiceStatus["PAID"] = 2] = "PAID";
-    InvoiceStatus[InvoiceStatus["UNPAID"] = 3] = "UNPAID";
-    InvoiceStatus[InvoiceStatus["PARTLY_PAID"] = 4] = "PARTLY_PAID";
-    InvoiceStatus[InvoiceStatus["CANCELLED"] = 5] = "CANCELLED";
-    InvoiceStatus[InvoiceStatus["OVERDUE"] = 6] = "OVERDUE";
-    InvoiceStatus[InvoiceStatus["CREDIT_NOTE_ISSUED"] = 7] = "CREDIT_NOTE_ISSUED";
-    InvoiceStatus[InvoiceStatus["RETURN"] = 8] = "RETURN";
-    InvoiceStatus[InvoiceStatus["UNPAID_AND_DISCOUNTED"] = 9] = "UNPAID_AND_DISCOUNTED";
-    InvoiceStatus[InvoiceStatus["OVERDUE_AND_DISCOUNTED"] = 10] = "OVERDUE_AND_DISCOUNTED";
-})(InvoiceStatus || (InvoiceStatus = {}));
-
-var LockerTransferStatus;
-(function (LockerTransferStatus) {
-    LockerTransferStatus[LockerTransferStatus["DRAFT"] = 0] = "DRAFT";
-    LockerTransferStatus[LockerTransferStatus["POSTED"] = 1] = "POSTED";
-})(LockerTransferStatus || (LockerTransferStatus = {}));
-const lockerTransferStatusColors = Object.values({
-    [LockerTransferStatus.DRAFT]: PrimaryColors.$primaryBlueColor,
-    [LockerTransferStatus.POSTED]: PrimaryColors.$primaryTealColor,
-});
-
-var Priority;
-(function (Priority) {
-    Priority[Priority["LOW"] = 0] = "LOW";
-    Priority[Priority["NORMAL"] = 1] = "NORMAL";
-    Priority[Priority["HIGH"] = 2] = "HIGH";
-})(Priority || (Priority = {}));
-const priorityColors = Object.values({
-    [Priority.LOW]: PrimaryColors.$primaryTealColor,
-    [Priority.NORMAL]: PrimaryColors.$primaryOrangeColor,
-    [Priority.HIGH]: PrimaryColors.$primaryRedColor,
-});
-
-var QuotationStatus;
-(function (QuotationStatus) {
-    QuotationStatus[QuotationStatus["CREATED"] = 0] = "CREATED";
-    QuotationStatus[QuotationStatus["SENT"] = 1] = "SENT";
-    QuotationStatus[QuotationStatus["REJECTED"] = 2] = "REJECTED";
-    QuotationStatus[QuotationStatus["CANCELED"] = 3] = "CANCELED";
-    QuotationStatus[QuotationStatus["ACCEPTED"] = 4] = "ACCEPTED";
-    QuotationStatus[QuotationStatus["EXPIRED"] = 5] = "EXPIRED";
-})(QuotationStatus || (QuotationStatus = {}));
-const quotationStatusColors = Object.values({
-    [QuotationStatus.CREATED]: PrimaryColors.$primaryLimeGreenColor,
-    [QuotationStatus.SENT]: PrimaryColors.$primaryNavyBlueColor,
-    [QuotationStatus.REJECTED]: PrimaryColors.$primaryOrangeRedColor,
-    [QuotationStatus.CANCELED]: PrimaryColors.$primaryOrangeColor,
-    [QuotationStatus.ACCEPTED]: PrimaryColors.$primaryTealColor,
-    [QuotationStatus.EXPIRED]: PrimaryColors.$primaryGrayColor,
-});
-
-var RequestStatus;
-(function (RequestStatus) {
-    RequestStatus[RequestStatus["PENDING"] = 0] = "PENDING";
-    RequestStatus[RequestStatus["REJECTED"] = 1] = "REJECTED";
-    RequestStatus[RequestStatus["APPROVED"] = 2] = "APPROVED";
-    RequestStatus[RequestStatus["CANCELED"] = 3] = "CANCELED";
-})(RequestStatus || (RequestStatus = {}));
-const requestStatusColors = Object.values({
-    [RequestStatus.PENDING]: PrimaryColors.$primaryYellowColor,
-    [RequestStatus.REJECTED]: PrimaryColors.$primaryRedColor,
-    [RequestStatus.APPROVED]: PrimaryColors.$primaryTealColor,
-    [RequestStatus.CANCELED]: PrimaryColors.$primaryGrayColor,
-});
-
-// Enum Class Mapping
-const enumClassMap = {
-    BOMProductionType: BOMProductionType,
-    InvoiceStatus: InvoiceStatus,
-    CustomOrderRequestStatus: CustomOrderRequestStatus,
-    Priority: Priority,
-    QuotationStatus: QuotationStatus,
-    LockerTransferStatus: LockerTransferStatus,
-    BillStatus: BillStatus,
-    SalesOrderStatus: SalesOrderStatus,
-    RequestStatus: RequestStatus,
-    InvitationStatus: InvitationStatus,
-    ChargeLevel: ChargeLevel,
-};
-
-const enumCustomColors = [
-    { enumClass: 'CustomOrderRequestStatus', colors: customOrderRequestStatusColors },
-    { enumClass: 'Priority', colors: priorityColors },
-    { enumClass: 'QuotationStatus', colors: quotationStatusColors },
-    { enumClass: 'LockerTransferStatus', colors: lockerTransferStatusColors },
-    { enumClass: 'BillStatus', colors: billStatusColors },
-    { enumClass: 'SalesOrderStatus', colors: salesOrderStatusColors },
-    { enumClass: 'RequestStatus', colors: requestStatusColors },
-    { enumClass: 'InvitationStatus', colors: invitationStatusColors },
-    { enumClass: 'BOMProductionType', colors: bomProductionTypeColors },
-];
-
-class EnumCustomColorMapping {
-    enumClass;
-    colors;
-    constructor(enumClass, colors) {
-        this.enumClass = enumClass;
-        if (this.validateColors(enumClass, colors)) {
-            this.colors = colors;
+class AgGridSelectMixin {
+    params;
+    key;
+    value;
+    rowId;
+    isEdit;
+    index;
+    arrayKey = 'entries';
+    rowLevelFG;
+    width;
+    selectedItemId;
+    agInit(params) {
+        this.initializeRenderer(params);
+    }
+    initializeRenderer(params) {
+        this.params = params;
+        this.width = params.width;
+        this.key = params.context.createKey(params.columnApi, params.column);
+        this.value = params.value;
+        this.rowId = params.node.id;
+        this.index = params.node.rowIndex;
+        if (params.context.arrayKey) {
+            this.arrayKey = params.context.arrayKey;
         }
-        else {
-            throw new Error(`The length of your custom colors list does not match the enum class provided.`);
+        this.setRowLevelFG();
+    }
+    setRowLevelFG() {
+        this.index = this.params.node.rowIndex;
+        let tableFG = this.params.context.formGroup;
+        let fa = tableFG.get(this.arrayKey);
+        let rowLevelFG = fa.at(this.index);
+        this.rowLevelFG = rowLevelFG;
+    }
+    getFormControl() {
+        let fc = this.rowLevelFG.get(this.key);
+        return fc;
+    }
+    updateValue(params, value) {
+        this.setRowLevelFG();
+        this.getFormControl().setValue(value);
+        let rowNode = params.node;
+        rowNode.setDataValue(this.key, value);
+    }
+    // $event here is an object.
+    onSelection($event) {
+        this.selectedItemId = $event?.id;
+        this.updateValue(this.params, $event?.id);
+        if (this.params.onSelection instanceof Function) {
+            const params = {
+                object: $event,
+                rowData: this.params.node.data,
+                value: $event.id,
+                rowNode: this.params.node,
+            };
+            this.params.onSelection(params);
+        }
+    }
+    onEnumSelected($event) {
+        this.updateValue(this.params, $event);
+        if (this.params.onSelection instanceof Function) {
+            const params = {
+                rowData: this.params.node.data,
+                value: $event,
+                rowNode: this.params.node,
+            };
+            this.params.onSelection(params);
         }
     }
-    validateColors(enumClass, colors) {
-        // Get the total number of enum values by counting keys
-        const enumValues = Object.keys(enumClass).filter(key => isNaN(Number(key))).length;
-        return colors.length === enumValues;
+    refresh(param) {
+        return false;
     }
 }
-// Function to create EnumCustomColorMapping instances from JSON array
-function createEnumCustomColorMappings(mappings) {
-    return mappings.map(json => {
-        const enumClass = enumClassMap[json.enumClass];
-        if (!enumClass) {
-            throw new Error(`Enum class "${json.enumClass}" not found.`);
-        }
-        return new EnumCustomColorMapping(enumClass, json.colors);
-    });
-}
-const enumCustomColorMappings = createEnumCustomColorMappings(enumCustomColors);
 
 class CustomTheme {
     static $joolerBlue = [
@@ -377,53 +197,6 @@ class CustomTheme {
     ];
 }
 
-var enumCustomLabelMappingsJSON = [
-	{
-		enumClass: "BOMProductionType",
-		labels: [
-			"Manufactured In-House",
-			"Partially Manufactured In-House"
-		]
-	},
-	{
-		enumClass: "ChargeLevel",
-		labels: [
-			"Header",
-			"Line"
-		]
-	}
-];
-
-class EnumCustomLabelMapping {
-    enumClass;
-    labels;
-    constructor(enumClass, labels) {
-        this.enumClass = enumClass;
-        if (this.validateLabels(enumClass, labels)) {
-            this.labels = labels;
-        }
-        else {
-            throw new Error('The length of your custom labels list does not match the enum class provided.');
-        }
-    }
-    validateLabels(enumClass, labels) {
-        // Get the total number of enum values by counting keys
-        const enumValues = Object.keys(enumClass).filter(key => isNaN(Number(key))).length;
-        return labels.length === enumValues;
-    }
-}
-// Function to create EnumCustomLabelMapping instances from JSON array
-function createEnumCustomLabelMappingsFromJSON(jsonArray) {
-    return jsonArray.map(json => {
-        const enumClass = enumClassMap[json.enumClass];
-        if (!enumClass) {
-            throw new Error(`Enum class "${json.enumClass}" not found.`);
-        }
-        return new EnumCustomLabelMapping(enumClass, json.labels);
-    });
-}
-const enumCustomLabelMappings = createEnumCustomLabelMappingsFromJSON(enumCustomLabelMappingsJSON);
-
 class EnumOption {
     value;
     label;
@@ -463,10 +236,6 @@ class EnumHelperBaseClass {
     }
     static getColorsForEnumClass(enumClass, stringValues, customColors) {
         let colors = CustomTheme.$joolerCombo;
-        let enumSpecificColors = enumCustomColorMappings.find(item => Object.keys(item.enumClass).toString() == Object.keys(enumClass).toString());
-        if (enumSpecificColors) {
-            colors = enumSpecificColors.colors;
-        }
         if (customColors && customColors.length > 0) {
             colors = customColors;
         }
@@ -480,29 +249,23 @@ class EnumHelperBaseClass {
     }
     static getStringValuesForEnumClass(enumClass, isAllCaps) {
         let stringValues = [];
-        let enumCustomLabels = enumCustomLabelMappings.find(item => Object.keys(item.enumClass).toString() == Object.keys(enumClass).toString());
-        if (enumCustomLabels) {
-            stringValues = enumCustomLabels.labels;
-        }
-        else {
-            for (let item in enumClass) {
-                if (isNaN(Number(item))) {
-                    let joinedString;
-                    stringValues.push(item);
-                    let splitStr = item.toLowerCase().split('_');
-                    if (!isAllCaps) {
-                        for (let i = 0; i < splitStr.length; i++) {
-                            splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
-                        }
+        for (let item in enumClass) {
+            if (isNaN(Number(item))) {
+                let joinedString;
+                stringValues.push(item);
+                let splitStr = item.toLowerCase().split('_');
+                if (!isAllCaps) {
+                    for (let i = 0; i < splitStr.length; i++) {
+                        splitStr[i] = splitStr[i].charAt(0).toUpperCase() + splitStr[i].substring(1);
                     }
-                    else {
-                        for (let i = 0; i < splitStr.length; i++) {
-                            splitStr[i] = splitStr[i].toUpperCase();
-                        }
+                }
+                else {
+                    for (let i = 0; i < splitStr.length; i++) {
+                        splitStr[i] = splitStr[i].toUpperCase();
                     }
-                    joinedString = splitStr.join(' ');
-                    stringValues.splice(stringValues.indexOf(item), 1, joinedString);
                 }
+                joinedString = splitStr.join(' ');
+                stringValues.splice(stringValues.indexOf(item), 1, joinedString);
             }
         }
         return stringValues;
@@ -716,100 +479,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }] } });
 
-class ShowTableErrorsComponent {
-    message;
-    showDetails;
-    ngOnInit() {
-    }
-    onMouseEnter() {
-        this.showDetails = true;
-    }
-    onMouseLeave() {
-        this.showDetails = false;
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShowTableErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShowTableErrorsComponent, selector: "show-table-errors", inputs: { message: "message" }, ngImport: i0, template: "<div (mouseenter)=\"onMouseEnter()\"(mouseleave)=\"onMouseLeave()\" class=\"icon\">\r\n    <fa-icon  class=\"icon\" icon=\"info-circle\" ></fa-icon>\r\n    <span *ngIf=\"message\" class=\"message\"\r\n    [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">{{message}}</span>\r\n</div>", styles: [".icon{color:#a80002;cursor:pointer;display:inline-block}.no-details{display:none}.details{display:block;z-index:100;background-color:#ffdbdb;color:#a80002;border-radius:.5rem;border:.1rem solid #A80002;border-left:.5rem solid #A80002;position:fixed;padding:1rem;bottom:45%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShowTableErrorsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'show-table-errors', template: "<div (mouseenter)=\"onMouseEnter()\"(mouseleave)=\"onMouseLeave()\" class=\"icon\">\r\n    <fa-icon  class=\"icon\" icon=\"info-circle\" ></fa-icon>\r\n    <span *ngIf=\"message\" class=\"message\"\r\n    [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">{{message}}</span>\r\n</div>", styles: [".icon{color:#a80002;cursor:pointer;display:inline-block}.no-details{display:none}.details{display:block;z-index:100;background-color:#ffdbdb;color:#a80002;border-radius:.5rem;border:.1rem solid #A80002;border-left:.5rem solid #A80002;position:fixed;padding:1rem;bottom:45%}\n"] }]
-        }], propDecorators: { message: [{
-                type: Input
-            }] } });
-
-class AgGridSelectMixin {
-    params;
-    key;
-    value;
-    rowId;
-    isEdit;
-    index;
-    arrayKey = 'entries';
-    rowLevelFG;
-    width;
-    selectedItemId;
-    agInit(params) {
-        this.initializeRenderer(params);
-    }
-    initializeRenderer(params) {
-        this.params = params;
-        this.width = params.width;
-        this.key = params.context.createKey(params.columnApi, params.column);
-        this.value = params.value;
-        this.rowId = params.node.id;
-        this.index = params.node.rowIndex;
-        if (params.context.arrayKey) {
-            this.arrayKey = params.context.arrayKey;
-        }
-        this.setRowLevelFG();
-    }
-    setRowLevelFG() {
-        this.index = this.params.node.rowIndex;
-        let tableFG = this.params.context.formGroup;
-        let fa = tableFG.get(this.arrayKey);
-        let rowLevelFG = fa.at(this.index);
-        this.rowLevelFG = rowLevelFG;
-    }
-    getFormControl() {
-        let fc = this.rowLevelFG.get(this.key);
-        return fc;
-    }
-    updateValue(params, value) {
-        this.setRowLevelFG();
-        this.getFormControl().setValue(value);
-        let rowNode = params.node;
-        rowNode.setDataValue(this.key, value);
-    }
-    // $event here is an object.
-    onSelection($event) {
-        this.selectedItemId = $event?.id;
-        this.updateValue(this.params, $event?.id);
-        if (this.params.onSelection instanceof Function) {
-            const params = {
-                object: $event,
-                rowData: this.params.node.data,
-                value: $event.id,
-                rowNode: this.params.node,
-            };
-            this.params.onSelection(params);
-        }
-    }
-    onEnumSelected($event) {
-        this.updateValue(this.params, $event);
-        if (this.params.onSelection instanceof Function) {
-            const params = {
-                rowData: this.params.node.data,
-                value: $event,
-                rowNode: this.params.node,
-            };
-            this.params.onSelection(params);
-        }
-    }
-    refresh(param) {
-        return false;
-    }
-}
-
 class ChooseEnumRendererComponent extends AgGridSelectMixin {
     valuesToDisable = [];
     valuesToHide = [];
@@ -849,12 +518,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ selector: 'choose-enum-renderer', template: "<div class=\"all\" [ngClass]=\"{ single: !showError, double: showError }\" *ngIf=\"rowLevelFG\" [formGroup]=\"rowLevelFG\">\r\n    <choose-enum [clearable]=\"clearable\" [formControlName]=\"key\" [appendTo]=\"'body'\" [label]=\"params.label\"\r\n        [labelTextAlign]=\"params.labelTextAlign\" [labelTextFontWeight]=\"params.labelTextFontWeight\"\r\n        [labelTextFontSize]=\"params.labelTextFontSize\" [selectedItem]=\"params.value\" [valuesToHide]=\"valuesToHide\"\r\n        [valuesToDisable]=\"valuesToDisable\" [isDropdownDisabled]=\"params.isDropdownDisabled\"\r\n        [enumChoices]=\"params.enumChoices\" [placeholder]=\"params.placeholder\" [width]=\"params.width\" [isChip]=\"isChip\"\r\n        [paddingTop]=\"params.paddingTop\" [customColors]=\"params.customColors\" (change)=\"onEnumSelected($event)\">\r\n    </choose-enum>\r\n</div>", styles: [".all{display:grid;gap:.5rem;align-items:center;margin:auto}.single{grid-template-columns:auto}.double{grid-template-columns:auto max-content}\n"] }]
         }], ctorParameters: function () { return []; } });
 
-var ChooseObjectTemplateType;
-(function (ChooseObjectTemplateType) {
-    ChooseObjectTemplateType[ChooseObjectTemplateType["DEFAULT"] = 0] = "DEFAULT";
-    ChooseObjectTemplateType[ChooseObjectTemplateType["BASIC"] = 1] = "BASIC";
-    ChooseObjectTemplateType[ChooseObjectTemplateType["CONTENT_PROJECTION"] = 2] = "CONTENT_PROJECTION";
-})(ChooseObjectTemplateType || (ChooseObjectTemplateType = {}));
+var ChooseItemRendererValidationType;
+(function (ChooseItemRendererValidationType) {
+    ChooseItemRendererValidationType[ChooseItemRendererValidationType["NONE"] = 0] = "NONE";
+    ChooseItemRendererValidationType[ChooseItemRendererValidationType["ROW_LEVEL_UNIQUE"] = 1] = "ROW_LEVEL_UNIQUE";
+})(ChooseItemRendererValidationType || (ChooseItemRendererValidationType = {}));
 
 var ChooseItemFullObjectControlConfig;
 (function (ChooseItemFullObjectControlConfig) {
@@ -862,6 +530,33 @@ var ChooseItemFullObjectControlConfig;
     ChooseItemFullObjectControlConfig[ChooseItemFullObjectControlConfig["ID"] = 2] = "ID";
 })(ChooseItemFullObjectControlConfig || (ChooseItemFullObjectControlConfig = {}));
 
+class PrimaryColors {
+    static $primaryBlueColor = '#155ED4';
+    static $primaryPinkColor = '#F0509C';
+    static $primaryTealColor = '#12957E';
+    static $primaryCarbonColor = '#32353B';
+    static $primaryGrayColor = '#676767';
+    static $primaryPurpleColor = '#E3B1EB';
+    static $primaryRedColor = '#A80002';
+    static $primaryLightRedColor = '#FFDBDB';
+    static $primaryLightGrayBlueColor = '#f7f8f9';
+    static $primaryLightGrayColor = '#f0f0f0';
+    static $primaryLightBlueColor = '#b9cff2';
+    static $primaryYellowColor = '#F2CD5C';
+    static $primaryOrangeColor = '#F2921D';
+    static $primaryLimeGreenColor = '#AFFF00';
+    static $primaryNavyBlueColor = '#000080';
+    static $primaryOrangeRedColor = '#FF4500';
+    static $primaryDarkPurpleColor = '#7600BC';
+}
+
+var ChooseObjectTemplateType;
+(function (ChooseObjectTemplateType) {
+    ChooseObjectTemplateType[ChooseObjectTemplateType["DEFAULT"] = 0] = "DEFAULT";
+    ChooseObjectTemplateType[ChooseObjectTemplateType["BASIC"] = 1] = "BASIC";
+    ChooseObjectTemplateType[ChooseObjectTemplateType["CONTENT_PROJECTION"] = 2] = "CONTENT_PROJECTION";
+})(ChooseObjectTemplateType || (ChooseObjectTemplateType = {}));
+
 class DictionaryToHttpParamsConverter {
     static dictionaryToHttpParamsConverter(form_dictionary) {
         let queryParams = new HttpParams();
@@ -1058,6 +753,8 @@ class ChooseGeneralItemComponent {
     customOptionTemplate;
     ChooseObjectTemplateType = ChooseObjectTemplateType;
     chipInputTypes = ChipInputType;
+    fetchTrigger$ = new Subject();
+    fetchSub;
     constructor(_ChooseGeneralItemService, dialog, _cdr) {
         this._ChooseGeneralItemService = _ChooseGeneralItemService;
         this.dialog = dialog;
@@ -1067,27 +764,79 @@ class ChooseGeneralItemComponent {
         if (this.templateType == ChooseObjectTemplateType.BASIC) {
             this.setupBasicTemplate();
         }
-    }
+        this.fetchTrigger$
+            .pipe(tap(() => (this.isLoading = true)), switchMap(({ apiPath, filterParams }) => this._ChooseGeneralItemService.getData(apiPath, filterParams)))
+            .subscribe(data => {
+            this.items = data;
+            this.isLoading = false;
+            console.log("response: items from '", this.apiPath, "' found: ", this.items);
+        });
+    }
+    triggerFetch() {
+        this.isLoading = true;
+        this.fetchTrigger$.next({
+            apiPath: this.apiPath,
+            filterParams: this.filterParams,
+        });
+    }
     setupBasicTemplate() { }
     ngOnChanges(changes) {
-        if (changes['items'] && !changes.items) {
-            this.items = undefined;
-        }
-        if (changes['apiPath'] && !changes.apiPath) {
-            this.apiPath = undefined;
-        }
+        // console.log('changes: ', changes);
         this.validateInputs(changes);
         if (this.showAdd) {
             this.validateAddConfiguration();
         }
-        if (!changes['items'] || !changes['items'].currentValue) {
-            this.isLoading = true;
-            this.getData();
+        // 1️⃣ Manually assign input updates immediately
+        if (changes['filterParams']) {
+            this.filterParams = changes['filterParams'].currentValue;
+        }
+        // CASE A — apiPath changed and items not provided
+        if (changes['apiPath'] && !changes['items']) {
+            const newApiPath = changes['apiPath'].currentValue;
+            // If apiPath becomes undefined → tear down subscription
+            if (!newApiPath) {
+                this.cleanupFetchSubscription();
+                return; // Do NOT subscribe and do NOT fetch
+            }
+            // apiPath is now defined → create subscription if missing
+            if (!this.fetchSub) {
+                this.setupFetchSubscription();
+            }
+            // And trigger the fetch if items not provided
+            if (!this.items && this.fetchSub) {
+                // console.log('FETTCCHNNG 3');
+                this.triggerFetch();
+            }
+        }
+        // CASE B — Parent passed items → use them and never fetch
+        if (changes['items']) {
+            if (changes['items'].currentValue && changes['items'].currentValue.length > 0) {
+                this.isLoading = false;
+                this.items = changes['items'].currentValue;
+                return;
+            }
+        }
+        // FROM HERE → items is not provided → backend fetch required
+        // CASE C — initial load (items missing)
+        if (changes['items'] && !changes['items'].currentValue && this.fetchSub) {
+            // console.log('FETTCCHNNG 1');
+            this.triggerFetch();
         }
-        else {
-            this.isLoading = false;
+        // CASE D — filterParams changed and items not provided
+        if (changes['filterParams'] && this.fetchSub) {
+            // console.log('FETTCCHNNG 2');
+            this.triggerFetch();
         }
     }
+    setupFetchSubscription() {
+        this.fetchSub = this.fetchTrigger$
+            .pipe(filter(trigger => trigger !== null), tap(() => (this.isLoading = true)), switchMap(({ apiPath, filterParams }) => this._ChooseGeneralItemService.getData(apiPath, filterParams)))
+            .subscribe(data => {
+            this.items = data;
+            this.isLoading = false;
+            // console.log('fetched items from ', this.apiPath, data);
+        });
+    }
     validateAddConfiguration() {
         if ((this.addRoute == '' || this.addRoute == null || this.addRoute == undefined) &&
             (this.dialogComponentClass == null || this.dialogComponentClass == undefined)) {
@@ -1204,6 +953,12 @@ class ChooseGeneralItemComponent {
     registerOnValidatorChange(fn) {
         this.onValidationChange = fn;
     }
+    cleanupFetchSubscription() {
+        if (this.fetchSub) {
+            this.fetchSub.unsubscribe();
+            this.fetchSub = undefined;
+        }
+    }
     validate(control) {
         return null;
         if (control) {
@@ -1322,156 +1077,748 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['customOption']
             }] } });
 
-class ChooseGeneralItemRendererComponent {
-    params;
-    formControlValue;
-    key;
-    itemId;
-    rowId;
-    constructor() { }
-    agInit(params) {
-        this.params = params;
-        this.itemId = params.data.id;
-        this.key = params.context.createKey(params.columnApi, params.column);
-        this.rowId = params.node.id;
+class ShowTableErrorsComponent {
+    message;
+    showDetails;
+    ngOnInit() {
     }
-    onCellDataChanged($event) {
-        let value = $event;
-        this.formControlValue = this.params.context.formGroup.get("entries").at(this.rowId);
-        this.formControlValue.get(this.key).setValue(value);
-        const params = {
-            value: value,
-            rowNode: this.params.node,
-        };
-        this.params.onCellValueChanged(params);
+    onMouseEnter() {
+        this.showDetails = true;
     }
-    refresh(params) {
-        return true;
+    onMouseLeave() {
+        this.showDetails = false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseGeneralItemRendererComponent, selector: "choose-general-item-renderer", ngImport: i0, template: "<choose-general-item [label]=\"params.label\" [appendTo]=\"'body'\" [placeholder]=\"params.placeholder\"\r\n    [apiPath]=\"params.apiPath\" [isMultiple]=\"params.isMultiple\" [objects]=\"params.objects\"\r\n    [showLabel]=\"params.showLabel\" [separator]=\"params.separator\" [width]=\"params.width\" [isChip]=\"params.isChip\"\r\n    [isTypeDate]=\"params.isTypeDate\" [chipColor]=\"params.chipColor\" [chipTextColor]=\"params.chipTextColor\"\r\n    [chipWidth]=\"params.chipWidth\" [selectedItemId]=\"itemId\" [disabled]=\"params.disabled\"\r\n    (change)=\"onCellDataChanged($event)\">\r\n</choose-general-item>", styles: [".all{display:grid;gap:.5rem;align-items:center;margin:auto}.single{grid-template-columns:auto}.double{grid-template-columns:auto max-content}\n"], dependencies: [{ kind: "component", type: ChooseGeneralItemComponent, selector: "choose-general-item", inputs: ["items", "label", "appendTo", "placeholder", "apiPath", "isMultiple", "hideSelectedItem", "objects", "showLabel", "separator", "width", "isChip", "isTypeDate", "chipColor", "chipTextColor", "chipWidth", "selectedItemId", "disabled", "readOnly", "useFullObject", "showAdd", "dialogComponentClass", "showDialogDefaultButtons", "dialogComponentInputs", "bindValueKey", "addRoute", "canActionsRoute", "dialogTitle", "clearable", "filterParams", "templateType", "basicTemplateData", "contentProjectionLabelKey", "fullObjectControlConfig"], outputs: ["change", "blur"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShowTableErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ShowTableErrorsComponent, selector: "show-table-errors", inputs: { message: "message" }, ngImport: i0, template: "<div (mouseenter)=\"onMouseEnter()\"(mouseleave)=\"onMouseLeave()\" class=\"icon\">\r\n    <fa-icon  class=\"icon\" icon=\"info-circle\" ></fa-icon>\r\n    <span *ngIf=\"message\" class=\"message\"\r\n    [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">{{message}}</span>\r\n</div>", styles: [".icon{color:#a80002;cursor:pointer;display:inline-block}.no-details{display:none}.details{display:block;z-index:100;background-color:#ffdbdb;color:#a80002;border-radius:.5rem;border:.1rem solid #A80002;border-left:.5rem solid #A80002;position:fixed;padding:1rem;bottom:45%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemRendererComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ShowTableErrorsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'choose-general-item-renderer', template: "<choose-general-item [label]=\"params.label\" [appendTo]=\"'body'\" [placeholder]=\"params.placeholder\"\r\n    [apiPath]=\"params.apiPath\" [isMultiple]=\"params.isMultiple\" [objects]=\"params.objects\"\r\n    [showLabel]=\"params.showLabel\" [separator]=\"params.separator\" [width]=\"params.width\" [isChip]=\"params.isChip\"\r\n    [isTypeDate]=\"params.isTypeDate\" [chipColor]=\"params.chipColor\" [chipTextColor]=\"params.chipTextColor\"\r\n    [chipWidth]=\"params.chipWidth\" [selectedItemId]=\"itemId\" [disabled]=\"params.disabled\"\r\n    (change)=\"onCellDataChanged($event)\">\r\n</choose-general-item>", styles: [".all{display:grid;gap:.5rem;align-items:center;margin:auto}.single{grid-template-columns:auto}.double{grid-template-columns:auto max-content}\n"] }]
-        }], ctorParameters: function () { return []; } });
+            args: [{ selector: 'show-table-errors', template: "<div (mouseenter)=\"onMouseEnter()\"(mouseleave)=\"onMouseLeave()\" class=\"icon\">\r\n    <fa-icon  class=\"icon\" icon=\"info-circle\" ></fa-icon>\r\n    <span *ngIf=\"message\" class=\"message\"\r\n    [ngClass]=\"{'no-details' : !showDetails , 'details': showDetails}\">{{message}}</span>\r\n</div>", styles: [".icon{color:#a80002;cursor:pointer;display:inline-block}.no-details{display:none}.details{display:block;z-index:100;background-color:#ffdbdb;color:#a80002;border-radius:.5rem;border:.1rem solid #A80002;border-left:.5rem solid #A80002;position:fixed;padding:1rem;bottom:45%}\n"] }]
+        }], propDecorators: { message: [{
+                type: Input
+            }] } });
 
-var LineType;
-(function (LineType) {
-    LineType[LineType["INCLUDE"] = 0] = "INCLUDE";
-    LineType[LineType["DO_NOT_INCLUDE"] = 1] = "DO_NOT_INCLUDE";
-})(LineType || (LineType = {}));
+var ToolTipMessageType;
+(function (ToolTipMessageType) {
+    ToolTipMessageType[ToolTipMessageType["ERROR"] = 0] = "ERROR";
+    ToolTipMessageType[ToolTipMessageType["WARNING"] = 1] = "WARNING";
+    ToolTipMessageType[ToolTipMessageType["HELP"] = 2] = "HELP";
+    ToolTipMessageType[ToolTipMessageType["DEFAULT"] = 3] = "DEFAULT";
+})(ToolTipMessageType || (ToolTipMessageType = {}));
 
-class LineTypeModelHelper {
-    static label;
-    static color;
-    static description;
-    static value;
-    static getItems() {
-        let items = [];
-        let values = Object.values(LineType);
-        let types = values.filter(value => typeof value === 'number');
-        for (let value of types) {
-            this.setStringValueAndColor(value);
-            items.push({ value: value, label: this.label, color: this.color, description: this.description });
+class TooltipMsgError {
+    cdr;
+    _El;
+    width;
+    control = null;
+    messageType = ToolTipMessageType.ERROR;
+    message;
+    iconElId;
+    messageElId;
+    isLeft = true;
+    showDetails;
+    tooltipIcon;
+    tooltipMessage;
+    iconStyle;
+    isDictionary;
+    onScrollY() {
+        this.onMouseLeave();
+    }
+    constructor(cdr, _El) {
+        this.cdr = cdr;
+        this._El = _El;
+    }
+    ngOnInit() {
+        this.iconElId = this.generateRandomString();
+        this.messageElId = this.generateRandomString();
+        this.setIconStyle();
+        this.checkErrorType();
+    }
+    ngOnChanges(changes) {
+        this.checkErrorType();
+    }
+    ngOnDestroy() {
+        if (document.getElementById(this.messageElId)) {
+            document.getElementById(this.messageElId).remove();
         }
-        return items;
     }
-    static setStringValueAndColor(type) {
-        switch (type) {
-            case LineType.INCLUDE:
-                return this.label = "Include", this.color = "gold";
+    checkErrorType() {
+        if (this.message) {
+            if (this.message.constructor == Object) {
+                this.isDictionary = true;
+            }
+            else if (typeof this.message === 'string') {
+                this.isDictionary = false;
+            }
+            else {
+                this.isDictionary = false;
+            }
+        }
+    }
+    getThemedMessageStyle() {
+        let backgroundColor;
+        let fontBorderColor;
+        switch (this.messageType) {
+            case ToolTipMessageType.ERROR:
+                backgroundColor = '#fde5f0';
+                fontBorderColor = PrimaryColors.$primaryPinkColor;
                 break;
-            case LineType.DO_NOT_INCLUDE:
-                return this.label = "Do Not Include", this.color = "platinum";
+            case ToolTipMessageType.WARNING:
+                backgroundColor = '#fdefdd';
+                fontBorderColor = PrimaryColors.$primaryOrangeColor;
+                break;
+            case ToolTipMessageType.HELP:
+                backgroundColor = '#d1f9f2';
+                fontBorderColor = PrimaryColors.$primaryTealColor;
                 break;
             default:
-                return this.label = "Undefined", this.color = "Gray";
+                backgroundColor = PrimaryColors.$primaryLightGrayColor;
+                fontBorderColor = PrimaryColors.$primaryGrayColor;
+                break;
         }
+        let style = {
+            'background-color': backgroundColor,
+            'font-weight': 'bold',
+            color: fontBorderColor,
+            border: '0.2rem solid ' + fontBorderColor,
+            'border-left': '0.5rem solid ' + fontBorderColor,
+        };
+        return style;
     }
-    getValue(label) {
-        let value;
-        switch (label) {
-            case "Include":
-                return value = 0;
+    setMessageStyle() {
+        let style = {};
+        if (this.width) {
+            style['width'] = this.width;
+        }
+    }
+    get messageStyle() {
+        let commonMessageStyle = {};
+        if (this.width) {
+            commonMessageStyle['width'] = this.width;
+        }
+        return {
+            ...commonMessageStyle,
+            ...(this.showDetails ? this.getThemedMessageStyle() : {}),
+        };
+    }
+    setIconStyle() {
+        let backgroundColor;
+        switch (this.messageType) {
+            case ToolTipMessageType.ERROR:
+                backgroundColor = PrimaryColors.$primaryPinkColor;
                 break;
-            case "Do Not Include":
-                return value = 1;
+            case ToolTipMessageType.WARNING:
+                backgroundColor = PrimaryColors.$primaryOrangeColor;
+                break;
+            case ToolTipMessageType.HELP:
+                backgroundColor = PrimaryColors.$primaryTealColor;
                 break;
             default:
-                return null;
+                backgroundColor = PrimaryColors.$primaryGrayColor;
+                break;
         }
+        let style = {
+            color: backgroundColor,
+        };
+        this.iconStyle = style;
     }
-    static getLabelAndColorForValue(value) {
-        for (let item of this.getItems()) {
-            if (item.value == value) {
-                this.value = item;
-                return this.value;
+    onMouseEnter() {
+        this.showDetails = true;
+        //  CDR is needed to let the DOM know the box error has a width
+        this.cdr.detectChanges();
+        this.tooltipMessage = document.getElementById(this.messageElId);
+        if (this.message) {
+            this.getDirection(this.tooltipMessage);
+            document.body.appendChild(this.tooltipMessage);
+            let messageElement = document.getElementById(this.messageElId);
+            let icon = document.getElementById(this.iconElId);
+            let rect = icon.getBoundingClientRect();
+            let top = rect.top;
+            let left = rect.left;
+            let right = rect.right;
+            let appendedLeft;
+            let appendedRight;
+            let appendedTop = top - messageElement.offsetHeight;
+            this.tooltipMessage.style.top = appendedTop + 'px';
+            this.tooltipMessage.style.zIndex = '1000';
+            if (this.isLeft) {
+                appendedLeft = left + icon.offsetWidth - 5;
+                this.tooltipMessage.style.left = appendedLeft + 'px';
+            }
+            else {
+                appendedRight = window.innerWidth - right + 5;
+                this.tooltipMessage.style.right = appendedRight + 'px';
             }
         }
     }
+    onMouseLeave() {
+        this.showDetails = false;
+    }
+    getDirection(element) {
+        //  Calculating the width difference between  screen width minus the poistion of the icon from left to right (getBoundingClientRect().right)
+        let difference = window.innerWidth - element.getBoundingClientRect().right;
+        // hard coded + 12 is for the padding that has been added to router-outlet
+        // The if statment here check if there is enough space for the box error to show from left to right , if not enough space, the box error will pop up from right to left
+        if (difference <= element.offsetWidth + 12) {
+            this.isLeft = false;
+        }
+        else {
+            this.isLeft = true;
+        }
+    }
+    generateRandomString() {
+        let charsAndNumbs = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ1234567890';
+        let text = '';
+        for (let i = 0; i < 8; i++) {
+            text += charsAndNumbs.charAt(Math.floor(Math.random() * charsAndNumbs.length));
+        }
+        return text;
+    }
+    // Helper to decide how to display the value
+    formatValue(value) {
+        if (!value)
+            return '';
+        // 1. If it's an array (like your jurisdiction error)
+        if (Array.isArray(value)) {
+            // Map through the array and extract 'message' if it exists, otherwise stringify
+            return value
+                .map(item => {
+                return typeof item === 'object' && item.message ? item.message : JSON.stringify(item);
+            })
+                .join(', ');
+        }
+        // 2. If it's a single object (but not an array)
+        if (typeof value === 'object') {
+            return value.message || JSON.stringify(value);
+        }
+        // 3. It's a string or number
+        return value;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipMsgError, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: TooltipMsgError, selector: "tooltip-msg-error", inputs: { width: "width", control: "control", messageType: "messageType", message: "message" }, host: { listeners: { "document:scroll ": "onScrollY()" } }, usesOnChanges: true, ngImport: i0, template: "<div\r\n  *ngIf=\"message && !control\"\r\n  class=\"container\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\">\r\n  <fa-icon [id]=\"iconElId\" [ngStyle]=\"iconStyle\" icon=\"circle-exclamation\" class=\"icon\"></fa-icon>\r\n  <div\r\n    *ngIf=\"!isDictionary\"\r\n    [ngStyle]=\"messageStyle\"\r\n    [id]=\"messageElId\"\r\n    class=\"message\"\r\n    [ngClass]=\"{ 'no-details': !showDetails, details: showDetails }\">\r\n    {{ message }}\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"isDictionary\"\r\n    [ngStyle]=\"messageStyle\"\r\n    [id]=\"messageElId\"\r\n    class=\"message\"\r\n    [ngClass]=\"{ 'no-details': !showDetails, details: showDetails }\">\r\n    <div class=\"dict-cont\" *ngFor=\"let entry of message | keyvalue\">\r\n      <strong>{{ entry.key }}: </strong>\r\n      <span>{{ formatValue(entry.value) }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"control?.touched && control.errors\"\r\n  class=\"container\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\">\r\n  <fa-icon [ngStyle]=\"iconStyle\" [id]=\"iconElId\" icon=\"circle-exclamation\" class=\"icon\"></fa-icon>\r\n  <div\r\n    [ngStyle]=\"messageStyle\"\r\n    [id]=\"messageElId\"\r\n    class=\"message\"\r\n    [ngClass]=\"{ 'no-details': !showDetails, details: showDetails }\">\r\n    <div class=\"dict-cont\" *ngFor=\"let entry of message | keyvalue\">\r\n      <strong>{{ entry.key }}: </strong>\r\n      <span>{{ formatValue(entry.value) }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".no-details{display:none;position:unset}.icon{cursor:pointer;display:inline-block}.container{position:relative}.details{position:fixed;display:block;z-index:1000;border-radius:.5rem;padding:.75rem 1rem;width:max-content;max-width:500px;font-size:1.2rem;line-height:1.4}@media (max-width: 1024px){.details{max-width:320px}}@media (max-width: 768px){.details{max-width:90vw}}.right-section{right:0}.message{width:max-content;white-space:pre-line;pointer-events:none}.dict-cont{line-height:normal}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2$2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "spin", "pulse", "mask", "styles", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "classes", "transform", "a11yRole"] }, { kind: "pipe", type: i1.KeyValuePipe, name: "keyvalue" }] });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: TooltipMsgError, decorators: [{
+            type: Component,
+            args: [{ selector: 'tooltip-msg-error', template: "<div\r\n  *ngIf=\"message && !control\"\r\n  class=\"container\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\">\r\n  <fa-icon [id]=\"iconElId\" [ngStyle]=\"iconStyle\" icon=\"circle-exclamation\" class=\"icon\"></fa-icon>\r\n  <div\r\n    *ngIf=\"!isDictionary\"\r\n    [ngStyle]=\"messageStyle\"\r\n    [id]=\"messageElId\"\r\n    class=\"message\"\r\n    [ngClass]=\"{ 'no-details': !showDetails, details: showDetails }\">\r\n    {{ message }}\r\n  </div>\r\n\r\n  <div\r\n    *ngIf=\"isDictionary\"\r\n    [ngStyle]=\"messageStyle\"\r\n    [id]=\"messageElId\"\r\n    class=\"message\"\r\n    [ngClass]=\"{ 'no-details': !showDetails, details: showDetails }\">\r\n    <div class=\"dict-cont\" *ngFor=\"let entry of message | keyvalue\">\r\n      <strong>{{ entry.key }}: </strong>\r\n      <span>{{ formatValue(entry.value) }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<div\r\n  *ngIf=\"control?.touched && control.errors\"\r\n  class=\"container\"\r\n  (mouseenter)=\"onMouseEnter()\"\r\n  (mouseleave)=\"onMouseLeave()\">\r\n  <fa-icon [ngStyle]=\"iconStyle\" [id]=\"iconElId\" icon=\"circle-exclamation\" class=\"icon\"></fa-icon>\r\n  <div\r\n    [ngStyle]=\"messageStyle\"\r\n    [id]=\"messageElId\"\r\n    class=\"message\"\r\n    [ngClass]=\"{ 'no-details': !showDetails, details: showDetails }\">\r\n    <div class=\"dict-cont\" *ngFor=\"let entry of message | keyvalue\">\r\n      <strong>{{ entry.key }}: </strong>\r\n      <span>{{ formatValue(entry.value) }}</span>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".no-details{display:none;position:unset}.icon{cursor:pointer;display:inline-block}.container{position:relative}.details{position:fixed;display:block;z-index:1000;border-radius:.5rem;padding:.75rem 1rem;width:max-content;max-width:500px;font-size:1.2rem;line-height:1.4}@media (max-width: 1024px){.details{max-width:320px}}@media (max-width: 768px){.details{max-width:90vw}}.right-section{right:0}.message{width:max-content;white-space:pre-line;pointer-events:none}.dict-cont{line-height:normal}\n"] }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }]; }, propDecorators: { width: [{
+                type: Input
+            }], control: [{
+                type: Input
+            }], messageType: [{
+                type: Input
+            }], message: [{
+                type: Input
+            }], onScrollY: [{
+                type: HostListener,
+                args: ['document:scroll ']
+            }] } });
 
-class ChooseLineTypeComponent {
-    items = LineTypeModelHelper;
-    selectedItem;
-    types;
-    constructor() { }
+class AddAsteriskDirective {
+    elem;
+    show = true;
+    constructor(elem) {
+        this.elem = elem;
+    }
     ngOnInit() {
-        this.types = this.items.getItems();
+        this.toggleAsterisk();
     }
-    writeValue(type) {
-        if (type != undefined || type != null) {
-            this.selectedItem = type;
+    ngOnChanges(changes) {
+        this.toggleAsterisk();
+    }
+    toggleAsterisk() {
+        const existingAsterisk = this.elem.nativeElement.querySelector('.custom-asterisk');
+        if (this.show) {
+            if (!existingAsterisk) {
+                const customAsterisk = `<span class="custom-asterisk" style="color:${PrimaryColors.$primaryRedColor};"> *</span> `;
+                this.elem.nativeElement.insertAdjacentHTML('beforeend', customAsterisk);
+            }
+        }
+        else {
+            if (existingAsterisk) {
+                existingAsterisk.remove();
+            }
         }
     }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddAsteriskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AddAsteriskDirective, selector: "[addAsterisk]", inputs: { show: "show" }, usesOnChanges: true, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddAsteriskDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[addAsterisk]'
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { show: [{
+                type: Input,
+                args: ['show']
+            }] } });
+
+class ValidationMessageService {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidationMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidationMessageService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidationMessageService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+class MinLengthValidationError {
+    requirement;
+    constructor(requirement) {
+        this.requirement = requirement;
     }
-    registerOnTouched(fn) {
-        this.propogateTouch = fn;
+    buildMessage() {
+        return "Must be a minimum length of " + this.requirement + " letters!";
     }
-    propagateChange = (_) => { };
-    propogateTouch = () => { };
-    updateBlur() {
-        this.propogateTouch();
+}
+class InvalidIntegerNumberValidatorEerror {
+    buildMessage() {
+        return "Must only contain numbers, no decimals or words allowed";
     }
-    onSelectedItemChanged() {
-        this.propagateChange(this.selectedItem);
+}
+class PositiveIntegerNumberValidatorError {
+    buildMessage() {
+        return "Must be a positive integer";
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseLineTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseLineTypeComponent, selector: "choose-line-type", providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => ChooseLineTypeComponent),
-                multi: true,
-            },
-        ], ngImport: i0, template: "<div class=\"select\">\r\n    <ng-select class=\"type\" appendTo=\"body\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"label\" [items]=\"types\"\r\n        [placeholder]=\"'Choose A Component'\" (change)=\"onSelectedItemChanged()\" [(ngModel)]=\"selectedItem\">\r\n        <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\">\r\n            {{item.label}}\r\n        </ng-template>\r\n    </ng-select>\r\n</div>", styles: [".type{width:250px}\n"], dependencies: [{ kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseLineTypeComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'choose-line-type', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ChooseLineTypeComponent),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"select\">\r\n    <ng-select class=\"type\" appendTo=\"body\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"label\" [items]=\"types\"\r\n        [placeholder]=\"'Choose A Component'\" (change)=\"onSelectedItemChanged()\" [(ngModel)]=\"selectedItem\">\r\n        <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\">\r\n            {{item.label}}\r\n        </ng-template>\r\n    </ng-select>\r\n</div>", styles: [".type{width:250px}\n"] }]
-        }], ctorParameters: function () { return []; } });
-
-class ChooseYesOrNoComponent {
-    change = new EventEmitter();
-    items = [{ value: true, label: "Yes", color: "green" }, { value: false, label: "No", color: "red" }];
-    width = 200;
-    selectedItemValue;
-    placeholder = "Choose either Yes or No";
-    constructor() { }
-    ngOnInit() {
+class MaxLengthValidationError {
+    requirement;
+    constructor(requirement) {
+        this.requirement = requirement;
     }
-    writeValue(item) {
-        if (item != undefined || item != null) {
-            this.selectedItemValue = item;
-        }
+    buildMessage() {
+        return "Must be a maximum length of " + this.requirement + " letters!";
+    }
+}
+class MaxValidationError {
+    requirement;
+    constructor(requirement) {
+        this.requirement = requirement;
+    }
+    buildMessage() {
+        return "The largest acceptable input is " + this.requirement;
+    }
+}
+class MinValidationError {
+    requirement;
+    constructor(requirement) {
+        this.requirement = requirement;
+    }
+    buildMessage() {
+        return "The smallest acceptable input is " + this.requirement;
+    }
+}
+class PatternValidatorError {
+    requirement;
+    constructor(requirement) {
+        this.requirement = requirement;
+    }
+    buildMessage() {
+        if (this.requirement == '^[a-zA-Z ]*$') {
+            return "This field must only contain words ";
+        }
+        else if (this.requirement == '/[0-9]-[0-9]+$/') {
+            return "This field must only contain numbers and a - " + "<br>" + "Example: 71-716971";
+        }
+        else if (this.requirement = 'forDate') {
+            return "Date needs to be DD/MM/YYYY";
+        }
+    }
+}
+class RequiredValidatorError {
+    buildMessage() {
+        return "This Field Is Required";
+    }
+}
+class EmailValidatorError {
+    buildMessage() {
+        return "Make Sure It Is An Email Format" + "<br>" + "example@jooler.io";
+    }
+}
+class ValidationError {
+    static getRelevantError(validationType, validationValue) {
+        let validationMessage;
+        validationMessage = this.MessageDictionary(validationValue, validationType);
+        return validationMessage;
+    }
+    static MessageDictionary(value, validationType) {
+        let ValidationMessageForInput = {
+            'minlength': new MinLengthValidationError(value).buildMessage(),
+            'maxlength': new MaxLengthValidationError(value).buildMessage(),
+            'max': new MaxValidationError(value).buildMessage(),
+            'min': new MinValidationError(value).buildMessage(),
+            'pattern': new PatternValidatorError(value).buildMessage(),
+            'required': new RequiredValidatorError().buildMessage(),
+            'email': new EmailValidatorError().buildMessage(),
+            'invalidIntegerNumber': new InvalidIntegerNumberValidatorEerror().buildMessage(),
+            'invalidPositiveInteger': new PositiveIntegerNumberValidatorError().buildMessage(),
+        };
+        return ValidationMessageForInput[validationType];
+    }
+    static validationMessageForDate = {
+        'required': new RequiredValidatorError().buildMessage(),
+        'pattern': new PatternValidatorError('forDate').buildMessage(),
+    };
+}
+
+class FormControlValidationMsgDirectiveForNgSelect {
+    elRef;
+    control;
+    errorMessage;
+    showDot;
+    errorDivId;
+    afterEnd = true;
+    showBoxError = true;
+    validationError = ValidationError;
+    statusChangeSubscription;
+    constructor(elRef, control) {
+        this.elRef = elRef;
+        this.control = control;
+    }
+    ngOnInit() {
+        if (!this.errorDivId) {
+            this.errorDivId = this.control.name;
+        }
+        this.statusChangeSubscription = this.control.statusChanges.subscribe(status => {
+            if (status == 'INVALID' && this.control.touched) {
+                this.showNgSelectError();
+            }
+            else {
+                this.removeError();
+            }
+        });
+        this.control.valueChanges.subscribe({
+            next: () => {
+                if (this.control.errors && this.control.touched) {
+                    this.showNgSelectError();
+                }
+                else {
+                    this.removeError();
+                }
+            },
+        });
+    }
+    onFocusout() {
+        if (this.control.errors && this.control.touched) {
+            this.showNgSelectError();
+        }
+        else {
+            this.removeError();
+        }
+    }
+    removeError() {
+        this.errorMessage = '';
+        const errorElement = document.getElementById(this.errorDivId);
+        if (errorElement)
+            errorElement.remove();
+    }
+    showNgSelectError() {
+        this.removeError();
+        const valErrors = this.control.errors;
+        if (this.control.errors.length > 1) {
+            this.showDot = true;
+        }
+        else {
+            this.showDot = false;
+        }
+        if (valErrors) {
+            const keys = Object.keys(valErrors);
+            for (let i = 0; i < keys.length; i++) {
+                switch (keys[i]) {
+                    case 'required': {
+                        let message = this.validationError.getRelevantError(keys[i], valErrors);
+                        this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                        this.control.control.setErrors({ required: true, message: message }, { emitEvent: false });
+                        break;
+                    }
+                    case 'validatePhoneNumber': {
+                        let message = this.validationError.getRelevantError(keys[i], valErrors);
+                        this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                        this.control.control.setErrors({ validatePhoneNumber: true, message: message }, { emitEvent: false });
+                        break;
+                    }
+                    case 'customMessage': {
+                        console.log('valErrors', valErrors);
+                        let message = valErrors.message;
+                        this.errorMessage += ` ${this.errorMessage ? '<br>' : ''}${this.showDot ? '\u25CF ' + message : message}`;
+                    }
+                }
+            }
+            if (this.showBoxError) {
+                const errDiv = `<div style="color:${PrimaryColors.$primaryRedColor}; width: ${this.afterEnd ? this.elRef.nativeElement.offsetWidth + 'px' : '100%'}; min-width: 100%; background-color: ${PrimaryColors.$primaryLightRedColor}; padding: .5rem; border-radius: .5rem; border: .1rem solid ${PrimaryColors.$primaryRedColor} ;border-left: .75rem solid ${PrimaryColors.$primaryRedColor};  margin-top:.5rem;  font-size: 1.2rem; " id="` +
+                    this.errorDivId +
+                    '">' +
+                    `<h3   style= " font-size: 1.3rem;  margin-bottom:.5rem; margin:0;  color:  ${PrimaryColors.$primaryRedColor}; font-weight: 700; line-height: 1.6rem;">` +
+                    'Please Complete all details' +
+                    '</h3>' +
+                    this.errorMessage +
+                    '</div>';
+                if (!this.afterEnd)
+                    this.elRef.nativeElement.parentElement.insertAdjacentHTML('afterend', errDiv);
+                else {
+                    this.elRef.nativeElement.insertAdjacentHTML('afterend', errDiv);
+                }
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormControlValidationMsgDirectiveForNgSelect, deps: [{ token: i0.ElementRef }, { token: i2$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: FormControlValidationMsgDirectiveForNgSelect, selector: "[appFormControlValidationMsgForNgSelect]", inputs: { afterEnd: "afterEnd", showBoxError: "showBoxError" }, host: { listeners: { "focusout": "onFocusout()" } }, providers: [NgModel], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormControlValidationMsgDirectiveForNgSelect, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appFormControlValidationMsgForNgSelect]',
+                    providers: [NgModel],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.NgControl }]; }, propDecorators: { afterEnd: [{
+                type: Input,
+                args: ['afterEnd']
+            }], showBoxError: [{
+                type: Input,
+                args: ['showBoxError']
+            }], onFocusout: [{
+                type: HostListener,
+                args: ['focusout']
+            }] } });
+
+class ChooseGeneralItemRendererComponent {
+    arrayKey = 'entries';
+    formGroup;
+    items;
+    key;
+    params;
+    validationType = ChooseItemRendererValidationType.NONE;
+    validationTypes = ChooseItemRendererValidationType;
+    clearable = true;
+    templateType = ChooseObjectTemplateType.DEFAULT;
+    basicTemplateData;
+    valueToBind = 'id'; // or null for full object
+    showDropdown = true;
+    constructor() { }
+    agInit(params) {
+        this.params = params;
+        if (params.context.arrayKey) {
+            this.arrayKey = params.context.arrayKey;
+        }
+        this.setupRenderer(params);
+        this.formGroup = params.context.formGroup.get(this.arrayKey).at(params.node.rowIndex);
+        this.key = params.context.createKey(params.columnApi, params.column);
+    }
+    onCellDataChanged($event) {
+        let object = $event;
+        this.formGroup.get(this.key);
+        let rowNode = this.params.node;
+        let valueToBind;
+        if (this.valueToBind === null) {
+            // Case 1: Bind the entire object
+            valueToBind = object;
+        }
+        else if (this.valueToBind && object) {
+            // Case 2: Bind a specific property using dynamic access
+            valueToBind = object[this.valueToBind];
+        }
+        else {
+            // Case 3: Handle null/cleared selection
+            valueToBind = null;
+        }
+        rowNode.setDataValue(this.key, valueToBind);
+        if (this.params.onCellValueChanged instanceof Function) {
+            const params = {
+                value: object?.[this.valueToBind],
+                object: object,
+                rowNode: rowNode,
+                colId: this.params.column.colId,
+                lineFormGroup: this.params.context.formGroup.get(this.arrayKey).at(rowNode.rowIndex),
+            };
+            this.params.onCellValueChanged(params);
+        }
+        if (this.validationType == ChooseItemRendererValidationType.ROW_LEVEL_UNIQUE) {
+            this.setRowLevelUniqueItems(this.params);
+        }
+    }
+    setupRenderer(params) {
+        if (params.showDropdown === true || params.showDropdown === false) {
+            this.showDropdown = params.showDropdown;
+        }
+        if (params.bindValueKey != undefined) {
+            this.valueToBind = params.bindValueKey;
+        }
+        if (params.clearable != null && params.clearable != undefined) {
+            this.clearable = params.clearable;
+        }
+        if (params.templateType) {
+            this.templateType = params.templateType;
+        }
+        if (params.basicTemplateData) {
+            this.basicTemplateData = params.basicTemplateData;
+        }
+        if (params.chooseItemValidationType != null && params.chooseItemValidationType != undefined) {
+            this.validationType = params.chooseItemValidationType;
+        }
+        if (this.validationType == ChooseItemRendererValidationType.ROW_LEVEL_UNIQUE) {
+            this.setRowLevelUniqueItems(params);
+        }
+        else if (this.validationType == ChooseItemRendererValidationType.NONE) {
+            this.setAllItems(params);
+        }
+        else {
+            throw Error('ChooseGeneralItemRendererValidationType is not recognized.');
+        }
+    }
+    setAllItems(params) {
+        if (params.items) {
+            this.items = params.items;
+        }
+    }
+    setRowLevelUniqueItems(params) {
+        let items;
+        if (params.items) {
+            items = params.items;
+            if (params.value && !items.includes(item => item?.[this.valueToBind] !== params.value)) {
+                let appendedItems = [...items];
+                appendedItems.push(params.allItems.find(item => item?.[this.valueToBind] === params.value));
+                items = appendedItems;
+            }
+            this.items = items;
+        }
+    }
+    refresh(params) {
+        this.formGroup = this.params.context.formGroup.get(this.arrayKey).at(params.node.rowIndex);
+        this.setupRenderer(params);
+        return true;
+    }
+    get showError() {
+        if (this.formGroup.get(this.key).errors && this.formGroup.get(this.key).touched) {
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseGeneralItemRendererComponent, selector: "choose-general-item-renderer", ngImport: i0, template: "<div class=\"all\" [ngClass]=\"{ single: !showError, double: showError }\"\r\n    *ngIf=\"formGroup && showDropdown\" [formGroup]=\"formGroup\">\r\n    <choose-general-item [bindValueKey]=\"valueToBind\" [clearable]=\"clearable\"\r\n        [items]=\"items\" appFormControlValidationMsgForNgSelect [formControlName]=\"key\"\r\n        [label]=\"params.label\" [appendTo]=\"'body'\" [placeholder]=\"params.placeholder\"\r\n        [isMultiple]=\"params.isMultiple\" [objects]=\"params.objects\"\r\n        [showLabel]=\"params.showLabel\" [separator]=\"params.separator\"\r\n        [width]=\"params.width\" [isChip]=\"params.isChip\" [isTypeDate]=\"params.isTypeDate\"\r\n        [chipColor]=\"params.chipColor\" [chipTextColor]=\"params.chipTextColor\"\r\n        [basicTemplateData]=\"basicTemplateData\" [templateType]=\"templateType\"\r\n        [chipWidth]=\"params.chipWidth\" (change)=\"onCellDataChanged($event)\"\r\n        [showBoxError]=\"false\">\r\n    </choose-general-item>\r\n    <tooltip-msg-error [control]=\"formGroup.get(this.key)\" *ngIf=\"showError\"\r\n        [message]=\"formGroup.get(key).errors.message\"></tooltip-msg-error>\r\n</div>\r\n<div class=\"center\" *ngIf=\"!showDropdown\">-</div>", styles: [".center{display:grid;align-items:center;justify-items:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChooseGeneralItemComponent, selector: "choose-general-item", inputs: ["items", "label", "appendTo", "placeholder", "apiPath", "isMultiple", "hideSelectedItem", "objects", "showLabel", "separator", "width", "isChip", "isTypeDate", "chipColor", "chipTextColor", "chipWidth", "selectedItemId", "disabled", "readOnly", "useFullObject", "showAdd", "dialogComponentClass", "showDialogDefaultButtons", "dialogComponentInputs", "bindValueKey", "addRoute", "canActionsRoute", "dialogTitle", "clearable", "filterParams", "templateType", "basicTemplateData", "contentProjectionLabelKey", "fullObjectControlConfig"], outputs: ["change", "blur"] }, { kind: "directive", type: FormControlValidationMsgDirectiveForNgSelect, selector: "[appFormControlValidationMsgForNgSelect]", inputs: ["afterEnd", "showBoxError"] }, { kind: "component", type: TooltipMsgError, selector: "tooltip-msg-error", inputs: ["width", "control", "messageType", "message"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'choose-general-item-renderer', template: "<div class=\"all\" [ngClass]=\"{ single: !showError, double: showError }\"\r\n    *ngIf=\"formGroup && showDropdown\" [formGroup]=\"formGroup\">\r\n    <choose-general-item [bindValueKey]=\"valueToBind\" [clearable]=\"clearable\"\r\n        [items]=\"items\" appFormControlValidationMsgForNgSelect [formControlName]=\"key\"\r\n        [label]=\"params.label\" [appendTo]=\"'body'\" [placeholder]=\"params.placeholder\"\r\n        [isMultiple]=\"params.isMultiple\" [objects]=\"params.objects\"\r\n        [showLabel]=\"params.showLabel\" [separator]=\"params.separator\"\r\n        [width]=\"params.width\" [isChip]=\"params.isChip\" [isTypeDate]=\"params.isTypeDate\"\r\n        [chipColor]=\"params.chipColor\" [chipTextColor]=\"params.chipTextColor\"\r\n        [basicTemplateData]=\"basicTemplateData\" [templateType]=\"templateType\"\r\n        [chipWidth]=\"params.chipWidth\" (change)=\"onCellDataChanged($event)\"\r\n        [showBoxError]=\"false\">\r\n    </choose-general-item>\r\n    <tooltip-msg-error [control]=\"formGroup.get(this.key)\" *ngIf=\"showError\"\r\n        [message]=\"formGroup.get(key).errors.message\"></tooltip-msg-error>\r\n</div>\r\n<div class=\"center\" *ngIf=\"!showDropdown\">-</div>", styles: [".center{display:grid;align-items:center;justify-items:center}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+var LineType;
+(function (LineType) {
+    LineType[LineType["INCLUDE"] = 0] = "INCLUDE";
+    LineType[LineType["DO_NOT_INCLUDE"] = 1] = "DO_NOT_INCLUDE";
+})(LineType || (LineType = {}));
+
+class LineTypeModelHelper {
+    static label;
+    static color;
+    static description;
+    static value;
+    static getItems() {
+        let items = [];
+        let values = Object.values(LineType);
+        let types = values.filter(value => typeof value === 'number');
+        for (let value of types) {
+            this.setStringValueAndColor(value);
+            items.push({ value: value, label: this.label, color: this.color, description: this.description });
+        }
+        return items;
+    }
+    static setStringValueAndColor(type) {
+        switch (type) {
+            case LineType.INCLUDE:
+                return this.label = "Include", this.color = "gold";
+                break;
+            case LineType.DO_NOT_INCLUDE:
+                return this.label = "Do Not Include", this.color = "platinum";
+                break;
+            default:
+                return this.label = "Undefined", this.color = "Gray";
+        }
+    }
+    getValue(label) {
+        let value;
+        switch (label) {
+            case "Include":
+                return value = 0;
+                break;
+            case "Do Not Include":
+                return value = 1;
+                break;
+            default:
+                return null;
+        }
+    }
+    static getLabelAndColorForValue(value) {
+        for (let item of this.getItems()) {
+            if (item.value == value) {
+                this.value = item;
+                return this.value;
+            }
+        }
+    }
+}
+
+class ChooseLineTypeComponent {
+    items = LineTypeModelHelper;
+    selectedItem;
+    types;
+    constructor() { }
+    ngOnInit() {
+        this.types = this.items.getItems();
+    }
+    writeValue(type) {
+        if (type != undefined || type != null) {
+            this.selectedItem = type;
+        }
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.propogateTouch = fn;
+    }
+    propagateChange = (_) => { };
+    propogateTouch = () => { };
+    updateBlur() {
+        this.propogateTouch();
+    }
+    onSelectedItemChanged() {
+        this.propagateChange(this.selectedItem);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseLineTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseLineTypeComponent, selector: "choose-line-type", providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ChooseLineTypeComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div class=\"select\">\r\n    <ng-select class=\"type\" appendTo=\"body\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"label\" [items]=\"types\"\r\n        [placeholder]=\"'Choose A Component'\" (change)=\"onSelectedItemChanged()\" [(ngModel)]=\"selectedItem\">\r\n        <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\">\r\n            {{item.label}}\r\n        </ng-template>\r\n    </ng-select>\r\n</div>", styles: [".type{width:250px}\n"], dependencies: [{ kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseLineTypeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'choose-line-type', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ChooseLineTypeComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"select\">\r\n    <ng-select class=\"type\" appendTo=\"body\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"label\" [items]=\"types\"\r\n        [placeholder]=\"'Choose A Component'\" (change)=\"onSelectedItemChanged()\" [(ngModel)]=\"selectedItem\">\r\n        <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\">\r\n            {{item.label}}\r\n        </ng-template>\r\n    </ng-select>\r\n</div>", styles: [".type{width:250px}\n"] }]
+        }], ctorParameters: function () { return []; } });
+
+class ChooseYesOrNoComponent {
+    change = new EventEmitter();
+    items = [{ value: true, label: "Yes", color: "green" }, { value: false, label: "No", color: "red" }];
+    width = 200;
+    selectedItemValue;
+    placeholder = "Choose either Yes or No";
+    constructor() { }
+    ngOnInit() {
+    }
+    writeValue(item) {
+        if (item != undefined || item != null) {
+            this.selectedItemValue = item;
+        }
     }
     registerOnChange(fn) {
         this.propagateChange = fn;
@@ -1592,273 +1939,106 @@ class EditableSavableInputComponent {
     ngOnInit() {
         this.initialize();
     }
-    initialize() {
-        if (this.value == "") {
-            this.isUpdated = false;
-        }
-        else {
-            this.isUpdated = true;
-        }
-    }
-    onClickAdd() {
-        this.isAddClickedOn = true;
-    }
-    onClickCancel() {
-        this.isAddClickedOn = false;
-    }
-    onClickSave(input) {
-        this.isAddClickedOn = false;
-        let value = input.value;
-        if (value.trim().length == 0) {
-            this.isUpdated = false;
-        }
-        else {
-            this.isUpdated = true;
-        }
-        this.value = value;
-        this.saveWasClicked.emit(value);
-        this.propagateChange(this.value);
-    }
-    onClickEdit() {
-        this.isAddClickedOn = true;
-    }
-    onMouseEnter() {
-        this.showEdit = true;
-    }
-    onMouseLeave() {
-        this.showEdit = false;
-    }
-    writeValue(value) {
-        if (value) {
-            this.value = value;
-            this.isUpdated = true;
-        }
-    }
-    // registers 'fn' that will be fired wheb changes are made
-    // this is how we emit the changes back to the form
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.propogateTouch = fn;
-    }
-    // the method set in registerOnChange to emit changes back to the form
-    propagateChange = (_) => { };
-    propogateTouch = () => { };
-    onChange($event) {
-        //this.propagateChange(this.value);
-    }
-    updateBlur() {
-        this.propogateTouch();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditableSavableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditableSavableInputComponent, selector: "editable-savable-input", inputs: { defaultvalue: "defaultvalue", inputType: "inputType", newLabel: "newLabel", headerLabel: "headerLabel", showUnit: "showUnit", unit: "unit", unitType: "unitType", isEditable: "isEditable", showHeader: "showHeader", value: "value" }, outputs: { saveWasClicked: "saveWasClicked" }, providers: [DynamicPipe,
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => EditableSavableInputComponent),
-                multi: true
-            }
-        ], ngImport: i0, template: "<div *ngIf=\"showHeader\" class=\"header\">\r\n  {{headerLabel}}\r\n</div>\r\n<div class=\"container\" [ngClass]=\"{'closed':!isAddClickedOn, 'open': isAddClickedOn}\">\r\n  <div class=\"content\">\r\n    <div class=\"default-content\" *ngIf=\"!isAddClickedOn && !isUpdated && isEditable\">\r\n      <div class=\"add\" (click)=\"onClickAdd()\">\r\n        {{defaultvalue}} </div>\r\n    </div>\r\n    <div class=\"edit-content\" *ngIf=\"isAddClickedOn\">\r\n      <label class=\"input-label\" for=\"input\">{{newLabel}}</label>\r\n      <div class=\"input \" [ngClass]=\"{'input-with-appended-unit': showUnit}\">\r\n        <span *ngIf=\"showUnit\">{{unit}}</span>\r\n        <input (change)=\"onChange($event)\" (blur)=\"updateBlur()\" [ngModel]=\"value\" [value]=\"value\" id=\"input\" #input\r\n          class=\"form-control\" [ngClass]=\"{'input-box': showUnit}\" [type]=\"inputType\">\r\n      </div>\r\n      <div class=\"edit-actions\">\r\n        <button type=\"button\" class=\"btn cancel\" (click)=\"onClickCancel()\" mat-raised-button>Cancel</button>\r\n        <button type=\"button\" class=\"save\" (click)=\"onClickSave(input)\" mat-raised-button color=\"primary\">Save</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"updated-content closed\" *ngIf=\"!isAddClickedOn && isUpdated\" (mouseenter)=\"onMouseEnter()\"\r\n      (mouseleave)=\"onMouseLeave()\">\r\n      <div class=\"edit-icon-container\" *ngIf=\"showEdit && isEditable\" (click)=\"onClickEdit()\">\r\n        <i class=\"fas fa-pencil-alt\"></i>\r\n      </div>\r\n      <div class=\"updated\">\r\n        <span class=\"updated-label\">\r\n          <label for=\"input\">{{newLabel}}</label>\r\n        </span>\r\n        <span *ngIf=\"!showUnit\">{{value}}</span>\r\n        <span *ngIf=\"showUnit\" class=\"updated-value\">\r\n          {{value | dynamicPipe: unitType}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{display:block;width:100%}.open{height:120px}.closed{height:40px}.edit-icon-container{position:absolute;right:0%;transform:translate(0);top:0;cursor:pointer}.edit-icon-container:hover{background-color:gray;color:#fff;padding:2px}label,.updated-label{color:gray;margin-right:5px}#input{display:inline}.cancel{grid-column:1;grid-row:2;height:80%;width:80px}.save{grid-column:2;grid-row:2;height:80%;width:80px}.default-content{position:absolute}.input{width:280px;grid-column:2;grid-row:1}.input-box{width:200px}.input-label{grid-column:1;grid-row:1}.updated{position:absolute}.add{color:#00f}.add:hover{text-decoration:underline;cursor:pointer}.content{position:relative}.btn:focus{outline:none!important}.edit-content{position:absolute;left:50%;transform:translate(-50%);display:grid;grid-template-columns:150px 200px;grid-template-rows:50px 50px}.updated-content{display:block}.header{color:gray;border-bottom:1px solid grey;height:30px;font-size:20px;margin-bottom:10px;margin-top:10px}.input-with-appended-unit input{padding-left:20px;text-align:left}.input-with-appended-unit span{position:relative;left:20px;color:gray}.edit-actions{grid-column:2;grid-row:2;display:grid;grid-template-columns:50% 50%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditableSavableInputComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'editable-savable-input', providers: [DynamicPipe,
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => EditableSavableInputComponent),
-                            multi: true
-                        }
-                    ], template: "<div *ngIf=\"showHeader\" class=\"header\">\r\n  {{headerLabel}}\r\n</div>\r\n<div class=\"container\" [ngClass]=\"{'closed':!isAddClickedOn, 'open': isAddClickedOn}\">\r\n  <div class=\"content\">\r\n    <div class=\"default-content\" *ngIf=\"!isAddClickedOn && !isUpdated && isEditable\">\r\n      <div class=\"add\" (click)=\"onClickAdd()\">\r\n        {{defaultvalue}} </div>\r\n    </div>\r\n    <div class=\"edit-content\" *ngIf=\"isAddClickedOn\">\r\n      <label class=\"input-label\" for=\"input\">{{newLabel}}</label>\r\n      <div class=\"input \" [ngClass]=\"{'input-with-appended-unit': showUnit}\">\r\n        <span *ngIf=\"showUnit\">{{unit}}</span>\r\n        <input (change)=\"onChange($event)\" (blur)=\"updateBlur()\" [ngModel]=\"value\" [value]=\"value\" id=\"input\" #input\r\n          class=\"form-control\" [ngClass]=\"{'input-box': showUnit}\" [type]=\"inputType\">\r\n      </div>\r\n      <div class=\"edit-actions\">\r\n        <button type=\"button\" class=\"btn cancel\" (click)=\"onClickCancel()\" mat-raised-button>Cancel</button>\r\n        <button type=\"button\" class=\"save\" (click)=\"onClickSave(input)\" mat-raised-button color=\"primary\">Save</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"updated-content closed\" *ngIf=\"!isAddClickedOn && isUpdated\" (mouseenter)=\"onMouseEnter()\"\r\n      (mouseleave)=\"onMouseLeave()\">\r\n      <div class=\"edit-icon-container\" *ngIf=\"showEdit && isEditable\" (click)=\"onClickEdit()\">\r\n        <i class=\"fas fa-pencil-alt\"></i>\r\n      </div>\r\n      <div class=\"updated\">\r\n        <span class=\"updated-label\">\r\n          <label for=\"input\">{{newLabel}}</label>\r\n        </span>\r\n        <span *ngIf=\"!showUnit\">{{value}}</span>\r\n        <span *ngIf=\"showUnit\" class=\"updated-value\">\r\n          {{value | dynamicPipe: unitType}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{display:block;width:100%}.open{height:120px}.closed{height:40px}.edit-icon-container{position:absolute;right:0%;transform:translate(0);top:0;cursor:pointer}.edit-icon-container:hover{background-color:gray;color:#fff;padding:2px}label,.updated-label{color:gray;margin-right:5px}#input{display:inline}.cancel{grid-column:1;grid-row:2;height:80%;width:80px}.save{grid-column:2;grid-row:2;height:80%;width:80px}.default-content{position:absolute}.input{width:280px;grid-column:2;grid-row:1}.input-box{width:200px}.input-label{grid-column:1;grid-row:1}.updated{position:absolute}.add{color:#00f}.add:hover{text-decoration:underline;cursor:pointer}.content{position:relative}.btn:focus{outline:none!important}.edit-content{position:absolute;left:50%;transform:translate(-50%);display:grid;grid-template-columns:150px 200px;grid-template-rows:50px 50px}.updated-content{display:block}.header{color:gray;border-bottom:1px solid grey;height:30px;font-size:20px;margin-bottom:10px;margin-top:10px}.input-with-appended-unit input{padding-left:20px;text-align:left}.input-with-appended-unit span{position:relative;left:20px;color:gray}.edit-actions{grid-column:2;grid-row:2;display:grid;grid-template-columns:50% 50%}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { saveWasClicked: [{
-                type: Output
-            }], defaultvalue: [{
-                type: Input
-            }], inputType: [{
-                type: Input
-            }], newLabel: [{
-                type: Input
-            }], headerLabel: [{
-                type: Input
-            }], showUnit: [{
-                type: Input
-            }], unit: [{
-                type: Input
-            }], unitType: [{
-                type: Input
-            }], isEditable: [{
-                type: Input
-            }], showHeader: [{
-                type: Input
-            }], value: [{
-                type: Input
-            }] } });
-
-class CustomDecimalPointTwoDigitsDirective {
-    control;
-    valueSubscription;
-    constructor(control) {
-        this.control = control;
-    }
-    ngOnInit() {
-        if (this.control.value) {
-            this.control.valueAccessor.writeValue(this.transformToCommasAndPoint(this.control.value));
-        }
-        this.valueSubscription = this.control.control.valueChanges.subscribe(value => {
-            if (value.length > 0) {
-                let removeCommas = this.control.value.replace(/,/g, '');
-                this.control.control.setValue(removeCommas, { emitEvent: false, emitModelToViewChange: false });
-            }
-            else {
-                this.control.control.setValue(null, { emitEvent: false, emitModelToViewChange: false });
-            }
-        });
-    }
-    onEvent($event) {
-        if (this.control.value) {
-            const item = $event.target;
-            item.value = this.transformToCommasAndPoint(this.control.value);
-            let removeCommas = this.control.value.replace(/,/g, '');
-            this.control.control.setValue(removeCommas, { emitEvent: false, emitModelToViewChange: false });
-        }
-    }
-    transformToCommasAndPoint(value) {
-        if (value.indexOf(".") == -1) {
-            value = value.toString().replace(/\D/g, "")
-                .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-            return value;
-        }
-        else {
-            let val = value.split(".");
-            let valueBeforeDecimal = val[0];
-            let valueAfterDecimal = val[1];
-            valueBeforeDecimal = valueBeforeDecimal.toString().replace(/\D/g, "")
-                .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
-            let newValue = `${valueBeforeDecimal}.${valueAfterDecimal}`;
-            return newValue;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomDecimalPointTwoDigitsDirective, deps: [{ token: i2$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomDecimalPointTwoDigitsDirective, selector: "[customDecimalPointTwoDigits]", host: { listeners: { "input": "onEvent($event)" } }, providers: [NgModel, DecimalPipe], ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomDecimalPointTwoDigitsDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[customDecimalPointTwoDigits]',
-                    providers: [NgModel, DecimalPipe],
-                }]
-        }], ctorParameters: function () { return [{ type: i2$1.NgControl }]; }, propDecorators: { onEvent: [{
-                type: HostListener,
-                args: ["input", ["$event"]]
-            }] } });
-
-class ValidationMessageService {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidationMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidationMessageService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ValidationMessageService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-class MinLengthValidationError {
-    requirement;
-    constructor(requirement) {
-        this.requirement = requirement;
-    }
-    buildMessage() {
-        return "Must be a minimum length of " + this.requirement + " letters!";
-    }
-}
-class InvalidIntegerNumberValidatorEerror {
-    buildMessage() {
-        return "Must only contain numbers, no decimals or words allowed";
-    }
-}
-class PositiveIntegerNumberValidatorError {
-    buildMessage() {
-        return "Must be a positive integer";
-    }
-}
-class MaxLengthValidationError {
-    requirement;
-    constructor(requirement) {
-        this.requirement = requirement;
-    }
-    buildMessage() {
-        return "Must be a maximum length of " + this.requirement + " letters!";
+    initialize() {
+        if (this.value == "") {
+            this.isUpdated = false;
+        }
+        else {
+            this.isUpdated = true;
+        }
     }
-}
-class MaxValidationError {
-    requirement;
-    constructor(requirement) {
-        this.requirement = requirement;
+    onClickAdd() {
+        this.isAddClickedOn = true;
     }
-    buildMessage() {
-        return "The largest acceptable input is " + this.requirement;
+    onClickCancel() {
+        this.isAddClickedOn = false;
     }
-}
-class MinValidationError {
-    requirement;
-    constructor(requirement) {
-        this.requirement = requirement;
+    onClickSave(input) {
+        this.isAddClickedOn = false;
+        let value = input.value;
+        if (value.trim().length == 0) {
+            this.isUpdated = false;
+        }
+        else {
+            this.isUpdated = true;
+        }
+        this.value = value;
+        this.saveWasClicked.emit(value);
+        this.propagateChange(this.value);
     }
-    buildMessage() {
-        return "The smallest acceptable input is " + this.requirement;
+    onClickEdit() {
+        this.isAddClickedOn = true;
     }
-}
-class PatternValidatorError {
-    requirement;
-    constructor(requirement) {
-        this.requirement = requirement;
+    onMouseEnter() {
+        this.showEdit = true;
     }
-    buildMessage() {
-        if (this.requirement == '^[a-zA-Z ]*$') {
-            return "This field must only contain words ";
-        }
-        else if (this.requirement == '/[0-9]-[0-9]+$/') {
-            return "This field must only contain numbers and a - " + "<br>" + "Example: 71-716971";
-        }
-        else if (this.requirement = 'forDate') {
-            return "Date needs to be DD/MM/YYYY";
+    onMouseLeave() {
+        this.showEdit = false;
+    }
+    writeValue(value) {
+        if (value) {
+            this.value = value;
+            this.isUpdated = true;
         }
     }
-}
-class RequiredValidatorError {
-    buildMessage() {
-        return "This Field Is Required";
+    // registers 'fn' that will be fired wheb changes are made
+    // this is how we emit the changes back to the form
+    registerOnChange(fn) {
+        this.propagateChange = fn;
     }
-}
-class EmailValidatorError {
-    buildMessage() {
-        return "Make Sure It Is An Email Format" + "<br>" + "example@jooler.io";
+    registerOnTouched(fn) {
+        this.propogateTouch = fn;
     }
-}
-class ValidationError {
-    static getRelevantError(validationType, validationValue) {
-        let validationMessage;
-        validationMessage = this.MessageDictionary(validationValue, validationType);
-        return validationMessage;
+    // the method set in registerOnChange to emit changes back to the form
+    propagateChange = (_) => { };
+    propogateTouch = () => { };
+    onChange($event) {
+        //this.propagateChange(this.value);
     }
-    static MessageDictionary(value, validationType) {
-        let ValidationMessageForInput = {
-            'minlength': new MinLengthValidationError(value).buildMessage(),
-            'maxlength': new MaxLengthValidationError(value).buildMessage(),
-            'max': new MaxValidationError(value).buildMessage(),
-            'min': new MinValidationError(value).buildMessage(),
-            'pattern': new PatternValidatorError(value).buildMessage(),
-            'required': new RequiredValidatorError().buildMessage(),
-            'email': new EmailValidatorError().buildMessage(),
-            'invalidIntegerNumber': new InvalidIntegerNumberValidatorEerror().buildMessage(),
-            'invalidPositiveInteger': new PositiveIntegerNumberValidatorError().buildMessage(),
-        };
-        return ValidationMessageForInput[validationType];
+    updateBlur() {
+        this.propogateTouch();
     }
-    static validationMessageForDate = {
-        'required': new RequiredValidatorError().buildMessage(),
-        'pattern': new PatternValidatorError('forDate').buildMessage(),
-    };
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditableSavableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: EditableSavableInputComponent, selector: "editable-savable-input", inputs: { defaultvalue: "defaultvalue", inputType: "inputType", newLabel: "newLabel", headerLabel: "headerLabel", showUnit: "showUnit", unit: "unit", unitType: "unitType", isEditable: "isEditable", showHeader: "showHeader", value: "value" }, outputs: { saveWasClicked: "saveWasClicked" }, providers: [DynamicPipe,
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => EditableSavableInputComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div *ngIf=\"showHeader\" class=\"header\">\r\n  {{headerLabel}}\r\n</div>\r\n<div class=\"container\" [ngClass]=\"{'closed':!isAddClickedOn, 'open': isAddClickedOn}\">\r\n  <div class=\"content\">\r\n    <div class=\"default-content\" *ngIf=\"!isAddClickedOn && !isUpdated && isEditable\">\r\n      <div class=\"add\" (click)=\"onClickAdd()\">\r\n        {{defaultvalue}} </div>\r\n    </div>\r\n    <div class=\"edit-content\" *ngIf=\"isAddClickedOn\">\r\n      <label class=\"input-label\" for=\"input\">{{newLabel}}</label>\r\n      <div class=\"input \" [ngClass]=\"{'input-with-appended-unit': showUnit}\">\r\n        <span *ngIf=\"showUnit\">{{unit}}</span>\r\n        <input (change)=\"onChange($event)\" (blur)=\"updateBlur()\" [ngModel]=\"value\" [value]=\"value\" id=\"input\" #input\r\n          class=\"form-control\" [ngClass]=\"{'input-box': showUnit}\" [type]=\"inputType\">\r\n      </div>\r\n      <div class=\"edit-actions\">\r\n        <button type=\"button\" class=\"btn cancel\" (click)=\"onClickCancel()\" mat-raised-button>Cancel</button>\r\n        <button type=\"button\" class=\"save\" (click)=\"onClickSave(input)\" mat-raised-button color=\"primary\">Save</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"updated-content closed\" *ngIf=\"!isAddClickedOn && isUpdated\" (mouseenter)=\"onMouseEnter()\"\r\n      (mouseleave)=\"onMouseLeave()\">\r\n      <div class=\"edit-icon-container\" *ngIf=\"showEdit && isEditable\" (click)=\"onClickEdit()\">\r\n        <i class=\"fas fa-pencil-alt\"></i>\r\n      </div>\r\n      <div class=\"updated\">\r\n        <span class=\"updated-label\">\r\n          <label for=\"input\">{{newLabel}}</label>\r\n        </span>\r\n        <span *ngIf=\"!showUnit\">{{value}}</span>\r\n        <span *ngIf=\"showUnit\" class=\"updated-value\">\r\n          {{value | dynamicPipe: unitType}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{display:block;width:100%}.open{height:120px}.closed{height:40px}.edit-icon-container{position:absolute;right:0%;transform:translate(0);top:0;cursor:pointer}.edit-icon-container:hover{background-color:gray;color:#fff;padding:2px}label,.updated-label{color:gray;margin-right:5px}#input{display:inline}.cancel{grid-column:1;grid-row:2;height:80%;width:80px}.save{grid-column:2;grid-row:2;height:80%;width:80px}.default-content{position:absolute}.input{width:280px;grid-column:2;grid-row:1}.input-box{width:200px}.input-label{grid-column:1;grid-row:1}.updated{position:absolute}.add{color:#00f}.add:hover{text-decoration:underline;cursor:pointer}.content{position:relative}.btn:focus{outline:none!important}.edit-content{position:absolute;left:50%;transform:translate(-50%);display:grid;grid-template-columns:150px 200px;grid-template-rows:50px 50px}.updated-content{display:block}.header{color:gray;border-bottom:1px solid grey;height:30px;font-size:20px;margin-bottom:10px;margin-top:10px}.input-with-appended-unit input{padding-left:20px;text-align:left}.input-with-appended-unit span{position:relative;left:20px;color:gray}.edit-actions{grid-column:2;grid-row:2;display:grid;grid-template-columns:50% 50%}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.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: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i3$1.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] });
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: EditableSavableInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'editable-savable-input', providers: [DynamicPipe,
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => EditableSavableInputComponent),
+                            multi: true
+                        }
+                    ], template: "<div *ngIf=\"showHeader\" class=\"header\">\r\n  {{headerLabel}}\r\n</div>\r\n<div class=\"container\" [ngClass]=\"{'closed':!isAddClickedOn, 'open': isAddClickedOn}\">\r\n  <div class=\"content\">\r\n    <div class=\"default-content\" *ngIf=\"!isAddClickedOn && !isUpdated && isEditable\">\r\n      <div class=\"add\" (click)=\"onClickAdd()\">\r\n        {{defaultvalue}} </div>\r\n    </div>\r\n    <div class=\"edit-content\" *ngIf=\"isAddClickedOn\">\r\n      <label class=\"input-label\" for=\"input\">{{newLabel}}</label>\r\n      <div class=\"input \" [ngClass]=\"{'input-with-appended-unit': showUnit}\">\r\n        <span *ngIf=\"showUnit\">{{unit}}</span>\r\n        <input (change)=\"onChange($event)\" (blur)=\"updateBlur()\" [ngModel]=\"value\" [value]=\"value\" id=\"input\" #input\r\n          class=\"form-control\" [ngClass]=\"{'input-box': showUnit}\" [type]=\"inputType\">\r\n      </div>\r\n      <div class=\"edit-actions\">\r\n        <button type=\"button\" class=\"btn cancel\" (click)=\"onClickCancel()\" mat-raised-button>Cancel</button>\r\n        <button type=\"button\" class=\"save\" (click)=\"onClickSave(input)\" mat-raised-button color=\"primary\">Save</button>\r\n      </div>\r\n    </div>\r\n    <div class=\"updated-content closed\" *ngIf=\"!isAddClickedOn && isUpdated\" (mouseenter)=\"onMouseEnter()\"\r\n      (mouseleave)=\"onMouseLeave()\">\r\n      <div class=\"edit-icon-container\" *ngIf=\"showEdit && isEditable\" (click)=\"onClickEdit()\">\r\n        <i class=\"fas fa-pencil-alt\"></i>\r\n      </div>\r\n      <div class=\"updated\">\r\n        <span class=\"updated-label\">\r\n          <label for=\"input\">{{newLabel}}</label>\r\n        </span>\r\n        <span *ngIf=\"!showUnit\">{{value}}</span>\r\n        <span *ngIf=\"showUnit\" class=\"updated-value\">\r\n          {{value | dynamicPipe: unitType}}\r\n        </span>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>", styles: [".container{display:block;width:100%}.open{height:120px}.closed{height:40px}.edit-icon-container{position:absolute;right:0%;transform:translate(0);top:0;cursor:pointer}.edit-icon-container:hover{background-color:gray;color:#fff;padding:2px}label,.updated-label{color:gray;margin-right:5px}#input{display:inline}.cancel{grid-column:1;grid-row:2;height:80%;width:80px}.save{grid-column:2;grid-row:2;height:80%;width:80px}.default-content{position:absolute}.input{width:280px;grid-column:2;grid-row:1}.input-box{width:200px}.input-label{grid-column:1;grid-row:1}.updated{position:absolute}.add{color:#00f}.add:hover{text-decoration:underline;cursor:pointer}.content{position:relative}.btn:focus{outline:none!important}.edit-content{position:absolute;left:50%;transform:translate(-50%);display:grid;grid-template-columns:150px 200px;grid-template-rows:50px 50px}.updated-content{display:block}.header{color:gray;border-bottom:1px solid grey;height:30px;font-size:20px;margin-bottom:10px;margin-top:10px}.input-with-appended-unit input{padding-left:20px;text-align:left}.input-with-appended-unit span{position:relative;left:20px;color:gray}.edit-actions{grid-column:2;grid-row:2;display:grid;grid-template-columns:50% 50%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { saveWasClicked: [{
+                type: Output
+            }], defaultvalue: [{
+                type: Input
+            }], inputType: [{
+                type: Input
+            }], newLabel: [{
+                type: Input
+            }], headerLabel: [{
+                type: Input
+            }], showUnit: [{
+                type: Input
+            }], unit: [{
+                type: Input
+            }], unitType: [{
+                type: Input
+            }], isEditable: [{
+                type: Input
+            }], showHeader: [{
+                type: Input
+            }], value: [{
+                type: Input
+            }] } });
 
 class FormControlValidationMsgDirectiveForInput {
     elRef;
@@ -2005,6 +2185,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 args: ['blur', ["$event"]]
             }] } });
 
+class CustomDecimalPointTwoDigitsDirective {
+    control;
+    valueSubscription;
+    constructor(control) {
+        this.control = control;
+    }
+    ngOnInit() {
+        if (this.control.value) {
+            this.control.valueAccessor.writeValue(this.transformToCommasAndPoint(this.control.value));
+        }
+        this.valueSubscription = this.control.control.valueChanges.subscribe(value => {
+            if (value.length > 0) {
+                let removeCommas = this.control.value.replace(/,/g, '');
+                this.control.control.setValue(removeCommas, { emitEvent: false, emitModelToViewChange: false });
+            }
+            else {
+                this.control.control.setValue(null, { emitEvent: false, emitModelToViewChange: false });
+            }
+        });
+    }
+    onEvent($event) {
+        if (this.control.value) {
+            const item = $event.target;
+            item.value = this.transformToCommasAndPoint(this.control.value);
+            let removeCommas = this.control.value.replace(/,/g, '');
+            this.control.control.setValue(removeCommas, { emitEvent: false, emitModelToViewChange: false });
+        }
+    }
+    transformToCommasAndPoint(value) {
+        if (value.indexOf(".") == -1) {
+            value = value.toString().replace(/\D/g, "")
+                .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+            return value;
+        }
+        else {
+            let val = value.split(".");
+            let valueBeforeDecimal = val[0];
+            let valueAfterDecimal = val[1];
+            valueBeforeDecimal = valueBeforeDecimal.toString().replace(/\D/g, "")
+                .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+            let newValue = `${valueBeforeDecimal}.${valueAfterDecimal}`;
+            return newValue;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomDecimalPointTwoDigitsDirective, deps: [{ token: i2$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: CustomDecimalPointTwoDigitsDirective, selector: "[customDecimalPointTwoDigits]", host: { listeners: { "input": "onEvent($event)" } }, providers: [NgModel, DecimalPipe], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CustomDecimalPointTwoDigitsDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[customDecimalPointTwoDigits]',
+                    providers: [NgModel, DecimalPipe],
+                }]
+        }], ctorParameters: function () { return [{ type: i2$1.NgControl }]; }, propDecorators: { onEvent: [{
+                type: HostListener,
+                args: ["input", ["$event"]]
+            }] } });
+
 class GeneralInputRendererComponent {
     params;
     key;
@@ -2047,50 +2285,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
             args: [{ selector: 'general-input-renderer-test', template: "<div *ngIf=\"formGroup\" [formGroup]=\"formGroup\">\r\n    <div *ngIf=\"params.isTypeText\">\r\n        <input [placeholder]=\"params.fieldLabel\"appFormControlValidationMsgForInputs [showBoxError]=\"false\"\r\n            [errorDivId]=\"'text'\" \r\n            (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" />\r\n        <span *ngIf=\"params.showSymbol\"\r\n            style=\"margin-left:-20px ;\">{{params.symbol}}</span>\r\n        <show-table-errors\r\n            *ngIf=\"formGroup.get(this.key).errors && formGroup.get(this.key) && formGroup.get(this.key).touched\"\r\n            [message]=\"formGroup.get(this.key).errors.message\"></show-table-errors>\r\n    </div>\r\n    <div *ngIf=\"params.isTypeNumber\">\r\n        <input customDecimalPointTwoDigits  appFormControlValidationMsgForInputs [showBoxError]=\"false\"\r\n            [errorDivId]=\"'number'\" [placeholder]=\"params.fieldLabel\"\r\n            (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" />\r\n        <span *ngIf=\"params.showSymbol\"\r\n            style=\"margin-left:-20px ;\">{{params.symbol}}</span>\r\n                <show-table-errors\r\n                    *ngIf=\"formGroup.get(this.key).errors && formGroup.get(this.key).touched\"\r\n                    [message]=\"formGroup.get(this.key).errors.message\"></show-table-errors>\r\n    </div>\r\n    <div *ngIf=\"params.isTypeIntegerNumber\">\r\n        <input appFormControlValidationMsgForInputs [showBoxError]=\"false\"type=\"number\"\r\n            [errorDivId]=\"'integer'\" [placeholder]=\"params.fieldLabel\"\r\n            (change)=\"onCellDataChanged($event)\" [formControlName]=\"key\" />\r\n        <span *ngIf=\"params.showSymbol\"\r\n            style=\"margin-left:-20px ;\">{{params.symbol}}</span>\r\n        <show-table-errors\r\n            *ngIf=\"formGroup.get(this.key).errors && formGroup.get(this.key).touched\"\r\n            [message]=\"formGroup.get(this.key).errors.message\"></show-table-errors>\r\n    </div>\r\n    <div *ngIf=\"params.isTypeTextArea\">\r\n        <textarea class=\"text-area\" (change)=\"onCellDataChanged($event)\"\r\n            [placeholder]=\"params.fieldLabel\" class=\"main-height\"\r\n            [formControlName]=\"key\"></textarea>\r\n    </div>\r\n</div>", styles: ["textarea{padding-left:.5rem;border-radius:.3rem;height:3.5rem;font-size:1.2rem;border:solid #BEBEBE .1rem}textarea:focus{outline:none}textarea::placeholder{color:#676767}\n"] }]
         }], ctorParameters: function () { return []; } });
 
-class LabelAndField {
-    label;
-    field;
-}
-
-class AddAsteriskDirective {
-    elem;
-    show = true;
-    constructor(elem) {
-        this.elem = elem;
-    }
-    ngOnInit() {
-        this.toggleAsterisk();
-    }
-    ngOnChanges(changes) {
-        this.toggleAsterisk();
-    }
-    toggleAsterisk() {
-        const existingAsterisk = this.elem.nativeElement.querySelector('.custom-asterisk');
-        if (this.show) {
-            if (!existingAsterisk) {
-                const customAsterisk = `<span class="custom-asterisk" style="color:${PrimaryColors.$primaryRedColor};"> *</span> `;
-                this.elem.nativeElement.insertAdjacentHTML('beforeend', customAsterisk);
-            }
-        }
-        else {
-            if (existingAsterisk) {
-                existingAsterisk.remove();
-            }
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddAsteriskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: AddAsteriskDirective, selector: "[addAsterisk]", inputs: { show: "show" }, usesOnChanges: true, ngImport: i0 });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: AddAsteriskDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[addAsterisk]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { show: [{
-                type: Input,
-                args: ['show']
-            }] } });
-
 class InputsModule {
     static forRoot(environment) {
         return {
@@ -2119,7 +2313,9 @@ class InputsModule {
             ShowTableErrorsComponent,
             FormControlValidationMsgDirectiveForInput,
             DropdownActionsComponent,
-            AddAsteriskDirective], imports: [CommonModule,
+            AddAsteriskDirective,
+            FormControlValidationMsgDirectiveForNgSelect,
+            TooltipMsgError], imports: [CommonModule,
             NgSelectModule,
             FormsModule,
             ReactiveFormsModule,
@@ -2162,7 +2358,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                         ShowTableErrorsComponent,
                         FormControlValidationMsgDirectiveForInput,
                         DropdownActionsComponent,
-                        AddAsteriskDirective
+                        AddAsteriskDirective,
+                        FormControlValidationMsgDirectiveForNgSelect,
+                        TooltipMsgError
                     ],
                     imports: [
                         CommonModule,
@@ -2189,6 +2387,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 }]
         }] });
 
+class LabelAndField {
+    label;
+    field;
+}
+
 /*
  * Public API Surface of inputs
  */
@@ -2197,5 +2400,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { AddAsteriskDirective, ChooseEnumComponent, ChooseEnumRendererComponent, ChooseGeneralItemComponent, ChooseGeneralItemRendererComponent, ChooseGeneralItemService, ChooseLineTypeComponent, ChooseYesOrNoComponent, ChooseYesOrNoRendererComponent, DropdownActionType, DropdownActionsComponent, DynamicPipe, EditableSavableInputComponent, FormControlValidationMsgDirectiveForInput, GeneralInputRendererComponent, InputsModule, LabelAndField, PrimaryColors, ShowTableErrorsComponent };
+export { AddAsteriskDirective, ChooseEnumComponent, ChooseEnumRendererComponent, ChooseGeneralItemComponent, ChooseGeneralItemRendererComponent, ChooseGeneralItemService, ChooseItemRendererValidationType, ChooseLineTypeComponent, ChooseYesOrNoComponent, ChooseYesOrNoRendererComponent, DropdownActionType, DropdownActionsComponent, DynamicPipe, EditableSavableInputComponent, FormControlValidationMsgDirectiveForInput, GeneralInputRendererComponent, InputsModule, LabelAndField, PrimaryColors, ShowTableErrorsComponent, ToolTipMessageType, TooltipMsgError };
 //# sourceMappingURL=inputs.mjs.map