@memberjunction/ng-core-entity-forms 2.133.0 → 3.1.0

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

@@ -5,52 +5,55 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import { Subject } from 'rxjs';
+import { Subject, debounceTime } from 'rxjs';
 import { RegisterClass } from '@memberjunction/global';
 import { BaseFormComponent } from '@memberjunction/ng-base-forms';
 import { ListFormComponent } from '../../generated/Entities/List/list.form.component';
-import { Metadata, RunView } from '@memberjunction/core';
+import { Metadata, RunView, LogError, LogStatus } from '@memberjunction/core';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
-import * as i3 from "@memberjunction/ng-user-view-grid";
-import * as i4 from "@memberjunction/ng-base-forms";
-import * as i5 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@progress/kendo-angular-dialog";
+import * as i4 from "@progress/kendo-angular-inputs";
+import * as i5 from "@progress/kendo-angular-buttons";
+import * as i6 from "@memberjunction/ng-base-forms";
+import * as i7 from "@memberjunction/ng-shared-generic";
+import * as i8 from "@memberjunction/ng-list-management";
 function ListFormComponentExtended_ng_container_7_button_3_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 23);
+    i0.ɵɵelementStart(0, "button", 26);
     i0.ɵɵlistener("click", function ListFormComponentExtended_ng_container_7_button_3_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.startEditingName()); });
-    i0.ɵɵelement(1, "i", 24);
+    i0.ɵɵelement(1, "i", 27);
     i0.ɵɵelementEnd();
 } }
 function ListFormComponentExtended_ng_container_7_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "h1", 21);
+    i0.ɵɵelementStart(1, "h1", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, ListFormComponentExtended_ng_container_7_button_3_Template, 2, 0, "button", 22);
+    i0.ɵɵtemplate(3, ListFormComponentExtended_ng_container_7_button_3_Template, 2, 0, "button", 25);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate((ctx_r1.record == null ? null : ctx_r1.record.Name) || "Untitled List");
+    i0.ɵɵtextInterpolate(ctx_r1.record.Name || "Untitled List");
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.isCurrentUserOwner());
 } }
 function ListFormComponentExtended_ng_container_8_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "input", 25, 0);
+    i0.ɵɵelementStart(1, "input", 28, 0);
     i0.ɵɵtwoWayListener("ngModelChange", function ListFormComponentExtended_ng_container_8_Template_input_ngModelChange_1_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 ListFormComponentExtended_ng_container_8_Template_input_keydown_enter_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.saveNameEdit()); })("keydown.escape", function ListFormComponentExtended_ng_container_8_Template_input_keydown_escape_1_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelNameEdit()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 26);
+    i0.ɵɵelementStart(3, "button", 29);
     i0.ɵɵlistener("click", function ListFormComponentExtended_ng_container_8_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.saveNameEdit()); });
-    i0.ɵɵelement(4, "i", 27);
+    i0.ɵɵelement(4, "i", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 28);
+    i0.ɵɵelementStart(5, "button", 31);
     i0.ɵɵlistener("click", function ListFormComponentExtended_ng_container_8_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.cancelNameEdit()); });
-    i0.ɵɵelement(6, "i", 29);
+    i0.ɵɵelement(6, "i", 32);
     i0.ɵɵelementEnd();
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
@@ -59,7 +62,7 @@ function ListFormComponentExtended_ng_container_8_Template(rf, ctx) { if (rf & 1
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.editingName);
 } }
 function ListFormComponentExtended_button_30_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 33);
+    i0.ɵɵelementStart(0, "span", 36);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -69,13 +72,13 @@ function ListFormComponentExtended_button_30_span_4_Template(rf, ctx) { if (rf &
 } }
 function ListFormComponentExtended_button_30_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 30);
+    i0.ɵɵelementStart(0, "button", 33);
     i0.ɵɵlistener("click", function ListFormComponentExtended_button_30_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", 31);
+    i0.ɵɵelementStart(2, "span", 34);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, ListFormComponentExtended_button_30_span_4_Template, 2, 1, "span", 32);
+    i0.ɵɵtemplate(4, ListFormComponentExtended_button_30_span_4_Template, 2, 1, "span", 35);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const nav_r5 = ctx.$implicit;
@@ -91,13 +94,13 @@ function ListFormComponentExtended_button_30_Template(rf, ctx) { if (rf & 1) {
 } }
 function ListFormComponentExtended_section_32_button_7_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵelementStart(0, "button", 64);
     i0.ɵɵlistener("click", function ListFormComponentExtended_section_32_button_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", 24);
+    i0.ɵɵelement(1, "i", 27);
     i0.ɵɵelementEnd();
 } }
 function ListFormComponentExtended_section_32_ng_container_9_p_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 64);
+    i0.ɵɵelementStart(0, "p", 67);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -106,33 +109,33 @@ function ListFormComponentExtended_section_32_ng_container_9_p_1_Template(rf, ct
     i0.ɵɵtextInterpolate(ctx_r1.record.Description);
 } }
 function ListFormComponentExtended_section_32_ng_container_9_p_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 65);
+    i0.ɵɵelementStart(0, "p", 68);
     i0.ɵɵtext(1, "No description provided");
     i0.ɵɵelementEnd();
 } }
 function ListFormComponentExtended_section_32_ng_container_9_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ListFormComponentExtended_section_32_ng_container_9_p_1_Template, 2, 1, "p", 62)(2, ListFormComponentExtended_section_32_ng_container_9_p_2_Template, 2, 0, "p", 63);
+    i0.ɵɵtemplate(1, ListFormComponentExtended_section_32_ng_container_9_p_1_Template, 2, 1, "p", 65)(2, ListFormComponentExtended_section_32_ng_container_9_p_2_Template, 2, 0, "p", 66);
     i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.record == null ? null : ctx_r1.record.Description);
+    i0.ɵɵproperty("ngIf", ctx_r1.record.Description);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !(ctx_r1.record == null ? null : ctx_r1.record.Description));
+    i0.ɵɵproperty("ngIf", !ctx_r1.record.Description);
 } }
 function ListFormComponentExtended_section_32_ng_container_10_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "textarea", 66);
+    i0.ɵɵelementStart(1, "textarea", 69);
     i0.ɵɵtwoWayListener("ngModelChange", function ListFormComponentExtended_section_32_ng_container_10_Template_textarea_ngModelChange_1_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 ListFormComponentExtended_section_32_ng_container_10_Template_textarea_keydown_escape_1_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelDescriptionEdit()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 67)(3, "button", 68);
+    i0.ɵɵelementStart(2, "div", 70)(3, "button", 71);
     i0.ɵɵlistener("click", function ListFormComponentExtended_section_32_ng_container_10_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.saveDescriptionEdit()); });
     i0.ɵɵtext(4, "Save");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 69);
+    i0.ɵɵelementStart(5, "button", 72);
     i0.ɵɵlistener("click", function ListFormComponentExtended_section_32_ng_container_10_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.cancelDescriptionEdit()); });
     i0.ɵɵtext(6, "Cancel");
     i0.ɵɵelementEnd()();
@@ -143,8 +146,8 @@ function ListFormComponentExtended_section_32_ng_container_10_Template(rf, ctx)
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.editingDescription);
 } }
 function ListFormComponentExtended_section_32_span_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 45);
-    i0.ɵɵelement(1, "i", 70);
+    i0.ɵɵelementStart(0, "span", 48);
+    i0.ɵɵelement(1, "i", 73);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -153,7 +156,7 @@ function ListFormComponentExtended_section_32_span_26_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate1(" ", ctx_r1.categoryName, " ");
 } }
 function ListFormComponentExtended_section_32_select_27_option_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 72);
+    i0.ɵɵelementStart(0, "option", 75);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -164,97 +167,123 @@ function ListFormComponentExtended_section_32_select_27_option_3_Template(rf, ct
 } }
 function ListFormComponentExtended_section_32_select_27_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "select", 71);
+    i0.ɵɵelementStart(0, "select", 74);
     i0.ɵɵlistener("ngModelChange", function ListFormComponentExtended_section_32_select_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", 72);
+    i0.ɵɵelementStart(1, "option", 75);
     i0.ɵɵtext(2, "Uncategorized");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, ListFormComponentExtended_section_32_select_27_option_3_Template, 2, 2, "option", 73);
+    i0.ɵɵtemplate(3, ListFormComponentExtended_section_32_select_27_option_3_Template, 2, 2, "option", 76);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
-    i0.ɵɵproperty("ngModel", ctx_r1.record == null ? null : ctx_r1.record.CategoryID);
+    i0.ɵɵproperty("ngModel", ctx_r1.record.CategoryID);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngValue", null);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngForOf", ctx_r1.categories);
 } }
 function ListFormComponentExtended_section_32_span_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 74);
+    i0.ɵɵelementStart(0, "span", 77);
     i0.ɵɵtext(1, "You");
     i0.ɵɵelementEnd();
 } }
+function ListFormComponentExtended_section_32_button_54_span_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.stats.shareCount);
+} }
+function ListFormComponentExtended_section_32_button_54_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 57);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_section_32_button_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", 78);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Share List");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(4, ListFormComponentExtended_section_32_button_54_span_4_Template, 2, 1, "span", 79);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", ctx_r1.stats.shareCount > 0);
+} }
+function ListFormComponentExtended_section_32_button_55_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 57);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_section_32_button_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", 78);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "View Sharing");
+    i0.ɵɵelementEnd()();
+} }
 function ListFormComponentExtended_section_32_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "section", 34)(1, "div", 35)(2, "div", 36)(3, "div", 37)(4, "h3");
-    i0.ɵɵelement(5, "i", 38);
+    i0.ɵɵelementStart(0, "section", 37)(1, "div", 38)(2, "div", 39)(3, "div", 40)(4, "h3");
+    i0.ɵɵelement(5, "i", 41);
     i0.ɵɵtext(6, " Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, ListFormComponentExtended_section_32_button_7_Template, 2, 0, "button", 39);
+    i0.ɵɵtemplate(7, ListFormComponentExtended_section_32_button_7_Template, 2, 0, "button", 42);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 40);
+    i0.ɵɵelementStart(8, "div", 43);
     i0.ɵɵtemplate(9, ListFormComponentExtended_section_32_ng_container_9_Template, 3, 2, "ng-container", 7)(10, ListFormComponentExtended_section_32_ng_container_10_Template, 7, 1, "ng-container", 7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 41)(12, "div", 37)(13, "h3");
-    i0.ɵɵelement(14, "i", 42);
+    i0.ɵɵelementStart(11, "div", 44)(12, "div", 40)(13, "h3");
+    i0.ɵɵelement(14, "i", 45);
     i0.ɵɵtext(15, " Details");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 40)(17, "div", 43)(18, "span", 44);
+    i0.ɵɵelementStart(16, "div", 43)(17, "div", 46)(18, "span", 47);
     i0.ɵɵtext(19, "Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "span", 45);
-    i0.ɵɵelement(21, "i", 46);
+    i0.ɵɵelementStart(20, "span", 48);
+    i0.ɵɵelement(21, "i", 49);
     i0.ɵɵtext(22);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 43)(24, "span", 44);
+    i0.ɵɵelementStart(23, "div", 46)(24, "span", 47);
     i0.ɵɵtext(25, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(26, ListFormComponentExtended_section_32_span_26_Template, 3, 1, "span", 47)(27, ListFormComponentExtended_section_32_select_27_Template, 4, 3, "select", 48);
+    i0.ɵɵtemplate(26, ListFormComponentExtended_section_32_span_26_Template, 3, 1, "span", 50)(27, ListFormComponentExtended_section_32_select_27_Template, 4, 3, "select", 51);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "div", 43)(29, "span", 44);
+    i0.ɵɵelementStart(28, "div", 46)(29, "span", 47);
     i0.ɵɵtext(30, "Owner");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "span", 45);
-    i0.ɵɵelement(32, "i", 49);
+    i0.ɵɵelementStart(31, "span", 48);
+    i0.ɵɵelement(32, "i", 52);
     i0.ɵɵtext(33);
-    i0.ɵɵtemplate(34, ListFormComponentExtended_section_32_span_34_Template, 2, 0, "span", 50);
+    i0.ɵɵtemplate(34, ListFormComponentExtended_section_32_span_34_Template, 2, 0, "span", 53);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(35, "div", 43)(36, "span", 44);
+    i0.ɵɵelementStart(35, "div", 46)(36, "span", 47);
     i0.ɵɵtext(37, "Created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(38, "span", 45);
-    i0.ɵɵelement(39, "i", 51);
+    i0.ɵɵelementStart(38, "span", 48);
+    i0.ɵɵelement(39, "i", 54);
     i0.ɵɵtext(40);
     i0.ɵɵpipe(41, "date");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(42, "div", 52)(43, "div", 37)(44, "h3");
-    i0.ɵɵelement(45, "i", 53);
+    i0.ɵɵelementStart(42, "div", 55)(43, "div", 40)(44, "h3");
+    i0.ɵɵelement(45, "i", 56);
     i0.ɵɵtext(46, " Quick Actions");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(47, "div", 40)(48, "button", 54);
+    i0.ɵɵelementStart(47, "div", 43)(48, "button", 57);
     i0.ɵɵlistener("click", function ListFormComponentExtended_section_32_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.ɵɵelement(49, "i", 58);
     i0.ɵɵelementStart(50, "span");
     i0.ɵɵtext(51, "View Items");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(52, "span", 56);
+    i0.ɵɵelementStart(52, "span", 59);
     i0.ɵɵtext(53);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(54, "button", 57);
-    i0.ɵɵelement(55, "i", 58);
-    i0.ɵɵelementStart(56, "span");
-    i0.ɵɵtext(57, "Share List");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(58, "span", 59);
-    i0.ɵɵtext(59, "Soon");
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(60, "button", 57);
-    i0.ɵɵelement(61, "i", 60);
-    i0.ɵɵelementStart(62, "span");
-    i0.ɵɵtext(63, "Export Data");
+    i0.ɵɵtemplate(54, ListFormComponentExtended_section_32_button_54_Template, 5, 1, "button", 60)(55, ListFormComponentExtended_section_32_button_55_Template, 4, 0, "button", 60);
+    i0.ɵɵelementStart(56, "button", 61);
+    i0.ɵɵelement(57, "i", 62);
+    i0.ɵɵelementStart(58, "span");
+    i0.ɵɵtext(59, "Export Data");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(64, "span", 59);
-    i0.ɵɵtext(65, "Soon");
+    i0.ɵɵelementStart(60, "span", 63);
+    i0.ɵɵtext(61, "Soon");
     i0.ɵɵelementEnd()()()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -277,22 +306,37 @@ function ListFormComponentExtended_section_32_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.isCurrentUserOwner());
     i0.ɵɵadvance(6);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(41, 14, ctx_r1.record == null ? null : ctx_r1.record.__mj_CreatedAt, "mediumDate"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(41, 15, ctx_r1.record.__mj_CreatedAt, "mediumDate"), " ");
     i0.ɵɵadvance(13);
     i0.ɵɵtextInterpolate(ctx_r1.stats.itemCount);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("disabled", true);
-    i0.ɵɵadvance(6);
+    i0.ɵɵproperty("ngIf", ctx_r1.isCurrentUserOwner());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.isCurrentUserOwner());
+    i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", true);
 } }
