@memberjunction/ng-dashboards 3.3.0 → 4.0.0

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

@@ -11,32 +11,32 @@ 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 "@angular/forms";
-import * as i4 from "@memberjunction/ng-shared-generic";
-import * as i5 from "./credential-type-edit-panel.component";
+import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@memberjunction/ng-credentials";
+import * as i5 from "@angular/common";
 const _c0 = ["typeEditPanel"];
-function CredentialsTypesResourceComponent_mj_loading_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 5);
+function CredentialsTypesResourceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 2);
 } }
-function CredentialsTypesResourceComponent_ng_container_2_button_16_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 35);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_button_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.createNewType()); });
-    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelementStart(0, "button", 33);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.createNewType()); });
+    i0.ɵɵelement(1, "i", 34);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "New Type");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_button_22_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 37);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_button_22_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onSearchChange("")); });
-    i0.ɵɵelement(1, "i", 38);
+    i0.ɵɵelementStart(0, "button", 35);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_Conditional_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.onSearchChange("")); });
+    i0.ɵɵelement(1, "i", 36);
     i0.ɵɵelementEnd();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_option_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 39);
+function CredentialsTypesResourceComponent_Conditional_2_For_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 22);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -45,8 +45,8 @@ function CredentialsTypesResourceComponent_ng_container_2_option_26_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(cat_r6);
 } }
-function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 60);
+function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 46);
     i0.ɵɵtext(1);
     i0.ɵɵpipe(2, "slice");
     i0.ɵɵelementEnd();
@@ -55,9 +55,9 @@ function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate2(" ", i0.ɵɵpipeBind3(2, 2, type_r8.Description, 0, 60), "", type_r8.Description.length > 60 ? "..." : "", " ");
 } }
-function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_span_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
-    i0.ɵɵelement(1, "i", 13);
+function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 48);
+    i0.ɵɵelement(1, "i", 11);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -65,9 +65,9 @@ function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", type_r8.credentialCount, " ");
 } }
-function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_span_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 62);
-    i0.ɵɵelement(1, "i", 63);
+function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 49);
+    i0.ɵɵelement(1, "i", 56);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -75,9 +75,9 @@ function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", type_r8.activeCount, " active ");
 } }
-function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_span_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 64);
-    i0.ɵɵelement(1, "i", 65);
+function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 50);
+    i0.ɵɵelement(1, "i", 57);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -85,45 +85,49 @@ function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", type_r8.expiringCount, " expiring ");
 } }
-function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_button_12_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 66);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_button_12_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const type_r8 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.createCredentialForType(type_r8, $event)); });
-    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelementStart(0, "button", 58);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_12_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r9); const type_r8 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.createCredentialForType(type_r8, $event)); });
+    i0.ɵɵelement(1, "i", 34);
     i0.ɵɵelementEnd();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_button_13_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 67);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_button_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const type_r8 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.editType(type_r8, $event)); });
-    i0.ɵɵelement(1, "i", 68);
+    i0.ɵɵelementStart(0, "button", 59);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const type_r8 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.editType(type_r8, $event)); });
+    i0.ɵɵelement(1, "i", 60);
     i0.ɵɵelementEnd();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_button_14_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 69);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_button_14_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const type_r8 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.deleteType(type_r8, $event)); });
-    i0.ɵɵelement(1, "i", 70);
+    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_14_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const type_r8 = i0.ɵɵnextContext().$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.deleteType(type_r8, $event)); });
+    i0.ɵɵelement(1, "i", 62);
     i0.ɵɵelementEnd();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 46);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_Template_div_click_0_listener() { const type_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.selectType(type_r8)); });
-    i0.ɵɵelementStart(1, "div", 47);
+    i0.ɵɵelementStart(0, "div", 42);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Template_div_click_0_listener() { const type_r8 = i0.ɵɵrestoreView(_r7).$implicit; const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.selectType(type_r8)); });
+    i0.ɵɵelementStart(1, "div", 43);
     i0.ɵɵelement(2, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 48)(4, "div", 49);
+    i0.ɵɵelementStart(3, "div", 44)(4, "div", 45);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_div_6_Template, 3, 6, "div", 50);
-    i0.ɵɵelementStart(7, "div", 51);
-    i0.ɵɵtemplate(8, CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_span_8_Template, 3, 1, "span", 52)(9, CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_span_9_Template, 3, 1, "span", 53)(10, CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_span_10_Template, 3, 1, "span", 54);
+    i0.ɵɵconditionalCreate(6, CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_6_Template, 3, 6, "div", 46);
+    i0.ɵɵelementStart(7, "div", 47);
+    i0.ɵɵconditionalCreate(8, CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_8_Template, 3, 1, "span", 48);
+    i0.ɵɵconditionalCreate(9, CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_9_Template, 3, 1, "span", 49);
+    i0.ɵɵconditionalCreate(10, CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_10_Template, 3, 1, "span", 50);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(11, "div", 55);
-    i0.ɵɵtemplate(12, CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_button_12_Template, 2, 0, "button", 56)(13, CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_button_13_Template, 2, 0, "button", 57)(14, CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_button_14_Template, 2, 0, "button", 58);
+    i0.ɵɵelementStart(11, "div", 51);
+    i0.ɵɵconditionalCreate(12, CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_12_Template, 2, 0, "button", 52);
+    i0.ɵɵconditionalCreate(13, CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_13_Template, 2, 0, "button", 53);
+    i0.ɵɵconditionalCreate(14, CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Conditional_14_Template, 2, 0, "button", 54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelement(15, "i", 59);
+    i0.ɵɵelement(15, "i", 55);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const type_r8 = ctx.$implicit;
@@ -136,38 +140,36 @@ function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(type_r8.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", type_r8.Description);
+    i0.ɵɵconditional(type_r8.Description ? 6 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", type_r8.credentialCount > 0);
+    i0.ɵɵconditional(type_r8.credentialCount > 0 ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", type_r8.activeCount > 0);
+    i0.ɵɵconditional(type_r8.activeCount > 0 ? 9 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", type_r8.expiringCount > 0);
+    i0.ɵɵconditional(type_r8.expiringCount > 0 ? 10 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanCreateCredential);
+    i0.ɵɵconditional(ctx_r3.UserCanCreateCredential ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanUpdate);
+    i0.ɵɵconditional(ctx_r3.UserCanUpdate ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanDelete && type_r8.credentialCount === 0);
+    i0.ɵɵconditional(ctx_r3.UserCanDelete && type_r8.credentialCount === 0 ? 14 : -1);
 } }
-function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵelementStart(1, "div", 40)(2, "div", 41);
-    i0.ɵɵelement(3, "i");
-    i0.ɵɵelementStart(4, "span", 42);
-    i0.ɵɵtext(5);
+function CredentialsTypesResourceComponent_Conditional_2_For_35_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29)(1, "div", 37);
+    i0.ɵɵelement(2, "i");
+    i0.ɵɵelementStart(3, "span", 38);
+    i0.ɵɵtext(4);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 43);
-    i0.ɵɵtext(7);
+    i0.ɵɵelementStart(5, "span", 39);
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 44);
-    i0.ɵɵtemplate(9, CredentialsTypesResourceComponent_ng_container_2_ng_container_34_div_9_Template, 16, 16, "div", 45);
+    i0.ɵɵelementStart(7, "div", 40);
+    i0.ɵɵrepeaterCreate(8, CredentialsTypesResourceComponent_Conditional_2_For_35_For_9_Template, 16, 16, "div", 41, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const entry_r12 = ctx.$implicit;
     const ctx_r3 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance();
     i0.ɵɵstyleProp("border-left-color", ctx_r3.getCategoryColor(entry_r12.key));
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r3.getCategoryIcon(entry_r12.key));
@@ -177,60 +179,62 @@ function CredentialsTypesResourceComponent_ng_container_2_ng_container_34_Templa
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(entry_r12.value.length);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", entry_r12.value);
+    i0.ɵɵrepeater(entry_r12.value);
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_36_p_5_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_37_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "p");
     i0.ɵɵtext(1, " No types match your current filters. ");
-    i0.ɵɵelementStart(2, "button", 74);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_div_36_p_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.clearFilters()); });
+    i0.ɵɵelementStart(2, "button", 65);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_Conditional_37_Conditional_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r13); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.clearFilters()); });
     i0.ɵɵtext(3, "Clear filters");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_36_p_6_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_37_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p");
     i0.ɵɵtext(1, " Get started by creating your first credential type. ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_36_button_7_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_37_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 35);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_div_36_button_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.createNewType()); });
-    i0.ɵɵelement(1, "i", 36);
+    i0.ɵɵelementStart(0, "button", 33);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_Conditional_37_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.createNewType()); });
+    i0.ɵɵelement(1, "i", 34);
     i0.ɵɵtext(2, " Create Type ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_36_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 71)(1, "div", 72);
-    i0.ɵɵelement(2, "i", 73);
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_37_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 30)(1, "div", 63);
+    i0.ɵɵelement(2, "i", 64);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "No Credential Types Found");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(5, CredentialsTypesResourceComponent_ng_container_2_div_36_p_5_Template, 4, 0, "p", 3)(6, CredentialsTypesResourceComponent_ng_container_2_div_36_p_6_Template, 2, 0, "p", 3)(7, CredentialsTypesResourceComponent_ng_container_2_div_36_button_7_Template, 3, 0, "button", 15);
+    i0.ɵɵconditionalCreate(5, CredentialsTypesResourceComponent_Conditional_2_Conditional_37_Conditional_5_Template, 4, 0, "p");
+    i0.ɵɵconditionalCreate(6, CredentialsTypesResourceComponent_Conditional_2_Conditional_37_Conditional_6_Template, 2, 0, "p");
+    i0.ɵɵconditionalCreate(7, CredentialsTypesResourceComponent_Conditional_2_Conditional_37_Conditional_7_Template, 3, 0, "button", 13);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngIf", ctx_r3.searchText || ctx_r3.selectedCategoryFilter);
+    i0.ɵɵconditional(ctx_r3.searchText || ctx_r3.selectedCategoryFilter ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r3.searchText && !ctx_r3.selectedCategoryFilter);
+    i0.ɵɵconditional(!ctx_r3.searchText && !ctx_r3.selectedCategoryFilter ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanCreate && !ctx_r3.searchText && !ctx_r3.selectedCategoryFilter);
+    i0.ɵɵconditional(ctx_r3.UserCanCreate && !ctx_r3.searchText && !ctx_r3.selectedCategoryFilter ? 7 : -1);
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_button_11_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 97);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_div_37_button_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.editType(ctx_r3.selectedType)); });
-    i0.ɵɵelement(1, "i", 68);
+    i0.ɵɵelementStart(0, "button", 87);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r16); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.editType(ctx_r3.selectedType)); });
+    i0.ɵɵelement(1, "i", 60);
     i0.ɵɵelementEnd();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_div_26_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 98)(1, "div", 86);
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79)(1, "div", 76);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 87);
+    i0.ɵɵelementStart(3, "div", 77);
     i0.ɵɵtext(4, "Expiring");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -238,8 +242,8 @@ function CredentialsTypesResourceComponent_ng_container_2_div_37_div_26_Template
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(ctx_r3.selectedType.expiringCount);
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_p_27_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 99);
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_27_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 80);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -247,19 +251,19 @@ function CredentialsTypesResourceComponent_ng_container_2_div_37_p_27_Template(r
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r3.selectedType.Description, " ");
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_div_1_span_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 110);
-    i0.ɵɵelement(1, "i", 111);
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_32_For_2_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 93);
+    i0.ɵɵelement(1, "i", 96);
     i0.ɵɵtext(2, " Secret ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_div_1_span_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 112);
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_32_For_2_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 94);
     i0.ɵɵtext(1, "Required");
     i0.ɵɵelementEnd();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_div_1_p_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 113);
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_32_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 95);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -267,16 +271,17 @@ function CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_div_1_p_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", prop_r17.description, " ");
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 102)(1, "div", 103)(2, "span", 104);
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_32_For_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 88)(1, "div", 89)(2, "span", 90);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 105)(5, "span", 106);
+    i0.ɵɵelementStart(4, "span", 91)(5, "span", 92);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(7, CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_div_1_span_7_Template, 3, 0, "span", 107)(8, CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_div_1_span_8_Template, 2, 0, "span", 108);
+    i0.ɵɵconditionalCreate(7, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_32_For_2_Conditional_7_Template, 3, 0, "span", 93);
+    i0.ɵɵconditionalCreate(8, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_32_For_2_Conditional_8_Template, 2, 0, "span", 94);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(9, CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_div_1_p_9_Template, 2, 1, "p", 109);
+    i0.ɵɵconditionalCreate(9, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_32_For_2_Conditional_9_Template, 2, 1, "p", 95);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const prop_r17 = ctx.$implicit;
@@ -285,35 +290,35 @@ function CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_div_1_Te
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(prop_r17.type);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", prop_r17.isSecret);
+    i0.ɵɵconditional(prop_r17.isSecret ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", prop_r17.required);
+    i0.ɵɵconditional(prop_r17.required ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", prop_r17.description);
+    i0.ɵɵconditional(prop_r17.description ? 9 : -1);
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 100);
-    i0.ɵɵtemplate(1, CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_div_1_Template, 10, 5, "div", 101);
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_32_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 83);
+    i0.ɵɵrepeaterCreate(1, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_32_For_2_Template, 10, 5, "div", 88, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r3.schemaProperties);
+    i0.ɵɵrepeater(ctx_r3.schemaProperties);
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_div_33_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 114);
-    i0.ɵɵelement(1, "i", 115);
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_33_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 84);
+    i0.ɵɵelement(1, "i", 97);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No fields defined in schema");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_div_34_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 116)(1, "h3");
-    i0.ɵɵelement(2, "i", 117);
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_34_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 85)(1, "h3");
+    i0.ɵɵelement(2, "i", 98);
     i0.ɵɵtext(3, " Validation ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 118);
-    i0.ɵɵelement(5, "i", 119);
+    i0.ɵɵelementStart(4, "div", 99);
+    i0.ɵɵelement(5, "i", 100);
     i0.ɵɵelementStart(6, "span");
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
@@ -322,54 +327,56 @@ function CredentialsTypesResourceComponent_ng_container_2_div_37_div_34_Template
     i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(ctx_r3.selectedType.ValidationEndpoint);
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_div_35_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_35_Template(rf, ctx) { if (rf & 1) {
     const _r18 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 120)(1, "button", 35);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_div_37_div_35_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.createCredentialForType(ctx_r3.selectedType)); });
