@memberjunction/ng-dashboards 5.34.0 → 5.35.0

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

@@ -13,17 +13,18 @@ import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-notifications";
 import * as i2 from "@angular/common";
 import * as i3 from "@angular/forms";
-import * as i4 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@memberjunction/ng-ui-components";
+import * as i5 from "@memberjunction/ng-shared-generic";
 const _c0 = a0 => ({ vm: a0 });
-function ListsCategoriesResource_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 8);
-    i0.ɵɵelement(1, "mj-loading", 12);
+function ListsCategoriesResource_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelement(1, "mj-loading", 9);
     i0.ɵɵelementEnd();
 } }
-function ListsCategoriesResource_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_Conditional_8_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 9)(1, "div", 13);
-    i0.ɵɵelement(2, "div", 14)(3, "i", 15);
+    i0.ɵɵelementStart(0, "div", 6)(1, "div", 10);
+    i0.ɵɵelement(2, "div", 11)(3, "i", 12);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(4, "h3");
     i0.ɵɵtext(5, "No Categories Yet");
@@ -31,38 +32,38 @@ function ListsCategoriesResource_Conditional_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", 16)(9, "div", 17);
-    i0.ɵɵelement(10, "i", 18);
+    i0.ɵɵelementStart(8, "div", 13)(9, "div", 14);
+    i0.ɵɵelement(10, "i", 15);
     i0.ɵɵelementStart(11, "span");
     i0.ɵɵtext(12, "Create hierarchical folder structures");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 17);
-    i0.ɵɵelement(14, "i", 18);
+    i0.ɵɵelementStart(13, "div", 14);
+    i0.ɵɵelement(14, "i", 15);
     i0.ɵɵelementStart(15, "span");
     i0.ɵɵtext(16, "Quickly find related lists");
     i0.ɵɵelementEnd()()();
-    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.ɵɵelementStart(17, "button", 16);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_8_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createCategory()); });
+    i0.ɵɵelement(18, "i", 4);
     i0.ɵɵtext(19, " Create Your First Category ");
     i0.ɵɵelementEnd()();
 } }
-function ListsCategoriesResource_Conditional_13_For_10_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_Conditional_9_For_10_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-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);
+function ListsCategoriesResource_Conditional_9_For_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListsCategoriesResource_Conditional_9_For_10_ng_container_0_Template, 1, 0, "ng-container", 24);
 } if (rf & 2) {
     const vm_r4 = ctx.$implicit;
     i0.ɵɵnextContext(2);
-    const categoryNodeTemplate_r5 = i0.ɵɵreference(15);
+    const categoryNodeTemplate_r5 = i0.ɵɵreference(11);
     i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, vm_r4));
 } }
-function ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 34)(1, "label");
+function ListsCategoriesResource_Conditional_9_Conditional_11_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31)(1, "label");
     i0.ɵɵtext(2, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 35);
+    i0.ɵɵelementStart(3, "span", 32);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -70,9 +71,9 @@ function ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_15_Te
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(ctx_r2.selectedCategory.Description);
 } }
-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);
+function ListsCategoriesResource_Conditional_9_Conditional_11_Conditional_32_For_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39);
+    i0.ɵɵelement(1, "i", 40);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
@@ -81,57 +82,57 @@ function ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_32_Fo
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(list_r7.Name);
 } }
-function ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40)(1, "h4");
+function ListsCategoriesResource_Conditional_9_Conditional_11_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 37)(1, "h4");
     i0.ɵɵtext(2, "Lists in this category");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(3, "div", 38);
+    i0.ɵɵrepeaterCreate(4, ListsCategoriesResource_Conditional_9_Conditional_11_Conditional_32_For_5_Template, 4, 1, "div", 39, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(4);
     i0.ɵɵrepeater(ctx_r2.selectedCategoryLists);
 } }
-function ListsCategoriesResource_Conditional_13_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_Conditional_9_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 25)(1, "div", 22)(2, "h3");
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 19)(2, "h3");
     i0.ɵɵtext(3, "Category Details");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(4, "div", 25)(5, "button", 26);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_9_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", 27);
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(7, "button", 28);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_9_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", 29);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 33)(10, "div", 34)(11, "label");
+    i0.ɵɵelementStart(9, "div", 30)(10, "div", 31)(11, "label");
     i0.ɵɵtext(12, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "span", 35);