-function ListFormComponentExtended_section_33_div_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵelement(1, "mj-loading", 87);
+function ListFormComponentExtended_section_33_div_8_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 92)(1, "button", 93);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_section_33_div_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", 94);
+    i0.ɵɵtext(3, " Add Records ");
     i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 95);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_section_33_div_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", 96);
+    i0.ɵɵtext(6, " Add From View ");
+    i0.ɵɵelementEnd()();
 } }
 function ListFormComponentExtended_section_33_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 88)(1, "div", 89);
-    i0.ɵɵelement(2, "i", 90);
+    i0.ɵɵelementStart(0, "div", 97);
+    i0.ɵɵelement(1, "mj-loading", 98);
+    i0.ɵɵelementEnd();
+} }
+function ListFormComponentExtended_section_33_div_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99)(1, "div", 100);
+    i0.ɵɵelement(2, "i", 101);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "No Items Yet");
@@ -305,14 +349,14 @@ function ListFormComponentExtended_section_33_div_11_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate1("This list doesn't have any items. Add records from the ", ctx_r1.entityDisplayName, " entity.");
 } }
-function ListFormComponentExtended_section_33_div_12_div_1_Template(rf, ctx) { if (rf & 1) {
-    const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 103)(1, "span", 104);
+function ListFormComponentExtended_section_33_div_13_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 114)(1, "span", 115);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "button", 105);
-    i0.ɵɵlistener("click", function ListFormComponentExtended_section_33_div_12_div_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.removeSelectedItems()); });
-    i0.ɵɵelement(4, "i", 106);
+    i0.ɵɵelementStart(3, "button", 116);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_section_33_div_13_div_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", 117);
     i0.ɵɵtext(5, " Remove from List ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -320,73 +364,73 @@ function ListFormComponentExtended_section_33_div_12_div_1_Template(rf, ctx) { i
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", ctx_r1.selectedItems.size, " selected");
 } }
-function ListFormComponentExtended_section_33_div_12_tr_15_i_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 113);
+function ListFormComponentExtended_section_33_div_13_tr_15_i_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 124);
 } }
-function ListFormComponentExtended_section_33_div_12_tr_15_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr")(1, "td", 94)(2, "input", 95);
-    i0.ɵɵlistener("change", function ListFormComponentExtended_section_33_div_12_tr_15_Template_input_change_2_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleItemSelection(item_r15)); });
+function ListFormComponentExtended_section_33_div_13_tr_15_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr")(1, "td", 105)(2, "input", 106);
+    i0.ɵɵlistener("change", function ListFormComponentExtended_section_33_div_13_tr_15_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", 96)(4, "div", 107);
-    i0.ɵɵelement(5, "i", 108);
+    i0.ɵɵelementStart(3, "td", 107)(4, "div", 118);
+    i0.ɵɵelement(5, "i", 119);
     i0.ɵɵelementStart(6, "span");
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(8, ListFormComponentExtended_section_33_div_12_tr_15_i_8_Template, 1, 0, "i", 109);
+    i0.ɵɵtemplate(8, ListFormComponentExtended_section_33_div_13_tr_15_i_8_Template, 1, 0, "i", 120);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(9, "td", 97)(10, "code", 110);
+    i0.ɵɵelementStart(9, "td", 108)(10, "code", 121);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "td", 98);
+    i0.ɵɵelementStart(12, "td", 109);
     i0.ɵɵtext(13);
     i0.ɵɵpipe(14, "date");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "td", 99)(16, "button", 111);
-    i0.ɵɵlistener("click", function ListFormComponentExtended_section_33_div_12_tr_15_Template_button_click_16_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openRecord(item_r15)); });
-    i0.ɵɵelement(17, "i", 112);
+    i0.ɵɵelementStart(15, "td", 110)(16, "button", 122);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_section_33_div_13_tr_15_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", 123);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const item_r15 = ctx.$implicit;
+    const item_r18 = ctx.$implicit;
     const ctx_r1 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.has(item_r15.detail.ID));
+    i0.ɵɵclassProp("selected", ctx_r1.selectedItems.has(item_r18.detail.ID));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("checked", ctx_r1.selectedItems.has(item_r15.detail.ID));
+    i0.ɵɵproperty("checked", ctx_r1.selectedItems.has(item_r18.detail.ID));
     i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("loading", item_r15.isLoading);
+    i0.ɵɵclassProp("loading", item_r18.isLoading);
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.entityIcon);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(item_r15.recordName);
+    i0.ɵɵtextInterpolate(item_r18.recordName);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r15.isLoading);
+    i0.ɵɵproperty("ngIf", item_r18.isLoading);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(item_r15.detail.RecordID);
+    i0.ɵɵtextInterpolate(item_r18.detail.RecordID);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(14, 11, item_r15.detail.__mj_CreatedAt, "shortDate"), " ");
+    i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind2(14, 11, item_r18.detail.__mj_CreatedAt, "shortDate"), " ");
 } }
-function ListFormComponentExtended_section_33_div_12_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 91);
-    i0.ɵɵtemplate(1, ListFormComponentExtended_section_33_div_12_div_1_Template, 6, 1, "div", 92);
-    i0.ɵɵelementStart(2, "table", 93)(3, "thead")(4, "tr")(5, "th", 94)(6, "input", 95);
-    i0.ɵɵlistener("change", function ListFormComponentExtended_section_33_div_12_Template_input_change_6_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleSelectAll()); });
+function ListFormComponentExtended_section_33_div_13_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 102);
+    i0.ɵɵtemplate(1, ListFormComponentExtended_section_33_div_13_div_1_Template, 6, 1, "div", 103);
+    i0.ɵɵelementStart(2, "table", 104)(3, "thead")(4, "tr")(5, "th", 105)(6, "input", 106);
+    i0.ɵɵlistener("change", function ListFormComponentExtended_section_33_div_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", 96);
+    i0.ɵɵelementStart(7, "th", 107);
     i0.ɵɵtext(8, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "th", 97);
+    i0.ɵɵelementStart(9, "th", 108);
     i0.ɵɵtext(10, "Record ID");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "th", 98);
+    i0.ɵɵelementStart(11, "th", 109);
     i0.ɵɵtext(12, "Added");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(13, "th", 99);
+    i0.ɵɵelement(13, "th", 110);
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(14, "tbody");
-    i0.ɵɵtemplate(15, ListFormComponentExtended_section_33_div_12_tr_15_Template, 18, 14, "tr", 100);
+    i0.ɵɵtemplate(15, ListFormComponentExtended_section_33_div_13_tr_15_Template, 18, 14, "tr", 111);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(16, "div", 101)(17, "span", 102);
+    i0.ɵɵelementStart(16, "div", 112)(17, "span", 113);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -401,25 +445,28 @@ function ListFormComponentExtended_section_33_div_12_Template(rf, ctx) { if (rf
     i0.ɵɵtextInterpolate2(" Showing ", ctx_r1.filteredItems.length, " of ", ctx_r1.listItems.length, " items ");
 } }
 function ListFormComponentExtended_section_33_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "section", 75)(1, "div", 76)(2, "h2");
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "section", 80)(1, "div", 81)(2, "h2");
     i0.ɵɵtext(3, "List Items");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 77)(5, "div", 78);
-    i0.ɵɵelement(6, "i", 79);
-    i0.ɵɵelementStart(7, "input", 80);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListFormComponentExtended_section_33_Template_input_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.itemSearchTerm, $event) || (ctx_r1.itemSearchTerm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(4, "div", 82)(5, "div", 83);
+    i0.ɵɵelement(6, "i", 84);
+    i0.ɵɵelementStart(7, "input", 85);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListFormComponentExtended_section_33_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.ɵɵelementStart(8, "button", 81);
-    i0.ɵɵlistener("click", function ListFormComponentExtended_section_33_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshItems()); });
-    i0.ɵɵelement(9, "i", 82);
+    i0.ɵɵtemplate(8, ListFormComponentExtended_section_33_div_8_Template, 7, 0, "div", 86);
+    i0.ɵɵelementStart(9, "button", 87);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_section_33_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshItems()); });
+    i0.ɵɵelement(10, "i", 88);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(10, ListFormComponentExtended_section_33_div_10_Template, 2, 0, "div", 83)(11, ListFormComponentExtended_section_33_div_11_Template, 7, 1, "div", 84)(12, ListFormComponentExtended_section_33_div_12_Template, 19, 5, "div", 85);
+    i0.ɵɵtemplate(11, ListFormComponentExtended_section_33_div_11_Template, 2, 0, "div", 89)(12, ListFormComponentExtended_section_33_div_12_Template, 7, 1, "div", 90)(13, ListFormComponentExtended_section_33_div_13_Template, 19, 5, "div", 91);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(7);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.itemSearchTerm);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isCurrentUserOwner());
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("ngIf", ctx_r1.isLoadingItems);
     i0.ɵɵadvance();
@@ -427,83 +474,157 @@ function ListFormComponentExtended_section_33_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", !ctx_r1.isLoadingItems && ctx_r1.listItems.length > 0);
 } }
-function ListFormComponentExtended_section_34_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 118)(1, "mj-collapsible-panel", 119);
-    i0.ɵɵelement(2, "mj-user-view-grid", 120);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "mj-collapsible-panel", 121);
-    i0.ɵɵelement(4, "mj-user-view-grid", 120);
+function ListFormComponentExtended_section_34_div_4_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 82)(1, "button", 71);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_section_34_div_4_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openShareDialog()); });
+    i0.ɵɵelement(2, "i", 129);
+    i0.ɵɵtext(3, " Manage Sharing ");
     i0.ɵɵelementEnd()();
+} }
+function ListFormComponentExtended_section_34_div_5_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 131)(1, "div", 138);
+    i0.ɵɵelement(2, "i", 139);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 134)(4, "span", 135);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 136);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r1.stats.invitationCount);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Pending Invitation", ctx_r1.stats.invitationCount !== 1 ? "s" : "", "");
+} }
+function ListFormComponentExtended_section_34_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 130)(1, "div", 131)(2, "div", 132);
+    i0.ɵɵelement(3, "i", 133);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 134)(5, "span", 135);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 136);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(9, ListFormComponentExtended_section_34_div_5_div_9_Template, 8, 2, "div", 137);
+    i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(6);
+    i0.ɵɵtextInterpolate(ctx_r1.stats.shareCount);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("Active Share", ctx_r1.stats.shareCount !== 1 ? "s" : "", "");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("form", ctx_r1)("formContext", ctx_r1.formContext)("badgeCount", ctx_r1.stats.shareCount);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: List Shares", "ListID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: List Shares"))("AllowLoad", true)("EditMode", ctx_r1.GridEditMode());
+    i0.ɵɵproperty("ngIf", ctx_r1.stats.invitationCount > 0);
+} }
+function ListFormComponentExtended_section_34_div_6_p_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵtext(1, "This list is private. Click \"Manage Sharing\" to share it with other users or roles.");
+    i0.ɵɵelementEnd();
+} }
+function ListFormComponentExtended_section_34_div_6_p_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵtext(1, "This list hasn't been shared with anyone else.");
+    i0.ɵɵelementEnd();
+} }
+function ListFormComponentExtended_section_34_div_6_button_7_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 71);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_section_34_div_6_button_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.openShareDialog()); });
+    i0.ɵɵelement(1, "i", 129);
+    i0.ɵɵtext(2, " Share This List ");
+    i0.ɵɵelementEnd();
+} }
+function ListFormComponentExtended_section_34_div_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99)(1, "div", 100);
+    i0.ɵɵelement(2, "i", 78);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "h3");
+    i0.ɵɵtext(4, "Not Shared Yet");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, ListFormComponentExtended_section_34_div_6_p_5_Template, 2, 0, "p", 7)(6, ListFormComponentExtended_section_34_div_6_p_6_Template, 2, 0, "p", 7)(7, ListFormComponentExtended_section_34_div_6_button_7_Template, 3, 0, "button", 140);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngIf", ctx_r1.isCurrentUserOwner());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("form", ctx_r1)("formContext", ctx_r1.formContext)("badgeCount", ctx_r1.stats.invitationCount);
+    i0.ɵɵproperty("ngIf", !ctx_r1.isCurrentUserOwner());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("Params", ctx_r1.BuildRelationshipViewParamsByEntityName("MJ: List Invitations", "ListID"))("NewRecordValues", ctx_r1.NewRecordValues("MJ: List Invitations"))("AllowLoad", true)("EditMode", ctx_r1.GridEditMode());
+    i0.ɵɵproperty("ngIf", ctx_r1.isCurrentUserOwner());
+} }
+function ListFormComponentExtended_section_34_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 141);
+    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Only the list owner can manage sharing settings.");
+    i0.ɵɵelementEnd()();
 } }
 function ListFormComponentExtended_section_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 114)(1, "div", 115);
-    i0.ɵɵelement(2, "i", 58);
-    i0.ɵɵelementStart(3, "div", 116)(4, "h3");
-    i0.ɵɵtext(5, "Sharing Coming Soon");
+    i0.ɵɵelementStart(0, "section", 125)(1, "div", 81)(2, "h2");
+    i0.ɵɵtext(3, "Sharing");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "p");
-    i0.ɵɵtext(7, "You'll soon be able to share lists with other users, manage permissions, and collaborate on list contents.");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(8, ListFormComponentExtended_section_34_div_8_Template, 5, 14, "div", 117);
+    i0.ɵɵtemplate(4, ListFormComponentExtended_section_34_div_4_Template, 4, 0, "div", 126);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, ListFormComponentExtended_section_34_div_5_Template, 10, 3, "div", 127)(6, ListFormComponentExtended_section_34_div_6_Template, 8, 3, "div", 90)(7, ListFormComponentExtended_section_34_div_7_Template, 4, 0, "div", 128);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(8);
-    i0.ɵɵproperty("ngIf", ctx_r1.record == null ? null : ctx_r1.record.IsSaved);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", ctx_r1.isCurrentUserOwner());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.stats.shareCount > 0 || ctx_r1.stats.invitationCount > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.stats.shareCount === 0 && ctx_r1.stats.invitationCount === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.isCurrentUserOwner() && (ctx_r1.stats.shareCount > 0 || ctx_r1.stats.invitationCount > 0));
 } }
 function ListFormComponentExtended_section_35_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 122)(1, "div", 76)(2, "h2");
+    i0.ɵɵelementStart(0, "section", 142)(1, "div", 81)(2, "h2");
     i0.ɵɵtext(3, "Activity");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 123)(5, "div", 124)(6, "div", 125);
