@jooler/inputs 0.0.51 → 0.0.52

package/fesm2022/inputs.mjs

@@ -2,12 +2,12 @@ import * as i0 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 i4 from '@jooler/shared-general-components';
+import { EnumHelperBaseClass, SharedGeneralComponentsModule } from '@jooler/shared-general-components';
 import * as i1 from '@angular/common';
 import { CurrencyPipe, DecimalPipe, CommonModule } from '@angular/common';
 import * as i2 from '@ng-select/ng-select';
 import { NgSelectModule } from '@ng-select/ng-select';
-import * as i4 from '@jooler/shared-general-components';
-import { SharedGeneralComponentsModule } from '@jooler/shared-general-components';
 import * as i2$2 from '@fortawesome/angular-fontawesome';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import * as i1$1 from '@angular/common/http';
@@ -17,166 +17,6 @@ import { AppMaterialModule } from '@jooler/app-material';
 import * as i1$2 from '@angular/router';
 import * as i3$1 from '@angular/material/menu';
 
-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 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 {
     items;
     appendTo = 'body';
@@ -184,13 +24,11 @@ class ChooseEnumComponent {
     clearable = true;
     customColors;
     enumChoices;
-    virtualScroll = false;
     getValuesArrayFromEnum = EnumHelperBaseClass.getEnumOptionsFromEnumClass;
-    indexesToDisable = [];
+    valuesToDisable = [];
+    valuesToHide = [];
     isChip = true;
     isDropdownDisabled = false;
-    isItemHidden;
-    isItemDisabled;
     isMultiple;
     label = 'label';
     labelTextAlign = 'left';
@@ -201,49 +39,63 @@ class ChooseEnumComponent {
     percentWidth = false;
     selectedItem;
     width;
+    isReadOnly = false;
+    virtualScroll = false;
     change = new EventEmitter();
     close = new EventEmitter();
     constructor() { }
-    ngOnChanges() {
+    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.valuesToDisable.length > 0) {
+            this.disabledItems();
         }
-        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);
-                }
-            }
+        if (this.valuesToHide.length > 0) {
+            this.hideItems();
         }
+        this.sortAndReorderItems();
     }
-    ngOnInit() {
+    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.valuesToDisable.length > 0) {
+            this.disabledItems();
+        }
+        if (this.valuesToHide.length > 0) {
+            this.hideItems();
+        }
+        this.sortAndReorderItems();
+    }
+    disabledItems() {
+        for (let value of this.valuesToDisable) {
+            let index = this.items.findIndex(enumOption => enumOption.value == value);
+            if (index >= 0) {
+                this.items[index].disabled = true;
+            }
+            else {
+                throw Error('Index was not found for an enum element in the valuesToDisable array provided.');
             }
         }
-        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);
-                }
+    }
+    hideItems() {
+        for (let value of this.valuesToHide) {
+            let index = this.items.findIndex(enumOption => enumOption.value == value);
+            if (index >= 0) {
+                this.items.splice(index, 1);
+            }
+            else {
+                throw Error('Index was not found for an enum element in the valuesToHide array provided.');
             }
         }
     }
