@memberjunction/ng-core-entity-forms 6.2.0 → 6.3.0-edge.0

package/dist/lib/custom/Lists/list-form.component.js

@@ -22,16 +22,16 @@ import * as i5 from "@memberjunction/ng-list-management";
 import * as i6 from "@angular/common";
 function MJListFormComponentExtended_Conditional_7_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 26);
+    i0.ɵɵelementStart(0, "button", 27);
     i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_7_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startEditingName()); });
-    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelement(1, "i", 28);
     i0.ɵɵelementEnd();
 } }
 function MJListFormComponentExtended_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "h1", 24);
+    i0.ɵɵelementStart(0, "h1", 25);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_7_Conditional_2_Template, 2, 0, "button", 25);
+    i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_7_Conditional_2_Template, 2, 0, "button", 26);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
@@ -41,24 +41,24 @@ function MJListFormComponentExtended_Conditional_7_Template(rf, ctx) { if (rf &
 } }
 function MJListFormComponentExtended_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 28, 0);
+    i0.ɵɵelementStart(0, "input", 29, 0);
     i0.ɵɵtwoWayListener("ngModelChange", function MJListFormComponentExtended_Conditional_8_Template_input_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.editingName, $event) || (ctx_r1.editingName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("keydown.enter", function MJListFormComponentExtended_Conditional_8_Template_input_keydown_enter_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.saveNameEdit()); })("keydown.escape", function MJListFormComponentExtended_Conditional_8_Template_input_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelNameEdit()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "button", 29);
+    i0.ɵɵelementStart(2, "button", 30);
     i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_8_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.saveNameEdit()); });
-    i0.ɵɵelement(3, "i", 30);
+    i0.ɵɵelement(3, "i", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 31);
+    i0.ɵɵelementStart(4, "button", 32);
     i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_8_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelNameEdit()); });
-    i0.ɵɵelement(5, "i", 32);
+    i0.ɵɵelement(5, "i", 33);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.editingName);
 } }
-function MJListFormComponentExtended_For_31_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 35);
+function MJListFormComponentExtended_For_32_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 36);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -66,15 +66,15 @@ function MJListFormComponentExtended_For_31_Conditional_4_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(nav_r5.badge);
 } }
-function MJListFormComponentExtended_For_31_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_For_32_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 33);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_For_31_Template_button_click_0_listener() { const nav_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveSection(nav_r5.id)); });
+    i0.ɵɵelementStart(0, "button", 34);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_For_32_Template_button_click_0_listener() { const nav_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveSection(nav_r5.id)); });
     i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 34);
+    i0.ɵɵelementStart(2, "span", 35);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_For_31_Conditional_4_Template, 2, 1, "span", 35);
+    i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_For_32_Conditional_4_Template, 2, 1, "span", 36);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const nav_r5 = ctx.$implicit;
@@ -88,15 +88,15 @@ function MJListFormComponentExtended_For_31_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵconditional(nav_r5.badge && nav_r5.badge > 0 ? 4 : -1);
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_34_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 61);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_33_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startEditingDescription()); });
-    i0.ɵɵelement(1, "i", 27);
+    i0.ɵɵelementStart(0, "button", 62);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startEditingDescription()); });
+    i0.ɵɵelement(1, "i", 28);
     i0.ɵɵelementEnd();
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 62);
+function MJListFormComponentExtended_Conditional_34_Conditional_9_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 63);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -104,41 +104,41 @@ function MJListFormComponentExtended_Conditional_33_Conditional_9_Conditional_0_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.record.Description);
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 63);
+function MJListFormComponentExtended_Conditional_34_Conditional_9_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 64);
     i0.ɵɵtext(1, "No description provided");
     i0.ɵɵelementEnd();
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, MJListFormComponentExtended_Conditional_33_Conditional_9_Conditional_0_Template, 2, 1, "p", 62);
-    i0.ɵɵconditionalCreate(1, MJListFormComponentExtended_Conditional_33_Conditional_9_Conditional_1_Template, 2, 0, "p", 63);
+function MJListFormComponentExtended_Conditional_34_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, MJListFormComponentExtended_Conditional_34_Conditional_9_Conditional_0_Template, 2, 1, "p", 63);
+    i0.ɵɵconditionalCreate(1, MJListFormComponentExtended_Conditional_34_Conditional_9_Conditional_1_Template, 2, 0, "p", 64);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵconditional(ctx_r1.record.Description ? 0 : -1);
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r1.record.Description ? 1 : -1);
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_34_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "textarea", 64);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJListFormComponentExtended_Conditional_33_Conditional_10_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.editingDescription, $event) || (ctx_r1.editingDescription = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("keydown.escape", function MJListFormComponentExtended_Conditional_33_Conditional_10_Template_textarea_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelDescriptionEdit()); });
+    i0.ɵɵelementStart(0, "textarea", 65);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJListFormComponentExtended_Conditional_34_Conditional_10_Template_textarea_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.editingDescription, $event) || (ctx_r1.editingDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("keydown.escape", function MJListFormComponentExtended_Conditional_34_Conditional_10_Template_textarea_keydown_escape_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelDescriptionEdit()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(1, "div", 65)(2, "button", 66);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_33_Conditional_10_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.saveDescriptionEdit()); });
+    i0.ɵɵelementStart(1, "div", 66)(2, "button", 67);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Conditional_10_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.saveDescriptionEdit()); });
     i0.ɵɵtext(3, "Save");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 67);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_33_Conditional_10_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelDescriptionEdit()); });
+    i0.ɵɵelementStart(4, "button", 68);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Conditional_10_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelDescriptionEdit()); });
     i0.ɵɵtext(5, "Cancel");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.editingDescription);
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 46);
-    i0.ɵɵelement(1, "i", 68);
+function MJListFormComponentExtended_Conditional_34_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 47);
+    i0.ɵɵelement(1, "i", 69);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -146,8 +146,8 @@ function MJListFormComponentExtended_Conditional_33_Conditional_26_Template(rf,
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.categoryName, " ");
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_27_For_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 70);
+function MJListFormComponentExtended_Conditional_34_Conditional_27_For_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 71);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -156,14 +156,14 @@ function MJListFormComponentExtended_Conditional_33_Conditional_27_For_4_Templat
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(cat_r10.Name);
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_34_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "select", 69);
-    i0.ɵɵlistener("ngModelChange", function MJListFormComponentExtended_Conditional_33_Conditional_27_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCategoryChange($event)); });
-    i0.ɵɵelementStart(1, "option", 70);
+    i0.ɵɵelementStart(0, "select", 70);
+    i0.ɵɵlistener("ngModelChange", function MJListFormComponentExtended_Conditional_34_Conditional_27_Template_select_ngModelChange_0_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onCategoryChange($event)); });
+    i0.ɵɵelementStart(1, "option", 71);
     i0.ɵɵtext(2, "Uncategorized");
     i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(3, MJListFormComponentExtended_Conditional_33_Conditional_27_For_4_Template, 2, 2, "option", 70, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(3, MJListFormComponentExtended_Conditional_34_Conditional_27_For_4_Template, 2, 2, "option", 71, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -173,13 +173,13 @@ function MJListFormComponentExtended_Conditional_33_Conditional_27_Template(rf,
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.categories);
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 50);
+function MJListFormComponentExtended_Conditional_34_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 51);
     i0.ɵɵtext(1, "You");
     i0.ɵɵelementEnd();
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_54_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 56);
+function MJListFormComponentExtended_Conditional_34_Conditional_54_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 57);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -187,96 +187,96 @@ function MJListFormComponentExtended_Conditional_33_Conditional_54_Conditional_4
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(ctx_r1.stats.shareCount);
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_54_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_34_Conditional_54_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 54);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_33_Conditional_54_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openShareDialog()); });
-    i0.ɵɵelement(1, "i", 71);
+    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Conditional_54_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openShareDialog()); });
+    i0.ɵɵelement(1, "i", 72);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Share List");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_Conditional_33_Conditional_54_Conditional_4_Template, 2, 1, "span", 56);
+    i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_Conditional_34_Conditional_54_Conditional_4_Template, 2, 1, "span", 57);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
     i0.ɵɵconditional(ctx_r1.stats.shareCount > 0 ? 4 : -1);
 } }
-function MJListFormComponentExtended_Conditional_33_Conditional_55_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_34_Conditional_55_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 54);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_33_Conditional_55_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setActiveSection("sharing")); });
-    i0.ɵɵelement(1, "i", 71);
+    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Conditional_55_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.setActiveSection("sharing")); });
+    i0.ɵɵelement(1, "i", 72);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "View Sharing");
     i0.ɵɵelementEnd()();
 } }
-function MJListFormComponentExtended_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_34_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "section", 15)(1, "div", 36)(2, "div", 37)(3, "div", 38)(4, "h3");
-    i0.ɵɵelement(5, "i", 39);
+    i0.ɵɵelementStart(0, "section", 16)(1, "div", 37)(2, "div", 38)(3, "div", 39)(4, "h3");
+    i0.ɵɵelement(5, "i", 40);
     i0.ɵɵtext(6, " Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(7, MJListFormComponentExtended_Conditional_33_Conditional_7_Template, 2, 0, "button", 40);
+    i0.ɵɵconditionalCreate(7, MJListFormComponentExtended_Conditional_34_Conditional_7_Template, 2, 0, "button", 41);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 41);
-    i0.ɵɵconditionalCreate(9, MJListFormComponentExtended_Conditional_33_Conditional_9_Template, 2, 2);
-    i0.ɵɵconditionalCreate(10, MJListFormComponentExtended_Conditional_33_Conditional_10_Template, 6, 1);
+    i0.ɵɵelementStart(8, "div", 42);
+    i0.ɵɵconditionalCreate(9, MJListFormComponentExtended_Conditional_34_Conditional_9_Template, 2, 2);
+    i0.ɵɵconditionalCreate(10, MJListFormComponentExtended_Conditional_34_Conditional_10_Template, 6, 1);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 42)(12, "div", 38)(13, "h3");
-    i0.ɵɵelement(14, "i", 43);
+    i0.ɵɵelementStart(11, "div", 43)(12, "div", 39)(13, "h3");
+    i0.ɵɵelement(14, "i", 44);
     i0.ɵɵtext(15, " Details");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 41)(17, "div", 44)(18, "span", 45);
+    i0.ɵɵelementStart(16, "div", 42)(17, "div", 45)(18, "span", 46);
     i0.ɵɵtext(19, "Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "span", 46);
-    i0.ɵɵelement(21, "i", 47);
+    i0.ɵɵelementStart(20, "span", 47);
+    i0.ɵɵelement(21, "i", 48);
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 44)(24, "span", 45);
+    i0.ɵɵelementStart(23, "div", 45)(24, "span", 46);
     i0.ɵɵtext(25, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(26, MJListFormComponentExtended_Conditional_33_Conditional_26_Template, 3, 1, "span", 46);
-    i0.ɵɵconditionalCreate(27, MJListFormComponentExtended_Conditional_33_Conditional_27_Template, 5, 2, "select", 48);
+    i0.ɵɵconditionalCreate(26, MJListFormComponentExtended_Conditional_34_Conditional_26_Template, 3, 1, "span", 47);
+    i0.ɵɵconditionalCreate(27, MJListFormComponentExtended_Conditional_34_Conditional_27_Template, 5, 2, "select", 49);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "div", 44)(29, "span", 45);
+    i0.ɵɵelementStart(28, "div", 45)(29, "span", 46);
     i0.ɵɵtext(30, "Owner");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "span", 46);
-    i0.ɵɵelement(32, "i", 49);
+    i0.ɵɵelementStart(31, "span", 47);
+    i0.ɵɵelement(32, "i", 50);
     i0.ɵɵtext(33);
-    i0.ɵɵconditionalCreate(34, MJListFormComponentExtended_Conditional_33_Conditional_34_Template, 2, 0, "span", 50);
+    i0.ɵɵconditionalCreate(34, MJListFormComponentExtended_Conditional_34_Conditional_34_Template, 2, 0, "span", 51);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(35, "div", 44)(36, "span", 45);
+    i0.ɵɵelementStart(35, "div", 45)(36, "span", 46);
     i0.ɵɵtext(37, "Created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "span", 46);
-    i0.ɵɵelement(39, "i", 51);
+    i0.ɵɵelementStart(38, "span", 47);
+    i0.ɵɵelement(39, "i", 52);
     i0.ɵɵtext(40);
     i0.ɵɵpipe(41, "date");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(42, "div", 52)(43, "div", 38)(44, "h3");
-    i0.ɵɵelement(45, "i", 53);
+    i0.ɵɵelementStart(42, "div", 53)(43, "div", 39)(44, "h3");
+    i0.ɵɵelement(45, "i", 54);
     i0.ɵɵtext(46, " Quick Actions");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(47, "div", 41)(48, "button", 54);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_33_Template_button_click_48_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveSection("items")); });
-    i0.ɵɵelement(49, "i", 55);
+    i0.ɵɵelementStart(47, "div", 42)(48, "button", 55);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Template_button_click_48_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.setActiveSection("items")); });
+    i0.ɵɵelement(49, "i", 56);
     i0.ɵɵelementStart(50, "span");
     i0.ɵɵtext(51, "View Items");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "span", 56);
+    i0.ɵɵelementStart(52, "span", 57);
     i0.ɵɵtext(53);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(54, MJListFormComponentExtended_Conditional_33_Conditional_54_Template, 5, 1, "button", 57);
-    i0.ɵɵconditionalCreate(55, MJListFormComponentExtended_Conditional_33_Conditional_55_Template, 4, 0, "button", 57);
-    i0.ɵɵelementStart(56, "button", 58);
-    i0.ɵɵelement(57, "i", 59);
+    i0.ɵɵconditionalCreate(54, MJListFormComponentExtended_Conditional_34_Conditional_54_Template, 5, 1, "button", 58);
+    i0.ɵɵconditionalCreate(55, MJListFormComponentExtended_Conditional_34_Conditional_55_Template, 4, 0, "button", 58);
+    i0.ɵɵelementStart(56, "button", 59);
+    i0.ɵɵelement(57, "i", 60);
     i0.ɵɵelementStart(58, "span");
     i0.ɵɵtext(59, "Export Data");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(60, "span", 60);
+    i0.ɵɵelementStart(60, "span", 61);
     i0.ɵɵtext(61, "Soon");
     i0.ɵɵelementEnd()()()()()();
 } if (rf & 2) {
@@ -310,38 +310,38 @@ function MJListFormComponentExtended_Conditional_33_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", true);
 } }
-function MJListFormComponentExtended_Conditional_34_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_35_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 77)(1, "button", 83);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Conditional_8_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openAddRecordsDialog()); });
-    i0.ɵɵelement(2, "i", 84);
+    i0.ɵɵelementStart(0, "div", 78)(1, "button", 84);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_35_Conditional_8_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openAddRecordsDialog()); });
+    i0.ɵɵelement(2, "i", 85);
     i0.ɵɵtext(3, " Add Records ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 85);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Conditional_8_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openAddFromViewDialog()); });
-    i0.ɵɵelement(5, "i", 86);
+    i0.ɵɵelementStart(4, "button", 86);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_35_Conditional_8_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openAddFromViewDialog()); });
+    i0.ɵɵelement(5, "i", 87);
     i0.ɵɵtext(6, " Add From View ");
     i0.ɵɵelementEnd()();
 } }
-function MJListFormComponentExtended_Conditional_34_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 80);
-    i0.ɵɵelement(1, "mj-loading", 87);
+function MJListFormComponentExtended_Conditional_35_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 81);
+    i0.ɵɵelement(1, "mj-loading", 88);
     i0.ɵɵelementEnd();
 } }
-function MJListFormComponentExtended_Conditional_34_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 81);
+function MJListFormComponentExtended_Conditional_35_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 82);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Message", "This list doesn't have any items. Add records from the " + ctx_r1.entityDisplayName + " entity.");
 } }
-function MJListFormComponentExtended_Conditional_34_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_35_Conditional_13_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 88)(1, "span", 100);
+    i0.ɵɵelementStart(0, "div", 89)(1, "span", 101);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 101);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Conditional_13_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.removeSelectedItems()); });
-    i0.ɵɵelement(4, "i", 102);
+    i0.ɵɵelementStart(3, "button", 102);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_35_Conditional_13_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r16); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.removeSelectedItems()); });
+    i0.ɵɵelement(4, "i", 103);
     i0.ɵɵtext(5, " Remove from List ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -349,31 +349,31 @@ function MJListFormComponentExtended_Conditional_34_Conditional_13_Conditional_1
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", ctx_r1.selectedItems.size, " selected");
 } }
-function MJListFormComponentExtended_Conditional_34_Conditional_13_For_16_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 105);
+function MJListFormComponentExtended_Conditional_35_Conditional_13_For_16_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 106);
 } }
-function MJListFormComponentExtended_Conditional_34_Conditional_13_For_16_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_35_Conditional_13_For_16_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr")(1, "td", 90)(2, "input", 91);
-    i0.ɵɵlistener("change", function MJListFormComponentExtended_Conditional_34_Conditional_13_For_16_Template_input_change_2_listener() { const item_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleItemSelection(item_r18)); });
+    i0.ɵɵelementStart(0, "tr")(1, "td", 91)(2, "input", 92);
+    i0.ɵɵlistener("change", function MJListFormComponentExtended_Conditional_35_Conditional_13_For_16_Template_input_change_2_listener() { const item_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleItemSelection(item_r18)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(3, "td", 92)(4, "div", 103);
-    i0.ɵɵelement(5, "i", 104);
+    i0.ɵɵelementStart(3, "td", 93)(4, "div", 104);
+    i0.ɵɵelement(5, "i", 105);
     i0.ɵɵelementStart(6, "span");
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, MJListFormComponentExtended_Conditional_34_Conditional_13_For_16_Conditional_8_Template, 1, 0, "i", 105);
+    i0.ɵɵconditionalCreate(8, MJListFormComponentExtended_Conditional_35_Conditional_13_For_16_Conditional_8_Template, 1, 0, "i", 106);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td", 93)(10, "code", 106);
+    i0.ɵɵelementStart(9, "td", 94)(10, "code", 107);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "td", 94);
+    i0.ɵɵelementStart(12, "td", 95);
     i0.ɵɵtext(13);
     i0.ɵɵpipe(14, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "td", 95)(16, "button", 107);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Conditional_13_For_16_Template_button_click_16_listener() { const item_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openRecord(item_r18)); });
-    i0.ɵɵelement(17, "i", 108);
+    i0.ɵɵelementStart(15, "td", 96)(16, "button", 108);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_35_Conditional_13_For_16_Template_button_click_16_listener() { const item_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openRecord(item_r18)); });
+    i0.ɵɵelement(17, "i", 109);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const item_r18 = ctx.$implicit;
@@ -394,18 +394,18 @@ function MJListFormComponentExtended_Conditional_34_Conditional_13_For_16_Templa
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(14, 11, item_r18.detail.__mj_CreatedAt, "shortDate"), " ");
 } }
-function MJListFormComponentExtended_Conditional_34_Conditional_13_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_35_Conditional_13_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 99)(1, "button", 109);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Conditional_13_Conditional_20_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.goToPage(ctx_r1.itemsPage - 1)); });
-    i0.ɵɵelement(2, "i", 110);
+    i0.ɵɵelementStart(0, "div", 100)(1, "button", 110);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_35_Conditional_13_Conditional_20_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.goToPage(ctx_r1.itemsPage - 1)); });
+    i0.ɵɵelement(2, "i", 111);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 111);
+    i0.ɵɵelementStart(3, "span", 112);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 112);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Conditional_13_Conditional_20_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.goToPage(ctx_r1.itemsPage + 1)); });
-    i0.ɵɵelement(6, "i", 113);
+    i0.ɵɵelementStart(5, "button", 113);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_35_Conditional_13_Conditional_20_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.goToPage(ctx_r1.itemsPage + 1)); });
+    i0.ɵɵelement(6, "i", 114);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -416,31 +416,31 @@ function MJListFormComponentExtended_Conditional_34_Conditional_13_Conditional_2
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", ctx_r1.itemsPage >= ctx_r1.totalPages - 1);
 } }
