@memberjunction/ng-dashboards 3.4.0 → 4.0.0

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

@@ -15,15 +15,15 @@ import * as i2 from "@angular/common";
 import * as i3 from "@angular/forms";
 import * as i4 from "@memberjunction/ng-shared-generic";
 const _c0 = a0 => ({ vm: a0 });
-function ListsCategoriesResource_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 12);
-    i0.ɵɵelement(1, "mj-loading", 13);
+function ListsCategoriesResource_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 8);
+    i0.ɵɵelement(1, "mj-loading", 12);
     i0.ɵɵelementEnd();
 } }
-function ListsCategoriesResource_div_12_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 14)(1, "div", 15);
-    i0.ɵɵelement(2, "div", 16)(3, "i", 17);
+    i0.ɵɵelementStart(0, "div", 9)(1, "div", 13);
+    i0.ɵɵelement(2, "div", 14)(3, "i", 15);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "h3");
     i0.ɵɵtext(5, "No Categories Yet");
@@ -31,41 +31,38 @@ function ListsCategoriesResource_div_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(6, "p");
     i0.ɵɵtext(7, "Categories help you organize lists into logical groups.");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 18)(9, "div", 19);
-    i0.ɵɵelement(10, "i", 20);
+    i0.ɵɵelementStart(8, "div", 16)(9, "div", 17);
+    i0.ɵɵelement(10, "i", 18);
     i0.ɵɵelementStart(11, "span");
     i0.ɵɵtext(12, "Create hierarchical folder structures");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 19);
-    i0.ɵɵelement(14, "i", 20);
+    i0.ɵɵelementStart(13, "div", 17);
+    i0.ɵɵelement(14, "i", 18);
     i0.ɵɵelementStart(15, "span");
     i0.ɵɵtext(16, "Quickly find related lists");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "button", 21);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_12_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createCategory()); });
+    i0.ɵɵelementStart(17, "button", 19);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_12_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createCategory()); });
     i0.ɵɵelement(18, "i", 7);
     i0.ɵɵtext(19, " Create Your First Category ");
     i0.ɵɵelementEnd()();
 } }
-function ListsCategoriesResource_div_13_ng_container_9_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_Conditional_13_For_10_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function ListsCategoriesResource_div_13_ng_container_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ListsCategoriesResource_div_13_ng_container_9_ng_container_1_Template, 1, 0, "ng-container", 31);
-    i0.ɵɵelementContainerEnd();
+function ListsCategoriesResource_Conditional_13_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListsCategoriesResource_Conditional_13_For_10_ng_container_0_Template, 1, 0, "ng-container", 27);
 } if (rf & 2) {
     const vm_r4 = ctx.$implicit;
     i0.ɵɵnextContext(2);
     const categoryNodeTemplate_r5 = i0.ɵɵreference(15);
-    i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, vm_r4));
 } }
-function ListsCategoriesResource_div_13_div_10_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39)(1, "label");
+function ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 34)(1, "label");
     i0.ɵɵtext(2, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 40);
+    i0.ɵɵelementStart(3, "span", 35);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -73,9 +70,9 @@ function ListsCategoriesResource_div_13_div_10_div_15_Template(rf, ctx) { if (rf
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.selectedCategory.Description);
 } }
-function ListsCategoriesResource_div_13_div_10_div_32_div_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 50);
-    i0.ɵɵelement(1, "i", 51);
+function ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_32_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵelement(1, "i", 43);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -84,64 +81,64 @@ function ListsCategoriesResource_div_13_div_10_div_32_div_4_Template(rf, ctx) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(list_r7.Name);
 } }
-function ListsCategoriesResource_div_13_div_10_div_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 47)(1, "h4");
+function ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 40)(1, "h4");
     i0.ɵɵtext(2, "Lists in this category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 48);
-    i0.ɵɵtemplate(4, ListsCategoriesResource_div_13_div_10_div_32_div_4_Template, 4, 1, "div", 49);
+    i0.ɵɵelementStart(3, "div", 41);
+    i0.ɵɵrepeaterCreate(4, ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_32_For_5_Template, 4, 1, "div", 42, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngForOf", ctx_r2.selectedCategoryLists);
+    i0.ɵɵrepeater(ctx_r2.selectedCategoryLists);
 } }
-function ListsCategoriesResource_div_13_div_10_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_Conditional_13_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 32)(1, "div", 25)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 25)(1, "div", 22)(2, "h3");
     i0.ɵɵtext(3, "Category Details");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 33)(5, "button", 34);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_13_div_10_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.editCategory()); });
-    i0.ɵɵelement(6, "i", 35);
+    i0.ɵɵelementStart(4, "div", 28)(5, "button", 29);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_Conditional_11_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.editCategory()); });
+    i0.ɵɵelement(6, "i", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 36);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_13_div_10_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.deleteCategory()); });
-    i0.ɵɵelement(8, "i", 37);
+    i0.ɵɵelementStart(7, "button", 31);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_Conditional_11_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.deleteCategory()); });
+    i0.ɵɵelement(8, "i", 32);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 38)(10, "div", 39)(11, "label");
+    i0.ɵɵelementStart(9, "div", 33)(10, "div", 34)(11, "label");
     i0.ɵɵtext(12, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 40);
+    i0.ɵɵelementStart(13, "span", 35);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(15, ListsCategoriesResource_div_13_div_10_div_15_Template, 5, 1, "div", 41);
-    i0.ɵɵelementStart(16, "div", 39)(17, "label");
+    i0.ɵɵconditionalCreate(15, ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_15_Template, 5, 1, "div", 34);
+    i0.ɵɵelementStart(16, "div", 34)(17, "label");
     i0.ɵɵtext(18, "Parent Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 40);
+    i0.ɵɵelementStart(19, "span", 35);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 42)(22, "div", 43)(23, "span", 44);
+    i0.ɵɵelementStart(21, "div", 36)(22, "div", 37)(23, "span", 38);
     i0.ɵɵtext(24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "span", 45);
+    i0.ɵɵelementStart(25, "span", 39);
     i0.ɵɵtext(26, "Lists");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 43)(28, "span", 44);
+    i0.ɵɵelementStart(27, "div", 37)(28, "span", 38);
     i0.ɵɵtext(29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 45);
+    i0.ɵɵelementStart(30, "span", 39);
     i0.ɵɵtext(31, "Subcategories");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(32, ListsCategoriesResource_div_13_div_10_div_32_Template, 5, 1, "div", 46);
+    i0.ɵɵconditionalCreate(32, ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_32_Template, 6, 0, "div", 40);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(14);
     i0.ɵɵtextInterpolate(ctx_r2.selectedCategory.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.selectedCategory.Description);
+    i0.ɵɵconditional(ctx_r2.selectedCategory.Description ? 15 : -1);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate1(" ", ctx_r2.getParentCategoryName(ctx_r2.selectedCategory) || "(Top Level)", " ");
     i0.ɵɵadvance(4);
@@ -149,42 +146,43 @@ function ListsCategoriesResource_div_13_div_10_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r2.getSelectedCategoryChildCount());
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r2.selectedCategoryLists.length > 0);
+    i0.ɵɵconditional(ctx_r2.selectedCategoryLists.length > 0 ? 32 : -1);
 } }
-function ListsCategoriesResource_div_13_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 52)(1, "div", 53);
-    i0.ɵɵelement(2, "i", 54);
+function ListsCategoriesResource_Conditional_13_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 26)(1, "div", 44);
+    i0.ɵɵelement(2, "i", 45);
     i0.ɵɵelementStart(3, "p");
     i0.ɵɵtext(4, "Select a category to view details");
     i0.ɵɵelementEnd()()();
 } }