+    sortAndReorderItems() {
+        const nonDisabledItems = this.items.filter(item => !item.disabled);
+        const disabledItems = this.items.filter(item => item.disabled);
+        nonDisabledItems.sort((a, b) => a.label.localeCompare(b.label));
+        this.items = [...nonDisabledItems, ...disabledItems];
+    }
     writeValue(type) {
         if (type != undefined) {
             this.selectedItem = type;
@@ -265,6 +117,7 @@ class ChooseEnumComponent {
         this.close.emit();
     }
     onSelectedItemChanged() {
+        this.propogateTouch();
         this.propagateChange(this.selectedItem);
         this.change.emit(this.selectedItem);
     }
@@ -273,6 +126,7 @@ class ChooseEnumComponent {
     }
     clear() {
         this.selectedItem = null;
+        this.propogateTouch();
     }
     setStyles() {
         let style = {
@@ -288,17 +142,18 @@ class ChooseEnumComponent {
             textAlign: this.labelTextAlign,
             fontWeight: this.labelTextFontWeight,
             fontSize: this.labelTextFontSize + 'rem',
+            padding: '0.4rem',
         };
         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: [
+    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", getValuesArrayFromEnum: "getValuesArrayFromEnum", valuesToDisable: "valuesToDisable", valuesToHide: "valuesToHide", isChip: "isChip", isDropdownDisabled: "isDropdownDisabled", isMultiple: "isMultiple", label: "label", labelTextAlign: "labelTextAlign", labelTextFontWeight: "labelTextFontWeight", labelTextFontSize: "labelTextFontSize", paddingTop: "paddingTop", placeholder: "placeholder", percentWidth: "percentWidth", selectedItem: "selectedItem", width: "width", isReadOnly: "isReadOnly", virtualScroll: "virtualScroll" }, 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"] }] });
+        ], usesOnChanges: true, ngImport: i0, template: "<div>\r\n  <ng-select [ngStyle]=\"setStyles()\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"value\" [items]=\"items\"\r\n    [virtualScroll]=\"virtualScroll\" [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\"\r\n    [(ngModel)]=\"selectedItem\" [multiple]=\"isMultiple\" [disabled]=\"isDropdownDisabled\" [readonly]=\"isReadOnly\"\r\n    [clearable]=\"clearable\" (clear)=\"clear()\" [appendTo]=\"appendTo\" dropdownPosition=\"bottom\">\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n      <ng-container *ngIf=\"isChip\">\r\n        <ng-container [ngTemplateOutlet]=\"chip\"\r\n          [ngTemplateOutletContext]=\"{ item: item, showCross: clearable, clear: clear }\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\" let-clear=\"clear\">\r\n      <div [ngClass]=\"{ disabled: item.disabled }\">\r\n        <div *ngIf=\"isChip\" class=\"chip\">\r\n          <ng-container [ngTemplateOutlet]=\"chip\"\r\n            [ngTemplateOutletContext]=\"{ item: item, showCross: false, clear: clear }\">\r\n          </ng-container>\r\n        </div>\r\n        <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n      </div>\r\n    </ng-template>\r\n  </ng-select>\r\n</div>\r\n\r\n<ng-template #chip let-showCross=\"showCross\" let-item=\"item\" let-clear=\"clear\">\r\n  <ng-chip [enumClass]=\"enumChoices\" [withCross]=\"showCross\" [enumValue]=\"item.value\" [customColors]=\"customColors\"\r\n    [item]=\"item\" [clear]=\"clear\">\r\n  </ng-chip>\r\n</ng-template>", styles: [".disabled{cursor:not-allowed}.disabled .chip{filter:opacity(.3)}\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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "markFirst", "placeholder", "notFoundText", "typeToSearchText", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "keyDownFn", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: 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,
@@ -308,7 +163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                             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"] }]
+                    ], template: "<div>\r\n  <ng-select [ngStyle]=\"setStyles()\" (blur)=\"updateBlur()\" bindLabel=\"label\" bindValue=\"value\" [items]=\"items\"\r\n    [virtualScroll]=\"virtualScroll\" [placeholder]=\"placeholder\" (change)=\"onSelectedItemChanged()\"\r\n    [(ngModel)]=\"selectedItem\" [multiple]=\"isMultiple\" [disabled]=\"isDropdownDisabled\" [readonly]=\"isReadOnly\"\r\n    [clearable]=\"clearable\" (clear)=\"clear()\" [appendTo]=\"appendTo\" dropdownPosition=\"bottom\">\r\n    <ng-template ng-label-tmp let-item=\"item\" let-clear=\"clear\">\r\n      <ng-container *ngIf=\"isChip\">\r\n        <ng-container [ngTemplateOutlet]=\"chip\"\r\n          [ngTemplateOutletContext]=\"{ item: item, showCross: clearable, clear: clear }\">\r\n        </ng-container>\r\n      </ng-container>\r\n      <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n    </ng-template>\r\n    <ng-template ng-option-tmp let-item=\"item\" let-index=\"index\" let-search=\"searchTerm\" let-clear=\"clear\">\r\n      <div [ngClass]=\"{ disabled: item.disabled }\">\r\n        <div *ngIf=\"isChip\" class=\"chip\">\r\n          <ng-container [ngTemplateOutlet]=\"chip\"\r\n            [ngTemplateOutletContext]=\"{ item: item, showCross: false, clear: clear }\">\r\n          </ng-container>\r\n        </div>\r\n        <div [ngStyle]=\"setLabelStyle()\" *ngIf=\"!isChip\">{{ item.label }}</div>\r\n      </div>\r\n    </ng-template>\r\n  </ng-select>\r\n</div>\r\n\r\n<ng-template #chip let-showCross=\"showCross\" let-item=\"item\" let-clear=\"clear\">\r\n  <ng-chip [enumClass]=\"enumChoices\" [withCross]=\"showCross\" [enumValue]=\"item.value\" [customColors]=\"customColors\"\r\n    [item]=\"item\" [clear]=\"clear\">\r\n  </ng-chip>\r\n</ng-template>", styles: [".disabled{cursor:not-allowed}.disabled .chip{filter:opacity(.3)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { appendTo: [{
                 type: Input
             }], allowAllCapsValues: [{
@@ -319,20 +174,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], enumChoices: [{
                 type: Input
-            }], virtualScroll: [{
-                type: Input
             }], getValuesArrayFromEnum: [{
                 type: Input
-            }], indexesToDisable: [{
+            }], valuesToDisable: [{
+                type: Input
+            }], valuesToHide: [{
                 type: Input
             }], isChip: [{
                 type: Input
             }], isDropdownDisabled: [{
                 type: Input
-            }], isItemHidden: [{
-                type: Input
-            }], isItemDisabled: [{
-                type: Input
             }], isMultiple: [{
                 type: Input
             }], label: [{
@@ -353,6 +204,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], width: [{
                 type: Input
+            }], isReadOnly: [{
+                type: Input
+            }], virtualScroll: [{
+                type: Input
             }], change: [{
                 type: Output
             }], close: [{
@@ -380,32 +235,116 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }] } });
 
