@memberjunction/ng-dashboards 3.3.0 → 4.0.0

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

@@ -18,15 +18,15 @@ import * as i5 from "@angular/forms";
 import * as i6 from "@memberjunction/ng-shared-generic";
 const _c0 = a0 => ({ node: a0, depth: 0 });
 const _c1 = (a0, a1) => ({ node: a0, depth: a1 });
-function ListsBrowseResource_button_15_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 36);
-    i0.ɵɵlistener("click", function ListsBrowseResource_button_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearSearch()); });
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearSearch()); });
     i0.ɵɵelement(1, "i", 37);
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_option_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 38);
+function ListsBrowseResource_For_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -35,8 +35,8 @@ function ListsBrowseResource_option_18_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(opt_r4.name);
 } }
-function ListsBrowseResource_option_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 38);
+function ListsBrowseResource_For_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -45,15 +45,15 @@ function ListsBrowseResource_option_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(opt_r5.name);
 } }
-function ListsBrowseResource_div_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵelement(1, "mj-loading", 40);
+function ListsBrowseResource_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 25);
+    i0.ɵɵelement(1, "mj-loading", 38);
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_div_30_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_32_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 41)(1, "div", 42);
-    i0.ɵɵelement(2, "div", 43)(3, "i", 6);
+    i0.ɵɵelementStart(0, "div", 26)(1, "div", 39);
+    i0.ɵɵelement(2, "div", 40)(3, "i", 6);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "h3");
     i0.ɵɵtext(5, "No Lists Yet");
@@ -61,31 +61,31 @@ function ListsBrowseResource_div_30_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", 44)(9, "div", 45);
-    i0.ɵɵelement(10, "i", 46);
+    i0.ɵɵelementStart(8, "div", 41)(9, "div", 42);
+    i0.ɵɵelement(10, "i", 43);
     i0.ɵɵelementStart(11, "span");
     i0.ɵɵtext(12, "Group records from any entity");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 45);
-    i0.ɵɵelement(14, "i", 46);
+    i0.ɵɵelementStart(13, "div", 42);
+    i0.ɵɵelement(14, "i", 43);
     i0.ɵɵelementStart(15, "span");
     i0.ɵɵtext(16, "Organize with categories");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 45);
-    i0.ɵɵelement(18, "i", 46);
+    i0.ɵɵelementStart(17, "div", 42);
+    i0.ɵɵelement(18, "i", 43);
     i0.ɵɵelementStart(19, "span");
     i0.ɵɵtext(20, "Quick access from any view");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(21, "button", 47);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_30_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createNewList()); });
+    i0.ɵɵelementStart(21, "button", 44);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_32_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createNewList()); });
     i0.ɵɵelement(22, "i", 8);
     i0.ɵɵtext(23, " Create Your First List ");
     i0.ɵɵelementEnd()();
 } }
-function ListsBrowseResource_div_31_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_33_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 48)(1, "div", 49);
-    i0.ɵɵelement(2, "i", 50);
+    i0.ɵɵelementStart(0, "div", 27)(1, "div", 45);
+    i0.ɵɵelement(2, "i", 46);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "No Results Found");
@@ -93,16 +93,16 @@ function ListsBrowseResource_div_31_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(5, "p");
     i0.ɵɵtext(6, "No lists match your current filters.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "p", 51);
+    i0.ɵɵelementStart(7, "p", 47);
     i0.ɵɵtext(8, "Try adjusting your search or filters.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "button", 52);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_31_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearFilters()); });
+    i0.ɵɵelementStart(9, "button", 48);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_33_Template_button_click_9_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.clearFilters()); });
     i0.ɵɵtext(10, "Clear All Filters");
     i0.ɵɵelementEnd()();
 } }
-function ListsBrowseResource_div_32_option_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 38);
+function ListsBrowseResource_Conditional_34_For_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 16);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -111,8 +111,8 @@ function ListsBrowseResource_div_32_option_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(opt_r9.name);
 } }
-function ListsBrowseResource_div_32_div_9_tr_20_span_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 90);
+function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 72);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -120,76 +120,76 @@ function ListsBrowseResource_div_32_div_9_tr_20_span_8_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(item_r11.list.Description);
 } }
-function ListsBrowseResource_div_32_div_9_tr_20_ng_container_15_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 92);
-    i0.ɵɵelement(1, "i", 93);
-    i0.ɵɵelementStart(2, "span", 94);
+function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 83);
+    i0.ɵɵelement(1, "i", 84);
+    i0.ɵɵelementStart(2, "span", 85);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const sharing_r12 = i0.ɵɵnextContext().ngIf;
+    const sharing_r12 = i0.ɵɵnextContext();
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(sharing_r12.totalShares);
 } }
-function ListsBrowseResource_div_32_div_9_tr_20_ng_container_15_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 95);
-    i0.ɵɵelement(1, "i", 96);
+function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 77);
+    i0.ɵɵelement(1, "i", 86);
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_div_32_div_9_tr_20_ng_container_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ListsBrowseResource_div_32_div_9_tr_20_ng_container_15_span_1_Template, 4, 1, "span", 91)(2, ListsBrowseResource_div_32_div_9_tr_20_ng_container_15_span_2_Template, 2, 0, "span", 84);
-    i0.ɵɵelementContainerEnd();
+function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Conditional_0_Template, 4, 1, "span", 83);
+    i0.ɵɵconditionalCreate(1, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Conditional_1_Template, 2, 0, "span", 77);
 } if (rf & 2) {
-    const sharing_r12 = ctx.ngIf;
+    const sharing_r12 = ctx;
+    i0.ɵɵconditional(sharing_r12.totalShares > 0 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", sharing_r12.totalShares > 0);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", sharing_r12.totalShares === 0);
+    i0.ɵɵconditional(sharing_r12.totalShares === 0 ? 1 : -1);
 } }
-function ListsBrowseResource_div_32_div_9_tr_20_span_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 95);
-    i0.ɵɵelement(1, "i", 96);
+function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 77);
+    i0.ɵɵelement(1, "i", 86);
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_div_32_div_9_tr_20_button_23_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_23_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 97);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_32_div_9_tr_20_button_23_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const item_r11 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r11)); });
-    i0.ɵɵelement(1, "i", 98);
+    i0.ɵɵelementStart(0, "button", 87);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_23_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const item_r11 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r11)); });
+    i0.ɵɵelement(1, "i", 88);
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_div_32_div_9_tr_20_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "tr", 72);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_32_div_9_tr_20_Template_tr_click_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r11)); })("keydown.enter", function ListsBrowseResource_div_32_div_9_tr_20_Template_tr_keydown_enter_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r11)); });
-    i0.ɵɵelementStart(1, "td", 73)(2, "div", 74)(3, "div", 75);
+    i0.ɵɵelementStart(0, "tr", 66);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Template_tr_click_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r11)); })("keydown.enter", function ListsBrowseResource_Conditional_34_Conditional_10_For_21_Template_tr_keydown_enter_0_listener() { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r11)); });
+    i0.ɵɵelementStart(1, "td", 67)(2, "div", 68)(3, "div", 69);
     i0.ɵɵelement(4, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 76)(6, "span", 77);
+    i0.ɵɵelementStart(5, "div", 70)(6, "span", 71);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(8, ListsBrowseResource_div_32_div_9_tr_20_span_8_Template, 2, 1, "span", 78);
+    i0.ɵɵconditionalCreate(8, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_8_Template, 2, 1, "span", 72);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "td", 79)(10, "span", 80);
+    i0.ɵɵelementStart(9, "td", 73)(10, "span", 74);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "td", 81);
+    i0.ɵɵelementStart(12, "td", 75);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "td", 82);
-    i0.ɵɵtemplate(15, ListsBrowseResource_div_32_div_9_tr_20_ng_container_15_Template, 3, 2, "ng-container", 83)(16, ListsBrowseResource_div_32_div_9_tr_20_span_16_Template, 2, 0, "span", 84);
+    i0.ɵɵelementStart(14, "td", 76);
+    i0.ɵɵconditionalCreate(15, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_15_Template, 2, 2);
+    i0.ɵɵconditionalCreate(16, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_16_Template, 2, 0, "span", 77);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "td", 85)(18, "span", 86);
+    i0.ɵɵelementStart(17, "td", 78)(18, "span", 79);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "td", 87);
+    i0.ɵɵelementStart(20, "td", 80);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "td", 88);
-    i0.ɵɵtemplate(23, ListsBrowseResource_div_32_div_9_tr_20_button_23_Template, 2, 0, "button", 89);
+    i0.ɵɵelementStart(22, "td", 81);
+    i0.ɵɵconditionalCreate(23, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Conditional_23_Template, 2, 0, "button", 82);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
+    let tmp_19_0;
     const item_r11 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
@@ -199,15 +199,15 @@ function ListsBrowseResource_div_32_div_9_tr_20_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(item_r11.list.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r11.list.Description);
+    i0.ɵɵconditional(item_r11.list.Description ? 8 : -1);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(item_r11.entityName);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(item_r11.itemCount);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", item_r11.sharingInfo);
+    i0.ɵɵconditional((tmp_19_0 = item_r11.sharingInfo) ? 15 : -1, tmp_19_0);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !item_r11.sharingInfo);
+    i0.ɵɵconditional(!item_r11.sharingInfo ? 16 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("is-me", item_r11.isOwner);
     i0.ɵɵadvance();
@@ -215,47 +215,47 @@ function ListsBrowseResource_div_32_div_9_tr_20_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.formatDate(item_r11.list.__mj_UpdatedAt));
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", item_r11.isOwner);
+    i0.ɵɵconditional(item_r11.isOwner ? 23 : -1);
 } }
-function ListsBrowseResource_div_32_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 61)(1, "table", 62)(2, "thead")(3, "tr")(4, "th", 63);
+function ListsBrowseResource_Conditional_34_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 53)(1, "table", 56)(2, "thead")(3, "tr")(4, "th", 57);
     i0.ɵɵtext(5, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "th", 64);
+    i0.ɵɵelementStart(6, "th", 58);
     i0.ɵɵtext(7, "Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "th", 65);
+    i0.ɵɵelementStart(8, "th", 59);
     i0.ɵɵtext(9, "Items");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "th", 66);
+    i0.ɵɵelementStart(10, "th", 60);
     i0.ɵɵtext(11, "Shared");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "th", 67);
+    i0.ɵɵelementStart(12, "th", 61);
     i0.ɵɵtext(13, "Owner");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "th", 68);
+    i0.ɵɵelementStart(14, "th", 62);
     i0.ɵɵtext(15, "Updated");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "th", 69)(17, "span", 70);
+    i0.ɵɵelementStart(16, "th", 63)(17, "span", 64);
     i0.ɵɵtext(18, "Actions");
     i0.ɵɵelementEnd()()()();
     i0.ɵɵelementStart(19, "tbody");
-    i0.ɵɵtemplate(20, ListsBrowseResource_div_32_div_9_tr_20_Template, 24, 15, "tr", 71);
+    i0.ɵɵrepeaterCreate(20, ListsBrowseResource_Conditional_34_Conditional_10_For_21_Template, 24, 15, "tr", 65, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(20);
-    i0.ɵɵproperty("ngForOf", ctx_r2.filteredLists);
+    i0.ɵɵrepeater(ctx_r2.filteredLists);
 } }
-function ListsBrowseResource_div_32_div_10_div_1_div_4_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 117)(1, "button", 118);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_32_div_10_div_1_div_4_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r16); const item_r15 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r15)); });
-    i0.ɵɵelement(2, "i", 98);
+    i0.ɵɵelementStart(0, "div", 93)(1, "button", 106);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_4_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r16); const item_r15 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r15)); });
+    i0.ɵɵelement(2, "i", 88);
     i0.ɵɵelementEnd()();
 } }
-function ListsBrowseResource_div_32_div_10_div_1_p_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 119);
+function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 96);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -263,54 +263,51 @@ function ListsBrowseResource_div_32_div_10_div_1_p_8_Template(rf, ctx) { if (rf
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(item_r15.list.Description);
 } }
