@huntsman-cancer-institute/dictionary-editor 17.14.5 → 17.15.0

package/fesm2022/huntsman-cancer-institute-dictionary-editor.mjs

@@ -3,7 +3,7 @@ import { TemplateRef, ViewChild, HostBinding, Component, HostListener, Input, Di
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i2 from '@angular/forms';
-import { UntypedFormBuilder, UntypedFormGroup, UntypedFormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormBuilder, FormGroup, FormControl, NG_VALUE_ACCESSOR, FormsModule, ReactiveFormsModule } from '@angular/forms';
 import * as i1$2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i4$1 from '@huntsman-cancer-institute/misc';
@@ -270,7 +270,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  *          headerName: "Name",
  *          editable: false,
  *          width: 600,
- *          cellRendererFramework: TextAlignLeftMiddleRenderer,
+ *          cellRenderer: TextAlignLeftMiddleRenderer,
  *          setErrors: (value: any,
  *                      data: any,
  *                      node: any,
@@ -306,7 +306,7 @@ class CellRendererValidation {
     }
     agInit(params) {
         this.params = params;
-        this.formBuilder = new UntypedFormBuilder();
+        this.formBuilder = new FormBuilder();
         if (this.params
             && this.params.node
             && this.params.node.gridApi
@@ -323,7 +323,6 @@ class CellRendererValidation {
             }
         }
         this.getErrorMessage();
-        this.agInit2(params);
     }
     refresh(params) {
         return false;
@@ -364,7 +363,7 @@ class CellRendererValidation {
                 || (this.params.node.gridApi.formGroup
                     && this.params.node.gridApi.formGroup.controls
                     && this.params.node.gridApi.formGroup.controls.length != allNodes.length)) {
-                this.params.node.gridApi.formGroup = new UntypedFormGroup({});
+                this.params.node.gridApi.formGroup = new FormGroup({});
             }
             if (this.params.node.gridApi.columnController
                 && this.params.node.gridApi.columnController.columnDefs) {
@@ -393,9 +392,9 @@ class CellRendererValidation {
                         && column.colDef.field
                         && (column.colDef.validators || column.colDef.setErrors)) {
                         node[column.colDef.field + "_errorMessage"] = '';
-                        let formControl = new UntypedFormControl(column.colDef.field + '_formControl', []);
+                        let formControl = new FormControl(column.colDef.field + '_formControl', []);
                         if (!node.formGroup) {
-                            node.formGroup = new UntypedFormGroup({});
+                            node.formGroup = new FormGroup({});
                         }
                         node.formGroup.addControl(column.colDef.field + '_formControl', formControl);
                         if (!Array.isArray(column.colDef.validators)) {
@@ -407,7 +406,7 @@ class CellRendererValidation {
                 }
                 if (!this.params.node.gridApi.formGroup.contains('RowGroup_' + node.rowIndex)) {
                     if (!node.formGroup) {
-                        node.formGroup = new UntypedFormGroup({});
+                        node.formGroup = new FormGroup({});
                     }
                     this.params.node.gridApi.formGroup.addControl('RowGroup_' + node.rowIndex, node.formGroup);
                 }
@@ -540,11 +539,11 @@ class CellRendererValidation {
             && this.params.colDef.field
             && (this.params.colDef.validators || this.params.colDef.setErrors)) {
             this.params.node[this.params.colDef.field + "_errorMessage"] = '';
-            let formControl = new UntypedFormControl(this.params.colDef.field + '_formControl', []);
+            let formControl = new FormControl(this.params.colDef.field + '_formControl', []);
             if (!this.params.node.formGroup) {
-                this.params.node.formGroup = new UntypedFormGroup({});
+                this.params.node.formGroup = new FormGroup({});
                 if (!this.params.node.gridApi.formGroup) {
-                    this.params.node.gridApi.formGroup = new UntypedFormGroup({});
+                    this.params.node.gridApi.formGroup = new FormGroup({});
                 }
                 else {
                     // check for any removed nodes & remove their validators if needed.
@@ -594,83 +593,15 @@ class CellRendererValidation {
 }
 
 class SelectRenderer extends CellRendererValidation {
-    agInit2(params) {
-        this.options = [];
-        this.value = "";
-        this.optionsValueField = "";
-        this.optionsDisplayField = "";
-        this.defaultDisplayField = "";
-        this.defaultDisplayValue = "";
-        if (this.params) {
-            if (this.params.value) {
-                this.value = this.params.value;
-            }
-            else {
-                this.value = "";
-            }
-        }
-        if (this.params && this.params.column && this.params.column.colDef) {
-            if (this.params.column.colDef.rendererOptions) {
-                this.options = this.params.column.colDef.rendererOptions;
-            }
-            else {
-                this.options = this.params.column.colDef.selectOptions;
-            }
-            this.optionsValueField = this.params.column.colDef.selectOptionsValueField;
-            this.optionsDisplayField = this.params.column.colDef.selectOptionsDisplayField;
-            this.defaultDisplayField = this.params.column.colDef.defaultDisplayField;
-            this.defaultDisplayValue = this.params.column.colDef.defaultDisplayValue;
-        }
-        if (this.defaultDisplayField) {
-            for (let option of this.options) {
-                if (option[this.defaultDisplayField] === this.defaultDisplayValue) {
-                    this.defaultOption = option;
-                    break;
-                }
-            }
-        }
-        if (this.value && this.value != ""
-            && this.options && this.options.length > 0
-            && this.optionsValueField && this.optionsValueField != ""
-            && this.optionsDisplayField && this.optionsDisplayField != "") {
-            let foundOption = false;
-            for (let option of this.options) {
-                if (option[this.optionsValueField] && option[this.optionsValueField] === this.value) {
-                    if (option[this.optionsDisplayField]) {
-                        this.display = option[this.optionsDisplayField];
-                        foundOption = true;
-                    }
-                    else {
-                        this.display = this.value;
-                    }
-                    break;
-                }
-            }
-            // if we didn't find the item in the dictionary, check if the items are strings in different cases
-            if (!foundOption) {
-                for (let option of this.options) {
-                    if (option[this.optionsValueField] && ("" + option[this.optionsValueField]).toLowerCase() === ("" + this.value).toLowerCase()) {
-                        if (option[this.optionsDisplayField]) {
-                            this.display = option[this.optionsDisplayField];
-                            foundOption = true;
-                        }
-                        else {
-                            this.display = this.value;
-                        }
-                        break;
-                    }
+    agInit(params) {
+        super.agInit(params);
+        if (params) {
+            this.value = params.value ? String(params.value) : "";
+            params.options.forEach(option => {
+                if (String(option.id) === String(this.value)) {
+                    this.display = option.display;
                 }
-            }
-            // if we still didn't find the item, at least display the id.
-            if (!foundOption) {
-                this.display = this.value;
-            }
-        }
-        else if (this.defaultOption && this.value != "") {
-            this.display = this.defaultOption[this.optionsDisplayField];
-        }
-        else {
-            this.display = this.value;
+            });
         }
     }
     refresh() {
@@ -678,209 +609,102 @@ class SelectRenderer extends CellRendererValidation {
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectRenderer, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectRenderer, selector: "ng-component", usesInheritance: true, ngImport: i0, template: `
-      <!--<div [matTooltip]="this.errorMessage"
-           [matTooltipShowDelay]="300"
-           [matTooltipHideDelay]="300"
-           class="full-width full-height  {{this.errorMessage && this.errorMessage !== '' ? 'error' : ''}}">-->
-		<div class="full-width full-height  {{this.errorMessage && this.errorMessage !== '' ? 'error' : ''}}">
-			<div class="t full-width full-height fix-table">
-				<div class="tr">
-					<div class="td cell-text-container ellipsis">
-						{{display}}
-					</div>
-				</div>
-			</div>
-		</div>
-	`, isInline: true, styles: [".t{display:table}.tr{display:table-row}.td{display:table-cell}.cell-text-container{vertical-align:middle;padding-left:.3rem}.full-width{width:100%}.full-height{height:100%}.fix-table{table-layout:fixed}.ellipsis{overflow:hidden;text-overflow:ellipsis}.error{background:linear-gradient(#ff000040,#ff000040,#ff000040);border:solid red 2px}\n"] }); }
+        <!--<div [matTooltip]="this.errorMessage"
+             [matTooltipShowDelay]="300"
+             [matTooltipHideDelay]="300"
+             class="full-width full-height  {{this.errorMessage && this.errorMessage !== '' ? 'error' : ''}}">-->
+        <div class="full-width full-height  {{this.errorMessage && this.errorMessage !== '' ? 'error' : ''}}">
+            <div class="t full-width full-height fix-table">
+                <div class="tr">
+                    <div class="td cell-text-container ellipsis">
+                        {{display}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    `, isInline: true, styles: [".t{display:table}.tr{display:table-row}.td{display:table-cell}.cell-text-container{vertical-align:middle;padding-left:.3rem}.full-width{width:100%}.full-height{height:100%}.fix-table{table-layout:fixed}.ellipsis{overflow:hidden;text-overflow:ellipsis}.error{background:linear-gradient(#ff000040,#ff000040,#ff000040);border:solid red 2px}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectRenderer, decorators: [{
             type: Component,
             args: [{ template: `
-      <!--<div [matTooltip]="this.errorMessage"
-           [matTooltipShowDelay]="300"
-           [matTooltipHideDelay]="300"
-           class="full-width full-height  {{this.errorMessage && this.errorMessage !== '' ? 'error' : ''}}">-->
-		<div class="full-width full-height  {{this.errorMessage && this.errorMessage !== '' ? 'error' : ''}}">
-			<div class="t full-width full-height fix-table">
-				<div class="tr">
-					<div class="td cell-text-container ellipsis">
-						{{display}}
-					</div>
-				</div>
-			</div>
-		</div>
-	`, styles: [".t{display:table}.tr{display:table-row}.td{display:table-cell}.cell-text-container{vertical-align:middle;padding-left:.3rem}.full-width{width:100%}.full-height{height:100%}.fix-table{table-layout:fixed}.ellipsis{overflow:hidden;text-overflow:ellipsis}.error{background:linear-gradient(#ff000040,#ff000040,#ff000040);border:solid red 2px}\n"] }]
+        <!--<div [matTooltip]="this.errorMessage"
+             [matTooltipShowDelay]="300"
+             [matTooltipHideDelay]="300"
+             class="full-width full-height  {{this.errorMessage && this.errorMessage !== '' ? 'error' : ''}}">-->
+        <div class="full-width full-height  {{this.errorMessage && this.errorMessage !== '' ? 'error' : ''}}">
+            <div class="t full-width full-height fix-table">
+                <div class="tr">
+                    <div class="td cell-text-container ellipsis">
+                        {{display}}
+                    </div>
+                </div>
+            </div>
+        </div>
+    `, styles: [".t{display:table}.tr{display:table-row}.td{display:table-cell}.cell-text-container{vertical-align:middle;padding-left:.3rem}.full-width{width:100%}.full-height{height:100%}.fix-table{table-layout:fixed}.ellipsis{overflow:hidden;text-overflow:ellipsis}.error{background:linear-gradient(#ff000040,#ff000040,#ff000040);border:solid red 2px}\n"] }]
         }] });
 
-//import {MatDialog, MatDialogConfig, MatDialogRef} from "@angular/material/dialog";
-//import {SpinnerDialogComponent} from "../popup/spinner-dialog.component";
 class SelectEditor {
-    get options() {
-        if (this.using_selectOptionsPerRowFilterFunction) {
-            return this._filteredOptions;
-        }
-        else {
-            return this._options;
-        }
-    }
-    set options(value) {
-        this._options = value;
-    }
-    //    private spinnerDialogRefs: MatDialogRef<SpinnerDialogComponent>[] = [];
-    constructor() {
-        this.using_selectOptionsPerRowFilterFunction = false;
-        this._spinnerDialogIsOpen = false;
-    }
+    // variables used for the optional per-row-filtering
+    constructor() { }
     agInit(params) {
         this.params = params;
-        this.options = [];
-        this.optionsValueField = "";
-        this.optionsDisplayField = "";
-        if (this.params && this.params.column && this.params.column.colDef) {
-            this.gridValueField = this.params.column.colDef.field;
-            this.options = this.params.column.colDef.selectOptions;
-            this.optionsValueField = this.params.column.colDef.selectOptionsValueField;
-            this.optionsDisplayField = this.params.column.colDef.selectOptionsDisplayField;
-            if (this.params.column.colDef.selectOptionsPerRowFilterFunction) {
-                let backup = this.selectOptionsPerRowFilterFunction;
-                try {
-                    this.selectOptionsPerRowFilterFunction = this.params.column.colDef.selectOptionsPerRowFilterFunction;
-                    this.using_selectOptionsPerRowFilterFunction = !!this.selectOptionsPerRowFilterFunction;
-                }
-                catch (e) {
-                    console.error("selectOptionsPerRowFilterFunction option has wrong signature for column : " + this.params.column.colDef.headerName + "\n"
-                        + "  Requires signature (context:any, rowData: any, option: any) => boolean");
-                    this.selectOptionsPerRowFilterFunction = backup;
-                    this.using_selectOptionsPerRowFilterFunction = !!backup;
-                }
-            }
-            this.context = this.params.column.colDef.context;
-            this.fillGroupAttribute = this.params.column.colDef.fillGroupAttribute;
-            this.fillAll = this.params.column.colDef.fillAll && ("" + this.params.column.colDef.fillAll).toLowerCase() !== "false";
-            this.showFillButton = this.params.column.colDef.showFillButton && ("" + this.params.column.colDef.showFillButton).toLowerCase() !== "false";
-            if (this._options
-                && this.params.node
-                && this.params.node.data
-                && this.using_selectOptionsPerRowFilterFunction) {
-                this._filteredOptions = this._options.filter((option) => {
-                    return this.selectOptionsPerRowFilterFunction(this.context, this.params.node.data, option);
-                });
-            }
-        }
+        this.options = params.options;
+        this.valueField = params.valueField;
+        this.displayField = params.displayField;
         if (this.params) {
-            this.value = this.params.value ? "" + this.params.value : "";
-        }
-        if (this.showFillButton && !this.fillAll && (!this.fillGroupAttribute || this.fillGroupAttribute === "")) {
-            throw new Error("Invalid state, cannot use fill button without specifying the fillGroupAttribute or fillAll.");
-        }
-    }
-    ngOnDestroy() {
-        if (this.params && this.params.node && this.params.node[(this.gridValueField + "_originalValue")]) {
-            this.value = this.params.node[(this.gridValueField + "_originalValue")];
+            this.value = this.params.value ? String(this.params.value) : "";
         }
     }
     onChange(event) {
-        if (event && event.currentTarget) {
-            if (this.params && this.params.node && !this.params.node[(this.gridValueField + "_originalValue")]) {
-                this.params.node[(this.gridValueField + "_originalValue")] = this.value;
-            }
-            // This looks unnecessary, since this.value is linked to the value of the select component, but
-            // because this also ends editing, it also queues the destruction of this component and the call to getValue.
-            // The problem was that this.value isn't updated with the new value before this event fires,
-            // so we need to update it manually here.
-            this.value = event.currentTarget.value;
-            this.params.node.setDataValue(this.gridValueField, this.value);
-        }
-        if (this.params) {
-            //  If the fill button, which is part of the editor, is activated, don't stop editing
-            // immediately after making a selection.
-            if (!this.showFillButton) {
-                this.params.stopEditing();
-            }
-        }
     }
     getValue() {
-        return this.value ? this.value : "";
+        return this.params.value ? String(this.params.value) : "";
     }
     isPopup() {
         return false;
     }
-    onFillButtonClicked() {
-        if (!this.fillAll && (!this.fillGroupAttribute || this.fillGroupAttribute === "")) {
-            throw new Error('No column attribute "fillGroupAttribute" or "fillAll" specified. This is required to use the Fill functionality.');
-        }
-        if (this.params && this.params.column && this.params.column.gridApi && this.params.node && (this.fillAll || (this.fillGroupAttribute && this.fillGroupAttribute !== ""))) {
-            let thisRowNode = this.params.node;
-            //this.startSpinnerDialog();
-            this.params.column.gridApi.forEachNodeAfterFilter((rowNode) => {
-                if (rowNode && rowNode.data && thisRowNode && thisRowNode.data && (this.fillAll || rowNode.data[this.fillGroupAttribute] === thisRowNode.data[this.fillGroupAttribute])) {
-                    let spoofedEvent = {
-                        api: this.params.column.gridApi,
-                        colDef: this.params.column.colDef,
-                        column: this.params.column,
-                        columnApi: this.params.column.columnApi,
-                        context: undefined,
-                        data: rowNode.data,
-                        event: null,
-                        newValue: this.value,
-                        node: rowNode,
-                        oldValue: rowNode.data[this.gridValueField],
-                        rowIndex: rowNode.rowIndex,
-                        rowPinned: undefined,
-                        type: "cellValueChanged",
-                        value: this.value
-                    };
-                    rowNode.data[this.gridValueField] = this.value;
-                    rowNode.setDataValue(this.gridValueField, this.value);
-                    this.params.column.gridApi.dispatchEvent(spoofedEvent);
-                }
-            });
-            this.params.column.gridApi.refreshCells();
-            setTimeout(() => {
-                //this.stopSpinnerDialogs();
-            });
-        }
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectEditor, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SelectEditor, selector: "ng-component", ngImport: i0, template: `
         <div class="full-width full-height flex-column-container">
           <div class="full-height flex-stretch flex-row">
-            <select class="full-width full-height" [(value)]="value" (change)="onChange($event)">
+            <select class="full-width full-height" [(ngModel)]="params.value" (change)="onChange($event)">
               <option hidden>
                 Select An Option
+              </option>
+              <!-- Blank Option -->
+              <option value="">
+
               </option>
               <option
                 *ngFor="let option of options"
-                value="{{option.hasOwnProperty(optionsValueField) ? option[optionsValueField] : (option.value) ? option.value : option }}">
-                {{option.hasOwnProperty(optionsDisplayField) ? option[optionsDisplayField] : (option.display) ? option.display : option }}
+                value="{{option.hasOwnProperty(valueField) ? option[valueField] : (option.value) ? option.value : option }}">
+                {{option.hasOwnProperty(displayField) ? option[displayField] : (option.display) ? option.display : option }}
               </option>
             </select>
           </div>
-          <div *ngIf="showFillButton" class="full-height flex-row button-container">
-            <button riRippleEffectDict class="full-height" (click)="onFillButtonClicked()">Fill</button>
-          </div>
         </div>
-      `, isInline: true, styles: [".full-width{width:100%}.full-height{height:100%}.flex-column-container{display:flex;flex-direction:row}.flex-row{display:flex}.flex-stretch{display:flex;flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }] }); }
+      `, isInline: true, styles: [".full-width{width:100%}.full-height{height:100%}.flex-column-container{display:flex;flex-direction:row}.flex-row{display:flex}.flex-stretch{display:flex;flex:1}\n"], dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SelectEditor, decorators: [{
             type: Component,
             args: [{ template: `
         <div class="full-width full-height flex-column-container">
           <div class="full-height flex-stretch flex-row">
-            <select class="full-width full-height" [(value)]="value" (change)="onChange($event)">
+            <select class="full-width full-height" [(ngModel)]="params.value" (change)="onChange($event)">
               <option hidden>
                 Select An Option
+              </option>
+              <!-- Blank Option -->
+              <option value="">
+
               </option>
               <option
                 *ngFor="let option of options"
-                value="{{option.hasOwnProperty(optionsValueField) ? option[optionsValueField] : (option.value) ? option.value : option }}">
-                {{option.hasOwnProperty(optionsDisplayField) ? option[optionsDisplayField] : (option.display) ? option.display : option }}
+                value="{{option.hasOwnProperty(valueField) ? option[valueField] : (option.value) ? option.value : option }}">
+                {{option.hasOwnProperty(displayField) ? option[displayField] : (option.display) ? option.display : option }}
               </option>
             </select>
           </div>
-          <div *ngIf="showFillButton" class="full-height flex-row button-container">
-            <button riRippleEffectDict class="full-height" (click)="onFillButtonClicked()">Fill</button>
-          </div>
         </div>
       `, styles: [".full-width{width:100%}.full-height{height:100%}.flex-column-container{display:flex;flex-direction:row}.flex-row{display:flex}.flex-stretch{display:flex;flex:1}\n"] }]
         }], ctorParameters: () => [] });
@@ -1491,14 +1315,48 @@ class DictionaryEditorDetailComponent {
                 let options = this.secondaryDictionaryEntries.find((a) => {
                     return a.dictionaryName === field.filterDictionaryClass;
                 });
+                let sortedOptions;
+                if (options && options.entries) {
+                    sortedOptions = options.entries.sort((optionA, optionB) => {
+                        if (optionA && !optionB) {
+                            return 1;
+                        }
+                        if (optionB && !optionA) {
+                            return -1;
+                        }
+                        if (!optionA && !optionB) {
+                            return 0;
+                        }
+                        if (optionA.display.toLowerCase() > optionB.display.toLowerCase()) {
+                            return 1;
+                        }
+                        else if ((optionB.display.toLowerCase() > optionA.display.toLowerCase())) {
+                            return -1;
+                        }
+                        else {
+                            return 0;
+                        }
+                    });
+                }
                 col = {
                     field: field.name,
                     headerName: field.displayName,
                     editable: this.isEditable.bind(this),
-                    cellRendererFramework: SelectRenderer,
-                    cellEditorFramework: SelectEditor,
-                    selectOptionsDisplayField: "display",
-                    selectOptionsValueField: "id",
+                    cellRenderer: SelectRenderer,
+                    cellEditor: SelectEditor,
+                    cellEditorParams: {
+                        displayField: 'display',
+                        valueField: 'id',
+                        options: sortedOptions,
+                        displayOrder: field.displayOrder,
+                        dictionaryDisplay: field.dictionaryDisplay,
+                        dictionaryTooltip: field.dictionaryTooltip
+                    },
+                    cellRendererParams: {
+                        displayField: 'display',
+                        valueField: 'id',
+                        options: sortedOptions,
+                    },
                     sortable: true,
                     resizable: true,
                     filter: true,
@@ -1596,8 +1454,8 @@ class DictionaryEditorDetailComponent {
                 col = {
                     field: field.name,
                     headerName: field.displayName,
-                    cellRendererFramework: DateRenderer,
-                    cellEditorFramework: AgGridDateCellEditorComponent,
+                    cellRenderer: DateRenderer,
+                    cellEditor: AgGridDateCellEditorComponent,
                     editable: this.isEditable.bind(this),
                     sortable: true,
                     resizable: true,
@@ -1946,7 +1804,6 @@ class DictionaryEditorDetailComponent {
                                  (gridReady)="this.onMetaGridReady($event)"
                                  [gridOptions]="this.metaGridOptions"
                                  [rowSelection]="'single'"
-                                 [frameworkComponents]="frameworkComponents"
                                  [rowData]="dictionary?.fields">
                 </ag-grid-angular>
               </div>
@@ -2032,7 +1889,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                                  (gridReady)="this.onMetaGridReady($event)"
                                  [gridOptions]="this.metaGridOptions"
                                  [rowSelection]="'single'"
-                                 [frameworkComponents]="frameworkComponents"
                                  [rowData]="dictionary?.fields">
                 </ag-grid-angular>
               </div>