@memberjunction/ng-dashboards 3.4.0 → 4.1.0

package/dist/Lists/components/lists-my-lists-resource.component.js

@@ -17,22 +17,22 @@ import * as i4 from "@angular/forms";
 import * as i5 from "@memberjunction/ng-shared-generic";
 const _c0 = a0 => ({ node: a0, depth: 0 });
 const _c1 = (a0, a1) => ({ node: a0, depth: a1 });
-function ListsMyListsResource_button_10_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_10_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 23);
-    i0.ɵɵlistener("click", function ListsMyListsResource_button_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearSearch()); });
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_10_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearSearch()); });
     i0.ɵɵelement(1, "i", 24);
     i0.ɵɵelementEnd();
 } }
-function ListsMyListsResource_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "mj-loading", 26);
+function ListsMyListsResource_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 13);
+    i0.ɵɵelement(1, "mj-loading", 25);
     i0.ɵɵelementEnd();
 } }
-function ListsMyListsResource_div_16_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 27)(1, "div", 28);
-    i0.ɵɵelement(2, "div", 29)(3, "i", 5);
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 26);
+    i0.ɵɵelement(2, "div", 27)(3, "i", 5);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "h3");
     i0.ɵɵtext(5, "No Lists Yet");
@@ -40,30 +40,30 @@ function ListsMyListsResource_div_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(6, "p");
     i0.ɵɵtext(7, "Lists help you organize and track groups of records across your data.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 30)(9, "div", 31);
-    i0.ɵɵelement(10, "i", 32);
+    i0.ɵɵelementStart(8, "div", 28)(9, "div", 29);
+    i0.ɵɵelement(10, "i", 30);
     i0.ɵɵelementStart(11, "span");
     i0.ɵɵtext(12, "Group records from any entity");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 31);
-    i0.ɵɵelement(14, "i", 32);
+    i0.ɵɵelementStart(13, "div", 29);
+    i0.ɵɵelement(14, "i", 30);
     i0.ɵɵelementStart(15, "span");
     i0.ɵɵtext(16, "Organize with categories");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 31);
-    i0.ɵɵelement(18, "i", 32);
+    i0.ɵɵelementStart(17, "div", 29);
+    i0.ɵɵelement(18, "i", 30);
     i0.ɵɵelementStart(19, "span");
     i0.ɵɵtext(20, "Quick access from any view");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "button", 33);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_16_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createNewList()); });
+    i0.ɵɵelementStart(21, "button", 31);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_16_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createNewList()); });
     i0.ɵɵelement(22, "i", 12);
     i0.ɵɵtext(23, " Create Your First List ");
     i0.ɵɵelementEnd()();
 } }
-function ListsMyListsResource_div_17_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 34)(1, "div", 35);
+    i0.ɵɵelementStart(0, "div", 15)(1, "div", 32);
     i0.ɵɵelement(2, "i", 8);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
@@ -76,11 +76,11 @@ function ListsMyListsResource_div_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
     i0.ɵɵtext(9, "\"");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "p", 36);
+    i0.ɵɵelementStart(10, "p", 33);
     i0.ɵɵtext(11, "Try a different search term or clear your search.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "button", 37);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_17_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearSearch()); });
+    i0.ɵɵelementStart(12, "button", 34);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_17_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearSearch()); });
     i0.ɵɵtext(13, "Clear Search");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -88,31 +88,28 @@ function ListsMyListsResource_div_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(8);
     i0.ɵɵtextInterpolate(ctx_r2.searchTerm);
 } }
-function ListsMyListsResource_div_18_div_8_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_18_Conditional_8_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function ListsMyListsResource_div_18_div_8_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ListsMyListsResource_div_18_div_8_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 49);
-    i0.ɵɵelementContainerEnd();
+function ListsMyListsResource_Conditional_18_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListsMyListsResource_Conditional_18_Conditional_8_For_2_ng_container_0_Template, 1, 0, "ng-container", 43);
 } if (rf & 2) {
     const node_r7 = ctx.$implicit;
     i0.ɵɵnextContext(3);
     const categoryNodeTemplate_r8 = i0.ɵɵreference(20);
-    i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, node_r7));
 } }
-function ListsMyListsResource_div_18_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 47);
-    i0.ɵɵtemplate(1, ListsMyListsResource_div_18_div_8_ng_container_1_Template, 2, 4, "ng-container", 48);
+function ListsMyListsResource_Conditional_18_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 41);
+    i0.ɵɵrepeaterCreate(1, ListsMyListsResource_Conditional_18_Conditional_8_For_2_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.categoryTree);
+    i0.ɵɵrepeater(ctx_r2.categoryTree);
 } }
-function ListsMyListsResource_div_18_div_9_div_1_p_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 68);
+function ListsMyListsResource_Conditional_18_Conditional_9_For_2_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 53);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -120,9 +117,9 @@ function ListsMyListsResource_div_18_div_9_div_1_p_10_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(item_r10.list.Description);
 } }
-function ListsMyListsResource_div_18_div_9_div_1_span_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 69);
-    i0.ɵɵelement(1, "i", 70);
+function ListsMyListsResource_Conditional_18_Conditional_9_For_2_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵelement(1, "i", 61);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -131,32 +128,32 @@ function ListsMyListsResource_div_18_div_9_div_1_span_19_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.getCategoryName(item_r10.list.CategoryID), " ");
 } }
-function ListsMyListsResource_div_18_div_9_div_1_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_18_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 52);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_18_div_9_div_1_Template_div_click_0_listener() { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r10.list)); })("keydown.enter", function ListsMyListsResource_div_18_div_9_div_1_Template_div_keydown_enter_0_listener() { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r10.list)); })("keydown.space", function ListsMyListsResource_div_18_div_9_div_1_Template_div_keydown_space_0_listener($event) { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.openList(item_r10.list); return i0.ɵɵresetView($event.preventDefault()); });
-    i0.ɵɵelementStart(1, "div", 53)(2, "div", 54);
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_18_Conditional_9_For_2_Template_div_click_0_listener() { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r10.list)); })("keydown.enter", function ListsMyListsResource_Conditional_18_Conditional_9_For_2_Template_div_keydown_enter_0_listener() { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r10.list)); })("keydown.space", function ListsMyListsResource_Conditional_18_Conditional_9_For_2_Template_div_keydown_space_0_listener($event) { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.openList(item_r10.list); return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelementStart(1, "div", 46)(2, "div", 47);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 55)(5, "button", 56);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_18_div_9_div_1_Template_button_click_5_listener($event) { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r10.list)); });
-    i0.ɵɵelement(6, "i", 57);
+    i0.ɵɵelementStart(4, "div", 48)(5, "button", 49);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_18_Conditional_9_For_2_Template_button_click_5_listener($event) { const item_r10 = i0.ɵɵrestoreView(_r9).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r10.list)); });
+    i0.ɵɵelement(6, "i", 50);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(7, "div", 58)(8, "h3", 59);
+    i0.ɵɵelementStart(7, "div", 51)(8, "h3", 52);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(10, ListsMyListsResource_div_18_div_9_div_1_p_10_Template, 2, 1, "p", 60);
-    i0.ɵɵelementStart(11, "div", 61)(12, "span", 62);
-    i0.ɵɵelement(13, "i", 63);
+    i0.ɵɵconditionalCreate(10, ListsMyListsResource_Conditional_18_Conditional_9_For_2_Conditional_10_Template, 2, 1, "p", 53);
+    i0.ɵɵelementStart(11, "div", 54)(12, "span", 55);
+    i0.ɵɵelement(13, "i", 56);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "span", 62);
-    i0.ɵɵelement(16, "i", 64);
+    i0.ɵɵelementStart(15, "span", 55);
+    i0.ɵɵelement(16, "i", 57);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(18, "div", 65);
-    i0.ɵɵtemplate(19, ListsMyListsResource_div_18_div_9_div_1_span_19_Template, 3, 1, "span", 66);
-    i0.ɵɵelementStart(20, "span", 67);
+    i0.ɵɵelementStart(18, "div", 58);
+    i0.ɵɵconditionalCreate(19, ListsMyListsResource_Conditional_18_Conditional_9_For_2_Conditional_19_Template, 3, 1, "span", 59);
+    i0.ɵɵelementStart(20, "span", 60);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -172,39 +169,40 @@ function ListsMyListsResource_div_18_div_9_div_1_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(item_r10.list.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r10.list.Description);
+    i0.ɵɵconditional(item_r10.list.Description ? 10 : -1);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", item_r10.entityName, " ");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate2(" ", item_r10.itemCount, " item", item_r10.itemCount !== 1 ? "s" : "", " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", item_r10.list.CategoryID);
+    i0.ɵɵconditional(item_r10.list.CategoryID ? 19 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("Updated ", ctx_r2.formatDate(item_r10.list.__mj_UpdatedAt), "");
+    i0.ɵɵtextInterpolate1("Updated ", ctx_r2.formatDate(item_r10.list.__mj_UpdatedAt));
 } }
-function ListsMyListsResource_div_18_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 50);
-    i0.ɵɵtemplate(1, ListsMyListsResource_div_18_div_9_div_1_Template, 22, 13, "div", 51);
+function ListsMyListsResource_Conditional_18_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵrepeaterCreate(1, ListsMyListsResource_Conditional_18_Conditional_9_For_2_Template, 22, 13, "div", 44, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.filteredLists);
+    i0.ɵɵrepeater(ctx_r2.filteredLists);
 } }
-function ListsMyListsResource_div_18_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "div", 39)(2, "button", 40);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_18_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.viewMode = "grid"); });
-    i0.ɵɵelement(3, "i", 41);
+    i0.ɵɵelementStart(0, "div", 16)(1, "div", 35)(2, "button", 36);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_18_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.viewMode = "grid"); });
+    i0.ɵɵelement(3, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 42);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_18_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.viewMode = "list"); });
-    i0.ɵɵelement(5, "i", 43);
+    i0.ɵɵelementStart(4, "button", 38);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_18_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.viewMode = "list"); });
+    i0.ɵɵelement(5, "i", 39);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 44);
+    i0.ɵɵelementStart(6, "span", 40);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(8, ListsMyListsResource_div_18_div_8_Template, 2, 1, "div", 45)(9, ListsMyListsResource_div_18_div_9_Template, 2, 1, "div", 46);
+    i0.ɵɵconditionalCreate(8, ListsMyListsResource_Conditional_18_Conditional_8_Template, 3, 0, "div", 41);
+    i0.ɵɵconditionalCreate(9, ListsMyListsResource_Conditional_18_Conditional_9_Template, 3, 0, "div", 42);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -213,21 +211,21 @@ function ListsMyListsResource_div_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("active", ctx_r2.viewMode === "list");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2("", ctx_r2.filteredLists.length, " list", ctx_r2.filteredLists.length !== 1 ? "s" : "", "");
+    i0.ɵɵtextInterpolate2("", ctx_r2.filteredLists.length, " list", ctx_r2.filteredLists.length !== 1 ? "s" : "");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.viewMode === "list");
+    i0.ɵɵconditional(ctx_r2.viewMode === "list" ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.viewMode === "grid");
+    i0.ɵɵconditional(ctx_r2.viewMode === "grid" ? 9 : -1);
 } }
-function ListsMyListsResource_ng_template_19_div_1_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_ng_template_19_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 76);
-    i0.ɵɵlistener("click", function ListsMyListsResource_ng_template_19_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const node_r12 = i0.ɵɵnextContext().node; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCategory(node_r12)); });
-    i0.ɵɵelement(1, "i")(2, "i", 70);
-    i0.ɵɵelementStart(3, "span", 77);
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵlistener("click", function ListsMyListsResource_ng_template_19_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r11); const node_r12 = i0.ɵɵnextContext().node; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCategory(node_r12)); });
+    i0.ɵɵelement(1, "i")(2, "i", 61);
+    i0.ɵɵelementStart(3, "span", 67);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 78);
+    i0.ɵɵelementStart(5, "span", 68);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -242,15 +240,15 @@ function ListsMyListsResource_ng_template_19_div_1_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.getListCountInCategory(node_r12));
 } }
-function ListsMyListsResource_ng_template_19_div_2_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_ng_template_19_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 79);
-    i0.ɵɵlistener("click", function ListsMyListsResource_ng_template_19_div_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const node_r12 = i0.ɵɵnextContext().node; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCategory(node_r12)); });
-    i0.ɵɵelement(1, "i")(2, "i", 80);
-    i0.ɵɵelementStart(3, "span", 77);
+    i0.ɵɵelementStart(0, "div", 69);
+    i0.ɵɵlistener("click", function ListsMyListsResource_ng_template_19_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r13); const node_r12 = i0.ɵɵnextContext().node; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCategory(node_r12)); });
+    i0.ɵɵelement(1, "i")(2, "i", 70);
+    i0.ɵɵelementStart(3, "span", 67);
     i0.ɵɵtext(4, "Uncategorized");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 78);