-function ListsBrowseResource_div_32_div_10_div_1_ng_container_21_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 121);
-    i0.ɵɵelement(1, "i", 93);
+function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_21_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 107);
+    i0.ɵɵelement(1, "i", 84);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const sharing_r17 = i0.ɵɵnextContext().ngIf;
+    const sharing_r17 = i0.ɵɵnextContext();
     i0.ɵɵproperty("title", "Shared with " + sharing_r17.totalShares + " user(s)/role(s)");
 } }
-function ListsBrowseResource_div_32_div_10_div_1_ng_container_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ListsBrowseResource_div_32_div_10_div_1_ng_container_21_span_1_Template, 2, 1, "span", 120);
-    i0.ɵɵelementContainerEnd();
+function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_21_Conditional_0_Template, 2, 1, "span", 107);
 } if (rf & 2) {
-    const sharing_r17 = ctx.ngIf;
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", sharing_r17.totalShares > 0);
+    i0.ɵɵconditional(ctx.totalShares > 0 ? 0 : -1);
 } }
-function ListsBrowseResource_div_32_div_10_div_1_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_34_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 101);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_32_div_10_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)); })("keydown.enter", function ListsBrowseResource_div_32_div_10_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)); });
-    i0.ɵɵelementStart(1, "div", 102)(2, "div", 103);
+    i0.ɵɵelementStart(0, "div", 90);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_34_Conditional_11_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)); })("keydown.enter", function ListsBrowseResource_Conditional_34_Conditional_11_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)); });
+    i0.ɵɵelementStart(1, "div", 91)(2, "div", 92);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, ListsBrowseResource_div_32_div_10_div_1_div_4_Template, 3, 0, "div", 104);
+    i0.ɵɵconditionalCreate(4, ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_4_Template, 3, 0, "div", 93);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 105)(6, "h3", 106);
+    i0.ɵɵelementStart(5, "div", 94)(6, "h3", 95);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(8, ListsBrowseResource_div_32_div_10_div_1_p_8_Template, 2, 1, "p", 107);
-    i0.ɵɵelementStart(9, "div", 108)(10, "span", 109);
-    i0.ɵɵelement(11, "i", 110);
+    i0.ɵɵconditionalCreate(8, ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_8_Template, 2, 1, "p", 96);
+    i0.ɵɵelementStart(9, "div", 97)(10, "span", 98);
+    i0.ɵɵelement(11, "i", 99);
     i0.ɵɵtext(12);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 109);
-    i0.ɵɵelement(14, "i", 111);
+    i0.ɵɵelementStart(13, "span", 98);
+    i0.ɵɵelement(14, "i", 100);
     i0.ɵɵtext(15);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(16, "div", 112)(17, "span", 113);
-    i0.ɵɵelement(18, "i", 114);
+    i0.ɵɵelementStart(16, "div", 101)(17, "span", 102);
+    i0.ɵɵelement(18, "i", 103);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "div", 115);
-    i0.ɵɵtemplate(21, ListsBrowseResource_div_32_div_10_div_1_ng_container_21_Template, 2, 1, "ng-container", 83);
-    i0.ɵɵelementStart(22, "span", 116);
+    i0.ɵɵelementStart(20, "div", 104);
+    i0.ɵɵconditionalCreate(21, ListsBrowseResource_Conditional_34_Conditional_11_For_2_Conditional_21_Template, 1, 1);
+    i0.ɵɵelementStart(22, "span", 105);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
+    let tmp_22_0;
     const item_r15 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(2);
@@ -318,11 +315,11 @@ function ListsBrowseResource_div_32_div_10_div_1_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r2.getEntityIcon(item_r15.entityName));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r15.isOwner);
+    i0.ɵɵconditional(item_r15.isOwner ? 4 : -1);
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(item_r15.list.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r15.list.Description);
+    i0.ɵɵconditional(item_r15.list.Description ? 8 : -1);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", item_r15.entityName, " ");
     i0.ɵɵadvance(3);
@@ -332,81 +329,80 @@ function ListsBrowseResource_div_32_div_10_div_1_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", item_r15.isOwner ? "You" : item_r15.ownerName, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", item_r15.sharingInfo);
+    i0.ɵɵconditional((tmp_22_0 = item_r15.sharingInfo) ? 21 : -1, tmp_22_0);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.formatDate(item_r15.list.__mj_UpdatedAt));
 } }
-function ListsBrowseResource_div_32_div_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 99);
-    i0.ɵɵtemplate(1, ListsBrowseResource_div_32_div_10_div_1_Template, 24, 15, "div", 100);
+function ListsBrowseResource_Conditional_34_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 54);
+    i0.ɵɵrepeaterCreate(1, ListsBrowseResource_Conditional_34_Conditional_11_For_2_Template, 24, 15, "div", 89, 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 ListsBrowseResource_div_32_div_11_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_34_Conditional_12_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function ListsBrowseResource_div_32_div_11_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ListsBrowseResource_div_32_div_11_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 124);
-    i0.ɵɵelementContainerEnd();
+function ListsBrowseResource_Conditional_34_Conditional_12_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListsBrowseResource_Conditional_34_Conditional_12_For_2_ng_container_0_Template, 1, 0, "ng-container", 108);
 } if (rf & 2) {
     const node_r18 = ctx.$implicit;
     i0.ɵɵnextContext(3);
-    const categoryNodeTemplate_r19 = i0.ɵɵreference(34);
-    i0.ɵɵadvance();
+    const categoryNodeTemplate_r19 = i0.ɵɵreference(36);
     i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r19)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, node_r18));
 } }
-function ListsBrowseResource_div_32_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 122);
-    i0.ɵɵtemplate(1, ListsBrowseResource_div_32_div_11_ng_container_1_Template, 2, 4, "ng-container", 123);
+function ListsBrowseResource_Conditional_34_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵrepeaterCreate(1, ListsBrowseResource_Conditional_34_Conditional_12_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 ListsBrowseResource_div_32_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_34_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 53)(1, "div", 54)(2, "span", 55);
+    i0.ɵɵelementStart(0, "div", 28)(1, "div", 49)(2, "span", 50);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 56)(5, "label");
+    i0.ɵɵelementStart(4, "div", 51)(5, "label");
     i0.ɵɵtext(6, "Sort:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "select", 57);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_div_32_Template_select_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.selectedSort, $event) || (ctx_r2.selectedSort = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_div_32_Template_select_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSortChange($event)); });
-    i0.ɵɵtemplate(8, ListsBrowseResource_div_32_option_8_Template, 2, 2, "option", 16);
+    i0.ɵɵelementStart(7, "select", 52);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_34_Template_select_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.selectedSort, $event) || (ctx_r2.selectedSort = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Conditional_34_Template_select_ngModelChange_7_listener($event) { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSortChange($event)); });
+    i0.ɵɵrepeaterCreate(8, ListsBrowseResource_Conditional_34_For_9_Template, 2, 2, "option", 16, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(9, ListsBrowseResource_div_32_div_9_Template, 21, 1, "div", 58)(10, ListsBrowseResource_div_32_div_10_Template, 2, 1, "div", 59)(11, ListsBrowseResource_div_32_div_11_Template, 2, 1, "div", 60);
+    i0.ɵɵconditionalCreate(10, ListsBrowseResource_Conditional_34_Conditional_10_Template, 22, 0, "div", 53);
+    i0.ɵɵconditionalCreate(11, ListsBrowseResource_Conditional_34_Conditional_11_Template, 3, 0, "div", 54);
+    i0.ɵɵconditionalCreate(12, ListsBrowseResource_Conditional_34_Conditional_12_Template, 3, 0, "div", 55);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     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(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.selectedSort);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.sortOptions);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.viewMode === "table");
+    i0.ɵɵrepeater(ctx_r2.sortOptions);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.viewMode === "table" ? 10 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.viewMode === "card");
+    i0.ɵɵconditional(ctx_r2.viewMode === "card" ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.viewMode === "hierarchy");
+    i0.ɵɵconditional(ctx_r2.viewMode === "hierarchy" ? 12 : -1);
 } }
-function ListsBrowseResource_ng_template_33_div_1_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_ng_template_35_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r20 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 129);
-    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_33_div_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const node_r21 = i0.ɵɵnextContext().node; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCategory(node_r21)); });
-    i0.ɵɵelement(1, "i")(2, "i", 130);
-    i0.ɵɵelementStart(3, "span", 131);
+    i0.ɵɵelementStart(0, "div", 113);
+    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_35_Conditional_1_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r20); const node_r21 = i0.ɵɵnextContext().node; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCategory(node_r21)); });
+    i0.ɵɵelement(1, "i")(2, "i", 114);
+    i0.ɵɵelementStart(3, "span", 115);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 132);
+    i0.ɵɵelementStart(5, "span", 116);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -421,15 +417,15 @@ function ListsBrowseResource_ng_template_33_div_1_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r2.getListCountInCategory(node_r21));
 } }
-function ListsBrowseResource_ng_template_33_div_2_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_ng_template_35_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 133);
-    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_33_div_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r22); const node_r21 = i0.ɵɵnextContext().node; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCategory(node_r21)); });
-    i0.ɵɵelement(1, "i")(2, "i", 134);
-    i0.ɵɵelementStart(3, "span", 131);
+    i0.ɵɵelementStart(0, "div", 117);
+    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_35_Conditional_2_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r22); const node_r21 = i0.ɵɵnextContext().node; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleCategory(node_r21)); });
+    i0.ɵɵelement(1, "i")(2, "i", 118);
+    i0.ɵɵelementStart(3, "span", 115);
     i0.ɵɵtext(4, "Uncategorized");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 132);
+    i0.ɵɵelementStart(5, "span", 116);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -439,37 +435,37 @@ function ListsBrowseResource_ng_template_33_div_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(node_r21.lists.length);
 } }
-function ListsBrowseResource_ng_template_33_div_3_div_1_span_8_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r24 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" \u00B7 ", item_r24.ownerName, "");
+    i0.ɵɵtextInterpolate1(" \u00B7 ", item_r24.ownerName);
 } }
-function ListsBrowseResource_ng_template_33_div_3_div_1_div_9_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 141)(1, "button", 142);
-    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_33_div_3_div_1_div_9_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r25); const item_r24 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r24)); });
-    i0.ɵɵelement(2, "i", 98);
+    i0.ɵɵelementStart(0, "div", 123)(1, "button", 124);
+    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Conditional_9_Template_button_click_1_listener($event) { i0.ɵɵrestoreView(_r25); const item_r24 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openListMenu($event, item_r24)); });
+    i0.ɵɵelement(2, "i", 88);
     i0.ɵɵelementEnd()();
 } }
-function ListsBrowseResource_ng_template_33_div_3_div_1_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 137);
-    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_33_div_3_div_1_Template_div_click_0_listener() { const item_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r24)); })("keydown.enter", function ListsBrowseResource_ng_template_33_div_3_div_1_Template_div_keydown_enter_0_listener() { const item_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r24)); });
-    i0.ɵɵelementStart(1, "div", 75);
+    i0.ɵɵelementStart(0, "div", 120);
+    i0.ɵɵlistener("click", function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Template_div_click_0_listener() { const item_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r24)); })("keydown.enter", function ListsBrowseResource_ng_template_35_Conditional_3_For_2_Template_div_keydown_enter_0_listener() { const item_r24 = i0.ɵɵrestoreView(_r23).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.openList(item_r24)); });
+    i0.ɵɵelementStart(1, "div", 69);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 138)(4, "span", 77);
+    i0.ɵɵelementStart(3, "div", 121)(4, "span", 71);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 139);
+    i0.ɵɵelementStart(6, "span", 122);
     i0.ɵɵtext(7);
-    i0.ɵɵtemplate(8, ListsBrowseResource_ng_template_33_div_3_div_1_span_8_Template, 2, 1, "span", 83);
+    i0.ɵɵconditionalCreate(8, ListsBrowseResource_ng_template_35_Conditional_3_For_2_Conditional_8_Template, 2, 1, "span");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(9, ListsBrowseResource_ng_template_33_div_3_div_1_div_9_Template, 3, 0, "div", 140);
+    i0.ɵɵconditionalCreate(9, ListsBrowseResource_ng_template_35_Conditional_3_For_2_Conditional_9_Template, 3, 0, "div", 123);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const item_r24 = ctx.$implicit;
@@ -483,126 +479,123 @@ function ListsBrowseResource_ng_template_33_div_3_div_1_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate2(" ", item_r24.entityName, " \u00B7 ", item_r24.itemCount, " items ");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !item_r24.isOwner);
+    i0.ɵɵconditional(!item_r24.isOwner ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r24.isOwner);
+    i0.ɵɵconditional(item_r24.isOwner ? 9 : -1);
 } }
