@memberjunction/codegen-lib 2.115.0 → 2.117.0

package/dist/Angular/angular-codegen.js

@@ -24,7 +24,7 @@ class AngularFormSectionInfo {
      */
     Name;
     /**
-     * The generated HTML code for the tab
+     * The generated HTML code for the section (panel or tab)
      */
     TabCode;
     /**
@@ -63,6 +63,14 @@ class AngularFormSectionInfo {
      * 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;
 }
 exports.AngularFormSectionInfo = AngularFormSectionInfo;
 /**
@@ -99,18 +107,12 @@ class AngularClientGeneratorBase {
                     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);
+                    // Sections are now inline in HTML templates, no separate files needed
+                    // Just track them for module generation purposes
                     if (additionalSections.length > 0) {
-                        const sectionPath = path_1.default.join(thisEntityPath, 'sections');
-                        if (!fs_1.default.existsSync(sectionPath))
-                            fs_1.default.mkdirSync(sectionPath, { recursive: true }); // create the directory if it doesn't exist
-                        for (let j = 0; j < additionalSections.length; ++j) {
-                            const section = additionalSections[j];
-                            // Only write file if FileName and ComponentCode are populated
-                            if (section.FileName && section.ComponentCode) {
-                                fs_1.default.writeFileSync(path_1.default.join(sectionPath, section.FileName), section.ComponentCode);
-                            }
-                            sections.push(section); // add the entity's secitons one by one to the master/global list of sections
-                        }
+                        additionalSections.forEach(section => {
+                            sections.push(section);
+                        });
                     }
                     const componentName = `${entity.ClassName}FormComponent`;
                     componentImports.push(`import { ${componentName}, Load${componentName} } from "./Entities/${entity.ClassName}/${entity.ClassName.toLowerCase()}.form.component";`);
@@ -198,7 +200,6 @@ import { DropDownListModule } from '@progress/kendo-angular-dropdowns';
 
 // Import Generated Components
 ${componentImports.join('\n')}
-${sections.filter(s => !s.IsRelatedEntity && s.ClassName && s.EntityClassName && s.FileNameWithoutExtension).map(s => `import { ${s.ClassName}, Load${s.ClassName} } from "./Entities/${s.EntityClassName}/sections/${s.FileNameWithoutExtension}"`).join('\n')}
 ${relatedEntityModuleImports.filter(remi => remi.library.trim().toLowerCase() !== '@memberjunction/ng-user-view-grid')
             .map(remi => `import { ${remi.modules.map(m => m).join(', ')} } from "${remi.library}"`)
             .join('\n')}   
@@ -206,12 +207,11 @@ ${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 
+    // 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    ')}
-    ${sections.filter(s => !s.IsRelatedEntity && s.ClassName).map(s => `Load${s.ClassName}();`).join('\n    ')}
 }
     `;
     }
@@ -224,11 +224,11 @@ export function Load${modulePrefix}GeneratedForms() {
      * @returns Generated TypeScript code for all sub-modules and the master module
      */
     generateAngularModuleCode(componentNames, sections, maxComponentsPerModule, modulePrefix) {
-        // this function breaks up the componentNames and sections up, we only want to have a max of maxComponentsPerModule components per module (of components and/or sections, doesn't matter)
-        // so, we break up the list of components into sub-modules, and then generate the code for each sub-module
-        // iterate through the componentNames first, then after we've exhausted those, then iterate through the sections
+        // this function breaks up the componentNames into sub-modules, we only want to have a max of maxComponentsPerModule components per module
+        // Note: sections are now inline in the HTML templates, so we don't include them in the module declarations
+        // Just use the component names - sections are inline HTML now, not separate components
         const simpleComponentNames = componentNames.map(c => c.componentName);
-        const combinedArray = simpleComponentNames.concat(sections.map(s => s.ClassName));
+        const combinedArray = simpleComponentNames;
         const subModules = [];
         let currentComponentCount = 0;
         const subModuleStarter = `
@@ -325,7 +325,6 @@ export class ${this.SubModuleBaseName}${moduleNumber} { }
      */
     generateSingleEntityTypeScriptForAngular(entity, additionalSections, relatedEntitySections) {
         const entityObjectClass = entity.ClassName;
-        const sectionImports = additionalSections.length > 0 ? additionalSections.map(s => `import { Load${s.ClassName} } from "./sections/${s.FileNameWithoutExtension}"`).join('\n') : '';
         // next, build a list of distinct imports at the library level and for components within the library
         const libs = relatedEntitySections.length > 0 ? relatedEntitySections.filter(s => s.GeneratedOutput && s.GeneratedOutput.Component && s.GeneratedOutput.Component.ImportPath)
             .map(s => {
@@ -350,29 +349,63 @@ export class ${this.SubModuleBaseName}${moduleNumber} { }
                 });
             }
         });
-        // nowe our libs array is good to go, we can generate the import statements for the libraries and the items within the libraries
+        // now our libs array is good to go, we can generate the import statements for the libraries and the items within the libraries
         const generationImports = distinctLibs.map(l => `import { ${l.items.join(", ")} } from "${l.lib}"`).join('\n');
         const generationInjectedCode = relatedEntitySections.length > 0 ?
             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 allSections = [...sectionsWithoutTop, ...relatedEntitySections];
+        // Assign unique keys to each section
+        const usedKeys = new Set();
+        allSections.forEach((s) => {
+            let sectionKey = this.camelCase(s.Name);
+            // Ensure unique keys by tracking used keys and adding suffix for duplicates
+            let suffix = 1;
+            while (usedKeys.has(sectionKey)) {
+                sectionKey = this.camelCase(s.Name) + suffix++;
+            }
+            usedKeys.add(sectionKey);
+            s.UniqueKey = sectionKey; // Store the unique key with the section
+        });
+        // Now update all TabCode with the correct unique keys
+        allSections.forEach(s => {
+            if (s.TabCode && s.UniqueKey) {
+                // Replace placeholder camelCase keys with actual unique keys in the HTML
+                const placeholderKey = this.camelCase(s.Name);
+                if (placeholderKey !== s.UniqueKey) {
+                    // Only replace if they're different (i.e., there was a duplicate)
+                    const keyRegex = new RegExp(placeholderKey, 'g');
+                    s.TabCode = s.TabCode.replace(keyRegex, s.UniqueKey);
+                }
+            }
+        });
+        // Generate plain objects for section initialization
+        const sectionInitEntries = allSections.map((s, index) => {
+            // First 2 sections expanded by default, metadata and related entities collapsed
+            const isExpanded = index < 2 && !s.Name.toLowerCase().includes('metadata') && !s.IsRelatedEntity;
+            return `            { sectionKey: '${s.UniqueKey}', sectionName: '${s.Name}', isExpanded: ${isExpanded} }`;
+        });
+        const sectionInitCode = sectionInitEntries.length > 0
+            ? `\n\n    override async ngOnInit() {\n        await super.ngOnInit();\n        this.initSections([\n${sectionInitEntries.join(',\n')}\n        ]);\n    }`
+            : '';
         return `import { Component } from '@angular/core';
 import { ${entityObjectClass}Entity } from '${entity.SchemaName === config_1.mjCoreSchema ? '@memberjunction/core-entities' : 'mj_generatedentities'}';
 import { RegisterClass } from '@memberjunction/global';
 import { BaseFormComponent } from '@memberjunction/ng-base-forms';
-${sectionImports}${generationImports.length > 0 ? '\n' + generationImports : ''}
-
+${generationImports.length > 0 ? generationImports + '\n' : ''}
 @RegisterClass(BaseFormComponent, '${entity.Name}') // Tell MemberJunction about this class
 @Component({
     selector: 'gen-${entity.ClassName.toLowerCase()}-form',
-    templateUrl: './${entity.ClassName.toLowerCase()}.form.component.html',
-    styleUrls: ['../../../../shared/form-styles.css']
+    templateUrl: './${entity.ClassName.toLowerCase()}.form.component.html'
 })
 export class ${entity.ClassName}FormComponent extends BaseFormComponent {
-    public record!: ${entityObjectClass}Entity;${generationInjectedCode.length > 0 ? '\n' + generationInjectedCode : ''}
-} 
+    public record!: ${entityObjectClass}Entity;${generationInjectedCode.length > 0 ? '\n' + generationInjectedCode : ''}${sectionInitCode}
+}
 
 export function Load${entity.ClassName}FormComponent() {
-    ${additionalSections.map(s => `Load${s.ClassName}();`).join('\n    ')}
+    // does nothing, but called to prevent tree-shaking from eliminating this component from the build
 }
 `;
     }
@@ -401,44 +434,71 @@ export function Load${entity.ClassName}FormComponent() {
      * @param sections Array of existing sections
      * @param type The type of section to add
      * @param name The name of the section
+     * @param fieldSequence Optional sequence number of the field (used to track minimum sequence for sorting)
      */
-    AddSectionIfNeeded(entity, sections, type, name) {
+    AddSectionIfNeeded(entity, sections, type, name, fieldSequence) {
         const section = sections.find(s => s.Name === name && s.Type === type);
-        const fName = `${this.stripWhiteSpace(name.toLowerCase())}.component`;
-        if (!section)
+        const fName = `${this.sanitizeFilename(name)}.component`;
+        if (!section) {
             sections.push({
                 Type: type,
                 Name: name,
                 FileName: `${fName}.ts`,
                 ComponentCode: '',
-                ClassName: `${entity.ClassName}${this.stripWhiteSpace(name)}Component`,
+                ClassName: `${entity.ClassName}${this.pascalCase(name)}Component`,
                 TabCode: '',
                 Fields: [],
                 EntityClassName: entity.ClassName,
-                FileNameWithoutExtension: fName
+                FileNameWithoutExtension: fName,
+                MinSequence: fieldSequence
             });
+        }
+        else if (fieldSequence != null && (section.MinSequence == null || fieldSequence < section.MinSequence)) {
+            // Update the minimum sequence if this field has a lower sequence
+            section.MinSequence = fieldSequence;
+        }
     }
     /**
      * Generates additional form sections based on entity field metadata
      * @param entity The entity to generate sections for
      * @param startIndex Starting index for tab ordering
+     * @param categoryIcons Optional map of category names to Font Awesome icon classes
      * @returns Array of generated form sections
      */
-    generateAngularAdditionalSections(entity, startIndex) {
+    generateAngularAdditionalSections(entity, startIndex, categoryIcons) {
         const sections = [];
         let index = startIndex;
         const sortedFields = (0, util_1.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);
+                    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");
+                    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");
+                    this.AddSectionIfNeeded(entity, sections, core_1.GeneratedFormSectionType.Top, "Top", field.Sequence);
             }
         }
-        // now we have a distinct list of section names set, generate HTML for each section 
+        // Sort sections by minimum sequence (Top sections first, System sections last, then by MinSequence)
+        sections.sort((a, b) => {
+            // Top sections always first
+            if (a.Type === core_1.GeneratedFormSectionType.Top)
+                return -1;
+            if (b.Type === core_1.GeneratedFormSectionType.Top)
+                return 1;
+            // System sections always last (after related entities)
+            const aIsSystem = a.Name.toLowerCase() === 'system' || a.Name.toLowerCase() === 'system metadata';
+            const bIsSystem = b.Name.toLowerCase() === 'system' || b.Name.toLowerCase() === 'system metadata';
+            if (aIsSystem && !bIsSystem)
+                return 1;
+            if (!aIsSystem && bIsSystem)
+                return -1;
+            // Otherwise sort by sequence
+            const aSeq = a.MinSequence ?? Number.MAX_SAFE_INTEGER;
+            const bSeq = b.MinSequence ?? Number.MAX_SAFE_INTEGER;
+            return aSeq - bSeq;
+        });
+        // now we have a distinct list of section names set, generate HTML for each section
         let sectionIndex = 0;
         for (const section of sections) {
             let sectionName = '';
@@ -451,44 +511,34 @@ export function Load${entity.ClassName}FormComponent() {
                     sectionName = this.stripWhiteSpace(section.Name.toLowerCase());
                 else if (section.Type === core_1.GeneratedFormSectionType.Details)
                     sectionName = 'details';
-                section.TabCode = `${sectionIndex++ > 0 ? '\n                    ' : ''}<mj-tab Name="${section.Name}">
-                        ${section.Name}
-                    </mj-tab>
-                    <mj-tab-body>
-                        <mj-form-section 
-                            Entity="${entity.Name}" 
-                            Section="${this.stripWhiteSpace(section.Name.toLowerCase())}" 
-                            [record]="record" 
-                            [EditMode]="this.EditMode">
-                        </mj-form-section>
-                    </mj-tab-body>`;
+                // 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);
+                // 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);
+                // Build field names string for search functionality (includes both CodeName and DisplayName)
+                const fieldSearchTerms = section.Fields ? section.Fields.map(f => {
+                    const terms = [f.CodeName.toLowerCase()];
+                    if (f.DisplayName && f.DisplayName.toLowerCase() !== f.CodeName.toLowerCase()) {
+                        terms.push(f.DisplayName.toLowerCase());
+                    }
+                    return terms.join(' ');
+                }).join(' ') : '';
+                // No additional indentation needed - formHTML is already properly indented
+                const indentedFormHTML = formHTML;
+                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">
+${indentedFormHTML}
+    </mj-collapsible-panel>`;
+                sectionIndex++;
             }