-function MJListFormComponentExtended_Conditional_34_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_35_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 82);
-    i0.ɵɵconditionalCreate(1, MJListFormComponentExtended_Conditional_34_Conditional_13_Conditional_1_Template, 6, 1, "div", 88);
-    i0.ɵɵelementStart(2, "table", 89)(3, "thead")(4, "tr")(5, "th", 90)(6, "input", 91);
-    i0.ɵɵlistener("change", function MJListFormComponentExtended_Conditional_34_Conditional_13_Template_input_change_6_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleSelectAll()); });
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵconditionalCreate(1, MJListFormComponentExtended_Conditional_35_Conditional_13_Conditional_1_Template, 6, 1, "div", 89);
+    i0.ɵɵelementStart(2, "table", 90)(3, "thead")(4, "tr")(5, "th", 91)(6, "input", 92);
+    i0.ɵɵlistener("change", function MJListFormComponentExtended_Conditional_35_Conditional_13_Template_input_change_6_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleSelectAll()); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "th", 92);
+    i0.ɵɵelementStart(7, "th", 93);
     i0.ɵɵtext(8, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "th", 93);
+    i0.ɵɵelementStart(9, "th", 94);
     i0.ɵɵtext(10, "Record ID");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "th", 94);
+    i0.ɵɵelementStart(11, "th", 95);
     i0.ɵɵtext(12, "Added");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(13, "th", 95);
+    i0.ɵɵelement(13, "th", 96);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(14, "tbody");
-    i0.ɵɵrepeaterCreate(15, MJListFormComponentExtended_Conditional_34_Conditional_13_For_16_Template, 18, 14, "tr", 96, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(15, MJListFormComponentExtended_Conditional_35_Conditional_13_For_16_Template, 18, 14, "tr", 97, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 97)(18, "span", 98);
+    i0.ɵɵelementStart(17, "div", 98)(18, "span", 99);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(20, MJListFormComponentExtended_Conditional_34_Conditional_13_Conditional_20_Template, 7, 4, "div", 99);
+    i0.ɵɵconditionalCreate(20, MJListFormComponentExtended_Conditional_35_Conditional_13_Conditional_20_Template, 7, 4, "div", 100);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -455,24 +455,24 @@ function MJListFormComponentExtended_Conditional_34_Conditional_13_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.totalPages > 1 ? 20 : -1);
 } }
-function MJListFormComponentExtended_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_35_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "section", 16)(1, "div", 72)(2, "h2");
+    i0.ɵɵelementStart(0, "section", 17)(1, "div", 73)(2, "h2");
     i0.ɵɵtext(3, "List Items");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 73)(5, "div", 74);
-    i0.ɵɵelement(6, "i", 75);
-    i0.ɵɵelementStart(7, "input", 76);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJListFormComponentExtended_Conditional_34_Template_input_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.itemSearchTerm, $event) || (ctx_r1.itemSearchTerm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(4, "div", 74)(5, "div", 75);
+    i0.ɵɵelement(6, "i", 76);
+    i0.ɵɵelementStart(7, "input", 77);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJListFormComponentExtended_Conditional_35_Template_input_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.itemSearchTerm, $event) || (ctx_r1.itemSearchTerm = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(8, MJListFormComponentExtended_Conditional_34_Conditional_8_Template, 7, 0, "div", 77);
-    i0.ɵɵelementStart(9, "button", 78);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_34_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshItems()); });
-    i0.ɵɵelement(10, "i", 79);
+    i0.ɵɵconditionalCreate(8, MJListFormComponentExtended_Conditional_35_Conditional_8_Template, 7, 0, "div", 78);
+    i0.ɵɵelementStart(9, "button", 79);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_35_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshItems()); });
+    i0.ɵɵelement(10, "i", 80);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(11, MJListFormComponentExtended_Conditional_34_Conditional_11_Template, 2, 0, "div", 80);
-    i0.ɵɵconditionalCreate(12, MJListFormComponentExtended_Conditional_34_Conditional_12_Template, 1, 1, "mj-empty-state", 81);
-    i0.ɵɵconditionalCreate(13, MJListFormComponentExtended_Conditional_34_Conditional_13_Template, 21, 5, "div", 82);
+    i0.ɵɵconditionalCreate(11, MJListFormComponentExtended_Conditional_35_Conditional_11_Template, 2, 0, "div", 81);
+    i0.ɵɵconditionalCreate(12, MJListFormComponentExtended_Conditional_35_Conditional_12_Template, 1, 1, "mj-empty-state", 82);
+    i0.ɵɵconditionalCreate(13, MJListFormComponentExtended_Conditional_35_Conditional_13_Template, 21, 5, "div", 83);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -487,22 +487,22 @@ function MJListFormComponentExtended_Conditional_34_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r1.isLoadingItems && ctx_r1.listItems.length > 0 ? 13 : -1);
 } }
-function MJListFormComponentExtended_Conditional_35_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_36_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 73)(1, "button", 66);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_35_Conditional_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openShareDialog()); });
-    i0.ɵɵelement(2, "i", 117);
+    i0.ɵɵelementStart(0, "div", 74)(1, "button", 67);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_36_Conditional_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openShareDialog()); });
+    i0.ɵɵelement(2, "i", 118);
     i0.ɵɵtext(3, " Manage Sharing ");
     i0.ɵɵelementEnd()();
 } }
-function MJListFormComponentExtended_Conditional_35_Conditional_5_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 118)(1, "div", 124);
-    i0.ɵɵelement(2, "i", 125);
+function MJListFormComponentExtended_Conditional_36_Conditional_5_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 119)(1, "div", 125);
+    i0.ɵɵelement(2, "i", 126);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 121)(4, "span", 122);
+    i0.ɵɵelementStart(3, "div", 122)(4, "span", 123);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 123);
+    i0.ɵɵelementStart(6, "span", 124);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -512,17 +512,17 @@ function MJListFormComponentExtended_Conditional_35_Conditional_5_Conditional_9_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("Pending Invitation", ctx_r1.stats.invitationCount !== 1 ? "s" : "");
 } }
-function MJListFormComponentExtended_Conditional_35_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114)(1, "div", 118)(2, "div", 119);
-    i0.ɵɵelement(3, "i", 120);
+function MJListFormComponentExtended_Conditional_36_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 115)(1, "div", 119)(2, "div", 120);
+    i0.ɵɵelement(3, "i", 121);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 121)(5, "span", 122);
+    i0.ɵɵelementStart(4, "div", 122)(5, "span", 123);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 123);
+    i0.ɵɵelementStart(7, "span", 124);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(9, MJListFormComponentExtended_Conditional_35_Conditional_5_Conditional_9_Template, 8, 2, "div", 118);
+    i0.ɵɵconditionalCreate(9, MJListFormComponentExtended_Conditional_36_Conditional_5_Conditional_9_Template, 8, 2, "div", 119);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -533,31 +533,31 @@ function MJListFormComponentExtended_Conditional_35_Conditional_5_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.stats.invitationCount > 0 ? 9 : -1);
 } }
-function MJListFormComponentExtended_Conditional_35_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_36_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-empty-state", 126);
-    i0.ɵɵlistener("Action", function MJListFormComponentExtended_Conditional_35_Conditional_6_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openShareDialog()); });
+    i0.ɵɵelementStart(0, "mj-empty-state", 127);
+    i0.ɵɵlistener("Action", function MJListFormComponentExtended_Conditional_36_Conditional_6_Template_mj_empty_state_Action_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openShareDialog()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("Message", ctx_r1.isCurrentUserOwner() ? "This list is private. Click \"Manage Sharing\" to share it with other users or roles." : "This list hasn't been shared with anyone else.")("ActionText", ctx_r1.isCurrentUserOwner() ? "Share This List" : "");
 } }
-function MJListFormComponentExtended_Conditional_35_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 116);
-    i0.ɵɵelement(1, "i", 43);
+function MJListFormComponentExtended_Conditional_36_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 117);
+    i0.ɵɵelement(1, "i", 44);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Only the list owner can manage sharing settings.");
     i0.ɵɵelementEnd()();
 } }
-function MJListFormComponentExtended_Conditional_35_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 17)(1, "div", 72)(2, "h2");
+function MJListFormComponentExtended_Conditional_36_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 18)(1, "div", 73)(2, "h2");
     i0.ɵɵtext(3, "Sharing");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_Conditional_35_Conditional_4_Template, 4, 0, "div", 73);
+    i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_Conditional_36_Conditional_4_Template, 4, 0, "div", 74);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, MJListFormComponentExtended_Conditional_35_Conditional_5_Template, 10, 3, "div", 114);
-    i0.ɵɵconditionalCreate(6, MJListFormComponentExtended_Conditional_35_Conditional_6_Template, 1, 2, "mj-empty-state", 115);
-    i0.ɵɵconditionalCreate(7, MJListFormComponentExtended_Conditional_35_Conditional_7_Template, 4, 0, "div", 116);
+    i0.ɵɵconditionalCreate(5, MJListFormComponentExtended_Conditional_36_Conditional_5_Template, 10, 3, "div", 115);
+    i0.ɵɵconditionalCreate(6, MJListFormComponentExtended_Conditional_36_Conditional_6_Template, 1, 2, "mj-empty-state", 116);
+    i0.ɵɵconditionalCreate(7, MJListFormComponentExtended_Conditional_36_Conditional_7_Template, 4, 0, "div", 117);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -570,31 +570,31 @@ function MJListFormComponentExtended_Conditional_35_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r1.isCurrentUserOwner() && (ctx_r1.stats.shareCount > 0 || ctx_r1.stats.invitationCount > 0) ? 7 : -1);
 } }
-function MJListFormComponentExtended_Conditional_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 18)(1, "div", 72)(2, "h2");
+function MJListFormComponentExtended_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 19)(1, "div", 73)(2, "h2");
     i0.ɵɵtext(3, "Activity");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 127)(5, "div", 128)(6, "div", 129);
-    i0.ɵɵelement(7, "i", 130);
+    i0.ɵɵelementStart(4, "div", 128)(5, "div", 129)(6, "div", 130);
+    i0.ɵɵelement(7, "i", 131);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 131)(9, "p", 132);
+    i0.ɵɵelementStart(8, "div", 132)(9, "p", 133);
     i0.ɵɵtext(10, "List updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 133);
+    i0.ɵɵelementStart(11, "span", 134);
     i0.ɵɵtext(12);
     i0.ɵɵpipe(13, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "div", 128)(15, "div", 134);
-    i0.ɵɵelement(16, "i", 84);
+    i0.ɵɵelementStart(14, "div", 129)(15, "div", 135);
+    i0.ɵɵelement(16, "i", 85);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 131)(18, "p", 132);
+    i0.ɵɵelementStart(17, "div", 132)(18, "p", 133);
     i0.ɵɵtext(19, "List created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "span", 133);
+    i0.ɵɵelementStart(20, "span", 134);
     i0.ɵɵtext(21);
     i0.ɵɵpipe(22, "date");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(23, "div", 135)(24, "p");
+    i0.ɵɵelementStart(23, "div", 136)(24, "p");
     i0.ɵɵtext(25, "Detailed activity tracking coming soon. You'll be able to see who added items, when shares were created, and more.");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -604,15 +604,15 @@ function MJListFormComponentExtended_Conditional_36_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(9);
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(22, 5, ctx_r1.record.__mj_CreatedAt, "medium"));
 } }
-function MJListFormComponentExtended_Conditional_37_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 19)(1, "div", 72)(2, "h2");
+function MJListFormComponentExtended_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "section", 20)(1, "div", 73)(2, "h2");
     i0.ɵɵtext(3, "Settings");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 136)(5, "mj-collapsible-panel", 137)(6, "div", 138);
-    i0.ɵɵelement(7, "mj-form-field", 139)(8, "mj-form-field", 140)(9, "mj-form-field", 141);
+    i0.ɵɵelementStart(4, "div", 137)(5, "mj-collapsible-panel", 138)(6, "div", 139);
+    i0.ɵɵelement(7, "mj-form-field", 140)(8, "mj-form-field", 141)(9, "mj-form-field", 142);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "mj-collapsible-panel", 142)(11, "div", 138);
-    i0.ɵɵelement(12, "mj-form-field", 143)(13, "mj-form-field", 144)(14, "mj-form-field", 145)(15, "mj-form-field", 146);
+    i0.ɵɵelementStart(10, "mj-collapsible-panel", 143)(11, "div", 139);
+    i0.ɵɵelement(12, "mj-form-field", 144)(13, "mj-form-field", 145)(14, "mj-form-field", 146)(15, "mj-form-field", 147);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -635,61 +635,61 @@ function MJListFormComponentExtended_Conditional_37_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("Record", ctx_r1.record)("ShowLabel", true)("EditMode", false)("FormContext", ctx_r1.formContext);
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 149);
-    i0.ɵɵelement(1, "mj-loading", 152);
+function MJListFormComponentExtended_Conditional_39_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 150);
+    i0.ɵɵelement(1, "mj-loading", 153);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("text", "Adding " + ctx_r1.addTotal + " records to list...");
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 159);
-    i0.ɵɵelement(1, "mj-loading", 162);
+function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 160);
+    i0.ɵɵelement(1, "mj-loading", 163);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("showText", false);
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 160);
+function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 161);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("Title", "No records found matching \"" + ctx_r1.addRecordsSearchFilter + "\"");
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 161);
+function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 162);
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 170);
+function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_For_9_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 171);
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_For_9_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "input", 174);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_3_Template_input_click_0_listener($event) { return $event.stopPropagation(); })("change", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_3_Template_input_change_0_listener() { i0.ɵɵrestoreView(_r27); const record_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r26)); });
+    i0.ɵɵelementStart(0, "input", 175);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_For_9_Conditional_3_Template_input_click_0_listener($event) { return $event.stopPropagation(); })("change", function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_For_9_Conditional_3_Template_input_change_0_listener() { i0.ɵɵrestoreView(_r27); const record_r26 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r26)); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const record_r26 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵproperty("checked", record_r26.isSelected);
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 173);
+function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_For_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 174);
     i0.ɵɵtext(1, "In List");
     i0.ɵɵelementEnd();
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_For_9_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 168);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Template_div_click_0_listener() { const record_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r26)); });
-    i0.ɵɵelementStart(1, "div", 169);
-    i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_2_Template, 1, 0, "span", 170);
-    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_3_Template, 1, 1, "input", 171);
+    i0.ɵɵelementStart(0, "div", 169);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_For_9_Template_div_click_0_listener() { const record_r26 = i0.ɵɵrestoreView(_r25).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r26)); });
+    i0.ɵɵelementStart(1, "div", 170);
+    i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_For_9_Conditional_2_Template, 1, 0, "span", 171);
+    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_For_9_Conditional_3_Template, 1, 1, "input", 172);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 172);
+    i0.ɵɵelementStart(4, "div", 173);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(6, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Conditional_6_Template, 2, 0, "span", 173);
+    i0.ɵɵconditionalCreate(6, MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_For_9_Conditional_6_Template, 2, 0, "span", 174);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const record_r26 = ctx.$implicit;
@@ -703,21 +703,21 @@ function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10
     i0.ɵɵadvance();
     i0.ɵɵconditional(record_r26.isInList ? 6 : -1);
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 163)(1, "button", 164);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectAllAddable()); });
+    i0.ɵɵelementStart(0, "div", 164)(1, "button", 165);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectAllAddable()); });
     i0.ɵɵtext(2, "Select All");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 164);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.deselectAllAddable()); });
+    i0.ɵɵelementStart(3, "button", 165);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r24); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.deselectAllAddable()); });
     i0.ɵɵtext(4, "Deselect All");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 165);
+    i0.ɵɵelementStart(5, "span", 166);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 166);
-    i0.ɵɵrepeaterCreate(8, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_For_9_Template, 7, 8, "div", 167, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(7, "div", 167);
+    i0.ɵɵrepeaterCreate(8, MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_For_9_Template, 7, 8, "div", 168, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -726,22 +726,22 @@ function MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10
     i0.ɵɵadvance(2);
     i0.ɵɵrepeater(ctx_r1.addableRecords);
 } }
-function MJListFormComponentExtended_Conditional_38_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_39_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 153)(1, "div", 154);
-    i0.ɵɵelement(2, "span", 155);
-    i0.ɵɵelementStart(3, "input", 156);
-    i0.ɵɵtwoWayListener("ngModelChange", function MJListFormComponentExtended_Conditional_38_Conditional_3_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.addRecordsSearchFilter, $event) || (ctx_r1.addRecordsSearchFilter = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function MJListFormComponentExtended_Conditional_38_Conditional_3_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAddRecordsSearchChange($event)); });
+    i0.ɵɵelementStart(0, "div", 154)(1, "div", 155);
+    i0.ɵɵelement(2, "span", 156);
+    i0.ɵɵelementStart(3, "input", 157);
+    i0.ɵɵtwoWayListener("ngModelChange", function MJListFormComponentExtended_Conditional_39_Conditional_3_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.addRecordsSearchFilter, $event) || (ctx_r1.addRecordsSearchFilter = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function MJListFormComponentExtended_Conditional_39_Conditional_3_Template_input_ngModelChange_3_listener($event) { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAddRecordsSearchChange($event)); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "span", 157);
+    i0.ɵɵelementStart(4, "span", 158);
     i0.ɵɵtext(5, "Type at least 2 characters to search");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 158);
-    i0.ɵɵconditionalCreate(7, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_7_Template, 2, 1, "div", 159);
-    i0.ɵɵconditionalCreate(8, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_8_Template, 1, 1, "mj-empty-state", 160);
-    i0.ɵɵconditionalCreate(9, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_9_Template, 1, 0, "mj-empty-state", 161);
-    i0.ɵɵconditionalCreate(10, MJListFormComponentExtended_Conditional_38_Conditional_3_Conditional_10_Template, 10, 1);
+    i0.ɵɵelementStart(6, "div", 159);
+    i0.ɵɵconditionalCreate(7, MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_7_Template, 2, 1, "div", 160);
+    i0.ɵɵconditionalCreate(8, MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_8_Template, 1, 1, "mj-empty-state", 161);
+    i0.ɵɵconditionalCreate(9, MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_9_Template, 1, 0, "mj-empty-state", 162);
+    i0.ɵɵconditionalCreate(10, MJListFormComponentExtended_Conditional_39_Conditional_3_Conditional_10_Template, 10, 1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -757,20 +757,20 @@ function MJListFormComponentExtended_Conditional_38_Conditional_3_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r1.addDialogLoading && ctx_r1.addableRecords.length > 0 ? 10 : -1);
 } }
-function MJListFormComponentExtended_Conditional_38_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_39_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dialog", 147);
-    i0.ɵɵlistener("Close", function MJListFormComponentExtended_Conditional_38_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddRecordsDialog()); });
-    i0.ɵɵelementStart(1, "div", 148);
-    i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_38_Conditional_2_Template, 2, 1, "div", 149);
-    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_38_Conditional_3_Template, 11, 6);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "mj-dialog-actions")(5, "button", 150);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddRecords()); });
+    i0.ɵɵelementStart(0, "mj-dialog", 148);
+    i0.ɵɵlistener("Close", function MJListFormComponentExtended_Conditional_39_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddRecordsDialog()); });
+    i0.ɵɵelementStart(1, "div", 149);
+    i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_39_Conditional_2_Template, 2, 1, "div", 150);
+    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_39_Conditional_3_Template, 11, 6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "mj-dialog-actions")(5, "button", 151);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_39_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddRecords()); });
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 151);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_38_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddRecordsDialog()); });
+    i0.ɵɵelementStart(7, "button", 152);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_39_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddRecordsDialog()); });
     i0.ɵɵtext(8, " Cancel ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -787,37 +787,37 @@ function MJListFormComponentExtended_Conditional_38_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", ctx_r1.addDialogSaving);
 } }
