@jooler/inputs 0.0.49 → 0.0.51

package/{fesm2020 → fesm2022}/inputs.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { EventEmitter, forwardRef, Component, Output, Input, Injectable, Inject, Pipe, Directive, HostListener, NgModule } from '@angular/core';
+import { EventEmitter, forwardRef, Component, Input, Output, Injectable, Inject, 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 * as i1 from '@angular/common';
@@ -17,1427 +17,1538 @@ import { AppMaterialModule } from '@jooler/app-material';
 import * as i1$2 from '@angular/router';
 import * as i3$1 from '@angular/material/menu';
 
-class CustomTheme {
-}
-CustomTheme.$joolerBlue = [
-    '#e3ecfa',
-    '#b9cff2',
-    '#8aafea',
-    '#5b8ee1',
-    '#3876da',
-    '#155ed4',
-    '#1256cf',
-    '#0f4cc9',
-    '#0c42c3',
-    '#0631b9',
-    '#e3e8ff',
-    '#b0bfff',
-    '#7d95ff',
-    '#6481ff',
-];
-CustomTheme.$joolerTeal = [
-    '#b8dfd8',
-    '#89cabf',
-    '#59b5a5',
-    '#36a591',
-    '#12957e',
-    '#108d76',
-    '#0d826b',
-    '#0a7861',
-    '#05674e',
-    '#97ffe1',
-    '#64ffd2',
-    '#31ffc3',
-    '#18ffbc',
-];
-CustomTheme.$joolerRed = [
-    '#f5e0e1',
-    '#e5b3b3',
-    '#d48081',
-    '#c24d4e',
-    '#b52628',
-    '#a80002',
-    '#a00002',
-    '#970001',
-    '#8d0001',
-    '#7d0001',
-    '#ffaaaa',
-    '#ff7777',
-    '#ff4444',
-    '#ff2a2a',
-];
-CustomTheme.$joolerPink = [
-    '#fdeaf3',
-    '#fbcbe1',
-    '#f8a8ce',
-    '#f585ba',
-    '#f26aab',
-    '#f0509c',
-    '#ee4994',
-    '#ec408a',
-    '#e93780',
-    '#e5276e',
-    '#ffffff',
-    '#ffeef4',
-    '#ffbbd3',
-    '#ffa1c2',
-];
-CustomTheme.$joolerPurple = [
-    '#fcf6fd',
-    '#f7e8f9',
-    '#f1d8f5',
-    '#ebc8f1',
-    '#e7bdee',
-    '#e3b1eb',
-    '#e0aae9',
-    '#dca1e5',
-    '#d898e2',
-    '#d088dd',
-    '#ffffff',
-    '#ffffff',
-    '#ffffff',
-    '#fcecff',
-];
+class CustomTheme {
+    static $joolerBlue = [
+        '#e3ecfa',
+        '#b9cff2',
+        '#8aafea',
+        '#5b8ee1',
+        '#3876da',
+        '#155ed4',
+        '#1256cf',
+        '#0f4cc9',
+        '#0c42c3',
+        '#0631b9',
+        '#e3e8ff',
+        '#b0bfff',
+        '#7d95ff',
+        '#6481ff',
+    ];
+    static $joolerTeal = [
+        '#b8dfd8',
+        '#89cabf',
+        '#59b5a5',
+        '#36a591',
+        '#12957e',
+        '#108d76',
+        '#0d826b',
+        '#0a7861',
+        '#05674e',
+        '#97ffe1',
+        '#64ffd2',
+        '#31ffc3',
+        '#18ffbc',
+    ];
+    static $joolerRed = [
+        '#f5e0e1',
+        '#e5b3b3',
+        '#d48081',
+        '#c24d4e',
+        '#b52628',
+        '#a80002',
+        '#a00002',
+        '#970001',
+        '#8d0001',
+        '#7d0001',
+        '#ffaaaa',
+        '#ff7777',
+        '#ff4444',
+        '#ff2a2a',
+    ];
+    static $joolerPink = [
+        '#fdeaf3',
+        '#fbcbe1',
+        '#f8a8ce',
+        '#f585ba',
+        '#f26aab',
+        '#f0509c',
+        '#ee4994',
+        '#ec408a',
+        '#e93780',
+        '#e5276e',
+        '#ffffff',
+        '#ffeef4',
+        '#ffbbd3',
+        '#ffa1c2',
+    ];
+    static $joolerPurple = [
+        '#fcf6fd',
+        '#f7e8f9',
+        '#f1d8f5',
+        '#ebc8f1',
+        '#e7bdee',
+        '#e3b1eb',
+        '#e0aae9',
+        '#dca1e5',
+        '#d898e2',
+        '#d088dd',
+        '#ffffff',
+        '#ffffff',
+        '#ffffff',
+        '#fcecff',
+    ];
+    static $joolerCombo = [
+        '#b9cff2',
+        '#b8dfd8',
+        '#ffaaaa',
+        '#fbcbe1',
+        '#f1d8f5',
+        '#8aafea',
+        '#97ffe1',
+        '#ff7777',
+        '#f585ba',
+        '#e7bdee',
+        '#6481ff',
+        '#18ffbc',
+        '#ff4444',
+        '#ffa1c2',
+        '#e0aae9',
+        '#1256cf',
+        '#108d76',
+        '#df0000',
+        '#ec408a',
+        '#d088dd',
+    ];
+}
 
-class EnumHelperBaseClass {
-    static getValuesArrayFromEnum(enumOptions, isAllCaps) {
-        let colors = CustomTheme.$joolerBlue;
-        let stringValues = [];
-        let enumObject;
-        let enumObjects = [];
-        for (let item in enumOptions) {
-            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();
-                    }
-                }
-                joinedString = splitStr.join(' ');
-                stringValues.splice(stringValues.indexOf(item), 1, joinedString);
-            }
-        }
-        let repeatedColors = [];
-        let i = 0;
-        for (let value of stringValues) {
-            // in case the array of colors is smaller than the stringValues array, we repeat the the colors so that they are enough
-            repeatedColors.push(colors[stringValues.indexOf(value) % colors.length]);
-            enumObject = {
-                value: Object.keys(enumOptions).map(Number)[i],
-                label: value,
-                color: repeatedColors[i],
-            };
-            enumObjects.push(enumObject);
-            i++;
-        }
-        return enumObjects;
-    }
-    static getLabelAndColorFromEnumValue(enumOptions, enumValue) {
-        let enumObjects = EnumHelperBaseClass.getValuesArrayFromEnum(enumOptions);
-        let enumObject;
-        for (let item of enumObjects) {
-            if (enumValue == item.value) {
-                enumObject = enumObjects[enumObjects.indexOf(item)];
-            }
-        }
-        return enumObject;
-    }
+class EnumHelperBaseClass {
+    static getEnumOptionsFromEnumClass(enumClass, customColors, isAllCaps) {
+        let colors = CustomTheme.$joolerCombo;
+        if (customColors && customColors.length > 0) {
+            colors = customColors;
+        }
+        let stringValues = [];
+        let enumOption;
+        let enumOptions = [];
+        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();
+                    }
+                }
+                joinedString = splitStr.join(' ');
+                stringValues.splice(stringValues.indexOf(item), 1, joinedString);
+            }
+        }
+        let repeatedColors = [];
+        let i = 0;
+        for (let label of stringValues) {
+            // in case the array of colors is smaller than the stringValues array, we repeat the the colors so that they are enough
+            repeatedColors.push(colors[stringValues.indexOf(label) % colors.length]);
+            enumOption = {
+                value: Object.keys(enumClass).map(Number)[i],
+                label: label,
+                color: repeatedColors[i],
+            };
+            enumOptions.push(enumOption);
+            i++;
+        }
+        return enumOptions;
+    }
+    static getLabelAndColorFromEnumValue(enumClass, enumValue, customColors) {
+        let enumOptions = EnumHelperBaseClass.getEnumOptionsFromEnumClass(enumClass, customColors);
+        let enumOption;
+        for (let item of enumOptions) {
+            if (enumValue == item.value) {
+                enumOption = enumOptions[enumOptions.indexOf(item)];
+            }
+        }
+        return enumOption;
+    }
 }
 