-function ListsCategoriesResource_div_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23)(2, "div", 24)(3, "div", 25)(4, "h3");
+function ListsCategoriesResource_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10)(1, "div", 20)(2, "div", 21)(3, "div", 22)(4, "h3");
     i0.ɵɵtext(5, "Categories");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 26);
+    i0.ɵɵelementStart(6, "span", 23);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 27);
-    i0.ɵɵtemplate(9, ListsCategoriesResource_div_13_ng_container_9_Template, 2, 4, "ng-container", 28);
+    i0.ɵɵelementStart(8, "div", 24);
+    i0.ɵɵrepeaterCreate(9, ListsCategoriesResource_Conditional_13_For_10_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(10, ListsCategoriesResource_div_13_div_10_Template, 33, 6, "div", 29)(11, ListsCategoriesResource_div_13_div_11_Template, 5, 0, "div", 30);
+    i0.ɵɵconditionalCreate(11, ListsCategoriesResource_Conditional_13_Conditional_11_Template, 33, 6, "div", 25);
+    i0.ɵɵconditionalCreate(12, ListsCategoriesResource_Conditional_13_Conditional_12_Template, 5, 0, "div", 26);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(ctx_r2.categories.length);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r2.getTopLevelCategories());
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.selectedCategory);
+    i0.ɵɵrepeater(ctx_r2.getTopLevelCategories());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r2.selectedCategory ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.selectedCategory);
+    i0.ɵɵconditional(!ctx_r2.selectedCategory ? 12 : -1);
 } }
-function ListsCategoriesResource_ng_template_14_button_2_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_ng_template_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 63);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_ng_template_14_button_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const vm_r9 = i0.ɵɵnextContext().vm; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleExpand($event, vm_r9)); });
+    i0.ɵɵelementStart(0, "button", 54);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_ng_template_14_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const vm_r9 = i0.ɵɵnextContext().vm; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleExpand($event, vm_r9)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -192,46 +190,44 @@ function ListsCategoriesResource_ng_template_14_button_2_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵclassMap(vm_r9.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
 } }
-function ListsCategoriesResource_ng_template_14_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 64);
+function ListsCategoriesResource_ng_template_14_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 49);
 } }
-function ListsCategoriesResource_ng_template_14_div_9_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_ng_template_14_Conditional_9_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function ListsCategoriesResource_ng_template_14_div_9_ng_container_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, ListsCategoriesResource_ng_template_14_div_9_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 31);
-    i0.ɵɵelementContainerEnd();
+function ListsCategoriesResource_ng_template_14_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListsCategoriesResource_ng_template_14_Conditional_9_For_2_ng_container_0_Template, 1, 0, "ng-container", 27);
 } if (rf & 2) {
     const childVm_r11 = ctx.$implicit;
     i0.ɵɵnextContext(3);
     const categoryNodeTemplate_r5 = i0.ɵɵreference(15);
-    i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, childVm_r11));
 } }
-function ListsCategoriesResource_ng_template_14_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 65);
-    i0.ɵɵtemplate(1, ListsCategoriesResource_ng_template_14_div_9_ng_container_1_Template, 2, 4, "ng-container", 28);
+function ListsCategoriesResource_ng_template_14_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 53);
+    i0.ɵɵrepeaterCreate(1, ListsCategoriesResource_ng_template_14_Conditional_9_For_2_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const vm_r9 = i0.ɵɵnextContext().vm;
     const ctx_r2 = i0.ɵɵnextContext();
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.getChildCategories(vm_r9.category));
+    i0.ɵɵrepeater(ctx_r2.getChildCategories(vm_r9.category));
 } }
 function ListsCategoriesResource_ng_template_14_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "div", 56);
+    i0.ɵɵelementStart(0, "div", 46)(1, "div", 47);
     i0.ɵɵlistener("click", function ListsCategoriesResource_ng_template_14_Template_div_click_1_listener() { const vm_r9 = i0.ɵɵrestoreView(_r8).vm; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectCategory(vm_r9.category)); })("keydown.enter", function ListsCategoriesResource_ng_template_14_Template_div_keydown_enter_1_listener() { const vm_r9 = i0.ɵɵrestoreView(_r8).vm; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectCategory(vm_r9.category)); })("keydown.space", function ListsCategoriesResource_ng_template_14_Template_div_keydown_space_1_listener($event) { const vm_r9 = i0.ɵɵrestoreView(_r8).vm; const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.selectCategory(vm_r9.category); return i0.ɵɵresetView($event.preventDefault()); })("keydown.arrowRight", function ListsCategoriesResource_ng_template_14_Template_div_keydown_arrowRight_1_listener($event) { const vm_r9 = i0.ɵɵrestoreView(_r8).vm; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.expandNode($event, vm_r9)); })("keydown.arrowLeft", function ListsCategoriesResource_ng_template_14_Template_div_keydown_arrowLeft_1_listener($event) { const vm_r9 = i0.ɵɵrestoreView(_r8).vm; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.collapseNode($event, vm_r9)); });
-    i0.ɵɵtemplate(2, ListsCategoriesResource_ng_template_14_button_2_Template, 2, 2, "button", 57)(3, ListsCategoriesResource_ng_template_14_span_3_Template, 1, 0, "span", 58);
-    i0.ɵɵelement(4, "i", 59);
-    i0.ɵɵelementStart(5, "span", 60);
+    i0.ɵɵconditionalCreate(2, ListsCategoriesResource_ng_template_14_Conditional_2_Template, 2, 2, "button", 48);
+    i0.ɵɵconditionalCreate(3, ListsCategoriesResource_ng_template_14_Conditional_3_Template, 1, 0, "span", 49);
+    i0.ɵɵelement(4, "i", 50);
+    i0.ɵɵelementStart(5, "span", 51);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 61);
+    i0.ɵɵelementStart(7, "span", 52);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(9, ListsCategoriesResource_ng_template_14_div_9_Template, 2, 1, "div", 62);
+    i0.ɵɵconditionalCreate(9, ListsCategoriesResource_ng_template_14_Conditional_9_Template, 3, 0, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const vm_r9 = ctx.vm;
@@ -241,9 +237,9 @@ function ListsCategoriesResource_ng_template_14_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵclassProp("selected", (ctx_r2.selectedCategory == null ? null : ctx_r2.selectedCategory.ID) === vm_r9.category.ID);
     i0.ɵɵattribute("aria-expanded", ctx_r2.hasChildren(vm_r9.category) ? vm_r9.isExpanded : null)("aria-selected", (ctx_r2.selectedCategory == null ? null : ctx_r2.selectedCategory.ID) === vm_r9.category.ID)("aria-label", vm_r9.category.Name + " - " + vm_r9.listCount + " lists");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.hasChildren(vm_r9.category));
+    i0.ɵɵconditional(ctx_r2.hasChildren(vm_r9.category) ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r2.hasChildren(vm_r9.category));
+    i0.ɵɵconditional(!ctx_r2.hasChildren(vm_r9.category) ? 3 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("fa-folder-open", vm_r9.isExpanded);
     i0.ɵɵadvance(2);
@@ -251,10 +247,10 @@ function ListsCategoriesResource_ng_template_14_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(vm_r9.listCount);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", vm_r9.isExpanded && ctx_r2.hasChildren(vm_r9.category));
+    i0.ɵɵconditional(vm_r9.isExpanded && ctx_r2.hasChildren(vm_r9.category) ? 9 : -1);
 } }
-function ListsCategoriesResource_div_16_option_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 82);
+function ListsCategoriesResource_Conditional_16_For_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 66);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -263,49 +259,49 @@ function ListsCategoriesResource_div_16_option_21_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(parent_r13.displayName);
 } }
