@memberjunction/ng-base-forms 3.3.0 → 4.0.0

package/dist/lib/collapsible-panel.component.js

@@ -1,9 +1,9 @@
-import { Component, Input, ContentChildren, HostBinding, Output, EventEmitter } from '@angular/core';
+import { Component, Input, ContentChildren, HostBinding, Output, EventEmitter, HostListener } from '@angular/core';
 import { MJFormField } from './base-field-component';
 import * as i0 from "@angular/core";
 const _c0 = ["*"];
-function CollapsiblePanelComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 11);
+function CollapsiblePanelComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 10);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -20,10 +20,10 @@ function CollapsiblePanelComponent_Conditional_6_Template(rf, ctx) { if (rf & 1)
  * - Yellow highlighting of matched section names
  * - Visibility management based on section name or field name matches
  * - Passes sectionFilter down to child mj-form-field components for their own label highlighting
- * - Panel width modes: normal (default), full-width (spans entire row)
  */
 export class CollapsiblePanelComponent {
     cdr;
+    elementRef;
     sectionKey = '';
     sectionName = '';
     icon = 'fa fa-folder';
@@ -33,27 +33,94 @@ export class CollapsiblePanelComponent {
     badgeCount;
     entityName = ''; // For display/reference purposes
     defaultExpanded; // Default expanded state when no persisted state exists
-    widthModeChange = new EventEmitter();
+    dragStarted = new EventEmitter();
+    dragEnded = new EventEmitter();
+    panelDrop = new EventEmitter();
     fieldComponents;
     get isHidden() {
         return !this.isVisible;
     }
-    get isFullWidth() {
-        return this.widthMode === 'full-width';
+    get cssOrder() {
+        const formRef = this.form;
+        return formRef?.getSectionDisplayOrder ? formRef.getSectionDisplayOrder(this.sectionKey) : 0;
+    }
+    isDragging = false;
+    isDragOver = false;
+    constructor(cdr, elementRef) {
+        this.cdr = cdr;
+        this.elementRef = elementRef;
+    }
+    onDragOver(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        // Check if this is a panel drag (not a file drag)
+        if (event.dataTransfer?.types.includes('text/plain')) {
+            this.isDragOver = true;
+        }
+    }
+    onDragLeave(event) {
+        event.preventDefault();
+        this.isDragOver = false;
+    }
+    onDrop(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+        const sourceSectionKey = event.dataTransfer?.getData('text/plain');
+        if (sourceSectionKey && sourceSectionKey !== this.sectionKey) {
+            this.panelDrop.emit({
+                sourceSectionKey,
+                targetSectionKey: this.sectionKey
+            });
+            // Reorder sections via the form component
+            this.reorderSections(sourceSectionKey, this.sectionKey);
+        }
+    }
+    /**
+     * Reorders sections by moving the source section to the position of the target section.
+     */
+    reorderSections(sourceSectionKey, targetSectionKey) {
+        const formRef = this.form;
+        if (!formRef?.getSectionOrder || !formRef?.setSectionOrder) {
+            return;
+        }
+        const currentOrder = formRef.getSectionOrder();
+        const sourceIndex = currentOrder.indexOf(sourceSectionKey);
+        const targetIndex = currentOrder.indexOf(targetSectionKey);
+        if (sourceIndex === -1 || targetIndex === -1) {
+            return;
+        }
+        // Remove source from current position
+        const newOrder = [...currentOrder];
+        newOrder.splice(sourceIndex, 1);
+        // Insert at target position
+        newOrder.splice(targetIndex, 0, sourceSectionKey);
+        // Save the new order
+        formRef.setSectionOrder(newOrder);
+        this.cdr.markForCheck();
+    }
+    onDragStart(event) {
+        this.isDragging = true;
+        event.dataTransfer?.setData('text/plain', this.sectionKey);
+        if (event.dataTransfer) {
+            event.dataTransfer.effectAllowed = 'move';
+        }
+        this.dragStarted.emit({ sectionKey: this.sectionKey, event });
+    }
+    onDragEnd(event) {
+        this.isDragging = false;
+        this.dragEnded.emit();
     }
     get expanded() {
-        return this.form ? this.form.IsSectionExpanded(this.sectionKey, this.defaultExpanded) : true;
+        const formRef = this.form;
+        return formRef?.IsSectionExpanded ? formRef.IsSectionExpanded(this.sectionKey, this.defaultExpanded) : true;
     }
     displayName = '';
     fieldNames = '';
     isVisible = true;
-    widthMode = 'normal';
-    constructor(cdr) {
-        this.cdr = cdr;
-    }
     ngOnInit() {
-        // Load width mode from form's state service
-        this.loadWidthMode();
+        // Initialize display name
+        this.displayName = this.sectionName;
     }
     ngAfterContentInit() {
         // Extract field names from projected field components
@@ -77,42 +144,12 @@ export class CollapsiblePanelComponent {
         }
     }
     toggle() {
-        if (this.form) {
-            this.form.SetSectionExpanded(this.sectionKey, !this.expanded);
+        const formRef = this.form;
+        if (formRef?.SetSectionExpanded) {
+            formRef.SetSectionExpanded(this.sectionKey, !this.expanded);
             this.cdr.markForCheck();
         }
     }
-    toggleFullWidth(event) {
-        event.stopPropagation();
-        const newMode = this.widthMode === 'full-width' ? 'normal' : 'full-width';
-        // Auto-expand panel when switching to full-width mode
-        if (newMode === 'full-width' && !this.expanded && this.form) {
-            this.form.SetSectionExpanded(this.sectionKey, true);
-        }
-        this.setWidthMode(newMode);
-    }
-    setWidthMode(mode) {
-        this.widthMode = mode;
-        this.saveWidthMode();
-        this.widthModeChange.emit(mode);
-        this.cdr.markForCheck();
-    }
-    saveWidthMode() {
-        // Delegate to form's state service for persistence
-        if (this.form && typeof this.form.setSectionWidthMode === 'function') {
-            this.form.setSectionWidthMode(this.sectionKey, this.widthMode);
-        }
-    }
-    loadWidthMode() {
-        // Load from form's state service
-        if (this.form && typeof this.form.getSectionWidthMode === 'function') {
-            const saved = this.form.getSectionWidthMode(this.sectionKey);
-            if (saved && (saved === 'normal' || saved === 'full-width')) {
-                this.widthMode = saved;
-                this.cdr.markForCheck();
-            }
-        }
-    }
     updateFieldNames() {
         if (this.fieldComponents) {
             // Extract field display names from all mj-form-field components
@@ -153,61 +190,71 @@ export class CollapsiblePanelComponent {
     escapeRegex(term) {
         return term.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
     }
-    static ɵfac = function CollapsiblePanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CollapsiblePanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵfac = function CollapsiblePanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CollapsiblePanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CollapsiblePanelComponent, selectors: [["mj-collapsible-panel"]], contentQueries: function CollapsiblePanelComponent_ContentQueries(rf, ctx, dirIndex) { if (rf & 1) {
             i0.ɵɵcontentQuery(dirIndex, MJFormField, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.fieldComponents = _t);
-        } }, hostVars: 4, hostBindings: function CollapsiblePanelComponent_HostBindings(rf, ctx) { if (rf & 2) {
-            i0.ɵɵclassProp("search-hidden", ctx.isHidden)("panel-full-width", ctx.isFullWidth);
-        } }, inputs: { sectionKey: "sectionKey", sectionName: "sectionName", icon: "icon", form: "form", formContext: "formContext", variant: "variant", badgeCount: "badgeCount", entityName: "entityName", defaultExpanded: "defaultExpanded" }, outputs: { widthModeChange: "widthModeChange" }, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 15, vars: 14, consts: [[1, "form-card", "collapsible-card"], ["role", "button", "tabindex", "0", 1, "collapsible-header"], [1, "collapsible-title", 3, "click"], [1, "section-name", 3, "innerHTML"], [1, "row-count-badge", 3, "zero-rows"], [1, "panel-width-controls"], ["title", "Stretch panel to full width", "aria-label", "Stretch panel to full width", "type", "button", 1, "width-control-btn", 3, "click"], [1, "fa-solid", "fa-left-right"], [1, "collapse-icon", 3, "click"], [1, "collapsible-body"], [1, "form-body"], [1, "row-count-badge"]], template: function CollapsiblePanelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, hostVars: 8, hostBindings: function CollapsiblePanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("dragover", function CollapsiblePanelComponent_dragover_HostBindingHandler($event) { return ctx.onDragOver($event); })("dragleave", function CollapsiblePanelComponent_dragleave_HostBindingHandler($event) { return ctx.onDragLeave($event); })("drop", function CollapsiblePanelComponent_drop_HostBindingHandler($event) { return ctx.onDrop($event); });
+        } if (rf & 2) {
+            i0.ɵɵstyleProp("order", ctx.cssOrder);
+            i0.ɵɵclassProp("search-hidden", ctx.isHidden)("dragging", ctx.isDragging)("drag-over", ctx.isDragOver);
+        } }, inputs: { sectionKey: "sectionKey", sectionName: "sectionName", icon: "icon", form: "form", formContext: "formContext", variant: "variant", badgeCount: "badgeCount", entityName: "entityName", defaultExpanded: "defaultExpanded" }, outputs: { dragStarted: "dragStarted", dragEnded: "dragEnded", panelDrop: "panelDrop" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], ngContentSelectors: _c0, decls: 14, vars: 13, consts: [[1, "form-card", "collapsible-card"], ["role", "button", "tabindex", "0", 1, "collapsible-header", 3, "click"], ["title", "Drag to reorder sections", "draggable", "true", 1, "drag-handle", 3, "dragstart", "dragend", "click"], [1, "fa-solid", "fa-grip-vertical"], [1, "collapsible-title"], [1, "section-name", 3, "innerHTML"], [1, "row-count-badge", 3, "zero-rows"], [1, "collapse-icon"], [1, "collapsible-body"], [1, "form-body"], [1, "row-count-badge"]], template: function CollapsiblePanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
-            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2);
-            i0.ɵɵlistener("click", function CollapsiblePanelComponent_Template_div_click_2_listener() { return ctx.toggle(); });
-            i0.ɵɵelement(3, "i");
-            i0.ɵɵelementStart(4, "h3");
-            i0.ɵɵelement(5, "span", 3);
-            i0.ɵɵtemplate(6, CollapsiblePanelComponent_Conditional_6_Template, 2, 3, "span", 4);
-            i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(7, "div", 5)(8, "button", 6);
-            i0.ɵɵlistener("click", function CollapsiblePanelComponent_Template_button_click_8_listener($event) { return ctx.toggleFullWidth($event); });
-            i0.ɵɵelement(9, "i", 7);
+            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1);
+            i0.ɵɵlistener("click", function CollapsiblePanelComponent_Template_div_click_1_listener() { return ctx.toggle(); });
+            i0.ɵɵelementStart(2, "div", 2);
+            i0.ɵɵlistener("dragstart", function CollapsiblePanelComponent_Template_div_dragstart_2_listener($event) { return ctx.onDragStart($event); })("dragend", function CollapsiblePanelComponent_Template_div_dragend_2_listener($event) { return ctx.onDragEnd($event); })("click", function CollapsiblePanelComponent_Template_div_click_2_listener($event) { return $event.stopPropagation(); });
+            i0.ɵɵelement(3, "i", 3);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(4, "div", 4);
+            i0.ɵɵelement(5, "i");
+            i0.ɵɵelementStart(6, "h3");
+            i0.ɵɵelement(7, "span", 5);
+            i0.ɵɵconditionalCreate(8, CollapsiblePanelComponent_Conditional_8_Template, 2, 3, "span", 6);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(10, "div", 8);
-            i0.ɵɵlistener("click", function CollapsiblePanelComponent_Template_div_click_10_listener() { return ctx.toggle(); });
-            i0.ɵɵelement(11, "i");
+            i0.ɵɵelementStart(9, "div", 7);
+            i0.ɵɵelement(10, "i");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(12, "div", 9)(13, "div", 10);
-            i0.ɵɵprojection(14);
+            i0.ɵɵelementStart(11, "div", 8)(12, "div", 9);
+            i0.ɵɵprojection(13);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵclassProp("related-entity", ctx.variant === "related-entity");
-            i0.ɵɵattribute("data-section-name", ctx.sectionName)("data-field-names", ctx.fieldNames);
-            i0.ɵɵadvance(3);
+            i0.ɵɵattribute("data-section-name", ctx.sectionName)("data-field-names", ctx.fieldNames)("data-section-key", ctx.sectionKey);
+            i0.ɵɵadvance(5);
             i0.ɵɵclassMap(ctx.icon);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("innerHTML", ctx.displayName, i0.ɵɵsanitizeHtml);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.badgeCount !== undefined ? 6 : -1);
+            i0.ɵɵconditional(ctx.badgeCount !== undefined ? 8 : -1);
             i0.ɵɵadvance(2);
-            i0.ɵɵclassProp("active", ctx.widthMode === "full-width");
-            i0.ɵɵadvance(3);
             i0.ɵɵclassMap(ctx.expanded ? "fa fa-chevron-up" : "fa fa-chevron-down");
             i0.ɵɵadvance();
             i0.ɵɵclassProp("collapsed", !ctx.expanded);
-        } }, styles: ["[_nghost-%COMP%] {\n            display: block;\n        }\n\n        .search-hidden[_nghost-%COMP%] {\n            display: none;\n        }\n\n        .panel-full-width[_nghost-%COMP%] {\n            grid-column: 1 / -1 !important;\n        }\n\n        .form-card[_ngcontent-%COMP%] {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n            transition: all 0.3s ease;\n        }\n\n        .panel-full-width[_nghost-%COMP%]   .form-card[_ngcontent-%COMP%] {\n            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);\n            border: 2px solid #667eea;\n        }\n\n        .collapsible-card[_ngcontent-%COMP%] {\n            overflow: hidden;\n        }\n\n        .collapsible-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 12px;\n            padding: 20px 24px;\n            background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n            border-bottom: 2px solid #e5e7eb;\n            user-select: none;\n            transition: all 0.3s ease;\n        }\n\n        .collapsible-header[_ngcontent-%COMP%]:hover {\n            background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n            border-bottom-color: #667eea;\n        }\n\n        .collapsible-title[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            flex: 1;\n            cursor: pointer;\n        }\n\n        .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 20px;\n            color: #667eea;\n        }\n\n        .collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n            margin: 0;\n            font-size: 18px;\n            font-weight: 600;\n            color: #1f2937;\n        }\n\n        .panel-width-controls[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 6px;\n            align-items: center;\n        }\n\n        .width-control-btn[_ngcontent-%COMP%] {\n            padding: 6px 10px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            background: white;\n            color: #6b7280;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: all 0.2s;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .width-control-btn[_ngcontent-%COMP%]:hover {\n            background: #f3f4f6;\n            color: #374151;\n            border-color: #9ca3af;\n        }\n\n        .width-control-btn.active[_ngcontent-%COMP%] {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\n        }\n\n        .width-control-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 12px;\n        }\n\n        .collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n            color: #6b7280;\n            transition: transform 0.3s ease;\n            cursor: pointer;\n            padding: 4px;\n        }\n\n        .collapsible-body[_ngcontent-%COMP%] {\n            max-height: 2000px;\n            overflow: hidden;\n            transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n            opacity: 1;\n        }\n\n        .collapsible-body.collapsed[_ngcontent-%COMP%] {\n            max-height: 0;\n            padding: 0;\n            opacity: 0;\n        }\n\n        .form-body[_ngcontent-%COMP%] {\n            padding: 24px;\n            overflow: auto;\n            max-height: 600px;\n        }\n\n        \n\n        .form-card.related-entity[_ngcontent-%COMP%] {\n            background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n            border-left: 3px solid #3b82f6;\n        }\n\n        \n\n        .form-card.related-entity[_ngcontent-%COMP%]   .form-body[_ngcontent-%COMP%] {\n            max-height: none;\n            min-height: 300px;\n            height: 400px;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n        }\n\n        \n\n        .form-card.related-entity[_ngcontent-%COMP%]   .form-body[_ngcontent-%COMP%]    >   div {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            min-height: 0;\n        }\n\n        .form-card.related-entity[_ngcontent-%COMP%]   .form-body[_ngcontent-%COMP%]     mj-entity-data-grid, \n   .form-card.related-entity[_ngcontent-%COMP%]   .form-body[_ngcontent-%COMP%]     mj-explorer-entity-data-grid {\n            flex: 1;\n            display: block;\n            min-height: 0;\n        }\n\n        .form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n            background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n        }\n\n        .form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n            background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n            border-bottom-color: #3b82f6;\n        }\n\n        .form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            color: #3b82f6;\n        }\n\n        \n\n        .collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n            background: #10b981;\n            color: white;\n            padding: 3px 8px 2px 9px;\n            border-radius: 12px;\n            font-size: 12px;\n            font-weight: 600;\n            margin-left: 8px;\n            vertical-align: middle;\n            position: relative;\n            top: -2px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            min-width: 24px;\n            line-height: 1;\n        }\n\n        \n\n        .collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n            background: #9ca3af;\n        }\n\n        \n\n        .collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]     .search-highlight {\n            background-color: #fef08a;\n            color: #854d0e;\n            padding: 0;\n            border-radius: 2px;\n            font-weight: 700;\n            box-shadow: 0 0 0 2px #fef08a;\n        }"] });
+        } }, styles: ["[_nghost-%COMP%] {\n            display: block;\n        }\n\n        .search-hidden[_nghost-%COMP%] {\n            display: none;\n        }\n\n        .form-card[_ngcontent-%COMP%] {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n            transition: all 0.3s ease;\n        }\n\n        .collapsible-card[_ngcontent-%COMP%] {\n            overflow: hidden;\n        }\n\n        .collapsible-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 12px;\n            padding: 20px 24px;\n            background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n            border-bottom: 2px solid #e5e7eb;\n            user-select: none;\n            transition: all 0.3s ease;\n            cursor: pointer;\n        }\n\n        .drag-handle[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 0;\n            height: 24px;\n            color: #9ca3af;\n            cursor: grab;\n            opacity: 0;\n            overflow: hidden;\n            transition: width 0.2s ease, opacity 0.2s ease, color 0.2s ease;\n            flex-shrink: 0;\n        }\n\n        .collapsible-header[_ngcontent-%COMP%]:hover   .drag-handle[_ngcontent-%COMP%] {\n            width: 24px;\n            opacity: 1;\n        }\n\n        .drag-handle[_ngcontent-%COMP%]:hover {\n            color: #667eea;\n        }\n\n        .drag-handle[_ngcontent-%COMP%]:active {\n            cursor: grabbing;\n        }\n\n        .dragging[_nghost-%COMP%]   .drag-handle[_ngcontent-%COMP%] {\n            width: 24px;\n            opacity: 1;\n            color: #667eea;\n        }\n\n        .drag-over[_nghost-%COMP%] {\n            border: 2px dashed #667eea;\n            border-radius: 8px;\n        }\n\n        .collapsible-header[_ngcontent-%COMP%]:hover {\n            background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n            border-bottom-color: #667eea;\n        }\n\n        .collapsible-title[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            flex: 1;\n        }\n\n        .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            font-size: 20px;\n            color: #667eea;\n        }\n\n        .collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n            margin: 0;\n            font-size: 18px;\n            font-weight: 600;\n            color: #1f2937;\n        }\n\n        .collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n            color: #6b7280;\n            transition: transform 0.3s ease;\n            padding: 4px;\n        }\n\n        .collapsible-body[_ngcontent-%COMP%] {\n            max-height: 2000px;\n            overflow: hidden;\n            transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n            opacity: 1;\n        }\n\n        .collapsible-body.collapsed[_ngcontent-%COMP%] {\n            max-height: 0;\n            padding: 0;\n            opacity: 0;\n        }\n\n        .form-body[_ngcontent-%COMP%] {\n            padding: 24px;\n            overflow: auto;\n            max-height: 600px;\n        }\n\n        \n\n        .form-card.related-entity[_ngcontent-%COMP%] {\n            background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n            border-left: 3px solid #3b82f6;\n        }\n\n        \n\n        .form-card.related-entity[_ngcontent-%COMP%]   .form-body[_ngcontent-%COMP%] {\n            max-height: none;\n            min-height: 300px;\n            height: 400px;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n        }\n\n        \n\n        .form-card.related-entity[_ngcontent-%COMP%]   .form-body[_ngcontent-%COMP%]    >   div {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            min-height: 0;\n        }\n\n        .form-card.related-entity[_ngcontent-%COMP%]   .form-body[_ngcontent-%COMP%]     mj-entity-data-grid, \n   .form-card.related-entity[_ngcontent-%COMP%]   .form-body[_ngcontent-%COMP%]     mj-explorer-entity-data-grid {\n            flex: 1;\n            display: block;\n            min-height: 0;\n        }\n\n        .form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n            background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n        }\n\n        .form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n            background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n            border-bottom-color: #3b82f6;\n        }\n\n        .form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            color: #3b82f6;\n        }\n\n        \n\n        .collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n            background: #10b981;\n            color: white;\n            padding: 3px 8px 2px 9px;\n            border-radius: 12px;\n            font-size: 12px;\n            font-weight: 600;\n            margin-left: 8px;\n            vertical-align: middle;\n            position: relative;\n            top: -2px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            min-width: 24px;\n            line-height: 1;\n        }\n\n        \n\n        .collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n            background: #9ca3af;\n        }\n\n        \n\n        .collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]     .search-highlight {\n            background-color: #fef08a;\n            color: #854d0e;\n            padding: 0;\n            border-radius: 2px;\n            font-weight: 700;\n            box-shadow: 0 0 0 2px #fef08a;\n        }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CollapsiblePanelComponent, [{
         type: Component,
-        args: [{ selector: 'mj-collapsible-panel', template: `
+        args: [{ standalone: false, selector: 'mj-collapsible-panel', template: `
         <div
             class="form-card collapsible-card"
             [class.related-entity]="variant === 'related-entity'"
             [attr.data-section-name]="sectionName"
-            [attr.data-field-names]="fieldNames">
-            <div class="collapsible-header" role="button" tabindex="0">
-                <div class="collapsible-title" (click)="toggle()">
+            [attr.data-field-names]="fieldNames"
+            [attr.data-section-key]="sectionKey">
+            <div class="collapsible-header" role="button" tabindex="0" (click)="toggle()">
+                <div class="drag-handle"
+                     title="Drag to reorder sections"
+                     draggable="true"
+                     (dragstart)="onDragStart($event)"
+                     (dragend)="onDragEnd($event)"
+                     (click)="$event.stopPropagation()">
+                    <i class="fa-solid fa-grip-vertical"></i>
+                </div>
+                <div class="collapsible-title">
                     <i [class]="icon"></i>
                     <h3>
                         <span class="section-name" [innerHTML]="displayName"></span>
@@ -219,18 +266,7 @@ export class CollapsiblePanelComponent {
                         }
                     </h3>
                 </div>
-                <div class="panel-width-controls">
-                    <button
-                        class="width-control-btn"
-                        [class.active]="widthMode === 'full-width'"
-                        (click)="toggleFullWidth($event)"
-                        title="Stretch panel to full width"
-                        aria-label="Stretch panel to full width"
-                        type="button">
-                        <i class="fa-solid fa-left-right"></i>
-                    </button>
-                </div>
-                <div class="collapse-icon" (click)="toggle()">
+                <div class="collapse-icon">
                     <i [class]="expanded ? 'fa fa-chevron-up' : 'fa fa-chevron-down'"></i>
                 </div>
             </div>
@@ -240,8 +276,8 @@ export class CollapsiblePanelComponent {
                 </div>
             </div>
         </div>
-    `, styles: ["\n        :host {\n            display: block;\n        }\n\n        :host(.search-hidden) {\n            display: none;\n        }\n\n        :host(.panel-full-width) {\n            grid-column: 1 / -1 !important;\n        }\n\n        .form-card {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n            transition: all 0.3s ease;\n        }\n\n        :host(.panel-full-width) .form-card {\n            box-shadow: 0 4px 8px rgba(102, 126, 234, 0.15);\n            border: 2px solid #667eea;\n        }\n\n        .collapsible-card {\n            overflow: hidden;\n        }\n\n        .collapsible-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 12px;\n            padding: 20px 24px;\n            background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n            border-bottom: 2px solid #e5e7eb;\n            user-select: none;\n            transition: all 0.3s ease;\n        }\n\n        .collapsible-header:hover {\n            background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n            border-bottom-color: #667eea;\n        }\n\n        .collapsible-title {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            flex: 1;\n            cursor: pointer;\n        }\n\n        .collapsible-title i {\n            font-size: 20px;\n            color: #667eea;\n        }\n\n        .collapsible-title h3 {\n            margin: 0;\n            font-size: 18px;\n            font-weight: 600;\n            color: #1f2937;\n        }\n\n        .panel-width-controls {\n            display: flex;\n            gap: 6px;\n            align-items: center;\n        }\n\n        .width-control-btn {\n            padding: 6px 10px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            background: white;\n            color: #6b7280;\n            border-radius: 4px;\n            cursor: pointer;\n            transition: all 0.2s;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n        }\n\n        .width-control-btn:hover {\n            background: #f3f4f6;\n            color: #374151;\n            border-color: #9ca3af;\n        }\n\n        .width-control-btn.active {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\n        }\n\n        .width-control-btn i {\n            font-size: 12px;\n        }\n\n        .collapsible-header .collapse-icon {\n            color: #6b7280;\n            transition: transform 0.3s ease;\n            cursor: pointer;\n            padding: 4px;\n        }\n\n        .collapsible-body {\n            max-height: 2000px;\n            overflow: hidden;\n            transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n            opacity: 1;\n        }\n\n        .collapsible-body.collapsed {\n            max-height: 0;\n            padding: 0;\n            opacity: 0;\n        }\n\n        .form-body {\n            padding: 24px;\n            overflow: auto;\n            max-height: 600px;\n        }\n\n        /* Related Entity Sections - Visual Distinction */\n        .form-card.related-entity {\n            background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n            border-left: 3px solid #3b82f6;\n        }\n\n        /* Related entity sections contain grids that need more vertical space */\n        .form-card.related-entity .form-body {\n            max-height: none;\n            min-height: 300px;\n            height: 400px;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n        }\n\n        /* Ensure wrapper div and grid inside take full height */\n        .form-card.related-entity .form-body > ::ng-deep div {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            min-height: 0;\n        }\n\n        .form-card.related-entity .form-body ::ng-deep mj-entity-data-grid,\n        .form-card.related-entity .form-body ::ng-deep mj-explorer-entity-data-grid {\n            flex: 1;\n            display: block;\n            min-height: 0;\n        }\n\n        .form-card.related-entity .collapsible-header {\n            background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n        }\n\n        .form-card.related-entity .collapsible-header:hover {\n            background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n            border-bottom-color: #3b82f6;\n        }\n\n        .form-card.related-entity .collapsible-title i {\n            color: #3b82f6;\n        }\n\n        /* Row count badge for related entity sections */\n        .collapsible-title .row-count-badge {\n            background: #10b981;\n            color: white;\n            padding: 3px 8px 2px 9px;\n            border-radius: 12px;\n            font-size: 12px;\n            font-weight: 600;\n            margin-left: 8px;\n            vertical-align: middle;\n            position: relative;\n            top: -2px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            min-width: 24px;\n            line-height: 1;\n        }\n\n        /* Gray badge for zero rows (loaded but empty) */\n        .collapsible-title .row-count-badge.zero-rows {\n            background: #9ca3af;\n        }\n\n        /* Search highlighting */\n        .collapsible-title h3 ::ng-deep .search-highlight {\n            background-color: #fef08a;\n            color: #854d0e;\n            padding: 0;\n            border-radius: 2px;\n            font-weight: 700;\n            box-shadow: 0 0 0 2px #fef08a;\n        }\n    "] }]
-    }], () => [{ type: i0.ChangeDetectorRef }], { sectionKey: [{
+    `, styles: ["\n        :host {\n            display: block;\n        }\n\n        :host(.search-hidden) {\n            display: none;\n        }\n\n        .form-card {\n            background: white;\n            border-radius: 8px;\n            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n            overflow: hidden;\n            transition: all 0.3s ease;\n        }\n\n        .collapsible-card {\n            overflow: hidden;\n        }\n\n        .collapsible-header {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: 12px;\n            padding: 20px 24px;\n            background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n            border-bottom: 2px solid #e5e7eb;\n            user-select: none;\n            transition: all 0.3s ease;\n            cursor: pointer;\n        }\n\n        .drag-handle {\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            width: 0;\n            height: 24px;\n            color: #9ca3af;\n            cursor: grab;\n            opacity: 0;\n            overflow: hidden;\n            transition: width 0.2s ease, opacity 0.2s ease, color 0.2s ease;\n            flex-shrink: 0;\n        }\n\n        .collapsible-header:hover .drag-handle {\n            width: 24px;\n            opacity: 1;\n        }\n\n        .drag-handle:hover {\n            color: #667eea;\n        }\n\n        .drag-handle:active {\n            cursor: grabbing;\n        }\n\n        :host(.dragging) .drag-handle {\n            width: 24px;\n            opacity: 1;\n            color: #667eea;\n        }\n\n        :host(.drag-over) {\n            border: 2px dashed #667eea;\n            border-radius: 8px;\n        }\n\n        .collapsible-header:hover {\n            background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n            border-bottom-color: #667eea;\n        }\n\n        .collapsible-title {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            flex: 1;\n        }\n\n        .collapsible-title i {\n            font-size: 20px;\n            color: #667eea;\n        }\n\n        .collapsible-title h3 {\n            margin: 0;\n            font-size: 18px;\n            font-weight: 600;\n            color: #1f2937;\n        }\n\n        .collapsible-header .collapse-icon {\n            color: #6b7280;\n            transition: transform 0.3s ease;\n            padding: 4px;\n        }\n\n        .collapsible-body {\n            max-height: 2000px;\n            overflow: hidden;\n            transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n            opacity: 1;\n        }\n\n        .collapsible-body.collapsed {\n            max-height: 0;\n            padding: 0;\n            opacity: 0;\n        }\n\n        .form-body {\n            padding: 24px;\n            overflow: auto;\n            max-height: 600px;\n        }\n\n        /* Related Entity Sections - Visual Distinction */\n        .form-card.related-entity {\n            background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n            border-left: 3px solid #3b82f6;\n        }\n\n        /* Related entity sections contain grids that need more vertical space */\n        .form-card.related-entity .form-body {\n            max-height: none;\n            min-height: 300px;\n            height: 400px;\n            overflow: hidden;\n            display: flex;\n            flex-direction: column;\n        }\n\n        /* Ensure wrapper div and grid inside take full height */\n        .form-card.related-entity .form-body > ::ng-deep div {\n            flex: 1;\n            display: flex;\n            flex-direction: column;\n            min-height: 0;\n        }\n\n        .form-card.related-entity .form-body ::ng-deep mj-entity-data-grid,\n        .form-card.related-entity .form-body ::ng-deep mj-explorer-entity-data-grid {\n            flex: 1;\n            display: block;\n            min-height: 0;\n        }\n\n        .form-card.related-entity .collapsible-header {\n            background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n        }\n\n        .form-card.related-entity .collapsible-header:hover {\n            background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n            border-bottom-color: #3b82f6;\n        }\n\n        .form-card.related-entity .collapsible-title i {\n            color: #3b82f6;\n        }\n\n        /* Row count badge for related entity sections */\n        .collapsible-title .row-count-badge {\n            background: #10b981;\n            color: white;\n            padding: 3px 8px 2px 9px;\n            border-radius: 12px;\n            font-size: 12px;\n            font-weight: 600;\n            margin-left: 8px;\n            vertical-align: middle;\n            position: relative;\n            top: -2px;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            min-width: 24px;\n            line-height: 1;\n        }\n\n        /* Gray badge for zero rows (loaded but empty) */\n        .collapsible-title .row-count-badge.zero-rows {\n            background: #9ca3af;\n        }\n\n        /* Search highlighting */\n        .collapsible-title h3 ::ng-deep .search-highlight {\n            background-color: #fef08a;\n            color: #854d0e;\n            padding: 0;\n            border-radius: 2px;\n            font-weight: 700;\n            box-shadow: 0 0 0 2px #fef08a;\n        }\n    "] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], { sectionKey: [{
             type: Input
         }], sectionName: [{
             type: Input
@@ -259,7 +295,11 @@ export class CollapsiblePanelComponent {
             type: Input
         }], defaultExpanded: [{
             type: Input
-        }], widthModeChange: [{
+        }], dragStarted: [{
+            type: Output
+        }], dragEnded: [{
+            type: Output
+        }], panelDrop: [{
             type: Output
         }], fieldComponents: [{
             type: ContentChildren,
@@ -267,9 +307,24 @@ export class CollapsiblePanelComponent {
         }], isHidden: [{
             type: HostBinding,
             args: ['class.search-hidden']
-        }], isFullWidth: [{
+        }], cssOrder: [{
+            type: HostBinding,
+            args: ['style.order']
+        }], isDragging: [{
+            type: HostBinding,
+            args: ['class.dragging']
+        }], isDragOver: [{
             type: HostBinding,
-            args: ['class.panel-full-width']
+            args: ['class.drag-over']
+        }], onDragOver: [{
+            type: HostListener,
+            args: ['dragover', ['$event']]
+        }], onDragLeave: [{
+            type: HostListener,
+            args: ['dragleave', ['$event']]
+        }], onDrop: [{
+            type: HostListener,
+            args: ['drop', ['$event']]
         }] }); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CollapsiblePanelComponent, { className: "CollapsiblePanelComponent", filePath: "src/lib/collapsible-panel.component.ts", lineNumber: 268 }); })();
 //# sourceMappingURL=collapsible-panel.component.js.map

package/dist/lib/collapsible-panel.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible-panel.component.js","sourceRoot":"","sources":["../../src/lib/collapsible-panel.component.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"collapsible-panel.component.js","sourceRoot":"","sources":["../../src/lib/collapsible-panel.component.ts"],"names":[],"mappings":"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"}