-            const formHTML = this.generateSectionHTMLForAngular(entity, section);
-            section.ComponentCode = `import { Component, Input } from '@angular/core';
-import { RegisterClass } from '@memberjunction/global';
-import { BaseFormSectionComponent } from '@memberjunction/ng-base-forms';
-import { ${entity.ClassName}Entity } from '${entity.SchemaName === config_1.mjCoreSchema ? '@memberjunction/core-entities' : 'mj_generatedentities'}';
-
-@RegisterClass(BaseFormSectionComponent, '${entity.Name}.${sectionName}') // Tell MemberJunction about this class 
-@Component({
-    selector: 'gen-${entity.ClassName.toLowerCase()}-form-${sectionName}',
-    styleUrls: ['../../../../../shared/form-styles.css'],
-    template: \`<div *ngIf="this.record">
-    <div class="record-form">
-${formHTML}
-    </div>
-</div>
-    \`
-})
-export class ${entity.ClassName}${this.stripWhiteSpace(section.Name)}Component extends BaseFormSectionComponent {
-    @Input() override record!: ${entity.ClassName}Entity;
-    @Input() override EditMode: boolean = false;
-}
-
-export function Load${entity.ClassName}${this.stripWhiteSpace(section.Name)}Component() {
-    // does nothing, but called in order to prevent tree-shaking from eliminating this component from the build
-}
-      `;
             if (section.Type !== core_1.GeneratedFormSectionType.Top)
                 index++; // don't increment the tab index for TOP AREA, becuse it won't be rendered as a tab
         }