-    i0.ɵɵelement(7, "i", 126);
+    i0.ɵɵelementStart(4, "div", 143)(5, "div", 144)(6, "div", 145);
+    i0.ɵɵelement(7, "i", 146);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 127)(9, "p", 128);
+    i0.ɵɵelementStart(8, "div", 147)(9, "p", 148);
     i0.ɵɵtext(10, "List updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "span", 129);
+    i0.ɵɵelementStart(11, "span", 149);
     i0.ɵɵtext(12);
     i0.ɵɵpipe(13, "date");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "div", 124)(15, "div", 130);
-    i0.ɵɵelement(16, "i", 131);
+    i0.ɵɵelementStart(14, "div", 144)(15, "div", 150);
+    i0.ɵɵelement(16, "i", 94);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 127)(18, "p", 128);
+    i0.ɵɵelementStart(17, "div", 147)(18, "p", 148);
     i0.ɵɵtext(19, "List created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "span", 129);
+    i0.ɵɵelementStart(20, "span", 149);
     i0.ɵɵtext(21);
     i0.ɵɵpipe(22, "date");
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(23, "div", 132)(24, "p");
+    i0.ɵɵelementStart(23, "div", 151)(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) {
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵadvance(12);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(13, 2, ctx_r1.record == null ? null : ctx_r1.record.__mj_UpdatedAt, "medium"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(13, 2, ctx_r1.record.__mj_UpdatedAt, "medium"));
     i0.ɵɵadvance(9);
-    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(22, 5, ctx_r1.record == null ? null : ctx_r1.record.__mj_CreatedAt, "medium"));
+    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(22, 5, ctx_r1.record.__mj_CreatedAt, "medium"));
 } }
 function ListFormComponentExtended_section_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "section", 133)(1, "div", 76)(2, "h2");
+    i0.ɵɵelementStart(0, "section", 152)(1, "div", 81)(2, "h2");
     i0.ɵɵtext(3, "Settings");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(4, "div", 134)(5, "mj-collapsible-panel", 135)(6, "div", 136);
-    i0.ɵɵelement(7, "mj-form-field", 137)(8, "mj-form-field", 138)(9, "mj-form-field", 139);
+    i0.ɵɵelementStart(4, "div", 153)(5, "mj-collapsible-panel", 154)(6, "div", 155);
+    i0.ɵɵelement(7, "mj-form-field", 156)(8, "mj-form-field", 157)(9, "mj-form-field", 158);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "mj-collapsible-panel", 140)(11, "div", 136);
-    i0.ɵɵelement(12, "mj-form-field", 141)(13, "mj-form-field", 142)(14, "mj-form-field", 143)(15, "mj-form-field", 144);
+    i0.ɵɵelementStart(10, "mj-collapsible-panel", 159)(11, "div", 155);
+    i0.ɵɵelement(12, "mj-form-field", 160)(13, "mj-form-field", 161)(14, "mj-form-field", 162)(15, "mj-form-field", 163);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -526,6 +647,295 @@ function ListFormComponentExtended_section_36_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("record", ctx_r1.record)("ShowLabel", true)("EditMode", false)("formContext", ctx_r1.formContext);
 } }
