@memberjunction/ng-dashboards 2.131.0 → 2.133.0

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

@@ -0,0 +1,949 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ViewEncapsulation } from '@angular/core';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { Metadata, RunView } from '@memberjunction/core';
+import { Subject } from 'rxjs';
+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";
+const _c0 = a0 => ({ vm: a0 });
+function ListsCategoriesResource_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 12);
+    i0.ɵɵelement(1, "mj-loading", 13);
+    i0.ɵɵelementEnd();
+} }
+function ListsCategoriesResource_div_12_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 14)(1, "div", 15);
+    i0.ɵɵelement(2, "div", 16)(3, "i", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "h3");
+    i0.ɵɵtext(5, "No Categories Yet");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "p");
+    i0.ɵɵtext(7, "Categories help you organize lists into logical groups.");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 18)(9, "div", 19);
+    i0.ɵɵelement(10, "i", 20);
+    i0.ɵɵelementStart(11, "span");
+    i0.ɵɵtext(12, "Create hierarchical folder structures");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 19);
+    i0.ɵɵelement(14, "i", 20);
+    i0.ɵɵelementStart(15, "span");
+    i0.ɵɵtext(16, "Quickly find related lists");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(17, "button", 21);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_12_Template_button_click_17_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.createCategory()); });
+    i0.ɵɵelement(18, "i", 7);
+    i0.ɵɵtext(19, " Create Your First Category ");
+    i0.ɵɵelementEnd()();
+} }
+function ListsCategoriesResource_div_13_ng_container_9_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function ListsCategoriesResource_div_13_ng_container_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, ListsCategoriesResource_div_13_ng_container_9_ng_container_1_Template, 1, 0, "ng-container", 31);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const vm_r4 = ctx.$implicit;
+    i0.ɵɵnextContext(2);
+    const categoryNodeTemplate_r5 = i0.ɵɵreference(15);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, vm_r4));
+} }
+function ListsCategoriesResource_div_13_div_10_div_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 39)(1, "label");
+    i0.ɵɵtext(2, "Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 40);
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.selectedCategory.Description);
+} }
+function ListsCategoriesResource_div_13_div_10_div_32_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 50);
+    i0.ɵɵelement(1, "i", 51);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const list_r7 = ctx.$implicit;
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(list_r7.Name);
+} }
+function ListsCategoriesResource_div_13_div_10_div_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 47)(1, "h4");
+    i0.ɵɵtext(2, "Lists in this category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 48);
+    i0.ɵɵtemplate(4, ListsCategoriesResource_div_13_div_10_div_32_div_4_Template, 4, 1, "div", 49);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngForOf", ctx_r2.selectedCategoryLists);
+} }
+function ListsCategoriesResource_div_13_div_10_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 32)(1, "div", 25)(2, "h3");
+    i0.ɵɵtext(3, "Category Details");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 33)(5, "button", 34);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_13_div_10_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.editCategory()); });
+    i0.ɵɵelement(6, "i", 35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 36);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_13_div_10_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.deleteCategory()); });
+    i0.ɵɵelement(8, "i", 37);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(9, "div", 38)(10, "div", 39)(11, "label");
+    i0.ɵɵtext(12, "Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "span", 40);
+    i0.ɵɵtext(14);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(15, ListsCategoriesResource_div_13_div_10_div_15_Template, 5, 1, "div", 41);
+    i0.ɵɵelementStart(16, "div", 39)(17, "label");
+    i0.ɵɵtext(18, "Parent Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "span", 40);
+    i0.ɵɵtext(20);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(21, "div", 42)(22, "div", 43)(23, "span", 44);
+    i0.ɵɵtext(24);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(25, "span", 45);
+    i0.ɵɵtext(26, "Lists");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(27, "div", 43)(28, "span", 44);
+    i0.ɵɵtext(29);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(30, "span", 45);
+    i0.ɵɵtext(31, "Subcategories");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(32, ListsCategoriesResource_div_13_div_10_div_32_Template, 5, 1, "div", 46);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(14);
+    i0.ɵɵtextInterpolate(ctx_r2.selectedCategory.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.selectedCategory.Description);
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getParentCategoryName(ctx_r2.selectedCategory) || "(Top Level)", " ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.getSelectedCategoryListCount());
+    i0.ɵɵadvance(5);
+    i0.ɵɵtextInterpolate(ctx_r2.getSelectedCategoryChildCount());
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r2.selectedCategoryLists.length > 0);
+} }
+function ListsCategoriesResource_div_13_div_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52)(1, "div", 53);
+    i0.ɵɵelement(2, "i", 54);
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "Select a category to view details");
+    i0.ɵɵelementEnd()()();
+} }
+function ListsCategoriesResource_div_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22)(1, "div", 23)(2, "div", 24)(3, "div", 25)(4, "h3");
+    i0.ɵɵtext(5, "Categories");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 26);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 27);
+    i0.ɵɵtemplate(9, ListsCategoriesResource_div_13_ng_container_9_Template, 2, 4, "ng-container", 28);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(10, ListsCategoriesResource_div_13_div_10_Template, 33, 6, "div", 29)(11, ListsCategoriesResource_div_13_div_11_Template, 5, 0, "div", 30);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(7);
+    i0.ɵɵtextInterpolate(ctx_r2.categories.length);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r2.getTopLevelCategories());
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.selectedCategory);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.selectedCategory);
+} }
+function ListsCategoriesResource_ng_template_14_button_2_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 63);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_ng_template_14_button_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const vm_r9 = i0.ɵɵnextContext().vm; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.toggleExpand($event, vm_r9)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const vm_r9 = i0.ɵɵnextContext().vm;
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(vm_r9.isExpanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
+} }
+function ListsCategoriesResource_ng_template_14_span_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 64);
+} }
+function ListsCategoriesResource_ng_template_14_div_9_ng_container_1_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainer(0);
+} }
+function ListsCategoriesResource_ng_template_14_div_9_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵtemplate(1, ListsCategoriesResource_ng_template_14_div_9_ng_container_1_ng_container_1_Template, 1, 0, "ng-container", 31);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const childVm_r11 = ctx.$implicit;
+    i0.ɵɵnextContext(3);
+    const categoryNodeTemplate_r5 = i0.ɵɵreference(15);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, childVm_r11));
+} }
+function ListsCategoriesResource_ng_template_14_div_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵtemplate(1, ListsCategoriesResource_ng_template_14_div_9_ng_container_1_Template, 2, 4, "ng-container", 28);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const vm_r9 = i0.ɵɵnextContext().vm;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r2.getChildCategories(vm_r9.category));
+} }
+function ListsCategoriesResource_ng_template_14_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 55)(1, "div", 56);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_ng_template_14_Template_div_click_1_listener() { const vm_r9 = i0.ɵɵrestoreView(_r8).vm; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectCategory(vm_r9.category)); })("keydown.enter", function ListsCategoriesResource_ng_template_14_Template_div_keydown_enter_1_listener() { const vm_r9 = i0.ɵɵrestoreView(_r8).vm; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.selectCategory(vm_r9.category)); })("keydown.space", function ListsCategoriesResource_ng_template_14_Template_div_keydown_space_1_listener($event) { const vm_r9 = i0.ɵɵrestoreView(_r8).vm; const ctx_r2 = i0.ɵɵnextContext(); ctx_r2.selectCategory(vm_r9.category); return i0.ɵɵresetView($event.preventDefault()); })("keydown.arrowRight", function ListsCategoriesResource_ng_template_14_Template_div_keydown_arrowRight_1_listener($event) { const vm_r9 = i0.ɵɵrestoreView(_r8).vm; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.expandNode($event, vm_r9)); })("keydown.arrowLeft", function ListsCategoriesResource_ng_template_14_Template_div_keydown_arrowLeft_1_listener($event) { const vm_r9 = i0.ɵɵrestoreView(_r8).vm; const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.collapseNode($event, vm_r9)); });
+    i0.ɵɵtemplate(2, ListsCategoriesResource_ng_template_14_button_2_Template, 2, 2, "button", 57)(3, ListsCategoriesResource_ng_template_14_span_3_Template, 1, 0, "span", 58);
+    i0.ɵɵelement(4, "i", 59);
+    i0.ɵɵelementStart(5, "span", 60);
+    i0.ɵɵtext(6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "span", 61);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(9, ListsCategoriesResource_ng_template_14_div_9_Template, 2, 1, "div", 62);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const vm_r9 = ctx.vm;
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵstyleProp("padding-left", vm_r9.depth * 20, "px");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("selected", (ctx_r2.selectedCategory == null ? null : ctx_r2.selectedCategory.ID) === vm_r9.category.ID);
+    i0.ɵɵattribute("aria-expanded", ctx_r2.hasChildren(vm_r9.category) ? vm_r9.isExpanded : null)("aria-selected", (ctx_r2.selectedCategory == null ? null : ctx_r2.selectedCategory.ID) === vm_r9.category.ID)("aria-label", vm_r9.category.Name + " - " + vm_r9.listCount + " lists");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.hasChildren(vm_r9.category));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.hasChildren(vm_r9.category));
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("fa-folder-open", vm_r9.isExpanded);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(vm_r9.category.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(vm_r9.listCount);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", vm_r9.isExpanded && ctx_r2.hasChildren(vm_r9.category));
+} }
+function ListsCategoriesResource_div_16_option_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 82);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const parent_r13 = ctx.$implicit;
+    i0.ɵɵproperty("ngValue", parent_r13.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(parent_r13.displayName);
+} }
+function ListsCategoriesResource_div_16_i_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 83);
+} }
+function ListsCategoriesResource_div_16_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_16_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
+    i0.ɵɵelementStart(1, "div", 67);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_16_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 68)(3, "h3");
+    i0.ɵɵtext(4);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 69);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_16_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
+    i0.ɵɵelement(6, "i", 70);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 71)(8, "div", 72)(9, "div", 73)(10, "label");
+    i0.ɵɵtext(11, "Name *");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "input", 74);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_div_16_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.dialogName, $event) || (ctx_r2.dialogName = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 73)(14, "label");
+    i0.ɵɵtext(15, "Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "textarea", 75);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_div_16_Template_textarea_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.dialogDescription, $event) || (ctx_r2.dialogDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 73)(18, "label");
+    i0.ɵɵtext(19, "Parent Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "select", 76);
+    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_div_16_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r2.dialogParentId, $event) || (ctx_r2.dialogParentId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵtemplate(21, ListsCategoriesResource_div_16_option_21_Template, 2, 2, "option", 77);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(22, "div", 78)(23, "button", 79);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_16_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveCategory()); });
+    i0.ɵɵtemplate(24, ListsCategoriesResource_div_16_i_24_Template, 1, 0, "i", 80);
+    i0.ɵɵtext(25);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "button", 81);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_16_Template_button_click_26_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
+    i0.ɵɵtext(27, "Cancel");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate(ctx_r2.editingCategory ? "Edit Category" : "Create Category");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r2.isSaving);
+    i0.ɵɵadvance(7);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.dialogName);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.dialogDescription);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r2.dialogParentId);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r2.availableParents);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", !ctx_r2.dialogName || ctx_r2.isSaving);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.isSaving);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.isSaving ? "Saving..." : ctx_r2.editingCategory ? "Save" : "Create", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r2.isSaving);
+} }
+function ListsCategoriesResource_div_17_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 66);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_17_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelementStart(1, "div", 84);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_17_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r14); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(2, "div", 85)(3, "h3");
+    i0.ɵɵtext(4, "Delete Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "button", 86);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_17_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵelement(6, "i", 70);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(7, "div", 71)(8, "p");
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 78)(11, "button", 87);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_17_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.confirmDelete()); });
+    i0.ɵɵtext(12, " Delete ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "button", 88);
+    i0.ɵɵlistener("click", function ListsCategoriesResource_div_17_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
+    i0.ɵɵtext(14, "Cancel");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(9);
+    i0.ɵɵtextInterpolate(ctx_r2.deleteConfirmMessage);
+} }
+export function LoadListsCategoriesResource() {
+    // tree shaker 
+}
+let ListsCategoriesResource = class ListsCategoriesResource extends BaseResourceComponent {
+    cdr;
+    notificationService;
+    destroy$ = new Subject();
+    isLoading = true;
+    categories = [];
+    categoryViewModels = [];
+    selectedCategory = null;
+    selectedCategoryLists = [];
+    // Dialog
+    showDialog = false;
+    editingCategory = null;
+    dialogName = '';
+    dialogDescription = '';
+    dialogParentId = null;
+    availableParents = [];
+    // Operation states
+    isSaving = false;
+    // Delete confirmation dialog
+    showDeleteConfirm = false;
+    deleteConfirmMessage = '';
+    categoryToDelete = null;
+    listsByCategoryId = new Map();
+    categoryMap = new Map();
+    constructor(cdr, notificationService) {
+        super();
+        this.cdr = cdr;
+        this.notificationService = notificationService;
+    }
+    async ngOnInit() {
+        await this.loadData();
+        this.NotifyLoadComplete();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    async loadData() {
+        this.isLoading = true;
+        try {
+            const md = new Metadata();
+            const rv = new RunView();
+            const userId = md.CurrentUser?.ID;
+            const [categoriesResult, listsResult] = await rv.RunViews([
+                {
+                    EntityName: 'List Categories',
+                    OrderBy: 'Name',
+                    ResultType: 'entity_object',
+                    CacheLocal: true // Categories rarely change, cache for performance
+                },
+                {
+                    EntityName: 'Lists',
+                    ExtraFilter: userId ? `UserID = '${userId}'` : '',
+                    ResultType: 'entity_object'
+                }
+            ]);
+            if (!categoriesResult.Success) {
+                console.error('Failed to load categories');
+                return;
+            }
+            this.categories = categoriesResult.Results;
+            const lists = listsResult.Results;
+            // Build category map
+            this.categoryMap.clear();
+            for (const cat of this.categories) {
+                this.categoryMap.set(cat.ID, cat);
+            }
+            // Group lists by category
+            this.listsByCategoryId.clear();
+            for (const list of lists) {
+                if (list.CategoryID) {
+                    const existing = this.listsByCategoryId.get(list.CategoryID) || [];
+                    existing.push(list);
+                    this.listsByCategoryId.set(list.CategoryID, existing);
+                }
+            }
+            // Build view models
+            this.buildCategoryViewModels();
+            this.buildAvailableParents();
+        }
+        catch (error) {
+            console.error('Error loading categories:', error);
+        }
+        finally {
+            this.isLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    buildCategoryViewModels() {
+        this.categoryViewModels = [];
+        const buildVm = (category, depth) => {
+            const lists = this.listsByCategoryId.get(category.ID) || [];
+            const children = this.categories.filter(c => c.ParentID === category.ID);
+            return {
+                category,
+                listCount: lists.length,
+                childCount: children.length,
+                depth,
+                isExpanded: true
+            };
+        };
+        const processCategory = (category, depth) => {
+            this.categoryViewModels.push(buildVm(category, depth));
+            const children = this.categories.filter(c => c.ParentID === category.ID);
+            for (const child of children) {
+                processCategory(child, depth + 1);
+            }
+        };
+        const topLevel = this.categories.filter(c => !c.ParentID);
+        for (const cat of topLevel) {
+            processCategory(cat, 0);
+        }
+    }
+    buildAvailableParents() {
+        this.availableParents = [{ ID: null, displayName: '(Top Level)' }];
+        const addCategory = (cat, prefix) => {
+            // Exclude the editing category and its descendants
+            if (this.editingCategory && this.isDescendantOf(cat, this.editingCategory)) {
+                return;
+            }
+            this.availableParents.push({ ID: cat.ID, displayName: prefix + cat.Name });
+            const children = this.categories.filter(c => c.ParentID === cat.ID);
+            for (const child of children) {
+                addCategory(child, prefix + '\u00A0\u00A0');
+            }
+        };
+        const topLevel = this.categories.filter(c => !c.ParentID);
+        for (const cat of topLevel) {
+            if (this.editingCategory?.ID !== cat.ID) {
+                addCategory(cat, '');
+            }
+        }
+    }
+    isDescendantOf(category, ancestor) {
+        if (category.ID === ancestor.ID)
+            return true;
+        if (!category.ParentID)
+            return false;
+        const parent = this.categoryMap.get(category.ParentID);
+        return parent ? this.isDescendantOf(parent, ancestor) : false;
+    }
+    getTopLevelCategories() {
+        return this.categoryViewModels.filter(vm => !vm.category.ParentID);
+    }
+    getChildCategories(parent) {
+        return this.categoryViewModels.filter(vm => vm.category.ParentID === parent.ID);
+    }
+    hasChildren(category) {
+        return this.categories.some(c => c.ParentID === category.ID);
+    }
+    toggleExpand(event, vm) {
+        event.stopPropagation();
+        vm.isExpanded = !vm.isExpanded;
+    }
+    expandNode(event, vm) {
+        event.preventDefault();
+        if (this.hasChildren(vm.category) && !vm.isExpanded) {
+            vm.isExpanded = true;
+        }
+    }
+    collapseNode(event, vm) {
+        event.preventDefault();
+        if (vm.isExpanded) {
+            vm.isExpanded = false;
+        }
+    }
+    selectCategory(category) {
+        this.selectedCategory = category;
+        this.selectedCategoryLists = this.listsByCategoryId.get(category.ID) || [];
+    }
+    getParentCategoryName(category) {
+        if (!category.ParentID)
+            return null;
+        return this.categoryMap.get(category.ParentID)?.Name || null;
+    }
+    getSelectedCategoryListCount() {
+        if (!this.selectedCategory)
+            return 0;
+        return this.listsByCategoryId.get(this.selectedCategory.ID)?.length || 0;
+    }
+    getSelectedCategoryChildCount() {
+        if (!this.selectedCategory)
+            return 0;
+        return this.categories.filter(c => c.ParentID === this.selectedCategory.ID).length;
+    }
+    createCategory() {
+        this.editingCategory = null;
+        this.dialogName = '';
+        this.dialogDescription = '';
+        this.dialogParentId = null;
+        this.buildAvailableParents();
+        this.showDialog = true;
+    }
+    editCategory() {
+        if (!this.selectedCategory)
+            return;
+        this.editingCategory = this.selectedCategory;
+        this.dialogName = this.selectedCategory.Name;
+        this.dialogDescription = this.selectedCategory.Description || '';
+        this.dialogParentId = this.selectedCategory.ParentID || null;
+        this.buildAvailableParents();
+        this.showDialog = true;
+    }
+    deleteCategory() {
+        if (!this.selectedCategory)
+            return;
+        this.categoryToDelete = this.selectedCategory;
+        const categoryName = this.categoryToDelete.Name;
+        const listsInCategory = this.listsByCategoryId.get(this.categoryToDelete.ID) || [];
+        const childCategories = this.categories.filter(c => c.ParentID === this.categoryToDelete.ID);
+        let message = `Are you sure you want to delete "${categoryName}"?`;
+        if (listsInCategory.length > 0) {
+            message += ` ${listsInCategory.length} list(s) will be uncategorized.`;
+        }
+        if (childCategories.length > 0) {
+            message += ` ${childCategories.length} subcategory(ies) will become top-level.`;
+        }
+        this.deleteConfirmMessage = message;
+        this.showDeleteConfirm = true;
+    }
+    cancelDelete() {
+        this.showDeleteConfirm = false;
+        this.categoryToDelete = null;
+        this.deleteConfirmMessage = '';
+    }
+    async confirmDelete() {
+        if (!this.categoryToDelete)
+            return;
+        const categoryName = this.categoryToDelete.Name;
+        const categoryToDelete = this.categoryToDelete;
+        this.showDeleteConfirm = false;
+        this.isLoading = true;
+        this.cdr.detectChanges();
+        try {
+            const deleted = await categoryToDelete.Delete();
+            if (deleted) {
+                this.notificationService.CreateSimpleNotification(`"${categoryName}" deleted`, 'success', 3000);
+            }
+            else {
+                // Get the detailed error message from LatestResult
+                const errorMessage = categoryToDelete.LatestResult?.Message || 'Unknown error occurred';
+                console.error('Failed to delete category:', categoryToDelete.LatestResult);
+                this.notificationService.CreateSimpleNotification(`Failed to delete category: ${errorMessage}`, 'error', 6000);
+            }
+            this.selectedCategory = null;
+            this.categoryToDelete = null;
+            await this.loadData();
+        }
+        catch (error) {
+            console.error('Error deleting category:', error);
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            this.notificationService.CreateSimpleNotification(`Error deleting category: ${errorMessage}`, 'error', 6000);
+        }
+        finally {
+            this.isLoading = false;
+            this.cdr.detectChanges();
+        }
+    }
+    closeDialog() {
+        this.showDialog = false;
+        this.editingCategory = null;
+    }
+    async saveCategory() {
+        this.isSaving = true;
+        this.cdr.detectChanges();
+        const isEditing = !!this.editingCategory;
+        const categoryName = this.dialogName;
+        try {
+            const md = new Metadata();
+            let category;
+            if (this.editingCategory) {
+                category = this.editingCategory;
+            }
+            else {
+                category = await md.GetEntityObject('List Categories');
+                category.UserID = md.CurrentUser.ID;
+            }
+            category.Name = this.dialogName;
+            category.Description = this.dialogDescription || null;
+            category.ParentID = this.dialogParentId || null;
+            const saved = await category.Save();
+            if (saved) {
+                this.notificationService.CreateSimpleNotification(isEditing ? `"${categoryName}" updated` : `"${categoryName}" created`, 'success', 3000);
+                this.closeDialog();
+                await this.loadData();
+                // Re-select the saved category
+                if (isEditing) {
+                    this.selectedCategory = category;
+                    this.selectedCategoryLists = this.listsByCategoryId.get(category.ID) || [];
+                }
+            }
+            else {
+                // Get the detailed error message from LatestResult
+                const errorMessage = category.LatestResult?.Message || 'Unknown error occurred';
+                const action = isEditing ? 'update' : 'create';
+                console.error(`Failed to ${action} category:`, category.LatestResult);
+                this.notificationService.CreateSimpleNotification(`Failed to ${action} category: ${errorMessage}`, 'error', 6000);
+            }
+        }
+        catch (error) {
+            console.error('Error saving category:', error);
+            const errorMessage = error instanceof Error ? error.message : String(error);
+            this.notificationService.CreateSimpleNotification(`Error saving category: ${errorMessage}`, 'error', 6000);
+        }
+        finally {
+            this.isSaving = false;
+            this.cdr.detectChanges();
+        }
+    }
+    async GetResourceDisplayName(data) {
+        return 'Categories';
+    }
+    async GetResourceIconClass(data) {
+        return 'fa-solid fa-tags';
+    }
+    static ɵfac = function ListsCategoriesResource_Factory(t) { return new (t || ListsCategoriesResource)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1.MJNotificationService)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ListsCategoriesResource, selectors: [["mj-lists-categories-resource"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 18, vars: 5, consts: [["categoryNodeTemplate", ""], [1, "lists-categories-container"], [1, "categories-header"], [1, "header-title"], [1, "fa-solid", "fa-tags"], [1, "header-actions"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], ["class", "loading-container", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], ["class", "categories-content", 4, "ngIf"], ["class", "modal-overlay", 3, "click", 4, "ngIf"], [1, "loading-container"], ["text", "Loading categories...", "size", "medium"], [1, "empty-state"], [1, "empty-state-icon-wrapper"], [1, "icon-bg"], [1, "fa-solid", "fa-folder-tree"], [1, "empty-state-features"], [1, "feature-item"], [1, "fa-solid", "fa-check-circle"], [1, "btn-create-large", 3, "click"], [1, "categories-content"], [1, "categories-layout"], [1, "category-tree-panel"], [1, "panel-header"], [1, "count-badge"], ["role", "tree", "aria-label", "Category tree", 1, "tree-content"], [4, "ngFor", "ngForOf"], ["class", "category-detail-panel", 4, "ngIf"], ["class", "category-detail-panel empty", 4, "ngIf"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "category-detail-panel"], [1, "panel-actions"], ["title", "Edit", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["title", "Delete", 1, "icon-btn", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "detail-content"], [1, "detail-field"], [1, "field-value"], ["class", "detail-field", 4, "ngIf"], [1, "detail-stats"], [1, "stat-item"], [1, "stat-value"], [1, "stat-label"], ["class", "category-lists", 4, "ngIf"], [1, "category-lists"], [1, "mini-list"], ["class", "mini-list-item", 4, "ngFor", "ngForOf"], [1, "mini-list-item"], [1, "fa-solid", "fa-list"], [1, "category-detail-panel", "empty"], [1, "no-selection"], [1, "fa-solid", "fa-arrow-left"], [1, "category-node"], ["tabindex", "0", "role", "treeitem", 1, "node-content", 3, "click", "keydown.enter", "keydown.space", "keydown.arrowRight", "keydown.arrowLeft"], ["class", "expand-btn", "tabindex", "-1", "aria-hidden", "true", 3, "click", 4, "ngIf"], ["class", "expand-placeholder", 4, "ngIf"], ["aria-hidden", "true", 1, "fa-solid", "fa-folder"], [1, "node-name"], ["aria-hidden", "true", 1, "node-count"], ["class", "node-children", "role", "group", 4, "ngIf"], ["tabindex", "-1", "aria-hidden", "true", 1, "expand-btn", 3, "click"], [1, "expand-placeholder"], ["role", "group", 1, "node-children"], [1, "modal-overlay", 3, "click"], [1, "modal-dialog", 3, "click"], [1, "modal-header"], [1, "modal-close", 3, "click", "disabled"], [1, "fa-solid", "fa-times"], [1, "modal-body"], [1, "category-form"], [1, "form-group"], ["type", "text", "placeholder", "Enter category name", 1, "form-input", 3, "ngModelChange", "ngModel"], ["placeholder", "Optional description", "rows", "3", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-input", 3, "ngModelChange", "ngModel"], [3, "ngValue", 4, "ngFor", "ngForOf"], [1, "modal-footer"], [1, "btn-primary", 3, "click", "disabled"], ["class", "fa-solid fa-spinner fa-spin", 4, "ngIf"], [1, "btn-secondary", 3, "click", "disabled"], [3, "ngValue"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "modal-dialog", "modal-sm", 3, "click"], [1, "modal-header", "danger"], [1, "modal-close", 3, "click"], [1, "btn-danger", 3, "click"], [1, "btn-secondary", 3, "click"]], template: function ListsCategoriesResource_Template(rf, ctx) { if (rf & 1) {
+            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.ɵɵ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.ɵɵtemplate(11, ListsCategoriesResource_div_11_Template, 2, 0, "div", 8)(12, ListsCategoriesResource_div_12_Template, 20, 0, "div", 9)(13, ListsCategoriesResource_div_13_Template, 12, 4, "div", 10)(14, ListsCategoriesResource_ng_template_14_Template, 10, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(16, ListsCategoriesResource_div_16_Template, 28, 10, "div", 11)(17, ListsCategoriesResource_div_17_Template, 15, 1, "div", 11);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(11);
+            i0.ɵɵproperty("ngIf", ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.categoryViewModels.length === 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isLoading && ctx.categoryViewModels.length > 0);
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("ngIf", ctx.showDialog);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.showDeleteConfirm);
+        } }, dependencies: [i2.NgForOf, i2.NgIf, i2.NgTemplateOutlet, i3.NgSelectOption, i3.ɵNgSelectMultipleOption, i3.DefaultValueAccessor, i3.SelectControlValueAccessor, i3.NgControlStatus, i3.NgModel, i4.LoadingComponent], styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-categories-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .categories-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-create:hover {\n      background: #1976D2;\n    }\n\n    /* Loading */\n    .loading-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n    }\n\n    /* Empty State */\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      padding: 48px 40px;\n      text-align: center;\n      max-width: 420px;\n      margin: 0 auto;\n    }\n\n    .empty-state-icon-wrapper {\n      position: relative;\n      margin-bottom: 24px;\n    }\n\n    .empty-state-icon-wrapper .icon-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 100px;\n      height: 100px;\n      border-radius: 50%;\n      background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 48px;\n      color: #2196F3;\n      z-index: 1;\n    }\n\n    .empty-state h3 {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: #666;\n      font-size: 15px;\n      line-height: 1.5;\n    }\n\n    .empty-state-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin: 16px 0 24px;\n      text-align: left;\n    }\n\n    .feature-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 14px;\n      color: #555;\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: #4CAF50 !important;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);\n      color: white;\n      border: none;\n      border-radius: 8px;\n      font-size: 15px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n    }\n\n    .btn-create-large:hover {\n      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);\n    }\n\n    /* Content Layout */\n    .categories-content {\n      flex: 1;\n      padding: 16px 24px;\n      overflow: hidden;\n    }\n\n    .categories-layout {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n      height: 100%;\n    }\n\n    .category-tree-panel,\n    .category-detail-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-bottom: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .count-badge {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .panel-actions {\n      display: flex;\n      gap: 4px;\n    }\n\n    .icon-btn {\n      background: none;\n      border: none;\n      padding: 6px 8px;\n      color: #666;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .icon-btn:hover {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .icon-btn.danger:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    /* Tree Content */\n    .tree-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .category-node {\n      user-select: none;\n    }\n\n    .node-content {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .node-content:hover {\n      background: #f5f5f5;\n    }\n\n    .node-content:focus {\n      outline: none;\n      background: #e8f4fd;\n    }\n\n    .node-content:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: -2px;\n      background: #e8f4fd;\n    }\n\n    .node-content.selected {\n      background: #e3f2fd;\n    }\n\n    .node-content.selected:focus-visible {\n      outline: 2px solid #1976D2;\n    }\n\n    .expand-btn {\n      background: none;\n      border: none;\n      padding: 2px;\n      color: #999;\n      cursor: pointer;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .expand-btn:hover {\n      color: #666;\n    }\n\n    .expand-placeholder {\n      width: 20px;\n    }\n\n    .node-content .fa-folder,\n    .node-content .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .node-name {\n      flex: 1;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .node-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 1px 6px;\n      border-radius: 8px;\n    }\n\n    /* Detail Panel */\n    .detail-content {\n      flex: 1;\n      padding: 16px;\n      overflow-y: auto;\n    }\n\n    .detail-field {\n      margin-bottom: 16px;\n    }\n\n    .detail-field label {\n      display: block;\n      font-size: 12px;\n      font-weight: 500;\n      color: #999;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 4px;\n    }\n\n    .field-value {\n      font-size: 14px;\n      color: #333;\n    }\n\n    .detail-stats {\n      display: flex;\n      gap: 24px;\n      margin: 24px 0;\n      padding: 16px;\n      background: #f5f7fa;\n      border-radius: 8px;\n    }\n\n    .stat-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .stat-value {\n      font-size: 24px;\n      font-weight: 600;\n      color: #2196F3;\n    }\n\n    .stat-label {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .category-lists h4 {\n      margin: 0 0 12px;\n      font-size: 13px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .mini-list {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .mini-list-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f5f7fa;\n      border-radius: 4px;\n      font-size: 13px;\n      color: #333;\n    }\n\n    .mini-list-item i {\n      color: #999;\n    }\n\n    /* No Selection */\n    .category-detail-panel.empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .no-selection {\n      text-align: center;\n      color: #999;\n    }\n\n    .no-selection i {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n\n    .no-selection p {\n      margin: 0;\n    }\n\n    /* Form */\n    .category-form {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .form-group {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .form-group label {\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #2196F3;\n    }\n\n    /* Modal Styles */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10000;\n      animation: fadeIn 0.15s ease-out;\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    .modal-dialog {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 450px;\n      max-width: 90vw;\n      max-height: 90vh;\n      display: flex;\n      flex-direction: column;\n      animation: slideIn 0.2s ease-out;\n    }\n\n    .modal-dialog.modal-sm {\n      width: 400px;\n    }\n\n    @keyframes slideIn {\n      from { transform: translateY(-20px); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header.danger {\n      background: #ffebee;\n      border-bottom-color: #ffcdd2;\n    }\n\n    .modal-header.danger h3 {\n      color: #c62828;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .modal-close:hover:not(:disabled) {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .modal-close:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .modal-body {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0;\n      color: #666;\n      line-height: 1.6;\n    }\n\n    .modal-footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-secondary {\n      padding: 8px 16px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      color: #666;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n      border-color: #ccc;\n    }\n\n    .btn-secondary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-danger {\n      padding: 8px 16px;\n      background: #d32f2f;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-danger:hover {\n      background: #c62828;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .categories-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .category-detail-panel.empty {\n        display: none;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "], encapsulation: 2 });
+};
+ListsCategoriesResource = __decorate([
+    RegisterClass(BaseResourceComponent, 'ListsCategoriesResource')
+], ListsCategoriesResource);
+export { ListsCategoriesResource };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListsCategoriesResource, [{
+        type: Component,
+        args: [{ 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>
+          </button>
+        </div>
+      </div>
+
+      <!-- Loading State -->
+      <div class="loading-container" *ngIf="isLoading">
+        <mj-loading text="Loading categories..." size="medium"></mj-loading>
+      </div>
+
+      <!-- Empty State -->
+      <div class="empty-state" *ngIf="!isLoading && categoryViewModels.length === 0">
+        <div class="empty-state-icon-wrapper">
+          <div class="icon-bg"></div>
+          <i class="fa-solid fa-folder-tree"></i>
+        </div>
+        <h3>No Categories Yet</h3>
+        <p>Categories help you organize lists into logical groups.</p>
+        <div class="empty-state-features">
+          <div class="feature-item">
+            <i class="fa-solid fa-check-circle"></i>
+            <span>Create hierarchical folder structures</span>
+          </div>
+          <div class="feature-item">
+            <i class="fa-solid fa-check-circle"></i>
+            <span>Quickly find related lists</span>
+          </div>
+        </div>
+        <button class="btn-create-large" (click)="createCategory()">
+          <i class="fa-solid fa-plus"></i>
+          Create Your First Category
+        </button>
+      </div>
+
+      <!-- Categories Content -->
+      <div class="categories-content" *ngIf="!isLoading && categoryViewModels.length > 0">
+        <div class="categories-layout">
+          <!-- Category Tree -->
+          <div class="category-tree-panel">
+            <div class="panel-header">
+              <h3>Categories</h3>
+              <span class="count-badge">{{categories.length}}</span>
+            </div>
+            <div class="tree-content" role="tree" aria-label="Category tree">
+              <ng-container *ngFor="let vm of getTopLevelCategories()">
+                <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { vm: vm }"></ng-container>
+              </ng-container>
+            </div>
+          </div>
+
+          <!-- Category Details -->
+          <div class="category-detail-panel" *ngIf="selectedCategory">
+            <div class="panel-header">
+              <h3>Category Details</h3>
+              <div class="panel-actions">
+                <button class="icon-btn" (click)="editCategory()" title="Edit">
+                  <i class="fa-solid fa-pen"></i>
+                </button>
+                <button class="icon-btn danger" (click)="deleteCategory()" title="Delete">
+                  <i class="fa-solid fa-trash"></i>
+                </button>
+              </div>
+            </div>
+            <div class="detail-content">
+              <div class="detail-field">
+                <label>Name</label>
+                <span class="field-value">{{selectedCategory.Name}}</span>
+              </div>
+              <div class="detail-field" *ngIf="selectedCategory.Description">
+                <label>Description</label>
+                <span class="field-value">{{selectedCategory.Description}}</span>
+              </div>
+              <div class="detail-field">
+                <label>Parent Category</label>
+                <span class="field-value">
+                  {{getParentCategoryName(selectedCategory) || '(Top Level)'}}
+                </span>
+              </div>
+              <div class="detail-stats">
+                <div class="stat-item">
+                  <span class="stat-value">{{getSelectedCategoryListCount()}}</span>
+                  <span class="stat-label">Lists</span>
+                </div>
+                <div class="stat-item">
+                  <span class="stat-value">{{getSelectedCategoryChildCount()}}</span>
+                  <span class="stat-label">Subcategories</span>
+                </div>
+              </div>
+
+              <!-- Lists in this category -->
+              <div class="category-lists" *ngIf="selectedCategoryLists.length > 0">
+                <h4>Lists in this category</h4>
+                <div class="mini-list">
+                  <div class="mini-list-item" *ngFor="let list of selectedCategoryLists">
+                    <i class="fa-solid fa-list"></i>
+                    <span>{{list.Name}}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- No Selection State -->
+          <div class="category-detail-panel empty" *ngIf="!selectedCategory">
+            <div class="no-selection">
+              <i class="fa-solid fa-arrow-left"></i>
+              <p>Select a category to view details</p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Category Node Template -->
+      <ng-template #categoryNodeTemplate let-vm="vm">
+        <div class="category-node" [style.padding-left.px]="vm.depth * 20">
+          <div
+            class="node-content"
+            [class.selected]="selectedCategory?.ID === vm.category.ID"
+            (click)="selectCategory(vm.category)"
+            (keydown.enter)="selectCategory(vm.category)"
+            (keydown.space)="selectCategory(vm.category); $event.preventDefault()"
+            (keydown.arrowRight)="expandNode($event, vm)"
+            (keydown.arrowLeft)="collapseNode($event, vm)"
+            tabindex="0"
+            role="treeitem"
+            [attr.aria-expanded]="hasChildren(vm.category) ? vm.isExpanded : null"
+            [attr.aria-selected]="selectedCategory?.ID === vm.category.ID"
+            [attr.aria-label]="vm.category.Name + ' - ' + vm.listCount + ' lists'">
+            <button
+              class="expand-btn"
+              *ngIf="hasChildren(vm.category)"
+              (click)="toggleExpand($event, vm)"
+              tabindex="-1"
+              aria-hidden="true">
+              <i [class]="vm.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'"></i>
+            </button>
+            <span class="expand-placeholder" *ngIf="!hasChildren(vm.category)"></span>
+            <i class="fa-solid fa-folder" [class.fa-folder-open]="vm.isExpanded" aria-hidden="true"></i>
+            <span class="node-name">{{vm.category.Name}}</span>
+            <span class="node-count" aria-hidden="true">{{vm.listCount}}</span>
+          </div>
+          <div class="node-children" *ngIf="vm.isExpanded && hasChildren(vm.category)" role="group">
+            <ng-container *ngFor="let childVm of getChildCategories(vm.category)">
+              <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { vm: childVm }"></ng-container>
+            </ng-container>
+          </div>
+        </div>
+      </ng-template>
+
+      <!-- Create/Edit Dialog -->
+      <div class="modal-overlay" *ngIf="showDialog" (click)="closeDialog()">
+        <div class="modal-dialog" (click)="$event.stopPropagation()">
+          <div class="modal-header">
+            <h3>{{editingCategory ? 'Edit Category' : 'Create Category'}}</h3>
+            <button class="modal-close" (click)="closeDialog()" [disabled]="isSaving">
+              <i class="fa-solid fa-times"></i>
+            </button>
+          </div>
+          <div class="modal-body">
+            <div class="category-form">
+              <div class="form-group">
+                <label>Name *</label>
+                <input
+                  type="text"
+                  [(ngModel)]="dialogName"
+                  placeholder="Enter category name"
+                  class="form-input" />
+              </div>
+              <div class="form-group">
+                <label>Description</label>
+                <textarea
+                  [(ngModel)]="dialogDescription"
+                  placeholder="Optional description"
+                  class="form-input"
+                  rows="3"></textarea>
+              </div>
+              <div class="form-group">
+                <label>Parent Category</label>
+                <select
+                  [(ngModel)]="dialogParentId"
+                  class="form-input">
+                  <option *ngFor="let parent of availableParents" [ngValue]="parent.ID">{{parent.displayName}}</option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button
+              class="btn-primary"
+              (click)="saveCategory()"
+              [disabled]="!dialogName || isSaving">
+              <i *ngIf="isSaving" class="fa-solid fa-spinner fa-spin"></i>
+              {{isSaving ? 'Saving...' : (editingCategory ? 'Save' : 'Create')}}
+            </button>
+            <button class="btn-secondary" (click)="closeDialog()" [disabled]="isSaving">Cancel</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Delete Confirmation Dialog -->
+      <div class="modal-overlay" *ngIf="showDeleteConfirm" (click)="cancelDelete()">
+        <div class="modal-dialog modal-sm" (click)="$event.stopPropagation()">
+          <div class="modal-header danger">
+            <h3>Delete Category</h3>
+            <button class="modal-close" (click)="cancelDelete()">
+              <i class="fa-solid fa-times"></i>
+            </button>
+          </div>
+          <div class="modal-body">
+            <p>{{deleteConfirmMessage}}</p>
+          </div>
+          <div class="modal-footer">
+            <button class="btn-danger" (click)="confirmDelete()">
+              Delete
+            </button>
+            <button class="btn-secondary" (click)="cancelDelete()">Cancel</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  `, encapsulation: ViewEncapsulation.None, styles: ["\n    :host {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n      height: 100%;\n    }\n\n    .lists-categories-container {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      background: #f5f7fa;\n      overflow: hidden;\n    }\n\n    /* Header */\n    .categories-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 24px;\n      background: white;\n      border-bottom: 1px solid #e0e0e0;\n      flex-shrink: 0;\n    }\n\n    .header-title {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n    }\n\n    .header-title i {\n      font-size: 24px;\n      color: #2196F3;\n    }\n\n    .header-title h2 {\n      margin: 0;\n      font-size: 20px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .btn-create {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      color: white;\n      border: none;\n      border-radius: 6px;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: background 0.2s;\n    }\n\n    .btn-create:hover {\n      background: #1976D2;\n    }\n\n    /* Loading */\n    .loading-container {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n    }\n\n    /* Empty State */\n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      flex: 1;\n      padding: 48px 40px;\n      text-align: center;\n      max-width: 420px;\n      margin: 0 auto;\n    }\n\n    .empty-state-icon-wrapper {\n      position: relative;\n      margin-bottom: 24px;\n    }\n\n    .empty-state-icon-wrapper .icon-bg {\n      position: absolute;\n      top: 50%;\n      left: 50%;\n      transform: translate(-50%, -50%);\n      width: 100px;\n      height: 100px;\n      border-radius: 50%;\n      background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.05) 100%);\n    }\n\n    .empty-state-icon-wrapper > i {\n      position: relative;\n      font-size: 48px;\n      color: #2196F3;\n      z-index: 1;\n    }\n\n    .empty-state h3 {\n      margin: 0 0 12px;\n      font-size: 22px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .empty-state p {\n      margin: 0 0 8px;\n      color: #666;\n      font-size: 15px;\n      line-height: 1.5;\n    }\n\n    .empty-state-features {\n      display: flex;\n      flex-direction: column;\n      gap: 8px;\n      margin: 16px 0 24px;\n      text-align: left;\n    }\n\n    .feature-item {\n      display: flex;\n      align-items: center;\n      gap: 10px;\n      font-size: 14px;\n      color: #555;\n    }\n\n    .feature-item i {\n      font-size: 14px !important;\n      color: #4CAF50 !important;\n    }\n\n    .btn-create-large {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 14px 28px;\n      background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);\n      color: white;\n      border: none;\n      border-radius: 8px;\n      font-size: 15px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.2s;\n      box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);\n    }\n\n    .btn-create-large:hover {\n      background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);\n      transform: translateY(-1px);\n      box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);\n    }\n\n    /* Content Layout */\n    .categories-content {\n      flex: 1;\n      padding: 16px 24px;\n      overflow: hidden;\n    }\n\n    .categories-layout {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 16px;\n      height: 100%;\n    }\n\n    .category-tree-panel,\n    .category-detail-panel {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 1px 3px rgba(0,0,0,0.08);\n      display: flex;\n      flex-direction: column;\n      overflow: hidden;\n    }\n\n    .panel-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 12px 16px;\n      border-bottom: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .panel-header h3 {\n      margin: 0;\n      font-size: 14px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .count-badge {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 2px 8px;\n      border-radius: 10px;\n    }\n\n    .panel-actions {\n      display: flex;\n      gap: 4px;\n    }\n\n    .icon-btn {\n      background: none;\n      border: none;\n      padding: 6px 8px;\n      color: #666;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .icon-btn:hover {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .icon-btn.danger:hover {\n      background: #ffebee;\n      color: #d32f2f;\n    }\n\n    /* Tree Content */\n    .tree-content {\n      flex: 1;\n      overflow-y: auto;\n      padding: 8px 0;\n    }\n\n    .category-node {\n      user-select: none;\n    }\n\n    .node-content {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      cursor: pointer;\n      transition: background 0.15s;\n    }\n\n    .node-content:hover {\n      background: #f5f5f5;\n    }\n\n    .node-content:focus {\n      outline: none;\n      background: #e8f4fd;\n    }\n\n    .node-content:focus-visible {\n      outline: 2px solid #2196F3;\n      outline-offset: -2px;\n      background: #e8f4fd;\n    }\n\n    .node-content.selected {\n      background: #e3f2fd;\n    }\n\n    .node-content.selected:focus-visible {\n      outline: 2px solid #1976D2;\n    }\n\n    .expand-btn {\n      background: none;\n      border: none;\n      padding: 2px;\n      color: #999;\n      cursor: pointer;\n      width: 20px;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .expand-btn:hover {\n      color: #666;\n    }\n\n    .expand-placeholder {\n      width: 20px;\n    }\n\n    .node-content .fa-folder,\n    .node-content .fa-folder-open {\n      color: #ffc107;\n    }\n\n    .node-name {\n      flex: 1;\n      font-size: 14px;\n      color: #333;\n    }\n\n    .node-count {\n      font-size: 12px;\n      color: #999;\n      background: #f0f0f0;\n      padding: 1px 6px;\n      border-radius: 8px;\n    }\n\n    /* Detail Panel */\n    .detail-content {\n      flex: 1;\n      padding: 16px;\n      overflow-y: auto;\n    }\n\n    .detail-field {\n      margin-bottom: 16px;\n    }\n\n    .detail-field label {\n      display: block;\n      font-size: 12px;\n      font-weight: 500;\n      color: #999;\n      text-transform: uppercase;\n      letter-spacing: 0.5px;\n      margin-bottom: 4px;\n    }\n\n    .field-value {\n      font-size: 14px;\n      color: #333;\n    }\n\n    .detail-stats {\n      display: flex;\n      gap: 24px;\n      margin: 24px 0;\n      padding: 16px;\n      background: #f5f7fa;\n      border-radius: 8px;\n    }\n\n    .stat-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n    }\n\n    .stat-value {\n      font-size: 24px;\n      font-weight: 600;\n      color: #2196F3;\n    }\n\n    .stat-label {\n      font-size: 12px;\n      color: #999;\n    }\n\n    .category-lists h4 {\n      margin: 0 0 12px;\n      font-size: 13px;\n      font-weight: 600;\n      color: #666;\n    }\n\n    .mini-list {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .mini-list-item {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 12px;\n      background: #f5f7fa;\n      border-radius: 4px;\n      font-size: 13px;\n      color: #333;\n    }\n\n    .mini-list-item i {\n      color: #999;\n    }\n\n    /* No Selection */\n    .category-detail-panel.empty {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .no-selection {\n      text-align: center;\n      color: #999;\n    }\n\n    .no-selection i {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n\n    .no-selection p {\n      margin: 0;\n    }\n\n    /* Form */\n    .category-form {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n    }\n\n    .form-group {\n      display: flex;\n      flex-direction: column;\n      gap: 6px;\n    }\n\n    .form-group label {\n      font-size: 13px;\n      font-weight: 500;\n      color: #666;\n    }\n\n    .form-input {\n      padding: 8px 12px;\n      border: 1px solid #ddd;\n      border-radius: 4px;\n      font-size: 14px;\n    }\n\n    .form-input:focus {\n      outline: none;\n      border-color: #2196F3;\n    }\n\n    /* Modal Styles */\n    .modal-overlay {\n      position: fixed;\n      top: 0;\n      left: 0;\n      right: 0;\n      bottom: 0;\n      background: rgba(0, 0, 0, 0.5);\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 10000;\n      animation: fadeIn 0.15s ease-out;\n    }\n\n    @keyframes fadeIn {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n\n    .modal-dialog {\n      background: white;\n      border-radius: 8px;\n      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n      width: 450px;\n      max-width: 90vw;\n      max-height: 90vh;\n      display: flex;\n      flex-direction: column;\n      animation: slideIn 0.2s ease-out;\n    }\n\n    .modal-dialog.modal-sm {\n      width: 400px;\n    }\n\n    @keyframes slideIn {\n      from { transform: translateY(-20px); opacity: 0; }\n      to { transform: translateY(0); opacity: 1; }\n    }\n\n    .modal-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 16px 20px;\n      border-bottom: 1px solid #e0e0e0;\n    }\n\n    .modal-header.danger {\n      background: #ffebee;\n      border-bottom-color: #ffcdd2;\n    }\n\n    .modal-header.danger h3 {\n      color: #c62828;\n    }\n\n    .modal-header h3 {\n      margin: 0;\n      font-size: 18px;\n      font-weight: 600;\n      color: #333;\n    }\n\n    .modal-close {\n      background: none;\n      border: none;\n      padding: 4px 8px;\n      color: #999;\n      cursor: pointer;\n      border-radius: 4px;\n      transition: all 0.15s;\n    }\n\n    .modal-close:hover:not(:disabled) {\n      background: #f0f0f0;\n      color: #333;\n    }\n\n    .modal-close:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .modal-body {\n      padding: 20px;\n      overflow-y: auto;\n    }\n\n    .modal-body p {\n      margin: 0;\n      color: #666;\n      line-height: 1.6;\n    }\n\n    .modal-footer {\n      display: flex;\n      justify-content: flex-end;\n      gap: 12px;\n      padding: 16px 20px;\n      border-top: 1px solid #e0e0e0;\n      background: #fafafa;\n    }\n\n    .btn-secondary {\n      padding: 8px 16px;\n      background: white;\n      border: 1px solid #ddd;\n      border-radius: 6px;\n      color: #666;\n      font-size: 14px;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-secondary:hover:not(:disabled) {\n      background: #f5f5f5;\n      border-color: #ccc;\n    }\n\n    .btn-secondary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-primary {\n      display: flex;\n      align-items: center;\n      gap: 8px;\n      padding: 8px 16px;\n      background: #2196F3;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-primary:hover:not(:disabled) {\n      background: #1976D2;\n    }\n\n    .btn-primary:disabled {\n      opacity: 0.5;\n      cursor: not-allowed;\n    }\n\n    .btn-danger {\n      padding: 8px 16px;\n      background: #d32f2f;\n      border: none;\n      border-radius: 6px;\n      color: white;\n      font-size: 14px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s;\n    }\n\n    .btn-danger:hover {\n      background: #c62828;\n    }\n\n    /* Responsive */\n    @media (max-width: 768px) {\n      .categories-layout {\n        grid-template-columns: 1fr;\n      }\n\n      .category-detail-panel.empty {\n        display: none;\n      }\n\n      .modal-dialog {\n        width: 95vw;\n      }\n    }\n  "] }]
+    }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.MJNotificationService }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ListsCategoriesResource, { className: "ListsCategoriesResource", filePath: "src/Lists/components/lists-categories-resource.component.ts", lineNumber: 891 }); })();
+//# sourceMappingURL=lists-categories-resource.component.js.map