-class ChooseEnumComponent {
-    constructor() {
-        this.change = new EventEmitter();
-        this.close = new EventEmitter();
-        this.label = 'label';
-        this.appendTo = 'body';
-        this.allowAllCapsValues = false;
-        this.getValuesArrayFromEnum = EnumHelperBaseClass.getValuesArrayFromEnum;
-        this.isChip = true;
-        this.labelTextAlign = 'left';
-        this.indexesToDisable = [];
-        this.isDropdownDisabled = false;
-        this.percentWidth = false;
-        this.clearable = true;
-        this.colors = [];
-        this.propagateChange = (_) => { };
-        this.propogateTouch = () => { };
-    }
-    ngOnChanges() {
-        if (this.getValuesArrayFromEnum != null) {
-            this.items = this.getValuesArrayFromEnum(this.enumChoices, this.allowAllCapsValues);
-        }
-        if (this.isItemDisabled == true) {
-            if (this.indexesToDisable.length > 0) {
-                for (let index of this.indexesToDisable) {
-                    this.items[index].disabled = true;
-                }
-            }
-        }
-        if (this.isItemHidden == true) {
-            if (this.indexesToDisable.length > 0) {
-                for (let index of this.indexesToDisable) {
-                    let itemIndex = this.items.findIndex(item => item.value == index);
-                    this.items.splice(itemIndex, 1);
-                }
-            }
-        }
-    }
-    ngOnInit() {
-        if (this.getValuesArrayFromEnum != null) {
-            this.items = this.getValuesArrayFromEnum(this.enumChoices, this.allowAllCapsValues);
-        }
-        if (this.isItemDisabled == true) {
-            if (this.indexesToDisable.length > 0) {
-                for (let index of this.indexesToDisable) {
-                    this.items[index].disabled = true;
-                }
-            }
-        }
-        if (this.isItemHidden == true) {
-            if (this.indexesToDisable.length > 0) {
-                for (let index of this.indexesToDisable) {
-                    let itemIndex = this.items.findIndex(item => item.value == index);
-                    this.items.splice(itemIndex, 1);
-                }
-            }
-        }
-    }
-    writeValue(type) {
-        if (type != undefined) {
-            this.selectedItem = type;
-        }
-        else if (type == null) {
-            this.selectedItem = type;
-        }
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.propogateTouch = fn;
-    }
-    updateBlur() {
-        this.propogateTouch();
-        this.close.emit();
-    }
-    onSelectedItemChanged() {
-        this.propagateChange(this.selectedItem);
-        this.change.emit(this.selectedItem);
-    }
-    setDisabledState(isDisabled) {
-        this.isDropdownDisabled = isDisabled;
-    }
-    clear() {
-        this.selectedItem = null;
-    }
-    setStyles() {
-        let style = {
-            paddingTop: this.paddingTop + 'rem',
-        };
-        if (this.width) {
-            style['width'] = this.width + 'rem';
-        }
-        return style;
-    }
-    setLabelStyle() {
-        let style = {
-            textAlign: this.labelTextAlign,
-            fontWeight: this.labelTextFontWeight,
-            fontSize: this.labelTextFontSize + 'rem',
-        };
-        return style;
-    }
-}
-ChooseEnumComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseEnumComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChooseEnumComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChooseEnumComponent, selector: "choose-enum", inputs: { label: "label", appendTo: "appendTo", allowAllCapsValues: "allowAllCapsValues", isItemHidden: "isItemHidden", isItemDisabled: "isItemDisabled", enumChoices: "enumChoices", getValuesArrayFromEnum: "getValuesArrayFromEnum", isChip: "isChip", isMultiple: "isMultiple", placeholder: "placeholder", width: "width", paddingTop: "paddingTop", labelTextAlign: "labelTextAlign", labelTextFontWeight: "labelTextFontWeight", labelTextFontSize: "labelTextFontSize", selectedItem: "selectedItem", indexesToDisable: "indexesToDisable", isDropdownDisabled: "isDropdownDisabled", percentWidth: "percentWidth", clearable: "clearable" }, outputs: { change: "change", close: "close" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => ChooseEnumComponent),
-            multi: true,
-        },
-    ], usesOnChanges: true, ngImport: i0, template: "<div class=\"select\">\r\n    <ng-select [ngStyle]=\"setStyles()\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"value\" [items]=\"items\"\r\n        [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\" [(ngModel)]=\"selectedItem\"\r\n        [multiple]=\"isMultiple\" [disabled]=\"isDropdownDisabled\" [clearable]=\"clearable\"\r\n        [clearAllText]=\"'clear everything'\" (clear)=\"clear()\" [appendTo]=\"appendTo\" dropdownPosition=\"bottom\">\r\n        <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n            let-search=\"searchTerm\">\r\n            <div *ngIf=\"isChip\">\r\n                <ng-chip [enumClass]=\"enumChoices\" [enumValue]=\"item.value\"> </ng-chip>\r\n            </div>\r\n            <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n        </ng-template>\r\n    </ng-select>\r\n</div>", styles: [".select{width:100%}\n"], dependencies: [{ 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"], 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", "enumClass", "enumValue", "inputType", "item", "isClickable", "label", "width", "withCross"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseEnumComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'choose-enum', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ChooseEnumComponent),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"select\">\r\n    <ng-select [ngStyle]=\"setStyles()\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"value\" [items]=\"items\"\r\n        [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\" [(ngModel)]=\"selectedItem\"\r\n        [multiple]=\"isMultiple\" [disabled]=\"isDropdownDisabled\" [clearable]=\"clearable\"\r\n        [clearAllText]=\"'clear everything'\" (clear)=\"clear()\" [appendTo]=\"appendTo\" dropdownPosition=\"bottom\">\r\n        <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n            let-search=\"searchTerm\">\r\n            <div *ngIf=\"isChip\">\r\n                <ng-chip [enumClass]=\"enumChoices\" [enumValue]=\"item.value\"> </ng-chip>\r\n            </div>\r\n            <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n        </ng-template>\r\n    </ng-select>\r\n</div>", styles: [".select{width:100%}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { change: [{
-                type: Output
-            }], close: [{
-                type: Output
-            }], label: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], allowAllCapsValues: [{
-                type: Input
-            }], isItemHidden: [{
-                type: Input
-            }], isItemDisabled: [{
-                type: Input
-            }], enumChoices: [{
-                type: Input
-            }], getValuesArrayFromEnum: [{
-                type: Input
-            }], isChip: [{
-                type: Input
-            }], isMultiple: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], paddingTop: [{
-                type: Input
-            }], labelTextAlign: [{
-                type: Input
-            }], labelTextFontWeight: [{
-                type: Input
-            }], labelTextFontSize: [{
-                type: Input
-            }], selectedItem: [{
-                type: Input
-            }], indexesToDisable: [{
-                type: Input
-            }], isDropdownDisabled: [{
-                type: Input
-            }], percentWidth: [{
-                type: Input
-            }], clearable: [{
-                type: Input
+class ChooseEnumComponent {
+    items;
+    appendTo = 'body';
+    allowAllCapsValues = false;
+    clearable = true;
+    customColors;
+    enumChoices;
+    virtualScroll = false;
+    getValuesArrayFromEnum = EnumHelperBaseClass.getEnumOptionsFromEnumClass;
+    indexesToDisable = [];
+    isChip = true;
+    isDropdownDisabled = false;
+    isItemHidden;
+    isItemDisabled;
+    isMultiple;
+    label = 'label';
+    labelTextAlign = 'left';
+    labelTextFontWeight;
+    labelTextFontSize;
+    paddingTop;
+    placeholder;
+    percentWidth = false;
+    selectedItem;
+    width;
+    change = new EventEmitter();
+    close = new EventEmitter();
+    constructor() { }
+    ngOnChanges() {
+        if (this.getValuesArrayFromEnum != null) {
+            this.items = this.getValuesArrayFromEnum(this.enumChoices, this.customColors, this.allowAllCapsValues);
+        }
+        if (this.isItemDisabled == true) {
+            if (this.indexesToDisable.length > 0) {
+                for (let index of this.indexesToDisable) {
+                    this.items[index].disabled = true;
+                }
+            }
+        }
+        if (this.isItemHidden == true) {
+            if (this.indexesToDisable.length > 0) {
+                for (let index of this.indexesToDisable) {
+                    let itemIndex = this.items.findIndex((item) => item.value == index);
+                    this.items.splice(itemIndex, 1);
+                }
+            }
+        }
+    }
+    ngOnInit() {
+        if (this.getValuesArrayFromEnum != null) {
+            this.items = this.getValuesArrayFromEnum(this.enumChoices, this.customColors, this.allowAllCapsValues);
+        }
+        if (this.isItemDisabled == true) {
+            if (this.indexesToDisable.length > 0) {
+                for (let index of this.indexesToDisable) {
+                    this.items[index].disabled = true;
+                }
+            }
+        }
+        if (this.isItemHidden == true) {
+            if (this.indexesToDisable.length > 0) {
+                for (let index of this.indexesToDisable) {
+                    let itemIndex = this.items.findIndex((item) => item.value == index);
+                    this.items.splice(itemIndex, 1);
+                }
+            }
+        }
+    }
+    writeValue(type) {
+        if (type != undefined) {
+            this.selectedItem = type;
+        }
+        else if (type == null) {
+            this.selectedItem = type;
+        }
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.propogateTouch = fn;
+    }
+    propagateChange = (_) => { };
+    propogateTouch = () => { };
+    updateBlur() {
+        this.propogateTouch();
+        this.close.emit();
+    }
+    onSelectedItemChanged() {
+        this.propagateChange(this.selectedItem);
+        this.change.emit(this.selectedItem);
+    }
+    setDisabledState(isDisabled) {
+        this.isDropdownDisabled = isDisabled;
+    }
+    clear() {
+        this.selectedItem = null;
+    }
+    setStyles() {
+        let style = {
+            paddingTop: this.paddingTop + 'rem',
+        };
+        if (this.width) {
+            style['width'] = this.width + 'rem';
+        }
+        return style;
+    }
+    setLabelStyle() {
+        let style = {
+            textAlign: this.labelTextAlign,
+            fontWeight: this.labelTextFontWeight,
+            fontSize: this.labelTextFontSize + 'rem',
+        };
+        return style;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseEnumComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseEnumComponent, selector: "choose-enum", inputs: { appendTo: "appendTo", allowAllCapsValues: "allowAllCapsValues", clearable: "clearable", customColors: "customColors", enumChoices: "enumChoices", virtualScroll: "virtualScroll", getValuesArrayFromEnum: "getValuesArrayFromEnum", indexesToDisable: "indexesToDisable", isChip: "isChip", isDropdownDisabled: "isDropdownDisabled", isItemHidden: "isItemHidden", isItemDisabled: "isItemDisabled", isMultiple: "isMultiple", label: "label", labelTextAlign: "labelTextAlign", labelTextFontWeight: "labelTextFontWeight", labelTextFontSize: "labelTextFontSize", paddingTop: "paddingTop", placeholder: "placeholder", percentWidth: "percentWidth", selectedItem: "selectedItem", width: "width" }, outputs: { change: "change", close: "close" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ChooseEnumComponent),
+                multi: true,
+            },
+        ], usesOnChanges: true, ngImport: i0, template: "<div class=\"select\">\r\n  <ng-select\r\n    [ngStyle]=\"setStyles()\"\r\n    (blur)=\"updateBlur()\"\r\n    bindLabel=\"label\"\r\n    bindValue=\"value\"\r\n    [items]=\"items\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"onSelectedItemChanged()\"\r\n    [(ngModel)]=\"selectedItem\"\r\n    [multiple]=\"isMultiple\"\r\n    [disabled]=\"isDropdownDisabled\"\r\n    [clearable]=\"clearable\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [clearAllText]=\"'clear everything'\"\r\n    (clear)=\"clear()\"\r\n    [appendTo]=\"appendTo\"\r\n    dropdownPosition=\"bottom\">\r\n    <ng-template\r\n      class=\"template\"\r\n      ng-option-tmp\r\n      ng-label-tmp\r\n      let-item=\"item\"\r\n      let-index=\"index\"\r\n      let-search=\"searchTerm\">\r\n      <div *ngIf=\"isChip\">\r\n        <ng-chip [enumClass]=\"enumChoices\" [enumValue]=\"item.value\" [customColors]=\"customColors\">\r\n        </ng-chip>\r\n      </div>\r\n      <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n    </ng-template>\r\n  </ng-select>\r\n</div>\r\n", styles: [".select{width:100%}\n"], dependencies: [{ 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseEnumComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'choose-enum', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ChooseEnumComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"select\">\r\n  <ng-select\r\n    [ngStyle]=\"setStyles()\"\r\n    (blur)=\"updateBlur()\"\r\n    bindLabel=\"label\"\r\n    bindValue=\"value\"\r\n    [items]=\"items\"\r\n    [placeholder]=\"placeholder\"\r\n    (change)=\"onSelectedItemChanged()\"\r\n    [(ngModel)]=\"selectedItem\"\r\n    [multiple]=\"isMultiple\"\r\n    [disabled]=\"isDropdownDisabled\"\r\n    [clearable]=\"clearable\"\r\n    [virtualScroll]=\"virtualScroll\"\r\n    [clearAllText]=\"'clear everything'\"\r\n    (clear)=\"clear()\"\r\n    [appendTo]=\"appendTo\"\r\n    dropdownPosition=\"bottom\">\r\n    <ng-template\r\n      class=\"template\"\r\n      ng-option-tmp\r\n      ng-label-tmp\r\n      let-item=\"item\"\r\n      let-index=\"index\"\r\n      let-search=\"searchTerm\">\r\n      <div *ngIf=\"isChip\">\r\n        <ng-chip [enumClass]=\"enumChoices\" [enumValue]=\"item.value\" [customColors]=\"customColors\">\r\n        </ng-chip>\r\n      </div>\r\n      <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n    </ng-template>\r\n  </ng-select>\r\n</div>\r\n", styles: [".select{width:100%}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { appendTo: [{
+                type: Input
+            }], allowAllCapsValues: [{
+                type: Input
+            }], clearable: [{
+                type: Input
+            }], customColors: [{
+                type: Input
+            }], enumChoices: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
+            }], getValuesArrayFromEnum: [{
+                type: Input
+            }], indexesToDisable: [{
+                type: Input
+            }], isChip: [{
+                type: Input
+            }], isDropdownDisabled: [{
+                type: Input
+            }], isItemHidden: [{
+                type: Input
+            }], isItemDisabled: [{
+                type: Input
+            }], isMultiple: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelTextAlign: [{
+                type: Input
+            }], labelTextFontWeight: [{
+                type: Input
+            }], labelTextFontSize: [{
+                type: Input
+            }], paddingTop: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], percentWidth: [{
+                type: Input
+            }], selectedItem: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], close: [{
+                type: Output
             }] } });
 