package/dist/lib/explorer-entity-data-grid.component.d.ts

@@ -32,8 +32,4 @@ export declare class ExplorerEntityDataGridComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<ExplorerEntityDataGridComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ExplorerEntityDataGridComponent, "mj-explorer-entity-data-grid", never, { "Params": { "alias": "Params"; "required": false; }; "NewRecordValues": { "alias": "NewRecordValues"; "required": false; }; "AllowLoad": { "alias": "AllowLoad"; "required": false; }; "ShowToolbar": { "alias": "ShowToolbar"; "required": false; }; "Height": { "alias": "Height"; "required": false; }; "ToolbarConfig": { "alias": "ToolbarConfig"; "required": false; }; "SelectionMode": { "alias": "SelectionMode"; "required": false; }; "NavigateOnDoubleClick": { "alias": "NavigateOnDoubleClick"; "required": false; }; }, { "AfterRowDoubleClick": "AfterRowDoubleClick"; "AfterRowClick": "AfterRowClick"; "AfterDataLoad": "AfterDataLoad"; }, never, never, false, never>;
 }
-/**
- * Tree-shaking prevention function - call this to ensure the component is included
- */
-export declare function LoadExplorerEntityDataGridComponent(): void;
 //# sourceMappingURL=explorer-entity-data-grid.component.d.ts.map