-function ListsCategoriesResource_div_16_i_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 83);
+function ListsCategoriesResource_Conditional_16_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 69);
 } }
-function ListsCategoriesResource_div_16_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_Conditional_16_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 66);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_16_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
-    i0.ɵɵelementStart(1, "div", 67);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_16_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 68)(3, "h3");
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_16_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
+    i0.ɵɵelementStart(1, "div", 56);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_16_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 57)(3, "h3");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 69);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
-    i0.ɵɵelement(6, "i", 70);
+    i0.ɵɵelementStart(5, "button", 58);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
+    i0.ɵɵelement(6, "i", 59);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 71)(8, "div", 72)(9, "div", 73)(10, "label");
+    i0.ɵɵelementStart(7, "div", 60)(8, "div", 61)(9, "div", 62)(10, "label");
     i0.ɵɵtext(11, "Name *");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "input", 74);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_div_16_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.dialogName, $event) || (ctx_r2.dialogName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(12, "input", 63);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_Conditional_16_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.dialogName, $event) || (ctx_r2.dialogName = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 73)(14, "label");
+    i0.ɵɵelementStart(13, "div", 62)(14, "label");
     i0.ɵɵtext(15, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "textarea", 75);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_div_16_Template_textarea_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.dialogDescription, $event) || (ctx_r2.dialogDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(16, "textarea", 64);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_Conditional_16_Template_textarea_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.dialogDescription, $event) || (ctx_r2.dialogDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 73)(18, "label");
+    i0.ɵɵelementStart(17, "div", 62)(18, "label");
     i0.ɵɵtext(19, "Parent Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "select", 76);
-    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_div_16_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.dialogParentId, $event) || (ctx_r2.dialogParentId = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵtemplate(21, ListsCategoriesResource_div_16_option_21_Template, 2, 2, "option", 77);
+    i0.ɵɵelementStart(20, "select", 65);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_Conditional_16_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.dialogParentId, $event) || (ctx_r2.dialogParentId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵrepeaterCreate(21, ListsCategoriesResource_Conditional_16_For_22_Template, 2, 2, "option", 66, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(22, "div", 78)(23, "button", 79);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_16_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveCategory()); });
-    i0.ɵɵtemplate(24, ListsCategoriesResource_div_16_i_24_Template, 1, 0, "i", 80);
-    i0.ɵɵtext(25);
+    i0.ɵɵelementStart(23, "div", 67)(24, "button", 68);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_16_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveCategory()); });
+    i0.ɵɵconditionalCreate(25, ListsCategoriesResource_Conditional_16_Conditional_25_Template, 1, 0, "i", 69);
+    i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "button", 81);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_16_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
-    i0.ɵɵtext(27, "Cancel");
+    i0.ɵɵelementStart(27, "button", 70);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_16_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
+    i0.ɵɵtext(28, "Cancel");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -320,38 +316,38 @@ function ListsCategoriesResource_div_16_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r2.dialogParentId);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.availableParents);
-    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r2.availableParents);
+    i0.ɵɵadvance(3);
     i0.ɵɵproperty("disabled", !ctx_r2.dialogName || ctx_r2.isSaving);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r2.isSaving);
+    i0.ɵɵconditional(ctx_r2.isSaving ? 25 : -1);
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r2.isSaving ? "Saving..." : ctx_r2.editingCategory ? "Save" : "Create", " ");
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", ctx_r2.isSaving);
 } }
-function ListsCategoriesResource_div_17_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 66);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_17_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
-    i0.ɵɵelementStart(1, "div", 84);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_17_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r14); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(2, "div", 85)(3, "h3");
+    i0.ɵɵelementStart(0, "div", 55);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_17_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(1, "div", 71);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_17_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r14); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 72)(3, "h3");
     i0.ɵɵtext(4, "Delete Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "button", 86);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_17_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
-    i0.ɵɵelement(6, "i", 70);
+    i0.ɵɵelementStart(5, "button", 73);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_17_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelement(6, "i", 59);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 71)(8, "p");
+    i0.ɵɵelementStart(7, "div", 60)(8, "p");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 78)(11, "button", 87);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_17_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmDelete()); });
+    i0.ɵɵelementStart(10, "div", 67)(11, "button", 74);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_17_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmDelete()); });
     i0.ɵɵtext(12, " Delete ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "button", 88);
-    i0.ɵɵlistener("click", function ListsCategoriesResource_div_17_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(13, "button", 75);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_17_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
     i0.ɵɵtext(14, "Cancel");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -359,9 +355,6 @@ function ListsCategoriesResource_div_17_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(9);
     i0.ɵɵtextInterpolate(ctx_r2.deleteConfirmMessage);
 } }