-class ShowTableErrorsComponent {
-    ngOnInit() {
-    }
-    onMouseEnter() {
-        this.showDetails = true;
-    }
-    onMouseLeave() {
-        this.showDetails = false;
-    }
-}
-ShowTableErrorsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ShowTableErrorsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ShowTableErrorsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: "14.3.0", 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 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 ChooseEnumRendererComponent {
-    constructor() { }
-    agInit(params) {
-        this.params = params;
-        this.enumValue = params.value;
-        this.key = params.context.createKey(params.columnApi, params.column);
-    }
-    onCellDataChanged($event) {
-        let value = $event;
-        this.formControlValue = this.params.context.formGroup.get("entries").at(this.params.node.rowIndex);
-        this.formControlValue?.get(this.key).setValue(value);
-    }
-    refresh(params) {
-        return false;
-    }
-}
-ChooseEnumRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseEnumRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChooseEnumRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChooseEnumRendererComponent, selector: "choose-enum-renderer", ngImport: i0, template: "<choose-enum [label]=\"params.label\" [appendTo]=\"'body'\" [isItemHidden]=\"params.isItemHidden\"\r\n    [isItemDisabled]=\"params.isItemDisabled\" [labelTextAlign]=\"params.labelTextAlign\"\r\n    [labelTextFontWeight]=\"params.labelTextFontWeight\" [labelTextFontSize]=\"params.labelTextFontSize\"\r\n    [selectedItem]=\"params.value\" [indexesToDisable]=\"params.indexesToDisable\"\r\n    [isDropdownDisabled]=\"params.isDropdownDisabled\" [getValuesArrayFromEnum]=\"params.getLabelAndColorFromEnumValue\"\r\n    [enumChoices]=\"params.enumChoices\" [placeholder]=\"params.placeholder\" [width]=\"params.width\"\r\n    [isChip]=\"params.isChip\" [paddingTop]=\"params.paddingTop\" [allowAllCapsValues]=\"params.allowAllCapsValues\"\r\n    (change)=\"onCellDataChanged($event)\">\r\n</choose-enum>", styles: [""], dependencies: [{ kind: "component", type: ChooseEnumComponent, selector: "choose-enum", inputs: ["label", "appendTo", "allowAllCapsValues", "isItemHidden", "isItemDisabled", "enumChoices", "getValuesArrayFromEnum", "isChip", "isMultiple", "placeholder", "width", "paddingTop", "labelTextAlign", "labelTextFontWeight", "labelTextFontSize", "selectedItem", "indexesToDisable", "isDropdownDisabled", "percentWidth", "clearable"], outputs: ["change", "close"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseEnumRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'choose-enum-renderer', template: "<choose-enum [label]=\"params.label\" [appendTo]=\"'body'\" [isItemHidden]=\"params.isItemHidden\"\r\n    [isItemDisabled]=\"params.isItemDisabled\" [labelTextAlign]=\"params.labelTextAlign\"\r\n    [labelTextFontWeight]=\"params.labelTextFontWeight\" [labelTextFontSize]=\"params.labelTextFontSize\"\r\n    [selectedItem]=\"params.value\" [indexesToDisable]=\"params.indexesToDisable\"\r\n    [isDropdownDisabled]=\"params.isDropdownDisabled\" [getValuesArrayFromEnum]=\"params.getLabelAndColorFromEnumValue\"\r\n    [enumChoices]=\"params.enumChoices\" [placeholder]=\"params.placeholder\" [width]=\"params.width\"\r\n    [isChip]=\"params.isChip\" [paddingTop]=\"params.paddingTop\" [allowAllCapsValues]=\"params.allowAllCapsValues\"\r\n    (change)=\"onCellDataChanged($event)\">\r\n</choose-enum>" }]
+class ChooseEnumRendererComponent {
+    params;
+    formControlValue;
+    key;
+    enumValue;
+    rowId;
+    constructor() { }
+    agInit(params) {
+        this.params = params;
+        this.enumValue = params.value;
+        this.key = params.context.createKey(params.columnApi, params.column);
+    }
+    onCellDataChanged($event) {
+        let value = $event;
+        this.formControlValue = this.params.context.formGroup.get("entries").at(this.params.node.rowIndex);
+        this.formControlValue?.get(this.key).setValue(value);
+    }
+    refresh(params) {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseEnumRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseEnumRendererComponent, selector: "choose-enum-renderer", ngImport: i0, template: "<choose-enum [label]=\"params.label\" [appendTo]=\"'body'\" [isItemHidden]=\"params.isItemHidden\"\r\n    [isItemDisabled]=\"params.isItemDisabled\" [labelTextAlign]=\"params.labelTextAlign\"\r\n    [labelTextFontWeight]=\"params.labelTextFontWeight\" [labelTextFontSize]=\"params.labelTextFontSize\"\r\n    [selectedItem]=\"params.value\" [indexesToDisable]=\"params.indexesToDisable\"\r\n    [isDropdownDisabled]=\"params.isDropdownDisabled\" [getValuesArrayFromEnum]=\"params.getLabelAndColorFromEnumValue\"\r\n    [enumChoices]=\"params.enumChoices\" [placeholder]=\"params.placeholder\" [width]=\"params.width\"\r\n    [isChip]=\"params.isChip\" [paddingTop]=\"params.paddingTop\" [allowAllCapsValues]=\"params.allowAllCapsValues\"\r\n    (change)=\"onCellDataChanged($event)\">\r\n</choose-enum>", styles: [""], dependencies: [{ kind: "component", type: ChooseEnumComponent, selector: "choose-enum", inputs: ["appendTo", "allowAllCapsValues", "clearable", "customColors", "enumChoices", "virtualScroll", "getValuesArrayFromEnum", "indexesToDisable", "isChip", "isDropdownDisabled", "isItemHidden", "isItemDisabled", "isMultiple", "label", "labelTextAlign", "labelTextFontWeight", "labelTextFontSize", "paddingTop", "placeholder", "percentWidth", "selectedItem", "width"], outputs: ["change", "close"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseEnumRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'choose-enum-renderer', template: "<choose-enum [label]=\"params.label\" [appendTo]=\"'body'\" [isItemHidden]=\"params.isItemHidden\"\r\n    [isItemDisabled]=\"params.isItemDisabled\" [labelTextAlign]=\"params.labelTextAlign\"\r\n    [labelTextFontWeight]=\"params.labelTextFontWeight\" [labelTextFontSize]=\"params.labelTextFontSize\"\r\n    [selectedItem]=\"params.value\" [indexesToDisable]=\"params.indexesToDisable\"\r\n    [isDropdownDisabled]=\"params.isDropdownDisabled\" [getValuesArrayFromEnum]=\"params.getLabelAndColorFromEnumValue\"\r\n    [enumChoices]=\"params.enumChoices\" [placeholder]=\"params.placeholder\" [width]=\"params.width\"\r\n    [isChip]=\"params.isChip\" [paddingTop]=\"params.paddingTop\" [allowAllCapsValues]=\"params.allowAllCapsValues\"\r\n    (change)=\"onCellDataChanged($event)\">\r\n</choose-enum>" }]
         }], ctorParameters: function () { return []; } });
 
