@memberjunction/ng-dashboards 5.34.1 → 5.35.0

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

@@ -12,610 +12,492 @@ import { RunView } from '@memberjunction/core';
 import { MJNotificationService } from '@memberjunction/ng-notifications';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
-import * as i2 from "@angular/forms";
-import * as i3 from "@memberjunction/ng-ui-components";
-import * as i4 from "@memberjunction/ng-shared-generic";
-import * as i5 from "@memberjunction/ng-credentials";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@memberjunction/ng-credentials";
 const _c0 = ["editPanel"];
-function CredentialsListResourceComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 2);
-} }
-function CredentialsListResourceComponent_Conditional_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 12);
-    i0.ɵɵelement(1, "i", 42);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
+function CredentialsListResourceComponent_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-stat-badge", 4);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getExpiringSoonCount(), " expiring ");
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Count", ctx_r1.getExpiringSoonCount());
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 13);
-    i0.ɵɵelement(1, "i", 43);
-    i0.ɵɵtext(2);
-    i0.ɵɵelementEnd();
+function CredentialsListResourceComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-stat-badge", 5);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getExpiredCount(), " expired ");
-} }
-function CredentialsListResourceComponent_Conditional_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 44);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.createNewCredential()); });
-    i0.ɵɵelement(1, "i", 45);
-    i0.ɵɵelementStart(2, "span");
-    i0.ɵɵtext(3, "New Credential");
-    i0.ɵɵelementEnd()();
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵproperty("Count", ctx_r1.getExpiredCount());
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 46);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_20_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onSearchChange("")); });
-    i0.ɵɵelement(1, "i", 47);
+function CredentialsListResourceComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 16);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.createNewCredential()); });
+    i0.ɵɵelement(1, "i", 17);
+    i0.ɵɵtext(2, " New Credential ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_For_25_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "option", 24);
-    i0.ɵɵtext(1);
-    i0.ɵɵelementEnd();
-} if (rf & 2) {
-    const type_r6 = ctx.$implicit;
-    i0.ɵɵproperty("value", type_r6.ID);
-    i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(type_r6.Name);
+function CredentialsListResourceComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 14);
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_47_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 54);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_47_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.bulkToggleActive(true)); });
-    i0.ɵɵelement(1, "i", 55);
+function CredentialsListResourceComponent_Conditional_16_Conditional_0_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 28);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_0_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.bulkToggleActive(true)); });
+    i0.ɵɵelement(1, "i", 29);
     i0.ɵɵtext(2, " Activate ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_47_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 54);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_47_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.bulkToggleActive(false)); });
-    i0.ɵɵelement(1, "i", 56);
+function CredentialsListResourceComponent_Conditional_16_Conditional_0_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 28);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_0_Conditional_8_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.bulkToggleActive(false)); });
+    i0.ɵɵelement(1, "i", 30);
     i0.ɵɵtext(2, " Deactivate ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_47_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 57);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_47_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.bulkDelete()); });
-    i0.ɵɵelement(1, "i", 58);
+function CredentialsListResourceComponent_Conditional_16_Conditional_0_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 31);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_0_Conditional_9_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.bulkDelete()); });
+    i0.ɵɵelement(1, "i", 32);
     i0.ɵɵtext(2, " Delete ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_47_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 38)(1, "div", 48)(2, "span", 49);
+function CredentialsListResourceComponent_Conditional_16_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 18)(1, "div", 22)(2, "span", 23);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 50);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_47_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.clearSelection()); });
+    i0.ɵɵelementStart(4, "button", 24);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_0_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearSelection()); });
     i0.ɵɵtext(5, "Clear selection");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(6, "div", 51);
-    i0.ɵɵconditionalCreate(7, CredentialsListResourceComponent_Conditional_2_Conditional_47_Conditional_7_Template, 3, 0, "button", 52);
-    i0.ɵɵconditionalCreate(8, CredentialsListResourceComponent_Conditional_2_Conditional_47_Conditional_8_Template, 3, 0, "button", 52);
-    i0.ɵɵconditionalCreate(9, CredentialsListResourceComponent_Conditional_2_Conditional_47_Conditional_9_Template, 3, 0, "button", 53);
+    i0.ɵɵelementStart(6, "div", 25);
+    i0.ɵɵconditionalCreate(7, CredentialsListResourceComponent_Conditional_16_Conditional_0_Conditional_7_Template, 3, 0, "button", 26);
+    i0.ɵɵconditionalCreate(8, CredentialsListResourceComponent_Conditional_16_Conditional_0_Conditional_8_Template, 3, 0, "button", 26);
+    i0.ɵɵconditionalCreate(9, CredentialsListResourceComponent_Conditional_16_Conditional_0_Conditional_9_Template, 3, 0, "button", 27);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("", ctx_r2.selectedCredentials.size, " selected");
+    i0.ɵɵtextInterpolate1("", ctx_r1.selectedCredentials.size, " selected");
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.UserCanUpdate ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanUpdate ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.UserCanUpdate ? 8 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanUpdate ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.UserCanDelete ? 9 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanDelete ? 9 : -1);
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r12 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 61)(1, "input", 80);
-    i0.ɵɵlistener("change", function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_1_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r12); const credential_r13 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleSelection(credential_r13)); });
+function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35)(1, "input", 54);
+    i0.ɵɵlistener("change", function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_1_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r9); const credential_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSelection(credential_r10)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const credential_r13 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const credential_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r2.selectedCredentials.has(credential_r13.ID));
+    i0.ɵɵproperty("checked", ctx_r1.selectedCredentials.has(credential_r10.ID));
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
-    const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 81);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const credential_r13 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleCredentialActive(credential_r13, $event)); });
+function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 55);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_11_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const credential_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleCredentialActive(credential_r10, $event)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const credential_r13 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("title", credential_r13.IsActive ? "Deactivate" : "Activate");
+    const credential_r10 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", credential_r10.IsActive ? "Deactivate" : "Activate");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(credential_r13.IsActive ? "fa-solid fa-toggle-on" : "fa-solid fa-toggle-off");
+    i0.ɵɵclassMap(credential_r10.IsActive ? "fa-solid fa-toggle-on" : "fa-solid fa-toggle-off");
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
-    const _r15 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 82);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_12_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r15); const credential_r13 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.editCredential(credential_r13, $event)); });
-    i0.ɵɵelement(1, "i", 83);
+function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_12_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 56);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_12_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r12); const credential_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.editCredential(credential_r10, $event)); });
+    i0.ɵɵelement(1, "i", 57);
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    const _r16 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 84);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r16); const credential_r13 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.deleteCredential(credential_r13, $event)); });
-    i0.ɵɵelement(1, "i", 58);
+function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 58);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_13_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const credential_r10 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.deleteCredential(credential_r10, $event)); });
+    i0.ɵɵelement(1, "i", 32);
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "p", 73);
+function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 47);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const credential_r13 = i0.ɵɵnextContext().$implicit;
+    const credential_r10 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", credential_r13.Description, " ");
+    i0.ɵɵtextInterpolate1(" ", credential_r10.Description, " ");
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵelement(1, "i", 85);
+function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵelement(1, "i", 59);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "Default");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵelement(1, "i", 86);
+function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵelement(1, "i", 60);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const credential_r13 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("warning", ctx_r2.isExpiringSoon(credential_r13))("danger", ctx_r2.isExpired(credential_r13));
+    const credential_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("warning", ctx_r1.isExpiringSoon(credential_r10))("danger", ctx_r1.isExpired(credential_r10));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate2("", ctx_r2.isExpired(credential_r13) ? "Expired" : "Expires", ": ", ctx_r2.formatDate(credential_r13.ExpiresAt));
+    i0.ɵɵtextInterpolate2("", ctx_r1.isExpired(credential_r10) ? "Expired" : "Expires", ": ", ctx_r1.formatDate(credential_r10.ExpiresAt));
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵelement(1, "i", 42);
+function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 49);
+    i0.ɵɵelement(1, "i", 61);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const credential_r13 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const credential_r10 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1("Last used: ", ctx_r2.formatDate(credential_r13.LastUsedAt));
+    i0.ɵɵtextInterpolate1("Last used: ", ctx_r1.formatDate(credential_r10.LastUsedAt));
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 78);
-    i0.ɵɵelement(1, "i", 87);
+function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 52);
+    i0.ɵɵelement(1, "i", 62);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const credential_r13 = i0.ɵɵnextContext().$implicit;
+    const credential_r10 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", credential_r13.Category, " ");
+    i0.ɵɵtextInterpolate1(" ", credential_r10.Category, " ");
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Template(rf, ctx) { if (rf & 1) {
-    const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 60);
-    i0.ɵɵconditionalCreate(1, CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_1_Template, 2, 1, "div", 61);
-    i0.ɵɵelementStart(2, "div", 62)(3, "div", 63);
+function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵconditionalCreate(1, CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_1_Template, 2, 1, "div", 35);
+    i0.ɵɵelementStart(2, "div", 36)(3, "div", 37);
     i0.ɵɵelement(4, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 64)(6, "div", 65);
+    i0.ɵɵelementStart(5, "div", 38)(6, "div", 39);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 66);
+    i0.ɵɵelementStart(8, "div", 40);
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "div", 67);
-    i0.ɵɵconditionalCreate(11, CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_11_Template, 2, 3, "button", 68);
-    i0.ɵɵconditionalCreate(12, CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_12_Template, 2, 0, "button", 69);
-    i0.ɵɵconditionalCreate(13, CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_13_Template, 2, 0, "button", 70);
+    i0.ɵɵelementStart(10, "div", 41);
+    i0.ɵɵconditionalCreate(11, CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_11_Template, 2, 3, "button", 42);
+    i0.ɵɵconditionalCreate(12, CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_12_Template, 2, 0, "button", 43);
+    i0.ɵɵconditionalCreate(13, CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_13_Template, 2, 0, "button", 44);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 71);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Template_div_click_14_listener() { const credential_r13 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.editCredential(credential_r13)); });
-    i0.ɵɵelementStart(15, "div", 72);
+    i0.ɵɵelementStart(14, "div", 45);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Template_div_click_14_listener() { const credential_r10 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.editCredential(credential_r10)); });
+    i0.ɵɵelementStart(15, "div", 46);
     i0.ɵɵelement(16, "i");
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(18, CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_18_Template, 2, 1, "p", 73);
-    i0.ɵɵelementStart(19, "div", 74);
-    i0.ɵɵconditionalCreate(20, CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_20_Template, 4, 0, "div", 75);
-    i0.ɵɵconditionalCreate(21, CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_21_Template, 4, 6, "div", 76);
-    i0.ɵɵconditionalCreate(22, CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_22_Template, 4, 1, "div", 75);
+    i0.ɵɵconditionalCreate(18, CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_18_Template, 2, 1, "p", 47);
+    i0.ɵɵelementStart(19, "div", 48);
+    i0.ɵɵconditionalCreate(20, CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_20_Template, 4, 0, "div", 49);
+    i0.ɵɵconditionalCreate(21, CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_21_Template, 4, 6, "div", 50);
+    i0.ɵɵconditionalCreate(22, CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_22_Template, 4, 1, "div", 49);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(23, "div", 77);
-    i0.ɵɵconditionalCreate(24, CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Conditional_24_Template, 3, 1, "div", 78);
-    i0.ɵɵelementStart(25, "div", 79);
+    i0.ɵɵelementStart(23, "div", 51);
+    i0.ɵɵconditionalCreate(24, CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Conditional_24_Template, 3, 1, "div", 52);
+    i0.ɵɵelementStart(25, "div", 53);
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const credential_r13 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("selected", ctx_r2.selectedCredentials.has(credential_r13.ID))("expired", ctx_r2.isExpired(credential_r13))("expiring", ctx_r2.isExpiringSoon(credential_r13));
+    const credential_r10 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("selected", ctx_r1.selectedCredentials.has(credential_r10.ID))("expired", ctx_r1.isExpired(credential_r10))("expiring", ctx_r1.isExpiringSoon(credential_r10));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.UserCanUpdate || ctx_r2.UserCanDelete ? 1 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanUpdate || ctx_r1.UserCanDelete ? 1 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.getStatusClass(credential_r13));
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(credential_r10));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(credential_r13.IconClass || "fa-solid fa-key");
+    i0.ɵɵclassMap(credential_r10.IconClass || "fa-solid fa-key");
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(credential_r13.Name);
+    i0.ɵɵtextInterpolate(credential_r10.Name);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(credential_r13.CredentialType || "Unknown Type");
+    i0.ɵɵtextInterpolate(credential_r10.CredentialType || "Unknown Type");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.UserCanUpdate ? 11 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanUpdate ? 11 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.UserCanUpdate ? 12 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanUpdate ? 12 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.UserCanDelete ? 13 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanDelete ? 13 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.getStatusClass(credential_r13));
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(credential_r10));
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(ctx_r2.getStatusIcon(credential_r13));
+    i0.ɵɵclassMap(ctx_r1.getStatusIcon(credential_r10));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getStatusLabel(credential_r13), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getStatusLabel(credential_r10), " ");
     i0.ɵɵadvance();
-    i0.ɵɵconditional(credential_r13.Description ? 18 : -1);
+    i0.ɵɵconditional(credential_r10.Description ? 18 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(credential_r13.IsDefault ? 20 : -1);
+    i0.ɵɵconditional(credential_r10.IsDefault ? 20 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(credential_r13.ExpiresAt ? 21 : -1);
+    i0.ɵɵconditional(credential_r10.ExpiresAt ? 21 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(credential_r13.LastUsedAt ? 22 : -1);
+    i0.ɵɵconditional(credential_r10.LastUsedAt ? 22 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(credential_r13.Category ? 24 : -1);
+    i0.ɵɵconditional(credential_r10.Category ? 24 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" Created ", ctx_r2.formatDate(credential_r13.__mj_CreatedAt), " ");
+    i0.ɵɵtextInterpolate1(" Created ", ctx_r1.formatDate(credential_r10.__mj_CreatedAt), " ");
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_48_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 39);
-    i0.ɵɵrepeaterCreate(1, CredentialsListResourceComponent_Conditional_2_Conditional_48_For_2_Template, 27, 25, "div", 59, i0.ɵɵrepeaterTrackByIdentity);
+function CredentialsListResourceComponent_Conditional_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵrepeaterCreate(1, CredentialsListResourceComponent_Conditional_16_Conditional_1_For_2_Template, 27, 25, "div", 33, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵrepeater(ctx_r2.filteredCredentials);
+    i0.ɵɵrepeater(ctx_r1.filteredCredentials);
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_49_Conditional_4_Template(rf, ctx) { if (rf & 1) {
-    const _r17 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "th", 89)(1, "input", 80);
-    i0.ɵɵlistener("change", function CredentialsListResourceComponent_Conditional_2_Conditional_49_Conditional_4_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleSelectAll()); });
+function CredentialsListResourceComponent_Conditional_16_Conditional_2_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "th", 64)(1, "input", 54);
+    i0.ɵɵlistener("change", function CredentialsListResourceComponent_Conditional_16_Conditional_2_Conditional_4_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSelectAll()); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r2.isAllSelected());
+    i0.ɵɵproperty("checked", ctx_r1.isAllSelected());
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_1_Template(rf, ctx) { if (rf & 1) {
-    const _r19 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "td", 89)(1, "input", 80);
-    i0.ɵɵlistener("change", function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_1_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r19); const credential_r20 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleSelection(credential_r20)); });
+function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 64)(1, "input", 54);
+    i0.ɵɵlistener("change", function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_1_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r16); const credential_r17 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleSelection(credential_r17)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const credential_r20 = i0.ɵɵnextContext().$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
+    const credential_r17 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("checked", ctx_r2.selectedCredentials.has(credential_r20.ID));
+    i0.ɵɵproperty("checked", ctx_r1.selectedCredentials.has(credential_r17.ID));
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 102);
+function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 77);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const credential_r20 = i0.ɵɵnextContext().$implicit;
+    const credential_r17 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(credential_r20.Description);
+    i0.ɵɵtextInterpolate(credential_r17.Description);
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_9_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 103);
+function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 78);
     i0.ɵɵtext(1, "Default");
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_13_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 104);
+function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 79);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const credential_r20 = i0.ɵɵnextContext().$implicit;
+    const credential_r17 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate(credential_r20.Category);
+    i0.ɵɵtextInterpolate(credential_r17.Category);
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "-");
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_24_Template(rf, ctx) { if (rf & 1) {
-    const _r21 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 110);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_24_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r21); const credential_r20 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleCredentialActive(credential_r20, $event)); });
+function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 85);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_24_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r18); const credential_r17 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleCredentialActive(credential_r17, $event)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const credential_r20 = i0.ɵɵnextContext().$implicit;
-    i0.ɵɵproperty("title", credential_r20.IsActive ? "Deactivate" : "Activate");
+    const credential_r17 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", credential_r17.IsActive ? "Deactivate" : "Activate");
     i0.ɵɵadvance();