package/dist/lib/explorer-entity-data-grid.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"explorer-entity-data-grid.component.d.ts","sourceRoot":"","sources":["../../src/lib/explorer-entity-data-grid.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAa,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EACH,uBAAuB,EACvB,4BAA4B,EAC5B,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACpB,MAAM,kCAAkC,CAAC;;AAE1C;;;;;;GAMG;AACH,qBAyBa,+BAA+B;IAChB,SAAS,EAAG,uBAAuB,CAAC;IAGnD,MAAM,EAAE,aAAa,GAAG,IAAI,CAAQ;IACpC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IAC9C,SAAS,EAAE,OAAO,CAAQ;IAC1B,WAAW,EAAE,OAAO,CAAQ;IAC5B,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAU;IACjD,aAAa,EAAE,iBAAiB,CAAM;IACtC,aAAa,EAAE,iBAAiB,CAAY;IAErD;;;OAGG;IACM,qBAAqB,EAAE,OAAO,CAAQ;IAGrC,mBAAmB,6CAAoD;IACvE,aAAa,uCAA8C;IAC3D,aAAa,uCAA8C;IAErE,gBAAgB,CAAC,KAAK,EAAE,4BAA4B,GAAG,IAAI;IAe3D,UAAU,CAAC,KAAK,EAAE,sBAAsB,GAAG,IAAI;IAK/C,UAAU,CAAC,KAAK,EAAE,sBAAsB,GAAG,IAAI;yCA3CtC,+BAA+B;2CAA/B,+BAA+B;CA+C3C;AAED;;GAEG;AACH,wBAAgB,mCAAmC,IAAI,IAAI,CAG1D"}
+{"version":3,"file":"explorer-entity-data-grid.component.d.ts","sourceRoot":"","sources":["../../src/lib/explorer-entity-data-grid.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAA4B,YAAY,EAAa,MAAM,eAAe,CAAC;AAClF,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EACH,uBAAuB,EACvB,4BAA4B,EAC5B,sBAAsB,EACtB,sBAAsB,EACtB,iBAAiB,EACjB,iBAAiB,EACpB,MAAM,kCAAkC,CAAC;;AAE1C;;;;;;GAMG;AACH,qBA0Ba,+BAA+B;IAChB,SAAS,EAAG,uBAAuB,CAAC;IAGnD,MAAM,EAAE,aAAa,GAAG,IAAI,CAAQ;IACpC,eAAe,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAM;IAC9C,SAAS,EAAE,OAAO,CAAQ;IAC1B,WAAW,EAAE,OAAO,CAAQ;IAC5B,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,aAAa,CAAU;IACjD,aAAa,EAAE,iBAAiB,CAAM;IACtC,aAAa,EAAE,iBAAiB,CAAY;IAErD;;;OAGG;IACM,qBAAqB,EAAE,OAAO,CAAQ;IAGrC,mBAAmB,6CAAoD;IACvE,aAAa,uCAA8C;IAC3D,aAAa,uCAA8C;IAErE,gBAAgB,CAAC,KAAK,EAAE,4BAA4B,GAAG,IAAI;IAe3D,UAAU,CAAC,KAAK,EAAE,sBAAsB,GAAG,IAAI;IAK/C,UAAU,CAAC,KAAK,EAAE,sBAAsB,GAAG,IAAI;yCA3CtC,+BAA+B;2CAA/B,+BAA+B;CA+C3C"}

package/dist/lib/explorer-entity-data-grid.component.js

@@ -56,7 +56,7 @@ export class ExplorerEntityDataGridComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.innerGrid = _t.first);
-        } }, inputs: { Params: "Params", NewRecordValues: "NewRecordValues", AllowLoad: "AllowLoad", ShowToolbar: "ShowToolbar", Height: "Height", ToolbarConfig: "ToolbarConfig", SelectionMode: "SelectionMode", NavigateOnDoubleClick: "NavigateOnDoubleClick" }, outputs: { AfterRowDoubleClick: "AfterRowDoubleClick", AfterRowClick: "AfterRowClick", AfterDataLoad: "AfterDataLoad" }, decls: 2, vars: 7, consts: [["innerGrid", ""], [3, "AfterRowDoubleClick", "AfterRowClick", "AfterDataLoad", "Params", "NewRecordValues", "AllowLoad", "ShowToolbar", "Height", "ToolbarConfig", "SelectionMode"]], template: function ExplorerEntityDataGridComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Params: "Params", NewRecordValues: "NewRecordValues", AllowLoad: "AllowLoad", ShowToolbar: "ShowToolbar", Height: "Height", ToolbarConfig: "ToolbarConfig", SelectionMode: "SelectionMode", NavigateOnDoubleClick: "NavigateOnDoubleClick" }, outputs: { AfterRowDoubleClick: "AfterRowDoubleClick", AfterRowClick: "AfterRowClick", AfterDataLoad: "AfterDataLoad" }, standalone: false, decls: 2, vars: 7, consts: [["innerGrid", ""], [3, "AfterRowDoubleClick", "AfterRowClick", "AfterDataLoad", "Params", "NewRecordValues", "AllowLoad", "ShowToolbar", "Height", "ToolbarConfig", "SelectionMode"]], template: function ExplorerEntityDataGridComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "mj-entity-data-grid", 1, 0);
             i0.ɵɵlistener("AfterRowDoubleClick", function ExplorerEntityDataGridComponent_Template_mj_entity_data_grid_AfterRowDoubleClick_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onRowDoubleClick($event)); })("AfterRowClick", function ExplorerEntityDataGridComponent_Template_mj_entity_data_grid_AfterRowClick_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onRowClick($event)); })("AfterDataLoad", function ExplorerEntityDataGridComponent_Template_mj_entity_data_grid_AfterDataLoad_0_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onDataLoad($event)); });
