@memberjunction/ng-base-forms 6.1.0-edge.2 → 6.1.0-edge.4

package/dist/lib/section-manager/section-manager.component.js

@@ -1,28 +1,32 @@
 import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy, ChangeDetectorRef, inject } from '@angular/core';
 import * as i0 from "@angular/core";
 const _forTrack0 = ($index, $item) => $item.SectionKey;
-function MjSectionManagerComponent_Conditional_0_For_10_Template(rf, ctx) { if (rf & 1) {
+function MjSectionManagerComponent_Conditional_0_Conditional_9_For_3_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 13);
-    i0.ɵɵelement(2, "i", 14);
-    i0.ɵɵelementStart(3, "span", 15);
+    i0.ɵɵelementStart(0, "div", 13)(1, "div", 16);
+    i0.ɵɵelement(2, "i", 17);
+    i0.ɵɵelementStart(3, "span", 18);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(5, "span");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 16)(8, "button", 17);
-    i0.ɵɵlistener("click", function MjSectionManagerComponent_Conditional_0_For_10_Template_button_click_8_listener() { const ɵ$index_19_r4 = i0.ɵɵrestoreView(_r3).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnMoveUp(ɵ$index_19_r4)); });
-    i0.ɵɵelement(9, "i", 18);
+    i0.ɵɵelementStart(7, "div", 19)(8, "button", 20);
+    i0.ɵɵlistener("click", function MjSectionManagerComponent_Conditional_0_Conditional_9_For_3_Template_button_click_8_listener() { const ɵ$index_23_r4 = i0.ɵɵrestoreView(_r3).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoveGroupUp(ctx_r1.FirstClassSections, ɵ$index_23_r4)); });
+    i0.ɵɵelement(9, "i", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "button", 19);
-    i0.ɵɵlistener("click", function MjSectionManagerComponent_Conditional_0_For_10_Template_button_click_10_listener() { const ɵ$index_19_r4 = i0.ɵɵrestoreView(_r3).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnMoveDown(ɵ$index_19_r4)); });
-    i0.ɵɵelement(11, "i", 20);
+    i0.ɵɵelementStart(10, "button", 22);
+    i0.ɵɵlistener("click", function MjSectionManagerComponent_Conditional_0_Conditional_9_For_3_Template_button_click_10_listener() { const ɵ$index_23_r4 = i0.ɵɵrestoreView(_r3).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoveGroupDown(ctx_r1.FirstClassSections, ɵ$index_23_r4)); });
+    i0.ɵɵelement(11, "i", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 24);
+    i0.ɵɵlistener("click", function MjSectionManagerComponent_Conditional_0_Conditional_9_For_3_Template_button_click_12_listener() { const section_r5 = i0.ɵɵrestoreView(_r3).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoveToMore(section_r5)); });
+    i0.ɵɵelement(13, "i", 25);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const section_r5 = ctx.$implicit;
-    const ɵ$index_19_r4 = ctx.$index;
-    const ctx_r1 = i0.ɵɵnextContext(2);
+    const ɵ$index_23_r4 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
     i0.ɵɵclassMap(section_r5.Icon);
     i0.ɵɵadvance(2);
@@ -32,9 +36,119 @@ function MjSectionManagerComponent_Conditional_0_For_10_Template(rf, ctx) { if (
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.GetVariantLabel(section_r5.Variant), " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ɵ$index_19_r4 === 0);
+    i0.ɵɵproperty("disabled", ɵ$index_23_r4 === 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ɵ$index_23_r4 === ctx_r1.FirstClassSections.length - 1);
+} }
+function MjSectionManagerComponent_Conditional_0_Conditional_9_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵtext(1, "Nothing on the form yet.");
+    i0.ɵɵelementEnd();
+} }
+function MjSectionManagerComponent_Conditional_0_Conditional_9_For_8_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 16);
+    i0.ɵɵelement(2, "i", 17);
+    i0.ɵɵelementStart(3, "span", 18);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span", 26);
+    i0.ɵɵtext(6, "More");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 19)(8, "button", 20);
+    i0.ɵɵlistener("click", function MjSectionManagerComponent_Conditional_0_Conditional_9_For_8_Template_button_click_8_listener() { const ɵ$index_57_r7 = i0.ɵɵrestoreView(_r6).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoveGroupUp(ctx_r1.MoreSections, ɵ$index_57_r7)); });
+    i0.ɵɵelement(9, "i", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 22);
+    i0.ɵɵlistener("click", function MjSectionManagerComponent_Conditional_0_Conditional_9_For_8_Template_button_click_10_listener() { const ɵ$index_57_r7 = i0.ɵɵrestoreView(_r6).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoveGroupDown(ctx_r1.MoreSections, ɵ$index_57_r7)); });
+    i0.ɵɵelement(11, "i", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 27);
+    i0.ɵɵlistener("click", function MjSectionManagerComponent_Conditional_0_Conditional_9_For_8_Template_button_click_12_listener() { const section_r8 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoveToForm(section_r8)); });
+    i0.ɵɵelement(13, "i", 28);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const section_r8 = ctx.$implicit;
+    const ɵ$index_57_r7 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(section_r8.Icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(section_r8.SectionName);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("disabled", ɵ$index_57_r7 === 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ɵ$index_57_r7 === ctx_r1.MoreSections.length - 1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("disabled", ɵ$index_19_r4 === ctx_r1.OrderedSections.length - 1);
+    i0.ɵɵproperty("disabled", ctx_r1.IsLockedInMore(section_r8))("title", ctx_r1.IsLockedInMore(section_r8) ? "Always in More" : "Move to form");
+} }
+function MjSectionManagerComponent_Conditional_0_Conditional_9_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 14);
+    i0.ɵɵtext(1, "Nothing in More.");
+    i0.ɵɵelementEnd();
+} }
+function MjSectionManagerComponent_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵtext(1, "On the form");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(2, MjSectionManagerComponent_Conditional_0_Conditional_9_For_3_Template, 14, 9, "div", 13, _forTrack0);
+    i0.ɵɵconditionalCreate(4, MjSectionManagerComponent_Conditional_0_Conditional_9_Conditional_4_Template, 2, 0, "div", 14);
+    i0.ɵɵelementStart(5, "div", 12);
+    i0.ɵɵtext(6, "More");
+    i0.ɵɵelementEnd();
+    i0.ɵɵrepeaterCreate(7, MjSectionManagerComponent_Conditional_0_Conditional_9_For_8_Template, 14, 7, "div", 15, _forTrack0);
+    i0.ɵɵconditionalCreate(9, MjSectionManagerComponent_Conditional_0_Conditional_9_Conditional_9_Template, 2, 0, "div", 14);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.FirstClassSections);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.FirstClassSections.length === 0 ? 4 : -1);
+    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r1.MoreSections);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.MoreSections.length === 0 ? 9 : -1);
+} }
+function MjSectionManagerComponent_Conditional_0_Conditional_10_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 13)(1, "div", 16);
+    i0.ɵɵelement(2, "i", 17);
+    i0.ɵɵelementStart(3, "span", 18);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "span");
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 19)(8, "button", 20);
+    i0.ɵɵlistener("click", function MjSectionManagerComponent_Conditional_0_Conditional_10_For_1_Template_button_click_8_listener() { const ɵ$index_89_r10 = i0.ɵɵrestoreView(_r9).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoveUp(ɵ$index_89_r10)); });
+    i0.ɵɵelement(9, "i", 21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(10, "button", 22);
+    i0.ɵɵlistener("click", function MjSectionManagerComponent_Conditional_0_Conditional_10_For_1_Template_button_click_10_listener() { const ɵ$index_89_r10 = i0.ɵɵrestoreView(_r9).$index; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.OnMoveDown(ɵ$index_89_r10)); });
+    i0.ɵɵelement(11, "i", 23);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const section_r11 = ctx.$implicit;
+    const ɵ$index_89_r10 = ctx.$index;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(2);
+    i0.ɵɵclassMap(section_r11.Icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(section_r11.SectionName);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(i0.ɵɵinterpolate1("mj-sm-row-badge mj-sm-row-badge--", section_r11.Variant));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.GetVariantLabel(section_r11.Variant), " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ɵ$index_89_r10 === 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ɵ$index_89_r10 === ctx_r1.OrderedSections.length - 1);
+} }
+function MjSectionManagerComponent_Conditional_0_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, MjSectionManagerComponent_Conditional_0_Conditional_10_For_1_Template, 12, 9, "div", 13, _forTrack0);
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵrepeater(ctx_r1.OrderedSections);
 } }
 function MjSectionManagerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