-// import { environment } from '../../environments/environment';
-class ChooseGeneralItemService {
-    // baseUrl: string = environment.apiURL;
-    constructor(http, env) {
-        this.http = http;
-        this.env = env;
-    } //we have an issue with this line of code...can we meet to resolve it!
-    getHeaders() {
-        const token = localStorage.getItem("token");
-        const httpHeaders = new HttpHeaders({
-            'Content-Type': "application/json",
-            'Authorization': 'Token ' + token
-        });
-        return { headers: httpHeaders };
-    }
-    getAuthenticationHeadersWithQueryParams(params) {
-        const token = localStorage.getItem("token");
-        const httpHeaders = new HttpHeaders({
-            'Content-Type': "application/json",
-            'Authorization': 'Token ' + token
-        });
-        return { headers: httpHeaders, params: params };
-    }
-    getData(apiPath) {
-        return this.http.get(`${this.env.apiURL}${apiPath}`, this.getHeaders());
-    }
-}
-ChooseGeneralItemService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseGeneralItemService, deps: [{ token: i1$1.HttpClient }, { token: 'env' }], target: i0.ɵɵFactoryTarget.Injectable });
-ChooseGeneralItemService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseGeneralItemService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseGeneralItemService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: ['env']
+// import { environment } from '../../environments/environment';
+class ChooseGeneralItemService {
+    http;
+    env;
+    // baseUrl: string = environment.apiURL;
+    constructor(http, env) {
+        this.http = http;
+        this.env = env;
+    } //we have an issue with this line of code...can we meet to resolve it!
+    getHeaders() {
+        const token = localStorage.getItem("token");
+        const httpHeaders = new HttpHeaders({
+            'Content-Type': "application/json",
+            'Authorization': 'Token ' + token
+        });
+        return { headers: httpHeaders };
+    }
+    getAuthenticationHeadersWithQueryParams(params) {
+        const token = localStorage.getItem("token");
+        const httpHeaders = new HttpHeaders({
+            'Content-Type': "application/json",
+            'Authorization': 'Token ' + token
+        });
+        return { headers: httpHeaders, params: params };
+    }
+    getData(apiPath) {
+        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' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.HttpClient }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: ['env']
                 }] }]; } });
 
-class ChooseGeneralItemComponent {
-    constructor(_ChooseGeneralItemService) {
-        this._ChooseGeneralItemService = _ChooseGeneralItemService;
-        this.change = new EventEmitter();
-        this.width = 20;
-        this.isChip = false;
-        this.chipColor = 'black';
-        this.chipTextColor = 'white';
-        this.chipWidth = 11;
-        this.useFullObject = false;
-        this.propagateChange = (_) => { };
-        this.propogateTouch = () => { };
-    }
-    ngOnInit() {
-        if (!this.items)
-            this.getData();
-    }
-    writeValue(item) {
-        if (item != undefined) {
-            this.selectedItemId = item;
-        }
-        else if (item == null) {
-            this.selectedItemId = item;
-        }
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.propogateTouch = fn;
-    }
-    updateBlur() {
-        this.propogateTouch();
-    }
-    onSelectedItemChanged($event) {
-        this.propagateChange(this.useFullObject ? $event : this.selectedItemId);
-        this.change.emit(this.useFullObject ? $event : this.selectedItemId);
-    }
-    getData() {
-        if (this.apiPath) {
-            this._ChooseGeneralItemService.getData(this.apiPath).subscribe({
-                next: (response) => {
-                    this.items = response;
-                },
-                error: (error) => console.error("error", error)
-            });
-        }
-    }
-    setWidth() {
-        let style = {
-            width: this.width + "rem"
-        };
-        return style;
-    }
-    setFontStyles() {
-        let fontStyle = {
-            fontWeight: this.fontWeight,
-            fontSize: this.fontSize + "rem",
-        };
-        return fontStyle;
-    }
-}
-ChooseGeneralItemComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseGeneralItemComponent, deps: [{ token: ChooseGeneralItemService }], target: i0.ɵɵFactoryTarget.Component });
-ChooseGeneralItemComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: [
-        {
-            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"], 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", "enumClass", "enumValue", "inputType", "item", "isClickable", "label", "width", "withCross"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseGeneralItemComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'choose-general-item', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            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: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], appendTo: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
-            }], apiPath: [{
-                type: Input
-            }], isMultiple: [{
-                type: Input
-            }], hideSelectedItem: [{
-                type: Input
-            }], objects: [{
-                type: Input
-            }], showLabel: [{
-                type: Input
-            }], separator: [{
-                type: Input
-            }], width: [{
-                type: Input
-            }], fontWeight: [{
-                type: Input
-            }], fontSize: [{
-                type: Input
-            }], isChip: [{
-                type: Input
-            }], isTypeDate: [{
-                type: Input
-            }], chipColor: [{
-                type: Input
-            }], chipTextColor: [{
-                type: Input
-            }], chipWidth: [{
-                type: Input
-            }], selectedItemId: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], useFullObject: [{
-                type: Input
+class ChooseGeneralItemComponent {
+    _ChooseGeneralItemService;
+    change = new EventEmitter();
+    items;
+    label;
+    appendTo;
+    placeholder;
+    apiPath;
+    isMultiple;
+    hideSelectedItem;
+    objects;
+    showLabel;
+    separator;
+    width = 20;
+    fontWeight;
+    fontSize;
+    isChip = false;
+    isTypeDate;
+    chipColor = 'black';
+    chipTextColor = 'white';
+    chipWidth = 11;
+    selectedItemId;
+    disabled;
+    useFullObject = false;
+    constructor(_ChooseGeneralItemService) {
+        this._ChooseGeneralItemService = _ChooseGeneralItemService;
+    }
+    ngOnInit() {
+        if (!this.items)
+            this.getData();
+    }
+    writeValue(item) {
+        if (item != undefined) {
+            this.selectedItemId = item;
+        }
+        else if (item == null) {
+            this.selectedItemId = item;
+        }
+    }
+    registerOnChange(fn) {
+        this.propagateChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.propogateTouch = fn;
+    }
+    propagateChange = (_) => { };
+    propogateTouch = () => { };
+    updateBlur() {
+        this.propogateTouch();
+    }
+    onSelectedItemChanged($event) {
+        this.propagateChange(this.useFullObject ? $event : this.selectedItemId);
+        this.change.emit(this.useFullObject ? $event : this.selectedItemId);
+    }
+    getData() {
+        if (this.apiPath) {
+            this._ChooseGeneralItemService.getData(this.apiPath).subscribe({
+                next: (response) => {
+                    this.items = response;
+                },
+                error: (error) => console.error("error", error)
+            });
+        }
+    }
+    setWidth() {
+        let style = {
+            width: this.width + "rem"
+        };
+        return style;
+    }
+    setFontStyles() {
+        let fontStyle = {
+            fontWeight: this.fontWeight,
+            fontSize: this.fontSize + "rem",
+        };
+        return fontStyle;
+    }
+    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: [
+            {
+                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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseGeneralItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'choose-general-item', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            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: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], appendTo: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], apiPath: [{
+                type: Input
+            }], isMultiple: [{
+                type: Input
+            }], hideSelectedItem: [{
+                type: Input
+            }], objects: [{
+                type: Input
+            }], showLabel: [{
+                type: Input
+            }], separator: [{
+                type: Input
+            }], width: [{
+                type: Input
+            }], fontWeight: [{
+                type: Input
+            }], fontSize: [{
+                type: Input
+            }], isChip: [{
+                type: Input
+            }], isTypeDate: [{
+                type: Input
+            }], chipColor: [{
+                type: Input
+            }], chipTextColor: [{
+                type: Input
+            }], chipWidth: [{
+                type: Input
+            }], selectedItemId: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], useFullObject: [{
+                type: Input
             }] } });
 
