feat: add nameCompositeEditor override to be used by Composite Editor

- nameCompositeEditor allows to pass an alternative column title name that could be longer since we have more room to display each title name.

packages/common/src/interfaces/column.interface.ts

@@ -170,12 +170,18 @@ export interface Column<T = any> {
   /** Minimum Width of the column in pixels (number only). */
   minWidth?: number;
 
-  /** Field Name to be displayed in the Grid (UI) */
+  /** Column Title Name to be displayed in the Grid (UI) */
   name?: string;
 
-  /** Field Name translation key that can be used by the translate Service (i18n) to display the text for each column header title */
+  /** Column Title Name that could be used by the Composite Editor Modal, it has precedence over the column "name" property. */
+  nameCompositeEditor?: string;
+
+  /** Column Title Name translation key that can be used by the translate Service (i18n) to display the text for each column header title */
   nameKey?: string;
 
+  /** Column Title Name translation key that could be used by the Composite Editor Modal, it has precedence over the column "name" property. */
+  nameCompositeEditorKey?: string;
+
   /** an event that can be used for executing an action before the cell becomes editable (that event happens before the "onCellChange" event) */
   onBeforeEditCell?: (e: SlickEventData, args: OnEventArgs) => void;
 

packages/composite-editor-component/src/slick-composite-editor.component.ts

@@ -614,12 +614,13 @@ export class SlickCompositeEditorComponent implements ExternalResource {
    */
   private getColumnLabel(columnDef: Column): string {
     const columnGroupSeparator = this.gridOptions.columnGroupSeparator || ' - ';
-    let columnName = columnDef.name || '';
+    let columnName = columnDef.nameCompositeEditor || columnDef.name || '';
     let columnGroup = columnDef.columnGroup || '';
 
     if (this.gridOptions.enableTranslate && this.translaterService) {
-      if (columnDef.nameKey) {
-        columnName = this.translaterService.translate(columnDef.nameKey);
+      const translationKey = columnDef.nameCompositeEditorKey || columnDef.nameKey;
+      if (translationKey) {
+        columnName = this.translaterService.translate(translationKey);
       }
       if (columnDef.columnGroupKey && this.translaterService?.translate) {
         columnGroup = this.translaterService.translate(columnDef.columnGroupKey);