+    i0.ɵɵelementStart(5, "span", 68);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -260,22 +258,22 @@ function ListsMyListsResource_ng_template_19_div_2_Template(rf, ctx) { if (rf &
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(node_r12.lists.length);
 } }
-function ListsMyListsResource_ng_template_19_div_3_div_1_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_ng_template_19_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 83);
-    i0.ɵɵlistener("click", function ListsMyListsResource_ng_template_19_div_3_div_1_Template_div_click_0_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r15.list)); })("keydown.enter", function ListsMyListsResource_ng_template_19_div_3_div_1_Template_div_keydown_enter_0_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r15.list)); })("keydown.space", function ListsMyListsResource_ng_template_19_div_3_div_1_Template_div_keydown_space_0_listener($event) { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.openList(item_r15.list); return i0.ɵɵresetView($event.preventDefault()); });
-    i0.ɵɵelementStart(1, "div", 84);
+    i0.ɵɵelementStart(0, "div", 72);
+    i0.ɵɵlistener("click", function ListsMyListsResource_ng_template_19_Conditional_3_For_2_Template_div_click_0_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r15.list)); })("keydown.enter", function ListsMyListsResource_ng_template_19_Conditional_3_For_2_Template_div_keydown_enter_0_listener() { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r15.list)); })("keydown.space", function ListsMyListsResource_ng_template_19_Conditional_3_For_2_Template_div_keydown_space_0_listener($event) { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); ctx_r2.openList(item_r15.list); return i0.ɵɵresetView($event.preventDefault()); });
+    i0.ɵɵelementStart(1, "div", 73);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 85)(4, "span", 86);
+    i0.ɵɵelementStart(3, "div", 74)(4, "span", 75);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 87);
+    i0.ɵɵelementStart(6, "span", 76);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 88)(9, "button", 89);
-    i0.ɵɵlistener("click", function ListsMyListsResource_ng_template_19_div_3_div_1_Template_button_click_9_listener($event) { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r15.list)); });
-    i0.ɵɵelement(10, "i", 57);
+    i0.ɵɵelementStart(8, "div", 77)(9, "button", 78);
+    i0.ɵɵlistener("click", function ListsMyListsResource_ng_template_19_Conditional_3_For_2_Template_button_click_9_listener($event) { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r15.list)); });
+    i0.ɵɵelement(10, "i", 50);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const item_r15 = ctx.$implicit;
@@ -292,92 +290,89 @@ function ListsMyListsResource_ng_template_19_div_3_div_1_Template(rf, ctx) { if
     i0.ɵɵadvance(2);
     i0.ɵɵattribute("aria-label", "More options for " + item_r15.list.Name);
 } }
-function ListsMyListsResource_ng_template_19_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 81);
-    i0.ɵɵtemplate(1, ListsMyListsResource_ng_template_19_div_3_div_1_Template, 11, 9, "div", 82);
+function ListsMyListsResource_ng_template_19_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵrepeaterCreate(1, ListsMyListsResource_ng_template_19_Conditional_3_For_2_Template, 11, 9, "div", 71, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const node_r12 = i0.ɵɵnextContext().node;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", node_r12.lists);
+    i0.ɵɵrepeater(node_r12.lists);
 } }
-function ListsMyListsResource_ng_template_19_ng_container_4_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_ng_template_19_Conditional_4_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function ListsMyListsResource_ng_template_19_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ListsMyListsResource_ng_template_19_ng_container_4_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 49);
-    i0.ɵɵelementContainerEnd();
+function ListsMyListsResource_ng_template_19_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListsMyListsResource_ng_template_19_Conditional_4_For_1_ng_container_0_Template, 1, 0, "ng-container", 43);
 } if (rf & 2) {
     const child_r16 = ctx.$implicit;
     const depth_r17 = i0.ɵɵnextContext(2).depth;
     i0.ɵɵnextContext();
     const categoryNodeTemplate_r8 = i0.ɵɵreference(20);
-    i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1, child_r16, depth_r17 + 1));
 } }
-function ListsMyListsResource_ng_template_19_ng_container_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ListsMyListsResource_ng_template_19_ng_container_4_ng_container_1_Template, 2, 5, "ng-container", 48);
-    i0.ɵɵelementContainerEnd();
+function ListsMyListsResource_ng_template_19_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ListsMyListsResource_ng_template_19_Conditional_4_For_1_Template, 1, 5, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const node_r12 = i0.ɵɵnextContext().node;
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", node_r12.children);
+    i0.ɵɵrepeater(node_r12.children);
 } }
 function ListsMyListsResource_ng_template_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 71);
-    i0.ɵɵtemplate(1, ListsMyListsResource_ng_template_19_div_1_Template, 7, 6, "div", 72)(2, ListsMyListsResource_ng_template_19_div_2_Template, 7, 3, "div", 73)(3, ListsMyListsResource_ng_template_19_div_3_Template, 2, 1, "div", 74)(4, ListsMyListsResource_ng_template_19_ng_container_4_Template, 2, 1, "ng-container", 75);
+    i0.ɵɵelementStart(0, "div", 62);
+    i0.ɵɵconditionalCreate(1, ListsMyListsResource_ng_template_19_Conditional_1_Template, 7, 6, "div", 63);
+    i0.ɵɵconditionalCreate(2, ListsMyListsResource_ng_template_19_Conditional_2_Template, 7, 3, "div", 64);
+    i0.ɵɵconditionalCreate(3, ListsMyListsResource_ng_template_19_Conditional_3_Template, 3, 0, "div", 65);
+    i0.ɵɵconditionalCreate(4, ListsMyListsResource_ng_template_19_Conditional_4_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const node_r12 = ctx.node;
     const depth_r17 = ctx.depth;
     i0.ɵɵstyleProp("margin-left", depth_r17 * 20, "px");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r12.category);
+    i0.ɵɵconditional(node_r12.category ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !node_r12.category && node_r12.lists.length > 0);
+    i0.ɵɵconditional(!node_r12.category && node_r12.lists.length > 0 ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r12.isExpanded);
+    i0.ɵɵconditional(node_r12.isExpanded ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r12.isExpanded);
+    i0.ɵɵconditional(node_r12.isExpanded ? 4 : -1);
 } }
-function ListsMyListsResource_div_21_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 90);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_21_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeContextMenu()); });
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_21_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r18); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeContextMenu()); });
     i0.ɵɵelementEnd();
 } }
-function ListsMyListsResource_div_22_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_22_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 91)(1, "button", 92);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_22_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.editList()); });
-    i0.ɵɵelement(2, "i", 93);
+    i0.ɵɵelementStart(0, "div", 80)(1, "button", 81);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_22_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.editList()); });
+    i0.ɵɵelement(2, "i", 82);
     i0.ɵɵtext(3, " Edit ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 92);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_22_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.duplicateList()); });
-    i0.ɵɵelement(5, "i", 94);
+    i0.ɵɵelementStart(4, "button", 81);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_22_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.duplicateList()); });
+    i0.ɵɵelement(5, "i", 83);
     i0.ɵɵtext(6, " Duplicate ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(7, "div", 95);
-    i0.ɵɵelementStart(8, "button", 96);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_22_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmDeleteList()); });
-    i0.ɵɵelement(9, "i", 97);
+    i0.ɵɵelement(7, "div", 84);
+    i0.ɵɵelementStart(8, "button", 85);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_22_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r19); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmDeleteList()); });
+    i0.ɵɵelement(9, "i", 86);
     i0.ɵɵtext(10, " Delete ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("top", ctx_r2.contextMenuY, "px")("left", ctx_r2.contextMenuX, "px");
 } }
-function ListsMyListsResource_div_23_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 98);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_23_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_23_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
     i0.ɵɵelementEnd();
 } }
-function ListsMyListsResource_div_24_option_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 109);
+function ListsMyListsResource_Conditional_24_For_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 97);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -386,55 +381,55 @@ function ListsMyListsResource_div_24_option_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(cat_r23.displayName);
 } }
-function ListsMyListsResource_div_24_i_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 115);
+function ListsMyListsResource_Conditional_24_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 100);
 } }
-function ListsMyListsResource_div_24_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_24_Template(rf, ctx) { if (rf & 1) {
     const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 99)(1, "div", 100)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 88)(2, "h3");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 101);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_24_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
+    i0.ɵɵelementStart(4, "button", 89);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_24_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
     i0.ɵɵelement(5, "i", 24);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 102)(7, "div", 103)(8, "label");
+    i0.ɵɵelementStart(6, "div", 90)(7, "div", 91)(8, "label");
     i0.ɵɵtext(9, "Name *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "input", 104);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsMyListsResource_div_24_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.newListName, $event) || (ctx_r2.newListName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(10, "input", 92);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsMyListsResource_Conditional_24_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.newListName, $event) || (ctx_r2.newListName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 103)(12, "label");
+    i0.ɵɵelementStart(11, "div", 91)(12, "label");
     i0.ɵɵtext(13, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "textarea", 105);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsMyListsResource_div_24_Template_textarea_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.newListDescription, $event) || (ctx_r2.newListDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(14, "textarea", 93);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsMyListsResource_Conditional_24_Template_textarea_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.newListDescription, $event) || (ctx_r2.newListDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 103)(16, "label");
+    i0.ɵɵelementStart(15, "div", 91)(16, "label");
     i0.ɵɵtext(17, "Entity *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 106)(19, "input", 107, 1);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsMyListsResource_div_24_Template_input_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.entitySearchTerm, $event) || (ctx_r2.entitySearchTerm = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function ListsMyListsResource_div_24_Template_input_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.filterEntities($event)); })("focus", function ListsMyListsResource_div_24_Template_input_focus_19_listener() { i0.ɵɵrestoreView(_r21); const entityInput_r22 = i0.ɵɵreference(20); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openEntityDropdown(entityInput_r22)); });
+    i0.ɵɵelementStart(18, "div", 94)(19, "input", 95, 1);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsMyListsResource_Conditional_24_Template_input_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.entitySearchTerm, $event) || (ctx_r2.entitySearchTerm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ListsMyListsResource_Conditional_24_Template_input_ngModelChange_19_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.filterEntities($event)); })("focus", function ListsMyListsResource_Conditional_24_Template_input_focus_19_listener() { i0.ɵɵrestoreView(_r21); const entityInput_r22 = i0.ɵɵreference(20); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openEntityDropdown(entityInput_r22)); });
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "div", 103)(22, "label");
+    i0.ɵɵelementStart(21, "div", 91)(22, "label");
     i0.ɵɵtext(23, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "select", 108);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsMyListsResource_div_24_Template_select_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.selectedCategoryId, $event) || (ctx_r2.selectedCategoryId = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(25, "option", 109);
+    i0.ɵɵelementStart(24, "select", 96);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsMyListsResource_Conditional_24_Template_select_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.selectedCategoryId, $event) || (ctx_r2.selectedCategoryId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(25, "option", 97);
     i0.ɵɵtext(26, "No category");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(27, ListsMyListsResource_div_24_option_27_Template, 2, 2, "option", 110);
+    i0.ɵɵrepeaterCreate(27, ListsMyListsResource_Conditional_24_For_28_Template, 2, 2, "option", 97, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(28, "div", 111)(29, "button", 112);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_24_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveList()); });
-    i0.ɵɵtemplate(30, ListsMyListsResource_div_24_i_30_Template, 1, 0, "i", 113);
-    i0.ɵɵtext(31);
+    i0.ɵɵelementStart(29, "div", 98)(30, "button", 99);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_24_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveList()); });
+    i0.ɵɵconditionalCreate(31, ListsMyListsResource_Conditional_24_Conditional_31_Template, 1, 0, "i", 100);
+    i0.ɵɵtext(32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(32, "button", 114);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_24_Template_button_click_32_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
-    i0.ɵɵtext(33, "Cancel");
+    i0.ɵɵelementStart(33, "button", 101);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_24_Template_button_click_33_listener() { i0.ɵɵrestoreView(_r21); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
+    i0.ɵɵtext(34, "Cancel");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -452,51 +447,51 @@ function ListsMyListsResource_div_24_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngValue", null);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r2.flatCategories);
-    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.flatCategories);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("disabled", !ctx_r2.newListName || !ctx_r2.selectedEntityId || ctx_r2.isSaving);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.isSaving);
+    i0.ɵɵconditional(ctx_r2.isSaving ? 31 : -1);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.isSaving ? "Saving..." : ctx_r2.editingList ? "Save" : "Create", " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", ctx_r2.isSaving);
 } }
