@jooler/inputs 0.0.53 → 0.0.55

package/fesm2022/inputs.mjs

@@ -1,275 +1,23 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Component, Input, Output, Injectable, Inject, Pipe, Directive, HostListener, NgModule } 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, NgModel, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { NG_VALUE_ACCESSOR, NG_VALIDATORS, NgModel, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1 from '@angular/common';
 import { CurrencyPipe, DecimalPipe, CommonModule } from '@angular/common';
 import * as i2 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
 import * as i4 from '@jooler/shared-general-components';
-import { SharedGeneralComponentsModule } 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 * as i1$1 from '@angular/common/http';
-import { HttpHeaders } from '@angular/common/http';
-import * as i3 from '@angular/material/button';
-import { AppMaterialModule } from '@jooler/app-material';
+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$1 from '@angular/material/menu';
-
-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;
-        }
-        else {
-            throw new Error(`The length of your custom colors list does not match the enum class provided.`);
-        }
-    }
-    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;
-    }
-}
-// 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);
+import * as i3 from '@angular/material/menu';
+import * as i3$1 from '@angular/material/button';
+import { AppMaterialModule } from '@jooler/app-material';
 
 class CustomTheme {
     static $joolerBlue = [
@@ -375,53 +123,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;
@@ -461,10 +162,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;
         }
@@ -478,29 +175,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;
@@ -847,6 +538,53 @@ 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 []; } });
 
+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 = {}));
+
+var ChooseItemFullObjectControlConfig;
+(function (ChooseItemFullObjectControlConfig) {
+    ChooseItemFullObjectControlConfig[ChooseItemFullObjectControlConfig["OBJECT"] = 1] = "OBJECT";
+    ChooseItemFullObjectControlConfig[ChooseItemFullObjectControlConfig["ID"] = 2] = "ID";
+})(ChooseItemFullObjectControlConfig || (ChooseItemFullObjectControlConfig = {}));
+
+class DictionaryToHttpParamsConverter {
+    static dictionaryToHttpParamsConverter(form_dictionary) {
+        let queryParams = new HttpParams();
+        for (let key in form_dictionary) {
+            if (form_dictionary[key] !== null &&
+                form_dictionary[key] !== '' &&
+                form_dictionary[key] !== undefined &&
+                form_dictionary[key]?.length !== 0)
+                queryParams = queryParams.append(key, form_dictionary[key]);
+        }
+        return queryParams;
+    }
+}
+
 // import { environment } from '../../environments/environment';
 class ChooseGeneralItemService {
     http;
@@ -864,6 +602,21 @@ class ChooseGeneralItemService {
         });
         return { headers: httpHeaders };
     }
+    getHeadersAndParams(dictionary) {
+        let httpHeaders;
+        const token = localStorage.getItem('token');
+        if (token) {
+            httpHeaders = new HttpHeaders({
+                'Content-Type': 'application/json; charset-utf-8',
+                Authorization: 'Token ' + token,
+            });
+        }
+        else {
+            httpHeaders = new HttpHeaders();
+        }
+        const params = DictionaryToHttpParamsConverter.dictionaryToHttpParamsConverter(dictionary);
+        return { headers: httpHeaders, params: params };
+    }
     getAuthenticationHeadersWithQueryParams(params) {
         const token = localStorage.getItem("token");
         const httpHeaders = new HttpHeaders({
@@ -872,8 +625,13 @@ class ChooseGeneralItemService {
         });
         return { headers: httpHeaders, params: params };
     }
-    getData(apiPath) {
-        return this.http.get(`${this.env.apiURL}${apiPath}`, this.getHeaders());
+    getData(apiPath, filterParams) {
+        if (filterParams) {
+            return this.http.get(`${this.env.apiURL}${apiPath}`, this.getHeadersAndParams(filterParams));
+        }
+        else {
+            return this.http.get(`${this.env.apiURL}${apiPath}`, this.getHeaders());
+        }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemService, deps: [{ token: i1$1.HttpClient }, { token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemService, providedIn: 'root' });
@@ -888,22 +646,97 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                     args: ['env']
                 }] }]; } });
 
