@memberjunction/ng-base-forms 3.3.0 → 4.0.0

package/dist/lib/form-section-controls.component.js

@@ -3,24 +3,63 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
 import * as i2 from "@progress/kendo-angular-buttons";
 const _c0 = ["toolbar-additional-controls", ""];
-function FormSectionControlsComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function FormSectionControlsComponent_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 11);
-    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearFilter()); });
-    i0.ɵɵelement(1, "span", 12);
+    i0.ɵɵelementStart(0, "div", 7);
+    i0.ɵɵelement(1, "span", 15);
+    i0.ɵɵelementStart(2, "span", 16);
+    i0.ɵɵtext(3, "Custom Order");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 17);
+    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_6_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmResetOrder()); });
+    i0.ɵɵelement(5, "span", 18);
+    i0.ɵɵelementEnd()();
 } }
-function FormSectionControlsComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 10);
+function FormSectionControlsComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 19);
+    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearFilter()); });
+    i0.ɵɵelement(1, "span", 18);
+    i0.ɵɵelementEnd();
+} }
+function FormSectionControlsComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 13);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate2("", ctx_r2.visibleCount, "/", ctx_r2.totalCount, "");
+    i0.ɵɵtextInterpolate2("", ctx_r2.visibleCount, "/", ctx_r2.totalCount);
+} }
+function FormSectionControlsComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_16_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelResetOrder()); });
+    i0.ɵɵelementStart(1, "div", 21);
+    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_16_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r5); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 22);
+    i0.ɵɵelement(3, "span", 23);
+    i0.ɵɵelementStart(4, "h3");
+    i0.ɵɵtext(5, "Reset Section Order");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 24)(7, "p");
+    i0.ɵɵtext(8, "Are you sure you want to reset the section order to default?");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "p", 25);
+    i0.ɵɵtext(10, "This will remove your custom arrangement.");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 26)(12, "button", 27);
+    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_16_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.doResetOrder()); });
+    i0.ɵɵelement(13, "span", 28);
+    i0.ɵɵtext(14, " Reset Order ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "button", 29);
+    i0.ɵɵlistener("click", function FormSectionControlsComponent_Conditional_16_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelResetOrder()); });
+    i0.ɵɵtext(16, " Cancel ");
+    i0.ɵɵelementEnd()()()();
 } }
 /**
- * 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 class FormSectionControlsComponent {
@@ -29,11 +68,16 @@ export class FormSectionControlsComponent {
     searchFilter = '';
     expandedCount = 0;
     showEmptyFields = false;
+    widthMode = 'centered';
+    hasCustomOrder = false;
     expandAll = new EventEmitter();
     collapseAll = new EventEmitter();
     filterChange = new EventEmitter();
     showEmptyFieldsChange = new EventEmitter();
+    widthModeChange = new EventEmitter();
+    resetOrder = new EventEmitter();
     searchTerm = '';
+    showResetConfirmDialog = false;
     get allExpanded() {
         return this.totalCount > 0 && this.expandedCount === this.totalCount;
     }
@@ -44,8 +88,22 @@ export class FormSectionControlsComponent {
         this.searchTerm = '';
         this.filterChange.emit('');
     }
+    toggleWidthMode() {
+        const newMode = this.widthMode === 'centered' ? 'full-width' : 'centered';
+        this.widthModeChange.emit(newMode);
+    }
+    confirmResetOrder() {
+        this.showResetConfirmDialog = true;
+    }
+    doResetOrder() {
+        this.showResetConfirmDialog = false;
+        this.resetOrder.emit();
+    }
+    cancelResetOrder() {
+        this.showResetConfirmDialog = false;
+    }
     static ɵfac = function FormSectionControlsComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || FormSectionControlsComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormSectionControlsComponent, selectors: [["mj-form-section-controls", "toolbar-additional-controls", ""]], inputs: { visibleCount: "visibleCount", totalCount: "totalCount", searchFilter: "searchFilter", expandedCount: "expandedCount", showEmptyFields: "showEmptyFields" }, outputs: { expandAll: "expandAll", collapseAll: "collapseAll", filterChange: "filterChange", showEmptyFieldsChange: "showEmptyFieldsChange" }, attrs: _c0, decls: 13, vars: 6, consts: [["searchInput", ""], ["kendoButton", "", "title", "Expand all sections", 3, "click", "disabled"], [1, "fa-solid", "fa-angle-double-down"], ["kendoButton", "", "title", "Collapse all sections", 3, "click", "disabled"], [1, "fa-solid", "fa-angle-double-up"], [1, "show-empty-fields-toggle"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], [2, "position", "relative"], ["type", "text", "placeholder", "Filter sections...", 1, "section-search", 3, "ngModelChange", "ngModel"], ["kendoButton", "", "title", "Clear filter", 1, "clear-search-btn"], [1, "section-count"], ["kendoButton", "", "title", "Clear filter", 1, "clear-search-btn", 3, "click"], [1, "fa-solid", "fa-xmark"]], template: function FormSectionControlsComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FormSectionControlsComponent, selectors: [["mj-form-section-controls", "toolbar-additional-controls", ""]], inputs: { visibleCount: "visibleCount", totalCount: "totalCount", searchFilter: "searchFilter", expandedCount: "expandedCount", showEmptyFields: "showEmptyFields", widthMode: "widthMode", hasCustomOrder: "hasCustomOrder" }, outputs: { expandAll: "expandAll", collapseAll: "collapseAll", filterChange: "filterChange", showEmptyFieldsChange: "showEmptyFieldsChange", widthModeChange: "widthModeChange", resetOrder: "resetOrder" }, standalone: false, attrs: _c0, decls: 17, vars: 11, consts: [["searchInput", ""], ["kendoButton", "", "title", "Expand all sections", 3, "click", "disabled"], [1, "fa-solid", "fa-angle-double-down"], ["kendoButton", "", "title", "Collapse all sections", 3, "click", "disabled"], [1, "fa-solid", "fa-angle-double-up"], ["kendoButton", "", 3, "click", "title"], [1, "fa-solid", "fa-left-right"], ["title", "Sections are in a custom order", 1, "custom-order-indicator"], [1, "show-empty-fields-toggle"], ["type", "checkbox", 3, "ngModelChange", "ngModel"], [2, "position", "relative"], ["type", "text", "placeholder", "Filter sections...", 1, "section-search", 3, "ngModelChange", "ngModel"], ["kendoButton", "", "title", "Clear filter", 1, "clear-search-btn"], [1, "section-count"], [1, "dialog-overlay"], [1, "fa-solid", "fa-shuffle"], [1, "indicator-label"], ["type", "button", "title", "Reset to default order", 1, "reset-order-btn", 3, "click"], [1, "fa-solid", "fa-xmark"], ["kendoButton", "", "title", "Clear filter", 1, "clear-search-btn", 3, "click"], [1, "dialog-overlay", 3, "click"], [1, "confirm-dialog", 3, "click"], [1, "dialog-header"], [1, "fa-solid", "fa-shuffle", "dialog-icon"], [1, "dialog-body"], [1, "dialog-hint"], [1, "dialog-actions"], ["type", "button", 1, "dialog-btn", "dialog-btn-primary", 3, "click"], [1, "fa-solid", "fa-check"], ["type", "button", 1, "dialog-btn", "dialog-btn-secondary", 3, "click"]], template: function FormSectionControlsComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "button", 1);
             i0.ɵɵlistener("click", function FormSectionControlsComponent_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.expandAll.emit()); });
@@ -55,37 +113,50 @@ export class FormSectionControlsComponent {
             i0.ɵɵlistener("click", function FormSectionControlsComponent_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.collapseAll.emit()); });
             i0.ɵɵelement(3, "span", 4);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(4, "label", 5)(5, "input", 6);
-            i0.ɵɵtwoWayListener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showEmptyFields, $event) || (ctx.showEmptyFields = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_5_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showEmptyFieldsChange.emit($event)); });
+            i0.ɵɵelementStart(4, "button", 5);
+            i0.ɵɵlistener("click", function FormSectionControlsComponent_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.toggleWidthMode()); });
+            i0.ɵɵelement(5, "span", 6);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(6, "span");
-            i0.ɵɵtext(7, "Show Empty Fields");
+            i0.ɵɵconditionalCreate(6, FormSectionControlsComponent_Conditional_6_Template, 6, 0, "div", 7);
+            i0.ɵɵelementStart(7, "label", 8)(8, "input", 9);
+            i0.ɵɵtwoWayListener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.showEmptyFields, $event) || (ctx.showEmptyFields = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.showEmptyFieldsChange.emit($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(9, "span");
+            i0.ɵɵtext(10, "Show Empty Fields");
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(8, "div", 7)(9, "input", 8, 0);
-            i0.ɵɵtwoWayListener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.searchTerm, $event) || (ctx.searchTerm = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.filterChange.emit($event)); });
+            i0.ɵɵelementStart(11, "div", 10)(12, "input", 11, 0);
+            i0.ɵɵtwoWayListener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.searchTerm, $event) || (ctx.searchTerm = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function FormSectionControlsComponent_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.filterChange.emit($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(11, FormSectionControlsComponent_Conditional_11_Template, 2, 0, "button", 9);
+            i0.ɵɵconditionalCreate(14, FormSectionControlsComponent_Conditional_14_Template, 2, 0, "button", 12);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(12, FormSectionControlsComponent_Conditional_12_Template, 2, 2, "span", 10);
+            i0.ɵɵconditionalCreate(15, FormSectionControlsComponent_Conditional_15_Template, 2, 2, "span", 13);
+            i0.ɵɵconditionalCreate(16, FormSectionControlsComponent_Conditional_16_Template, 17, 0, "div", 14);
         } if (rf & 2) {
             i0.ɵɵproperty("disabled", ctx.allExpanded);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("disabled", ctx.allCollapsed);
-            i0.ɵɵadvance(3);
+            i0.ɵɵadvance(2);
+            i0.ɵɵclassProp("active", ctx.widthMode === "full-width");
+            i0.ɵɵproperty("title", ctx.widthMode === "full-width" ? "Switch to centered layout" : "Expand form to full width");
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.hasCustomOrder ? 6 : -1);
+            i0.ɵɵadvance(2);
             i0.ɵɵtwoWayProperty("ngModel", ctx.showEmptyFields);
             i0.ɵɵadvance(4);
             i0.ɵɵtwoWayProperty("ngModel", ctx.searchTerm);
             i0.ɵɵadvance(2);
-            i0.ɵɵconditional(ctx.searchTerm ? 11 : -1);
+            i0.ɵɵconditional(ctx.searchTerm ? 14 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.searchFilter && ctx.searchFilter.trim() ? 15 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.searchFilter && ctx.searchFilter.trim() ? 12 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent], styles: ["\n\n\n        button[_ngcontent-%COMP%] {\n            padding: 8px 14px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            background: white;\n            color: #374151;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s;\n            margin-right: 0;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            font-weight: 500;\n        }\n\n        button[_ngcontent-%COMP%]:hover {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\n            transform: translateY(-1px);\n            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n        }\n\n        button[_ngcontent-%COMP%]:active {\n            transform: translateY(0);\n        }\n\n        button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            margin-right: 0;\n            font-size: 14px;\n        }\n\n        .section-search[_ngcontent-%COMP%] {\n            padding: 8px 14px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            border-radius: 6px;\n            width: 240px;\n            transition: all 0.2s;\n            background: white;\n        }\n\n        .section-search[_ngcontent-%COMP%]:focus {\n            outline: none;\n            border-color: #667eea;\n            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n        }\n\n        .section-search[_ngcontent-%COMP%]::placeholder {\n            color: #9ca3af;\n            font-style: italic;\n        }\n\n        .section-count[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: #6b7280;\n            font-weight: 500;\n            padding: 6px 12px;\n            background: #f3f4f6;\n            border-radius: 6px;\n        }\n\n        .clear-search-btn[_ngcontent-%COMP%] {\n            position: absolute;\n            right: 6px;\n            top: 50%;\n            transform: translateY(-50%);\n            padding: 4px 8px;\n            min-width: unset;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 14px;\n            background: white;\n            border: 1px solid #d1d5db;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s;\n            font-size: 13px;\n            font-weight: 500;\n            color: #374151;\n            user-select: none;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%]:hover {\n            background: #f3f4f6;\n            border-color: #9ca3af;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n            cursor: pointer;\n            width: 16px;\n            height: 16px;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n            white-space: nowrap;\n        }"], changeDetection: 0 });
+            i0.ɵɵconditional(ctx.showResetConfirmDialog ? 16 : -1);
+        } }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent], styles: ["\n\n\n        button[_ngcontent-%COMP%] {\n            padding: 6px 12px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            background: white;\n            color: #374151;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s;\n            margin-right: 0;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 6px;\n            font-weight: 500;\n            height: 36px;\n            box-sizing: border-box;\n        }\n\n        button[_ngcontent-%COMP%]:hover {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\n            transform: translateY(-1px);\n            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n        }\n\n        button[_ngcontent-%COMP%]:active {\n            transform: translateY(0);\n        }\n\n        button.active[_ngcontent-%COMP%] {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\n        }\n\n        button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n            margin-right: 0;\n            font-size: 14px;\n        }\n\n        .section-search[_ngcontent-%COMP%] {\n            padding: 6px 14px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            border-radius: 6px;\n            width: 240px;\n            transition: all 0.2s;\n            background: white;\n            height: 36px;\n            box-sizing: border-box;\n        }\n\n        .section-search[_ngcontent-%COMP%]:focus {\n            outline: none;\n            border-color: #667eea;\n            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n        }\n\n        .section-search[_ngcontent-%COMP%]::placeholder {\n            color: #9ca3af;\n            font-style: italic;\n        }\n\n        .section-count[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: #6b7280;\n            font-weight: 500;\n            padding: 6px 12px;\n            background: #f3f4f6;\n            border-radius: 6px;\n        }\n\n        .clear-search-btn[_ngcontent-%COMP%] {\n            position: absolute;\n            right: 6px;\n            top: 50%;\n            transform: translateY(-50%);\n            padding: 4px 8px;\n            min-width: unset;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            padding: 6px 14px;\n            background: white;\n            border: 1px solid #d1d5db;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s;\n            font-size: 13px;\n            font-weight: 500;\n            color: #374151;\n            user-select: none;\n            height: 36px;\n            box-sizing: border-box;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%]:hover {\n            background: #f3f4f6;\n            border-color: #9ca3af;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n            cursor: pointer;\n            width: 16px;\n            height: 16px;\n        }\n\n        .show-empty-fields-toggle[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n            white-space: nowrap;\n        }\n\n        .custom-order-indicator[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 8px 6px 14px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border-radius: 6px;\n            font-size: 13px;\n            font-weight: 500;\n            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);\n            height: 36px;\n            box-sizing: border-box;\n        }\n\n        .custom-order-indicator[_ngcontent-%COMP%]   .indicator-label[_ngcontent-%COMP%] {\n            white-space: nowrap;\n        }\n\n        .custom-order-indicator[_ngcontent-%COMP%]   .reset-order-btn[_ngcontent-%COMP%] {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 20px;\n            height: 20px;\n            padding: 0;\n            margin-left: 4px;\n            background: rgba(255, 255, 255, 0.2);\n            border: none;\n            border-radius: 50%;\n            color: white;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            font-size: 10px;\n        }\n\n        .custom-order-indicator[_ngcontent-%COMP%]   .reset-order-btn[_ngcontent-%COMP%]:hover {\n            background: rgba(255, 255, 255, 0.4);\n            transform: scale(1.1);\n        }\n\n        .custom-order-indicator[_ngcontent-%COMP%]   .reset-order-btn[_ngcontent-%COMP%]:active {\n            transform: scale(0.95);\n        }\n\n        \n\n        .dialog-overlay[_ngcontent-%COMP%] {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(0, 0, 0, 0.5);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 10000;\n            animation: _ngcontent-%COMP%_fadeIn 0.15s ease;\n        }\n\n        @keyframes _ngcontent-%COMP%_fadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n        }\n\n        @keyframes _ngcontent-%COMP%_slideIn {\n            from {\n                opacity: 0;\n                transform: scale(0.95) translateY(-10px);\n            }\n            to {\n                opacity: 1;\n                transform: scale(1) translateY(0);\n            }\n        }\n\n        .confirm-dialog[_ngcontent-%COMP%] {\n            background: white;\n            border-radius: 12px;\n            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n            width: 380px;\n            max-width: 90vw;\n            overflow: hidden;\n            animation: _ngcontent-%COMP%_slideIn 0.2s ease;\n        }\n\n        .dialog-header[_ngcontent-%COMP%] {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 20px 24px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n        }\n\n        .dialog-header[_ngcontent-%COMP%]   .dialog-icon[_ngcontent-%COMP%] {\n            font-size: 20px;\n        }\n\n        .dialog-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n            margin: 0;\n            font-size: 18px;\n            font-weight: 600;\n        }\n\n        .dialog-body[_ngcontent-%COMP%] {\n            padding: 24px;\n        }\n\n        .dialog-body[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n            margin: 0 0 8px 0;\n            font-size: 15px;\n            color: #374151;\n            line-height: 1.5;\n        }\n\n        .dialog-body[_ngcontent-%COMP%]   .dialog-hint[_ngcontent-%COMP%] {\n            font-size: 13px;\n            color: #6b7280;\n            margin-bottom: 0;\n        }\n\n        .dialog-actions[_ngcontent-%COMP%] {\n            display: flex;\n            gap: 12px;\n            padding: 16px 24px 24px;\n        }\n\n        .dialog-btn[_ngcontent-%COMP%] {\n            flex: 1;\n            padding: 10px 16px;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n        }\n\n        .dialog-btn-primary[_ngcontent-%COMP%] {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border: none;\n        }\n\n        .dialog-btn-primary[_ngcontent-%COMP%]:hover {\n            transform: translateY(-1px);\n            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n        }\n\n        .dialog-btn-secondary[_ngcontent-%COMP%] {\n            background: white;\n            color: #374151;\n            border: 1px solid #d1d5db;\n        }\n\n        .dialog-btn-secondary[_ngcontent-%COMP%]:hover {\n            background: #f3f4f6;\n            border-color: #9ca3af;\n        }"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FormSectionControlsComponent, [{
         type: Component,
-        args: [{ selector: 'mj-form-section-controls[toolbar-additional-controls]', changeDetection: ChangeDetectionStrategy.OnPush, template: `
+        args: [{ standalone: false, selector: 'mj-form-section-controls[toolbar-additional-controls]', changeDetection: ChangeDetectionStrategy.OnPush, template: `
         <button kendoButton
                 (click)="expandAll.emit()"
                 [disabled]="allExpanded"
@@ -98,6 +169,25 @@ export class FormSectionControlsComponent {
                 title="Collapse all sections">
             <span class="fa-solid fa-angle-double-up"></span>
         </button>
+        <button kendoButton
+                (click)="toggleWidthMode()"
+                [class.active]="widthMode === 'full-width'"
+                [title]="widthMode === 'full-width' ? 'Switch to centered layout' : 'Expand form to full width'">
+            <span class="fa-solid fa-left-right"></span>
+        </button>
+        @if (hasCustomOrder) {
+            <div class="custom-order-indicator"
+                 title="Sections are in a custom order">
+                <span class="fa-solid fa-shuffle"></span>
+                <span class="indicator-label">Custom Order</span>
+                <button type="button"
+                        class="reset-order-btn"
+                        (click)="confirmResetOrder()"
+                        title="Reset to default order">
+                    <span class="fa-solid fa-xmark"></span>
+                </button>
+            </div>
+        }
         <label class="show-empty-fields-toggle">
             <input
                 type="checkbox"
@@ -126,7 +216,32 @@ export class FormSectionControlsComponent {
         @if (searchFilter && searchFilter.trim()) {
             <span class="section-count">{{visibleCount}}/{{totalCount}}</span>
         }
-    `, styles: ["\n        /* Note: positioning (display, gap, align-items, margin-left) is handled by parent toolbar CSS */\n\n        button {\n            padding: 8px 14px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            background: white;\n            color: #374151;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s;\n            margin-right: 0;\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            font-weight: 500;\n        }\n\n        button:hover {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\n            transform: translateY(-1px);\n            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n        }\n\n        button:active {\n            transform: translateY(0);\n        }\n\n        button i {\n            margin-right: 0;\n            font-size: 14px;\n        }\n\n        .section-search {\n            padding: 8px 14px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            border-radius: 6px;\n            width: 240px;\n            transition: all 0.2s;\n            background: white;\n        }\n\n        .section-search:focus {\n            outline: none;\n            border-color: #667eea;\n            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n        }\n\n        .section-search::placeholder {\n            color: #9ca3af;\n            font-style: italic;\n        }\n\n        .section-count {\n            font-size: 13px;\n            color: #6b7280;\n            font-weight: 500;\n            padding: 6px 12px;\n            background: #f3f4f6;\n            border-radius: 6px;\n        }\n\n        .clear-search-btn {\n            position: absolute;\n            right: 6px;\n            top: 50%;\n            transform: translateY(-50%);\n            padding: 4px 8px;\n            min-width: unset;\n        }\n\n        .show-empty-fields-toggle {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            padding: 8px 14px;\n            background: white;\n            border: 1px solid #d1d5db;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s;\n            font-size: 13px;\n            font-weight: 500;\n            color: #374151;\n            user-select: none;\n        }\n\n        .show-empty-fields-toggle:hover {\n            background: #f3f4f6;\n            border-color: #9ca3af;\n        }\n\n        .show-empty-fields-toggle input[type=\"checkbox\"] {\n            cursor: pointer;\n            width: 16px;\n            height: 16px;\n        }\n\n        .show-empty-fields-toggle span {\n            white-space: nowrap;\n        }\n    "] }]
+
+        <!-- Custom confirm dialog for reset order -->
+        @if (showResetConfirmDialog) {
+            <div class="dialog-overlay" (click)="cancelResetOrder()">
+                <div class="confirm-dialog" (click)="$event.stopPropagation()">
+                    <div class="dialog-header">
+                        <span class="fa-solid fa-shuffle dialog-icon"></span>
+                        <h3>Reset Section Order</h3>
+                    </div>
+                    <div class="dialog-body">
+                        <p>Are you sure you want to reset the section order to default?</p>
+                        <p class="dialog-hint">This will remove your custom arrangement.</p>
+                    </div>
+                    <div class="dialog-actions">
+                        <button type="button" class="dialog-btn dialog-btn-primary" (click)="doResetOrder()">
+                            <span class="fa-solid fa-check"></span>
+                            Reset Order
+                        </button>
+                        <button type="button" class="dialog-btn dialog-btn-secondary" (click)="cancelResetOrder()">
+                            Cancel
+                        </button>
+                    </div>
+                </div>
+            </div>
+        }
+    `, styles: ["\n        /* Note: positioning (display, gap, align-items, margin-left) is handled by parent toolbar CSS */\n\n        button {\n            padding: 6px 12px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            background: white;\n            color: #374151;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s;\n            margin-right: 0;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 6px;\n            font-weight: 500;\n            height: 36px;\n            box-sizing: border-box;\n        }\n\n        button:hover {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\n            transform: translateY(-1px);\n            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n        }\n\n        button:active {\n            transform: translateY(0);\n        }\n\n        button.active {\n            background: #667eea;\n            color: white;\n            border-color: #667eea;\n        }\n\n        button i {\n            margin-right: 0;\n            font-size: 14px;\n        }\n\n        .section-search {\n            padding: 6px 14px;\n            font-size: 13px;\n            border: 1px solid #d1d5db;\n            border-radius: 6px;\n            width: 240px;\n            transition: all 0.2s;\n            background: white;\n            height: 36px;\n            box-sizing: border-box;\n        }\n\n        .section-search:focus {\n            outline: none;\n            border-color: #667eea;\n            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n        }\n\n        .section-search::placeholder {\n            color: #9ca3af;\n            font-style: italic;\n        }\n\n        .section-count {\n            font-size: 13px;\n            color: #6b7280;\n            font-weight: 500;\n            padding: 6px 12px;\n            background: #f3f4f6;\n            border-radius: 6px;\n        }\n\n        .clear-search-btn {\n            position: absolute;\n            right: 6px;\n            top: 50%;\n            transform: translateY(-50%);\n            padding: 4px 8px;\n            min-width: unset;\n        }\n\n        .show-empty-fields-toggle {\n            display: inline-flex;\n            align-items: center;\n            gap: 8px;\n            padding: 6px 14px;\n            background: white;\n            border: 1px solid #d1d5db;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s;\n            font-size: 13px;\n            font-weight: 500;\n            color: #374151;\n            user-select: none;\n            height: 36px;\n            box-sizing: border-box;\n        }\n\n        .show-empty-fields-toggle:hover {\n            background: #f3f4f6;\n            border-color: #9ca3af;\n        }\n\n        .show-empty-fields-toggle input[type=\"checkbox\"] {\n            cursor: pointer;\n            width: 16px;\n            height: 16px;\n        }\n\n        .show-empty-fields-toggle span {\n            white-space: nowrap;\n        }\n\n        .custom-order-indicator {\n            display: inline-flex;\n            align-items: center;\n            gap: 6px;\n            padding: 6px 8px 6px 14px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border-radius: 6px;\n            font-size: 13px;\n            font-weight: 500;\n            box-shadow: 0 2px 4px rgba(102, 126, 234, 0.3);\n            height: 36px;\n            box-sizing: border-box;\n        }\n\n        .custom-order-indicator .indicator-label {\n            white-space: nowrap;\n        }\n\n        .custom-order-indicator .reset-order-btn {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 20px;\n            height: 20px;\n            padding: 0;\n            margin-left: 4px;\n            background: rgba(255, 255, 255, 0.2);\n            border: none;\n            border-radius: 50%;\n            color: white;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            font-size: 10px;\n        }\n\n        .custom-order-indicator .reset-order-btn:hover {\n            background: rgba(255, 255, 255, 0.4);\n            transform: scale(1.1);\n        }\n\n        .custom-order-indicator .reset-order-btn:active {\n            transform: scale(0.95);\n        }\n\n        /* Custom confirm dialog styles */\n        .dialog-overlay {\n            position: fixed;\n            top: 0;\n            left: 0;\n            right: 0;\n            bottom: 0;\n            background: rgba(0, 0, 0, 0.5);\n            display: flex;\n            align-items: center;\n            justify-content: center;\n            z-index: 10000;\n            animation: fadeIn 0.15s ease;\n        }\n\n        @keyframes fadeIn {\n            from { opacity: 0; }\n            to { opacity: 1; }\n        }\n\n        @keyframes slideIn {\n            from {\n                opacity: 0;\n                transform: scale(0.95) translateY(-10px);\n            }\n            to {\n                opacity: 1;\n                transform: scale(1) translateY(0);\n            }\n        }\n\n        .confirm-dialog {\n            background: white;\n            border-radius: 12px;\n            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);\n            width: 380px;\n            max-width: 90vw;\n            overflow: hidden;\n            animation: slideIn 0.2s ease;\n        }\n\n        .dialog-header {\n            display: flex;\n            align-items: center;\n            gap: 12px;\n            padding: 20px 24px;\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n        }\n\n        .dialog-header .dialog-icon {\n            font-size: 20px;\n        }\n\n        .dialog-header h3 {\n            margin: 0;\n            font-size: 18px;\n            font-weight: 600;\n        }\n\n        .dialog-body {\n            padding: 24px;\n        }\n\n        .dialog-body p {\n            margin: 0 0 8px 0;\n            font-size: 15px;\n            color: #374151;\n            line-height: 1.5;\n        }\n\n        .dialog-body .dialog-hint {\n            font-size: 13px;\n            color: #6b7280;\n            margin-bottom: 0;\n        }\n\n        .dialog-actions {\n            display: flex;\n            gap: 12px;\n            padding: 16px 24px 24px;\n        }\n\n        .dialog-btn {\n            flex: 1;\n            padding: 10px 16px;\n            border-radius: 8px;\n            font-size: 14px;\n            font-weight: 500;\n            cursor: pointer;\n            transition: all 0.2s;\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            gap: 8px;\n        }\n\n        .dialog-btn-primary {\n            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n            color: white;\n            border: none;\n        }\n\n        .dialog-btn-primary:hover {\n            transform: translateY(-1px);\n            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);\n        }\n\n        .dialog-btn-secondary {\n            background: white;\n            color: #374151;\n            border: 1px solid #d1d5db;\n        }\n\n        .dialog-btn-secondary:hover {\n            background: #f3f4f6;\n            border-color: #9ca3af;\n        }\n    "] }]
     }], null, { visibleCount: [{
             type: Input
         }], totalCount: [{
@@ -137,6 +252,10 @@ export class FormSectionControlsComponent {
             type: Input
         }], showEmptyFields: [{
             type: Input
+        }], widthMode: [{
+            type: Input
+        }], hasCustomOrder: [{
+            type: Input
         }], expandAll: [{
             type: Output
         }], collapseAll: [{
@@ -145,6 +264,10 @@ export class FormSectionControlsComponent {
             type: Output
         }], showEmptyFieldsChange: [{
             type: Output
+        }], widthModeChange: [{
+            type: Output
+        }], resetOrder: [{
+            type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormSectionControlsComponent, { className: "FormSectionControlsComponent", filePath: "src/lib/form-section-controls.component.ts", lineNumber: 159 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FormSectionControlsComponent, { className: "FormSectionControlsComponent", filePath: "src/lib/form-section-controls.component.ts", lineNumber: 384 }); })();
 //# sourceMappingURL=form-section-controls.component.js.map

package/dist/lib/form-section-controls.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-section-controls.component.js","sourceRoot":"","sources":["../../src/lib/form-section-controls.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,EAAE,MAAM,EAAE,uBAAuB,EAAE,MAAM,eAAe,CAAC;;;;;;;IAsChF,kCAIyB;IADrB,iMAAS,oBAAa,KAAC;IAEvB,2BAAuC;IAC3C,iBAAS;;;IAIb,gCAA4B;IAAA,YAA+B;IAAA,iBAAO;;;IAAtC,cAA+B;IAA/B,0EAA+B;;AA9CvE;;;GAGG;AAyJH,MAAM,OAAO,4BAA4B;IAC5B,YAAY,GAAW,CAAC,CAAC;IACzB,UAAU,GAAW,CAAC,CAAC;IACvB,YAAY,GAAW,EAAE,CAAC;IAC1B,aAAa,GAAW,CAAC,CAAC;IAC1B,eAAe,GAAY,KAAK,CAAC;IAChC,SAAS,GAAG,IAAI,YAAY,EAAQ,CAAC;IACrC,WAAW,GAAG,IAAI,YAAY,EAAQ,CAAC;IACvC,YAAY,GAAG,IAAI,YAAY,EAAU,CAAC;IAC1C,qBAAqB,GAAG,IAAI,YAAY,EAAW,CAAC;IAE9D,UAAU,GAAG,EAAE,CAAC;IAEhB,IAAI,WAAW;QACX,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,KAAK,IAAI,CAAC,UAAU,CAAC;IACzE,CAAC;IAED,IAAI,YAAY;QACZ,OAAO,IAAI,CAAC,UAAU,GAAG,CAAC,IAAI,IAAI,CAAC,aAAa,KAAK,CAAC,CAAC;IAC3D,CAAC;IAED,WAAW;QACP,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;QACrB,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IAC/B,CAAC;sHAxBQ,4BAA4B;6DAA5B,4BAA4B;;YApJjC,iCAGoC;YAF5B,+IAAS,oBAAgB,KAAC;YAG9B,0BAAmD;YACvD,iBAAS;YACT,iCAGsC;YAF9B,+IAAS,sBAAkB,KAAC;YAGhC,0BAAiD;YACrD,iBAAS;YAEL,AADJ,gCAAwC,eAIqB;YADrD,2QAA6B;YAC7B,oKAAiB,sCAAkC,KAAC;YAHxD,iBAGyD;YACzD,4BAAM;YAAA,iCAAiB;YAC3B,AAD2B,iBAAO,EAC1B;YAEJ,AADJ,8BAAiC,kBAOZ;YAFb,iQAAwB;YACxB,oKAAiB,6BAAyB,KAAC;YAL/C,iBAMiB;YACjB,0FAAkB;YAStB,iBAAM;YACN,yFAA2C;;YAnCnC,0CAAwB;YAMxB,eAAyB;YAAzB,2CAAyB;YAOzB,eAA6B;YAA7B,mDAA6B;YAS7B,eAAwB;YAAxB,8CAAwB;YAG5B,eAQC;YARD,0CAQC;YAEL,cAEC;YAFD,uEAEC;;;iFA6GI,4BAA4B;cAxJxC,SAAS;2BACI,uDAAuD,mBAChD,uBAAuB,CAAC,MAAM,YACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAyCT;gBA6GQ,YAAY;kBAApB,KAAK;YACG,UAAU;kBAAlB,KAAK;YACG,YAAY;kBAApB,KAAK;YACG,aAAa;kBAArB,KAAK;YACG,eAAe;kBAAvB,KAAK;YACI,SAAS;kBAAlB,MAAM;YACG,WAAW;kBAApB,MAAM;YACG,YAAY;kBAArB,MAAM;YACG,qBAAqB;kBAA9B,MAAM;;kFATE,4BAA4B"}
+{"version":3,"file":"form-section-controls.component.js","sourceRoot":"","sources":["../../src/lib/form-section-controls.component.ts"],"names":[],"mappings":"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"}

package/dist/lib/form-state.interface.d.ts

@@ -4,8 +4,6 @@
 export interface FormSectionState {
     /** Whether the section is currently expanded */
     isExpanded: boolean;
-    /** Width mode for the section panel */
-    widthMode: 'normal' | 'full-width';
 }
 /**
  * Complete form state for an entity, persisted to User Settings
@@ -15,6 +13,10 @@ export interface FormState {
     sections: Record<string, FormSectionState>;
     /** Whether to show fields with empty values */
     showEmptyFields: boolean;
+    /** Form width mode - 'centered' uses max-width constraint, 'full-width' uses all available space */
+    widthMode: 'centered' | 'full-width';
+    /** Custom section ordering - array of sectionKeys in user's preferred order */
+    sectionOrder?: string[];
 }
 /**
  * Default state for a new form (when no saved state exists)

package/dist/lib/form-state.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-state.interface.d.ts","sourceRoot":"","sources":["../../src/lib/form-state.interface.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC7B,gDAAgD;IAChD,UAAU,EAAE,OAAO,CAAC;IACpB,uCAAuC;IACvC,SAAS,EAAE,QAAQ,GAAG,YAAY,CAAC;CACtC;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACtB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC3C,+CAA+C;IAC/C,eAAe,EAAE,OAAO,CAAC;CAC5B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAGhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,gBAGnC,CAAC"}
+{"version":3,"file":"form-state.interface.d.ts","sourceRoot":"","sources":["../../src/lib/form-state.interface.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC7B,gDAAgD;IAChD,UAAU,EAAE,OAAO,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACtB,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,gBAAgB,CAAC,CAAC;IAC3C,+CAA+C;IAC/C,eAAe,EAAE,OAAO,CAAC;IACzB,oGAAoG;IACpG,SAAS,EAAE,UAAU,GAAG,YAAY,CAAC;IACrC,+EAA+E;IAC/E,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;CAC3B;AAED;;GAEG;AACH,eAAO,MAAM,kBAAkB,EAAE,SAIhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,qBAAqB,EAAE,gBAEnC,CAAC"}

package/dist/lib/form-state.interface.js

@@ -3,13 +3,13 @@
  */
 export const DEFAULT_FORM_STATE = {
     sections: {},
-    showEmptyFields: false
+    showEmptyFields: false,
+    widthMode: 'centered'
 };
 /**
  * Default state for a new section (when section not yet in saved state)
  */
 export const DEFAULT_SECTION_STATE = {
-    isExpanded: true,
-    widthMode: 'normal'
+    isExpanded: true
 };
 //# sourceMappingURL=form-state.interface.js.map

package/dist/lib/form-state.interface.js.map

@@ -1 +1 @@
-{"version":3,"file":"form-state.interface.js","sourceRoot":"","sources":["../../src/lib/form-state.interface.ts"],"names":[],"mappings":"AAoBA;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAc;IACzC,QAAQ,EAAE,EAAE;IACZ,eAAe,EAAE,KAAK;CACzB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAqB;IACnD,UAAU,EAAE,IAAI;IAChB,SAAS,EAAE,QAAQ;CACtB,CAAC"}
+{"version":3,"file":"form-state.interface.js","sourceRoot":"","sources":["../../src/lib/form-state.interface.ts"],"names":[],"mappings":"AAsBA;;GAEG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAc;IACzC,QAAQ,EAAE,EAAE;IACZ,eAAe,EAAE,KAAK;IACtB,SAAS,EAAE,UAAU;CACxB,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAqB;IACnD,UAAU,EAAE,IAAI;CACnB,CAAC"}

package/dist/lib/form-state.service.d.ts

@@ -9,8 +9,6 @@ import * as i0 from "@angular/core";
 export declare class FormStateService {
     /** Cache of BehaviorSubjects per entity name */
     private stateCache;
-    /** Debounce timeouts per entity name */
-    private saveTimeouts;
     /** Track which entities have been loaded from DB */
     private loadedEntities;
     /** Track loading promises to prevent duplicate loads */
@@ -64,25 +62,22 @@ export declare class FormStateService {
      */
     toggleSection(entityName: string, sectionKey: string): void;
     /**
-     * Get section width mode.
+     * Get form width mode.
      * @param entityName The entity name
-     * @param sectionKey The section key
-     * @returns Width mode ('normal' or 'full-width')
+     * @returns Width mode ('centered' or 'full-width')
      */
-    getSectionWidthMode(entityName: string, sectionKey: string): 'normal' | 'full-width';
+    getWidthMode(entityName: string): 'centered' | 'full-width';
     /**
-     * Set section width mode.
+     * Set form width mode.
      * @param entityName The entity name
-     * @param sectionKey The section key
      * @param widthMode The width mode
      */
-    setSectionWidthMode(entityName: string, sectionKey: string, widthMode: 'normal' | 'full-width'): void;
+    setWidthMode(entityName: string, widthMode: 'centered' | 'full-width'): void;
     /**
-     * Toggle section width mode between normal and full-width.
+     * Toggle form width mode between centered and full-width.
      * @param entityName The entity name
-     * @param sectionKey The section key
      */
-    toggleSectionWidthMode(entityName: string, sectionKey: string): void;
+    toggleWidthMode(entityName: string): void;
     /**
      * Get showEmptyFields preference for an entity.
      * @param entityName The entity name
@@ -108,15 +103,33 @@ export declare class FormStateService {
      */
     collapseAllSections(entityName: string, sectionKeys: string[]): void;
     /**
-     * Reset all panel widths to normal for an entity.
+     * Reset state to defaults for an entity.
      * @param entityName The entity name
      */
-    resetAllPanelWidths(entityName: string): void;
+    resetToDefaults(entityName: string): void;
     /**
-     * Reset state to defaults for an entity.
+     * Get the custom section order for an entity.
      * @param entityName The entity name
+     * @returns Array of section keys in user's preferred order, or undefined if using default order
      */
-    resetToDefaults(entityName: string): void;
+    getSectionOrder(entityName: string): string[] | undefined;
+    /**
+     * Set the custom section order for an entity.
+     * @param entityName The entity name
+     * @param sectionOrder Array of section keys in the desired order
+     */
+    setSectionOrder(entityName: string, sectionOrder: string[]): void;
+    /**
+     * Reset the section order to default (removes custom ordering).
+     * @param entityName The entity name
+     */
+    resetSectionOrder(entityName: string): void;
+    /**
+     * Check if a custom section order exists for an entity.
+     * @param entityName The entity name
+     * @returns True if custom order exists
+     */
+    hasCustomSectionOrder(entityName: string): boolean;
     /**
      * Get the count of expanded sections.
      * @param entityName The entity name
@@ -141,13 +154,9 @@ export declare class FormStateService {
      */
     private loadState;
     /**
-     * Debounced save to avoid too many writes.
-     */
-    private debouncedSave;
-    /**
-     * Save state to User Settings using UserInfoEngine for cached lookup.
+     * Queue a debounced save using UserInfoEngine's centralized debounce.
      */
-    private saveState;
+    private queueSave;
     static ɵfac: i0.ɵɵFactoryDeclaration<FormStateService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<FormStateService>;
 }

package/dist/lib/form-state.service.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-state.service.d.ts","sourceRoot":"","sources":["../../src/lib/form-state.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,UAAU,EAAE,MAAM,MAAM,CAAC;AAGnD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAA6C,MAAM,wBAAwB,CAAC;;AAKhH;;;;GAIG;AACH,qBAGa,gBAAgB;IACzB,gDAAgD;IAChD,OAAO,CAAC,UAAU,CAAiD;IAEnE,wCAAwC;IACxC,OAAO,CAAC,YAAY,CAAoD;IAExE,oDAAoD;IACpD,OAAO,CAAC,cAAc,CAAqB;IAE3C,wDAAwD;IACxD,OAAO,CAAC,eAAe,CAAoC;IAE3D,OAAO,CAAC,QAAQ,CAAkB;IAElC;;;;;OAKG;IACH,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,CAAC,SAAS,CAAC;IAIpD;;;;OAIG;IACH,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS;IAI9C;;;;OAIG;IACG,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC;IA0B7D;;;;;OAKG;IACH,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,gBAAgB;IAKzE;;;;;;OAMG;IACH,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO;IAU7F;;;;;OAKG;IACH,kBAAkB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,GAAG,IAAI;IAIrF;;;;OAIG;IACH,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI;IAK3D;;;;;OAKG;IACH,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,QAAQ,GAAG,YAAY;IAIpF;;;;;OAKG;IACH,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,GAAG,YAAY,GAAG,IAAI;IAIrG;;;;OAIG;IACH,sBAAsB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI;IAKpE;;;;OAIG;IACH,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO;IAI/C;;;;OAIG;IACH,kBAAkB,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI;IAW3D;;;;OAIG;IACH,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,IAAI;IAiBlE;;;;OAIG;IACH,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,IAAI;IAiBpE;;;OAGG;IACH,mBAAmB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAa7C;;;OAGG;IACH,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAMzC;;;;;OAKG;IACH,gBAAgB,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,MAAM;IAUnE;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAoB1B;;OAEG;IACH,OAAO,CAAC,aAAa;IAIrB;;OAEG;YACW,SAAS;IA6BvB;;OAEG;IACH,OAAO,CAAC,aAAa;IAcrB;;OAEG;YACW,SAAS;yCA7Vd,gBAAgB;6CAAhB,gBAAgB;CAyX5B"}
+{"version":3,"file":"form-state.service.d.ts","sourceRoot":"","sources":["../../src/lib/form-state.service.ts"],"names":[],"mappings":"AACA,OAAO,EAAmB,UAAU,EAAE,MAAM,MAAM,CAAC;AAGnD,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAA6C,MAAM,wBAAwB,CAAC;;AAIhH;;;;GAIG;AACH,qBAGa,gBAAgB;IACzB,gDAAgD;IAChD,OAAO,CAAC,UAAU,CAAiD;IAEnE,oDAAoD;IACpD,OAAO,CAAC,cAAc,CAAqB;IAE3C,wDAAwD;IACxD,OAAO,CAAC,eAAe,CAAoC;IAE3D,OAAO,CAAC,QAAQ,CAAkB;IAElC;;;;;OAKG;IACH,SAAS,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,CAAC,SAAS,CAAC;IAIpD;;;;OAIG;IACH,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS;IAI9C;;;;OAIG;IACG,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,CAAC;IA0B7D;;;;;OAKG;IACH,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,gBAAgB;IAKzE;;;;;;OAMG;IACH,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,eAAe,CAAC,EAAE,OAAO,GAAG,OAAO;IAU7F;;;;;OAKG;IACH,kBAAkB,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,GAAG,IAAI;IAIrF;;;;OAIG;IACH,aAAa,CAAC,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,IAAI;IAK3D;;;;OAIG;IACH,YAAY,CAAC,UAAU,EAAE,MAAM,GAAG,UAAU,GAAG,YAAY;IAI3D;;;;OAIG;IACH,YAAY,CAAC,UAAU,EAAE,MAAM,EAAE,SAAS,EAAE,UAAU,GAAG,YAAY,GAAG,IAAI;IAW5E;;;OAGG;IACH,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAKzC;;;;OAIG;IACH,kBAAkB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO;IAI/C;;;;OAIG;IACH,kBAAkB,CAAC,UAAU,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI;IAW3D;;;;OAIG;IACH,iBAAiB,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,IAAI;IAiBlE;;;;OAIG;IACH,mBAAmB,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,IAAI;IAiBpE;;;OAGG;IACH,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAMzC;;;;OAIG;IACH,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,SAAS;IAIzD;;;;OAIG;IACH,eAAe,CAAC,UAAU,EAAE,MAAM,EAAE,YAAY,EAAE,MAAM,EAAE,GAAG,IAAI;IAWjE;;;OAGG;IACH,iBAAiB,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI;IAQ3C;;;;OAIG;IACH,qBAAqB,CAAC,UAAU,EAAE,MAAM,GAAG,OAAO;IAKlD;;;;;OAKG;IACH,gBAAgB,CAAC,UAAU,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,GAAG,MAAM;IAUnE;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAS1B;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAoB1B;;OAEG;IACH,OAAO,CAAC,aAAa;IAIrB;;OAEG;YACW,SAAS;IA6BvB;;OAEG;IACH,OAAO,CAAC,SAAS;yCA3WR,gBAAgB;6CAAhB,gBAAgB;CAqX5B"}