-function ListsMyListsResource_div_25_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_25_Template(rf, ctx) { if (rf & 1) {
     const _r24 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 98);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_25_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(0, "div", 87);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_25_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
     i0.ɵɵelementEnd();
 } }
-function ListsMyListsResource_div_26_i_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 115);
+function ListsMyListsResource_Conditional_26_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 100);
 } }
-function ListsMyListsResource_div_26_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 116)(1, "div", 100)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 88)(2, "h3");
     i0.ɵɵtext(3, "Delete List");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 101);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_26_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(4, "button", 89);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_26_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
     i0.ɵɵelement(5, "i", 24);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 102)(7, "p");
+    i0.ɵɵelementStart(6, "div", 90)(7, "p");
     i0.ɵɵtext(8, "Are you sure you want to delete \"");
     i0.ɵɵelementStart(9, "strong");
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(11, "\"?");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "p", 117);
+    i0.ɵɵelementStart(12, "p", 102);
     i0.ɵɵtext(13, "This will also remove all items in the list.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 111)(15, "button", 118);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_26_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.deleteList()); });
-    i0.ɵɵtemplate(16, ListsMyListsResource_div_26_i_16_Template, 1, 0, "i", 113);
+    i0.ɵɵelementStart(14, "div", 98)(15, "button", 103);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_26_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.deleteList()); });
+    i0.ɵɵconditionalCreate(16, ListsMyListsResource_Conditional_26_Conditional_16_Template, 1, 0, "i", 100);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 119);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_26_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(18, "button", 104);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_26_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
     i0.ɵɵtext(19, "Cancel");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -504,14 +499,14 @@ function ListsMyListsResource_div_26_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(10);
     i0.ɵɵtextInterpolate(ctx_r2.deleteListName);
     i0.ɵɵadvance(6);
-    i0.ɵɵproperty("ngIf", ctx_r2.isDeleting);
+    i0.ɵɵconditional(ctx_r2.isDeleting ? 16 : -1);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.isDeleting ? "Deleting..." : "Delete", " ");
 } }
-function ListsMyListsResource_div_27_div_3_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_27_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r27 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_27_div_3_Template_div_click_0_listener() { const entity_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectEntity(entity_r28)); });
+    i0.ɵɵelementStart(0, "div", 110);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_27_For_4_Template_div_click_0_listener() { const entity_r28 = i0.ɵɵrestoreView(_r27).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectEntity(entity_r28)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -519,18 +514,19 @@ function ListsMyListsResource_div_27_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", entity_r28.Name, " ");
 } }
-function ListsMyListsResource_div_27_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 126);
+function ListsMyListsResource_Conditional_27_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 109);
     i0.ɵɵtext(1, " No entities found ");
     i0.ɵɵelementEnd();
 } }
-function ListsMyListsResource_div_27_Template(rf, ctx) { if (rf & 1) {
+function ListsMyListsResource_Conditional_27_Template(rf, ctx) { if (rf & 1) {
     const _r26 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 120)(1, "div", 121);
-    i0.ɵɵlistener("click", function ListsMyListsResource_div_27_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeEntityDropdown()); });
+    i0.ɵɵelementStart(0, "div", 105)(1, "div", 106);
+    i0.ɵɵlistener("click", function ListsMyListsResource_Conditional_27_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r26); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeEntityDropdown()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 122);
-    i0.ɵɵtemplate(3, ListsMyListsResource_div_27_div_3_Template, 2, 1, "div", 123)(4, ListsMyListsResource_div_27_div_4_Template, 2, 0, "div", 124);
+    i0.ɵɵelementStart(2, "div", 107);
+    i0.ɵɵrepeaterCreate(3, ListsMyListsResource_Conditional_27_For_4_Template, 2, 1, "div", 108, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(5, ListsMyListsResource_Conditional_27_Conditional_5_Template, 2, 0, "div", 109);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -539,13 +535,10 @@ function ListsMyListsResource_div_27_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("open-above", ctx_r2.entityDropdownPosition.openAbove);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.filteredEntities);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.filteredEntities.length === 0);
+    i0.ɵɵrepeater(ctx_r2.filteredEntities);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.filteredEntities.length === 0 ? 5 : -1);
 } }