-class ChooseGeneralItemRendererComponent {
-    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;
-    }
-    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);
-    }
-    refresh(params) {
-        return true;
-    }
-}
-ChooseGeneralItemRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseGeneralItemRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChooseGeneralItemRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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>" }]
+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;
+    }
+    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);
+    }
+    refresh(params) {
+        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"] }] });
+}
+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>" }]
         }], ctorParameters: function () { return []; } });
 
-var LineType;
-(function (LineType) {
-    LineType[LineType["INCLUDE"] = 0] = "INCLUDE";
-    LineType[LineType["DO_NOT_INCLUDE"] = 1] = "DO_NOT_INCLUDE";
+var LineType;
+(function (LineType) {
+    LineType[LineType["INCLUDE"] = 0] = "INCLUDE";
+    LineType[LineType["DO_NOT_INCLUDE"] = 1] = "DO_NOT_INCLUDE";
 })(LineType || (LineType = {}));
 
-class LineTypeModelHelper {
-    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 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 {
-    constructor() {
-        this.items = LineTypeModelHelper;
-        this.propagateChange = (_) => { };
-        this.propogateTouch = () => { };
-    }
-    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;
-    }
-    updateBlur() {
-        this.propogateTouch();
-    }
-    onSelectedItemChanged() {
-        this.propagateChange(this.selectedItem);
-    }
-}
-ChooseLineTypeComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseLineTypeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChooseLineTypeComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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"], 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: "14.3.0", 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"] }]
+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 {
-    constructor() {
-        this.change = new EventEmitter();
-        this.items = [{ value: true, label: "Yes", color: "green" }, { value: false, label: "No", color: "red" }];
-        this.width = 200;
-        this.placeholder = "Choose either Yes or No";
-        this.propagateChange = (_) => { };
-        this.propogateTouch = () => { };
-    }
-    ngOnInit() {
-    }
-    writeValue(item) {
-        if (item != undefined || item != null) {
-            this.selectedItemValue = item;
-        }
-    }
-    registerOnChange(fn) {
-        this.propagateChange = fn;
-    }
-    registerOnTouched(fn) {
-        this.propogateTouch = fn;
-    }
-    updateBlur() {
-        this.propogateTouch();
-    }
-    onSelectedItemChanged() {
-        this.propagateChange(this.selectedItemValue);
-        this.change.emit(this.selectedItemValue);
-    }
-    setWidth() {
-        let style = {
-            width: this.width + "px"
-        };
-        return style;
-    }
-}
-ChooseYesOrNoComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseYesOrNoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChooseYesOrNoComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChooseYesOrNoComponent, selector: "choose-yes-or-no", inputs: { width: "width", selectedItemValue: "selectedItemValue", placeholder: "placeholder" }, outputs: { change: "change" }, providers: [
-        {
-            provide: NG_VALUE_ACCESSOR,
-            useExisting: forwardRef(() => ChooseYesOrNoComponent),
-            multi: true
-        }
-    ], ngImport: i0, template: "<div class=\"select\">\r\n    <ng-select [ngStyle]=\"setWidth()\" class=\"component\" appendTo=\"body\" (blur)=\"updateBlur()\"  [placeholder]=\"placeholder\" bindLabel=\"label\"\r\n        bindValue=\"value\" [items]=\"items\" [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\"\r\n        [(ngModel)]=\"selectedItemValue\" >\r\n        <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n            let-search=\"searchTerm\">\r\n            <span  [style.color]=\"item.color\">\r\n                {{item.label}}\r\n            </span>\r\n        </ng-template>\r\n    </ng-select>\r\n</div>\r\n", styles: [""], dependencies: [{ 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"], 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: "14.3.0", ngImport: i0, type: ChooseYesOrNoComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'choose-yes-or-no', providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => ChooseYesOrNoComponent),
-                            multi: true
-                        }
-                    ], template: "<div class=\"select\">\r\n    <ng-select [ngStyle]=\"setWidth()\" class=\"component\" appendTo=\"body\" (blur)=\"updateBlur()\"  [placeholder]=\"placeholder\" bindLabel=\"label\"\r\n        bindValue=\"value\" [items]=\"items\" [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\"\r\n        [(ngModel)]=\"selectedItemValue\" >\r\n        <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n            let-search=\"searchTerm\">\r\n            <span  [style.color]=\"item.color\">\r\n                {{item.label}}\r\n            </span>\r\n        </ng-template>\r\n    </ng-select>\r\n</div>\r\n" }]
-        }], ctorParameters: function () { return []; }, propDecorators: { change: [{
-                type: Output
-            }], width: [{
-                type: Input
-            }], selectedItemValue: [{
-                type: Input
-            }], placeholder: [{
-                type: Input
+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;
+    }
+    registerOnTouched(fn) {
+        this.propogateTouch = fn;
+    }
+    propagateChange = (_) => { };
+    propogateTouch = () => { };
+    updateBlur() {
+        this.propogateTouch();
+    }
+    onSelectedItemChanged() {
+        this.propagateChange(this.selectedItemValue);
+        this.change.emit(this.selectedItemValue);
+    }
+    setWidth() {
+        let style = {
+            width: this.width + "px"
+        };
+        return style;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseYesOrNoComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseYesOrNoComponent, selector: "choose-yes-or-no", inputs: { width: "width", selectedItemValue: "selectedItemValue", placeholder: "placeholder" }, outputs: { change: "change" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => ChooseYesOrNoComponent),
+                multi: true
+            }
+        ], ngImport: i0, template: "<div class=\"select\">\r\n    <ng-select [ngStyle]=\"setWidth()\" class=\"component\" appendTo=\"body\" (blur)=\"updateBlur()\"  [placeholder]=\"placeholder\" bindLabel=\"label\"\r\n        bindValue=\"value\" [items]=\"items\" [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\"\r\n        [(ngModel)]=\"selectedItemValue\" >\r\n        <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n            let-search=\"searchTerm\">\r\n            <span  [style.color]=\"item.color\">\r\n                {{item.label}}\r\n            </span>\r\n        </ng-template>\r\n    </ng-select>\r\n</div>\r\n", styles: [""], dependencies: [{ 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseYesOrNoComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'choose-yes-or-no', providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => ChooseYesOrNoComponent),
+                            multi: true
+                        }
+                    ], template: "<div class=\"select\">\r\n    <ng-select [ngStyle]=\"setWidth()\" class=\"component\" appendTo=\"body\" (blur)=\"updateBlur()\"  [placeholder]=\"placeholder\" bindLabel=\"label\"\r\n        bindValue=\"value\" [items]=\"items\" [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\"\r\n        [(ngModel)]=\"selectedItemValue\" >\r\n        <ng-template class=\"template\" ng-option-tmp ng-label-tmp let-item=\"item\" let-index=\"index\"\r\n            let-search=\"searchTerm\">\r\n            <span  [style.color]=\"item.color\">\r\n                {{item.label}}\r\n            </span>\r\n        </ng-template>\r\n    </ng-select>\r\n</div>\r\n" }]
+        }], ctorParameters: function () { return []; }, propDecorators: { change: [{
+                type: Output
+            }], width: [{
+                type: Input
+            }], selectedItemValue: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
             }] } });
 
-class ChooseYesOrNoRendererComponent {
-    constructor() { }
-    agInit(params) {
-        this.params = params;
-        this.booleanValue = params.value;
-        this.key = params.context.createKey(params.columnApi, params.column);
-        this.rowId = params.node.id;
-    }
-    onCellDataChanged($event) {
-        let value = $event;
-        this.formControlValue = this.params.context.formGroup.get("entries").at(this.rowId);
-        this.formControlValue.get(this.key).setValue(value);
-    }
-    refresh(params) {
-        return false;
-    }
-}
-ChooseYesOrNoRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseYesOrNoRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ChooseYesOrNoRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: ChooseYesOrNoRendererComponent, selector: "choose-yes-or-no-renderer", ngImport: i0, template: "<choose-yes-or-no [selectedItemValue]=\"booleanValue\" [width]=\"params.width\" (change) =\"onCellDataChanged($event)\"    [placeholder]=\"params.placeholder\" ></choose-yes-or-no>", styles: [""], dependencies: [{ kind: "component", type: ChooseYesOrNoComponent, selector: "choose-yes-or-no", inputs: ["width", "selectedItemValue", "placeholder"], outputs: ["change"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ChooseYesOrNoRendererComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'choose-yes-or-no-renderer', template: "<choose-yes-or-no [selectedItemValue]=\"booleanValue\" [width]=\"params.width\" (change) =\"onCellDataChanged($event)\"    [placeholder]=\"params.placeholder\" ></choose-yes-or-no>" }]
+class ChooseYesOrNoRendererComponent {
+    params;
+    formControlValue;
+    key;
+    booleanValue;
+    columnName;
+    rowId;
+    constructor() { }
+    agInit(params) {
+        this.params = params;
+        this.booleanValue = params.value;
+        this.key = params.context.createKey(params.columnApi, params.column);
+        this.rowId = params.node.id;
+    }
+    onCellDataChanged($event) {
+        let value = $event;
+        this.formControlValue = this.params.context.formGroup.get("entries").at(this.rowId);
+        this.formControlValue.get(this.key).setValue(value);
+    }
+    refresh(params) {
+        return false;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseYesOrNoRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseYesOrNoRendererComponent, selector: "choose-yes-or-no-renderer", ngImport: i0, template: "<choose-yes-or-no [selectedItemValue]=\"booleanValue\" [width]=\"params.width\" (change) =\"onCellDataChanged($event)\"    [placeholder]=\"params.placeholder\" ></choose-yes-or-no>", styles: [""], dependencies: [{ kind: "component", type: ChooseYesOrNoComponent, selector: "choose-yes-or-no", inputs: ["width", "selectedItemValue", "placeholder"], outputs: ["change"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ChooseYesOrNoRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'choose-yes-or-no-renderer', template: "<choose-yes-or-no [selectedItemValue]=\"booleanValue\" [width]=\"params.width\" (change) =\"onCellDataChanged($event)\"    [placeholder]=\"params.placeholder\" ></choose-yes-or-no>" }]
         }], ctorParameters: function () { return []; } });
 