-    i0.ɵɵclassMap(credential_r20.IsActive ? "fa-solid fa-toggle-on" : "fa-solid fa-toggle-off");
+    i0.ɵɵclassMap(credential_r17.IsActive ? "fa-solid fa-toggle-on" : "fa-solid fa-toggle-off");
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_25_Template(rf, ctx) { if (rf & 1) {
-    const _r22 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 111);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_25_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r22); const credential_r20 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.editCredential(credential_r20, $event)); });
-    i0.ɵɵelement(1, "i", 83);
+function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 86);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_25_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r19); const credential_r17 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.editCredential(credential_r17, $event)); });
+    i0.ɵɵelement(1, "i", 57);
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_26_Template(rf, ctx) { if (rf & 1) {
-    const _r23 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 112);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_26_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r23); const credential_r20 = i0.ɵɵnextContext().$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.deleteCredential(credential_r20, $event)); });
-    i0.ɵɵelement(1, "i", 58);
+function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_26_Template(rf, ctx) { if (rf & 1) {
+    const _r20 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 87);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_26_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r20); const credential_r17 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.deleteCredential(credential_r17, $event)); });
+    i0.ɵɵelement(1, "i", 32);
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Template(rf, ctx) { if (rf & 1) {
-    const _r18 = i0.ɵɵgetCurrentView();
+function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "tr");
-    i0.ɵɵconditionalCreate(1, CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_1_Template, 2, 1, "td", 89);
-    i0.ɵɵelementStart(2, "td", 98);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Template_td_click_2_listener() { const credential_r20 = i0.ɵɵrestoreView(_r18).$implicit; const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.editCredential(credential_r20)); });
-    i0.ɵɵelementStart(3, "div", 99);
-    i0.ɵɵelement(4, "i", 100);
-    i0.ɵɵelementStart(5, "div", 101)(6, "span", 65);
+    i0.ɵɵconditionalCreate(1, CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_1_Template, 2, 1, "td", 64);
+    i0.ɵɵelementStart(2, "td", 73);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Template_td_click_2_listener() { const credential_r17 = i0.ɵɵrestoreView(_r15).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.editCredential(credential_r17)); });
+    i0.ɵɵelementStart(3, "div", 74);
+    i0.ɵɵelement(4, "i", 75);
+    i0.ɵɵelementStart(5, "div", 76)(6, "span", 39);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(8, CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_8_Template, 2, 1, "span", 102);
+    i0.ɵɵconditionalCreate(8, CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_8_Template, 2, 1, "span", 77);
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(9, CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_9_Template, 2, 0, "span", 103);
+    i0.ɵɵconditionalCreate(9, CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_9_Template, 2, 0, "span", 78);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(10, "td", 91);
+    i0.ɵɵelementStart(10, "td", 66);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "td", 92);
-    i0.ɵɵconditionalCreate(13, CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_13_Template, 2, 1, "span", 104);
-    i0.ɵɵconditionalCreate(14, CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_14_Template, 2, 0, "span");
+    i0.ɵɵelementStart(12, "td", 67);
+    i0.ɵɵconditionalCreate(13, CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_13_Template, 2, 1, "span", 79);
+    i0.ɵɵconditionalCreate(14, CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_14_Template, 2, 0, "span");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "td", 93)(16, "span", 105);
+    i0.ɵɵelementStart(15, "td", 68)(16, "span", 80);
     i0.ɵɵtext(17);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(18, "td", 94);
+    i0.ɵɵelementStart(18, "td", 69);
     i0.ɵɵtext(19);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(20, "td", 95);
+    i0.ɵɵelementStart(20, "td", 70);
     i0.ɵɵtext(21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "td", 96)(23, "div", 106);
-    i0.ɵɵconditionalCreate(24, CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_24_Template, 2, 3, "button", 107);
-    i0.ɵɵconditionalCreate(25, CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_25_Template, 2, 0, "button", 108);
-    i0.ɵɵconditionalCreate(26, CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Conditional_26_Template, 2, 0, "button", 109);
+    i0.ɵɵelementStart(22, "td", 71)(23, "div", 81);
+    i0.ɵɵconditionalCreate(24, CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_24_Template, 2, 3, "button", 82);
+    i0.ɵɵconditionalCreate(25, CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_25_Template, 2, 0, "button", 83);
+    i0.ɵɵconditionalCreate(26, CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Conditional_26_Template, 2, 0, "button", 84);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const credential_r20 = ctx.$implicit;
-    const ctx_r2 = i0.ɵɵnextContext(3);
-    i0.ɵɵclassProp("selected", ctx_r2.selectedCredentials.has(credential_r20.ID))("expired", ctx_r2.isExpired(credential_r20));
+    const credential_r17 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵclassProp("selected", ctx_r1.selectedCredentials.has(credential_r17.ID))("expired", ctx_r1.isExpired(credential_r17));
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.UserCanUpdate || ctx_r2.UserCanDelete ? 1 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanUpdate || ctx_r1.UserCanDelete ? 1 : -1);
     i0.ɵɵadvance(3);
-    i0.ɵɵclassMap(credential_r20.IconClass || "fa-solid fa-key");
-    i0.ɵɵproperty("ngClass", ctx_r2.getStatusClass(credential_r20));
+    i0.ɵɵclassMap(credential_r17.IconClass || "fa-solid fa-key");
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(credential_r17));
     i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate(credential_r20.Name);
+    i0.ɵɵtextInterpolate(credential_r17.Name);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(credential_r20.Description ? 8 : -1);
+    i0.ɵɵconditional(credential_r17.Description ? 8 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(credential_r20.IsDefault ? 9 : -1);
+    i0.ɵɵconditional(credential_r17.IsDefault ? 9 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate(credential_r20.CredentialType || "-");
+    i0.ɵɵtextInterpolate(credential_r17.CredentialType || "-");
     i0.ɵɵadvance(2);
-    i0.ɵɵconditional(credential_r20.Category ? 13 : -1);
+    i0.ɵɵconditional(credential_r17.Category ? 13 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!credential_r20.Category ? 14 : -1);
+    i0.ɵɵconditional(!credential_r17.Category ? 14 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngClass", ctx_r2.getStatusClass(credential_r20));
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusClass(credential_r17));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getStatusLabel(credential_r20), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getStatusLabel(credential_r17), " ");
     i0.ɵɵadvance();
-    i0.ɵɵclassProp("warning", ctx_r2.isExpiringSoon(credential_r20))("danger", ctx_r2.isExpired(credential_r20));
+    i0.ɵɵclassProp("warning", ctx_r1.isExpiringSoon(credential_r17))("danger", ctx_r1.isExpired(credential_r17));
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", credential_r20.ExpiresAt ? ctx_r2.formatDate(credential_r20.ExpiresAt) : "Never", " ");
+    i0.ɵɵtextInterpolate1(" ", credential_r17.ExpiresAt ? ctx_r1.formatDate(credential_r17.ExpiresAt) : "Never", " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", credential_r20.LastUsedAt ? ctx_r2.formatDate(credential_r20.LastUsedAt) : "Never", " ");
+    i0.ɵɵtextInterpolate1(" ", credential_r17.LastUsedAt ? ctx_r1.formatDate(credential_r17.LastUsedAt) : "Never", " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵconditional(ctx_r2.UserCanUpdate ? 24 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanUpdate ? 24 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.UserCanUpdate ? 25 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanUpdate ? 25 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.UserCanDelete ? 26 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanDelete ? 26 : -1);
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_49_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 40)(1, "table", 88)(2, "thead")(3, "tr");
-    i0.ɵɵconditionalCreate(4, CredentialsListResourceComponent_Conditional_2_Conditional_49_Conditional_4_Template, 2, 1, "th", 89);
-    i0.ɵɵelementStart(5, "th", 90);
+function CredentialsListResourceComponent_Conditional_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "table", 63)(2, "thead")(3, "tr");
+    i0.ɵɵconditionalCreate(4, CredentialsListResourceComponent_Conditional_16_Conditional_2_Conditional_4_Template, 2, 1, "th", 64);
+    i0.ɵɵelementStart(5, "th", 65);
     i0.ɵɵtext(6, "Name");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "th", 91);
+    i0.ɵɵelementStart(7, "th", 66);
     i0.ɵɵtext(8, "Type");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "th", 92);
+    i0.ɵɵelementStart(9, "th", 67);
     i0.ɵɵtext(10, "Category");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "th", 93);
+    i0.ɵɵelementStart(11, "th", 68);
     i0.ɵɵtext(12, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "th", 94);
+    i0.ɵɵelementStart(13, "th", 69);
     i0.ɵɵtext(14, "Expires");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(15, "th", 95);
+    i0.ɵɵelementStart(15, "th", 70);
     i0.ɵɵtext(16, "Last Used");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "th", 96);
+    i0.ɵɵelementStart(17, "th", 71);
     i0.ɵɵtext(18, "Actions");
     i0.ɵɵelementEnd()()();
     i0.ɵɵelementStart(19, "tbody");
-    i0.ɵɵrepeaterCreate(20, CredentialsListResourceComponent_Conditional_2_Conditional_49_For_21_Template, 27, 25, "tr", 97, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵrepeaterCreate(20, CredentialsListResourceComponent_Conditional_16_Conditional_2_For_21_Template, 27, 25, "tr", 72, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.UserCanUpdate || ctx_r2.UserCanDelete ? 4 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanUpdate || ctx_r1.UserCanDelete ? 4 : -1);
     i0.ɵɵadvance(16);
-    i0.ɵɵrepeater(ctx_r2.filteredCredentials);
+    i0.ɵɵrepeater(ctx_r1.filteredCredentials);
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_50_Conditional_5_Template(rf, ctx) { if (rf & 1) {
-    const _r24 = i0.ɵɵgetCurrentView();
+function CredentialsListResourceComponent_Conditional_16_Conditional_3_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "p");
     i0.ɵɵtext(1, " No credentials match your current filters. ");
-    i0.ɵɵelementStart(2, "button", 50);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_50_Conditional_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.clearFilters()); });
+    i0.ɵɵelementStart(2, "button", 24);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_3_Conditional_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r21); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.clearFilters()); });
     i0.ɵɵtext(3, "Clear filters");
     i0.ɵɵelementEnd()();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_50_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+function CredentialsListResourceComponent_Conditional_16_Conditional_3_Conditional_6_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "p");
     i0.ɵɵtext(1, " Get started by creating your first credential. ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_50_Conditional_7_Template(rf, ctx) { if (rf & 1) {
-    const _r25 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 44);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Conditional_50_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r25); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.createNewCredential()); });
-    i0.ɵɵelement(1, "i", 45);
+function CredentialsListResourceComponent_Conditional_16_Conditional_3_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 91);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_16_Conditional_3_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r22); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.createNewCredential()); });
+    i0.ɵɵelement(1, "i", 17);
     i0.ɵɵtext(2, " Create Credential ");
     i0.ɵɵelementEnd();
 } }
-function CredentialsListResourceComponent_Conditional_2_Conditional_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 41)(1, "div", 113);
-    i0.ɵɵelement(2, "i", 9);
+function CredentialsListResourceComponent_Conditional_16_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 88);
+    i0.ɵɵelement(2, "i", 89);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "h3");
     i0.ɵɵtext(4, "No Credentials Found");
     i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(5, CredentialsListResourceComponent_Conditional_2_Conditional_50_Conditional_5_Template, 4, 0, "p");
-    i0.ɵɵconditionalCreate(6, CredentialsListResourceComponent_Conditional_2_Conditional_50_Conditional_6_Template, 2, 0, "p");
-    i0.ɵɵconditionalCreate(7, CredentialsListResourceComponent_Conditional_2_Conditional_50_Conditional_7_Template, 3, 0, "button", 15);
+    i0.ɵɵconditionalCreate(5, CredentialsListResourceComponent_Conditional_16_Conditional_3_Conditional_5_Template, 4, 0, "p");
+    i0.ɵɵconditionalCreate(6, CredentialsListResourceComponent_Conditional_16_Conditional_3_Conditional_6_Template, 2, 0, "p");
+    i0.ɵɵconditionalCreate(7, CredentialsListResourceComponent_Conditional_16_Conditional_3_Conditional_7_Template, 3, 0, "button", 90);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext(2);
+    const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(5);
-    i0.ɵɵconditional(ctx_r2.searchText || ctx_r2.selectedTypeFilter || ctx_r2.selectedStatusFilter ? 5 : -1);
+    i0.ɵɵconditional(ctx_r1.searchText || ctx_r1.selectedTypeFilter || ctx_r1.selectedStatusFilter ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(!ctx_r2.searchText && !ctx_r2.selectedTypeFilter && !ctx_r2.selectedStatusFilter ? 6 : -1);
+    i0.ɵɵconditional(!ctx_r1.searchText && !ctx_r1.selectedTypeFilter && !ctx_r1.selectedStatusFilter ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.UserCanCreate && !ctx_r2.searchText && !ctx_r2.selectedTypeFilter && !ctx_r2.selectedStatusFilter ? 7 : -1);
+    i0.ɵɵconditional(ctx_r1.UserCanCreate && !ctx_r1.searchText && !ctx_r1.selectedTypeFilter && !ctx_r1.selectedStatusFilter ? 7 : -1);
 } }