+var DropdownActionType;
+(function (DropdownActionType) {
+    DropdownActionType[DropdownActionType["ADD"] = 0] = "ADD";
+    DropdownActionType[DropdownActionType["MENU"] = 1] = "MENU";
+})(DropdownActionType || (DropdownActionType = {}));
+
+class DropdownActionsComponent {
+    _Router;
+    dropdownActionTypes = DropdownActionType;
+    canRoute = true;
+    disabled;
+    labelsAndRoutes = [];
+    route;
+    dropdownActionType = this.dropdownActionTypes.ADD;
+    addClicked = new EventEmitter();
+    constructor(_Router) {
+        this._Router = _Router;
+    }
+    ngOnInit() {
+        this.validateActions();
+    }
+    validateActions() {
+        if (this.dropdownActionType == this.dropdownActionTypes.ADD) {
+            if (this.canRoute) {
+                if (this.route == "" || this.route == undefined || this.route == null) {
+                    throw Error("Route needs to be provided.");
+                }
+            }
+            else {
+                if (this.route) {
+                    throw Error("Route shouldn't be provided since canRoute is false");
+                }
+            }
+        }
+        else if (this.dropdownActionType == this.dropdownActionTypes.MENU) {
+            if (!this.labelsAndRoutes.length) {
+                throw Error("A list of labels & Routes need to be provided for the actions menu.");
+            }
+        }
+        else {
+            throw Error("Dropdown Action Type is not recognized.");
+        }
+    }
+    onClickAdd($event) {
+        $event.preventDefault();
+        if (this.canRoute && this.route) {
+            this._Router.navigate([this.route]);
+        }
+        this.addClicked.emit();
+    }
+    onClickLabel(route, $event) {
+        $event.preventDefault();
+        this._Router.navigate([route]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownActionsComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownActionsComponent, selector: "dropdown-actions", inputs: { canRoute: "canRoute", disabled: "disabled", labelsAndRoutes: "labelsAndRoutes", route: "route", dropdownActionType: "dropdownActionType" }, outputs: { addClicked: "addClicked" }, ngImport: i0, template: "<div [ngSwitch]=\"dropdownActionType\">\r\n    <a *ngSwitchCase=\"dropdownActionTypes.ADD\" [href]=\"route\"\r\n        [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n        (click)=\"onClickAdd($event)\">\r\n        <fa-icon icon=\"plus\"></fa-icon>\r\n    </a>\r\n    <fa-icon *ngSwitchCase=\"dropdownActionTypes.MENU\"\r\n        [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n        class=\"menu\" [matMenuTriggerFor]=\"menu\"\r\n        icon=\"ellipsis-vertical\"></fa-icon>\r\n    <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let labelAndRoute of labelsAndRoutes\" mat-menu-item>\r\n            <a [href]=\"labelAndRoute.route\"\r\n                (click)=\"onClickLabel(labelAndRoute.route, $event)\">{{labelAndRoute.label}}</a>\r\n        </button>\r\n    </mat-menu>\r\n</div>", styles: [".action-enabled{cursor:pointer;color:#155ed4}.action-enabled:hover{color:#3178eb}.disabled{color:#676767;cursor:initial;pointer-events:none}.menu{font-size:1.8rem;display:flex;align-items:center}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { 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: DropdownActionsComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'dropdown-actions', template: "<div [ngSwitch]=\"dropdownActionType\">\r\n    <a *ngSwitchCase=\"dropdownActionTypes.ADD\" [href]=\"route\"\r\n        [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n        (click)=\"onClickAdd($event)\">\r\n        <fa-icon icon=\"plus\"></fa-icon>\r\n    </a>\r\n    <fa-icon *ngSwitchCase=\"dropdownActionTypes.MENU\"\r\n        [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n        class=\"menu\" [matMenuTriggerFor]=\"menu\"\r\n        icon=\"ellipsis-vertical\"></fa-icon>\r\n    <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let labelAndRoute of labelsAndRoutes\" mat-menu-item>\r\n            <a [href]=\"labelAndRoute.route\"\r\n                (click)=\"onClickLabel(labelAndRoute.route, $event)\">{{labelAndRoute.label}}</a>\r\n        </button>\r\n    </mat-menu>\r\n</div>", styles: [".action-enabled{cursor:pointer;color:#155ed4}.action-enabled:hover{color:#3178eb}.disabled{color:#676767;cursor:initial;pointer-events:none}.menu{font-size:1.8rem;display:flex;align-items:center}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1$2.Router }]; }, propDecorators: { canRoute: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], labelsAndRoutes: [{
+                type: Input
+            }], route: [{
+                type: Input
+            }], dropdownActionType: [{
+                type: Input
+            }], addClicked: [{
+                type: Output
+            }] } });
+
 class ChooseGeneralItemComponent {
     _ChooseGeneralItemService;
-    change = new EventEmitter();
+    dialog;
+    _cdr;
+    primaryRed = PrimaryColors.$primaryRedColor;
+    isLoading = false;
     items;
-    label;
-    appendTo;
+    label = 'label';
+    appendTo = 'body';
     placeholder;
     apiPath;
-    isMultiple;
+    isMultiple = false;
     hideSelectedItem;
     objects;
-    showLabel;
+    showLabel = false;
     separator;
-    width = 20;
-    fontWeight;
-    fontSize;
+    width;
     isChip = false;
     isTypeDate;
     chipColor = 'black';
@@ -911,20 +744,81 @@ class ChooseGeneralItemComponent {
     chipWidth = 11;
     selectedItemId;
     disabled;
+    readOnly;
     useFullObject = false;
-    constructor(_ChooseGeneralItemService) {
+    showAdd = false;
+    dialogComponentClass;
+    showDialogDefaultButtons = false;
+    dialogComponentInputs = {
+        isDialog: true,
+    };
+    bindValueKey = 'id'; // or null for full object
+    addRoute;
+    canActionsRoute;
+    dialogTitle;
+    clearable = true;
+    filterParams;
+    templateType = ChooseObjectTemplateType.DEFAULT;
+    basicTemplateData;
+    contentProjectionLabelKey;
+    fullObjectControlConfig = ChooseItemFullObjectControlConfig.ID;
+    change = new EventEmitter();
+    blur = new EventEmitter();
+    customOptionTemplate;
+    ChooseObjectTemplateType = ChooseObjectTemplateType;
+    chipInputTypes = ChipInputType;
+    constructor(_ChooseGeneralItemService, dialog, _cdr) {
         this._ChooseGeneralItemService = _ChooseGeneralItemService;
+        this.dialog = dialog;
+        this._cdr = _cdr;
     }
     ngOnInit() {
-        if (!this.items)
+        if (this.templateType == ChooseObjectTemplateType.BASIC) {
+            this.setupBasicTemplate();
+        }
+    }
+    setupBasicTemplate() { }
+    ngOnChanges(changes) {
+        if (changes['items'] && !changes.items) {
+            this.items = undefined;
+        }
+        if (changes['apiPath'] && !changes.apiPath) {
+            this.apiPath = undefined;
+        }
+        this.validateInputs(changes);
+        if (this.showAdd) {
+            this.validateAddConfiguration();
+        }
+        if (!changes['items'] || !changes['items'].currentValue) {
+            this.isLoading = true;
             this.getData();
+        }
+        else {
+            this.isLoading = false;
+        }
+    }
+    validateAddConfiguration() {
+        if ((this.addRoute == '' || this.addRoute == null || this.addRoute == undefined) &&
+            (this.dialogComponentClass == null || this.dialogComponentClass == undefined)) {
+            throw Error('Showing the add button requires either a route for the add button to route to, or a component class for a dialog to open up with that component.');
+        }
     }
     writeValue(item) {
-        if (item != undefined) {
-            this.selectedItemId = item;
+        if (item != undefined || item != null) {
+            if (!this.useFullObject) {
+                this.selectedItemId = item;
+            }
+            else {
+                if (Array.isArray(item)) {
+                    this.selectedItemId = item.map(item => item.id);
+                }
+                else {
+                    this.selectedItemId = item.id;
+                }
+            }
         }
-        else if (item == null) {
-            this.selectedItemId = item;
+        else {
+            this.selectedItemId = null;
         }
     }
     registerOnChange(fn) {
@@ -935,44 +829,116 @@ class ChooseGeneralItemComponent {
     }
     propagateChange = (_) => { };
     propogateTouch = () => { };
+    onValidationChange = () => { };
     updateBlur() {
         this.propogateTouch();
+        this.blur.emit();
     }
     onSelectedItemChanged($event) {
-        this.propagateChange(this.useFullObject ? $event : this.selectedItemId);
-        this.change.emit(this.useFullObject ? $event : this.selectedItemId);
+        let valueToPropagate;
+        if (this.fullObjectControlConfig == ChooseItemFullObjectControlConfig.ID) {
+            valueToPropagate = this.selectedItemId;
+        }
+        else if (this.fullObjectControlConfig == ChooseItemFullObjectControlConfig.OBJECT) {
+            valueToPropagate = $event;
+        }
+        else {
+            throw Error('ChooseItemFullObjectControlConfig is not recognized.');
+        }
+        this.propagateChange(valueToPropagate);
+        this.change.emit($event);
+        this.onValidationChange();
+    }
+    validateInputs(changes) {
+        if (changes.apiPath &&
+            changes.apiPath.currentValue &&
+            changes.items &&
+            changes.items.currentValue) {
+            throw Error('Both an API path and an items list was provided.');
+        }
     }
     getData() {
         if (this.apiPath) {
-            this._ChooseGeneralItemService.getData(this.apiPath).subscribe({
+            this._ChooseGeneralItemService.getData(this.apiPath, this.filterParams).subscribe({
                 next: (response) => {
                     this.items = response;
+                    this.isLoading = false;
+                    this._cdr.markForCheck();
+                    console.log("response: items from '", this.apiPath, "' found: ", this.items);
                 },
-                error: (error) => console.error("error", error)
+                error: error => console.error('error', error),
             });
         }
     }
     setWidth() {
-        let style = {
-            width: this.width + "rem"
-        };
+        let style = {};
+        if (this.width) {
+            style = {
+                width: this.width + 'rem',
+            };
+        }
+        else {
+            style = {
+                width: '100%',
+            };
+        }
         return style;
     }
-    setFontStyles() {
-        let fontStyle = {
-            fontWeight: this.fontWeight,
-            fontSize: this.fontSize + "rem",
-        };
-        return fontStyle;
+    onClickAddNew() {
+        console.log('DYNAMIC DIALOG NOT IMPLEMENTED IN LIBRARY YET');
+        // Add dynamic dialog later
+        // let dialogRef = this.dialog.open(DynamicDialogComponent, {
+        //   panelClass: 'custom-dialog-padding',
+        //   width: '90%',
+        //   minWidth: '90%',
+        //   maxHeight: '90vh',
+        //   data: {
+        //     component: this.dialogComponentClass,
+        //     showDefaultButtons: this.showDialogDefaultButtons,
+        //     title: this.dialogTitle,
+        //     inputs: this.dialogComponentInputs,
+        //   },
+        // });
+        // dialogRef.afterClosed().subscribe((data: any) => {
+        //   if (data) {
+        //     console.log('New item Added: ', data);
+        //     this.items.push(data);
+        //     this.items = [...this.items];
+        //   }
+        // });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemComponent, deps: [{ token: ChooseGeneralItemService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseGeneralItemComponent, selector: "choose-general-item", inputs: { items: "items", label: "label", appendTo: "appendTo", placeholder: "placeholder", apiPath: "apiPath", isMultiple: "isMultiple", hideSelectedItem: "hideSelectedItem", objects: "objects", showLabel: "showLabel", separator: "separator", width: "width", fontWeight: "fontWeight", fontSize: "fontSize", isChip: "isChip", isTypeDate: "isTypeDate", chipColor: "chipColor", chipTextColor: "chipTextColor", chipWidth: "chipWidth", selectedItemId: "selectedItemId", disabled: "disabled", useFullObject: "useFullObject" }, outputs: { change: "change" }, providers: [
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    registerOnValidatorChange(fn) {
+        this.onValidationChange = fn;
+    }
+    validate(control) {
+        return null;
+        if (control) {
+            const errors = control.errors;
+            if (errors) {
+                console.log('errorssss: ', errors);
+                return errors;
+            }
+            else {
+                return null;
+            }
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemComponent, deps: [{ token: ChooseGeneralItemService }, { token: i2$3.MatDialog }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseGeneralItemComponent, selector: "choose-general-item", inputs: { items: "items", label: "label", appendTo: "appendTo", placeholder: "placeholder", apiPath: "apiPath", isMultiple: "isMultiple", hideSelectedItem: "hideSelectedItem", objects: "objects", showLabel: "showLabel", separator: "separator", width: "width", isChip: "isChip", isTypeDate: "isTypeDate", chipColor: "chipColor", chipTextColor: "chipTextColor", chipWidth: "chipWidth", selectedItemId: "selectedItemId", disabled: "disabled", readOnly: "readOnly", useFullObject: "useFullObject", showAdd: "showAdd", dialogComponentClass: "dialogComponentClass", showDialogDefaultButtons: "showDialogDefaultButtons", dialogComponentInputs: "dialogComponentInputs", bindValueKey: "bindValueKey", addRoute: "addRoute", canActionsRoute: "canActionsRoute", dialogTitle: "dialogTitle", clearable: "clearable", filterParams: "filterParams", templateType: "templateType", basicTemplateData: "basicTemplateData", contentProjectionLabelKey: "contentProjectionLabelKey", fullObjectControlConfig: "fullObjectControlConfig" }, outputs: { change: "change", blur: "blur" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => ChooseGeneralItemComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<div class=\"select\">\r\n    <ng-select [hideSelected]=\"hideSelectedItem\" [closeOnSelect]=\"!isMultiple\" [ngStyle]=\"setWidth()\" class=\"component\"\r\n        [disabled]=\"disabled\" [appendTo]=\"appendTo\" dropdownPosition=\"bottom\" (blur)=\"updateBlur()\" [bindLabel]=\"label\"\r\n        bindValue=\"id\" [compareWith]=\"\" [items]=\"items\" [placeholder]=\"placeholder\"\r\n        (change)=\"onSelectedItemChanged($event)\" [(ngModel)]=\"selectedItemId\" [multiple]=\"isMultiple\">\r\n        <ng-template *ngIf=\"!isChip\" class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n            let-search=\"searchTerm\">\r\n            <span [ngStyle]=\"setFontStyles()\" *ngFor=\"let object of objects let isLast = last\">\r\n                <span *ngIf=\"showLabel && !isTypeDate\">\r\n                    {{object.label}}: {{item[object.field]}} {{isLast ? \"\" : separator}}\r\n                </span>\r\n                <span *ngIf=\"showLabel && isTypeDate\">\r\n                    {{object.label}}: {{item[object.field]| date: 'mediumDate'}} {{isLast ? \"\" : separator}}\r\n                </span>\r\n                <span *ngIf=\"!showLabel && isTypeDate\">\r\n                    {{item[object.field]| date: 'mediumDate'}} {{isLast ? \"\" : separator}}\r\n                </span>\r\n                <span *ngIf=\"!showLabel && !isTypeDate\">{{item[object.field]}}{{isLast ? \"\" : separator}}\r\n                </span>\r\n            </span>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"isChip\" ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <ng-chip (mousedown)=\"$event.stopPropagation()\" [clear]=\"clear\" [withCross]=\"isMultiple\" [item]=\"item\"\r\n                class=\"chip\" [backgroundColor]=\"chipColor\" [label]=\"item[objects[0].field]\"\r\n                [width]=\"chipWidth\">\r\n            </ng-chip>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"isChip\" ng-option-tmp let-clear=\"clear\" let-item=\"item\">\r\n            <ng-chip (mousedown)=\"$event.stopPropagation()\" [clear]=\"clear\" [withCross]=\"false\" [item]=\"item\"\r\n                class=\"chip\" [backgroundColor]=\"chipColor\" [label]=\"item[objects[0].field]\"\r\n                [width]=\"chipWidth\">\r\n            </ng-chip>\r\n        </ng-template>\r\n    </ng-select>\r\n</div>", styles: [""], dependencies: [{ 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.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"] }, { kind: "component", type: i4.NgChipComponent, selector: "ng-chip", inputs: ["backgroundColor", "size", "clear", "customColors", "enumClass", "enumValue", "inputType", "item", "isClickable", "label", "width", "withCross"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+            {
+                provide: NG_VALIDATORS,
+                useExisting: ChooseGeneralItemComponent,
+                multi: true,
+            },
+        ], queries: [{ propertyName: "customOptionTemplate", first: true, predicate: ["customOption"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"select\">\r\n    <ng-select [readonly]=\"readOnly\" [loading]=\"isLoading\" [hideSelected]=\"hideSelectedItem\"\r\n        [closeOnSelect]=\"!isMultiple\" [ngStyle]=\"setWidth()\" class=\"component\" [disabled]=\"disabled\"\r\n        [appendTo]=\"appendTo\" dropdownPosition=\"bottom\" (blur)=\"updateBlur()\" [bindLabel]=\"label\"\r\n        [bindValue]=\"bindValueKey\" [compareWith]=\"\" [items]=\"items\" [placeholder]=\"placeholder\"\r\n        (change)=\"onSelectedItemChanged($event)\" [(ngModel)]=\"selectedItemId\" [clearable]=\"clearable\"\r\n        [multiple]=\"isMultiple\">\r\n        <ng-container *ngIf=\"templateType == ChooseObjectTemplateType.DEFAULT\">\r\n            <ng-template *ngIf=\"isLoading\" ng-label-tmp let-item=\"item\" let-clear=\"clear\"> </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <ng-container *ngIf=\"objects; else nonObjectLabelTemplate\">\r\n                    <span class=\"template\" *ngFor=\"let object of objects; let isLast = last\">\r\n                        <span class=\"template-item\">\r\n                            {{ showLabel ? object.label + ': ' : ''\r\n                            }}{{\r\n                            isTypeDate ? (item[object.field] | date: 'mediumDate') : item[object.field]\r\n                            }}</span>\r\n                    </span>\r\n                </ng-container>\r\n                <ng-template #nonObjectLabelTemplate>{{ item }} </ng-template>\r\n            </ng-template>\r\n\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <ng-container *ngIf=\"objects; else nonObjectOptionTemplate\">\r\n                    <span *ngFor=\"let object of objects; let isLast = last\">\r\n                        {{ showLabel ? object.label + ': ' : ''\r\n                        }}{{ isTypeDate ? (item[object.field] | date: 'mediumDate') : item[object.field] }}\r\n                    </span>\r\n                </ng-container>\r\n                <ng-template #nonObjectOptionTemplate>{{ item }} </ng-template>\r\n            </ng-template>\r\n\r\n            <ng-template *ngIf=\"isChip && !isLoading\" ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <ng-chip (mousedown)=\"$event.stopPropagation()\" [clear]=\"clear\" [withCross]=\"isMultiple\"\r\n                    [inputType]=\"chipInputTypes.CUSTOM\"\r\n                    [backgroundColor]=\"item.disabled == true ? primaryRed : chipColor\" [label]=\"item[objects[0].field]\"\r\n                    [item]=\"item\">\r\n                </ng-chip>\r\n            </ng-template>\r\n            <ng-template *ngIf=\"isChip && !isLoading\" ng-option-tmp let-clear=\"clear\" let-item=\"item\">\r\n                <ng-chip (mousedown)=\"$event.stopPropagation()\" [withCross]=\"false\" [inputType]=\"chipInputTypes.CUSTOM\"\r\n                    [backgroundColor]=\"item.disabled == true ? primaryRed : chipColor\" [label]=\"item[objects[0].field]\">\r\n                </ng-chip>\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"templateType == ChooseObjectTemplateType.BASIC\">\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                {{ item[basicTemplateData.label] }}\r\n            </ng-template>\r\n            <ng-template ng-option-tmp let-clear=\"clear\" let-item=\"item\">\r\n                <mat-card class=\"basic-template-card\" [ngClass]=\"{\r\n              'with-image': basicTemplateData.hasImage,\r\n              'without-image': !basicTemplateData.hasImage,\r\n            }\">\r\n                    <div class=\"image-cont\" *ngIf=\"basicTemplateData.hasImage\">\r\n                        <img class=\"main-image\" [src]=\"item[basicTemplateData.image]\"\r\n                            onerror=\"this.src='../../../assets/images/defaultImage.jpg';\" />\r\n                    </div>\r\n\r\n                    <div class=\"info\">\r\n                        <div class=\"title\">\r\n                            {{ item[basicTemplateData.title] }}\r\n                        </div>\r\n                        <div class=\"subtitle-style\" *ngIf=\"basicTemplateData.hasSubtitleOne\">\r\n                            <span>{{ item[basicTemplateData.subtitleOne] }}</span>\r\n                            <ng-container *ngIf=\"basicTemplateData.hasSubtitleTwo\">\r\n                                <span class=\"col-divider\"> | </span>\r\n                                <span>{{ item[basicTemplateData.subtitleTwo] }}</span>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"description\" *ngIf=\"basicTemplateData.hasDescription\">\r\n                            {{ item[basicTemplateData.description] }}\r\n                        </div>\r\n                    </div>\r\n                </mat-card>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"templateType == ChooseObjectTemplateType.CONTENT_PROJECTION\">\r\n            <ng-template *ngIf=\"isLoading\" ng-label-tmp let-item=\"item\" let-clear=\"clear\"> </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <span class=\"template\">\r\n                    <span class=\"template-item\"> {{ item[contentProjectionLabelKey] }} </span>\r\n                </span>\r\n            </ng-template>\r\n\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <ng-container [ngTemplateOutlet]=\"customOptionTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n                </ng-container>\r\n            </ng-template>\r\n        </ng-container>\r\n    </ng-select>\r\n    <dropdown-actions *ngIf=\"showAdd\" [canRoute]=\"canActionsRoute\" [route]=\"addRoute\"\r\n        (addClicked)=\"onClickAddNew()\"></dropdown-actions>\r\n</div>\r\n  ", styles: [".template{background-color:#f0f2f4;border-radius:1.6rem;height:2.6rem;line-height:2.6rem;display:inline-block}.template-item{padding:.8rem 1.2rem}.basic-template-card{display:grid;row-gap:.4rem}.basic-template-card .image-cont,.basic-template-card .image-cont .main-image{max-width:100%;max-height:100%}.basic-template-card .info{display:flex;flex-direction:column;row-gap:.4rem;padding:.6rem;white-space:normal}.basic-template-card .info .title{font-weight:600;color:#155ed4}.basic-template-card .info .subtitle-style{font-weight:400}.basic-template-card .info .description{color:#676767;font-style:italic;font-size:1.1rem}.basic-template-card .info .col-divider{color:#12957e}.with-image{grid-template-columns:8rem auto}.without-image{grid-template-columns:auto}\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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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"] }, { kind: "component", type: i6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "component", type: i4.NgChipComponent, selector: "ng-chip", inputs: ["backgroundColor", "size", "clear", "customColors", "enumClass", "enumValue", "inputType", "item", "isClickable", "label", "width", "withCross"] }, { kind: "component", type: DropdownActionsComponent, selector: "dropdown-actions", inputs: ["canRoute", "disabled", "labelsAndRoutes", "route", "dropdownActionType"], outputs: ["addClicked"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemComponent, decorators: [{
             type: Component,
@@ -982,10 +948,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             useExisting: forwardRef(() => ChooseGeneralItemComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"select\">\r\n    <ng-select [hideSelected]=\"hideSelectedItem\" [closeOnSelect]=\"!isMultiple\" [ngStyle]=\"setWidth()\" class=\"component\"\r\n        [disabled]=\"disabled\" [appendTo]=\"appendTo\" dropdownPosition=\"bottom\" (blur)=\"updateBlur()\" [bindLabel]=\"label\"\r\n        bindValue=\"id\" [compareWith]=\"\" [items]=\"items\" [placeholder]=\"placeholder\"\r\n        (change)=\"onSelectedItemChanged($event)\" [(ngModel)]=\"selectedItemId\" [multiple]=\"isMultiple\">\r\n        <ng-template *ngIf=\"!isChip\" class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n            let-search=\"searchTerm\">\r\n            <span [ngStyle]=\"setFontStyles()\" *ngFor=\"let object of objects let isLast = last\">\r\n                <span *ngIf=\"showLabel && !isTypeDate\">\r\n                    {{object.label}}: {{item[object.field]}} {{isLast ? \"\" : separator}}\r\n                </span>\r\n                <span *ngIf=\"showLabel && isTypeDate\">\r\n                    {{object.label}}: {{item[object.field]| date: 'mediumDate'}} {{isLast ? \"\" : separator}}\r\n                </span>\r\n                <span *ngIf=\"!showLabel && isTypeDate\">\r\n                    {{item[object.field]| date: 'mediumDate'}} {{isLast ? \"\" : separator}}\r\n                </span>\r\n                <span *ngIf=\"!showLabel && !isTypeDate\">{{item[object.field]}}{{isLast ? \"\" : separator}}\r\n                </span>\r\n            </span>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"isChip\" ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n            <ng-chip (mousedown)=\"$event.stopPropagation()\" [clear]=\"clear\" [withCross]=\"isMultiple\" [item]=\"item\"\r\n                class=\"chip\" [backgroundColor]=\"chipColor\" [label]=\"item[objects[0].field]\"\r\n                [width]=\"chipWidth\">\r\n            </ng-chip>\r\n        </ng-template>\r\n        <ng-template *ngIf=\"isChip\" ng-option-tmp let-clear=\"clear\" let-item=\"item\">\r\n            <ng-chip (mousedown)=\"$event.stopPropagation()\" [clear]=\"clear\" [withCross]=\"false\" [item]=\"item\"\r\n                class=\"chip\" [backgroundColor]=\"chipColor\" [label]=\"item[objects[0].field]\"\r\n                [width]=\"chipWidth\">\r\n            </ng-chip>\r\n        </ng-template>\r\n    </ng-select>\r\n</div>" }]
-        }], ctorParameters: function () { return [{ type: ChooseGeneralItemService }]; }, propDecorators: { change: [{
-                type: Output
-            }], items: [{
+                        {
+                            provide: NG_VALIDATORS,
+                            useExisting: ChooseGeneralItemComponent,
+                            multi: true,
+                        },
+                    ], template: "<div class=\"select\">\r\n    <ng-select [readonly]=\"readOnly\" [loading]=\"isLoading\" [hideSelected]=\"hideSelectedItem\"\r\n        [closeOnSelect]=\"!isMultiple\" [ngStyle]=\"setWidth()\" class=\"component\" [disabled]=\"disabled\"\r\n        [appendTo]=\"appendTo\" dropdownPosition=\"bottom\" (blur)=\"updateBlur()\" [bindLabel]=\"label\"\r\n        [bindValue]=\"bindValueKey\" [compareWith]=\"\" [items]=\"items\" [placeholder]=\"placeholder\"\r\n        (change)=\"onSelectedItemChanged($event)\" [(ngModel)]=\"selectedItemId\" [clearable]=\"clearable\"\r\n        [multiple]=\"isMultiple\">\r\n        <ng-container *ngIf=\"templateType == ChooseObjectTemplateType.DEFAULT\">\r\n            <ng-template *ngIf=\"isLoading\" ng-label-tmp let-item=\"item\" let-clear=\"clear\"> </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <ng-container *ngIf=\"objects; else nonObjectLabelTemplate\">\r\n                    <span class=\"template\" *ngFor=\"let object of objects; let isLast = last\">\r\n                        <span class=\"template-item\">\r\n                            {{ showLabel ? object.label + ': ' : ''\r\n                            }}{{\r\n                            isTypeDate ? (item[object.field] | date: 'mediumDate') : item[object.field]\r\n                            }}</span>\r\n                    </span>\r\n                </ng-container>\r\n                <ng-template #nonObjectLabelTemplate>{{ item }} </ng-template>\r\n            </ng-template>\r\n\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <ng-container *ngIf=\"objects; else nonObjectOptionTemplate\">\r\n                    <span *ngFor=\"let object of objects; let isLast = last\">\r\n                        {{ showLabel ? object.label + ': ' : ''\r\n                        }}{{ isTypeDate ? (item[object.field] | date: 'mediumDate') : item[object.field] }}\r\n                    </span>\r\n                </ng-container>\r\n                <ng-template #nonObjectOptionTemplate>{{ item }} </ng-template>\r\n            </ng-template>\r\n\r\n            <ng-template *ngIf=\"isChip && !isLoading\" ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                <ng-chip (mousedown)=\"$event.stopPropagation()\" [clear]=\"clear\" [withCross]=\"isMultiple\"\r\n                    [inputType]=\"chipInputTypes.CUSTOM\"\r\n                    [backgroundColor]=\"item.disabled == true ? primaryRed : chipColor\" [label]=\"item[objects[0].field]\"\r\n                    [item]=\"item\">\r\n                </ng-chip>\r\n            </ng-template>\r\n            <ng-template *ngIf=\"isChip && !isLoading\" ng-option-tmp let-clear=\"clear\" let-item=\"item\">\r\n                <ng-chip (mousedown)=\"$event.stopPropagation()\" [withCross]=\"false\" [inputType]=\"chipInputTypes.CUSTOM\"\r\n                    [backgroundColor]=\"item.disabled == true ? primaryRed : chipColor\" [label]=\"item[objects[0].field]\">\r\n                </ng-chip>\r\n            </ng-template>\r\n        </ng-container>\r\n\r\n        <ng-container *ngIf=\"templateType == ChooseObjectTemplateType.BASIC\">\r\n            <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n                {{ item[basicTemplateData.label] }}\r\n            </ng-template>\r\n            <ng-template ng-option-tmp let-clear=\"clear\" let-item=\"item\">\r\n                <mat-card class=\"basic-template-card\" [ngClass]=\"{\r\n              'with-image': basicTemplateData.hasImage,\r\n              'without-image': !basicTemplateData.hasImage,\r\n            }\">\r\n                    <div class=\"image-cont\" *ngIf=\"basicTemplateData.hasImage\">\r\n                        <img class=\"main-image\" [src]=\"item[basicTemplateData.image]\"\r\n                            onerror=\"this.src='../../../assets/images/defaultImage.jpg';\" />\r\n                    </div>\r\n\r\n                    <div class=\"info\">\r\n                        <div class=\"title\">\r\n                            {{ item[basicTemplateData.title] }}\r\n                        </div>\r\n                        <div class=\"subtitle-style\" *ngIf=\"basicTemplateData.hasSubtitleOne\">\r\n                            <span>{{ item[basicTemplateData.subtitleOne] }}</span>\r\n                            <ng-container *ngIf=\"basicTemplateData.hasSubtitleTwo\">\r\n                                <span class=\"col-divider\"> | </span>\r\n                                <span>{{ item[basicTemplateData.subtitleTwo] }}</span>\r\n                            </ng-container>\r\n                        </div>\r\n                        <div class=\"description\" *ngIf=\"basicTemplateData.hasDescription\">\r\n                            {{ item[basicTemplateData.description] }}\r\n                        </div>\r\n                    </div>\r\n                </mat-card>\r\n            </ng-template>\r\n        </ng-container>\r\n        <ng-container *ngIf=\"templateType == ChooseObjectTemplateType.CONTENT_PROJECTION\">\r\n            <ng-template *ngIf=\"isLoading\" ng-label-tmp let-item=\"item\" let-clear=\"clear\"> </ng-template>\r\n\r\n            <ng-template ng-label-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <span class=\"template\">\r\n                    <span class=\"template-item\"> {{ item[contentProjectionLabelKey] }} </span>\r\n                </span>\r\n            </ng-template>\r\n\r\n            <!-- Option Template -->\r\n            <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\">\r\n                <ng-container [ngTemplateOutlet]=\"customOptionTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\">\r\n                </ng-container>\r\n            </ng-template>\r\n        </ng-container>\r\n    </ng-select>\r\n    <dropdown-actions *ngIf=\"showAdd\" [canRoute]=\"canActionsRoute\" [route]=\"addRoute\"\r\n        (addClicked)=\"onClickAddNew()\"></dropdown-actions>\r\n</div>\r\n  ", styles: [".template{background-color:#f0f2f4;border-radius:1.6rem;height:2.6rem;line-height:2.6rem;display:inline-block}.template-item{padding:.8rem 1.2rem}.basic-template-card{display:grid;row-gap:.4rem}.basic-template-card .image-cont,.basic-template-card .image-cont .main-image{max-width:100%;max-height:100%}.basic-template-card .info{display:flex;flex-direction:column;row-gap:.4rem;padding:.6rem;white-space:normal}.basic-template-card .info .title{font-weight:600;color:#155ed4}.basic-template-card .info .subtitle-style{font-weight:400}.basic-template-card .info .description{color:#676767;font-style:italic;font-size:1.1rem}.basic-template-card .info .col-divider{color:#12957e}.with-image{grid-template-columns:8rem auto}.without-image{grid-template-columns:auto}\n"] }]
+        }], ctorParameters: function () { return [{ type: ChooseGeneralItemService }, { type: i2$3.MatDialog }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
                 type: Input
             }], label: [{
                 type: Input
@@ -1007,10 +976,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], width: [{
                 type: Input
-            }], fontWeight: [{
-                type: Input
-            }], fontSize: [{
-                type: Input
             }], isChip: [{
                 type: Input
             }], isTypeDate: [{
@@ -1025,8 +990,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], disabled: [{
                 type: Input
+            }], readOnly: [{
+                type: Input
             }], useFullObject: [{
                 type: Input
+            }], showAdd: [{
+                type: Input
+            }], dialogComponentClass: [{
+                type: Input
+            }], showDialogDefaultButtons: [{
+                type: Input
+            }], dialogComponentInputs: [{
+                type: Input
+            }], bindValueKey: [{
+                type: Input
+            }], addRoute: [{
+                type: Input
+            }], canActionsRoute: [{
+                type: Input
+            }], dialogTitle: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], filterParams: [{
+                type: Input
+            }], templateType: [{
+                type: Input
+            }], basicTemplateData: [{
+                type: Input
+            }], contentProjectionLabelKey: [{
+                type: Input
+            }], fullObjectControlConfig: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], customOptionTemplate: [{
+                type: ContentChild,
+                args: ['customOption']
             }] } });
 
 class ChooseGeneralItemRendererComponent {
@@ -1056,11 +1058,11 @@ class ChooseGeneralItemRendererComponent {
         return true;
     }
     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\"\r\n    [fontWeight]=\"params.fontWeight\" [fontSize]=\"params.fontSize\" [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: [""], dependencies: [{ kind: "component", type: ChooseGeneralItemComponent, selector: "choose-general-item", inputs: ["items", "label", "appendTo", "placeholder", "apiPath", "isMultiple", "hideSelectedItem", "objects", "showLabel", "separator", "width", "fontWeight", "fontSize", "isChip", "isTypeDate", "chipColor", "chipTextColor", "chipWidth", "selectedItemId", "disabled", "useFullObject"], outputs: ["change"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemRendererComponent, 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\"\r\n    [fontWeight]=\"params.fontWeight\" [fontSize]=\"params.fontSize\" [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>" }]
+            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 []; } });
 
 var LineType;
@@ -1365,7 +1367,7 @@ class EditableSavableInputComponent {
                 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.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" }] });
+        ], 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,
@@ -1759,80 +1761,6 @@ class LabelAndField {
     field;
 }
 
-var DropdownActionType;
-(function (DropdownActionType) {
-    DropdownActionType[DropdownActionType["ADD"] = 0] = "ADD";
-    DropdownActionType[DropdownActionType["MENU"] = 1] = "MENU";
-})(DropdownActionType || (DropdownActionType = {}));
-
-class DropdownActionsComponent {
-    _Router;
-    dropdownActionTypes = DropdownActionType;
-    canRoute = true;
-    disabled;
-    labelsAndRoutes = [];
-    route;
-    dropdownActionType = this.dropdownActionTypes.ADD;
-    addClicked = new EventEmitter();
-    constructor(_Router) {
-        this._Router = _Router;
-    }
-    ngOnInit() {
-        this.validateActions();
-    }
-    validateActions() {
-        if (this.dropdownActionType == this.dropdownActionTypes.ADD) {
-            if (this.canRoute) {
-                if (this.route == "" || this.route == undefined || this.route == null) {
-                    throw Error("Route needs to be provided.");
-                }
-            }
-            else {
-                if (this.route) {
-                    throw Error("Route shouldn't be provided since canRoute is false");
-                }
-            }
-        }
-        else if (this.dropdownActionType == this.dropdownActionTypes.MENU) {
-            if (!this.labelsAndRoutes.length) {
-                throw Error("A list of labels & Routes need to be provided for the actions menu.");
-            }
-        }
-        else {
-            throw Error("Dropdown Action Type is not recognized.");
-        }
-    }
-    onClickAdd($event) {
-        $event.preventDefault();
-        if (this.canRoute && this.route) {
-            this._Router.navigate([this.route]);
-        }
-        this.addClicked.emit();
-    }
-    onClickLabel(route, $event) {
-        $event.preventDefault();
-        this._Router.navigate([route]);
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropdownActionsComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropdownActionsComponent, selector: "dropdown-actions", inputs: { canRoute: "canRoute", disabled: "disabled", labelsAndRoutes: "labelsAndRoutes", route: "route", dropdownActionType: "dropdownActionType" }, outputs: { addClicked: "addClicked" }, ngImport: i0, template: "<div [ngSwitch]=\"dropdownActionType\">\r\n    <a *ngSwitchCase=\"dropdownActionTypes.ADD\" [href]=\"route\"\r\n        [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n        (click)=\"onClickAdd($event)\">\r\n        <fa-icon icon=\"plus\"></fa-icon>\r\n    </a>\r\n    <fa-icon *ngSwitchCase=\"dropdownActionTypes.MENU\"\r\n        [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n        class=\"menu\" [matMenuTriggerFor]=\"menu\"\r\n        icon=\"ellipsis-vertical\"></fa-icon>\r\n    <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let labelAndRoute of labelsAndRoutes\" mat-menu-item>\r\n            <a [href]=\"labelAndRoute.route\"\r\n                (click)=\"onClickLabel(labelAndRoute.route, $event)\">{{labelAndRoute.label}}</a>\r\n        </button>\r\n    </mat-menu>\r\n</div>", styles: [".action-enabled{cursor:pointer;color:#155ed4}.action-enabled:hover{color:#3178eb}.disabled{color:#676767;cursor:initial;pointer-events:none}.menu{font-size:1.8rem;display:flex;align-items:center}\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.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: i3$1.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "component", type: i3$1.MatMenuItem, selector: "[mat-menu-item]", inputs: ["disabled", "disableRipple", "role"], exportAs: ["matMenuItem"] }, { kind: "directive", type: i3$1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { 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: DropdownActionsComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'dropdown-actions', template: "<div [ngSwitch]=\"dropdownActionType\">\r\n    <a *ngSwitchCase=\"dropdownActionTypes.ADD\" [href]=\"route\"\r\n        [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n        (click)=\"onClickAdd($event)\">\r\n        <fa-icon icon=\"plus\"></fa-icon>\r\n    </a>\r\n    <fa-icon *ngSwitchCase=\"dropdownActionTypes.MENU\"\r\n        [ngClass]=\"{'action-enabled':!disabled, 'disabled': disabled}\"\r\n        class=\"menu\" [matMenuTriggerFor]=\"menu\"\r\n        icon=\"ellipsis-vertical\"></fa-icon>\r\n    <mat-menu #menu=\"matMenu\">\r\n        <button *ngFor=\"let labelAndRoute of labelsAndRoutes\" mat-menu-item>\r\n            <a [href]=\"labelAndRoute.route\"\r\n                (click)=\"onClickLabel(labelAndRoute.route, $event)\">{{labelAndRoute.label}}</a>\r\n        </button>\r\n    </mat-menu>\r\n</div>", styles: [".action-enabled{cursor:pointer;color:#155ed4}.action-enabled:hover{color:#3178eb}.disabled{color:#676767;cursor:initial;pointer-events:none}.menu{font-size:1.8rem;display:flex;align-items:center}\n"] }]
-        }], ctorParameters: function () { return [{ type: i1$2.Router }]; }, propDecorators: { canRoute: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], labelsAndRoutes: [{
-                type: Input
-            }], route: [{
-                type: Input
-            }], dropdownActionType: [{
-                type: Input
-            }], addClicked: [{
-                type: Output
-            }] } });
-
 class AddAsteriskDirective {
     elem;
     show = true;