-class ChooseEnumRendererComponent {
+class AgGridSelectMixin {
     params;
-    formControlValue;
     key;
-    enumValue;
+    value;
     rowId;
-    constructor() { }
+    isEdit;
+    index;
+    arrayKey = 'entries';
+    rowLevelFG;
+    width;
+    selectedItemId;
     agInit(params) {
+        this.initializeRenderer(params);
+    }
+    initializeRenderer(params) {
         this.params = params;
-        this.enumValue = params.value;
+        this.width = params.width;
         this.key = params.context.createKey(params.columnApi, params.column);
+        this.value = params.value;
+        this.rowId = params.node.id;
+        this.index = params.node.rowIndex;
+        if (params.context.arrayKey) {
+            this.arrayKey = params.context.arrayKey;
+        }
+        this.setRowLevelFG();
+    }
+    setRowLevelFG() {
+        this.index = this.params.node.rowIndex;
+        let tableFG = this.params.context.formGroup;
+        let fa = tableFG.get(this.arrayKey);
+        let rowLevelFG = fa.at(this.index);
+        this.rowLevelFG = rowLevelFG;
+    }
+    getFormControl() {
+        let fc = this.rowLevelFG.get(this.key);
+        return fc;
+    }
+    updateValue(params, value) {
+        this.setRowLevelFG();
+        this.getFormControl().setValue(value);
+        let rowNode = params.node;
+        rowNode.setDataValue(this.key, value);
+    }
+    // $event here is an object.
+    onSelection($event) {
+        this.selectedItemId = $event?.id;
+        this.updateValue(this.params, $event?.id);
+        if (this.params.onSelection instanceof Function) {
+            const params = {
+                object: $event,
+                rowData: this.params.node.data,
+                value: $event.id,
+                rowNode: this.params.node,
+            };
+            this.params.onSelection(params);
+        }
     }
-    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);
+    onEnumSelected($event) {
+        this.updateValue(this.params, $event);
+        if (this.params.onSelection instanceof Function) {
+            const params = {
+                rowData: this.params.node.data,
+                value: $event,
+                rowNode: this.params.node,
+            };
+            this.params.onSelection(params);
+        }
     }
-    refresh(params) {
+    refresh(param) {
         return false;
     }
+}
+
+class ChooseEnumRendererComponent extends AgGridSelectMixin {
+    valuesToDisable = [];
+    valuesToHide = [];
+    isChip = true;
+    clearable = true;
+    constructor() {
+        super();
+    }
+    agInit(params) {
+        super.agInit(params);
+        if (params.valuesToDisable != null) {
+            this.valuesToDisable = params.valuesToDisable;
+        }
+        if (params.valuesToHide != null) {
+            this.valuesToHide = params.valuesToHide;
+        }
+        if (params.isChip != null) {
+            this.isChip = params.isChip;
+        }
+        if (params.clearable != null) {
+            this.clearable = params.clearable;
+        }
+    }
+    get showError() {
+        if (this.rowLevelFG.get(this.key).errors && this.rowLevelFG.get(this.key).touched) {
+            return true;
+        }
+        else {
+            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"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ChooseEnumRendererComponent, selector: "choose-enum-renderer", usesInheritance: true, ngImport: i0, template: "<div class=\"all\" [ngClass]=\"{ single: !showError, double: showError }\" *ngIf=\"rowLevelFG\" [formGroup]=\"rowLevelFG\">\r\n    <choose-enum [clearable]=\"clearable\" [formControlName]=\"key\" [appendTo]=\"'body'\" [label]=\"params.label\"\r\n        [labelTextAlign]=\"params.labelTextAlign\" [labelTextFontWeight]=\"params.labelTextFontWeight\"\r\n        [labelTextFontSize]=\"params.labelTextFontSize\" [selectedItem]=\"params.value\" [valuesToHide]=\"valuesToHide\"\r\n        [valuesToDisable]=\"valuesToDisable\" [isDropdownDisabled]=\"params.isDropdownDisabled\"\r\n        [enumChoices]=\"params.enumChoices\" [placeholder]=\"params.placeholder\" [width]=\"params.width\" [isChip]=\"isChip\"\r\n        [paddingTop]=\"params.paddingTop\" [customColors]=\"params.customColors\" (change)=\"onEnumSelected($event)\">\r\n    </choose-enum>\r\n</div>", styles: [".all{display:grid;gap:.5rem;align-items:center;margin:auto}.single{grid-template-columns:auto}.double{grid-template-columns:auto max-content}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: ChooseEnumComponent, selector: "choose-enum", inputs: ["appendTo", "allowAllCapsValues", "clearable", "customColors", "enumChoices", "getValuesArrayFromEnum", "valuesToDisable", "valuesToHide", "isChip", "isDropdownDisabled", "isMultiple", "label", "labelTextAlign", "labelTextFontWeight", "labelTextFontSize", "paddingTop", "placeholder", "percentWidth", "selectedItem", "width", "isReadOnly", "virtualScroll"], 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>" }]
+            args: [{ selector: 'choose-enum-renderer', template: "<div class=\"all\" [ngClass]=\"{ single: !showError, double: showError }\" *ngIf=\"rowLevelFG\" [formGroup]=\"rowLevelFG\">\r\n    <choose-enum [clearable]=\"clearable\" [formControlName]=\"key\" [appendTo]=\"'body'\" [label]=\"params.label\"\r\n        [labelTextAlign]=\"params.labelTextAlign\" [labelTextFontWeight]=\"params.labelTextFontWeight\"\r\n        [labelTextFontSize]=\"params.labelTextFontSize\" [selectedItem]=\"params.value\" [valuesToHide]=\"valuesToHide\"\r\n        [valuesToDisable]=\"valuesToDisable\" [isDropdownDisabled]=\"params.isDropdownDisabled\"\r\n        [enumChoices]=\"params.enumChoices\" [placeholder]=\"params.placeholder\" [width]=\"params.width\" [isChip]=\"isChip\"\r\n        [paddingTop]=\"params.paddingTop\" [customColors]=\"params.customColors\" (change)=\"onEnumSelected($event)\">\r\n    </choose-enum>\r\n</div>", styles: [".all{display:grid;gap:.5rem;align-items:center;margin:auto}.single{grid-template-columns:auto}.double{grid-template-columns:auto max-content}\n"] }]
         }], ctorParameters: function () { return []; } });
 
 // import { environment } from '../../environments/environment';