@memberjunction/ng-dashboards 3.4.0 → 4.0.0

package/dist/Credentials/components/credentials-categories-resource.component.js

@@ -11,33 +11,33 @@ import { RunView, Metadata } from '@memberjunction/core';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import * as i0 from "@angular/core";
 import * as i1 from "@memberjunction/ng-shared";
-import * as i2 from "@angular/common";
-import * as i3 from "@memberjunction/ng-shared-generic";
-import * as i4 from "@memberjunction/ng-credentials";
+import * as i2 from "@memberjunction/ng-shared-generic";
+import * as i3 from "@memberjunction/ng-credentials";
+import * as i4 from "@angular/common";
 const _c0 = ["categoryEditPanel"];
-function CredentialsCategoriesResourceComponent_mj_loading_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 5);
+function CredentialsCategoriesResourceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 2);
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_button_13_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 34);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_button_13_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.createNewCategory()); });
-    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_12_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.createNewCategory()); });
+    i0.ɵɵelement(1, "i", 33);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "New Category");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_button_19_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 36);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_button_19_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.clearSearch()); });
-    i0.ɵɵelement(1, "i", 37);
+    i0.ɵɵelementStart(0, "button", 34);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.clearSearch()); });
+    i0.ɵɵelement(1, "i", 35);
     i0.ɵɵelementEnd();
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_button_2_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 54);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_button_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r8); const node_r7 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.toggleExpand(node_r7, $event)); });
+    i0.ɵɵelementStart(0, "button", 51);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r8); const node_r7 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.toggleExpand(node_r7, $event)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -45,11 +45,11 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_butt
     i0.ɵɵadvance();
     i0.ɵɵclassMap(node_r7.expanded ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "span", 55);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "span", 40);
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_div_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 56);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "slice");
     i0.ɵɵelementEnd();
@@ -58,9 +58,9 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_div_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2(" ", i0.ɵɵpipeBind3(2, 2, node_r7.category.Description, 0, 50), "", node_r7.category.Description.length > 50 ? "..." : "", " ");
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_span_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 57);
-    i0.ɵɵelement(1, "i", 12);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 46);
+    i0.ɵɵelement(1, "i", 10);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -68,9 +68,9 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_span
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", node_r7.typeCount, " ");
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_span_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 58);
-    i0.ɵɵelement(1, "i", 59);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 47);
+    i0.ɵɵelement(1, "i", 52);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -78,118 +78,123 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_span
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", node_r7.children.length, " ");
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_button_14_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 60);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_button_14_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const node_r7 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.editCategory(node_r7, $event)); });
-    i0.ɵɵelement(1, "i", 61);
+    i0.ɵɵelementStart(0, "button", 53);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_14_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const node_r7 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.editCategory(node_r7, $event)); });
+    i0.ɵɵelement(1, "i", 54);
     i0.ɵɵelementEnd();
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_button_15_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 62);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_button_15_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const node_r7 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.deleteCategory(node_r7, $event)); });
-    i0.ɵɵelement(1, "i", 63);
+    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_15_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const node_r7 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.deleteCategory(node_r7, $event)); });
+    i0.ɵɵelement(1, "i", 56);
     i0.ɵɵelementEnd();
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 40);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_Template_div_click_0_listener() { const node_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.selectNode(node_r7)); });
-    i0.ɵɵelementStart(1, "div", 41);
-    i0.ɵɵtemplate(2, CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_button_2_Template, 2, 2, "button", 42)(3, CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_span_3_Template, 1, 0, "span", 43);
-    i0.ɵɵelementStart(4, "div", 44);
+    i0.ɵɵelementStart(0, "div", 37);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Template_div_click_0_listener() { const node_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.selectNode(node_r7)); });
+    i0.ɵɵelementStart(1, "div", 38);
+    i0.ɵɵconditionalCreate(2, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_2_Template, 2, 2, "button", 39);
+    i0.ɵɵconditionalCreate(3, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_3_Template, 1, 0, "span", 40);
+    i0.ɵɵelementStart(4, "div", 41);
     i0.ɵɵelement(5, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 45)(7, "div", 46);
+    i0.ɵɵelementStart(6, "div", 42)(7, "div", 43);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(9, CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_div_9_Template, 3, 6, "div", 47);
+    i0.ɵɵconditionalCreate(9, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_9_Template, 3, 6, "div", 44);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(10, "div", 48);
-    i0.ɵɵtemplate(11, CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_span_11_Template, 3, 1, "span", 49)(12, CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_span_12_Template, 3, 1, "span", 50);
+    i0.ɵɵelementStart(10, "div", 45);
+    i0.ɵɵconditionalCreate(11, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_11_Template, 3, 1, "span", 46);
+    i0.ɵɵconditionalCreate(12, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_12_Template, 3, 1, "span", 47);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 51);
-    i0.ɵɵtemplate(14, CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_button_14_Template, 2, 0, "button", 52)(15, CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_button_15_Template, 2, 0, "button", 53);
+    i0.ɵɵelementStart(13, "div", 48);
+    i0.ɵɵconditionalCreate(14, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_14_Template, 2, 0, "button", 49);
+    i0.ɵɵconditionalCreate(15, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Conditional_15_Template, 2, 0, "button", 50);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const node_r7 = ctx.$implicit;
-    const i_r11 = ctx.index;
+    const ɵ$index_72_r11 = ctx.$index;
     const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵstyleProp("padding-left", 12 + node_r7.level * 20, "px");
     i0.ɵɵclassProp("selected", (ctx_r3.selectedNode == null ? null : ctx_r3.selectedNode.category == null ? null : ctx_r3.selectedNode.category.ID) === node_r7.category.ID);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", node_r7.children.length > 0);
+    i0.ɵɵconditional(node_r7.children.length > 0 ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r7.children.length === 0);
+    i0.ɵɵconditional(node_r7.children.length === 0 ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵstyleProp("background-color", ctx_r3.getCategoryColor(i_r11) + "15")("color", ctx_r3.getCategoryColor(i_r11));
+    i0.ɵɵstyleProp("background-color", ctx_r3.getCategoryColor(ɵ$index_72_r11) + "15")("color", ctx_r3.getCategoryColor(ɵ$index_72_r11));
     i0.ɵɵadvance();
     i0.ɵɵclassMap(node_r7.category.IconClass || "fa-solid fa-folder");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(node_r7.category.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r7.category.Description);
+    i0.ɵɵconditional(node_r7.category.Description ? 9 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", node_r7.typeCount > 0);
+    i0.ɵɵconditional(node_r7.typeCount > 0 ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", node_r7.children.length > 0);
+    i0.ɵɵconditional(node_r7.children.length > 0 ? 12 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanUpdate);
+    i0.ɵɵconditional(ctx_r3.UserCanUpdate ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanDelete && node_r7.children.length === 0 && node_r7.typeCount === 0);
+    i0.ɵɵconditional(ctx_r3.UserCanDelete && node_r7.children.length === 0 && node_r7.typeCount === 0 ? 15 : -1);
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_29_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 38);
-    i0.ɵɵtemplate(1, CredentialsCategoriesResourceComponent_ng_container_2_div_29_div_1_Template, 16, 18, "div", 39);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 28);
+    i0.ɵɵrepeaterCreate(1, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_For_2_Template, 16, 18, "div", 36, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r3.getFlattenedNodes());
+    i0.ɵɵrepeater(ctx_r3.getFlattenedNodes());
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_30_p_5_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_29_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r12 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "p");
     i0.ɵɵtext(1, " No categories match your search. ");
-    i0.ɵɵelementStart(2, "button", 67);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_div_30_p_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.clearSearch()); });
+    i0.ɵɵelementStart(2, "button", 59);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_29_Conditional_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r12); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.clearSearch()); });
     i0.ɵɵtext(3, "Clear search");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_30_p_6_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_29_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p");
     i0.ɵɵtext(1, " Get started by creating your first category. ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_30_button_7_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_29_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 34);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_div_30_button_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.createNewCategory()); });
-    i0.ɵɵelement(1, "i", 35);
+    i0.ɵɵelementStart(0, "button", 32);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_29_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.createNewCategory()); });
+    i0.ɵɵelement(1, "i", 33);
     i0.ɵɵtext(2, " Create Category ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_30_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 64)(1, "div", 65);
-    i0.ɵɵelement(2, "i", 66);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29)(1, "div", 57);
+    i0.ɵɵelement(2, "i", 58);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "No Categories");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, CredentialsCategoriesResourceComponent_ng_container_2_div_30_p_5_Template, 4, 0, "p", 3)(6, CredentialsCategoriesResourceComponent_ng_container_2_div_30_p_6_Template, 2, 0, "p", 3)(7, CredentialsCategoriesResourceComponent_ng_container_2_div_30_button_7_Template, 3, 0, "button", 14);
+    i0.ɵɵconditionalCreate(5, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_29_Conditional_5_Template, 4, 0, "p");
+    i0.ɵɵconditionalCreate(6, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_29_Conditional_6_Template, 2, 0, "p");
+    i0.ɵɵconditionalCreate(7, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_29_Conditional_7_Template, 3, 0, "button", 12);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngIf", ctx_r3.searchText);
+    i0.ɵɵconditional(ctx_r3.searchText ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r3.searchText);
+    i0.ɵɵconditional(!ctx_r3.searchText ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanCreate && !ctx_r3.searchText);
+    i0.ɵɵconditional(ctx_r3.UserCanCreate && !ctx_r3.searchText ? 7 : -1);
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_31_span_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 85);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 63);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -197,19 +202,19 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_31_span_7_Tem
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" Level ", ctx_r3.selectedNode.level + 1, " ");
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_31_button_9_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 60);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_div_31_button_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.editCategory(ctx_r3.selectedNode)); });
-    i0.ɵɵelement(1, "i", 61);
+    i0.ɵɵelementStart(0, "button", 53);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.editCategory(ctx_r3.selectedNode)); });
+    i0.ɵɵelement(1, "i", 54);
     i0.ɵɵelementEnd();
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86)(1, "h3");
-    i0.ɵɵelement(2, "i", 87);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 71)(1, "h3");
+    i0.ɵɵelement(2, "i", 76);
     i0.ɵɵtext(3, " Description ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "p", 88);
+    i0.ɵɵelementStart(4, "p", 77);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -217,8 +222,8 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_24_Tem
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r3.selectedNode.category.Description);
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_25_div_5_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 97);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_25_For_6_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "slice");
     i0.ɵɵelementEnd();