@@ -51,17 +165,17 @@ function MjSectionManagerComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelement(7, "i", 7);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(8, "div", 8);
-    i0.ɵɵrepeaterCreate(9, MjSectionManagerComponent_Conditional_0_For_10_Template, 12, 9, "div", 9, _forTrack0);
+    i0.ɵɵconditionalCreate(9, MjSectionManagerComponent_Conditional_0_Conditional_9_Template, 10, 2)(10, MjSectionManagerComponent_Conditional_0_Conditional_10_Template, 2, 0);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 10)(12, "button", 11);
+    i0.ɵɵelementStart(11, "div", 9)(12, "button", 10);
     i0.ɵɵlistener("click", function MjSectionManagerComponent_Conditional_0_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnReset()); });
-    i0.ɵɵelement(13, "i", 12);
-    i0.ɵɵtext(14, " Reset to Default Order ");
+    i0.ɵɵelement(13, "i", 11);
+    i0.ɵɵtext(14, " Reset to defaults ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(9);
-    i0.ɵɵrepeater(ctx_r1.OrderedSections);
+    i0.ɵɵconditional(ctx_r1.HasMoreGroup ? 9 : 10);
 } }
 /**
  * Slide-in drawer for managing section order.
@@ -87,21 +201,35 @@ export class MjSectionManagerComponent {
     Sections = [];
     /** Current section order (array of section keys) */
     SectionOrder = [];
+    /** Section keys currently in More. Empty keeps a single list. */
+    MoreSectionKeys = [];
+    /** Keys that cannot leave More (System Metadata). */
+    LockedMoreKeys = [];
     /** Whether the drawer is visible */
     Visible = false;
     /** Emits the new section order when the user reorders */
     SectionOrderChange = new EventEmitter();
+    /** Emits when the user moves a section in or out of More. */
+    MembershipChange = new EventEmitter();
     /** Emits when the drawer is closed */
     Closed = new EventEmitter();
     /** Emits when the user resets to default order */
     ResetRequested = new EventEmitter();
     /** Ordered list of sections for display */
     OrderedSections = [];