+    i0.ɵɵelementStart(13, "span", 32);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(15, ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_15_Template, 5, 1, "div", 34);
-    i0.ɵɵelementStart(16, "div", 34)(17, "label");
+    i0.ɵɵconditionalCreate(15, ListsCategoriesResource_Conditional_9_Conditional_11_Conditional_15_Template, 5, 1, "div", 31);
+    i0.ɵɵelementStart(16, "div", 31)(17, "label");
     i0.ɵɵtext(18, "Parent Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "span", 35);
+    i0.ɵɵelementStart(19, "span", 32);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 36)(22, "div", 37)(23, "span", 38);
+    i0.ɵɵelementStart(21, "div", 33)(22, "div", 34)(23, "span", 35);
     i0.ɵɵtext(24);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "span", 39);
+    i0.ɵɵelementStart(25, "span", 36);
     i0.ɵɵtext(26, "Lists");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 37)(28, "span", 38);
+    i0.ɵɵelementStart(27, "div", 34)(28, "span", 35);
     i0.ɵɵtext(29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "span", 39);
+    i0.ɵɵelementStart(30, "span", 36);
     i0.ɵɵtext(31, "Subcategories");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(32, ListsCategoriesResource_Conditional_13_Conditional_11_Conditional_32_Template, 6, 0, "div", 40);
+    i0.ɵɵconditionalCreate(32, ListsCategoriesResource_Conditional_9_Conditional_11_Conditional_32_Template, 6, 0, "div", 37);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -148,25 +149,25 @@ function ListsCategoriesResource_Conditional_13_Conditional_11_Template(rf, ctx)
     i0.ɵɵadvance(3);
     i0.ɵɵconditional(ctx_r2.selectedCategoryLists.length > 0 ? 32 : -1);
 } }
-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);
+function ListsCategoriesResource_Conditional_9_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23)(1, "div", 41);
+    i0.ɵɵelement(2, "i", 42);
     i0.ɵɵelementStart(3, "p");
     i0.ɵɵtext(4, "Select a category to view details");
     i0.ɵɵelementEnd()()();
 } }
-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");
+function ListsCategoriesResource_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 7)(1, "div", 17)(2, "div", 18)(3, "div", 19)(4, "h3");
     i0.ɵɵtext(5, "Categories");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 23);
+    i0.ɵɵelementStart(6, "span", 20);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 24);
-    i0.ɵɵrepeaterCreate(9, ListsCategoriesResource_Conditional_13_For_10_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(8, "div", 21);
+    i0.ɵɵrepeaterCreate(9, ListsCategoriesResource_Conditional_9_For_10_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    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.ɵɵconditionalCreate(11, ListsCategoriesResource_Conditional_9_Conditional_11_Template, 33, 6, "div", 22);
+    i0.ɵɵconditionalCreate(12, ListsCategoriesResource_Conditional_9_Conditional_12_Template, 5, 0, "div", 23);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
@@ -179,10 +180,10 @@ function ListsCategoriesResource_Conditional_13_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵconditional(!ctx_r2.selectedCategory ? 12 : -1);
 } }
-function ListsCategoriesResource_ng_template_14_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_ng_template_10_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    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.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_ng_template_10_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) {
@@ -190,23 +191,23 @@ function ListsCategoriesResource_ng_template_14_Conditional_2_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵclassMap(vm_r9.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
 } }
-function ListsCategoriesResource_ng_template_14_Conditional_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 49);
+function ListsCategoriesResource_ng_template_10_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 46);
 } }
-function ListsCategoriesResource_ng_template_14_Conditional_9_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_ng_template_10_Conditional_9_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-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);
+function ListsCategoriesResource_ng_template_10_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, ListsCategoriesResource_ng_template_10_Conditional_9_For_2_ng_container_0_Template, 1, 0, "ng-container", 24);
 } if (rf & 2) {
     const childVm_r11 = ctx.$implicit;
     i0.ɵɵnextContext(3);
-    const categoryNodeTemplate_r5 = i0.ɵɵreference(15);
+    const categoryNodeTemplate_r5 = i0.ɵɵreference(11);
     i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, childVm_r11));
 } }
-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);
+function ListsCategoriesResource_ng_template_10_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵrepeaterCreate(1, ListsCategoriesResource_ng_template_10_Conditional_9_For_2_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const vm_r9 = i0.ɵɵnextContext().vm;
@@ -214,20 +215,20 @@ function ListsCategoriesResource_ng_template_14_Conditional_9_Template(rf, ctx)
     i0.ɵɵadvance();
     i0.ɵɵrepeater(ctx_r2.getChildCategories(vm_r9.category));
 } }