-function MJListFormComponentExtended_Conditional_39_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 149);
-    i0.ɵɵelement(1, "mj-loading", 177);
+function MJListFormComponentExtended_Conditional_40_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 150);
+    i0.ɵɵelement(1, "mj-loading", 178);
     i0.ɵɵelementEnd();
 } }
-function MJListFormComponentExtended_Conditional_39_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 149);
-    i0.ɵɵelement(1, "mj-loading", 152);
+function MJListFormComponentExtended_Conditional_40_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 150);
+    i0.ɵɵelement(1, "mj-loading", 153);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵproperty("text", "Adding " + ctx_r1.addFromViewTotal + " records to list...");
 } }
-function MJListFormComponentExtended_Conditional_39_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 149);
-    i0.ɵɵelement(1, "mj-loading", 178);
+function MJListFormComponentExtended_Conditional_40_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 150);
+    i0.ɵɵelement(1, "mj-loading", 179);
     i0.ɵɵelementEnd();
 } }
-function MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-empty-state", 181);
+function MJListFormComponentExtended_Conditional_40_Conditional_5_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-empty-state", 182);
 } }
-function MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_40_Conditional_5_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 183);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_4_For_1_Template_div_click_0_listener() { const view_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleViewSelection(view_r30)); });
-    i0.ɵɵelementStart(1, "input", 174);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_4_For_1_Template_input_click_1_listener($event) { return $event.stopPropagation(); })("change", function MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_4_For_1_Template_input_change_1_listener() { const view_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleViewSelection(view_r30)); });
+    i0.ɵɵelementStart(0, "div", 184);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_40_Conditional_5_Conditional_4_For_1_Template_div_click_0_listener() { const view_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleViewSelection(view_r30)); });
+    i0.ɵɵelementStart(1, "input", 175);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_40_Conditional_5_Conditional_4_For_1_Template_input_click_1_listener($event) { return $event.stopPropagation(); })("change", function MJListFormComponentExtended_Conditional_40_Conditional_5_Conditional_4_For_1_Template_input_change_1_listener() { const view_r30 = i0.ɵɵrestoreView(_r29).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleViewSelection(view_r30)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(2, "span", 184);
-    i0.ɵɵelementStart(3, "span", 185);
+    i0.ɵɵelement(2, "span", 185);
+    i0.ɵɵelementStart(3, "span", 186);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -829,19 +829,19 @@ function MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_4_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(view_r30.Name);
 } }
-function MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_4_For_1_Template, 5, 4, "div", 182, i0.ɵɵrepeaterTrackByIdentity);
+function MJListFormComponentExtended_Conditional_40_Conditional_5_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, MJListFormComponentExtended_Conditional_40_Conditional_5_Conditional_4_For_1_Template, 5, 4, "div", 183, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵrepeater(ctx_r1.userViews);
 } }
-function MJListFormComponentExtended_Conditional_39_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 179);
+function MJListFormComponentExtended_Conditional_40_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 180);
     i0.ɵɵtext(1, "Select views to add their records to this list:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 180);
-    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_3_Template, 1, 0, "mj-empty-state", 181);
-    i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_Conditional_39_Conditional_5_Conditional_4_Template, 2, 0);
+    i0.ɵɵelementStart(2, "div", 181);
+    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_40_Conditional_5_Conditional_3_Template, 1, 0, "mj-empty-state", 182);
+    i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_Conditional_40_Conditional_5_Conditional_4_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -850,22 +850,22 @@ function MJListFormComponentExtended_Conditional_39_Conditional_5_Template(rf, c
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.userViews && ctx_r1.userViews.length > 0 ? 4 : -1);
 } }
-function MJListFormComponentExtended_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_40_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dialog", 175);
-    i0.ɵɵlistener("Close", function MJListFormComponentExtended_Conditional_39_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddFromViewDialog()); });
-    i0.ɵɵelementStart(1, "div", 176);
-    i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_39_Conditional_2_Template, 2, 0, "div", 149);
-    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_39_Conditional_3_Template, 2, 1, "div", 149);
-    i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_Conditional_39_Conditional_4_Template, 2, 0, "div", 149);
-    i0.ɵɵconditionalCreate(5, MJListFormComponentExtended_Conditional_39_Conditional_5_Template, 5, 2);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "mj-dialog-actions")(7, "button", 150);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_39_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddFromView()); });
+    i0.ɵɵelementStart(0, "mj-dialog", 176);
+    i0.ɵɵlistener("Close", function MJListFormComponentExtended_Conditional_40_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddFromViewDialog()); });
+    i0.ɵɵelementStart(1, "div", 177);
+    i0.ɵɵconditionalCreate(2, MJListFormComponentExtended_Conditional_40_Conditional_2_Template, 2, 0, "div", 150);
+    i0.ɵɵconditionalCreate(3, MJListFormComponentExtended_Conditional_40_Conditional_3_Template, 2, 1, "div", 150);
+    i0.ɵɵconditionalCreate(4, MJListFormComponentExtended_Conditional_40_Conditional_4_Template, 2, 0, "div", 150);
+    i0.ɵɵconditionalCreate(5, MJListFormComponentExtended_Conditional_40_Conditional_5_Template, 5, 2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "mj-dialog-actions")(7, "button", 151);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_40_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddFromView()); });
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 151);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_39_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddFromViewDialog()); });
+    i0.ɵɵelementStart(9, "button", 152);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_40_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r28); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddFromViewDialog()); });
     i0.ɵɵtext(10, " Cancel ");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -886,24 +886,24 @@ function MJListFormComponentExtended_Conditional_39_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", ctx_r1.showAddFromViewLoader);
 } }
-function MJListFormComponentExtended_Conditional_40_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_41_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-list-share-dialog", 186);
-    i0.ɵɵlistener("complete", function MJListFormComponentExtended_Conditional_40_Template_mj_list_share_dialog_complete_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onShareDialogComplete($event)); })("cancel", function MJListFormComponentExtended_Conditional_40_Template_mj_list_share_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onShareDialogCancel()); })("manageInvitations", function MJListFormComponentExtended_Conditional_40_Template_mj_list_share_dialog_manageInvitations_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openInvitationsDialog()); })("viewAuditLog", function MJListFormComponentExtended_Conditional_40_Template_mj_list_share_dialog_viewAuditLog_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openAuditLogDialog()); });
+    i0.ɵɵelementStart(0, "mj-list-share-dialog", 187);
+    i0.ɵɵlistener("complete", function MJListFormComponentExtended_Conditional_41_Template_mj_list_share_dialog_complete_0_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onShareDialogComplete($event)); })("cancel", function MJListFormComponentExtended_Conditional_41_Template_mj_list_share_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onShareDialogCancel()); })("manageInvitations", function MJListFormComponentExtended_Conditional_41_Template_mj_list_share_dialog_manageInvitations_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openInvitationsDialog()); })("viewAuditLog", function MJListFormComponentExtended_Conditional_41_Template_mj_list_share_dialog_viewAuditLog_0_listener() { i0.ɵɵrestoreView(_r31); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openAuditLogDialog()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵproperty("config", ctx_r1.shareDialogConfig)("visible", ctx_r1.showShareDialog);
 } }
-function MJListFormComponentExtended_Conditional_41_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_42_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dialog", 187);
-    i0.ɵɵlistener("Close", function MJListFormComponentExtended_Conditional_41_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeInvitationsDialog()); });
-    i0.ɵɵelementStart(1, "div", 188);
-    i0.ɵɵelement(2, "mj-list-invitations", 189);
+    i0.ɵɵelementStart(0, "mj-dialog", 188);
+    i0.ɵɵlistener("Close", function MJListFormComponentExtended_Conditional_42_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeInvitationsDialog()); });
+    i0.ɵɵelementStart(1, "div", 189);
+    i0.ɵɵelement(2, "mj-list-invitations", 190);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "mj-dialog-actions")(4, "button", 190);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_41_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeInvitationsDialog()); });
+    i0.ɵɵelementStart(3, "mj-dialog-actions")(4, "button", 191);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_42_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r32); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeInvitationsDialog()); });
     i0.ɵɵtext(5, "Close");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -912,15 +912,15 @@ function MJListFormComponentExtended_Conditional_41_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("Provider", ctx_r1.ProviderToUse)("ListID", ctx_r1.record.ID)("ListName", ctx_r1.record.Name);
 } }
-function MJListFormComponentExtended_Conditional_42_Template(rf, ctx) { if (rf & 1) {
+function MJListFormComponentExtended_Conditional_43_Template(rf, ctx) { if (rf & 1) {
     const _r33 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-dialog", 187);
-    i0.ɵɵlistener("Close", function MJListFormComponentExtended_Conditional_42_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAuditLogDialog()); });
-    i0.ɵɵelementStart(1, "div", 191);
-    i0.ɵɵelement(2, "mj-list-audit-log", 192);
+    i0.ɵɵelementStart(0, "mj-dialog", 188);
+    i0.ɵɵlistener("Close", function MJListFormComponentExtended_Conditional_43_Template_mj_dialog_Close_0_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAuditLogDialog()); });
+    i0.ɵɵelementStart(1, "div", 192);
+    i0.ɵɵelement(2, "mj-list-audit-log", 193);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "mj-dialog-actions")(4, "button", 190);
-    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_42_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAuditLogDialog()); });
+    i0.ɵɵelementStart(3, "mj-dialog-actions")(4, "button", 191);
+    i0.ɵɵlistener("click", function MJListFormComponentExtended_Conditional_43_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r33); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAuditLogDialog()); });
     i0.ɵɵtext(5, "Close");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -1530,6 +1530,18 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
         });
     }
     // === Navigation ===