@@ -67,7 +67,7 @@ export class ExplorerEntityDataGridComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ExplorerEntityDataGridComponent, [{
         type: Component,
-        args: [{ selector: 'mj-explorer-entity-data-grid', template: `
+        args: [{ standalone: false, selector: 'mj-explorer-entity-data-grid', template: `
         <mj-entity-data-grid
             #innerGrid
             [Params]="Params"
@@ -108,12 +108,5 @@ export class ExplorerEntityDataGridComponent {
         }], AfterDataLoad: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExplorerEntityDataGridComponent, { className: "ExplorerEntityDataGridComponent", filePath: "src/lib/explorer-entity-data-grid.component.ts", lineNumber: 45 }); })();
-/**
- * Tree-shaking prevention function - call this to ensure the component is included
- */
-export function LoadExplorerEntityDataGridComponent() {
-    // Reference the component to prevent tree-shaking
-    const c = ExplorerEntityDataGridComponent;
-}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ExplorerEntityDataGridComponent, { className: "ExplorerEntityDataGridComponent", filePath: "src/lib/explorer-entity-data-grid.component.ts", lineNumber: 46 }); })();
 //# sourceMappingURL=explorer-entity-data-grid.component.js.map

package/dist/lib/explorer-entity-data-grid.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"explorer-entity-data-grid.component.js","sourceRoot":"","sources":["../../src/lib/explorer-entity-data-grid.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;;;;AAU1D;;;;;;GAMG;AA0BH,MAAM,OAAO,+BAA+B;IAChB,SAAS,CAA2B;IAE5D,mDAAmD;IAC1C,MAAM,GAAyB,IAAI,CAAC;IACpC,eAAe,GAA4B,EAAE,CAAC;IAC9C,SAAS,GAAY,IAAI,CAAC;IAC1B,WAAW,GAAY,IAAI,CAAC;IAC5B,MAAM,GAAoC,MAAM,CAAC;IACjD,aAAa,GAAsB,EAAE,CAAC;IACtC,aAAa,GAAsB,QAAQ,CAAC;IAErD;;;OAGG;IACM,qBAAqB,GAAY,IAAI,CAAC;IAE/C,6CAA6C;IACnC,mBAAmB,GAAG,IAAI,YAAY,EAAgC,CAAC;IACvE,aAAa,GAAG,IAAI,YAAY,EAA0B,CAAC;IAC3D,aAAa,GAAG,IAAI,YAAY,EAA0B,CAAC;IAErE,gBAAgB,CAAC,KAAmC;QAChD,sCAAsC;QACtC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAErC,oCAAoC;QACpC,IAAI,IAAI,CAAC,qBAAqB,IAAI,KAAK,CAAC,GAAG,EAAE,CAAC;YAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC;YACzB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC;YAC3C,IAAI,UAAU,EAAE,CAAC;gBACb,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC;gBAC/B,aAAa,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YAC9D,CAAC;QACL,CAAC;IACL,CAAC;IAED,UAAU,CAAC,KAA6B;QACpC,sCAAsC;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,UAAU,CAAC,KAA6B;QACpC,sCAAsC;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;yHA9CQ,+BAA+B;6DAA/B,+BAA+B;;;;;;;YAtBpC,iDAWyC;YAArC,AADA,AADA,iMAAuB,4BAAwB,KAAC,wKAC/B,sBAAkB,KAAC,wKACnB,sBAAkB,KAAC;YACxC,iBAAsB;;YAJlB,AADA,AADA,AADA,AADA,AADA,AADA,mCAAiB,wCACkB,4BACZ,gCACI,sBACV,oCACc,oCACA;;;iFAc9B,+BAA+B;cAzB3C,SAAS;2BACI,8BAA8B,YAC9B;;;;;;;;;;;;;;KAcT;gBAUuB,SAAS;kBAAhC,SAAS;mBAAC,WAAW;YAGb,MAAM;kBAAd,KAAK;YACG,eAAe;kBAAvB,KAAK;YACG,SAAS;kBAAjB,KAAK;YACG,WAAW;kBAAnB,KAAK;YACG,MAAM;kBAAd,KAAK;YACG,aAAa;kBAArB,KAAK;YACG,aAAa;kBAArB,KAAK;YAMG,qBAAqB;kBAA7B,KAAK;YAGI,mBAAmB;kBAA5B,MAAM;YACG,aAAa;kBAAtB,MAAM;YACG,aAAa;kBAAtB,MAAM;;kFArBE,+BAA+B;AAiD5C;;GAEG;AACH,MAAM,UAAU,mCAAmC;IAC/C,kDAAkD;IAClD,MAAM,CAAC,GAAG,+BAA+B,CAAC;AAC9C,CAAC"}
+{"version":3,"file":"explorer-entity-data-grid.component.js","sourceRoot":"","sources":["../../src/lib/explorer-entity-data-grid.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAElF,OAAO,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;;;;AAU1D;;;;;;GAMG;AA2BH,MAAM,OAAO,+BAA+B;IAChB,SAAS,CAA2B;IAE5D,mDAAmD;IAC1C,MAAM,GAAyB,IAAI,CAAC;IACpC,eAAe,GAA4B,EAAE,CAAC;IAC9C,SAAS,GAAY,IAAI,CAAC;IAC1B,WAAW,GAAY,IAAI,CAAC;IAC5B,MAAM,GAAoC,MAAM,CAAC;IACjD,aAAa,GAAsB,EAAE,CAAC;IACtC,aAAa,GAAsB,QAAQ,CAAC;IAErD;;;OAGG;IACM,qBAAqB,GAAY,IAAI,CAAC;IAE/C,6CAA6C;IACnC,mBAAmB,GAAG,IAAI,YAAY,EAAgC,CAAC;IACvE,aAAa,GAAG,IAAI,YAAY,EAA0B,CAAC;IAC3D,aAAa,GAAG,IAAI,YAAY,EAA0B,CAAC;IAErE,gBAAgB,CAAC,KAAmC;QAChD,sCAAsC;QACtC,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAErC,oCAAoC;QACpC,IAAI,IAAI,CAAC,qBAAqB,IAAI,KAAK,CAAC,GAAG,EAAE,CAAC;YAC1C,MAAM,MAAM,GAAG,KAAK,CAAC,GAAG,CAAC;YACzB,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU,EAAE,IAAI,CAAC;YAC3C,IAAI,UAAU,EAAE,CAAC;gBACb,MAAM,IAAI,GAAG,MAAM,CAAC,UAAU,CAAC;gBAC/B,aAAa,CAAC,QAAQ,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YAC9D,CAAC;QACL,CAAC;IACL,CAAC;IAED,UAAU,CAAC,KAA6B;QACpC,sCAAsC;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;IAED,UAAU,CAAC,KAA6B;QACpC,sCAAsC;QACtC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC;yHA9CQ,+BAA+B;6DAA/B,+BAA+B;;;;;;;YAtBpC,iDAWyC;YAArC,AADA,AADA,iMAAuB,4BAAwB,KAAC,wKAC/B,sBAAkB,KAAC,wKACnB,sBAAkB,KAAC;YACxC,iBAAsB;;YAJlB,AADA,AADA,AADA,AADA,AADA,AADA,mCAAiB,wCACkB,4BACZ,gCACI,sBACV,oCACc,oCACA;;;iFAc9B,+BAA+B;cA1B3C,SAAS;6BACI,KAAK,YACL,8BAA8B,YAC9B;;;;;;;;;;;;;;KAcT;;kBAUA,SAAS;mBAAC,WAAW;;kBAGrB,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBACL,KAAK;;kBAML,KAAK;;kBAGL,MAAM;;kBACN,MAAM;;kBACN,MAAM;;kFArBE,+BAA+B"}

package/dist/lib/form-section-controls.component.d.ts

@@ -1,7 +1,9 @@
 import { EventEmitter } from '@angular/core';
 import * as i0 from "@angular/core";
+/** Form width mode - 'centered' uses max-width constraint, 'full-width' uses all available space */
+export type FormWidthMode = 'centered' | 'full-width';
 /**
- * Reusable component for form section controls (Expand All, Collapse All, Filter, Counter)
+ * Reusable component for form section controls (Expand All, Collapse All, Filter, Counter, Width Toggle)
  * Designed to be projected into form toolbars via ng-content with [toolbar-additional-controls] selector
  */
 export declare class FormSectionControlsComponent {
@@ -10,15 +12,24 @@ export declare class FormSectionControlsComponent {
     searchFilter: string;
     expandedCount: number;
     showEmptyFields: boolean;
+    widthMode: FormWidthMode;
+    hasCustomOrder: boolean;
     expandAll: EventEmitter<void>;
     collapseAll: EventEmitter<void>;
     filterChange: EventEmitter<string>;
     showEmptyFieldsChange: EventEmitter<boolean>;
+    widthModeChange: EventEmitter<FormWidthMode>;
+    resetOrder: EventEmitter<void>;
     searchTerm: string;
+    showResetConfirmDialog: boolean;
     get allExpanded(): boolean;
     get allCollapsed(): boolean;
     clearFilter(): void;
+    toggleWidthMode(): void;
+    confirmResetOrder(): void;
+    doResetOrder(): void;
+    cancelResetOrder(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormSectionControlsComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<FormSectionControlsComponent, "mj-form-section-controls[toolbar-additional-controls]", never, { "visibleCount": { "alias": "visibleCount"; "required": false; }; "totalCount": { "alias": "totalCount"; "required": false; }; "searchFilter": { "alias": "searchFilter"; "required": false; }; "expandedCount": { "alias": "expandedCount"; "required": false; }; "showEmptyFields": { "alias": "showEmptyFields"; "required": false; }; }, { "expandAll": "expandAll"; "collapseAll": "collapseAll"; "filterChange": "filterChange"; "showEmptyFieldsChange": "showEmptyFieldsChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<FormSectionControlsComponent, "mj-form-section-controls[toolbar-additional-controls]", never, { "visibleCount": { "alias": "visibleCount"; "required": false; }; "totalCount": { "alias": "totalCount"; "required": false; }; "searchFilter": { "alias": "searchFilter"; "required": false; }; "expandedCount": { "alias": "expandedCount"; "required": false; }; "showEmptyFields": { "alias": "showEmptyFields"; "required": false; }; "widthMode": { "alias": "widthMode"; "required": false; }; "hasCustomOrder": { "alias": "hasCustomOrder"; "required": false; }; }, { "expandAll": "expandAll"; "collapseAll": "collapseAll"; "filterChange": "filterChange"; "showEmptyFieldsChange": "showEmptyFieldsChange"; "widthModeChange": "widthModeChange"; "resetOrder": "resetOrder"; }, never, never, false, never>;
 }
 //# sourceMappingURL=form-section-controls.component.d.ts.map

package/dist/lib/form-section-controls.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-section-controls.component.d.ts","sourceRoot":"","sources":["../../src/lib/form-section-controls.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA0C,MAAM,eAAe,CAAC;;AAEhG;;;GAGG;AACH,qBAwJa,4BAA4B;IAC5B,YAAY,EAAE,MAAM,CAAK;IACzB,UAAU,EAAE,MAAM,CAAK;IACvB,YAAY,EAAE,MAAM,CAAM;IAC1B,aAAa,EAAE,MAAM,CAAK;IAC1B,eAAe,EAAE,OAAO,CAAS;IAChC,SAAS,qBAA4B;IACrC,WAAW,qBAA4B;IACvC,YAAY,uBAA8B;IAC1C,qBAAqB,wBAA+B;IAE9D,UAAU,SAAM;IAEhB,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,WAAW,IAAI,IAAI;yCArBV,4BAA4B;2CAA5B,4BAA4B;CAyBxC"}
+{"version":3,"file":"form-section-controls.component.d.ts","sourceRoot":"","sources":["../../src/lib/form-section-controls.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,YAAY,EAA0C,MAAM,eAAe,CAAC;;AAEhG,oGAAoG;AACpG,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,YAAY,CAAC;AAEtD;;;GAGG;AACH,qBAsXa,4BAA4B;IAC5B,YAAY,EAAE,MAAM,CAAK;IACzB,UAAU,EAAE,MAAM,CAAK;IACvB,YAAY,EAAE,MAAM,CAAM;IAC1B,aAAa,EAAE,MAAM,CAAK;IAC1B,eAAe,EAAE,OAAO,CAAS;IACjC,SAAS,EAAE,aAAa,CAAc;IACtC,cAAc,EAAE,OAAO,CAAS;IAC/B,SAAS,qBAA4B;IACrC,WAAW,qBAA4B;IACvC,YAAY,uBAA8B;IAC1C,qBAAqB,wBAA+B;IACpD,eAAe,8BAAqC;IACpD,UAAU,qBAA4B;IAEhD,UAAU,SAAM;IAChB,sBAAsB,UAAS;IAE/B,IAAI,WAAW,IAAI,OAAO,CAEzB;IAED,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED,WAAW,IAAI,IAAI;IAKnB,eAAe,IAAI,IAAI;IAKvB,iBAAiB,IAAI,IAAI;IAIzB,YAAY,IAAI,IAAI;IAKpB,gBAAgB,IAAI,IAAI;yCA7Cf,4BAA4B;2CAA5B,4BAA4B;CAgDxC"}