+    FirstClassSections = [];
+    MoreSections = [];
     ngOnChanges(changes) {
-        if (changes['Sections'] || changes['SectionOrder']) {
+        if (changes['Sections'] || changes['SectionOrder'] || changes['MoreSectionKeys'] || changes['LockedMoreKeys']) {
             this.RebuildOrderedSections();
         }
     }
+    get HasMoreGroup() {
+        return this.MoreSections.length > 0 || this.MoreSectionKeys.length > 0;
+    }
+    IsLockedInMore(section) {
+        return this.LockedMoreKeys.includes(section.SectionKey);
+    }
     OnClose() {
         this.Closed.emit();
     }
@@ -127,6 +255,45 @@ export class MjSectionManagerComponent {
         this.SectionOrderChange.emit(newOrder);
         this.ApplyOrder(newOrder);
     }
+    OnMoveGroupUp(list, index) {
+        if (index <= 0)
+            return;
+        this.emitReorderedGroup(list, index, index - 1);
+    }
+    OnMoveGroupDown(list, index) {
+        if (index >= list.length - 1)
+            return;
+        this.emitReorderedGroup(list, index, index + 1);
+    }
+    OnMoveToMore(section) {
+        if (this.MoreSectionKeys.includes(section.SectionKey))
+            return;
+        const more = [...this.MoreSectionKeys, section.SectionKey];
+        const firstClass = this.FirstClassSections
+            .map((s) => s.SectionKey)
+            .filter((key) => key !== section.SectionKey);
+        this.MembershipChange.emit({ moreSectionKeys: more, firstClassSectionKeys: firstClass });
+    }
+    OnMoveToForm(section) {
+        if (this.IsLockedInMore(section))
+            return;
+        const more = this.MoreSectionKeys.filter((key) => key !== section.SectionKey);
+        const firstClass = [
+            ...this.FirstClassSections.map((s) => s.SectionKey),
+            section.SectionKey,
+        ];
+        this.MembershipChange.emit({ moreSectionKeys: more, firstClassSectionKeys: firstClass });
+    }
+    emitReorderedGroup(list, from, to) {
+        const keys = list.map((s) => s.SectionKey);
+        [keys[from], keys[to]] = [keys[to], keys[from]];
+        const other = list === this.FirstClassSections ? this.MoreSections : this.FirstClassSections;
+        const combined = list === this.FirstClassSections
+            ? [...keys, ...other.map((s) => s.SectionKey)]
+            : [...other.map((s) => s.SectionKey), ...keys];
+        this.SectionOrderChange.emit(combined);
+        this.ApplyOrder(combined);
+    }
     OnReset() {
         this.ResetRequested.emit();
     }
@@ -169,6 +336,9 @@ export class MjSectionManagerComponent {
             ordered.push(section);
         }
         this.OrderedSections = ordered;
+        const moreSet = new Set(this.MoreSectionKeys);
+        this.FirstClassSections = ordered.filter((s) => !moreSet.has(s.SectionKey));
+        this.MoreSections = ordered.filter((s) => moreSet.has(s.SectionKey));
         this.cdr.markForCheck();
     }
     ApplyOrder(newOrder) {
@@ -179,30 +349,39 @@ export class MjSectionManagerComponent {
         this.OrderedSections = newOrder
             .map(key => sectionMap.get(key))
             .filter((s) => s !== undefined);
+        const moreSet = new Set(this.MoreSectionKeys);
+        this.FirstClassSections = this.OrderedSections.filter((s) => !moreSet.has(s.SectionKey));
+        this.MoreSections = this.OrderedSections.filter((s) => moreSet.has(s.SectionKey));
         this.cdr.markForCheck();
     }
     static ɵfac = function MjSectionManagerComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MjSectionManagerComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjSectionManagerComponent, selectors: [["mj-section-manager"]], inputs: { Sections: "Sections", SectionOrder: "SectionOrder", Visible: "Visible" }, outputs: { SectionOrderChange: "SectionOrderChange", Closed: "Closed", ResetRequested: "ResetRequested" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[1, "mj-sm-overlay"], [1, "mj-sm-overlay", 3, "click"], [1, "mj-sm-drawer", 3, "click"], [1, "mj-sm-header"], [1, "mj-sm-title"], [1, "fa-solid", "fa-bars-staggered"], ["title", "Close", 1, "mj-sm-close", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "mj-sm-list"], [1, "mj-sm-row"], [1, "mj-sm-footer"], [1, "mj-sm-reset", 3, "click"], [1, "fa-solid", "fa-arrow-rotate-left"], [1, "mj-sm-row-info"], [1, "mj-sm-row-icon"], [1, "mj-sm-row-name"], [1, "mj-sm-row-actions"], ["title", "Move up", 1, "mj-sm-arrow", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["title", "Move down", 1, "mj-sm-arrow", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"]], template: function MjSectionManagerComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, MjSectionManagerComponent_Conditional_0_Template, 15, 0, "div", 0);
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MjSectionManagerComponent, selectors: [["mj-section-manager"]], inputs: { Sections: "Sections", SectionOrder: "SectionOrder", MoreSectionKeys: "MoreSectionKeys", LockedMoreKeys: "LockedMoreKeys", Visible: "Visible" }, outputs: { SectionOrderChange: "SectionOrderChange", MembershipChange: "MembershipChange", Closed: "Closed", ResetRequested: "ResetRequested" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 1, vars: 1, consts: [[1, "mj-sm-overlay"], [1, "mj-sm-overlay", 3, "click"], [1, "mj-sm-drawer", 3, "click"], [1, "mj-sm-header"], [1, "mj-sm-title"], [1, "fa-solid", "fa-bars-staggered"], ["title", "Close", 1, "mj-sm-close", 3, "click"], [1, "fa-solid", "fa-xmark"], [1, "mj-sm-list"], [1, "mj-sm-footer"], [1, "mj-sm-reset", 3, "click"], [1, "fa-solid", "fa-arrow-rotate-left"], [1, "mj-sm-group-label"], [1, "mj-sm-row"], [1, "mj-sm-empty"], [1, "mj-sm-row", "is-more"], [1, "mj-sm-row-info"], [1, "mj-sm-row-icon"], [1, "mj-sm-row-name"], [1, "mj-sm-row-actions"], ["title", "Move up", 1, "mj-sm-arrow", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["title", "Move down", 1, "mj-sm-arrow", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], ["title", "Move to More", 1, "mj-sm-arrow", "mj-sm-move", 3, "click"], [1, "fa-solid", "fa-folder-plus"], [1, "mj-sm-row-badge", "mj-sm-row-badge--more"], [1, "mj-sm-arrow", "mj-sm-move", 3, "click", "disabled", "title"], [1, "fa-solid", "fa-arrow-up-from-bracket"]], template: function MjSectionManagerComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, MjSectionManagerComponent_Conditional_0_Template, 15, 1, "div", 0);
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.Visible ? 0 : -1);
-        } }, styles: ["\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n}\n\n\n\n\n\n.mj-sm-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_mj-sm-fade-in 150ms ease;\n}\n\n\n\n\n\n.mj-sm-drawer[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 340px;\n  max-width: 90vw;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-lg);\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_mj-sm-slide-in 200ms ease;\n}\n\n\n\n\n\n.mj-sm-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.mj-sm-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 15px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-sm-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n.mj-sm-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 6px;\n  font-size: var(--mj-text-base);\n  border-radius: var(--mj-radius-sm);\n  transition: all var(--mj-transition-base);\n  line-height: 1;\n}\n\n.mj-sm-close[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n}\n\n\n\n\n\n.mj-sm-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.mj-sm-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-hover);\n  transition: background var(--mj-transition-base);\n}\n\n.mj-sm-row[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.mj-sm-row-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.mj-sm-row-icon[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  width: 18px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.mj-sm-row-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n.mj-sm-row-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  padding: 2px 6px;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.mj-sm-row-badge--default[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n}\n\n.mj-sm-row-badge--related-entity[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.mj-sm-row-badge--inherited[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-accent) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-accent);\n}\n\n\n\n.mj-sm-row-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n  margin-left: 8px;\n}\n\n.mj-sm-arrow[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-sm-arrow[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.mj-sm-arrow[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n\n\n\n\n.mj-sm-footer[_ngcontent-%COMP%] {\n  padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.mj-sm-reset[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 14px;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  font-family: inherit;\n}\n\n.mj-sm-reset[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.mj-sm-reset[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n}\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_mj-sm-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_mj-sm-slide-in {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}"], changeDetection: 0 });
+        } }, styles: ["\n\n\n\n[_nghost-%COMP%] {\n  display: block;\n}\n\n\n\n\n\n.mj-sm-overlay[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 1000;\n  animation: _ngcontent-%COMP%_mj-sm-fade-in 150ms ease;\n}\n\n\n\n\n\n.mj-sm-drawer[_ngcontent-%COMP%] {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 340px;\n  max-width: 90vw;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-lg);\n  display: flex;\n  flex-direction: column;\n  animation: _ngcontent-%COMP%_mj-sm-slide-in 200ms ease;\n}\n\n\n\n\n\n.mj-sm-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.mj-sm-title[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 15px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-sm-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n.mj-sm-close[_ngcontent-%COMP%] {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 6px;\n  font-size: var(--mj-text-base);\n  border-radius: var(--mj-radius-sm);\n  transition: all var(--mj-transition-base);\n  line-height: 1;\n}\n\n.mj-sm-close[_ngcontent-%COMP%]:hover {\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n}\n\n\n\n\n\n.mj-sm-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.mj-sm-group-label[_ngcontent-%COMP%] {\n  padding: 12px 20px 6px;\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  letter-spacing: 0.4px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n}\n\n.mj-sm-empty[_ngcontent-%COMP%] {\n  padding: 8px 20px 12px;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-disabled);\n}\n\n.mj-sm-row.is-more[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-bg-surface-sunken) 55%, transparent);\n}\n\n.mj-sm-row-badge--more[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.mj-sm-move[_ngcontent-%COMP%] {\n  margin-left: 4px;\n}\n\n.mj-sm-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-hover);\n  transition: background var(--mj-transition-base);\n}\n\n.mj-sm-row[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.mj-sm-row-info[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.mj-sm-row-icon[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  width: 18px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.mj-sm-row-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n\n\n.mj-sm-row-badge[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  padding: 2px 6px;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.mj-sm-row-badge--default[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n}\n\n.mj-sm-row-badge--related-entity[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.mj-sm-row-badge--inherited[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-accent) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-accent);\n}\n\n\n\n.mj-sm-row-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n  margin-left: 8px;\n}\n\n.mj-sm-arrow[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-sm-arrow[_ngcontent-%COMP%]:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.mj-sm-arrow[_ngcontent-%COMP%]:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n\n\n\n\n.mj-sm-footer[_ngcontent-%COMP%] {\n  padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.mj-sm-reset[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 14px;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  font-family: inherit;\n}\n\n.mj-sm-reset[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.mj-sm-reset[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: var(--mj-text-xs);\n}\n\n\n\n\n\n@keyframes _ngcontent-%COMP%_mj-sm-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes _ngcontent-%COMP%_mj-sm-slide-in {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MjSectionManagerComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-section-manager', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Overlay backdrop -->\n@if (Visible) {\n  <div class=\"mj-sm-overlay\" (click)=\"OnOverlayClick($event)\">\n    <!-- Drawer panel -->\n    <div class=\"mj-sm-drawer\" (click)=\"$event.stopPropagation()\">\n      <!-- Header -->\n      <div class=\"mj-sm-header\">\n        <h3 class=\"mj-sm-title\">\n          <i class=\"fa-solid fa-bars-staggered\"></i>\n          Manage Sections\n        </h3>\n        <button class=\"mj-sm-close\" (click)=\"OnClose()\" title=\"Close\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n\n      <!-- Section list -->\n      <div class=\"mj-sm-list\">\n        @for (section of OrderedSections; track section.SectionKey; let i = $index) {\n          <div class=\"mj-sm-row\">\n            <div class=\"mj-sm-row-info\">\n              <i [class]=\"section.Icon\" class=\"mj-sm-row-icon\"></i>\n              <span class=\"mj-sm-row-name\">{{ section.SectionName }}</span>\n              <span class=\"mj-sm-row-badge mj-sm-row-badge--{{ section.Variant }}\">\n                {{ GetVariantLabel(section.Variant) }}\n              </span>\n            </div>\n            <div class=\"mj-sm-row-actions\">\n              <button class=\"mj-sm-arrow\"\n                      [disabled]=\"i === 0\"\n                      (click)=\"OnMoveUp(i)\"\n                      title=\"Move up\">\n                <i class=\"fa-solid fa-chevron-up\"></i>\n              </button>\n              <button class=\"mj-sm-arrow\"\n                      [disabled]=\"i === OrderedSections.length - 1\"\n                      (click)=\"OnMoveDown(i)\"\n                      title=\"Move down\">\n                <i class=\"fa-solid fa-chevron-down\"></i>\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Footer -->\n      <div class=\"mj-sm-footer\">\n        <button class=\"mj-sm-reset\" (click)=\"OnReset()\">\n          <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n          Reset to Default Order\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* ============================================\n   SECTION MANAGER \u2014 uses global --mj-* design tokens\n   ============================================ */\n:host {\n  display: block;\n}\n\n/* ============================================\n   OVERLAY\n   ============================================ */\n.mj-sm-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 1000;\n  animation: mj-sm-fade-in 150ms ease;\n}\n\n/* ============================================\n   DRAWER\n   ============================================ */\n.mj-sm-drawer {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 340px;\n  max-width: 90vw;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-lg);\n  display: flex;\n  flex-direction: column;\n  animation: mj-sm-slide-in 200ms ease;\n}\n\n/* ============================================\n   HEADER\n   ============================================ */\n.mj-sm-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.mj-sm-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-sm-title i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n.mj-sm-close {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 6px;\n  font-size: var(--mj-text-base);\n  border-radius: var(--mj-radius-sm);\n  transition: all var(--mj-transition-base);\n  line-height: 1;\n}\n\n.mj-sm-close:hover {\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n}\n\n/* ============================================\n   SECTION LIST\n   ============================================ */\n.mj-sm-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.mj-sm-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-hover);\n  transition: background var(--mj-transition-base);\n}\n\n.mj-sm-row:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.mj-sm-row-info {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.mj-sm-row-icon {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  width: 18px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.mj-sm-row-name {\n  font-size: 13px;\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Variant badges */\n.mj-sm-row-badge {\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  padding: 2px 6px;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.mj-sm-row-badge--default {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n}\n\n.mj-sm-row-badge--related-entity {\n  background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.mj-sm-row-badge--inherited {\n  background: color-mix(in srgb, var(--mj-brand-accent) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-accent);\n}\n\n/* Arrow buttons */\n.mj-sm-row-actions {\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n  margin-left: 8px;\n}\n\n.mj-sm-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-sm-arrow:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.mj-sm-arrow:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n/* ============================================\n   FOOTER\n   ============================================ */\n.mj-sm-footer {\n  padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.mj-sm-reset {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 14px;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  font-family: inherit;\n}\n\n.mj-sm-reset:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.mj-sm-reset i {\n  font-size: var(--mj-text-xs);\n}\n\n/* ============================================\n   ANIMATIONS\n   ============================================ */\n@keyframes mj-sm-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes mj-sm-slide-in {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-section-manager', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Overlay backdrop -->\n@if (Visible) {\n  <div class=\"mj-sm-overlay\" (click)=\"OnOverlayClick($event)\">\n    <!-- Drawer panel -->\n    <div class=\"mj-sm-drawer\" (click)=\"$event.stopPropagation()\">\n      <!-- Header -->\n      <div class=\"mj-sm-header\">\n        <h3 class=\"mj-sm-title\">\n          <i class=\"fa-solid fa-bars-staggered\"></i>\n          Manage Sections\n        </h3>\n        <button class=\"mj-sm-close\" (click)=\"OnClose()\" title=\"Close\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n\n      <!-- Section list -->\n      <div class=\"mj-sm-list\">\n        @if (HasMoreGroup) {\n          <div class=\"mj-sm-group-label\">On the form</div>\n          @for (section of FirstClassSections; track section.SectionKey; let i = $index) {\n            <div class=\"mj-sm-row\">\n              <div class=\"mj-sm-row-info\">\n                <i [class]=\"section.Icon\" class=\"mj-sm-row-icon\"></i>\n                <span class=\"mj-sm-row-name\">{{ section.SectionName }}</span>\n                <span class=\"mj-sm-row-badge mj-sm-row-badge--{{ section.Variant }}\">\n                  {{ GetVariantLabel(section.Variant) }}\n                </span>\n              </div>\n              <div class=\"mj-sm-row-actions\">\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === 0\"\n                        (click)=\"OnMoveGroupUp(FirstClassSections, i)\"\n                        title=\"Move up\">\n                  <i class=\"fa-solid fa-chevron-up\"></i>\n                </button>\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === FirstClassSections.length - 1\"\n                        (click)=\"OnMoveGroupDown(FirstClassSections, i)\"\n                        title=\"Move down\">\n                  <i class=\"fa-solid fa-chevron-down\"></i>\n                </button>\n                <button class=\"mj-sm-arrow mj-sm-move\"\n                        (click)=\"OnMoveToMore(section)\"\n                        title=\"Move to More\">\n                  <i class=\"fa-solid fa-folder-plus\"></i>\n                </button>\n              </div>\n            </div>\n          }\n          @if (FirstClassSections.length === 0) {\n            <div class=\"mj-sm-empty\">Nothing on the form yet.</div>\n          }\n\n          <div class=\"mj-sm-group-label\">More</div>\n          @for (section of MoreSections; track section.SectionKey; let i = $index) {\n            <div class=\"mj-sm-row is-more\">\n              <div class=\"mj-sm-row-info\">\n                <i [class]=\"section.Icon\" class=\"mj-sm-row-icon\"></i>\n                <span class=\"mj-sm-row-name\">{{ section.SectionName }}</span>\n                <span class=\"mj-sm-row-badge mj-sm-row-badge--more\">More</span>\n              </div>\n              <div class=\"mj-sm-row-actions\">\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === 0\"\n                        (click)=\"OnMoveGroupUp(MoreSections, i)\"\n                        title=\"Move up\">\n                  <i class=\"fa-solid fa-chevron-up\"></i>\n                </button>\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === MoreSections.length - 1\"\n                        (click)=\"OnMoveGroupDown(MoreSections, i)\"\n                        title=\"Move down\">\n                  <i class=\"fa-solid fa-chevron-down\"></i>\n                </button>\n                <button class=\"mj-sm-arrow mj-sm-move\"\n                        [disabled]=\"IsLockedInMore(section)\"\n                        (click)=\"OnMoveToForm(section)\"\n                        [title]=\"IsLockedInMore(section) ? 'Always in More' : 'Move to form'\">\n                  <i class=\"fa-solid fa-arrow-up-from-bracket\"></i>\n                </button>\n              </div>\n            </div>\n          }\n          @if (MoreSections.length === 0) {\n            <div class=\"mj-sm-empty\">Nothing in More.</div>\n          }\n        } @else {\n          @for (section of OrderedSections; track section.SectionKey; let i = $index) {\n            <div class=\"mj-sm-row\">\n              <div class=\"mj-sm-row-info\">\n                <i [class]=\"section.Icon\" class=\"mj-sm-row-icon\"></i>\n                <span class=\"mj-sm-row-name\">{{ section.SectionName }}</span>\n                <span class=\"mj-sm-row-badge mj-sm-row-badge--{{ section.Variant }}\">\n                  {{ GetVariantLabel(section.Variant) }}\n                </span>\n              </div>\n              <div class=\"mj-sm-row-actions\">\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === 0\"\n                        (click)=\"OnMoveUp(i)\"\n                        title=\"Move up\">\n                  <i class=\"fa-solid fa-chevron-up\"></i>\n                </button>\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === OrderedSections.length - 1\"\n                        (click)=\"OnMoveDown(i)\"\n                        title=\"Move down\">\n                  <i class=\"fa-solid fa-chevron-down\"></i>\n                </button>\n              </div>\n            </div>\n          }\n        }\n      </div>\n\n      <!-- Footer -->\n      <div class=\"mj-sm-footer\">\n        <button class=\"mj-sm-reset\" (click)=\"OnReset()\">\n          <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n          Reset to defaults\n        </button>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["/* ============================================\n   SECTION MANAGER \u2014 uses global --mj-* design tokens\n   ============================================ */\n:host {\n  display: block;\n}\n\n/* ============================================\n   OVERLAY\n   ============================================ */\n.mj-sm-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: var(--mj-bg-overlay);\n  z-index: 1000;\n  animation: mj-sm-fade-in 150ms ease;\n}\n\n/* ============================================\n   DRAWER\n   ============================================ */\n.mj-sm-drawer {\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  width: 340px;\n  max-width: 90vw;\n  background: var(--mj-bg-surface);\n  box-shadow: var(--mj-shadow-lg);\n  display: flex;\n  flex-direction: column;\n  animation: mj-sm-slide-in 200ms ease;\n}\n\n/* ============================================\n   HEADER\n   ============================================ */\n.mj-sm-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 16px 20px;\n  background: var(--mj-bg-surface-elevated);\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.mj-sm-title {\n  margin: 0;\n  font-size: 15px;\n  font-weight: var(--mj-font-semibold);\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.mj-sm-title i {\n  color: var(--mj-brand-primary);\n  font-size: var(--mj-text-sm);\n}\n\n.mj-sm-close {\n  background: none;\n  border: none;\n  color: var(--mj-text-muted);\n  cursor: pointer;\n  padding: 6px;\n  font-size: var(--mj-text-base);\n  border-radius: var(--mj-radius-sm);\n  transition: all var(--mj-transition-base);\n  line-height: 1;\n}\n\n.mj-sm-close:hover {\n  color: var(--mj-text-primary);\n  background: color-mix(in srgb, var(--mj-text-primary) 5%, transparent);\n}\n\n/* ============================================\n   SECTION LIST\n   ============================================ */\n.mj-sm-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.mj-sm-group-label {\n  padding: 12px 20px 6px;\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  letter-spacing: 0.4px;\n  text-transform: uppercase;\n  color: var(--mj-text-muted);\n}\n\n.mj-sm-empty {\n  padding: 8px 20px 12px;\n  font-size: var(--mj-text-xs);\n  color: var(--mj-text-disabled);\n}\n\n.mj-sm-row.is-more {\n  background: color-mix(in srgb, var(--mj-bg-surface-sunken) 55%, transparent);\n}\n\n.mj-sm-row-badge--more {\n  background: var(--mj-bg-surface-sunken);\n  color: var(--mj-text-muted);\n}\n\n.mj-sm-move {\n  margin-left: 4px;\n}\n\n.mj-sm-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 10px 20px;\n  border-bottom: 1px solid var(--mj-bg-surface-hover);\n  transition: background var(--mj-transition-base);\n}\n\n.mj-sm-row:hover {\n  background: var(--mj-bg-surface-card);\n}\n\n.mj-sm-row-info {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n  flex: 1;\n}\n\n.mj-sm-row-icon {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  width: 18px;\n  text-align: center;\n  flex-shrink: 0;\n}\n\n.mj-sm-row-name {\n  font-size: 13px;\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-primary);\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n/* Variant badges */\n.mj-sm-row-badge {\n  font-size: 10px;\n  font-weight: var(--mj-font-semibold);\n  padding: 2px 6px;\n  border-radius: var(--mj-radius-sm);\n  flex-shrink: 0;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.mj-sm-row-badge--default {\n  background: var(--mj-bg-surface-hover);\n  color: var(--mj-text-secondary);\n}\n\n.mj-sm-row-badge--related-entity {\n  background: color-mix(in srgb, var(--mj-status-info) 10%, var(--mj-bg-surface));\n  color: var(--mj-status-info);\n}\n\n.mj-sm-row-badge--inherited {\n  background: color-mix(in srgb, var(--mj-brand-accent) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-accent);\n}\n\n/* Arrow buttons */\n.mj-sm-row-actions {\n  display: flex;\n  gap: 2px;\n  flex-shrink: 0;\n  margin-left: 8px;\n}\n\n.mj-sm-arrow {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n  transition: all var(--mj-transition-base);\n}\n\n.mj-sm-arrow:hover:not(:disabled) {\n  background: var(--mj-brand-primary);\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.mj-sm-arrow:disabled {\n  opacity: 0.3;\n  cursor: not-allowed;\n}\n\n/* ============================================\n   FOOTER\n   ============================================ */\n.mj-sm-footer {\n  padding: 14px 20px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.mj-sm-reset {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  padding: 7px 14px;\n  font-size: var(--mj-text-xs);\n  font-weight: var(--mj-font-medium);\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: var(--mj-radius-sm);\n  cursor: pointer;\n  transition: all var(--mj-transition-base);\n  font-family: inherit;\n}\n\n.mj-sm-reset:hover {\n  background: var(--mj-bg-surface-hover);\n  border-color: var(--mj-border-strong);\n  color: var(--mj-text-primary);\n}\n\n.mj-sm-reset i {\n  font-size: var(--mj-text-xs);\n}\n\n/* ============================================\n   ANIMATIONS\n   ============================================ */\n@keyframes mj-sm-fade-in {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes mj-sm-slide-in {\n  from { transform: translateX(100%); }\n  to { transform: translateX(0); }\n}\n"] }]
     }], null, { Sections: [{
             type: Input
         }], SectionOrder: [{
             type: Input
+        }], MoreSectionKeys: [{
+            type: Input
+        }], LockedMoreKeys: [{
+            type: Input
         }], Visible: [{
             type: Input
         }], SectionOrderChange: [{
             type: Output
+        }], MembershipChange: [{
+            type: Output
         }], Closed: [{
             type: Output
         }], ResetRequested: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjSectionManagerComponent, { className: "MjSectionManagerComponent", filePath: "src/lib/section-manager/section-manager.component.ts", lineNumber: 43 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MjSectionManagerComponent, { className: "MjSectionManagerComponent", filePath: "src/lib/section-manager/section-manager.component.ts", lineNumber: 48 }); })();
 //# sourceMappingURL=section-manager.component.js.map

package/dist/lib/section-manager/section-manager.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"section-manager.component.js","sourceRoot":"","sources":["../../../src/lib/section-manager/section-manager.component.ts","../../../src/lib/section-manager/section-manager.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component, Input, Output, EventEmitter,\n  ChangeDetectionStrategy, ChangeDetectorRef, inject,\n  OnChanges, SimpleChanges\n} from '@angular/core';\nimport { PanelVariant } from '../types/form-types';\n\n/**\n * Info about a section, passed from the container to the Section Manager drawer.\n */\nexport interface SectionManagerItem {\n  SectionKey: string;\n  SectionName: string;\n  Variant: PanelVariant;\n  Icon: string;\n}\n\n/**\n * Slide-in drawer for managing section order.\n *\n * Provides an accessible, keyboard-friendly alternative to drag-and-drop\n * for reordering form sections. Each section is displayed as a row with\n * up/down arrow buttons to change position.\n *\n * @example\n * ```html\n * <mj-section-manager\n *   [Sections]=\"sectionList\"\n *   [SectionOrder]=\"currentOrder\"\n *   [Visible]=\"showDrawer\"\n *   (SectionOrderChange)=\"onOrderChange($event)\"\n *   (Closed)=\"showDrawer = false\">\n * </mj-section-manager>\n * ```\n */\n@Component({\n  standalone: false,\n  selector: 'mj-section-manager',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './section-manager.component.html',\n  styleUrls: ['./section-manager.component.css']\n})\nexport class MjSectionManagerComponent implements OnChanges {\n  private cdr = inject(ChangeDetectorRef);\n\n  /** All available sections (unordered) */\n  @Input() Sections: SectionManagerItem[] = [];\n\n  /** Current section order (array of section keys) */\n  @Input() SectionOrder: string[] = [];\n\n  /** Whether the drawer is visible */\n  @Input() Visible = false;\n\n  /** Emits the new section order when the user reorders */\n  @Output() SectionOrderChange = new EventEmitter<string[]>();\n\n  /** Emits when the drawer is closed */\n  @Output() Closed = new EventEmitter<void>();\n\n  /** Emits when the user resets to default order */\n  @Output() ResetRequested = new EventEmitter<void>();\n\n  /** Ordered list of sections for display */\n  OrderedSections: SectionManagerItem[] = [];\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['Sections'] || changes['SectionOrder']) {\n      this.RebuildOrderedSections();\n    }\n  }\n\n  OnClose(): void {\n    this.Closed.emit();\n  }\n\n  OnOverlayClick(event: MouseEvent): void {\n    // Only close if clicking the overlay itself, not the drawer\n    if (event.target === event.currentTarget) {\n      this.OnClose();\n    }\n  }\n\n  OnMoveUp(index: number): void {\n    if (index <= 0) return;\n    const newOrder = this.OrderedSections.map(s => s.SectionKey);\n    [newOrder[index - 1], newOrder[index]] = [newOrder[index], newOrder[index - 1]];\n    this.SectionOrderChange.emit(newOrder);\n    this.ApplyOrder(newOrder);\n  }\n\n  OnMoveDown(index: number): void {\n    if (index >= this.OrderedSections.length - 1) return;\n    const newOrder = this.OrderedSections.map(s => s.SectionKey);\n    [newOrder[index], newOrder[index + 1]] = [newOrder[index + 1], newOrder[index]];\n    this.SectionOrderChange.emit(newOrder);\n    this.ApplyOrder(newOrder);\n  }\n\n  OnReset(): void {\n    this.ResetRequested.emit();\n  }\n\n  GetVariantIcon(variant: PanelVariant): string {\n    switch (variant) {\n      case 'related-entity': return 'fa-solid fa-link';\n      case 'inherited': return 'fa-solid fa-arrow-up';\n      default: return 'fa-solid fa-table-cells';\n    }\n  }\n\n  GetVariantLabel(variant: PanelVariant): string {\n    switch (variant) {\n      case 'related-entity': return 'Related';\n      case 'inherited': return 'Inherited';\n      default: return 'Fields';\n    }\n  }\n\n  private RebuildOrderedSections(): void {\n    if (!this.Sections || this.Sections.length === 0) {\n      this.OrderedSections = [];\n      return;\n    }\n\n    const sectionMap = new Map<string, SectionManagerItem>();\n    for (const s of this.Sections) {\n      sectionMap.set(s.SectionKey, s);\n    }\n\n    const ordered: SectionManagerItem[] = [];\n\n    // Add sections in persisted order first\n    if (this.SectionOrder && this.SectionOrder.length > 0) {\n      for (const key of this.SectionOrder) {\n        const section = sectionMap.get(key);\n        if (section) {\n          ordered.push(section);\n          sectionMap.delete(key);\n        }\n      }\n    }\n\n    // Append any sections not in the persisted order (new sections)\n    for (const section of sectionMap.values()) {\n      ordered.push(section);\n    }\n\n    this.OrderedSections = ordered;\n    this.cdr.markForCheck();\n  }\n\n  private ApplyOrder(newOrder: string[]): void {\n    const sectionMap = new Map<string, SectionManagerItem>();\n    for (const s of this.OrderedSections) {\n      sectionMap.set(s.SectionKey, s);\n    }\n    this.OrderedSections = newOrder\n      .map(key => sectionMap.get(key))\n      .filter((s): s is SectionManagerItem => s !== undefined);\n    this.cdr.markForCheck();\n  }\n}\n","<!-- Overlay backdrop -->\n@if (Visible) {\n  <div class=\"mj-sm-overlay\" (click)=\"OnOverlayClick($event)\">\n    <!-- Drawer panel -->\n    <div class=\"mj-sm-drawer\" (click)=\"$event.stopPropagation()\">\n      <!-- Header -->\n      <div class=\"mj-sm-header\">\n        <h3 class=\"mj-sm-title\">\n          <i class=\"fa-solid fa-bars-staggered\"></i>\n          Manage Sections\n        </h3>\n        <button class=\"mj-sm-close\" (click)=\"OnClose()\" title=\"Close\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n\n      <!-- Section list -->\n      <div class=\"mj-sm-list\">\n        @for (section of OrderedSections; track section.SectionKey; let i = $index) {\n          <div class=\"mj-sm-row\">\n            <div class=\"mj-sm-row-info\">\n              <i [class]=\"section.Icon\" class=\"mj-sm-row-icon\"></i>\n              <span class=\"mj-sm-row-name\">{{ section.SectionName }}</span>\n              <span class=\"mj-sm-row-badge mj-sm-row-badge--{{ section.Variant }}\">\n                {{ GetVariantLabel(section.Variant) }}\n              </span>\n            </div>\n            <div class=\"mj-sm-row-actions\">\n              <button class=\"mj-sm-arrow\"\n                      [disabled]=\"i === 0\"\n                      (click)=\"OnMoveUp(i)\"\n                      title=\"Move up\">\n                <i class=\"fa-solid fa-chevron-up\"></i>\n              </button>\n              <button class=\"mj-sm-arrow\"\n                      [disabled]=\"i === OrderedSections.length - 1\"\n                      (click)=\"OnMoveDown(i)\"\n                      title=\"Move down\">\n                <i class=\"fa-solid fa-chevron-down\"></i>\n              </button>\n            </div>\n          </div>\n        }\n      </div>\n\n      <!-- Footer -->\n      <div class=\"mj-sm-footer\">\n        <button class=\"mj-sm-reset\" (click)=\"OnReset()\">\n          <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n          Reset to Default Order\n        </button>\n      </div>\n    </div>\n  </div>\n}\n"]}
+{"version":3,"file":"section-manager.component.js","sourceRoot":"","sources":["../../../src/lib/section-manager/section-manager.component.ts","../../../src/lib/section-manager/section-manager.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component, Input, Output, EventEmitter,\n  ChangeDetectionStrategy, ChangeDetectorRef, inject,\n  OnChanges, SimpleChanges\n} from '@angular/core';\nimport { PanelVariant } from '../types/form-types';\n\n/**\n * Info about a section, passed from the container to the Section Manager drawer.\n */\nexport interface SectionManagerItem {\n  SectionKey: string;\n  SectionName: string;\n  Variant: PanelVariant;\n  Icon: string;\n}\n\nexport interface ChromeMembershipChange {\n  moreSectionKeys: string[];\n  firstClassSectionKeys: string[];\n}\n\n/**\n * Slide-in drawer for managing section order.\n *\n * Provides an accessible, keyboard-friendly alternative to drag-and-drop\n * for reordering form sections. Each section is displayed as a row with\n * up/down arrow buttons to change position.\n *\n * @example\n * ```html\n * <mj-section-manager\n *   [Sections]=\"sectionList\"\n *   [SectionOrder]=\"currentOrder\"\n *   [Visible]=\"showDrawer\"\n *   (SectionOrderChange)=\"onOrderChange($event)\"\n *   (Closed)=\"showDrawer = false\">\n * </mj-section-manager>\n * ```\n */\n@Component({\n  standalone: false,\n  selector: 'mj-section-manager',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './section-manager.component.html',\n  styleUrls: ['./section-manager.component.css']\n})\nexport class MjSectionManagerComponent implements OnChanges {\n  private cdr = inject(ChangeDetectorRef);\n\n  /** All available sections (unordered) */\n  @Input() Sections: SectionManagerItem[] = [];\n\n  /** Current section order (array of section keys) */\n  @Input() SectionOrder: string[] = [];\n\n  /** Section keys currently in More. Empty keeps a single list. */\n  @Input() MoreSectionKeys: string[] = [];\n\n  /** Keys that cannot leave More (System Metadata). */\n  @Input() LockedMoreKeys: string[] = [];\n\n  /** Whether the drawer is visible */\n  @Input() Visible = false;\n\n  /** Emits the new section order when the user reorders */\n  @Output() SectionOrderChange = new EventEmitter<string[]>();\n\n  /** Emits when the user moves a section in or out of More. */\n  @Output() MembershipChange = new EventEmitter<ChromeMembershipChange>();\n\n  /** Emits when the drawer is closed */\n  @Output() Closed = new EventEmitter<void>();\n\n  /** Emits when the user resets to default order */\n  @Output() ResetRequested = new EventEmitter<void>();\n\n  /** Ordered list of sections for display */\n  OrderedSections: SectionManagerItem[] = [];\n  FirstClassSections: SectionManagerItem[] = [];\n  MoreSections: SectionManagerItem[] = [];\n\n  ngOnChanges(changes: SimpleChanges): void {\n    if (changes['Sections'] || changes['SectionOrder'] || changes['MoreSectionKeys'] || changes['LockedMoreKeys']) {\n      this.RebuildOrderedSections();\n    }\n  }\n\n  get HasMoreGroup(): boolean {\n    return this.MoreSections.length > 0 || this.MoreSectionKeys.length > 0;\n  }\n\n  IsLockedInMore(section: SectionManagerItem): boolean {\n    return this.LockedMoreKeys.includes(section.SectionKey);\n  }\n\n  OnClose(): void {\n    this.Closed.emit();\n  }\n\n  OnOverlayClick(event: MouseEvent): void {\n    // Only close if clicking the overlay itself, not the drawer\n    if (event.target === event.currentTarget) {\n      this.OnClose();\n    }\n  }\n\n  OnMoveUp(index: number): void {\n    if (index <= 0) return;\n    const newOrder = this.OrderedSections.map(s => s.SectionKey);\n    [newOrder[index - 1], newOrder[index]] = [newOrder[index], newOrder[index - 1]];\n    this.SectionOrderChange.emit(newOrder);\n    this.ApplyOrder(newOrder);\n  }\n\n  OnMoveDown(index: number): void {\n    if (index >= this.OrderedSections.length - 1) return;\n    const newOrder = this.OrderedSections.map(s => s.SectionKey);\n    [newOrder[index], newOrder[index + 1]] = [newOrder[index + 1], newOrder[index]];\n    this.SectionOrderChange.emit(newOrder);\n    this.ApplyOrder(newOrder);\n  }\n\n  OnMoveGroupUp(list: SectionManagerItem[], index: number): void {\n    if (index <= 0) return;\n    this.emitReorderedGroup(list, index, index - 1);\n  }\n\n  OnMoveGroupDown(list: SectionManagerItem[], index: number): void {\n    if (index >= list.length - 1) return;\n    this.emitReorderedGroup(list, index, index + 1);\n  }\n\n  OnMoveToMore(section: SectionManagerItem): void {\n    if (this.MoreSectionKeys.includes(section.SectionKey)) return;\n    const more = [...this.MoreSectionKeys, section.SectionKey];\n    const firstClass = this.FirstClassSections\n      .map((s) => s.SectionKey)\n      .filter((key) => key !== section.SectionKey);\n    this.MembershipChange.emit({ moreSectionKeys: more, firstClassSectionKeys: firstClass });\n  }\n\n  OnMoveToForm(section: SectionManagerItem): void {\n    if (this.IsLockedInMore(section)) return;\n    const more = this.MoreSectionKeys.filter((key) => key !== section.SectionKey);\n    const firstClass = [\n      ...this.FirstClassSections.map((s) => s.SectionKey),\n      section.SectionKey,\n    ];\n    this.MembershipChange.emit({ moreSectionKeys: more, firstClassSectionKeys: firstClass });\n  }\n\n  private emitReorderedGroup(list: SectionManagerItem[], from: number, to: number): void {\n    const keys = list.map((s) => s.SectionKey);\n    [keys[from], keys[to]] = [keys[to], keys[from]];\n    const other = list === this.FirstClassSections ? this.MoreSections : this.FirstClassSections;\n    const combined = list === this.FirstClassSections\n      ? [...keys, ...other.map((s) => s.SectionKey)]\n      : [...other.map((s) => s.SectionKey), ...keys];\n    this.SectionOrderChange.emit(combined);\n    this.ApplyOrder(combined);\n  }\n\n  OnReset(): void {\n    this.ResetRequested.emit();\n  }\n\n  GetVariantIcon(variant: PanelVariant): string {\n    switch (variant) {\n      case 'related-entity': return 'fa-solid fa-link';\n      case 'inherited': return 'fa-solid fa-arrow-up';\n      default: return 'fa-solid fa-table-cells';\n    }\n  }\n\n  GetVariantLabel(variant: PanelVariant): string {\n    switch (variant) {\n      case 'related-entity': return 'Related';\n      case 'inherited': return 'Inherited';\n      default: return 'Fields';\n    }\n  }\n\n  private RebuildOrderedSections(): void {\n    if (!this.Sections || this.Sections.length === 0) {\n      this.OrderedSections = [];\n      return;\n    }\n\n    const sectionMap = new Map<string, SectionManagerItem>();\n    for (const s of this.Sections) {\n      sectionMap.set(s.SectionKey, s);\n    }\n\n    const ordered: SectionManagerItem[] = [];\n\n    // Add sections in persisted order first\n    if (this.SectionOrder && this.SectionOrder.length > 0) {\n      for (const key of this.SectionOrder) {\n        const section = sectionMap.get(key);\n        if (section) {\n          ordered.push(section);\n          sectionMap.delete(key);\n        }\n      }\n    }\n\n    // Append any sections not in the persisted order (new sections)\n    for (const section of sectionMap.values()) {\n      ordered.push(section);\n    }\n\n    this.OrderedSections = ordered;\n    const moreSet = new Set(this.MoreSectionKeys);\n    this.FirstClassSections = ordered.filter((s) => !moreSet.has(s.SectionKey));\n    this.MoreSections = ordered.filter((s) => moreSet.has(s.SectionKey));\n    this.cdr.markForCheck();\n  }\n\n  private ApplyOrder(newOrder: string[]): void {\n    const sectionMap = new Map<string, SectionManagerItem>();\n    for (const s of this.OrderedSections) {\n      sectionMap.set(s.SectionKey, s);\n    }\n    this.OrderedSections = newOrder\n      .map(key => sectionMap.get(key))\n      .filter((s): s is SectionManagerItem => s !== undefined);\n    const moreSet = new Set(this.MoreSectionKeys);\n    this.FirstClassSections = this.OrderedSections.filter((s) => !moreSet.has(s.SectionKey));\n    this.MoreSections = this.OrderedSections.filter((s) => moreSet.has(s.SectionKey));\n    this.cdr.markForCheck();\n  }\n}\n","<!-- Overlay backdrop -->\n@if (Visible) {\n  <div class=\"mj-sm-overlay\" (click)=\"OnOverlayClick($event)\">\n    <!-- Drawer panel -->\n    <div class=\"mj-sm-drawer\" (click)=\"$event.stopPropagation()\">\n      <!-- Header -->\n      <div class=\"mj-sm-header\">\n        <h3 class=\"mj-sm-title\">\n          <i class=\"fa-solid fa-bars-staggered\"></i>\n          Manage Sections\n        </h3>\n        <button class=\"mj-sm-close\" (click)=\"OnClose()\" title=\"Close\">\n          <i class=\"fa-solid fa-xmark\"></i>\n        </button>\n      </div>\n\n      <!-- Section list -->\n      <div class=\"mj-sm-list\">\n        @if (HasMoreGroup) {\n          <div class=\"mj-sm-group-label\">On the form</div>\n          @for (section of FirstClassSections; track section.SectionKey; let i = $index) {\n            <div class=\"mj-sm-row\">\n              <div class=\"mj-sm-row-info\">\n                <i [class]=\"section.Icon\" class=\"mj-sm-row-icon\"></i>\n                <span class=\"mj-sm-row-name\">{{ section.SectionName }}</span>\n                <span class=\"mj-sm-row-badge mj-sm-row-badge--{{ section.Variant }}\">\n                  {{ GetVariantLabel(section.Variant) }}\n                </span>\n              </div>\n              <div class=\"mj-sm-row-actions\">\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === 0\"\n                        (click)=\"OnMoveGroupUp(FirstClassSections, i)\"\n                        title=\"Move up\">\n                  <i class=\"fa-solid fa-chevron-up\"></i>\n                </button>\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === FirstClassSections.length - 1\"\n                        (click)=\"OnMoveGroupDown(FirstClassSections, i)\"\n                        title=\"Move down\">\n                  <i class=\"fa-solid fa-chevron-down\"></i>\n                </button>\n                <button class=\"mj-sm-arrow mj-sm-move\"\n                        (click)=\"OnMoveToMore(section)\"\n                        title=\"Move to More\">\n                  <i class=\"fa-solid fa-folder-plus\"></i>\n                </button>\n              </div>\n            </div>\n          }\n          @if (FirstClassSections.length === 0) {\n            <div class=\"mj-sm-empty\">Nothing on the form yet.</div>\n          }\n\n          <div class=\"mj-sm-group-label\">More</div>\n          @for (section of MoreSections; track section.SectionKey; let i = $index) {\n            <div class=\"mj-sm-row is-more\">\n              <div class=\"mj-sm-row-info\">\n                <i [class]=\"section.Icon\" class=\"mj-sm-row-icon\"></i>\n                <span class=\"mj-sm-row-name\">{{ section.SectionName }}</span>\n                <span class=\"mj-sm-row-badge mj-sm-row-badge--more\">More</span>\n              </div>\n              <div class=\"mj-sm-row-actions\">\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === 0\"\n                        (click)=\"OnMoveGroupUp(MoreSections, i)\"\n                        title=\"Move up\">\n                  <i class=\"fa-solid fa-chevron-up\"></i>\n                </button>\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === MoreSections.length - 1\"\n                        (click)=\"OnMoveGroupDown(MoreSections, i)\"\n                        title=\"Move down\">\n                  <i class=\"fa-solid fa-chevron-down\"></i>\n                </button>\n                <button class=\"mj-sm-arrow mj-sm-move\"\n                        [disabled]=\"IsLockedInMore(section)\"\n                        (click)=\"OnMoveToForm(section)\"\n                        [title]=\"IsLockedInMore(section) ? 'Always in More' : 'Move to form'\">\n                  <i class=\"fa-solid fa-arrow-up-from-bracket\"></i>\n                </button>\n              </div>\n            </div>\n          }\n          @if (MoreSections.length === 0) {\n            <div class=\"mj-sm-empty\">Nothing in More.</div>\n          }\n        } @else {\n          @for (section of OrderedSections; track section.SectionKey; let i = $index) {\n            <div class=\"mj-sm-row\">\n              <div class=\"mj-sm-row-info\">\n                <i [class]=\"section.Icon\" class=\"mj-sm-row-icon\"></i>\n                <span class=\"mj-sm-row-name\">{{ section.SectionName }}</span>\n                <span class=\"mj-sm-row-badge mj-sm-row-badge--{{ section.Variant }}\">\n                  {{ GetVariantLabel(section.Variant) }}\n                </span>\n              </div>\n              <div class=\"mj-sm-row-actions\">\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === 0\"\n                        (click)=\"OnMoveUp(i)\"\n                        title=\"Move up\">\n                  <i class=\"fa-solid fa-chevron-up\"></i>\n                </button>\n                <button class=\"mj-sm-arrow\"\n                        [disabled]=\"i === OrderedSections.length - 1\"\n                        (click)=\"OnMoveDown(i)\"\n                        title=\"Move down\">\n                  <i class=\"fa-solid fa-chevron-down\"></i>\n                </button>\n              </div>\n            </div>\n          }\n        }\n      </div>\n\n      <!-- Footer -->\n      <div class=\"mj-sm-footer\">\n        <button class=\"mj-sm-reset\" (click)=\"OnReset()\">\n          <i class=\"fa-solid fa-arrow-rotate-left\"></i>\n          Reset to defaults\n        </button>\n      </div>\n    </div>\n  </div>\n}\n"]}