-    i0.ɵɵelement(2, "i", 36);
+    i0.ɵɵelementStart(0, "div", 86)(1, "button", 33);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_35_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r18); const ctx_r3 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r3.createCredentialForType(ctx_r3.selectedType)); });
+    i0.ɵɵelement(2, "i", 34);
     i0.ɵɵtext(3, " Create Credential ");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_37_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Template(rf, ctx) { if (rf & 1) {
     const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 75)(1, "div", 76)(2, "div", 77);
+    i0.ɵɵelementStart(0, "div", 31)(1, "div", 66)(2, "div", 67);
     i0.ɵɵelement(3, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 78)(5, "h2");
+    i0.ɵɵelementStart(4, "div", 68)(5, "h2");
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 79);
+    i0.ɵɵelementStart(7, "span", 69);
     i0.ɵɵelement(8, "i");
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 80);
-    i0.ɵɵtemplate(11, CredentialsTypesResourceComponent_ng_container_2_div_37_button_11_Template, 2, 0, "button", 81);
-    i0.ɵɵelementStart(12, "button", 82);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_div_37_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r15); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.closeDetail()); });
-    i0.ɵɵelement(13, "i", 38);
+    i0.ɵɵelementStart(10, "div", 70);
+    i0.ɵɵconditionalCreate(11, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_11_Template, 2, 0, "button", 71);
+    i0.ɵɵelementStart(12, "button", 72);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r15); const ctx_r3 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r3.closeDetail()); });
+    i0.ɵɵelement(13, "i", 36);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(14, "div", 83)(15, "div", 84)(16, "div", 85)(17, "div", 86);
+    i0.ɵɵelementStart(14, "div", 73)(15, "div", 74)(16, "div", 75)(17, "div", 76);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 87);
+    i0.ɵɵelementStart(19, "div", 77);
     i0.ɵɵtext(20, "Credentials");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 88)(22, "div", 86);
+    i0.ɵɵelementStart(21, "div", 78)(22, "div", 76);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(24, "div", 87);
+    i0.ɵɵelementStart(24, "div", 77);
     i0.ɵɵtext(25, "Active");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(26, CredentialsTypesResourceComponent_ng_container_2_div_37_div_26_Template, 5, 1, "div", 89);
+    i0.ɵɵconditionalCreate(26, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_26_Template, 5, 1, "div", 79);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(27, CredentialsTypesResourceComponent_ng_container_2_div_37_p_27_Template, 2, 1, "p", 90);
-    i0.ɵɵelementStart(28, "div", 91)(29, "h3");
-    i0.ɵɵelement(30, "i", 92);
+    i0.ɵɵconditionalCreate(27, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_27_Template, 2, 1, "p", 80);
+    i0.ɵɵelementStart(28, "div", 81)(29, "h3");
+    i0.ɵɵelement(30, "i", 82);
     i0.ɵɵtext(31, " Field Schema ");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(32, CredentialsTypesResourceComponent_ng_container_2_div_37_div_32_Template, 2, 1, "div", 93)(33, CredentialsTypesResourceComponent_ng_container_2_div_37_div_33_Template, 4, 0, "div", 94);
+    i0.ɵɵconditionalCreate(32, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_32_Template, 3, 0, "div", 83);
+    i0.ɵɵconditionalCreate(33, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_33_Template, 4, 0, "div", 84);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(34, CredentialsTypesResourceComponent_ng_container_2_div_37_div_34_Template, 8, 1, "div", 95)(35, CredentialsTypesResourceComponent_ng_container_2_div_37_div_35_Template, 4, 0, "div", 96);
+    i0.ɵɵconditionalCreate(34, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_34_Template, 8, 1, "div", 85);
+    i0.ɵɵconditionalCreate(35, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Conditional_35_Template, 4, 0, "div", 86);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext(2);
@@ -386,27 +393,27 @@ function CredentialsTypesResourceComponent_ng_container_2_div_37_Template(rf, ct
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r3.selectedType.Category, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanUpdate);
+    i0.ɵɵconditional(ctx_r3.UserCanUpdate ? 11 : -1);
     i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate(ctx_r3.selectedType.credentialCount);
     i0.ɵɵadvance(5);
     i0.ɵɵtextInterpolate(ctx_r3.selectedType.activeCount);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r3.selectedType.expiringCount > 0);
+    i0.ɵɵconditional(ctx_r3.selectedType.expiringCount > 0 ? 26 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.selectedType.Description);
+    i0.ɵɵconditional(ctx_r3.selectedType.Description ? 27 : -1);
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngIf", ctx_r3.schemaProperties.length > 0);
+    i0.ɵɵconditional(ctx_r3.schemaProperties.length > 0 ? 32 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.schemaProperties.length === 0);
+    i0.ɵɵconditional(ctx_r3.schemaProperties.length === 0 ? 33 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.selectedType.ValidationEndpoint);
+    i0.ɵɵconditional(ctx_r3.selectedType.ValidationEndpoint ? 34 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanCreateCredential);
+    i0.ɵɵconditional(ctx_r3.UserCanCreateCredential ? 35 : -1);
 } }
-function CredentialsTypesResourceComponent_ng_container_2_div_38_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 121)(1, "div", 122);
-    i0.ɵɵelement(2, "i", 123);
+function CredentialsTypesResourceComponent_Conditional_2_Conditional_39_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32)(1, "div", 101);
+    i0.ɵɵelement(2, "i", 102);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "Select a Credential Type");
@@ -415,88 +422,84 @@ function CredentialsTypesResourceComponent_ng_container_2_div_38_Template(rf, ct
     i0.ɵɵtext(6, "Click on a credential type to view its details and field schema");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsTypesResourceComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+function CredentialsTypesResourceComponent_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, "Credential Types");
+    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "h2", 6);
+    i0.ɵɵtext(3, "Credential Types");
     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, "span", 10);
-    i0.ɵɵelement(13, "i", 13);
-    i0.ɵɵtext(14);
+    i0.ɵɵelementStart(11, "span", 8);
+    i0.ɵɵelement(12, "i", 11);
+    i0.ɵɵtext(13);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(15, "div", 14);
-    i0.ɵɵtemplate(16, CredentialsTypesResourceComponent_ng_container_2_button_16_Template, 4, 0, "button", 15);
+    i0.ɵɵelementStart(14, "div", 12);
+    i0.ɵɵconditionalCreate(15, CredentialsTypesResourceComponent_Conditional_2_Conditional_15_Template, 4, 0, "button", 13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(17, "div", 16)(18, "div", 17)(19, "div", 18);
-    i0.ɵɵelement(20, "i", 19);
-    i0.ɵɵelementStart(21, "input", 20);
-    i0.ɵɵlistener("input", function CredentialsTypesResourceComponent_ng_container_2_Template_input_input_21_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onSearchChange($event.target.value)); });
+    i0.ɵɵelementStart(16, "div", 14)(17, "div", 15)(18, "div", 16);
+    i0.ɵɵelement(19, "i", 17);
+    i0.ɵɵelementStart(20, "input", 18);
+    i0.ɵɵlistener("input", function CredentialsTypesResourceComponent_Conditional_2_Template_input_input_20_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onSearchChange($event.target.value)); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(22, CredentialsTypesResourceComponent_ng_container_2_button_22_Template, 2, 0, "button", 21);
+    i0.ɵɵconditionalCreate(21, CredentialsTypesResourceComponent_Conditional_2_Conditional_21_Template, 2, 0, "button", 19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "select", 22);
-    i0.ɵɵlistener("change", function CredentialsTypesResourceComponent_ng_container_2_Template_select_change_23_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCategoryFilterChange($event.target.value)); });
-    i0.ɵɵelementStart(24, "option", 23);
-    i0.ɵɵtext(25, "All Categories");
+    i0.ɵɵelementStart(22, "select", 20);
+    i0.ɵɵlistener("change", function CredentialsTypesResourceComponent_Conditional_2_Template_select_change_22_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.onCategoryFilterChange($event.target.value)); });
+    i0.ɵɵelementStart(23, "option", 21);
+    i0.ɵɵtext(24, "All Categories");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(26, CredentialsTypesResourceComponent_ng_container_2_option_26_Template, 2, 2, "option", 24);
+    i0.ɵɵrepeaterCreate(25, CredentialsTypesResourceComponent_Conditional_2_For_26_Template, 2, 2, "option", 22, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(27, "div", 25)(28, "div", 26);
+    i0.ɵɵelementStart(27, "div", 23)(28, "div", 24);
     i0.ɵɵtext(29);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "button", 27);
