@memberjunction/ng-dashboards 2.128.0 → 2.130.0

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

@@ -0,0 +1,1253 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChangeDetectionStrategy, ViewChild } from '@angular/core';
+import { Subject } from 'rxjs';
+import { RegisterClass } from '@memberjunction/global';
+import { BaseResourceComponent } from '@memberjunction/ng-shared';
+import { RunView, Metadata } 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-shared-generic";
+import * as i4 from "./credential-edit-panel.component";
+const _c0 = ["editPanel"];
+function CredentialsListResourceComponent_mj_loading_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 5);
+} }
+function CredentialsListResourceComponent_ng_container_2_span_12_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 44);
+    i0.ɵɵelement(1, "i", 45);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getExpiringSoonCount(), " expiring ");
+} }
+function CredentialsListResourceComponent_ng_container_2_span_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 46);
+    i0.ɵɵelement(1, "i", 47);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getExpiredCount(), " expired ");
+} }
+function CredentialsListResourceComponent_ng_container_2_button_15_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 48);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_button_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.createNewCredential()); });
+    i0.ɵɵelement(1, "i", 49);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "New Credential");
+    i0.ɵɵelementEnd()();
+} }
+function CredentialsListResourceComponent_ng_container_2_button_21_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 50);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_button_21_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.onSearchChange("")); });
+    i0.ɵɵelement(1, "i", 51);
+    i0.ɵɵelementEnd();
+} }
+function CredentialsListResourceComponent_ng_container_2_option_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 52);
+    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_ng_container_2_div_47_button_7_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 60);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_47_button_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", 61);
+    i0.ɵɵtext(2, " Activate ");
+    i0.ɵɵelementEnd();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_47_button_8_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 60);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_47_button_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", 62);
+    i0.ɵɵtext(2, " Deactivate ");
+    i0.ɵɵelementEnd();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_47_button_9_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 63);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_47_button_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", 64);
+    i0.ɵɵtext(2, " Delete ");
+    i0.ɵɵelementEnd();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_47_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53)(1, "div", 54)(2, "span", 55);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 56);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_47_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.clearSelection()); });
+    i0.ɵɵtext(5, "Clear selection");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 57);
+    i0.ɵɵtemplate(7, CredentialsListResourceComponent_ng_container_2_div_47_button_7_Template, 3, 0, "button", 58)(8, CredentialsListResourceComponent_ng_container_2_div_47_button_8_Template, 3, 0, "button", 58)(9, CredentialsListResourceComponent_ng_container_2_div_47_button_9_Template, 3, 0, "button", 59);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("", ctx_r2.selectedCredentials.size, " selected");
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanUpdate);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanUpdate);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanDelete);
+} }
+function CredentialsListResourceComponent_ng_container_2_div_48_div_1_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 87)(1, "input", 88);
+    i0.ɵɵlistener("change", function CredentialsListResourceComponent_ng_container_2_div_48_div_1_div_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)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const credential_r13 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r2.selectedCredentials.has(credential_r13.ID));
+} }
+function CredentialsListResourceComponent_ng_container_2_div_48_div_1_button_11_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 89);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_48_div_1_button_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)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const credential_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", credential_r13.IsActive ? "Deactivate" : "Activate");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(credential_r13.IsActive ? "fa-solid fa-toggle-on" : "fa-solid fa-toggle-off");
+} }
+function CredentialsListResourceComponent_ng_container_2_div_48_div_1_button_12_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 90);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_48_div_1_button_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", 91);
+    i0.ɵɵelementEnd();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_48_div_1_button_13_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 92);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_48_div_1_button_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", 64);
+    i0.ɵɵelementEnd();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_48_div_1_p_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "p", 93);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const credential_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", credential_r13.Description, " ");
+} }
+function CredentialsListResourceComponent_ng_container_2_div_48_div_1_div_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵelement(1, "i", 95);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Default");
+    i0.ɵɵelementEnd()();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_48_div_1_div_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵelement(1, "i", 96);
+    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));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate2("", ctx_r2.isExpired(credential_r13) ? "Expired" : "Expires", ": ", ctx_r2.formatDate(credential_r13.ExpiresAt), "");
+} }
+function CredentialsListResourceComponent_ng_container_2_div_48_div_1_div_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 94);
+    i0.ɵɵelement(1, "i", 45);
+    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.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1("Last used: ", ctx_r2.formatDate(credential_r13.LastUsedAt), "");
+} }
+function CredentialsListResourceComponent_ng_container_2_div_48_div_1_div_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 97);
+    i0.ɵɵelement(1, "i", 98);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const credential_r13 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", credential_r13.Category, " ");
+} }
+function CredentialsListResourceComponent_ng_container_2_div_48_div_1_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 67);
+    i0.ɵɵtemplate(1, CredentialsListResourceComponent_ng_container_2_div_48_div_1_div_1_Template, 2, 1, "div", 68);
+    i0.ɵɵelementStart(2, "div", 69)(3, "div", 70);
+    i0.ɵɵelement(4, "i");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 71)(6, "div", 72);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "div", 73);
+    i0.ɵɵtext(9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "div", 74);
+    i0.ɵɵtemplate(11, CredentialsListResourceComponent_ng_container_2_div_48_div_1_button_11_Template, 2, 3, "button", 75)(12, CredentialsListResourceComponent_ng_container_2_div_48_div_1_button_12_Template, 2, 0, "button", 76)(13, CredentialsListResourceComponent_ng_container_2_div_48_div_1_button_13_Template, 2, 0, "button", 77);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 78);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_48_div_1_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", 79);
+    i0.ɵɵelement(16, "i");
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(18, CredentialsListResourceComponent_ng_container_2_div_48_div_1_p_18_Template, 2, 1, "p", 80);
+    i0.ɵɵelementStart(19, "div", 81);
+    i0.ɵɵtemplate(20, CredentialsListResourceComponent_ng_container_2_div_48_div_1_div_20_Template, 4, 0, "div", 82)(21, CredentialsListResourceComponent_ng_container_2_div_48_div_1_div_21_Template, 4, 6, "div", 83)(22, CredentialsListResourceComponent_ng_container_2_div_48_div_1_div_22_Template, 4, 1, "div", 82);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(23, "div", 84);
+    i0.ɵɵtemplate(24, CredentialsListResourceComponent_ng_container_2_div_48_div_1_div_24_Template, 3, 1, "div", 85);
+    i0.ɵɵelementStart(25, "div", 86);
+    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));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanUpdate || ctx_r2.UserCanDelete);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r2.getStatusClass(credential_r13));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(credential_r13.IconClass || "fa-solid fa-key");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(credential_r13.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(credential_r13.CredentialType || "Unknown Type");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanUpdate);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanUpdate);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanDelete);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r2.getStatusClass(credential_r13));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r2.getStatusIcon(credential_r13));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getStatusLabel(credential_r13), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", credential_r13.Description);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", credential_r13.IsDefault);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", credential_r13.ExpiresAt);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", credential_r13.LastUsedAt);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", credential_r13.Category);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" Created ", ctx_r2.formatDate(credential_r13.__mj_CreatedAt), " ");
+} }
+function CredentialsListResourceComponent_ng_container_2_div_48_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 65);
+    i0.ɵɵtemplate(1, CredentialsListResourceComponent_ng_container_2_div_48_div_1_Template, 27, 25, "div", 66);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", ctx_r2.filteredCredentials);
+} }
+function CredentialsListResourceComponent_ng_container_2_div_49_th_4_Template(rf, ctx) { if (rf & 1) {
+    const _r17 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "th", 110)(1, "input", 88);
+    i0.ɵɵlistener("change", function CredentialsListResourceComponent_ng_container_2_div_49_th_4_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r17); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.toggleSelectAll()); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r2.isAllSelected());
+} }
+function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_td_1_Template(rf, ctx) { if (rf & 1) {
+    const _r19 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "td", 110)(1, "input", 88);
+    i0.ɵɵlistener("change", function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_td_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)); });
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const credential_r20 = i0.ɵɵnextContext().$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r2.selectedCredentials.has(credential_r20.ID));
+} }
+function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_span_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 123);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const credential_r20 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(credential_r20.Description);
+} }
+function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_span_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 124);
+    i0.ɵɵtext(1, "Default");
+    i0.ɵɵelementEnd();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_span_13_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 125);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const credential_r20 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(credential_r20.Category);
+} }
+function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_span_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span");
+    i0.ɵɵtext(1, "-");
+    i0.ɵɵelementEnd();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_button_24_Template(rf, ctx) { if (rf & 1) {
+    const _r21 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 126);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_button_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)); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const credential_r20 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("title", credential_r20.IsActive ? "Deactivate" : "Activate");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(credential_r20.IsActive ? "fa-solid fa-toggle-on" : "fa-solid fa-toggle-off");
+} }
+function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_button_25_Template(rf, ctx) { if (rf & 1) {
+    const _r22 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 127);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_button_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", 91);
+    i0.ɵɵelementEnd();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_button_26_Template(rf, ctx) { if (rf & 1) {
+    const _r23 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 128);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_button_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", 64);
+    i0.ɵɵelementEnd();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_Template(rf, ctx) { if (rf & 1) {
+    const _r18 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "tr");
+    i0.ɵɵtemplate(1, CredentialsListResourceComponent_ng_container_2_div_49_tr_20_td_1_Template, 2, 1, "td", 101);
+    i0.ɵɵelementStart(2, "td", 111);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_49_tr_20_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", 112);
+    i0.ɵɵelement(4, "i", 113);
+    i0.ɵɵelementStart(5, "div", 114)(6, "span", 72);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(8, CredentialsListResourceComponent_ng_container_2_div_49_tr_20_span_8_Template, 2, 1, "span", 115);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(9, CredentialsListResourceComponent_ng_container_2_div_49_tr_20_span_9_Template, 2, 0, "span", 116);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(10, "td", 103);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "td", 104);
+    i0.ɵɵtemplate(13, CredentialsListResourceComponent_ng_container_2_div_49_tr_20_span_13_Template, 2, 1, "span", 117)(14, CredentialsListResourceComponent_ng_container_2_div_49_tr_20_span_14_Template, 2, 0, "span", 3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "td", 105)(16, "span", 118);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(18, "td", 106);
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "td", 107);
+    i0.ɵɵtext(21);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "td", 108)(23, "div", 119);
+    i0.ɵɵtemplate(24, CredentialsListResourceComponent_ng_container_2_div_49_tr_20_button_24_Template, 2, 3, "button", 120)(25, CredentialsListResourceComponent_ng_container_2_div_49_tr_20_button_25_Template, 2, 0, "button", 121)(26, CredentialsListResourceComponent_ng_container_2_div_49_tr_20_button_26_Template, 2, 0, "button", 122);
+    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));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanUpdate || ctx_r2.UserCanDelete);
+    i0.ɵɵadvance(3);
+    i0.ɵɵclassMap(credential_r20.IconClass || "fa-solid fa-key");
+    i0.ɵɵproperty("ngClass", ctx_r2.getStatusClass(credential_r20));
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(credential_r20.Name);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", credential_r20.Description);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", credential_r20.IsDefault);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(credential_r20.CredentialType || "-");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", credential_r20.Category);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !credential_r20.Category);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngClass", ctx_r2.getStatusClass(credential_r20));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getStatusLabel(credential_r20), " ");
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("warning", ctx_r2.isExpiringSoon(credential_r20))("danger", ctx_r2.isExpired(credential_r20));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", credential_r20.ExpiresAt ? ctx_r2.formatDate(credential_r20.ExpiresAt) : "Never", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1(" ", credential_r20.LastUsedAt ? ctx_r2.formatDate(credential_r20.LastUsedAt) : "Never", " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanUpdate);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanUpdate);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanDelete);
+} }
+function CredentialsListResourceComponent_ng_container_2_div_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 99)(1, "table", 100)(2, "thead")(3, "tr");
+    i0.ɵɵtemplate(4, CredentialsListResourceComponent_ng_container_2_div_49_th_4_Template, 2, 1, "th", 101);
+    i0.ɵɵelementStart(5, "th", 102);
+    i0.ɵɵtext(6, "Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "th", 103);
+    i0.ɵɵtext(8, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "th", 104);
+    i0.ɵɵtext(10, "Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "th", 105);
+    i0.ɵɵtext(12, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "th", 106);
+    i0.ɵɵtext(14, "Expires");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(15, "th", 107);
+    i0.ɵɵtext(16, "Last Used");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "th", 108);
+    i0.ɵɵtext(18, "Actions");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(19, "tbody");
+    i0.ɵɵtemplate(20, CredentialsListResourceComponent_ng_container_2_div_49_tr_20_Template, 27, 25, "tr", 109);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanUpdate || ctx_r2.UserCanDelete);
+    i0.ɵɵadvance(16);
+    i0.ɵɵproperty("ngForOf", ctx_r2.filteredCredentials);
+} }
+function CredentialsListResourceComponent_ng_container_2_div_50_p_5_Template(rf, ctx) { if (rf & 1) {
+    const _r24 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "p");
+    i0.ɵɵtext(1, " No credentials match your current filters. ");
+    i0.ɵɵelementStart(2, "button", 56);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_50_p_5_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r24); const ctx_r2 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r2.clearFilters()); });
+    i0.ɵɵtext(3, "Clear filters");
+    i0.ɵɵelementEnd()();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_50_p_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_ng_container_2_div_50_button_7_Template(rf, ctx) { if (rf & 1) {
+    const _r25 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 48);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_div_50_button_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", 49);
+    i0.ɵɵtext(2, " Create Credential ");
+    i0.ɵɵelementEnd();
+} }
+function CredentialsListResourceComponent_ng_container_2_div_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 129)(1, "div", 130);
+    i0.ɵɵelement(2, "i", 11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "h3");
+    i0.ɵɵtext(4, "No Credentials Found");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(5, CredentialsListResourceComponent_ng_container_2_div_50_p_5_Template, 4, 0, "p", 3)(6, CredentialsListResourceComponent_ng_container_2_div_50_p_6_Template, 2, 0, "p", 3)(7, CredentialsListResourceComponent_ng_container_2_div_50_button_7_Template, 3, 0, "button", 17);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("ngIf", ctx_r2.searchText || ctx_r2.selectedTypeFilter || ctx_r2.selectedStatusFilter);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r2.searchText && !ctx_r2.selectedTypeFilter && !ctx_r2.selectedStatusFilter);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanCreate && !ctx_r2.searchText && !ctx_r2.selectedTypeFilter && !ctx_r2.selectedStatusFilter);
+} }
+function CredentialsListResourceComponent_ng_container_2_Template(rf, ctx) { if (rf & 1) {
+    const _r2 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementContainerStart(0);
+    i0.ɵɵelementStart(1, "div", 6)(2, "div", 7)(3, "h2", 8);
+    i0.ɵɵtext(4, "Credentials");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 9)(6, "span", 10);
+    i0.ɵɵelement(7, "i", 11);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "span", 12);
+    i0.ɵɵelement(10, "i", 13);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(12, CredentialsListResourceComponent_ng_container_2_span_12_Template, 3, 1, "span", 14)(13, CredentialsListResourceComponent_ng_container_2_span_13_Template, 3, 1, "span", 15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(14, "div", 16);
+    i0.ɵɵtemplate(15, CredentialsListResourceComponent_ng_container_2_button_15_Template, 4, 0, "button", 17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 18)(17, "div", 19)(18, "div", 20);
+    i0.ɵɵelement(19, "i", 21);
+    i0.ɵɵelementStart(20, "input", 22);
+    i0.ɵɵlistener("input", function CredentialsListResourceComponent_ng_container_2_Template_input_input_20_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onSearchChange($event.target.value)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(21, CredentialsListResourceComponent_ng_container_2_button_21_Template, 2, 0, "button", 23);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "select", 24);
+    i0.ɵɵlistener("change", function CredentialsListResourceComponent_ng_container_2_Template_select_change_22_listener($event) { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onTypeFilterChange($event.target.value)); });
+    i0.ɵɵelementStart(23, "option", 25);
+    i0.ɵɵtext(24, "All Types");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(25, CredentialsListResourceComponent_ng_container_2_option_25_Template, 2, 2, "option", 26);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "select", 24);
+    i0.ɵɵlistener("change", function CredentialsListResourceComponent_ng_container_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", 25);
+    i0.ɵɵtext(28, "All Statuses");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(29, "option", 27);
+    i0.ɵɵtext(30, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "option", 28);
+    i0.ɵɵtext(32, "Inactive");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(33, "option", 29);
+    i0.ɵɵtext(34, "Expiring Soon");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(35, "option", 30);
+    i0.ɵɵtext(36, "Expired");
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(37, "div", 31)(38, "div", 32);
+    i0.ɵɵtext(39);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(40, "div", 33)(41, "button", 34);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_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", 35);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(43, "button", 36);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_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", 37);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(45, "button", 38);
+    i0.ɵɵlistener("click", function CredentialsListResourceComponent_ng_container_2_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.refresh()); });
+    i0.ɵɵelement(46, "i", 39);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(47, CredentialsListResourceComponent_ng_container_2_div_47_Template, 10, 4, "div", 40)(48, CredentialsListResourceComponent_ng_container_2_div_48_Template, 2, 1, "div", 41)(49, CredentialsListResourceComponent_ng_container_2_div_49_Template, 21, 2, "div", 42)(50, CredentialsListResourceComponent_ng_container_2_div_50_Template, 8, 3, "div", 43);
+    i0.ɵɵelementContainerEnd();
+} if (rf & 2) {
+    const ctx_r2 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(8);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.credentials.length, " total ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.getActiveCount(), " active ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.getExpiringSoonCount() > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.getExpiredCount() > 0);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngIf", ctx_r2.UserCanCreate);
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("value", ctx_r2.searchText);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.searchText);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("value", ctx_r2.selectedTypeFilter);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngForOf", ctx_r2.types);
+    i0.ɵɵadvance();
+    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.ɵɵproperty("ngIf", ctx_r2.selectedCredentials.size > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.viewMode === "grid" && ctx_r2.filteredCredentials.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.viewMode === "list" && ctx_r2.filteredCredentials.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r2.filteredCredentials.length === 0);
+} }
+export function LoadCredentialsListResource() {
+    // Prevents tree-shaking
+}
+let CredentialsListResourceComponent = class CredentialsListResourceComponent extends BaseResourceComponent {
+    cdr;
+    isLoading = true;
+    credentials = [];
+    filteredCredentials = [];
+    types = [];
+    // View state
+    viewMode = 'grid';
+    searchText = '';
+    selectedTypeFilter = '';
+    selectedStatusFilter = '';
+    showActiveOnly = false;
+    // Selection for bulk operations
+    selectedCredentials = new Set();
+    _isAllSelected = false;
+    // Permissions
+    _metadata = new Metadata();
+    _permissionCache = new Map();
+    destroy$ = new Subject();
+    editPanel;
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.loadData();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+    async GetResourceDisplayName(data) {
+        return 'Credentials';
+    }
+    async GetResourceIconClass(data) {
+        return 'fa-solid fa-key';
+    }
+    // === Permission Checks ===
+    get UserCanCreate() {
+        return this.checkEntityPermission('MJ: Credentials', 'Create');
+    }
+    get UserCanUpdate() {
+        return this.checkEntityPermission('MJ: Credentials', 'Update');
+    }
+    get UserCanDelete() {
+        return this.checkEntityPermission('MJ: Credentials', 'Delete');
+    }
+    checkEntityPermission(entityName, permissionType) {
+        const cacheKey = `${entityName}_${permissionType}`;
+        if (this._permissionCache.has(cacheKey)) {
+            return this._permissionCache.get(cacheKey);
+        }
+        try {
+            const entityInfo = this._metadata.Entities.find(e => e.Name === entityName);
+            if (!entityInfo) {
+                this._permissionCache.set(cacheKey, false);
+                return false;
+            }
+            const userPermissions = entityInfo.GetUserPermisions(this._metadata.CurrentUser);
+            let hasPermission = false;
+            switch (permissionType) {
+                case 'Create':
+                    hasPermission = userPermissions.CanCreate;
+                    break;
+                case 'Read':
+                    hasPermission = userPermissions.CanRead;
+                    break;
+                case 'Update':
+                    hasPermission = userPermissions.CanUpdate;
+                    break;
+                case 'Delete':
+                    hasPermission = userPermissions.CanDelete;
+                    break;
+            }
+            this._permissionCache.set(cacheKey, hasPermission);
+            return hasPermission;
+        }
+        catch (error) {
+            this._permissionCache.set(cacheKey, false);
+            return false;
+        }
+    }
+    async loadData() {
+        try {
+            this.isLoading = true;
+            this.cdr.markForCheck();
+            const rv = new RunView();
+            const [credResult, typeResult] = await rv.RunViews([
+                {
+                    EntityName: 'MJ: Credentials',
+                    OrderBy: '__mj_UpdatedAt DESC',
+                    ResultType: 'entity_object'
+                },
+                {
+                    EntityName: 'MJ: Credential Types',
+                    OrderBy: 'Category, Name',
+                    ResultType: 'entity_object'
+                }
+            ]);
+            if (credResult.Success) {
+                this.credentials = credResult.Results;
+            }
+            if (typeResult.Success) {
+                this.types = typeResult.Results;
+            }
+            this.applyFilters();
+        }
+        catch (error) {
+            console.error('Error loading credentials:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error loading credentials', 'error', 3000);
+        }
+        finally {
+            this.isLoading = false;
+            this.NotifyLoadComplete();
+            this.cdr.markForCheck();
+            // Handle navigation params from Data.Configuration (passed via NavigationService)
+            this.handleNavigationConfig();
+        }
+    }
+    // === Navigation Handling ===
+    handleNavigationConfig() {
+        const config = this.Data?.Configuration;
+        if (!config) {
+            return;
+        }
+        // Apply filters from navigation config
+        if (config.typeId) {
+            this.selectedTypeFilter = config.typeId;
+            this.applyFilters();
+        }
+        if (config.openCreatePanel) {
+            // Open create panel (optionally with type/category pre-selected)
+            setTimeout(() => {
+                if (config.categoryId) {
+                    this.createNewCredentialWithType(config.typeId, config.categoryId);
+                }
+                else if (config.typeId) {
+                    this.createNewCredentialWithType(config.typeId);
+                }
+                else {
+                    this.createNewCredential();
+                }
+            }, 100);
+        }
+    }
+    // === CRUD Operations ===
+    createNewCredential() {
+        if (this.editPanel) {
+            this.editPanel.open(null);
+        }
+    }
+    createNewCredentialWithType(typeId, categoryId) {
+        if (this.editPanel) {
+            this.editPanel.open(null, typeId, categoryId);
+        }
+    }
+    editCredential(credential, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.editPanel) {
+            this.editPanel.open(credential);
+        }
+    }
+    onCredentialSaved(credential) {
+        // Check if it's a new credential or update
+        const existingIndex = this.credentials.findIndex(c => c.ID === credential.ID);
+        if (existingIndex >= 0) {
+            // Update existing
+            this.credentials[existingIndex] = credential;
+        }
+        else {
+            // Add new
+            this.credentials.unshift(credential);
+        }
+        this.applyFilters();
+        this.cdr.markForCheck();
+    }
+    onCredentialDeleted(credentialId) {
+        this.credentials = this.credentials.filter(c => c.ID !== credentialId);
+        this.selectedCredentials.delete(credentialId);
+        this.applyFilters();
+        this.cdr.markForCheck();
+    }
+    async deleteCredential(credential, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (!this.UserCanDelete) {
+            MJNotificationService.Instance.CreateSimpleNotification('You do not have permission to delete credentials', 'warning', 3000);
+            return;
+        }
+        const confirmed = confirm(`Are you sure you want to delete "${credential.Name}"? This action cannot be undone.`);
+        if (!confirmed)
+            return;
+        try {
+            const success = await credential.Delete();
+            if (success) {
+                MJNotificationService.Instance.CreateSimpleNotification(`Credential "${credential.Name}" deleted successfully`, 'success', 3000);
+                this.credentials = this.credentials.filter(c => c.ID !== credential.ID);
+                this.selectedCredentials.delete(credential.ID);
+                this.applyFilters();
+            }
+            else {
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to delete credential', 'error', 3000);
+            }
+        }
+        catch (error) {
+            console.error('Error deleting credential:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error deleting credential', 'error', 3000);
+        }
+    }
+    async toggleCredentialActive(credential, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (!this.UserCanUpdate) {
+            MJNotificationService.Instance.CreateSimpleNotification('You do not have permission to update credentials', 'warning', 3000);
+            return;
+        }
+        try {
+            credential.IsActive = !credential.IsActive;
+            const success = await credential.Save();
+            if (success) {
+                const status = credential.IsActive ? 'activated' : 'deactivated';
+                MJNotificationService.Instance.CreateSimpleNotification(`Credential "${credential.Name}" ${status}`, 'success', 2000);
+                this.applyFilters();
+            }
+            else {
+                // Revert on failure
+                credential.IsActive = !credential.IsActive;
+                MJNotificationService.Instance.CreateSimpleNotification('Failed to update credential', 'error', 3000);
+            }
+        }
+        catch (error) {
+            console.error('Error updating credential:', error);
+            credential.IsActive = !credential.IsActive;
+            MJNotificationService.Instance.CreateSimpleNotification('Error updating credential', 'error', 3000);
+        }
+        this.cdr.markForCheck();
+    }
+    // === Selection ===
+    toggleSelection(credential, event) {
+        if (event) {
+            event.stopPropagation();
+        }
+        if (this.selectedCredentials.has(credential.ID)) {
+            this.selectedCredentials.delete(credential.ID);
+        }
+        else {
+            this.selectedCredentials.add(credential.ID);
+        }
+        this.updateAllSelectedState();
+        this.cdr.markForCheck();
+    }
+    toggleSelectAll() {
+        if (this._isAllSelected) {
+            this.selectedCredentials.clear();
+        }
+        else {
+            this.filteredCredentials.forEach(c => this.selectedCredentials.add(c.ID));
+        }
+        this._isAllSelected = !this._isAllSelected;
+        this.cdr.markForCheck();
+    }
+    isAllSelected() {
+        return this._isAllSelected;
+    }
+    isSelected(credential) {
+        return this.selectedCredentials.has(credential.ID);
+    }
+    clearSelection() {
+        this.selectedCredentials.clear();
+        this._isAllSelected = false;
+        this.cdr.markForCheck();
+    }
+    updateAllSelectedState() {
+        this._isAllSelected = this.filteredCredentials.length > 0 &&
+            this.filteredCredentials.every(c => this.selectedCredentials.has(c.ID));
+    }
+    async deleteSelected() {
+        if (!this.UserCanDelete || this.selectedCredentials.size === 0)
+            return;
+        const count = this.selectedCredentials.size;
+        const confirmed = confirm(`Are you sure you want to delete ${count} credential(s)? This action cannot be undone.`);
+        if (!confirmed)
+            return;
+        let successCount = 0;
+        let failCount = 0;
+        for (const credId of this.selectedCredentials) {
+            const credential = this.credentials.find(c => c.ID === credId);
+            if (credential) {
+                try {
+                    const success = await credential.Delete();
+                    if (success) {
+                        successCount++;
+                        this.credentials = this.credentials.filter(c => c.ID !== credId);
+                    }
+                    else {
+                        failCount++;
+                    }
+                }
+                catch {
+                    failCount++;
+                }
+            }
+        }
+        this.selectedCredentials.clear();
+        this.applyFilters();
+        if (successCount > 0) {
+            MJNotificationService.Instance.CreateSimpleNotification(`${successCount} credential(s) deleted${failCount > 0 ? `, ${failCount} failed` : ''}`, failCount > 0 ? 'warning' : 'success', 3000);
+        }
+        else {
+            MJNotificationService.Instance.CreateSimpleNotification('Failed to delete credentials', 'error', 3000);
+        }
+    }
+    // === Filtering ===
+    onSearchChange(value) {
+        this.searchText = value;
+        this.applyFilters();
+    }
+    onTypeFilterChange(typeId) {
+        this.selectedTypeFilter = typeId;
+        this.applyFilters();
+    }
+    onStatusFilterChange(status) {
+        this.selectedStatusFilter = status;
+        this.applyFilters();
+    }
+    onActiveFilterChange(showActive) {
+        this.showActiveOnly = showActive;
+        this.applyFilters();
+    }
+    clearFilters() {
+        this.searchText = '';
+        this.selectedTypeFilter = '';
+        this.selectedStatusFilter = '';
+        this.showActiveOnly = false;
+        this.applyFilters();
+    }
+    get hasActiveFilters() {
+        return this.searchText !== '' ||
+            this.selectedTypeFilter !== '' ||
+            this.selectedStatusFilter !== '' ||
+            this.showActiveOnly;
+    }
+    applyFilters() {
+        let filtered = [...this.credentials];
+        const now = new Date();
+        const thirtyDaysFromNow = new Date();
+        thirtyDaysFromNow.setDate(thirtyDaysFromNow.getDate() + 30);
+        // Filter by active status
+        if (this.showActiveOnly) {
+            filtered = filtered.filter(c => c.IsActive);
+        }
+        // Filter by status
+        if (this.selectedStatusFilter) {
+            filtered = filtered.filter(c => {
+                const statusClass = this.getStatusClass(c);
+                switch (this.selectedStatusFilter) {
+                    case 'active': return statusClass === 'active';
+                    case 'inactive': return statusClass === 'inactive';
+                    case 'expired': return statusClass === 'expired';
+                    case 'expiring': return statusClass === 'expiring';
+                    default: return true;
+                }
+            });
+        }
+        // Filter by type
+        if (this.selectedTypeFilter) {
+            filtered = filtered.filter(c => c.CredentialTypeID === this.selectedTypeFilter);
+        }
+        // Filter by search text
+        if (this.searchText.trim()) {
+            const search = this.searchText.toLowerCase().trim();
+            filtered = filtered.filter(c => c.Name.toLowerCase().includes(search) ||
+                (c.Description && c.Description.toLowerCase().includes(search)) ||
+                (c.CredentialType && c.CredentialType.toLowerCase().includes(search)));
+        }
+        this.filteredCredentials = filtered;
+        this.updateAllSelectedState();
+        this.cdr.markForCheck();
+    }
+    // === View Mode ===
+    setViewMode(mode) {
+        this.viewMode = mode;
+        this.cdr.markForCheck();
+    }
+    // === Helpers ===
+    getTypeById(typeId) {
+        return this.types.find(t => t.ID === typeId);
+    }
+    getTypesByCategory() {
+        const grouped = new Map();
+        for (const type of this.types) {
+            const category = type.Category;
+            if (!grouped.has(category)) {
+                grouped.set(category, []);
+            }
+            grouped.get(category).push(type);
+        }
+        return grouped;
+    }
+    getStatusClass(credential) {
+        if (!credential.IsActive) {
+            return 'inactive';
+        }
+        if (credential.ExpiresAt) {
+            const expiresAt = new Date(credential.ExpiresAt);
+            const now = new Date();
+            const thirtyDays = 30 * 24 * 60 * 60 * 1000;
+            if (expiresAt < now) {
+                return 'expired';
+            }
+            if (expiresAt.getTime() - now.getTime() < thirtyDays) {
+                return 'expiring';
+            }
+        }
+        return 'active';
+    }
+    getStatusLabel(credential) {
+        const statusClass = this.getStatusClass(credential);
+        const labels = {
+            'active': 'Active',
+            'inactive': 'Inactive',
+            'expired': 'Expired',
+            'expiring': 'Expiring Soon'
+        };
+        return labels[statusClass] || 'Unknown';
+    }
+    getStatusIcon(credential) {
+        const statusClass = this.getStatusClass(credential);
+        const icons = {
+            'active': 'fa-solid fa-check-circle',
+            'inactive': 'fa-solid fa-minus-circle',
+            'expired': 'fa-solid fa-times-circle',
+            'expiring': 'fa-solid fa-clock'
+        };
+        return icons[statusClass] || 'fa-solid fa-circle';
+    }
+    formatDate(date) {
+        if (!date)
+            return 'Never';
+        return new Date(date).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric'
+        });
+    }
+    formatDateTime(date) {
+        if (!date)
+            return 'Never';
+        return new Date(date).toLocaleDateString('en-US', {
+            month: 'short',
+            day: 'numeric',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit'
+        });
+    }
+    getTimeAgo(date) {
+        if (!date)
+            return 'Never';
+        const now = new Date();
+        const then = new Date(date);
+        const diffMs = now.getTime() - then.getTime();
+        const diffMins = Math.floor(diffMs / 60000);
+        const diffHours = Math.floor(diffMs / 3600000);
+        const diffDays = Math.floor(diffMs / 86400000);
+        if (diffMins < 1)
+            return 'Just now';
+        if (diffMins < 60)
+            return `${diffMins}m ago`;
+        if (diffHours < 24)
+            return `${diffHours}h ago`;
+        if (diffDays < 30)
+            return `${diffDays}d ago`;
+        return this.formatDate(date);
+    }
+    getTypeIcon(credential) {
+        const type = this.getTypeById(credential.CredentialTypeID);
+        if (!type)
+            return 'fa-solid fa-key';
+        const iconMap = {
+            'AI': 'fa-solid fa-brain',
+            'Communication': 'fa-solid fa-envelope',
+            'Storage': 'fa-solid fa-cloud',
+            'Database': 'fa-solid fa-database',
+            'Authentication': 'fa-solid fa-shield-halved',
+            'Integration': 'fa-solid fa-plug'
+        };
+        return iconMap[type.Category] || 'fa-solid fa-key';
+    }
+    refresh() {
+        this.selectedCredentials.clear();
+        this.loadData();
+    }
+    // === Stats ===
+    get activeCount() {
+        return this.credentials.filter(c => c.IsActive).length;
+    }
+    getActiveCount() {
+        return this.activeCount;
+    }
+    get expiringCount() {
+        const now = new Date();
+        const thirtyDaysFromNow = new Date();
+        thirtyDaysFromNow.setDate(thirtyDaysFromNow.getDate() + 30);
+        return this.credentials.filter(c => c.ExpiresAt &&
+            new Date(c.ExpiresAt) >= now &&
+            new Date(c.ExpiresAt) <= thirtyDaysFromNow &&
+            c.IsActive).length;
+    }
+    getExpiringSoonCount() {
+        return this.expiringCount;
+    }
+    get expiredCount() {
+        const now = new Date();
+        return this.credentials.filter(c => c.ExpiresAt && new Date(c.ExpiresAt) < now).length;
+    }
+    getExpiredCount() {
+        return this.expiredCount;
+    }
+    // === Status Helpers ===
+    isExpired(credential) {
+        if (!credential.ExpiresAt)
+            return false;
+        return new Date(credential.ExpiresAt) < new Date();
+    }
+    isExpiringSoon(credential) {
+        if (!credential.ExpiresAt)
+            return false;
+        const expiresAt = new Date(credential.ExpiresAt);
+        const now = new Date();
+        const thirtyDaysFromNow = new Date();
+        thirtyDaysFromNow.setDate(thirtyDaysFromNow.getDate() + 30);
+        return expiresAt >= now && expiresAt <= thirtyDaysFromNow;
+    }
+    // === Bulk Operations ===
+    async bulkToggleActive(active) {
+        if (!this.UserCanUpdate || this.selectedCredentials.size === 0)
+            return;
+        let successCount = 0;
+        let failCount = 0;
+        for (const credId of this.selectedCredentials) {
+            const credential = this.credentials.find(c => c.ID === credId);
+            if (credential && credential.IsActive !== active) {
+                try {
+                    credential.IsActive = active;
+                    const success = await credential.Save();
+                    if (success) {
+                        successCount++;
+                    }
+                    else {
+                        credential.IsActive = !active;
+                        failCount++;
+                    }
+                }
+                catch {
+                    credential.IsActive = !active;
+                    failCount++;
+                }
+            }
+        }
+        this.clearSelection();
+        this.applyFilters();
+        const action = active ? 'activated' : 'deactivated';
+        if (successCount > 0) {
+            MJNotificationService.Instance.CreateSimpleNotification(`${successCount} credential(s) ${action}${failCount > 0 ? `, ${failCount} failed` : ''}`, failCount > 0 ? 'warning' : 'success', 3000);
+        }
+        else if (failCount > 0) {
+            MJNotificationService.Instance.CreateSimpleNotification(`Failed to ${action.slice(0, -1)} credentials`, 'error', 3000);
+        }
+    }
+    async bulkDelete() {
+        if (!this.UserCanDelete || this.selectedCredentials.size === 0)
+            return;
+        const count = this.selectedCredentials.size;
+        const confirmed = confirm(`Are you sure you want to delete ${count} credential(s)? This action cannot be undone.`);
+        if (!confirmed)
+            return;
+        let successCount = 0;
+        let failCount = 0;
+        for (const credId of this.selectedCredentials) {
+            const credential = this.credentials.find(c => c.ID === credId);
+            if (credential) {
+                try {
+                    const success = await credential.Delete();
+                    if (success) {
+                        successCount++;
+                        this.credentials = this.credentials.filter(c => c.ID !== credId);
+                    }
+                    else {
+                        failCount++;
+                    }
+                }
+                catch {
+                    failCount++;
+                }
+            }
+        }
+        this.clearSelection();
+        this.applyFilters();
+        if (successCount > 0) {
+            MJNotificationService.Instance.CreateSimpleNotification(`${successCount} credential(s) deleted${failCount > 0 ? `, ${failCount} failed` : ''}`, failCount > 0 ? 'warning' : 'success', 3000);
+        }
+        else {
+            MJNotificationService.Instance.CreateSimpleNotification('Failed to delete credentials', 'error', 3000);
+        }
+    }
+    static ɵfac = function CredentialsListResourceComponent_Factory(t) { return new (t || CredentialsListResourceComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CredentialsListResourceComponent, selectors: [["mj-credentials-list-resource"]], viewQuery: function CredentialsListResourceComponent_Query(rf, ctx) { if (rf & 1) {
+            i0.ɵɵviewQuery(_c0, 5);
+        } if (rf & 2) {
+            let _t;
+            i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.editPanel = _t.first);
+        } }, features: [i0.ɵɵInheritDefinitionFeature], decls: 5, vars: 3, consts: [["editPanel", ""], [1, "list-container"], ["text", "Loading credentials...", 4, "ngIf"], [4, "ngIf"], [3, "saved", "deleted", "credentialTypes"], ["text", "Loading credentials..."], [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"], ["class", "stat-item warning", 4, "ngIf"], ["class", "stat-item danger", 4, "ngIf"], [1, "header-actions"], ["class", "btn-primary", 3, "click", 4, "ngIf"], [1, "toolbar"], [1, "toolbar-left"], [1, "search-container"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search credentials...", 3, "input", "value"], ["class", "search-clear", 3, "click", 4, "ngIf"], [1, "filter-select", 3, "change", "value"], ["value", ""], [3, "value", 4, "ngFor", "ngForOf"], ["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"], ["class", "bulk-actions", 4, "ngIf"], ["class", "credentials-grid", 4, "ngIf"], ["class", "credentials-table-container", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], [1, "stat-item", "warning"], [1, "fa-solid", "fa-clock"], [1, "stat-item", "danger"], [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"], [3, "value"], [1, "bulk-actions"], [1, "bulk-info"], [1, "bulk-count"], [1, "btn-link", 3, "click"], [1, "bulk-buttons"], ["class", "btn-bulk", 3, "click", 4, "ngIf"], ["class", "btn-bulk danger", 3, "click", 4, "ngIf"], [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, "credentials-grid"], ["class", "credential-card", 3, "selected", "expired", "expiring", 4, "ngFor", "ngForOf"], [1, "credential-card"], ["class", "card-select", 4, "ngIf"], [1, "card-header"], [1, "card-icon", 3, "ngClass"], [1, "card-title"], [1, "credential-name"], [1, "credential-type"], [1, "card-actions"], ["class", "action-btn", 3, "title", "click", 4, "ngIf"], ["class", "action-btn", "title", "Edit", 3, "click", 4, "ngIf"], ["class", "action-btn danger", "title", "Delete", 3, "click", 4, "ngIf"], [1, "card-body", 3, "click"], [1, "status-badge", 3, "ngClass"], ["class", "credential-description", 4, "ngIf"], [1, "credential-meta"], ["class", "meta-item", 4, "ngIf"], ["class", "meta-item", 3, "warning", "danger", 4, "ngIf"], [1, "card-footer"], ["class", "category-tag", 4, "ngIf"], [1, "created-info"], [1, "card-select"], ["type", "checkbox", 3, "change", "checked"], [1, "action-btn", 3, "click", "title"], ["title", "Edit", 1, "action-btn", 3, "click"], [1, "fa-solid", "fa-pen"], ["title", "Delete", 1, "action-btn", "danger", 3, "click"], [1, "credential-description"], [1, "meta-item"], [1, "fa-solid", "fa-star"], [1, "fa-solid", "fa-calendar"], [1, "category-tag"], [1, "fa-solid", "fa-folder"], [1, "credentials-table-container"], [1, "credentials-table"], ["class", "col-select", 4, "ngIf"], [1, "col-name"], [1, "col-type"], [1, "col-category"], [1, "col-status"], [1, "col-expires"], [1, "col-used"], [1, "col-actions"], [3, "selected", "expired", 4, "ngFor", "ngForOf"], [1, "col-select"], [1, "col-name", 3, "click"], [1, "name-cell"], [3, "ngClass"], [1, "name-info"], ["class", "credential-desc", 4, "ngIf"], ["class", "default-badge", 4, "ngIf"], ["class", "category-pill", 4, "ngIf"], [1, "status-pill", 3, "ngClass"], [1, "table-actions"], ["class", "table-action-btn", 3, "title", "click", 4, "ngIf"], ["class", "table-action-btn", "title", "Edit", 3, "click", 4, "ngIf"], ["class", "table-action-btn danger", "title", "Delete", 3, "click", 4, "ngIf"], [1, "credential-desc"], [1, "default-badge"], [1, "category-pill"], [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-state"], [1, "empty-icon"]], template: function CredentialsListResourceComponent_Template(rf, ctx) { if (rf & 1) {
+            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵelementStart(0, "div", 1);
+            i0.ɵɵtemplate(1, CredentialsListResourceComponent_mj_loading_1_Template, 1, 0, "mj-loading", 2)(2, CredentialsListResourceComponent_ng_container_2_Template, 51, 20, "ng-container", 3);
+            i0.ɵɵelementStart(3, "mj-credential-edit-panel", 4, 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.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("ngIf", !ctx.isLoading);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("credentialTypes", ctx.types);
+        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i3.LoadingComponent, i4.CredentialEditPanelComponent], styles: [".list-container[_ngcontent-%COMP%] {\n    padding: 24px;\n    height: 100%;\n    overflow-y: auto;\n    background: var(--page-background, #f8fafc);\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(--text-primary, #1f2937);\n    margin: 0;\n}\n\n.header-stats[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.stat-item[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.stat-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.stat-item.active[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n.stat-item.warning[_ngcontent-%COMP%] {\n    color: #f59e0b;\n}\n\n.stat-item.danger[_ngcontent-%COMP%] {\n    color: #ef4444;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 10px;\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);\n}\n\n.btn-primary[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 13px;\n}\n\n\n\n.toolbar[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    background: var(--card-background, #ffffff);\n    padding: 16px;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.toolbar-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: wrap;\n    flex: 1;\n}\n\n.toolbar-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.search-container[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    background: var(--input-background, #f9fafb);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    padding: 8px 12px;\n    min-width: 280px;\n    position: relative;\n}\n\n.search-container[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--text-secondary, #6b7280);\n    margin-right: 8px;\n}\n\n.search-container[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    border: none;\n    background: transparent;\n    outline: none;\n    flex: 1;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.search-clear[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--border-color, #e5e7eb);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    font-size: 10px;\n}\n\n.search-clear[_ngcontent-%COMP%]:hover {\n    background: var(--text-secondary, #6b7280);\n    color: white;\n}\n\n.filter-select[_ngcontent-%COMP%] {\n    padding: 8px 12px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--input-background, #ffffff);\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    cursor: pointer;\n    min-width: 140px;\n}\n\n.filter-select[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: var(--accent-color, #6366f1);\n}\n\n.results-info[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    white-space: nowrap;\n}\n\n.view-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    background: var(--input-background, #f3f4f6);\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(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.view-btn[_ngcontent-%COMP%]:hover {\n    color: var(--accent-color, #6366f1);\n}\n\n.view-btn.active[_ngcontent-%COMP%] {\n    background: white;\n    color: var(--accent-color, #6366f1);\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(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--button-background, #ffffff);\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--button-hover, #f3f4f6);\n    color: var(--accent-color, #6366f1);\n}\n\n\n\n.bulk-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    border-radius: 10px;\n    margin-bottom: 16px;\n    color: white;\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: rgba(255, 255, 255, 0.8);\n    font-size: 13px;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.btn-link[_ngcontent-%COMP%]:hover {\n    color: white;\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: rgba(255, 255, 255, 0.2);\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    border-radius: 6px;\n    color: white;\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-bulk[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.3);\n}\n\n.btn-bulk.danger[_ngcontent-%COMP%] {\n    background: rgba(239, 68, 68, 0.3);\n    border-color: rgba(239, 68, 68, 0.5);\n}\n\n.btn-bulk.danger[_ngcontent-%COMP%]:hover {\n    background: rgba(239, 68, 68, 0.5);\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(--card-background, #ffffff);\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(--accent-color, #6366f1);\n    background: linear-gradient(to bottom, rgba(99, 102, 241, 0.03), white);\n}\n\n.credential-card.expired[_ngcontent-%COMP%] {\n    border-color: rgba(239, 68, 68, 0.3);\n}\n\n.credential-card.expiring[_ngcontent-%COMP%] {\n    border-color: rgba(245, 158, 11, 0.3);\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(--accent-color, #6366f1);\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(--border-color, #f3f4f6);\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: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    color: white;\n}\n\n.card-icon.inactive[_ngcontent-%COMP%] {\n    background: var(--icon-inactive, #e5e7eb);\n    color: var(--text-secondary, #6b7280);\n}\n\n.card-icon.expired[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n    color: white;\n}\n\n.card-icon.expiring[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    color: white;\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(--text-primary, #1f2937);\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(--text-secondary, #6b7280);\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(--input-background, #f3f4f6);\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--accent-color, #6366f1);\n    color: white;\n}\n\n.action-btn.danger[_ngcontent-%COMP%]:hover {\n    background: #ef4444;\n}\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: #d1fae5;\n    color: #059669;\n}\n\n.status-badge.inactive[_ngcontent-%COMP%] {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.status-badge.expired[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.status-badge.expiring[_ngcontent-%COMP%] {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.credential-description[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\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(--text-secondary, #6b7280);\n}\n\n.meta-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: var(--accent-color, #6366f1);\n}\n\n.meta-item.warning[_ngcontent-%COMP%] {\n    color: #f59e0b;\n}\n\n.meta-item.warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #f59e0b;\n}\n\n.meta-item.danger[_ngcontent-%COMP%] {\n    color: #ef4444;\n}\n\n.meta-item.danger[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #ef4444;\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(--footer-background, #f9fafb);\n    border-top: 1px solid var(--border-color, #f3f4f6);\n}\n\n.category-tag[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: var(--tag-background, #e0e7ff);\n    color: var(--accent-color, #6366f1);\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(--text-tertiary, #9ca3af);\n}\n\n\n\n.credentials-table-container[_ngcontent-%COMP%] {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.credentials-table[_ngcontent-%COMP%] {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.credentials-table[_ngcontent-%COMP%]   thead[_ngcontent-%COMP%] {\n    background: var(--header-background, #f9fafb);\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(--text-secondary, #6b7280);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.credentials-table[_ngcontent-%COMP%]   td[_ngcontent-%COMP%] {\n    padding: 12px 16px;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\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(--row-hover, #f9fafb);\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.selected[_ngcontent-%COMP%] {\n    background: rgba(99, 102, 241, 0.05);\n}\n\n.credentials-table[_ngcontent-%COMP%]   tbody[_ngcontent-%COMP%]   tr.expired[_ngcontent-%COMP%] {\n    background: rgba(239, 68, 68, 0.03);\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(--accent-color, #6366f1);\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: #d1fae5;\n    color: #059669;\n}\n\n.name-cell[_ngcontent-%COMP%]   i.inactive[_ngcontent-%COMP%] {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.name-cell[_ngcontent-%COMP%]   i.expired[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.name-cell[_ngcontent-%COMP%]   i.expiring[_ngcontent-%COMP%] {\n    background: #fef3c7;\n    color: #d97706;\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(--text-primary, #1f2937);\n}\n\n.name-info[_ngcontent-%COMP%]   .credential-desc[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--text-secondary, #9ca3af);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.default-badge[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n    color: white;\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: var(--tag-background, #e0e7ff);\n    color: var(--accent-color, #6366f1);\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: #d1fae5;\n    color: #059669;\n}\n\n.status-pill.inactive[_ngcontent-%COMP%] {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.status-pill.expired[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.status-pill.expiring[_ngcontent-%COMP%] {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.col-expires[_ngcontent-%COMP%], \n.col-used[_ngcontent-%COMP%] {\n    white-space: nowrap;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.col-expires.warning[_ngcontent-%COMP%] {\n    color: #f59e0b;\n    font-weight: 500;\n}\n\n.col-expires.danger[_ngcontent-%COMP%] {\n    color: #ef4444;\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(--input-background, #f3f4f6);\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 13px;\n}\n\n.table-action-btn[_ngcontent-%COMP%]:hover {\n    background: var(--accent-color, #6366f1);\n    color: white;\n}\n\n.table-action-btn.danger[_ngcontent-%COMP%]:hover {\n    background: #ef4444;\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(--card-background, #ffffff);\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: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\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(--accent-color, #6366f1);\n}\n\n.empty-state[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0 0 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(--accent-color, #6366f1);\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(--accent-hover, #4f46e5);\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')
+], CredentialsListResourceComponent);
+export { CredentialsListResourceComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CredentialsListResourceComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-credentials-list-resource', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"list-container\">\n    <mj-loading *ngIf=\"isLoading\" text=\"Loading credentials...\"></mj-loading>\n\n    <ng-container *ngIf=\"!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                    <span class=\"stat-item warning\" *ngIf=\"getExpiringSoonCount() > 0\">\n                        <i class=\"fa-solid fa-clock\"></i>\n                        {{getExpiringSoonCount()}} expiring\n                    </span>\n                    <span class=\"stat-item danger\" *ngIf=\"getExpiredCount() > 0\">\n                        <i class=\"fa-solid fa-exclamation-circle\"></i>\n                        {{getExpiredCount()}} expired\n                    </span>\n                </div>\n            </div>\n            <div class=\"header-actions\">\n                <button class=\"btn-primary\" *ngIf=\"UserCanCreate\" (click)=\"createNewCredential()\">\n                    <i class=\"fa-solid fa-plus\"></i>\n                    <span>New Credential</span>\n                </button>\n            </div>\n        </div>\n\n        <!-- Toolbar -->\n        <div class=\"toolbar\">\n            <div class=\"toolbar-left\">\n                <div class=\"search-container\">\n                    <i class=\"fa-solid fa-search\"></i>\n                    <input\n                        type=\"text\"\n                        placeholder=\"Search credentials...\"\n                        [value]=\"searchText\"\n                        (input)=\"onSearchChange($any($event.target).value)\"\n                    />\n                    <button class=\"search-clear\" *ngIf=\"searchText\" (click)=\"onSearchChange('')\">\n                        <i class=\"fa-solid fa-times\"></i>\n                    </button>\n                </div>\n\n                <select\n                    class=\"filter-select\"\n                    [value]=\"selectedTypeFilter\"\n                    (change)=\"onTypeFilterChange($any($event.target).value)\"\n                >\n                    <option value=\"\">All Types</option>\n                    <option *ngFor=\"let type of types\" [value]=\"type.ID\">{{type.Name}}</option>\n                </select>\n\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\n            <div class=\"toolbar-right\">\n                <div class=\"results-info\">\n                    {{filteredCredentials.length}} of {{credentials.length}}\n                </div>\n\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\n                <button class=\"btn-icon\" (click)=\"refresh()\" title=\"Refresh\">\n                    <i class=\"fa-solid fa-refresh\"></i>\n                </button>\n            </div>\n        </div>\n\n        <!-- Bulk Actions Bar -->\n        <div class=\"bulk-actions\" *ngIf=\"selectedCredentials.size > 0\">\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                <button class=\"btn-bulk\" *ngIf=\"UserCanUpdate\" (click)=\"bulkToggleActive(true)\">\n                    <i class=\"fa-solid fa-toggle-on\"></i>\n                    Activate\n                </button>\n                <button class=\"btn-bulk\" *ngIf=\"UserCanUpdate\" (click)=\"bulkToggleActive(false)\">\n                    <i class=\"fa-solid fa-toggle-off\"></i>\n                    Deactivate\n                </button>\n                <button class=\"btn-bulk danger\" *ngIf=\"UserCanDelete\" (click)=\"bulkDelete()\">\n                    <i class=\"fa-solid fa-trash\"></i>\n                    Delete\n                </button>\n            </div>\n        </div>\n\n        <!-- Grid View -->\n        <div class=\"credentials-grid\" *ngIf=\"viewMode === 'grid' && filteredCredentials.length > 0\">\n            <div\n                class=\"credential-card\"\n                *ngFor=\"let credential of filteredCredentials\"\n                [class.selected]=\"selectedCredentials.has(credential.ID)\"\n                [class.expired]=\"isExpired(credential)\"\n                [class.expiring]=\"isExpiringSoon(credential)\"\n            >\n                <!-- Selection Checkbox -->\n                <div class=\"card-select\" *ngIf=\"UserCanUpdate || UserCanDelete\">\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                        <button\n                            class=\"action-btn\"\n                            *ngIf=\"UserCanUpdate\"\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                        <button\n                            class=\"action-btn\"\n                            *ngIf=\"UserCanUpdate\"\n                            (click)=\"editCredential(credential, $event)\"\n                            title=\"Edit\"\n                        >\n                            <i class=\"fa-solid fa-pen\"></i>\n                        </button>\n                        <button\n                            class=\"action-btn danger\"\n                            *ngIf=\"UserCanDelete\"\n                            (click)=\"deleteCredential(credential, $event)\"\n                            title=\"Delete\"\n                        >\n                            <i class=\"fa-solid fa-trash\"></i>\n                        </button>\n                    </div>\n                </div>\n\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\n                    <p class=\"credential-description\" *ngIf=\"credential.Description\">\n                        {{credential.Description}}\n                    </p>\n\n                    <div class=\"credential-meta\">\n                        <div class=\"meta-item\" *ngIf=\"credential.IsDefault\">\n                            <i class=\"fa-solid fa-star\"></i>\n                            <span>Default</span>\n                        </div>\n                        <div class=\"meta-item\" *ngIf=\"credential.ExpiresAt\" [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                        <div class=\"meta-item\" *ngIf=\"credential.LastUsedAt\">\n                            <i class=\"fa-solid fa-clock\"></i>\n                            <span>Last used: {{formatDate(credential.LastUsedAt)}}</span>\n                        </div>\n                    </div>\n                </div>\n\n                <div class=\"card-footer\">\n                    <div class=\"category-tag\" *ngIf=\"credential.Category\">\n                        <i class=\"fa-solid fa-folder\"></i>\n                        {{credential.Category}}\n                    </div>\n                    <div class=\"created-info\">\n                        Created {{formatDate(credential.__mj_CreatedAt)}}\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- List View -->\n        <div class=\"credentials-table-container\" *ngIf=\"viewMode === 'list' && filteredCredentials.length > 0\">\n            <table class=\"credentials-table\">\n                <thead>\n                    <tr>\n                        <th class=\"col-select\" *ngIf=\"UserCanUpdate || UserCanDelete\">\n                            <input\n                                type=\"checkbox\"\n                                [checked]=\"isAllSelected()\"\n                                (change)=\"toggleSelectAll()\"\n                            />\n                        </th>\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                    <tr\n                        *ngFor=\"let credential of filteredCredentials\"\n                        [class.selected]=\"selectedCredentials.has(credential.ID)\"\n                        [class.expired]=\"isExpired(credential)\"\n                    >\n                        <td class=\"col-select\" *ngIf=\"UserCanUpdate || UserCanDelete\">\n                            <input\n                                type=\"checkbox\"\n                                [checked]=\"selectedCredentials.has(credential.ID)\"\n                                (change)=\"toggleSelection(credential)\"\n                            />\n                        </td>\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                                    <span class=\"credential-desc\" *ngIf=\"credential.Description\">{{credential.Description}}</span>\n                                </div>\n                                <span class=\"default-badge\" *ngIf=\"credential.IsDefault\">Default</span>\n                            </div>\n                        </td>\n                        <td class=\"col-type\">{{credential.CredentialType || '-'}}</td>\n                        <td class=\"col-category\">\n                            <span class=\"category-pill\" *ngIf=\"credential.Category\">{{credential.Category}}</span>\n                            <span *ngIf=\"!credential.Category\">-</span>\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                                <button\n                                    class=\"table-action-btn\"\n                                    *ngIf=\"UserCanUpdate\"\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                                <button\n                                    class=\"table-action-btn\"\n                                    *ngIf=\"UserCanUpdate\"\n                                    (click)=\"editCredential(credential, $event)\"\n                                    title=\"Edit\"\n                                >\n                                    <i class=\"fa-solid fa-pen\"></i>\n                                </button>\n                                <button\n                                    class=\"table-action-btn danger\"\n                                    *ngIf=\"UserCanDelete\"\n                                    (click)=\"deleteCredential(credential, $event)\"\n                                    title=\"Delete\"\n                                >\n                                    <i class=\"fa-solid fa-trash\"></i>\n                                </button>\n                            </div>\n                        </td>\n                    </tr>\n                </tbody>\n            </table>\n        </div>\n\n        <!-- Empty State -->\n        <div class=\"empty-state\" *ngIf=\"filteredCredentials.length === 0\">\n            <div class=\"empty-icon\">\n                <i class=\"fa-solid fa-key\"></i>\n            </div>\n            <h3>No Credentials Found</h3>\n            <p *ngIf=\"searchText || selectedTypeFilter || selectedStatusFilter\">\n                No credentials match your current filters.\n                <button class=\"btn-link\" (click)=\"clearFilters()\">Clear filters</button>\n            </p>\n            <p *ngIf=\"!searchText && !selectedTypeFilter && !selectedStatusFilter\">\n                Get started by creating your first credential.\n            </p>\n            <button class=\"btn-primary\" *ngIf=\"UserCanCreate && !searchText && !selectedTypeFilter && !selectedStatusFilter\" (click)=\"createNewCredential()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                Create Credential\n            </button>\n        </div>\n    </ng-container>\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(--page-background, #f8fafc);\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(--text-primary, #1f2937);\n    margin: 0;\n}\n\n.header-stats {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n    flex-wrap: wrap;\n}\n\n.stat-item {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.stat-item i {\n    font-size: 12px;\n}\n\n.stat-item.active {\n    color: #10b981;\n}\n\n.stat-item.warning {\n    color: #f59e0b;\n}\n\n.stat-item.danger {\n    color: #ef4444;\n}\n\n.header-actions {\n    display: flex;\n    gap: 12px;\n}\n\n.btn-primary {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    color: white;\n    border: none;\n    border-radius: 10px;\n    font-size: 14px;\n    font-weight: 600;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);\n}\n\n.btn-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.4);\n}\n\n.btn-primary i {\n    font-size: 13px;\n}\n\n/* Toolbar */\n.toolbar {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: 16px;\n    margin-bottom: 16px;\n    flex-wrap: wrap;\n    background: var(--card-background, #ffffff);\n    padding: 16px;\n    border-radius: 12px;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);\n}\n\n.toolbar-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    flex-wrap: wrap;\n    flex: 1;\n}\n\n.toolbar-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.search-container {\n    display: flex;\n    align-items: center;\n    background: var(--input-background, #f9fafb);\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    padding: 8px 12px;\n    min-width: 280px;\n    position: relative;\n}\n\n.search-container i {\n    color: var(--text-secondary, #6b7280);\n    margin-right: 8px;\n}\n\n.search-container input {\n    border: none;\n    background: transparent;\n    outline: none;\n    flex: 1;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n}\n\n.search-clear {\n    position: absolute;\n    right: 8px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 20px;\n    height: 20px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--border-color, #e5e7eb);\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    color: var(--text-secondary, #6b7280);\n    font-size: 10px;\n}\n\n.search-clear:hover {\n    background: var(--text-secondary, #6b7280);\n    color: white;\n}\n\n.filter-select {\n    padding: 8px 12px;\n    border: 1px solid var(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--input-background, #ffffff);\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    cursor: pointer;\n    min-width: 140px;\n}\n\n.filter-select:focus {\n    outline: none;\n    border-color: var(--accent-color, #6366f1);\n}\n\n.results-info {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n    white-space: nowrap;\n}\n\n.view-toggle {\n    display: flex;\n    background: var(--input-background, #f3f4f6);\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(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.view-btn:hover {\n    color: var(--accent-color, #6366f1);\n}\n\n.view-btn.active {\n    background: white;\n    color: var(--accent-color, #6366f1);\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(--border-color, #e5e7eb);\n    border-radius: 8px;\n    background: var(--button-background, #ffffff);\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon:hover {\n    background: var(--button-hover, #f3f4f6);\n    color: var(--accent-color, #6366f1);\n}\n\n/* Bulk Actions Bar */\n.bulk-actions {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 12px 16px;\n    background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);\n    border-radius: 10px;\n    margin-bottom: 16px;\n    color: white;\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: rgba(255, 255, 255, 0.8);\n    font-size: 13px;\n    cursor: pointer;\n    text-decoration: underline;\n    padding: 0;\n}\n\n.btn-link:hover {\n    color: white;\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: rgba(255, 255, 255, 0.2);\n    border: 1px solid rgba(255, 255, 255, 0.3);\n    border-radius: 6px;\n    color: white;\n    font-size: 13px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-bulk:hover {\n    background: rgba(255, 255, 255, 0.3);\n}\n\n.btn-bulk.danger {\n    background: rgba(239, 68, 68, 0.3);\n    border-color: rgba(239, 68, 68, 0.5);\n}\n\n.btn-bulk.danger:hover {\n    background: rgba(239, 68, 68, 0.5);\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(--card-background, #ffffff);\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(--accent-color, #6366f1);\n    background: linear-gradient(to bottom, rgba(99, 102, 241, 0.03), white);\n}\n\n.credential-card.expired {\n    border-color: rgba(239, 68, 68, 0.3);\n}\n\n.credential-card.expiring {\n    border-color: rgba(245, 158, 11, 0.3);\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(--accent-color, #6366f1);\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(--border-color, #f3f4f6);\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: linear-gradient(135deg, #10b981 0%, #059669 100%);\n    color: white;\n}\n\n.card-icon.inactive {\n    background: var(--icon-inactive, #e5e7eb);\n    color: var(--text-secondary, #6b7280);\n}\n\n.card-icon.expired {\n    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);\n    color: white;\n}\n\n.card-icon.expiring {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    color: white;\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(--text-primary, #1f2937);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.credential-type {\n    font-size: 12px;\n    color: var(--text-secondary, #6b7280);\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(--input-background, #f3f4f6);\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.action-btn:hover {\n    background: var(--accent-color, #6366f1);\n    color: white;\n}\n\n.action-btn.danger:hover {\n    background: #ef4444;\n}\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: #d1fae5;\n    color: #059669;\n}\n\n.status-badge.inactive {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.status-badge.expired {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.status-badge.expiring {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.credential-description {\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\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(--text-secondary, #6b7280);\n}\n\n.meta-item i {\n    font-size: 11px;\n    color: var(--accent-color, #6366f1);\n}\n\n.meta-item.warning {\n    color: #f59e0b;\n}\n\n.meta-item.warning i {\n    color: #f59e0b;\n}\n\n.meta-item.danger {\n    color: #ef4444;\n}\n\n.meta-item.danger i {\n    color: #ef4444;\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(--footer-background, #f9fafb);\n    border-top: 1px solid var(--border-color, #f3f4f6);\n}\n\n.category-tag {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: var(--tag-background, #e0e7ff);\n    color: var(--accent-color, #6366f1);\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(--text-tertiary, #9ca3af);\n}\n\n/* Table View */\n.credentials-table-container {\n    background: var(--card-background, #ffffff);\n    border-radius: 12px;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);\n    overflow: hidden;\n}\n\n.credentials-table {\n    width: 100%;\n    border-collapse: collapse;\n}\n\n.credentials-table thead {\n    background: var(--header-background, #f9fafb);\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(--text-secondary, #6b7280);\n    text-transform: uppercase;\n    letter-spacing: 0.05em;\n    border-bottom: 1px solid var(--border-color, #e5e7eb);\n}\n\n.credentials-table td {\n    padding: 12px 16px;\n    font-size: 14px;\n    color: var(--text-primary, #1f2937);\n    border-bottom: 1px solid var(--border-color, #f3f4f6);\n}\n\n.credentials-table tbody tr {\n    transition: background 0.2s ease;\n}\n\n.credentials-table tbody tr:hover {\n    background: var(--row-hover, #f9fafb);\n}\n\n.credentials-table tbody tr.selected {\n    background: rgba(99, 102, 241, 0.05);\n}\n\n.credentials-table tbody tr.expired {\n    background: rgba(239, 68, 68, 0.03);\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(--accent-color, #6366f1);\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: #d1fae5;\n    color: #059669;\n}\n\n.name-cell i.inactive {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.name-cell i.expired {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.name-cell i.expiring {\n    background: #fef3c7;\n    color: #d97706;\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(--text-primary, #1f2937);\n}\n\n.name-info .credential-desc {\n    font-size: 12px;\n    color: var(--text-secondary, #9ca3af);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.default-badge {\n    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);\n    color: white;\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: var(--tag-background, #e0e7ff);\n    color: var(--accent-color, #6366f1);\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: #d1fae5;\n    color: #059669;\n}\n\n.status-pill.inactive {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n.status-pill.expired {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.status-pill.expiring {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.col-expires,\n.col-used {\n    white-space: nowrap;\n    font-size: 13px;\n    color: var(--text-secondary, #6b7280);\n}\n\n.col-expires.warning {\n    color: #f59e0b;\n    font-weight: 500;\n}\n\n.col-expires.danger {\n    color: #ef4444;\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(--input-background, #f3f4f6);\n    border-radius: 6px;\n    color: var(--text-secondary, #6b7280);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    font-size: 13px;\n}\n\n.table-action-btn:hover {\n    background: var(--accent-color, #6366f1);\n    color: white;\n}\n\n.table-action-btn.danger:hover {\n    background: #ef4444;\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(--card-background, #ffffff);\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: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);\n    border-radius: 20px;\n    margin-bottom: 24px;\n}\n\n.empty-icon i {\n    font-size: 36px;\n    color: var(--accent-color, #6366f1);\n}\n\n.empty-state h3 {\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--text-primary, #1f2937);\n    margin: 0 0 8px 0;\n}\n\n.empty-state p {\n    font-size: 14px;\n    color: var(--text-secondary, #6b7280);\n    margin: 0 0 24px 0;\n    max-width: 400px;\n    line-height: 1.5;\n}\n\n.empty-state .btn-link {\n    color: var(--accent-color, #6366f1);\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(--accent-hover, #4f46e5);\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: 24 }); })();
+//# sourceMappingURL=credentials-list-resource.component.js.map