-function ListsCategoriesResource_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_ng_template_10_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    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.ɵɵ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.ɵɵelementStart(0, "div", 43)(1, "div", 44);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_ng_template_10_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_10_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_10_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_10_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_10_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.ɵɵconditionalCreate(2, ListsCategoriesResource_ng_template_10_Conditional_2_Template, 2, 2, "button", 45);
+    i0.ɵɵconditionalCreate(3, ListsCategoriesResource_ng_template_10_Conditional_3_Template, 1, 0, "span", 46);
+    i0.ɵɵelement(4, "i", 47);
+    i0.ɵɵelementStart(5, "span", 48);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 52);
+    i0.ɵɵelementStart(7, "span", 49);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(9, ListsCategoriesResource_ng_template_14_Conditional_9_Template, 3, 0, "div", 53);
+    i0.ɵɵconditionalCreate(9, ListsCategoriesResource_ng_template_10_Conditional_9_Template, 3, 0, "div", 50);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const vm_r9 = ctx.vm;
@@ -249,8 +250,8 @@ function ListsCategoriesResource_ng_template_14_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵconditional(vm_r9.isExpanded && ctx_r2.hasChildren(vm_r9.category) ? 9 : -1);
 } }
-function ListsCategoriesResource_Conditional_16_For_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 66);
+function ListsCategoriesResource_Conditional_12_For_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 63);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -259,48 +260,48 @@ function ListsCategoriesResource_Conditional_16_For_22_Template(rf, ctx) { if (r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(parent_r13.displayName);
 } }
-function ListsCategoriesResource_Conditional_16_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 69);
+function ListsCategoriesResource_Conditional_12_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 66);
 } }
-function ListsCategoriesResource_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
-    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.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_12_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
+    i0.ɵɵelementStart(1, "div", 53);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_12_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 54)(3, "h3");
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(5, "button", 55);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_12_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
+    i0.ɵɵelement(6, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 60)(8, "div", 61)(9, "div", 62)(10, "label");
+    i0.ɵɵelementStart(7, "div", 57)(8, "div", 58)(9, "div", 59)(10, "label");
     i0.ɵɵtext(11, "Name *");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(12, "input", 60);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_Conditional_12_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", 62)(14, "label");
+    i0.ɵɵelementStart(13, "div", 59)(14, "label");
     i0.ɵɵtext(15, "Description");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(16, "textarea", 61);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_Conditional_12_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", 62)(18, "label");
+    i0.ɵɵelementStart(17, "div", 59)(18, "label");
     i0.ɵɵtext(19, "Parent Category");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(20, "select", 62);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_Conditional_12_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_12_For_22_Template, 2, 2, "option", 63, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()()();
-    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.ɵɵelementStart(23, "div", 64)(24, "button", 65);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_12_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveCategory()); });
+    i0.ɵɵconditionalCreate(25, ListsCategoriesResource_Conditional_12_Conditional_25_Template, 1, 0, "i", 66);
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(27, "button", 67);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_12_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) {
@@ -326,28 +327,28 @@ function ListsCategoriesResource_Conditional_16_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵadvance();
     i0.ɵɵproperty("disabled", ctx_r2.isSaving);
 } }
-function ListsCategoriesResource_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+function ListsCategoriesResource_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    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.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(1, "div", 68);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r14); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 69)(3, "h3");
     i0.ɵɵtext(4, "Delete Category");
     i0.ɵɵelementEnd();