-    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_ng_container_2_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.refresh()); });
-    i0.ɵɵelement(31, "i", 28);
+    i0.ɵɵelementStart(30, "button", 25);
+    i0.ɵɵlistener("click", function CredentialsTypesResourceComponent_Conditional_2_Template_button_click_30_listener() { i0.ɵɵrestoreView(_r2); const ctx_r3 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r3.refresh()); });
+    i0.ɵɵelement(31, "i", 26);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(32, "div", 29)(33, "div", 30);
-    i0.ɵɵtemplate(34, CredentialsTypesResourceComponent_ng_container_2_ng_container_34_Template, 10, 9, "ng-container", 31);
-    i0.ɵɵpipe(35, "keyvalue");
-    i0.ɵɵtemplate(36, CredentialsTypesResourceComponent_ng_container_2_div_36_Template, 8, 3, "div", 32);
+    i0.ɵɵelementStart(32, "div", 27)(33, "div", 28);
+    i0.ɵɵrepeaterCreate(34, CredentialsTypesResourceComponent_Conditional_2_For_35_Template, 10, 8, "div", 29, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵpipe(36, "keyvalue");
+    i0.ɵɵconditionalCreate(37, CredentialsTypesResourceComponent_Conditional_2_Conditional_37_Template, 8, 3, "div", 30);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(37, CredentialsTypesResourceComponent_ng_container_2_div_37_Template, 36, 23, "div", 33)(38, CredentialsTypesResourceComponent_ng_container_2_div_38_Template, 7, 0, "div", 34);
+    i0.ɵɵconditionalCreate(38, CredentialsTypesResourceComponent_Conditional_2_Conditional_38_Template, 36, 23, "div", 31);
+    i0.ɵɵconditionalCreate(39, CredentialsTypesResourceComponent_Conditional_2_Conditional_39_Template, 7, 0, "div", 32);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r3 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(8);
+    i0.ɵɵadvance(7);
     i0.ɵɵtextInterpolate1(" ", ctx_r3.types.length, " types ");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r3.categories.length, " categories ");
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate1(" ", ctx_r3.getTotalCredentialCount(), " credentials ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r3.UserCanCreate);
+    i0.ɵɵconditional(ctx_r3.UserCanCreate ? 15 : -1);
     i0.ɵɵadvance(5);
     i0.ɵɵproperty("value", ctx_r3.searchText);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.searchText);
+    i0.ɵɵconditional(ctx_r3.searchText ? 21 : -1);
     i0.ɵɵadvance();
     i0.ɵɵproperty("value", ctx_r3.selectedCategoryFilter);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngForOf", ctx_r3.categories);
-    i0.ɵɵadvance(3);
+    i0.ɵɵrepeater(ctx_r3.categories);
+    i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate2(" ", ctx_r3.filteredTypes.length, " of ", ctx_r3.types.length, " types ");
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(35, 14, ctx_r3.getTypesByCategory()));
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r3.filteredTypes.length === 0);
+    i0.ɵɵrepeater(i0.ɵɵpipeBind1(36, 12, ctx_r3.getTypesByCategory()));
+    i0.ɵɵadvance(3);
+    i0.ɵɵconditional(ctx_r3.filteredTypes.length === 0 ? 37 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r3.selectedType);
+    i0.ɵɵconditional(ctx_r3.selectedType ? 38 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r3.selectedType && ctx_r3.filteredTypes.length > 0);
+    i0.ɵɵconditional(!ctx_r3.selectedType && ctx_r3.filteredTypes.length > 0 ? 39 : -1);
 } }