-export function LoadListsCategoriesResource() {
-    // tree shaker 
-}
 let ListsCategoriesResource = class ListsCategoriesResource extends BaseResourceComponent {
     cdr;
     notificationService;
@@ -678,7 +671,7 @@ let ListsCategoriesResource = class ListsCategoriesResource extends BaseResource
         return 'fa-solid fa-tags';
     }
     static ɵfac = function ListsCategoriesResource_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ListsCategoriesResource)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.MJNotificationService)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListsCategoriesResource, selectors: [["mj-lists-categories-resource"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 5, consts: [["categoryNodeTemplate", ""], [1, "lists-categories-container"], [1, "categories-header"], [1, "header-title"], [1, "fa-solid", "fa-tags"], [1, "header-actions"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], ["class", "loading-container", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], ["class", "categories-content", 4, "ngIf"], ["class", "modal-overlay", 3, "click", 4, "ngIf"], [1, "loading-container"], ["text", "Loading categories...", "size", "medium"], [1, "empty-state"], [1, "empty-state-icon-wrapper"], [1, "icon-bg"], [1, "fa-solid", "fa-folder-tree"], [1, "empty-state-features"], [1, "feature-item"], [1, "fa-solid", "fa-check-circle"], [1, "btn-create-large", 3, "click"], [1, "categories-content"], [1, "categories-layout"], [1, "category-tree-panel"], [1, "panel-header"], [1, "count-badge"], ["role", "tree", "aria-label", "Category tree", 1, "tree-content"], [4, "ngFor", "ngForOf"], ["class", "category-detail-panel", 4, "ngIf"], ["class", "category-detail-panel empty", 4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "category-detail-panel"], [1, "panel-actions"], ["title", "Edit", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["title", "Delete", 1, "icon-btn", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "detail-content"], [1, "detail-field"], [1, "field-value"], ["class", "detail-field", 4, "ngIf"], [1, "detail-stats"], [1, "stat-item"], [1, "stat-value"], [1, "stat-label"], ["class", "category-lists", 4, "ngIf"], [1, "category-lists"], [1, "mini-list"], ["class", "mini-list-item", 4, "ngFor", "ngForOf"], [1, "mini-list-item"], [1, "fa-solid", "fa-list"], [1, "category-detail-panel", "empty"], [1, "no-selection"], [1, "fa-solid", "fa-arrow-left"], [1, "category-node"], ["tabindex", "0", "role", "treeitem", 1, "node-content", 3, "click", "keydown.enter", "keydown.space", "keydown.arrowRight", "keydown.arrowLeft"], ["class", "expand-btn", "tabindex", "-1", "aria-hidden", "true", 3, "click", 4, "ngIf"], ["class", "expand-placeholder", 4, "ngIf"], ["aria-hidden", "true", 1, "fa-solid", "fa-folder"], [1, "node-name"], ["aria-hidden", "true", 1, "node-count"], ["class", "node-children", "role", "group", 4, "ngIf"], ["tabindex", "-1", "aria-hidden", "true", 1, "expand-btn", 3, "click"], [1, "expand-placeholder"], ["role", "group", 1, "node-children"], [1, "modal-overlay", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click", "disabled"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [1, "category-form"], [1, "form-group"], ["type", "text", "placeholder", "Enter category 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", 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"], [3, "ngValue"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "modal-dialog", "modal-sm", 3, "click"], [1, "modal-header", "danger"], [1, "modal-close", 3, "click"], [1, "btn-danger", 3, "click"], [1, "btn-secondary", 3, "click"]], template: function ListsCategoriesResource_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListsCategoriesResource, selectors: [["mj-lists-categories-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 5, consts: [["categoryNodeTemplate", ""], [1, "lists-categories-container"], [1, "categories-header"], [1, "header-title"], [1, "fa-solid", "fa-tags"], [1, "header-actions"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "loading-container"], [1, "empty-state"], [1, "categories-content"], [1, "modal-overlay"], ["text", "Loading categories...", "size", "medium"], [1, "empty-state-icon-wrapper"], [1, "icon-bg"], [1, "fa-solid", "fa-folder-tree"], [1, "empty-state-features"], [1, "feature-item"], [1, "fa-solid", "fa-check-circle"], [1, "btn-create-large", 3, "click"], [1, "categories-layout"], [1, "category-tree-panel"], [1, "panel-header"], [1, "count-badge"], ["role", "tree", "aria-label", "Category tree", 1, "tree-content"], [1, "category-detail-panel"], [1, "category-detail-panel", "empty"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "panel-actions"], ["title", "Edit", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["title", "Delete", 1, "icon-btn", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "detail-content"], [1, "detail-field"], [1, "field-value"], [1, "detail-stats"], [1, "stat-item"], [1, "stat-value"], [1, "stat-label"], [1, "category-lists"], [1, "mini-list"], [1, "mini-list-item"], [1, "fa-solid", "fa-list"], [1, "no-selection"], [1, "fa-solid", "fa-arrow-left"], [1, "category-node"], ["tabindex", "0", "role", "treeitem", 1, "node-content", 3, "click", "keydown.enter", "keydown.space", "keydown.arrowRight", "keydown.arrowLeft"], ["tabindex", "-1", "aria-hidden", "true", 1, "expand-btn"], [1, "expand-placeholder"], ["aria-hidden", "true", 1, "fa-solid", "fa-folder"], [1, "node-name"], ["aria-hidden", "true", 1, "node-count"], ["role", "group", 1, "node-children"], ["tabindex", "-1", "aria-hidden", "true", 1, "expand-btn", 3, "click"], [1, "modal-overlay", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click", "disabled"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [1, "category-form"], [1, "form-group"], ["type", "text", "placeholder", "Enter category 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, "modal-dialog", "modal-sm", 3, "click"], [1, "modal-header", "danger"], [1, "modal-close", 3, "click"], [1, "btn-danger", 3, "click"], [1, "btn-secondary", 3, "click"]], template: function ListsCategoriesResource_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2)(2, "div", 3);
             i0.ɵɵelement(3, "i", 4);
@@ -691,20 +684,25 @@ let ListsCategoriesResource = class ListsCategoriesResource extends BaseResource
             i0.ɵɵelementStart(9, "span");
             i0.ɵɵtext(10, "New Category");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵtemplate(11, ListsCategoriesResource_div_11_Template, 2, 0, "div", 8)(12, ListsCategoriesResource_div_12_Template, 20, 0, "div", 9)(13, ListsCategoriesResource_div_13_Template, 12, 4, "div", 10)(14, ListsCategoriesResource_ng_template_14_Template, 10, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(16, ListsCategoriesResource_div_16_Template, 28, 10, "div", 11)(17, ListsCategoriesResource_div_17_Template, 15, 1, "div", 11);
+            i0.ɵɵconditionalCreate(11, ListsCategoriesResource_Conditional_11_Template, 2, 0, "div", 8);
+            i0.ɵɵconditionalCreate(12, ListsCategoriesResource_Conditional_12_Template, 20, 0, "div", 9);
+            i0.ɵɵconditionalCreate(13, ListsCategoriesResource_Conditional_13_Template, 13, 3, "div", 10);
+            i0.ɵɵtemplate(14, ListsCategoriesResource_ng_template_14_Template, 10, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(16, ListsCategoriesResource_Conditional_16_Template, 29, 9, "div", 11);
+            i0.ɵɵconditionalCreate(17, ListsCategoriesResource_Conditional_17_Template, 15, 1, "div", 11);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(11);
-            i0.ɵɵproperty("ngIf", ctx.isLoading);
+            i0.ɵɵconditional(ctx.isLoading ? 11 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.categoryViewModels.length === 0);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.categoryViewModels.length === 0 ? 12 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.categoryViewModels.length > 0);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.categoryViewModels.length > 0 ? 13 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.showDialog);
+            i0.ɵɵconditional(ctx.showDialog ? 16 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.showDeleteConfirm);
-        } }, dependencies: [i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent], styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-categories-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .categories-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .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: 420px;\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: 100px;\n      height: 100px;\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: 48px;\n      color: #2196F3;\n      z-index: 1;\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-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin: 16px 0 24px;\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    /* Content Layout */\n    .categories-content {\n      flex: 1;\n      padding: 16px 24px;\n      overflow: hidden;\n    }\n\n    .categories-layout {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n      height: 100%;\n    }\n\n    .category-tree-panel,\n    .category-detail-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-bottom: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .count-badge {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .panel-actions {\n      display: flex;\n      gap: 4px;\n    }\n\n    .icon-btn {\n      background: none;\n      border: none;\n      padding: 6px 8px;\n      color: #666;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .icon-btn:hover {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .icon-btn.danger:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    /* Tree Content */\n    .tree-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .category-node {\n      user-select: none;\n    }\n\n    .node-content {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .node-content:hover {\n      background: #f5f5f5;\n    }\n\n    .node-content:focus {\n      outline: none;\n      background: #e8f4fd;\n    }\n\n    .node-content:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: -2px;\n      background: #e8f4fd;\n    }\n\n    .node-content.selected {\n      background: #e3f2fd;\n    }\n\n    .node-content.selected:focus-visible {\n      outline: 2px solid #1976D2;\n    }\n\n    .expand-btn {\n      background: none;\n      border: none;\n      padding: 2px;\n      color: #999;\n      cursor: pointer;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .expand-btn:hover {\n      color: #666;\n    }\n\n    .expand-placeholder {\n      width: 20px;\n    }\n\n    .node-content .fa-folder,\n    .node-content .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .node-name {\n      flex: 1;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .node-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 1px 6px;\n      border-radius: 8px;\n    }\n\n    /* Detail Panel */\n    .detail-content {\n      flex: 1;\n      padding: 16px;\n      overflow-y: auto;\n    }\n\n    .detail-field {\n      margin-bottom: 16px;\n    }\n\n    .detail-field label {\n      display: block;\n      font-size: 12px;\n      font-weight: 500;\n      color: #999;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 4px;\n    }\n\n    .field-value {\n      font-size: 14px;\n      color: #333;\n    }\n\n    .detail-stats {\n      display: flex;\n      gap: 24px;\n      margin: 24px 0;\n      padding: 16px;\n      background: #f5f7fa;\n      border-radius: 8px;\n    }\n\n    .stat-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .stat-value {\n      font-size: 24px;\n      font-weight: 600;\n      color: #2196F3;\n    }\n\n    .stat-label {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .category-lists h4 {\n      margin: 0 0 12px;\n      font-size: 13px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .mini-list {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .mini-list-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f5f7fa;\n      border-radius: 4px;\n      font-size: 13px;\n      color: #333;\n    }\n\n    .mini-list-item i {\n      color: #999;\n    }\n\n    /* No Selection */\n    .category-detail-panel.empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .no-selection {\n      text-align: center;\n      color: #999;\n    }\n\n    .no-selection i {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n\n    .no-selection p {\n      margin: 0;\n    }\n\n    /* Form */\n    .category-form {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .form-group {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .form-group label {\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #2196F3;\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      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10000;\n      animation: fadeIn 0.15s ease-out;\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    .modal-dialog {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 450px;\n      max-width: 90vw;\n      max-height: 90vh;\n      display: flex;\n      flex-direction: column;\n      animation: slideIn 0.2s ease-out;\n    }\n\n    .modal-dialog.modal-sm {\n      width: 400px;\n    }\n\n    @keyframes slideIn {\n      from { transform: translateY(-20px); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\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.danger {\n      background: #ffebee;\n      border-bottom-color: #ffcdd2;\n    }\n\n    .modal-header.danger h3 {\n      color: #c62828;\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      transition: all 0.15s;\n    }\n\n    .modal-close:hover:not(:disabled) {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .modal-close:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .modal-body {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0;\n      color: #666;\n      line-height: 1.6;\n    }\n\n    .modal-footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-secondary {\n      padding: 8px 16px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      color: #666;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n      border-color: #ccc;\n    }\n\n    .btn-secondary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-danger {\n      padding: 8px 16px;\n      background: #d32f2f;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-danger:hover {\n      background: #c62828;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .categories-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .category-detail-panel.empty {\n        display: none;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "], encapsulation: 2 });
+            i0.ɵɵconditional(ctx.showDeleteConfirm ? 17 : -1);
+        } }, dependencies: [i2.NgTemplateOutlet, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent], styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-categories-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .categories-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .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: 420px;\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: 100px;\n      height: 100px;\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: 48px;\n      color: #2196F3;\n      z-index: 1;\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-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin: 16px 0 24px;\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    /* Content Layout */\n    .categories-content {\n      flex: 1;\n      padding: 16px 24px;\n      overflow: hidden;\n    }\n\n    .categories-layout {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n      height: 100%;\n    }\n\n    .category-tree-panel,\n    .category-detail-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-bottom: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .count-badge {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .panel-actions {\n      display: flex;\n      gap: 4px;\n    }\n\n    .icon-btn {\n      background: none;\n      border: none;\n      padding: 6px 8px;\n      color: #666;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .icon-btn:hover {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .icon-btn.danger:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    /* Tree Content */\n    .tree-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .category-node {\n      user-select: none;\n    }\n\n    .node-content {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .node-content:hover {\n      background: #f5f5f5;\n    }\n\n    .node-content:focus {\n      outline: none;\n      background: #e8f4fd;\n    }\n\n    .node-content:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: -2px;\n      background: #e8f4fd;\n    }\n\n    .node-content.selected {\n      background: #e3f2fd;\n    }\n\n    .node-content.selected:focus-visible {\n      outline: 2px solid #1976D2;\n    }\n\n    .expand-btn {\n      background: none;\n      border: none;\n      padding: 2px;\n      color: #999;\n      cursor: pointer;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .expand-btn:hover {\n      color: #666;\n    }\n\n    .expand-placeholder {\n      width: 20px;\n    }\n\n    .node-content .fa-folder,\n    .node-content .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .node-name {\n      flex: 1;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .node-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 1px 6px;\n      border-radius: 8px;\n    }\n\n    /* Detail Panel */\n    .detail-content {\n      flex: 1;\n      padding: 16px;\n      overflow-y: auto;\n    }\n\n    .detail-field {\n      margin-bottom: 16px;\n    }\n\n    .detail-field label {\n      display: block;\n      font-size: 12px;\n      font-weight: 500;\n      color: #999;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 4px;\n    }\n\n    .field-value {\n      font-size: 14px;\n      color: #333;\n    }\n\n    .detail-stats {\n      display: flex;\n      gap: 24px;\n      margin: 24px 0;\n      padding: 16px;\n      background: #f5f7fa;\n      border-radius: 8px;\n    }\n\n    .stat-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .stat-value {\n      font-size: 24px;\n      font-weight: 600;\n      color: #2196F3;\n    }\n\n    .stat-label {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .category-lists h4 {\n      margin: 0 0 12px;\n      font-size: 13px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .mini-list {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .mini-list-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f5f7fa;\n      border-radius: 4px;\n      font-size: 13px;\n      color: #333;\n    }\n\n    .mini-list-item i {\n      color: #999;\n    }\n\n    /* No Selection */\n    .category-detail-panel.empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .no-selection {\n      text-align: center;\n      color: #999;\n    }\n\n    .no-selection i {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n\n    .no-selection p {\n      margin: 0;\n    }\n\n    /* Form */\n    .category-form {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .form-group {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .form-group label {\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #2196F3;\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      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10000;\n      animation: fadeIn 0.15s ease-out;\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    .modal-dialog {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 450px;\n      max-width: 90vw;\n      max-height: 90vh;\n      display: flex;\n      flex-direction: column;\n      animation: slideIn 0.2s ease-out;\n    }\n\n    .modal-dialog.modal-sm {\n      width: 400px;\n    }\n\n    @keyframes slideIn {\n      from { transform: translateY(-20px); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\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.danger {\n      background: #ffebee;\n      border-bottom-color: #ffcdd2;\n    }\n\n    .modal-header.danger h3 {\n      color: #c62828;\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      transition: all 0.15s;\n    }\n\n    .modal-close:hover:not(:disabled) {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .modal-close:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .modal-body {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0;\n      color: #666;\n      line-height: 1.6;\n    }\n\n    .modal-footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-secondary {\n      padding: 8px 16px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      color: #666;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n      border-color: #ccc;\n    }\n\n    .btn-secondary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-danger {\n      padding: 8px 16px;\n      background: #d32f2f;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-danger:hover {\n      background: #c62828;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .categories-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .category-detail-panel.empty {\n        display: none;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "], encapsulation: 2 });
 };
 ListsCategoriesResource = __decorate([
     RegisterClass(BaseResourceComponent, 'ListsCategoriesResource')
@@ -712,7 +710,7 @@ ListsCategoriesResource = __decorate([
 export { ListsCategoriesResource };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListsCategoriesResource, [{
         type: Component,
-        args: [{ selector: 'mj-lists-categories-resource', template: `
+        args: [{ standalone: false, selector: 'mj-lists-categories-resource', template: `
     <div class="lists-categories-container">
       <!-- Header -->
       <div class="categories-header">
@@ -727,114 +725,127 @@ export { ListsCategoriesResource };
           </button>
         </div>
       </div>
-
+    
       <!-- Loading State -->
-      <div class="loading-container" *ngIf="isLoading">
-        <mj-loading text="Loading categories..." size="medium"></mj-loading>
-      </div>
-
-      <!-- Empty State -->
-      <div class="empty-state" *ngIf="!isLoading && categoryViewModels.length === 0">
-        <div class="empty-state-icon-wrapper">
-          <div class="icon-bg"></div>
-          <i class="fa-solid fa-folder-tree"></i>
+      @if (isLoading) {
+        <div class="loading-container">
+          <mj-loading text="Loading categories..." size="medium"></mj-loading>
         </div>
-        <h3>No Categories Yet</h3>
-        <p>Categories help you organize lists into logical groups.</p>
-        <div class="empty-state-features">
-          <div class="feature-item">
-            <i class="fa-solid fa-check-circle"></i>
-            <span>Create hierarchical folder structures</span>
-          </div>
-          <div class="feature-item">
-            <i class="fa-solid fa-check-circle"></i>
-            <span>Quickly find related lists</span>
+      }
+    
+      <!-- Empty State -->
+      @if (!isLoading && categoryViewModels.length === 0) {
+        <div class="empty-state">
+          <div class="empty-state-icon-wrapper">
+            <div class="icon-bg"></div>
+            <i class="fa-solid fa-folder-tree"></i>
           </div>
-        </div>
-        <button class="btn-create-large" (click)="createCategory()">
-          <i class="fa-solid fa-plus"></i>
-          Create Your First Category
-        </button>
-      </div>
-
-      <!-- Categories Content -->
-      <div class="categories-content" *ngIf="!isLoading && categoryViewModels.length > 0">
-        <div class="categories-layout">
-          <!-- Category Tree -->
-          <div class="category-tree-panel">
-            <div class="panel-header">
-              <h3>Categories</h3>
-              <span class="count-badge">{{categories.length}}</span>
+          <h3>No Categories Yet</h3>
+          <p>Categories help you organize lists into logical groups.</p>
+          <div class="empty-state-features">
+            <div class="feature-item">
+              <i class="fa-solid fa-check-circle"></i>
+              <span>Create hierarchical folder structures</span>
             </div>
-            <div class="tree-content" role="tree" aria-label="Category tree">
-              <ng-container *ngFor="let vm of getTopLevelCategories()">
-                <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { vm: vm }"></ng-container>
-              </ng-container>
+            <div class="feature-item">
+              <i class="fa-solid fa-check-circle"></i>
+              <span>Quickly find related lists</span>
             </div>
           </div>
-
-          <!-- Category Details -->
-          <div class="category-detail-panel" *ngIf="selectedCategory">
-            <div class="panel-header">
-              <h3>Category Details</h3>
-              <div class="panel-actions">
-                <button class="icon-btn" (click)="editCategory()" title="Edit">
-                  <i class="fa-solid fa-pen"></i>
-                </button>
-                <button class="icon-btn danger" (click)="deleteCategory()" title="Delete">
-                  <i class="fa-solid fa-trash"></i>
-                </button>
-              </div>
-            </div>
-            <div class="detail-content">
-              <div class="detail-field">
-                <label>Name</label>
-                <span class="field-value">{{selectedCategory.Name}}</span>
-              </div>
-              <div class="detail-field" *ngIf="selectedCategory.Description">
-                <label>Description</label>
-                <span class="field-value">{{selectedCategory.Description}}</span>
+          <button class="btn-create-large" (click)="createCategory()">
+            <i class="fa-solid fa-plus"></i>
+            Create Your First Category
+          </button>
+        </div>
+      }
+    
+      <!-- Categories Content -->
+      @if (!isLoading && categoryViewModels.length > 0) {
+        <div class="categories-content">
+          <div class="categories-layout">
+            <!-- Category Tree -->
+            <div class="category-tree-panel">
+              <div class="panel-header">
+                <h3>Categories</h3>
+                <span class="count-badge">{{categories.length}}</span>
               </div>
-              <div class="detail-field">
-                <label>Parent Category</label>
-                <span class="field-value">
-                  {{getParentCategoryName(selectedCategory) || '(Top Level)'}}
-                </span>
+              <div class="tree-content" role="tree" aria-label="Category tree">
+                @for (vm of getTopLevelCategories(); track vm) {
+                  <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { vm: vm }"></ng-container>
+                }
               </div>
-              <div class="detail-stats">
-                <div class="stat-item">
-                  <span class="stat-value">{{getSelectedCategoryListCount()}}</span>
-                  <span class="stat-label">Lists</span>
+            </div>
+            <!-- Category Details -->
+            @if (selectedCategory) {
+              <div class="category-detail-panel">
+                <div class="panel-header">
+                  <h3>Category Details</h3>
+                  <div class="panel-actions">
+                    <button class="icon-btn" (click)="editCategory()" title="Edit">
+                      <i class="fa-solid fa-pen"></i>
+                    </button>
+                    <button class="icon-btn danger" (click)="deleteCategory()" title="Delete">
+                      <i class="fa-solid fa-trash"></i>
+                    </button>
+                  </div>
                 </div>
-                <div class="stat-item">
-                  <span class="stat-value">{{getSelectedCategoryChildCount()}}</span>
-                  <span class="stat-label">Subcategories</span>
+                <div class="detail-content">
+                  <div class="detail-field">
+                    <label>Name</label>
+                    <span class="field-value">{{selectedCategory.Name}}</span>
+                  </div>
+                  @if (selectedCategory.Description) {
+                    <div class="detail-field">
+                      <label>Description</label>
+                      <span class="field-value">{{selectedCategory.Description}}</span>
+                    </div>
+                  }
+                  <div class="detail-field">
+                    <label>Parent Category</label>
+                    <span class="field-value">
+                      {{getParentCategoryName(selectedCategory) || '(Top Level)'}}
+                    </span>
+                  </div>
+                  <div class="detail-stats">
+                    <div class="stat-item">
+                      <span class="stat-value">{{getSelectedCategoryListCount()}}</span>
+                      <span class="stat-label">Lists</span>
+                    </div>
+                    <div class="stat-item">
+                      <span class="stat-value">{{getSelectedCategoryChildCount()}}</span>
+                      <span class="stat-label">Subcategories</span>
+                    </div>
+                  </div>
+                  <!-- Lists in this category -->
+                  @if (selectedCategoryLists.length > 0) {
+                    <div class="category-lists">
+                      <h4>Lists in this category</h4>
+                      <div class="mini-list">
+                        @for (list of selectedCategoryLists; track list) {
+                          <div class="mini-list-item">
+                            <i class="fa-solid fa-list"></i>
+                            <span>{{list.Name}}</span>
+                          </div>
+                        }
+                      </div>
+                    </div>
+                  }
                 </div>
               </div>
-
-              <!-- Lists in this category -->
-              <div class="category-lists" *ngIf="selectedCategoryLists.length > 0">
-                <h4>Lists in this category</h4>
-                <div class="mini-list">
-                  <div class="mini-list-item" *ngFor="let list of selectedCategoryLists">
-                    <i class="fa-solid fa-list"></i>
-                    <span>{{list.Name}}</span>
-                  </div>
+            }
+            <!-- No Selection State -->
+            @if (!selectedCategory) {
+              <div class="category-detail-panel empty">
+                <div class="no-selection">
+                  <i class="fa-solid fa-arrow-left"></i>
+                  <p>Select a category to view details</p>
                 </div>
               </div>
-            </div>
-          </div>
-
-          <!-- No Selection State -->
-          <div class="category-detail-panel empty" *ngIf="!selectedCategory">
-            <div class="no-selection">
-              <i class="fa-solid fa-arrow-left"></i>
-              <p>Select a category to view details</p>
-            </div>
+            }
           </div>
         </div>
-      </div>
-
+      }
+    
       <!-- Category Node Template -->
       <ng-template #categoryNodeTemplate let-vm="vm">
         <div class="category-node" [style.padding-left.px]="vm.depth * 20">
@@ -851,99 +862,112 @@ export { ListsCategoriesResource };
             [attr.aria-expanded]="hasChildren(vm.category) ? vm.isExpanded : null"
             [attr.aria-selected]="selectedCategory?.ID === vm.category.ID"
             [attr.aria-label]="vm.category.Name + ' - ' + vm.listCount + ' lists'">
-            <button
-              class="expand-btn"
-              *ngIf="hasChildren(vm.category)"
-              (click)="toggleExpand($event, vm)"
-              tabindex="-1"
-              aria-hidden="true">
-              <i [class]="vm.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'"></i>
-            </button>
-            <span class="expand-placeholder" *ngIf="!hasChildren(vm.category)"></span>
+            @if (hasChildren(vm.category)) {
+              <button
+                class="expand-btn"
+                (click)="toggleExpand($event, vm)"
+                tabindex="-1"
+                aria-hidden="true">
+                <i [class]="vm.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'"></i>
+              </button>
+            }
+            @if (!hasChildren(vm.category)) {
+              <span class="expand-placeholder"></span>
+            }
             <i class="fa-solid fa-folder" [class.fa-folder-open]="vm.isExpanded" aria-hidden="true"></i>
             <span class="node-name">{{vm.category.Name}}</span>
             <span class="node-count" aria-hidden="true">{{vm.listCount}}</span>
           </div>
-          <div class="node-children" *ngIf="vm.isExpanded && hasChildren(vm.category)" role="group">
-            <ng-container *ngFor="let childVm of getChildCategories(vm.category)">
-              <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { vm: childVm }"></ng-container>
-            </ng-container>
-          </div>
+          @if (vm.isExpanded && hasChildren(vm.category)) {
+            <div class="node-children" role="group">
+              @for (childVm of getChildCategories(vm.category); track childVm) {
+                <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { vm: childVm }"></ng-container>
+              }
+            </div>
+          }
         </div>
       </ng-template>
-
+    
       <!-- Create/Edit Dialog -->
-      <div class="modal-overlay" *ngIf="showDialog" (click)="closeDialog()">
-        <div class="modal-dialog" (click)="$event.stopPropagation()">
-          <div class="modal-header">
-            <h3>{{editingCategory ? 'Edit Category' : 'Create Category'}}</h3>
-            <button class="modal-close" (click)="closeDialog()" [disabled]="isSaving">
-              <i class="fa-solid fa-times"></i>
-            </button>
-          </div>
-          <div class="modal-body">
-            <div class="category-form">
-              <div class="form-group">
-                <label>Name *</label>
-                <input
-                  type="text"
-                  [(ngModel)]="dialogName"
-                  placeholder="Enter category name"
-                  class="form-input" />
-              </div>
-              <div class="form-group">
-                <label>Description</label>
-                <textarea
-                  [(ngModel)]="dialogDescription"
-                  placeholder="Optional description"
-                  class="form-input"
+      @if (showDialog) {
+        <div class="modal-overlay" (click)="closeDialog()">
+          <div class="modal-dialog" (click)="$event.stopPropagation()">
+            <div class="modal-header">
+              <h3>{{editingCategory ? 'Edit Category' : 'Create Category'}}</h3>
+              <button class="modal-close" (click)="closeDialog()" [disabled]="isSaving">
+                <i class="fa-solid fa-times"></i>
+              </button>
+            </div>
+            <div class="modal-body">
+              <div class="category-form">
+                <div class="form-group">
+                  <label>Name *</label>
+                  <input
+                    type="text"
+                    [(ngModel)]="dialogName"
+                    placeholder="Enter category name"
+                    class="form-input" />
+                </div>
+                <div class="form-group">
+                  <label>Description</label>
+                  <textarea
+                    [(ngModel)]="dialogDescription"
+                    placeholder="Optional description"
+                    class="form-input"
                   rows="3"></textarea>
-              </div>
-              <div class="form-group">
-                <label>Parent Category</label>
-                <select
-                  [(ngModel)]="dialogParentId"
-                  class="form-input">
-                  <option *ngFor="let parent of availableParents" [ngValue]="parent.ID">{{parent.displayName}}</option>
-                </select>
+                </div>
+                <div class="form-group">
+                  <label>Parent Category</label>
+                  <select
+                    [(ngModel)]="dialogParentId"
+                    class="form-input">
+                    @for (parent of availableParents; track parent) {
+                      <option [ngValue]="parent.ID">{{parent.displayName}}</option>
+                    }
+                  </select>
+                </div>
               </div>
             </div>
-          </div>
-          <div class="modal-footer">
-            <button
-              class="btn-primary"
-              (click)="saveCategory()"
-              [disabled]="!dialogName || isSaving">
-              <i *ngIf="isSaving" class="fa-solid fa-spinner fa-spin"></i>
-              {{isSaving ? 'Saving...' : (editingCategory ? 'Save' : 'Create')}}
-            </button>
-            <button class="btn-secondary" (click)="closeDialog()" [disabled]="isSaving">Cancel</button>
+            <div class="modal-footer">
+              <button
+                class="btn-primary"
+                (click)="saveCategory()"
+                [disabled]="!dialogName || isSaving">
+                @if (isSaving) {
+                  <i class="fa-solid fa-spinner fa-spin"></i>
+                }
+                {{isSaving ? 'Saving...' : (editingCategory ? 'Save' : 'Create')}}
+              </button>
+              <button class="btn-secondary" (click)="closeDialog()" [disabled]="isSaving">Cancel</button>
+            </div>
           </div>
         </div>
-      </div>
-
+      }
+    
       <!-- Delete Confirmation Dialog -->
-      <div class="modal-overlay" *ngIf="showDeleteConfirm" (click)="cancelDelete()">
-        <div class="modal-dialog modal-sm" (click)="$event.stopPropagation()">
-          <div class="modal-header danger">
-            <h3>Delete Category</h3>
-            <button class="modal-close" (click)="cancelDelete()">
-              <i class="fa-solid fa-times"></i>
-            </button>
-          </div>
-          <div class="modal-body">
-            <p>{{deleteConfirmMessage}}</p>
-          </div>
-          <div class="modal-footer">
-            <button class="btn-danger" (click)="confirmDelete()">
-              Delete
-            </button>
-            <button class="btn-secondary" (click)="cancelDelete()">Cancel</button>
+      @if (showDeleteConfirm) {
+        <div class="modal-overlay" (click)="cancelDelete()">
+          <div class="modal-dialog modal-sm" (click)="$event.stopPropagation()">
+            <div class="modal-header danger">
+              <h3>Delete Category</h3>
+              <button class="modal-close" (click)="cancelDelete()">
+                <i class="fa-solid fa-times"></i>
+              </button>
+            </div>
+            <div class="modal-body">
+              <p>{{deleteConfirmMessage}}</p>
+            </div>
+            <div class="modal-footer">
+              <button class="btn-danger" (click)="confirmDelete()">
+                Delete
+              </button>
+              <button class="btn-secondary" (click)="cancelDelete()">Cancel</button>
+            </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-categories-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .categories-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .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: 420px;\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: 100px;\n      height: 100px;\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: 48px;\n      color: #2196F3;\n      z-index: 1;\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-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin: 16px 0 24px;\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    /* Content Layout */\n    .categories-content {\n      flex: 1;\n      padding: 16px 24px;\n      overflow: hidden;\n    }\n\n    .categories-layout {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n      height: 100%;\n    }\n\n    .category-tree-panel,\n    .category-detail-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-bottom: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .count-badge {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .panel-actions {\n      display: flex;\n      gap: 4px;\n    }\n\n    .icon-btn {\n      background: none;\n      border: none;\n      padding: 6px 8px;\n      color: #666;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .icon-btn:hover {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .icon-btn.danger:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    /* Tree Content */\n    .tree-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .category-node {\n      user-select: none;\n    }\n\n    .node-content {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .node-content:hover {\n      background: #f5f5f5;\n    }\n\n    .node-content:focus {\n      outline: none;\n      background: #e8f4fd;\n    }\n\n    .node-content:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: -2px;\n      background: #e8f4fd;\n    }\n\n    .node-content.selected {\n      background: #e3f2fd;\n    }\n\n    .node-content.selected:focus-visible {\n      outline: 2px solid #1976D2;\n    }\n\n    .expand-btn {\n      background: none;\n      border: none;\n      padding: 2px;\n      color: #999;\n      cursor: pointer;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .expand-btn:hover {\n      color: #666;\n    }\n\n    .expand-placeholder {\n      width: 20px;\n    }\n\n    .node-content .fa-folder,\n    .node-content .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .node-name {\n      flex: 1;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .node-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 1px 6px;\n      border-radius: 8px;\n    }\n\n    /* Detail Panel */\n    .detail-content {\n      flex: 1;\n      padding: 16px;\n      overflow-y: auto;\n    }\n\n    .detail-field {\n      margin-bottom: 16px;\n    }\n\n    .detail-field label {\n      display: block;\n      font-size: 12px;\n      font-weight: 500;\n      color: #999;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 4px;\n    }\n\n    .field-value {\n      font-size: 14px;\n      color: #333;\n    }\n\n    .detail-stats {\n      display: flex;\n      gap: 24px;\n      margin: 24px 0;\n      padding: 16px;\n      background: #f5f7fa;\n      border-radius: 8px;\n    }\n\n    .stat-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .stat-value {\n      font-size: 24px;\n      font-weight: 600;\n      color: #2196F3;\n    }\n\n    .stat-label {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .category-lists h4 {\n      margin: 0 0 12px;\n      font-size: 13px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .mini-list {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .mini-list-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f5f7fa;\n      border-radius: 4px;\n      font-size: 13px;\n      color: #333;\n    }\n\n    .mini-list-item i {\n      color: #999;\n    }\n\n    /* No Selection */\n    .category-detail-panel.empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .no-selection {\n      text-align: center;\n      color: #999;\n    }\n\n    .no-selection i {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n\n    .no-selection p {\n      margin: 0;\n    }\n\n    /* Form */\n    .category-form {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .form-group {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .form-group label {\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #2196F3;\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      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10000;\n      animation: fadeIn 0.15s ease-out;\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    .modal-dialog {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 450px;\n      max-width: 90vw;\n      max-height: 90vh;\n      display: flex;\n      flex-direction: column;\n      animation: slideIn 0.2s ease-out;\n    }\n\n    .modal-dialog.modal-sm {\n      width: 400px;\n    }\n\n    @keyframes slideIn {\n      from { transform: translateY(-20px); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\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.danger {\n      background: #ffebee;\n      border-bottom-color: #ffcdd2;\n    }\n\n    .modal-header.danger h3 {\n      color: #c62828;\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      transition: all 0.15s;\n    }\n\n    .modal-close:hover:not(:disabled) {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .modal-close:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .modal-body {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0;\n      color: #666;\n      line-height: 1.6;\n    }\n\n    .modal-footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-secondary {\n      padding: 8px 16px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      color: #666;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n      border-color: #ccc;\n    }\n\n    .btn-secondary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-danger {\n      padding: 8px 16px;\n      background: #d32f2f;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-danger:hover {\n      background: #c62828;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .categories-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .category-detail-panel.empty {\n        display: none;\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-categories-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .categories-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .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: 420px;\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: 100px;\n      height: 100px;\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: 48px;\n      color: #2196F3;\n      z-index: 1;\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-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin: 16px 0 24px;\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    /* Content Layout */\n    .categories-content {\n      flex: 1;\n      padding: 16px 24px;\n      overflow: hidden;\n    }\n\n    .categories-layout {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n      height: 100%;\n    }\n\n    .category-tree-panel,\n    .category-detail-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-bottom: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .count-badge {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .panel-actions {\n      display: flex;\n      gap: 4px;\n    }\n\n    .icon-btn {\n      background: none;\n      border: none;\n      padding: 6px 8px;\n      color: #666;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .icon-btn:hover {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .icon-btn.danger:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    /* Tree Content */\n    .tree-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .category-node {\n      user-select: none;\n    }\n\n    .node-content {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .node-content:hover {\n      background: #f5f5f5;\n    }\n\n    .node-content:focus {\n      outline: none;\n      background: #e8f4fd;\n    }\n\n    .node-content:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: -2px;\n      background: #e8f4fd;\n    }\n\n    .node-content.selected {\n      background: #e3f2fd;\n    }\n\n    .node-content.selected:focus-visible {\n      outline: 2px solid #1976D2;\n    }\n\n    .expand-btn {\n      background: none;\n      border: none;\n      padding: 2px;\n      color: #999;\n      cursor: pointer;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .expand-btn:hover {\n      color: #666;\n    }\n\n    .expand-placeholder {\n      width: 20px;\n    }\n\n    .node-content .fa-folder,\n    .node-content .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .node-name {\n      flex: 1;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .node-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 1px 6px;\n      border-radius: 8px;\n    }\n\n    /* Detail Panel */\n    .detail-content {\n      flex: 1;\n      padding: 16px;\n      overflow-y: auto;\n    }\n\n    .detail-field {\n      margin-bottom: 16px;\n    }\n\n    .detail-field label {\n      display: block;\n      font-size: 12px;\n      font-weight: 500;\n      color: #999;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 4px;\n    }\n\n    .field-value {\n      font-size: 14px;\n      color: #333;\n    }\n\n    .detail-stats {\n      display: flex;\n      gap: 24px;\n      margin: 24px 0;\n      padding: 16px;\n      background: #f5f7fa;\n      border-radius: 8px;\n    }\n\n    .stat-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .stat-value {\n      font-size: 24px;\n      font-weight: 600;\n      color: #2196F3;\n    }\n\n    .stat-label {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .category-lists h4 {\n      margin: 0 0 12px;\n      font-size: 13px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .mini-list {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .mini-list-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f5f7fa;\n      border-radius: 4px;\n      font-size: 13px;\n      color: #333;\n    }\n\n    .mini-list-item i {\n      color: #999;\n    }\n\n    /* No Selection */\n    .category-detail-panel.empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .no-selection {\n      text-align: center;\n      color: #999;\n    }\n\n    .no-selection i {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n\n    .no-selection p {\n      margin: 0;\n    }\n\n    /* Form */\n    .category-form {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .form-group {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .form-group label {\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #2196F3;\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      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10000;\n      animation: fadeIn 0.15s ease-out;\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    .modal-dialog {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 450px;\n      max-width: 90vw;\n      max-height: 90vh;\n      display: flex;\n      flex-direction: column;\n      animation: slideIn 0.2s ease-out;\n    }\n\n    .modal-dialog.modal-sm {\n      width: 400px;\n    }\n\n    @keyframes slideIn {\n      from { transform: translateY(-20px); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\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.danger {\n      background: #ffebee;\n      border-bottom-color: #ffcdd2;\n    }\n\n    .modal-header.danger h3 {\n      color: #c62828;\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      transition: all 0.15s;\n    }\n\n    .modal-close:hover:not(:disabled) {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .modal-close:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .modal-body {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0;\n      color: #666;\n      line-height: 1.6;\n    }\n\n    .modal-footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-secondary {\n      padding: 8px 16px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      color: #666;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n      border-color: #ccc;\n    }\n\n    .btn-secondary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-danger {\n      padding: 8px 16px;\n      background: #d32f2f;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-danger:hover {\n      background: #c62828;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .categories-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .category-detail-panel.empty {\n        display: none;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MJNotificationService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsCategoriesResource, { className: "ListsCategoriesResource", filePath: "src/Lists/components/lists-categories-resource.component.ts", lineNumber: 891 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsCategoriesResource, { className: "ListsCategoriesResource", filePath: "src/lists/components/lists-categories-resource.component.ts", lineNumber: 913 }); })();
 //# sourceMappingURL=lists-categories-resource.component.js.map