+    /** The enabled rail items as `mj-section-picker` items: same order, the badge as the count. */
+    get SectionPickerItems() {
+        return this.NavItems
+            .filter((item) => !item.disabled)
+            .map((item) => ({ Key: item.id, Title: item.label, Icon: item.icon, Count: item.badge ?? null }));
+    }
+    /** A pick from the phone section sheet; a key that names no rail item is ignored. */
+    OnSectionPicked(key) {
+        const item = this.NavItems.find((i) => i.id === key);
+        if (item)
+            this.SetActiveSection(item.id);
+    }
     SetActiveSection(section) {
         const navItem = this.NavItems.find(n => n.id === section);
         if (navItem?.disabled)
@@ -1896,7 +1908,7 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
         }
         const rv = RunView.FromMetadataProvider(this.ProviderToUse);
         const result = await rv.RunView({
-            EntityName: this.record.Entity,
+            EntityName: sourceEntityInfo.Name,
             ExtraFilter: filter,
             MaxRows: 100,
             ResultType: 'simple'
@@ -2207,7 +2219,7 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
         return this.CloseAuditLogDialog();
     }
     static { this.ɵfac = /*@__PURE__*/ (() => { let ɵMJListFormComponentExtended_BaseFactory; return function MJListFormComponentExtended_Factory(__ngFactoryType__) { return (ɵMJListFormComponentExtended_BaseFactory || (ɵMJListFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(MJListFormComponentExtended)))(__ngFactoryType__ || MJListFormComponentExtended); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJListFormComponentExtended, selectors: [["mj-list-form-extended"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 43, vars: 22, consts: [["nameInput", ""], [1, "list-form-explorer"], [1, "list-header"], [1, "header-content"], [1, "header-icon"], [1, "header-info"], [1, "name-row"], [1, "entity-badge"], [1, "header-stats"], [1, "stat-item"], [1, "stat-value"], [1, "stat-label"], [1, "nav-rail"], [1, "nav-item", 3, "active", "disabled", "title"], [1, "main-content"], [1, "section", "overview-section"], [1, "section", "items-section"], [1, "section", "sharing-section"], [1, "section", "activity-section"], [1, "section", "settings-section"], [3, "Title", "Visible", "MinWidth", "Width", "Height"], ["Title", "Add Records from Views", 3, "Visible", "MinWidth", "Width", "Height"], [3, "config", "visible"], [3, "Visible", "Title", "MinWidth", "Width", "Height"], [1, "list-name"], ["title", "Edit name", 1, "edit-btn"], ["title", "Edit name", 1, "edit-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["type", "text", 1, "inline-edit-input", "name-input", 3, "ngModelChange", "keydown.enter", "keydown.escape", "ngModel"], [1, "save-btn", 3, "click"], [1, "fa-solid", "fa-check"], [1, "cancel-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "nav-item", 3, "click", "title"], [1, "nav-label"], [1, "nav-badge"], [1, "overview-grid"], [1, "overview-card", "description-card"], [1, "card-header"], [1, "fa-solid", "fa-align-left"], [1, "edit-btn"], [1, "card-body"], [1, "overview-card", "details-card"], [1, "fa-solid", "fa-info-circle"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "detail-icon"], [1, "category-select", 3, "ngModel"], [1, "fa-solid", "fa-user", "detail-icon"], [1, "owner-badge"], [1, "fa-solid", "fa-calendar", "detail-icon"], [1, "overview-card", "actions-card"], [1, "fa-solid", "fa-bolt"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "action-count"], [1, "action-btn"], ["title", "Coming soon", 1, "action-btn", 3, "disabled"], [1, "fa-solid", "fa-file-export"], [1, "coming-soon"], [1, "edit-btn", 3, "click"], [1, "description-text"], [1, "description-empty"], ["placeholder", "Add a description...", "rows", "3", 1, "inline-edit-input", "description-input", 3, "ngModelChange", "keydown.escape", "ngModel"], [1, "edit-actions"], [1, "btn-primary", 3, "click"], [1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-folder", "detail-icon"], [1, "category-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "fa-solid", "fa-share-nodes"], [1, "section-header"], [1, "section-actions"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search this page...", 3, "ngModelChange", "ngModel"], [1, "add-buttons"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "loading-state"], ["Icon", "fa-solid fa-inbox", "Title", "No Items Yet", 3, "Message"], [1, "items-table-container"], ["title", "Add individual records", 1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Add records from a saved view", 1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-table-list"], ["text", "Loading items...", "size", "medium"], [1, "items-toolbar"], [1, "items-table"], [1, "col-checkbox"], ["type", "checkbox", 3, "change", "checked"], [1, "col-name"], [1, "col-id"], [1, "col-added"], [1, "col-actions"], [3, "selected"], [1, "items-footer"], [1, "items-count"], [1, "items-pager"], [1, "selection-count"], [1, "btn-danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "item-name"], [1, "item-icon"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "record-id"], ["title", "Open record", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], ["title", "Previous page", 1, "btn-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-left"], [1, "page-label"], ["title", "Next page", 1, "btn-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-right"], [1, "sharing-summary"], ["Icon", "fa-solid fa-share-nodes", "Title", "Not Shared Yet", "ActionIcon", "fa-solid fa-user-plus", 3, "Message", "ActionText"], [1, "readonly-notice"], [1, "fa-solid", "fa-user-plus"], [1, "summary-card"], [1, "summary-icon"], [1, "fa-solid", "fa-users"], [1, "summary-content"], [1, "summary-value"], [1, "summary-label"], [1, "summary-icon", "pending"], [1, "fa-solid", "fa-envelope"], ["Icon", "fa-solid fa-share-nodes", "Title", "Not Shared Yet", "ActionIcon", "fa-solid fa-user-plus", 3, "Action", "Message", "ActionText"], [1, "activity-timeline"], [1, "timeline-item"], [1, "timeline-icon"], [1, "fa-solid", "fa-edit"], [1, "timeline-content"], [1, "timeline-text"], [1, "timeline-date"], [1, "timeline-icon", "create"], [1, "activity-info"], [1, "settings-form"], ["SectionKey", "listSettings", "SectionName", "List Settings", "Icon", "fa fa-cog", 3, "Form", "FormContext"], [1, "form-body"], ["FieldName", "Name", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "Description", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "CategoryID", "Type", "textbox", "LinkType", "Record", "LinkComponentType", "Search", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["SectionKey", "systemInfo", "SectionName", "System Information", "Icon", "fa fa-info-circle", 3, "Form", "FormContext"], ["FieldName", "EntityID", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "UserID", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], [3, "Close", "Title", "Visible", "MinWidth", "Width", "Height"], [1, "dialog-content", "add-records-dialog"], [1, "dialog-loading"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], ["mjButton", "", 3, "click", "disabled"], ["size", "small", 3, "text"], [1, "search-section"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", 1, "mj-input", "search-input", 3, "ngModelChange", "placeholder", "ngModel"], [1, "search-hint"], [1, "records-list"], [1, "list-loading"], ["Variant", "no-results", "Size", "compact", 3, "Title"], ["Size", "compact", "Icon", "fa-solid fa-list", "Title", "Search for records to add to this list"], ["size", "small", 3, "showText"], [1, "selection-controls"], ["mjButton", "", "variant", "flat", 3, "click"], [1, "selection-info"], [1, "records-scroll"], [1, "record-item", 3, "in-list", "selected"], [1, "record-item", 3, "click"], [1, "record-checkbox"], ["title", "Already in list", 1, "fa-solid", "fa-check", "in-list-icon"], ["type", "checkbox", 3, "checked"], [1, "record-name"], [1, "in-list-badge"], ["type", "checkbox", 3, "click", "change", "checked"], ["Title", "Add Records from Views", 3, "Close", "Visible", "MinWidth", "Width", "Height"], [1, "dialog-content"], ["text", "Loading records from views...", "size", "small"], ["text", "Loading views...", "size", "small"], [1, "dialog-instruction"], [1, "views-list"], ["Size", "compact", "Icon", "fa-solid fa-folder-open", "Title", "No saved views found for this entity"], [1, "view-item", 3, "selected"], [1, "view-item", 3, "click"], [1, "fa-solid", "fa-table-list", "view-icon"], [1, "view-name"], [3, "complete", "cancel", "manageInvitations", "viewAuditLog", "config", "visible"], [3, "Close", "Visible", "Title", "MinWidth", "Width", "Height"], [1, "dialog-content", "invitations-dialog"], [3, "Provider", "ListID", "ListName"], ["mjButton", "", "variant", "outline", 3, "click"], [1, "dialog-content", "audit-log-dialog"], [3, "Provider", "ListID"]], template: function MJListFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: MJListFormComponentExtended, selectors: [["mj-list-form-extended"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 44, vars: 24, consts: [["nameInput", ""], [1, "list-form-explorer"], [1, "list-header"], [1, "header-content"], [1, "header-icon"], [1, "header-info"], [1, "name-row"], [1, "entity-badge"], [1, "header-stats"], [1, "stat-item"], [1, "stat-value"], [1, "stat-label"], [1, "phone-section-picker", 3, "ActiveKeyChange", "Items", "ActiveKey"], [1, "nav-rail"], [1, "nav-item", 3, "active", "disabled", "title"], [1, "main-content"], [1, "section", "overview-section"], [1, "section", "items-section"], [1, "section", "sharing-section"], [1, "section", "activity-section"], [1, "section", "settings-section"], [3, "Title", "Visible", "MinWidth", "Width", "Height"], ["Title", "Add Records from Views", 3, "Visible", "MinWidth", "Width", "Height"], [3, "config", "visible"], [3, "Visible", "Title", "MinWidth", "Width", "Height"], [1, "list-name"], ["title", "Edit name", 1, "edit-btn"], ["title", "Edit name", 1, "edit-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["type", "text", 1, "inline-edit-input", "name-input", 3, "ngModelChange", "keydown.enter", "keydown.escape", "ngModel"], [1, "save-btn", 3, "click"], [1, "fa-solid", "fa-check"], [1, "cancel-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "nav-item", 3, "click", "title"], [1, "nav-label"], [1, "nav-badge"], [1, "overview-grid"], [1, "overview-card", "description-card"], [1, "card-header"], [1, "fa-solid", "fa-align-left"], [1, "edit-btn"], [1, "card-body"], [1, "overview-card", "details-card"], [1, "fa-solid", "fa-info-circle"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "detail-icon"], [1, "category-select", 3, "ngModel"], [1, "fa-solid", "fa-user", "detail-icon"], [1, "owner-badge"], [1, "fa-solid", "fa-calendar", "detail-icon"], [1, "overview-card", "actions-card"], [1, "fa-solid", "fa-bolt"], [1, "action-btn", 3, "click"], [1, "fa-solid", "fa-list"], [1, "action-count"], [1, "action-btn"], ["title", "Coming soon", 1, "action-btn", 3, "disabled"], [1, "fa-solid", "fa-file-export"], [1, "coming-soon"], [1, "edit-btn", 3, "click"], [1, "description-text"], [1, "description-empty"], ["placeholder", "Add a description...", "rows", "3", 1, "inline-edit-input", "description-input", 3, "ngModelChange", "keydown.escape", "ngModel"], [1, "edit-actions"], [1, "btn-primary", 3, "click"], [1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-folder", "detail-icon"], [1, "category-select", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "fa-solid", "fa-share-nodes"], [1, "section-header"], [1, "section-actions"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search this page...", 3, "ngModelChange", "ngModel"], [1, "add-buttons"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "loading-state"], ["Icon", "fa-solid fa-inbox", "Title", "No Items Yet", 3, "Message"], [1, "items-table-container"], ["title", "Add individual records", 1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Add records from a saved view", 1, "btn-secondary", 3, "click"], [1, "fa-solid", "fa-table-list"], ["text", "Loading items...", "size", "medium"], [1, "items-toolbar"], [1, "items-table"], [1, "col-checkbox"], ["type", "checkbox", 3, "change", "checked"], [1, "col-name"], [1, "col-id"], [1, "col-added"], [1, "col-actions"], [3, "selected"], [1, "items-footer"], [1, "items-count"], [1, "items-pager"], [1, "selection-count"], [1, "btn-danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "item-name"], [1, "item-icon"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "record-id"], ["title", "Open record", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], ["title", "Previous page", 1, "btn-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-left"], [1, "page-label"], ["title", "Next page", 1, "btn-icon", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-right"], [1, "sharing-summary"], ["Icon", "fa-solid fa-share-nodes", "Title", "Not Shared Yet", "ActionIcon", "fa-solid fa-user-plus", 3, "Message", "ActionText"], [1, "readonly-notice"], [1, "fa-solid", "fa-user-plus"], [1, "summary-card"], [1, "summary-icon"], [1, "fa-solid", "fa-users"], [1, "summary-content"], [1, "summary-value"], [1, "summary-label"], [1, "summary-icon", "pending"], [1, "fa-solid", "fa-envelope"], ["Icon", "fa-solid fa-share-nodes", "Title", "Not Shared Yet", "ActionIcon", "fa-solid fa-user-plus", 3, "Action", "Message", "ActionText"], [1, "activity-timeline"], [1, "timeline-item"], [1, "timeline-icon"], [1, "fa-solid", "fa-edit"], [1, "timeline-content"], [1, "timeline-text"], [1, "timeline-date"], [1, "timeline-icon", "create"], [1, "activity-info"], [1, "settings-form"], ["SectionKey", "listSettings", "SectionName", "List Settings", "Icon", "fa fa-cog", 3, "Form", "FormContext"], [1, "form-body"], ["FieldName", "Name", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "Description", "Type", "textarea", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "CategoryID", "Type", "textbox", "LinkType", "Record", "LinkComponentType", "Search", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["SectionKey", "systemInfo", "SectionName", "System Information", "Icon", "fa fa-info-circle", 3, "Form", "FormContext"], ["FieldName", "EntityID", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "UserID", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "__mj_CreatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], ["FieldName", "__mj_UpdatedAt", "Type", "textbox", 3, "Record", "ShowLabel", "EditMode", "FormContext"], [3, "Close", "Title", "Visible", "MinWidth", "Width", "Height"], [1, "dialog-content", "add-records-dialog"], [1, "dialog-loading"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], ["mjButton", "", 3, "click", "disabled"], ["size", "small", 3, "text"], [1, "search-section"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", 1, "mj-input", "search-input", 3, "ngModelChange", "placeholder", "ngModel"], [1, "search-hint"], [1, "records-list"], [1, "list-loading"], ["Variant", "no-results", "Size", "compact", 3, "Title"], ["Size", "compact", "Icon", "fa-solid fa-list", "Title", "Search for records to add to this list"], ["size", "small", 3, "showText"], [1, "selection-controls"], ["mjButton", "", "variant", "flat", 3, "click"], [1, "selection-info"], [1, "records-scroll"], [1, "record-item", 3, "in-list", "selected"], [1, "record-item", 3, "click"], [1, "record-checkbox"], ["title", "Already in list", 1, "fa-solid", "fa-check", "in-list-icon"], ["type", "checkbox", 3, "checked"], [1, "record-name"], [1, "in-list-badge"], ["type", "checkbox", 3, "click", "change", "checked"], ["Title", "Add Records from Views", 3, "Close", "Visible", "MinWidth", "Width", "Height"], [1, "dialog-content"], ["text", "Loading records from views...", "size", "small"], ["text", "Loading views...", "size", "small"], [1, "dialog-instruction"], [1, "views-list"], ["Size", "compact", "Icon", "fa-solid fa-folder-open", "Title", "No saved views found for this entity"], [1, "view-item", 3, "selected"], [1, "view-item", 3, "click"], [1, "fa-solid", "fa-table-list", "view-icon"], [1, "view-name"], [3, "complete", "cancel", "manageInvitations", "viewAuditLog", "config", "visible"], [3, "Close", "Visible", "Title", "MinWidth", "Width", "Height"], [1, "dialog-content", "invitations-dialog"], [3, "Provider", "ListID", "ListName"], ["mjButton", "", "variant", "outline", 3, "click"], [1, "dialog-content", "audit-log-dialog"], [3, "Provider", "ListID"]], template: function MJListFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "header", 2)(2, "div", 3)(3, "div", 4);
             i0.ɵɵelement(4, "i");
             i0.ɵɵelementEnd();
@@ -2238,21 +2250,24 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
             i0.ɵɵelementStart(27, "span", 11);
             i0.ɵɵtext(28, "Updated");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(29, "nav", 12);
-            i0.ɵɵrepeaterCreate(30, MJListFormComponentExtended_For_31_Template, 5, 9, "button", 13, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementStart(29, "mj-section-picker", 12);
+            i0.ɵɵlistener("ActiveKeyChange", function MJListFormComponentExtended_Template_mj_section_picker_ActiveKeyChange_29_listener($event) { return ctx.OnSectionPicked($event); });
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(32, "main", 14);
-            i0.ɵɵconditionalCreate(33, MJListFormComponentExtended_Conditional_33_Template, 62, 18, "section", 15);
-            i0.ɵɵconditionalCreate(34, MJListFormComponentExtended_Conditional_34_Template, 14, 5, "section", 16);
-            i0.ɵɵconditionalCreate(35, MJListFormComponentExtended_Conditional_35_Template, 8, 4, "section", 17);
-            i0.ɵɵconditionalCreate(36, MJListFormComponentExtended_Conditional_36_Template, 26, 8, "section", 18);
-            i0.ɵɵconditionalCreate(37, MJListFormComponentExtended_Conditional_37_Template, 16, 32, "section", 19);
+            i0.ɵɵelementStart(30, "nav", 13);
+            i0.ɵɵrepeaterCreate(31, MJListFormComponentExtended_For_32_Template, 5, 9, "button", 14, i0.ɵɵrepeaterTrackByIdentity);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(33, "main", 15);
+            i0.ɵɵconditionalCreate(34, MJListFormComponentExtended_Conditional_34_Template, 62, 18, "section", 16);
+            i0.ɵɵconditionalCreate(35, MJListFormComponentExtended_Conditional_35_Template, 14, 5, "section", 17);
+            i0.ɵɵconditionalCreate(36, MJListFormComponentExtended_Conditional_36_Template, 8, 4, "section", 18);
+            i0.ɵɵconditionalCreate(37, MJListFormComponentExtended_Conditional_37_Template, 26, 8, "section", 19);
+            i0.ɵɵconditionalCreate(38, MJListFormComponentExtended_Conditional_38_Template, 16, 32, "section", 20);
             i0.ɵɵelementEnd()();
-            i0.ɵɵconditionalCreate(38, MJListFormComponentExtended_Conditional_38_Template, 9, 11, "mj-dialog", 20);
-            i0.ɵɵconditionalCreate(39, MJListFormComponentExtended_Conditional_39_Template, 11, 12, "mj-dialog", 21);
-            i0.ɵɵconditionalCreate(40, MJListFormComponentExtended_Conditional_40_Template, 1, 2, "mj-list-share-dialog", 22);
-            i0.ɵɵconditionalCreate(41, MJListFormComponentExtended_Conditional_41_Template, 6, 8, "mj-dialog", 23);
-            i0.ɵɵconditionalCreate(42, MJListFormComponentExtended_Conditional_42_Template, 6, 7, "mj-dialog", 23);
+            i0.ɵɵconditionalCreate(39, MJListFormComponentExtended_Conditional_39_Template, 9, 11, "mj-dialog", 21);
+            i0.ɵɵconditionalCreate(40, MJListFormComponentExtended_Conditional_40_Template, 11, 12, "mj-dialog", 22);
+            i0.ɵɵconditionalCreate(41, MJListFormComponentExtended_Conditional_41_Template, 1, 2, "mj-list-share-dialog", 23);
+            i0.ɵɵconditionalCreate(42, MJListFormComponentExtended_Conditional_42_Template, 6, 8, "mj-dialog", 24);
+            i0.ɵɵconditionalCreate(43, MJListFormComponentExtended_Conditional_43_Template, 6, 7, "mj-dialog", 24);
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵstyleProp("background-color", "var(--mj-brand-primary)");
@@ -2272,29 +2287,31 @@ let MJListFormComponentExtended = class MJListFormComponentExtended extends MJLi
             i0.ɵɵtextInterpolate(ctx.stats.shareCount);
             i0.ɵɵadvance(5);
             i0.ɵɵtextInterpolate(ctx.formattedLastUpdated);
-            i0.ɵɵadvance(4);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Items", ctx.SectionPickerItems)("ActiveKey", ctx.ActiveSection);
+            i0.ɵɵadvance(2);
             i0.ɵɵrepeater(ctx.navItems);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.activeSection === "overview" ? 33 : -1);
+            i0.ɵɵconditional(ctx.activeSection === "overview" ? 34 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeSection === "items" ? 34 : -1);
+            i0.ɵɵconditional(ctx.activeSection === "items" ? 35 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeSection === "sharing" ? 35 : -1);
+            i0.ɵɵconditional(ctx.activeSection === "sharing" ? 36 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeSection === "activity" ? 36 : -1);
+            i0.ɵɵconditional(ctx.activeSection === "activity" ? 37 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.activeSection === "settings" ? 37 : -1);
+            i0.ɵɵconditional(ctx.activeSection === "settings" ? 38 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showAddRecordsDialog ? 38 : -1);
+            i0.ɵɵconditional(ctx.showAddRecordsDialog ? 39 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showAddFromViewDialog ? 39 : -1);
+            i0.ɵɵconditional(ctx.showAddFromViewDialog ? 40 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showShareDialog && ctx.shareDialogConfig ? 40 : -1);
+            i0.ɵɵconditional(ctx.showShareDialog && ctx.shareDialogConfig ? 41 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showInvitationsDialog && (ctx.record == null ? null : ctx.record.IsSaved) ? 41 : -1);
+            i0.ɵɵconditional(ctx.showInvitationsDialog && (ctx.record == null ? null : ctx.record.IsSaved) ? 42 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.showAuditLogDialog && (ctx.record == null ? null : ctx.record.IsSaved) ? 42 : -1);
-        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJEmptyStateComponent, i2.MJButtonDirective, i2.MJDialogComponent, i2.MJDialogActionsComponent, i3.MjFormFieldComponent, i3.MjCollapsiblePanelComponent, i4.LoadingComponent, i5.ListAuditLogComponent, i5.ListInvitationsComponent, i5.ListShareDialogComponent, i6.DatePipe], styles: ["\n\n\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n\n.list-form-explorer[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"nav main\";\n    grid-template-columns: 64px 1fr;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    background: var(--mj-bg-surface-sunken);\n}\n\n\n.list-header[_ngcontent-%COMP%] {\n    grid-area: header;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.header-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-on-primary);\n    font-size: 24px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.header-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.name-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.list-name[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.edit-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.inline-edit-input[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 2px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: inherit;\n    background: var(--mj-bg-surface);\n    outline: none;\n}\n\n.name-input[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 600;\n    min-width: 300px;\n}\n\n.save-btn[_ngcontent-%COMP%], .cancel-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.save-btn[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.save-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.cancel-btn[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.cancel-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 16px;\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.entity-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 32px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n.nav-rail[_ngcontent-%COMP%] {\n    grid-area: nav;\n    display: flex;\n    flex-direction: column;\n    padding: 16px 8px;\n    background: var(--mj-text-primary);\n    gap: 4px;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    color: rgba(255, 255, 255, 0.6);\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover:not(.disabled) {\n    background: rgba(255, 255, 255, 0.1);\n    color: var(--mj-text-inverse);\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    color: color-mix(in srgb, var(--mj-brand-primary) 60%, white);\n}\n\n.nav-item.active[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 24px;\n    background: var(--mj-brand-primary);\n    border-radius: 0 3px 3px 0;\n}\n\n.nav-item.disabled[_ngcontent-%COMP%] {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n}\n\n.nav-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.nav-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--mj-brand-primary);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-brand-on-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n\n.main-content[_ngcontent-%COMP%] {\n    grid-area: main;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.section[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n.section-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.section-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n\n.search-box[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    width: 250px;\n    transition: all 0.2s;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n.overview-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 20px;\n}\n\n.overview-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.card-body[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.description-text[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    line-height: 1.6;\n}\n\n.description-empty[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.description-input[_ngcontent-%COMP%] {\n    width: 100%;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: background 0.2s;\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.owner-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.category-select[_ngcontent-%COMP%] {\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n}\n\n.category-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n\n.action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-bottom: 8px;\n    text-align: left;\n}\n\n.action-btn[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    width: 24px;\n    text-align: center;\n}\n\n.action-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-of-type {\n    flex: 1;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.action-count[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n\n.items-table-container[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.items-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 12px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.selection-count[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.items-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.items-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-align: left;\n    padding: 12px 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.items-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.items-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n    border-bottom: none;\n}\n\n.items-table[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.items-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover:not(.selected) {\n    background: var(--mj-bg-surface-card);\n}\n\n.col-checkbox[_ngcontent-%COMP%] {\n    width: 40px;\n}\n\n.col-name[_ngcontent-%COMP%] {\n    width: 35%;\n}\n\n.col-id[_ngcontent-%COMP%] {\n    width: 25%;\n}\n\n.col-added[_ngcontent-%COMP%] {\n    width: 20%;\n}\n\n.col-actions[_ngcontent-%COMP%] {\n    width: 60px;\n    text-align: right;\n}\n\n.item-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.item-name.loading[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.item-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.record-id[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n\n.items-footer[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.items-pager[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.items-pager[_ngcontent-%COMP%]   .page-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.items-count[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n\n.coming-soon-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: var(--mj-brand-primary);\n}\n\n.banner-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 8px;\n    color: var(--mj-text-primary);\n}\n\n.banner-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n}\n\n.shares-grid[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n.activity-timeline[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    margin-bottom: 20px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    padding: 16px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.timeline-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.timeline-icon.create[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.timeline-text[_ngcontent-%COMP%] {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.activity-info[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n\n.settings-form[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n.add-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.add-buttons[_ngcontent-%COMP%]   .btn-secondary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n.sharing-summary[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.summary-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    flex: 1;\n    max-width: 280px;\n}\n\n.summary-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.summary-icon.pending[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.summary-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.summary-value[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.summary-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.readonly-notice[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.readonly-notice[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 16px 0;\n}\n\n.dialog-loading[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    gap: 16px;\n}\n\n.dialog-instruction[_ngcontent-%COMP%] {\n    margin: 0 0 16px;\n    color: var(--mj-text-secondary);\n}\n\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-section[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .records-list[_ngcontent-%COMP%] {\n    min-height: 280px;\n    max-height: 320px;\n    overflow-y: auto;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .list-loading[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    padding: 40px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .selection-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .selection-info[_ngcontent-%COMP%] {\n    margin-left: auto;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .records-scroll[_ngcontent-%COMP%] {\n    max-height: 260px;\n    overflow-y: auto;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item.in-list[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    cursor: default;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-checkbox[_ngcontent-%COMP%] {\n    width: 20px;\n    display: flex;\n    justify-content: center;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .in-list-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 14px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .in-list-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n\n.views-list[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.view-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.view-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.view-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.view-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.view-item[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.view-item[_ngcontent-%COMP%]   .view-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 14px;\n}\n\n\n@media (max-width: 1024px) {\n    .list-form-explorer[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        grid-template-areas:\n            \"header\"\n            \"nav\"\n            \"main\";\n    }\n\n    .nav-rail[_ngcontent-%COMP%] {\n        flex-direction: row;\n        padding: 8px 16px;\n        overflow-x: auto;\n    }\n\n    .nav-item[_ngcontent-%COMP%] {\n        flex-direction: row;\n        padding: 10px 16px;\n        gap: 8px;\n    }\n\n    .nav-item[_ngcontent-%COMP%]::before {\n        display: none;\n    }\n\n    .header-stats[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .overview-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .section-actions[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n}", ".k-pane[_ngcontent-%COMP%] {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.k-splitter[_ngcontent-%COMP%] {\n  border-width: 0px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\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.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}"], changeDetection: 0 }); }
+            i0.ɵɵconditional(ctx.showAuditLogDialog && (ctx.record == null ? null : ctx.record.IsSaved) ? 43 : -1);
+        } }, dependencies: [i1.NgSelectOption, i1.ɵNgSelectMultipleOption, i1.DefaultValueAccessor, i1.SelectControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJEmptyStateComponent, i2.MJSectionPickerComponent, i2.MJButtonDirective, i2.MJDialogComponent, i2.MJDialogActionsComponent, i3.MjFormFieldComponent, i3.MjCollapsiblePanelComponent, i4.LoadingComponent, i5.ListAuditLogComponent, i5.ListInvitationsComponent, i5.ListShareDialogComponent, i6.DatePipe], styles: ["\n\n\n\n[_nghost-%COMP%] {\n    display: block;\n    height: 100%;\n}\n\n\n.list-form-explorer[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"nav main\";\n    grid-template-columns: 64px 1fr;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    background: var(--mj-bg-surface-sunken);\n}\n\n\n.list-header[_ngcontent-%COMP%] {\n    grid-area: header;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.header-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-on-primary);\n    font-size: 24px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.header-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.name-row[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.list-name[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.edit-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.inline-edit-input[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 2px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: inherit;\n    background: var(--mj-bg-surface);\n    outline: none;\n}\n\n.name-input[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 600;\n    min-width: 300px;\n}\n\n.save-btn[_ngcontent-%COMP%], .cancel-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.save-btn[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.save-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.cancel-btn[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.cancel-btn[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 16px;\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.entity-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 32px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n\n.phone-section-picker[_ngcontent-%COMP%] {\n    display: none;\n}\n\n\n.nav-rail[_ngcontent-%COMP%] {\n    grid-area: nav;\n    display: flex;\n    flex-direction: column;\n    padding: 16px 8px;\n    background: var(--mj-text-primary);\n    gap: 4px;\n}\n\n.nav-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    color: rgba(255, 255, 255, 0.6);\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.nav-item[_ngcontent-%COMP%]:hover:not(.disabled) {\n    background: rgba(255, 255, 255, 0.1);\n    color: var(--mj-text-inverse);\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    color: color-mix(in srgb, var(--mj-brand-primary) 60%, white);\n}\n\n.nav-item.active[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 24px;\n    background: var(--mj-brand-primary);\n    border-radius: 0 3px 3px 0;\n}\n\n.nav-item.disabled[_ngcontent-%COMP%] {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.nav-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n}\n\n.nav-label[_ngcontent-%COMP%] {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.nav-badge[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--mj-brand-primary);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-brand-on-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n\n.main-content[_ngcontent-%COMP%] {\n    grid-area: main;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.section[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n.section-header[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.section-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n\n.search-box[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    width: 250px;\n    transition: all 0.2s;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n\n.overview-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 20px;\n}\n\n.overview-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.card-body[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.description-text[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-primary);\n    line-height: 1.6;\n}\n\n.description-empty[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.description-input[_ngcontent-%COMP%] {\n    width: 100%;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: background 0.2s;\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.owner-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.category-select[_ngcontent-%COMP%] {\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n}\n\n.category-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n\n.action-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-bottom: 8px;\n    text-align: left;\n}\n\n.action-btn[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.action-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    width: 24px;\n    text-align: center;\n}\n\n.action-btn[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-of-type {\n    flex: 1;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.action-count[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n\n.loading-state[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n\n.items-table-container[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.items-toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 12px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.selection-count[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.items-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.items-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    text-align: left;\n    padding: 12px 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.items-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.items-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:last-child   td[_ngcontent-%COMP%] {\n    border-bottom: none;\n}\n\n.items-table[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.items-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover:not(.selected) {\n    background: var(--mj-bg-surface-card);\n}\n\n.col-checkbox[_ngcontent-%COMP%] {\n    width: 40px;\n}\n\n.col-name[_ngcontent-%COMP%] {\n    width: 35%;\n}\n\n.col-id[_ngcontent-%COMP%] {\n    width: 25%;\n}\n\n.col-added[_ngcontent-%COMP%] {\n    width: 20%;\n}\n\n.col-actions[_ngcontent-%COMP%] {\n    width: 60px;\n    text-align: right;\n}\n\n.item-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.item-name.loading[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.item-icon[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n.record-id[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n\n.items-footer[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.items-pager[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.items-pager[_ngcontent-%COMP%]   .page-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.items-count[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n\n.coming-soon-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    color: var(--mj-brand-primary);\n}\n\n.banner-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 8px;\n    color: var(--mj-text-primary);\n}\n\n.banner-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-text-secondary);\n}\n\n.shares-grid[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n.activity-timeline[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    margin-bottom: 20px;\n}\n\n.timeline-item[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    padding: 16px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.timeline-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.timeline-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.timeline-icon.create[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.timeline-text[_ngcontent-%COMP%] {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.activity-info[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n\n.settings-form[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n.add-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.add-buttons[_ngcontent-%COMP%]   .btn-secondary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n\n.sharing-summary[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.summary-card[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    flex: 1;\n    max-width: 280px;\n}\n\n.summary-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.summary-icon.pending[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.summary-content[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n}\n\n.summary-value[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.summary-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.readonly-notice[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.readonly-notice[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-disabled);\n}\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 16px 0;\n}\n\n.dialog-loading[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    gap: 16px;\n}\n\n.dialog-instruction[_ngcontent-%COMP%] {\n    margin: 0 0 16px;\n    color: var(--mj-text-secondary);\n}\n\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-section[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .search-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .records-list[_ngcontent-%COMP%] {\n    min-height: 280px;\n    max-height: 320px;\n    overflow-y: auto;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .list-loading[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: center;\n    padding: 40px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .selection-controls[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .selection-info[_ngcontent-%COMP%] {\n    margin-left: auto;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .records-scroll[_ngcontent-%COMP%] {\n    max-height: 260px;\n    overflow-y: auto;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item.in-list[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n    cursor: default;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-checkbox[_ngcontent-%COMP%] {\n    width: 20px;\n    display: flex;\n    justify-content: center;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .in-list-icon[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 14px;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .in-list-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n\n.views-list[_ngcontent-%COMP%] {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.view-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.view-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.view-item[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.view-item.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.view-item[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n}\n\n.view-item[_ngcontent-%COMP%]   .view-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 14px;\n}\n\n\n@media (max-width: 1024px) {\n    .list-form-explorer[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        grid-template-areas:\n            \"header\"\n            \"nav\"\n            \"main\";\n    }\n\n    .nav-rail[_ngcontent-%COMP%] {\n        flex-direction: row;\n        padding: 8px 16px;\n        overflow-x: auto;\n    }\n\n    .nav-item[_ngcontent-%COMP%] {\n        flex-direction: row;\n        padding: 10px 16px;\n        gap: 8px;\n    }\n\n    .nav-item[_ngcontent-%COMP%]::before {\n        display: none;\n    }\n\n    .header-stats[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    \n\n    .nav-rail[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .phone-section-picker[_ngcontent-%COMP%] {\n        grid-area: nav;\n        display: block;\n        padding: 4px 8px;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface);\n    }\n\n    .list-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .overview-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .section-actions[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n}", ".content-margin[_ngcontent-%COMP%] {\n  margin: 10px;\n}\n\n\na[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%] {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton[_ngcontent-%COMP%] {\n  margin-right: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.record-form-row[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > [_ngcontent-%COMP%]:first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form[_ngcontent-%COMP%]   .record-form-row[_ngcontent-%COMP%]    > span[_ngcontent-%COMP%] {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row[_ngcontent-%COMP%] {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n.form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n\n@media (min-width: 1400px) {\n  .form-panels-container[_ngcontent-%COMP%]   .related-entity-grid[_ngcontent-%COMP%] {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card[_ngcontent-%COMP%] {\n  overflow: hidden;\n}\n\n.collapsible-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body[_ngcontent-%COMP%] {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed[_ngcontent-%COMP%] {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body[_ngcontent-%COMP%] {\n  padding: 24px;\n}\n\n\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .control-group[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\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.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:active {\n  transform: translateY(0);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: var(--mj-text-muted);\n}"], changeDetection: 0 }); }
 };
 MJListFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'MJ: Lists')