-const PIPEMAPPINGS = [
-    { value: '$', pipe: new CurrencyPipe('en-US') }
+const PIPEMAPPINGS = [
+    { value: '$', pipe: new CurrencyPipe('en-US') }
 ];
 
-class DynamicPipe {
-    transform(value, args) {
-        for (let val of PIPEMAPPINGS) {
-            if (val.value === args) {
-                return val.pipe.transform(value);
-            }
-        }
-        return '';
-    }
-}
-DynamicPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DynamicPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-DynamicPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: DynamicPipe, name: "dynamicPipe" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DynamicPipe, decorators: [{
-            type: Pipe,
-            args: [{ name: 'dynamicPipe' }]
+class DynamicPipe {
+    transform(value, args) {
+        for (let val of PIPEMAPPINGS) {
+            if (val.value === args) {
+                return val.pipe.transform(value);
+            }
+        }
+        return '';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+    static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: DynamicPipe, name: "dynamicPipe" });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DynamicPipe, decorators: [{
+            type: Pipe,
+            args: [{ name: 'dynamicPipe' }]
         }] });
 
-class EditableSavableInputComponent {
-    constructor() {
-        this.saveWasClicked = new EventEmitter();
-        this.showUnit = false;
-        this.isEditable = true;
-        this.showHeader = true;
-        this.value = "";
-        this.isAddClickedOn = false;
-        this.isUpdated = false;
-        this.showEdit = false;
-        // the method set in registerOnChange to emit changes back to the form
-        this.propagateChange = (_) => { };
-        this.propogateTouch = () => { };
-    }
-    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;
-    }
-    onChange($event) {
-        //this.propagateChange(this.value);
-    }
-    updateBlur() {
-        this.propogateTouch();
-    }
-}
-EditableSavableInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: EditableSavableInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-EditableSavableInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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.MatButton, selector: "button[mat-button], button[mat-raised-button], button[mat-icon-button],             button[mat-fab], button[mat-mini-fab], button[mat-stroked-button],             button[mat-flat-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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 EditableSavableInputComponent {
+    saveWasClicked = new EventEmitter();
+    defaultvalue;
+    inputType;
+    newLabel;
+    headerLabel;
+    showUnit = false;
+    unit;
+    unitType;
+    isEditable = true;
+    showHeader = true;
+    value = "";
+    isAddClickedOn = false;
+    isUpdated = false;
+    showEdit = false;
+    constructor() { }
+    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.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 {
-    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;
-        }
-    }
-}
-CustomDecimalPointTwoDigitsDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: CustomDecimalPointTwoDigitsDirective, deps: [{ token: i2$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
-CustomDecimalPointTwoDigitsDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: CustomDecimalPointTwoDigitsDirective, selector: "[customDecimalPointTwoDigits]", host: { listeners: { "input": "onEvent($event)" } }, providers: [NgModel, DecimalPipe], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", 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 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 {
-}
-ValidationMessageService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValidationMessageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ValidationMessageService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValidationMessageService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: ValidationMessageService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root'
-                }]
-        }] });
-class MinLengthValidationError {
-    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 {
-    constructor(requirement) {
-        this.requirement = requirement;
-    }
-    buildMessage() {
-        return "Must be a maximum length of " + this.requirement + " letters!";
-    }
-}
-class MaxValidationError {
-    constructor(requirement) {
-        this.requirement = requirement;
-    }
-    buildMessage() {
-        return "The largest acceptable input is " + this.requirement;
-    }
-}
-class MinValidationError {
-    constructor(requirement) {
-        this.requirement = requirement;
-    }
-    buildMessage() {
-        return "The smallest acceptable input is " + this.requirement;
-    }
-}
-class PatternValidatorError {
-    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];
-    }
-}
-ValidationError.validationMessageForDate = {
-    'required': new RequiredValidatorError().buildMessage(),
-    'pattern': new PatternValidatorError('forDate').buildMessage(),
-};
+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!";
+    }
+}
+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 FormControlValidationMsgDirectiveForInput {
-    constructor(elRef, control) {
-        this.elRef = elRef;
-        this.control = control;
-        this.showBoxError = true;
-        this.beforeBegin = false;
-        this.afterEnd = false;
-        this.validationError = ValidationError;
-    }
-    ngOnInit() {
-        this.statusChangeSubscription = this.control.statusChanges.subscribe((status) => {
-            if (status == 'INVALID') {
-                this.showError();
-            }
-            else {
-                this.removeError();
-            }
-        });
-        this.control.valueChanges.subscribe({
-            next: (response) => {
-                if (this.control.errors) {
-                    this.showError();
-                }
-            }
-        });
-    }
-    ngOnDestroy() {
-        this.statusChangeSubscription.unsubscribe();
-    }
-    handleBlurEvent(event) {
-        if (this.control.errors) {
-            this.showError();
-        }
-        else {
-            this.removeError();
-        }
-    }
-    showError() {
-        this.removeError();
-        const valErrors = this.control.errors;
-        const keys = Object.keys(valErrors);
-        for (let i = 0; i < keys.length; i++) {
-            switch (keys[i]) {
-                case 'minlength': {
-                    let message = this.validationError.getRelevantError(keys[i], valErrors.minlength.requiredLength);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    break;
-                }
-                case 'required': {
-                    let message = this.validationError.getRelevantError(keys[i], valErrors);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    this.control.control.setErrors({ 'required': true, 'message': message }, { emitEvent: false });
-                    break;
-                }
-                case 'maxlength': {
-                    let message = this.validationError.getRelevantError(keys[i], valErrors.maxlength.requiredLength);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    this.control.control.setErrors({ 'maxlength': { 'requiredLength': valErrors.maxlength.requiredLength }, 'message': message }, { emitEvent: false });
-                    break;
-                }
-                case 'max': {
-                    let message = this.validationError.getRelevantError(keys[i], valErrors.max.max);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    this.control.control.setErrors({ 'message': message, 'max': { 'max': valErrors.max.max } }, { emitEvent: false });
-                    break;
-                }
-                case 'min': {
-                    let message = this.validationError.getRelevantError(keys[i], valErrors.min.min);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    break;
-                }
-                case 'pattern': {
-                    let message = this.validationError.getRelevantError(keys[i], valErrors.pattern.requiredPattern);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    break;
-                }
-                case 'email': {
-                    let message = this.validationError.getRelevantError(keys[i], valErrors);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    break;
-                }
-                case 'invalidIntegerNumber': {
-                    let message = this.validationError.getRelevantError(keys[i], valErrors);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    break;
-                }
-                case 'invalidPositiveInteger': {
-                    let message = this.validationError.getRelevantError(keys[i], valErrors);
-                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
-                    this.control.control.setErrors({ 'invalidPositiveInteger': true, 'message': message }, { emitEvent: false });
-                    break;
-                }
-            }
-        }
-        if (this.showBoxError) {
-            const errDiv = '<div style="color:#C34243; width=100%; background-color: #FFDBDB; padding: 1rem; border-radius: .5rem; border: .1rem solid #A80002 ;border-left: .75rem solid #A80002;  margin-top:.5rem;  font-size: 1.2rem; " id="' + this.errorDivId + '">' + '<h3   style= " font-size: 1.3rem;  margin-bottom:.5rem; margin:0;  color: #A80002; font-weight: 700; line-height: 1.6rem;">' + 'Please Complete all details' + '</h3>' + this.errorMessage + '</div>';
-            if (!this.beforeBegin && !this.afterEnd)
-                this.elRef.nativeElement.parentElement.parentElement.parentElement.parentElement.insertAdjacentHTML('afterend', errDiv);
-            else if (this.beforeBegin)
-                this.elRef.nativeElement.insertAdjacentHTML('beforebegin', errDiv);
-            else if (this.afterEnd)
-                this.elRef.nativeElement.insertAdjacentHTML('afterend', errDiv);
-            else
-                throw Error("Adjustment not specified ");
-        }
-    }
-    removeError() {
-        this.errorMessage = "";
-        const errorElement = document.getElementById(this.errorDivId);
-        if (errorElement) {
-            errorElement.remove();
-        }
-    }
-}
-FormControlValidationMsgDirectiveForInput.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormControlValidationMsgDirectiveForInput, deps: [{ token: i0.ElementRef }, { token: i2$1.NgControl }], target: i0.ɵɵFactoryTarget.Directive });
-FormControlValidationMsgDirectiveForInput.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: FormControlValidationMsgDirectiveForInput, selector: "[appFormControlValidationMsgForInputs]", inputs: { showBoxError: "showBoxError", errorDivId: "errorDivId", beforeBegin: "beforeBegin", afterEnd: "afterEnd" }, host: { listeners: { "blur": "handleBlurEvent($event)" } }, providers: [NgModel], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: FormControlValidationMsgDirectiveForInput, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[appFormControlValidationMsgForInputs]',
-                    providers: [NgModel],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.NgControl }]; }, propDecorators: { showBoxError: [{
-                type: Input,
-                args: ['showBoxError']
-            }], errorDivId: [{
-                type: Input,
-                args: ['errorDivId']
-            }], beforeBegin: [{
-                type: Input,
-                args: ['beforeBegin']
-            }], afterEnd: [{
-                type: Input,
-                args: ['afterEnd']
-            }], handleBlurEvent: [{
-                type: HostListener,
-                args: ['blur', ["$event"]]
+class FormControlValidationMsgDirectiveForInput {
+    elRef;
+    control;
+    errorMessage;
+    errorNgSelectMessage;
+    showBoxError = true;
+    errorDivId;
+    beforeBegin = false;
+    afterEnd = false;
+    validationError = ValidationError;
+    statusChangeSubscription;
+    constructor(elRef, control) {
+        this.elRef = elRef;
+        this.control = control;
+    }
+    ngOnInit() {
+        this.statusChangeSubscription = this.control.statusChanges.subscribe((status) => {
+            if (status == 'INVALID') {
+                this.showError();
+            }
+            else {
+                this.removeError();
+            }
+        });
+        this.control.valueChanges.subscribe({
+            next: (response) => {
+                if (this.control.errors) {
+                    this.showError();
+                }
+            }
+        });
+    }
+    ngOnDestroy() {
+        this.statusChangeSubscription.unsubscribe();
+    }
+    handleBlurEvent(event) {
+        if (this.control.errors) {
+            this.showError();
+        }
+        else {
+            this.removeError();
+        }
+    }
+    showError() {
+        this.removeError();
+        const valErrors = this.control.errors;
+        const keys = Object.keys(valErrors);
+        for (let i = 0; i < keys.length; i++) {
+            switch (keys[i]) {
+                case 'minlength': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors.minlength.requiredLength);
+                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    break;
+                }
+                case 'required': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    this.control.control.setErrors({ 'required': true, 'message': message }, { emitEvent: false });
+                    break;
+                }
+                case 'maxlength': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors.maxlength.requiredLength);
+                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    this.control.control.setErrors({ 'maxlength': { 'requiredLength': valErrors.maxlength.requiredLength }, 'message': message }, { emitEvent: false });
+                    break;
+                }
+                case 'max': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors.max.max);
+                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    this.control.control.setErrors({ 'message': message, 'max': { 'max': valErrors.max.max } }, { emitEvent: false });
+                    break;
+                }
+                case 'min': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors.min.min);
+                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    break;
+                }
+                case 'pattern': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors.pattern.requiredPattern);
+                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    break;
+                }
+                case 'email': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    break;
+                }
+                case 'invalidIntegerNumber': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    break;
+                }
+                case 'invalidPositiveInteger': {
+                    let message = this.validationError.getRelevantError(keys[i], valErrors);
+                    this.errorMessage += ` ${this.errorMessage ? "<br>" : ""}${"\u25CF " + message}`;
+                    this.control.control.setErrors({ 'invalidPositiveInteger': true, 'message': message }, { emitEvent: false });
+                    break;
+                }
+            }
+        }
+        if (this.showBoxError) {
+            const errDiv = '<div style="color:#C34243; width=100%; background-color: #FFDBDB; padding: 1rem; border-radius: .5rem; border: .1rem solid #A80002 ;border-left: .75rem solid #A80002;  margin-top:.5rem;  font-size: 1.2rem; " id="' + this.errorDivId + '">' + '<h3   style= " font-size: 1.3rem;  margin-bottom:.5rem; margin:0;  color: #A80002; font-weight: 700; line-height: 1.6rem;">' + 'Please Complete all details' + '</h3>' + this.errorMessage + '</div>';
+            if (!this.beforeBegin && !this.afterEnd)
+                this.elRef.nativeElement.parentElement.parentElement.parentElement.parentElement.insertAdjacentHTML('afterend', errDiv);
+            else if (this.beforeBegin)
+                this.elRef.nativeElement.insertAdjacentHTML('beforebegin', errDiv);
+            else if (this.afterEnd)
+                this.elRef.nativeElement.insertAdjacentHTML('afterend', errDiv);
+            else
+                throw Error("Adjustment not specified ");
+        }
+    }
+    removeError() {
+        this.errorMessage = "";
+        const errorElement = document.getElementById(this.errorDivId);
+        if (errorElement) {
+            errorElement.remove();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormControlValidationMsgDirectiveForInput, 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: FormControlValidationMsgDirectiveForInput, selector: "[appFormControlValidationMsgForInputs]", inputs: { showBoxError: "showBoxError", errorDivId: "errorDivId", beforeBegin: "beforeBegin", afterEnd: "afterEnd" }, host: { listeners: { "blur": "handleBlurEvent($event)" } }, providers: [NgModel], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FormControlValidationMsgDirectiveForInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[appFormControlValidationMsgForInputs]',
+                    providers: [NgModel],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i2$1.NgControl }]; }, propDecorators: { showBoxError: [{
+                type: Input,
+                args: ['showBoxError']
+            }], errorDivId: [{
+                type: Input,
+                args: ['errorDivId']
+            }], beforeBegin: [{
+                type: Input,
+                args: ['beforeBegin']
+            }], afterEnd: [{
+                type: Input,
+                args: ['afterEnd']
+            }], handleBlurEvent: [{
+                type: HostListener,
+                args: ['blur', ["$event"]]
             }] } });
 