@@ -227,14 +232,14 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_25_div
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(i0.ɵɵpipeBind3(2, 1, type_r16.Description, 0, 60));
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_25_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 92)(1, "div", 93);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_25_For_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79)(1, "div", 80);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 94)(4, "div", 95);
+    i0.ɵɵelementStart(3, "div", 81)(4, "div", 82);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_25_div_5_div_6_Template, 3, 5, "div", 96);
+    i0.ɵɵconditionalCreate(6, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_25_For_6_Conditional_6_Template, 3, 5, "div", 83);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const type_r16 = ctx.$implicit;
@@ -243,23 +248,23 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_25_div
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(type_r16.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", type_r16.Description);
+    i0.ɵɵconditional(type_r16.Description ? 6 : -1);
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 89)(1, "h3");
-    i0.ɵɵelement(2, "i", 12);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 72)(1, "h3");
+    i0.ɵɵelement(2, "i", 10);
     i0.ɵɵtext(3, " Credential Types ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 90);
-    i0.ɵɵtemplate(5, CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_25_div_5_Template, 7, 4, "div", 91);
+    i0.ɵɵelementStart(4, "div", 78);
+    i0.ɵɵrepeaterCreate(5, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_25_For_6_Template, 7, 4, "div", 79, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", ctx_r3.getTypesForCategory(ctx_r3.selectedNode.category.Name));
+    i0.ɵɵrepeater(ctx_r3.getTypesForCategory(ctx_r3.selectedNode.category.Name));
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_26_div_5_span_4_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 103);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_26_For_6_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 87);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -267,15 +272,15 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_26_div
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("", child_r18.typeCount, " types");
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_26_div_5_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_26_For_6_Template(rf, ctx) { if (rf & 1) {
     const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 101);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_26_div_5_Template_div_click_0_listener() { const child_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r3 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r3.selectNode(child_r18)); });
+    i0.ɵɵelementStart(0, "div", 86);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_26_For_6_Template_div_click_0_listener() { const child_r18 = i0.ɵɵrestoreView(_r17).$implicit; const ctx_r3 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r3.selectNode(child_r18)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_26_div_5_span_4_Template, 2, 1, "span", 102);
+    i0.ɵɵconditionalCreate(4, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_26_For_6_Conditional_4_Template, 2, 1, "span", 87);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const child_r18 = ctx.$implicit;
@@ -284,63 +289,65 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_26_div
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(child_r18.category.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", child_r18.typeCount > 0);
+    i0.ɵɵconditional(child_r18.typeCount > 0 ? 4 : -1);
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 98)(1, "h3");
-    i0.ɵɵelement(2, "i", 11);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 73)(1, "h3");
+    i0.ɵɵelement(2, "i", 9);
     i0.ɵɵtext(3, " Subcategories ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 99);
-    i0.ɵɵtemplate(5, CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_26_div_5_Template, 5, 4, "div", 100);
+    i0.ɵɵelementStart(4, "div", 84);
+    i0.ɵɵrepeaterCreate(5, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_26_For_6_Template, 5, 4, "div", 85, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", ctx_r3.selectedNode.children);
+    i0.ɵɵrepeater(ctx_r3.selectedNode.children);
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_31_button_28_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_28_Template(rf, ctx) { if (rf & 1) {
     const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 104);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_div_31_button_28_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.viewTypesForCategory(ctx_r3.selectedNode.category.Name)); });
-    i0.ɵɵelement(1, "i", 12);
+    i0.ɵɵelementStart(0, "button", 88);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_28_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r19); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.viewTypesForCategory(ctx_r3.selectedNode.category.Name)); });
+    i0.ɵɵelement(1, "i", 10);
     i0.ɵɵtext(2, " View Types ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_31_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 68)(1, "div", 69)(2, "div", 70);
+    i0.ɵɵelementStart(0, "div", 30)(1, "div", 60)(2, "div", 61);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 71)(5, "h2");
+    i0.ɵɵelementStart(4, "div", 62)(5, "h2");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, CredentialsCategoriesResourceComponent_ng_container_2_div_31_span_7_Template, 2, 1, "span", 72);
+    i0.ɵɵconditionalCreate(7, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_7_Template, 2, 1, "span", 63);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 73);
-    i0.ɵɵtemplate(9, CredentialsCategoriesResourceComponent_ng_container_2_div_31_button_9_Template, 2, 0, "button", 52);
-    i0.ɵɵelementStart(10, "button", 74);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_div_31_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.selectedNode = null); });
-    i0.ɵɵelement(11, "i", 37);
+    i0.ɵɵelementStart(8, "div", 64);
+    i0.ɵɵconditionalCreate(9, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_9_Template, 2, 0, "button", 49);
+    i0.ɵɵelementStart(10, "button", 65);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.selectedNode = null); });
+    i0.ɵɵelement(11, "i", 35);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 75)(13, "div", 76)(14, "div", 77)(15, "div", 78);
+    i0.ɵɵelementStart(12, "div", 66)(13, "div", 67)(14, "div", 68)(15, "div", 69);
     i0.ɵɵtext(16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "div", 79);
+    i0.ɵɵelementStart(17, "div", 70);
     i0.ɵɵtext(18, "Credential Types");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 77)(20, "div", 78);
+    i0.ɵɵelementStart(19, "div", 68)(20, "div", 69);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "div", 79);
+    i0.ɵɵelementStart(22, "div", 70);
     i0.ɵɵtext(23, "Subcategories");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(24, CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_24_Template, 6, 1, "div", 80)(25, CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_25_Template, 6, 1, "div", 81)(26, CredentialsCategoriesResourceComponent_ng_container_2_div_31_div_26_Template, 6, 1, "div", 82);
-    i0.ɵɵelementStart(27, "div", 83);
-    i0.ɵɵtemplate(28, CredentialsCategoriesResourceComponent_ng_container_2_div_31_button_28_Template, 3, 0, "button", 84);
-    i0.ɵɵelementStart(29, "button", 34);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_div_31_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.createCredentialWithCategory(ctx_r3.selectedNode.category.ID)); });
-    i0.ɵɵelement(30, "i", 35);
+    i0.ɵɵconditionalCreate(24, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_24_Template, 6, 1, "div", 71);
+    i0.ɵɵconditionalCreate(25, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_25_Template, 7, 0, "div", 72);
+    i0.ɵɵconditionalCreate(26, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_26_Template, 7, 0, "div", 73);
+    i0.ɵɵelementStart(27, "div", 74);
+    i0.ɵɵconditionalCreate(28, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Conditional_28_Template, 3, 0, "button", 75);
+    i0.ɵɵelementStart(29, "button", 32);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Template_button_click_29_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.createCredentialWithCategory(ctx_r3.selectedNode.category.ID)); });
+    i0.ɵɵelement(30, "i", 33);
     i0.ɵɵtext(31, " Create Credential ");
     i0.ɵɵelementEnd()()()();
 } if (rf & 2) {
@@ -352,25 +359,25 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_31_Template(r
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r3.selectedNode.category.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.selectedNode.level > 0);
+    i0.ɵɵconditional(ctx_r3.selectedNode.level > 0 ? 7 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanUpdate);
+    i0.ɵɵconditional(ctx_r3.UserCanUpdate ? 9 : -1);
     i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(ctx_r3.selectedNode.typeCount);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r3.selectedNode.children.length);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r3.selectedNode.category.Description);
+    i0.ɵɵconditional(ctx_r3.selectedNode.category.Description ? 24 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.selectedNode.typeCount > 0);
+    i0.ɵɵconditional(ctx_r3.selectedNode.typeCount > 0 ? 25 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.selectedNode.children.length > 0);
+    i0.ɵɵconditional(ctx_r3.selectedNode.children.length > 0 ? 26 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r3.selectedNode.typeCount > 0);
+    i0.ɵɵconditional(ctx_r3.selectedNode.typeCount > 0 ? 28 : -1);
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_div_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 105)(1, "div", 106);
-    i0.ɵɵelement(2, "i", 107);
+function CredentialsCategoriesResourceComponent_Conditional_2_Conditional_31_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 31)(1, "div", 89);
+    i0.ɵɵelement(2, "i", 90);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "Select a Category");
@@ -379,72 +386,69 @@ function CredentialsCategoriesResourceComponent_ng_container_2_div_32_Template(r
     i0.ɵɵtext(6, "Click on a category to view its details and credential types");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsCategoriesResourceComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+function CredentialsCategoriesResourceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 6)(2, "div", 7)(3, "h2", 8);
-    i0.ɵɵtext(4, "Categories");
+    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "h2", 6);
+    i0.ɵɵtext(3, "Categories");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 9)(6, "span", 10);
-    i0.ɵɵelement(7, "i", 11);
-    i0.ɵɵtext(8);
+    i0.ɵɵelementStart(4, "div", 7)(5, "span", 8);
+    i0.ɵɵelement(6, "i", 9);
+    i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 10);
-    i0.ɵɵelement(10, "i", 12);
-    i0.ɵɵtext(11);
+    i0.ɵɵelementStart(8, "span", 8);
+    i0.ɵɵelement(9, "i", 10);
+    i0.ɵɵtext(10);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(12, "div", 13);
-    i0.ɵɵtemplate(13, CredentialsCategoriesResourceComponent_ng_container_2_button_13_Template, 4, 0, "button", 14);
+    i0.ɵɵelementStart(11, "div", 11);
+    i0.ɵɵconditionalCreate(12, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_12_Template, 4, 0, "button", 12);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 15)(15, "div", 16)(16, "div", 17);
-    i0.ɵɵelement(17, "i", 18);
-    i0.ɵɵelementStart(18, "input", 19);
-    i0.ɵɵlistener("input", function CredentialsCategoriesResourceComponent_ng_container_2_Template_input_input_18_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onSearchChange($event.target.value)); });
+    i0.ɵɵelementStart(13, "div", 13)(14, "div", 14)(15, "div", 15);
+    i0.ɵɵelement(16, "i", 16);
+    i0.ɵɵelementStart(17, "input", 17);
+    i0.ɵɵlistener("input", function CredentialsCategoriesResourceComponent_Conditional_2_Template_input_input_17_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onSearchChange($event.target.value)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(19, CredentialsCategoriesResourceComponent_ng_container_2_button_19_Template, 2, 0, "button", 20);
+    i0.ɵɵconditionalCreate(18, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_18_Template, 2, 0, "button", 18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(20, "div", 21)(21, "button", 22);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_Template_button_click_21_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.expandAll()); });
-    i0.ɵɵelement(22, "i", 23);
+    i0.ɵɵelementStart(19, "div", 19)(20, "button", 20);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.expandAll()); });
+    i0.ɵɵelement(21, "i", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "button", 24);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_Template_button_click_23_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.collapseAll()); });
-    i0.ɵɵelement(24, "i", 25);
+    i0.ɵɵelementStart(22, "button", 22);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.collapseAll()); });
+    i0.ɵɵelement(23, "i", 23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(25, "button", 26);
-    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_ng_container_2_Template_button_click_25_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.refresh()); });
-    i0.ɵɵelement(26, "i", 27);
+    i0.ɵɵelementStart(24, "button", 24);
+    i0.ɵɵlistener("click", function CredentialsCategoriesResourceComponent_Conditional_2_Template_button_click_24_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.refresh()); });
+    i0.ɵɵelement(25, "i", 25);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(27, "div", 28)(28, "div", 29);
-    i0.ɵɵtemplate(29, CredentialsCategoriesResourceComponent_ng_container_2_div_29_Template, 2, 1, "div", 30)(30, CredentialsCategoriesResourceComponent_ng_container_2_div_30_Template, 8, 3, "div", 31);
+    i0.ɵɵelementStart(26, "div", 26)(27, "div", 27);
+    i0.ɵɵconditionalCreate(28, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_28_Template, 3, 0, "div", 28);
+    i0.ɵɵconditionalCreate(29, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_29_Template, 8, 3, "div", 29);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(31, CredentialsCategoriesResourceComponent_ng_container_2_div_31_Template, 32, 15, "div", 32)(32, CredentialsCategoriesResourceComponent_ng_container_2_div_32_Template, 7, 0, "div", 33);
+    i0.ɵɵconditionalCreate(30, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_30_Template, 32, 15, "div", 30);
+    i0.ɵɵconditionalCreate(31, CredentialsCategoriesResourceComponent_Conditional_2_Conditional_31_Template, 7, 0, "div", 31);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(8);
+    i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate1(" ", ctx_r3.categories.length, " categories ");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r3.getTotalTypeCount(), " types ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanCreate);
+    i0.ɵɵconditional(ctx_r3.UserCanCreate ? 12 : -1);
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("value", ctx_r3.searchText);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.searchText);
+    i0.ɵɵconditional(ctx_r3.searchText ? 18 : -1);
     i0.ɵɵadvance(10);
