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, UUIDsEqual } from '@memberjunction/global';
import { BaseResourceComponent } from '@memberjunction/ng-shared';
import { 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-ui-components";
import * as i5 from "@memberjunction/ng-shared-generic";
const _c0 = a0 => ({ vm: a0 });
function ListsCategoriesResource_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 6);
    i0.ɵɵelement(1, "mj-loading", 10);
    i0.ɵɵelementEnd();
} }
function ListsCategoriesResource_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    const _r2 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 7)(1, "div", 11);
    i0.ɵɵelement(2, "div", 12)(3, "i", 13);
    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", 14)(9, "div", 15);
    i0.ɵɵelement(10, "i", 16);
    i0.ɵɵelementStart(11, "span");
    i0.ɵɵtext(12, "Create hierarchical folder structures");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(13, "div", 15);
    i0.ɵɵelement(14, "i", 16);
    i0.ɵɵelementStart(15, "span");
    i0.ɵɵtext(16, "Quickly find related lists");
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(17, "button", 17);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_9_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_10_For_10_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function ListsCategoriesResource_Conditional_10_For_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ListsCategoriesResource_Conditional_10_For_10_ng_container_0_Template, 1, 0, "ng-container", 25);
} if (rf & 2) {
    const vm_r4 = ctx.$implicit;
    i0.ɵɵnextContext(2);
    const categoryNodeTemplate_r5 = i0.ɵɵreference(12);
    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, vm_r4));
} }
function ListsCategoriesResource_Conditional_10_Conditional_11_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 32)(1, "label");
    i0.ɵɵtext(2, "Description");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "span", 33);
    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_Conditional_10_Conditional_11_Conditional_32_For_5_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 40);
    i0.ɵɵelement(1, "i", 41);
    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_Conditional_10_Conditional_11_Conditional_32_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 38)(1, "h4");
    i0.ɵɵtext(2, "Lists in this category");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 39);
    i0.ɵɵrepeaterCreate(4, ListsCategoriesResource_Conditional_10_Conditional_11_Conditional_32_For_5_Template, 4, 1, "div", 40, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance(4);
    i0.ɵɵrepeater(ctx_r2.selectedCategoryLists);
} }
function ListsCategoriesResource_Conditional_10_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 23)(1, "div", 20)(2, "h3");
    i0.ɵɵtext(3, "Category Details");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 26)(5, "button", 27);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_10_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", 28);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "button", 29);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_10_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", 30);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(9, "div", 31)(10, "div", 32)(11, "label");
    i0.ɵɵtext(12, "Name");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(13, "span", 33);
    i0.ɵɵtext(14);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(15, ListsCategoriesResource_Conditional_10_Conditional_11_Conditional_15_Template, 5, 1, "div", 32);
    i0.ɵɵelementStart(16, "div", 32)(17, "label");
    i0.ɵɵtext(18, "Parent Category");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(19, "span", 33);
    i0.ɵɵtext(20);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(21, "div", 34)(22, "div", 35)(23, "span", 36);
    i0.ɵɵtext(24);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(25, "span", 37);
    i0.ɵɵtext(26, "Lists");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(27, "div", 35)(28, "span", 36);
    i0.ɵɵtext(29);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(30, "span", 37);
    i0.ɵɵtext(31, "Subcategories");
    i0.ɵɵelementEnd()()();
    i0.ɵɵconditionalCreate(32, ListsCategoriesResource_Conditional_10_Conditional_11_Conditional_32_Template, 6, 0, "div", 38);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(14);
    i0.ɵɵtextInterpolate(ctx_r2.selectedCategory.Name);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.selectedCategory.Description ? 15 : -1);
    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.ɵɵconditional(ctx_r2.selectedCategoryLists.length > 0 ? 32 : -1);
} }
function ListsCategoriesResource_Conditional_10_Conditional_12_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 24)(1, "div", 42);
    i0.ɵɵelement(2, "i", 43);
    i0.ɵɵelementStart(3, "p");
    i0.ɵɵtext(4, "Select a category to view details");
    i0.ɵɵelementEnd()()();
} }
function ListsCategoriesResource_Conditional_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 8)(1, "div", 18)(2, "div", 19)(3, "div", 20)(4, "h3");
    i0.ɵɵtext(5, "Categories");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "span", 21);
    i0.ɵɵtext(7);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(8, "div", 22);
    i0.ɵɵrepeaterCreate(9, ListsCategoriesResource_Conditional_10_For_10_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(11, ListsCategoriesResource_Conditional_10_Conditional_11_Template, 33, 6, "div", 23);
    i0.ɵɵconditionalCreate(12, ListsCategoriesResource_Conditional_10_Conditional_12_Template, 5, 0, "div", 24);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance(7);
    i0.ɵɵtextInterpolate(ctx_r2.categories.length);
    i0.ɵɵadvance(2);
    i0.ɵɵrepeater(ctx_r2.getTopLevelCategories());
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r2.selectedCategory ? 11 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!ctx_r2.selectedCategory ? 12 : -1);
} }
function ListsCategoriesResource_ng_template_11_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    const _r10 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 52);
    i0.ɵɵlistener("click", function ListsCategoriesResource_ng_template_11_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) {
    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_11_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "span", 47);
} }
function ListsCategoriesResource_ng_template_11_Conditional_9_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function ListsCategoriesResource_ng_template_11_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, ListsCategoriesResource_ng_template_11_Conditional_9_For_2_ng_container_0_Template, 1, 0, "ng-container", 25);
} if (rf & 2) {
    const childVm_r11 = ctx.$implicit;
    i0.ɵɵnextContext(3);
    const categoryNodeTemplate_r5 = i0.ɵɵreference(12);
    i0.ɵɵproperty("ngTemplateOutlet", categoryNodeTemplate_r5)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, childVm_r11));
} }
function ListsCategoriesResource_ng_template_11_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 51);
    i0.ɵɵrepeaterCreate(1, ListsCategoriesResource_ng_template_11_Conditional_9_For_2_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const vm_r9 = i0.ɵɵnextContext().vm;
    const ctx_r2 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r2.getChildCategories(vm_r9.category));
} }
function ListsCategoriesResource_ng_template_11_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 44)(1, "div", 45);
    i0.ɵɵlistener("click", function ListsCategoriesResource_ng_template_11_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_11_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_11_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_11_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_11_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_11_Conditional_2_Template, 2, 2, "button", 46);
    i0.ɵɵconditionalCreate(3, ListsCategoriesResource_ng_template_11_Conditional_3_Template, 1, 0, "span", 47);
    i0.ɵɵelement(4, "i", 48);
    i0.ɵɵelementStart(5, "span", 49);
    i0.ɵɵtext(6);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "span", 50);
    i0.ɵɵtext(8);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(9, ListsCategoriesResource_ng_template_11_Conditional_9_Template, 3, 0, "div", 51);
    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.IsCategorySelected(vm_r9.category));
    i0.ɵɵattribute("aria-expanded", ctx_r2.hasChildren(vm_r9.category) ? vm_r9.isExpanded : null)("aria-selected", ctx_r2.IsCategorySelected(vm_r9.category))("aria-label", vm_r9.category.Name + " - " + vm_r9.listCount + " lists");
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.hasChildren(vm_r9.category) ? 2 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!ctx_r2.hasChildren(vm_r9.category) ? 3 : -1);
    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.ɵɵconditional(vm_r9.isExpanded && ctx_r2.hasChildren(vm_r9.category) ? 9 : -1);
} }
function ListsCategoriesResource_Conditional_13_For_22_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "option", 64);
    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_Conditional_13_Conditional_25_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 67);
} }
function ListsCategoriesResource_Conditional_13_Template(rf, ctx) { if (rf & 1) {
    const _r12 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 53);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
    i0.ɵɵelementStart(1, "div", 54);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r12); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelementStart(2, "div", 55)(3, "h3");
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "button", 56);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
    i0.ɵɵelement(6, "i", 57);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "div", 58)(8, "div", 59)(9, "div", 60)(10, "label");
    i0.ɵɵtext(11, "Name *");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(12, "input", 61);
    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_Conditional_13_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", 60)(14, "label");
    i0.ɵɵtext(15, "Description");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(16, "textarea", 62);
    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_Conditional_13_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", 60)(18, "label");
    i0.ɵɵtext(19, "Parent Category");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(20, "select", 63);
    i0.ɵɵtwoWayListener("ngModelChange", function ListsCategoriesResource_Conditional_13_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_13_For_22_Template, 2, 2, "option", 64, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd()()()();
    i0.ɵɵelementStart(23, "div", 65)(24, "button", 66);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.saveCategory()); });
    i0.ɵɵconditionalCreate(25, ListsCategoriesResource_Conditional_13_Conditional_25_Template, 1, 0, "i", 67);
    i0.ɵɵtext(26);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(27, "button", 68);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_13_Template_button_click_27_listener() { i0.ɵɵrestoreView(_r12); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.closeDialog()); });
    i0.ɵɵtext(28, "Cancel");
    i0.ɵɵelementEnd()()()();
} if (rf & 2) {
    const ctx_r2 = i0.ɵɵnextContext();
    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.ɵɵrepeater(ctx_r2.availableParents);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("disabled", !ctx_r2.dialogName || ctx_r2.isSaving);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r2.isSaving ? 25 : -1);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r2.isSaving ? "Saving..." : ctx_r2.editingCategory ? "Save" : "Create", " ");
    i0.ɵɵadvance();
    i0.ɵɵproperty("disabled", ctx_r2.isSaving);
} }
function ListsCategoriesResource_Conditional_14_Template(rf, ctx) { if (rf & 1) {
    const _r14 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 53);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_14_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
    i0.ɵɵelementStart(1, "div", 69);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_14_Template_div_click_1_listener($event) { i0.ɵɵrestoreView(_r14); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelementStart(2, "div", 70)(3, "h3");
    i0.ɵɵtext(4, "Delete Category");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "button", 71);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_14_Template_button_click_5_listener() { i0.ɵɵrestoreView(_r14); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.cancelDelete()); });
    i0.ɵɵelement(6, "i", 57);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "div", 58)(8, "p");
    i0.ɵɵtext(9);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(10, "div", 65)(11, "button", 72);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_14_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", 73);
    i0.ɵɵlistener("click", function ListsCategoriesResource_Conditional_14_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);
} }
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() {
        super.ngOnInit();
        await this.loadData();
        this.NotifyLoadComplete();
    }
    ngOnDestroy() {
        super.ngOnDestroy();
        this.destroy$.next();
        this.destroy$.complete();
    }
    async loadData() {
        this.isLoading = true;
        try {
            const md = this.ProviderToUse;
            const rv = RunView.FromMetadataProvider(this.ProviderToUse);
            const userId = md.CurrentUser?.ID;
            const [categoriesResult, listsResult] = await rv.RunViews([
                {
                    EntityName: 'MJ: List Categories',
                    OrderBy: 'Name',
                    ResultType: 'entity_object',
                    CacheLocal: true // Categories rarely change, cache for performance
                },
                {
                    EntityName: 'MJ: 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 => UUIDsEqual(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 => UUIDsEqual(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 => UUIDsEqual(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 (!UUIDsEqual(this.editingCategory?.ID, cat.ID)) {
                addCategory(cat, '');
            }
        }
    }
    isDescendantOf(category, ancestor) {
        if (UUIDsEqual(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 => UUIDsEqual(vm.category.ParentID, parent.ID));
    }
    hasChildren(category) {
        return this.categories.some(c => UUIDsEqual(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;
        }
    }
    IsCategorySelected(category) {
        return UUIDsEqual(this.selectedCategory?.ID, category.ID);
    }
    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 => UUIDsEqual(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 => UUIDsEqual(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 = this.ProviderToUse;
            let category;
            if (this.editingCategory) {
                category = this.editingCategory;
            }
            else {
                category = await md.GetEntityObject('MJ: 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(__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: 15, 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, "action-btn-label"], [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, "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.ɵɵelementStart(5, "span", 5);
            i0.ɵɵtext(6, "New Category");
            i0.ɵɵelementEnd()()()();
            i0.ɵɵelementStart(7, "mj-page-body");
            i0.ɵɵconditionalCreate(8, ListsCategoriesResource_Conditional_8_Template, 2, 0, "div", 6);
            i0.ɵɵconditionalCreate(9, ListsCategoriesResource_Conditional_9_Template, 20, 0, "div", 7);
            i0.ɵɵconditionalCreate(10, ListsCategoriesResource_Conditional_10_Template, 13, 3, "div", 8);
            i0.ɵɵtemplate(11, ListsCategoriesResource_ng_template_11_Template, 10, 14, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
            i0.ɵɵconditionalCreate(13, ListsCategoriesResource_Conditional_13_Template, 29, 9, "div", 9);
            i0.ɵɵconditionalCreate(14, ListsCategoriesResource_Conditional_14_Template, 15, 1, "div", 9);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(8);
            i0.ɵɵconditional(ctx.isLoading ? 8 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(!ctx.isLoading && ctx.categoryViewModels.length === 0 ? 9 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(!ctx.isLoading && ctx.categoryViewModels.length > 0 ? 10 : -1);
            i0.ɵɵadvance(3);
            i0.ɵɵconditional(ctx.showDialog ? 13 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.showDeleteConfirm ? 14 : -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')
], ListsCategoriesResource);
export { ListsCategoriesResource };
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ListsCategoriesResource, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-lists-categories-resource', template: `
    <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> <span class="action-btn-label">New Category</span>
          </button>
        </div>
      </mj-page-header>

      <mj-page-body>
      <!-- Loading State -->
      @if (isLoading) {
        <div class="loading-container">
          <mj-loading text="Loading categories..." size="medium"></mj-loading>
        </div>
      }
    
      <!-- Empty State -->
      @if (!isLoading && categoryViewModels.length === 0) {
        <div class="empty-state">
          <div class="empty-state-icon-wrapper">
            <div class="icon-bg"></div>
            <i class="fa-solid fa-folder-tree"></i>
          </div>
          <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 -->
      @if (!isLoading && categoryViewModels.length > 0) {
        <div class="categories-content">
          <div class="categories-layout">
            <!-- Category Tree -->
            <div class="category-tree-panel">
              <div class="panel-header">
                <h3>Categories</h3>
                <span class="count-badge">{{categories.length}}</span>
              </div>
              <div class="tree-content" role="tree" aria-label="Category tree">
                @for (vm of getTopLevelCategories(); track vm) {
                  <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { vm: vm }"></ng-container>
                }
              </div>
            </div>
            <!-- Category Details -->
            @if (selectedCategory) {
              <div class="category-detail-panel">
                <div class="panel-header">
                  <h3>Category Details</h3>
                  <div class="panel-actions">
                    <button class="icon-btn" (click)="editCategory()" title="Edit">
                      <i class="fa-solid fa-pen"></i>
                    </button>
                    <button class="icon-btn danger" (click)="deleteCategory()" title="Delete">
                      <i class="fa-solid fa-trash"></i>
                    </button>
                  </div>
                </div>
                <div class="detail-content">
                  <div class="detail-field">
                    <label>Name</label>
                    <span class="field-value">{{selectedCategory.Name}}</span>
                  </div>
                  @if (selectedCategory.Description) {
                    <div class="detail-field">
                      <label>Description</label>
                      <span class="field-value">{{selectedCategory.Description}}</span>
                    </div>
                  }
                  <div class="detail-field">
                    <label>Parent Category</label>
                    <span class="field-value">
                      {{getParentCategoryName(selectedCategory) || '(Top Level)'}}
                    </span>
                  </div>
                  <div class="detail-stats">
                    <div class="stat-item">
                      <span class="stat-value">{{getSelectedCategoryListCount()}}</span>
                      <span class="stat-label">Lists</span>
                    </div>
                    <div class="stat-item">
                      <span class="stat-value">{{getSelectedCategoryChildCount()}}</span>
                      <span class="stat-label">Subcategories</span>
                    </div>
                  </div>
                  <!-- Lists in this category -->
                  @if (selectedCategoryLists.length > 0) {
                    <div class="category-lists">
                      <h4>Lists in this category</h4>
                      <div class="mini-list">
                        @for (list of selectedCategoryLists; track list) {
                          <div class="mini-list-item">
                            <i class="fa-solid fa-list"></i>
                            <span>{{list.Name}}</span>
                          </div>
                        }
                      </div>
                    </div>
                  }
                </div>
              </div>
            }
            <!-- No Selection State -->
            @if (!selectedCategory) {
              <div class="category-detail-panel empty">
                <div class="no-selection">
                  <i class="fa-solid fa-arrow-left"></i>
                  <p>Select a category to view details</p>
                </div>
              </div>
            }
          </div>
        </div>
      }
    
      <!-- 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]="IsCategorySelected(vm.category)"
            (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]="IsCategorySelected(vm.category)"
            [attr.aria-label]="vm.category.Name + ' - ' + vm.listCount + ' lists'">
            @if (hasChildren(vm.category)) {
              <button
                class="expand-btn"
                (click)="toggleExpand($event, vm)"
                tabindex="-1"
                aria-hidden="true">
                <i [class]="vm.isExpanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'"></i>
              </button>
            }
            @if (!hasChildren(vm.category)) {
              <span class="expand-placeholder"></span>
            }
            <i class="fa-solid fa-folder" [class.fa-folder-open]="vm.isExpanded" aria-hidden="true"></i>
            <span class="node-name">{{vm.category.Name}}</span>
            <span class="node-count" aria-hidden="true">{{vm.listCount}}</span>
          </div>
          @if (vm.isExpanded && hasChildren(vm.category)) {
            <div class="node-children" role="group">
              @for (childVm of getChildCategories(vm.category); track childVm) {
                <ng-container *ngTemplateOutlet="categoryNodeTemplate; context: { vm: childVm }"></ng-container>
              }
            </div>
          }
        </div>
      </ng-template>
    
      <!-- Create/Edit Dialog -->
      @if (showDialog) {
        <div class="modal-overlay" (click)="closeDialog()">
          <div class="modal-dialog" (click)="$event.stopPropagation()">
            <div class="modal-header">
              <h3>{{editingCategory ? 'Edit Category' : 'Create Category'}}</h3>
              <button class="modal-close" (click)="closeDialog()" [disabled]="isSaving">
                <i class="fa-solid fa-times"></i>
              </button>
            </div>
            <div class="modal-body">
              <div class="category-form">
                <div class="form-group">
                  <label>Name *</label>
                  <input
                    type="text"
                    [(ngModel)]="dialogName"
                    placeholder="Enter category name"
                    class="form-input" />
                </div>
                <div class="form-group">
                  <label>Description</label>
                  <textarea
                    [(ngModel)]="dialogDescription"
                    placeholder="Optional description"
                    class="form-input"
                  rows="3"></textarea>
                </div>
                <div class="form-group">
                  <label>Parent Category</label>
                  <select
                    [(ngModel)]="dialogParentId"
                    class="form-input">
                    @for (parent of availableParents; track parent) {
                      <option [ngValue]="parent.ID">{{parent.displayName}}</option>
                    }
                  </select>
                </div>
              </div>
            </div>
            <div class="modal-footer">
              <button
                class="btn-primary"
                (click)="saveCategory()"
                [disabled]="!dialogName || isSaving">
                @if (isSaving) {
                  <i class="fa-solid fa-spinner fa-spin"></i>
                }
                {{isSaving ? 'Saving...' : (editingCategory ? 'Save' : 'Create')}}
              </button>
              <button class="btn-secondary" (click)="closeDialog()" [disabled]="isSaving">Cancel</button>
            </div>
          </div>
        </div>
      }
    
      <!-- Delete Confirmation Dialog -->
      @if (showDeleteConfirm) {
        <div class="modal-overlay" (click)="cancelDelete()">
          <div class="modal-dialog modal-sm" (click)="$event.stopPropagation()">
            <div class="modal-header danger">
              <h3>Delete Category</h3>
              <button class="modal-close" (click)="cancelDelete()">
                <i class="fa-solid fa-times"></i>
              </button>
            </div>
            <div class="modal-body">
              <p>{{deleteConfirmMessage}}</p>
            </div>
            <div class="modal-footer">
              <button class="btn-danger" (click)="confirmDelete()">
                Delete
              </button>
              <button class="btn-secondary" (click)="cancelDelete()">Cancel</button>
            </div>
          </div>
        </div>
      }
      </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: 901 }); })();
//# sourceMappingURL=lists-categories-resource.component.js.map