-export function LoadCredentialsTypesResource() {
-    // Prevents tree-shaking
-}
 let CredentialsTypesResourceComponent = class CredentialsTypesResourceComponent extends BaseResourceComponent {
     cdr;
     navigationService;
@@ -838,20 +841,21 @@ let CredentialsTypesResourceComponent = class CredentialsTypesResourceComponent
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.typeEditPanel = _t.first);
-        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 2, consts: [["typeEditPanel", ""], [1, "types-container"], ["text", "Loading credential types...", 4, "ngIf"], [4, "ngIf"], [3, "saved", "deleted"], ["text", "Loading credential types..."], [1, "types-header"], [1, "header-info"], [1, "types-title"], [1, "header-stats"], [1, "stat-item"], [1, "fa-solid", "fa-shapes"], [1, "fa-solid", "fa-folder"], [1, "fa-solid", "fa-key"], [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 types...", 3, "input", "value"], ["class", "search-clear", 3, "click", 4, "ngIf"], [1, "filter-select", 3, "change", "value"], ["value", ""], [3, "value", 4, "ngFor", "ngForOf"], [1, "toolbar-right"], [1, "results-info"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "types-layout"], [1, "types-list"], [4, "ngFor", "ngForOf"], ["class", "empty-state", 4, "ngIf"], ["class", "type-detail", 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"], [3, "value"], [1, "category-section"], [1, "category-header"], [1, "category-name"], [1, "count"], [1, "type-items"], ["class", "type-item", 3, "selected", "click", 4, "ngFor", "ngForOf"], [1, "type-item", 3, "click"], [1, "type-icon"], [1, "type-info"], [1, "type-name"], ["class", "type-description", 4, "ngIf"], [1, "type-meta"], ["class", "meta-badge", 4, "ngIf"], ["class", "meta-badge active", 4, "ngIf"], ["class", "meta-badge warning", 4, "ngIf"], [1, "type-actions"], ["class", "action-btn", "title", "Add Credential", 3, "click", 4, "ngIf"], ["class", "action-btn", "title", "Edit Type", 3, "click", 4, "ngIf"], ["class", "action-btn danger", "title", "Delete Type", 3, "click", 4, "ngIf"], [1, "fa-solid", "fa-chevron-right", "arrow"], [1, "type-description"], [1, "meta-badge"], [1, "meta-badge", "active"], [1, "fa-solid", "fa-check"], [1, "meta-badge", "warning"], [1, "fa-solid", "fa-clock"], ["title", "Add Credential", 1, "action-btn", 3, "click"], ["title", "Edit Type", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["title", "Delete Type", 1, "action-btn", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "empty-state"], [1, "empty-icon"], [1, "fa-solid", "fa-cubes"], [1, "btn-link", 3, "click"], [1, "type-detail"], [1, "detail-header"], [1, "detail-icon"], [1, "detail-title"], [1, "category-badge"], [1, "detail-actions"], ["class", "action-btn", "title", "Edit", 3, "click", 4, "ngIf"], [1, "close-btn", 3, "click"], [1, "detail-body"], [1, "detail-stats"], [1, "detail-stat"], [1, "stat-value"], [1, "stat-label"], [1, "detail-stat", "active"], ["class", "detail-stat warning", 4, "ngIf"], ["class", "description", 4, "ngIf"], [1, "schema-section"], [1, "fa-solid", "fa-list-check"], ["class", "field-list", 4, "ngIf"], ["class", "no-fields", 4, "ngIf"], ["class", "validation-section", 4, "ngIf"], ["class", "detail-quick-actions", 4, "ngIf"], ["title", "Edit", 1, "action-btn", 3, "click"], [1, "detail-stat", "warning"], [1, "description"], [1, "field-list"], ["class", "field-item", 4, "ngFor", "ngForOf"], [1, "field-item"], [1, "field-header"], [1, "field-name"], [1, "field-badges"], [1, "badge", "type"], ["class", "badge secret", 4, "ngIf"], ["class", "badge required", 4, "ngIf"], ["class", "field-description", 4, "ngIf"], [1, "badge", "secret"], [1, "fa-solid", "fa-lock"], [1, "badge", "required"], [1, "field-description"], [1, "no-fields"], [1, "fa-solid", "fa-info-circle"], [1, "validation-section"], [1, "fa-solid", "fa-check-circle"], [1, "validation-endpoint"], [1, "fa-solid", "fa-link"], [1, "detail-quick-actions"], [1, "no-selection"], [1, "no-selection-icon"], [1, "fa-solid", "fa-hand-pointer"]], template: function CredentialsTypesResourceComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 2, consts: [["typeEditPanel", ""], [1, "types-container"], ["text", "Loading credential types..."], [3, "saved", "deleted"], [1, "types-header"], [1, "header-info"], [1, "types-title"], [1, "header-stats"], [1, "stat-item"], [1, "fa-solid", "fa-shapes"], [1, "fa-solid", "fa-folder"], [1, "fa-solid", "fa-key"], [1, "header-actions"], [1, "btn-primary"], [1, "toolbar"], [1, "toolbar-left"], [1, "search-container"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search types...", 3, "input", "value"], [1, "search-clear"], [1, "filter-select", 3, "change", "value"], ["value", ""], [3, "value"], [1, "toolbar-right"], [1, "results-info"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "types-layout"], [1, "types-list"], [1, "category-section"], [1, "empty-state"], [1, "type-detail"], [1, "no-selection"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], [1, "category-header"], [1, "category-name"], [1, "count"], [1, "type-items"], [1, "type-item", 3, "selected"], [1, "type-item", 3, "click"], [1, "type-icon"], [1, "type-info"], [1, "type-name"], [1, "type-description"], [1, "type-meta"], [1, "meta-badge"], [1, "meta-badge", "active"], [1, "meta-badge", "warning"], [1, "type-actions"], ["title", "Add Credential", 1, "action-btn"], ["title", "Edit Type", 1, "action-btn"], ["title", "Delete Type", 1, "action-btn", "danger"], [1, "fa-solid", "fa-chevron-right", "arrow"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-clock"], ["title", "Add Credential", 1, "action-btn", 3, "click"], ["title", "Edit Type", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["title", "Delete Type", 1, "action-btn", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "empty-icon"], [1, "fa-solid", "fa-cubes"], [1, "btn-link", 3, "click"], [1, "detail-header"], [1, "detail-icon"], [1, "detail-title"], [1, "category-badge"], [1, "detail-actions"], ["title", "Edit", 1, "action-btn"], [1, "close-btn", 3, "click"], [1, "detail-body"], [1, "detail-stats"], [1, "detail-stat"], [1, "stat-value"], [1, "stat-label"], [1, "detail-stat", "active"], [1, "detail-stat", "warning"], [1, "description"], [1, "schema-section"], [1, "fa-solid", "fa-list-check"], [1, "field-list"], [1, "no-fields"], [1, "validation-section"], [1, "detail-quick-actions"], ["title", "Edit", 1, "action-btn", 3, "click"], [1, "field-item"], [1, "field-header"], [1, "field-name"], [1, "field-badges"], [1, "badge", "type"], [1, "badge", "secret"], [1, "badge", "required"], [1, "field-description"], [1, "fa-solid", "fa-lock"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-check-circle"], [1, "validation-endpoint"], [1, "fa-solid", "fa-link"], [1, "no-selection-icon"], [1, "fa-solid", "fa-hand-pointer"]], template: function CredentialsTypesResourceComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
             i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵtemplate(1, CredentialsTypesResourceComponent_mj_loading_1_Template, 1, 0, "mj-loading", 2)(2, CredentialsTypesResourceComponent_ng_container_2_Template, 39, 16, "ng-container", 3);
+            i0.ɵɵconditionalCreate(1, CredentialsTypesResourceComponent_Conditional_1_Template, 1, 0, "mj-loading", 2);
+            i0.ɵɵconditionalCreate(2, CredentialsTypesResourceComponent_Conditional_2_Template, 40, 14);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(3, "mj-credential-type-edit-panel", 4, 0);
+            i0.ɵɵelementStart(3, "mj-credential-type-edit-panel", 3, 0);
             i0.ɵɵlistener("saved", function CredentialsTypesResourceComponent_Template_mj_credential_type_edit_panel_saved_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTypeSaved($event)); })("deleted", function CredentialsTypesResourceComponent_Template_mj_credential_type_edit_panel_deleted_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onTypeDeleted($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.NgSelectOption, i3.ɵNgSelectMultipleOption, i4.LoadingComponent, i5.CredentialTypeEditPanelComponent, i2.SlicePipe, i2.KeyValuePipe], styles: [".types-container[_ngcontent-%COMP%] {\n    height: 100%;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n    background: var(--page-background, #f8fafc);\n}\n\n\n\n.types-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 24px;\n    flex-wrap: wrap;\n    gap: 16px;\n}\n\n.header-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.types-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    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\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}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 10px;\n    font-size: 14px;\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 16px rgba(99, 102, 241, 0.4);\n}\n\n.btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 13px;\n}\n\n\n\n.toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    background: var(--card-background, #ffffff);\n    padding: 16px;\n    border-radius: 12px;\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-wrap: wrap;\n    flex: 1;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.search-container[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    background: var(--input-background, #f9fafb);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    padding: 8px 12px;\n    min-width: 240px;\n    position: relative;\n}\n\n.search-container[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--text-secondary, #6b7280);\n    margin-right: 8px;\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    border: none;\n    background: transparent;\n    outline: none;\n    flex: 1;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\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    background: var(--border-color, #e5e7eb);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    font-size: 10px;\n}\n\n.search-clear[_ngcontent-%COMP%]:hover {\n    background: var(--text-secondary, #6b7280);\n    color: white;\n}\n\n.filter-select[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--input-background, #ffffff);\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    cursor: pointer;\n    min-width: 160px;\n}\n\n.results-info[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    white-space: nowrap;\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    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--button-background, #ffffff);\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(--button-hover, #f3f4f6);\n    color: var(--accent-color, #6366f1);\n}\n\n\n\n.types-layout[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 420px 1fr;\n    flex: 1;\n    min-height: 0;\n    gap: 20px;\n}\n\n\n\n.types-list[_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-y: auto;\n    padding: 16px;\n}\n\n.category-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.category-section[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    color: var(--text-secondary, #6b7280);\n    letter-spacing: 0.5px;\n    border-left: 3px solid var(--accent-color, #6366f1);\n    background: var(--header-background, #f9fafb);\n    border-radius: 0 8px 8px 0;\n    margin-bottom: 8px;\n}\n\n.category-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.category-header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n    background: white;\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.type-items[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.type-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 14px;\n    background: var(--item-background, #ffffff);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    border: 2px solid transparent;\n    position: relative;\n}\n\n.type-item[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f8fafc);\n    border-color: var(--border-color, #e5e7eb);\n}\n\n.type-item.selected[_ngcontent-%COMP%] {\n    background: linear-gradient(to right, rgba(99, 102, 241, 0.05), white);\n    border-color: var(--accent-color, #6366f1);\n}\n\n.type-icon[_ngcontent-%COMP%] {\n    width: 42px;\n    height: 42px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.type-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.type-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.type-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-secondary, #9ca3af);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-top: 6px;\n}\n\n.meta-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 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.meta-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 9px;\n}\n\n.meta-badge.active[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.meta-badge.warning[_ngcontent-%COMP%] {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.type-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    margin-right: 8px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.type-item[_ngcontent-%COMP%]:hover   .type-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    border: none;\n    background: var(--input-background, #f3f4f6);\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 12px;\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}\n\n.arrow[_ngcontent-%COMP%] {\n    color: var(--text-tertiary, #d1d5db);\n    font-size: 12px;\n}\n\n\n\n.type-detail[_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-y: auto;\n}\n\n.detail-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 24px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n    width: 60px;\n    height: 60px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 14px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.detail-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 26px;\n}\n\n.detail-title[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.detail-title[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.category-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 8px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.category-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n}\n\n.detail-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--button-background, #f3f4f6);\n    border-radius: 8px;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    transition: all 0.2s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--button-hover, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n.detail-body[_ngcontent-%COMP%] {\n    padding: 24px;\n}\n\n\n\n.detail-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-stat[_ngcontent-%COMP%] {\n    flex: 1;\n    text-align: center;\n    padding: 16px;\n    background: var(--stat-background, #f9fafb);\n    border-radius: 12px;\n}\n\n.detail-stat[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\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.detail-stat.active[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);\n}\n\n.detail-stat.active[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    color: #059669;\n}\n\n.detail-stat.warning[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);\n}\n\n.detail-stat.warning[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    color: #d97706;\n}\n\n.description[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    line-height: 1.6;\n    margin: 0 0 24px 0;\n    padding: 16px;\n    background: var(--description-background, #f9fafb);\n    border-radius: 10px;\n}\n\n.schema-section[_ngcontent-%COMP%], \n.validation-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.schema-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.validation-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 16px 0;\n}\n\n.schema-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.validation-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color, #6366f1);\n}\n\n.field-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: var(--field-background, #f9fafb);\n    border-radius: 10px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    transition: all 0.2s ease;\n}\n\n.field-item[_ngcontent-%COMP%]:hover {\n    border-color: var(--accent-color, #6366f1);\n    background: var(--field-hover, #f3f4f6);\n}\n\n.field-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.field-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.field-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.badge[_ngcontent-%COMP%] {\n    padding: 3px 10px;\n    border-radius: 6px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.badge.type[_ngcontent-%COMP%] {\n    background: var(--type-badge, #e5e7eb);\n    color: var(--text-secondary, #6b7280);\n}\n\n.badge.secret[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    color: #b45309;\n}\n\n.badge.secret[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 3px;\n}\n\n.badge.required[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n    color: #b91c1c;\n}\n\n.field-description[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin: 10px 0 0 0;\n    line-height: 1.5;\n}\n\n.no-fields[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    background: var(--field-background, #f9fafb);\n    border-radius: 10px;\n    color: var(--text-secondary, #9ca3af);\n    font-size: 13px;\n}\n\n.no-fields[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color, #6366f1);\n}\n\n.validation-endpoint[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 14px 18px;\n    background: var(--endpoint-background, #f9fafb);\n    border-radius: 10px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;\n    border: 1px solid var(--border-color, #e5e7eb);\n}\n\n.validation-endpoint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color, #6366f1);\n}\n\n.detail-quick-actions[_ngcontent-%COMP%] {\n    margin-top: 24px;\n    padding-top: 24px;\n    border-top: 1px solid var(--border-color, #f3f4f6);\n}\n\n\n\n.no-selection[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    text-align: center;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    padding: 48px;\n}\n\n.no-selection-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    border-radius: 20px;\n    margin-bottom: 24px;\n}\n\n.no-selection-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: var(--accent-color, #6366f1);\n}\n\n.no-selection[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\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: 14px;\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: 60px 24px;\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 72px;\n    height: 72px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    border-radius: 18px;\n    margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: var(--accent-color, #6366f1);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\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    font-size: 14px;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n    color: var(--accent-hover, #4f46e5);\n}\n\n\n\n@media (max-width: 1024px) {\n    .types-layout[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .types-list[_ngcontent-%COMP%] {\n        max-height: 400px;\n    }\n}\n\n@media (max-width: 768px) {\n    .types-container[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .types-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n\n    .toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .toolbar-left[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .search-container[_ngcontent-%COMP%] {\n        min-width: 100%;\n    }\n\n    .filter-select[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .toolbar-right[_ngcontent-%COMP%] {\n        justify-content: space-between;\n    }\n\n    .detail-stats[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n}"], changeDetection: 0 });
+            i0.ɵɵconditional(!ctx.isLoading ? 2 : -1);
+        } }, dependencies: [i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i3.LoadingComponent, i4.CredentialTypeEditPanelComponent, i5.SlicePipe, i5.KeyValuePipe], styles: [".types-container[_ngcontent-%COMP%] {\n    height: 100%;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n    background: var(--page-background, #f8fafc);\n}\n\n\n\n.types-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 24px;\n    flex-wrap: wrap;\n    gap: 16px;\n}\n\n.header-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.types-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    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\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}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 10px;\n    font-size: 14px;\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 16px rgba(99, 102, 241, 0.4);\n}\n\n.btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 13px;\n}\n\n\n\n.toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    background: var(--card-background, #ffffff);\n    padding: 16px;\n    border-radius: 12px;\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-wrap: wrap;\n    flex: 1;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.search-container[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    background: var(--input-background, #f9fafb);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    padding: 8px 12px;\n    min-width: 240px;\n    position: relative;\n}\n\n.search-container[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--text-secondary, #6b7280);\n    margin-right: 8px;\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    border: none;\n    background: transparent;\n    outline: none;\n    flex: 1;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\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    background: var(--border-color, #e5e7eb);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    font-size: 10px;\n}\n\n.search-clear[_ngcontent-%COMP%]:hover {\n    background: var(--text-secondary, #6b7280);\n    color: white;\n}\n\n.filter-select[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--input-background, #ffffff);\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    cursor: pointer;\n    min-width: 160px;\n}\n\n.results-info[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    white-space: nowrap;\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    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--button-background, #ffffff);\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(--button-hover, #f3f4f6);\n    color: var(--accent-color, #6366f1);\n}\n\n\n\n.types-layout[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 420px 1fr;\n    flex: 1;\n    min-height: 0;\n    gap: 20px;\n}\n\n\n\n.types-list[_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-y: auto;\n    padding: 16px;\n}\n\n.category-section[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.category-section[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    color: var(--text-secondary, #6b7280);\n    letter-spacing: 0.5px;\n    border-left: 3px solid var(--accent-color, #6366f1);\n    background: var(--header-background, #f9fafb);\n    border-radius: 0 8px 8px 0;\n    margin-bottom: 8px;\n}\n\n.category-header[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.category-header[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n    background: white;\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.type-items[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.type-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 14px;\n    background: var(--item-background, #ffffff);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    border: 2px solid transparent;\n    position: relative;\n}\n\n.type-item[_ngcontent-%COMP%]:hover {\n    background: var(--item-hover, #f8fafc);\n    border-color: var(--border-color, #e5e7eb);\n}\n\n.type-item.selected[_ngcontent-%COMP%] {\n    background: linear-gradient(to right, rgba(99, 102, 241, 0.05), white);\n    border-color: var(--accent-color, #6366f1);\n}\n\n.type-icon[_ngcontent-%COMP%] {\n    width: 42px;\n    height: 42px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.type-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.type-info[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.type-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-secondary, #9ca3af);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-meta[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    margin-top: 6px;\n}\n\n.meta-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 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.meta-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 9px;\n}\n\n.meta-badge.active[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.meta-badge.warning[_ngcontent-%COMP%] {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.type-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    margin-right: 8px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.type-item[_ngcontent-%COMP%]:hover   .type-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    border: none;\n    background: var(--input-background, #f3f4f6);\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 12px;\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}\n\n.arrow[_ngcontent-%COMP%] {\n    color: var(--text-tertiary, #d1d5db);\n    font-size: 12px;\n}\n\n\n\n.type-detail[_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-y: auto;\n}\n\n.detail-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 24px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-icon[_ngcontent-%COMP%] {\n    width: 60px;\n    height: 60px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 14px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.detail-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 26px;\n}\n\n.detail-title[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.detail-title[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.category-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 8px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.category-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n}\n\n.detail-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--button-background, #f3f4f6);\n    border-radius: 8px;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    transition: all 0.2s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n    background: var(--button-hover, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n.detail-body[_ngcontent-%COMP%] {\n    padding: 24px;\n}\n\n\n\n.detail-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-stat[_ngcontent-%COMP%] {\n    flex: 1;\n    text-align: center;\n    padding: 16px;\n    background: var(--stat-background, #f9fafb);\n    border-radius: 12px;\n}\n\n.detail-stat[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\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.detail-stat.active[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);\n}\n\n.detail-stat.active[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    color: #059669;\n}\n\n.detail-stat.warning[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);\n}\n\n.detail-stat.warning[_ngcontent-%COMP%]   .stat-value[_ngcontent-%COMP%] {\n    color: #d97706;\n}\n\n.description[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    line-height: 1.6;\n    margin: 0 0 24px 0;\n    padding: 16px;\n    background: var(--description-background, #f9fafb);\n    border-radius: 10px;\n}\n\n.schema-section[_ngcontent-%COMP%], \n.validation-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.schema-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%], \n.validation-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 16px 0;\n}\n\n.schema-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%], \n.validation-section[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color, #6366f1);\n}\n\n.field-list[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item[_ngcontent-%COMP%] {\n    padding: 16px;\n    background: var(--field-background, #f9fafb);\n    border-radius: 10px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    transition: all 0.2s ease;\n}\n\n.field-item[_ngcontent-%COMP%]:hover {\n    border-color: var(--accent-color, #6366f1);\n    background: var(--field-hover, #f3f4f6);\n}\n\n.field-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.field-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.field-badges[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.badge[_ngcontent-%COMP%] {\n    padding: 3px 10px;\n    border-radius: 6px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.badge.type[_ngcontent-%COMP%] {\n    background: var(--type-badge, #e5e7eb);\n    color: var(--text-secondary, #6b7280);\n}\n\n.badge.secret[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    color: #b45309;\n}\n\n.badge.secret[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    margin-right: 3px;\n}\n\n.badge.required[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n    color: #b91c1c;\n}\n\n.field-description[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin: 10px 0 0 0;\n    line-height: 1.5;\n}\n\n.no-fields[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    background: var(--field-background, #f9fafb);\n    border-radius: 10px;\n    color: var(--text-secondary, #9ca3af);\n    font-size: 13px;\n}\n\n.no-fields[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color, #6366f1);\n}\n\n.validation-endpoint[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 14px 18px;\n    background: var(--endpoint-background, #f9fafb);\n    border-radius: 10px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;\n    border: 1px solid var(--border-color, #e5e7eb);\n}\n\n.validation-endpoint[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--accent-color, #6366f1);\n}\n\n.detail-quick-actions[_ngcontent-%COMP%] {\n    margin-top: 24px;\n    padding-top: 24px;\n    border-top: 1px solid var(--border-color, #f3f4f6);\n}\n\n\n\n.no-selection[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    text-align: center;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    padding: 48px;\n}\n\n.no-selection-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    border-radius: 20px;\n    margin-bottom: 24px;\n}\n\n.no-selection-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: var(--accent-color, #6366f1);\n}\n\n.no-selection[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\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: 14px;\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: 60px 24px;\n    text-align: center;\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 72px;\n    height: 72px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    border-radius: 18px;\n    margin-bottom: 20px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 32px;\n    color: var(--accent-color, #6366f1);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 700;\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    font-size: 14px;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n    color: var(--accent-hover, #4f46e5);\n}\n\n\n\n@media (max-width: 1024px) {\n    .types-layout[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n    }\n\n    .types-list[_ngcontent-%COMP%] {\n        max-height: 400px;\n    }\n}\n\n@media (max-width: 768px) {\n    .types-container[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .types-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n\n    .toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .toolbar-left[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n\n    .search-container[_ngcontent-%COMP%] {\n        min-width: 100%;\n    }\n\n    .filter-select[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .toolbar-right[_ngcontent-%COMP%] {\n        justify-content: space-between;\n    }\n\n    .detail-stats[_ngcontent-%COMP%] {\n        flex-direction: column;\n    }\n}"], changeDetection: 0 });
 };
 CredentialsTypesResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'CredentialsTypesResource')