-    i0.ɵɵproperty("ngIf", ctx_r3.categoryTree.length > 0);
+    i0.ɵɵconditional(ctx_r3.categoryTree.length > 0 ? 28 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.categoryTree.length === 0);
+    i0.ɵɵconditional(ctx_r3.categoryTree.length === 0 ? 29 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.selectedNode);
+    i0.ɵɵconditional(ctx_r3.selectedNode ? 30 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r3.selectedNode && ctx_r3.categoryTree.length > 0);
+    i0.ɵɵconditional(!ctx_r3.selectedNode && ctx_r3.categoryTree.length > 0 ? 31 : -1);
 } }
-export function LoadCredentialsCategoriesResource() {
-    // Prevents tree-shaking
-}
 let CredentialsCategoriesResourceComponent = class CredentialsCategoriesResourceComponent extends BaseResourceComponent {
     cdr;
     navigationService;
@@ -786,20 +790,21 @@ let CredentialsCategoriesResourceComponent = class CredentialsCategoriesResource
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.categoryEditPanel = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 2, consts: [["categoryEditPanel", ""], [1, "categories-container"], ["text", "Loading categories...", 4, "ngIf"], [4, "ngIf"], [3, "saved", "deleted"], ["text", "Loading categories..."], [1, "categories-header"], [1, "header-info"], [1, "categories-title"], [1, "header-stats"], [1, "stat-item"], [1, "fa-solid", "fa-folder-tree"], [1, "fa-solid", "fa-shapes"], [1, "header-actions"], ["class", "btn-primary", 3, "click", 4, "ngIf"], [1, "toolbar"], [1, "toolbar-left"], [1, "search-container"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search categories...", 3, "input", "value"], ["class", "search-clear", 3, "click", 4, "ngIf"], [1, "toolbar-right"], ["title", "Expand All", 1, "btn-text", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Collapse All", 1, "btn-text", 3, "click"], [1, "fa-solid", "fa-compress"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "categories-layout"], [1, "tree-panel"], ["class", "tree-container", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], ["class", "detail-panel", 4, "ngIf"], ["class", "no-selection", 4, "ngIf"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], [1, "tree-container"], ["class", "tree-node", 3, "selected", "padding-left", "click", 4, "ngFor", "ngForOf"], [1, "tree-node", 3, "click"], [1, "node-content"], ["class", "expand-btn", 3, "click", 4, "ngIf"], ["class", "expand-placeholder", 4, "ngIf"], [1, "node-icon"], [1, "node-info"], [1, "node-name"], ["class", "node-description", 4, "ngIf"], [1, "node-badges"], ["class", "badge types", 4, "ngIf"], ["class", "badge children", 4, "ngIf"], [1, "node-actions"], ["class", "action-btn", "title", "Edit", 3, "click", 4, "ngIf"], ["class", "action-btn danger", "title", "Delete", 3, "click", 4, "ngIf"], [1, "expand-btn", 3, "click"], [1, "expand-placeholder"], [1, "node-description"], [1, "badge", "types"], [1, "badge", "children"], [1, "fa-solid", "fa-folder"], ["title", "Edit", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["title", "Delete", 1, "action-btn", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "empty-state"], [1, "empty-icon"], [1, "fa-solid", "fa-folder-open"], [1, "btn-link", 3, "click"], [1, "detail-panel"], [1, "detail-header"], [1, "detail-icon"], [1, "detail-title"], ["class", "level-badge", 4, "ngIf"], [1, "detail-actions"], [1, "close-btn", 3, "click"], [1, "detail-body"], [1, "detail-stats"], [1, "detail-stat"], [1, "stat-value"], [1, "stat-label"], ["class", "description-section", 4, "ngIf"], ["class", "types-section", 4, "ngIf"], ["class", "subcategories-section", 4, "ngIf"], [1, "detail-quick-actions"], ["class", "btn-secondary", 3, "click", 4, "ngIf"], [1, "level-badge"], [1, "description-section"], [1, "fa-solid", "fa-align-left"], [1, "description"], [1, "types-section"], [1, "type-list"], ["class", "type-item", 4, "ngFor", "ngForOf"], [1, "type-item"], [1, "type-icon"], [1, "type-info"], [1, "type-name"], ["class", "type-desc", 4, "ngIf"], [1, "type-desc"], [1, "subcategories-section"], [1, "subcategory-list"], ["class", "subcategory-item", 3, "click", 4, "ngFor", "ngForOf"], [1, "subcategory-item", 3, "click"], ["class", "sub-type-count", 4, "ngIf"], [1, "sub-type-count"], [1, "btn-secondary", 3, "click"], [1, "no-selection"], [1, "no-selection-icon"], [1, "fa-solid", "fa-hand-pointer"]], template: function CredentialsCategoriesResourceComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 2, consts: [["categoryEditPanel", ""], [1, "categories-container"], ["text", "Loading categories..."], [3, "saved", "deleted"], [1, "categories-header"], [1, "header-info"], [1, "categories-title"], [1, "header-stats"], [1, "stat-item"], [1, "fa-solid", "fa-folder-tree"], [1, "fa-solid", "fa-shapes"], [1, "header-actions"], [1, "btn-primary"], [1, "toolbar"], [1, "toolbar-left"], [1, "search-container"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search categories...", 3, "input", "value"], [1, "search-clear"], [1, "toolbar-right"], ["title", "Expand All", 1, "btn-text", 3, "click"], [1, "fa-solid", "fa-expand"], ["title", "Collapse All", 1, "btn-text", 3, "click"], [1, "fa-solid", "fa-compress"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "categories-layout"], [1, "tree-panel"], [1, "tree-container"], [1, "empty-state"], [1, "detail-panel"], [1, "no-selection"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], [1, "tree-node", 3, "selected", "padding-left"], [1, "tree-node", 3, "click"], [1, "node-content"], [1, "expand-btn"], [1, "expand-placeholder"], [1, "node-icon"], [1, "node-info"], [1, "node-name"], [1, "node-description"], [1, "node-badges"], [1, "badge", "types"], [1, "badge", "children"], [1, "node-actions"], ["title", "Edit", 1, "action-btn"], ["title", "Delete", 1, "action-btn", "danger"], [1, "expand-btn", 3, "click"], [1, "fa-solid", "fa-folder"], ["title", "Edit", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["title", "Delete", 1, "action-btn", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "empty-icon"], [1, "fa-solid", "fa-folder-open"], [1, "btn-link", 3, "click"], [1, "detail-header"], [1, "detail-icon"], [1, "detail-title"], [1, "level-badge"], [1, "detail-actions"], [1, "close-btn", 3, "click"], [1, "detail-body"], [1, "detail-stats"], [1, "detail-stat"], [1, "stat-value"], [1, "stat-label"], [1, "description-section"], [1, "types-section"], [1, "subcategories-section"], [1, "detail-quick-actions"], [1, "btn-secondary"], [1, "fa-solid", "fa-align-left"], [1, "description"], [1, "type-list"], [1, "type-item"], [1, "type-icon"], [1, "type-info"], [1, "type-name"], [1, "type-desc"], [1, "subcategory-list"], [1, "subcategory-item"], [1, "subcategory-item", 3, "click"], [1, "sub-type-count"], [1, "btn-secondary", 3, "click"], [1, "no-selection-icon"], [1, "fa-solid", "fa-hand-pointer"]], template: function CredentialsCategoriesResourceComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵtemplate(1, CredentialsCategoriesResourceComponent_mj_loading_1_Template, 1, 0, "mj-loading", 2)(2, CredentialsCategoriesResourceComponent_ng_container_2_Template, 33, 9, "ng-container", 3);
+            i0.ɵɵconditionalCreate(1, CredentialsCategoriesResourceComponent_Conditional_1_Template, 1, 0, "mj-loading", 2);
+            i0.ɵɵconditionalCreate(2, CredentialsCategoriesResourceComponent_Conditional_2_Template, 32, 9);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "mj-credential-category-edit-panel", 4, 0);
+            i0.ɵɵelementStart(3, "mj-credential-category-edit-panel", 3, 0);
             i0.ɵɵlistener("saved", function CredentialsCategoriesResourceComponent_Template_mj_credential_category_edit_panel_saved_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCategorySaved($event)); })("deleted", function CredentialsCategoriesResourceComponent_Template_mj_credential_category_edit_panel_deleted_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCategoryDeleted($event)); });
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.isLoading);
+            i0.ɵɵconditional(ctx.isLoading ? 1 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.isLoading);
-        } }, dependencies: [i2.NgForOf, i2.NgIf, i3.LoadingComponent, i4.CredentialCategoryEditPanelComponent, i2.SlicePipe], styles: [".categories-container[_ngcontent-%COMP%] {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n    background: var(--background-secondary, #f8fafc);\n}\n\n\n\n.categories-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.header-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.categories-title[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.stat-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--accent-color, #6366f1);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);\n}\n\n.btn-primary[_ngcontent-%COMP%]:active {\n    transform: translateY(0);\n}\n\n\n\n.toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    margin-bottom: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n.search-container[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n    max-width: 320px;\n}\n\n.search-container[_ngcontent-%COMP%]   i.fa-search[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--text-secondary, #9ca3af);\n    font-size: 13px;\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 36px 8px 36px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--input-background, #f9fafb);\n    transition: all 0.2s ease;\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--accent-color, #6366f1);\n    background: white;\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n    color: var(--text-secondary, #9ca3af);\n}\n\n.search-clear[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--button-hover, #e5e7eb);\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    font-size: 10px;\n    transition: all 0.2s ease;\n}\n\n.search-clear[_ngcontent-%COMP%]:hover {\n    background: var(--text-secondary, #9ca3af);\n    color: white;\n}\n\n\n\n.btn-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-text[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #f3f4f6);\n    color: var(--text-primary, #1f2937);\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #f3f4f6);\n    color: var(--text-primary, #1f2937);\n}\n\n\n\n.categories-layout[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 380px;\n    gap: 20px;\n    min-height: 500px;\n}\n\n\n\n.tree-panel[_ngcontent-%COMP%] {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.tree-container[_ngcontent-%COMP%] {\n    max-height: calc(100vh - 300px);\n    overflow-y: auto;\n}\n\n\n\n.tree-node[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.tree-node[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.tree-node[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #f9fafb);\n}\n\n.tree-node.selected[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);\n    border-left: 3px solid var(--accent-color, #6366f1);\n}\n\n.node-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    width: 100%;\n    gap: 8px;\n}\n\n\n\n.expand-btn[_ngcontent-%COMP%] {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    color: var(--text-secondary, #9ca3af);\n    border-radius: 4px;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n    background: var(--button-hover, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n.expand-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n    transition: transform 0.2s ease;\n}\n\n.expand-placeholder[_ngcontent-%COMP%] {\n    width: 24px;\n    flex-shrink: 0;\n}\n\n\n\n.node-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    flex-shrink: 0;\n}\n\n.node-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n\n\n.node-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.node-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    line-height: 1.3;\n}\n\n.node-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n\n\n.node-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n.badge.types[_ngcontent-%COMP%] {\n    background: rgba(99, 102, 241, 0.1);\n    color: var(--accent-color, #6366f1);\n}\n\n.badge.children[_ngcontent-%COMP%] {\n    background: var(--badge-background, #f3f4f6);\n    color: var(--text-secondary, #6b7280);\n}\n\n.badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n\n\n.node-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    flex-shrink: 0;\n}\n\n.tree-node[_ngcontent-%COMP%]:hover   .node-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--accent-color, #6366f1);\n    color: white;\n}\n\n.action-btn.danger[_ngcontent-%COMP%]:hover {\n    background: #ef4444;\n    color: white;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.detail-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 20px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 12px;\n    flex-shrink: 0;\n}\n\n.detail-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n}\n\n.detail-title[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.detail-title[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0;\n    line-height: 1.3;\n}\n\n.level-badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    margin-top: 4px;\n    padding: 2px 8px;\n    background: var(--badge-background, #f3f4f6);\n    border-radius: 10px;\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.detail-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n\n\n.detail-body[_ngcontent-%COMP%] {\n    padding: 20px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n\n\n.detail-stats[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.detail-stat[_ngcontent-%COMP%] {\n    background: var(--stat-background, #f9fafb);\n    border-radius: 10px;\n    padding: 16px;\n    text-align: center;\n}\n\n.detail-stat[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--accent-color, #6366f1);\n    line-height: 1;\n}\n\n.detail-stat[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 4px;\n}\n\n\n\n.description-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.description-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.types-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.subcategories-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--text-secondary, #6b7280);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin: 0 0 12px 0;\n}\n\n.description-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.types-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.subcategories-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.description[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-primary, #374151);\n    line-height: 1.6;\n    margin: 0;\n}\n\n\n\n.types-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.type-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.type-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n.type-item[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #f3f4f6);\n}\n\n.type-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(99, 102, 241, 0.1);\n    border-radius: 6px;\n    flex-shrink: 0;\n}\n\n.type-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--accent-color, #6366f1);\n}\n\n.type-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n}\n\n.type-desc[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n\n\n.subcategories-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.subcategory-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.subcategory-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.subcategory-item[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #f3f4f6);\n}\n\n.subcategory-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--accent-color, #6366f1);\n}\n\n.subcategory-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 13px;\n    color: var(--text-primary, #1f2937);\n}\n\n.sub-type-count[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n    background: var(--badge-background, #e5e7eb);\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n\n\n.detail-quick-actions[_ngcontent-%COMP%] {\n    margin-top: auto;\n    padding-top: 16px;\n    border-top: 1px solid var(--border-color, #f3f4f6);\n    display: flex;\n    gap: 8px;\n}\n\n.detail-quick-actions[_ngcontent-%COMP%]   .btn-secondary[_ngcontent-%COMP%], \n.detail-quick-actions[_ngcontent-%COMP%]   .btn-primary[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 12px;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #374151);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #e5e7eb);\n}\n\n\n\n.no-selection[_ngcontent-%COMP%] {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n    text-align: center;\n}\n\n.no-selection-icon[_ngcontent-%COMP%] {\n    width: 64px;\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, #f3f4f6);\n    border-radius: 50%;\n    margin-bottom: 16px;\n}\n\n.no-selection-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--text-secondary, #9ca3af);\n}\n\n.no-selection[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.no-selection[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 64px 24px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, #f3f4f6);\n    border-radius: 50%;\n    margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: var(--text-secondary, #d1d5db);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0 0 20px 0;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--accent-color, #6366f1);\n    cursor: pointer;\n    font-size: inherit;\n    padding: 0;\n    text-decoration: underline;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n    color: var(--accent-hover, #4f46e5);\n}\n\n\n\n@media (max-width: 1024px) {\n    .categories-layout[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .detail-panel[_ngcontent-%COMP%], \n   .no-selection[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .categories-container[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .categories-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    .toolbar-left[_ngcontent-%COMP%], \n   .toolbar-right[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .search-container[_ngcontent-%COMP%] {\n        max-width: none;\n    }\n\n    .toolbar-right[_ngcontent-%COMP%] {\n        justify-content: flex-end;\n    }\n}"], changeDetection: 0 });
+            i0.ɵɵconditional(!ctx.isLoading ? 2 : -1);
+        } }, dependencies: [i2.LoadingComponent, i3.CredentialCategoryEditPanelComponent, i4.SlicePipe], styles: [".categories-container[_ngcontent-%COMP%] {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n    background: var(--background-secondary, #f8fafc);\n}\n\n\n\n.categories-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.header-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.categories-title[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.stat-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--accent-color, #6366f1);\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);\n}\n\n.btn-primary[_ngcontent-%COMP%]:active {\n    transform: translateY(0);\n}\n\n\n\n.toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    margin-bottom: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n\n\n.search-container[_ngcontent-%COMP%] {\n    position: relative;\n    flex: 1;\n    max-width: 320px;\n}\n\n.search-container[_ngcontent-%COMP%]   i.fa-search[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--text-secondary, #9ca3af);\n    font-size: 13px;\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 8px 36px 8px 36px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--input-background, #f9fafb);\n    transition: all 0.2s ease;\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--accent-color, #6366f1);\n    background: white;\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]::placeholder {\n    color: var(--text-secondary, #9ca3af);\n}\n\n.search-clear[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--button-hover, #e5e7eb);\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    font-size: 10px;\n    transition: all 0.2s ease;\n}\n\n.search-clear[_ngcontent-%COMP%]:hover {\n    background: var(--text-secondary, #9ca3af);\n    color: white;\n}\n\n\n\n.btn-text[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-text[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #f3f4f6);\n    color: var(--text-primary, #1f2937);\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #f3f4f6);\n    color: var(--text-primary, #1f2937);\n}\n\n\n\n.categories-layout[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 1fr 380px;\n    gap: 20px;\n    min-height: 500px;\n}\n\n\n\n.tree-panel[_ngcontent-%COMP%] {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.tree-container[_ngcontent-%COMP%] {\n    max-height: calc(100vh - 300px);\n    overflow-y: auto;\n}\n\n\n\n.tree-node[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.tree-node[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.tree-node[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #f9fafb);\n}\n\n.tree-node.selected[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);\n    border-left: 3px solid var(--accent-color, #6366f1);\n}\n\n.node-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    width: 100%;\n    gap: 8px;\n}\n\n\n\n.expand-btn[_ngcontent-%COMP%] {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    color: var(--text-secondary, #9ca3af);\n    border-radius: 4px;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n    background: var(--button-hover, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n.expand-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n    transition: transform 0.2s ease;\n}\n\n.expand-placeholder[_ngcontent-%COMP%] {\n    width: 24px;\n    flex-shrink: 0;\n}\n\n\n\n.node-icon[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    flex-shrink: 0;\n}\n\n.node-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n\n\n.node-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.node-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    line-height: 1.3;\n}\n\n.node-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n\n\n.node-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\n.badge[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n.badge.types[_ngcontent-%COMP%] {\n    background: rgba(99, 102, 241, 0.1);\n    color: var(--accent-color, #6366f1);\n}\n\n.badge.children[_ngcontent-%COMP%] {\n    background: var(--badge-background, #f3f4f6);\n    color: var(--text-secondary, #6b7280);\n}\n\n.badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n\n\n.node-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    flex-shrink: 0;\n}\n\n.tree-node[_ngcontent-%COMP%]:hover   .node-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--accent-color, #6366f1);\n    color: white;\n}\n\n.action-btn.danger[_ngcontent-%COMP%]:hover {\n    background: #ef4444;\n    color: white;\n}\n\n.action-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n\n\n.detail-panel[_ngcontent-%COMP%] {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.detail-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 20px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 12px;\n    flex-shrink: 0;\n}\n\n.detail-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n}\n\n.detail-title[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.detail-title[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0;\n    line-height: 1.3;\n}\n\n.level-badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    margin-top: 4px;\n    padding: 2px 8px;\n    background: var(--badge-background, #f3f4f6);\n    border-radius: 10px;\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.detail-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n\n\n.detail-body[_ngcontent-%COMP%] {\n    padding: 20px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n\n\n.detail-stats[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.detail-stat[_ngcontent-%COMP%] {\n    background: var(--stat-background, #f9fafb);\n    border-radius: 10px;\n    padding: 16px;\n    text-align: center;\n}\n\n.detail-stat[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--accent-color, #6366f1);\n    line-height: 1;\n}\n\n.detail-stat[_ngcontent-%COMP%]   .stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 4px;\n}\n\n\n\n.description-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.description-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.types-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.subcategories-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--text-secondary, #6b7280);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin: 0 0 12px 0;\n}\n\n.description-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.types-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.subcategories-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.description[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-primary, #374151);\n    line-height: 1.6;\n    margin: 0;\n}\n\n\n\n.types-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.type-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.type-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n.type-item[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #f3f4f6);\n}\n\n.type-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(99, 102, 241, 0.1);\n    border-radius: 6px;\n    flex-shrink: 0;\n}\n\n.type-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--accent-color, #6366f1);\n}\n\n.type-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n}\n\n.type-desc[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n\n\n.subcategories-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.subcategory-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.subcategory-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.subcategory-item[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #f3f4f6);\n}\n\n.subcategory-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--accent-color, #6366f1);\n}\n\n.subcategory-item[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    flex: 1;\n    font-size: 13px;\n    color: var(--text-primary, #1f2937);\n}\n\n.sub-type-count[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n    background: var(--badge-background, #e5e7eb);\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n\n\n.detail-quick-actions[_ngcontent-%COMP%] {\n    margin-top: auto;\n    padding-top: 16px;\n    border-top: 1px solid var(--border-color, #f3f4f6);\n    display: flex;\n    gap: 8px;\n}\n\n.detail-quick-actions[_ngcontent-%COMP%]   .btn-secondary[_ngcontent-%COMP%], \n.detail-quick-actions[_ngcontent-%COMP%]   .btn-primary[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 12px;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #374151);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n    background: var(--hover-background, #e5e7eb);\n}\n\n\n\n.no-selection[_ngcontent-%COMP%] {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n    text-align: center;\n}\n\n.no-selection-icon[_ngcontent-%COMP%] {\n    width: 64px;\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, #f3f4f6);\n    border-radius: 50%;\n    margin-bottom: 16px;\n}\n\n.no-selection-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: var(--text-secondary, #9ca3af);\n}\n\n.no-selection[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.no-selection[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 64px 24px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, #f3f4f6);\n    border-radius: 50%;\n    margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: var(--text-secondary, #d1d5db);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0 0 20px 0;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: var(--accent-color, #6366f1);\n    cursor: pointer;\n    font-size: inherit;\n    padding: 0;\n    text-decoration: underline;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n    color: var(--accent-hover, #4f46e5);\n}\n\n\n\n@media (max-width: 1024px) {\n    .categories-layout[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .detail-panel[_ngcontent-%COMP%], \n   .no-selection[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .categories-container[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .categories-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    .toolbar-left[_ngcontent-%COMP%], \n   .toolbar-right[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .search-container[_ngcontent-%COMP%] {\n        max-width: none;\n    }\n\n    .toolbar-right[_ngcontent-%COMP%] {\n        justify-content: flex-end;\n    }\n}"], changeDetection: 0 });
 };
 CredentialsCategoriesResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'CredentialsCategoriesResource')
