@memberjunction/codegen-lib 2.114.0 → 2.116.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;
 /**
@@ -198,7 +206,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 +213,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 +230,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 +331,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,17 +355,117 @@ 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);
+                }
+            }
+        });
+        // Now generate the sectionsExpanded object using the stored unique keys
+        const sectionsExpandedEntries = 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 `        ${s.UniqueKey}: ${isExpanded}`;
+        });
+        const sectionsExpandedObject = sectionsExpandedEntries.length > 0
+            ? `\n\n    // Collapsible section state\n    public sectionsExpanded = {\n${sectionsExpandedEntries.join(',\n')}\n    };`
+            : '';
+        const toggleSectionMethod = sectionsExpandedEntries.length > 0
+            ? `\n\n    public toggleSection(section: keyof typeof this.sectionsExpanded): void {\n        this.sectionsExpanded[section] = !this.sectionsExpanded[section];\n    }`
+            : '';
+        // Add expand all/collapse all/filter methods if there are 4+ sections
+        const totalSections = allSections.length;
+        // Add sectionRowCounts property for related entities
+        const hasRelatedEntities = relatedEntitySections.length > 0;
+        const sectionRowCountsProperty = hasRelatedEntities
+            ? `\n\n    // Row counts for related entity sections (populated after grids load)\n    public sectionRowCounts: { [key: string]: number } = {};`
+            : '';
+        const sectionUtilityMethods = totalSections >= 4 ? `\n
+    public expandAllSections(): void {
+        Object.keys(this.sectionsExpanded).forEach(key => {
+            this.sectionsExpanded[key as keyof typeof this.sectionsExpanded] = true;
+        });
+    }
+
+    public collapseAllSections(): void {
+        Object.keys(this.sectionsExpanded).forEach(key => {
+            this.sectionsExpanded[key as keyof typeof this.sectionsExpanded] = false;
+        });
+    }
+
+    public getExpandedCount(): number {
+        return Object.values(this.sectionsExpanded).filter(v => v === true).length;
+    }
+
+    public filterSections(event: Event): void {
+        const searchTerm = (event.target as HTMLInputElement).value.toLowerCase();
+        const panels = document.querySelectorAll('.form-card.collapsible-card');
+
+        panels.forEach((panel: Element) => {
+            const sectionName = panel.getAttribute('data-section-name') || '';
+            const fieldNames = panel.getAttribute('data-field-names') || '';
+
+            // Show section if search term matches section name OR any field name
+            const matches = sectionName.includes(searchTerm) || fieldNames.includes(searchTerm);
+
+            if (matches) {
+                panel.classList.remove('search-hidden');
+
+                // Add highlighting to matched text in section name
+                if (searchTerm && sectionName.includes(searchTerm)) {
+                    const h3 = panel.querySelector('.collapsible-title h3 .section-name');
+                    if (h3) {
+                        const originalText = h3.textContent || '';
+                        const regex = new RegExp(\`(\${searchTerm})\`, 'gi');
+                        h3.innerHTML = originalText.replace(regex, '<span class="search-highlight">$1</span>');
+                    }
+                }
+            } else {
+                panel.classList.add('search-hidden');
+            }
+        });
+
+        // Clear highlighting when search is empty
+        if (!searchTerm) {
+            panels.forEach((panel: Element) => {
+                const h3 = panel.querySelector('.collapsible-title h3 .section-name');
+                if (h3) {
+                    h3.innerHTML = h3.textContent || '';
+                }
+            });
+        }
+    }` : '';
         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',
@@ -368,11 +473,11 @@ ${sectionImports}${generationImports.length > 0 ? '\n' + generationImports : ''}
     styleUrls: ['../../../../shared/form-styles.css']
 })
 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 : ''}${sectionsExpandedObject}${sectionRowCountsProperty}${toggleSectionMethod}${sectionUtilityMethods}
+}
 
 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 +506,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 +583,40 @@ 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>`;
-            }
-            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">
+                // 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(' ') : '';
+                section.TabCode = `${sectionIndex > 0 ? '\n        ' : ''}<!-- ${section.Name} Section -->
+        <div class="form-card collapsible-card" data-section-name="${section.Name.toLowerCase()}" data-field-names="${fieldSearchTerms}">
+            <div class="collapsible-header" (click)="toggleSection('${sectionKey}')" role="button" tabindex="0">
+                <div class="collapsible-title">
+                    <i class="${icon}"></i>
+                    <h3><span class="section-name">${section.Name}</span></h3>
+                </div>
+                <div class="collapse-icon">
+                    <i [class]="sectionsExpanded.${sectionKey} ? 'fa fa-chevron-up' : 'fa fa-chevron-down'"></i>
+                </div>
+            </div>
+            <div class="collapsible-body" [class.collapsed]="!sectionsExpanded.${sectionKey}">
+                <div class="form-body">
 ${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
-}
-      `;
+                </div>
+            </div>
+        </div>`;
+                sectionIndex++;
+            }
             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
         }
@@ -632,39 +760,74 @@ 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 IsCurrentSection() 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
+            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();
+            const tabCode = `${index > 0 ? '\n        ' : ''}<!-- ${tabName} Section -->
+        <div class="form-card collapsible-card related-entity" data-section-name="${tabName.toLowerCase()}" data-field-names="${relatedEntitySearchTerms}" data-section-key="${sectionKey}">
+            <div class="collapsible-header" (click)="toggleSection('${sectionKey}')" role="button" tabindex="0">
+                <div class="collapsible-title">
+                    <i class="${iconClass}"></i>
+                    <h3>
+                        <span class="section-name">${tabName}</span>
+                        <span class="row-count-badge"
+                              *ngIf="sectionRowCounts?.['${sectionKey}'] !== undefined"
+                              [class.zero-rows]="sectionRowCounts['${sectionKey}'] === 0">
+                            {{sectionRowCounts['${sectionKey}']}}
+                        </span>
+                    </h3>
+                </div>
+                <div class="collapse-icon">
+                    <i [class]="sectionsExpanded.${sectionKey} ? 'fa fa-chevron-up' : 'fa fa-chevron-down'"></i>
+                </div>
+            </div>
+            <div class="collapsible-body" [class.collapsed]="!sectionsExpanded.${sectionKey}" *ngIf="record.IsSaved">
+                <div class="form-body">
+${componentCodeWithIndent}
+                </div>
+            </div>
+        </div>`;
             tabs.push({
                 Type: core_1.GeneratedFormSectionType.Category,
                 IsRelatedEntity: true,
@@ -686,6 +849,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 +979,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,15 +1010,15 @@ ${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" >
+        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 orientation="vertical" (layoutChange)="splitterLayoutChange()">
             <kendo-splitter-pane [collapsible]="true" [size]="TopAreaHeight">
 ${this.innerTopAreaHTML(topArea)}
             </kendo-splitter-pane>
             <kendo-splitter-pane>
-${this.innerTabStripHTML(additionalSections, relatedEntitySections)}
+${this.innerCollapsiblePanelsHTML(additionalSections, relatedEntitySections)}
             </kendo-splitter-pane>
         </kendo-splitter>
     </form>
@@ -740,6 +1040,61 @@ ${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);
+        const totalSections = sectionsToRender.length + relatedEntitySections.length;
+        // Only show section controls if there are 4+ sections
+        const showControls = totalSections >= 4;
+        const controlsHTML = showControls ? `        <div class="form-section-controls">
+            <div class="control-group">
+                <button (click)="expandAllSections()" title="Expand all sections">
+                    <i class="fa fa-expand-alt"></i>Expand All
+                </button>
+                <button (click)="collapseAllSections()" title="Collapse all sections">
+                    <i class="fa fa-compress-alt"></i>Collapse All
+                </button>
+            </div>
+            <input type="text"
+                   class="section-search"
+                   placeholder="Search sections..."
+                   (input)="filterSections($event)"
+                   #sectionSearch>
+            <span class="section-count">
+                <span class="section-count-badge">{{getExpandedCount()}}</span> of ${totalSections} expanded
+            </span>
+        </div>
+` : '';
+        // Combine field sections and related entity sections into panels, respecting DisplayLocation
+        if (relatedEntitySections.length > 0) {
+            const relatedEntityBeforePanels = relatedEntitySections.filter(s => s.RelatedEntityDisplayLocation === 'Before Field Tabs');
+            const relatedEntityAfterPanels = relatedEntitySections.filter(s => s.RelatedEntityDisplayLocation === 'After Field Tabs');
+            // Wrap related entity sections in grid container
+            const beforePanelsHTML = relatedEntityBeforePanels.length > 0
+                ? `        <div class="related-entity-grid">\n${relatedEntityBeforePanels.map(s => s.TabCode).join('\n')}\n        </div>`
+                : '';
+            const afterPanelsHTML = relatedEntityAfterPanels.length > 0
+                ? `        <div class="related-entity-grid">\n${relatedEntityAfterPanels.map(s => s.TabCode).join('\n')}\n        </div>`
+                : '';
+            const fieldPanelsHTML = sectionsToRender.map(s => s.TabCode).join('\n');
+            return `${controlsHTML}        <div class="form-panels-container">
+${beforePanelsHTML}${beforePanelsHTML && fieldPanelsHTML ? '\n' : ''}${fieldPanelsHTML}${fieldPanelsHTML && afterPanelsHTML ? '\n' : ''}${afterPanelsHTML}
+        </div>`;
+        }
+        else {
+            // No related entities, just show field panels
+            return `${controlsHTML}        <div class="form-panels-container">
+${sectionsToRender.map(s => s.TabCode).join('\n')}
+        </div>`;
+        }
+    }
+    /**
+     * @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,11 +1119,11 @@ ${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" >
+        const htmlCode = `<div class="record-form-container">
+    <form *ngIf="record" class="record-form" #form="ngForm">
         <mj-form-toolbar [form]="this"></mj-form-toolbar>
 ${this.innerTopAreaHTML(topArea)}
-${this.innerTabStripHTML(additionalSections, relatedEntitySections)}
+${this.innerCollapsiblePanelsHTML(additionalSections, relatedEntitySections)}
     </form>
 </div>
         `;