-class GeneralInputRendererComponent {
-    constructor() { }
-    agInit(params) {
-        this.params = params;
-        this.formGroup = this.params.context.formGroup.get('entries').at(params.node.rowIndex);
-        this.key = params.context.createKey(params.columnApi, params.column);
-        if (params.isTypeNumber) {
-            if (params.value) {
-                this.value = new DecimalPipe("en-US").transform(+params.value, "1.0-0");
-            }
-        }
-        else {
-            this.value = params.value;
-        }
-    }
-    onCellDataChanged($event) {
-        let value = $event.target.value;
-        let newAndOldValue = {
-            newValue: value,
-            oldValue: this.params?.value
-        };
-        if (this.params.allowUpdateRowData) {
-            this.params.onChange(newAndOldValue);
-        }
-    }
-    refresh(params) {
-        this.formGroup = this.params.context.formGroup.get('entries').at(params.node.rowIndex);
-        return true;
-    }
-}
-GeneralInputRendererComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeneralInputRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-GeneralInputRendererComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", type: GeneralInputRendererComponent, selector: "general-input-renderer-test", ngImport: i0, 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"], dependencies: [{ 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "directive", type: CustomDecimalPointTwoDigitsDirective, selector: "[customDecimalPointTwoDigits]" }, { kind: "component", type: ShowTableErrorsComponent, selector: "show-table-errors", inputs: ["message"] }, { kind: "directive", type: FormControlValidationMsgDirectiveForInput, selector: "[appFormControlValidationMsgForInputs]", inputs: ["showBoxError", "errorDivId", "beforeBegin", "afterEnd"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: GeneralInputRendererComponent, decorators: [{
-            type: Component,
-            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"] }]
+class GeneralInputRendererComponent {
+    params;
+    key;
+    value;
+    formGroup;
+    formControlName;
+    constructor() { }
+    agInit(params) {
+        this.params = params;
+        this.formGroup = this.params.context.formGroup.get('entries').at(params.node.rowIndex);
+        this.key = params.context.createKey(params.columnApi, params.column);
+        if (params.isTypeNumber) {
+            if (params.value) {
+                this.value = new DecimalPipe("en-US").transform(+params.value, "1.0-0");
+            }
+        }
+        else {
+            this.value = params.value;
+        }
+    }
+    onCellDataChanged($event) {
+        let value = $event.target.value;
+        let newAndOldValue = {
+            newValue: value,
+            oldValue: this.params?.value
+        };
+        if (this.params.allowUpdateRowData) {
+            this.params.onChange(newAndOldValue);
+        }
+    }
+    refresh(params) {
+        this.formGroup = this.params.context.formGroup.get('entries').at(params.node.rowIndex);
+        return true;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeneralInputRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: GeneralInputRendererComponent, selector: "general-input-renderer-test", ngImport: i0, 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"], dependencies: [{ 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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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: "directive", type: CustomDecimalPointTwoDigitsDirective, selector: "[customDecimalPointTwoDigits]" }, { kind: "component", type: ShowTableErrorsComponent, selector: "show-table-errors", inputs: ["message"] }, { kind: "directive", type: FormControlValidationMsgDirectiveForInput, selector: "[appFormControlValidationMsgForInputs]", inputs: ["showBoxError", "errorDivId", "beforeBegin", "afterEnd"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: GeneralInputRendererComponent, decorators: [{
+            type: Component,
+            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 {
+class LabelAndField {
+    label;
+    field;
 }
 
-var DropdownActionType;
-(function (DropdownActionType) {
-    DropdownActionType[DropdownActionType["ADD"] = 0] = "ADD";
-    DropdownActionType[DropdownActionType["MENU"] = 1] = "MENU";
+var DropdownActionType;
+(function (DropdownActionType) {
+    DropdownActionType[DropdownActionType["ADD"] = 0] = "ADD";
+    DropdownActionType[DropdownActionType["MENU"] = 1] = "MENU";
 })(DropdownActionType || (DropdownActionType = {}));
 
-class DropdownActionsComponent {
-    constructor(_Router) {
-        this._Router = _Router;
-        this.dropdownActionTypes = DropdownActionType;
-        this.canRoute = true;
-        this.labelsAndRoutes = [];
-        this.dropdownActionType = this.dropdownActionTypes.ADD;
-        this.addClicked = new EventEmitter();
-    }
-    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]);
-    }
-}
-DropdownActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: DropdownActionsComponent, deps: [{ token: i1$2.Router }], target: i0.ɵɵFactoryTarget.Component });
-DropdownActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.3.0", 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: "14.3.0", 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 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 PrimaryColors {
-}
-PrimaryColors.$primaryBlueColor = '#155ED4';
-PrimaryColors.$primaryPinkColor = '#F0509C';
-PrimaryColors.$primaryTealColor = '#12957E';
-PrimaryColors.$primaryCarbonColor = '#32353B';
-PrimaryColors.$primaryPurpleColor = '#E3B1EB';
-PrimaryColors.$primaryRedColor = '#A80002';
-PrimaryColors.$primaryLightRedColor = '#FFDBDB';
-PrimaryColors.$primaryLightGrayBlueColor = '#f7f8f9';
-PrimaryColors.$primaryLightGrayColor = '#f0f0f0';
+class PrimaryColors {
+    static $primaryBlueColor = '#155ED4';
+    static $primaryPinkColor = '#F0509C';
+    static $primaryTealColor = '#12957E';
+    static $primaryCarbonColor = '#32353B';
+    static $primaryPurpleColor = '#E3B1EB';
+    static $primaryRedColor = '#A80002';
+    static $primaryLightRedColor = '#FFDBDB';
+    static $primaryLightGrayBlueColor = '#f7f8f9';
+    static $primaryLightGrayColor = '#f0f0f0';
+}
 
-class AddAsteriskDirective {
-    constructor(elem) {
-        this.elem = elem;
-        this.show = true;
-    }
-    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();
-            }
-        }
-    }
-}
-AddAsteriskDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddAsteriskDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-AddAsteriskDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.3.0", type: AddAsteriskDirective, selector: "[addAsterisk]", inputs: { show: "show" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: AddAsteriskDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[addAsterisk]'
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { show: [{
-                type: Input,
-                args: ['show']
+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 {
-            ngModule: InputsModule,
-            providers: [
-                ChooseGeneralItemService,
-                {
-                    provide: 'env',
-                    useValue: environment
-                }
-            ]
-        };
-    }
-}
-InputsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-InputsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.3.0", ngImport: i0, type: InputsModule, declarations: [ChooseEnumComponent,
-        ChooseEnumRendererComponent,
-        ChooseGeneralItemComponent,
-        GeneralInputRendererComponent,
-        ChooseLineTypeComponent,
-        ChooseYesOrNoComponent,
-        ChooseYesOrNoRendererComponent,
-        EditableSavableInputComponent,
-        DynamicPipe,
-        ChooseGeneralItemRendererComponent,
-        CustomDecimalPointTwoDigitsDirective,
-        ShowTableErrorsComponent,
-        FormControlValidationMsgDirectiveForInput,
-        DropdownActionsComponent,
-        AddAsteriskDirective], imports: [CommonModule,
-        NgSelectModule,
-        FormsModule,
-        ReactiveFormsModule,
-        AppMaterialModule,
-        SharedGeneralComponentsModule,
-        FontAwesomeModule], exports: [ChooseEnumComponent,
-        ChooseEnumRendererComponent,
-        ChooseGeneralItemComponent,
-        GeneralInputRendererComponent,
-        ChooseLineTypeComponent,
-        ChooseYesOrNoComponent,
-        ChooseYesOrNoRendererComponent,
-        EditableSavableInputComponent,
-        DropdownActionsComponent,
-        DynamicPipe,
-        AddAsteriskDirective] });
-InputsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputsModule, imports: [CommonModule,
-        NgSelectModule,
-        FormsModule,
-        ReactiveFormsModule,
-        AppMaterialModule,
-        SharedGeneralComponentsModule,
-        FontAwesomeModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.3.0", ngImport: i0, type: InputsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [
-                        ChooseEnumComponent,
-                        ChooseEnumRendererComponent,
-                        ChooseGeneralItemComponent,
-                        GeneralInputRendererComponent,
-                        ChooseLineTypeComponent,
-                        ChooseYesOrNoComponent,
-                        ChooseYesOrNoRendererComponent,
-                        EditableSavableInputComponent,
-                        DynamicPipe,
-                        ChooseGeneralItemRendererComponent,
-                        CustomDecimalPointTwoDigitsDirective,
-                        ShowTableErrorsComponent,
-                        FormControlValidationMsgDirectiveForInput,
-                        DropdownActionsComponent,
-                        AddAsteriskDirective
-                    ],
-                    imports: [
-                        CommonModule,
-                        NgSelectModule,
-                        FormsModule,
-                        ReactiveFormsModule,
-                        AppMaterialModule,
-                        SharedGeneralComponentsModule,
-                        FontAwesomeModule,
-                    ],
-                    exports: [
-                        ChooseEnumComponent,
-                        ChooseEnumRendererComponent,
-                        ChooseGeneralItemComponent,
-                        GeneralInputRendererComponent,
-                        ChooseLineTypeComponent,
-                        ChooseYesOrNoComponent,
-                        ChooseYesOrNoRendererComponent,
-                        EditableSavableInputComponent,
-                        DropdownActionsComponent,
-                        DynamicPipe,
-                        AddAsteriskDirective
-                    ]
-                }]
+class InputsModule {
+    static forRoot(environment) {
+        return {
+            ngModule: InputsModule,
+            providers: [
+                ChooseGeneralItemService,
+                {
+                    provide: 'env',
+                    useValue: environment
+                }
+            ]
+        };
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, declarations: [ChooseEnumComponent,
+            ChooseEnumRendererComponent,
+            ChooseGeneralItemComponent,
+            GeneralInputRendererComponent,
+            ChooseLineTypeComponent,
+            ChooseYesOrNoComponent,
+            ChooseYesOrNoRendererComponent,
+            EditableSavableInputComponent,
+            DynamicPipe,
+            ChooseGeneralItemRendererComponent,
+            CustomDecimalPointTwoDigitsDirective,
+            ShowTableErrorsComponent,
+            FormControlValidationMsgDirectiveForInput,
+            DropdownActionsComponent,
+            AddAsteriskDirective], imports: [CommonModule,
+            NgSelectModule,
+            FormsModule,
+            ReactiveFormsModule,
+            AppMaterialModule,
+            SharedGeneralComponentsModule,
+            FontAwesomeModule], exports: [ChooseEnumComponent,
+            ChooseEnumRendererComponent,
+            ChooseGeneralItemComponent,
+            GeneralInputRendererComponent,
+            ChooseLineTypeComponent,
+            ChooseYesOrNoComponent,
+            ChooseYesOrNoRendererComponent,
+            EditableSavableInputComponent,
+            DropdownActionsComponent,
+            DynamicPipe,
+            AddAsteriskDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, imports: [CommonModule,
+            NgSelectModule,
+            FormsModule,
+            ReactiveFormsModule,
+            AppMaterialModule,
+            SharedGeneralComponentsModule,
+            FontAwesomeModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: InputsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [
+                        ChooseEnumComponent,
+                        ChooseEnumRendererComponent,
+                        ChooseGeneralItemComponent,
+                        GeneralInputRendererComponent,
+                        ChooseLineTypeComponent,
+                        ChooseYesOrNoComponent,
+                        ChooseYesOrNoRendererComponent,
+                        EditableSavableInputComponent,
+                        DynamicPipe,
+                        ChooseGeneralItemRendererComponent,
+                        CustomDecimalPointTwoDigitsDirective,
+                        ShowTableErrorsComponent,
+                        FormControlValidationMsgDirectiveForInput,
+                        DropdownActionsComponent,
+                        AddAsteriskDirective
+                    ],
+                    imports: [
+                        CommonModule,
+                        NgSelectModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        AppMaterialModule,
+                        SharedGeneralComponentsModule,
+                        FontAwesomeModule,
+                    ],
+                    exports: [
+                        ChooseEnumComponent,
+                        ChooseEnumRendererComponent,
+                        ChooseGeneralItemComponent,
+                        GeneralInputRendererComponent,
+                        ChooseLineTypeComponent,
+                        ChooseYesOrNoComponent,
+                        ChooseYesOrNoRendererComponent,
+                        EditableSavableInputComponent,
+                        DropdownActionsComponent,
+                        DynamicPipe,
+                        AddAsteriskDirective
+                    ]
+                }]
         }] });
 
-/*
- * Public API Surface of inputs
+/*
+ * Public API Surface of inputs
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * 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 };