@@ -807,10 +812,10 @@ CredentialsCategoriesResourceComponent = __decorate([
 export { CredentialsCategoriesResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CredentialsCategoriesResourceComponent, [{
         type: Component,
-        args: [{ selector: 'mj-credentials-categories-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"categories-container\">\n    <mj-loading *ngIf=\"isLoading\" text=\"Loading categories...\"></mj-loading>\n\n    <ng-container *ngIf=\"!isLoading\">\n        <!-- Header -->\n        <div class=\"categories-header\">\n            <div class=\"header-info\">\n                <h2 class=\"categories-title\">Categories</h2>\n                <div class=\"header-stats\">\n                    <span class=\"stat-item\">\n                        <i class=\"fa-solid fa-folder-tree\"></i>\n                        {{categories.length}} categories\n                    </span>\n                    <span class=\"stat-item\">\n                        <i class=\"fa-solid fa-shapes\"></i>\n                        {{getTotalTypeCount()}} types\n                    </span>\n                </div>\n            </div>\n            <div class=\"header-actions\">\n                <button class=\"btn-primary\" *ngIf=\"UserCanCreate\" (click)=\"createNewCategory()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    <span>New Category</span>\n                </button>\n            </div>\n        </div>\n\n        <!-- Toolbar -->\n        <div class=\"toolbar\">\n            <div class=\"toolbar-left\">\n                <div class=\"search-container\">\n                    <i class=\"fa-solid fa-search\"></i>\n                    <input\n                        type=\"text\"\n                        placeholder=\"Search categories...\"\n                        [value]=\"searchText\"\n                        (input)=\"onSearchChange($any($event.target).value)\"\n                    />\n                    <button class=\"search-clear\" *ngIf=\"searchText\" (click)=\"clearSearch()\">\n                        <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                </div>\n            </div>\n            <div class=\"toolbar-right\">\n                <button class=\"btn-text\" (click)=\"expandAll()\" title=\"Expand All\">\n                    <i class=\"fa-solid fa-expand\"></i>\n                </button>\n                <button class=\"btn-text\" (click)=\"collapseAll()\" title=\"Collapse All\">\n                    <i class=\"fa-solid fa-compress\"></i>\n                </button>\n                <button class=\"btn-icon\" (click)=\"refresh()\" title=\"Refresh\">\n                    <i class=\"fa-solid fa-refresh\"></i>\n                </button>\n            </div>\n        </div>\n\n        <div class=\"categories-layout\">\n            <!-- Tree Container -->\n            <div class=\"tree-panel\">\n                <div class=\"tree-container\" *ngIf=\"categoryTree.length > 0\">\n                    <div\n                        class=\"tree-node\"\n                        *ngFor=\"let node of getFlattenedNodes(); let i = index\"\n                        [class.selected]=\"selectedNode?.category?.ID === node.category.ID\"\n                        [style.padding-left.px]=\"12 + (node.level * 20)\"\n                        (click)=\"selectNode(node)\"\n                    >\n                        <div class=\"node-content\">\n                            <button\n                                class=\"expand-btn\"\n                                *ngIf=\"node.children.length > 0\"\n                                (click)=\"toggleExpand(node, $event)\"\n                            >\n                                <i [class]=\"node.expanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n                            </button>\n                            <span class=\"expand-placeholder\" *ngIf=\"node.children.length === 0\"></span>\n\n                            <div class=\"node-icon\" [style.backgroundColor]=\"getCategoryColor(i) + '15'\" [style.color]=\"getCategoryColor(i)\">\n                                <i [class]=\"node.category.IconClass || 'fa-solid fa-folder'\"></i>\n                            </div>\n\n                            <div class=\"node-info\">\n                                <div class=\"node-name\">{{node.category.Name}}</div>\n                                <div class=\"node-description\" *ngIf=\"node.category.Description\">\n                                    {{node.category.Description | slice:0:50}}{{node.category.Description.length > 50 ? '...' : ''}}\n                                </div>\n                            </div>\n\n                            <div class=\"node-badges\">\n                                <span class=\"badge types\" *ngIf=\"node.typeCount > 0\">\n                                    <i class=\"fa-solid fa-shapes\"></i>\n                                    {{node.typeCount}}\n                                </span>\n                                <span class=\"badge children\" *ngIf=\"node.children.length > 0\">\n                                    <i class=\"fa-solid fa-folder\"></i>\n                                    {{node.children.length}}\n                                </span>\n                            </div>\n\n                            <div class=\"node-actions\">\n                                <button\n                                    class=\"action-btn\"\n                                    *ngIf=\"UserCanUpdate\"\n                                    (click)=\"editCategory(node, $event)\"\n                                    title=\"Edit\"\n                                >\n                                    <i class=\"fa-solid fa-pen\"></i>\n                                </button>\n                                <button\n                                    class=\"action-btn danger\"\n                                    *ngIf=\"UserCanDelete && node.children.length === 0 && node.typeCount === 0\"\n                                    (click)=\"deleteCategory(node, $event)\"\n                                    title=\"Delete\"\n                                >\n                                    <i class=\"fa-solid fa-trash\"></i>\n                                </button>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"empty-state\" *ngIf=\"categoryTree.length === 0\">\n                    <div class=\"empty-icon\">\n                        <i class=\"fa-solid fa-folder-open\"></i>\n                    </div>\n                    <h3>No Categories</h3>\n                    <p *ngIf=\"searchText\">\n                        No categories match your search.\n                        <button class=\"btn-link\" (click)=\"clearSearch()\">Clear search</button>\n                    </p>\n                    <p *ngIf=\"!searchText\">\n                        Get started by creating your first category.\n                    </p>\n                    <button class=\"btn-primary\" *ngIf=\"UserCanCreate && !searchText\" (click)=\"createNewCategory()\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                        Create Category\n                    </button>\n                </div>\n            </div>\n\n            <!-- Detail Panel -->\n            <div class=\"detail-panel\" *ngIf=\"selectedNode\">\n                <div class=\"detail-header\">\n                    <div class=\"detail-icon\" [style.backgroundColor]=\"getCategoryColor(0) + '15'\" [style.color]=\"getCategoryColor(0)\">\n                        <i [class]=\"selectedNode.category.IconClass || 'fa-solid fa-folder'\"></i>\n                    </div>\n                    <div class=\"detail-title\">\n                        <h2>{{selectedNode.category.Name}}</h2>\n                        <span class=\"level-badge\" *ngIf=\"selectedNode.level > 0\">\n                            Level {{selectedNode.level + 1}}\n                        </span>\n                    </div>\n                    <div class=\"detail-actions\">\n                        <button class=\"action-btn\" *ngIf=\"UserCanUpdate\" (click)=\"editCategory(selectedNode)\" title=\"Edit\">\n                            <i class=\"fa-solid fa-pen\"></i>\n                        </button>\n                        <button class=\"close-btn\" (click)=\"selectedNode = null\">\n                            <i class=\"fa-solid fa-times\"></i>\n                        </button>\n                    </div>\n                </div>\n\n                <div class=\"detail-body\">\n                    <!-- Stats -->\n                    <div class=\"detail-stats\">\n                        <div class=\"detail-stat\">\n                            <div class=\"stat-value\">{{selectedNode.typeCount}}</div>\n                            <div class=\"stat-label\">Credential Types</div>\n                        </div>\n                        <div class=\"detail-stat\">\n                            <div class=\"stat-value\">{{selectedNode.children.length}}</div>\n                            <div class=\"stat-label\">Subcategories</div>\n                        </div>\n                    </div>\n\n                    <!-- Description -->\n                    <div class=\"description-section\" *ngIf=\"selectedNode.category.Description\">\n                        <h3>\n                            <i class=\"fa-solid fa-align-left\"></i>\n                            Description\n                        </h3>\n                        <p class=\"description\">{{selectedNode.category.Description}}</p>\n                    </div>\n\n                    <!-- Types in Category -->\n                    <div class=\"types-section\" *ngIf=\"selectedNode.typeCount > 0\">\n                        <h3>\n                            <i class=\"fa-solid fa-shapes\"></i>\n                            Credential Types\n                        </h3>\n                        <div class=\"type-list\">\n                            <div class=\"type-item\" *ngFor=\"let type of getTypesForCategory(selectedNode.category.Name)\">\n                                <div class=\"type-icon\">\n                                    <i [class]=\"type.IconClass || 'fa-solid fa-key'\"></i>\n                                </div>\n                                <div class=\"type-info\">\n                                    <div class=\"type-name\">{{type.Name}}</div>\n                                    <div class=\"type-desc\" *ngIf=\"type.Description\">{{type.Description | slice:0:60}}</div>\n                                </div>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Subcategories -->\n                    <div class=\"subcategories-section\" *ngIf=\"selectedNode.children.length > 0\">\n                        <h3>\n                            <i class=\"fa-solid fa-folder-tree\"></i>\n                            Subcategories\n                        </h3>\n                        <div class=\"subcategory-list\">\n                            <div class=\"subcategory-item\" *ngFor=\"let child of selectedNode.children\" (click)=\"selectNode(child)\">\n                                <i [class]=\"child.category.IconClass || 'fa-solid fa-folder'\"></i>\n                                <span>{{child.category.Name}}</span>\n                                <span class=\"sub-type-count\" *ngIf=\"child.typeCount > 0\">{{child.typeCount}} types</span>\n                            </div>\n                        </div>\n                    </div>\n\n                    <!-- Quick Actions -->\n                    <div class=\"detail-quick-actions\">\n                        <button\n                            class=\"btn-secondary\"\n                            *ngIf=\"selectedNode.typeCount > 0\"\n                            (click)=\"viewTypesForCategory(selectedNode.category.Name)\"\n                        >\n                            <i class=\"fa-solid fa-shapes\"></i>\n                            View Types\n                        </button>\n                        <button\n                            class=\"btn-primary\"\n                            (click)=\"createCredentialWithCategory(selectedNode.category.ID)\"\n                        >\n                            <i class=\"fa-solid fa-plus\"></i>\n                            Create Credential\n                        </button>\n                    </div>\n\n                </div>\n            </div>\n\n            <!-- No Selection -->\n            <div class=\"no-selection\" *ngIf=\"!selectedNode && categoryTree.length > 0\">\n                <div class=\"no-selection-icon\">\n                    <i class=\"fa-solid fa-hand-pointer\"></i>\n                </div>\n                <h3>Select a Category</h3>\n                <p>Click on a category to view its details and credential types</p>\n            </div>\n        </div>\n    </ng-container>\n</div>\n\n<!-- Category Edit Panel -->\n<mj-credential-category-edit-panel\n    #categoryEditPanel\n    (saved)=\"onCategorySaved($any($event))\"\n    (deleted)=\"onCategoryDeleted($any($event))\"\n></mj-credential-category-edit-panel>\n", styles: [".categories-container {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n    background: var(--background-secondary, #f8fafc);\n}\n\n/* Header */\n.categories-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.categories-title {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0;\n}\n\n.header-stats {\n    display: flex;\n    gap: 16px;\n}\n\n.stat-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.stat-item i {\n    font-size: 12px;\n    color: var(--accent-color, #6366f1);\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n}\n\n/* Primary Button */\n.btn-primary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n.btn-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);\n}\n\n.btn-primary:active {\n    transform: translateY(0);\n}\n\n/* Toolbar */\n.toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    margin-bottom: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.toolbar-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n}\n\n.toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Search */\n.search-container {\n    position: relative;\n    flex: 1;\n    max-width: 320px;\n}\n\n.search-container i.fa-search {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--text-secondary, #9ca3af);\n    font-size: 13px;\n}\n\n.search-container input {\n    width: 100%;\n    padding: 8px 36px 8px 36px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--input-background, #f9fafb);\n    transition: all 0.2s ease;\n}\n\n.search-container input:focus {\n    outline: none;\n    border-color: var(--accent-color, #6366f1);\n    background: white;\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.search-container input::placeholder {\n    color: var(--text-secondary, #9ca3af);\n}\n\n.search-clear {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--button-hover, #e5e7eb);\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    font-size: 10px;\n    transition: all 0.2s ease;\n}\n\n.search-clear:hover {\n    background: var(--text-secondary, #9ca3af);\n    color: white;\n}\n\n/* Toolbar Buttons */\n.btn-text {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-text:hover {\n    background: var(--hover-background, #f3f4f6);\n    color: var(--text-primary, #1f2937);\n}\n\n.btn-icon {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon:hover {\n    background: var(--hover-background, #f3f4f6);\n    color: var(--text-primary, #1f2937);\n}\n\n/* Layout */\n.categories-layout {\n    display: grid;\n    grid-template-columns: 1fr 380px;\n    gap: 20px;\n    min-height: 500px;\n}\n\n/* Tree Panel */\n.tree-panel {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.tree-container {\n    max-height: calc(100vh - 300px);\n    overflow-y: auto;\n}\n\n/* Tree Node */\n.tree-node {\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.tree-node:last-child {\n    border-bottom: none;\n}\n\n.tree-node:hover {\n    background: var(--hover-background, #f9fafb);\n}\n\n.tree-node.selected {\n    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);\n    border-left: 3px solid var(--accent-color, #6366f1);\n}\n\n.node-content {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    width: 100%;\n    gap: 8px;\n}\n\n/* Expand Button */\n.expand-btn {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    color: var(--text-secondary, #9ca3af);\n    border-radius: 4px;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.expand-btn:hover {\n    background: var(--button-hover, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n.expand-btn i {\n    font-size: 10px;\n    transition: transform 0.2s ease;\n}\n\n.expand-placeholder {\n    width: 24px;\n    flex-shrink: 0;\n}\n\n/* Node Icon */\n.node-icon {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    flex-shrink: 0;\n}\n\n.node-icon i {\n    font-size: 14px;\n}\n\n/* Node Info */\n.node-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.node-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    line-height: 1.3;\n}\n\n.node-description {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* Node Badges */\n.node-badges {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\n.badge {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n.badge.types {\n    background: rgba(99, 102, 241, 0.1);\n    color: var(--accent-color, #6366f1);\n}\n\n.badge.children {\n    background: var(--badge-background, #f3f4f6);\n    color: var(--text-secondary, #6b7280);\n}\n\n.badge i {\n    font-size: 10px;\n}\n\n/* Node Actions */\n.node-actions {\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    flex-shrink: 0;\n}\n\n.tree-node:hover .node-actions {\n    opacity: 1;\n}\n\n.action-btn {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.action-btn:hover {\n    background: var(--accent-color, #6366f1);\n    color: white;\n}\n\n.action-btn.danger:hover {\n    background: #ef4444;\n    color: white;\n}\n\n.action-btn i {\n    font-size: 12px;\n}\n\n/* Detail Panel */\n.detail-panel {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.detail-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 20px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-icon {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 12px;\n    flex-shrink: 0;\n}\n\n.detail-icon i {\n    font-size: 20px;\n}\n\n.detail-title {\n    flex: 1;\n    min-width: 0;\n}\n\n.detail-title h2 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0;\n    line-height: 1.3;\n}\n\n.level-badge {\n    display: inline-block;\n    margin-top: 4px;\n    padding: 2px 8px;\n    background: var(--badge-background, #f3f4f6);\n    border-radius: 10px;\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.detail-actions {\n    display: flex;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.close-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.close-btn:hover {\n    background: var(--hover-background, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n/* Detail Body */\n.detail-body {\n    padding: 20px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n/* Detail Stats */\n.detail-stats {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.detail-stat {\n    background: var(--stat-background, #f9fafb);\n    border-radius: 10px;\n    padding: 16px;\n    text-align: center;\n}\n\n.detail-stat .stat-value {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--accent-color, #6366f1);\n    line-height: 1;\n}\n\n.detail-stat .stat-label {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 4px;\n}\n\n/* Description Section */\n.description-section {\n    margin-bottom: 20px;\n}\n\n.description-section h3,\n.types-section h3,\n.subcategories-section h3 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--text-secondary, #6b7280);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin: 0 0 12px 0;\n}\n\n.description-section h3 i,\n.types-section h3 i,\n.subcategories-section h3 i {\n    font-size: 12px;\n}\n\n.description {\n    font-size: 14px;\n    color: var(--text-primary, #374151);\n    line-height: 1.6;\n    margin: 0;\n}\n\n/* Types Section */\n.types-section {\n    margin-bottom: 20px;\n}\n\n.type-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.type-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n.type-item:hover {\n    background: var(--hover-background, #f3f4f6);\n}\n\n.type-icon {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(99, 102, 241, 0.1);\n    border-radius: 6px;\n    flex-shrink: 0;\n}\n\n.type-icon i {\n    font-size: 12px;\n    color: var(--accent-color, #6366f1);\n}\n\n.type-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n}\n\n.type-desc {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* Subcategories Section */\n.subcategories-section {\n    margin-bottom: 20px;\n}\n\n.subcategory-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.subcategory-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.subcategory-item:hover {\n    background: var(--hover-background, #f3f4f6);\n}\n\n.subcategory-item i {\n    font-size: 14px;\n    color: var(--accent-color, #6366f1);\n}\n\n.subcategory-item span {\n    flex: 1;\n    font-size: 13px;\n    color: var(--text-primary, #1f2937);\n}\n\n.sub-type-count {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n    background: var(--badge-background, #e5e7eb);\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n/* Quick Actions */\n.detail-quick-actions {\n    margin-top: auto;\n    padding-top: 16px;\n    border-top: 1px solid var(--border-color, #f3f4f6);\n    display: flex;\n    gap: 8px;\n}\n\n.detail-quick-actions .btn-secondary,\n.detail-quick-actions .btn-primary {\n    flex: 1;\n}\n\n.btn-secondary {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 12px;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #374151);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-secondary:hover {\n    background: var(--hover-background, #e5e7eb);\n}\n\n/* No Selection State */\n.no-selection {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n    text-align: center;\n}\n\n.no-selection-icon {\n    width: 64px;\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, #f3f4f6);\n    border-radius: 50%;\n    margin-bottom: 16px;\n}\n\n.no-selection-icon i {\n    font-size: 24px;\n    color: var(--text-secondary, #9ca3af);\n}\n\n.no-selection h3 {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.no-selection p {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 64px 24px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    text-align: center;\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, #f3f4f6);\n    border-radius: 50%;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 32px;\n    color: var(--text-secondary, #d1d5db);\n}\n\n.empty-state h3 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.empty-state p {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0 0 20px 0;\n}\n\n.btn-link {\n    background: none;\n    border: none;\n    color: var(--accent-color, #6366f1);\n    cursor: pointer;\n    font-size: inherit;\n    padding: 0;\n    text-decoration: underline;\n}\n\n.btn-link:hover {\n    color: var(--accent-hover, #4f46e5);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .categories-layout {\n        grid-template-columns: 1fr;\n    }\n\n    .detail-panel,\n    .no-selection {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .categories-container {\n        padding: 16px;\n    }\n\n    .categories-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .toolbar {\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    .toolbar-left,\n    .toolbar-right {\n        width: 100%;\n    }\n\n    .search-container {\n        max-width: none;\n    }\n\n    .toolbar-right {\n        justify-content: flex-end;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-credentials-categories-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"categories-container\">\n  @if (isLoading) {\n    <mj-loading text=\"Loading categories...\"></mj-loading>\n  }\n\n  @if (!isLoading) {\n    <!-- Header -->\n    <div class=\"categories-header\">\n      <div class=\"header-info\">\n        <h2 class=\"categories-title\">Categories</h2>\n        <div class=\"header-stats\">\n          <span class=\"stat-item\">\n            <i class=\"fa-solid fa-folder-tree\"></i>\n            {{categories.length}} categories\n          </span>\n          <span class=\"stat-item\">\n            <i class=\"fa-solid fa-shapes\"></i>\n            {{getTotalTypeCount()}} types\n          </span>\n        </div>\n      </div>\n      <div class=\"header-actions\">\n        @if (UserCanCreate) {\n          <button class=\"btn-primary\" (click)=\"createNewCategory()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>New Category</span>\n          </button>\n        }\n      </div>\n    </div>\n    <!-- Toolbar -->\n    <div class=\"toolbar\">\n      <div class=\"toolbar-left\">\n        <div class=\"search-container\">\n          <i class=\"fa-solid fa-search\"></i>\n          <input\n            type=\"text\"\n            placeholder=\"Search categories...\"\n            [value]=\"searchText\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            />\n          @if (searchText) {\n            <button class=\"search-clear\" (click)=\"clearSearch()\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n      </div>\n      <div class=\"toolbar-right\">\n        <button class=\"btn-text\" (click)=\"expandAll()\" title=\"Expand All\">\n          <i class=\"fa-solid fa-expand\"></i>\n        </button>\n        <button class=\"btn-text\" (click)=\"collapseAll()\" title=\"Collapse All\">\n          <i class=\"fa-solid fa-compress\"></i>\n        </button>\n        <button class=\"btn-icon\" (click)=\"refresh()\" title=\"Refresh\">\n          <i class=\"fa-solid fa-refresh\"></i>\n        </button>\n      </div>\n    </div>\n    <div class=\"categories-layout\">\n      <!-- Tree Container -->\n      <div class=\"tree-panel\">\n        @if (categoryTree.length > 0) {\n          <div class=\"tree-container\">\n            @for (node of getFlattenedNodes(); track node; let i = $index) {\n              <div\n                class=\"tree-node\"\n                [class.selected]=\"selectedNode?.category?.ID === node.category.ID\"\n                [style.padding-left.px]=\"12 + (node.level * 20)\"\n                (click)=\"selectNode(node)\"\n                >\n                <div class=\"node-content\">\n                  @if (node.children.length > 0) {\n                    <button\n                      class=\"expand-btn\"\n                      (click)=\"toggleExpand(node, $event)\"\n                      >\n                      <i [class]=\"node.expanded ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n                    </button>\n                  }\n                  @if (node.children.length === 0) {\n                    <span class=\"expand-placeholder\"></span>\n                  }\n                  <div class=\"node-icon\" [style.backgroundColor]=\"getCategoryColor(i) + '15'\" [style.color]=\"getCategoryColor(i)\">\n                    <i [class]=\"node.category.IconClass || 'fa-solid fa-folder'\"></i>\n                  </div>\n                  <div class=\"node-info\">\n                    <div class=\"node-name\">{{node.category.Name}}</div>\n                    @if (node.category.Description) {\n                      <div class=\"node-description\">\n                        {{node.category.Description | slice:0:50}}{{node.category.Description.length > 50 ? '...' : ''}}\n                      </div>\n                    }\n                  </div>\n                  <div class=\"node-badges\">\n                    @if (node.typeCount > 0) {\n                      <span class=\"badge types\">\n                        <i class=\"fa-solid fa-shapes\"></i>\n                        {{node.typeCount}}\n                      </span>\n                    }\n                    @if (node.children.length > 0) {\n                      <span class=\"badge children\">\n                        <i class=\"fa-solid fa-folder\"></i>\n                        {{node.children.length}}\n                      </span>\n                    }\n                  </div>\n                  <div class=\"node-actions\">\n                    @if (UserCanUpdate) {\n                      <button\n                        class=\"action-btn\"\n                        (click)=\"editCategory(node, $event)\"\n                        title=\"Edit\"\n                        >\n                        <i class=\"fa-solid fa-pen\"></i>\n                      </button>\n                    }\n                    @if (UserCanDelete && node.children.length === 0 && node.typeCount === 0) {\n                      <button\n                        class=\"action-btn danger\"\n                        (click)=\"deleteCategory(node, $event)\"\n                        title=\"Delete\"\n                        >\n                        <i class=\"fa-solid fa-trash\"></i>\n                      </button>\n                    }\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n        }\n        @if (categoryTree.length === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fa-solid fa-folder-open\"></i>\n            </div>\n            <h3>No Categories</h3>\n            @if (searchText) {\n              <p>\n                No categories match your search.\n                <button class=\"btn-link\" (click)=\"clearSearch()\">Clear search</button>\n              </p>\n            }\n            @if (!searchText) {\n              <p>\n                Get started by creating your first category.\n              </p>\n            }\n            @if (UserCanCreate && !searchText) {\n              <button class=\"btn-primary\" (click)=\"createNewCategory()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                Create Category\n              </button>\n            }\n          </div>\n        }\n      </div>\n      <!-- Detail Panel -->\n      @if (selectedNode) {\n        <div class=\"detail-panel\">\n          <div class=\"detail-header\">\n            <div class=\"detail-icon\" [style.backgroundColor]=\"getCategoryColor(0) + '15'\" [style.color]=\"getCategoryColor(0)\">\n              <i [class]=\"selectedNode.category.IconClass || 'fa-solid fa-folder'\"></i>\n            </div>\n            <div class=\"detail-title\">\n              <h2>{{selectedNode.category.Name}}</h2>\n              @if (selectedNode.level > 0) {\n                <span class=\"level-badge\">\n                  Level {{selectedNode.level + 1}}\n                </span>\n              }\n            </div>\n            <div class=\"detail-actions\">\n              @if (UserCanUpdate) {\n                <button class=\"action-btn\" (click)=\"editCategory(selectedNode)\" title=\"Edit\">\n                  <i class=\"fa-solid fa-pen\"></i>\n                </button>\n              }\n              <button class=\"close-btn\" (click)=\"selectedNode = null\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"detail-body\">\n            <!-- Stats -->\n            <div class=\"detail-stats\">\n              <div class=\"detail-stat\">\n                <div class=\"stat-value\">{{selectedNode.typeCount}}</div>\n                <div class=\"stat-label\">Credential Types</div>\n              </div>\n              <div class=\"detail-stat\">\n                <div class=\"stat-value\">{{selectedNode.children.length}}</div>\n                <div class=\"stat-label\">Subcategories</div>\n              </div>\n            </div>\n            <!-- Description -->\n            @if (selectedNode.category.Description) {\n              <div class=\"description-section\">\n                <h3>\n                  <i class=\"fa-solid fa-align-left\"></i>\n                  Description\n                </h3>\n                <p class=\"description\">{{selectedNode.category.Description}}</p>\n              </div>\n            }\n            <!-- Types in Category -->\n            @if (selectedNode.typeCount > 0) {\n              <div class=\"types-section\">\n                <h3>\n                  <i class=\"fa-solid fa-shapes\"></i>\n                  Credential Types\n                </h3>\n                <div class=\"type-list\">\n                  @for (type of getTypesForCategory(selectedNode.category.Name); track type) {\n                    <div class=\"type-item\">\n                      <div class=\"type-icon\">\n                        <i [class]=\"type.IconClass || 'fa-solid fa-key'\"></i>\n                      </div>\n                      <div class=\"type-info\">\n                        <div class=\"type-name\">{{type.Name}}</div>\n                        @if (type.Description) {\n                          <div class=\"type-desc\">{{type.Description | slice:0:60}}</div>\n                        }\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            <!-- Subcategories -->\n            @if (selectedNode.children.length > 0) {\n              <div class=\"subcategories-section\">\n                <h3>\n                  <i class=\"fa-solid fa-folder-tree\"></i>\n                  Subcategories\n                </h3>\n                <div class=\"subcategory-list\">\n                  @for (child of selectedNode.children; track child) {\n                    <div class=\"subcategory-item\" (click)=\"selectNode(child)\">\n                      <i [class]=\"child.category.IconClass || 'fa-solid fa-folder'\"></i>\n                      <span>{{child.category.Name}}</span>\n                      @if (child.typeCount > 0) {\n                        <span class=\"sub-type-count\">{{child.typeCount}} types</span>\n                      }\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n            <!-- Quick Actions -->\n            <div class=\"detail-quick-actions\">\n              @if (selectedNode.typeCount > 0) {\n                <button\n                  class=\"btn-secondary\"\n                  (click)=\"viewTypesForCategory(selectedNode.category.Name)\"\n                  >\n                  <i class=\"fa-solid fa-shapes\"></i>\n                  View Types\n                </button>\n              }\n              <button\n                class=\"btn-primary\"\n                (click)=\"createCredentialWithCategory(selectedNode.category.ID)\"\n                >\n                <i class=\"fa-solid fa-plus\"></i>\n                Create Credential\n              </button>\n            </div>\n          </div>\n        </div>\n      }\n      <!-- No Selection -->\n      @if (!selectedNode && categoryTree.length > 0) {\n        <div class=\"no-selection\">\n          <div class=\"no-selection-icon\">\n            <i class=\"fa-solid fa-hand-pointer\"></i>\n          </div>\n          <h3>Select a Category</h3>\n          <p>Click on a category to view its details and credential types</p>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Category Edit Panel -->\n<mj-credential-category-edit-panel\n  #categoryEditPanel\n  (saved)=\"onCategorySaved($any($event))\"\n  (deleted)=\"onCategoryDeleted($any($event))\"\n></mj-credential-category-edit-panel>\n", styles: [".categories-container {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n    background: var(--background-secondary, #f8fafc);\n}\n\n/* Header */\n.categories-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 20px;\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.categories-title {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0;\n}\n\n.header-stats {\n    display: flex;\n    gap: 16px;\n}\n\n.stat-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.stat-item i {\n    font-size: 12px;\n    color: var(--accent-color, #6366f1);\n}\n\n.header-actions {\n    display: flex;\n    gap: 8px;\n}\n\n/* Primary Button */\n.btn-primary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n.btn-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);\n}\n\n.btn-primary:active {\n    transform: translateY(0);\n}\n\n/* Toolbar */\n.toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    margin-bottom: 20px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.toolbar-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex: 1;\n}\n\n.toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n/* Search */\n.search-container {\n    position: relative;\n    flex: 1;\n    max-width: 320px;\n}\n\n.search-container i.fa-search {\n    position: absolute;\n    left: 12px;\n    top: 50%;\n    transform: translateY(-50%);\n    color: var(--text-secondary, #9ca3af);\n    font-size: 13px;\n}\n\n.search-container input {\n    width: 100%;\n    padding: 8px 36px 8px 36px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    font-size: 13px;\n    background: var(--input-background, #f9fafb);\n    transition: all 0.2s ease;\n}\n\n.search-container input:focus {\n    outline: none;\n    border-color: var(--accent-color, #6366f1);\n    background: white;\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.search-container input::placeholder {\n    color: var(--text-secondary, #9ca3af);\n}\n\n.search-clear {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--button-hover, #e5e7eb);\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    font-size: 10px;\n    transition: all 0.2s ease;\n}\n\n.search-clear:hover {\n    background: var(--text-secondary, #9ca3af);\n    color: white;\n}\n\n/* Toolbar Buttons */\n.btn-text {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-text:hover {\n    background: var(--hover-background, #f3f4f6);\n    color: var(--text-primary, #1f2937);\n}\n\n.btn-icon {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon:hover {\n    background: var(--hover-background, #f3f4f6);\n    color: var(--text-primary, #1f2937);\n}\n\n/* Layout */\n.categories-layout {\n    display: grid;\n    grid-template-columns: 1fr 380px;\n    gap: 20px;\n    min-height: 500px;\n}\n\n/* Tree Panel */\n.tree-panel {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.tree-container {\n    max-height: calc(100vh - 300px);\n    overflow-y: auto;\n}\n\n/* Tree Node */\n.tree-node {\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.tree-node:last-child {\n    border-bottom: none;\n}\n\n.tree-node:hover {\n    background: var(--hover-background, #f9fafb);\n}\n\n.tree-node.selected {\n    background: linear-gradient(135deg, rgba(99, 102, 241, 0.08) 0%, rgba(99, 102, 241, 0.04) 100%);\n    border-left: 3px solid var(--accent-color, #6366f1);\n}\n\n.node-content {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    width: 100%;\n    gap: 8px;\n}\n\n/* Expand Button */\n.expand-btn {\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n    color: var(--text-secondary, #9ca3af);\n    border-radius: 4px;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.expand-btn:hover {\n    background: var(--button-hover, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n.expand-btn i {\n    font-size: 10px;\n    transition: transform 0.2s ease;\n}\n\n.expand-placeholder {\n    width: 24px;\n    flex-shrink: 0;\n}\n\n/* Node Icon */\n.node-icon {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    flex-shrink: 0;\n}\n\n.node-icon i {\n    font-size: 14px;\n}\n\n/* Node Info */\n.node-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.node-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    line-height: 1.3;\n}\n\n.node-description {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* Node Badges */\n.node-badges {\n    display: flex;\n    gap: 6px;\n    flex-shrink: 0;\n}\n\n.badge {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    padding: 4px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n.badge.types {\n    background: rgba(99, 102, 241, 0.1);\n    color: var(--accent-color, #6366f1);\n}\n\n.badge.children {\n    background: var(--badge-background, #f3f4f6);\n    color: var(--text-secondary, #6b7280);\n}\n\n.badge i {\n    font-size: 10px;\n}\n\n/* Node Actions */\n.node-actions {\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n    flex-shrink: 0;\n}\n\n.tree-node:hover .node-actions {\n    opacity: 1;\n}\n\n.action-btn {\n    width: 28px;\n    height: 28px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.action-btn:hover {\n    background: var(--accent-color, #6366f1);\n    color: white;\n}\n\n.action-btn.danger:hover {\n    background: #ef4444;\n    color: white;\n}\n\n.action-btn i {\n    font-size: 12px;\n}\n\n/* Detail Panel */\n.detail-panel {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n}\n\n.detail-header {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    padding: 20px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-icon {\n    width: 48px;\n    height: 48px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 12px;\n    flex-shrink: 0;\n}\n\n.detail-icon i {\n    font-size: 20px;\n}\n\n.detail-title {\n    flex: 1;\n    min-width: 0;\n}\n\n.detail-title h2 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0;\n    line-height: 1.3;\n}\n\n.level-badge {\n    display: inline-block;\n    margin-top: 4px;\n    padding: 2px 8px;\n    background: var(--badge-background, #f3f4f6);\n    border-radius: 10px;\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.detail-actions {\n    display: flex;\n    gap: 8px;\n    flex-shrink: 0;\n}\n\n.close-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 8px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.close-btn:hover {\n    background: var(--hover-background, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n/* Detail Body */\n.detail-body {\n    padding: 20px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n/* Detail Stats */\n.detail-stats {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.detail-stat {\n    background: var(--stat-background, #f9fafb);\n    border-radius: 10px;\n    padding: 16px;\n    text-align: center;\n}\n\n.detail-stat .stat-value {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--accent-color, #6366f1);\n    line-height: 1;\n}\n\n.detail-stat .stat-label {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 4px;\n}\n\n/* Description Section */\n.description-section {\n    margin-bottom: 20px;\n}\n\n.description-section h3,\n.types-section h3,\n.subcategories-section h3 {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--text-secondary, #6b7280);\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    margin: 0 0 12px 0;\n}\n\n.description-section h3 i,\n.types-section h3 i,\n.subcategories-section h3 i {\n    font-size: 12px;\n}\n\n.description {\n    font-size: 14px;\n    color: var(--text-primary, #374151);\n    line-height: 1.6;\n    margin: 0;\n}\n\n/* Types Section */\n.types-section {\n    margin-bottom: 20px;\n}\n\n.type-list {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.type-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n.type-item:hover {\n    background: var(--hover-background, #f3f4f6);\n}\n\n.type-icon {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(99, 102, 241, 0.1);\n    border-radius: 6px;\n    flex-shrink: 0;\n}\n\n.type-icon i {\n    font-size: 12px;\n    color: var(--accent-color, #6366f1);\n}\n\n.type-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #1f2937);\n}\n\n.type-desc {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n/* Subcategories Section */\n.subcategories-section {\n    margin-bottom: 20px;\n}\n\n.subcategory-list {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.subcategory-item {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    background: var(--item-background, #f9fafb);\n    border-radius: 8px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.subcategory-item:hover {\n    background: var(--hover-background, #f3f4f6);\n}\n\n.subcategory-item i {\n    font-size: 14px;\n    color: var(--accent-color, #6366f1);\n}\n\n.subcategory-item span {\n    flex: 1;\n    font-size: 13px;\n    color: var(--text-primary, #1f2937);\n}\n\n.sub-type-count {\n    font-size: 11px;\n    color: var(--text-secondary, #6b7280);\n    background: var(--badge-background, #e5e7eb);\n    padding: 2px 8px;\n    border-radius: 10px;\n}\n\n/* Quick Actions */\n.detail-quick-actions {\n    margin-top: auto;\n    padding-top: 16px;\n    border-top: 1px solid var(--border-color, #f3f4f6);\n    display: flex;\n    gap: 8px;\n}\n\n.detail-quick-actions .btn-secondary,\n.detail-quick-actions .btn-primary {\n    flex: 1;\n}\n\n.btn-secondary {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 12px;\n    background: var(--button-background, #f3f4f6);\n    border: none;\n    border-radius: 8px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--text-primary, #374151);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-secondary:hover {\n    background: var(--hover-background, #e5e7eb);\n}\n\n/* No Selection State */\n.no-selection {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 40px;\n    text-align: center;\n}\n\n.no-selection-icon {\n    width: 64px;\n    height: 64px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, #f3f4f6);\n    border-radius: 50%;\n    margin-bottom: 16px;\n}\n\n.no-selection-icon i {\n    font-size: 24px;\n    color: var(--text-secondary, #9ca3af);\n}\n\n.no-selection h3 {\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.no-selection p {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0;\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 64px 24px;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    text-align: center;\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--icon-background, #f3f4f6);\n    border-radius: 50%;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 32px;\n    color: var(--text-secondary, #d1d5db);\n}\n\n.empty-state h3 {\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.empty-state p {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0 0 20px 0;\n}\n\n.btn-link {\n    background: none;\n    border: none;\n    color: var(--accent-color, #6366f1);\n    cursor: pointer;\n    font-size: inherit;\n    padding: 0;\n    text-decoration: underline;\n}\n\n.btn-link:hover {\n    color: var(--accent-hover, #4f46e5);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .categories-layout {\n        grid-template-columns: 1fr;\n    }\n\n    .detail-panel,\n    .no-selection {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .categories-container {\n        padding: 16px;\n    }\n\n    .categories-header {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 16px;\n    }\n\n    .toolbar {\n        flex-direction: column;\n        gap: 12px;\n    }\n\n    .toolbar-left,\n    .toolbar-right {\n        width: 100%;\n    }\n\n    .search-container {\n        max-width: none;\n    }\n\n    .toolbar-right {\n        justify-content: flex-end;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.NavigationService }], { categoryEditPanel: [{
             type: ViewChild,
             args: ['categoryEditPanel']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsCategoriesResourceComponent, { className: "CredentialsCategoriesResourceComponent", filePath: "src/Credentials/components/credentials-categories-resource.component.ts", lineNumber: 28 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsCategoriesResourceComponent, { className: "CredentialsCategoriesResourceComponent", filePath: "src/credentials/components/credentials-categories-resource.component.ts", lineNumber: 24 }); })();
 //# sourceMappingURL=credentials-categories-resource.component.js.map