-function ListsBrowseResource_ng_template_33_div_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 135);
-    i0.ɵɵtemplate(1, ListsBrowseResource_ng_template_33_div_3_div_1_Template, 10, 9, "div", 136);
+function ListsBrowseResource_ng_template_35_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 112);
+    i0.ɵɵrepeaterCreate(1, ListsBrowseResource_ng_template_35_Conditional_3_For_2_Template, 10, 9, "div", 119, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const node_r21 = i0.ɵɵnextContext().node;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", node_r21.lists);
+    i0.ɵɵrepeater(node_r21.lists);
 } }
-function ListsBrowseResource_ng_template_33_ng_container_4_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_ng_template_35_Conditional_4_For_1_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function ListsBrowseResource_ng_template_33_ng_container_4_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ListsBrowseResource_ng_template_33_ng_container_4_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 124);
-    i0.ɵɵelementContainerEnd();
+function ListsBrowseResource_ng_template_35_Conditional_4_For_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListsBrowseResource_ng_template_35_Conditional_4_For_1_ng_container_0_Template, 1, 0, "ng-container", 108);
 } if (rf & 2) {
     const child_r26 = ctx.$implicit;
     const depth_r27 = i0.ɵɵnextContext(2).depth;
     i0.ɵɵnextContext();
-    const categoryNodeTemplate_r19 = i0.ɵɵreference(34);
-    i0.ɵɵadvance();
+    const categoryNodeTemplate_r19 = i0.ɵɵreference(36);
     i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r19)("ngTemplateOutletContext", i0.ɵɵpureFunction2(2, _c1, child_r26, depth_r27 + 1));
 } }
-function ListsBrowseResource_ng_template_33_ng_container_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ListsBrowseResource_ng_template_33_ng_container_4_ng_container_1_Template, 2, 5, "ng-container", 123);
-    i0.ɵɵelementContainerEnd();
+function ListsBrowseResource_ng_template_35_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ListsBrowseResource_ng_template_35_Conditional_4_For_1_Template, 1, 5, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
 } if (rf & 2) {
     const node_r21 = i0.ɵɵnextContext().node;
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", node_r21.children);
+    i0.ɵɵrepeater(node_r21.children);
 } }
-function ListsBrowseResource_ng_template_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 125);
-    i0.ɵɵtemplate(1, ListsBrowseResource_ng_template_33_div_1_Template, 7, 6, "div", 126)(2, ListsBrowseResource_ng_template_33_div_2_Template, 7, 3, "div", 127)(3, ListsBrowseResource_ng_template_33_div_3_Template, 2, 1, "div", 128)(4, ListsBrowseResource_ng_template_33_ng_container_4_Template, 2, 1, "ng-container", 83);
+function ListsBrowseResource_ng_template_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 109);
+    i0.ɵɵconditionalCreate(1, ListsBrowseResource_ng_template_35_Conditional_1_Template, 7, 6, "div", 110);
+    i0.ɵɵconditionalCreate(2, ListsBrowseResource_ng_template_35_Conditional_2_Template, 7, 3, "div", 111);
+    i0.ɵɵconditionalCreate(3, ListsBrowseResource_ng_template_35_Conditional_3_Template, 3, 0, "div", 112);
+    i0.ɵɵconditionalCreate(4, ListsBrowseResource_ng_template_35_Conditional_4_Template, 2, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const node_r21 = ctx.node;
     const depth_r27 = ctx.depth;
     i0.ɵɵstyleProp("margin-left", depth_r27 * 20, "px");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r21.category);
+    i0.ɵɵconditional(node_r21.category ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !node_r21.category && node_r21.lists.length > 0);
+    i0.ɵɵconditional(!node_r21.category && node_r21.lists.length > 0 ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r21.isExpanded);
+    i0.ɵɵconditional(node_r21.isExpanded ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r21.isExpanded);
+    i0.ɵɵconditional(node_r21.isExpanded ? 4 : -1);
 } }
-function ListsBrowseResource_div_35_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_37_Template(rf, ctx) { if (rf & 1) {
     const _r28 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 143);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_35_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeContextMenu()); });
+    i0.ɵɵelementStart(0, "div", 125);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_37_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r28); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeContextMenu()); });
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_div_36_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_38_Template(rf, ctx) { if (rf & 1) {
     const _r29 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 144)(1, "button", 145);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_36_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.editList()); });
-    i0.ɵɵelement(2, "i", 146);
+    i0.ɵɵelementStart(0, "div", 126)(1, "button", 127);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_38_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.editList()); });
+    i0.ɵɵelement(2, "i", 128);
     i0.ɵɵtext(3, " Edit ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 145);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_36_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openShareDialog()); });
-    i0.ɵɵelement(5, "i", 93);
+    i0.ɵɵelementStart(4, "button", 127);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_38_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.openShareDialog()); });
+    i0.ɵɵelement(5, "i", 84);
     i0.ɵɵtext(6, " Share ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 145);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_36_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.duplicateList()); });
-    i0.ɵɵelement(8, "i", 147);
+    i0.ɵɵelementStart(7, "button", 127);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_38_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.duplicateList()); });
+    i0.ɵɵelement(8, "i", 129);
     i0.ɵɵtext(9, " Duplicate ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(10, "div", 148);
-    i0.ɵɵelementStart(11, "button", 149);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_36_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmDeleteList()); });
-    i0.ɵɵelement(12, "i", 150);
+    i0.ɵɵelement(10, "div", 130);
+    i0.ɵɵelementStart(11, "button", 131);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_38_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r29); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmDeleteList()); });
+    i0.ɵɵelement(12, "i", 132);
     i0.ɵɵtext(13, " Delete ");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("top", ctx_r2.contextMenuY, "px")("left", ctx_r2.contextMenuX, "px");
 } }
-function ListsBrowseResource_div_37_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_39_Template(rf, ctx) { if (rf & 1) {
     const _r30 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 151);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_37_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
+    i0.ɵɵelementStart(0, "div", 133);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_39_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r30); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_div_38_div_15_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_40_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r32 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 156)(1, "label");
+    i0.ɵɵelementStart(0, "div", 137)(1, "label");
     i0.ɵɵtext(2, "Entity *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 167)(4, "input", 168, 1);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_div_38_div_15_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.entitySearchTerm, $event) || (ctx_r2.entitySearchTerm = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_div_38_div_15_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.filterEntities($event)); })("focus", function ListsBrowseResource_div_38_div_15_Template_input_focus_4_listener() { i0.ɵɵrestoreView(_r32); const entityInput_r33 = i0.ɵɵreference(5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openEntityDropdown(entityInput_r33)); });
+    i0.ɵɵelementStart(3, "div", 146)(4, "input", 147, 1);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_40_Conditional_15_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.entitySearchTerm, $event) || (ctx_r2.entitySearchTerm = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Conditional_40_Conditional_15_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r32); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.filterEntities($event)); })("focus", function ListsBrowseResource_Conditional_40_Conditional_15_Template_input_focus_4_listener() { i0.ɵɵrestoreView(_r32); const entityInput_r33 = i0.ɵɵreference(5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.openEntityDropdown(entityInput_r33)); });
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.entitySearchTerm);
 } }
-function ListsBrowseResource_div_38_div_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 156)(1, "label");
+function ListsBrowseResource_Conditional_40_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 137)(1, "label");
     i0.ɵɵtext(2, "Entity");
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(3, "input", 169);
+    i0.ɵɵelement(3, "input", 148);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
     i0.ɵɵproperty("value", ctx_r2.entitySearchTerm);
 } }
-function ListsBrowseResource_div_38_option_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 161);
+function ListsBrowseResource_Conditional_40_For_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 141);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -611,49 +604,50 @@ function ListsBrowseResource_div_38_option_23_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(cat_r34.displayName);
 } }
-function ListsBrowseResource_div_38_i_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 170);
+function ListsBrowseResource_Conditional_40_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 144);
 } }
-function ListsBrowseResource_div_38_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_40_Template(rf, ctx) { if (rf & 1) {
     const _r31 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 152)(1, "div", 153)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 32)(1, "div", 134)(2, "h3");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 154);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_38_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
+    i0.ɵɵelementStart(4, "button", 135);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_40_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
     i0.ɵɵelement(5, "i", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 155)(7, "div", 156)(8, "label");
+    i0.ɵɵelementStart(6, "div", 136)(7, "div", 137)(8, "label");
     i0.ɵɵtext(9, "Name *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "input", 157);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_div_38_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.newListName, $event) || (ctx_r2.newListName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(10, "input", 138);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_40_Template_input_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r31); 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", 156)(12, "label");
+    i0.ɵɵelementStart(11, "div", 137)(12, "label");
     i0.ɵɵtext(13, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "textarea", 158);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_div_38_Template_textarea_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.newListDescription, $event) || (ctx_r2.newListDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(14, "textarea", 139);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_40_Template_textarea_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.newListDescription, $event) || (ctx_r2.newListDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(15, ListsBrowseResource_div_38_div_15_Template, 6, 1, "div", 159)(16, ListsBrowseResource_div_38_div_16_Template, 4, 1, "div", 159);
-    i0.ɵɵelementStart(17, "div", 156)(18, "label");
+    i0.ɵɵconditionalCreate(15, ListsBrowseResource_Conditional_40_Conditional_15_Template, 6, 1, "div", 137);
+    i0.ɵɵconditionalCreate(16, ListsBrowseResource_Conditional_40_Conditional_16_Template, 4, 1, "div", 137);
+    i0.ɵɵelementStart(17, "div", 137)(18, "label");
     i0.ɵɵtext(19, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "select", 160);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_div_38_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.selectedCategoryId, $event) || (ctx_r2.selectedCategoryId = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵelementStart(21, "option", 161);
+    i0.ɵɵelementStart(20, "select", 140);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Conditional_40_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.selectedCategoryId, $event) || (ctx_r2.selectedCategoryId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(21, "option", 141);
     i0.ɵɵtext(22, "No category");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(23, ListsBrowseResource_div_38_option_23_Template, 2, 2, "option", 162);
+    i0.ɵɵrepeaterCreate(23, ListsBrowseResource_Conditional_40_For_24_Template, 2, 2, "option", 141, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(24, "div", 163)(25, "button", 164);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_38_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveList()); });
-    i0.ɵɵtemplate(26, ListsBrowseResource_div_38_i_26_Template, 1, 0, "i", 165);
-    i0.ɵɵtext(27);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(28, "button", 166);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_38_Template_button_click_28_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
-    i0.ɵɵtext(29, "Cancel");
+    i0.ɵɵelementStart(25, "div", 142)(26, "button", 143);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_40_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveList()); });
+    i0.ɵɵconditionalCreate(27, ListsBrowseResource_Conditional_40_Conditional_27_Template, 1, 0, "i", 144);
+    i0.ɵɵtext(28);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(29, "button", 145);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_40_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r31); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeCreateDialog()); });
+    i0.ɵɵtext(30, "Cancel");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -664,59 +658,59 @@ function ListsBrowseResource_div_38_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.newListDescription);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.editingList);
+    i0.ɵɵconditional(!ctx_r2.editingList ? 15 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.editingList);
+    i0.ɵɵconditional(ctx_r2.editingList ? 16 : -1);
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.selectedCategoryId);
     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.editingList && !ctx_r2.selectedEntityId || ctx_r2.isSaving);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.isSaving);
+    i0.ɵɵconditional(ctx_r2.isSaving ? 27 : -1);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.isSaving ? "Saving..." : ctx_r2.editingList ? "Save" : "Create", " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", ctx_r2.isSaving);
 } }
-function ListsBrowseResource_div_39_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_41_Template(rf, ctx) { if (rf & 1) {
     const _r35 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 151);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_39_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(0, "div", 133);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_41_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r35); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_div_40_i_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 170);
+function ListsBrowseResource_Conditional_42_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 144);
 } }