-export function LoadListsMyListsResource() {
-    // simple tree shaker prevention
-}
 let ListsMyListsResource = class ListsMyListsResource extends BaseResourceComponent {
     cdr;
     tabService;
@@ -1044,8 +1037,8 @@ let ListsMyListsResource = class ListsMyListsResource extends BaseResourceCompon
     }
     static ɵfac = function ListsMyListsResource_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListsMyListsResource)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.TabService), i0.ɵɵdirectiveInject(i2.MJNotificationService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListsMyListsResource, selectors: [["mj-lists-my-lists-resource"]], hostBindings: function ListsMyListsResource_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("click", function ListsMyListsResource_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, false, i0.ɵɵresolveDocument)("keydown.escape", function ListsMyListsResource_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, false, i0.ɵɵresolveDocument);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 28, vars: 13, consts: [["categoryNodeTemplate", ""], ["entityInput", ""], [1, "lists-my-lists-container"], [1, "lists-header"], [1, "header-title"], [1, "fa-solid", "fa-list-check"], [1, "header-actions"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search lists...", 3, "ngModelChange", "ngModel"], ["class", "clear-search", 3, "click", 4, "ngIf"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], ["class", "loading-container", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], ["class", "empty-state search-empty", 4, "ngIf"], ["class", "lists-content", 4, "ngIf"], ["class", "context-menu-overlay", 3, "click", 4, "ngIf"], ["class", "context-menu", 3, "top", "left", 4, "ngIf"], ["class", "modal-overlay", 3, "click", 4, "ngIf"], ["class", "modal-dialog", 4, "ngIf"], ["class", "modal-dialog confirm-dialog", 4, "ngIf"], ["class", "entity-dropdown-portal", 3, "top", "left", "width", "dropdown-above", 4, "ngIf"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times"], [1, "loading-container"], ["text", "Loading lists...", "size", "medium"], [1, "empty-state"], [1, "empty-state-icon-wrapper"], [1, "icon-bg"], [1, "empty-state-features"], [1, "feature-item"], [1, "fa-solid", "fa-check-circle"], [1, "btn-create-large", 3, "click"], [1, "empty-state", "search-empty"], [1, "empty-state-icon-wrapper", "search"], [1, "empty-hint"], [1, "btn-clear", 3, "click"], [1, "lists-content"], [1, "view-controls"], ["title", "Grid view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "List view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-list"], [1, "list-count"], ["class", "category-tree", 4, "ngIf"], ["class", "lists-grid", "role", "list", "aria-label", "My Lists", 4, "ngIf"], [1, "category-tree"], [4, "ngFor", "ngForOf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["role", "list", "aria-label", "My Lists", 1, "lists-grid"], ["class", "list-card", "tabindex", "0", "role", "listitem", 3, "click", "keydown.enter", "keydown.space", 4, "ngFor", "ngForOf"], ["tabindex", "0", "role", "listitem", 1, "list-card", 3, "click", "keydown.enter", "keydown.space"], [1, "card-header"], ["aria-hidden", "true", 1, "card-icon"], [1, "card-menu"], [1, "menu-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis-v"], [1, "card-body"], [1, "card-title"], ["class", "card-description", 4, "ngIf"], [1, "card-meta"], [1, "meta-item"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-hashtag"], [1, "card-footer"], ["class", "category-tag", 4, "ngIf"], [1, "date-info"], [1, "card-description"], [1, "category-tag"], [1, "fa-solid", "fa-folder"], [1, "category-section"], ["class", "category-header", 3, "click", 4, "ngIf"], ["class", "category-header uncategorized", 3, "click", 4, "ngIf"], ["class", "category-lists", "role", "list", 4, "ngIf"], [4, "ngIf"], [1, "category-header", 3, "click"], [1, "category-name"], [1, "category-count"], [1, "category-header", "uncategorized", 3, "click"], [1, "fa-solid", "fa-inbox"], ["role", "list", 1, "category-lists"], ["class", "list-row", "tabindex", "0", "role", "listitem", 3, "click", "keydown.enter", "keydown.space", 4, "ngFor", "ngForOf"], ["tabindex", "0", "role", "listitem", 1, "list-row", 3, "click", "keydown.enter", "keydown.space"], ["aria-hidden", "true", 1, "list-icon"], [1, "list-info"], [1, "list-name"], [1, "list-meta"], [1, "list-actions"], [1, "action-btn", 3, "click"], [1, "context-menu-overlay", 3, "click"], [1, "context-menu"], [1, "menu-item", 3, "click"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-copy"], [1, "menu-divider"], [1, "menu-item", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "modal-overlay", 3, "click"], [1, "modal-dialog"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], [1, "form-group"], ["type", "text", "placeholder", "Enter list name", 1, "form-input", 3, "ngModelChange", "ngModel"], ["placeholder", "Optional description", "rows", "3", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "custom-select-wrapper"], ["type", "text", "placeholder", "Search and select an entity", 1, "form-input", 3, "ngModelChange", "focus", "ngModel", "disabled"], [1, "form-input", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [3, "ngValue", 4, "ngFor", "ngForOf"], [1, "modal-footer"], [1, "btn-primary", 3, "click", "disabled"], ["class", "fa-solid fa-spinner fa-spin", 4, "ngIf"], [1, "btn-secondary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "modal-dialog", "confirm-dialog"], [1, "warning-text"], [1, "btn-danger", 3, "click"], [1, "btn-secondary", 3, "click"], [1, "entity-dropdown-portal"], [1, "entity-dropdown-backdrop", 3, "click"], [1, "entity-dropdown-content"], ["class", "dropdown-item", 3, "click", 4, "ngFor", "ngForOf"], ["class", "dropdown-empty", 4, "ngIf"], [1, "dropdown-item", 3, "click"], [1, "dropdown-empty"]], template: function ListsMyListsResource_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function ListsMyListsResource_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, i0.ɵɵresolveDocument)("keydown.escape", function ListsMyListsResource_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, i0.ɵɵresolveDocument);
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 28, vars: 13, consts: [["categoryNodeTemplate", ""], ["entityInput", ""], [1, "lists-my-lists-container"], [1, "lists-header"], [1, "header-title"], [1, "fa-solid", "fa-list-check"], [1, "header-actions"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search lists...", 3, "ngModelChange", "ngModel"], [1, "clear-search"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "loading-container"], [1, "empty-state"], [1, "empty-state", "search-empty"], [1, "lists-content"], [1, "context-menu-overlay"], [1, "context-menu", 3, "top", "left"], [1, "modal-overlay"], [1, "modal-dialog"], [1, "modal-dialog", "confirm-dialog"], [1, "entity-dropdown-portal", 3, "top", "left", "width", "dropdown-above"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading lists...", "size", "medium"], [1, "empty-state-icon-wrapper"], [1, "icon-bg"], [1, "empty-state-features"], [1, "feature-item"], [1, "fa-solid", "fa-check-circle"], [1, "btn-create-large", 3, "click"], [1, "empty-state-icon-wrapper", "search"], [1, "empty-hint"], [1, "btn-clear", 3, "click"], [1, "view-controls"], ["title", "Grid view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "List view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-list"], [1, "list-count"], [1, "category-tree"], ["role", "list", "aria-label", "My Lists", 1, "lists-grid"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], ["tabindex", "0", "role", "listitem", 1, "list-card"], ["tabindex", "0", "role", "listitem", 1, "list-card", 3, "click", "keydown.enter", "keydown.space"], [1, "card-header"], ["aria-hidden", "true", 1, "card-icon"], [1, "card-menu"], [1, "menu-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis-v"], [1, "card-body"], [1, "card-title"], [1, "card-description"], [1, "card-meta"], [1, "meta-item"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-hashtag"], [1, "card-footer"], [1, "category-tag"], [1, "date-info"], [1, "fa-solid", "fa-folder"], [1, "category-section"], [1, "category-header"], [1, "category-header", "uncategorized"], ["role", "list", 1, "category-lists"], [1, "category-header", 3, "click"], [1, "category-name"], [1, "category-count"], [1, "category-header", "uncategorized", 3, "click"], [1, "fa-solid", "fa-inbox"], ["tabindex", "0", "role", "listitem", 1, "list-row"], ["tabindex", "0", "role", "listitem", 1, "list-row", 3, "click", "keydown.enter", "keydown.space"], ["aria-hidden", "true", 1, "list-icon"], [1, "list-info"], [1, "list-name"], [1, "list-meta"], [1, "list-actions"], [1, "action-btn", 3, "click"], [1, "context-menu-overlay", 3, "click"], [1, "context-menu"], [1, "menu-item", 3, "click"], [1, "fa-solid", "fa-pen"], [1, "fa-solid", "fa-copy"], [1, "menu-divider"], [1, "menu-item", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "modal-overlay", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click"], [1, "modal-body"], [1, "form-group"], ["type", "text", "placeholder", "Enter list name", 1, "form-input", 3, "ngModelChange", "ngModel"], ["placeholder", "Optional description", "rows", "3", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "custom-select-wrapper"], ["type", "text", "placeholder", "Search and select an entity", 1, "form-input", 3, "ngModelChange", "focus", "ngModel", "disabled"], [1, "form-input", 3, "ngModelChange", "ngModel"], [3, "ngValue"], [1, "modal-footer"], [1, "btn-primary", 3, "click", "disabled"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "btn-secondary", 3, "click", "disabled"], [1, "warning-text"], [1, "btn-danger", 3, "click"], [1, "btn-secondary", 3, "click"], [1, "entity-dropdown-portal"], [1, "entity-dropdown-backdrop", 3, "click"], [1, "entity-dropdown-content"], [1, "dropdown-item"], [1, "dropdown-empty"], [1, "dropdown-item", 3, "click"]], template: function ListsMyListsResource_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4);
             i0.ɵɵelement(3, "i", 5);
@@ -1058,7 +1051,7 @@ let ListsMyListsResource = class ListsMyListsResource extends BaseResourceCompon
             i0.ɵɵtwoWayListener("ngModelChange", function ListsMyListsResource_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.searchTerm, $event) || (ctx.searchTerm = $event); return i0.ɵɵresetView($event); });
             i0.ɵɵlistener("ngModelChange", function ListsMyListsResource_Template_input_ngModelChange_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSearchChange($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(10, ListsMyListsResource_button_10_Template, 2, 0, "button", 10);
+            i0.ɵɵconditionalCreate(10, ListsMyListsResource_Conditional_10_Template, 2, 0, "button", 10);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(11, "button", 11);
             i0.ɵɵlistener("click", function ListsMyListsResource_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.createNewList()); });
@@ -1066,36 +1059,47 @@ let ListsMyListsResource = class ListsMyListsResource extends BaseResourceCompon
             i0.ɵɵelementStart(13, "span");
             i0.ɵɵtext(14, "New List");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵtemplate(15, ListsMyListsResource_div_15_Template, 2, 0, "div", 13)(16, ListsMyListsResource_div_16_Template, 24, 0, "div", 14)(17, ListsMyListsResource_div_17_Template, 14, 1, "div", 15)(18, ListsMyListsResource_div_18_Template, 10, 8, "div", 16)(19, ListsMyListsResource_ng_template_19_Template, 5, 6, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(21, ListsMyListsResource_div_21_Template, 1, 0, "div", 17)(22, ListsMyListsResource_div_22_Template, 11, 4, "div", 18)(23, ListsMyListsResource_div_23_Template, 1, 0, "div", 19)(24, ListsMyListsResource_div_24_Template, 34, 12, "div", 20)(25, ListsMyListsResource_div_25_Template, 1, 0, "div", 19)(26, ListsMyListsResource_div_26_Template, 20, 3, "div", 21)(27, ListsMyListsResource_div_27_Template, 5, 12, "div", 22);
+            i0.ɵɵconditionalCreate(15, ListsMyListsResource_Conditional_15_Template, 2, 0, "div", 13);
+            i0.ɵɵconditionalCreate(16, ListsMyListsResource_Conditional_16_Template, 24, 0, "div", 14);
+            i0.ɵɵconditionalCreate(17, ListsMyListsResource_Conditional_17_Template, 14, 1, "div", 15);
+            i0.ɵɵconditionalCreate(18, ListsMyListsResource_Conditional_18_Template, 10, 8, "div", 16);
+            i0.ɵɵtemplate(19, ListsMyListsResource_ng_template_19_Template, 5, 6, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(21, ListsMyListsResource_Conditional_21_Template, 1, 0, "div", 17);
+            i0.ɵɵconditionalCreate(22, ListsMyListsResource_Conditional_22_Template, 11, 4, "div", 18);
+            i0.ɵɵconditionalCreate(23, ListsMyListsResource_Conditional_23_Template, 1, 0, "div", 19);
+            i0.ɵɵconditionalCreate(24, ListsMyListsResource_Conditional_24_Template, 35, 11, "div", 20);
+            i0.ɵɵconditionalCreate(25, ListsMyListsResource_Conditional_25_Template, 1, 0, "div", 19);
+            i0.ɵɵconditionalCreate(26, ListsMyListsResource_Conditional_26_Template, 20, 3, "div", 21);
+            i0.ɵɵconditionalCreate(27, ListsMyListsResource_Conditional_27_Template, 6, 11, "div", 22);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(9);
             i0.ɵɵtwoWayProperty("ngModel", ctx.searchTerm);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.searchTerm);
+            i0.ɵɵconditional(ctx.searchTerm ? 10 : -1);
             i0.ɵɵadvance(5);
-            i0.ɵɵproperty("ngIf", ctx.isLoading);
+            i0.ɵɵconditional(ctx.isLoading ? 15 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.filteredLists.length === 0 && !ctx.searchTerm);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.filteredLists.length === 0 && !ctx.searchTerm ? 16 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.filteredLists.length === 0 && ctx.searchTerm);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.filteredLists.length === 0 && ctx.searchTerm ? 17 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.filteredLists.length > 0);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.filteredLists.length > 0 ? 18 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.showContextMenu);
+            i0.ɵɵconditional(ctx.showContextMenu ? 21 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showContextMenu);
+            i0.ɵɵconditional(ctx.showContextMenu ? 22 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showCreateDialog);
+            i0.ɵɵconditional(ctx.showCreateDialog ? 23 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showCreateDialog);
+            i0.ɵɵconditional(ctx.showCreateDialog ? 24 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showDeleteConfirm);
+            i0.ɵɵconditional(ctx.showDeleteConfirm ? 25 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showDeleteConfirm);
+            i0.ɵɵconditional(ctx.showDeleteConfirm ? 26 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showEntityDropdown && !ctx.editingList);
-        } }, dependencies: [i3.NgForOf, i3.NgIf, i3.NgTemplateOutlet, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.DefaultValueAccessor, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.NgModel, i5.LoadingComponent], styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-my-lists-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .lists-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-actions {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-box i.fa-search {\n      position: absolute;\n      left: 12px;\n      color: #999;\n    }\n\n    .search-box input {\n      padding: 8px 36px 8px 36px;\n      border: 1px solid #ddd;\n      border-radius: 20px;\n      font-size: 14px;\n      width: 250px;\n      transition: border-color 0.2s, box-shadow 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    .clear-search {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .clear-search:hover {\n      color: #666;\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-create:hover {\n      background: #1976D2;\n    }\n\n    /* Loading */\n    .loading-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n    }\n\n    /* Empty State */\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      padding: 48px 40px;\n      text-align: center;\n      max-width: 480px;\n      margin: 0 auto;\n    }\n\n    .empty-state-icon-wrapper {\n      position: relative;\n      margin-bottom: 24px;\n    }\n\n    .empty-state-icon-wrapper .icon-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 120px;\n      height: 120px;\n      border-radius: 50%;\n      background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 56px;\n      color: #2196F3;\n      z-index: 1;\n    }\n\n    .empty-state-icon-wrapper.search > i {\n      font-size: 48px;\n      color: #9e9e9e;\n    }\n\n    .empty-state h3 {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: #666;\n      font-size: 15px;\n      line-height: 1.5;\n    }\n\n    .empty-state p:last-of-type {\n      margin-bottom: 24px;\n    }\n\n    .empty-hint {\n      color: #999 !important;\n      font-size: 13px !important;\n    }\n\n    .empty-state-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 28px;\n      text-align: left;\n    }\n\n    .feature-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 14px;\n      color: #555;\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: #4CAF50 !important;\n    }\n\n    .search-empty .empty-state-icon-wrapper {\n      margin-bottom: 20px;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);\n      color: white;\n      border: none;\n      border-radius: 8px;\n      font-size: 15px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n    }\n\n    .btn-create-large:hover {\n      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);\n    }\n\n    .btn-clear {\n      padding: 10px 20px;\n      background: #f0f0f0;\n      border: none;\n      border-radius: 6px;\n      color: #666;\n      cursor: pointer;\n    }\n\n    .btn-clear:hover {\n      background: #e0e0e0;\n    }\n\n    /* Content */\n    .lists-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .view-controls {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .view-toggle {\n      padding: 8px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:hover {\n      background: #f5f5f5;\n    }\n\n    .view-toggle.active {\n      background: #2196F3;\n      border-color: #2196F3;\n      color: white;\n    }\n\n    .list-count {\n      margin-left: auto;\n      color: #999;\n      font-size: 14px;\n    }\n\n    /* Grid View */\n    .lists-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .list-card {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      overflow: hidden;\n      cursor: pointer;\n      transition: transform 0.2s, box-shadow 0.2s, outline 0.1s;\n      outline: 2px solid transparent;\n    }\n\n    .list-card:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n    }\n\n    .list-card:focus {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .list-card:focus:not(:focus-visible) {\n      outline: none;\n    }\n\n    .list-card:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .card-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 16px 16px 0;\n    }\n\n    .card-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 18px;\n    }\n\n    .menu-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .menu-btn:hover {\n      background: #f5f5f5;\n      color: #666;\n    }\n\n    .card-body {\n      padding: 12px 16px;\n    }\n\n    .card-title {\n      margin: 0 0 4px;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .card-description {\n      margin: 0 0 12px;\n      font-size: 13px;\n      color: #666;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .card-meta {\n      display: flex;\n      gap: 16px;\n    }\n\n    .meta-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 12px;\n      color: #999;\n    }\n\n    .card-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-top: 1px solid #f0f0f0;\n      background: #fafafa;\n    }\n\n    .category-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: #666;\n      background: #e8f4fd;\n      padding: 2px 8px;\n      border-radius: 4px;\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: #999;\n    }\n\n    /* Category Tree */\n    .category-tree {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .category-section {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .category-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .category-header:hover {\n      background: #f5f5f5;\n    }\n\n    .category-header i:first-child {\n      width: 16px;\n      text-align: center;\n      color: #999;\n    }\n\n    .category-header .fa-folder,\n    .category-header .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .category-header.uncategorized .fa-inbox {\n      color: #999;\n    }\n\n    .category-name {\n      flex: 1;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .category-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .category-lists {\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .list-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px 12px 40px;\n      cursor: pointer;\n      transition: background 0.2s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: #f5f5f5;\n    }\n\n    .list-row:focus {\n      background: #e3f2fd;\n    }\n\n    .list-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-name {\n      display: block;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .list-row:hover .action-btn {\n      opacity: 1;\n    }\n\n    .action-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Context Menu (native) */\n    .context-menu-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 999;\n    }\n\n    .context-menu {\n      position: fixed;\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n      min-width: 160px;\n      padding: 4px 0;\n      z-index: 1000;\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 10px 16px;\n      background: none;\n      border: none;\n      text-align: left;\n      font-size: 14px;\n      color: #333;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .menu-item:hover {\n      background: #f5f5f5;\n    }\n\n    .menu-item.danger {\n      color: #d32f2f;\n    }\n\n    .menu-item.danger:hover {\n      background: #ffebee;\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: #e0e0e0;\n      margin: 4px 0;\n    }\n\n    /* Modal Styles */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0, 0, 0, 0.5);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 500px;\n      max-width: 90vw;\n      max-height: 90vh;\n      overflow: hidden;\n      z-index: 1001;\n    }\n\n    .confirm-dialog {\n      width: 400px;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .modal-close:hover {\n      background: #f0f0f0;\n      color: #666;\n    }\n\n    .modal-body {\n      padding: 20px;\n      max-height: 60vh;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0 0 8px;\n      color: #333;\n    }\n\n    .warning-text {\n      color: #d32f2f !important;\n      font-size: 13px;\n    }\n\n    .modal-footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: white;\n      color: #666;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n    }\n\n    .btn-danger {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #d32f2f;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-danger:hover:not(:disabled) {\n      background: #c62828;\n    }\n\n    /* Form Styles */\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group:last-child {\n      margin-bottom: 0;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      transition: border-color 0.2s, box-shadow 0.2s;\n      box-sizing: border-box;\n    }\n\n    .form-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    .form-input:disabled {\n      background: #f5f5f5;\n      color: #999;\n    }\n\n    textarea.form-input {\n      resize: vertical;\n      min-height: 80px;\n    }\n\n    select.form-input {\n      cursor: pointer;\n    }\n\n    .custom-select-wrapper {\n      position: relative;\n    }\n\n    /* Portal Dropdown - Fixed positioning to escape modal z-index */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002; /* Above modal (1001) */\n    }\n\n    .entity-dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n    }\n\n    .entity-dropdown-content {\n      max-height: 200px;\n      overflow-y: auto;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    .entity-dropdown-content.open-above {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .dropdown-item {\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .dropdown-item:hover {\n      background: #e3f2fd;\n    }\n\n    .dropdown-item:first-child {\n      border-radius: 6px 6px 0 0;\n    }\n\n    .dropdown-item:last-child {\n      border-radius: 0 0 6px 6px;\n    }\n\n    .dropdown-empty {\n      padding: 10px 12px;\n      color: #999;\n      font-style: italic;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .lists-header {\n        flex-direction: column;\n        gap: 16px;\n        align-items: stretch;\n      }\n\n      .header-actions {\n        flex-direction: column;\n      }\n\n      .search-box input {\n        width: 100%;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .lists-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "], encapsulation: 2 });
+            i0.ɵɵconditional(ctx.showEntityDropdown && !ctx.editingList ? 27 : -1);
+        } }, dependencies: [i3.NgTemplateOutlet, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.DefaultValueAccessor, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.NgModel, i5.LoadingComponent], styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-my-lists-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .lists-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-actions {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-box i.fa-search {\n      position: absolute;\n      left: 12px;\n      color: #999;\n    }\n\n    .search-box input {\n      padding: 8px 36px 8px 36px;\n      border: 1px solid #ddd;\n      border-radius: 20px;\n      font-size: 14px;\n      width: 250px;\n      transition: border-color 0.2s, box-shadow 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    .clear-search {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .clear-search:hover {\n      color: #666;\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-create:hover {\n      background: #1976D2;\n    }\n\n    /* Loading */\n    .loading-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n    }\n\n    /* Empty State */\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      padding: 48px 40px;\n      text-align: center;\n      max-width: 480px;\n      margin: 0 auto;\n    }\n\n    .empty-state-icon-wrapper {\n      position: relative;\n      margin-bottom: 24px;\n    }\n\n    .empty-state-icon-wrapper .icon-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 120px;\n      height: 120px;\n      border-radius: 50%;\n      background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 56px;\n      color: #2196F3;\n      z-index: 1;\n    }\n\n    .empty-state-icon-wrapper.search > i {\n      font-size: 48px;\n      color: #9e9e9e;\n    }\n\n    .empty-state h3 {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: #666;\n      font-size: 15px;\n      line-height: 1.5;\n    }\n\n    .empty-state p:last-of-type {\n      margin-bottom: 24px;\n    }\n\n    .empty-hint {\n      color: #999 !important;\n      font-size: 13px !important;\n    }\n\n    .empty-state-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 28px;\n      text-align: left;\n    }\n\n    .feature-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 14px;\n      color: #555;\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: #4CAF50 !important;\n    }\n\n    .search-empty .empty-state-icon-wrapper {\n      margin-bottom: 20px;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);\n      color: white;\n      border: none;\n      border-radius: 8px;\n      font-size: 15px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n    }\n\n    .btn-create-large:hover {\n      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);\n    }\n\n    .btn-clear {\n      padding: 10px 20px;\n      background: #f0f0f0;\n      border: none;\n      border-radius: 6px;\n      color: #666;\n      cursor: pointer;\n    }\n\n    .btn-clear:hover {\n      background: #e0e0e0;\n    }\n\n    /* Content */\n    .lists-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .view-controls {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .view-toggle {\n      padding: 8px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:hover {\n      background: #f5f5f5;\n    }\n\n    .view-toggle.active {\n      background: #2196F3;\n      border-color: #2196F3;\n      color: white;\n    }\n\n    .list-count {\n      margin-left: auto;\n      color: #999;\n      font-size: 14px;\n    }\n\n    /* Grid View */\n    .lists-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .list-card {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      overflow: hidden;\n      cursor: pointer;\n      transition: transform 0.2s, box-shadow 0.2s, outline 0.1s;\n      outline: 2px solid transparent;\n    }\n\n    .list-card:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n    }\n\n    .list-card:focus {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .list-card:focus:not(:focus-visible) {\n      outline: none;\n    }\n\n    .list-card:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .card-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 16px 16px 0;\n    }\n\n    .card-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 18px;\n    }\n\n    .menu-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .menu-btn:hover {\n      background: #f5f5f5;\n      color: #666;\n    }\n\n    .card-body {\n      padding: 12px 16px;\n    }\n\n    .card-title {\n      margin: 0 0 4px;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .card-description {\n      margin: 0 0 12px;\n      font-size: 13px;\n      color: #666;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .card-meta {\n      display: flex;\n      gap: 16px;\n    }\n\n    .meta-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 12px;\n      color: #999;\n    }\n\n    .card-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-top: 1px solid #f0f0f0;\n      background: #fafafa;\n    }\n\n    .category-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: #666;\n      background: #e8f4fd;\n      padding: 2px 8px;\n      border-radius: 4px;\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: #999;\n    }\n\n    /* Category Tree */\n    .category-tree {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .category-section {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .category-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .category-header:hover {\n      background: #f5f5f5;\n    }\n\n    .category-header i:first-child {\n      width: 16px;\n      text-align: center;\n      color: #999;\n    }\n\n    .category-header .fa-folder,\n    .category-header .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .category-header.uncategorized .fa-inbox {\n      color: #999;\n    }\n\n    .category-name {\n      flex: 1;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .category-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .category-lists {\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .list-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px 12px 40px;\n      cursor: pointer;\n      transition: background 0.2s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: #f5f5f5;\n    }\n\n    .list-row:focus {\n      background: #e3f2fd;\n    }\n\n    .list-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-name {\n      display: block;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .list-row:hover .action-btn {\n      opacity: 1;\n    }\n\n    .action-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Context Menu (native) */\n    .context-menu-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 999;\n    }\n\n    .context-menu {\n      position: fixed;\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n      min-width: 160px;\n      padding: 4px 0;\n      z-index: 1000;\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 10px 16px;\n      background: none;\n      border: none;\n      text-align: left;\n      font-size: 14px;\n      color: #333;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .menu-item:hover {\n      background: #f5f5f5;\n    }\n\n    .menu-item.danger {\n      color: #d32f2f;\n    }\n\n    .menu-item.danger:hover {\n      background: #ffebee;\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: #e0e0e0;\n      margin: 4px 0;\n    }\n\n    /* Modal Styles */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0, 0, 0, 0.5);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 500px;\n      max-width: 90vw;\n      max-height: 90vh;\n      overflow: hidden;\n      z-index: 1001;\n    }\n\n    .confirm-dialog {\n      width: 400px;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .modal-close:hover {\n      background: #f0f0f0;\n      color: #666;\n    }\n\n    .modal-body {\n      padding: 20px;\n      max-height: 60vh;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0 0 8px;\n      color: #333;\n    }\n\n    .warning-text {\n      color: #d32f2f !important;\n      font-size: 13px;\n    }\n\n    .modal-footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: white;\n      color: #666;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n    }\n\n    .btn-danger {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #d32f2f;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-danger:hover:not(:disabled) {\n      background: #c62828;\n    }\n\n    /* Form Styles */\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group:last-child {\n      margin-bottom: 0;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      transition: border-color 0.2s, box-shadow 0.2s;\n      box-sizing: border-box;\n    }\n\n    .form-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    .form-input:disabled {\n      background: #f5f5f5;\n      color: #999;\n    }\n\n    textarea.form-input {\n      resize: vertical;\n      min-height: 80px;\n    }\n\n    select.form-input {\n      cursor: pointer;\n    }\n\n    .custom-select-wrapper {\n      position: relative;\n    }\n\n    /* Portal Dropdown - Fixed positioning to escape modal z-index */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002; /* Above modal (1001) */\n    }\n\n    .entity-dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n    }\n\n    .entity-dropdown-content {\n      max-height: 200px;\n      overflow-y: auto;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    .entity-dropdown-content.open-above {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .dropdown-item {\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .dropdown-item:hover {\n      background: #e3f2fd;\n    }\n\n    .dropdown-item:first-child {\n      border-radius: 6px 6px 0 0;\n    }\n\n    .dropdown-item:last-child {\n      border-radius: 0 0 6px 6px;\n    }\n\n    .dropdown-empty {\n      padding: 10px 12px;\n      color: #999;\n      font-style: italic;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .lists-header {\n        flex-direction: column;\n        gap: 16px;\n        align-items: stretch;\n      }\n\n      .header-actions {\n        flex-direction: column;\n      }\n\n      .search-box input {\n        width: 100%;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .lists-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "], encapsulation: 2 });
 };
 ListsMyListsResource = __decorate([
     RegisterClass(BaseResourceComponent, 'ListsMyListsResource')
@@ -1103,7 +1107,7 @@ ListsMyListsResource = __decorate([
 export { ListsMyListsResource };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListsMyListsResource, [{
         type: Component,
-        args: [{ selector: 'mj-lists-my-lists-resource', template: `
+        args: [{ standalone: false, selector: 'mj-lists-my-lists-resource', template: `
     <div class="lists-my-lists-container">
       <!-- Header -->
       <div class="lists-header">
@@ -1119,9 +1123,11 @@ export { ListsMyListsResource };
               placeholder="Search lists..."
               [(ngModel)]="searchTerm"
               (ngModelChange)="onSearchChange($event)" />
-            <button *ngIf="searchTerm" class="clear-search" (click)="clearSearch()">
-              <i class="fa-solid fa-times"></i>
-            </button>
+            @if (searchTerm) {
+              <button class="clear-search" (click)="clearSearch()">
+                <i class="fa-solid fa-times"></i>
+              </button>
+            }
           </div>
           <button class="btn-create" (click)="createNewList()">
             <i class="fa-solid fa-plus"></i>
@@ -1129,308 +1135,350 @@ export { ListsMyListsResource };
           </button>
         </div>
       </div>
-
+    
       <!-- Loading State -->
-      <div class="loading-container" *ngIf="isLoading">
-        <mj-loading text="Loading lists..." size="medium"></mj-loading>
-      </div>
-
-      <!-- Empty State -->
-      <div class="empty-state" *ngIf="!isLoading && filteredLists.length === 0 && !searchTerm">
-        <div class="empty-state-icon-wrapper">
-          <div class="icon-bg"></div>
-          <i class="fa-solid fa-list-check"></i>
+      @if (isLoading) {
+        <div class="loading-container">
+          <mj-loading text="Loading lists..." size="medium"></mj-loading>
         </div>
-        <h3>No Lists Yet</h3>
-        <p>Lists help you organize and track groups of records across your data.</p>
-        <div class="empty-state-features">
-          <div class="feature-item">
-            <i class="fa-solid fa-check-circle"></i>
-            <span>Group records from any entity</span>
-          </div>
-          <div class="feature-item">
-            <i class="fa-solid fa-check-circle"></i>
-            <span>Organize with categories</span>
+      }
+    
+      <!-- Empty State -->
+      @if (!isLoading && filteredLists.length === 0 && !searchTerm) {
+        <div class="empty-state">
+          <div class="empty-state-icon-wrapper">
+            <div class="icon-bg"></div>
+            <i class="fa-solid fa-list-check"></i>
           </div>
-          <div class="feature-item">
-            <i class="fa-solid fa-check-circle"></i>
-            <span>Quick access from any view</span>
+          <h3>No Lists Yet</h3>
+          <p>Lists help you organize and track groups of records across your data.</p>
+          <div class="empty-state-features">
+            <div class="feature-item">
+              <i class="fa-solid fa-check-circle"></i>
+              <span>Group records from any entity</span>
+            </div>
+            <div class="feature-item">
+              <i class="fa-solid fa-check-circle"></i>
+              <span>Organize with categories</span>
+            </div>
+            <div class="feature-item">
+              <i class="fa-solid fa-check-circle"></i>
+              <span>Quick access from any view</span>
+            </div>
           </div>
+          <button class="btn-create-large" (click)="createNewList()">
+            <i class="fa-solid fa-plus"></i>
+            Create Your First List
+          </button>
         </div>
-        <button class="btn-create-large" (click)="createNewList()">
-          <i class="fa-solid fa-plus"></i>
-          Create Your First List
-        </button>
-      </div>
-
+      }
+    
       <!-- No Results State -->
-      <div class="empty-state search-empty" *ngIf="!isLoading && filteredLists.length === 0 && searchTerm">
-        <div class="empty-state-icon-wrapper search">
-          <i class="fa-solid fa-search"></i>
+      @if (!isLoading && filteredLists.length === 0 && searchTerm) {
+        <div class="empty-state search-empty">
+          <div class="empty-state-icon-wrapper search">
+            <i class="fa-solid fa-search"></i>
+          </div>
+          <h3>No Results Found</h3>
+          <p>No lists match "<strong>{{searchTerm}}</strong>"</p>
+          <p class="empty-hint">Try a different search term or clear your search.</p>
+          <button class="btn-clear" (click)="clearSearch()">Clear Search</button>
         </div>
-        <h3>No Results Found</h3>
-        <p>No lists match "<strong>{{searchTerm}}</strong>"</p>
-        <p class="empty-hint">Try a different search term or clear your search.</p>
-        <button class="btn-clear" (click)="clearSearch()">Clear Search</button>
-      </div>
-
+      }
+    
       <!-- Lists Grid -->
-      <div class="lists-content" *ngIf="!isLoading && filteredLists.length > 0">
-        <!-- View Toggle -->
-        <div class="view-controls">
-          <button
-            class="view-toggle"
-            [class.active]="viewMode === 'grid'"
-            (click)="viewMode = 'grid'"
-            title="Grid view">
-            <i class="fa-solid fa-grip"></i>
-          </button>
-          <button
-            class="view-toggle"
-            [class.active]="viewMode === 'list'"
-            (click)="viewMode = 'list'"
-            title="List view">
-            <i class="fa-solid fa-list"></i>
-          </button>
-          <span class="list-count">{{filteredLists.length}} list{{filteredLists.length !== 1 ? 's' : ''}}</span>
-        </div>
-
-        <!-- Category Tree View -->
-        <div class="category-tree" *ngIf="viewMode === 'list'">
-          <ng-container *ngFor="let node of categoryTree">
-            <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { node: node, depth: 0 }"></ng-container>
-          </ng-container>
-        </div>
-
-        <!-- Grid View -->
-        <div class="lists-grid" *ngIf="viewMode === 'grid'" role="list" aria-label="My Lists">
-          <div
-            class="list-card"
-            *ngFor="let item of filteredLists"
-            (click)="openList(item.list)"
-            (keydown.enter)="openList(item.list)"
-            (keydown.space)="openList(item.list); $event.preventDefault()"
-            tabindex="0"
-            role="listitem"
-            [attr.aria-label]="item.list.Name + ' - ' + item.entityName + ' - ' + item.itemCount + ' items'">
-            <div class="card-header">
-              <div class="card-icon" [style.background-color]="getEntityColor(item.list.Entity)" aria-hidden="true">
-                <i [class]="getEntityIcon(item.list.Entity)"></i>
-              </div>
-              <div class="card-menu">
-                <button class="menu-btn" (click)="openListMenu($event, item.list)" [attr.aria-label]="'More options for ' + item.list.Name">
-                  <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
-                </button>
-              </div>
-            </div>
-            <div class="card-body">
-              <h3 class="card-title">{{item.list.Name}}</h3>
-              <p class="card-description" *ngIf="item.list.Description">{{item.list.Description}}</p>
-              <div class="card-meta">
-                <span class="meta-item">
-                  <i class="fa-solid fa-database"></i>
-                  {{item.entityName}}
-                </span>
-                <span class="meta-item">
-                  <i class="fa-solid fa-hashtag"></i>
-                  {{item.itemCount}} item{{item.itemCount !== 1 ? 's' : ''}}
-                </span>
-              </div>
+      @if (!isLoading && filteredLists.length > 0) {
+        <div class="lists-content">
+          <!-- View Toggle -->
+          <div class="view-controls">
+            <button
+              class="view-toggle"
+              [class.active]="viewMode === 'grid'"
+              (click)="viewMode = 'grid'"
+              title="Grid view">
+              <i class="fa-solid fa-grip"></i>
+            </button>
+            <button
+              class="view-toggle"
+              [class.active]="viewMode === 'list'"
+              (click)="viewMode = 'list'"
+              title="List view">
+              <i class="fa-solid fa-list"></i>
+            </button>
+            <span class="list-count">{{filteredLists.length}} list{{filteredLists.length !== 1 ? 's' : ''}}</span>
+          </div>
+          <!-- Category Tree View -->
+          @if (viewMode === 'list') {
+            <div class="category-tree">
+              @for (node of categoryTree; track node) {
+                <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { node: node, depth: 0 }"></ng-container>
+              }
             </div>
-            <div class="card-footer">
-              <span class="category-tag" *ngIf="item.list.CategoryID">
-                <i class="fa-solid fa-folder"></i>
-                {{getCategoryName(item.list.CategoryID)}}
-              </span>
-              <span class="date-info">Updated {{formatDate(item.list.__mj_UpdatedAt)}}</span>
+          }
+          <!-- Grid View -->
+          @if (viewMode === 'grid') {
+            <div class="lists-grid" role="list" aria-label="My Lists">
+              @for (item of filteredLists; track item) {
+                <div
+                  class="list-card"
+                  (click)="openList(item.list)"
+                  (keydown.enter)="openList(item.list)"
+                  (keydown.space)="openList(item.list); $event.preventDefault()"
+                  tabindex="0"
+                  role="listitem"
+                  [attr.aria-label]="item.list.Name + ' - ' + item.entityName + ' - ' + item.itemCount + ' items'">
+                  <div class="card-header">
+                    <div class="card-icon" [style.background-color]="getEntityColor(item.list.Entity)" aria-hidden="true">
+                      <i [class]="getEntityIcon(item.list.Entity)"></i>
+                    </div>
+                    <div class="card-menu">
+                      <button class="menu-btn" (click)="openListMenu($event, item.list)" [attr.aria-label]="'More options for ' + item.list.Name">
+                        <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <div class="card-body">
+                    <h3 class="card-title">{{item.list.Name}}</h3>
+                    @if (item.list.Description) {
+                      <p class="card-description">{{item.list.Description}}</p>
+                    }
+                    <div class="card-meta">
+                      <span class="meta-item">
+                        <i class="fa-solid fa-database"></i>
+                        {{item.entityName}}
+                      </span>
+                      <span class="meta-item">
+                        <i class="fa-solid fa-hashtag"></i>
+                        {{item.itemCount}} item{{item.itemCount !== 1 ? 's' : ''}}
+                      </span>
+                    </div>
+                  </div>
+                  <div class="card-footer">
+                    @if (item.list.CategoryID) {
+                      <span class="category-tag">
+                        <i class="fa-solid fa-folder"></i>
+                        {{getCategoryName(item.list.CategoryID)}}
+                      </span>
+                    }
+                    <span class="date-info">Updated {{formatDate(item.list.__mj_UpdatedAt)}}</span>
+                  </div>
+                </div>
+              }
             </div>
-          </div>
+          }
         </div>
-      </div>
-
+      }
+    
       <!-- Category Node Template -->
       <ng-template #categoryNodeTemplate let-node="node" let-depth="depth">
         <div class="category-section" [style.margin-left.px]="depth * 20">
           <!-- Category Header -->
-          <div
-            class="category-header"
-            *ngIf="node.category"
-            (click)="toggleCategory(node)">
-            <i [class]="node.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'"></i>
-            <i class="fa-solid fa-folder" [class.fa-folder-open]="node.isExpanded"></i>
-            <span class="category-name">{{node.category.Name}}</span>
-            <span class="category-count">{{getListCountInCategory(node)}}</span>
-          </div>
-
+          @if (node.category) {
+            <div
+              class="category-header"
+              (click)="toggleCategory(node)">
+              <i [class]="node.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'"></i>
+              <i class="fa-solid fa-folder" [class.fa-folder-open]="node.isExpanded"></i>
+              <span class="category-name">{{node.category.Name}}</span>
+              <span class="category-count">{{getListCountInCategory(node)}}</span>
+            </div>
+          }
+    
           <!-- Uncategorized Header -->
-          <div
-            class="category-header uncategorized"
-            *ngIf="!node.category && node.lists.length > 0"
-            (click)="toggleCategory(node)">
-            <i [class]="node.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'"></i>
-            <i class="fa-solid fa-inbox"></i>
-            <span class="category-name">Uncategorized</span>
-            <span class="category-count">{{node.lists.length}}</span>
-          </div>
-
-          <!-- Lists in this category -->
-          <div class="category-lists" *ngIf="node.isExpanded" role="list">
+          @if (!node.category && node.lists.length > 0) {
             <div
-              class="list-row"
-              *ngFor="let item of node.lists"
-              (click)="openList(item.list)"
-              (keydown.enter)="openList(item.list)"
-              (keydown.space)="openList(item.list); $event.preventDefault()"
-              tabindex="0"
-              role="listitem"
-              [attr.aria-label]="item.list.Name + ' - ' + item.entityName + ' - ' + item.itemCount + ' items'">
-              <div class="list-icon" [style.background-color]="getEntityColor(item.list.Entity)" aria-hidden="true">
-                <i [class]="getEntityIcon(item.list.Entity)"></i>
-              </div>
-              <div class="list-info">
-                <span class="list-name">{{item.list.Name}}</span>
-                <span class="list-meta">{{item.entityName}} &middot; {{item.itemCount}} items</span>
-              </div>
-              <div class="list-actions">
-                <button class="action-btn" (click)="openListMenu($event, item.list)" [attr.aria-label]="'More options for ' + item.list.Name">
-                  <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
-                </button>
-              </div>
+              class="category-header uncategorized"
+              (click)="toggleCategory(node)">
+              <i [class]="node.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'"></i>
+              <i class="fa-solid fa-inbox"></i>
+              <span class="category-name">Uncategorized</span>
+              <span class="category-count">{{node.lists.length}}</span>
             </div>
-          </div>
-
+          }
+    
+          <!-- Lists in this category -->
+          @if (node.isExpanded) {
+            <div class="category-lists" role="list">
+              @for (item of node.lists; track item) {
+                <div
+                  class="list-row"
+                  (click)="openList(item.list)"
+                  (keydown.enter)="openList(item.list)"
+                  (keydown.space)="openList(item.list); $event.preventDefault()"
+                  tabindex="0"
+                  role="listitem"
+                  [attr.aria-label]="item.list.Name + ' - ' + item.entityName + ' - ' + item.itemCount + ' items'">
+                  <div class="list-icon" [style.background-color]="getEntityColor(item.list.Entity)" aria-hidden="true">
+                    <i [class]="getEntityIcon(item.list.Entity)"></i>
+                  </div>
+                  <div class="list-info">
+                    <span class="list-name">{{item.list.Name}}</span>
+                    <span class="list-meta">{{item.entityName}} &middot; {{item.itemCount}} items</span>
+                  </div>
+                  <div class="list-actions">
+                    <button class="action-btn" (click)="openListMenu($event, item.list)" [attr.aria-label]="'More options for ' + item.list.Name">
+                      <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
+                    </button>
+                  </div>
+                </div>
+              }
+            </div>
+          }
+    
           <!-- Child categories -->
-          <ng-container *ngIf="node.isExpanded">
-            <ng-container *ngFor="let child of node.children">
+          @if (node.isExpanded) {
+            @for (child of node.children; track child) {
               <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { node: child, depth: depth + 1 }"></ng-container>
-            </ng-container>
-          </ng-container>
+            }
+          }
         </div>
       </ng-template>
-
+    
       <!-- Context Menu (native) -->
-      <div class="context-menu-overlay" *ngIf="showContextMenu" (click)="closeContextMenu()"></div>
-      <div class="context-menu" *ngIf="showContextMenu" [style.top.px]="contextMenuY" [style.left.px]="contextMenuX">
-        <button class="menu-item" (click)="editList()">
-          <i class="fa-solid fa-pen"></i>
-          Edit
-        </button>
-        <button class="menu-item" (click)="duplicateList()">
-          <i class="fa-solid fa-copy"></i>
-          Duplicate
-        </button>
-        <div class="menu-divider"></div>
-        <button class="menu-item danger" (click)="confirmDeleteList()">
-          <i class="fa-solid fa-trash"></i>
-          Delete
-        </button>
-      </div>
-
-      <!-- Create/Edit List Dialog (native modal) -->
-      <div class="modal-overlay" *ngIf="showCreateDialog" (click)="closeCreateDialog()"></div>
-      <div class="modal-dialog" *ngIf="showCreateDialog">
-        <div class="modal-header">
-          <h3>{{editingList ? 'Edit List' : 'Create New List'}}</h3>
-          <button class="modal-close" (click)="closeCreateDialog()">
-            <i class="fa-solid fa-times"></i>
+      @if (showContextMenu) {
+        <div class="context-menu-overlay" (click)="closeContextMenu()"></div>
+      }
+      @if (showContextMenu) {
+        <div class="context-menu" [style.top.px]="contextMenuY" [style.left.px]="contextMenuX">
+          <button class="menu-item" (click)="editList()">
+            <i class="fa-solid fa-pen"></i>
+            Edit
+          </button>
+          <button class="menu-item" (click)="duplicateList()">
+            <i class="fa-solid fa-copy"></i>
+            Duplicate
+          </button>
+          <div class="menu-divider"></div>
+          <button class="menu-item danger" (click)="confirmDeleteList()">
+            <i class="fa-solid fa-trash"></i>
+            Delete
           </button>
         </div>
-        <div class="modal-body">
-          <div class="form-group">
-            <label>Name *</label>
-            <input
-              type="text"
-              [(ngModel)]="newListName"
-              placeholder="Enter list name"
-              class="form-input" />
-          </div>
-          <div class="form-group">
-            <label>Description</label>
-            <textarea
-              [(ngModel)]="newListDescription"
-              placeholder="Optional description"
-              class="form-input"
-              rows="3"></textarea>
+      }
+    
+      <!-- Create/Edit List Dialog (native modal) -->
+      @if (showCreateDialog) {
+        <div class="modal-overlay" (click)="closeCreateDialog()"></div>
+      }
+      @if (showCreateDialog) {
+        <div class="modal-dialog">
+          <div class="modal-header">
+            <h3>{{editingList ? 'Edit List' : 'Create New List'}}</h3>
+            <button class="modal-close" (click)="closeCreateDialog()">
+              <i class="fa-solid fa-times"></i>
+            </button>
           </div>
-          <div class="form-group">
-            <label>Entity *</label>
-            <div class="custom-select-wrapper">
+          <div class="modal-body">
+            <div class="form-group">
+              <label>Name *</label>
               <input
-                #entityInput
                 type="text"
-                [(ngModel)]="entitySearchTerm"
-                (ngModelChange)="filterEntities($event)"
-                (focus)="openEntityDropdown(entityInput)"
-                placeholder="Search and select an entity"
+                [(ngModel)]="newListName"
+                placeholder="Enter list name"
+                class="form-input" />
+            </div>
+            <div class="form-group">
+              <label>Description</label>
+              <textarea
+                [(ngModel)]="newListDescription"
+                placeholder="Optional description"
                 class="form-input"
-                [disabled]="!!editingList" />
+              rows="3"></textarea>
+            </div>
+            <div class="form-group">
+              <label>Entity *</label>
+              <div class="custom-select-wrapper">
+                <input
+                  #entityInput
+                  type="text"
+                  [(ngModel)]="entitySearchTerm"
+                  (ngModelChange)="filterEntities($event)"
+                  (focus)="openEntityDropdown(entityInput)"
+                  placeholder="Search and select an entity"
+                  class="form-input"
+                  [disabled]="!!editingList" />
+              </div>
+            </div>
+            <div class="form-group">
+              <label>Category</label>
+              <select [(ngModel)]="selectedCategoryId" class="form-input">
+                <option [ngValue]="null">No category</option>
+                @for (cat of flatCategories; track cat) {
+                  <option [ngValue]="cat.ID">{{cat.displayName}}</option>
+                }
+              </select>
             </div>
           </div>
-          <div class="form-group">
-            <label>Category</label>
-            <select [(ngModel)]="selectedCategoryId" class="form-input">
-              <option [ngValue]="null">No category</option>
-              <option *ngFor="let cat of flatCategories" [ngValue]="cat.ID">{{cat.displayName}}</option>
-            </select>
+          <div class="modal-footer">
+            <button
+              class="btn-primary"
+              (click)="saveList()"
+              [disabled]="!newListName || !selectedEntityId || isSaving">
+              @if (isSaving) {
+                <i class="fa-solid fa-spinner fa-spin"></i>
+              }
+              {{isSaving ? 'Saving...' : (editingList ? 'Save' : 'Create')}}
+            </button>
+            <button class="btn-secondary" (click)="closeCreateDialog()" [disabled]="isSaving">Cancel</button>
           </div>
         </div>
-        <div class="modal-footer">
-          <button
-            class="btn-primary"
-            (click)="saveList()"
-            [disabled]="!newListName || !selectedEntityId || isSaving">
-            <i *ngIf="isSaving" class="fa-solid fa-spinner fa-spin"></i>
-            {{isSaving ? 'Saving...' : (editingList ? 'Save' : 'Create')}}
-          </button>
-          <button class="btn-secondary" (click)="closeCreateDialog()" [disabled]="isSaving">Cancel</button>
-        </div>
-      </div>
-
+      }
+    
       <!-- Delete Confirmation Dialog -->
-      <div class="modal-overlay" *ngIf="showDeleteConfirm" (click)="cancelDelete()"></div>
-      <div class="modal-dialog confirm-dialog" *ngIf="showDeleteConfirm">
-        <div class="modal-header">
-          <h3>Delete List</h3>
-          <button class="modal-close" (click)="cancelDelete()">
-            <i class="fa-solid fa-times"></i>
-          </button>
-        </div>
-        <div class="modal-body">
-          <p>Are you sure you want to delete "<strong>{{deleteListName}}</strong>"?</p>
-          <p class="warning-text">This will also remove all items in the list.</p>
-        </div>
-        <div class="modal-footer">
-          <button class="btn-danger" (click)="deleteList()">
-            <i *ngIf="isDeleting" class="fa-solid fa-spinner fa-spin"></i>
-            {{isDeleting ? 'Deleting...' : 'Delete'}}
-          </button>
-          <button class="btn-secondary" (click)="cancelDelete()">Cancel</button>
+      @if (showDeleteConfirm) {
+        <div class="modal-overlay" (click)="cancelDelete()"></div>
+      }
+      @if (showDeleteConfirm) {
+        <div class="modal-dialog confirm-dialog">
+          <div class="modal-header">
+            <h3>Delete List</h3>
+            <button class="modal-close" (click)="cancelDelete()">
+              <i class="fa-solid fa-times"></i>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p>Are you sure you want to delete "<strong>{{deleteListName}}</strong>"?</p>
+            <p class="warning-text">This will also remove all items in the list.</p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn-danger" (click)="deleteList()">
+              @if (isDeleting) {
+                <i class="fa-solid fa-spinner fa-spin"></i>
+              }
+              {{isDeleting ? 'Deleting...' : 'Delete'}}
+            </button>
+            <button class="btn-secondary" (click)="cancelDelete()">Cancel</button>
+          </div>
         </div>
-      </div>
-
+      }
+    
       <!-- Entity Dropdown Portal (fixed positioning) -->
-      <div
-        class="entity-dropdown-portal"
-        *ngIf="showEntityDropdown && !editingList"
-        [style.top.px]="entityDropdownPosition.top"
-        [style.left.px]="entityDropdownPosition.left"
-        [style.width.px]="entityDropdownPosition.width"
-        [class.dropdown-above]="entityDropdownPosition.openAbove">
-        <div class="entity-dropdown-backdrop" (click)="closeEntityDropdown()"></div>
-        <div class="entity-dropdown-content" [class.open-above]="entityDropdownPosition.openAbove">
-          <div
-            class="dropdown-item"
-            *ngFor="let entity of filteredEntities"
-            (click)="selectEntity(entity)">
-            {{entity.Name}}
-          </div>
-          <div class="dropdown-empty" *ngIf="filteredEntities.length === 0">
-            No entities found
+      @if (showEntityDropdown && !editingList) {
+        <div
+          class="entity-dropdown-portal"
+          [style.top.px]="entityDropdownPosition.top"
+          [style.left.px]="entityDropdownPosition.left"
+          [style.width.px]="entityDropdownPosition.width"
+          [class.dropdown-above]="entityDropdownPosition.openAbove">
+          <div class="entity-dropdown-backdrop" (click)="closeEntityDropdown()"></div>
+          <div class="entity-dropdown-content" [class.open-above]="entityDropdownPosition.openAbove">
+            @for (entity of filteredEntities; track entity) {
+              <div
+                class="dropdown-item"
+                (click)="selectEntity(entity)">
+                {{entity.Name}}
+              </div>
+            }
+            @if (filteredEntities.length === 0) {
+              <div class="dropdown-empty">
+                No entities found
+              </div>
+            }
           </div>
         </div>
-      </div>
+      }
     </div>
-  `, encapsulation: ViewEncapsulation.None, styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-my-lists-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .lists-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-actions {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-box i.fa-search {\n      position: absolute;\n      left: 12px;\n      color: #999;\n    }\n\n    .search-box input {\n      padding: 8px 36px 8px 36px;\n      border: 1px solid #ddd;\n      border-radius: 20px;\n      font-size: 14px;\n      width: 250px;\n      transition: border-color 0.2s, box-shadow 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    .clear-search {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .clear-search:hover {\n      color: #666;\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-create:hover {\n      background: #1976D2;\n    }\n\n    /* Loading */\n    .loading-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n    }\n\n    /* Empty State */\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      padding: 48px 40px;\n      text-align: center;\n      max-width: 480px;\n      margin: 0 auto;\n    }\n\n    .empty-state-icon-wrapper {\n      position: relative;\n      margin-bottom: 24px;\n    }\n\n    .empty-state-icon-wrapper .icon-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 120px;\n      height: 120px;\n      border-radius: 50%;\n      background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 56px;\n      color: #2196F3;\n      z-index: 1;\n    }\n\n    .empty-state-icon-wrapper.search > i {\n      font-size: 48px;\n      color: #9e9e9e;\n    }\n\n    .empty-state h3 {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: #666;\n      font-size: 15px;\n      line-height: 1.5;\n    }\n\n    .empty-state p:last-of-type {\n      margin-bottom: 24px;\n    }\n\n    .empty-hint {\n      color: #999 !important;\n      font-size: 13px !important;\n    }\n\n    .empty-state-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 28px;\n      text-align: left;\n    }\n\n    .feature-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 14px;\n      color: #555;\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: #4CAF50 !important;\n    }\n\n    .search-empty .empty-state-icon-wrapper {\n      margin-bottom: 20px;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);\n      color: white;\n      border: none;\n      border-radius: 8px;\n      font-size: 15px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n    }\n\n    .btn-create-large:hover {\n      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);\n    }\n\n    .btn-clear {\n      padding: 10px 20px;\n      background: #f0f0f0;\n      border: none;\n      border-radius: 6px;\n      color: #666;\n      cursor: pointer;\n    }\n\n    .btn-clear:hover {\n      background: #e0e0e0;\n    }\n\n    /* Content */\n    .lists-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .view-controls {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .view-toggle {\n      padding: 8px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:hover {\n      background: #f5f5f5;\n    }\n\n    .view-toggle.active {\n      background: #2196F3;\n      border-color: #2196F3;\n      color: white;\n    }\n\n    .list-count {\n      margin-left: auto;\n      color: #999;\n      font-size: 14px;\n    }\n\n    /* Grid View */\n    .lists-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .list-card {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      overflow: hidden;\n      cursor: pointer;\n      transition: transform 0.2s, box-shadow 0.2s, outline 0.1s;\n      outline: 2px solid transparent;\n    }\n\n    .list-card:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n    }\n\n    .list-card:focus {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .list-card:focus:not(:focus-visible) {\n      outline: none;\n    }\n\n    .list-card:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .card-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 16px 16px 0;\n    }\n\n    .card-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 18px;\n    }\n\n    .menu-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .menu-btn:hover {\n      background: #f5f5f5;\n      color: #666;\n    }\n\n    .card-body {\n      padding: 12px 16px;\n    }\n\n    .card-title {\n      margin: 0 0 4px;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .card-description {\n      margin: 0 0 12px;\n      font-size: 13px;\n      color: #666;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .card-meta {\n      display: flex;\n      gap: 16px;\n    }\n\n    .meta-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 12px;\n      color: #999;\n    }\n\n    .card-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-top: 1px solid #f0f0f0;\n      background: #fafafa;\n    }\n\n    .category-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: #666;\n      background: #e8f4fd;\n      padding: 2px 8px;\n      border-radius: 4px;\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: #999;\n    }\n\n    /* Category Tree */\n    .category-tree {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .category-section {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .category-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .category-header:hover {\n      background: #f5f5f5;\n    }\n\n    .category-header i:first-child {\n      width: 16px;\n      text-align: center;\n      color: #999;\n    }\n\n    .category-header .fa-folder,\n    .category-header .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .category-header.uncategorized .fa-inbox {\n      color: #999;\n    }\n\n    .category-name {\n      flex: 1;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .category-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .category-lists {\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .list-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px 12px 40px;\n      cursor: pointer;\n      transition: background 0.2s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: #f5f5f5;\n    }\n\n    .list-row:focus {\n      background: #e3f2fd;\n    }\n\n    .list-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-name {\n      display: block;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .list-row:hover .action-btn {\n      opacity: 1;\n    }\n\n    .action-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Context Menu (native) */\n    .context-menu-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 999;\n    }\n\n    .context-menu {\n      position: fixed;\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n      min-width: 160px;\n      padding: 4px 0;\n      z-index: 1000;\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 10px 16px;\n      background: none;\n      border: none;\n      text-align: left;\n      font-size: 14px;\n      color: #333;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .menu-item:hover {\n      background: #f5f5f5;\n    }\n\n    .menu-item.danger {\n      color: #d32f2f;\n    }\n\n    .menu-item.danger:hover {\n      background: #ffebee;\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: #e0e0e0;\n      margin: 4px 0;\n    }\n\n    /* Modal Styles */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0, 0, 0, 0.5);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 500px;\n      max-width: 90vw;\n      max-height: 90vh;\n      overflow: hidden;\n      z-index: 1001;\n    }\n\n    .confirm-dialog {\n      width: 400px;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .modal-close:hover {\n      background: #f0f0f0;\n      color: #666;\n    }\n\n    .modal-body {\n      padding: 20px;\n      max-height: 60vh;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0 0 8px;\n      color: #333;\n    }\n\n    .warning-text {\n      color: #d32f2f !important;\n      font-size: 13px;\n    }\n\n    .modal-footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: white;\n      color: #666;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n    }\n\n    .btn-danger {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #d32f2f;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-danger:hover:not(:disabled) {\n      background: #c62828;\n    }\n\n    /* Form Styles */\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group:last-child {\n      margin-bottom: 0;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      transition: border-color 0.2s, box-shadow 0.2s;\n      box-sizing: border-box;\n    }\n\n    .form-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    .form-input:disabled {\n      background: #f5f5f5;\n      color: #999;\n    }\n\n    textarea.form-input {\n      resize: vertical;\n      min-height: 80px;\n    }\n\n    select.form-input {\n      cursor: pointer;\n    }\n\n    .custom-select-wrapper {\n      position: relative;\n    }\n\n    /* Portal Dropdown - Fixed positioning to escape modal z-index */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002; /* Above modal (1001) */\n    }\n\n    .entity-dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n    }\n\n    .entity-dropdown-content {\n      max-height: 200px;\n      overflow-y: auto;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    .entity-dropdown-content.open-above {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .dropdown-item {\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .dropdown-item:hover {\n      background: #e3f2fd;\n    }\n\n    .dropdown-item:first-child {\n      border-radius: 6px 6px 0 0;\n    }\n\n    .dropdown-item:last-child {\n      border-radius: 0 0 6px 6px;\n    }\n\n    .dropdown-empty {\n      padding: 10px 12px;\n      color: #999;\n      font-style: italic;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .lists-header {\n        flex-direction: column;\n        gap: 16px;\n        align-items: stretch;\n      }\n\n      .header-actions {\n        flex-direction: column;\n      }\n\n      .search-box input {\n        width: 100%;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .lists-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "] }]
+    `, encapsulation: ViewEncapsulation.None, styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-my-lists-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .lists-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .header-actions {\n      display: flex;\n      align-items: center;\n      gap: 16px;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n    }\n\n    .search-box i.fa-search {\n      position: absolute;\n      left: 12px;\n      color: #999;\n    }\n\n    .search-box input {\n      padding: 8px 36px 8px 36px;\n      border: 1px solid #ddd;\n      border-radius: 20px;\n      font-size: 14px;\n      width: 250px;\n      transition: border-color 0.2s, box-shadow 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    .clear-search {\n      position: absolute;\n      right: 8px;\n      background: none;\n      border: none;\n      color: #999;\n      cursor: pointer;\n      padding: 4px;\n    }\n\n    .clear-search:hover {\n      color: #666;\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-create:hover {\n      background: #1976D2;\n    }\n\n    /* Loading */\n    .loading-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n    }\n\n    /* Empty State */\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      padding: 48px 40px;\n      text-align: center;\n      max-width: 480px;\n      margin: 0 auto;\n    }\n\n    .empty-state-icon-wrapper {\n      position: relative;\n      margin-bottom: 24px;\n    }\n\n    .empty-state-icon-wrapper .icon-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 120px;\n      height: 120px;\n      border-radius: 50%;\n      background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 56px;\n      color: #2196F3;\n      z-index: 1;\n    }\n\n    .empty-state-icon-wrapper.search > i {\n      font-size: 48px;\n      color: #9e9e9e;\n    }\n\n    .empty-state h3 {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: #666;\n      font-size: 15px;\n      line-height: 1.5;\n    }\n\n    .empty-state p:last-of-type {\n      margin-bottom: 24px;\n    }\n\n    .empty-hint {\n      color: #999 !important;\n      font-size: 13px !important;\n    }\n\n    .empty-state-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin-bottom: 28px;\n      text-align: left;\n    }\n\n    .feature-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 14px;\n      color: #555;\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: #4CAF50 !important;\n    }\n\n    .search-empty .empty-state-icon-wrapper {\n      margin-bottom: 20px;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);\n      color: white;\n      border: none;\n      border-radius: 8px;\n      font-size: 15px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n    }\n\n    .btn-create-large:hover {\n      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);\n    }\n\n    .btn-clear {\n      padding: 10px 20px;\n      background: #f0f0f0;\n      border: none;\n      border-radius: 6px;\n      color: #666;\n      cursor: pointer;\n    }\n\n    .btn-clear:hover {\n      background: #e0e0e0;\n    }\n\n    /* Content */\n    .lists-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .view-controls {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      margin-bottom: 16px;\n    }\n\n    .view-toggle {\n      padding: 8px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:hover {\n      background: #f5f5f5;\n    }\n\n    .view-toggle.active {\n      background: #2196F3;\n      border-color: #2196F3;\n      color: white;\n    }\n\n    .list-count {\n      margin-left: auto;\n      color: #999;\n      font-size: 14px;\n    }\n\n    /* Grid View */\n    .lists-grid {\n      display: grid;\n      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n      gap: 16px;\n    }\n\n    .list-card {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      overflow: hidden;\n      cursor: pointer;\n      transition: transform 0.2s, box-shadow 0.2s, outline 0.1s;\n      outline: 2px solid transparent;\n    }\n\n    .list-card:hover {\n      transform: translateY(-2px);\n      box-shadow: 0 4px 12px rgba(0,0,0,0.12);\n    }\n\n    .list-card:focus {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .list-card:focus:not(:focus-visible) {\n      outline: none;\n    }\n\n    .list-card:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: 2px;\n    }\n\n    .card-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-start;\n      padding: 16px 16px 0;\n    }\n\n    .card-icon {\n      width: 40px;\n      height: 40px;\n      border-radius: 8px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 18px;\n    }\n\n    .menu-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .menu-btn:hover {\n      background: #f5f5f5;\n      color: #666;\n    }\n\n    .card-body {\n      padding: 12px 16px;\n    }\n\n    .card-title {\n      margin: 0 0 4px;\n      font-size: 16px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .card-description {\n      margin: 0 0 12px;\n      font-size: 13px;\n      color: #666;\n      display: -webkit-box;\n      -webkit-line-clamp: 2;\n      -webkit-box-orient: vertical;\n      overflow: hidden;\n    }\n\n    .card-meta {\n      display: flex;\n      gap: 16px;\n    }\n\n    .meta-item {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n      font-size: 12px;\n      color: #999;\n    }\n\n    .card-footer {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-top: 1px solid #f0f0f0;\n      background: #fafafa;\n    }\n\n    .category-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: #666;\n      background: #e8f4fd;\n      padding: 2px 8px;\n      border-radius: 4px;\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: #999;\n    }\n\n    /* Category Tree */\n    .category-tree {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n    }\n\n    .category-section {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .category-header {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 12px 16px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .category-header:hover {\n      background: #f5f5f5;\n    }\n\n    .category-header i:first-child {\n      width: 16px;\n      text-align: center;\n      color: #999;\n    }\n\n    .category-header .fa-folder,\n    .category-header .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .category-header.uncategorized .fa-inbox {\n      color: #999;\n    }\n\n    .category-name {\n      flex: 1;\n      font-weight: 500;\n      color: #333;\n    }\n\n    .category-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .category-lists {\n      border-top: 1px solid #f0f0f0;\n    }\n\n    .list-row {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      padding: 12px 16px 12px 40px;\n      cursor: pointer;\n      transition: background 0.2s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: #f5f5f5;\n    }\n\n    .list-row:focus {\n      background: #e3f2fd;\n    }\n\n    .list-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-icon {\n      width: 32px;\n      height: 32px;\n      border-radius: 6px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      color: white;\n      font-size: 14px;\n      flex-shrink: 0;\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-name {\n      display: block;\n      font-weight: 500;\n      color: #333;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .list-row:hover .action-btn {\n      opacity: 1;\n    }\n\n    .action-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Context Menu (native) */\n    .context-menu-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: 999;\n    }\n\n    .context-menu {\n      position: fixed;\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 4px 16px rgba(0,0,0,0.15);\n      min-width: 160px;\n      padding: 4px 0;\n      z-index: 1000;\n    }\n\n    .menu-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      width: 100%;\n      padding: 10px 16px;\n      background: none;\n      border: none;\n      text-align: left;\n      font-size: 14px;\n      color: #333;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .menu-item:hover {\n      background: #f5f5f5;\n    }\n\n    .menu-item.danger {\n      color: #d32f2f;\n    }\n\n    .menu-item.danger:hover {\n      background: #ffebee;\n    }\n\n    .menu-divider {\n      height: 1px;\n      background: #e0e0e0;\n      margin: 4px 0;\n    }\n\n    /* Modal Styles */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0, 0, 0, 0.5);\n      z-index: 1000;\n    }\n\n    .modal-dialog {\n      position: fixed;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      background: white;\n      border-radius: 12px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 500px;\n      max-width: 90vw;\n      max-height: 90vh;\n      overflow: hidden;\n      z-index: 1001;\n    }\n\n    .confirm-dialog {\n      width: 400px;\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n    }\n\n    .modal-close:hover {\n      background: #f0f0f0;\n      color: #666;\n    }\n\n    .modal-body {\n      padding: 20px;\n      max-height: 60vh;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0 0 8px;\n      color: #333;\n    }\n\n    .warning-text {\n      color: #d32f2f !important;\n      font-size: 13px;\n    }\n\n    .modal-footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.6;\n      cursor: not-allowed;\n    }\n\n    .btn-secondary {\n      padding: 10px 20px;\n      background: white;\n      color: #666;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n    }\n\n    .btn-danger {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 10px 20px;\n      background: #d32f2f;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-danger:hover:not(:disabled) {\n      background: #c62828;\n    }\n\n    /* Form Styles */\n    .form-group {\n      margin-bottom: 16px;\n    }\n\n    .form-group:last-child {\n      margin-bottom: 0;\n    }\n\n    .form-group label {\n      display: block;\n      margin-bottom: 6px;\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      width: 100%;\n      padding: 10px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      transition: border-color 0.2s, box-shadow 0.2s;\n      box-sizing: border-box;\n    }\n\n    .form-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    .form-input:disabled {\n      background: #f5f5f5;\n      color: #999;\n    }\n\n    textarea.form-input {\n      resize: vertical;\n      min-height: 80px;\n    }\n\n    select.form-input {\n      cursor: pointer;\n    }\n\n    .custom-select-wrapper {\n      position: relative;\n    }\n\n    /* Portal Dropdown - Fixed positioning to escape modal z-index */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002; /* Above modal (1001) */\n    }\n\n    .entity-dropdown-backdrop {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      z-index: -1;\n    }\n\n    .entity-dropdown-content {\n      max-height: 200px;\n      overflow-y: auto;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n    }\n\n    .entity-dropdown-content.open-above {\n      position: absolute;\n      bottom: 0;\n    }\n\n    .dropdown-item {\n      padding: 10px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .dropdown-item:hover {\n      background: #e3f2fd;\n    }\n\n    .dropdown-item:first-child {\n      border-radius: 6px 6px 0 0;\n    }\n\n    .dropdown-item:last-child {\n      border-radius: 0 0 6px 6px;\n    }\n\n    .dropdown-empty {\n      padding: 10px 12px;\n      color: #999;\n      font-style: italic;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .lists-header {\n        flex-direction: column;\n        gap: 16px;\n        align-items: stretch;\n      }\n\n      .header-actions {\n        flex-direction: column;\n      }\n\n      .search-box input {\n        width: 100%;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .lists-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.TabService }, { type: i2.MJNotificationService }, { type: i0.ElementRef }], { onDocumentClick: [{
             type: HostListener,
             args: ['document:click', ['$event']]
@@ -1438,5 +1486,5 @@ export { ListsMyListsResource };
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsMyListsResource, { className: "ListsMyListsResource", filePath: "src/Lists/components/lists-my-lists-resource.component.ts", lineNumber: 1240 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsMyListsResource, { className: "ListsMyListsResource", filePath: "src/Lists/components/lists-my-lists-resource.component.ts", lineNumber: 1280 }); })();
 //# sourceMappingURL=lists-my-lists-resource.component.js.map