@@ -583,7 +633,8 @@ export function Load${entity.ClassName}${this.stripWhiteSpace(section.Name)}Comp
             [ShowLabel]="${section.Fields.length > 1 ? 'true' : 'false'}"
             FieldName="${field.CodeName}"
             Type="${editControl}"
-            [EditMode]="EditMode"${linkType ? `\n            LinkType="${linkType}"` : ''}${linkComponentType ? linkComponentType : ''}
+            [EditMode]="EditMode"
+            [formContext]="formContext"${linkType ? `\n            LinkType="${linkType}"` : ''}${linkComponentType ? linkComponentType : ''}
         ></mj-form-field>
 `;
         }
@@ -632,39 +683,65 @@ export function Load${entity.ClassName}${this.stripWhiteSpace(section.Name)}Comp
     async generateRelatedEntityTabs(entity, startIndex, contextUser) {
         const md = new core_1.Metadata();
         const tabs = [];
-        const sortedRelatedEntities = (0, util_1.sortBySequenceAndCreatedAt)(entity.RelatedEntities.filter(re => re.DisplayInForm)); // only show related entities that are marked to display in the form and sort by sequence, then by creation date
+        // Sort related entities by Sequence (user's explicit ordering), then by RelatedEntity name (stable tiebreaker)
+        const sortedRelatedEntities = entity.RelatedEntities
+            .filter(re => re.DisplayInForm)
+            .sort((a, b) => {
+            if (a.Sequence !== b.Sequence) {
+                return a.Sequence - b.Sequence;
+            }
+            return a.RelatedEntity.localeCompare(b.RelatedEntity);
+        });
         let index = startIndex;
         for (const relatedEntity of sortedRelatedEntities) {
             const tabName = this.generateRelatedEntityTabName(relatedEntity, sortedRelatedEntities);
             let icon = '';
-            switch (relatedEntity.DisplayIconType) {
-                case 'Custom':
-                    if (relatedEntity.DisplayIcon && relatedEntity.DisplayIcon.length > 0)
-                        icon = `<span class="${relatedEntity.DisplayIcon} tab-header-icon"></span>`;
-                    break;
-                case 'Related Entity Icon':
-                    const re = md.Entities.find(e => e.ID === relatedEntity.RelatedEntityID);
-                    if (re && re.Icon && re.Icon.length > 0)
-                        icon = `<span class="${re.Icon} tab-header-icon"></span>`;
-                    break;
-                default:
-                    // none
-                    break;
+            let iconClass = '';
+            // First, check for custom icon
+            if (relatedEntity.DisplayIconType === 'Custom' && relatedEntity.DisplayIcon && relatedEntity.DisplayIcon.length > 0) {
+                icon = `<span class="${relatedEntity.DisplayIcon} tab-header-icon"></span>`;
+                iconClass = relatedEntity.DisplayIcon;
             }
+            // If no custom icon, try to use the related entity's icon
+            else {
+                const re = md.Entities.find(e => e.ID === relatedEntity.RelatedEntityID);
+                if (re && re.Icon && re.Icon.length > 0) {
+                    icon = `<span class="${re.Icon} tab-header-icon"></span>`;
+                    iconClass = re.Icon;
+                }
+                else {
+                    // Fall back to default table icon
+                    iconClass = 'fa fa-table';
+                }
+            }
+            // 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 generateResults = await component.Generate({
                 Entity: entity,
                 RelationshipInfo: relatedEntity,
-                TabName: tabName
+                TabName: tabName,
+                SectionKey: sectionKey // Pass section key for IsSectionExpanded() calls
             });
-            // now for each newline add a series of tabs to map to the indentation we need for pretty formatting
-            const componentCodeWithTabs = generateResults.TemplateOutput.split('\n').map(l => `                        ${l}`).join('\n');
-            const tabCode = `${index > 0 ? '\n' : ''}                    <mj-tab Name="${tabName}" [Visible]="record.IsSaved"> 
-                        ${icon}${tabName}
-                    </mj-tab>
-                    <mj-tab-body>
-${componentCodeWithTabs}                    
-                    </mj-tab-body>`;
+            // Add proper indentation for collapsible panel body (12 spaces for div content)
+            const componentCodeWithIndent = generateResults.TemplateOutput.split('\n').map(l => `            ${l}`).join('\n');
+            // For related entities, use the related entity name as searchable term
+            const relatedEntitySearchTerms = relatedEntity.RelatedEntity.toLowerCase();
+            // 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}')">
+        <div *ngIf="record.IsSaved">
+${componentCodeWithIndent}
+        </div>
+    </mj-collapsible-panel>`;
             tabs.push({
                 Type: core_1.GeneratedFormSectionType.Category,
                 IsRelatedEntity: true,
@@ -686,6 +763,129 @@ ${componentCodeWithTabs}
     stripWhiteSpace(s) {
         return s.replace(/\s/g, '');
     }
+    /**
+     * Converts a string to camelCase and sanitizes it for use as a JavaScript identifier
+     * @param str The string to convert
+     * @returns String in camelCase format, safe for use as object key or variable name
+     */
+    camelCase(str) {
+        // First, replace non-alphanumeric characters (except spaces) with spaces
+        let sanitized = str.replace(/[^a-zA-Z0-9\s]/g, ' ');
+        // Convert to camelCase
+        let result = sanitized
+            .replace(/\s(.)/g, (match, char) => char.toUpperCase())
+            .replace(/\s/g, '')
+            .replace(/^(.)/, (match, char) => char.toLowerCase());
+        // If starts with a digit, prefix with underscore
+        if (/^\d/.test(result)) {
+            result = '_' + result;
+        }
+        // If result is empty (all special chars), use a default
+        if (result.length === 0) {
+            result = 'section';
+        }
+        return result;
+    }
+    /**
+     * Converts a string to PascalCase and sanitizes it for use as a class name
+     * @param str The string to convert
+     * @returns String in PascalCase format, safe for use as a class name
+     */
+    pascalCase(str) {
+        // First, replace non-alphanumeric characters (except spaces) with spaces
+        let sanitized = str.replace(/[^a-zA-Z0-9\s]/g, ' ');
+        // Convert to PascalCase (capitalize first letter of each word)
+        let result = sanitized
+            .replace(/\s(.)/g, (match, char) => char.toUpperCase())
+            .replace(/\s/g, '')
+            .replace(/^(.)/, (match, char) => char.toUpperCase());
+        // If starts with a digit, prefix with underscore
+        if (/^\d/.test(result)) {
+            result = '_' + result;
+        }
+        // If result is empty (all special chars), use a default
+        if (result.length === 0) {
+            result = 'Section';
+        }
+        return result;
+    }
+    /**
+     * Sanitizes a string to create a valid filename in lowercase format.
+     * Removes all non-alphanumeric characters (except spaces) and converts to lowercase.
+     * Used for creating component filenames that are safe across all file systems.
+     *
+     * Example: "Timeline & Budget" → "timelinebudget"
+     *
+     * @param str The string to sanitize
+     * @returns A sanitized lowercase filename string
+     */
+    sanitizeFilename(str) {
+        // Remove all non-alphanumeric characters (except spaces)
+        let sanitized = str.replace(/[^a-zA-Z0-9\s]/g, '');
+        // Convert to lowercase and remove all spaces
+        let result = sanitized.toLowerCase().replace(/\s/g, '');
+        // If result is empty (all special chars), use a default
+        if (result.length === 0) {
+            result = 'section';
+        }
+        return result;
+    }
+    /**
+     * Maps category names to appropriate Font Awesome icon classes
+     * @param category The category name to map
+     * @returns Font Awesome icon class string
+     */
+    getIconForCategory(category) {
+        const lowerCategory = category.toLowerCase();
+        // Address/Location categories
+        if (lowerCategory.includes('address') || lowerCategory.includes('location')) {
+            return 'fa fa-map-marker-alt';
+        }
+        // Contact Information
+        if (lowerCategory.includes('contact')) {
+            return 'fa fa-address-card';
+        }
+        // Financial/Pricing categories
+        if (lowerCategory.includes('pric') || lowerCategory.includes('cost') ||
+            lowerCategory.includes('payment') || lowerCategory.includes('financial') ||
+            lowerCategory.includes('billing')) {
+            return 'fa fa-dollar-sign';
+        }
+        // Date/Time categories
+        if (lowerCategory.includes('date') || lowerCategory.includes('time') ||
+            lowerCategory.includes('schedule')) {
+            return 'fa fa-calendar';
+        }
+        // Status/State categories
+        if (lowerCategory.includes('status') || lowerCategory.includes('state')) {
+            return 'fa fa-flag';
+        }
+        // Metadata/Technical categories
+        if (lowerCategory.includes('metadata') || lowerCategory.includes('technical') ||
+            lowerCategory.includes('system')) {
+            return 'fa fa-cog';
+        }
+        // Description/Details categories
+        if (lowerCategory.includes('description') || lowerCategory.includes('detail')) {
+            return 'fa fa-align-left';
+        }
+        // Settings/Configuration categories
+        if (lowerCategory.includes('setting') || lowerCategory.includes('config') ||
+            lowerCategory.includes('preference')) {
+            return 'fa fa-sliders-h';
+        }
+        // Shipping/Delivery categories
+        if (lowerCategory.includes('ship') || lowerCategory.includes('delivery')) {
+            return 'fa fa-truck';
+        }
+        // User/Person categories
+        if (lowerCategory.includes('user') || lowerCategory.includes('person') ||
+            lowerCategory.includes('customer') || lowerCategory.includes('employee')) {
+            return 'fa fa-user';
+        }
+        // Default icon for uncategorized sections
+        return 'fa fa-info-circle';
+    }
     /**
      * Generates the complete HTML template for a single entity form
      * @param entity The entity to generate HTML for
@@ -693,8 +893,22 @@ ${componentCodeWithTabs}
      * @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
+                }
+            }
+        }
         const topArea = this.generateTopAreaHTMLForAngular(entity);
-        const additionalSections = this.generateAngularAdditionalSections(entity, 0);
+        const additionalSections = this.generateAngularAdditionalSections(entity, 0, categoryIcons);
         // 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);
@@ -710,19 +924,16 @@ ${componentCodeWithTabs}
      * @returns Generated HTML with splitter layout
      */
     generateSingleEntityHTMLWithSplitterForAngular(topArea, additionalSections, relatedEntitySections) {
-        const htmlCode = `<div class="record-form-container"  >
-    <form *ngIf="record" class="record-form"  #form="ngForm" >
-        <mj-form-toolbar [form]="this"></mj-form-toolbar>
-        <kendo-splitter orientation="vertical" (layoutChange)="splitterLayoutChange()" >
-            <kendo-splitter-pane [collapsible]="true" [size]="TopAreaHeight">
+        const htmlCode = `<mj-record-form-container [record]="record" [formComponent]="this">
+    <kendo-splitter orientation="vertical" (layoutChange)="splitterLayoutChange()">
+        <kendo-splitter-pane [collapsible]="true" [size]="TopAreaHeight">
 ${this.innerTopAreaHTML(topArea)}
-            </kendo-splitter-pane>
-            <kendo-splitter-pane>
-${this.innerTabStripHTML(additionalSections, relatedEntitySections)}
-            </kendo-splitter-pane>
-        </kendo-splitter>
-    </form>
-</div>
+        </kendo-splitter-pane>
+        <kendo-splitter-pane>
+${this.innerCollapsiblePanelsHTML(additionalSections, relatedEntitySections)}
+        </kendo-splitter-pane>
+    </kendo-splitter>
+</mj-record-form-container>
         `;
         return htmlCode;
     }
@@ -740,6 +951,44 @@ ${this.innerTabStripHTML(additionalSections, relatedEntitySections)}
                 </div>`;
     }
     /**
+     * Generates the HTML for collapsible panels containing all form sections
+     * @param additionalSections Array of field-based form sections
+     * @param relatedEntitySections Array of related entity sections
+     * @returns HTML string for all collapsible panels
+     */
+    innerCollapsiblePanelsHTML(additionalSections, relatedEntitySections) {
+        // Filter out Top sections as they're handled separately
+        const sectionsToRender = additionalSections.filter(s => s.Type !== core_1.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');
+        const afterPanels = relatedEntitySections.filter(s => s.RelatedEntityDisplayLocation === 'After Field Tabs');
+        const parts = [];
+        // Add before panels if any
+        if (beforePanels.length > 0) {
+            parts.push('    <!-- ========================================');
+            parts.push('         RELATED ENTITY PANELS - BEFORE');
+            parts.push('         ======================================== -->');
+            parts.push(beforePanels.map(s => s.TabCode).join('\n'));
+        }
+        // Add field panels with header comment
+        if (sectionsToRender.length > 0) {
+            parts.push('    <!-- ========================================');
+            parts.push('         FIELD PANELS');
+            parts.push('         ======================================== -->');
+            parts.push(sectionsToRender.map(s => s.TabCode).join('\n'));
+        }
+        // Add after panels if any
+        if (afterPanels.length > 0) {
+            parts.push('    <!-- ========================================');
+            parts.push('         RELATED ENTITY PANELS - AFTER');
+            parts.push('         ======================================== -->');
+            parts.push(afterPanels.map(s => s.TabCode).join('\n'));
+        }
+        return parts.join('\n');
+    }
+    /**
+     * @deprecated Use innerCollapsiblePanelsHTML instead
      * Generates the HTML for the tab strip containing all form sections
      * @param additionalSections Array of field-based form sections
      * @param relatedEntitySections Array of related entity sections
@@ -764,13 +1013,10 @@ ${this.innerTabStripHTML(additionalSections, relatedEntitySections)}
      * @returns Generated HTML without splitter layout
      */
     generateSingleEntityHTMLWithOUTSplitterForAngular(topArea, additionalSections, relatedEntitySections) {
-        const htmlCode = `<div class="record-form-container"  >
-    <form *ngIf="record" class="record-form"  #form="ngForm" >
-        <mj-form-toolbar [form]="this"></mj-form-toolbar>
+        const htmlCode = `<mj-record-form-container [record]="record" [formComponent]="this">
 ${this.innerTopAreaHTML(topArea)}
-${this.innerTabStripHTML(additionalSections, relatedEntitySections)}
-    </form>
-</div>
+${this.innerCollapsiblePanelsHTML(additionalSections, relatedEntitySections)}
+</mj-record-form-container>
         `;
         return htmlCode;
     }