@memberjunction/codegen-lib 3.4.0 → 4.1.0

package/dist/Angular/angular-codegen.js

@@ -1,84 +1,38 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.AngularClientGeneratorBase = exports.AngularFormSectionInfo = void 0;
-const core_1 = require("@memberjunction/core");
-const status_logging_1 = require("../Misc/status_logging");
-const fs_1 = __importDefault(require("fs"));
-const path_1 = __importDefault(require("path"));
-const config_1 = require("../Config/config");
-const related_entity_components_1 = require("./related-entity-components");
-const util_1 = require("../Misc/util");
+import { GeneratedFormSectionType, EntityFieldTSType, EntityFieldValueListType, Metadata } from '@memberjunction/core';
+import { logError, logStatus } from '../Misc/status_logging.js';
+import fs from 'fs';
+import path from 'path';
+import { mjCoreSchema, outputOptionValue, configInfo } from '../Config/config.js';
+import { RelatedEntityDisplayComponentGeneratorBase } from './related-entity-components.js';
+import { sortBySequenceAndCreatedAt } from '../Misc/util.js';
 /**
  * Represents metadata about an Angular form section that is generated for an entity
  */
-class AngularFormSectionInfo {
-    /**
-     * The type of form section (e.g., Top, Category, Details)
-     */
-    Type;
-    /**
-     * The display name of the section
-     */
-    Name;
-    /**
-     * The generated HTML code for the section (panel or tab)
-     */
-    TabCode;
-    /**
-     * The TypeScript class name for the section component
-     */
-    ClassName;
-    /**
-     * The filename where the section component will be saved
-     */
-    FileName;
-    /**
-     * The complete TypeScript component code for the section
-     */
-    ComponentCode;
-    /**
-     * Array of entity fields that belong to this section
-     */
-    Fields;
-    /**
-     * The filename without the .ts extension
-     */
-    FileNameWithoutExtension;
-    /**
-     * The class name of the entity this section belongs to
-     */
-    EntityClassName;
-    /**
-     * Indicates if this section represents a related entity tab
-     */
-    IsRelatedEntity = false;
-    /**
-     * Specifies where related entity tabs should be displayed relative to field tabs
-     */
-    RelatedEntityDisplayLocation = 'After Field Tabs';
-    /**
-     * The generation result for related entity components
-     */
-    GeneratedOutput;
-    /**
-     * The minimum sequence number from fields in this section (used for sorting)
-     */
-    MinSequence;
-    /**
-     * The unique camelCase key used for this section in the sectionsExpanded object
-     */
-    UniqueKey;
+export class AngularFormSectionInfo {
+    constructor() {
+        /**
+         * Indicates if this section represents a related entity tab
+         */
+        this.IsRelatedEntity = false;
+        /**
+         * Specifies where related entity tabs should be displayed relative to field tabs
+         */
+        this.RelatedEntityDisplayLocation = 'After Field Tabs';
+    }
 }
-exports.AngularFormSectionInfo = AngularFormSectionInfo;
 /**
  * Base class for generating Angular client code for MemberJunction entities.
  * This class handles the generation of Angular components, forms, and modules based on entity metadata.
  * You can sub-class this class to create your own Angular client code generator logic.
  */
-class AngularClientGeneratorBase {
+export class AngularClientGeneratorBase {
+    constructor() {
+        /**
+         * Base name used for generating sub-module names
+         * @protected
+         */
+        this.subModule_BaseName = 'GeneratedForms_SubModule_';
+    }
     /**
      * Main entry point for generating Angular code for a collection of entities
      * @param entities Array of EntityInfo objects to generate Angular code for
@@ -89,24 +43,24 @@ class AngularClientGeneratorBase {
      */
     async generateAngularCode(entities, directory, modulePrefix, contextUser) {
         try {
-            const entityPath = path_1.default.join(directory, 'Entities');
+            const entityPath = path.join(directory, 'Entities');
             //const classMapEntries: string[] = [];
             const componentImports = [];
             const relatedEntityModuleImports = [];
             const componentNames = [];
             const sections = [];
-            if (!fs_1.default.existsSync(entityPath))
-                fs_1.default.mkdirSync(entityPath, { recursive: true }); // create the directory if it doesn't exist
+            if (!fs.existsSync(entityPath))
+                fs.mkdirSync(entityPath, { recursive: true }); // create the directory if it doesn't exist
             for (let i = 0; i < entities.length; ++i) {
                 const entity = entities[i];
                 if (entity.PrimaryKeys && entity.PrimaryKeys.length > 0 && entity.IncludeInAPI) {
-                    const thisEntityPath = path_1.default.join(entityPath, entity.ClassName);
-                    if (!fs_1.default.existsSync(thisEntityPath))
-                        fs_1.default.mkdirSync(thisEntityPath, { recursive: true }); // create the directory if it doesn't exist
+                    const thisEntityPath = path.join(entityPath, entity.ClassName);
+                    if (!fs.existsSync(thisEntityPath))
+                        fs.mkdirSync(thisEntityPath, { recursive: true }); // create the directory if it doesn't exist
                     const { htmlCode, additionalSections, relatedEntitySections } = await this.generateSingleEntityHTMLForAngular(entity, contextUser);
                     const tsCode = this.generateSingleEntityTypeScriptForAngular(entity, additionalSections, relatedEntitySections);
-                    fs_1.default.writeFileSync(path_1.default.join(thisEntityPath, `${entity.ClassName.toLowerCase()}.form.component.ts`), tsCode);
-                    fs_1.default.writeFileSync(path_1.default.join(thisEntityPath, `${entity.ClassName.toLowerCase()}.form.component.html`), htmlCode);
+                    fs.writeFileSync(path.join(thisEntityPath, `${entity.ClassName.toLowerCase()}.form.component.ts`), tsCode);
+                    fs.writeFileSync(path.join(thisEntityPath, `${entity.ClassName.toLowerCase()}.form.component.html`), htmlCode);
                     // Sections are now inline in HTML templates, no separate files needed
                     // Just track them for module generation purposes
                     if (additionalSections.length > 0) {
@@ -115,7 +69,7 @@ class AngularClientGeneratorBase {
                         });
                     }
                     const componentName = `${entity.ClassName}FormComponent`;
-                    componentImports.push(`import { ${componentName}, Load${componentName} } from "./Entities/${entity.ClassName}/${entity.ClassName.toLowerCase()}.form.component";`);
+                    componentImports.push(`import { ${componentName} } from "./Entities/${entity.ClassName}/${entity.ClassName.toLowerCase()}.form.component";`);
                     const currentComponentDistinctRelatedEntityClassNames = [];
                     relatedEntitySections.forEach(s => s.GeneratedOutput.Component.ImportItems.forEach(i => {
                         if (!currentComponentDistinctRelatedEntityClassNames.find(ii => ii.itemClassName === i.ClassName))
@@ -140,16 +94,16 @@ class AngularClientGeneratorBase {
                     // now the imports are good
                 }
                 else {
-                    (0, status_logging_1.logStatus)(`   Entity ${entity.Name} does not have a primary key or is not included in the API, skipping code generation for this entity`);
+                    logStatus(`   Entity ${entity.Name} does not have a primary key or is not included in the API, skipping code generation for this entity`);
                 }
             }
-            const maxComponentsPerModule = (0, config_1.outputOptionValue)('Angular', 'maxComponentsPerModule', 25);
+            const maxComponentsPerModule = outputOptionValue('Angular', 'maxComponentsPerModule', 25);
             const moduleCode = this.generateAngularModule(componentImports, componentNames, relatedEntityModuleImports, sections, modulePrefix, maxComponentsPerModule);
-            fs_1.default.writeFileSync(path_1.default.join(directory, 'generated-forms.module.ts'), moduleCode);
+            fs.writeFileSync(path.join(directory, 'generated-forms.module.ts'), moduleCode);
             return true;
         }
         catch (err) {
-            (0, status_logging_1.logError)(err);
+            logError(err);
             return false;
         }
     }
@@ -184,19 +138,11 @@ import { FormsModule } from '@angular/forms';
 
 // MemberJunction Imports
 import { BaseFormsModule } from '@memberjunction/ng-base-forms';
-import { FormToolbarModule } from '@memberjunction/ng-form-toolbar';
 import { EntityViewerModule } from '@memberjunction/ng-entity-viewer';
 import { LinkDirectivesModule } from '@memberjunction/ng-link-directives';
 import { MJTabStripModule } from "@memberjunction/ng-tabstrip";
 import { ContainerDirectivesModule } from "@memberjunction/ng-container-directives";
-
-// Kendo Imports
-import { InputsModule } from '@progress/kendo-angular-inputs';
-import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
-import { ButtonsModule } from '@progress/kendo-angular-buttons';
 import { LayoutModule } from '@progress/kendo-angular-layout';
-import { ComboBoxModule } from '@progress/kendo-angular-dropdowns';
-import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
 
 // Import Generated Components
 ${componentImports.join('\n')}
@@ -205,14 +151,9 @@ ${relatedEntityModuleImports.filter(remi => remi.library.trim().toLowerCase() !=
             .join('\n')}   
 ${moduleCode}
     
-export function Load${modulePrefix}GeneratedForms() {
-    // This function doesn't do much, but it calls each generated form's loader function
-    // which in turn calls the sections for that generated form. Ultimately, those bits of
-    // code do NOTHING - the point is to prevent the code from being eliminated during tree shaking
-    // since it is dynamically instantiated on demand, and the Angular compiler has no way to know that,
-    // in production builds tree shaking will eliminate the code unless we do this
-    ${componentNames.map(c => `Load${c.componentName}();`).join('\n    ')}
-}
+// Note: LoadXXXGeneratedForms() functions have been removed. Tree-shaking prevention
+// is now handled by the pre-built class registration manifest system.
+// See packages/CodeGenLib/CLASS_MANIFEST_GUIDE.md for details.
     `;
     }
     /**
@@ -274,11 +215,6 @@ export class ${modulePrefix}GeneratedFormsModule { }`;
         // so we need to combine the two into a single return value and send back to the caller
         return subModules.join('\n\n') + '\n\n' + masterModuleCode;
     }
-    /**
-     * Base name used for generating sub-module names
-     * @protected
-     */
-    subModule_BaseName = 'GeneratedForms_SubModule_';
     /**
      * Get the base name for the sub-modules. Override this method to change the base name.
      * @returns The base name for sub-modules (default: 'GeneratedForms_SubModule_')
@@ -298,17 +234,11 @@ imports: [
     CommonModule,
     FormsModule,
     LayoutModule,
-    InputsModule,
-    ButtonsModule,
-    DateInputsModule,
+    BaseFormsModule,
     EntityViewerModule,
     LinkDirectivesModule,
-    BaseFormsModule,
-    FormToolbarModule,
     MJTabStripModule,
-    ContainerDirectivesModule,
-    DropDownListModule,
-    ComboBoxModule${additionalModulesToImport.length > 0 ? ',\n    ' + additionalModulesToImport.join(',\n    ') : ''}
+    ContainerDirectivesModule${additionalModulesToImport.length > 0 ? ',\n    ' + additionalModulesToImport.join(',\n    ') : ''}
 ],
 exports: [
 ]
@@ -355,7 +285,7 @@ export class ${this.SubModuleBaseName}${moduleNumber} { }
             relatedEntitySections.filter(s => s.GeneratedOutput && s.GeneratedOutput.CodeOutput.length > 0)
                 .map(s => s.GeneratedOutput.CodeOutput.split("\n").map(l => `    ${l}`).join("\n")).join('\n') : '';
         // Generate unique keys for all sections FIRST, then use them everywhere
-        const sectionsWithoutTop = additionalSections.filter(s => s.Type !== core_1.GeneratedFormSectionType.Top && s.Name);
+        const sectionsWithoutTop = additionalSections.filter(s => s.Type !== GeneratedFormSectionType.Top && s.Name);
         const allSections = [...sectionsWithoutTop, ...relatedEntitySections];
         // Assign unique keys to each section
         const usedKeys = new Set();
@@ -390,14 +320,15 @@ export class ${this.SubModuleBaseName}${moduleNumber} { }
         const sectionInitCode = sectionInitEntries.length > 0
             ? `\n\n    override async ngOnInit() {\n        await super.ngOnInit();\n        this.initSections([\n${sectionInitEntries.join(',\n')}\n        ]);\n    }`
             : '';
-        const entityPackageName = config_1.configInfo.entityPackageName || 'mj_generatedentities';
+        const entityPackageName = configInfo.entityPackageName || 'mj_generatedentities';
         return `import { Component } from '@angular/core';
-import { ${entityObjectClass}Entity } from '${entity.SchemaName === config_1.mjCoreSchema ? '@memberjunction/core-entities' : entityPackageName}';
+import { ${entityObjectClass}Entity } from '${entity.SchemaName === mjCoreSchema ? '@memberjunction/core-entities' : entityPackageName}';
 import { RegisterClass } from '@memberjunction/global';
 import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 ${generationImports.length > 0 ? generationImports + '\n' : ''}
 @RegisterClass(BaseFormComponent, '${entity.Name}') // Tell MemberJunction about this class
 @Component({
+    standalone: false,
     selector: 'gen-${entity.ClassName.toLowerCase()}-form',
     templateUrl: './${entity.ClassName.toLowerCase()}.form.component.html'
 })
@@ -405,9 +336,6 @@ export class ${entity.ClassName}FormComponent extends BaseFormComponent {
     public record!: ${entityObjectClass}Entity;${generationInjectedCode.length > 0 ? '\n' + generationInjectedCode : ''}${sectionInitCode}
 }
 
-export function Load${entity.ClassName}FormComponent() {
-    // does nothing, but called to prevent tree-shaking from eliminating this component from the build
-}
 `;
     }
     /**
@@ -416,7 +344,7 @@ export function Load${entity.ClassName}FormComponent() {
      * @returns True if the entity has top area fields, false otherwise
      */
     entityHasTopArea(entity) {
-        return entity.Fields.some(f => f.GeneratedFormSectionType === core_1.GeneratedFormSectionType.Top);
+        return entity.Fields.some(f => f.GeneratedFormSectionType === GeneratedFormSectionType.Top);
     }
     /**
      * Generates HTML for the top area section of an entity form
@@ -466,26 +394,27 @@ export function Load${entity.ClassName}FormComponent() {
      * @param categoryIcons Optional map of category names to Font Awesome icon classes
      * @returns Array of generated form sections
      */
-    generateAngularAdditionalSections(entity, startIndex, categoryIcons) {
+    generateAngularAdditionalSections(entity, startIndex, fieldCategories) {
         const sections = [];
         let index = startIndex;
-        const sortedFields = (0, util_1.sortBySequenceAndCreatedAt)(entity.Fields);
+        const sortedFields = sortBySequenceAndCreatedAt(entity.Fields);
         for (const field of sortedFields) {
             if (field.IncludeInGeneratedForm) {
-                if (field.GeneratedFormSectionType === core_1.GeneratedFormSectionType.Category && field.Category && field.Category !== '' && field.IncludeInGeneratedForm)
-                    this.AddSectionIfNeeded(entity, sections, core_1.GeneratedFormSectionType.Category, field.Category, field.Sequence);
-                else if (field.GeneratedFormSectionType === core_1.GeneratedFormSectionType.Details)
-                    this.AddSectionIfNeeded(entity, sections, core_1.GeneratedFormSectionType.Details, "Details", field.Sequence);
-                else if (field.GeneratedFormSectionType === core_1.GeneratedFormSectionType.Top)
-                    this.AddSectionIfNeeded(entity, sections, core_1.GeneratedFormSectionType.Top, "Top", field.Sequence);
+                if (field.GeneratedFormSectionType === GeneratedFormSectionType.Category && field.Category && field.Category !== '' && field.IncludeInGeneratedForm)
+                    this.AddSectionIfNeeded(entity, sections, GeneratedFormSectionType.Category, field.Category, field.Sequence);
+                else if (field.GeneratedFormSectionType === GeneratedFormSectionType.Details)
+                    this.AddSectionIfNeeded(entity, sections, GeneratedFormSectionType.Details, "Details", field.Sequence);
+                else if (field.GeneratedFormSectionType === GeneratedFormSectionType.Top)
+                    this.AddSectionIfNeeded(entity, sections, GeneratedFormSectionType.Top, "Top", field.Sequence);
             }
         }
-        // Sort sections by minimum sequence (Top sections first, System sections last, then by MinSequence)
+        // Sort sections: Top first, then own categories, then inherited categories
+        // (nearest parent first), then System Metadata last
         sections.sort((a, b) => {
             // Top sections always first
-            if (a.Type === core_1.GeneratedFormSectionType.Top)
+            if (a.Type === GeneratedFormSectionType.Top)
                 return -1;
-            if (b.Type === core_1.GeneratedFormSectionType.Top)
+            if (b.Type === GeneratedFormSectionType.Top)
                 return 1;
             // System sections always last (after related entities)
             const aIsSystem = a.Name.toLowerCase() === 'system' || a.Name.toLowerCase() === 'system metadata';
@@ -494,6 +423,13 @@ export function Load${entity.ClassName}FormComponent() {
                 return 1;
             if (!aIsSystem && bIsSystem)
                 return -1;
+            // Inherited sections come after own sections (but before System)
+            const aIsInherited = fieldCategories?.[a.Name]?.inheritedFromEntityName != null;
+            const bIsInherited = fieldCategories?.[b.Name]?.inheritedFromEntityName != null;
+            if (aIsInherited && !bIsInherited)
+                return 1;
+            if (!aIsInherited && bIsInherited)
+                return -1;
             // Otherwise sort by sequence
             const aSeq = a.MinSequence ?? Number.MAX_SAFE_INTEGER;
             const bSeq = b.MinSequence ?? Number.MAX_SAFE_INTEGER;
@@ -503,19 +439,20 @@ export function Load${entity.ClassName}FormComponent() {
         let sectionIndex = 0;
         for (const section of sections) {
             let sectionName = '';
-            if (section.Type === core_1.GeneratedFormSectionType.Top) {
+            if (section.Type === GeneratedFormSectionType.Top) {
                 section.TabCode = this.generateTopAreaHTMLForAngular(entity);
                 sectionName = 'top-area';
             }
             else {
-                if (section.Type === core_1.GeneratedFormSectionType.Category)
+                if (section.Type === GeneratedFormSectionType.Category)
                     sectionName = this.stripWhiteSpace(section.Name.toLowerCase());
-                else if (section.Type === core_1.GeneratedFormSectionType.Details)
+                else if (section.Type === GeneratedFormSectionType.Details)
                     sectionName = 'details';
                 // Generate collapsible panel HTML inline instead of using separate components
                 const formHTML = this.generateSectionHTMLForAngular(entity, section);
-                // Use category-specific icon from LLM if available, otherwise fall back to keyword matching
-                const icon = (categoryIcons && categoryIcons[section.Name]) || this.getIconForCategory(section.Name);
+                // Use category-specific icon from metadata if available, otherwise fall back to keyword matching
+                const categoryInfo = fieldCategories ? fieldCategories[section.Name] : undefined;
+                const icon = categoryInfo?.icon || this.getIconForCategory(section.Name);
                 // NOTE: We'll set the UniqueKey later in generateSingleEntityTypeScriptForAngular()
                 // For now, just use a placeholder that will be replaced
                 const sectionKey = this.camelCase(section.Name);
@@ -529,18 +466,22 @@ export function Load${entity.ClassName}FormComponent() {
                 }).join(' ') : '';
                 // No additional indentation needed - formHTML is already properly indented
                 const indentedFormHTML = formHTML;
+                // Build inherited variant attributes if this category comes from a parent entity
+                const inheritedAttrs = categoryInfo?.inheritedFromEntityName
+                    ? `\n        Variant="inherited"\n        InheritedFromEntity="${categoryInfo.inheritedFromEntityName}"`
+                    : '';
                 section.TabCode = `${sectionIndex > 0 ? '\n' : ''}    <!-- ${section.Name} Section -->
-    <mj-collapsible-panel slot="field-panels"
-        sectionKey="${sectionKey}"
-        sectionName="${section.Name}"
-        icon="${icon}"
-        [form]="this"
-        [formContext]="formContext">
+    <mj-collapsible-panel field-panels
+        SectionKey="${sectionKey}"
+        SectionName="${section.Name}"
+        Icon="${icon}"${inheritedAttrs}
+        [Form]="this"
+        [FormContext]="formContext">
 ${indentedFormHTML}
     </mj-collapsible-panel>`;
                 sectionIndex++;
             }
-            if (section.Type !== core_1.GeneratedFormSectionType.Top)
+            if (section.Type !== GeneratedFormSectionType.Top)
                 index++; // don't increment the tab index for TOP AREA, becuse it won't be rendered as a tab
         }
         return sections;
@@ -555,23 +496,29 @@ ${indentedFormHTML}
         let html = '';
         // figure out which fields will be in this section first
         section.Fields = [];
-        const sortedFields = (0, util_1.sortBySequenceAndCreatedAt)(entity.Fields);
+        const sortedFields = sortBySequenceAndCreatedAt(entity.Fields);
         for (const field of sortedFields) {
             if (field.IncludeInGeneratedForm) {
                 let bMatch = false;
-                if (field.GeneratedFormSectionType === core_1.GeneratedFormSectionType.Top && section.Type === core_1.GeneratedFormSectionType.Top) {
+                if (field.GeneratedFormSectionType === GeneratedFormSectionType.Top && section.Type === GeneratedFormSectionType.Top) {
                     // match, include the field in the output
                     bMatch = true;
                 }
-                else if (field.GeneratedFormSectionType === core_1.GeneratedFormSectionType.Category && field.Category && section.Name && field.Category.trim().toLowerCase() === section.Name.trim().toLowerCase()) {
+                else if (field.GeneratedFormSectionType === GeneratedFormSectionType.Category && field.Category && section.Name && field.Category.trim().toLowerCase() === section.Name.trim().toLowerCase()) {
                     // match, include the field in the output
                     bMatch = true;
                 }
-                else if (field.GeneratedFormSectionType === core_1.GeneratedFormSectionType.Details && section.Type === core_1.GeneratedFormSectionType.Details) {
+                else if (field.GeneratedFormSectionType === GeneratedFormSectionType.Details && section.Type === GeneratedFormSectionType.Details) {
                     // match, include the field in the output
                     bMatch = true;
                 }
                 if (bMatch && field.Name.toLowerCase() !== 'id') {
+                    // Skip virtual fields that are the name-field-map of an FK field.
+                    // The FK field itself will display the name via RelatedEntityNameFieldMap
+                    // at runtime, so emitting the virtual field would be redundant.
+                    if (field.IsVirtual && this.isVirtualNameFieldForFK(entity, field)) {
+                        continue;
+                    }
                     section.Fields.push(field); // add the field to the section fields array
                 }
             }
@@ -582,27 +529,27 @@ ${indentedFormHTML}
             if (!field.ReadOnly) {
                 // first, check to see if we have a ValueListType != None, if so, generate a dropdown. 
                 // If value list type is ListOrUserEntry, then generate a combobox, if ValueListType = List, then generate a dropdown
-                if (field.ValueListTypeEnum !== core_1.EntityFieldValueListType.None) {
+                if (field.ValueListTypeEnum !== EntityFieldValueListType.None) {
                     // build the possible values list
-                    if (field.ValueListTypeEnum === core_1.EntityFieldValueListType.ListOrUserEntry) {
-                        // combo box
-                        editControl = `combobox`;
+                    if (field.ValueListTypeEnum === EntityFieldValueListType.ListOrUserEntry) {
+                        // autocomplete (allows user-entered values)
+                        editControl = `autocomplete`;
                     }
-                    else if (field.ValueListTypeEnum === core_1.EntityFieldValueListType.List) {
-                        // dropdown
-                        editControl = `dropdownlist`;
+                    else if (field.ValueListTypeEnum === EntityFieldValueListType.List) {
+                        // select (fixed list)
+                        editControl = `select`;
                     }
                 }
                 else {
                     // no value list, generate a text box, checkbox, or date picker
-                    if (field.TSType === core_1.EntityFieldTSType.Boolean)
+                    if (field.TSType === EntityFieldTSType.Boolean)
                         editControl = `checkbox`;
-                    else if (field.TSType === core_1.EntityFieldTSType.Date)
+                    else if (field.TSType === EntityFieldTSType.Date)
                         editControl = `datepicker`;
-                    else if (field.TSType === core_1.EntityFieldTSType.Number)
-                        editControl = `numerictextbox`;
-                    else if (field.TSType === core_1.EntityFieldTSType.String) {
-                        if (field.Length < 0 || field.MaxLength > 100) // length < 0 means nvarchar(max) or similar, so use textarea
+                    else if (field.TSType === EntityFieldTSType.Number)
+                        editControl = `number`;
+                    else if (field.TSType === EntityFieldTSType.String) {
+                        if (field.Length < 0 || field.MaxLength > 1000) // length < 0 means nvarchar(max) or similar, so use textarea; nvarchar(1000) and below get single-line textbox
                             editControl = `textarea`;
                         else
                             editControl = `textbox`;
@@ -613,10 +560,8 @@ ${indentedFormHTML}
                 editControl = 'code';
             }
             let linkType = null;
-            let linkComponentType = null;
             if (field.RelatedEntity && field.RelatedEntity.length > 0) {
                 linkType = 'Record';
-                linkComponentType = `\n            LinkComponentType="${field.RelatedEntityDisplayType}"`;
             }
             else if (field.ExtendedType && field.ExtendedType.length > 0) {
                 switch (field.ExtendedType.trim().toLowerCase()) {
@@ -630,17 +575,38 @@ ${indentedFormHTML}
             }
             // next, generate HTML for the field, use fillContainer if we have just one field
             html += `        <mj-form-field ${section.Fields.length === 1 ? '' : ''}
-            [record]="record"
+            [Record]="record"
             [ShowLabel]="${section.Fields.length > 1 ? 'true' : 'false'}"
             FieldName="${field.CodeName}"
             Type="${editControl}"
             [EditMode]="EditMode"
-            [formContext]="formContext"${linkType ? `\n            LinkType="${linkType}"` : ''}${linkComponentType ? linkComponentType : ''}
+            [FormContext]="formContext"${linkType ? `\n            LinkType="${linkType}"` : ''}
         ></mj-form-field>
 `;
         }
         return html;
     }
+    /**
+     * Checks whether a virtual field is the name-field-map target of an FK field on the same entity.
+     * For example, if entity has `ParentID` (FK) with `RelatedEntityNameFieldMap = 'Parent'`,
+     * then the virtual `Parent` field is redundant on the form since the FK field will display
+     * the name at runtime.
+     */
+    isVirtualNameFieldForFK(entity, virtualField) {
+        const vNameLower = virtualField.Name.toLowerCase();
+        return entity.Fields.some(f => {
+            if (f === virtualField || !f.RelatedEntity)
+                return false;
+            // 1. Exact match via RelatedEntityNameFieldMap
+            if (f.RelatedEntityNameFieldMap === virtualField.Name)
+                return true;
+            // 2. Case-insensitive convention: virtual "Foo" matches FK "FooID"
+            const fkLower = f.Name.toLowerCase();
+            if (fkLower === vNameLower + 'id')
+                return true;
+            return false;
+        });
+    }
     /**
      * Generates the tab name for a related entity tab. Appends the field's display name to the tab name
      * if there are multiple tabs for the same related entity to differentiate them.
@@ -664,7 +630,7 @@ ${indentedFormHTML}
                     // if the fkeyField has wrapping [] then remove them
                     fkeyField = fkeyField.trim().replace('[', '').replace(']', '');
                     // let's get the actual entityInfo for the related entity so we can get the field and see if it has a display name
-                    const md = new core_1.Metadata();
+                    const md = new Metadata();
                     const re = md.EntityByID(relatedEntity.RelatedEntityID);
                     const f = re.Fields.find(f => f.Name.trim().toLowerCase() === fkeyField.trim().toLowerCase());
                     if (f)
@@ -682,7 +648,7 @@ ${indentedFormHTML}
      * @returns Promise resolving to array of related entity tab sections
      */
     async generateRelatedEntityTabs(entity, startIndex, contextUser) {
-        const md = new core_1.Metadata();
+        const md = new Metadata();
         const tabs = [];
         // Sort related entities by Sequence (user's explicit ordering), then by RelatedEntity name (stable tiebreaker)
         const sortedRelatedEntities = entity.RelatedEntities
@@ -717,7 +683,7 @@ ${indentedFormHTML}
             }
             // Calculate section key before generation (may be replaced later if duplicate)
             const sectionKey = this.camelCase(tabName);
-            const component = await related_entity_components_1.RelatedEntityDisplayComponentGeneratorBase.GetComponent(relatedEntity, contextUser);
+            const component = await RelatedEntityDisplayComponentGeneratorBase.GetComponent(relatedEntity, contextUser);
             const generateResults = await component.Generate({
                 Entity: entity,
                 RelationshipInfo: relatedEntity,
@@ -731,21 +697,23 @@ ${indentedFormHTML}
             // Determine slot based on DisplayLocation
             const slot = relatedEntity.DisplayLocation === 'Before Field Tabs' ? 'before-panels' : 'after-panels';
             const tabCode = `${index > 0 ? '\n' : ''}    <!-- ${tabName} Section -->
-    <mj-collapsible-panel slot="${slot}"
-        sectionKey="${sectionKey}"
-        sectionName="${tabName}"
-        icon="${iconClass}"
-        variant="related-entity"
-        [form]="this"
-        [formContext]="formContext"
-        [badgeCount]="GetSectionRowCount('${sectionKey}')"
-        [defaultExpanded]="false">
-        <div *ngIf="record.IsSaved">
+    <mj-collapsible-panel ${slot}
+        SectionKey="${sectionKey}"
+        SectionName="${tabName}"
+        Icon="${iconClass}"
+        Variant="related-entity"
+        [Form]="this"
+        [FormContext]="formContext"
+        [BadgeCount]="GetSectionRowCount('${sectionKey}')"
+        [DefaultExpanded]="false">
+        @if (record.IsSaved) {
+        <div>
 ${componentCodeWithIndent}
         </div>
+        }
     </mj-collapsible-panel>`;
             tabs.push({
-                Type: core_1.GeneratedFormSectionType.Category,
+                Type: GeneratedFormSectionType.Category,
                 IsRelatedEntity: true,
                 RelatedEntityDisplayLocation: relatedEntity.DisplayLocation,
                 Name: tabName,
@@ -895,22 +863,10 @@ ${componentCodeWithIndent}
      * @returns Promise resolving to an object containing the HTML code and section information
      */
     async generateSingleEntityHTMLForAngular(entity, contextUser) {
-        // Load category icons from EntitySetting if available
-        let categoryIcons;
-        const entitySettings = entity.Settings;
-        if (entitySettings) {
-            const iconSetting = entitySettings.find((s) => s.Name === 'FieldCategoryIcons');
-            if (iconSetting && iconSetting.Value) {
-                try {
-                    categoryIcons = JSON.parse(iconSetting.Value);
-                }
-                catch (e) {
-                    // Invalid JSON, ignore and fall back to keyword matching
-                }
-            }
-        }
+        // Load category metadata (icons + inheritance info) from the typed FieldCategories property
+        const fieldCategories = entity.FieldCategories;
         const topArea = this.generateTopAreaHTMLForAngular(entity);
-        const additionalSections = this.generateAngularAdditionalSections(entity, 0, categoryIcons);
+        const additionalSections = this.generateAngularAdditionalSections(entity, 0, fieldCategories);
         // calc ending index for additional sections so we can pass taht into the related entity tabs because they need to start incrementally up from there...
         const endingIndex = additionalSections && additionalSections.length ? (topArea && topArea.length > 0 ? additionalSections.length - 1 : additionalSections.length) : 0;
         const relatedEntitySections = await this.generateRelatedEntityTabs(entity, endingIndex, contextUser);
@@ -926,7 +882,12 @@ ${componentCodeWithIndent}
      * @returns Generated HTML with splitter layout
      */
     generateSingleEntityHTMLWithSplitterForAngular(topArea, additionalSections, relatedEntitySections) {
-        const htmlCode = `<mj-record-form-container [record]="record" [formComponent]="this">
+        const htmlCode = `<mj-record-form-container [Record]="record" [FormComponent]="this"
+    (Navigate)="OnFormNavigate($event)"
+    (DeleteRequested)="OnDeleteRequested()"
+    (FavoriteToggled)="OnFavoriteToggled()"
+    (HistoryRequested)="OnHistoryRequested()"
+    (ListManagementRequested)="OnListManagementRequested()">
     <kendo-splitter orientation="vertical" (layoutChange)="splitterLayoutChange()">
         <kendo-splitter-pane [collapsible]="true" [size]="TopAreaHeight">
 ${this.innerTopAreaHTML(topArea)}
@@ -960,7 +921,7 @@ ${this.innerCollapsiblePanelsHTML(additionalSections, relatedEntitySections)}
      */
     innerCollapsiblePanelsHTML(additionalSections, relatedEntitySections) {
         // Filter out Top sections as they're handled separately
-        const sectionsToRender = additionalSections.filter(s => s.Type !== core_1.GeneratedFormSectionType.Top);
+        const sectionsToRender = additionalSections.filter(s => s.Type !== GeneratedFormSectionType.Top);
         // Order: before-panels, field-panels, after-panels
         // The RecordFormContainer handles the related-entity-grid wrapper via named slots
         const beforePanels = relatedEntitySections.filter(s => s.RelatedEntityDisplayLocation === 'Before Field Tabs');
@@ -1003,7 +964,7 @@ ${this.innerCollapsiblePanelsHTML(additionalSections, relatedEntitySections)}
         const relatedEntityAfterFieldTabs = relatedEntitySections.filter(s => s.RelatedEntityDisplayLocation === 'After Field Tabs');
         return `                <mj-tabstrip (TabSelected)="onTabSelect($event)"  (ResizeContainer)="InvokeManualResize()">
                     ${relatedEntityBeforeFieldTabs ? relatedEntityBeforeFieldTabs.map(s => s.TabCode).join('\n') : ''}
-                    ${additionalSections ? additionalSections.filter(s => s.Type !== core_1.GeneratedFormSectionType.Top).map(s => s.TabCode).join('\n               ') : ''}
+                    ${additionalSections ? additionalSections.filter(s => s.Type !== GeneratedFormSectionType.Top).map(s => s.TabCode).join('\n               ') : ''}
                     ${relatedEntityAfterFieldTabs ? relatedEntityAfterFieldTabs.map(s => s.TabCode).join('\n') : ''}
                 </mj-tabstrip>`;
     }
@@ -1015,7 +976,12 @@ ${this.innerCollapsiblePanelsHTML(additionalSections, relatedEntitySections)}
      * @returns Generated HTML without splitter layout
      */
     generateSingleEntityHTMLWithOUTSplitterForAngular(topArea, additionalSections, relatedEntitySections) {
-        const htmlCode = `<mj-record-form-container [record]="record" [formComponent]="this">
+        const htmlCode = `<mj-record-form-container [Record]="record" [FormComponent]="this"
+    (Navigate)="OnFormNavigate($event)"
+    (DeleteRequested)="OnDeleteRequested()"
+    (FavoriteToggled)="OnFavoriteToggled()"
+    (HistoryRequested)="OnHistoryRequested()"
+    (ListManagementRequested)="OnListManagementRequested()">
 ${this.innerTopAreaHTML(topArea)}
 ${this.innerCollapsiblePanelsHTML(additionalSections, relatedEntitySections)}
 </mj-record-form-container>
@@ -1023,5 +989,4 @@ ${this.innerCollapsiblePanelsHTML(additionalSections, relatedEntitySections)}
         return htmlCode;
     }
 }
-exports.AngularClientGeneratorBase = AngularClientGeneratorBase;
 //# sourceMappingURL=angular-codegen.js.map