@@ -2302,7 +2319,7 @@ MJListFormComponentExtended = __decorate([
 export { MJListFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MJListFormComponentExtended, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-list-form-extended', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- World-Class List Form -->\n<div class=\"list-form-explorer\">\n  <!-- Header -->\n  <header class=\"list-header\">\n    <div class=\"header-content\">\n      <div class=\"header-icon\" [style.background-color]=\"'var(--mj-brand-primary)'\">\n        <i [class]=\"entityIcon\"></i>\n      </div>\n      <div class=\"header-info\">\n        <div class=\"name-row\">\n          @if (!isEditingName) {\n            <h1 class=\"list-name\">{{record.Name || 'Untitled List'}}</h1>\n            @if (isCurrentUserOwner()) {\n              <button\n                class=\"edit-btn\"\n                (click)=\"startEditingName()\"\n                title=\"Edit name\"\n                >\n                <i class=\"fa-solid fa-pen\"></i>\n              </button>\n            }\n          }\n          @if (isEditingName) {\n            <input\n              type=\"text\"\n              class=\"inline-edit-input name-input\"\n              [(ngModel)]=\"editingName\"\n              (keydown.enter)=\"saveNameEdit()\"\n              (keydown.escape)=\"cancelNameEdit()\"\n              #nameInput />\n            <button class=\"save-btn\" (click)=\"saveNameEdit()\">\n              <i class=\"fa-solid fa-check\"></i>\n            </button>\n            <button class=\"cancel-btn\" (click)=\"cancelNameEdit()\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n        <div class=\"entity-badge\">\n          <i [class]=\"entityIcon\"></i>\n          <span>{{entityDisplayName}}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"header-stats\">\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedItemCount}}</span>\n        <span class=\"stat-label\">Items</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{stats.shareCount}}</span>\n        <span class=\"stat-label\">Shares</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedLastUpdated}}</span>\n        <span class=\"stat-label\">Updated</span>\n      </div>\n    </div>\n  </header>\n\n  <!-- Navigation Rail -->\n  <nav class=\"nav-rail\">\n    @for (nav of navItems; track nav) {\n      <button\n        class=\"nav-item\"\n        [class.active]=\"activeSection === nav.id\"\n        [class.disabled]=\"nav.disabled\"\n        (click)=\"setActiveSection(nav.id)\"\n        [title]=\"nav.label\">\n        <i [class]=\"nav.icon\"></i>\n        <span class=\"nav-label\">{{nav.label}}</span>\n        @if (nav.badge && nav.badge > 0) {\n          <span class=\"nav-badge\">{{nav.badge}}</span>\n        }\n      </button>\n    }\n  </nav>\n\n  <!-- Main Content -->\n  <main class=\"main-content\">\n    <!-- Overview Section -->\n    @if (activeSection === 'overview') {\n      <section class=\"section overview-section\">\n        <div class=\"overview-grid\">\n          <!-- Description Card -->\n          <div class=\"overview-card description-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-align-left\"></i> Description</h3>\n              @if (isCurrentUserOwner() && !isEditingDescription) {\n                <button\n                  class=\"edit-btn\"\n                  (click)=\"startEditingDescription()\"\n                  >\n                  <i class=\"fa-solid fa-pen\"></i>\n                </button>\n              }\n            </div>\n            <div class=\"card-body\">\n              @if (!isEditingDescription) {\n                @if (record.Description) {\n                  <p class=\"description-text\">{{record.Description}}</p>\n                }\n                @if (!record.Description) {\n                  <p class=\"description-empty\">No description provided</p>\n                }\n              }\n              @if (isEditingDescription) {\n                <textarea\n                  class=\"inline-edit-input description-input\"\n                  [(ngModel)]=\"editingDescription\"\n                  placeholder=\"Add a description...\"\n                  rows=\"3\"\n                (keydown.escape)=\"cancelDescriptionEdit()\"></textarea>\n                <div class=\"edit-actions\">\n                  <button class=\"btn-primary\" (click)=\"saveDescriptionEdit()\">Save</button>\n                  <button class=\"btn-secondary\" (click)=\"cancelDescriptionEdit()\">Cancel</button>\n                </div>\n              }\n            </div>\n          </div>\n          <!-- Details Card -->\n          <div class=\"overview-card details-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-info-circle\"></i> Details</h3>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Entity</span>\n                <span class=\"detail-value\">\n                  <i [class]=\"entityIcon\" class=\"detail-icon\"></i>\n                  {{entityDisplayName}}\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Category</span>\n                @if (!isCurrentUserOwner()) {\n                  <span class=\"detail-value\">\n                    <i class=\"fa-solid fa-folder detail-icon\"></i>\n                    {{categoryName}}\n                  </span>\n                }\n                @if (isCurrentUserOwner()) {\n                  <select\n                    class=\"category-select\"\n                    [ngModel]=\"record.CategoryID\"\n                    (ngModelChange)=\"onCategoryChange($event)\">\n                    <option [ngValue]=\"null\">Uncategorized</option>\n                    @for (cat of categories; track cat) {\n                      <option [ngValue]=\"cat.ID\">{{cat.Name}}</option>\n                    }\n                  </select>\n                }\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Owner</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-user detail-icon\"></i>\n                  {{getOwnerName()}}\n                  @if (isCurrentUserOwner()) {\n                    <span class=\"owner-badge\">You</span>\n                  }\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Created</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-calendar detail-icon\"></i>\n                  {{record.__mj_CreatedAt | date:'mediumDate'}}\n                </span>\n              </div>\n            </div>\n          </div>\n          <!-- Quick Actions Card -->\n          <div class=\"overview-card actions-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-bolt\"></i> Quick Actions</h3>\n            </div>\n            <div class=\"card-body\">\n              <button class=\"action-btn\" (click)=\"setActiveSection('items')\">\n                <i class=\"fa-solid fa-list\"></i>\n                <span>View Items</span>\n                <span class=\"action-count\">{{stats.itemCount}}</span>\n              </button>\n              @if (isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"openShareDialog()\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>Share List</span>\n                  @if (stats.shareCount > 0) {\n                    <span class=\"action-count\">{{stats.shareCount}}</span>\n                  }\n                </button>\n              }\n              @if (!isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"setActiveSection('sharing')\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>View Sharing</span>\n                </button>\n              }\n              <button class=\"action-btn\" [disabled]=\"true\" title=\"Coming soon\">\n                <i class=\"fa-solid fa-file-export\"></i>\n                <span>Export Data</span>\n                <span class=\"coming-soon\">Soon</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </section>\n    }\n\n    <!-- Items Section -->\n    @if (activeSection === 'items') {\n      <section class=\"section items-section\">\n        <div class=\"section-header\">\n          <h2>List Items</h2>\n          <div class=\"section-actions\">\n            <div class=\"search-box\">\n              <i class=\"fa-solid fa-search\"></i>\n              <input\n                type=\"text\"\n                placeholder=\"Search this page...\"\n                [(ngModel)]=\"itemSearchTerm\" />\n            </div>\n            @if (isCurrentUserOwner()) {\n              <div class=\"add-buttons\">\n                <button class=\"btn-secondary\" (click)=\"openAddRecordsDialog()\" title=\"Add individual records\">\n                  <i class=\"fa-solid fa-plus\"></i> Add Records\n                </button>\n                <button class=\"btn-secondary\" (click)=\"openAddFromViewDialog()\" title=\"Add records from a saved view\">\n                  <i class=\"fa-solid fa-table-list\"></i> Add From View\n                </button>\n              </div>\n            }\n            <button class=\"btn-icon\" (click)=\"refreshItems()\" title=\"Refresh\">\n              <i class=\"fa-solid fa-refresh\"></i>\n            </button>\n          </div>\n        </div>\n        <!-- Loading State -->\n        @if (isLoadingItems) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading items...\" size=\"medium\"></mj-loading>\n          </div>\n        }\n        <!-- Empty State -->\n        @if (!isLoadingItems && listItems.length === 0) {\n          <mj-empty-state\n            Icon=\"fa-solid fa-inbox\"\n            Title=\"No Items Yet\"\n            [Message]=\"'This list doesn\\'t have any items. Add records from the ' + entityDisplayName + ' entity.'\" />\n        }\n        <!-- Items Table -->\n        @if (!isLoadingItems && listItems.length > 0) {\n          <div class=\"items-table-container\">\n            @if (selectedItems.size > 0) {\n              <div class=\"items-toolbar\">\n                <span class=\"selection-count\">{{selectedItems.size}} selected</span>\n                <button class=\"btn-danger\" (click)=\"removeSelectedItems()\">\n                  <i class=\"fa-solid fa-trash\"></i>\n                  Remove from List\n                </button>\n              </div>\n            }\n            <table class=\"items-table\">\n              <thead>\n                <tr>\n                  <th class=\"col-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelectAllChecked\"\n                      (change)=\"toggleSelectAll()\" />\n                  </th>\n                  <th class=\"col-name\">Name</th>\n                  <th class=\"col-id\">Record ID</th>\n                  <th class=\"col-added\">Added</th>\n                  <th class=\"col-actions\"></th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (item of filteredItems; track item) {\n                  <tr\n                    [class.selected]=\"selectedItems.has(item.detail.ID)\">\n                    <td class=\"col-checkbox\">\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"selectedItems.has(item.detail.ID)\"\n                        (change)=\"toggleItemSelection(item)\" />\n                    </td>\n                    <td class=\"col-name\">\n                      <div class=\"item-name\" [class.loading]=\"item.isLoading\">\n                        <i [class]=\"entityIcon\" class=\"item-icon\"></i>\n                        <span>{{item.recordName}}</span>\n                        @if (item.isLoading) {\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                        }\n                      </div>\n                    </td>\n                    <td class=\"col-id\">\n                      <code class=\"record-id\">{{item.detail.RecordID}}</code>\n                    </td>\n                    <td class=\"col-added\">\n                      {{item.detail.__mj_CreatedAt | date:'shortDate'}}\n                    </td>\n                    <td class=\"col-actions\">\n                      <button\n                        class=\"btn-icon\"\n                        (click)=\"openRecord(item)\"\n                        title=\"Open record\">\n                        <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                      </button>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n            <div class=\"items-footer\">\n              <span class=\"items-count\">\n                Showing {{filteredItems.length}} of {{stats.itemCount}} items\n              </span>\n              @if (totalPages > 1) {\n                <div class=\"items-pager\">\n                  <button class=\"btn-icon\" [disabled]=\"itemsPage === 0\" (click)=\"goToPage(itemsPage - 1)\" title=\"Previous page\">\n                    <i class=\"fa-solid fa-chevron-left\"></i>\n                  </button>\n                  <span class=\"page-label\">Page {{itemsPage + 1}} of {{totalPages}}</span>\n                  <button class=\"btn-icon\" [disabled]=\"itemsPage >= totalPages - 1\" (click)=\"goToPage(itemsPage + 1)\" title=\"Next page\">\n                    <i class=\"fa-solid fa-chevron-right\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Sharing Section -->\n    @if (activeSection === 'sharing') {\n      <section class=\"section sharing-section\">\n        <div class=\"section-header\">\n          <h2>Sharing</h2>\n          @if (isCurrentUserOwner()) {\n            <div class=\"section-actions\">\n              <button class=\"btn-primary\" (click)=\"openShareDialog()\">\n                <i class=\"fa-solid fa-user-plus\"></i> Manage Sharing\n              </button>\n            </div>\n          }\n        </div>\n        <!-- Sharing summary -->\n        @if (stats.shareCount > 0 || stats.invitationCount > 0) {\n          <div class=\"sharing-summary\">\n            <div class=\"summary-card\">\n              <div class=\"summary-icon\">\n                <i class=\"fa-solid fa-users\"></i>\n              </div>\n              <div class=\"summary-content\">\n                <span class=\"summary-value\">{{stats.shareCount}}</span>\n                <span class=\"summary-label\">Active Share{{stats.shareCount !== 1 ? 's' : ''}}</span>\n              </div>\n            </div>\n            @if (stats.invitationCount > 0) {\n              <div class=\"summary-card\">\n                <div class=\"summary-icon pending\">\n                  <i class=\"fa-solid fa-envelope\"></i>\n                </div>\n                <div class=\"summary-content\">\n                  <span class=\"summary-value\">{{stats.invitationCount}}</span>\n                  <span class=\"summary-label\">Pending Invitation{{stats.invitationCount !== 1 ? 's' : ''}}</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty state for no shares -->\n        @if (stats.shareCount === 0 && stats.invitationCount === 0) {\n          <mj-empty-state\n            Icon=\"fa-solid fa-share-nodes\"\n            Title=\"Not Shared Yet\"\n            [Message]=\"isCurrentUserOwner() ? 'This list is private. Click &quot;Manage Sharing&quot; to share it with other users or roles.' : 'This list hasn\\'t been shared with anyone else.'\"\n            [ActionText]=\"isCurrentUserOwner() ? 'Share This List' : ''\"\n            ActionIcon=\"fa-solid fa-user-plus\"\n            (Action)=\"openShareDialog()\" />\n        }\n        <!-- Read-only notice for non-owners -->\n        @if (!isCurrentUserOwner() && (stats.shareCount > 0 || stats.invitationCount > 0)) {\n          <div class=\"readonly-notice\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>Only the list owner can manage sharing settings.</span>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Activity Section -->\n    @if (activeSection === 'activity') {\n      <section class=\"section activity-section\">\n        <div class=\"section-header\">\n          <h2>Activity</h2>\n        </div>\n        <div class=\"activity-timeline\">\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon\">\n              <i class=\"fa-solid fa-edit\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List updated</p>\n              <span class=\"timeline-date\">{{record.__mj_UpdatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon create\">\n              <i class=\"fa-solid fa-plus\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List created</p>\n              <span class=\"timeline-date\">{{record.__mj_CreatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"activity-info\">\n          <p>Detailed activity tracking coming soon. You'll be able to see who added items, when shares were created, and more.</p>\n        </div>\n      </section>\n    }\n\n    <!-- Settings Section -->\n    @if (activeSection === 'settings') {\n      <section class=\"section settings-section\">\n        <div class=\"section-header\">\n          <h2>Settings</h2>\n        </div>\n        <div class=\"settings-form\">\n          <mj-collapsible-panel\n            SectionKey=\"listSettings\"\n            SectionName=\"List Settings\"\n            Icon=\"fa fa-cog\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Name\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Description\"\n                Type=\"textarea\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"CategoryID\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n                LinkType=\"Record\"\n                LinkComponentType=\"Search\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n          <mj-collapsible-panel\n            SectionKey=\"systemInfo\"\n            SectionName=\"System Information\"\n            Icon=\"fa fa-info-circle\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"EntityID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"UserID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_CreatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_UpdatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n        </div>\n      </section>\n    }\n  </main>\n</div>\n\n<!-- Add Records Dialog -->\n@if (showAddRecordsDialog) {\n  <mj-dialog\n    [Title]=\"'Add ' + entityDisplayName + ' to List'\"\n    (Close)=\"closeAddRecordsDialog()\"\n    [Visible]=\"showAddRecordsDialog\"\n    [MinWidth]=\"400\"\n    [Width]=\"600\"\n    [Height]=\"550\">\n    <div class=\"dialog-content add-records-dialog\">\n      @if (addDialogSaving) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!addDialogSaving) {\n        <!-- Search Input -->\n        <div class=\"search-section\">\n          <div class=\"search-input-wrapper\">\n            <span class=\"fa-solid fa-search search-icon\"></span>\n            <input\n              type=\"text\"\n              class=\"mj-input search-input\"\n              [placeholder]=\"'Search ' + entityDisplayName + '...'\"\n              [(ngModel)]=\"addRecordsSearchFilter\"\n              (ngModelChange)=\"onAddRecordsSearchChange($event)\" />\n          </div>\n          <span class=\"search-hint\">Type at least 2 characters to search</span>\n        </div>\n        <!-- Records List -->\n        <div class=\"records-list\">\n          @if (addDialogLoading) {\n            <div class=\"list-loading\">\n              <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length >= 2) {\n            <mj-empty-state\n              Variant=\"no-results\"\n              Size=\"compact\"\n              [Title]=\"'No records found matching &quot;' + addRecordsSearchFilter + '&quot;'\" />\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length < 2) {\n            <mj-empty-state\n              Size=\"compact\"\n              Icon=\"fa-solid fa-list\"\n              Title=\"Search for records to add to this list\" />\n          }\n          @if (!addDialogLoading && addableRecords.length > 0) {\n            <!-- Selection controls -->\n            <div class=\"selection-controls\">\n              <button mjButton variant=\"flat\" (click)=\"selectAllAddable()\">Select All</button>\n              <button mjButton variant=\"flat\" (click)=\"deselectAllAddable()\">Deselect All</button>\n              <span class=\"selection-info\">{{ selectedAddableRecords.length }} selected</span>\n            </div>\n            <!-- Records -->\n            <div class=\"records-scroll\">\n              @for (record of addableRecords; track record) {\n                <div class=\"record-item\"\n                  [class.in-list]=\"record.isInList\"\n                  [class.selected]=\"record.isSelected\"\n                  (click)=\"toggleRecordSelection(record)\">\n                  <div class=\"record-checkbox\">\n                    @if (record.isInList) {\n                      <span class=\"fa-solid fa-check in-list-icon\" title=\"Already in list\"></span>\n                    }\n                    @if (!record.isInList) {\n                      <input type=\"checkbox\"\n                        [checked]=\"record.isSelected\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"toggleRecordSelection(record)\">\n                    }\n                  </div>\n                  <div class=\"record-name\">{{ record.Name }}</div>\n                  @if (record.isInList) {\n                    <span class=\"in-list-badge\">In List</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <mj-dialog-actions>\n      <button mjButton\n        (click)=\"confirmAddRecords()\"\n        [disabled]=\"addDialogSaving || selectedAddableRecords.length === 0\"\n        variant=\"primary\">\n        Add {{ selectedAddableRecords.length > 0 ? selectedAddableRecords.length : '' }} Record{{ selectedAddableRecords.length !== 1 ? 's' : '' }}\n      </button>\n      <button mjButton\n        (click)=\"closeAddRecordsDialog()\"\n        [disabled]=\"addDialogSaving\">\n        Cancel\n      </button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Add From View Dialog -->\n@if (showAddFromViewDialog) {\n  <mj-dialog\n    Title=\"Add Records from Views\"\n    (Close)=\"closeAddFromViewDialog()\"\n    [Visible]=\"showAddFromViewDialog\"\n    [MinWidth]=\"400\"\n    [Width]=\"600\"\n    [Height]=\"500\">\n    <div class=\"dialog-content\">\n      @if (showAddFromViewLoader && fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading records from views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && addFromViewTotal > 0 && !fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addFromViewTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && !fetchingRecordsToSave && addFromViewTotal === 0) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!showAddFromViewLoader) {\n        <p class=\"dialog-instruction\">Select views to add their records to this list:</p>\n        <div class=\"views-list\">\n          @if (!userViews || userViews.length === 0) {\n            <mj-empty-state\n              Size=\"compact\"\n              Icon=\"fa-solid fa-folder-open\"\n              Title=\"No saved views found for this entity\" />\n          }\n          @if (userViews && userViews.length > 0) {\n            @for (view of userViews; track view) {\n              <div class=\"view-item\"\n                [class.selected]=\"isViewSelected(view)\"\n                (click)=\"toggleViewSelection(view)\">\n                <input type=\"checkbox\"\n                  [checked]=\"isViewSelected(view)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleViewSelection(view)\">\n                <span class=\"fa-solid fa-table-list view-icon\"></span>\n                <span class=\"view-name\">{{ view.Name }}</span>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n    <mj-dialog-actions>\n      <button mjButton\n        (click)=\"confirmAddFromView()\"\n        [disabled]=\"showAddFromViewLoader || userViewsToAdd.length === 0\"\n        variant=\"primary\">\n        Add from {{ userViewsToAdd.length }} View{{ userViewsToAdd.length !== 1 ? 's' : '' }}\n      </button>\n      <button mjButton\n        (click)=\"closeAddFromViewDialog()\"\n        [disabled]=\"showAddFromViewLoader\">\n        Cancel\n      </button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Share Dialog -->\n@if (showShareDialog && shareDialogConfig) {\n  <mj-list-share-dialog\n    [config]=\"shareDialogConfig\"\n    [visible]=\"showShareDialog\"\n    (complete)=\"onShareDialogComplete($event)\"\n    (cancel)=\"onShareDialogCancel()\"\n    (manageInvitations)=\"openInvitationsDialog()\"\n    (viewAuditLog)=\"openAuditLogDialog()\">\n  </mj-list-share-dialog>\n}\n\n<!-- Invitations Dialog (mockup 16). Opened from the share dialog's\n     \"Manage Invitations\" button. Per-list \u2014 bound to record.ID. -->\n@if (showInvitationsDialog && record?.IsSaved) {\n  <mj-dialog\n    [Visible]=\"true\"\n    [Title]=\"'Invitations \u2014 ' + record.Name\"\n    (Close)=\"closeInvitationsDialog()\"\n    [MinWidth]=\"640\"\n    [Width]=\"900\"\n    [Height]=\"640\">\n    <div class=\"dialog-content invitations-dialog\">\n      <mj-list-invitations\n        [Provider]=\"ProviderToUse\"\n        [ListID]=\"record.ID\"\n        [ListName]=\"record.Name\">\n      </mj-list-invitations>\n    </div>\n    <mj-dialog-actions>\n      <button mjButton (click)=\"closeInvitationsDialog()\" variant=\"outline\">Close</button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Audit Log Dialog (mockup 18). Opened from the share dialog's\n     \"View audit log\" link. Per-list \u2014 bound to record.ID. -->\n@if (showAuditLogDialog && record?.IsSaved) {\n  <mj-dialog\n    [Visible]=\"true\"\n    [Title]=\"'Audit Log \u2014 ' + record.Name\"\n    (Close)=\"closeAuditLogDialog()\"\n    [MinWidth]=\"720\"\n    [Width]=\"980\"\n    [Height]=\"680\">\n    <div class=\"dialog-content audit-log-dialog\">\n      <mj-list-audit-log\n        [Provider]=\"ProviderToUse\"\n        [ListID]=\"record.ID\">\n      </mj-list-audit-log>\n    </div>\n    <mj-dialog-actions>\n      <button mjButton (click)=\"closeAuditLogDialog()\" variant=\"outline\">Close</button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n", styles: ["/* ============================================\n   WORLD-CLASS LIST FORM STYLES\n   ============================================ */\n\n:host {\n    display: block;\n    height: 100%;\n}\n\n/* Layout */\n.list-form-explorer {\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"nav main\";\n    grid-template-columns: 64px 1fr;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    background: var(--mj-bg-surface-sunken);\n}\n\n/* Header */\n.list-header {\n    grid-area: header;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-on-primary);\n    font-size: 24px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.name-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.list-name {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.edit-btn {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.inline-edit-input {\n    padding: 8px 12px;\n    border: 2px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: inherit;\n    background: var(--mj-bg-surface);\n    outline: none;\n}\n\n.name-input {\n    font-size: 24px;\n    font-weight: 600;\n    min-width: 300px;\n}\n\n.save-btn, .cancel-btn {\n    background: none;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.save-btn {\n    color: var(--mj-status-success);\n}\n\n.save-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.cancel-btn {\n    color: var(--mj-status-error);\n}\n\n.cancel-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.entity-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 16px;\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.entity-badge i {\n    font-size: 12px;\n}\n\n.header-stats {\n    display: flex;\n    gap: 32px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n}\n\n.stat-value {\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.stat-label {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Navigation Rail */\n.nav-rail {\n    grid-area: nav;\n    display: flex;\n    flex-direction: column;\n    padding: 16px 8px;\n    background: var(--mj-text-primary);\n    gap: 4px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    color: rgba(255, 255, 255, 0.6);\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.nav-item:hover:not(.disabled) {\n    background: rgba(255, 255, 255, 0.1);\n    color: var(--mj-text-inverse);\n}\n\n.nav-item.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    color: color-mix(in srgb, var(--mj-brand-primary) 60%, white);\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 24px;\n    background: var(--mj-brand-primary);\n    border-radius: 0 3px 3px 0;\n}\n\n.nav-item.disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.nav-item i {\n    font-size: 18px;\n}\n\n.nav-label {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--mj-brand-primary);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-brand-on-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n/* Main Content */\n.main-content {\n    grid-area: main;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.section {\n    animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n.section-header h2 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.section-actions {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n/* Search Box */\n.search-box {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box i {\n    position: absolute;\n    left: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.search-box input {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    width: 250px;\n    transition: all 0.2s;\n}\n\n.search-box input:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* Overview Section */\n.overview-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 20px;\n}\n\n.overview-card {\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.card-header h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header h3 i {\n    color: var(--mj-text-disabled);\n}\n\n.card-body {\n    padding: 20px;\n}\n\n.description-text {\n    margin: 0;\n    color: var(--mj-text-primary);\n    line-height: 1.6;\n}\n\n.description-empty {\n    margin: 0;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.description-input {\n    width: 100%;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.edit-actions {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n}\n\n.btn-secondary {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-icon {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n.btn-danger {\n    padding: 8px 16px;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: background 0.2s;\n}\n\n.btn-danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n/* Details Card */\n.detail-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.detail-value {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.owner-badge {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.category-select {\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n}\n\n.category-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n/* Actions Card */\n.action-btn {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-bottom: 8px;\n    text-align: left;\n}\n\n.action-btn:last-child {\n    margin-bottom: 0;\n}\n\n.action-btn:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.action-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.action-btn i {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    width: 24px;\n    text-align: center;\n}\n\n.action-btn span:first-of-type {\n    flex: 1;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.action-count {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n/* Items Section */\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n\n.items-table-container {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.items-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 12px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.selection-count {\n    font-size: 14px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.items-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.items-table th {\n    text-align: left;\n    padding: 12px 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.items-table td {\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.items-table tr:last-child td {\n    border-bottom: none;\n}\n\n.items-table tr.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.items-table tr:hover:not(.selected) {\n    background: var(--mj-bg-surface-card);\n}\n\n.col-checkbox {\n    width: 40px;\n}\n\n.col-name {\n    width: 35%;\n}\n\n.col-id {\n    width: 25%;\n}\n\n.col-added {\n    width: 20%;\n}\n\n.col-actions {\n    width: 60px;\n    text-align: right;\n}\n\n.item-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.item-name.loading {\n    color: var(--mj-text-disabled);\n}\n\n.item-icon {\n    color: var(--mj-text-disabled);\n}\n\n.record-id {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n\n.items-footer {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.items-pager {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.items-pager .page-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.items-count {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n/* Sharing Section */\n.coming-soon-banner {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner > i {\n    font-size: 48px;\n    color: var(--mj-brand-primary);\n}\n\n.banner-content h3 {\n    margin: 0 0 8px;\n    color: var(--mj-text-primary);\n}\n\n.banner-content p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n}\n\n.shares-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Activity Section */\n.activity-timeline {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    margin-bottom: 20px;\n}\n\n.timeline-item {\n    display: flex;\n    gap: 16px;\n    padding: 16px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.timeline-item:last-child {\n    border-bottom: none;\n}\n\n.timeline-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.timeline-icon.create {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.timeline-content {\n    flex: 1;\n}\n\n.timeline-text {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n}\n\n.timeline-date {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.activity-info {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info p {\n    margin: 0;\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n/* Settings Section */\n.settings-form {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Add Buttons in Items Section */\n.add-buttons {\n    display: flex;\n    gap: 8px;\n}\n\n.add-buttons .btn-secondary {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Sharing Summary */\n.sharing-summary {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.summary-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    flex: 1;\n    max-width: 280px;\n}\n\n.summary-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.summary-icon.pending {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.summary-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.summary-value {\n    font-size: 28px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.summary-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.readonly-notice {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.readonly-notice i {\n    color: var(--mj-text-disabled);\n}\n\n/* Dialog Styles */\n.dialog-content {\n    padding: 16px 0;\n}\n\n.dialog-loading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    gap: 16px;\n}\n\n.dialog-instruction {\n    margin: 0 0 16px;\n    color: var(--mj-text-secondary);\n}\n\n/* Add Records Dialog */\n.add-records-dialog .search-section {\n    margin-bottom: 16px;\n}\n\n.add-records-dialog .search-input {\n    width: 100%;\n}\n\n.add-records-dialog .search-hint {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.add-records-dialog .records-list {\n    min-height: 280px;\n    max-height: 320px;\n    overflow-y: auto;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.add-records-dialog .list-loading {\n    display: flex;\n    justify-content: center;\n    padding: 40px;\n}\n\n.add-records-dialog .selection-controls {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-records-dialog .selection-info {\n    margin-left: auto;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog .records-scroll {\n    max-height: 260px;\n    overflow-y: auto;\n}\n\n.add-records-dialog .record-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog .record-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog .record-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.add-records-dialog .record-item.in-list {\n    background: var(--mj-bg-surface-card);\n    cursor: default;\n}\n\n.add-records-dialog .record-checkbox {\n    width: 20px;\n    display: flex;\n    justify-content: center;\n}\n\n.add-records-dialog .in-list-icon {\n    color: var(--mj-status-success);\n}\n\n.add-records-dialog .record-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n.add-records-dialog .in-list-badge {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n/* Add From View Dialog */\n.views-list {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.view-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.view-item:last-child {\n    border-bottom: none;\n}\n\n.view-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.view-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.view-item .view-icon {\n    color: var(--mj-brand-primary);\n}\n\n.view-item .view-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .list-form-explorer {\n        grid-template-columns: 1fr;\n        grid-template-areas:\n            \"header\"\n            \"nav\"\n            \"main\";\n    }\n\n    .nav-rail {\n        flex-direction: row;\n        padding: 8px 16px;\n        overflow-x: auto;\n    }\n\n    .nav-item {\n        flex-direction: row;\n        padding: 10px 16px;\n        gap: 8px;\n    }\n\n    .nav-item::before {\n        display: none;\n    }\n\n    .header-stats {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .overview-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .search-box input {\n        width: 100%;\n    }\n\n    .section-actions {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n}\n", ".k-pane {\n  background-color: var(--mj-bg-surface);\n}\n\n.content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.k-splitter {\n  border-width: 0px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\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.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-list-form-extended', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- World-Class List Form -->\n<div class=\"list-form-explorer\">\n  <!-- Header -->\n  <header class=\"list-header\">\n    <div class=\"header-content\">\n      <div class=\"header-icon\" [style.background-color]=\"'var(--mj-brand-primary)'\">\n        <i [class]=\"entityIcon\"></i>\n      </div>\n      <div class=\"header-info\">\n        <div class=\"name-row\">\n          @if (!isEditingName) {\n            <h1 class=\"list-name\">{{record.Name || 'Untitled List'}}</h1>\n            @if (isCurrentUserOwner()) {\n              <button\n                class=\"edit-btn\"\n                (click)=\"startEditingName()\"\n                title=\"Edit name\"\n                >\n                <i class=\"fa-solid fa-pen\"></i>\n              </button>\n            }\n          }\n          @if (isEditingName) {\n            <input\n              type=\"text\"\n              class=\"inline-edit-input name-input\"\n              [(ngModel)]=\"editingName\"\n              (keydown.enter)=\"saveNameEdit()\"\n              (keydown.escape)=\"cancelNameEdit()\"\n              #nameInput />\n            <button class=\"save-btn\" (click)=\"saveNameEdit()\">\n              <i class=\"fa-solid fa-check\"></i>\n            </button>\n            <button class=\"cancel-btn\" (click)=\"cancelNameEdit()\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n        <div class=\"entity-badge\">\n          <i [class]=\"entityIcon\"></i>\n          <span>{{entityDisplayName}}</span>\n        </div>\n      </div>\n    </div>\n    <div class=\"header-stats\">\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedItemCount}}</span>\n        <span class=\"stat-label\">Items</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{stats.shareCount}}</span>\n        <span class=\"stat-label\">Shares</span>\n      </div>\n      <div class=\"stat-item\">\n        <span class=\"stat-value\">{{formattedLastUpdated}}</span>\n        <span class=\"stat-label\">Updated</span>\n      </div>\n    </div>\n  </header>\n\n  <!-- Phone: the rail becomes one button that opens the Sections sheet -->\n  <mj-section-picker class=\"phone-section-picker\"\n                     [Items]=\"SectionPickerItems\"\n                     [ActiveKey]=\"ActiveSection\"\n                     (ActiveKeyChange)=\"OnSectionPicked($event)\"></mj-section-picker>\n\n  <!-- Navigation Rail -->\n  <nav class=\"nav-rail\">\n    @for (nav of navItems; track nav) {\n      <button\n        class=\"nav-item\"\n        [class.active]=\"activeSection === nav.id\"\n        [class.disabled]=\"nav.disabled\"\n        (click)=\"setActiveSection(nav.id)\"\n        [title]=\"nav.label\">\n        <i [class]=\"nav.icon\"></i>\n        <span class=\"nav-label\">{{nav.label}}</span>\n        @if (nav.badge && nav.badge > 0) {\n          <span class=\"nav-badge\">{{nav.badge}}</span>\n        }\n      </button>\n    }\n  </nav>\n\n  <!-- Main Content -->\n  <main class=\"main-content\">\n    <!-- Overview Section -->\n    @if (activeSection === 'overview') {\n      <section class=\"section overview-section\">\n        <div class=\"overview-grid\">\n          <!-- Description Card -->\n          <div class=\"overview-card description-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-align-left\"></i> Description</h3>\n              @if (isCurrentUserOwner() && !isEditingDescription) {\n                <button\n                  class=\"edit-btn\"\n                  (click)=\"startEditingDescription()\"\n                  >\n                  <i class=\"fa-solid fa-pen\"></i>\n                </button>\n              }\n            </div>\n            <div class=\"card-body\">\n              @if (!isEditingDescription) {\n                @if (record.Description) {\n                  <p class=\"description-text\">{{record.Description}}</p>\n                }\n                @if (!record.Description) {\n                  <p class=\"description-empty\">No description provided</p>\n                }\n              }\n              @if (isEditingDescription) {\n                <textarea\n                  class=\"inline-edit-input description-input\"\n                  [(ngModel)]=\"editingDescription\"\n                  placeholder=\"Add a description...\"\n                  rows=\"3\"\n                (keydown.escape)=\"cancelDescriptionEdit()\"></textarea>\n                <div class=\"edit-actions\">\n                  <button class=\"btn-primary\" (click)=\"saveDescriptionEdit()\">Save</button>\n                  <button class=\"btn-secondary\" (click)=\"cancelDescriptionEdit()\">Cancel</button>\n                </div>\n              }\n            </div>\n          </div>\n          <!-- Details Card -->\n          <div class=\"overview-card details-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-info-circle\"></i> Details</h3>\n            </div>\n            <div class=\"card-body\">\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Entity</span>\n                <span class=\"detail-value\">\n                  <i [class]=\"entityIcon\" class=\"detail-icon\"></i>\n                  {{entityDisplayName}}\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Category</span>\n                @if (!isCurrentUserOwner()) {\n                  <span class=\"detail-value\">\n                    <i class=\"fa-solid fa-folder detail-icon\"></i>\n                    {{categoryName}}\n                  </span>\n                }\n                @if (isCurrentUserOwner()) {\n                  <select\n                    class=\"category-select\"\n                    [ngModel]=\"record.CategoryID\"\n                    (ngModelChange)=\"onCategoryChange($event)\">\n                    <option [ngValue]=\"null\">Uncategorized</option>\n                    @for (cat of categories; track cat) {\n                      <option [ngValue]=\"cat.ID\">{{cat.Name}}</option>\n                    }\n                  </select>\n                }\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Owner</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-user detail-icon\"></i>\n                  {{getOwnerName()}}\n                  @if (isCurrentUserOwner()) {\n                    <span class=\"owner-badge\">You</span>\n                  }\n                </span>\n              </div>\n              <div class=\"detail-row\">\n                <span class=\"detail-label\">Created</span>\n                <span class=\"detail-value\">\n                  <i class=\"fa-solid fa-calendar detail-icon\"></i>\n                  {{record.__mj_CreatedAt | date:'mediumDate'}}\n                </span>\n              </div>\n            </div>\n          </div>\n          <!-- Quick Actions Card -->\n          <div class=\"overview-card actions-card\">\n            <div class=\"card-header\">\n              <h3><i class=\"fa-solid fa-bolt\"></i> Quick Actions</h3>\n            </div>\n            <div class=\"card-body\">\n              <button class=\"action-btn\" (click)=\"setActiveSection('items')\">\n                <i class=\"fa-solid fa-list\"></i>\n                <span>View Items</span>\n                <span class=\"action-count\">{{stats.itemCount}}</span>\n              </button>\n              @if (isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"openShareDialog()\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>Share List</span>\n                  @if (stats.shareCount > 0) {\n                    <span class=\"action-count\">{{stats.shareCount}}</span>\n                  }\n                </button>\n              }\n              @if (!isCurrentUserOwner()) {\n                <button class=\"action-btn\" (click)=\"setActiveSection('sharing')\">\n                  <i class=\"fa-solid fa-share-nodes\"></i>\n                  <span>View Sharing</span>\n                </button>\n              }\n              <button class=\"action-btn\" [disabled]=\"true\" title=\"Coming soon\">\n                <i class=\"fa-solid fa-file-export\"></i>\n                <span>Export Data</span>\n                <span class=\"coming-soon\">Soon</span>\n              </button>\n            </div>\n          </div>\n        </div>\n      </section>\n    }\n\n    <!-- Items Section -->\n    @if (activeSection === 'items') {\n      <section class=\"section items-section\">\n        <div class=\"section-header\">\n          <h2>List Items</h2>\n          <div class=\"section-actions\">\n            <div class=\"search-box\">\n              <i class=\"fa-solid fa-search\"></i>\n              <input\n                type=\"text\"\n                placeholder=\"Search this page...\"\n                [(ngModel)]=\"itemSearchTerm\" />\n            </div>\n            @if (isCurrentUserOwner()) {\n              <div class=\"add-buttons\">\n                <button class=\"btn-secondary\" (click)=\"openAddRecordsDialog()\" title=\"Add individual records\">\n                  <i class=\"fa-solid fa-plus\"></i> Add Records\n                </button>\n                <button class=\"btn-secondary\" (click)=\"openAddFromViewDialog()\" title=\"Add records from a saved view\">\n                  <i class=\"fa-solid fa-table-list\"></i> Add From View\n                </button>\n              </div>\n            }\n            <button class=\"btn-icon\" (click)=\"refreshItems()\" title=\"Refresh\">\n              <i class=\"fa-solid fa-refresh\"></i>\n            </button>\n          </div>\n        </div>\n        <!-- Loading State -->\n        @if (isLoadingItems) {\n          <div class=\"loading-state\">\n            <mj-loading text=\"Loading items...\" size=\"medium\"></mj-loading>\n          </div>\n        }\n        <!-- Empty State -->\n        @if (!isLoadingItems && listItems.length === 0) {\n          <mj-empty-state\n            Icon=\"fa-solid fa-inbox\"\n            Title=\"No Items Yet\"\n            [Message]=\"'This list doesn\\'t have any items. Add records from the ' + entityDisplayName + ' entity.'\" />\n        }\n        <!-- Items Table -->\n        @if (!isLoadingItems && listItems.length > 0) {\n          <div class=\"items-table-container\">\n            @if (selectedItems.size > 0) {\n              <div class=\"items-toolbar\">\n                <span class=\"selection-count\">{{selectedItems.size}} selected</span>\n                <button class=\"btn-danger\" (click)=\"removeSelectedItems()\">\n                  <i class=\"fa-solid fa-trash\"></i>\n                  Remove from List\n                </button>\n              </div>\n            }\n            <table class=\"items-table\">\n              <thead>\n                <tr>\n                  <th class=\"col-checkbox\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"isSelectAllChecked\"\n                      (change)=\"toggleSelectAll()\" />\n                  </th>\n                  <th class=\"col-name\">Name</th>\n                  <th class=\"col-id\">Record ID</th>\n                  <th class=\"col-added\">Added</th>\n                  <th class=\"col-actions\"></th>\n                </tr>\n              </thead>\n              <tbody>\n                @for (item of filteredItems; track item) {\n                  <tr\n                    [class.selected]=\"selectedItems.has(item.detail.ID)\">\n                    <td class=\"col-checkbox\">\n                      <input\n                        type=\"checkbox\"\n                        [checked]=\"selectedItems.has(item.detail.ID)\"\n                        (change)=\"toggleItemSelection(item)\" />\n                    </td>\n                    <td class=\"col-name\">\n                      <div class=\"item-name\" [class.loading]=\"item.isLoading\">\n                        <i [class]=\"entityIcon\" class=\"item-icon\"></i>\n                        <span>{{item.recordName}}</span>\n                        @if (item.isLoading) {\n                          <i class=\"fa-solid fa-spinner fa-spin\"></i>\n                        }\n                      </div>\n                    </td>\n                    <td class=\"col-id\">\n                      <code class=\"record-id\">{{item.detail.RecordID}}</code>\n                    </td>\n                    <td class=\"col-added\">\n                      {{item.detail.__mj_CreatedAt | date:'shortDate'}}\n                    </td>\n                    <td class=\"col-actions\">\n                      <button\n                        class=\"btn-icon\"\n                        (click)=\"openRecord(item)\"\n                        title=\"Open record\">\n                        <i class=\"fa-solid fa-arrow-up-right-from-square\"></i>\n                      </button>\n                    </td>\n                  </tr>\n                }\n              </tbody>\n            </table>\n            <div class=\"items-footer\">\n              <span class=\"items-count\">\n                Showing {{filteredItems.length}} of {{stats.itemCount}} items\n              </span>\n              @if (totalPages > 1) {\n                <div class=\"items-pager\">\n                  <button class=\"btn-icon\" [disabled]=\"itemsPage === 0\" (click)=\"goToPage(itemsPage - 1)\" title=\"Previous page\">\n                    <i class=\"fa-solid fa-chevron-left\"></i>\n                  </button>\n                  <span class=\"page-label\">Page {{itemsPage + 1}} of {{totalPages}}</span>\n                  <button class=\"btn-icon\" [disabled]=\"itemsPage >= totalPages - 1\" (click)=\"goToPage(itemsPage + 1)\" title=\"Next page\">\n                    <i class=\"fa-solid fa-chevron-right\"></i>\n                  </button>\n                </div>\n              }\n            </div>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Sharing Section -->\n    @if (activeSection === 'sharing') {\n      <section class=\"section sharing-section\">\n        <div class=\"section-header\">\n          <h2>Sharing</h2>\n          @if (isCurrentUserOwner()) {\n            <div class=\"section-actions\">\n              <button class=\"btn-primary\" (click)=\"openShareDialog()\">\n                <i class=\"fa-solid fa-user-plus\"></i> Manage Sharing\n              </button>\n            </div>\n          }\n        </div>\n        <!-- Sharing summary -->\n        @if (stats.shareCount > 0 || stats.invitationCount > 0) {\n          <div class=\"sharing-summary\">\n            <div class=\"summary-card\">\n              <div class=\"summary-icon\">\n                <i class=\"fa-solid fa-users\"></i>\n              </div>\n              <div class=\"summary-content\">\n                <span class=\"summary-value\">{{stats.shareCount}}</span>\n                <span class=\"summary-label\">Active Share{{stats.shareCount !== 1 ? 's' : ''}}</span>\n              </div>\n            </div>\n            @if (stats.invitationCount > 0) {\n              <div class=\"summary-card\">\n                <div class=\"summary-icon pending\">\n                  <i class=\"fa-solid fa-envelope\"></i>\n                </div>\n                <div class=\"summary-content\">\n                  <span class=\"summary-value\">{{stats.invitationCount}}</span>\n                  <span class=\"summary-label\">Pending Invitation{{stats.invitationCount !== 1 ? 's' : ''}}</span>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        <!-- Empty state for no shares -->\n        @if (stats.shareCount === 0 && stats.invitationCount === 0) {\n          <mj-empty-state\n            Icon=\"fa-solid fa-share-nodes\"\n            Title=\"Not Shared Yet\"\n            [Message]=\"isCurrentUserOwner() ? 'This list is private. Click &quot;Manage Sharing&quot; to share it with other users or roles.' : 'This list hasn\\'t been shared with anyone else.'\"\n            [ActionText]=\"isCurrentUserOwner() ? 'Share This List' : ''\"\n            ActionIcon=\"fa-solid fa-user-plus\"\n            (Action)=\"openShareDialog()\" />\n        }\n        <!-- Read-only notice for non-owners -->\n        @if (!isCurrentUserOwner() && (stats.shareCount > 0 || stats.invitationCount > 0)) {\n          <div class=\"readonly-notice\">\n            <i class=\"fa-solid fa-info-circle\"></i>\n            <span>Only the list owner can manage sharing settings.</span>\n          </div>\n        }\n      </section>\n    }\n\n    <!-- Activity Section -->\n    @if (activeSection === 'activity') {\n      <section class=\"section activity-section\">\n        <div class=\"section-header\">\n          <h2>Activity</h2>\n        </div>\n        <div class=\"activity-timeline\">\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon\">\n              <i class=\"fa-solid fa-edit\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List updated</p>\n              <span class=\"timeline-date\">{{record.__mj_UpdatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n          <div class=\"timeline-item\">\n            <div class=\"timeline-icon create\">\n              <i class=\"fa-solid fa-plus\"></i>\n            </div>\n            <div class=\"timeline-content\">\n              <p class=\"timeline-text\">List created</p>\n              <span class=\"timeline-date\">{{record.__mj_CreatedAt | date:'medium'}}</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"activity-info\">\n          <p>Detailed activity tracking coming soon. You'll be able to see who added items, when shares were created, and more.</p>\n        </div>\n      </section>\n    }\n\n    <!-- Settings Section -->\n    @if (activeSection === 'settings') {\n      <section class=\"section settings-section\">\n        <div class=\"section-header\">\n          <h2>Settings</h2>\n        </div>\n        <div class=\"settings-form\">\n          <mj-collapsible-panel\n            SectionKey=\"listSettings\"\n            SectionName=\"List Settings\"\n            Icon=\"fa fa-cog\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Name\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"Description\"\n                Type=\"textarea\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"CategoryID\"\n                Type=\"textbox\"\n                [EditMode]=\"EditMode\"\n                [FormContext]=\"formContext\"\n                LinkType=\"Record\"\n                LinkComponentType=\"Search\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n          <mj-collapsible-panel\n            SectionKey=\"systemInfo\"\n            SectionName=\"System Information\"\n            Icon=\"fa fa-info-circle\"\n            [Form]=\"this\"\n            [FormContext]=\"formContext\">\n            <div class=\"form-body\">\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"EntityID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"UserID\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_CreatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n              <mj-form-field\n                [Record]=\"record\"\n                [ShowLabel]=\"true\"\n                FieldName=\"__mj_UpdatedAt\"\n                Type=\"textbox\"\n                [EditMode]=\"false\"\n                [FormContext]=\"formContext\">\n              </mj-form-field>\n            </div>\n          </mj-collapsible-panel>\n        </div>\n      </section>\n    }\n  </main>\n</div>\n\n<!-- Add Records Dialog -->\n@if (showAddRecordsDialog) {\n  <mj-dialog\n    [Title]=\"'Add ' + entityDisplayName + ' to List'\"\n    (Close)=\"closeAddRecordsDialog()\"\n    [Visible]=\"showAddRecordsDialog\"\n    [MinWidth]=\"400\"\n    [Width]=\"600\"\n    [Height]=\"550\">\n    <div class=\"dialog-content add-records-dialog\">\n      @if (addDialogSaving) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!addDialogSaving) {\n        <!-- Search Input -->\n        <div class=\"search-section\">\n          <div class=\"search-input-wrapper\">\n            <span class=\"fa-solid fa-search search-icon\"></span>\n            <input\n              type=\"text\"\n              class=\"mj-input search-input\"\n              [placeholder]=\"'Search ' + entityDisplayName + '...'\"\n              [(ngModel)]=\"addRecordsSearchFilter\"\n              (ngModelChange)=\"onAddRecordsSearchChange($event)\" />\n          </div>\n          <span class=\"search-hint\">Type at least 2 characters to search</span>\n        </div>\n        <!-- Records List -->\n        <div class=\"records-list\">\n          @if (addDialogLoading) {\n            <div class=\"list-loading\">\n              <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n            </div>\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length >= 2) {\n            <mj-empty-state\n              Variant=\"no-results\"\n              Size=\"compact\"\n              [Title]=\"'No records found matching &quot;' + addRecordsSearchFilter + '&quot;'\" />\n          }\n          @if (!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length < 2) {\n            <mj-empty-state\n              Size=\"compact\"\n              Icon=\"fa-solid fa-list\"\n              Title=\"Search for records to add to this list\" />\n          }\n          @if (!addDialogLoading && addableRecords.length > 0) {\n            <!-- Selection controls -->\n            <div class=\"selection-controls\">\n              <button mjButton variant=\"flat\" (click)=\"selectAllAddable()\">Select All</button>\n              <button mjButton variant=\"flat\" (click)=\"deselectAllAddable()\">Deselect All</button>\n              <span class=\"selection-info\">{{ selectedAddableRecords.length }} selected</span>\n            </div>\n            <!-- Records -->\n            <div class=\"records-scroll\">\n              @for (record of addableRecords; track record) {\n                <div class=\"record-item\"\n                  [class.in-list]=\"record.isInList\"\n                  [class.selected]=\"record.isSelected\"\n                  (click)=\"toggleRecordSelection(record)\">\n                  <div class=\"record-checkbox\">\n                    @if (record.isInList) {\n                      <span class=\"fa-solid fa-check in-list-icon\" title=\"Already in list\"></span>\n                    }\n                    @if (!record.isInList) {\n                      <input type=\"checkbox\"\n                        [checked]=\"record.isSelected\"\n                        (click)=\"$event.stopPropagation()\"\n                        (change)=\"toggleRecordSelection(record)\">\n                    }\n                  </div>\n                  <div class=\"record-name\">{{ record.Name }}</div>\n                  @if (record.isInList) {\n                    <span class=\"in-list-badge\">In List</span>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <mj-dialog-actions>\n      <button mjButton\n        (click)=\"confirmAddRecords()\"\n        [disabled]=\"addDialogSaving || selectedAddableRecords.length === 0\"\n        variant=\"primary\">\n        Add {{ selectedAddableRecords.length > 0 ? selectedAddableRecords.length : '' }} Record{{ selectedAddableRecords.length !== 1 ? 's' : '' }}\n      </button>\n      <button mjButton\n        (click)=\"closeAddRecordsDialog()\"\n        [disabled]=\"addDialogSaving\">\n        Cancel\n      </button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Add From View Dialog -->\n@if (showAddFromViewDialog) {\n  <mj-dialog\n    Title=\"Add Records from Views\"\n    (Close)=\"closeAddFromViewDialog()\"\n    [Visible]=\"showAddFromViewDialog\"\n    [MinWidth]=\"400\"\n    [Width]=\"600\"\n    [Height]=\"500\">\n    <div class=\"dialog-content\">\n      @if (showAddFromViewLoader && fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading records from views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && addFromViewTotal > 0 && !fetchingRecordsToSave) {\n        <div class=\"dialog-loading\">\n          <mj-loading [text]=\"'Adding ' + addFromViewTotal + ' records to list...'\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (showAddFromViewLoader && !fetchingRecordsToSave && addFromViewTotal === 0) {\n        <div class=\"dialog-loading\">\n          <mj-loading text=\"Loading views...\" size=\"small\"></mj-loading>\n        </div>\n      }\n      @if (!showAddFromViewLoader) {\n        <p class=\"dialog-instruction\">Select views to add their records to this list:</p>\n        <div class=\"views-list\">\n          @if (!userViews || userViews.length === 0) {\n            <mj-empty-state\n              Size=\"compact\"\n              Icon=\"fa-solid fa-folder-open\"\n              Title=\"No saved views found for this entity\" />\n          }\n          @if (userViews && userViews.length > 0) {\n            @for (view of userViews; track view) {\n              <div class=\"view-item\"\n                [class.selected]=\"isViewSelected(view)\"\n                (click)=\"toggleViewSelection(view)\">\n                <input type=\"checkbox\"\n                  [checked]=\"isViewSelected(view)\"\n                  (click)=\"$event.stopPropagation()\"\n                  (change)=\"toggleViewSelection(view)\">\n                <span class=\"fa-solid fa-table-list view-icon\"></span>\n                <span class=\"view-name\">{{ view.Name }}</span>\n              </div>\n            }\n          }\n        </div>\n      }\n    </div>\n    <mj-dialog-actions>\n      <button mjButton\n        (click)=\"confirmAddFromView()\"\n        [disabled]=\"showAddFromViewLoader || userViewsToAdd.length === 0\"\n        variant=\"primary\">\n        Add from {{ userViewsToAdd.length }} View{{ userViewsToAdd.length !== 1 ? 's' : '' }}\n      </button>\n      <button mjButton\n        (click)=\"closeAddFromViewDialog()\"\n        [disabled]=\"showAddFromViewLoader\">\n        Cancel\n      </button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Share Dialog -->\n@if (showShareDialog && shareDialogConfig) {\n  <mj-list-share-dialog\n    [config]=\"shareDialogConfig\"\n    [visible]=\"showShareDialog\"\n    (complete)=\"onShareDialogComplete($event)\"\n    (cancel)=\"onShareDialogCancel()\"\n    (manageInvitations)=\"openInvitationsDialog()\"\n    (viewAuditLog)=\"openAuditLogDialog()\">\n  </mj-list-share-dialog>\n}\n\n<!-- Invitations Dialog (mockup 16). Opened from the share dialog's\n     \"Manage Invitations\" button. Per-list \u2014 bound to record.ID. -->\n@if (showInvitationsDialog && record?.IsSaved) {\n  <mj-dialog\n    [Visible]=\"true\"\n    [Title]=\"'Invitations \u2014 ' + record.Name\"\n    (Close)=\"closeInvitationsDialog()\"\n    [MinWidth]=\"640\"\n    [Width]=\"900\"\n    [Height]=\"640\">\n    <div class=\"dialog-content invitations-dialog\">\n      <mj-list-invitations\n        [Provider]=\"ProviderToUse\"\n        [ListID]=\"record.ID\"\n        [ListName]=\"record.Name\">\n      </mj-list-invitations>\n    </div>\n    <mj-dialog-actions>\n      <button mjButton (click)=\"closeInvitationsDialog()\" variant=\"outline\">Close</button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n\n<!-- Audit Log Dialog (mockup 18). Opened from the share dialog's\n     \"View audit log\" link. Per-list \u2014 bound to record.ID. -->\n@if (showAuditLogDialog && record?.IsSaved) {\n  <mj-dialog\n    [Visible]=\"true\"\n    [Title]=\"'Audit Log \u2014 ' + record.Name\"\n    (Close)=\"closeAuditLogDialog()\"\n    [MinWidth]=\"720\"\n    [Width]=\"980\"\n    [Height]=\"680\">\n    <div class=\"dialog-content audit-log-dialog\">\n      <mj-list-audit-log\n        [Provider]=\"ProviderToUse\"\n        [ListID]=\"record.ID\">\n      </mj-list-audit-log>\n    </div>\n    <mj-dialog-actions>\n      <button mjButton (click)=\"closeAuditLogDialog()\" variant=\"outline\">Close</button>\n    </mj-dialog-actions>\n  </mj-dialog>\n}\n", styles: ["/* ============================================\n   WORLD-CLASS LIST FORM STYLES\n   ============================================ */\n\n:host {\n    display: block;\n    height: 100%;\n}\n\n/* Layout */\n.list-form-explorer {\n    display: grid;\n    grid-template-areas:\n        \"header header\"\n        \"nav main\";\n    grid-template-columns: 64px 1fr;\n    grid-template-rows: auto 1fr;\n    height: 100%;\n    background: var(--mj-bg-surface-sunken);\n}\n\n/* Header */\n.list-header {\n    grid-area: header;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface);\n    border-bottom: 1px solid var(--mj-border-default);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon {\n    width: 56px;\n    height: 56px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-on-primary);\n    font-size: 24px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.name-row {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.list-name {\n    margin: 0;\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.edit-btn {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: var(--mj-text-disabled);\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.inline-edit-input {\n    padding: 8px 12px;\n    border: 2px solid var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: inherit;\n    background: var(--mj-bg-surface);\n    outline: none;\n}\n\n.name-input {\n    font-size: 24px;\n    font-weight: 600;\n    min-width: 300px;\n}\n\n.save-btn, .cancel-btn {\n    background: none;\n    border: none;\n    padding: 8px;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.save-btn {\n    color: var(--mj-status-success);\n}\n\n.save-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n}\n\n.cancel-btn {\n    color: var(--mj-status-error);\n}\n\n.cancel-btn:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.entity-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 16px;\n    font-size: 13px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.entity-badge i {\n    font-size: 12px;\n}\n\n.header-stats {\n    display: flex;\n    gap: 32px;\n}\n\n.stat-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    min-width: 80px;\n}\n\n.stat-value {\n    font-size: 24px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.stat-label {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n/* Phone section picker: hidden until the 768px rule below swaps it in for the rail */\n.phone-section-picker {\n    display: none;\n}\n\n/* Navigation Rail */\n.nav-rail {\n    grid-area: nav;\n    display: flex;\n    flex-direction: column;\n    padding: 16px 8px;\n    background: var(--mj-text-primary);\n    gap: 4px;\n}\n\n.nav-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 4px;\n    padding: 12px 8px;\n    background: none;\n    border: none;\n    color: rgba(255, 255, 255, 0.6);\n    cursor: pointer;\n    border-radius: 8px;\n    transition: all 0.2s;\n    position: relative;\n}\n\n.nav-item:hover:not(.disabled) {\n    background: rgba(255, 255, 255, 0.1);\n    color: var(--mj-text-inverse);\n}\n\n.nav-item.active {\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    color: color-mix(in srgb, var(--mj-brand-primary) 60%, white);\n}\n\n.nav-item.active::before {\n    content: '';\n    position: absolute;\n    left: 0;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 3px;\n    height: 24px;\n    background: var(--mj-brand-primary);\n    border-radius: 0 3px 3px 0;\n}\n\n.nav-item.disabled {\n    opacity: 0.4;\n    cursor: not-allowed;\n}\n\n.nav-item i {\n    font-size: 18px;\n}\n\n.nav-label {\n    font-size: 10px;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.nav-badge {\n    position: absolute;\n    top: 6px;\n    right: 6px;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: var(--mj-brand-primary);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: var(--mj-brand-on-primary);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\n\n/* Main Content */\n.main-content {\n    grid-area: main;\n    padding: 24px;\n    overflow-y: auto;\n}\n\n.section {\n    animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; transform: translateY(10px); }\n    to { opacity: 1; transform: translateY(0); }\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 20px;\n}\n\n.section-header h2 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.section-actions {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\n\n/* Search Box */\n.search-box {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box i {\n    position: absolute;\n    left: 12px;\n    color: var(--mj-text-disabled);\n}\n\n.search-box input {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    font-size: 14px;\n    width: 250px;\n    transition: all 0.2s;\n}\n\n.search-box input:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n/* Overview Section */\n.overview-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));\n    gap: 20px;\n}\n\n.overview-card {\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.card-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 20px;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.card-header h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header h3 i {\n    color: var(--mj-text-disabled);\n}\n\n.card-body {\n    padding: 20px;\n}\n\n.description-text {\n    margin: 0;\n    color: var(--mj-text-primary);\n    line-height: 1.6;\n}\n\n.description-empty {\n    margin: 0;\n    color: var(--mj-text-disabled);\n    font-style: italic;\n}\n\n.description-input {\n    width: 100%;\n    resize: vertical;\n    font-family: inherit;\n}\n\n.edit-actions {\n    display: flex;\n    gap: 8px;\n    margin-top: 12px;\n}\n\n.btn-primary {\n    padding: 8px 16px;\n    background: var(--mj-brand-primary);\n    color: var(--mj-brand-on-primary);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: background 0.2s;\n}\n\n.btn-primary:hover {\n    background: color-mix(in srgb, var(--mj-brand-primary) 85%, black);\n}\n\n.btn-secondary {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.btn-icon {\n    background: none;\n    border: 1px solid var(--mj-border-default);\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon:hover {\n    background: var(--mj-bg-surface-card);\n    border-color: var(--mj-border-strong);\n}\n\n.btn-danger {\n    padding: 8px 16px;\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    transition: background 0.2s;\n}\n\n.btn-danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n/* Details Card */\n.detail-row {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 12px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-card);\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.detail-value {\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon {\n    color: var(--mj-text-disabled);\n    font-size: 12px;\n}\n\n.owner-badge {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.category-select {\n    padding: 6px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 14px;\n    background: var(--mj-bg-surface);\n    cursor: pointer;\n}\n\n.category-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n/* Actions Card */\n.action-btn {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    width: 100%;\n    padding: 14px 16px;\n    background: var(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s;\n    margin-bottom: 8px;\n    text-align: left;\n}\n\n.action-btn:last-child {\n    margin-bottom: 0;\n}\n\n.action-btn:hover:not(:disabled) {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.action-btn:disabled {\n    opacity: 0.6;\n    cursor: not-allowed;\n}\n\n.action-btn i {\n    font-size: 18px;\n    color: var(--mj-brand-primary);\n    width: 24px;\n    text-align: center;\n}\n\n.action-btn span:first-of-type {\n    flex: 1;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.action-count {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n/* Items Section */\n.loading-state {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n}\n\n.items-table-container {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.items-toolbar {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 12px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-bottom: 1px solid color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.selection-count {\n    font-size: 14px;\n    color: var(--mj-brand-primary);\n    font-weight: 500;\n}\n\n.items-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.items-table th {\n    text-align: left;\n    padding: 12px 16px;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.items-table td {\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.items-table tr:last-child td {\n    border-bottom: none;\n}\n\n.items-table tr.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.items-table tr:hover:not(.selected) {\n    background: var(--mj-bg-surface-card);\n}\n\n.col-checkbox {\n    width: 40px;\n}\n\n.col-name {\n    width: 35%;\n}\n\n.col-id {\n    width: 25%;\n}\n\n.col-added {\n    width: 20%;\n}\n\n.col-actions {\n    width: 60px;\n    text-align: right;\n}\n\n.item-name {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.item-name.loading {\n    color: var(--mj-text-disabled);\n}\n\n.item-icon {\n    color: var(--mj-text-disabled);\n}\n\n.record-id {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: var(--mj-bg-surface-card);\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: var(--mj-text-secondary);\n}\n\n.items-footer {\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-border-default);\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n}\n\n.items-pager {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.items-pager .page-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.items-count {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n/* Sharing Section */\n.coming-soon-banner {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner > i {\n    font-size: 48px;\n    color: var(--mj-brand-primary);\n}\n\n.banner-content h3 {\n    margin: 0 0 8px;\n    color: var(--mj-text-primary);\n}\n\n.banner-content p {\n    margin: 0;\n    color: var(--mj-text-secondary);\n}\n\n.shares-grid {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Activity Section */\n.activity-timeline {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    padding: 20px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    margin-bottom: 20px;\n}\n\n.timeline-item {\n    display: flex;\n    gap: 16px;\n    padding: 16px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.timeline-item:last-child {\n    border-bottom: none;\n}\n\n.timeline-icon {\n    width: 36px;\n    height: 36px;\n    border-radius: 50%;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    flex-shrink: 0;\n}\n\n.timeline-icon.create {\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.timeline-content {\n    flex: 1;\n}\n\n.timeline-text {\n    margin: 0 0 4px;\n    color: var(--mj-text-primary);\n}\n\n.timeline-date {\n    font-size: 13px;\n    color: var(--mj-text-disabled);\n}\n\n.activity-info {\n    background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info p {\n    margin: 0;\n    color: var(--mj-status-warning);\n    font-size: 14px;\n}\n\n/* Settings Section */\n.settings-form {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n/* Add Buttons in Items Section */\n.add-buttons {\n    display: flex;\n    gap: 8px;\n}\n\n.add-buttons .btn-secondary {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n}\n\n/* Sharing Summary */\n.sharing-summary {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.summary-card {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    padding: 20px 24px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    flex: 1;\n    max-width: 280px;\n}\n\n.summary-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: var(--mj-brand-primary);\n    font-size: 20px;\n}\n\n.summary-icon.pending {\n    background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.summary-content {\n    display: flex;\n    flex-direction: column;\n}\n\n.summary-value {\n    font-size: 28px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    line-height: 1;\n}\n\n.summary-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n}\n\n.readonly-notice {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    color: var(--mj-text-secondary);\n    font-size: 14px;\n}\n\n.readonly-notice i {\n    color: var(--mj-text-disabled);\n}\n\n/* Dialog Styles */\n.dialog-content {\n    padding: 16px 0;\n}\n\n.dialog-loading {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    min-height: 200px;\n    gap: 16px;\n}\n\n.dialog-instruction {\n    margin: 0 0 16px;\n    color: var(--mj-text-secondary);\n}\n\n/* Add Records Dialog */\n.add-records-dialog .search-section {\n    margin-bottom: 16px;\n}\n\n.add-records-dialog .search-input {\n    width: 100%;\n}\n\n.add-records-dialog .search-hint {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    margin-top: 4px;\n}\n\n.add-records-dialog .records-list {\n    min-height: 280px;\n    max-height: 320px;\n    overflow-y: auto;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n}\n\n.add-records-dialog .list-loading {\n    display: flex;\n    justify-content: center;\n    padding: 40px;\n}\n\n.add-records-dialog .selection-controls {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: var(--mj-bg-surface-card);\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.add-records-dialog .selection-info {\n    margin-left: auto;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.add-records-dialog .records-scroll {\n    max-height: 260px;\n    overflow-y: auto;\n}\n\n.add-records-dialog .record-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog .record-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.add-records-dialog .record-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.add-records-dialog .record-item.in-list {\n    background: var(--mj-bg-surface-card);\n    cursor: default;\n}\n\n.add-records-dialog .record-checkbox {\n    width: 20px;\n    display: flex;\n    justify-content: center;\n}\n\n.add-records-dialog .in-list-icon {\n    color: var(--mj-status-success);\n}\n\n.add-records-dialog .record-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n.add-records-dialog .in-list-badge {\n    padding: 2px 8px;\n    background: color-mix(in srgb, var(--mj-status-success) 10%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n/* Add From View Dialog */\n.views-list {\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.view-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border-bottom: 1px solid var(--mj-border-default);\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.view-item:last-child {\n    border-bottom: none;\n}\n\n.view-item:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.view-item.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.view-item .view-icon {\n    color: var(--mj-brand-primary);\n}\n\n.view-item .view-name {\n    flex: 1;\n    font-size: 14px;\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .list-form-explorer {\n        grid-template-columns: 1fr;\n        grid-template-areas:\n            \"header\"\n            \"nav\"\n            \"main\";\n    }\n\n    .nav-rail {\n        flex-direction: row;\n        padding: 8px 16px;\n        overflow-x: auto;\n    }\n\n    .nav-item {\n        flex-direction: row;\n        padding: 10px 16px;\n        gap: 8px;\n    }\n\n    .nav-item::before {\n        display: none;\n    }\n\n    .header-stats {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    /* The rail becomes one section-picker button in the nav grid area (same pattern as the\n       standard record form). */\n    .nav-rail {\n        display: none;\n    }\n\n    .phone-section-picker {\n        grid-area: nav;\n        display: block;\n        padding: 4px 8px;\n        border-bottom: 1px solid var(--mj-border-default);\n        background: var(--mj-bg-surface);\n    }\n\n    .list-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .overview-grid {\n        grid-template-columns: 1fr;\n    }\n\n    .search-box input {\n        width: 100%;\n    }\n\n    .section-actions {\n        flex-direction: column;\n        align-items: stretch;\n        width: 100%;\n    }\n}\n", ".content-margin {\n  margin: 10px;\n}\n\n\na {\n  font-size: 14px;\n  font-weight: bolder;\n}\n\n.tab-header-icon {\n  margin-right: 5px;\n}\n\n.record-form {\n  display: block;\n  flex-direction: column;\n  background-color: var(--mj-bg-surface);\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: var(--mj-bg-surface);\n}\n\nbutton {\n  margin-right: 5px;\n}\n\n.record-form h2 {\n  margin-bottom: 10px;\n}\n\n.record-form-row {\n  display: grid;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n  gap: 10px;\n  margin-bottom: 12px;\n  padding-top: 5px;\n  padding-bottom: 5px;\n}\n\n.record-form .record-form-row > :first-child {\n  font-weight: bold;\n  padding-right: 10px;\n}\n\n.record-form .record-form-row > span {\n  white-space: pre-line;\n  max-height: 300px;\n  overflow: auto;\n}\n\n@media (min-width: 768px) {\n  .record-form-row {\n    flex-direction: row;\n    align-items: center;\n  }\n\n  .record-form-row label {\n    width: 240px;\n    margin-bottom: 0;\n  }\n}\n\n/* Collapsible Panel Styles */\n.form-panels-container {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: var(--mj-bg-surface);\n}\n\n/* All field sections take full width */\n.form-panels-container > .form-card {\n  width: 100%;\n}\n\n/* Related entity grid container - responsive layout */\n.form-panels-container .related-entity-grid {\n  display: grid;\n  grid-template-columns: 1fr;\n  gap: 16px;\n  width: 100%;\n}\n\n/* Responsive multi-column layout for related entities on wider screens */\n@media (min-width: 1400px) {\n  .form-panels-container .related-entity-grid {\n    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));\n  }\n}\n\n.form-card {\n  background: var(--mj-bg-surface-card);\n  border-radius: 8px;\n  box-shadow: 0 2px 4px var(--mj-shadow-sm);\n  overflow: hidden;\n}\n\n.collapsible-card {\n  overflow: hidden;\n}\n\n.collapsible-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 20px 24px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: var(--mj-bg-surface-sunken);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: var(--mj-brand-primary);\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n}\n\n.collapsible-header .collapse-icon {\n  color: var(--mj-text-muted);\n  transition: transform 0.3s ease;\n}\n\n.collapsible-body {\n  max-height: 2000px;\n  overflow: hidden;\n  transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease;\n  opacity: 1;\n}\n\n.collapsible-body.collapsed {\n  max-height: 0;\n  padding: 0;\n  opacity: 0;\n}\n\n.form-body {\n  padding: 24px;\n}\n\n/* Related Entity Sections - Visual Distinction */\n.form-card.related-entity {\n  background: var(--mj-bg-surface-card);\n  border-left: 3px solid var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-header {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: var(--mj-bg-surface-card);\n  border-bottom-color: var(--mj-brand-primary);\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: var(--mj-brand-primary);\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: var(--mj-bg-surface-card);\n  border-bottom: 2px solid var(--mj-border-default);\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px var(--mj-shadow-sm);\n}\n\n.form-section-controls .control-group {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n.form-section-controls button {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  background: var(--mj-bg-surface-card);\n  color: var(--mj-text-secondary);\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.form-section-controls button:hover {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  border-color: var(--mj-brand-primary);\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px var(--mj-shadow-md);\n}\n\n.form-section-controls button:active {\n  transform: translateY(0);\n}\n\n.form-section-controls button i {\n  margin-right: 0;\n  font-size: 14px;\n}\n\n.form-section-controls .section-search {\n  padding: 8px 14px;\n  font-size: 13px;\n  border: 1px solid var(--mj-border-strong);\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-primary);\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: var(--mj-brand-primary);\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: var(--mj-text-muted);\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: var(--mj-text-muted);\n  margin-left: auto;\n  font-weight: 500;\n}\n\n/* Hidden sections for search filter */\n.form-card.search-hidden {\n  display: none;\n}\n\n/* Section count badge */\n.section-count-badge {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n/* Search highlighting in section names */\n.collapsible-title h3 .search-highlight {\n  background-color: var(--mj-status-warning);\n  color: var(--mj-text-primary);\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n/* Row count badge in section headers */\n.collapsible-title .row-count-badge {\n  background: var(--mj-status-success);\n  color: var(--mj-text-inverse);\n  padding: 3px 6px 2px 6px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n  margin-left: 8px;\n  vertical-align: middle;\n  position: relative;\n  top: -2px;\n  display: inline-block;\n  line-height: 1;\n}\n\n/* Gray badge for zero rows (loaded but empty) */\n.collapsible-title .row-count-badge.zero-rows {\n  background: var(--mj-text-muted);\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJListFormComponentExtended, { className: "MJListFormComponentExtended", filePath: "src/lib/custom/Lists/list-form.component.ts", lineNumber: 56 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MJListFormComponentExtended, { className: "MJListFormComponentExtended", filePath: "src/lib/custom/Lists/list-form.component.ts", lineNumber: 57 }); })();
 //# sourceMappingURL=list-form.component.js.map