-function CredentialsListResourceComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "h2", 6);
-    i0.ɵɵtext(3, "Credentials");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 7)(5, "span", 8);
-    i0.ɵɵelement(6, "i", 9);
-    i0.ɵɵtext(7);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 10);
-    i0.ɵɵelement(9, "i", 11);
-    i0.ɵɵtext(10);
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(11, CredentialsListResourceComponent_Conditional_2_Conditional_11_Template, 3, 1, "span", 12);
-    i0.ɵɵconditionalCreate(12, CredentialsListResourceComponent_Conditional_2_Conditional_12_Template, 3, 1, "span", 13);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(13, "div", 14);
-    i0.ɵɵconditionalCreate(14, CredentialsListResourceComponent_Conditional_2_Conditional_14_Template, 4, 0, "button", 15);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 16)(16, "div", 17)(17, "div", 18);
-    i0.ɵɵelement(18, "i", 19);
-    i0.ɵɵelementStart(19, "input", 20);
-    i0.ɵɵlistener("input", function CredentialsListResourceComponent_Conditional_2_Template_input_input_19_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSearchChange($event.target.value)); });
-    i0.ɵɵelementEnd();
-    i0.ɵɵconditionalCreate(20, CredentialsListResourceComponent_Conditional_2_Conditional_20_Template, 2, 0, "button", 21);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "select", 22);
-    i0.ɵɵlistener("change", function CredentialsListResourceComponent_Conditional_2_Template_select_change_21_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTypeFilterChange($event.target.value)); });
-    i0.ɵɵelementStart(22, "option", 23);
-    i0.ɵɵtext(23, "All Types");
-    i0.ɵɵelementEnd();
-    i0.ɵɵrepeaterCreate(24, CredentialsListResourceComponent_Conditional_2_For_25_Template, 2, 2, "option", 24, i0.ɵɵrepeaterTrackByIdentity);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(26, "select", 22);
-    i0.ɵɵlistener("change", function CredentialsListResourceComponent_Conditional_2_Template_select_change_26_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onStatusFilterChange($event.target.value)); });
-    i0.ɵɵelementStart(27, "option", 23);
-    i0.ɵɵtext(28, "All Statuses");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(29, "option", 25);
-    i0.ɵɵtext(30, "Active");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(31, "option", 26);
-    i0.ɵɵtext(32, "Inactive");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(33, "option", 27);
-    i0.ɵɵtext(34, "Expiring Soon");
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(35, "option", 28);
-    i0.ɵɵtext(36, "Expired");
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(37, "div", 29)(38, "div", 30);
-    i0.ɵɵtext(39);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(40, "div", 31)(41, "button", 32);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Template_button_click_41_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setViewMode("grid")); });
-    i0.ɵɵelement(42, "i", 33);
-    i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(43, "button", 34);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Template_button_click_43_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.setViewMode("list")); });
-    i0.ɵɵelement(44, "i", 35);
-    i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(45, "button", 36);
-    i0.ɵɵlistener("click", function CredentialsListResourceComponent_Conditional_2_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.refresh()); });
-    i0.ɵɵelement(46, "i", 37);
-    i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(47, CredentialsListResourceComponent_Conditional_2_Conditional_47_Template, 10, 4, "div", 38);
-    i0.ɵɵconditionalCreate(48, CredentialsListResourceComponent_Conditional_2_Conditional_48_Template, 3, 0, "div", 39);
-    i0.ɵɵconditionalCreate(49, CredentialsListResourceComponent_Conditional_2_Conditional_49_Template, 22, 1, "div", 40);
-    i0.ɵɵconditionalCreate(50, CredentialsListResourceComponent_Conditional_2_Conditional_50_Template, 8, 3, "div", 41);
+function CredentialsListResourceComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, CredentialsListResourceComponent_Conditional_16_Conditional_0_Template, 10, 4, "div", 18);
+    i0.ɵɵconditionalCreate(1, CredentialsListResourceComponent_Conditional_16_Conditional_1_Template, 3, 0, "div", 19);
+    i0.ɵɵconditionalCreate(2, CredentialsListResourceComponent_Conditional_16_Conditional_2_Template, 22, 1, "div", 20);
+    i0.ɵɵconditionalCreate(3, CredentialsListResourceComponent_Conditional_16_Conditional_3_Template, 8, 3, "div", 21);
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵadvance(7);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.credentials.length, " total ");
-    i0.ɵɵadvance(3);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getActiveCount(), " active ");
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.getExpiringSoonCount() > 0 ? 11 : -1);
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.selectedCredentials.size > 0 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.getExpiredCount() > 0 ? 12 : -1);
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r2.UserCanCreate ? 14 : -1);
-    i0.ɵɵadvance(5);
-    i0.ɵɵproperty("value", ctx_r2.searchText);
+    i0.ɵɵconditional(ctx_r1.viewMode === "grid" && ctx_r1.filteredCredentials.length > 0 ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.searchText ? 20 : -1);
+    i0.ɵɵconditional(ctx_r1.viewMode === "list" && ctx_r1.filteredCredentials.length > 0 ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("value", ctx_r2.selectedTypeFilter);
-    i0.ɵɵadvance(3);
-    i0.ɵɵrepeater(ctx_r2.types);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("value", ctx_r2.selectedStatusFilter);
-    i0.ɵɵadvance(13);
-    i0.ɵɵtextInterpolate2(" ", ctx_r2.filteredCredentials.length, " of ", ctx_r2.credentials.length, " ");
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", ctx_r2.viewMode === "grid");
-    i0.ɵɵadvance(2);
-    i0.ɵɵclassProp("active", ctx_r2.viewMode === "list");
-    i0.ɵɵadvance(4);
-    i0.ɵɵconditional(ctx_r2.selectedCredentials.size > 0 ? 47 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.viewMode === "grid" && ctx_r2.filteredCredentials.length > 0 ? 48 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.viewMode === "list" && ctx_r2.filteredCredentials.length > 0 ? 49 : -1);
-    i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r2.filteredCredentials.length === 0 ? 50 : -1);
+    i0.ɵɵconditional(ctx_r1.filteredCredentials.length === 0 ? 3 : -1);
 } }
 let CredentialsListResourceComponent = class CredentialsListResourceComponent extends BaseResourceComponent {
     cdr;
@@ -637,6 +519,67 @@ let CredentialsListResourceComponent = class CredentialsListResourceComponent ex
     _permissionCache = new Map();
     destroy$ = new Subject();
     editPanel;
+    viewOptions = [
+        { key: 'grid', icon: 'fa-solid fa-grip', title: 'Grid view' },
+        { key: 'list', icon: 'fa-solid fa-list', title: 'List view' }
+    ];
+    get FilterFields() {
+        const typeOptions = [
+            { text: 'All Types', value: '' },
+            ...this.types.map(t => ({ text: t.Name, value: t.ID }))
+        ];
+        return [
+            {
+                key: 'typeFilter',
+                type: 'dropdown',
+                label: 'Type',
+                icon: 'fa-solid fa-shapes',
+                placeholder: 'All Types',
+                filterable: true,
+                options: typeOptions
+            },
+            {
+                key: 'statusFilter',
+                type: 'dropdown',
+                label: 'Status',
+                icon: 'fa-solid fa-circle-info',
+                placeholder: 'All Statuses',
+                options: [
+                    { text: 'All Statuses', value: '' },
+                    { text: 'Active', value: 'active' },
+                    { text: 'Inactive', value: 'inactive' },
+                    { text: 'Expiring Soon', value: 'expiring' },
+                    { text: 'Expired', value: 'expired' }
+                ]
+            }
+        ];
+    }
+    get FilterValues() {
+        return { typeFilter: this.selectedTypeFilter, statusFilter: this.selectedStatusFilter };
+    }
+    get ActiveFilterCount() {
+        let n = 0;
+        if (this.selectedTypeFilter)
+            n++;
+        if (this.selectedStatusFilter)
+            n++;
+        return n;
+    }
+    onFilterValuesChange(v) {
+        const next = (v ?? {});
+        if ((next.typeFilter ?? '') !== this.selectedTypeFilter) {
+            this.onTypeFilterChange(next.typeFilter ?? '');
+        }
+        if ((next.statusFilter ?? '') !== this.selectedStatusFilter) {
+            this.onStatusFilterChange(next.statusFilter ?? '');
+        }
+    }
+    resetFilters() {
+        if (this.selectedTypeFilter)
+            this.onTypeFilterChange('');
+        if (this.selectedStatusFilter)
+            this.onStatusFilterChange('');
+    }
     constructor(cdr) {
         super();
         this.cdr = cdr;
@@ -1220,22 +1163,61 @@ let CredentialsListResourceComponent = class CredentialsListResourceComponent ex
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editPanel = _t.first);
-        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 3, consts: [["editPanel", ""], [1, "list-container"], ["text", "Loading credentials..."], [3, "saved", "deleted", "credentialTypes"], [1, "list-header"], [1, "header-info"], [1, "list-title"], [1, "header-stats"], [1, "stat-item"], [1, "fa-solid", "fa-key"], [1, "stat-item", "active"], [1, "fa-solid", "fa-check-circle"], [1, "stat-item", "warning"], [1, "stat-item", "danger"], [1, "header-actions"], [1, "btn-primary"], [1, "toolbar"], [1, "toolbar-left"], [1, "search-container"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search credentials...", 3, "input", "value"], [1, "search-clear"], [1, "filter-select", 3, "change", "value"], ["value", ""], [3, "value"], ["value", "active"], ["value", "inactive"], ["value", "expiring"], ["value", "expired"], [1, "toolbar-right"], [1, "results-info"], [1, "view-toggle"], ["title", "Grid View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-grid-2"], ["title", "List View", 1, "view-btn", 3, "click"], [1, "fa-solid", "fa-list"], ["title", "Refresh", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-refresh"], [1, "bulk-actions"], [1, "credentials-grid"], [1, "credentials-table-container"], [1, "empty-state"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-exclamation-circle"], [1, "btn-primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], [1, "bulk-info"], [1, "bulk-count"], [1, "btn-link", 3, "click"], [1, "bulk-buttons"], [1, "btn-bulk"], [1, "btn-bulk", "danger"], [1, "btn-bulk", 3, "click"], [1, "fa-solid", "fa-toggle-on"], [1, "fa-solid", "fa-toggle-off"], [1, "btn-bulk", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "credential-card", 3, "selected", "expired", "expiring"], [1, "credential-card"], [1, "card-select"], [1, "card-header"], [1, "card-icon", 3, "ngClass"], [1, "card-title"], [1, "credential-name"], [1, "credential-type"], [1, "card-actions"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Edit"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Delete"], [1, "card-body", 3, "click"], [1, "status-badge", 3, "ngClass"], [1, "credential-description"], [1, "credential-meta"], [1, "meta-item"], [1, "meta-item", 3, "warning", "danger"], [1, "card-footer"], [1, "category-tag"], [1, "created-info"], ["type", "checkbox", 3, "change", "checked"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "title"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Edit", 3, "click"], [1, "fa-solid", "fa-pen"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Delete", 3, "click"], [1, "fa-solid", "fa-star"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-folder"], [1, "credentials-table"], [1, "col-select"], [1, "col-name"], [1, "col-type"], [1, "col-category"], [1, "col-status"], [1, "col-expires"], [1, "col-used"], [1, "col-actions"], [3, "selected", "expired"], [1, "col-name", 3, "click"], [1, "name-cell"], [3, "ngClass"], [1, "name-info"], [1, "credential-desc"], [1, "default-badge"], [1, "category-pill"], [1, "status-pill", 3, "ngClass"], [1, "table-actions"], [1, "table-action-btn", 3, "title"], ["title", "Edit", 1, "table-action-btn"], ["title", "Delete", 1, "table-action-btn", "danger"], [1, "table-action-btn", 3, "click", "title"], ["title", "Edit", 1, "table-action-btn", 3, "click"], ["title", "Delete", 1, "table-action-btn", "danger", 3, "click"], [1, "empty-icon"]], template: function CredentialsListResourceComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 19, vars: 16, consts: [["editPanel", ""], ["Title", "Credentials", "Icon", "fa-solid fa-key"], ["meta", ""], ["Label", "credentials", 3, "Count", "Total"], ["Icon", "fa-solid fa-clock", "Label", "expiring", "Variant", "warning", 3, "Count"], ["Icon", "fa-solid fa-exclamation-circle", "Label", "expired", "Variant", "error", 3, "Count"], ["actions", ""], [3, "ClearAllRequested", "ActiveCount", "ShowClearAll"], [3, "ValuesChange", "Reset", "Fields", "Values"], [3, "KeyChange", "Options", "ActiveKey"], [3, "Clicked", "Loading"], ["mjButton", "", "variant", "primary", "size", "sm"], ["toolbar", ""], ["Placeholder", "Search credentials...", 3, "ValueChange", "Value"], ["text", "Loading credentials..."], [3, "saved", "deleted", "credentialTypes"], ["mjButton", "", "variant", "primary", "size", "sm", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "bulk-actions"], [1, "credentials-grid"], [1, "credentials-table-container"], [1, "empty-state"], [1, "bulk-info"], [1, "bulk-count"], [1, "btn-link", 3, "click"], [1, "bulk-buttons"], [1, "btn-bulk"], [1, "btn-bulk", "danger"], [1, "btn-bulk", 3, "click"], [1, "fa-solid", "fa-toggle-on"], [1, "fa-solid", "fa-toggle-off"], [1, "btn-bulk", "danger", 3, "click"], [1, "fa-solid", "fa-trash"], [1, "credential-card", 3, "selected", "expired", "expiring"], [1, "credential-card"], [1, "card-select"], [1, "card-header"], [1, "card-icon", 3, "ngClass"], [1, "card-title"], [1, "credential-name"], [1, "credential-type"], [1, "card-actions"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "title"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Edit"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Delete"], [1, "card-body", 3, "click"], [1, "status-badge", 3, "ngClass"], [1, "credential-description"], [1, "credential-meta"], [1, "meta-item"], [1, "meta-item", 3, "warning", "danger"], [1, "card-footer"], [1, "category-tag"], [1, "created-info"], ["type", "checkbox", 3, "change", "checked"], ["mjButton", "", "variant", "flat", "size", "sm", 3, "click", "title"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Edit", 3, "click"], [1, "fa-solid", "fa-pen"], ["mjButton", "", "variant", "danger", "size", "sm", "title", "Delete", 3, "click"], [1, "fa-solid", "fa-star"], [1, "fa-solid", "fa-calendar"], [1, "fa-solid", "fa-clock"], [1, "fa-solid", "fa-folder"], [1, "credentials-table"], [1, "col-select"], [1, "col-name"], [1, "col-type"], [1, "col-category"], [1, "col-status"], [1, "col-expires"], [1, "col-used"], [1, "col-actions"], [3, "selected", "expired"], [1, "col-name", 3, "click"], [1, "name-cell"], [3, "ngClass"], [1, "name-info"], [1, "credential-desc"], [1, "default-badge"], [1, "category-pill"], [1, "status-pill", 3, "ngClass"], [1, "table-actions"], [1, "table-action-btn", 3, "title"], ["title", "Edit", 1, "table-action-btn"], ["title", "Delete", 1, "table-action-btn", "danger"], [1, "table-action-btn", 3, "click", "title"], ["title", "Edit", 1, "table-action-btn", 3, "click"], ["title", "Delete", 1, "table-action-btn", "danger", 3, "click"], [1, "empty-icon"], [1, "fa-solid", "fa-key"], [1, "btn-primary"], [1, "btn-primary", 3, "click"]], template: function CredentialsListResourceComponent_Template(rf, ctx) { if (rf & 1) {
             const _r1 = i0.ɵɵgetCurrentView();
-            i0.ɵɵelementStart(0, "div", 1);
-            i0.ɵɵconditionalCreate(1, CredentialsListResourceComponent_Conditional_1_Template, 1, 0, "mj-loading", 2);
-            i0.ɵɵconditionalCreate(2, CredentialsListResourceComponent_Conditional_2_Template, 51, 19);
-            i0.ɵɵelementStart(3, "mj-credential-edit-panel", 3, 0);
-            i0.ɵɵlistener("saved", function CredentialsListResourceComponent_Template_mj_credential_edit_panel_saved_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCredentialSaved($event)); })("deleted", function CredentialsListResourceComponent_Template_mj_credential_edit_panel_deleted_3_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCredentialDeleted($event)); });
+            i0.ɵɵelementStart(0, "mj-page-layout")(1, "mj-page-header", 1)(2, "div", 2);
+            i0.ɵɵelement(3, "mj-stat-badge", 3);
+            i0.ɵɵconditionalCreate(4, CredentialsListResourceComponent_Conditional_4_Template, 1, 1, "mj-stat-badge", 4);
+            i0.ɵɵconditionalCreate(5, CredentialsListResourceComponent_Conditional_5_Template, 1, 1, "mj-stat-badge", 5);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(6, "div", 6)(7, "mj-filter-popover", 7);
+            i0.ɵɵlistener("ClearAllRequested", function CredentialsListResourceComponent_Template_mj_filter_popover_ClearAllRequested_7_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.resetFilters()); });
+            i0.ɵɵelementStart(8, "mj-filter-panel", 8);
+            i0.ɵɵlistener("ValuesChange", function CredentialsListResourceComponent_Template_mj_filter_panel_ValuesChange_8_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onFilterValuesChange($event)); })("Reset", function CredentialsListResourceComponent_Template_mj_filter_panel_Reset_8_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.resetFilters()); });
             i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(9, "mj-view-toggle", 9);