-function ListsBrowseResource_div_40_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_42_Template(rf, ctx) { if (rf & 1) {
     const _r36 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 171)(1, "div", 153)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 33)(1, "div", 134)(2, "h3");
     i0.ɵɵtext(3, "Delete List");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 154);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_40_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(4, "button", 135);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_42_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
     i0.ɵɵelement(5, "i", 37);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 155)(7, "p");
+    i0.ɵɵelementStart(6, "div", 136)(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", 172);
+    i0.ɵɵelementStart(12, "p", 149);
     i0.ɵɵtext(13, "This will also remove all items in the list.");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 163)(15, "button", 173);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_40_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.deleteList()); });
-    i0.ɵɵtemplate(16, ListsBrowseResource_div_40_i_16_Template, 1, 0, "i", 165);
+    i0.ɵɵelementStart(14, "div", 142)(15, "button", 150);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_42_Template_button_click_15_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.deleteList()); });
+    i0.ɵɵconditionalCreate(16, ListsBrowseResource_Conditional_42_Conditional_16_Template, 1, 0, "i", 144);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 166);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_40_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(18, "button", 145);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_42_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r36); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
     i0.ɵɵtext(19, "Cancel");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -726,25 +720,25 @@ function ListsBrowseResource_div_40_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("disabled", ctx_r2.isDeleting);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.isDeleting);
+    i0.ɵɵconditional(ctx_r2.isDeleting ? 16 : -1);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.isDeleting ? "Deleting..." : "Delete", " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", ctx_r2.isDeleting);
 } }
-function ListsBrowseResource_mj_list_share_dialog_41_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_43_Template(rf, ctx) { if (rf & 1) {
     const _r37 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "mj-list-share-dialog", 174);
-    i0.ɵɵlistener("complete", function ListsBrowseResource_mj_list_share_dialog_41_Template_mj_list_share_dialog_complete_0_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onShareComplete($event)); })("cancel", function ListsBrowseResource_mj_list_share_dialog_41_Template_mj_list_share_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onShareCancel()); });
+    i0.ɵɵelementStart(0, "mj-list-share-dialog", 151);
+    i0.ɵɵlistener("complete", function ListsBrowseResource_Conditional_43_Template_mj_list_share_dialog_complete_0_listener($event) { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onShareComplete($event)); })("cancel", function ListsBrowseResource_Conditional_43_Template_mj_list_share_dialog_cancel_0_listener() { i0.ɵɵrestoreView(_r37); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onShareCancel()); });
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵproperty("config", ctx_r2.shareDialogConfig)("visible", ctx_r2.showShareDialog);
 } }
-function ListsBrowseResource_div_42_div_3_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_44_For_4_Template(rf, ctx) { if (rf & 1) {
     const _r39 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 180);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_42_div_3_Template_div_click_0_listener() { const entity_r40 = i0.ɵɵrestoreView(_r39).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectEntity(entity_r40)); });
+    i0.ɵɵelementStart(0, "div", 157);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_44_For_4_Template_div_click_0_listener() { const entity_r40 = i0.ɵɵrestoreView(_r39).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectEntity(entity_r40)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -752,18 +746,19 @@ function ListsBrowseResource_div_42_div_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", entity_r40.Name, " ");
 } }
-function ListsBrowseResource_div_42_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 181);
+function ListsBrowseResource_Conditional_44_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 156);
     i0.ɵɵtext(1, " No entities found ");
     i0.ɵɵelementEnd();
 } }
-function ListsBrowseResource_div_42_Template(rf, ctx) { if (rf & 1) {
+function ListsBrowseResource_Conditional_44_Template(rf, ctx) { if (rf & 1) {
     const _r38 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 175)(1, "div", 176);
-    i0.ɵɵlistener("click", function ListsBrowseResource_div_42_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r38); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeEntityDropdown()); });
+    i0.ɵɵelementStart(0, "div", 152)(1, "div", 153);
+    i0.ɵɵlistener("click", function ListsBrowseResource_Conditional_44_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r38); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeEntityDropdown()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(2, "div", 177);
-    i0.ɵɵtemplate(3, ListsBrowseResource_div_42_div_3_Template, 2, 1, "div", 178)(4, ListsBrowseResource_div_42_div_4_Template, 2, 0, "div", 179);
+    i0.ɵɵelementStart(2, "div", 154);
+    i0.ɵɵrepeaterCreate(3, ListsBrowseResource_Conditional_44_For_4_Template, 2, 1, "div", 155, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(5, ListsBrowseResource_Conditional_44_Conditional_5_Template, 2, 0, "div", 156);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -772,13 +767,10 @@ function ListsBrowseResource_div_42_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("open-above", ctx_r2.entityDropdownPosition.openAbove);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.filteredEntitiesList);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.filteredEntitiesList.length === 0);
+    i0.ɵɵrepeater(ctx_r2.filteredEntitiesList);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.filteredEntitiesList.length === 0 ? 5 : -1);
 } }
-export function LoadListsBrowseResource() {
-    // tree shaker
-}
 let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponent {
     cdr;
     tabService;
@@ -1406,8 +1398,8 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
     }
     static ɵfac = function ListsBrowseResource_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListsBrowseResource)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.TabService), i0.ɵɵdirectiveInject(i2.MJNotificationService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i3.ListSharingService)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListsBrowseResource, selectors: [["mj-lists-browse-resource"]], hostBindings: function ListsBrowseResource_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("click", function ListsBrowseResource_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, false, i0.ɵɵresolveDocument)("keydown.escape", function ListsBrowseResource_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, false, i0.ɵɵresolveDocument);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 43, vars: 24, consts: [["categoryNodeTemplate", ""], ["entityInput", ""], [1, "lists-browse-container"], [1, "browse-header"], [1, "header-row"], [1, "header-title"], [1, "fa-solid", "fa-list-check"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], [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, "filter-group"], ["title", "Filter by owner", 1, "filter-select", 3, "ngModelChange", "ngModel"], [3, "value", 4, "ngFor", "ngForOf"], ["title", "Filter by entity", 1, "filter-select", 3, "ngModelChange", "ngModel"], [1, "view-toggle-group"], ["title", "Table view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-table-list"], ["title", "Card view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "Category view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-folder-tree"], ["class", "loading-container", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], ["class", "empty-state search-empty", 4, "ngIf"], ["class", "browse-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"], [3, "config", "visible", "complete", "cancel", 4, "ngIf"], ["class", "entity-dropdown-portal", 3, "top", "left", "width", "dropdown-above", 4, "ngIf"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times"], [3, "value"], [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, "fa-solid", "fa-filter-circle-xmark"], [1, "empty-hint"], [1, "btn-clear", 3, "click"], [1, "browse-content"], [1, "results-header"], [1, "result-count"], [1, "sort-options"], [1, "filter-select", "sort-select", 3, "ngModelChange", "ngModel"], ["class", "lists-table", 4, "ngIf"], ["class", "lists-grid", "role", "list", "aria-label", "Lists", 4, "ngIf"], ["class", "category-tree", 4, "ngIf"], [1, "lists-table"], ["role", "grid", "aria-label", "Lists table"], ["scope", "col", 1, "col-name"], ["scope", "col", 1, "col-entity"], ["scope", "col", 1, "col-items"], ["scope", "col", 1, "col-sharing"], ["scope", "col", 1, "col-owner"], ["scope", "col", 1, "col-updated"], ["scope", "col", 1, "col-actions"], [1, "sr-only"], ["class", "list-row", "tabindex", "0", "role", "row", 3, "click", "keydown.enter", 4, "ngFor", "ngForOf"], ["tabindex", "0", "role", "row", 1, "list-row", 3, "click", "keydown.enter"], ["role", "gridcell", 1, "col-name"], [1, "name-cell"], ["aria-hidden", "true", 1, "list-icon"], [1, "name-content"], [1, "list-name"], ["class", "list-desc", 4, "ngIf"], ["role", "gridcell", 1, "col-entity"], [1, "entity-badge"], ["role", "gridcell", 1, "col-items"], ["role", "gridcell", 1, "col-sharing"], [4, "ngIf"], ["class", "sharing-private", 4, "ngIf"], ["role", "gridcell", 1, "col-owner"], [1, "owner-name"], ["role", "gridcell", 1, "col-updated"], ["role", "gridcell", 1, "col-actions"], ["class", "action-btn", "title", "More options", 3, "click", 4, "ngIf"], [1, "list-desc"], ["class", "sharing-indicator", 4, "ngIf"], [1, "sharing-indicator"], [1, "fa-solid", "fa-share-nodes"], [1, "share-count"], [1, "sharing-private"], [1, "fa-solid", "fa-lock"], ["title", "More options", 1, "action-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis-v"], ["role", "list", "aria-label", "Lists", 1, "lists-grid"], ["class", "list-card", "tabindex", "0", "role", "listitem", 3, "click", "keydown.enter", 4, "ngFor", "ngForOf"], ["tabindex", "0", "role", "listitem", 1, "list-card", 3, "click", "keydown.enter"], [1, "card-header"], ["aria-hidden", "true", 1, "card-icon"], ["class", "card-menu", 4, "ngIf"], [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"], [1, "owner-tag"], [1, "fa-solid", "fa-user"], [1, "card-footer-right"], [1, "date-info"], [1, "card-menu"], [1, "menu-btn", 3, "click"], [1, "card-description"], ["class", "sharing-badge", 3, "title", 4, "ngIf"], [1, "sharing-badge", 3, "title"], [1, "category-tree"], [4, "ngFor", "ngForOf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [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"], [1, "category-header", 3, "click"], [1, "fa-solid", "fa-folder"], [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 hierarchy-row", "tabindex", "0", "role", "listitem", 3, "click", "keydown.enter", 4, "ngFor", "ngForOf"], ["tabindex", "0", "role", "listitem", 1, "list-row", "hierarchy-row", 3, "click", "keydown.enter"], [1, "list-info"], [1, "list-meta"], ["class", "list-actions", 4, "ngIf"], [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"], ["class", "form-group", 4, "ngIf"], [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, "custom-select-wrapper"], ["type", "text", "placeholder", "Search and select an entity", 1, "form-input", 3, "ngModelChange", "focus", "ngModel"], ["type", "text", "disabled", "", 1, "form-input", 3, "value"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "modal-dialog", "confirm-dialog"], [1, "warning-text"], [1, "btn-danger", 3, "click", "disabled"], [3, "complete", "cancel", "config", "visible"], [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 ListsBrowseResource_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵlistener("click", function ListsBrowseResource_click_HostBindingHandler($event) { return ctx.onDocumentClick($event); }, i0.ɵɵresolveDocument)("keydown.escape", function ListsBrowseResource_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, i0.ɵɵresolveDocument);
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 45, vars: 22, consts: [["categoryNodeTemplate", ""], ["entityInput", ""], [1, "lists-browse-container"], [1, "browse-header"], [1, "header-row"], [1, "header-title"], [1, "fa-solid", "fa-list-check"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "header-actions"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search lists...", 3, "ngModelChange", "ngModel"], [1, "clear-search"], [1, "filter-group"], ["title", "Filter by owner", 1, "filter-select", 3, "ngModelChange", "ngModel"], [3, "value"], ["title", "Filter by entity", 1, "filter-select", 3, "ngModelChange", "ngModel"], [1, "view-toggle-group"], ["title", "Table view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-table-list"], ["title", "Card view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-grip"], ["title", "Category view", 1, "view-toggle", 3, "click"], [1, "fa-solid", "fa-folder-tree"], [1, "loading-container"], [1, "empty-state"], [1, "empty-state", "search-empty"], [1, "browse-content"], [1, "context-menu-overlay"], [1, "context-menu", 3, "top", "left"], [1, "modal-overlay"], [1, "modal-dialog"], [1, "modal-dialog", "confirm-dialog"], [3, "config", "visible"], [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, "fa-solid", "fa-filter-circle-xmark"], [1, "empty-hint"], [1, "btn-clear", 3, "click"], [1, "results-header"], [1, "result-count"], [1, "sort-options"], [1, "filter-select", "sort-select", 3, "ngModelChange", "ngModel"], [1, "lists-table"], ["role", "list", "aria-label", "Lists", 1, "lists-grid"], [1, "category-tree"], ["role", "grid", "aria-label", "Lists table"], ["scope", "col", 1, "col-name"], ["scope", "col", 1, "col-entity"], ["scope", "col", 1, "col-items"], ["scope", "col", 1, "col-sharing"], ["scope", "col", 1, "col-owner"], ["scope", "col", 1, "col-updated"], ["scope", "col", 1, "col-actions"], [1, "sr-only"], ["tabindex", "0", "role", "row", 1, "list-row"], ["tabindex", "0", "role", "row", 1, "list-row", 3, "click", "keydown.enter"], ["role", "gridcell", 1, "col-name"], [1, "name-cell"], ["aria-hidden", "true", 1, "list-icon"], [1, "name-content"], [1, "list-name"], [1, "list-desc"], ["role", "gridcell", 1, "col-entity"], [1, "entity-badge"], ["role", "gridcell", 1, "col-items"], ["role", "gridcell", 1, "col-sharing"], [1, "sharing-private"], ["role", "gridcell", 1, "col-owner"], [1, "owner-name"], ["role", "gridcell", 1, "col-updated"], ["role", "gridcell", 1, "col-actions"], ["title", "More options", 1, "action-btn"], [1, "sharing-indicator"], [1, "fa-solid", "fa-share-nodes"], [1, "share-count"], [1, "fa-solid", "fa-lock"], ["title", "More options", 1, "action-btn", 3, "click"], ["aria-hidden", "true", 1, "fa-solid", "fa-ellipsis-v"], ["tabindex", "0", "role", "listitem", 1, "list-card"], ["tabindex", "0", "role", "listitem", 1, "list-card", 3, "click", "keydown.enter"], [1, "card-header"], ["aria-hidden", "true", 1, "card-icon"], [1, "card-menu"], [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, "owner-tag"], [1, "fa-solid", "fa-user"], [1, "card-footer-right"], [1, "date-info"], [1, "menu-btn", 3, "click"], [1, "sharing-badge", 3, "title"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "category-section"], [1, "category-header"], [1, "category-header", "uncategorized"], ["role", "list", 1, "category-lists"], [1, "category-header", 3, "click"], [1, "fa-solid", "fa-folder"], [1, "category-name"], [1, "category-count"], [1, "category-header", "uncategorized", 3, "click"], [1, "fa-solid", "fa-inbox"], ["tabindex", "0", "role", "listitem", 1, "list-row", "hierarchy-row"], ["tabindex", "0", "role", "listitem", 1, "list-row", "hierarchy-row", 3, "click", "keydown.enter"], [1, "list-info"], [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, "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, "custom-select-wrapper"], ["type", "text", "placeholder", "Search and select an entity", 1, "form-input", 3, "ngModelChange", "focus", "ngModel"], ["type", "text", "disabled", "", 1, "form-input", 3, "value"], [1, "warning-text"], [1, "btn-danger", 3, "click", "disabled"], [3, "complete", "cancel", "config", "visible"], [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 ListsBrowseResource_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 2)(1, "div", 3)(2, "div", 4)(3, "div", 5);
             i0.ɵɵelement(4, "i", 6);
@@ -1426,76 +1418,88 @@ let ListsBrowseResource = class ListsBrowseResource extends BaseResourceComponen
             i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.searchTerm, $event) || (ctx.searchTerm = $event); return i0.ɵɵresetView($event); });
             i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSearchChange($event)); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(15, ListsBrowseResource_button_15_Template, 2, 0, "button", 13);