+function ListFormComponentExtended_kendo_dialog_37_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 168);
+    i0.ɵɵelement(2, "mj-loading", 169);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("text", "Adding " + ctx_r1.addTotal + " records to list...");
+} }
+function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_template_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 175);
+} }
+function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 176);
+    i0.ɵɵelement(2, "mj-loading", 177);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("showText", false);
+} }
+function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 178);
+    i0.ɵɵelement(2, "span", 179);
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1("No records found matching \"", ctx_r1.addRecordsSearchFilter, "\"");
+} }
+function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 178);
+    i0.ɵɵelement(2, "span", 180);
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "Search for records to add to this list");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementContainerEnd();
+} }
+function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_div_9_span_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 192);
+} }
+function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_div_9_input_3_Template(rf, ctx) { if (rf & 1) {
+    const _r26 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 193);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_div_9_input_3_Template_input_click_0_listener($event) { i0.ɵɵrestoreView(_r26); return i0.ɵɵresetView($event.stopPropagation()); })("change", function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_div_9_input_3_Template_input_change_0_listener() { i0.ɵɵrestoreView(_r26); const record_r25 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r25)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const record_r25 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("checked", record_r25.isSelected);
+} }
+function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_div_9_span_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 194);
+    i0.ɵɵtext(1, "In List");
+    i0.ɵɵelementEnd();
+} }
+function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_div_9_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 186);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_div_9_Template_div_click_0_listener() { const record_r25 = i0.ɵɵrestoreView(_r24).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleRecordSelection(record_r25)); });
+    i0.ɵɵelementStart(1, "div", 187);
+    i0.ɵɵtemplate(2, ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_div_9_span_2_Template, 1, 0, "span", 188)(3, ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_div_9_input_3_Template, 1, 1, "input", 189);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 190);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_div_9_span_6_Template, 2, 0, "span", 191);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const record_r25 = ctx.$implicit;
+    i0.ɵɵclassProp("in-list", record_r25.isInList)("selected", record_r25.isSelected);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", record_r25.isInList);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !record_r25.isInList);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(record_r25.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", record_r25.isInList);
+} }
+function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 181)(2, "button", 182);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectAllAddable()); });
+    i0.ɵɵtext(3, "Select All");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 182);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r23); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.deselectAllAddable()); });
+    i0.ɵɵtext(5, "Deselect All");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 183);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 184);
+    i0.ɵɵtemplate(9, ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_div_9_Template, 7, 8, "div", 185);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate1("", ctx_r1.selectedAddableRecords.length, " selected");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.addableRecords);
+} }
+function ListFormComponentExtended_kendo_dialog_37_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 170)(2, "kendo-textbox", 171);
+    i0.ɵɵlistener("valueChange", function ListFormComponentExtended_kendo_dialog_37_ng_container_3_Template_kendo_textbox_valueChange_2_listener($event) { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onAddRecordsSearchChange($event)); });
+    i0.ɵɵtemplate(3, ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_template_3_Template, 1, 0, "ng-template", 172);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "span", 173);
+    i0.ɵɵtext(5, "Type at least 2 characters to search");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 174);
+    i0.ɵɵtemplate(7, ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_7_Template, 3, 1, "ng-container", 7)(8, ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_8_Template, 5, 1, "ng-container", 7)(9, ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_9_Template, 5, 0, "ng-container", 7)(10, ListFormComponentExtended_kendo_dialog_37_ng_container_3_ng_container_10_Template, 10, 2, "ng-container", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("placeholder", "Search " + ctx_r1.entityDisplayName + "...")("clearButton", true)("value", ctx_r1.addRecordsSearchFilter);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngIf", ctx_r1.addDialogLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.addDialogLoading && ctx_r1.addableRecords.length === 0 && ctx_r1.addRecordsSearchFilter.length >= 2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.addDialogLoading && ctx_r1.addableRecords.length === 0 && ctx_r1.addRecordsSearchFilter.length < 2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.addDialogLoading && ctx_r1.addableRecords.length > 0);
+} }
+function ListFormComponentExtended_kendo_dialog_37_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 164);
+    i0.ɵɵlistener("close", function ListFormComponentExtended_kendo_dialog_37_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddRecordsDialog()); });
+    i0.ɵɵelementStart(1, "div", 165);
+    i0.ɵɵtemplate(2, ListFormComponentExtended_kendo_dialog_37_ng_container_2_Template, 3, 1, "ng-container", 7)(3, ListFormComponentExtended_kendo_dialog_37_ng_container_3_Template, 11, 7, "ng-container", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "kendo-dialog-actions")(5, "button", 166);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_kendo_dialog_37_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddRecords()); });
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 167);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_kendo_dialog_37_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddRecordsDialog()); });
+    i0.ɵɵtext(8, " Cancel ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("title", "Add " + ctx_r1.entityDisplayName + " to List")("minWidth", 400)("width", 600)("height", 550);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.addDialogSaving);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.addDialogSaving);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.addDialogSaving || ctx_r1.selectedAddableRecords.length === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" Add ", ctx_r1.selectedAddableRecords.length > 0 ? ctx_r1.selectedAddableRecords.length : "", " Record", ctx_r1.selectedAddableRecords.length !== 1 ? "s" : "", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.addDialogSaving);
+} }
+function ListFormComponentExtended_kendo_dialog_38_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 168);
+    i0.ɵɵelement(2, "mj-loading", 197);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} }
+function ListFormComponentExtended_kendo_dialog_38_ng_container_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 168);
+    i0.ɵɵelement(2, "mj-loading", 169);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("text", "Adding " + ctx_r1.addFromViewTotal + " records to list...");
+} }
+function ListFormComponentExtended_kendo_dialog_38_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 168);
+    i0.ɵɵelement(2, "mj-loading", 198);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} }
+function ListFormComponentExtended_kendo_dialog_38_ng_container_5_ng_container_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 178);
+    i0.ɵɵelement(2, "span", 201);
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "No saved views found for this entity");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementContainerEnd();
+} }
+function ListFormComponentExtended_kendo_dialog_38_ng_container_5_ng_container_5_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r28 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 203);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_kendo_dialog_38_ng_container_5_ng_container_5_div_1_Template_div_click_0_listener() { const view_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleViewSelection(view_r29)); });
+    i0.ɵɵelementStart(1, "input", 193);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_kendo_dialog_38_ng_container_5_ng_container_5_div_1_Template_input_click_1_listener($event) { i0.ɵɵrestoreView(_r28); return i0.ɵɵresetView($event.stopPropagation()); })("change", function ListFormComponentExtended_kendo_dialog_38_ng_container_5_ng_container_5_div_1_Template_input_change_1_listener() { const view_r29 = i0.ɵɵrestoreView(_r28).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleViewSelection(view_r29)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "span", 204);
+    i0.ɵɵelementStart(3, "span", 205);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const view_r29 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("selected", ctx_r1.isViewSelected(view_r29));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.isViewSelected(view_r29));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(view_r29.Name);
+} }
+function ListFormComponentExtended_kendo_dialog_38_ng_container_5_ng_container_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, ListFormComponentExtended_kendo_dialog_38_ng_container_5_ng_container_5_div_1_Template, 5, 4, "div", 202);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r1.userViews);
+} }
+function ListFormComponentExtended_kendo_dialog_38_ng_container_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "p", 199);
+    i0.ɵɵtext(2, "Select views to add their records to this list:");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 200);
+    i0.ɵɵtemplate(4, ListFormComponentExtended_kendo_dialog_38_ng_container_5_ng_container_4_Template, 5, 0, "ng-container", 7)(5, ListFormComponentExtended_kendo_dialog_38_ng_container_5_ng_container_5_Template, 2, 1, "ng-container", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", !ctx_r1.userViews || ctx_r1.userViews.length === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.userViews && ctx_r1.userViews.length > 0);
+} }
+function ListFormComponentExtended_kendo_dialog_38_Template(rf, ctx) { if (rf & 1) {
+    const _r27 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-dialog", 195);
+    i0.ɵɵlistener("close", function ListFormComponentExtended_kendo_dialog_38_Template_kendo_dialog_close_0_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddFromViewDialog()); });
+    i0.ɵɵelementStart(1, "div", 196);
+    i0.ɵɵtemplate(2, ListFormComponentExtended_kendo_dialog_38_ng_container_2_Template, 3, 0, "ng-container", 7)(3, ListFormComponentExtended_kendo_dialog_38_ng_container_3_Template, 3, 1, "ng-container", 7)(4, ListFormComponentExtended_kendo_dialog_38_ng_container_4_Template, 3, 0, "ng-container", 7)(5, ListFormComponentExtended_kendo_dialog_38_ng_container_5_Template, 6, 2, "ng-container", 7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "kendo-dialog-actions")(7, "button", 166);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_kendo_dialog_38_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.confirmAddFromView()); });
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "button", 167);
+    i0.ɵɵlistener("click", function ListFormComponentExtended_kendo_dialog_38_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r27); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeAddFromViewDialog()); });
+    i0.ɵɵtext(10, " Cancel ");
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("minWidth", 400)("width", 600)("height", 500);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r1.showAddFromViewLoader && ctx_r1.fetchingRecordsToSave);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.showAddFromViewLoader && ctx_r1.addFromViewTotal > 0 && !ctx_r1.fetchingRecordsToSave);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.showAddFromViewLoader && !ctx_r1.fetchingRecordsToSave && ctx_r1.addFromViewTotal === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.showAddFromViewLoader);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.showAddFromViewLoader || ctx_r1.userViewsToAdd.length === 0);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate2(" Add from ", ctx_r1.userViewsToAdd.length, " View", ctx_r1.userViewsToAdd.length !== 1 ? "s" : "", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.showAddFromViewLoader);
+} }
+function ListFormComponentExtended_mj_list_share_dialog_39_Template(rf, ctx) { if (rf & 1) {
+    const _r30 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-list-share-dialog", 206);
+    i0.ɵɵlistener("complete", function ListFormComponentExtended_mj_list_share_dialog_39_Template_mj_list_share_dialog_complete_0_listener($event) { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onShareDialogComplete($event)); })("cancel", function ListFormComponentExtended_mj_list_share_dialog_39_Template_mj_list_share_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onShareDialogCancel()); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("config", ctx_r1.shareDialogConfig)("visible", ctx_r1.showShareDialog);
+} }
 /**
  * World-class List form component that provides a rich exploration experience
  * for managing lists in the MemberJunction system.
@@ -572,11 +982,36 @@ let ListFormComponentExtended = class ListFormComponentExtended extends ListForm
         this.isEditingDescription = false;
         this.editingName = '';
         this.editingDescription = '';
+        // Add Records dialog
+        this.showAddRecordsDialog = false;
+        this.addDialogLoading = false;
+        this.addDialogSaving = false;
+        this.addableRecords = [];
+        this.addRecordsSearchFilter = '';
+        this.existingListDetailIds = new Set();
+        this.addProgress = 0;
+        this.addTotal = 0;
+        this.searchSubject = new Subject();
+        // Add From View dialog
+        this.showAddFromViewDialog = false;
+        this.showAddFromViewLoader = false;
+        this.userViews = null;
+        this.userViewsToAdd = [];
+        this.addFromViewProgress = 0;
+        this.addFromViewTotal = 0;
+        this.fetchingRecordsToSave = false;
+        // Share dialog
+        this.showShareDialog = false;
+        this.shareDialogConfig = null;
         this.destroy$ = new Subject();
         this.metadata = new Metadata();
     }
     async ngOnInit() {
         await super.ngOnInit();
+        // Set up search debounce
+        this.searchSubject
+            .pipe(debounceTime(300))
+            .subscribe((searchText) => this.searchRecords(searchText));
         await this.loadExplorerData();
     }
     // Helper to show notifications using SharedService's deprecated method
@@ -906,8 +1341,283 @@ let ListFormComponentExtended = class ListFormComponentExtended extends ListForm
         await this.loadStats();
         this.updateNavBadges();
     }
-    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵListFormComponentExtended_BaseFactory; return function ListFormComponentExtended_Factory(t) { return (ɵListFormComponentExtended_BaseFactory || (ɵListFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(ListFormComponentExtended)))(t || ListFormComponentExtended); }; })(); }
-    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListFormComponentExtended, selectors: [["mj-list-form-extended"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 37, vars: 18, consts: [["nameInput", ""], [1, "list-form-explorer"], [1, "list-header"], [1, "header-content"], [1, "header-icon"], [1, "header-info"], [1, "name-row"], [4, "ngIf"], [1, "entity-badge"], [1, "header-stats"], [1, "stat-item"], [1, "stat-value"], [1, "stat-label"], [1, "nav-rail"], ["class", "nav-item", 3, "active", "disabled", "title", "click", 4, "ngFor", "ngForOf"], [1, "main-content"], ["class", "section overview-section", 4, "ngIf"], ["class", "section items-section", 4, "ngIf"], ["class", "section sharing-section", 4, "ngIf"], ["class", "section activity-section", 4, "ngIf"], ["class", "section settings-section", 4, "ngIf"], [1, "list-name"], ["class", "edit-btn", "title", "Edit name", 3, "click", 4, "ngIf"], ["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"], ["class", "nav-badge", 4, "ngIf"], [1, "nav-badge"], [1, "section", "overview-section"], [1, "overview-grid"], [1, "overview-card", "description-card"], [1, "card-header"], [1, "fa-solid", "fa-align-left"], ["class", "edit-btn", 3, "click", 4, "ngIf"], [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"], ["class", "detail-value", 4, "ngIf"], ["class", "category-select", 3, "ngModel", "ngModelChange", 4, "ngIf"], [1, "fa-solid", "fa-user", "detail-icon"], ["class", "owner-badge", 4, "ngIf"], [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"], ["title", "Coming soon", 1, "action-btn", 3, "disabled"], [1, "fa-solid", "fa-share-nodes"], [1, "coming-soon"], [1, "fa-solid", "fa-file-export"], [1, "edit-btn", 3, "click"], ["class", "description-text", 4, "ngIf"], ["class", "description-empty", 4, "ngIf"], [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"], [3, "ngValue", 4, "ngFor", "ngForOf"], [1, "owner-badge"], [1, "section", "items-section"], [1, "section-header"], [1, "section-actions"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search items...", 3, "ngModelChange", "ngModel"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], ["class", "loading-state", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], ["class", "items-table-container", 4, "ngIf"], [1, "loading-state"], ["text", "Loading items...", "size", "medium"], [1, "empty-state"], [1, "empty-icon"], [1, "fa-solid", "fa-inbox"], [1, "items-table-container"], ["class", "items-toolbar", 4, "ngIf"], [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", 4, "ngFor", "ngForOf"], [1, "items-footer"], [1, "items-count"], [1, "items-toolbar"], [1, "selection-count"], [1, "btn-danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "item-name"], [1, "item-icon"], ["class", "fa-solid fa-spinner fa-spin", 4, "ngIf"], [1, "record-id"], ["title", "Open record", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "section", "sharing-section"], [1, "coming-soon-banner"], [1, "banner-content"], ["class", "shares-grid", 4, "ngIf"], [1, "shares-grid"], ["sectionKey", "shares", "sectionName", "Current Shares", "icon", "fa fa-users", 3, "form", "formContext", "badgeCount"], [3, "Params", "NewRecordValues", "AllowLoad", "EditMode"], ["sectionKey", "invitations", "sectionName", "Pending Invitations", "icon", "fa fa-envelope", 3, "form", "formContext", "badgeCount"], [1, "section", "activity-section"], [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, "fa-solid", "fa-plus"], [1, "activity-info"], [1, "section", "settings-section"], [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"]], template: function ListFormComponentExtended_Template(rf, ctx) { if (rf & 1) {
+    // ==========================================
+    // Add Records Dialog
+    // ==========================================
+    async openAddRecordsDialog() {
+        this.showAddRecordsDialog = true;
+        this.addableRecords = [];
+        this.addRecordsSearchFilter = '';
+        this.addDialogLoading = true;
+        this.addDialogSaving = false;
+        // Load existing list detail IDs to mark which records are already in the list
+        await this.loadExistingListDetailIds();
+        this.addDialogLoading = false;
+        this.cdr.markForCheck();
+    }
+    closeAddRecordsDialog() {
+        this.showAddRecordsDialog = false;
+        this.addableRecords = [];
+        this.addRecordsSearchFilter = '';
+        this.existingListDetailIds.clear();
+        this.addDialogSaving = false;
+        this.addProgress = 0;
+        this.addTotal = 0;
+        this.cdr.markForCheck();
+    }
+    async loadExistingListDetailIds() {
+        if (!this.record)
+            return;
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: 'List Details',
+            ExtraFilter: `ListID = '${this.record.ID}'`,
+            Fields: ['RecordID'],
+            ResultType: 'simple'
+        }, this.metadata.CurrentUser);
+        if (result.Success) {
+            this.existingListDetailIds = new Set(result.Results.map(r => r.RecordID));
+        }
+    }
+    onAddRecordsSearchChange(value) {
+        this.addRecordsSearchFilter = value;
+        this.searchSubject.next(value);
+    }
+    async searchRecords(searchText) {
+        if (!this.record || !searchText || searchText.length < 2) {
+            this.addableRecords = [];
+            this.cdr.markForCheck();
+            return;
+        }
+        this.addDialogLoading = true;
+        this.cdr.markForCheck();
+        const sourceEntityInfo = this.metadata.EntityByID(this.record.EntityID);
+        if (!sourceEntityInfo) {
+            this.addDialogLoading = false;
+            this.cdr.markForCheck();
+            return;
+        }
+        const nameField = sourceEntityInfo.Fields.find(field => field.IsNameField);
+        const pkField = sourceEntityInfo.FirstPrimaryKey?.Name || 'ID';
+        let filter;
+        if (nameField) {
+            filter = `${nameField.Name} LIKE '%${searchText}%'`;
+        }
+        const rv = new RunView();
+        const result = await rv.RunView({
+            EntityName: this.record.Entity,
+            ExtraFilter: filter,
+            MaxRows: 100,
+            ResultType: 'simple'
+        });
+        if (result.Success) {
+            this.addableRecords = result.Results.map((record) => {
+                const recordId = String(record[pkField]);
+                return {
+                    ID: recordId,
+                    Name: nameField ? String(record[nameField.Name]) : recordId,
+                    isInList: this.existingListDetailIds.has(recordId),
+                    isSelected: false
+                };
+            });
+        }
+        this.addDialogLoading = false;
+        this.cdr.markForCheck();
+    }
+    toggleRecordSelection(record) {
+        if (record.isInList)
+            return; // Can't select records already in list
+        record.isSelected = !record.isSelected;
+        this.cdr.markForCheck();
+    }
+    get selectedAddableRecords() {
+        return this.addableRecords.filter(r => r.isSelected);
+    }
+    selectAllAddable() {
+        this.addableRecords.forEach(r => {
+            if (!r.isInList)
+                r.isSelected = true;
+        });
+        this.cdr.markForCheck();
+    }
+    deselectAllAddable() {
+        this.addableRecords.forEach(r => r.isSelected = false);
+        this.cdr.markForCheck();
+    }
+    async confirmAddRecords() {
+        const recordsToAdd = this.selectedAddableRecords;
+        if (recordsToAdd.length === 0 || !this.record)
+            return;
+        this.addDialogSaving = true;
+        this.addTotal = recordsToAdd.length;
+        this.addProgress = 0;
+        this.cdr.markForCheck();
+        // Use transaction group for bulk insert
+        const tg = await this.metadata.CreateTransactionGroup();
+        for (const record of recordsToAdd) {
+            const listDetail = await this.metadata.GetEntityObject('List Details');
+            listDetail.ListID = this.record.ID;
+            listDetail.RecordID = record.ID;
+            listDetail.TransactionGroup = tg;
+            await listDetail.Save();
+        }
+        const success = await tg.Submit();
+        if (success) {
+            this.addProgress = this.addTotal;
+            this.showNotification(`Added ${recordsToAdd.length} record${recordsToAdd.length !== 1 ? 's' : ''} to list`, 'success', 2500);
+            this.closeAddRecordsDialog();
+            await this.refreshItems();
+        }
+        else {
+            LogError('Error adding records to list');
+            this.showNotification('Failed to add some records', 'error', 2500);
+            this.addDialogSaving = false;
+            this.cdr.markForCheck();
+        }
+    }
+    // ==========================================
+    // Add From View Dialog
+    // ==========================================
+    async openAddFromViewDialog() {
+        this.showAddFromViewDialog = true;
+        this.userViewsToAdd = [];
+        this.cdr.markForCheck();
+        if (!this.userViews) {
+            await this.loadEntityViews();
+        }
+    }
+    closeAddFromViewDialog() {
+        this.showAddFromViewDialog = false;
+        this.userViewsToAdd = [];
+        this.showAddFromViewLoader = false;
+        this.addFromViewProgress = 0;
+        this.addFromViewTotal = 0;
+        this.cdr.markForCheck();
+    }
+    async loadEntityViews() {
+        if (!this.record || !this.record.Entity)
+            return;
+        this.showAddFromViewLoader = true;
+        this.cdr.markForCheck();
+        const rv = new RunView();
+        const runViewResult = await rv.RunView({
+            EntityName: 'User Views',
+            ExtraFilter: `UserID = '${this.metadata.CurrentUser.ID}' AND EntityID = '${this.record.EntityID}'`,
+            ResultType: 'entity_object'
+        }, this.metadata.CurrentUser);
+        if (!runViewResult.Success) {
+            LogError(`Error loading User Views for entity ${this.record.Entity}`);
+        }
+        else {
+            this.userViews = runViewResult.Results;
+        }
+        this.showAddFromViewLoader = false;
+        this.cdr.markForCheck();
+    }
+    toggleViewSelection(view) {
+        const index = this.userViewsToAdd.findIndex(v => v.ID === view.ID);
+        if (index >= 0) {
+            this.userViewsToAdd.splice(index, 1);
+        }
+        else {
+            this.userViewsToAdd.push(view);
+        }
+        this.cdr.markForCheck();
+    }
+    isViewSelected(view) {
+        return this.userViewsToAdd.some(v => v.ID === view.ID);
+    }
+    async confirmAddFromView() {
+        if (!this.record || this.userViewsToAdd.length === 0)
+            return;
+        this.showAddFromViewLoader = true;
+        this.fetchingRecordsToSave = true;
+        this.cdr.markForCheck();
+        const rv = new RunView();
+        // Collect all unique record IDs from selected views
+        const recordIdSet = new Set();
+        for (const userView of this.userViewsToAdd) {
+            const runViewResult = await rv.RunView({
+                EntityName: 'User Views',
+                ViewEntity: userView,
+                Fields: ['ID']
+            }, this.metadata.CurrentUser);
+            if (runViewResult.Success) {
+                const records = runViewResult.Results;
+                records.forEach(r => recordIdSet.add(r.ID));
+            }
+        }
+        // Filter out records already in the list
+        await this.loadExistingListDetailIds();
+        const recordsToAdd = [...recordIdSet].filter(id => !this.existingListDetailIds.has(id));
+        this.addFromViewTotal = recordsToAdd.length;
+        this.addFromViewProgress = 0;
+        this.fetchingRecordsToSave = false;
+        this.cdr.markForCheck();
+        if (recordsToAdd.length === 0) {
+            this.showNotification('All records already in list', 'info', 2500);
+            this.showAddFromViewLoader = false;
+            this.cdr.markForCheck();
+            return;
+        }
+        LogStatus(`Adding ${recordsToAdd.length} records to list`);
+        // Use transaction group for bulk insert
+        const tg = await this.metadata.CreateTransactionGroup();
+        for (const recordID of recordsToAdd) {
+            const listDetail = await this.metadata.GetEntityObject('List Details');
+            listDetail.ListID = this.record.ID;
+            listDetail.RecordID = recordID;
+            listDetail.TransactionGroup = tg;
+            await listDetail.Save();
+        }
+        const success = await tg.Submit();
+        if (success) {
+            this.addFromViewProgress = this.addFromViewTotal;
+            this.showNotification(`Added ${recordsToAdd.length} record${recordsToAdd.length !== 1 ? 's' : ''} to list`, 'success', 2500);
+            this.closeAddFromViewDialog();
+            await this.refreshItems();
+        }
+        else {
+            LogError('Error adding records from view to list');
+            this.showNotification('Failed to add some records', 'error', 2500);
+            this.showAddFromViewLoader = false;
+            this.cdr.markForCheck();
+        }
+    }
+    // ==========================================
+    // Share Dialog
+    // ==========================================
+    openShareDialog() {
+        if (!this.record?.IsSaved)
+            return;
+        this.shareDialogConfig = {
+            listId: this.record.ID,
+            listName: this.record.Name,
+            currentUserId: this.metadata.CurrentUser.ID,
+            isOwner: this.isCurrentUserOwner()
+        };
+        this.showShareDialog = true;
+        this.cdr.markForCheck();
+    }
+    onShareDialogComplete(result) {
+        this.showShareDialog = false;
+        this.shareDialogConfig = null;
+        if (result.action === 'apply') {
+            // Refresh stats to update share counts
+            this.loadStats().then(() => {
+                this.updateNavBadges();
+                this.cdr.markForCheck();
+            });
+        }
+        this.cdr.markForCheck();
+    }
+    onShareDialogCancel() {
+        this.showShareDialog = false;
+        this.shareDialogConfig = null;
+        this.cdr.markForCheck();
+    }
+    static { this.ɵfac = /*@__PURE__*/ (() => { let ɵListFormComponentExtended_BaseFactory; return function ListFormComponentExtended_Factory(__ngFactoryType__) { return (ɵListFormComponentExtended_BaseFactory || (ɵListFormComponentExtended_BaseFactory = i0.ɵɵgetInheritedFactory(ListFormComponentExtended)))(__ngFactoryType__ || ListFormComponentExtended); }; })(); }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListFormComponentExtended, selectors: [["mj-list-form-extended"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 40, vars: 21, consts: [["nameInput", ""], [1, "list-form-explorer"], [1, "list-header"], [1, "header-content"], [1, "header-icon"], [1, "header-info"], [1, "name-row"], [4, "ngIf"], [1, "entity-badge"], [1, "header-stats"], [1, "stat-item"], [1, "stat-value"], [1, "stat-label"], [1, "nav-rail"], ["class", "nav-item", 3, "active", "disabled", "title", "click", 4, "ngFor", "ngForOf"], [1, "main-content"], ["class", "section overview-section", 4, "ngIf"], ["class", "section items-section", 4, "ngIf"], ["class", "section sharing-section", 4, "ngIf"], ["class", "section activity-section", 4, "ngIf"], ["class", "section settings-section", 4, "ngIf"], [3, "title", "minWidth", "width", "height", "close", 4, "ngIf"], ["title", "Add Records from Views", 3, "minWidth", "width", "height", "close", 4, "ngIf"], [3, "config", "visible", "complete", "cancel", 4, "ngIf"], [1, "list-name"], ["class", "edit-btn", "title", "Edit name", 3, "click", 4, "ngIf"], ["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"], ["class", "nav-badge", 4, "ngIf"], [1, "nav-badge"], [1, "section", "overview-section"], [1, "overview-grid"], [1, "overview-card", "description-card"], [1, "card-header"], [1, "fa-solid", "fa-align-left"], ["class", "edit-btn", 3, "click", 4, "ngIf"], [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"], ["class", "detail-value", 4, "ngIf"], ["class", "category-select", 3, "ngModel", "ngModelChange", 4, "ngIf"], [1, "fa-solid", "fa-user", "detail-icon"], ["class", "owner-badge", 4, "ngIf"], [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"], ["class", "action-btn", 3, "click", 4, "ngIf"], ["title", "Coming soon", 1, "action-btn", 3, "disabled"], [1, "fa-solid", "fa-file-export"], [1, "coming-soon"], [1, "edit-btn", 3, "click"], ["class", "description-text", 4, "ngIf"], ["class", "description-empty", 4, "ngIf"], [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"], [3, "ngValue", 4, "ngFor", "ngForOf"], [1, "owner-badge"], [1, "fa-solid", "fa-share-nodes"], ["class", "action-count", 4, "ngIf"], [1, "section", "items-section"], [1, "section-header"], [1, "section-actions"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search items...", 3, "ngModelChange", "ngModel"], ["class", "add-buttons", 4, "ngIf"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], ["class", "loading-state", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], ["class", "items-table-container", 4, "ngIf"], [1, "add-buttons"], ["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"], [1, "loading-state"], ["text", "Loading items...", "size", "medium"], [1, "empty-state"], [1, "empty-icon"], [1, "fa-solid", "fa-inbox"], [1, "items-table-container"], ["class", "items-toolbar", 4, "ngIf"], [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", 4, "ngFor", "ngForOf"], [1, "items-footer"], [1, "items-count"], [1, "items-toolbar"], [1, "selection-count"], [1, "btn-danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "item-name"], [1, "item-icon"], ["class", "fa-solid fa-spinner fa-spin", 4, "ngIf"], [1, "record-id"], ["title", "Open record", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-arrow-up-right-from-square"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "section", "sharing-section"], ["class", "section-actions", 4, "ngIf"], ["class", "sharing-summary", 4, "ngIf"], ["class", "readonly-notice", 4, "ngIf"], [1, "fa-solid", "fa-user-plus"], [1, "sharing-summary"], [1, "summary-card"], [1, "summary-icon"], [1, "fa-solid", "fa-users"], [1, "summary-content"], [1, "summary-value"], [1, "summary-label"], ["class", "summary-card", 4, "ngIf"], [1, "summary-icon", "pending"], [1, "fa-solid", "fa-envelope"], ["class", "btn-primary", 3, "click", 4, "ngIf"], [1, "readonly-notice"], [1, "section", "activity-section"], [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, "section", "settings-section"], [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", "minWidth", "width", "height"], [1, "dialog-content", "add-records-dialog"], ["kendoButton", "", "themeColor", "primary", 3, "click", "disabled"], ["kendoButton", "", "fillMode", "outline", 3, "click", "disabled"], [1, "dialog-loading"], ["size", "small", 3, "text"], [1, "search-section"], [1, "search-input", 3, "valueChange", "placeholder", "clearButton", "value"], ["kendoTextBoxPrefixTemplate", ""], [1, "search-hint"], [1, "records-list"], [1, "fa-solid", "fa-search", "search-icon"], [1, "list-loading"], ["size", "small", 3, "showText"], [1, "empty-results"], [1, "fa-solid", "fa-search", "empty-icon"], [1, "fa-solid", "fa-list", "empty-icon"], [1, "selection-controls"], ["kendoButton", "", "fillMode", "flat", "size", "small", 3, "click"], [1, "selection-info"], [1, "records-scroll"], ["class", "record-item", 3, "in-list", "selected", "click", 4, "ngFor", "ngForOf"], [1, "record-item", 3, "click"], [1, "record-checkbox"], ["class", "fa-solid fa-check in-list-icon", "title", "Already in list", 4, "ngIf"], ["type", "checkbox", 3, "checked", "click", "change", 4, "ngIf"], [1, "record-name"], ["class", "in-list-badge", 4, "ngIf"], ["title", "Already in list", 1, "fa-solid", "fa-check", "in-list-icon"], ["type", "checkbox", 3, "click", "change", "checked"], [1, "in-list-badge"], ["title", "Add Records from Views", 3, "close", "minWidth", "width", "height"], [1, "dialog-content"], ["text", "Loading records from views...", "size", "small"], ["text", "Loading views...", "size", "small"], [1, "dialog-instruction"], [1, "views-list"], [1, "fa-solid", "fa-folder-open", "empty-icon"], ["class", "view-item", 3, "selected", "click", 4, "ngFor", "ngForOf"], [1, "view-item", 3, "click"], [1, "fa-solid", "fa-table-list", "view-icon"], [1, "view-name"], [3, "complete", "cancel", "config", "visible"]], template: function ListFormComponentExtended_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();
@@ -941,8 +1651,9 @@ let ListFormComponentExtended = class ListFormComponentExtended extends ListForm
             i0.ɵɵtemplate(30, ListFormComponentExtended_button_30_Template, 5, 9, "button", 14);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(31, "main", 15);
-            i0.ɵɵtemplate(32, ListFormComponentExtended_section_32_Template, 66, 17, "section", 16)(33, ListFormComponentExtended_section_33_Template, 13, 4, "section", 17)(34, ListFormComponentExtended_section_34_Template, 9, 1, "section", 18)(35, ListFormComponentExtended_section_35_Template, 26, 8, "section", 19)(36, ListFormComponentExtended_section_36_Template, 16, 32, "section", 20);
+            i0.ɵɵtemplate(32, ListFormComponentExtended_section_32_Template, 62, 18, "section", 16)(33, ListFormComponentExtended_section_33_Template, 14, 5, "section", 17)(34, ListFormComponentExtended_section_34_Template, 8, 4, "section", 18)(35, ListFormComponentExtended_section_35_Template, 26, 8, "section", 19)(36, ListFormComponentExtended_section_36_Template, 16, 32, "section", 20);
             i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(37, ListFormComponentExtended_kendo_dialog_37_Template, 9, 10, "kendo-dialog", 21)(38, ListFormComponentExtended_kendo_dialog_38_Template, 11, 11, "kendo-dialog", 22)(39, ListFormComponentExtended_mj_list_share_dialog_39_Template, 1, 2, "mj-list-share-dialog", 23);
         } if (rf & 2) {
             i0.ɵɵadvance(3);
             i0.ɵɵstyleProp("background-color", "#2196F3");
@@ -974,7 +1685,13 @@ let ListFormComponentExtended = class ListFormComponentExtended extends ListForm
             i0.ɵɵproperty("ngIf", ctx.activeSection === "activity");
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.activeSection === "settings");
-        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.UserViewGridComponent, i4.MJFormField, i4.CollapsiblePanelComponent, i5.LoadingComponent, i1.DatePipe], styles: ["\n\n\n\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    min-height: 100vh;\n    background: #f5f7fa;\n}\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: white;\n    border-bottom: 1px solid #e0e0e0;\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: white;\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: #1a1a2e;\n}\n\n.edit-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: #999;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn[_ngcontent-%COMP%]:hover {\n    background: #f0f0f0;\n    color: #666;\n}\n\n.inline-edit-input[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 2px solid #2196F3;\n    border-radius: 6px;\n    font-size: inherit;\n    background: white;\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: #4CAF50;\n}\n\n.save-btn[_ngcontent-%COMP%]:hover {\n    background: #e8f5e9;\n}\n\n.cancel-btn[_ngcontent-%COMP%] {\n    color: #f44336;\n}\n\n.cancel-btn[_ngcontent-%COMP%]:hover {\n    background: #ffebee;\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: #e3f2fd;\n    border-radius: 16px;\n    font-size: 13px;\n    color: #1976D2;\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: #333;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #999;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\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: #1a1a2e;\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: white;\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n    background: rgba(33, 150, 243, 0.2);\n    color: #64b5f6;\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: #2196F3;\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: #2196F3;\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\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: #333;\n}\n\n.section-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\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: #999;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid #ddd;\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: #2196F3;\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\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: white;\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 #f0f0f0;\n}\n\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #666;\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: #999;\n}\n\n.card-body[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.description-text[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #333;\n    line-height: 1.6;\n}\n\n.description-empty[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #999;\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: #2196F3;\n    color: white;\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: #1976D2;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: white;\n    color: #666;\n    border: 1px solid #ddd;\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: #f5f5f5;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid #ddd;\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: #666;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: #f5f5f5;\n    border-color: #ccc;\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: #f44336;\n    color: white;\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: #d32f2f;\n}\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 #f5f5f5;\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: #999;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #333;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n    color: #999;\n    font-size: 12px;\n}\n\n.owner-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: #e8f5e9;\n    color: #388E3C;\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 #ddd;\n    border-radius: 6px;\n    font-size: 14px;\n    background: white;\n    cursor: pointer;\n}\n\n.category-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: #2196F3;\n}\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: #f9fafb;\n    border: 1px solid #e5e7eb;\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: #f3f4f6;\n    border-color: #d1d5db;\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: #2196F3;\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: #333;\n}\n\n.action-count[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: #e3f2fd;\n    color: #1976D2;\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: #fff3e0;\n    color: #f57c00;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\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.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: #7c4dff;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 12px;\n    font-size: 20px;\n    color: #333;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #666;\n    max-width: 400px;\n}\n\n.items-table-container[_ngcontent-%COMP%] {\n    background: white;\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: #e3f2fd;\n    border-bottom: 1px solid #bbdefb;\n}\n\n.selection-count[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #1976D2;\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: #666;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: #fafafa;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.items-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    border-bottom: 1px solid #f0f0f0;\n    font-size: 14px;\n    color: #333;\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: #e3f2fd;\n}\n\n.items-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover:not(.selected) {\n    background: #fafafa;\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: #999;\n}\n\n.item-icon[_ngcontent-%COMP%] {\n    color: #999;\n}\n\n.record-id[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: #f5f5f5;\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: #666;\n}\n\n.items-footer[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    background: #fafafa;\n    border-top: 1px solid #f0f0f0;\n}\n\n.items-count[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #666;\n}\n\n\n\n.coming-soon-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);\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: #7c4dff;\n}\n\n.banner-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 8px;\n    color: #333;\n}\n\n.banner-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #666;\n}\n\n.shares-grid[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n\n.activity-timeline[_ngcontent-%COMP%] {\n    background: white;\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 #f0f0f0;\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: #e3f2fd;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #2196F3;\n    flex-shrink: 0;\n}\n\n.timeline-icon.create[_ngcontent-%COMP%] {\n    background: #e8f5e9;\n    color: #4CAF50;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.timeline-text[_ngcontent-%COMP%] {\n    margin: 0 0 4px;\n    color: #333;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #999;\n}\n\n.activity-info[_ngcontent-%COMP%] {\n    background: #fff8e1;\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #f57c00;\n    font-size: 14px;\n}\n\n\n\n.settings-form[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\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: #F5F6FA;\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: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\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\n\n\n\n\n\n\n\n\n\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 \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\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\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\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: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\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\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\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 #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.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 #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: #10b981;\n  color: white;\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\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: #9ca3af;\n}"], changeDetection: 0 }); }
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showAddRecordsDialog);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showAddFromViewDialog);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showShareDialog && ctx.shareDialogConfig);
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.DialogComponent, i3.DialogActionsComponent, i4.TextBoxComponent, i4.TextBoxPrefixTemplateDirective, i5.ButtonComponent, i6.MJFormField, i6.CollapsiblePanelComponent, i7.LoadingComponent, i8.ListShareDialogComponent, i1.DatePipe], styles: ["\n\n\n\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    min-height: 100vh;\n    background: #f5f7fa;\n}\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: white;\n    border-bottom: 1px solid #e0e0e0;\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: white;\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: #1a1a2e;\n}\n\n.edit-btn[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: #999;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn[_ngcontent-%COMP%]:hover {\n    background: #f0f0f0;\n    color: #666;\n}\n\n.inline-edit-input[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 2px solid #2196F3;\n    border-radius: 6px;\n    font-size: inherit;\n    background: white;\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: #4CAF50;\n}\n\n.save-btn[_ngcontent-%COMP%]:hover {\n    background: #e8f5e9;\n}\n\n.cancel-btn[_ngcontent-%COMP%] {\n    color: #f44336;\n}\n\n.cancel-btn[_ngcontent-%COMP%]:hover {\n    background: #ffebee;\n}\n\n.entity-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: #e3f2fd;\n    border-radius: 16px;\n    font-size: 13px;\n    color: #1976D2;\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: #333;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #999;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\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: #1a1a2e;\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: white;\n}\n\n.nav-item.active[_ngcontent-%COMP%] {\n    background: rgba(33, 150, 243, 0.2);\n    color: #64b5f6;\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: #2196F3;\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: #2196F3;\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n}\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: #333;\n}\n\n.section-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    align-items: center;\n}\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: #999;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid #ddd;\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: #2196F3;\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n}\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: white;\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 #f0f0f0;\n}\n\n.card-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #666;\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: #999;\n}\n\n.card-body[_ngcontent-%COMP%] {\n    padding: 20px;\n}\n\n.description-text[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #333;\n    line-height: 1.6;\n}\n\n.description-empty[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #999;\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: #2196F3;\n    color: white;\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: #1976D2;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: white;\n    color: #666;\n    border: 1px solid #ddd;\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: #f5f5f5;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    background: none;\n    border: 1px solid #ddd;\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: #666;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: #f5f5f5;\n    border-color: #ccc;\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: #f44336;\n    color: white;\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: #d32f2f;\n}\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 #f5f5f5;\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: #999;\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #333;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n    color: #999;\n    font-size: 12px;\n}\n\n.owner-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: #e8f5e9;\n    color: #388E3C;\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 #ddd;\n    border-radius: 6px;\n    font-size: 14px;\n    background: white;\n    cursor: pointer;\n}\n\n.category-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: #2196F3;\n}\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: #f9fafb;\n    border: 1px solid #e5e7eb;\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: #f3f4f6;\n    border-color: #d1d5db;\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: #2196F3;\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: #333;\n}\n\n.action-count[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: #e3f2fd;\n    color: #1976D2;\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: #fff3e0;\n    color: #f57c00;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 600;\n}\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.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: #7c4dff;\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 12px;\n    font-size: 20px;\n    color: #333;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #666;\n    max-width: 400px;\n}\n\n.items-table-container[_ngcontent-%COMP%] {\n    background: white;\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: #e3f2fd;\n    border-bottom: 1px solid #bbdefb;\n}\n\n.selection-count[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #1976D2;\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: #666;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: #fafafa;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.items-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 14px 16px;\n    border-bottom: 1px solid #f0f0f0;\n    font-size: 14px;\n    color: #333;\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: #e3f2fd;\n}\n\n.items-table[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover:not(.selected) {\n    background: #fafafa;\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: #999;\n}\n\n.item-icon[_ngcontent-%COMP%] {\n    color: #999;\n}\n\n.record-id[_ngcontent-%COMP%] {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: #f5f5f5;\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: #666;\n}\n\n.items-footer[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    background: #fafafa;\n    border-top: 1px solid #f0f0f0;\n}\n\n.items-count[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #666;\n}\n\n\n\n.coming-soon-banner[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);\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: #7c4dff;\n}\n\n.banner-content[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0 0 8px;\n    color: #333;\n}\n\n.banner-content[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #666;\n}\n\n.shares-grid[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\n\n\n\n.activity-timeline[_ngcontent-%COMP%] {\n    background: white;\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 #f0f0f0;\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: #e3f2fd;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #2196F3;\n    flex-shrink: 0;\n}\n\n.timeline-icon.create[_ngcontent-%COMP%] {\n    background: #e8f5e9;\n    color: #4CAF50;\n}\n\n.timeline-content[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.timeline-text[_ngcontent-%COMP%] {\n    margin: 0 0 4px;\n    color: #333;\n}\n\n.timeline-date[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #999;\n}\n\n.activity-info[_ngcontent-%COMP%] {\n    background: #fff8e1;\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #f57c00;\n    font-size: 14px;\n}\n\n\n\n.settings-form[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 16px;\n}\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\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: white;\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: #e3f2fd;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #2196F3;\n    font-size: 20px;\n}\n\n.summary-icon.pending[_ngcontent-%COMP%] {\n    background: #fff3e0;\n    color: #f57c00;\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: #333;\n    line-height: 1;\n}\n\n.summary-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #666;\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: #f5f5f5;\n    border-radius: 8px;\n    color: #666;\n    font-size: 14px;\n}\n\n.readonly-notice[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #999;\n}\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: #666;\n}\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: #999;\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 #e0e0e0;\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%]   .empty-results[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: #666;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .empty-results[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    font-size: 24px;\n    margin-bottom: 12px;\n    background: #f5f5f5;\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: #f5f5f5;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .selection-info[_ngcontent-%COMP%] {\n    margin-left: auto;\n    font-size: 12px;\n    color: #666;\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 #f0f0f0;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item[_ngcontent-%COMP%]:hover {\n    background: #f9f9f9;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item.selected[_ngcontent-%COMP%] {\n    background: #e3f2fd;\n}\n\n.add-records-dialog[_ngcontent-%COMP%]   .record-item.in-list[_ngcontent-%COMP%] {\n    background: #f5f5f5;\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: #4CAF50;\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: #e8f5e9;\n    color: #388E3C;\n    border-radius: 4px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n\n\n.views-list[_ngcontent-%COMP%] {\n    border: 1px solid #e0e0e0;\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.views-list[_ngcontent-%COMP%]   .empty-results[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: #666;\n}\n\n.views-list[_ngcontent-%COMP%]   .empty-results[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: #ccc;\n    margin-bottom: 12px;\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 #f0f0f0;\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: #f9f9f9;\n}\n\n.view-item.selected[_ngcontent-%COMP%] {\n    background: #e3f2fd;\n}\n\n.view-item[_ngcontent-%COMP%]   .view-icon[_ngcontent-%COMP%] {\n    color: #2196F3;\n}\n\n.view-item[_ngcontent-%COMP%]   .view-name[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 14px;\n}\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: #F5F6FA;\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: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group[_ngcontent-%COMP%] {\n  margin-top: 0px;\n  background-color: #F5F6FA;\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\n\n\n\n\n\n\n\n\n\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 \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\n.form-panels-container[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 16px;\n  padding: 16px;\n  background-color: #F5F6FA;\n}\n\n\n\n.form-panels-container[_ngcontent-%COMP%]    > .form-card[_ngcontent-%COMP%] {\n  width: 100%;\n}\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\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: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header[_ngcontent-%COMP%]   .collapse-icon[_ngcontent-%COMP%] {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\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\n.form-card.related-entity[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%] {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-header[_ngcontent-%COMP%]:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity[_ngcontent-%COMP%]   .collapsible-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: #3b82f6;\n}\n\n\n\n.form-section-controls[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\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 #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.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 #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-search[_ngcontent-%COMP%]::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls[_ngcontent-%COMP%]   .section-count[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: #6b7280;\n  margin-left: auto;\n  font-weight: 500;\n}\n\n\n\n.form-card.search-hidden[_ngcontent-%COMP%] {\n  display: none;\n}\n\n\n\n.section-count-badge[_ngcontent-%COMP%] {\n  background: #667eea;\n  color: white;\n  padding: 2px 8px;\n  border-radius: 12px;\n  font-size: 12px;\n  font-weight: 600;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   .search-highlight[_ngcontent-%COMP%] {\n  background-color: #fef08a;\n  color: #854d0e;\n  padding: 2px 4px;\n  border-radius: 3px;\n  font-weight: 700;\n}\n\n\n\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge[_ngcontent-%COMP%] {\n  background: #10b981;\n  color: white;\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\n.collapsible-title[_ngcontent-%COMP%]   .row-count-badge.zero-rows[_ngcontent-%COMP%] {\n  background: #9ca3af;\n}"], changeDetection: 0 }); }
 };
 ListFormComponentExtended = __decorate([
     RegisterClass(BaseFormComponent, 'Lists')
@@ -982,9 +1699,9 @@ ListFormComponentExtended = __decorate([
 export { ListFormComponentExtended };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListFormComponentExtended, [{
         type: Component,
-        args: [{ 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]=\"'#2196F3'\">\n                <i [class]=\"entityIcon\"></i>\n            </div>\n            <div class=\"header-info\">\n                <div class=\"name-row\">\n                    <ng-container *ngIf=\"!isEditingName\">\n                        <h1 class=\"list-name\">{{record?.Name || 'Untitled List'}}</h1>\n                        <button\n                            class=\"edit-btn\"\n                            (click)=\"startEditingName()\"\n                            title=\"Edit name\"\n                            *ngIf=\"isCurrentUserOwner()\">\n                            <i class=\"fa-solid fa-pen\"></i>\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"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                    </ng-container>\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        <button\n            *ngFor=\"let nav of navItems\"\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            <span class=\"nav-badge\" *ngIf=\"nav.badge && nav.badge > 0\">{{nav.badge}}</span>\n        </button>\n    </nav>\n\n    <!-- Main Content -->\n    <main class=\"main-content\">\n        <!-- Overview Section -->\n        <section class=\"section overview-section\" *ngIf=\"activeSection === 'overview'\">\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                        <button\n                            class=\"edit-btn\"\n                            (click)=\"startEditingDescription()\"\n                            *ngIf=\"isCurrentUserOwner() && !isEditingDescription\">\n                            <i class=\"fa-solid fa-pen\"></i>\n                        </button>\n                    </div>\n                    <div class=\"card-body\">\n                        <ng-container *ngIf=\"!isEditingDescription\">\n                            <p *ngIf=\"record?.Description\" class=\"description-text\">{{record.Description}}</p>\n                            <p *ngIf=\"!record?.Description\" class=\"description-empty\">No description provided</p>\n                        </ng-container>\n                        <ng-container *ngIf=\"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                        </ng-container>\n                    </div>\n                </div>\n\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                            <span class=\"detail-value\" *ngIf=\"!isCurrentUserOwner()\">\n                                <i class=\"fa-solid fa-folder detail-icon\"></i>\n                                {{categoryName}}\n                            </span>\n                            <select\n                                *ngIf=\"isCurrentUserOwner()\"\n                                class=\"category-select\"\n                                [ngModel]=\"record?.CategoryID\"\n                                (ngModelChange)=\"onCategoryChange($event)\">\n                                <option [ngValue]=\"null\">Uncategorized</option>\n                                <option *ngFor=\"let cat of categories\" [ngValue]=\"cat.ID\">{{cat.Name}}</option>\n                            </select>\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                                <span class=\"owner-badge\" *ngIf=\"isCurrentUserOwner()\">You</span>\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\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                        <button class=\"action-btn\" [disabled]=\"true\" title=\"Coming soon\">\n                            <i class=\"fa-solid fa-share-nodes\"></i>\n                            <span>Share List</span>\n                            <span class=\"coming-soon\">Soon</span>\n                        </button>\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        <!-- Items Section -->\n        <section class=\"section items-section\" *ngIf=\"activeSection === 'items'\">\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 items...\"\n                            [(ngModel)]=\"itemSearchTerm\" />\n                    </div>\n                    <button class=\"btn-icon\" (click)=\"refreshItems()\" title=\"Refresh\">\n                        <i class=\"fa-solid fa-refresh\"></i>\n                    </button>\n                </div>\n            </div>\n\n            <!-- Loading State -->\n            <div class=\"loading-state\" *ngIf=\"isLoadingItems\">\n                <mj-loading text=\"Loading items...\" size=\"medium\"></mj-loading>\n            </div>\n\n            <!-- Empty State -->\n            <div class=\"empty-state\" *ngIf=\"!isLoadingItems && listItems.length === 0\">\n                <div class=\"empty-icon\">\n                    <i class=\"fa-solid fa-inbox\"></i>\n                </div>\n                <h3>No Items Yet</h3>\n                <p>This list doesn't have any items. Add records from the {{entityDisplayName}} entity.</p>\n            </div>\n\n            <!-- Items Table -->\n            <div class=\"items-table-container\" *ngIf=\"!isLoadingItems && listItems.length > 0\">\n                <div class=\"items-toolbar\" *ngIf=\"selectedItems.size > 0\">\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                        <tr\n                            *ngFor=\"let item of filteredItems\"\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                                    <i *ngIf=\"item.isLoading\" class=\"fa-solid fa-spinner fa-spin\"></i>\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                    </tbody>\n                </table>\n\n                <div class=\"items-footer\">\n                    <span class=\"items-count\">\n                        Showing {{filteredItems.length}} of {{listItems.length}} items\n                    </span>\n                </div>\n            </div>\n        </section>\n\n        <!-- Sharing Section -->\n        <section class=\"section sharing-section\" *ngIf=\"activeSection === 'sharing'\">\n            <div class=\"coming-soon-banner\">\n                <i class=\"fa-solid fa-share-nodes\"></i>\n                <div class=\"banner-content\">\n                    <h3>Sharing Coming Soon</h3>\n                    <p>You'll soon be able to share lists with other users, manage permissions, and collaborate on list contents.</p>\n                </div>\n            </div>\n\n            <!-- Show existing shares/invitations using standard grids -->\n            <div class=\"shares-grid\" *ngIf=\"record?.IsSaved\">\n                <mj-collapsible-panel\n                    sectionKey=\"shares\"\n                    sectionName=\"Current Shares\"\n                    icon=\"fa fa-users\"\n                    [form]=\"this\"\n                    [formContext]=\"formContext\"\n                    [badgeCount]=\"stats.shareCount\">\n                    <mj-user-view-grid\n                        [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: List Shares','ListID')\"\n                        [NewRecordValues]=\"NewRecordValues('MJ: List Shares')\"\n                        [AllowLoad]=\"true\"\n                        [EditMode]=\"GridEditMode()\">\n                    </mj-user-view-grid>\n                </mj-collapsible-panel>\n\n                <mj-collapsible-panel\n                    sectionKey=\"invitations\"\n                    sectionName=\"Pending Invitations\"\n                    icon=\"fa fa-envelope\"\n                    [form]=\"this\"\n                    [formContext]=\"formContext\"\n                    [badgeCount]=\"stats.invitationCount\">\n                    <mj-user-view-grid\n                        [Params]=\"BuildRelationshipViewParamsByEntityName('MJ: List Invitations','ListID')\"\n                        [NewRecordValues]=\"NewRecordValues('MJ: List Invitations')\"\n                        [AllowLoad]=\"true\"\n                        [EditMode]=\"GridEditMode()\">\n                    </mj-user-view-grid>\n                </mj-collapsible-panel>\n            </div>\n        </section>\n\n        <!-- Activity Section -->\n        <section class=\"section activity-section\" *ngIf=\"activeSection === 'activity'\">\n            <div class=\"section-header\">\n                <h2>Activity</h2>\n            </div>\n\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\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        <!-- Settings Section -->\n        <section class=\"section settings-section\" *ngIf=\"activeSection === 'settings'\">\n            <div class=\"section-header\">\n                <h2>Settings</h2>\n            </div>\n\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\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    </main>\n</div>\n", styles: ["/* ============================================\n   WORLD-CLASS LIST FORM STYLES\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    min-height: 100vh;\n    background: #f5f7fa;\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: white;\n    border-bottom: 1px solid #e0e0e0;\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: white;\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: #1a1a2e;\n}\n\n.edit-btn {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: #999;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn:hover {\n    background: #f0f0f0;\n    color: #666;\n}\n\n.inline-edit-input {\n    padding: 8px 12px;\n    border: 2px solid #2196F3;\n    border-radius: 6px;\n    font-size: inherit;\n    background: white;\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: #4CAF50;\n}\n\n.save-btn:hover {\n    background: #e8f5e9;\n}\n\n.cancel-btn {\n    color: #f44336;\n}\n\n.cancel-btn:hover {\n    background: #ffebee;\n}\n\n.entity-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: #e3f2fd;\n    border-radius: 16px;\n    font-size: 13px;\n    color: #1976D2;\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: #333;\n}\n\n.stat-label {\n    font-size: 12px;\n    color: #999;\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: #1a1a2e;\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: white;\n}\n\n.nav-item.active {\n    background: rgba(33, 150, 243, 0.2);\n    color: #64b5f6;\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: #2196F3;\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: #2196F3;\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\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: #333;\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: #999;\n}\n\n.search-box input {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid #ddd;\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: #2196F3;\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\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: white;\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 #f0f0f0;\n}\n\n.card-header h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #666;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header h3 i {\n    color: #999;\n}\n\n.card-body {\n    padding: 20px;\n}\n\n.description-text {\n    margin: 0;\n    color: #333;\n    line-height: 1.6;\n}\n\n.description-empty {\n    margin: 0;\n    color: #999;\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: #2196F3;\n    color: white;\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: #1976D2;\n}\n\n.btn-secondary {\n    padding: 8px 16px;\n    background: white;\n    color: #666;\n    border: 1px solid #ddd;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n    background: #f5f5f5;\n}\n\n.btn-icon {\n    background: none;\n    border: 1px solid #ddd;\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: #666;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon:hover {\n    background: #f5f5f5;\n    border-color: #ccc;\n}\n\n.btn-danger {\n    padding: 8px 16px;\n    background: #f44336;\n    color: white;\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: #d32f2f;\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 #f5f5f5;\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: #999;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: #333;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon {\n    color: #999;\n    font-size: 12px;\n}\n\n.owner-badge {\n    padding: 2px 8px;\n    background: #e8f5e9;\n    color: #388E3C;\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 #ddd;\n    border-radius: 6px;\n    font-size: 14px;\n    background: white;\n    cursor: pointer;\n}\n\n.category-select:focus {\n    outline: none;\n    border-color: #2196F3;\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: #f9fafb;\n    border: 1px solid #e5e7eb;\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: #f3f4f6;\n    border-color: #d1d5db;\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: #2196F3;\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: #333;\n}\n\n.action-count {\n    padding: 2px 8px;\n    background: #e3f2fd;\n    color: #1976D2;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon {\n    padding: 2px 8px;\n    background: #fff3e0;\n    color: #f57c00;\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.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 36px;\n    color: #7c4dff;\n}\n\n.empty-state h3 {\n    margin: 0 0 12px;\n    font-size: 20px;\n    color: #333;\n}\n\n.empty-state p {\n    margin: 0;\n    color: #666;\n    max-width: 400px;\n}\n\n.items-table-container {\n    background: white;\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: #e3f2fd;\n    border-bottom: 1px solid #bbdefb;\n}\n\n.selection-count {\n    font-size: 14px;\n    color: #1976D2;\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: #666;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: #fafafa;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.items-table td {\n    padding: 14px 16px;\n    border-bottom: 1px solid #f0f0f0;\n    font-size: 14px;\n    color: #333;\n}\n\n.items-table tr:last-child td {\n    border-bottom: none;\n}\n\n.items-table tr.selected {\n    background: #e3f2fd;\n}\n\n.items-table tr:hover:not(.selected) {\n    background: #fafafa;\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: #999;\n}\n\n.item-icon {\n    color: #999;\n}\n\n.record-id {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: #f5f5f5;\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: #666;\n}\n\n.items-footer {\n    padding: 12px 16px;\n    background: #fafafa;\n    border-top: 1px solid #f0f0f0;\n}\n\n.items-count {\n    font-size: 13px;\n    color: #666;\n}\n\n/* Sharing Section */\n.coming-soon-banner {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner > i {\n    font-size: 48px;\n    color: #7c4dff;\n}\n\n.banner-content h3 {\n    margin: 0 0 8px;\n    color: #333;\n}\n\n.banner-content p {\n    margin: 0;\n    color: #666;\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: white;\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 #f0f0f0;\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: #e3f2fd;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #2196F3;\n    flex-shrink: 0;\n}\n\n.timeline-icon.create {\n    background: #e8f5e9;\n    color: #4CAF50;\n}\n\n.timeline-content {\n    flex: 1;\n}\n\n.timeline-text {\n    margin: 0 0 4px;\n    color: #333;\n}\n\n.timeline-date {\n    font-size: 13px;\n    color: #999;\n}\n\n.activity-info {\n    background: #fff8e1;\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info p {\n    margin: 0;\n    color: #f57c00;\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/* 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: #F5F6FA;\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: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\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\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \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 \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: #F5F6FA;\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: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\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: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\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 #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.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 #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: #6b7280;\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: #667eea;\n  color: white;\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: #fef08a;\n  color: #854d0e;\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: #10b981;\n  color: white;\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: #9ca3af;\n}\n"] }]
+        args: [{ 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]=\"'#2196F3'\">\n                <i [class]=\"entityIcon\"></i>\n            </div>\n            <div class=\"header-info\">\n                <div class=\"name-row\">\n                    <ng-container *ngIf=\"!isEditingName\">\n                        <h1 class=\"list-name\">{{record.Name || 'Untitled List'}}</h1>\n                        <button\n                            class=\"edit-btn\"\n                            (click)=\"startEditingName()\"\n                            title=\"Edit name\"\n                            *ngIf=\"isCurrentUserOwner()\">\n                            <i class=\"fa-solid fa-pen\"></i>\n                        </button>\n                    </ng-container>\n                    <ng-container *ngIf=\"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                    </ng-container>\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        <button\n            *ngFor=\"let nav of navItems\"\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            <span class=\"nav-badge\" *ngIf=\"nav.badge && nav.badge > 0\">{{nav.badge}}</span>\n        </button>\n    </nav>\n\n    <!-- Main Content -->\n    <main class=\"main-content\">\n        <!-- Overview Section -->\n        <section class=\"section overview-section\" *ngIf=\"activeSection === 'overview'\">\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                        <button\n                            class=\"edit-btn\"\n                            (click)=\"startEditingDescription()\"\n                            *ngIf=\"isCurrentUserOwner() && !isEditingDescription\">\n                            <i class=\"fa-solid fa-pen\"></i>\n                        </button>\n                    </div>\n                    <div class=\"card-body\">\n                        <ng-container *ngIf=\"!isEditingDescription\">\n                            <p *ngIf=\"record.Description\" class=\"description-text\">{{record.Description}}</p>\n                            <p *ngIf=\"!record.Description\" class=\"description-empty\">No description provided</p>\n                        </ng-container>\n                        <ng-container *ngIf=\"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                        </ng-container>\n                    </div>\n                </div>\n\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                            <span class=\"detail-value\" *ngIf=\"!isCurrentUserOwner()\">\n                                <i class=\"fa-solid fa-folder detail-icon\"></i>\n                                {{categoryName}}\n                            </span>\n                            <select\n                                *ngIf=\"isCurrentUserOwner()\"\n                                class=\"category-select\"\n                                [ngModel]=\"record.CategoryID\"\n                                (ngModelChange)=\"onCategoryChange($event)\">\n                                <option [ngValue]=\"null\">Uncategorized</option>\n                                <option *ngFor=\"let cat of categories\" [ngValue]=\"cat.ID\">{{cat.Name}}</option>\n                            </select>\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                                <span class=\"owner-badge\" *ngIf=\"isCurrentUserOwner()\">You</span>\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\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                        <button class=\"action-btn\" (click)=\"openShareDialog()\" *ngIf=\"isCurrentUserOwner()\">\n                            <i class=\"fa-solid fa-share-nodes\"></i>\n                            <span>Share List</span>\n                            <span class=\"action-count\" *ngIf=\"stats.shareCount > 0\">{{stats.shareCount}}</span>\n                        </button>\n                        <button class=\"action-btn\" (click)=\"setActiveSection('sharing')\" *ngIf=\"!isCurrentUserOwner()\">\n                            <i class=\"fa-solid fa-share-nodes\"></i>\n                            <span>View Sharing</span>\n                        </button>\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        <!-- Items Section -->\n        <section class=\"section items-section\" *ngIf=\"activeSection === 'items'\">\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 items...\"\n                            [(ngModel)]=\"itemSearchTerm\" />\n                    </div>\n                    <div class=\"add-buttons\" *ngIf=\"isCurrentUserOwner()\">\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                    <button class=\"btn-icon\" (click)=\"refreshItems()\" title=\"Refresh\">\n                        <i class=\"fa-solid fa-refresh\"></i>\n                    </button>\n                </div>\n            </div>\n\n            <!-- Loading State -->\n            <div class=\"loading-state\" *ngIf=\"isLoadingItems\">\n                <mj-loading text=\"Loading items...\" size=\"medium\"></mj-loading>\n            </div>\n\n            <!-- Empty State -->\n            <div class=\"empty-state\" *ngIf=\"!isLoadingItems && listItems.length === 0\">\n                <div class=\"empty-icon\">\n                    <i class=\"fa-solid fa-inbox\"></i>\n                </div>\n                <h3>No Items Yet</h3>\n                <p>This list doesn't have any items. Add records from the {{entityDisplayName}} entity.</p>\n            </div>\n\n            <!-- Items Table -->\n            <div class=\"items-table-container\" *ngIf=\"!isLoadingItems && listItems.length > 0\">\n                <div class=\"items-toolbar\" *ngIf=\"selectedItems.size > 0\">\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                        <tr\n                            *ngFor=\"let item of filteredItems\"\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                                    <i *ngIf=\"item.isLoading\" class=\"fa-solid fa-spinner fa-spin\"></i>\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                    </tbody>\n                </table>\n\n                <div class=\"items-footer\">\n                    <span class=\"items-count\">\n                        Showing {{filteredItems.length}} of {{listItems.length}} items\n                    </span>\n                </div>\n            </div>\n        </section>\n\n        <!-- Sharing Section -->\n        <section class=\"section sharing-section\" *ngIf=\"activeSection === 'sharing'\">\n            <div class=\"section-header\">\n                <h2>Sharing</h2>\n                <div class=\"section-actions\" *ngIf=\"isCurrentUserOwner()\">\n                    <button class=\"btn-primary\" (click)=\"openShareDialog()\">\n                        <i class=\"fa-solid fa-user-plus\"></i> Manage Sharing\n                    </button>\n                </div>\n            </div>\n\n            <!-- Sharing summary -->\n            <div class=\"sharing-summary\" *ngIf=\"stats.shareCount > 0 || stats.invitationCount > 0\">\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                <div class=\"summary-card\" *ngIf=\"stats.invitationCount > 0\">\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            </div>\n\n            <!-- Empty state for no shares -->\n            <div class=\"empty-state\" *ngIf=\"stats.shareCount === 0 && stats.invitationCount === 0\">\n                <div class=\"empty-icon\">\n                    <i class=\"fa-solid fa-share-nodes\"></i>\n                </div>\n                <h3>Not Shared Yet</h3>\n                <p *ngIf=\"isCurrentUserOwner()\">This list is private. Click \"Manage Sharing\" to share it with other users or roles.</p>\n                <p *ngIf=\"!isCurrentUserOwner()\">This list hasn't been shared with anyone else.</p>\n                <button class=\"btn-primary\" (click)=\"openShareDialog()\" *ngIf=\"isCurrentUserOwner()\">\n                    <i class=\"fa-solid fa-user-plus\"></i> Share This List\n                </button>\n            </div>\n\n            <!-- Read-only notice for non-owners -->\n            <div class=\"readonly-notice\" *ngIf=\"!isCurrentUserOwner() && (stats.shareCount > 0 || stats.invitationCount > 0)\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                <span>Only the list owner can manage sharing settings.</span>\n            </div>\n        </section>\n\n        <!-- Activity Section -->\n        <section class=\"section activity-section\" *ngIf=\"activeSection === 'activity'\">\n            <div class=\"section-header\">\n                <h2>Activity</h2>\n            </div>\n\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\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        <!-- Settings Section -->\n        <section class=\"section settings-section\" *ngIf=\"activeSection === 'settings'\">\n            <div class=\"section-header\">\n                <h2>Settings</h2>\n            </div>\n\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\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    </main>\n</div>\n\n<!-- Add Records Dialog -->\n<kendo-dialog\n    *ngIf=\"showAddRecordsDialog\"\n    [title]=\"'Add ' + entityDisplayName + ' to List'\"\n    (close)=\"closeAddRecordsDialog()\"\n    [minWidth]=\"400\"\n    [width]=\"600\"\n    [height]=\"550\">\n    <div class=\"dialog-content add-records-dialog\">\n        <ng-container *ngIf=\"addDialogSaving\">\n            <div class=\"dialog-loading\">\n                <mj-loading [text]=\"'Adding ' + addTotal + ' records to list...'\" size=\"small\"></mj-loading>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!addDialogSaving\">\n            <!-- Search Input -->\n            <div class=\"search-section\">\n                <kendo-textbox\n                    [placeholder]=\"'Search ' + entityDisplayName + '...'\"\n                    [clearButton]=\"true\"\n                    (valueChange)=\"onAddRecordsSearchChange($event)\"\n                    [value]=\"addRecordsSearchFilter\"\n                    class=\"search-input\">\n                    <ng-template kendoTextBoxPrefixTemplate>\n                        <span class=\"fa-solid fa-search search-icon\"></span>\n                    </ng-template>\n                </kendo-textbox>\n                <span class=\"search-hint\">Type at least 2 characters to search</span>\n            </div>\n\n            <!-- Records List -->\n            <div class=\"records-list\">\n                <ng-container *ngIf=\"addDialogLoading\">\n                    <div class=\"list-loading\">\n                        <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length >= 2\">\n                    <div class=\"empty-results\">\n                        <span class=\"fa-solid fa-search empty-icon\"></span>\n                        <p>No records found matching \"{{ addRecordsSearchFilter }}\"</p>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"!addDialogLoading && addableRecords.length === 0 && addRecordsSearchFilter.length < 2\">\n                    <div class=\"empty-results\">\n                        <span class=\"fa-solid fa-list empty-icon\"></span>\n                        <p>Search for records to add to this list</p>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"!addDialogLoading && addableRecords.length > 0\">\n                    <!-- Selection controls -->\n                    <div class=\"selection-controls\">\n                        <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"selectAllAddable()\">Select All</button>\n                        <button kendoButton fillMode=\"flat\" size=\"small\" (click)=\"deselectAllAddable()\">Deselect All</button>\n                        <span class=\"selection-info\">{{ selectedAddableRecords.length }} selected</span>\n                    </div>\n\n                    <!-- Records -->\n                    <div class=\"records-scroll\">\n                        <div class=\"record-item\"\n                             *ngFor=\"let record of addableRecords\"\n                             [class.in-list]=\"record.isInList\"\n                             [class.selected]=\"record.isSelected\"\n                             (click)=\"toggleRecordSelection(record)\">\n                            <div class=\"record-checkbox\">\n                                <span class=\"fa-solid fa-check in-list-icon\" *ngIf=\"record.isInList\" title=\"Already in list\"></span>\n                                <input type=\"checkbox\"\n                                       *ngIf=\"!record.isInList\"\n                                       [checked]=\"record.isSelected\"\n                                       (click)=\"$event.stopPropagation()\"\n                                       (change)=\"toggleRecordSelection(record)\">\n                            </div>\n                            <div class=\"record-name\">{{ record.Name }}</div>\n                            <span class=\"in-list-badge\" *ngIf=\"record.isInList\">In List</span>\n                        </div>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n    <kendo-dialog-actions>\n        <button kendoButton\n                (click)=\"confirmAddRecords()\"\n                [disabled]=\"addDialogSaving || selectedAddableRecords.length === 0\"\n                themeColor=\"primary\">\n            Add {{ selectedAddableRecords.length > 0 ? selectedAddableRecords.length : '' }} Record{{ selectedAddableRecords.length !== 1 ? 's' : '' }}\n        </button>\n        <button kendoButton\n                (click)=\"closeAddRecordsDialog()\"\n                [disabled]=\"addDialogSaving\"\n                fillMode=\"outline\">\n            Cancel\n        </button>\n    </kendo-dialog-actions>\n</kendo-dialog>\n\n<!-- Add From View Dialog -->\n<kendo-dialog\n    *ngIf=\"showAddFromViewDialog\"\n    title=\"Add Records from Views\"\n    (close)=\"closeAddFromViewDialog()\"\n    [minWidth]=\"400\"\n    [width]=\"600\"\n    [height]=\"500\">\n    <div class=\"dialog-content\">\n        <ng-container *ngIf=\"showAddFromViewLoader && fetchingRecordsToSave\">\n            <div class=\"dialog-loading\">\n                <mj-loading text=\"Loading records from views...\" size=\"small\"></mj-loading>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"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        </ng-container>\n        <ng-container *ngIf=\"showAddFromViewLoader && !fetchingRecordsToSave && addFromViewTotal === 0\">\n            <div class=\"dialog-loading\">\n                <mj-loading text=\"Loading views...\" size=\"small\"></mj-loading>\n            </div>\n        </ng-container>\n        <ng-container *ngIf=\"!showAddFromViewLoader\">\n            <p class=\"dialog-instruction\">Select views to add their records to this list:</p>\n\n            <div class=\"views-list\">\n                <ng-container *ngIf=\"!userViews || userViews.length === 0\">\n                    <div class=\"empty-results\">\n                        <span class=\"fa-solid fa-folder-open empty-icon\"></span>\n                        <p>No saved views found for this entity</p>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"userViews && userViews.length > 0\">\n                    <div class=\"view-item\"\n                         *ngFor=\"let view of userViews\"\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                </ng-container>\n            </div>\n        </ng-container>\n    </div>\n    <kendo-dialog-actions>\n        <button kendoButton\n                (click)=\"confirmAddFromView()\"\n                [disabled]=\"showAddFromViewLoader || userViewsToAdd.length === 0\"\n                themeColor=\"primary\">\n            Add from {{ userViewsToAdd.length }} View{{ userViewsToAdd.length !== 1 ? 's' : '' }}\n        </button>\n        <button kendoButton\n                (click)=\"closeAddFromViewDialog()\"\n                [disabled]=\"showAddFromViewLoader\"\n                fillMode=\"outline\">\n            Cancel\n        </button>\n    </kendo-dialog-actions>\n</kendo-dialog>\n\n<!-- Share Dialog -->\n<mj-list-share-dialog\n    *ngIf=\"showShareDialog && shareDialogConfig\"\n    [config]=\"shareDialogConfig\"\n    [visible]=\"showShareDialog\"\n    (complete)=\"onShareDialogComplete($event)\"\n    (cancel)=\"onShareDialogCancel()\">\n</mj-list-share-dialog>\n", styles: ["/* ============================================\n   WORLD-CLASS LIST FORM STYLES\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    min-height: 100vh;\n    background: #f5f7fa;\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: white;\n    border-bottom: 1px solid #e0e0e0;\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: white;\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: #1a1a2e;\n}\n\n.edit-btn {\n    background: none;\n    border: none;\n    padding: 6px 8px;\n    color: #999;\n    cursor: pointer;\n    border-radius: 4px;\n    transition: all 0.15s;\n}\n\n.edit-btn:hover {\n    background: #f0f0f0;\n    color: #666;\n}\n\n.inline-edit-input {\n    padding: 8px 12px;\n    border: 2px solid #2196F3;\n    border-radius: 6px;\n    font-size: inherit;\n    background: white;\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: #4CAF50;\n}\n\n.save-btn:hover {\n    background: #e8f5e9;\n}\n\n.cancel-btn {\n    color: #f44336;\n}\n\n.cancel-btn:hover {\n    background: #ffebee;\n}\n\n.entity-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    background: #e3f2fd;\n    border-radius: 16px;\n    font-size: 13px;\n    color: #1976D2;\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: #333;\n}\n\n.stat-label {\n    font-size: 12px;\n    color: #999;\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: #1a1a2e;\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: white;\n}\n\n.nav-item.active {\n    background: rgba(33, 150, 243, 0.2);\n    color: #64b5f6;\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: #2196F3;\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: #2196F3;\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n    color: white;\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: #333;\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: #999;\n}\n\n.search-box input {\n    padding: 10px 12px 10px 36px;\n    border: 1px solid #ddd;\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: #2196F3;\n    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\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: white;\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 #f0f0f0;\n}\n\n.card-header h3 {\n    margin: 0;\n    font-size: 14px;\n    font-weight: 600;\n    color: #666;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.card-header h3 i {\n    color: #999;\n}\n\n.card-body {\n    padding: 20px;\n}\n\n.description-text {\n    margin: 0;\n    color: #333;\n    line-height: 1.6;\n}\n\n.description-empty {\n    margin: 0;\n    color: #999;\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: #2196F3;\n    color: white;\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: #1976D2;\n}\n\n.btn-secondary {\n    padding: 8px 16px;\n    background: white;\n    color: #666;\n    border: 1px solid #ddd;\n    border-radius: 6px;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-secondary:hover {\n    background: #f5f5f5;\n}\n\n.btn-icon {\n    background: none;\n    border: 1px solid #ddd;\n    padding: 8px 12px;\n    border-radius: 6px;\n    color: #666;\n    cursor: pointer;\n    transition: all 0.2s;\n}\n\n.btn-icon:hover {\n    background: #f5f5f5;\n    border-color: #ccc;\n}\n\n.btn-danger {\n    padding: 8px 16px;\n    background: #f44336;\n    color: white;\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: #d32f2f;\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 #f5f5f5;\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: #999;\n}\n\n.detail-value {\n    font-size: 14px;\n    color: #333;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.detail-icon {\n    color: #999;\n    font-size: 12px;\n}\n\n.owner-badge {\n    padding: 2px 8px;\n    background: #e8f5e9;\n    color: #388E3C;\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 #ddd;\n    border-radius: 6px;\n    font-size: 14px;\n    background: white;\n    cursor: pointer;\n}\n\n.category-select:focus {\n    outline: none;\n    border-color: #2196F3;\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: #f9fafb;\n    border: 1px solid #e5e7eb;\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: #f3f4f6;\n    border-color: #d1d5db;\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: #2196F3;\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: #333;\n}\n\n.action-count {\n    padding: 2px 8px;\n    background: #e3f2fd;\n    color: #1976D2;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.coming-soon {\n    padding: 2px 8px;\n    background: #fff3e0;\n    color: #f57c00;\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.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 60px 20px;\n    text-align: center;\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    border-radius: 50%;\n    background: linear-gradient(135deg, #e3f2fd, #f3e5f5);\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 36px;\n    color: #7c4dff;\n}\n\n.empty-state h3 {\n    margin: 0 0 12px;\n    font-size: 20px;\n    color: #333;\n}\n\n.empty-state p {\n    margin: 0;\n    color: #666;\n    max-width: 400px;\n}\n\n.items-table-container {\n    background: white;\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: #e3f2fd;\n    border-bottom: 1px solid #bbdefb;\n}\n\n.selection-count {\n    font-size: 14px;\n    color: #1976D2;\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: #666;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    background: #fafafa;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.items-table td {\n    padding: 14px 16px;\n    border-bottom: 1px solid #f0f0f0;\n    font-size: 14px;\n    color: #333;\n}\n\n.items-table tr:last-child td {\n    border-bottom: none;\n}\n\n.items-table tr.selected {\n    background: #e3f2fd;\n}\n\n.items-table tr:hover:not(.selected) {\n    background: #fafafa;\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: #999;\n}\n\n.item-icon {\n    color: #999;\n}\n\n.record-id {\n    font-family: 'SF Mono', Monaco, monospace;\n    font-size: 12px;\n    background: #f5f5f5;\n    padding: 4px 8px;\n    border-radius: 4px;\n    color: #666;\n}\n\n.items-footer {\n    padding: 12px 16px;\n    background: #fafafa;\n    border-top: 1px solid #f0f0f0;\n}\n\n.items-count {\n    font-size: 13px;\n    color: #666;\n}\n\n/* Sharing Section */\n.coming-soon-banner {\n    display: flex;\n    align-items: center;\n    gap: 20px;\n    padding: 24px;\n    background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);\n    border-radius: 12px;\n    margin-bottom: 24px;\n}\n\n.coming-soon-banner > i {\n    font-size: 48px;\n    color: #7c4dff;\n}\n\n.banner-content h3 {\n    margin: 0 0 8px;\n    color: #333;\n}\n\n.banner-content p {\n    margin: 0;\n    color: #666;\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: white;\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 #f0f0f0;\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: #e3f2fd;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #2196F3;\n    flex-shrink: 0;\n}\n\n.timeline-icon.create {\n    background: #e8f5e9;\n    color: #4CAF50;\n}\n\n.timeline-content {\n    flex: 1;\n}\n\n.timeline-text {\n    margin: 0 0 4px;\n    color: #333;\n}\n\n.timeline-date {\n    font-size: 13px;\n    color: #999;\n}\n\n.activity-info {\n    background: #fff8e1;\n    border-radius: 8px;\n    padding: 16px;\n}\n\n.activity-info p {\n    margin: 0;\n    color: #f57c00;\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: white;\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: #e3f2fd;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #2196F3;\n    font-size: 20px;\n}\n\n.summary-icon.pending {\n    background: #fff3e0;\n    color: #f57c00;\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: #333;\n    line-height: 1;\n}\n\n.summary-label {\n    font-size: 13px;\n    color: #666;\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: #f5f5f5;\n    border-radius: 8px;\n    color: #666;\n    font-size: 14px;\n}\n\n.readonly-notice i {\n    color: #999;\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: #666;\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: #999;\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 #e0e0e0;\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 .empty-results {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: #666;\n}\n\n.add-records-dialog .empty-results .empty-icon {\n    width: 48px;\n    height: 48px;\n    font-size: 24px;\n    margin-bottom: 12px;\n    background: #f5f5f5;\n}\n\n.add-records-dialog .selection-controls {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 8px 12px;\n    background: #f5f5f5;\n    border-bottom: 1px solid #e0e0e0;\n}\n\n.add-records-dialog .selection-info {\n    margin-left: auto;\n    font-size: 12px;\n    color: #666;\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 #f0f0f0;\n    cursor: pointer;\n    transition: background 0.15s;\n}\n\n.add-records-dialog .record-item:hover {\n    background: #f9f9f9;\n}\n\n.add-records-dialog .record-item.selected {\n    background: #e3f2fd;\n}\n\n.add-records-dialog .record-item.in-list {\n    background: #f5f5f5;\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: #4CAF50;\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: #e8f5e9;\n    color: #388E3C;\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 #e0e0e0;\n    border-radius: 8px;\n    max-height: 320px;\n    overflow-y: auto;\n}\n\n.views-list .empty-results {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px 20px;\n    color: #666;\n}\n\n.views-list .empty-results .empty-icon {\n    font-size: 36px;\n    color: #ccc;\n    margin-bottom: 12px;\n}\n\n.view-item {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 14px 16px;\n    border-bottom: 1px solid #f0f0f0;\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: #f9f9f9;\n}\n\n.view-item.selected {\n    background: #e3f2fd;\n}\n\n.view-item .view-icon {\n    color: #2196F3;\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: #F5F6FA;\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: #F5F6FA;\n  padding: 0;\n  min-height: 100vh;\n}\n\n.record-form-group {\n  margin-top: 0px;\n  background-color: #F5F6FA;\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\n/* .record-form .record-form-row:nth-child(odd) {\n  background-color: #f2f2f2; \n} */\n\n/* \n.record-form .record-form-row:nth-child(even) {\n  background-color: #ffffff;  \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 \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: #F5F6FA;\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: white;\n  border-radius: 8px;\n  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\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: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  cursor: pointer;\n  user-select: none;\n  transition: all 0.3s ease;\n}\n\n.collapsible-header:hover {\n  background: linear-gradient(135deg, #f3f4f6 0%, #f9fafb 100%);\n  border-bottom-color: #667eea;\n}\n\n.collapsible-title {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex: 1;\n}\n\n.collapsible-title i {\n  font-size: 20px;\n  color: #667eea;\n}\n\n.collapsible-title h3 {\n  margin: 0;\n  font-size: 18px;\n  font-weight: 600;\n  color: #1f2937;\n}\n\n.collapsible-header .collapse-icon {\n  color: #6b7280;\n  transition: transform 0.3s ease;\n}\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: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);\n  border-left: 3px solid #3b82f6;\n}\n\n.form-card.related-entity .collapsible-header {\n  background: linear-gradient(135deg, #e0f2fe 0%, #f0f9ff 100%);\n}\n\n.form-card.related-entity .collapsible-header:hover {\n  background: linear-gradient(135deg, #bfdbfe 0%, #e0f2fe 100%);\n  border-bottom-color: #3b82f6;\n}\n\n.form-card.related-entity .collapsible-title i {\n  color: #3b82f6;\n}\n\n/* Section Controls */\n.form-section-controls {\n  display: flex;\n  gap: 10px;\n  padding: 14px 18px;\n  background: linear-gradient(135deg, #f9fafb 0%, #ffffff 100%);\n  border-bottom: 2px solid #e5e7eb;\n  align-items: center;\n  flex-wrap: wrap;\n  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\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 #d1d5db;\n  background: white;\n  color: #374151;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.2s;\n  margin-right: 0;\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-weight: 500;\n}\n\n.form-section-controls button:hover {\n  background: #667eea;\n  color: white;\n  border-color: #667eea;\n  transform: translateY(-1px);\n  box-shadow: 0 2px 4px rgba(102, 126, 234, 0.2);\n}\n\n.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 #d1d5db;\n  border-radius: 6px;\n  width: 240px;\n  transition: all 0.2s;\n  background: white;\n}\n\n.form-section-controls .section-search:focus {\n  outline: none;\n  border-color: #667eea;\n  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);\n}\n\n.form-section-controls .section-search::placeholder {\n  color: #9ca3af;\n  font-style: italic;\n}\n\n.form-section-controls .section-count {\n  font-size: 13px;\n  color: #6b7280;\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: #667eea;\n  color: white;\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: #fef08a;\n  color: #854d0e;\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: #10b981;\n  color: white;\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: #9ca3af;\n}\n"] }]
     }], null, null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListFormComponentExtended, { className: "ListFormComponentExtended", filePath: "src/lib/custom/Lists/list-form.component.ts", lineNumber: 42 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListFormComponentExtended, { className: "ListFormComponentExtended", filePath: "src/lib/custom/Lists/list-form.component.ts", lineNumber: 53 }); })();
 export function LoadListFormComponentExtended() {
     // Prevents tree-shaking
 }