+            i0.ɵɵlistener("KeyChange", function CredentialsListResourceComponent_Template_mj_view_toggle_KeyChange_9_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.setViewMode($event)); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(10, "mj-refresh-button", 10);
+            i0.ɵɵlistener("Clicked", function CredentialsListResourceComponent_Template_mj_refresh_button_Clicked_10_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.refresh()); });
+            i0.ɵɵelementEnd();
+            i0.ɵɵconditionalCreate(11, CredentialsListResourceComponent_Conditional_11_Template, 3, 0, "button", 11);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(12, "div", 12)(13, "mj-page-search", 13);
+            i0.ɵɵlistener("ValueChange", function CredentialsListResourceComponent_Template_mj_page_search_ValueChange_13_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onSearchChange($event)); });
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(14, "mj-page-body");
+            i0.ɵɵconditionalCreate(15, CredentialsListResourceComponent_Conditional_15_Template, 1, 0, "mj-loading", 14);
+            i0.ɵɵconditionalCreate(16, CredentialsListResourceComponent_Conditional_16_Template, 4, 4);
+            i0.ɵɵelementStart(17, "mj-credential-edit-panel", 15, 0);
+            i0.ɵɵlistener("saved", function CredentialsListResourceComponent_Template_mj_credential_edit_panel_saved_17_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCredentialSaved($event)); })("deleted", function CredentialsListResourceComponent_Template_mj_credential_edit_panel_deleted_17_listener($event) { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.onCredentialDeleted($event)); });
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("Count", ctx.filteredCredentials.length)("Total", ctx.credentials.length);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.getExpiringSoonCount() > 0 ? 4 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(ctx.getExpiredCount() > 0 ? 5 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ActiveCount", ctx.ActiveFilterCount)("ShowClearAll", ctx.ActiveFilterCount > 0);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Fields", ctx.FilterFields)("Values", ctx.FilterValues);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Options", ctx.viewOptions)("ActiveKey", ctx.viewMode);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("Loading", ctx.isLoading);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(ctx.isLoading ? 1 : -1);
+            i0.ɵɵconditional(ctx.UserCanCreate ? 11 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("Value", ctx.searchText);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading ? 15 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵconditional(!ctx.isLoading ? 2 : -1);
+            i0.ɵɵconditional(!ctx.isLoading ? 16 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("credentialTypes", ctx.types);
-        } }, dependencies: [i1.NgClass, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i3.MJButtonDirective, i4.LoadingComponent, i5.CredentialEditPanelComponent], styles: [".list-container[_ngcontent-%COMP%] {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n    background: var(--mj-bg-page);\n}\n\n\n\n.list-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.list-title[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\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(--mj-text-secondary);\n}\n\n.stat-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.stat-item.active[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.stat-item.warning[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.stat-item.danger[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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 color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\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(--mj-bg-surface);\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(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 8px 12px;\n    min-width: 280px;\n    position: relative;\n}\n\n.search-container[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\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(--mj-text-primary);\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(--mj-border-default);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    font-size: 10px;\n}\n\n.search-clear[_ngcontent-%COMP%]:hover {\n    background: var(--mj-text-secondary);\n    color: var(--mj-text-inverse);\n}\n\n.filter-select[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    min-width: 140px;\n}\n\n.filter-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n.results-info[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.view-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    padding: 4px;\n}\n\n.view-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\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(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-brand-primary);\n}\n\n\n\n.bulk-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: var(--mj-brand-primary);\n    border-radius: 10px;\n    margin-bottom: 16px;\n    color: var(--mj-text-inverse);\n}\n\n.bulk-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.bulk-count[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n    font-size: 13px;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-inverse);\n}\n\n.bulk-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.btn-bulk[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 20%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-bg-surface) 30%, transparent);\n    border-radius: 6px;\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-bulk[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-bg-surface) 30%, transparent);\n}\n\n.btn-bulk.danger[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-error) 50%, transparent);\n}\n\n.btn-bulk.danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 50%, transparent);\n}\n\n\n\n.credentials-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n    gap: 20px;\n}\n\n.credential-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border: 2px solid transparent;\n}\n\n.credential-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n}\n\n.credential-card.selected[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 3%, var(--mj-bg-surface));\n}\n\n.credential-card.expired[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n}\n\n.credential-card.expiring[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.card-select[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 12px;\n    left: 12px;\n    z-index: 10;\n}\n\n.card-select[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 16px;\n    padding-left: 40px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\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.card-icon.active[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon.inactive[_ngcontent-%COMP%] {\n    background: var(--mj-border-default);\n    color: var(--mj-text-secondary);\n}\n\n.card-icon.expired[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon.expiring[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n}\n\n.card-title[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.credential-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.credential-type[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    margin-left: 8px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.credential-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.action-btn.danger[_ngcontent-%COMP%]:hover {\n    background: var(--mj-status-error);\n}\n\n.card-body[_ngcontent-%COMP%] {\n    padding: 16px;\n    padding-left: 40px;\n    cursor: pointer;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    margin-bottom: 12px;\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.inactive[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge.expired[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-badge.expiring[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.credential-description[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n    margin: 0 0 12px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.credential-meta[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-brand-primary);\n}\n\n.meta-item.warning[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.meta-item.warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.meta-item.danger[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.meta-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.card-footer[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    padding-left: 40px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.category-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n.category-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.created-info[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n\n\n.credentials-table-container[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.credentials-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.credentials-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n}\n\n.credentials-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    text-align: left;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.credentials-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n    transition: background 0.2s ease;\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.expired[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 3%, transparent);\n}\n\n.col-select[_ngcontent-%COMP%] {\n    width: 40px;\n}\n\n.col-select[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.col-name[_ngcontent-%COMP%] {\n    min-width: 240px;\n    cursor: pointer;\n}\n\n.name-cell[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.name-cell[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.name-cell[_ngcontent-%COMP%]   i.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.name-cell[_ngcontent-%COMP%]   i.inactive[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.name-cell[_ngcontent-%COMP%]   i.expired[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.name-cell[_ngcontent-%COMP%]   i.expiring[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.name-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1;\n}\n\n.name-info[_ngcontent-%COMP%]   .credential-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.name-info[_ngcontent-%COMP%]   .credential-desc[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.default-badge[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    font-weight: 600;\n    padding: 2px 8px;\n    border-radius: 10px;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.col-type[_ngcontent-%COMP%], \n.col-category[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.category-pill[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 4px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.col-status[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.status-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.status-pill.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-pill.inactive[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-pill.expired[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-pill.expiring[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.col-expires[_ngcontent-%COMP%], \n.col-used[_ngcontent-%COMP%] {\n    white-space: nowrap;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.col-expires.warning[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-weight: 500;\n}\n\n.col-expires.danger[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: 500;\n}\n\n.col-actions[_ngcontent-%COMP%] {\n    width: 120px;\n}\n\n.table-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   .table-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.table-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(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 13px;\n}\n\n.table-action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.table-action-btn.danger[_ngcontent-%COMP%]:hover {\n    background: var(--mj-status-error);\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: 80px 24px;\n    text-align: center;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 20px;\n    margin-bottom: 24px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0 0 24px 0;\n    max-width: 400px;\n    line-height: 1.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    text-decoration: underline;\n    cursor: pointer;\n    background: none;\n    border: none;\n    font-size: 14px;\n    padding: 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n.empty-state[_ngcontent-%COMP%]   .btn-primary[_ngcontent-%COMP%] {\n    margin-top: 0;\n}\n\n\n\n@media (max-width: 768px) {\n    .list-container[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .list-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n\n    .list-title[_ngcontent-%COMP%] {\n        font-size: 20px;\n    }\n\n    .header-stats[_ngcontent-%COMP%] {\n        gap: 12px;\n    }\n\n    .stat-item[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .header-actions[_ngcontent-%COMP%]   .btn-primary[_ngcontent-%COMP%] {\n        flex: 1;\n        justify-content: center;\n    }\n\n    .toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n        padding: 12px;\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    .credentials-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n\n    \n\n    .card-actions[_ngcontent-%COMP%] {\n        opacity: 1;\n    }\n\n    .card-header[_ngcontent-%COMP%] {\n        padding: 14px;\n        padding-left: 36px;\n    }\n\n    .card-body[_ngcontent-%COMP%] {\n        padding: 14px;\n        padding-left: 36px;\n    }\n\n    .card-footer[_ngcontent-%COMP%] {\n        padding: 10px 14px;\n        padding-left: 36px;\n    }\n\n    .card-icon[_ngcontent-%COMP%] {\n        width: 38px;\n        height: 38px;\n    }\n\n    .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n\n    .bulk-actions[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 12px;\n        text-align: center;\n    }\n\n    .bulk-info[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 8px;\n    }\n\n    .bulk-buttons[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        justify-content: center;\n    }\n\n    .credentials-table-container[_ngcontent-%COMP%] {\n        overflow-x: auto;\n    }\n\n    .credentials-table[_ngcontent-%COMP%] {\n        min-width: 800px;\n    }\n\n    .empty-state[_ngcontent-%COMP%] {\n        padding: 48px 20px;\n    }\n\n    .empty-icon[_ngcontent-%COMP%] {\n        width: 64px;\n        height: 64px;\n    }\n\n    .empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 28px;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n        font-size: 18px;\n    }\n}\n\n@media (max-width: 480px) {\n    .list-container[_ngcontent-%COMP%] {\n        padding: 12px;\n    }\n\n    .list-title[_ngcontent-%COMP%] {\n        font-size: 18px;\n    }\n\n    .header-stats[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 6px;\n    }\n\n    .btn-primary[_ngcontent-%COMP%] {\n        padding: 10px 16px;\n        font-size: 13px;\n    }\n\n    .btn-primary[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        margin: 0;\n    }\n\n    .toolbar[_ngcontent-%COMP%] {\n        padding: 10px;\n    }\n\n    .view-toggle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .results-info[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n\n    .credential-card[_ngcontent-%COMP%] {\n        border-radius: 10px;\n    }\n\n    .card-select[_ngcontent-%COMP%] {\n        top: 10px;\n        left: 10px;\n    }\n\n    .card-header[_ngcontent-%COMP%] {\n        padding: 12px;\n        padding-left: 32px;\n    }\n\n    .card-body[_ngcontent-%COMP%] {\n        padding: 12px;\n        padding-left: 32px;\n    }\n\n    .card-footer[_ngcontent-%COMP%] {\n        padding: 10px 12px;\n        padding-left: 32px;\n    }\n\n    .card-icon[_ngcontent-%COMP%] {\n        width: 34px;\n        height: 34px;\n        margin-right: 10px;\n    }\n\n    .credential-name[_ngcontent-%COMP%] {\n        font-size: 14px;\n    }\n\n    .credential-type[_ngcontent-%COMP%] {\n        font-size: 11px;\n    }\n\n    .action-btn[_ngcontent-%COMP%] {\n        width: 28px;\n        height: 28px;\n    }\n\n    .status-badge[_ngcontent-%COMP%] {\n        font-size: 10px;\n        padding: 3px 8px;\n    }\n\n    .credential-meta[_ngcontent-%COMP%] {\n        gap: 8px;\n    }\n\n    .meta-item[_ngcontent-%COMP%] {\n        font-size: 11px;\n    }\n\n    .category-tag[_ngcontent-%COMP%] {\n        font-size: 10px;\n        padding: 3px 8px;\n    }\n\n    .created-info[_ngcontent-%COMP%] {\n        font-size: 10px;\n    }\n\n    .empty-state[_ngcontent-%COMP%] {\n        padding: 32px 16px;\n    }\n\n    .empty-icon[_ngcontent-%COMP%] {\n        width: 56px;\n        height: 56px;\n        margin-bottom: 16px;\n    }\n\n    .empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 24px;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n        font-size: 13px;\n    }\n}"], changeDetection: 0 });
+        } }, dependencies: [i1.NgClass, i2.MJButtonDirective, i2.MJPageHeaderComponent, i2.MJPageLayoutComponent, i2.MJPageBodyComponent, i2.MJPageSearchComponent, i2.MJFilterPopoverComponent, i2.MJFilterPanelComponent, i2.MJViewToggleComponent, i2.MJStatBadgeComponent, i2.MJRefreshButtonComponent, i3.LoadingComponent, i4.CredentialEditPanelComponent], styles: ["\n\n.bulk-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: var(--mj-brand-primary);\n    border-radius: 10px;\n    margin-bottom: 16px;\n    color: var(--mj-text-inverse);\n}\n\n.bulk-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.bulk-count[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n}\n\n.btn-link[_ngcontent-%COMP%] {\n    background: none;\n    border: none;\n    color: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n    font-size: 13px;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-inverse);\n}\n\n.bulk-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n}\n\n.btn-bulk[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 20%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-bg-surface) 30%, transparent);\n    border-radius: 6px;\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-bulk[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-bg-surface) 30%, transparent);\n}\n\n.btn-bulk.danger[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-error) 50%, transparent);\n}\n\n.btn-bulk.danger[_ngcontent-%COMP%]:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 50%, transparent);\n}\n\n\n\n.credentials-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n    gap: 20px;\n}\n\n.credential-card[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border: 2px solid transparent;\n}\n\n.credential-card[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n}\n\n.credential-card.selected[_ngcontent-%COMP%] {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 3%, var(--mj-bg-surface));\n}\n\n.credential-card.expired[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n}\n\n.credential-card.expiring[_ngcontent-%COMP%] {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.card-select[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 12px;\n    left: 12px;\n    z-index: 10;\n}\n\n.card-select[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.card-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 16px;\n    padding-left: 40px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n    width: 44px;\n    height: 44px;\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.card-icon.active[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon.inactive[_ngcontent-%COMP%] {\n    background: var(--mj-border-default);\n    color: var(--mj-text-secondary);\n}\n\n.card-icon.expired[_ngcontent-%COMP%] {\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon.expiring[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 18px;\n}\n\n.card-title[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.credential-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.credential-type[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    margin-left: 8px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.credential-card[_ngcontent-%COMP%]:hover   .card-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.action-btn.danger[_ngcontent-%COMP%]:hover {\n    background: var(--mj-status-error);\n}\n\n.card-body[_ngcontent-%COMP%] {\n    padding: 16px;\n    padding-left: 40px;\n    cursor: pointer;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    margin-bottom: 12px;\n}\n\n.status-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.inactive[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge.expired[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-badge.expiring[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.credential-description[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n    margin: 0 0 12px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.credential-meta[_ngcontent-%COMP%] {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-brand-primary);\n}\n\n.meta-item.warning[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.meta-item.warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n}\n\n.meta-item.danger[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.meta-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n}\n\n.card-footer[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    padding-left: 40px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.category-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n.category-tag[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.created-info[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n\n\n.credentials-table-container[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.credentials-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.credentials-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-card);\n}\n\n.credentials-table[_ngcontent-%COMP%]   th[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    text-align: left;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.credentials-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%] {\n    transition: background 0.2s ease;\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.expired[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 3%, transparent);\n}\n\n.col-select[_ngcontent-%COMP%] {\n    width: 40px;\n}\n\n.col-select[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.col-name[_ngcontent-%COMP%] {\n    min-width: 240px;\n    cursor: pointer;\n}\n\n.name-cell[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.name-cell[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.name-cell[_ngcontent-%COMP%]   i.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.name-cell[_ngcontent-%COMP%]   i.inactive[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.name-cell[_ngcontent-%COMP%]   i.expired[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.name-cell[_ngcontent-%COMP%]   i.expiring[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.name-info[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1;\n}\n\n.name-info[_ngcontent-%COMP%]   .credential-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.name-info[_ngcontent-%COMP%]   .credential-desc[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.default-badge[_ngcontent-%COMP%] {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    font-weight: 600;\n    padding: 2px 8px;\n    border-radius: 10px;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.col-type[_ngcontent-%COMP%], \n.col-category[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.category-pill[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 4px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.col-status[_ngcontent-%COMP%] {\n    white-space: nowrap;\n}\n\n.status-pill[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.status-pill.active[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-pill.inactive[_ngcontent-%COMP%] {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-pill.expired[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-pill.expiring[_ngcontent-%COMP%] {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.col-expires[_ngcontent-%COMP%], \n.col-used[_ngcontent-%COMP%] {\n    white-space: nowrap;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.col-expires.warning[_ngcontent-%COMP%] {\n    color: var(--mj-status-warning);\n    font-weight: 500;\n}\n\n.col-expires.danger[_ngcontent-%COMP%] {\n    color: var(--mj-status-error);\n    font-weight: 500;\n}\n\n.col-actions[_ngcontent-%COMP%] {\n    width: 120px;\n}\n\n.table-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr[_ngcontent-%COMP%]:hover   .table-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.table-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(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 13px;\n}\n\n.table-action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.table-action-btn.danger[_ngcontent-%COMP%]:hover {\n    background: var(--mj-status-error);\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: 80px 24px;\n    text-align: center;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n}\n\n.empty-icon[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 20px;\n    margin-bottom: 24px;\n}\n\n.empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0 0 24px 0;\n    max-width: 400px;\n    line-height: 1.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    text-decoration: underline;\n    cursor: pointer;\n    background: none;\n    border: none;\n    font-size: 14px;\n    padding: 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   .btn-link[_ngcontent-%COMP%]:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n.empty-state[_ngcontent-%COMP%]   .btn-primary[_ngcontent-%COMP%] {\n    margin-top: 0;\n}\n\n\n\n@media (max-width: 768px) {\n    .list-container[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .list-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n\n    .list-title[_ngcontent-%COMP%] {\n        font-size: 20px;\n    }\n\n    .header-stats[_ngcontent-%COMP%] {\n        gap: 12px;\n    }\n\n    .stat-item[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n\n    .header-actions[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .header-actions[_ngcontent-%COMP%]   .btn-primary[_ngcontent-%COMP%] {\n        flex: 1;\n        justify-content: center;\n    }\n\n    .toolbar[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: stretch;\n        padding: 12px;\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    .credentials-grid[_ngcontent-%COMP%] {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n\n    \n\n    .card-actions[_ngcontent-%COMP%] {\n        opacity: 1;\n    }\n\n    .card-header[_ngcontent-%COMP%] {\n        padding: 14px;\n        padding-left: 36px;\n    }\n\n    .card-body[_ngcontent-%COMP%] {\n        padding: 14px;\n        padding-left: 36px;\n    }\n\n    .card-footer[_ngcontent-%COMP%] {\n        padding: 10px 14px;\n        padding-left: 36px;\n    }\n\n    .card-icon[_ngcontent-%COMP%] {\n        width: 38px;\n        height: 38px;\n    }\n\n    .card-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n\n    .bulk-actions[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 12px;\n        text-align: center;\n    }\n\n    .bulk-info[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 8px;\n    }\n\n    .bulk-buttons[_ngcontent-%COMP%] {\n        flex-wrap: wrap;\n        justify-content: center;\n    }\n\n    .credentials-table-container[_ngcontent-%COMP%] {\n        overflow-x: auto;\n    }\n\n    .credentials-table[_ngcontent-%COMP%] {\n        min-width: 800px;\n    }\n\n    .empty-state[_ngcontent-%COMP%] {\n        padding: 48px 20px;\n    }\n\n    .empty-icon[_ngcontent-%COMP%] {\n        width: 64px;\n        height: 64px;\n    }\n\n    .empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 28px;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n        font-size: 18px;\n    }\n}\n\n@media (max-width: 480px) {\n    .list-container[_ngcontent-%COMP%] {\n        padding: 12px;\n    }\n\n    .list-title[_ngcontent-%COMP%] {\n        font-size: 18px;\n    }\n\n    .header-stats[_ngcontent-%COMP%] {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 6px;\n    }\n\n    .btn-primary[_ngcontent-%COMP%] {\n        padding: 10px 16px;\n        font-size: 13px;\n    }\n\n    .btn-primary[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        margin: 0;\n    }\n\n    .toolbar[_ngcontent-%COMP%] {\n        padding: 10px;\n    }\n\n    .view-toggle[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .results-info[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n\n    .credential-card[_ngcontent-%COMP%] {\n        border-radius: 10px;\n    }\n\n    .card-select[_ngcontent-%COMP%] {\n        top: 10px;\n        left: 10px;\n    }\n\n    .card-header[_ngcontent-%COMP%] {\n        padding: 12px;\n        padding-left: 32px;\n    }\n\n    .card-body[_ngcontent-%COMP%] {\n        padding: 12px;\n        padding-left: 32px;\n    }\n\n    .card-footer[_ngcontent-%COMP%] {\n        padding: 10px 12px;\n        padding-left: 32px;\n    }\n\n    .card-icon[_ngcontent-%COMP%] {\n        width: 34px;\n        height: 34px;\n        margin-right: 10px;\n    }\n\n    .credential-name[_ngcontent-%COMP%] {\n        font-size: 14px;\n    }\n\n    .credential-type[_ngcontent-%COMP%] {\n        font-size: 11px;\n    }\n\n    .action-btn[_ngcontent-%COMP%] {\n        width: 28px;\n        height: 28px;\n    }\n\n    .status-badge[_ngcontent-%COMP%] {\n        font-size: 10px;\n        padding: 3px 8px;\n    }\n\n    .credential-meta[_ngcontent-%COMP%] {\n        gap: 8px;\n    }\n\n    .meta-item[_ngcontent-%COMP%] {\n        font-size: 11px;\n    }\n\n    .category-tag[_ngcontent-%COMP%] {\n        font-size: 10px;\n        padding: 3px 8px;\n    }\n\n    .created-info[_ngcontent-%COMP%] {\n        font-size: 10px;\n    }\n\n    .empty-state[_ngcontent-%COMP%] {\n        padding: 32px 16px;\n    }\n\n    .empty-icon[_ngcontent-%COMP%] {\n        width: 56px;\n        height: 56px;\n        margin-bottom: 16px;\n    }\n\n    .empty-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n        font-size: 24px;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n        font-size: 13px;\n    }\n}"], changeDetection: 0 });
 };
 CredentialsListResourceComponent = __decorate([
     RegisterClass(BaseResourceComponent, 'CredentialsListResource')
@@ -1243,10 +1225,10 @@ CredentialsListResourceComponent = __decorate([
 export { CredentialsListResourceComponent };
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CredentialsListResourceComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-credentials-list-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"list-container\">\n  @if (isLoading) {\n    <mj-loading text=\"Loading credentials...\"></mj-loading>\n  }\n\n  @if (!isLoading) {\n    <!-- Header with Stats -->\n    <div class=\"list-header\">\n      <div class=\"header-info\">\n        <h2 class=\"list-title\">Credentials</h2>\n        <div class=\"header-stats\">\n          <span class=\"stat-item\">\n            <i class=\"fa-solid fa-key\"></i>\n            {{credentials.length}} total\n          </span>\n          <span class=\"stat-item active\">\n            <i class=\"fa-solid fa-check-circle\"></i>\n            {{getActiveCount()}} active\n          </span>\n          @if (getExpiringSoonCount() > 0) {\n            <span class=\"stat-item warning\">\n              <i class=\"fa-solid fa-clock\"></i>\n              {{getExpiringSoonCount()}} expiring\n            </span>\n          }\n          @if (getExpiredCount() > 0) {\n            <span class=\"stat-item danger\">\n              <i class=\"fa-solid fa-exclamation-circle\"></i>\n              {{getExpiredCount()}} expired\n            </span>\n          }\n        </div>\n      </div>\n      <div class=\"header-actions\">\n        @if (UserCanCreate) {\n          <button class=\"btn-primary\" (click)=\"createNewCredential()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            <span>New Credential</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 credentials...\"\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]=\"selectedTypeFilter\"\n          (change)=\"onTypeFilterChange($any($event.target).value)\"\n          >\n          <option value=\"\">All Types</option>\n          @for (type of types; track type) {\n            <option [value]=\"type.ID\">{{type.Name}}</option>\n          }\n        </select>\n        <select\n          class=\"filter-select\"\n          [value]=\"selectedStatusFilter\"\n          (change)=\"onStatusFilterChange($any($event.target).value)\"\n          >\n          <option value=\"\">All Statuses</option>\n          <option value=\"active\">Active</option>\n          <option value=\"inactive\">Inactive</option>\n          <option value=\"expiring\">Expiring Soon</option>\n          <option value=\"expired\">Expired</option>\n        </select>\n      </div>\n      <div class=\"toolbar-right\">\n        <div class=\"results-info\">\n          {{filteredCredentials.length}} of {{credentials.length}}\n        </div>\n        <div class=\"view-toggle\">\n          <button\n            class=\"view-btn\"\n            [class.active]=\"viewMode === 'grid'\"\n            (click)=\"setViewMode('grid')\"\n            title=\"Grid View\"\n            >\n            <i class=\"fa-solid fa-grid-2\"></i>\n          </button>\n          <button\n            class=\"view-btn\"\n            [class.active]=\"viewMode === 'list'\"\n            (click)=\"setViewMode('list')\"\n            title=\"List View\"\n            >\n            <i class=\"fa-solid fa-list\"></i>\n          </button>\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    <!-- Bulk Actions Bar -->\n    @if (selectedCredentials.size > 0) {\n      <div class=\"bulk-actions\">\n        <div class=\"bulk-info\">\n          <span class=\"bulk-count\">{{selectedCredentials.size}} selected</span>\n          <button class=\"btn-link\" (click)=\"clearSelection()\">Clear selection</button>\n        </div>\n        <div class=\"bulk-buttons\">\n          @if (UserCanUpdate) {\n            <button class=\"btn-bulk\" (click)=\"bulkToggleActive(true)\">\n              <i class=\"fa-solid fa-toggle-on\"></i>\n              Activate\n            </button>\n          }\n          @if (UserCanUpdate) {\n            <button class=\"btn-bulk\" (click)=\"bulkToggleActive(false)\">\n              <i class=\"fa-solid fa-toggle-off\"></i>\n              Deactivate\n            </button>\n          }\n          @if (UserCanDelete) {\n            <button class=\"btn-bulk danger\" (click)=\"bulkDelete()\">\n              <i class=\"fa-solid fa-trash\"></i>\n              Delete\n            </button>\n          }\n        </div>\n      </div>\n    }\n    <!-- Grid View -->\n    @if (viewMode === 'grid' && filteredCredentials.length > 0) {\n      <div class=\"credentials-grid\">\n        @for (credential of filteredCredentials; track credential) {\n          <div\n            class=\"credential-card\"\n            [class.selected]=\"selectedCredentials.has(credential.ID)\"\n            [class.expired]=\"isExpired(credential)\"\n            [class.expiring]=\"isExpiringSoon(credential)\"\n            >\n            <!-- Selection Checkbox -->\n            @if (UserCanUpdate || UserCanDelete) {\n              <div class=\"card-select\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"selectedCredentials.has(credential.ID)\"\n                  (change)=\"toggleSelection(credential)\"\n                  />\n              </div>\n            }\n            <div class=\"card-header\">\n              <div class=\"card-icon\" [ngClass]=\"getStatusClass(credential)\">\n                <i [class]=\"credential.IconClass || 'fa-solid fa-key'\"></i>\n              </div>\n              <div class=\"card-title\">\n                <div class=\"credential-name\">{{credential.Name}}</div>\n                <div class=\"credential-type\">{{credential.CredentialType || 'Unknown Type'}}</div>\n              </div>\n              <div class=\"card-actions\">\n                @if (UserCanUpdate) {\n                  <button mjButton variant=\"flat\" size=\"sm\"\n                    (click)=\"toggleCredentialActive(credential, $event)\"\n                    [title]=\"credential.IsActive ? 'Deactivate' : 'Activate'\">\n                    <i [class]=\"credential.IsActive ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'\"></i>\n                  </button>\n                }\n                @if (UserCanUpdate) {\n                  <button mjButton variant=\"flat\" size=\"sm\"\n                    (click)=\"editCredential(credential, $event)\"\n                    title=\"Edit\">\n                    <i class=\"fa-solid fa-pen\"></i>\n                  </button>\n                }\n                @if (UserCanDelete) {\n                  <button mjButton variant=\"danger\" size=\"sm\"\n                    (click)=\"deleteCredential(credential, $event)\"\n                    title=\"Delete\">\n                    <i class=\"fa-solid fa-trash\"></i>\n                  </button>\n                }\n              </div>\n            </div>\n            <div class=\"card-body\" (click)=\"editCredential(credential)\">\n              <div class=\"status-badge\" [ngClass]=\"getStatusClass(credential)\">\n                <i [class]=\"getStatusIcon(credential)\"></i>\n                {{getStatusLabel(credential)}}\n              </div>\n              @if (credential.Description) {\n                <p class=\"credential-description\">\n                  {{credential.Description}}\n                </p>\n              }\n              <div class=\"credential-meta\">\n                @if (credential.IsDefault) {\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-star\"></i>\n                    <span>Default</span>\n                  </div>\n                }\n                @if (credential.ExpiresAt) {\n                  <div class=\"meta-item\" [class.warning]=\"isExpiringSoon(credential)\" [class.danger]=\"isExpired(credential)\">\n                    <i class=\"fa-solid fa-calendar\"></i>\n                    <span>{{isExpired(credential) ? 'Expired' : 'Expires'}}: {{formatDate(credential.ExpiresAt)}}</span>\n                  </div>\n                }\n                @if (credential.LastUsedAt) {\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span>Last used: {{formatDate(credential.LastUsedAt)}}</span>\n                  </div>\n                }\n              </div>\n            </div>\n            <div class=\"card-footer\">\n              @if (credential.Category) {\n                <div class=\"category-tag\">\n                  <i class=\"fa-solid fa-folder\"></i>\n                  {{credential.Category}}\n                </div>\n              }\n              <div class=\"created-info\">\n                Created {{formatDate(credential.__mj_CreatedAt)}}\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n    <!-- List View -->\n    @if (viewMode === 'list' && filteredCredentials.length > 0) {\n      <div class=\"credentials-table-container\">\n        <table class=\"credentials-table\">\n          <thead>\n            <tr>\n              @if (UserCanUpdate || UserCanDelete) {\n                <th class=\"col-select\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isAllSelected()\"\n                    (change)=\"toggleSelectAll()\"\n                    />\n                </th>\n              }\n              <th class=\"col-name\">Name</th>\n              <th class=\"col-type\">Type</th>\n              <th class=\"col-category\">Category</th>\n              <th class=\"col-status\">Status</th>\n              <th class=\"col-expires\">Expires</th>\n              <th class=\"col-used\">Last Used</th>\n              <th class=\"col-actions\">Actions</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (credential of filteredCredentials; track credential) {\n              <tr\n                [class.selected]=\"selectedCredentials.has(credential.ID)\"\n                [class.expired]=\"isExpired(credential)\"\n                >\n                @if (UserCanUpdate || UserCanDelete) {\n                  <td class=\"col-select\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"selectedCredentials.has(credential.ID)\"\n                      (change)=\"toggleSelection(credential)\"\n                      />\n                  </td>\n                }\n                <td class=\"col-name\" (click)=\"editCredential(credential)\">\n                  <div class=\"name-cell\">\n                    <i [class]=\"credential.IconClass || 'fa-solid fa-key'\" [ngClass]=\"getStatusClass(credential)\"></i>\n                    <div class=\"name-info\">\n                      <span class=\"credential-name\">{{credential.Name}}</span>\n                      @if (credential.Description) {\n                        <span class=\"credential-desc\">{{credential.Description}}</span>\n                      }\n                    </div>\n                    @if (credential.IsDefault) {\n                      <span class=\"default-badge\">Default</span>\n                    }\n                  </div>\n                </td>\n                <td class=\"col-type\">{{credential.CredentialType || '-'}}</td>\n                <td class=\"col-category\">\n                  @if (credential.Category) {\n                    <span class=\"category-pill\">{{credential.Category}}</span>\n                  }\n                  @if (!credential.Category) {\n                    <span>-</span>\n                  }\n                </td>\n                <td class=\"col-status\">\n                  <span class=\"status-pill\" [ngClass]=\"getStatusClass(credential)\">\n                    {{getStatusLabel(credential)}}\n                  </span>\n                </td>\n                <td class=\"col-expires\" [class.warning]=\"isExpiringSoon(credential)\" [class.danger]=\"isExpired(credential)\">\n                  {{credential.ExpiresAt ? formatDate(credential.ExpiresAt) : 'Never'}}\n                </td>\n                <td class=\"col-used\">\n                  {{credential.LastUsedAt ? formatDate(credential.LastUsedAt) : 'Never'}}\n                </td>\n                <td class=\"col-actions\">\n                  <div class=\"table-actions\">\n                    @if (UserCanUpdate) {\n                      <button\n                        class=\"table-action-btn\"\n                        (click)=\"toggleCredentialActive(credential, $event)\"\n                        [title]=\"credential.IsActive ? 'Deactivate' : 'Activate'\"\n                        >\n                        <i [class]=\"credential.IsActive ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'\"></i>\n                      </button>\n                    }\n                    @if (UserCanUpdate) {\n                      <button\n                        class=\"table-action-btn\"\n                        (click)=\"editCredential(credential, $event)\"\n                        title=\"Edit\"\n                        >\n                        <i class=\"fa-solid fa-pen\"></i>\n                      </button>\n                    }\n                    @if (UserCanDelete) {\n                      <button\n                        class=\"table-action-btn danger\"\n                        (click)=\"deleteCredential(credential, $event)\"\n                        title=\"Delete\"\n                        >\n                        <i class=\"fa-solid fa-trash\"></i>\n                      </button>\n                    }\n                  </div>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n    <!-- Empty State -->\n    @if (filteredCredentials.length === 0) {\n      <div class=\"empty-state\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-key\"></i>\n        </div>\n        <h3>No Credentials Found</h3>\n        @if (searchText || selectedTypeFilter || selectedStatusFilter) {\n          <p>\n            No credentials match your current filters.\n            <button class=\"btn-link\" (click)=\"clearFilters()\">Clear filters</button>\n          </p>\n        }\n        @if (!searchText && !selectedTypeFilter && !selectedStatusFilter) {\n          <p>\n            Get started by creating your first credential.\n          </p>\n        }\n        @if (UserCanCreate && !searchText && !selectedTypeFilter && !selectedStatusFilter) {\n          <button class=\"btn-primary\" (click)=\"createNewCredential()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            Create Credential\n          </button>\n        }\n      </div>\n    }\n  }\n\n  <!-- Edit Panel -->\n  <mj-credential-edit-panel\n    #editPanel\n    [credentialTypes]=\"types\"\n    (saved)=\"onCredentialSaved($event)\"\n    (deleted)=\"onCredentialDeleted($event)\"\n  ></mj-credential-edit-panel>\n</div>\n", styles: [".list-container {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n    background: var(--mj-bg-page);\n}\n\n/* Header */\n.list-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.list-title {\n    font-size: 24px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\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(--mj-text-secondary);\n}\n\n.stat-item i {\n    font-size: 12px;\n}\n\n.stat-item.active {\n    color: var(--mj-status-success);\n}\n\n.stat-item.warning {\n    color: var(--mj-status-warning);\n}\n\n.stat-item.danger {\n    color: var(--mj-status-error);\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: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\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 color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.btn-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 16px color-mix(in srgb, var(--mj-brand-primary) 40%, transparent);\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(--mj-bg-surface);\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(--mj-bg-surface-card);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    padding: 8px 12px;\n    min-width: 280px;\n    position: relative;\n}\n\n.search-container i {\n    color: var(--mj-text-secondary);\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(--mj-text-primary);\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(--mj-border-default);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--mj-text-secondary);\n    font-size: 10px;\n}\n\n.search-clear:hover {\n    background: var(--mj-text-secondary);\n    color: var(--mj-text-inverse);\n}\n\n.filter-select {\n    padding: 8px 12px;\n    border: 1px solid var(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    cursor: pointer;\n    min-width: 140px;\n}\n\n.filter-select:focus {\n    outline: none;\n    border-color: var(--mj-brand-primary);\n}\n\n.results-info {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    white-space: nowrap;\n}\n\n.view-toggle {\n    display: flex;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 8px;\n    padding: 4px;\n}\n\n.view-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: transparent;\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.view-btn:hover {\n    color: var(--mj-brand-primary);\n}\n\n.view-btn.active {\n    background: var(--mj-bg-surface);\n    color: var(--mj-brand-primary);\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\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(--mj-border-default);\n    border-radius: 8px;\n    background: var(--mj-bg-surface);\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon:hover {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-brand-primary);\n}\n\n/* Bulk Actions Bar */\n.bulk-actions {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: var(--mj-brand-primary);\n    border-radius: 10px;\n    margin-bottom: 16px;\n    color: var(--mj-text-inverse);\n}\n\n.bulk-info {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.bulk-count {\n    font-weight: 600;\n    font-size: 14px;\n}\n\n.btn-link {\n    background: none;\n    border: none;\n    color: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n    font-size: 13px;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.btn-link:hover {\n    color: var(--mj-text-inverse);\n}\n\n.bulk-buttons {\n    display: flex;\n    gap: 8px;\n}\n\n.btn-bulk {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 20%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-bg-surface) 30%, transparent);\n    border-radius: 6px;\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-bulk:hover {\n    background: color-mix(in srgb, var(--mj-bg-surface) 30%, transparent);\n}\n\n.btn-bulk.danger {\n    background: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-error) 50%, transparent);\n}\n\n.btn-bulk.danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 50%, transparent);\n}\n\n/* Credentials Grid */\n.credentials-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n    gap: 20px;\n}\n\n.credential-card {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border: 2px solid transparent;\n}\n\n.credential-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n}\n\n.credential-card.selected {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 3%, var(--mj-bg-surface));\n}\n\n.credential-card.expired {\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n}\n\n.credential-card.expiring {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.card-select {\n    position: absolute;\n    top: 12px;\n    left: 12px;\n    z-index: 10;\n}\n\n.card-select input[type=\"checkbox\"] {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.card-header {\n    display: flex;\n    align-items: center;\n    padding: 16px;\n    padding-left: 40px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.card-icon {\n    width: 44px;\n    height: 44px;\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.card-icon.active {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon.inactive {\n    background: var(--mj-border-default);\n    color: var(--mj-text-secondary);\n}\n\n.card-icon.expired {\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon.expiring {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon i {\n    font-size: 18px;\n}\n\n.card-title {\n    flex: 1;\n    min-width: 0;\n}\n\n.credential-name {\n    font-weight: 600;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.credential-type {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.card-actions {\n    display: flex;\n    gap: 4px;\n    margin-left: 8px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.credential-card:hover .card-actions {\n    opacity: 1;\n}\n\n.action-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.action-btn:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.action-btn.danger:hover {\n    background: var(--mj-status-error);\n}\n\n.card-body {\n    padding: 16px;\n    padding-left: 40px;\n    cursor: pointer;\n}\n\n.status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    margin-bottom: 12px;\n}\n\n.status-badge i {\n    font-size: 10px;\n}\n\n.status-badge.active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.inactive {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge.expired {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-badge.expiring {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.credential-description {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n    margin: 0 0 12px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.credential-meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.meta-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.meta-item i {\n    font-size: 11px;\n    color: var(--mj-brand-primary);\n}\n\n.meta-item.warning {\n    color: var(--mj-status-warning);\n}\n\n.meta-item.warning i {\n    color: var(--mj-status-warning);\n}\n\n.meta-item.danger {\n    color: var(--mj-status-error);\n}\n\n.meta-item.danger i {\n    color: var(--mj-status-error);\n}\n\n.card-footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    padding-left: 40px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.category-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n.category-tag i {\n    font-size: 10px;\n}\n\n.created-info {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n/* Table View */\n.credentials-table-container {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.credentials-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.credentials-table thead {\n    background: var(--mj-bg-surface-card);\n}\n\n.credentials-table th {\n    padding: 12px 16px;\n    text-align: left;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.credentials-table td {\n    padding: 12px 16px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.credentials-table tbody tr {\n    transition: background 0.2s ease;\n}\n\n.credentials-table tbody tr:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.credentials-table tbody tr.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.credentials-table tbody tr.expired {\n    background: color-mix(in srgb, var(--mj-status-error) 3%, transparent);\n}\n\n.col-select {\n    width: 40px;\n}\n\n.col-select input[type=\"checkbox\"] {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.col-name {\n    min-width: 240px;\n    cursor: pointer;\n}\n\n.name-cell {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.name-cell i {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.name-cell i.active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.name-cell i.inactive {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.name-cell i.expired {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.name-cell i.expiring {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.name-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1;\n}\n\n.name-info .credential-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.name-info .credential-desc {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.default-badge {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    font-weight: 600;\n    padding: 2px 8px;\n    border-radius: 10px;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.col-type,\n.col-category {\n    white-space: nowrap;\n}\n\n.category-pill {\n    display: inline-block;\n    padding: 4px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.col-status {\n    white-space: nowrap;\n}\n\n.status-pill {\n    display: inline-flex;\n    align-items: center;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.status-pill.active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-pill.inactive {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-pill.expired {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-pill.expiring {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.col-expires,\n.col-used {\n    white-space: nowrap;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.col-expires.warning {\n    color: var(--mj-status-warning);\n    font-weight: 500;\n}\n\n.col-expires.danger {\n    color: var(--mj-status-error);\n    font-weight: 500;\n}\n\n.col-actions {\n    width: 120px;\n}\n\n.table-actions {\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.credentials-table tbody tr:hover .table-actions {\n    opacity: 1;\n}\n\n.table-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(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 13px;\n}\n\n.table-action-btn:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.table-action-btn.danger:hover {\n    background: var(--mj-status-error);\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: 80px 24px;\n    text-align: center;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 20px;\n    margin-bottom: 24px;\n}\n\n.empty-icon i {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\n}\n\n.empty-state h3 {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state p {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0 0 24px 0;\n    max-width: 400px;\n    line-height: 1.5;\n}\n\n.empty-state .btn-link {\n    color: var(--mj-brand-primary);\n    text-decoration: underline;\n    cursor: pointer;\n    background: none;\n    border: none;\n    font-size: 14px;\n    padding: 0;\n}\n\n.empty-state .btn-link:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n.empty-state .btn-primary {\n    margin-top: 0;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n    .list-container {\n        padding: 16px;\n    }\n\n    .list-header {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n\n    .list-title {\n        font-size: 20px;\n    }\n\n    .header-stats {\n        gap: 12px;\n    }\n\n    .stat-item {\n        font-size: 12px;\n    }\n\n    .header-actions {\n        width: 100%;\n    }\n\n    .header-actions .btn-primary {\n        flex: 1;\n        justify-content: center;\n    }\n\n    .toolbar {\n        flex-direction: column;\n        align-items: stretch;\n        padding: 12px;\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    .credentials-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n\n    /* Make card actions always visible on mobile */\n    .card-actions {\n        opacity: 1;\n    }\n\n    .card-header {\n        padding: 14px;\n        padding-left: 36px;\n    }\n\n    .card-body {\n        padding: 14px;\n        padding-left: 36px;\n    }\n\n    .card-footer {\n        padding: 10px 14px;\n        padding-left: 36px;\n    }\n\n    .card-icon {\n        width: 38px;\n        height: 38px;\n    }\n\n    .card-icon i {\n        font-size: 16px;\n    }\n\n    .bulk-actions {\n        flex-direction: column;\n        gap: 12px;\n        text-align: center;\n    }\n\n    .bulk-info {\n        flex-direction: column;\n        gap: 8px;\n    }\n\n    .bulk-buttons {\n        flex-wrap: wrap;\n        justify-content: center;\n    }\n\n    .credentials-table-container {\n        overflow-x: auto;\n    }\n\n    .credentials-table {\n        min-width: 800px;\n    }\n\n    .empty-state {\n        padding: 48px 20px;\n    }\n\n    .empty-icon {\n        width: 64px;\n        height: 64px;\n    }\n\n    .empty-icon i {\n        font-size: 28px;\n    }\n\n    .empty-state h3 {\n        font-size: 18px;\n    }\n}\n\n@media (max-width: 480px) {\n    .list-container {\n        padding: 12px;\n    }\n\n    .list-title {\n        font-size: 18px;\n    }\n\n    .header-stats {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 6px;\n    }\n\n    .btn-primary {\n        padding: 10px 16px;\n        font-size: 13px;\n    }\n\n    .btn-primary span {\n        display: none;\n    }\n\n    .btn-primary i {\n        margin: 0;\n    }\n\n    .toolbar {\n        padding: 10px;\n    }\n\n    .view-toggle {\n        display: none;\n    }\n\n    .results-info {\n        font-size: 12px;\n    }\n\n    .credential-card {\n        border-radius: 10px;\n    }\n\n    .card-select {\n        top: 10px;\n        left: 10px;\n    }\n\n    .card-header {\n        padding: 12px;\n        padding-left: 32px;\n    }\n\n    .card-body {\n        padding: 12px;\n        padding-left: 32px;\n    }\n\n    .card-footer {\n        padding: 10px 12px;\n        padding-left: 32px;\n    }\n\n    .card-icon {\n        width: 34px;\n        height: 34px;\n        margin-right: 10px;\n    }\n\n    .credential-name {\n        font-size: 14px;\n    }\n\n    .credential-type {\n        font-size: 11px;\n    }\n\n    .action-btn {\n        width: 28px;\n        height: 28px;\n    }\n\n    .status-badge {\n        font-size: 10px;\n        padding: 3px 8px;\n    }\n\n    .credential-meta {\n        gap: 8px;\n    }\n\n    .meta-item {\n        font-size: 11px;\n    }\n\n    .category-tag {\n        font-size: 10px;\n        padding: 3px 8px;\n    }\n\n    .created-info {\n        font-size: 10px;\n    }\n\n    .empty-state {\n        padding: 32px 16px;\n    }\n\n    .empty-icon {\n        width: 56px;\n        height: 56px;\n        margin-bottom: 16px;\n    }\n\n    .empty-icon i {\n        font-size: 24px;\n    }\n\n    .empty-state h3 {\n        font-size: 16px;\n    }\n\n    .empty-state p {\n        font-size: 13px;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-credentials-list-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<mj-page-layout>\n  <mj-page-header\n    Title=\"Credentials\"\n    Icon=\"fa-solid fa-key\">\n    <div meta>\n      <mj-stat-badge\n        [Count]=\"filteredCredentials.length\"\n        [Total]=\"credentials.length\"\n        Label=\"credentials\">\n      </mj-stat-badge>\n      @if (getExpiringSoonCount() > 0) {\n        <mj-stat-badge\n          Icon=\"fa-solid fa-clock\"\n          [Count]=\"getExpiringSoonCount()\"\n          Label=\"expiring\"\n          Variant=\"warning\">\n        </mj-stat-badge>\n      }\n      @if (getExpiredCount() > 0) {\n        <mj-stat-badge\n          Icon=\"fa-solid fa-exclamation-circle\"\n          [Count]=\"getExpiredCount()\"\n          Label=\"expired\"\n          Variant=\"error\">\n        </mj-stat-badge>\n      }\n    </div>\n    <div actions>\n      <mj-filter-popover\n        [ActiveCount]=\"ActiveFilterCount\"\n        [ShowClearAll]=\"ActiveFilterCount > 0\"\n        (ClearAllRequested)=\"resetFilters()\">\n        <mj-filter-panel\n          [Fields]=\"FilterFields\"\n          [Values]=\"FilterValues\"\n          (ValuesChange)=\"onFilterValuesChange($event)\"\n          (Reset)=\"resetFilters()\">\n        </mj-filter-panel>\n      </mj-filter-popover>\n      <mj-view-toggle\n        [Options]=\"viewOptions\"\n        [ActiveKey]=\"viewMode\"\n        (KeyChange)=\"setViewMode($any($event))\">\n      </mj-view-toggle>\n      <mj-refresh-button [Loading]=\"isLoading\" (Clicked)=\"refresh()\"></mj-refresh-button>\n      @if (UserCanCreate) {\n        <button mjButton variant=\"primary\" size=\"sm\" (click)=\"createNewCredential()\">\n          <i class=\"fa-solid fa-plus\"></i> New Credential\n        </button>\n      }\n    </div>\n    <div toolbar>\n      <mj-page-search\n        Placeholder=\"Search credentials...\"\n        [Value]=\"searchText\"\n        (ValueChange)=\"onSearchChange($event)\">\n      </mj-page-search>\n    </div>\n  </mj-page-header>\n\n  <mj-page-body>\n  @if (isLoading) {\n    <mj-loading text=\"Loading credentials...\"></mj-loading>\n  }\n\n  @if (!isLoading) {\n    <!-- Bulk Actions Bar -->\n    @if (selectedCredentials.size > 0) {\n      <div class=\"bulk-actions\">\n        <div class=\"bulk-info\">\n          <span class=\"bulk-count\">{{selectedCredentials.size}} selected</span>\n          <button class=\"btn-link\" (click)=\"clearSelection()\">Clear selection</button>\n        </div>\n        <div class=\"bulk-buttons\">\n          @if (UserCanUpdate) {\n            <button class=\"btn-bulk\" (click)=\"bulkToggleActive(true)\">\n              <i class=\"fa-solid fa-toggle-on\"></i>\n              Activate\n            </button>\n          }\n          @if (UserCanUpdate) {\n            <button class=\"btn-bulk\" (click)=\"bulkToggleActive(false)\">\n              <i class=\"fa-solid fa-toggle-off\"></i>\n              Deactivate\n            </button>\n          }\n          @if (UserCanDelete) {\n            <button class=\"btn-bulk danger\" (click)=\"bulkDelete()\">\n              <i class=\"fa-solid fa-trash\"></i>\n              Delete\n            </button>\n          }\n        </div>\n      </div>\n    }\n    <!-- Grid View -->\n    @if (viewMode === 'grid' && filteredCredentials.length > 0) {\n      <div class=\"credentials-grid\">\n        @for (credential of filteredCredentials; track credential) {\n          <div\n            class=\"credential-card\"\n            [class.selected]=\"selectedCredentials.has(credential.ID)\"\n            [class.expired]=\"isExpired(credential)\"\n            [class.expiring]=\"isExpiringSoon(credential)\"\n            >\n            <!-- Selection Checkbox -->\n            @if (UserCanUpdate || UserCanDelete) {\n              <div class=\"card-select\">\n                <input\n                  type=\"checkbox\"\n                  [checked]=\"selectedCredentials.has(credential.ID)\"\n                  (change)=\"toggleSelection(credential)\"\n                  />\n              </div>\n            }\n            <div class=\"card-header\">\n              <div class=\"card-icon\" [ngClass]=\"getStatusClass(credential)\">\n                <i [class]=\"credential.IconClass || 'fa-solid fa-key'\"></i>\n              </div>\n              <div class=\"card-title\">\n                <div class=\"credential-name\">{{credential.Name}}</div>\n                <div class=\"credential-type\">{{credential.CredentialType || 'Unknown Type'}}</div>\n              </div>\n              <div class=\"card-actions\">\n                @if (UserCanUpdate) {\n                  <button mjButton variant=\"flat\" size=\"sm\"\n                    (click)=\"toggleCredentialActive(credential, $event)\"\n                    [title]=\"credential.IsActive ? 'Deactivate' : 'Activate'\">\n                    <i [class]=\"credential.IsActive ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'\"></i>\n                  </button>\n                }\n                @if (UserCanUpdate) {\n                  <button mjButton variant=\"flat\" size=\"sm\"\n                    (click)=\"editCredential(credential, $event)\"\n                    title=\"Edit\">\n                    <i class=\"fa-solid fa-pen\"></i>\n                  </button>\n                }\n                @if (UserCanDelete) {\n                  <button mjButton variant=\"danger\" size=\"sm\"\n                    (click)=\"deleteCredential(credential, $event)\"\n                    title=\"Delete\">\n                    <i class=\"fa-solid fa-trash\"></i>\n                  </button>\n                }\n              </div>\n            </div>\n            <div class=\"card-body\" (click)=\"editCredential(credential)\">\n              <div class=\"status-badge\" [ngClass]=\"getStatusClass(credential)\">\n                <i [class]=\"getStatusIcon(credential)\"></i>\n                {{getStatusLabel(credential)}}\n              </div>\n              @if (credential.Description) {\n                <p class=\"credential-description\">\n                  {{credential.Description}}\n                </p>\n              }\n              <div class=\"credential-meta\">\n                @if (credential.IsDefault) {\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-star\"></i>\n                    <span>Default</span>\n                  </div>\n                }\n                @if (credential.ExpiresAt) {\n                  <div class=\"meta-item\" [class.warning]=\"isExpiringSoon(credential)\" [class.danger]=\"isExpired(credential)\">\n                    <i class=\"fa-solid fa-calendar\"></i>\n                    <span>{{isExpired(credential) ? 'Expired' : 'Expires'}}: {{formatDate(credential.ExpiresAt)}}</span>\n                  </div>\n                }\n                @if (credential.LastUsedAt) {\n                  <div class=\"meta-item\">\n                    <i class=\"fa-solid fa-clock\"></i>\n                    <span>Last used: {{formatDate(credential.LastUsedAt)}}</span>\n                  </div>\n                }\n              </div>\n            </div>\n            <div class=\"card-footer\">\n              @if (credential.Category) {\n                <div class=\"category-tag\">\n                  <i class=\"fa-solid fa-folder\"></i>\n                  {{credential.Category}}\n                </div>\n              }\n              <div class=\"created-info\">\n                Created {{formatDate(credential.__mj_CreatedAt)}}\n              </div>\n            </div>\n          </div>\n        }\n      </div>\n    }\n    <!-- List View -->\n    @if (viewMode === 'list' && filteredCredentials.length > 0) {\n      <div class=\"credentials-table-container\">\n        <table class=\"credentials-table\">\n          <thead>\n            <tr>\n              @if (UserCanUpdate || UserCanDelete) {\n                <th class=\"col-select\">\n                  <input\n                    type=\"checkbox\"\n                    [checked]=\"isAllSelected()\"\n                    (change)=\"toggleSelectAll()\"\n                    />\n                </th>\n              }\n              <th class=\"col-name\">Name</th>\n              <th class=\"col-type\">Type</th>\n              <th class=\"col-category\">Category</th>\n              <th class=\"col-status\">Status</th>\n              <th class=\"col-expires\">Expires</th>\n              <th class=\"col-used\">Last Used</th>\n              <th class=\"col-actions\">Actions</th>\n            </tr>\n          </thead>\n          <tbody>\n            @for (credential of filteredCredentials; track credential) {\n              <tr\n                [class.selected]=\"selectedCredentials.has(credential.ID)\"\n                [class.expired]=\"isExpired(credential)\"\n                >\n                @if (UserCanUpdate || UserCanDelete) {\n                  <td class=\"col-select\">\n                    <input\n                      type=\"checkbox\"\n                      [checked]=\"selectedCredentials.has(credential.ID)\"\n                      (change)=\"toggleSelection(credential)\"\n                      />\n                  </td>\n                }\n                <td class=\"col-name\" (click)=\"editCredential(credential)\">\n                  <div class=\"name-cell\">\n                    <i [class]=\"credential.IconClass || 'fa-solid fa-key'\" [ngClass]=\"getStatusClass(credential)\"></i>\n                    <div class=\"name-info\">\n                      <span class=\"credential-name\">{{credential.Name}}</span>\n                      @if (credential.Description) {\n                        <span class=\"credential-desc\">{{credential.Description}}</span>\n                      }\n                    </div>\n                    @if (credential.IsDefault) {\n                      <span class=\"default-badge\">Default</span>\n                    }\n                  </div>\n                </td>\n                <td class=\"col-type\">{{credential.CredentialType || '-'}}</td>\n                <td class=\"col-category\">\n                  @if (credential.Category) {\n                    <span class=\"category-pill\">{{credential.Category}}</span>\n                  }\n                  @if (!credential.Category) {\n                    <span>-</span>\n                  }\n                </td>\n                <td class=\"col-status\">\n                  <span class=\"status-pill\" [ngClass]=\"getStatusClass(credential)\">\n                    {{getStatusLabel(credential)}}\n                  </span>\n                </td>\n                <td class=\"col-expires\" [class.warning]=\"isExpiringSoon(credential)\" [class.danger]=\"isExpired(credential)\">\n                  {{credential.ExpiresAt ? formatDate(credential.ExpiresAt) : 'Never'}}\n                </td>\n                <td class=\"col-used\">\n                  {{credential.LastUsedAt ? formatDate(credential.LastUsedAt) : 'Never'}}\n                </td>\n                <td class=\"col-actions\">\n                  <div class=\"table-actions\">\n                    @if (UserCanUpdate) {\n                      <button\n                        class=\"table-action-btn\"\n                        (click)=\"toggleCredentialActive(credential, $event)\"\n                        [title]=\"credential.IsActive ? 'Deactivate' : 'Activate'\"\n                        >\n                        <i [class]=\"credential.IsActive ? 'fa-solid fa-toggle-on' : 'fa-solid fa-toggle-off'\"></i>\n                      </button>\n                    }\n                    @if (UserCanUpdate) {\n                      <button\n                        class=\"table-action-btn\"\n                        (click)=\"editCredential(credential, $event)\"\n                        title=\"Edit\"\n                        >\n                        <i class=\"fa-solid fa-pen\"></i>\n                      </button>\n                    }\n                    @if (UserCanDelete) {\n                      <button\n                        class=\"table-action-btn danger\"\n                        (click)=\"deleteCredential(credential, $event)\"\n                        title=\"Delete\"\n                        >\n                        <i class=\"fa-solid fa-trash\"></i>\n                      </button>\n                    }\n                  </div>\n                </td>\n              </tr>\n            }\n          </tbody>\n        </table>\n      </div>\n    }\n    <!-- Empty State -->\n    @if (filteredCredentials.length === 0) {\n      <div class=\"empty-state\">\n        <div class=\"empty-icon\">\n          <i class=\"fa-solid fa-key\"></i>\n        </div>\n        <h3>No Credentials Found</h3>\n        @if (searchText || selectedTypeFilter || selectedStatusFilter) {\n          <p>\n            No credentials match your current filters.\n            <button class=\"btn-link\" (click)=\"clearFilters()\">Clear filters</button>\n          </p>\n        }\n        @if (!searchText && !selectedTypeFilter && !selectedStatusFilter) {\n          <p>\n            Get started by creating your first credential.\n          </p>\n        }\n        @if (UserCanCreate && !searchText && !selectedTypeFilter && !selectedStatusFilter) {\n          <button class=\"btn-primary\" (click)=\"createNewCredential()\">\n            <i class=\"fa-solid fa-plus\"></i>\n            Create Credential\n          </button>\n        }\n      </div>\n    }\n  }\n\n  <!-- Edit Panel -->\n  <mj-credential-edit-panel\n    #editPanel\n    [credentialTypes]=\"types\"\n    (saved)=\"onCredentialSaved($event)\"\n    (deleted)=\"onCredentialDeleted($event)\"\n  ></mj-credential-edit-panel>\n  </mj-page-body>\n</mj-page-layout>\n", styles: ["/* Bulk Actions Bar */\n.bulk-actions {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: var(--mj-brand-primary);\n    border-radius: 10px;\n    margin-bottom: 16px;\n    color: var(--mj-text-inverse);\n}\n\n.bulk-info {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.bulk-count {\n    font-weight: 600;\n    font-size: 14px;\n}\n\n.btn-link {\n    background: none;\n    border: none;\n    color: color-mix(in srgb, var(--mj-bg-surface) 80%, transparent);\n    font-size: 13px;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.btn-link:hover {\n    color: var(--mj-text-inverse);\n}\n\n.bulk-buttons {\n    display: flex;\n    gap: 8px;\n}\n\n.btn-bulk {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: color-mix(in srgb, var(--mj-bg-surface) 20%, transparent);\n    border: 1px solid color-mix(in srgb, var(--mj-bg-surface) 30%, transparent);\n    border-radius: 6px;\n    color: var(--mj-text-inverse);\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-bulk:hover {\n    background: color-mix(in srgb, var(--mj-bg-surface) 30%, transparent);\n}\n\n.btn-bulk.danger {\n    background: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n    border-color: color-mix(in srgb, var(--mj-status-error) 50%, transparent);\n}\n\n.btn-bulk.danger:hover {\n    background: color-mix(in srgb, var(--mj-status-error) 50%, transparent);\n}\n\n/* Credentials Grid */\n.credentials-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));\n    gap: 20px;\n}\n\n.credential-card {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n    transition: all 0.2s ease;\n    position: relative;\n    border: 2px solid transparent;\n}\n\n.credential-card:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);\n}\n\n.credential-card.selected {\n    border-color: var(--mj-brand-primary);\n    background: color-mix(in srgb, var(--mj-brand-primary) 3%, var(--mj-bg-surface));\n}\n\n.credential-card.expired {\n    border-color: color-mix(in srgb, var(--mj-status-error) 30%, transparent);\n}\n\n.credential-card.expiring {\n    border-color: color-mix(in srgb, var(--mj-status-warning) 30%, transparent);\n}\n\n.card-select {\n    position: absolute;\n    top: 12px;\n    left: 12px;\n    z-index: 10;\n}\n\n.card-select input[type=\"checkbox\"] {\n    width: 18px;\n    height: 18px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.card-header {\n    display: flex;\n    align-items: center;\n    padding: 16px;\n    padding-left: 40px;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.card-icon {\n    width: 44px;\n    height: 44px;\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.card-icon.active {\n    background: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon.inactive {\n    background: var(--mj-border-default);\n    color: var(--mj-text-secondary);\n}\n\n.card-icon.expired {\n    background: var(--mj-status-error);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon.expiring {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-inverse);\n}\n\n.card-icon i {\n    font-size: 18px;\n}\n\n.card-title {\n    flex: 1;\n    min-width: 0;\n}\n\n.credential-name {\n    font-weight: 600;\n    font-size: 15px;\n    color: var(--mj-text-primary);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.credential-type {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.card-actions {\n    display: flex;\n    gap: 4px;\n    margin-left: 8px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.credential-card:hover .card-actions {\n    opacity: 1;\n}\n\n.action-btn {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: none;\n    background: var(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.action-btn:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.action-btn.danger:hover {\n    background: var(--mj-status-error);\n}\n\n.card-body {\n    padding: 16px;\n    padding-left: 40px;\n    cursor: pointer;\n}\n\n.status-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    margin-bottom: 12px;\n}\n\n.status-badge i {\n    font-size: 10px;\n}\n\n.status-badge.active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-badge.inactive {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-badge.expired {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-badge.expiring {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.credential-description {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    line-height: 1.5;\n    margin: 0 0 12px 0;\n    display: -webkit-box;\n    -webkit-line-clamp: 2;\n    -webkit-box-orient: vertical;\n    overflow: hidden;\n}\n\n.credential-meta {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 12px;\n}\n\n.meta-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n}\n\n.meta-item i {\n    font-size: 11px;\n    color: var(--mj-brand-primary);\n}\n\n.meta-item.warning {\n    color: var(--mj-status-warning);\n}\n\n.meta-item.warning i {\n    color: var(--mj-status-warning);\n}\n\n.meta-item.danger {\n    color: var(--mj-status-error);\n}\n\n.meta-item.danger i {\n    color: var(--mj-status-error);\n}\n\n.card-footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    padding-left: 40px;\n    background: var(--mj-bg-surface-card);\n    border-top: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.category-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 6px;\n    font-size: 11px;\n    font-weight: 500;\n}\n\n.category-tag i {\n    font-size: 10px;\n}\n\n.created-info {\n    font-size: 11px;\n    color: var(--mj-text-disabled);\n}\n\n/* Table View */\n.credentials-table-container {\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.credentials-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.credentials-table thead {\n    background: var(--mj-bg-surface-card);\n}\n\n.credentials-table th {\n    padding: 12px 16px;\n    text-align: left;\n    font-size: 12px;\n    font-weight: 600;\n    color: var(--mj-text-secondary);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.credentials-table td {\n    padding: 12px 16px;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.credentials-table tbody tr {\n    transition: background 0.2s ease;\n}\n\n.credentials-table tbody tr:hover {\n    background: var(--mj-bg-surface-card);\n}\n\n.credentials-table tbody tr.selected {\n    background: color-mix(in srgb, var(--mj-brand-primary) 5%, transparent);\n}\n\n.credentials-table tbody tr.expired {\n    background: color-mix(in srgb, var(--mj-status-error) 3%, transparent);\n}\n\n.col-select {\n    width: 40px;\n}\n\n.col-select input[type=\"checkbox\"] {\n    width: 16px;\n    height: 16px;\n    cursor: pointer;\n    accent-color: var(--mj-brand-primary);\n}\n\n.col-name {\n    min-width: 240px;\n    cursor: pointer;\n}\n\n.name-cell {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.name-cell i {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    font-size: 14px;\n    flex-shrink: 0;\n}\n\n.name-cell i.active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.name-cell i.inactive {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.name-cell i.expired {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.name-cell i.expiring {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.name-info {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n    min-width: 0;\n    flex: 1;\n}\n\n.name-info .credential-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.name-info .credential-desc {\n    font-size: 12px;\n    color: var(--mj-text-disabled);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.default-badge {\n    background: var(--mj-status-warning);\n    color: var(--mj-text-inverse);\n    font-size: 10px;\n    font-weight: 600;\n    padding: 2px 8px;\n    border-radius: 10px;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.col-type,\n.col-category {\n    white-space: nowrap;\n}\n\n.category-pill {\n    display: inline-block;\n    padding: 4px 10px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    color: var(--mj-brand-primary);\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 500;\n}\n\n.col-status {\n    white-space: nowrap;\n}\n\n.status-pill {\n    display: inline-flex;\n    align-items: center;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n}\n\n.status-pill.active {\n    background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n    color: var(--mj-status-success);\n}\n\n.status-pill.inactive {\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.status-pill.expired {\n    background: color-mix(in srgb, var(--mj-status-error) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-error);\n}\n\n.status-pill.expiring {\n    background: color-mix(in srgb, var(--mj-status-warning) 8%, var(--mj-bg-surface));\n    color: var(--mj-status-warning);\n}\n\n.col-expires,\n.col-used {\n    white-space: nowrap;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.col-expires.warning {\n    color: var(--mj-status-warning);\n    font-weight: 500;\n}\n\n.col-expires.danger {\n    color: var(--mj-status-error);\n    font-weight: 500;\n}\n\n.col-actions {\n    width: 120px;\n}\n\n.table-actions {\n    display: flex;\n    gap: 4px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.credentials-table tbody tr:hover .table-actions {\n    opacity: 1;\n}\n\n.table-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(--mj-bg-surface-sunken);\n    border-radius: 6px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 13px;\n}\n\n.table-action-btn:hover {\n    background: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.table-action-btn.danger:hover {\n    background: var(--mj-status-error);\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: 80px 24px;\n    text-align: center;\n    background: var(--mj-bg-surface);\n    border-radius: 16px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n}\n\n.empty-icon {\n    width: 80px;\n    height: 80px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n    border-radius: 20px;\n    margin-bottom: 24px;\n}\n\n.empty-icon i {\n    font-size: 36px;\n    color: var(--mj-brand-primary);\n}\n\n.empty-state h3 {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n    margin: 0 0 8px 0;\n}\n\n.empty-state p {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0 0 24px 0;\n    max-width: 400px;\n    line-height: 1.5;\n}\n\n.empty-state .btn-link {\n    color: var(--mj-brand-primary);\n    text-decoration: underline;\n    cursor: pointer;\n    background: none;\n    border: none;\n    font-size: 14px;\n    padding: 0;\n}\n\n.empty-state .btn-link:hover {\n    color: var(--mj-brand-primary-hover);\n}\n\n.empty-state .btn-primary {\n    margin-top: 0;\n}\n\n/* Responsive */\n@media (max-width: 768px) {\n    .list-container {\n        padding: 16px;\n    }\n\n    .list-header {\n        flex-direction: column;\n        align-items: flex-start;\n    }\n\n    .list-title {\n        font-size: 20px;\n    }\n\n    .header-stats {\n        gap: 12px;\n    }\n\n    .stat-item {\n        font-size: 12px;\n    }\n\n    .header-actions {\n        width: 100%;\n    }\n\n    .header-actions .btn-primary {\n        flex: 1;\n        justify-content: center;\n    }\n\n    .toolbar {\n        flex-direction: column;\n        align-items: stretch;\n        padding: 12px;\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    .credentials-grid {\n        grid-template-columns: 1fr;\n        gap: 16px;\n    }\n\n    /* Make card actions always visible on mobile */\n    .card-actions {\n        opacity: 1;\n    }\n\n    .card-header {\n        padding: 14px;\n        padding-left: 36px;\n    }\n\n    .card-body {\n        padding: 14px;\n        padding-left: 36px;\n    }\n\n    .card-footer {\n        padding: 10px 14px;\n        padding-left: 36px;\n    }\n\n    .card-icon {\n        width: 38px;\n        height: 38px;\n    }\n\n    .card-icon i {\n        font-size: 16px;\n    }\n\n    .bulk-actions {\n        flex-direction: column;\n        gap: 12px;\n        text-align: center;\n    }\n\n    .bulk-info {\n        flex-direction: column;\n        gap: 8px;\n    }\n\n    .bulk-buttons {\n        flex-wrap: wrap;\n        justify-content: center;\n    }\n\n    .credentials-table-container {\n        overflow-x: auto;\n    }\n\n    .credentials-table {\n        min-width: 800px;\n    }\n\n    .empty-state {\n        padding: 48px 20px;\n    }\n\n    .empty-icon {\n        width: 64px;\n        height: 64px;\n    }\n\n    .empty-icon i {\n        font-size: 28px;\n    }\n\n    .empty-state h3 {\n        font-size: 18px;\n    }\n}\n\n@media (max-width: 480px) {\n    .list-container {\n        padding: 12px;\n    }\n\n    .list-title {\n        font-size: 18px;\n    }\n\n    .header-stats {\n        flex-direction: column;\n        align-items: flex-start;\n        gap: 6px;\n    }\n\n    .btn-primary {\n        padding: 10px 16px;\n        font-size: 13px;\n    }\n\n    .btn-primary span {\n        display: none;\n    }\n\n    .btn-primary i {\n        margin: 0;\n    }\n\n    .toolbar {\n        padding: 10px;\n    }\n\n    .view-toggle {\n        display: none;\n    }\n\n    .results-info {\n        font-size: 12px;\n    }\n\n    .credential-card {\n        border-radius: 10px;\n    }\n\n    .card-select {\n        top: 10px;\n        left: 10px;\n    }\n\n    .card-header {\n        padding: 12px;\n        padding-left: 32px;\n    }\n\n    .card-body {\n        padding: 12px;\n        padding-left: 32px;\n    }\n\n    .card-footer {\n        padding: 10px 12px;\n        padding-left: 32px;\n    }\n\n    .card-icon {\n        width: 34px;\n        height: 34px;\n        margin-right: 10px;\n    }\n\n    .credential-name {\n        font-size: 14px;\n    }\n\n    .credential-type {\n        font-size: 11px;\n    }\n\n    .action-btn {\n        width: 28px;\n        height: 28px;\n    }\n\n    .status-badge {\n        font-size: 10px;\n        padding: 3px 8px;\n    }\n\n    .credential-meta {\n        gap: 8px;\n    }\n\n    .meta-item {\n        font-size: 11px;\n    }\n\n    .category-tag {\n        font-size: 10px;\n        padding: 3px 8px;\n    }\n\n    .created-info {\n        font-size: 10px;\n    }\n\n    .empty-state {\n        padding: 32px 16px;\n    }\n\n    .empty-icon {\n        width: 56px;\n        height: 56px;\n        margin-bottom: 16px;\n    }\n\n    .empty-icon i {\n        font-size: 24px;\n    }\n\n    .empty-state h3 {\n        font-size: 16px;\n    }\n\n    .empty-state p {\n        font-size: 13px;\n    }\n}\n"] }]
     }], () => [{ type: i0.ChangeDetectorRef }], { editPanel: [{
             type: ViewChild,
             args: ['editPanel']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsListResourceComponent, { className: "CredentialsListResourceComponent", filePath: "src/Credentials/components/credentials-list-resource.component.ts", lineNumber: 20 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialsListResourceComponent, { className: "CredentialsListResourceComponent", filePath: "src/Credentials/components/credentials-list-resource.component.ts", lineNumber: 21 }); })();
 //# sourceMappingURL=credentials-list-resource.component.js.map