+            i0.ɵɵconditionalCreate(15, ListsBrowseResource_Conditional_15_Template, 2, 0, "button", 13);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(16, "div", 14)(17, "select", 15);
             i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Template_select_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedOwner, $event) || (ctx.selectedOwner = $event); return i0.ɵɵresetView($event); });
             i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Template_select_ngModelChange_17_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onOwnerFilterChange($event)); });
-            i0.ɵɵtemplate(18, ListsBrowseResource_option_18_Template, 2, 2, "option", 16);
+            i0.ɵɵrepeaterCreate(18, ListsBrowseResource_For_19_Template, 2, 2, "option", 16, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(19, "div", 14)(20, "select", 17);
-            i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedEntity, $event) || (ctx.selectedEntity = $event); return i0.ɵɵresetView($event); });
-            i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEntityFilterChange($event)); });
-            i0.ɵɵtemplate(21, ListsBrowseResource_option_21_Template, 2, 2, "option", 16);
+            i0.ɵɵelementStart(20, "div", 14)(21, "select", 17);
+            i0.ɵɵtwoWayListener("ngModelChange", function ListsBrowseResource_Template_select_ngModelChange_21_listener($event) { i0.ɵɵrestoreView(_r1); i0.ɵɵtwoWayBindingSet(ctx.selectedEntity, $event) || (ctx.selectedEntity = $event); return i0.ɵɵresetView($event); });
+            i0.ɵɵlistener("ngModelChange", function ListsBrowseResource_Template_select_ngModelChange_21_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onEntityFilterChange($event)); });
+            i0.ɵɵrepeaterCreate(22, ListsBrowseResource_For_23_Template, 2, 2, "option", 16, i0.ɵɵrepeaterTrackByIdentity);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(22, "div", 18)(23, "button", 19);
-            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setViewMode("table")); });
-            i0.ɵɵelement(24, "i", 20);
+            i0.ɵɵelementStart(24, "div", 18)(25, "button", 19);
+            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setViewMode("table")); });
+            i0.ɵɵelement(26, "i", 20);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(25, "button", 21);
-            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setViewMode("card")); });
-            i0.ɵɵelement(26, "i", 22);
+            i0.ɵɵelementStart(27, "button", 21);
+            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setViewMode("card")); });
+            i0.ɵɵelement(28, "i", 22);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(27, "button", 23);
-            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setViewMode("hierarchy")); });
-            i0.ɵɵelement(28, "i", 24);
+            i0.ɵɵelementStart(29, "button", 23);
+            i0.ɵɵlistener("click", function ListsBrowseResource_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setViewMode("hierarchy")); });
+            i0.ɵɵelement(30, "i", 24);
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵtemplate(29, ListsBrowseResource_div_29_Template, 2, 0, "div", 25)(30, ListsBrowseResource_div_30_Template, 24, 0, "div", 26)(31, ListsBrowseResource_div_31_Template, 11, 0, "div", 27)(32, ListsBrowseResource_div_32_Template, 12, 7, "div", 28)(33, ListsBrowseResource_ng_template_33_Template, 5, 6, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(35, ListsBrowseResource_div_35_Template, 1, 0, "div", 29)(36, ListsBrowseResource_div_36_Template, 14, 4, "div", 30)(37, ListsBrowseResource_div_37_Template, 1, 0, "div", 31)(38, ListsBrowseResource_div_38_Template, 30, 12, "div", 32)(39, ListsBrowseResource_div_39_Template, 1, 0, "div", 31)(40, ListsBrowseResource_div_40_Template, 20, 5, "div", 33)(41, ListsBrowseResource_mj_list_share_dialog_41_Template, 1, 2, "mj-list-share-dialog", 34)(42, ListsBrowseResource_div_42_Template, 5, 12, "div", 35);
+            i0.ɵɵconditionalCreate(31, ListsBrowseResource_Conditional_31_Template, 2, 0, "div", 25);
+            i0.ɵɵconditionalCreate(32, ListsBrowseResource_Conditional_32_Template, 24, 0, "div", 26);
+            i0.ɵɵconditionalCreate(33, ListsBrowseResource_Conditional_33_Template, 11, 0, "div", 27);
+            i0.ɵɵconditionalCreate(34, ListsBrowseResource_Conditional_34_Template, 13, 6, "div", 28);
+            i0.ɵɵtemplate(35, ListsBrowseResource_ng_template_35_Template, 5, 6, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(37, ListsBrowseResource_Conditional_37_Template, 1, 0, "div", 29);
+            i0.ɵɵconditionalCreate(38, ListsBrowseResource_Conditional_38_Template, 14, 4, "div", 30);
+            i0.ɵɵconditionalCreate(39, ListsBrowseResource_Conditional_39_Template, 1, 0, "div", 31);
+            i0.ɵɵconditionalCreate(40, ListsBrowseResource_Conditional_40_Template, 31, 11, "div", 32);
+            i0.ɵɵconditionalCreate(41, ListsBrowseResource_Conditional_41_Template, 1, 0, "div", 31);
+            i0.ɵɵconditionalCreate(42, ListsBrowseResource_Conditional_42_Template, 20, 5, "div", 33);
+            i0.ɵɵconditionalCreate(43, ListsBrowseResource_Conditional_43_Template, 1, 2, "mj-list-share-dialog", 34);
+            i0.ɵɵconditionalCreate(44, ListsBrowseResource_Conditional_44_Template, 6, 11, "div", 35);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(14);
             i0.ɵɵtwoWayProperty("ngModel", ctx.searchTerm);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.searchTerm);
+            i0.ɵɵconditional(ctx.searchTerm ? 15 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵtwoWayProperty("ngModel", ctx.selectedOwner);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngForOf", ctx.ownerOptions);
-            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.ownerOptions);
+            i0.ɵɵadvance(3);
             i0.ɵɵtwoWayProperty("ngModel", ctx.selectedEntity);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngForOf", ctx.entityOptions);
-            i0.ɵɵadvance(2);
+            i0.ɵɵrepeater(ctx.entityOptions);
+            i0.ɵɵadvance(3);
             i0.ɵɵclassProp("active", ctx.viewMode === "table");
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("active", ctx.viewMode === "card");
             i0.ɵɵadvance(2);
             i0.ɵɵclassProp("active", ctx.viewMode === "hierarchy");
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.isLoading);
+            i0.ɵɵconditional(ctx.isLoading ? 31 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.allLists.length === 0);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.allLists.length === 0 ? 32 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.allLists.length > 0 && ctx.filteredLists.length === 0);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.allLists.length > 0 && ctx.filteredLists.length === 0 ? 33 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.filteredLists.length > 0);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.filteredLists.length > 0 ? 34 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.showContextMenu);
+            i0.ɵɵconditional(ctx.showContextMenu ? 37 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showContextMenu);
+            i0.ɵɵconditional(ctx.showContextMenu ? 38 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showCreateDialog);
+            i0.ɵɵconditional(ctx.showCreateDialog ? 39 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showCreateDialog);
+            i0.ɵɵconditional(ctx.showCreateDialog ? 40 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showDeleteConfirm);
+            i0.ɵɵconditional(ctx.showDeleteConfirm ? 41 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showDeleteConfirm);
+            i0.ɵɵconditional(ctx.showDeleteConfirm ? 42 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.shareDialogConfig);
+            i0.ɵɵconditional(ctx.shareDialogConfig ? 43 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showEntityDropdown && !ctx.editingList);
-        } }, dependencies: [i4.NgForOf, i4.NgIf, i4.NgTemplateOutlet, i5.NgSelectOption, i5.ɵNgSelectMultipleOption, i5.DefaultValueAccessor, i5.SelectControlValueAccessor, i5.NgControlStatus, i5.NgModel, i6.LoadingComponent, i3.ListShareDialogComponent], styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-browse-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .browse-header {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\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: 12px;\n      flex-wrap: wrap;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex: 1;\n      min-width: 200px;\n      max-width: 300px;\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;\n      border: 1px solid #ddd;\n      border-radius: 20px;\n      font-size: 14px;\n      width: 100%;\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    }\n\n    .filter-group {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .filter-group label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    .filter-select {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      background: white;\n      cursor: pointer;\n      min-width: 120px;\n    }\n\n    .filter-select:focus {\n      outline: none;\n      border-color: #2196F3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    .sort-select {\n      min-width: 140px;\n    }\n\n    .view-toggle-group {\n      display: flex;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .view-toggle {\n      padding: 8px 12px;\n      background: white;\n      border: none;\n      border-right: 1px solid #ddd;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:last-child {\n      border-right: none;\n    }\n\n    .view-toggle:hover {\n      background: #f5f5f5;\n    }\n\n    .view-toggle.active {\n      background: #2196F3;\n      color: white;\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    .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      transition: background 0.2s;\n    }\n\n    .btn-clear:hover {\n      background: #e0e0e0;\n    }\n\n    /* Content */\n    .browse-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .results-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n    }\n\n    .result-count {\n      font-size: 14px;\n      color: #666;\n    }\n\n    .sort-options {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .sort-options label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    /* Table View */\n    .lists-table {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .lists-table table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .lists-table th {\n      text-align: left;\n      padding: 12px 16px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      background: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .lists-table td {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .list-row {\n      cursor: pointer;\n      transition: background 0.15s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: #f5f5f5;\n    }\n\n    .list-row:focus {\n      background: #e8f4fd;\n    }\n\n    .list-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-row:last-child td {\n      border-bottom: none;\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .col-name { width: 30%; }\n    .col-entity { width: 15%; }\n    .col-items { width: 8%; text-align: center; }\n    .col-sharing { width: 8%; text-align: center; }\n    .col-owner { width: 14%; }\n    .col-updated { width: 15%; }\n    .col-actions { width: 10%; text-align: right; }\n\n    /* Sharing indicators */\n    .sharing-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: #2196F3;\n      font-size: 13px;\n    }\n\n    .sharing-indicator i {\n      font-size: 14px;\n    }\n\n    .share-count {\n      font-weight: 500;\n    }\n\n    .sharing-private {\n      color: #999;\n      font-size: 13px;\n    }\n\n    .sharing-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n      background: #e3f2fd;\n      border-radius: 50%;\n      color: #2196F3;\n      font-size: 11px;\n    }\n\n    .card-footer-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .name-cell {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .list-icon {\n      width: 36px;\n      height: 36px;\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    .name-content {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .list-name {\n      font-weight: 500;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-desc {\n      font-size: 12px;\n      color: #999;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .entity-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      background: #e8f4fd;\n      border-radius: 4px;\n      font-size: 12px;\n      color: #1976D2;\n    }\n\n    .owner-name {\n      color: #666;\n    }\n\n    .owner-name.is-me {\n      color: #2196F3;\n      font-weight: 500;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 6px 10px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .action-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Card 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    .owner-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: #666;\n    }\n\n    .owner-tag.is-me {\n      color: #2196F3;\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: #999;\n    }\n\n    /* Hierarchy View */\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    .hierarchy-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    .hierarchy-row:hover {\n      background: #f5f5f5;\n    }\n\n    .hierarchy-row:focus {\n      background: #e3f2fd;\n    }\n\n    .hierarchy-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .hierarchy-row:hover .list-actions {\n      opacity: 1;\n    }\n\n    /* Context Menu */\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      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 */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002;\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      .header-row {\n        flex-direction: column;\n        gap: 12px;\n        align-items: stretch;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .header-actions {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .search-box {\n        max-width: none;\n      }\n\n      .filter-group {\n        width: 100%;\n      }\n\n      .filter-select {\n        flex: 1;\n        width: 100%;\n      }\n\n      .view-toggle-group {\n        justify-content: center;\n      }\n\n      .lists-table {\n        overflow-x: auto;\n      }\n\n      .col-entity, .col-items, .col-updated {\n        display: none;\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 ? 44 : -1);
+        } }, dependencies: [i4.NgTemplateOutlet, i5.NgSelectOption, i5.ɵNgSelectMultipleOption, i5.DefaultValueAccessor, i5.SelectControlValueAccessor, i5.NgControlStatus, i5.NgModel, i6.LoadingComponent, i3.ListShareDialogComponent], styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-browse-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .browse-header {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\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: 12px;\n      flex-wrap: wrap;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex: 1;\n      min-width: 200px;\n      max-width: 300px;\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;\n      border: 1px solid #ddd;\n      border-radius: 20px;\n      font-size: 14px;\n      width: 100%;\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    }\n\n    .filter-group {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .filter-group label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    .filter-select {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      background: white;\n      cursor: pointer;\n      min-width: 120px;\n    }\n\n    .filter-select:focus {\n      outline: none;\n      border-color: #2196F3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    .sort-select {\n      min-width: 140px;\n    }\n\n    .view-toggle-group {\n      display: flex;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .view-toggle {\n      padding: 8px 12px;\n      background: white;\n      border: none;\n      border-right: 1px solid #ddd;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:last-child {\n      border-right: none;\n    }\n\n    .view-toggle:hover {\n      background: #f5f5f5;\n    }\n\n    .view-toggle.active {\n      background: #2196F3;\n      color: white;\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    .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      transition: background 0.2s;\n    }\n\n    .btn-clear:hover {\n      background: #e0e0e0;\n    }\n\n    /* Content */\n    .browse-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .results-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n    }\n\n    .result-count {\n      font-size: 14px;\n      color: #666;\n    }\n\n    .sort-options {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .sort-options label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    /* Table View */\n    .lists-table {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .lists-table table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .lists-table th {\n      text-align: left;\n      padding: 12px 16px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      background: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .lists-table td {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .list-row {\n      cursor: pointer;\n      transition: background 0.15s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: #f5f5f5;\n    }\n\n    .list-row:focus {\n      background: #e8f4fd;\n    }\n\n    .list-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-row:last-child td {\n      border-bottom: none;\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .col-name { width: 30%; }\n    .col-entity { width: 15%; }\n    .col-items { width: 8%; text-align: center; }\n    .col-sharing { width: 8%; text-align: center; }\n    .col-owner { width: 14%; }\n    .col-updated { width: 15%; }\n    .col-actions { width: 10%; text-align: right; }\n\n    /* Sharing indicators */\n    .sharing-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: #2196F3;\n      font-size: 13px;\n    }\n\n    .sharing-indicator i {\n      font-size: 14px;\n    }\n\n    .share-count {\n      font-weight: 500;\n    }\n\n    .sharing-private {\n      color: #999;\n      font-size: 13px;\n    }\n\n    .sharing-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n      background: #e3f2fd;\n      border-radius: 50%;\n      color: #2196F3;\n      font-size: 11px;\n    }\n\n    .card-footer-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .name-cell {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .list-icon {\n      width: 36px;\n      height: 36px;\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    .name-content {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .list-name {\n      font-weight: 500;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-desc {\n      font-size: 12px;\n      color: #999;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .entity-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      background: #e8f4fd;\n      border-radius: 4px;\n      font-size: 12px;\n      color: #1976D2;\n    }\n\n    .owner-name {\n      color: #666;\n    }\n\n    .owner-name.is-me {\n      color: #2196F3;\n      font-weight: 500;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 6px 10px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .action-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Card 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    .owner-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: #666;\n    }\n\n    .owner-tag.is-me {\n      color: #2196F3;\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: #999;\n    }\n\n    /* Hierarchy View */\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    .hierarchy-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    .hierarchy-row:hover {\n      background: #f5f5f5;\n    }\n\n    .hierarchy-row:focus {\n      background: #e3f2fd;\n    }\n\n    .hierarchy-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .hierarchy-row:hover .list-actions {\n      opacity: 1;\n    }\n\n    /* Context Menu */\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      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 */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002;\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      .header-row {\n        flex-direction: column;\n        gap: 12px;\n        align-items: stretch;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .header-actions {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .search-box {\n        max-width: none;\n      }\n\n      .filter-group {\n        width: 100%;\n      }\n\n      .filter-select {\n        flex: 1;\n        width: 100%;\n      }\n\n      .view-toggle-group {\n        justify-content: center;\n      }\n\n      .lists-table {\n        overflow-x: auto;\n      }\n\n      .col-entity, .col-items, .col-updated {\n        display: none;\n      }\n\n      .lists-grid {\n        grid-template-columns: 1fr;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "], encapsulation: 2 });
 };
 ListsBrowseResource = __decorate([
     RegisterClass(BaseResourceComponent, 'ListsBrowseResource')
@@ -1503,7 +1507,7 @@ ListsBrowseResource = __decorate([
 export { ListsBrowseResource };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListsBrowseResource, [{
         type: Component,
-        args: [{ selector: 'mj-lists-browse-resource', template: `
+        args: [{ standalone: false, selector: 'mj-lists-browse-resource', template: `
     <div class="lists-browse-container">
       <!-- Header -->
       <div class="browse-header">
@@ -1517,7 +1521,7 @@ export { ListsBrowseResource };
             <span>New List</span>
           </button>
         </div>
-
+    
         <div class="header-actions">
           <div class="search-box">
             <i class="fa-solid fa-search"></i>
@@ -1526,31 +1530,37 @@ export { ListsBrowseResource };
               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>
-
+    
           <div class="filter-group">
             <select
               [(ngModel)]="selectedOwner"
               (ngModelChange)="onOwnerFilterChange($event)"
               class="filter-select"
               title="Filter by owner">
-              <option *ngFor="let opt of ownerOptions" [value]="opt.value">{{opt.name}}</option>
+              @for (opt of ownerOptions; track opt) {
+                <option [value]="opt.value">{{opt.name}}</option>
+              }
             </select>
           </div>
-
+    
           <div class="filter-group">
             <select
               [(ngModel)]="selectedEntity"
               (ngModelChange)="onEntityFilterChange($event)"
               class="filter-select"
               title="Filter by entity">
-              <option *ngFor="let opt of entityOptions" [value]="opt.value">{{opt.name}}</option>
+              @for (opt of entityOptions; track opt) {
+                <option [value]="opt.value">{{opt.name}}</option>
+              }
             </select>
           </div>
-
+    
           <div class="view-toggle-group">
             <button
               class="view-toggle"
@@ -1576,395 +1586,461 @@ export { ListsBrowseResource };
           </div>
         </div>
       </div>
-
+    
       <!-- Loading State -->
-      <div class="loading-container" *ngIf="isLoading">
-        <mj-loading text="Loading lists..." size="medium"></mj-loading>
-      </div>
-
-      <!-- Empty State - No Lists -->
-      <div class="empty-state" *ngIf="!isLoading && allLists.length === 0">
-        <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 - No Lists -->
+      @if (!isLoading && allLists.length === 0) {
+        <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>
-
+      }
+    
       <!-- Empty State - No Results -->
-      <div class="empty-state search-empty" *ngIf="!isLoading && allLists.length > 0 && filteredLists.length === 0">
-        <div class="empty-state-icon-wrapper search">
-          <i class="fa-solid fa-filter-circle-xmark"></i>
+      @if (!isLoading && allLists.length > 0 && filteredLists.length === 0) {
+        <div class="empty-state search-empty">
+          <div class="empty-state-icon-wrapper search">
+            <i class="fa-solid fa-filter-circle-xmark"></i>
+          </div>
+          <h3>No Results Found</h3>
+          <p>No lists match your current filters.</p>
+          <p class="empty-hint">Try adjusting your search or filters.</p>
+          <button class="btn-clear" (click)="clearFilters()">Clear All Filters</button>
         </div>
-        <h3>No Results Found</h3>
-        <p>No lists match your current filters.</p>
-        <p class="empty-hint">Try adjusting your search or filters.</p>
-        <button class="btn-clear" (click)="clearFilters()">Clear All Filters</button>
-      </div>
-
+      }
+    
       <!-- Results Content -->
-      <div class="browse-content" *ngIf="!isLoading && filteredLists.length > 0">
-        <div class="results-header">
-          <span class="result-count">{{filteredLists.length}} list{{filteredLists.length !== 1 ? 's' : ''}}</span>
-          <div class="sort-options">
-            <label>Sort:</label>
-            <select
-              [(ngModel)]="selectedSort"
-              (ngModelChange)="onSortChange($event)"
-              class="filter-select sort-select">
-              <option *ngFor="let opt of sortOptions" [value]="opt.value">{{opt.name}}</option>
-            </select>
+      @if (!isLoading && filteredLists.length > 0) {
+        <div class="browse-content">
+          <div class="results-header">
+            <span class="result-count">{{filteredLists.length}} list{{filteredLists.length !== 1 ? 's' : ''}}</span>
+            <div class="sort-options">
+              <label>Sort:</label>
+              <select
+                [(ngModel)]="selectedSort"
+                (ngModelChange)="onSortChange($event)"
+                class="filter-select sort-select">
+                @for (opt of sortOptions; track opt) {
+                  <option [value]="opt.value">{{opt.name}}</option>
+                }
+              </select>
+            </div>
           </div>
-        </div>
-
-        <!-- Table View -->
-        <div class="lists-table" *ngIf="viewMode === 'table'">
-          <table role="grid" aria-label="Lists table">
-            <thead>
-              <tr>
-                <th class="col-name" scope="col">Name</th>
-                <th class="col-entity" scope="col">Entity</th>
-                <th class="col-items" scope="col">Items</th>
-                <th class="col-sharing" scope="col">Shared</th>
-                <th class="col-owner" scope="col">Owner</th>
-                <th class="col-updated" scope="col">Updated</th>
-                <th class="col-actions" scope="col"><span class="sr-only">Actions</span></th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                *ngFor="let item of filteredLists"
-                (click)="openList(item)"
-                (keydown.enter)="openList(item)"
-                class="list-row"
-                tabindex="0"
-                role="row">
-                <td class="col-name" role="gridcell">
-                  <div class="name-cell">
-                    <div class="list-icon" [style.background-color]="getEntityColor(item.entityName)" aria-hidden="true">
+          <!-- Table View -->
+          @if (viewMode === 'table') {
+            <div class="lists-table">
+              <table role="grid" aria-label="Lists table">
+                <thead>
+                  <tr>
+                    <th class="col-name" scope="col">Name</th>
+                    <th class="col-entity" scope="col">Entity</th>
+                    <th class="col-items" scope="col">Items</th>
+                    <th class="col-sharing" scope="col">Shared</th>
+                    <th class="col-owner" scope="col">Owner</th>
+                    <th class="col-updated" scope="col">Updated</th>
+                    <th class="col-actions" scope="col"><span class="sr-only">Actions</span></th>
+                  </tr>
+                </thead>
+                <tbody>
+                  @for (item of filteredLists; track item) {
+                    <tr
+                      (click)="openList(item)"
+                      (keydown.enter)="openList(item)"
+                      class="list-row"
+                      tabindex="0"
+                      role="row">
+                      <td class="col-name" role="gridcell">
+                        <div class="name-cell">
+                          <div class="list-icon" [style.background-color]="getEntityColor(item.entityName)" aria-hidden="true">
+                            <i [class]="getEntityIcon(item.entityName)"></i>
+                          </div>
+                          <div class="name-content">
+                            <span class="list-name">{{item.list.Name}}</span>
+                            @if (item.list.Description) {
+                              <span class="list-desc">{{item.list.Description}}</span>
+                            }
+                          </div>
+                        </div>
+                      </td>
+                      <td class="col-entity" role="gridcell">
+                        <span class="entity-badge">{{item.entityName}}</span>
+                      </td>
+                      <td class="col-items" role="gridcell">{{item.itemCount}}</td>
+                      <td class="col-sharing" role="gridcell">
+                        @if (item.sharingInfo; as sharing) {
+                          @if (sharing.totalShares > 0) {
+                            <span class="sharing-indicator">
+                              <i class="fa-solid fa-share-nodes"></i>
+                              <span class="share-count">{{sharing.totalShares}}</span>
+                            </span>
+                          }
+                          @if (sharing.totalShares === 0) {
+                            <span class="sharing-private">
+                              <i class="fa-solid fa-lock"></i>
+                            </span>
+                          }
+                        }
+                        @if (!item.sharingInfo) {
+                          <span class="sharing-private">
+                            <i class="fa-solid fa-lock"></i>
+                          </span>
+                        }
+                      </td>
+                      <td class="col-owner" role="gridcell">
+                        <span class="owner-name" [class.is-me]="item.isOwner">
+                          {{item.isOwner ? 'You' : item.ownerName}}
+                        </span>
+                      </td>
+                      <td class="col-updated" role="gridcell">{{formatDate(item.list.__mj_UpdatedAt)}}</td>
+                      <td class="col-actions" role="gridcell">
+                        @if (item.isOwner) {
+                          <button
+                            class="action-btn"
+                            (click)="openListMenu($event, item)"
+                            title="More options">
+                            <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
+                          </button>
+                        }
+                      </td>
+                    </tr>
+                  }
+                </tbody>
+              </table>
+            </div>
+          }
+          <!-- Card View -->
+          @if (viewMode === 'card') {
+            <div class="lists-grid" role="list" aria-label="Lists">
+              @for (item of filteredLists; track item) {
+                <div
+                  class="list-card"
+                  (click)="openList(item)"
+                  (keydown.enter)="openList(item)"
+                  tabindex="0"
+                  role="listitem">
+                  <div class="card-header">
+                    <div class="card-icon" [style.background-color]="getEntityColor(item.entityName)" aria-hidden="true">
                       <i [class]="getEntityIcon(item.entityName)"></i>
                     </div>
-                    <div class="name-content">
-                      <span class="list-name">{{item.list.Name}}</span>
-                      <span class="list-desc" *ngIf="item.list.Description">{{item.list.Description}}</span>
+                    @if (item.isOwner) {
+                      <div class="card-menu">
+                        <button class="menu-btn" (click)="openListMenu($event, item)">
+                          <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>
-                </td>
-                <td class="col-entity" role="gridcell">
-                  <span class="entity-badge">{{item.entityName}}</span>
-                </td>
-                <td class="col-items" role="gridcell">{{item.itemCount}}</td>
-                <td class="col-sharing" role="gridcell">
-                  <ng-container *ngIf="item.sharingInfo as sharing">
-                    <span class="sharing-indicator" *ngIf="sharing.totalShares > 0">
-                      <i class="fa-solid fa-share-nodes"></i>
-                      <span class="share-count">{{sharing.totalShares}}</span>
-                    </span>
-                    <span class="sharing-private" *ngIf="sharing.totalShares === 0">
-                      <i class="fa-solid fa-lock"></i>
+                  <div class="card-footer">
+                    <span class="owner-tag" [class.is-me]="item.isOwner">
+                      <i class="fa-solid fa-user"></i>
+                      {{item.isOwner ? 'You' : item.ownerName}}
                     </span>
-                  </ng-container>
-                  <span class="sharing-private" *ngIf="!item.sharingInfo">
-                    <i class="fa-solid fa-lock"></i>
-                  </span>
-                </td>
-                <td class="col-owner" role="gridcell">
-                  <span class="owner-name" [class.is-me]="item.isOwner">
-                    {{item.isOwner ? 'You' : item.ownerName}}
-                  </span>
-                </td>
-                <td class="col-updated" role="gridcell">{{formatDate(item.list.__mj_UpdatedAt)}}</td>
-                <td class="col-actions" role="gridcell">
-                  <button
-                    class="action-btn"
-                    *ngIf="item.isOwner"
-                    (click)="openListMenu($event, item)"
-                    title="More options">
-                    <i class="fa-solid fa-ellipsis-v" aria-hidden="true"></i>
-                  </button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-
-        <!-- Card View -->
-        <div class="lists-grid" *ngIf="viewMode === 'card'" role="list" aria-label="Lists">
-          <div
-            class="list-card"
-            *ngFor="let item of filteredLists"
-            (click)="openList(item)"
-            (keydown.enter)="openList(item)"
-            tabindex="0"
-            role="listitem">
-            <div class="card-header">
-              <div class="card-icon" [style.background-color]="getEntityColor(item.entityName)" aria-hidden="true">
-                <i [class]="getEntityIcon(item.entityName)"></i>
-              </div>
-              <div class="card-menu" *ngIf="item.isOwner">
-                <button class="menu-btn" (click)="openListMenu($event, item)">
-                  <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>
+                    <div class="card-footer-right">
+                      @if (item.sharingInfo; as sharing) {
+                        @if (sharing.totalShares > 0) {
+                          <span class="sharing-badge" [title]="'Shared with ' + sharing.totalShares + ' user(s)/role(s)'">
+                            <i class="fa-solid fa-share-nodes"></i>
+                          </span>
+                        }
+                      }
+                      <span class="date-info">{{formatDate(item.list.__mj_UpdatedAt)}}</span>
+                    </div>
+                  </div>
+                </div>
+              }
             </div>
-            <div class="card-footer">
-              <span class="owner-tag" [class.is-me]="item.isOwner">
-                <i class="fa-solid fa-user"></i>
-                {{item.isOwner ? 'You' : item.ownerName}}
-              </span>
-              <div class="card-footer-right">
-                <ng-container *ngIf="item.sharingInfo as sharing">
-                  <span class="sharing-badge" *ngIf="sharing.totalShares > 0" [title]="'Shared with ' + sharing.totalShares + ' user(s)/role(s)'">
-                    <i class="fa-solid fa-share-nodes"></i>
-                  </span>
-                </ng-container>
-                <span class="date-info">{{formatDate(item.list.__mj_UpdatedAt)}}</span>
-              </div>
+          }
+          <!-- Hierarchy View -->
+          @if (viewMode === 'hierarchy') {
+            <div class="category-tree">
+              @for (node of categoryTree; track node) {
+                <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { node: node, depth: 0 }"></ng-container>
+              }
             </div>
-          </div>
+          }
         </div>
-
-        <!-- Hierarchy View -->
-        <div class="category-tree" *ngIf="viewMode === 'hierarchy'">
-          <ng-container *ngFor="let node of categoryTree">
-            <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { node: node, depth: 0 }"></ng-container>
-          </ng-container>
-        </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 hierarchy-row"
-              *ngFor="let item of node.lists"
-              (click)="openList(item)"
-              (keydown.enter)="openList(item)"
-              tabindex="0"
-              role="listitem">
-              <div class="list-icon" [style.background-color]="getEntityColor(item.entityName)" aria-hidden="true">
-                <i [class]="getEntityIcon(item.entityName)"></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 *ngIf="!item.isOwner"> &middot; {{item.ownerName}}</span>
-                </span>
-              </div>
-              <div class="list-actions" *ngIf="item.isOwner">
-                <button class="action-btn" (click)="openListMenu($event, item)">
-                  <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 hierarchy-row"
+                  (click)="openList(item)"
+                  (keydown.enter)="openList(item)"
+                  tabindex="0"
+                  role="listitem">
+                  <div class="list-icon" [style.background-color]="getEntityColor(item.entityName)" aria-hidden="true">
+                    <i [class]="getEntityIcon(item.entityName)"></i>
+                  </div>
+                  <div class="list-info">
+                    <span class="list-name">{{item.list.Name}}</span>
+                    <span class="list-meta">
+                      {{item.entityName}} &middot; {{item.itemCount}} items
+                      @if (!item.isOwner) {
+                        <span> &middot; {{item.ownerName}}</span>
+                      }
+                    </span>
+                  </div>
+                  @if (item.isOwner) {
+                    <div class="list-actions">
+                      <button class="action-btn" (click)="openListMenu($event, item)">
+                        <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 -->
-      <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)="openShareDialog()">
-          <i class="fa-solid fa-share-nodes"></i>
-          Share
-        </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 Dialog -->
-      <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)="openShareDialog()">
+            <i class="fa-solid fa-share-nodes"></i>
+            Share
+          </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 Dialog -->
+      @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" *ngIf="!editingList">
-            <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"
+              rows="3"></textarea>
+            </div>
+            @if (!editingList) {
+              <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" />
+                </div>
+              </div>
+            }
+            @if (editingList) {
+              <div class="form-group">
+                <label>Entity</label>
+                <input type="text" [value]="entitySearchTerm" class="form-input" disabled />
+              </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" *ngIf="editingList">
-            <label>Entity</label>
-            <input type="text" [value]="entitySearchTerm" class="form-input" disabled />
-          </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 || (!editingList && !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 || (!editingList && !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()" [disabled]="isDeleting">
-            <i *ngIf="isDeleting" class="fa-solid fa-spinner fa-spin"></i>
-            {{isDeleting ? 'Deleting...' : 'Delete'}}
-          </button>
-          <button class="btn-secondary" (click)="cancelDelete()" [disabled]="isDeleting">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()" [disabled]="isDeleting">
+              @if (isDeleting) {
+                <i class="fa-solid fa-spinner fa-spin"></i>
+              }
+              {{isDeleting ? 'Deleting...' : 'Delete'}}
+            </button>
+            <button class="btn-secondary" (click)="cancelDelete()" [disabled]="isDeleting">Cancel</button>
+          </div>
         </div>
-      </div>
-
+      }
+    
       <!-- Share Dialog -->
-      <mj-list-share-dialog
-        *ngIf="shareDialogConfig"
-        [config]="shareDialogConfig"
-        [visible]="showShareDialog"
-        (complete)="onShareComplete($event)"
-        (cancel)="onShareCancel()">
-      </mj-list-share-dialog>
-
+      @if (shareDialogConfig) {
+        <mj-list-share-dialog
+          [config]="shareDialogConfig"
+          [visible]="showShareDialog"
+          (complete)="onShareComplete($event)"
+          (cancel)="onShareCancel()">
+        </mj-list-share-dialog>
+      }
+    
       <!-- Entity Dropdown Portal -->
-      <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 filteredEntitiesList"
-            (click)="selectEntity(entity)">
-            {{entity.Name}}
-          </div>
-          <div class="dropdown-empty" *ngIf="filteredEntitiesList.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 filteredEntitiesList; track entity) {
+              <div
+                class="dropdown-item"
+                (click)="selectEntity(entity)">
+                {{entity.Name}}
+              </div>
+            }
+            @if (filteredEntitiesList.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-browse-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .browse-header {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\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: 12px;\n      flex-wrap: wrap;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex: 1;\n      min-width: 200px;\n      max-width: 300px;\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;\n      border: 1px solid #ddd;\n      border-radius: 20px;\n      font-size: 14px;\n      width: 100%;\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    }\n\n    .filter-group {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .filter-group label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    .filter-select {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      background: white;\n      cursor: pointer;\n      min-width: 120px;\n    }\n\n    .filter-select:focus {\n      outline: none;\n      border-color: #2196F3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    .sort-select {\n      min-width: 140px;\n    }\n\n    .view-toggle-group {\n      display: flex;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .view-toggle {\n      padding: 8px 12px;\n      background: white;\n      border: none;\n      border-right: 1px solid #ddd;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:last-child {\n      border-right: none;\n    }\n\n    .view-toggle:hover {\n      background: #f5f5f5;\n    }\n\n    .view-toggle.active {\n      background: #2196F3;\n      color: white;\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    .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      transition: background 0.2s;\n    }\n\n    .btn-clear:hover {\n      background: #e0e0e0;\n    }\n\n    /* Content */\n    .browse-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .results-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n    }\n\n    .result-count {\n      font-size: 14px;\n      color: #666;\n    }\n\n    .sort-options {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .sort-options label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    /* Table View */\n    .lists-table {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .lists-table table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .lists-table th {\n      text-align: left;\n      padding: 12px 16px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      background: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .lists-table td {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .list-row {\n      cursor: pointer;\n      transition: background 0.15s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: #f5f5f5;\n    }\n\n    .list-row:focus {\n      background: #e8f4fd;\n    }\n\n    .list-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-row:last-child td {\n      border-bottom: none;\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .col-name { width: 30%; }\n    .col-entity { width: 15%; }\n    .col-items { width: 8%; text-align: center; }\n    .col-sharing { width: 8%; text-align: center; }\n    .col-owner { width: 14%; }\n    .col-updated { width: 15%; }\n    .col-actions { width: 10%; text-align: right; }\n\n    /* Sharing indicators */\n    .sharing-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: #2196F3;\n      font-size: 13px;\n    }\n\n    .sharing-indicator i {\n      font-size: 14px;\n    }\n\n    .share-count {\n      font-weight: 500;\n    }\n\n    .sharing-private {\n      color: #999;\n      font-size: 13px;\n    }\n\n    .sharing-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n      background: #e3f2fd;\n      border-radius: 50%;\n      color: #2196F3;\n      font-size: 11px;\n    }\n\n    .card-footer-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .name-cell {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .list-icon {\n      width: 36px;\n      height: 36px;\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    .name-content {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .list-name {\n      font-weight: 500;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-desc {\n      font-size: 12px;\n      color: #999;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .entity-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      background: #e8f4fd;\n      border-radius: 4px;\n      font-size: 12px;\n      color: #1976D2;\n    }\n\n    .owner-name {\n      color: #666;\n    }\n\n    .owner-name.is-me {\n      color: #2196F3;\n      font-weight: 500;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 6px 10px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .action-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Card 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    .owner-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: #666;\n    }\n\n    .owner-tag.is-me {\n      color: #2196F3;\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: #999;\n    }\n\n    /* Hierarchy View */\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    .hierarchy-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    .hierarchy-row:hover {\n      background: #f5f5f5;\n    }\n\n    .hierarchy-row:focus {\n      background: #e3f2fd;\n    }\n\n    .hierarchy-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .hierarchy-row:hover .list-actions {\n      opacity: 1;\n    }\n\n    /* Context Menu */\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      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 */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002;\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      .header-row {\n        flex-direction: column;\n        gap: 12px;\n        align-items: stretch;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .header-actions {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .search-box {\n        max-width: none;\n      }\n\n      .filter-group {\n        width: 100%;\n      }\n\n      .filter-select {\n        flex: 1;\n        width: 100%;\n      }\n\n      .view-toggle-group {\n        justify-content: center;\n      }\n\n      .lists-table {\n        overflow-x: auto;\n      }\n\n      .col-entity, .col-items, .col-updated {\n        display: none;\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-browse-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .browse-header {\n      display: flex;\n      flex-direction: column;\n      gap: 12px;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-row {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\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: 12px;\n      flex-wrap: wrap;\n    }\n\n    .search-box {\n      position: relative;\n      display: flex;\n      align-items: center;\n      flex: 1;\n      min-width: 200px;\n      max-width: 300px;\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;\n      border: 1px solid #ddd;\n      border-radius: 20px;\n      font-size: 14px;\n      width: 100%;\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    }\n\n    .filter-group {\n      display: flex;\n      align-items: center;\n      gap: 6px;\n    }\n\n    .filter-group label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    .filter-select {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      font-size: 14px;\n      background: white;\n      cursor: pointer;\n      min-width: 120px;\n    }\n\n    .filter-select:focus {\n      outline: none;\n      border-color: #2196F3;\n      box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);\n    }\n\n    .sort-select {\n      min-width: 140px;\n    }\n\n    .view-toggle-group {\n      display: flex;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      overflow: hidden;\n    }\n\n    .view-toggle {\n      padding: 8px 12px;\n      background: white;\n      border: none;\n      border-right: 1px solid #ddd;\n      color: #666;\n      cursor: pointer;\n      transition: all 0.2s;\n    }\n\n    .view-toggle:last-child {\n      border-right: none;\n    }\n\n    .view-toggle:hover {\n      background: #f5f5f5;\n    }\n\n    .view-toggle.active {\n      background: #2196F3;\n      color: white;\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    .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      transition: background 0.2s;\n    }\n\n    .btn-clear:hover {\n      background: #e0e0e0;\n    }\n\n    /* Content */\n    .browse-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 16px 24px;\n    }\n\n    .results-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 16px;\n    }\n\n    .result-count {\n      font-size: 14px;\n      color: #666;\n    }\n\n    .sort-options {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .sort-options label {\n      font-size: 13px;\n      color: #666;\n    }\n\n    /* Table View */\n    .lists-table {\n      background: white;\n      border-radius: 8px;\n      overflow: hidden;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n    }\n\n    .lists-table table {\n      width: 100%;\n      border-collapse: collapse;\n    }\n\n    .lists-table th {\n      text-align: left;\n      padding: 12px 16px;\n      font-size: 12px;\n      font-weight: 600;\n      color: #666;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      background: #fafafa;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .lists-table td {\n      padding: 12px 16px;\n      border-bottom: 1px solid #f0f0f0;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .list-row {\n      cursor: pointer;\n      transition: background 0.15s;\n      outline: none;\n    }\n\n    .list-row:hover {\n      background: #f5f5f5;\n    }\n\n    .list-row:focus {\n      background: #e8f4fd;\n    }\n\n    .list-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-row:last-child td {\n      border-bottom: none;\n    }\n\n    .sr-only {\n      position: absolute;\n      width: 1px;\n      height: 1px;\n      padding: 0;\n      margin: -1px;\n      overflow: hidden;\n      clip: rect(0, 0, 0, 0);\n      white-space: nowrap;\n      border: 0;\n    }\n\n    .col-name { width: 30%; }\n    .col-entity { width: 15%; }\n    .col-items { width: 8%; text-align: center; }\n    .col-sharing { width: 8%; text-align: center; }\n    .col-owner { width: 14%; }\n    .col-updated { width: 15%; }\n    .col-actions { width: 10%; text-align: right; }\n\n    /* Sharing indicators */\n    .sharing-indicator {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      color: #2196F3;\n      font-size: 13px;\n    }\n\n    .sharing-indicator i {\n      font-size: 14px;\n    }\n\n    .share-count {\n      font-weight: 500;\n    }\n\n    .sharing-private {\n      color: #999;\n      font-size: 13px;\n    }\n\n    .sharing-badge {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n      background: #e3f2fd;\n      border-radius: 50%;\n      color: #2196F3;\n      font-size: 11px;\n    }\n\n    .card-footer-right {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n    }\n\n    .name-cell {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .list-icon {\n      width: 36px;\n      height: 36px;\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    .name-content {\n      display: flex;\n      flex-direction: column;\n      min-width: 0;\n    }\n\n    .list-name {\n      font-weight: 500;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .list-desc {\n      font-size: 12px;\n      color: #999;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n    }\n\n    .entity-badge {\n      display: inline-block;\n      padding: 2px 8px;\n      background: #e8f4fd;\n      border-radius: 4px;\n      font-size: 12px;\n      color: #1976D2;\n    }\n\n    .owner-name {\n      color: #666;\n    }\n\n    .owner-name.is-me {\n      color: #2196F3;\n      font-weight: 500;\n    }\n\n    .action-btn {\n      background: none;\n      border: none;\n      padding: 6px 10px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .action-btn:hover {\n      background: #e0e0e0;\n      color: #666;\n    }\n\n    /* Card 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    .owner-tag {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n      font-size: 12px;\n      color: #666;\n    }\n\n    .owner-tag.is-me {\n      color: #2196F3;\n    }\n\n    .date-info {\n      font-size: 12px;\n      color: #999;\n    }\n\n    /* Hierarchy View */\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    .hierarchy-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    .hierarchy-row:hover {\n      background: #f5f5f5;\n    }\n\n    .hierarchy-row:focus {\n      background: #e3f2fd;\n    }\n\n    .hierarchy-row:focus-visible {\n      background: #e3f2fd;\n      box-shadow: inset 3px 0 0 #2196F3;\n    }\n\n    .list-info {\n      flex: 1;\n      min-width: 0;\n    }\n\n    .list-meta {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .list-actions {\n      display: flex;\n      gap: 4px;\n      opacity: 0;\n      transition: opacity 0.2s;\n    }\n\n    .hierarchy-row:hover .list-actions {\n      opacity: 1;\n    }\n\n    /* Context Menu */\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      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 */\n    .entity-dropdown-portal {\n      position: fixed;\n      z-index: 10002;\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      .header-row {\n        flex-direction: column;\n        gap: 12px;\n        align-items: stretch;\n      }\n\n      .btn-create {\n        width: 100%;\n        justify-content: center;\n      }\n\n      .header-actions {\n        flex-direction: column;\n        align-items: stretch;\n      }\n\n      .search-box {\n        max-width: none;\n      }\n\n      .filter-group {\n        width: 100%;\n      }\n\n      .filter-select {\n        flex: 1;\n        width: 100%;\n      }\n\n      .view-toggle-group {\n        justify-content: center;\n      }\n\n      .lists-table {\n        overflow-x: auto;\n      }\n\n      .col-entity, .col-items, .col-updated {\n        display: none;\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 }, { type: i3.ListSharingService }], { onDocumentClick: [{
             type: HostListener,
             args: ['document:click', ['$event']]
@@ -1972,5 +2048,5 @@ export { ListsBrowseResource };
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsBrowseResource, { className: "ListsBrowseResource", filePath: "src/Lists/components/lists-browse-resource.component.ts", lineNumber: 1607 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsBrowseResource, { className: "ListsBrowseResource", filePath: "src/lists/components/lists-browse-resource.component.ts", lineNumber: 1675 }); })();
 //# sourceMappingURL=lists-browse-resource.component.js.map