@@ -859,10 +863,10 @@ CredentialsTypesResourceComponent = __decorate([
 export { CredentialsTypesResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CredentialsTypesResourceComponent, [{
         type: Component,
-        args: [{ selector: 'mj-credentials-types-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"types-container\">\n    <mj-loading *ngIf=\"isLoading\" text=\"Loading credential types...\"></mj-loading>\n\n    <ng-container *ngIf=\"!isLoading\">\n        <!-- Header -->\n        <div class=\"types-header\">\n            <div class=\"header-info\">\n                <h2 class=\"types-title\">Credential Types</h2>\n                <div class=\"header-stats\">\n                    <span class=\"stat-item\">\n                        <i class=\"fa-solid fa-shapes\"></i>\n                        {{types.length}} types\n                    </span>\n                    <span class=\"stat-item\">\n                        <i class=\"fa-solid fa-folder\"></i>\n                        {{categories.length}} categories\n                    </span>\n                    <span class=\"stat-item\">\n                        <i class=\"fa-solid fa-key\"></i>\n                        {{getTotalCredentialCount()}} credentials\n                    </span>\n                </div>\n            </div>\n            <div class=\"header-actions\">\n                <button class=\"btn-primary\" *ngIf=\"UserCanCreate\" (click)=\"createNewType()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    <span>New Type</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 types...\"\n                        [value]=\"searchText\"\n                        (input)=\"onSearchChange($any($event.target).value)\"\n                    />\n                    <button class=\"search-clear\" *ngIf=\"searchText\" (click)=\"onSearchChange('')\">\n                        <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                </div>\n\n                <select\n                    class=\"filter-select\"\n                    [value]=\"selectedCategoryFilter\"\n                    (change)=\"onCategoryFilterChange($any($event.target).value)\"\n                >\n                    <option value=\"\">All Categories</option>\n                    <option *ngFor=\"let cat of categories\" [value]=\"cat\">{{cat}}</option>\n                </select>\n            </div>\n\n            <div class=\"toolbar-right\">\n                <div class=\"results-info\">\n                    {{filteredTypes.length}} of {{types.length}} types\n                </div>\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=\"types-layout\">\n            <!-- Types List -->\n            <div class=\"types-list\">\n                <ng-container *ngFor=\"let entry of getTypesByCategory() | keyvalue\">\n                    <div class=\"category-section\">\n                        <div class=\"category-header\" [style.borderLeftColor]=\"getCategoryColor(entry.key)\">\n                            <i [class]=\"getCategoryIcon(entry.key)\" [style.color]=\"getCategoryColor(entry.key)\"></i>\n                            <span class=\"category-name\">{{entry.key}}</span>\n                            <span class=\"count\">{{entry.value.length}}</span>\n                        </div>\n\n                        <div class=\"type-items\">\n                            <div\n                                class=\"type-item\"\n                                *ngFor=\"let type of entry.value\"\n                                [class.selected]=\"selectedType?.ID === type.ID\"\n                                (click)=\"selectType(type)\"\n                            >\n                                <div class=\"type-icon\" [style.backgroundColor]=\"getCategoryColor(type.Category) + '15'\" [style.color]=\"getCategoryColor(type.Category)\">\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-description\" *ngIf=\"type.Description\">\n                                        {{type.Description | slice:0:60}}{{type.Description.length > 60 ? '...' : ''}}\n                                    </div>\n                                    <div class=\"type-meta\">\n                                        <span class=\"meta-badge\" *ngIf=\"type.credentialCount > 0\">\n                                            <i class=\"fa-solid fa-key\"></i>\n                                            {{type.credentialCount}}\n                                        </span>\n                                        <span class=\"meta-badge active\" *ngIf=\"type.activeCount > 0\">\n                                            <i class=\"fa-solid fa-check\"></i>\n                                            {{type.activeCount}} active\n                                        </span>\n                                        <span class=\"meta-badge warning\" *ngIf=\"type.expiringCount > 0\">\n                                            <i class=\"fa-solid fa-clock\"></i>\n                                            {{type.expiringCount}} expiring\n                                        </span>\n                                    </div>\n                                </div>\n                                <div class=\"type-actions\">\n                                    <button\n                                        class=\"action-btn\"\n                                        *ngIf=\"UserCanCreateCredential\"\n                                        (click)=\"createCredentialForType(type, $event)\"\n                                        title=\"Add Credential\"\n                                    >\n                                        <i class=\"fa-solid fa-plus\"></i>\n                                    </button>\n                                    <button\n                                        class=\"action-btn\"\n                                        *ngIf=\"UserCanUpdate\"\n                                        (click)=\"editType(type, $event)\"\n                                        title=\"Edit Type\"\n                                    >\n                                        <i class=\"fa-solid fa-pen\"></i>\n                                    </button>\n                                    <button\n                                        class=\"action-btn danger\"\n                                        *ngIf=\"UserCanDelete && type.credentialCount === 0\"\n                                        (click)=\"deleteType(type, $event)\"\n                                        title=\"Delete Type\"\n                                    >\n                                        <i class=\"fa-solid fa-trash\"></i>\n                                    </button>\n                                </div>\n                                <i class=\"fa-solid fa-chevron-right arrow\"></i>\n                            </div>\n                        </div>\n                    </div>\n                </ng-container>\n\n                <div class=\"empty-state\" *ngIf=\"filteredTypes.length === 0\">\n                    <div class=\"empty-icon\">\n                        <i class=\"fa-solid fa-cubes\"></i>\n                    </div>\n                    <h3>No Credential Types Found</h3>\n                    <p *ngIf=\"searchText || selectedCategoryFilter\">\n                        No types match your current filters.\n                        <button class=\"btn-link\" (click)=\"clearFilters()\">Clear filters</button>\n                    </p>\n                    <p *ngIf=\"!searchText && !selectedCategoryFilter\">\n                        Get started by creating your first credential type.\n                    </p>\n                    <button class=\"btn-primary\" *ngIf=\"UserCanCreate && !searchText && !selectedCategoryFilter\" (click)=\"createNewType()\">\n                        <i class=\"fa-solid fa-plus\"></i>\n                        Create Type\n                    </button>\n                </div>\n            </div>\n\n            <!-- Type Detail -->\n            <div class=\"type-detail\" *ngIf=\"selectedType\">\n                <div class=\"detail-header\">\n                    <div class=\"detail-icon\" [style.backgroundColor]=\"getCategoryColor(selectedType.Category) + '15'\" [style.color]=\"getCategoryColor(selectedType.Category)\">\n                        <i [class]=\"selectedType.IconClass || 'fa-solid fa-key'\"></i>\n                    </div>\n                    <div class=\"detail-title\">\n                        <h2>{{selectedType.Name}}</h2>\n                        <span class=\"category-badge\" [style.backgroundColor]=\"getCategoryColor(selectedType.Category) + '20'\" [style.color]=\"getCategoryColor(selectedType.Category)\">\n                            <i [class]=\"getCategoryIcon(selectedType.Category)\"></i>\n                            {{selectedType.Category}}\n                        </span>\n                    </div>\n                    <div class=\"detail-actions\">\n                        <button class=\"action-btn\" *ngIf=\"UserCanUpdate\" (click)=\"editType(selectedType)\" title=\"Edit\">\n                            <i class=\"fa-solid fa-pen\"></i>\n                        </button>\n                        <button class=\"close-btn\" (click)=\"closeDetail()\">\n                            <i class=\"fa-solid fa-times\"></i>\n                        </button>\n                    </div>\n                </div>\n\n                <div class=\"detail-body\">\n                    <!-- Stats Row -->\n                    <div class=\"detail-stats\">\n                        <div class=\"detail-stat\">\n                            <div class=\"stat-value\">{{selectedType.credentialCount}}</div>\n                            <div class=\"stat-label\">Credentials</div>\n                        </div>\n                        <div class=\"detail-stat active\">\n                            <div class=\"stat-value\">{{selectedType.activeCount}}</div>\n                            <div class=\"stat-label\">Active</div>\n                        </div>\n                        <div class=\"detail-stat warning\" *ngIf=\"selectedType.expiringCount > 0\">\n                            <div class=\"stat-value\">{{selectedType.expiringCount}}</div>\n                            <div class=\"stat-label\">Expiring</div>\n                        </div>\n                    </div>\n\n                    <p class=\"description\" *ngIf=\"selectedType.Description\">\n                        {{selectedType.Description}}\n                    </p>\n\n                    <div class=\"schema-section\">\n                        <h3>\n                            <i class=\"fa-solid fa-list-check\"></i>\n                            Field Schema\n                        </h3>\n                        <div class=\"field-list\" *ngIf=\"schemaProperties.length > 0\">\n                            <div class=\"field-item\" *ngFor=\"let prop of schemaProperties\">\n                                <div class=\"field-header\">\n                                    <span class=\"field-name\">{{prop.title}}</span>\n                                    <span class=\"field-badges\">\n                                        <span class=\"badge type\">{{prop.type}}</span>\n                                        <span class=\"badge secret\" *ngIf=\"prop.isSecret\">\n                                            <i class=\"fa-solid fa-lock\"></i> Secret\n                                        </span>\n                                        <span class=\"badge required\" *ngIf=\"prop.required\">Required</span>\n                                    </span>\n                                </div>\n                                <p class=\"field-description\" *ngIf=\"prop.description\">\n                                    {{prop.description}}\n                                </p>\n                            </div>\n                        </div>\n                        <div class=\"no-fields\" *ngIf=\"schemaProperties.length === 0\">\n                            <i class=\"fa-solid fa-info-circle\"></i>\n                            <span>No fields defined in schema</span>\n                        </div>\n                    </div>\n\n                    <div class=\"validation-section\" *ngIf=\"selectedType.ValidationEndpoint\">\n                        <h3>\n                            <i class=\"fa-solid fa-check-circle\"></i>\n                            Validation\n                        </h3>\n                        <div class=\"validation-endpoint\">\n                            <i class=\"fa-solid fa-link\"></i>\n                            <span>{{selectedType.ValidationEndpoint}}</span>\n                        </div>\n                    </div>\n\n                    <!-- Quick Actions -->\n                    <div class=\"detail-quick-actions\" *ngIf=\"UserCanCreateCredential\">\n                        <button class=\"btn-primary\" (click)=\"createCredentialForType(selectedType)\">\n                            <i class=\"fa-solid fa-plus\"></i>\n                            Create Credential\n                        </button>\n                    </div>\n                </div>\n            </div>\n\n            <!-- No Selection -->\n            <div class=\"no-selection\" *ngIf=\"!selectedType && filteredTypes.length > 0\">\n                <div class=\"no-selection-icon\">\n                    <i class=\"fa-solid fa-hand-pointer\"></i>\n                </div>\n                <h3>Select a Credential Type</h3>\n                <p>Click on a credential type to view its details and field schema</p>\n            </div>\n        </div>\n    </ng-container>\n</div>\n\n<!-- Type Edit Panel -->\n<mj-credential-type-edit-panel\n    #typeEditPanel\n    (saved)=\"onTypeSaved($any($event))\"\n    (deleted)=\"onTypeDeleted($any($event))\"\n></mj-credential-type-edit-panel>\n", styles: [".types-container {\n    height: 100%;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n    background: var(--page-background, #f8fafc);\n}\n\n/* Header */\n.types-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 24px;\n    flex-wrap: wrap;\n    gap: 16px;\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.types-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    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\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}\n\n.header-actions {\n    display: flex;\n    gap: 12px;\n}\n\n.btn-primary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 10px;\n    font-size: 14px;\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 16px rgba(99, 102, 241, 0.4);\n}\n\n.btn-primary i {\n    font-size: 13px;\n}\n\n/* Toolbar */\n.toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    background: var(--card-background, #ffffff);\n    padding: 16px;\n    border-radius: 12px;\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-wrap: wrap;\n    flex: 1;\n}\n\n.toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.search-container {\n    display: flex;\n    align-items: center;\n    background: var(--input-background, #f9fafb);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    padding: 8px 12px;\n    min-width: 240px;\n    position: relative;\n}\n\n.search-container i {\n    color: var(--text-secondary, #6b7280);\n    margin-right: 8px;\n}\n\n.search-container input {\n    border: none;\n    background: transparent;\n    outline: none;\n    flex: 1;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\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    background: var(--border-color, #e5e7eb);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    font-size: 10px;\n}\n\n.search-clear:hover {\n    background: var(--text-secondary, #6b7280);\n    color: white;\n}\n\n.filter-select {\n    padding: 8px 12px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--input-background, #ffffff);\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    cursor: pointer;\n    min-width: 160px;\n}\n\n.results-info {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    white-space: nowrap;\n}\n\n.btn-icon {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--button-background, #ffffff);\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon:hover {\n    background: var(--button-hover, #f3f4f6);\n    color: var(--accent-color, #6366f1);\n}\n\n/* Layout */\n.types-layout {\n    display: grid;\n    grid-template-columns: 420px 1fr;\n    flex: 1;\n    min-height: 0;\n    gap: 20px;\n}\n\n/* Types List */\n.types-list {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow-y: auto;\n    padding: 16px;\n}\n\n.category-section {\n    margin-bottom: 20px;\n}\n\n.category-section:last-child {\n    margin-bottom: 0;\n}\n\n.category-header {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    color: var(--text-secondary, #6b7280);\n    letter-spacing: 0.5px;\n    border-left: 3px solid var(--accent-color, #6366f1);\n    background: var(--header-background, #f9fafb);\n    border-radius: 0 8px 8px 0;\n    margin-bottom: 8px;\n}\n\n.category-header i {\n    font-size: 14px;\n}\n\n.category-name {\n    flex: 1;\n}\n\n.category-header .count {\n    background: white;\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.type-items {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.type-item {\n    display: flex;\n    align-items: center;\n    padding: 12px 14px;\n    background: var(--item-background, #ffffff);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    border: 2px solid transparent;\n    position: relative;\n}\n\n.type-item:hover {\n    background: var(--item-hover, #f8fafc);\n    border-color: var(--border-color, #e5e7eb);\n}\n\n.type-item.selected {\n    background: linear-gradient(to right, rgba(99, 102, 241, 0.05), white);\n    border-color: var(--accent-color, #6366f1);\n}\n\n.type-icon {\n    width: 42px;\n    height: 42px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.type-icon i {\n    font-size: 16px;\n}\n\n.type-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.type-description {\n    font-size: 12px;\n    color: var(--text-secondary, #9ca3af);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-meta {\n    display: flex;\n    gap: 8px;\n    margin-top: 6px;\n}\n\n.meta-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 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.meta-badge i {\n    font-size: 9px;\n}\n\n.meta-badge.active {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.meta-badge.warning {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.type-actions {\n    display: flex;\n    gap: 4px;\n    margin-right: 8px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.type-item:hover .type-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    border: none;\n    background: var(--input-background, #f3f4f6);\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 12px;\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}\n\n.arrow {\n    color: var(--text-tertiary, #d1d5db);\n    font-size: 12px;\n}\n\n/* Type Detail */\n.type-detail {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow-y: auto;\n}\n\n.detail-header {\n    display: flex;\n    align-items: center;\n    padding: 24px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-icon {\n    width: 60px;\n    height: 60px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 14px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.detail-icon i {\n    font-size: 26px;\n}\n\n.detail-title {\n    flex: 1;\n}\n\n.detail-title h2 {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.category-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 8px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.category-badge i {\n    font-size: 11px;\n}\n\n.detail-actions {\n    display: flex;\n    gap: 8px;\n}\n\n.close-btn {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--button-background, #f3f4f6);\n    border-radius: 8px;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    transition: all 0.2s ease;\n}\n\n.close-btn:hover {\n    background: var(--button-hover, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n.detail-body {\n    padding: 24px;\n}\n\n/* Detail Stats */\n.detail-stats {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-stat {\n    flex: 1;\n    text-align: center;\n    padding: 16px;\n    background: var(--stat-background, #f9fafb);\n    border-radius: 12px;\n}\n\n.detail-stat .stat-value {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n}\n\n.detail-stat .stat-label {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 4px;\n}\n\n.detail-stat.active {\n    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);\n}\n\n.detail-stat.active .stat-value {\n    color: #059669;\n}\n\n.detail-stat.warning {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);\n}\n\n.detail-stat.warning .stat-value {\n    color: #d97706;\n}\n\n.description {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    line-height: 1.6;\n    margin: 0 0 24px 0;\n    padding: 16px;\n    background: var(--description-background, #f9fafb);\n    border-radius: 10px;\n}\n\n.schema-section,\n.validation-section {\n    margin-bottom: 24px;\n}\n\n.schema-section h3,\n.validation-section h3 {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 16px 0;\n}\n\n.schema-section h3 i,\n.validation-section h3 i {\n    color: var(--accent-color, #6366f1);\n}\n\n.field-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item {\n    padding: 16px;\n    background: var(--field-background, #f9fafb);\n    border-radius: 10px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    transition: all 0.2s ease;\n}\n\n.field-item:hover {\n    border-color: var(--accent-color, #6366f1);\n    background: var(--field-hover, #f3f4f6);\n}\n\n.field-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.field-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.field-badges {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.badge {\n    padding: 3px 10px;\n    border-radius: 6px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.badge.type {\n    background: var(--type-badge, #e5e7eb);\n    color: var(--text-secondary, #6b7280);\n}\n\n.badge.secret {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    color: #b45309;\n}\n\n.badge.secret i {\n    margin-right: 3px;\n}\n\n.badge.required {\n    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n    color: #b91c1c;\n}\n\n.field-description {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin: 10px 0 0 0;\n    line-height: 1.5;\n}\n\n.no-fields {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    background: var(--field-background, #f9fafb);\n    border-radius: 10px;\n    color: var(--text-secondary, #9ca3af);\n    font-size: 13px;\n}\n\n.no-fields i {\n    color: var(--accent-color, #6366f1);\n}\n\n.validation-endpoint {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 14px 18px;\n    background: var(--endpoint-background, #f9fafb);\n    border-radius: 10px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;\n    border: 1px solid var(--border-color, #e5e7eb);\n}\n\n.validation-endpoint i {\n    color: var(--accent-color, #6366f1);\n}\n\n.detail-quick-actions {\n    margin-top: 24px;\n    padding-top: 24px;\n    border-top: 1px solid var(--border-color, #f3f4f6);\n}\n\n/* No Selection */\n.no-selection {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    text-align: center;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    padding: 48px;\n}\n\n.no-selection-icon {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    border-radius: 20px;\n    margin-bottom: 24px;\n}\n\n.no-selection-icon i {\n    font-size: 32px;\n    color: var(--accent-color, #6366f1);\n}\n\n.no-selection h3 {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.no-selection p {\n    font-size: 14px;\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: 60px 24px;\n    text-align: center;\n}\n\n.empty-icon {\n    width: 72px;\n    height: 72px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    border-radius: 18px;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 32px;\n    color: var(--accent-color, #6366f1);\n}\n\n.empty-state h3 {\n    font-size: 18px;\n    font-weight: 700;\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    font-size: 14px;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.btn-link:hover {\n    color: var(--accent-hover, #4f46e5);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .types-layout {\n        grid-template-columns: 1fr;\n    }\n\n    .types-list {\n        max-height: 400px;\n    }\n}\n\n@media (max-width: 768px) {\n    .types-container {\n        padding: 16px;\n    }\n\n    .types-header {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n\n    .toolbar {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .toolbar-left {\n        flex-direction: column;\n    }\n\n    .search-container {\n        min-width: 100%;\n    }\n\n    .filter-select {\n        width: 100%;\n    }\n\n    .toolbar-right {\n        justify-content: space-between;\n    }\n\n    .detail-stats {\n        flex-direction: column;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-credentials-types-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"types-container\">\n  @if (isLoading) {\n    <mj-loading text=\"Loading credential types...\"></mj-loading>\n  }\n\n  @if (!isLoading) {\n    <!-- Header -->\n    <div class=\"types-header\">\n      <div class=\"header-info\">\n        <h2 class=\"types-title\">Credential Types</h2>\n        <div class=\"header-stats\">\n          <span class=\"stat-item\">\n            <i class=\"fa-solid fa-shapes\"></i>\n            {{types.length}} types\n          </span>\n          <span class=\"stat-item\">\n            <i class=\"fa-solid fa-folder\"></i>\n            {{categories.length}} categories\n          </span>\n          <span class=\"stat-item\">\n            <i class=\"fa-solid fa-key\"></i>\n            {{getTotalCredentialCount()}} credentials\n          </span>\n        </div>\n      </div>\n      <div class=\"header-actions\">\n        @if (UserCanCreate) {\n          <button class=\"btn-primary\" (click)=\"createNewType()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>New Type</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 types...\"\n            [value]=\"searchText\"\n            (input)=\"onSearchChange($any($event.target).value)\"\n            />\n          @if (searchText) {\n            <button class=\"search-clear\" (click)=\"onSearchChange('')\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n        <select\n          class=\"filter-select\"\n          [value]=\"selectedCategoryFilter\"\n          (change)=\"onCategoryFilterChange($any($event.target).value)\"\n          >\n          <option value=\"\">All Categories</option>\n          @for (cat of categories; track cat) {\n            <option [value]=\"cat\">{{cat}}</option>\n          }\n        </select>\n      </div>\n      <div class=\"toolbar-right\">\n        <div class=\"results-info\">\n          {{filteredTypes.length}} of {{types.length}} types\n        </div>\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=\"types-layout\">\n      <!-- Types List -->\n      <div class=\"types-list\">\n        @for (entry of getTypesByCategory() | keyvalue; track entry) {\n          <div class=\"category-section\">\n            <div class=\"category-header\" [style.borderLeftColor]=\"getCategoryColor(entry.key)\">\n              <i [class]=\"getCategoryIcon(entry.key)\" [style.color]=\"getCategoryColor(entry.key)\"></i>\n              <span class=\"category-name\">{{entry.key}}</span>\n              <span class=\"count\">{{entry.value.length}}</span>\n            </div>\n            <div class=\"type-items\">\n              @for (type of entry.value; track type) {\n                <div\n                  class=\"type-item\"\n                  [class.selected]=\"selectedType?.ID === type.ID\"\n                  (click)=\"selectType(type)\"\n                  >\n                  <div class=\"type-icon\" [style.backgroundColor]=\"getCategoryColor(type.Category) + '15'\" [style.color]=\"getCategoryColor(type.Category)\">\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-description\">\n                        {{type.Description | slice:0:60}}{{type.Description.length > 60 ? '...' : ''}}\n                      </div>\n                    }\n                    <div class=\"type-meta\">\n                      @if (type.credentialCount > 0) {\n                        <span class=\"meta-badge\">\n                          <i class=\"fa-solid fa-key\"></i>\n                          {{type.credentialCount}}\n                        </span>\n                      }\n                      @if (type.activeCount > 0) {\n                        <span class=\"meta-badge active\">\n                          <i class=\"fa-solid fa-check\"></i>\n                          {{type.activeCount}} active\n                        </span>\n                      }\n                      @if (type.expiringCount > 0) {\n                        <span class=\"meta-badge warning\">\n                          <i class=\"fa-solid fa-clock\"></i>\n                          {{type.expiringCount}} expiring\n                        </span>\n                      }\n                    </div>\n                  </div>\n                  <div class=\"type-actions\">\n                    @if (UserCanCreateCredential) {\n                      <button\n                        class=\"action-btn\"\n                        (click)=\"createCredentialForType(type, $event)\"\n                        title=\"Add Credential\"\n                        >\n                        <i class=\"fa-solid fa-plus\"></i>\n                      </button>\n                    }\n                    @if (UserCanUpdate) {\n                      <button\n                        class=\"action-btn\"\n                        (click)=\"editType(type, $event)\"\n                        title=\"Edit Type\"\n                        >\n                        <i class=\"fa-solid fa-pen\"></i>\n                      </button>\n                    }\n                    @if (UserCanDelete && type.credentialCount === 0) {\n                      <button\n                        class=\"action-btn danger\"\n                        (click)=\"deleteType(type, $event)\"\n                        title=\"Delete Type\"\n                        >\n                        <i class=\"fa-solid fa-trash\"></i>\n                      </button>\n                    }\n                  </div>\n                  <i class=\"fa-solid fa-chevron-right arrow\"></i>\n                </div>\n              }\n            </div>\n          </div>\n        }\n        @if (filteredTypes.length === 0) {\n          <div class=\"empty-state\">\n            <div class=\"empty-icon\">\n              <i class=\"fa-solid fa-cubes\"></i>\n            </div>\n            <h3>No Credential Types Found</h3>\n            @if (searchText || selectedCategoryFilter) {\n              <p>\n                No types match your current filters.\n                <button class=\"btn-link\" (click)=\"clearFilters()\">Clear filters</button>\n              </p>\n            }\n            @if (!searchText && !selectedCategoryFilter) {\n              <p>\n                Get started by creating your first credential type.\n              </p>\n            }\n            @if (UserCanCreate && !searchText && !selectedCategoryFilter) {\n              <button class=\"btn-primary\" (click)=\"createNewType()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                Create Type\n              </button>\n            }\n          </div>\n        }\n      </div>\n      <!-- Type Detail -->\n      @if (selectedType) {\n        <div class=\"type-detail\">\n          <div class=\"detail-header\">\n            <div class=\"detail-icon\" [style.backgroundColor]=\"getCategoryColor(selectedType.Category) + '15'\" [style.color]=\"getCategoryColor(selectedType.Category)\">\n              <i [class]=\"selectedType.IconClass || 'fa-solid fa-key'\"></i>\n            </div>\n            <div class=\"detail-title\">\n              <h2>{{selectedType.Name}}</h2>\n              <span class=\"category-badge\" [style.backgroundColor]=\"getCategoryColor(selectedType.Category) + '20'\" [style.color]=\"getCategoryColor(selectedType.Category)\">\n                <i [class]=\"getCategoryIcon(selectedType.Category)\"></i>\n                {{selectedType.Category}}\n              </span>\n            </div>\n            <div class=\"detail-actions\">\n              @if (UserCanUpdate) {\n                <button class=\"action-btn\" (click)=\"editType(selectedType)\" title=\"Edit\">\n                  <i class=\"fa-solid fa-pen\"></i>\n                </button>\n              }\n              <button class=\"close-btn\" (click)=\"closeDetail()\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            </div>\n          </div>\n          <div class=\"detail-body\">\n            <!-- Stats Row -->\n            <div class=\"detail-stats\">\n              <div class=\"detail-stat\">\n                <div class=\"stat-value\">{{selectedType.credentialCount}}</div>\n                <div class=\"stat-label\">Credentials</div>\n              </div>\n              <div class=\"detail-stat active\">\n                <div class=\"stat-value\">{{selectedType.activeCount}}</div>\n                <div class=\"stat-label\">Active</div>\n              </div>\n              @if (selectedType.expiringCount > 0) {\n                <div class=\"detail-stat warning\">\n                  <div class=\"stat-value\">{{selectedType.expiringCount}}</div>\n                  <div class=\"stat-label\">Expiring</div>\n                </div>\n              }\n            </div>\n            @if (selectedType.Description) {\n              <p class=\"description\">\n                {{selectedType.Description}}\n              </p>\n            }\n            <div class=\"schema-section\">\n              <h3>\n                <i class=\"fa-solid fa-list-check\"></i>\n                Field Schema\n              </h3>\n              @if (schemaProperties.length > 0) {\n                <div class=\"field-list\">\n                  @for (prop of schemaProperties; track prop) {\n                    <div class=\"field-item\">\n                      <div class=\"field-header\">\n                        <span class=\"field-name\">{{prop.title}}</span>\n                        <span class=\"field-badges\">\n                          <span class=\"badge type\">{{prop.type}}</span>\n                          @if (prop.isSecret) {\n                            <span class=\"badge secret\">\n                              <i class=\"fa-solid fa-lock\"></i> Secret\n                            </span>\n                          }\n                          @if (prop.required) {\n                            <span class=\"badge required\">Required</span>\n                          }\n                        </span>\n                      </div>\n                      @if (prop.description) {\n                        <p class=\"field-description\">\n                          {{prop.description}}\n                        </p>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n              @if (schemaProperties.length === 0) {\n                <div class=\"no-fields\">\n                  <i class=\"fa-solid fa-info-circle\"></i>\n                  <span>No fields defined in schema</span>\n                </div>\n              }\n            </div>\n            @if (selectedType.ValidationEndpoint) {\n              <div class=\"validation-section\">\n                <h3>\n                  <i class=\"fa-solid fa-check-circle\"></i>\n                  Validation\n                </h3>\n                <div class=\"validation-endpoint\">\n                  <i class=\"fa-solid fa-link\"></i>\n                  <span>{{selectedType.ValidationEndpoint}}</span>\n                </div>\n              </div>\n            }\n            <!-- Quick Actions -->\n            @if (UserCanCreateCredential) {\n              <div class=\"detail-quick-actions\">\n                <button class=\"btn-primary\" (click)=\"createCredentialForType(selectedType)\">\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      @if (!selectedType && filteredTypes.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 Credential Type</h3>\n          <p>Click on a credential type to view its details and field schema</p>\n        </div>\n      }\n    </div>\n  }\n</div>\n\n<!-- Type Edit Panel -->\n<mj-credential-type-edit-panel\n  #typeEditPanel\n  (saved)=\"onTypeSaved($any($event))\"\n  (deleted)=\"onTypeDeleted($any($event))\"\n></mj-credential-type-edit-panel>\n", styles: [".types-container {\n    height: 100%;\n    overflow: hidden;\n    display: flex;\n    flex-direction: column;\n    padding: 24px;\n    background: var(--page-background, #f8fafc);\n}\n\n/* Header */\n.types-header {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    margin-bottom: 24px;\n    flex-wrap: wrap;\n    gap: 16px;\n}\n\n.header-info {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.types-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    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\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}\n\n.header-actions {\n    display: flex;\n    gap: 12px;\n}\n\n.btn-primary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 10px;\n    font-size: 14px;\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 16px rgba(99, 102, 241, 0.4);\n}\n\n.btn-primary i {\n    font-size: 13px;\n}\n\n/* Toolbar */\n.toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    background: var(--card-background, #ffffff);\n    padding: 16px;\n    border-radius: 12px;\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-wrap: wrap;\n    flex: 1;\n}\n\n.toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.search-container {\n    display: flex;\n    align-items: center;\n    background: var(--input-background, #f9fafb);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    padding: 8px 12px;\n    min-width: 240px;\n    position: relative;\n}\n\n.search-container i {\n    color: var(--text-secondary, #6b7280);\n    margin-right: 8px;\n}\n\n.search-container input {\n    border: none;\n    background: transparent;\n    outline: none;\n    flex: 1;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\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    background: var(--border-color, #e5e7eb);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    font-size: 10px;\n}\n\n.search-clear:hover {\n    background: var(--text-secondary, #6b7280);\n    color: white;\n}\n\n.filter-select {\n    padding: 8px 12px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--input-background, #ffffff);\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    cursor: pointer;\n    min-width: 160px;\n}\n\n.results-info {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    white-space: nowrap;\n}\n\n.btn-icon {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--button-background, #ffffff);\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon:hover {\n    background: var(--button-hover, #f3f4f6);\n    color: var(--accent-color, #6366f1);\n}\n\n/* Layout */\n.types-layout {\n    display: grid;\n    grid-template-columns: 420px 1fr;\n    flex: 1;\n    min-height: 0;\n    gap: 20px;\n}\n\n/* Types List */\n.types-list {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow-y: auto;\n    padding: 16px;\n}\n\n.category-section {\n    margin-bottom: 20px;\n}\n\n.category-section:last-child {\n    margin-bottom: 0;\n}\n\n.category-header {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 10px 12px;\n    font-size: 12px;\n    font-weight: 700;\n    text-transform: uppercase;\n    color: var(--text-secondary, #6b7280);\n    letter-spacing: 0.5px;\n    border-left: 3px solid var(--accent-color, #6366f1);\n    background: var(--header-background, #f9fafb);\n    border-radius: 0 8px 8px 0;\n    margin-bottom: 8px;\n}\n\n.category-header i {\n    font-size: 14px;\n}\n\n.category-name {\n    flex: 1;\n}\n\n.category-header .count {\n    background: white;\n    padding: 2px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n.type-items {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.type-item {\n    display: flex;\n    align-items: center;\n    padding: 12px 14px;\n    background: var(--item-background, #ffffff);\n    border-radius: 10px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    border: 2px solid transparent;\n    position: relative;\n}\n\n.type-item:hover {\n    background: var(--item-hover, #f8fafc);\n    border-color: var(--border-color, #e5e7eb);\n}\n\n.type-item.selected {\n    background: linear-gradient(to right, rgba(99, 102, 241, 0.05), white);\n    border-color: var(--accent-color, #6366f1);\n}\n\n.type-icon {\n    width: 42px;\n    height: 42px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 10px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.type-icon i {\n    font-size: 16px;\n}\n\n.type-info {\n    flex: 1;\n    min-width: 0;\n}\n\n.type-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.type-description {\n    font-size: 12px;\n    color: var(--text-secondary, #9ca3af);\n    margin-top: 2px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.type-meta {\n    display: flex;\n    gap: 8px;\n    margin-top: 6px;\n}\n\n.meta-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 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.meta-badge i {\n    font-size: 9px;\n}\n\n.meta-badge.active {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.meta-badge.warning {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.type-actions {\n    display: flex;\n    gap: 4px;\n    margin-right: 8px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.type-item:hover .type-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    border: none;\n    background: var(--input-background, #f3f4f6);\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 12px;\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}\n\n.arrow {\n    color: var(--text-tertiary, #d1d5db);\n    font-size: 12px;\n}\n\n/* Type Detail */\n.type-detail {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow-y: auto;\n}\n\n.detail-header {\n    display: flex;\n    align-items: center;\n    padding: 24px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-icon {\n    width: 60px;\n    height: 60px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 14px;\n    margin-right: 16px;\n    flex-shrink: 0;\n}\n\n.detail-icon i {\n    font-size: 26px;\n}\n\n.detail-title {\n    flex: 1;\n}\n\n.detail-title h2 {\n    font-size: 22px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.category-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 12px;\n    border-radius: 8px;\n    font-size: 12px;\n    font-weight: 600;\n}\n\n.category-badge i {\n    font-size: 11px;\n}\n\n.detail-actions {\n    display: flex;\n    gap: 8px;\n}\n\n.close-btn {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--button-background, #f3f4f6);\n    border-radius: 8px;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    transition: all 0.2s ease;\n}\n\n.close-btn:hover {\n    background: var(--button-hover, #e5e7eb);\n    color: var(--text-primary, #1f2937);\n}\n\n.detail-body {\n    padding: 24px;\n}\n\n/* Detail Stats */\n.detail-stats {\n    display: flex;\n    gap: 16px;\n    margin-bottom: 24px;\n    padding-bottom: 24px;\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.detail-stat {\n    flex: 1;\n    text-align: center;\n    padding: 16px;\n    background: var(--stat-background, #f9fafb);\n    border-radius: 12px;\n}\n\n.detail-stat .stat-value {\n    font-size: 28px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n}\n\n.detail-stat .stat-label {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\n    margin-top: 4px;\n}\n\n.detail-stat.active {\n    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(5, 150, 105, 0.05) 100%);\n}\n\n.detail-stat.active .stat-value {\n    color: #059669;\n}\n\n.detail-stat.warning {\n    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(217, 119, 6, 0.05) 100%);\n}\n\n.detail-stat.warning .stat-value {\n    color: #d97706;\n}\n\n.description {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    line-height: 1.6;\n    margin: 0 0 24px 0;\n    padding: 16px;\n    background: var(--description-background, #f9fafb);\n    border-radius: 10px;\n}\n\n.schema-section,\n.validation-section {\n    margin-bottom: 24px;\n}\n\n.schema-section h3,\n.validation-section h3 {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 14px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 16px 0;\n}\n\n.schema-section h3 i,\n.validation-section h3 i {\n    color: var(--accent-color, #6366f1);\n}\n\n.field-list {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.field-item {\n    padding: 16px;\n    background: var(--field-background, #f9fafb);\n    border-radius: 10px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    transition: all 0.2s ease;\n}\n\n.field-item:hover {\n    border-color: var(--accent-color, #6366f1);\n    background: var(--field-hover, #f3f4f6);\n}\n\n.field-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    flex-wrap: wrap;\n    gap: 8px;\n}\n\n.field-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.field-badges {\n    display: flex;\n    gap: 6px;\n    flex-wrap: wrap;\n}\n\n.badge {\n    padding: 3px 10px;\n    border-radius: 6px;\n    font-size: 10px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.badge.type {\n    background: var(--type-badge, #e5e7eb);\n    color: var(--text-secondary, #6b7280);\n}\n\n.badge.secret {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    color: #b45309;\n}\n\n.badge.secret i {\n    margin-right: 3px;\n}\n\n.badge.required {\n    background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);\n    color: #b91c1c;\n}\n\n.field-description {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    margin: 10px 0 0 0;\n    line-height: 1.5;\n}\n\n.no-fields {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 16px;\n    background: var(--field-background, #f9fafb);\n    border-radius: 10px;\n    color: var(--text-secondary, #9ca3af);\n    font-size: 13px;\n}\n\n.no-fields i {\n    color: var(--accent-color, #6366f1);\n}\n\n.validation-endpoint {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 14px 18px;\n    background: var(--endpoint-background, #f9fafb);\n    border-radius: 10px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    font-family: 'SF Mono', 'Monaco', 'Inconsolata', monospace;\n    border: 1px solid var(--border-color, #e5e7eb);\n}\n\n.validation-endpoint i {\n    color: var(--accent-color, #6366f1);\n}\n\n.detail-quick-actions {\n    margin-top: 24px;\n    padding-top: 24px;\n    border-top: 1px solid var(--border-color, #f3f4f6);\n}\n\n/* No Selection */\n.no-selection {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    text-align: center;\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    padding: 48px;\n}\n\n.no-selection-icon {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    border-radius: 20px;\n    margin-bottom: 24px;\n}\n\n.no-selection-icon i {\n    font-size: 32px;\n    color: var(--accent-color, #6366f1);\n}\n\n.no-selection h3 {\n    font-size: 18px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.no-selection p {\n    font-size: 14px;\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: 60px 24px;\n    text-align: center;\n}\n\n.empty-icon {\n    width: 72px;\n    height: 72px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    border-radius: 18px;\n    margin-bottom: 20px;\n}\n\n.empty-icon i {\n    font-size: 32px;\n    color: var(--accent-color, #6366f1);\n}\n\n.empty-state h3 {\n    font-size: 18px;\n    font-weight: 700;\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    font-size: 14px;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.btn-link:hover {\n    color: var(--accent-hover, #4f46e5);\n}\n\n/* Responsive */\n@media (max-width: 1024px) {\n    .types-layout {\n        grid-template-columns: 1fr;\n    }\n\n    .types-list {\n        max-height: 400px;\n    }\n}\n\n@media (max-width: 768px) {\n    .types-container {\n        padding: 16px;\n    }\n\n    .types-header {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n\n    .toolbar {\n        flex-direction: column;\n        align-items: stretch;\n    }\n\n    .toolbar-left {\n        flex-direction: column;\n    }\n\n    .search-container {\n        min-width: 100%;\n    }\n\n    .filter-select {\n        width: 100%;\n    }\n\n    .toolbar-right {\n        justify-content: space-between;\n    }\n\n    .detail-stats {\n        flex-direction: column;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: i1.NavigationService }], { typeEditPanel: [{
             type: ViewChild,
             args: ['typeEditPanel']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsTypesResourceComponent, { className: "CredentialsTypesResourceComponent", filePath: "src/Credentials/components/credentials-types-resource.component.ts", lineNumber: 35 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsTypesResourceComponent, { className: "CredentialsTypesResourceComponent", filePath: "src/credentials/components/credentials-types-resource.component.ts", lineNumber: 31 }); })();
 //# sourceMappingURL=credentials-types-resource.component.js.map