-    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.ɵɵelementStart(5, "button", 70);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelement(6, "i", 56);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(7, "div", 60)(8, "p");
+    i0.ɵɵelementStart(7, "div", 57)(8, "p");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    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.ɵɵelementStart(10, "div", 64)(11, "button", 71);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_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", 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.ɵɵelementStart(13, "button", 72);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_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) {
@@ -676,38 +677,33 @@ 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"]], 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) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListsCategoriesResource, selectors: [["mj-lists-categories-resource"]], standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 14, vars: 5, consts: [["categoryNodeTemplate", ""], ["Title", "List Categories", "Icon", "fa-solid fa-tags"], ["actions", ""], ["mjButton", "", "variant", "primary", "size", "sm", 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);
-            i0.ɵɵelementStart(4, "h2");
-            i0.ɵɵtext(5, "List Categories");
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 1)(2, "div", 2)(3, "button", 3);
+            i0.ɵɵlistener("click", function ListsCategoriesResource_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.createCategory()); });
+            i0.ɵɵelement(4, "i", 4);
+            i0.ɵɵtext(5, " New Category ");
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(6, "mj-page-body");
+            i0.ɵɵconditionalCreate(7, ListsCategoriesResource_Conditional_7_Template, 2, 0, "div", 5);
+            i0.ɵɵconditionalCreate(8, ListsCategoriesResource_Conditional_8_Template, 20, 0, "div", 6);
+            i0.ɵɵconditionalCreate(9, ListsCategoriesResource_Conditional_9_Template, 13, 3, "div", 7);
+            i0.ɵɵtemplate(10, ListsCategoriesResource_ng_template_10_Template, 10, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(12, ListsCategoriesResource_Conditional_12_Template, 29, 9, "div", 8);
+            i0.ɵɵconditionalCreate(13, ListsCategoriesResource_Conditional_13_Template, 15, 1, "div", 8);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(6, "div", 5)(7, "button", 6);
-            i0.ɵɵlistener("click", function ListsCategoriesResource_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.createCategory()); });
-            i0.ɵɵelement(8, "i", 7);
-            i0.ɵɵelementStart(9, "span");
-            i0.ɵɵtext(10, "New Category");
-            i0.ɵɵelementEnd()()()();
-            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.ɵɵconditional(ctx.isLoading ? 11 : -1);
+            i0.ɵɵadvance(7);
+            i0.ɵɵconditional(ctx.isLoading ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && ctx.categoryViewModels.length === 0 ? 12 : -1);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.categoryViewModels.length === 0 ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading && ctx.categoryViewModels.length > 0 ? 13 : -1);
+            i0.ɵɵconditional(!ctx.isLoading && ctx.categoryViewModels.length > 0 ? 9 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵconditional(ctx.showDialog ? 16 : -1);
+            i0.ɵɵconditional(ctx.showDialog ? 12 : -1);
             i0.ɵɵadvance();
-            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: var(--mj-bg-surface);\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: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\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: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 48px;\n      color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: var(--mj-status-success) !important;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\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 color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .btn-create-large:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\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: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\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 var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .count-badge {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .icon-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .icon-btn.danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\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: var(--mj-bg-surface-sunken);\n    }\n\n    .node-content:focus {\n      outline: none;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content:focus-visible {\n      outline: 2px solid var(--mj-brand-primary);\n      outline-offset: -2px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content.selected:focus-visible {\n      outline: 2px solid var(--mj-brand-primary-hover);\n    }\n\n    .expand-btn {\n      background: none;\n      border: none;\n      padding: 2px;\n      color: var(--mj-text-muted);\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: var(--mj-text-secondary);\n    }\n\n    .expand-placeholder {\n      width: 20px;\n    }\n\n    .node-content .fa-folder,\n    .node-content .fa-folder-open {\n      color: var(--mj-status-warning);\n    }\n\n    .node-name {\n      flex: 1;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .node-count {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 4px;\n    }\n\n    .field-value {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .detail-stats {\n      display: flex;\n      gap: 24px;\n      margin: 24px 0;\n      padding: 16px;\n      background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n    }\n\n    .stat-label {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .category-lists h4 {\n      margin: 0 0 12px;\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n      border-radius: 4px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .mini-list-item i {\n      color: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\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: var(--mj-bg-overlay);\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: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\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 var(--mj-border-default);\n    }\n\n    .modal-header.danger {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border-bottom-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    }\n\n    .modal-header.danger h3 {\n      color: var(--mj-status-error);\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .modal-close:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\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: var(--mj-text-secondary);\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 var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .btn-secondary {\n      padding: 8px 16px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\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: var(--mj-brand-primary);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\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: var(--mj-status-error);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-inverse);\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-danger:hover {\n      background: var(--mj-status-error);\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 ? 13 : -1);
+        } }, dependencies: [i2.NgTemplateOutlet, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.MJButtonDirective, i4.MJPageLayoutComponent, i4.MJPageHeaderComponent, i4.MJPageBodyComponent, i5.LoadingComponent], styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\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: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\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: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 48px;\n      color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: var(--mj-status-success) !important;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\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 color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .btn-create-large:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\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: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\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 var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .count-badge {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .icon-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .icon-btn.danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\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: var(--mj-bg-surface-sunken);\n    }\n\n    .node-content:focus {\n      outline: none;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content:focus-visible {\n      outline: 2px solid var(--mj-brand-primary);\n      outline-offset: -2px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content.selected:focus-visible {\n      outline: 2px solid var(--mj-brand-primary-hover);\n    }\n\n    .expand-btn {\n      background: none;\n      border: none;\n      padding: 2px;\n      color: var(--mj-text-muted);\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: var(--mj-text-secondary);\n    }\n\n    .expand-placeholder {\n      width: 20px;\n    }\n\n    .node-content .fa-folder,\n    .node-content .fa-folder-open {\n      color: var(--mj-status-warning);\n    }\n\n    .node-name {\n      flex: 1;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .node-count {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 4px;\n    }\n\n    .field-value {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .detail-stats {\n      display: flex;\n      gap: 24px;\n      margin: 24px 0;\n      padding: 16px;\n      background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n    }\n\n    .stat-label {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .category-lists h4 {\n      margin: 0 0 12px;\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n      border-radius: 4px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .mini-list-item i {\n      color: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\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: var(--mj-bg-overlay);\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: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\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 var(--mj-border-default);\n    }\n\n    .modal-header.danger {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border-bottom-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    }\n\n    .modal-header.danger h3 {\n      color: var(--mj-status-error);\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .modal-close:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\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: var(--mj-text-secondary);\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 var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .btn-secondary {\n      padding: 8px 16px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\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: var(--mj-brand-primary);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\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: var(--mj-status-error);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-inverse);\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-danger:hover {\n      background: var(--mj-status-error);\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')
@@ -716,21 +712,16 @@ export { ListsCategoriesResource };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListsCategoriesResource, [{
         type: Component,
         args: [{ standalone: false, selector: 'mj-lists-categories-resource', template: `
-    <div class="lists-categories-container">
-      <!-- Header -->
-      <div class="categories-header">
-        <div class="header-title">
-          <i class="fa-solid fa-tags"></i>
-          <h2>List Categories</h2>
-        </div>
-        <div class="header-actions">
-          <button class="btn-create" (click)="createCategory()">
-            <i class="fa-solid fa-plus"></i>
-            <span>New Category</span>
+    <mj-page-layout>
+      <mj-page-header Title="List Categories" Icon="fa-solid fa-tags">
+        <div actions>
+          <button mjButton variant="primary" size="sm" (click)="createCategory()">
+            <i class="fa-solid fa-plus"></i> New Category
           </button>
         </div>
-      </div>
-    
+      </mj-page-header>
+
+      <mj-page-body>
       <!-- Loading State -->
       @if (isLoading) {
         <div class="loading-container">
@@ -971,8 +962,9 @@ export { ListsCategoriesResource };
           </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: var(--mj-bg-surface);\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: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\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: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 48px;\n      color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: var(--mj-status-success) !important;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\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 color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .btn-create-large:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\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: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\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 var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .count-badge {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .icon-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .icon-btn.danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\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: var(--mj-bg-surface-sunken);\n    }\n\n    .node-content:focus {\n      outline: none;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content:focus-visible {\n      outline: 2px solid var(--mj-brand-primary);\n      outline-offset: -2px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content.selected:focus-visible {\n      outline: 2px solid var(--mj-brand-primary-hover);\n    }\n\n    .expand-btn {\n      background: none;\n      border: none;\n      padding: 2px;\n      color: var(--mj-text-muted);\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: var(--mj-text-secondary);\n    }\n\n    .expand-placeholder {\n      width: 20px;\n    }\n\n    .node-content .fa-folder,\n    .node-content .fa-folder-open {\n      color: var(--mj-status-warning);\n    }\n\n    .node-name {\n      flex: 1;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .node-count {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 4px;\n    }\n\n    .field-value {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .detail-stats {\n      display: flex;\n      gap: 24px;\n      margin: 24px 0;\n      padding: 16px;\n      background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n    }\n\n    .stat-label {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .category-lists h4 {\n      margin: 0 0 12px;\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n      border-radius: 4px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .mini-list-item i {\n      color: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\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: var(--mj-bg-overlay);\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: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\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 var(--mj-border-default);\n    }\n\n    .modal-header.danger {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border-bottom-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    }\n\n    .modal-header.danger h3 {\n      color: var(--mj-status-error);\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .modal-close:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\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: var(--mj-text-secondary);\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 var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .btn-secondary {\n      padding: 8px 16px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\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: var(--mj-brand-primary);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\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: var(--mj-status-error);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-inverse);\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-danger:hover {\n      background: var(--mj-status-error);\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  "] }]
+      </mj-page-body>
+    </mj-page-layout>
+    `, encapsulation: ViewEncapsulation.None, styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\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: var(--mj-bg-surface-card);\n      border-bottom: 1px solid var(--mj-border-default);\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: var(--mj-brand-primary);\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\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: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 48px;\n      color: var(--mj-brand-primary);\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: var(--mj-text-primary);\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: var(--mj-text-secondary);\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: var(--mj-text-secondary);\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: var(--mj-status-success) !important;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\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 color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n    }\n\n    .btn-create-large:hover {\n      background: var(--mj-brand-primary-hover);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\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: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-sm);\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 var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .count-badge {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\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: var(--mj-text-secondary);\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .icon-btn:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .icon-btn.danger:hover {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      color: var(--mj-status-error);\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: var(--mj-bg-surface-sunken);\n    }\n\n    .node-content:focus {\n      outline: none;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content:focus-visible {\n      outline: 2px solid var(--mj-brand-primary);\n      outline-offset: -2px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content.selected {\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    }\n\n    .node-content.selected:focus-visible {\n      outline: 2px solid var(--mj-brand-primary-hover);\n    }\n\n    .expand-btn {\n      background: none;\n      border: none;\n      padding: 2px;\n      color: var(--mj-text-muted);\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: var(--mj-text-secondary);\n    }\n\n    .expand-placeholder {\n      width: 20px;\n    }\n\n    .node-content .fa-folder,\n    .node-content .fa-folder-open {\n      color: var(--mj-status-warning);\n    }\n\n    .node-name {\n      flex: 1;\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .node-count {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n      background: var(--mj-bg-surface-sunken);\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: var(--mj-text-muted);\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 4px;\n    }\n\n    .field-value {\n      font-size: 14px;\n      color: var(--mj-text-primary);\n    }\n\n    .detail-stats {\n      display: flex;\n      gap: 24px;\n      margin: 24px 0;\n      padding: 16px;\n      background: var(--mj-bg-surface);\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: var(--mj-brand-primary);\n    }\n\n    .stat-label {\n      font-size: 12px;\n      color: var(--mj-text-muted);\n    }\n\n    .category-lists h4 {\n      margin: 0 0 12px;\n      font-size: 13px;\n      font-weight: 600;\n      color: var(--mj-text-secondary);\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: var(--mj-bg-surface);\n      border-radius: 4px;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n\n    .mini-list-item i {\n      color: var(--mj-text-muted);\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: var(--mj-text-muted);\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: var(--mj-text-secondary);\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: var(--mj-brand-primary);\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: var(--mj-bg-overlay);\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: var(--mj-bg-surface-card);\n      border-radius: 8px;\n      box-shadow: var(--mj-shadow-lg);\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 var(--mj-border-default);\n    }\n\n    .modal-header.danger {\n      background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n      border-bottom-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    }\n\n    .modal-header.danger h3 {\n      color: var(--mj-status-error);\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: var(--mj-text-primary);\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: var(--mj-text-muted);\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .modal-close:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\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: var(--mj-text-secondary);\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 var(--mj-border-default);\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .btn-secondary {\n      padding: 8px 16px;\n      background: var(--mj-bg-surface-card);\n      border: 1px solid var(--mj-border-default);\n      border-radius: 6px;\n      color: var(--mj-text-secondary);\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: var(--mj-bg-surface-sunken);\n      border-color: var(--mj-border-strong);\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: var(--mj-brand-primary);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-inverse);\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: var(--mj-brand-primary-hover);\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: var(--mj-status-error);\n      border: none;\n      border-radius: 6px;\n      color: var(--mj-text-inverse);\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-danger:hover {\n      background: var(--mj-status-error);\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: 913 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsCategoriesResource, { className: "ListsCategoriesResource", filePath: "src/Lists/components/lists-categories-resource.component.ts", lineNumber: 901 }); })();
 //# sourceMappingURL=lists-categories-resource.component.js.map