@memberjunction/ng-dashboards 2.127.0 → 2.129.0

package/dist/Credentials/components/credential-edit-panel.component.js

@@ -0,0 +1,694 @@
+import { Component, Input, Output, EventEmitter, ChangeDetectionStrategy } from '@angular/core';
+import { Metadata, RunView } from '@memberjunction/core';
+import { MJNotificationService } from '@memberjunction/ng-notifications';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@angular/forms";
+import * as i3 from "@memberjunction/ng-shared-generic";
+function CredentialEditPanelComponent_div_0_div_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵstyleProp("background-color", ctx_r1.getTypeColor(ctx_r1.selectedType) + "15")("color", ctx_r1.getTypeColor(ctx_r1.selectedType));
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.getTypeIcon(ctx_r1.selectedType));
+} }
+function CredentialEditPanelComponent_div_0_div_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 24);
+    i0.ɵɵelement(1, "i", 25);
+    i0.ɵɵelementEnd();
+} }
+function CredentialEditPanelComponent_div_0_span_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.selectedType.Name);
+} }
+function CredentialEditPanelComponent_div_0_span_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 26);
+    i0.ɵɵtext(1, "Select a credential type");
+    i0.ɵɵelementEnd();
+} }
+function CredentialEditPanelComponent_div_0_mj_loading_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 27);
+} }
+function CredentialEditPanelComponent_div_0_form_15_optgroup_15_option_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 37);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const type_r4 = ctx.$implicit;
+    i0.ɵɵproperty("ngValue", type_r4.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", type_r4.Name, " ");
+} }
+function CredentialEditPanelComponent_div_0_form_15_optgroup_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "optgroup", 60);
+    i0.ɵɵtemplate(1, CredentialEditPanelComponent_div_0_form_15_optgroup_15_option_1_Template, 2, 2, "option", 42);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const group_r5 = ctx.$implicit;
+    i0.ɵɵproperty("label", group_r5.category);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngForOf", group_r5.types);
+} }
+function CredentialEditPanelComponent_div_0_form_15_span_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵtext(1, "Type cannot be changed after creation");
+    i0.ɵɵelementEnd();
+} }
+function CredentialEditPanelComponent_div_0_form_15_option_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "option", 37);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const cat_r6 = ctx.$implicit;
+    i0.ɵɵproperty("ngValue", cat_r6.ID);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(cat_r6.Name);
+} }
+function CredentialEditPanelComponent_div_0_form_15_div_28_div_7_div_3_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 66)(1, "input", 67);
+    i0.ɵɵlistener("input", function CredentialEditPanelComponent_div_0_form_15_div_28_div_7_div_3_Template_input_input_1_listener($event) { i0.ɵɵrestoreView(_r7); const field_r8 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onValueChange(field_r8.name, $event.target.value)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "button", 68);
+    i0.ɵɵlistener("click", function CredentialEditPanelComponent_div_0_form_15_div_28_div_7_div_3_Template_button_click_2_listener() { i0.ɵɵrestoreView(_r7); const field_r8 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleSecretVisibility(field_r8.name)); });
+    i0.ɵɵelement(3, "i");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const field_r8 = i0.ɵɵnextContext().$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("type", ctx_r1.isSecretVisible(field_r8.name) ? "text" : "password")("id", "field-" + field_r8.name)("name", "field-" + field_r8.name)("value", ctx_r1.credentialValues[field_r8.name])("placeholder", field_r8.description || "Enter " + field_r8.title)("disabled", ctx_r1.isSaving)("required", field_r8.required);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("title", ctx_r1.isSecretVisible(field_r8.name) ? "Hide" : "Show");
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(ctx_r1.isSecretVisible(field_r8.name) ? "fa-solid fa-eye-slash" : "fa-solid fa-eye");
+} }
+function CredentialEditPanelComponent_div_0_form_15_div_28_div_7_ng_template_4_input_0_Template(rf, ctx) { if (rf & 1) {
+    const _r9 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "input", 70);
+    i0.ɵɵlistener("input", function CredentialEditPanelComponent_div_0_form_15_div_28_div_7_ng_template_4_input_0_Template_input_input_0_listener($event) { i0.ɵɵrestoreView(_r9); const field_r8 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.onValueChange(field_r8.name, $event.target.value)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r8 = i0.ɵɵnextContext(2).$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("type", field_r8.type === "number" ? "number" : "text")("id", "field-" + field_r8.name)("name", "field-" + field_r8.name)("value", ctx_r1.credentialValues[field_r8.name])("placeholder", field_r8.description || "Enter " + field_r8.title)("disabled", ctx_r1.isSaving)("required", field_r8.required);
+} }
+function CredentialEditPanelComponent_div_0_form_15_div_28_div_7_ng_template_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵtemplate(0, CredentialEditPanelComponent_div_0_form_15_div_28_div_7_ng_template_4_input_0_Template, 1, 7, "input", 69);
+} if (rf & 2) {
+    const field_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵproperty("ngIf", field_r8.type === "string" || field_r8.type === "number");
+} }
+function CredentialEditPanelComponent_div_0_form_15_div_28_div_7_span_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 59);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r8 = i0.ɵɵnextContext().$implicit;
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(field_r8.description);
+} }
+function CredentialEditPanelComponent_div_0_form_15_div_28_div_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 32)(1, "label", 64);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(3, CredentialEditPanelComponent_div_0_form_15_div_28_div_7_div_3_Template, 4, 10, "div", 65)(4, CredentialEditPanelComponent_div_0_form_15_div_28_div_7_ng_template_4_Template, 1, 1, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor)(6, CredentialEditPanelComponent_div_0_form_15_div_28_div_7_span_6_Template, 2, 1, "span", 39);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const field_r8 = ctx.$implicit;
+    const regularField_r10 = i0.ɵɵreference(5);
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("required", field_r8.required);
+    i0.ɵɵproperty("for", "field-" + field_r8.name);
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", field_r8.title, " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", field_r8.isSecret)("ngIfElse", regularField_r10);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", field_r8.description && !field_r8.isSecret);
+} }
+function CredentialEditPanelComponent_div_0_form_15_div_28_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 29)(1, "h3", 30);
+    i0.ɵɵelement(2, "i", 25);
+    i0.ɵɵtext(3, " Credential Values ");
+    i0.ɵɵelementStart(4, "span", 61);
+    i0.ɵɵelement(5, "i", 62);
+    i0.ɵɵtext(6, " Encrypted ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(7, CredentialEditPanelComponent_div_0_form_15_div_28_div_7_Template, 7, 7, "div", 63);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("ngForOf", ctx_r1.schemaFields);
+} }
+function CredentialEditPanelComponent_div_0_form_15_div_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 71)(1, "div", 72);
+    i0.ɵɵelement(2, "i", 73);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p");
+    i0.ɵɵtext(4, "Select a credential type above to configure the credential values.");
+    i0.ɵɵelementEnd()();
+} }
+function CredentialEditPanelComponent_div_0_form_15_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "form", 28);
+    i0.ɵɵlistener("submit", function CredentialEditPanelComponent_div_0_form_15_Template_form_submit_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); $event.preventDefault(); return i0.ɵɵresetView(ctx_r1.save()); });
+    i0.ɵɵelementStart(1, "div", 29)(2, "h3", 30);
+    i0.ɵɵelement(3, "i", 31);
+    i0.ɵɵtext(4, " Basic Information ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 32)(6, "label", 33);
+    i0.ɵɵtext(7, "Name");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "input", 34);
+    i0.ɵɵtwoWayListener("ngModelChange", function CredentialEditPanelComponent_div_0_form_15_Template_input_ngModelChange_8_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.name, $event) || (ctx_r1.name = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(9, "div", 32)(10, "label", 35);
+    i0.ɵɵtext(11, "Credential Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "select", 36);
+    i0.ɵɵtwoWayListener("ngModelChange", function CredentialEditPanelComponent_div_0_form_15_Template_select_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedTypeId, $event) || (ctx_r1.selectedTypeId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("ngModelChange", function CredentialEditPanelComponent_div_0_form_15_Template_select_ngModelChange_12_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTypeChange()); });
+    i0.ɵɵelementStart(13, "option", 37);
+    i0.ɵɵtext(14, "Select a type...");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(15, CredentialEditPanelComponent_div_0_form_15_optgroup_15_Template, 2, 2, "optgroup", 38);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(16, CredentialEditPanelComponent_div_0_form_15_span_16_Template, 2, 0, "span", 39);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(17, "div", 32)(18, "label", 40);
+    i0.ɵɵtext(19, "Category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "select", 41);
+    i0.ɵɵtwoWayListener("ngModelChange", function CredentialEditPanelComponent_div_0_form_15_Template_select_ngModelChange_20_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.selectedCategoryId, $event) || (ctx_r1.selectedCategoryId = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(21, "option", 37);
+    i0.ɵɵtext(22, "No category");
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(23, CredentialEditPanelComponent_div_0_form_15_option_23_Template, 2, 2, "option", 42);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(24, "div", 32)(25, "label", 43);
+    i0.ɵɵtext(26, "Description");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(27, "textarea", 44);
+    i0.ɵɵtwoWayListener("ngModelChange", function CredentialEditPanelComponent_div_0_form_15_Template_textarea_ngModelChange_27_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.description, $event) || (ctx_r1.description = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(28, CredentialEditPanelComponent_div_0_form_15_div_28_Template, 8, 1, "div", 45)(29, CredentialEditPanelComponent_div_0_form_15_div_29_Template, 5, 0, "div", 46);
+    i0.ɵɵelementStart(30, "div", 29)(31, "h3", 30);
+    i0.ɵɵelement(32, "i", 47);
+    i0.ɵɵtext(33, " Settings ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(34, "div", 48)(35, "label", 49)(36, "span", 50)(37, "input", 51);
+    i0.ɵɵtwoWayListener("ngModelChange", function CredentialEditPanelComponent_div_0_form_15_Template_input_ngModelChange_37_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.isActive, $event) || (ctx_r1.isActive = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(38, "span", 52);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(39, "span", 53)(40, "span", 54);
+    i0.ɵɵtext(41, "Active");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(42, "span", 55);
+    i0.ɵɵtext(43, "Enable this credential for use");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(44, "div", 48)(45, "label", 49)(46, "span", 50)(47, "input", 56);
+    i0.ɵɵtwoWayListener("ngModelChange", function CredentialEditPanelComponent_div_0_form_15_Template_input_ngModelChange_47_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.isDefault, $event) || (ctx_r1.isDefault = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(48, "span", 52);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(49, "span", 53)(50, "span", 54);
+    i0.ɵɵtext(51, "Default");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(52, "span", 55);
+    i0.ɵɵtext(53, "Use as default for this credential type");
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(54, "div", 32)(55, "label", 57);
+    i0.ɵɵtext(56, "Expiration Date");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(57, "input", 58);
+    i0.ɵɵlistener("change", function CredentialEditPanelComponent_div_0_form_15_Template_input_change_57_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onExpiresAtChange($event.target.value)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(58, "span", 59);
+    i0.ɵɵtext(59, "Leave empty for no expiration");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.name);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedTypeId);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving || !ctx_r1.isNew);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngValue", "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.groupedCredentialTypes);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.isNew);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.selectedCategoryId);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngValue", "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("ngForOf", ctx_r1.categories);
+    i0.ɵɵadvance(4);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.description);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.schemaFields.length > 0);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isNew && !ctx_r1.selectedTypeId);
+    i0.ɵɵadvance(8);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.isActive);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵadvance(10);
+    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.isDefault);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵadvance(10);
+    i0.ɵɵproperty("value", ctx_r1.formatDateForInput(ctx_r1.expiresAt))("disabled", ctx_r1.isSaving);
+} }
+function CredentialEditPanelComponent_div_0_button_18_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 74);
+    i0.ɵɵlistener("click", function CredentialEditPanelComponent_div_0_button_18_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r11); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.deleteCredential()); });
+    i0.ɵɵelement(1, "i", 75);
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3, "Delete");
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+} }
+function CredentialEditPanelComponent_div_0_i_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 76);
+} }
+function CredentialEditPanelComponent_div_0_i_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 77);
+} }
+function CredentialEditPanelComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 2);
+    i0.ɵɵlistener("click", function CredentialEditPanelComponent_div_0_Template_div_click_0_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onBackdropClick($event)); });
+    i0.ɵɵelementStart(1, "div", 3)(2, "div", 4)(3, "div", 5);
+    i0.ɵɵtemplate(4, CredentialEditPanelComponent_div_0_div_4_Template, 2, 6, "div", 6)(5, CredentialEditPanelComponent_div_0_div_5_Template, 2, 0, "div", 7);
+    i0.ɵɵelementStart(6, "div", 8)(7, "h2");
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(9, CredentialEditPanelComponent_div_0_span_9_Template, 2, 1, "span", 9)(10, CredentialEditPanelComponent_div_0_span_10_Template, 2, 0, "span", 9);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "button", 10);
+    i0.ɵɵlistener("click", function CredentialEditPanelComponent_div_0_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closePanel()); });
+    i0.ɵɵelement(12, "i", 11);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 12);
+    i0.ɵɵtemplate(14, CredentialEditPanelComponent_div_0_mj_loading_14_Template, 1, 0, "mj-loading", 13)(15, CredentialEditPanelComponent_div_0_form_15_Template, 60, 21, "form", 14);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "div", 15)(17, "div", 16);
+    i0.ɵɵtemplate(18, CredentialEditPanelComponent_div_0_button_18_Template, 4, 1, "button", 17);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(19, "div", 18)(20, "button", 19);
+    i0.ɵɵlistener("click", function CredentialEditPanelComponent_div_0_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closePanel()); });
+    i0.ɵɵtext(21, " Cancel ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(22, "button", 20);
+    i0.ɵɵlistener("click", function CredentialEditPanelComponent_div_0_Template_button_click_22_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.save()); });
+    i0.ɵɵtemplate(23, CredentialEditPanelComponent_div_0_i_23_Template, 1, 0, "i", 21)(24, CredentialEditPanelComponent_div_0_i_24_Template, 1, 0, "i", 22);
+    i0.ɵɵelementStart(25, "span");
+    i0.ɵɵtext(26);
+    i0.ɵɵelementEnd()()()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵclassProp("open", ctx_r1.isOpen);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedType);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.selectedType);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(ctx_r1.panelTitle);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.selectedType);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.selectedType);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", ctx_r1.isLoading);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.isLoading);
+    i0.ɵɵadvance(3);
+    i0.ɵɵproperty("ngIf", !ctx_r1.isNew);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("disabled", ctx_r1.isSaving || !ctx_r1.canSave);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", ctx_r1.isSaving);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngIf", !ctx_r1.isSaving);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(ctx_r1.isNew ? "Create" : "Save");
+} }
+export function LoadCredentialEditPanel() {
+    // Prevents tree-shaking
+}
+export class CredentialEditPanelComponent {
+    cdr;
+    credential = null;
+    credentialTypes = [];
+    isOpen = false;
+    close = new EventEmitter();
+    saved = new EventEmitter();
+    deleted = new EventEmitter();
+    isLoading = false;
+    isSaving = false;
+    isNew = false;
+    categories = [];
+    // Form fields
+    name = '';
+    description = '';
+    selectedTypeId = '';
+    selectedCategoryId = '';
+    isActive = true;
+    isDefault = false;
+    expiresAt = null;
+    // Dynamic credential values based on type schema
+    credentialValues = {};
+    schemaFields = [];
+    showSecretFields = new Set();
+    _metadata = new Metadata();
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        this.loadCategories();
+    }
+    ngOnDestroy() {
+        // Cleanup
+    }
+    get selectedType() {
+        return this.credentialTypes.find(t => t.ID === this.selectedTypeId) || null;
+    }
+    get panelTitle() {
+        return this.isNew ? 'Create Credential' : 'Edit Credential';
+    }
+    get canSave() {
+        if (!this.name.trim() || !this.selectedTypeId) {
+            return false;
+        }
+        // Check required fields
+        for (const field of this.schemaFields) {
+            if (field.required && !this.credentialValues[field.name]) {
+                return false;
+            }
+        }
+        return true;
+    }
+    async open(credential, preselectedTypeId, preselectedCategoryId) {
+        this.isLoading = true;
+        this.isOpen = true;
+        this.credential = credential;
+        this.isNew = !credential || !credential.ID;
+        this.cdr.markForCheck();
+        // Reset form
+        this.resetForm();
+        if (credential && credential.ID) {
+            // Edit mode - populate from existing credential
+            this.populateFromCredential(credential);
+        }
+        else {
+            // Create mode with optional preselections
+            if (preselectedTypeId) {
+                this.selectedTypeId = preselectedTypeId;
+                this.onTypeChange();
+            }
+            if (preselectedCategoryId) {
+                this.selectedCategoryId = preselectedCategoryId;
+            }
+        }
+        this.isLoading = false;
+        this.cdr.markForCheck();
+    }
+    resetForm() {
+        this.name = '';
+        this.description = '';
+        this.selectedTypeId = '';
+        this.selectedCategoryId = '';
+        this.isActive = true;
+        this.isDefault = false;
+        this.expiresAt = null;
+        this.credentialValues = {};
+        this.schemaFields = [];
+        this.showSecretFields.clear();
+    }
+    populateFromCredential(credential) {
+        this.name = credential.Name || '';
+        this.description = credential.Description || '';
+        this.selectedTypeId = credential.CredentialTypeID || '';
+        this.selectedCategoryId = credential.CategoryID || '';
+        this.isActive = credential.IsActive;
+        this.isDefault = credential.IsDefault;
+        this.expiresAt = credential.ExpiresAt ? new Date(credential.ExpiresAt) : null;
+        // Parse the type schema
+        this.onTypeChange();
+        // Parse stored values
+        try {
+            if (credential.Values) {
+                this.credentialValues = JSON.parse(credential.Values);
+            }
+        }
+        catch (e) {
+            console.error('Error parsing credential values:', e);
+            this.credentialValues = {};
+        }
+    }
+    async loadCategories() {
+        try {
+            const rv = new RunView();
+            const result = await rv.RunView({
+                EntityName: 'MJ: Credential Categories',
+                OrderBy: 'Name',
+                ResultType: 'entity_object'
+            });
+            if (result.Success) {
+                this.categories = result.Results;
+            }
+        }
+        catch (error) {
+            console.error('Error loading categories:', error);
+        }
+        this.cdr.markForCheck();
+    }
+    onTypeChange() {
+        const type = this.selectedType;
+        if (!type || !type.FieldSchema) {
+            this.schemaFields = [];
+            return;
+        }
+        try {
+            const schema = JSON.parse(type.FieldSchema);
+            const properties = schema.properties || {};
+            const required = schema.required || [];
+            this.schemaFields = Object.entries(properties).map(([name, prop]) => ({
+                name,
+                type: prop.type || 'string',
+                title: prop.title || name,
+                description: prop.description || '',
+                isSecret: prop.isSecret === true,
+                required: required.includes(name),
+                order: typeof prop.order === 'number' ? prop.order : 999
+            }));
+            // Sort by order
+            this.schemaFields.sort((a, b) => a.order - b.order);
+            // Initialize any missing values
+            for (const field of this.schemaFields) {
+                if (!(field.name in this.credentialValues)) {
+                    this.credentialValues[field.name] = '';
+                }
+            }
+        }
+        catch (e) {
+            console.error('Error parsing field schema:', e);
+            this.schemaFields = [];
+        }
+        this.cdr.markForCheck();
+    }
+    toggleSecretVisibility(fieldName) {
+        if (this.showSecretFields.has(fieldName)) {
+            this.showSecretFields.delete(fieldName);
+        }
+        else {
+            this.showSecretFields.add(fieldName);
+        }
+        this.cdr.markForCheck();
+    }
+    isSecretVisible(fieldName) {
+        return this.showSecretFields.has(fieldName);
+    }
+    async save() {
+        if (!this.canSave) {
+            MJNotificationService.Instance.CreateSimpleNotification('Please fill in all required fields', 'warning', 3000);
+            return;
+        }
+        this.isSaving = true;
+        this.cdr.markForCheck();
+        try {
+            let entity;
+            if (this.isNew) {
+                // Create new credential
+                entity = await this._metadata.GetEntityObject('MJ: Credentials');
+            }
+            else {
+                entity = this.credential;
+            }
+            // Set all fields
+            entity.Name = this.name.trim();
+            entity.Description = this.description.trim() || null;
+            entity.CredentialTypeID = this.selectedTypeId;
+            entity.CategoryID = this.selectedCategoryId || null;
+            entity.IsActive = this.isActive;
+            entity.IsDefault = this.isDefault;
+            entity.ExpiresAt = this.expiresAt;
+            entity.Values = JSON.stringify(this.credentialValues);
+            const success = await entity.Save();
+            if (success) {
+                const action = this.isNew ? 'created' : 'updated';
+                MJNotificationService.Instance.CreateSimpleNotification(`Credential "${entity.Name}" ${action} successfully`, 'success', 3000);
+                this.saved.emit(entity);
+                this.closePanel();
+            }
+            else {
+                const errorMessage = entity.LatestResult?.Message || 'Unknown error';
+                console.error('Save failed:', errorMessage);
+                MJNotificationService.Instance.CreateSimpleNotification(`Failed to save credential: ${errorMessage}`, 'error', 5000);
+            }
+        }
+        catch (error) {
+            console.error('Error saving credential:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error saving credential', 'error', 3000);
+        }
+        finally {
+            this.isSaving = false;
+            this.cdr.markForCheck();
+        }
+    }
+    async deleteCredential() {
+        if (this.isNew || !this.credential)
+            return;
+        const confirmed = confirm(`Are you sure you want to delete "${this.credential.Name}"? This action cannot be undone.`);
+        if (!confirmed)
+            return;
+        this.isSaving = true;
+        this.cdr.markForCheck();
+        try {
+            const success = await this.credential.Delete();
+            if (success) {
+                MJNotificationService.Instance.CreateSimpleNotification(`Credential "${this.credential.Name}" deleted successfully`, 'success', 3000);
+                this.deleted.emit(this.credential.ID);
+                this.closePanel();
+            }
+            else {
+                const errorMessage = this.credential.LatestResult?.Message || 'Unknown error';
+                MJNotificationService.Instance.CreateSimpleNotification(`Failed to delete credential: ${errorMessage}`, 'error', 5000);
+            }
+        }
+        catch (error) {
+            console.error('Error deleting credential:', error);
+            MJNotificationService.Instance.CreateSimpleNotification('Error deleting credential', 'error', 3000);
+        }
+        finally {
+            this.isSaving = false;
+            this.cdr.markForCheck();
+        }
+    }
+    closePanel() {
+        this.isOpen = false;
+        this.credential = null;
+        this.resetForm();
+        this.close.emit();
+        this.cdr.markForCheck();
+    }
+    onBackdropClick(event) {
+        if (event.target.classList.contains('panel-backdrop')) {
+            this.closePanel();
+        }
+    }
+    get groupedCredentialTypes() {
+        const grouped = new Map();
+        for (const type of this.credentialTypes) {
+            const category = type.Category || 'Other';
+            if (!grouped.has(category)) {
+                grouped.set(category, []);
+            }
+            grouped.get(category).push(type);
+        }
+        return Array.from(grouped.entries()).map(([category, types]) => ({ category, types }));
+    }
+    getTypeIcon(type) {
+        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 type.IconClass || iconMap[type.Category] || 'fa-solid fa-key';
+    }
+    getTypeColor(type) {
+        const colorMap = {
+            'AI': '#8b5cf6',
+            'Communication': '#3b82f6',
+            'Storage': '#06b6d4',
+            'Database': '#f59e0b',
+            'Authentication': '#10b981',
+            'Integration': '#ec4899'
+        };
+        return colorMap[type.Category] || '#6366f1';
+    }
+    onValueChange(fieldName, value) {
+        this.credentialValues[fieldName] = value;
+        this.cdr.markForCheck();
+    }
+    formatDateForInput(date) {
+        if (!date)
+            return '';
+        const d = new Date(date);
+        return d.toISOString().split('T')[0];
+    }
+    onExpiresAtChange(value) {
+        this.expiresAt = value ? new Date(value) : null;
+        this.cdr.markForCheck();
+    }
+    static ɵfac = function CredentialEditPanelComponent_Factory(t) { return new (t || CredentialEditPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CredentialEditPanelComponent, selectors: [["mj-credential-edit-panel"]], inputs: { credential: "credential", credentialTypes: "credentialTypes", isOpen: "isOpen" }, outputs: { close: "close", saved: "saved", deleted: "deleted" }, decls: 1, vars: 1, consts: [["regularField", ""], ["class", "panel-backdrop", 3, "click", 4, "ngIf"], [1, "panel-backdrop", 3, "click"], [1, "edit-panel"], [1, "panel-header"], [1, "header-content"], ["class", "header-icon", 3, "backgroundColor", "color", 4, "ngIf"], ["class", "header-icon default", 4, "ngIf"], [1, "header-text"], ["class", "header-subtitle", 4, "ngIf"], [1, "close-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-times"], [1, "panel-body"], ["text", "Loading...", 4, "ngIf"], ["class", "credential-form", 3, "submit", 4, "ngIf"], [1, "panel-footer"], [1, "footer-left"], ["class", "btn-delete", 3, "disabled", "click", 4, "ngIf"], [1, "footer-right"], [1, "btn-secondary", 3, "click", "disabled"], [1, "btn-primary", 3, "click", "disabled"], ["class", "fa-solid fa-spinner fa-spin", 4, "ngIf"], ["class", "fa-solid fa-check", 4, "ngIf"], [1, "header-icon"], [1, "header-icon", "default"], [1, "fa-solid", "fa-key"], [1, "header-subtitle"], ["text", "Loading..."], [1, "credential-form", 3, "submit"], [1, "form-section"], [1, "section-title"], [1, "fa-solid", "fa-info-circle"], [1, "form-group"], ["for", "credentialName", 1, "required"], ["type", "text", "id", "credentialName", "name", "credentialName", "placeholder", "e.g., Production OpenAI Key", "required", "", 3, "ngModelChange", "ngModel", "disabled"], ["for", "credentialType", 1, "required"], ["id", "credentialType", "name", "credentialType", "required", "", 3, "ngModelChange", "ngModel", "disabled"], [3, "ngValue"], [3, "label", 4, "ngFor", "ngForOf"], ["class", "field-hint", 4, "ngIf"], ["for", "credentialCategory"], ["id", "credentialCategory", "name", "credentialCategory", 3, "ngModelChange", "ngModel", "disabled"], [3, "ngValue", 4, "ngFor", "ngForOf"], ["for", "credentialDescription"], ["id", "credentialDescription", "name", "credentialDescription", "placeholder", "Optional description...", "rows", "3", 3, "ngModelChange", "ngModel", "disabled"], ["class", "form-section", 4, "ngIf"], ["class", "no-type-message", 4, "ngIf"], [1, "fa-solid", "fa-cog"], [1, "toggle-group"], [1, "toggle-label"], [1, "toggle-wrapper"], ["type", "checkbox", "name", "isActive", 3, "ngModelChange", "ngModel", "disabled"], [1, "toggle-slider"], [1, "toggle-text"], [1, "toggle-title"], [1, "toggle-description"], ["type", "checkbox", "name", "isDefault", 3, "ngModelChange", "ngModel", "disabled"], ["for", "expiresAt"], ["type", "date", "id", "expiresAt", "name", "expiresAt", 3, "change", "value", "disabled"], [1, "field-hint"], [3, "label"], [1, "encrypted-badge"], [1, "fa-solid", "fa-lock"], ["class", "form-group", 4, "ngFor", "ngForOf"], [3, "for"], ["class", "secret-field-wrapper", 4, "ngIf", "ngIfElse"], [1, "secret-field-wrapper"], ["autocomplete", "off", 3, "input", "type", "id", "name", "value", "placeholder", "disabled", "required"], ["type", "button", 1, "toggle-visibility-btn", 3, "click", "title"], [3, "type", "id", "name", "value", "placeholder", "disabled", "required", "input", 4, "ngIf"], [3, "input", "type", "id", "name", "value", "placeholder", "disabled", "required"], [1, "no-type-message"], [1, "message-icon"], [1, "fa-solid", "fa-hand-pointer"], [1, "btn-delete", 3, "click", "disabled"], [1, "fa-solid", "fa-trash"], [1, "fa-solid", "fa-spinner", "fa-spin"], [1, "fa-solid", "fa-check"]], template: function CredentialEditPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵtemplate(0, CredentialEditPanelComponent_div_0_Template, 27, 16, "div", 1);
+        } if (rf & 2) {
+            i0.ɵɵproperty("ngIf", ctx.isOpen);
+        } }, dependencies: [i1.NgForOf, i1.NgIf, i2.ɵNgNoValidate, i2.NgSelectOption, i2.ɵNgSelectMultipleOption, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.SelectControlValueAccessor, i2.NgControlStatus, i2.NgControlStatusGroup, i2.RequiredValidator, i2.NgModel, i2.NgForm, i3.LoadingComponent], styles: ["\n\n.panel-backdrop[_ngcontent-%COMP%] {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.5);\n    z-index: 1000;\n    display: flex;\n    justify-content: flex-end;\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease-out;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n\n\n.edit-panel[_ngcontent-%COMP%] {\n    width: 100%;\n    max-width: 520px;\n    height: 100%;\n    background: #ffffff;\n    display: flex;\n    flex-direction: column;\n    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n    transform: translateX(100%);\n    animation: _ngcontent-%COMP%_slideIn 0.3s ease-out forwards;\n}\n\n@keyframes _ngcontent-%COMP%_slideIn {\n    from { transform: translateX(100%); }\n    to { transform: translateX(0); }\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    border-bottom: 1px solid #e5e7eb;\n    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);\n}\n\n.header-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon[_ngcontent-%COMP%] {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 20px;\n    flex-shrink: 0;\n}\n\n.header-icon.default[_ngcontent-%COMP%] {\n    background: #f1f5f9;\n    color: #64748b;\n}\n\n.header-text[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n    font-size: 18px;\n    font-weight: 600;\n    color: #1e293b;\n    margin: 0 0 4px 0;\n}\n\n.header-subtitle[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #64748b;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    border: none;\n    background: #f1f5f9;\n    border-radius: 8px;\n    cursor: pointer;\n    color: #64748b;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.15s ease;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: #e2e8f0;\n    color: #334155;\n}\n\n.close-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n\n\n.panel-body[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 24px;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n    margin-bottom: 28px;\n}\n\n.form-section[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.section-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #334155;\n    margin: 0 0 16px 0;\n    padding-bottom: 10px;\n    border-bottom: 1px solid #f1f5f9;\n}\n\n.section-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #6366f1;\n    font-size: 14px;\n}\n\n.encrypted-badge[_ngcontent-%COMP%] {\n    margin-left: auto;\n    background: #dcfce7;\n    color: #166534;\n    padding: 4px 10px;\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.encrypted-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #16a34a;\n    font-size: 10px;\n}\n\n\n\n.form-group[_ngcontent-%COMP%] {\n    margin-bottom: 18px;\n}\n\n.form-group[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 13px;\n    font-weight: 500;\n    color: #475569;\n    margin-bottom: 6px;\n}\n\n.form-group[_ngcontent-%COMP%]   label.required[_ngcontent-%COMP%]::after {\n    content: '*';\n    color: #ef4444;\n    margin-left: 4px;\n}\n\n.form-group[_ngcontent-%COMP%]   input[type=\"text\"][_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%]   input[type=\"password\"][_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%]   input[type=\"number\"][_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%]   input[type=\"date\"][_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%], \n.form-group[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    padding: 10px 14px;\n    border: 1px solid #d1d5db;\n    border-radius: 8px;\n    font-size: 14px;\n    color: #1e293b;\n    background: #ffffff;\n    transition: all 0.15s ease;\n    box-sizing: border-box;\n}\n\n.form-group[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus, \n.form-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:focus, \n.form-group[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: #6366f1;\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.form-group[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:disabled, \n.form-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%]:disabled, \n.form-group[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%]:disabled {\n    background: #f8fafc;\n    color: #94a3b8;\n    cursor: not-allowed;\n}\n\n.form-group[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n    resize: vertical;\n    min-height: 80px;\n}\n\n.form-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%] {\n    cursor: pointer;\n}\n\n.field-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: #94a3b8;\n    margin-top: 5px;\n}\n\n\n\n.secret-field-wrapper[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n}\n\n.secret-field-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    flex: 1;\n    padding-right: 44px;\n}\n\n.toggle-visibility-btn[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 4px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 36px;\n    height: 36px;\n    border: none;\n    background: transparent;\n    color: #94a3b8;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.toggle-visibility-btn[_ngcontent-%COMP%]:hover {\n    background: #f1f5f9;\n    color: #6366f1;\n}\n\n\n\n.toggle-group[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.toggle-group[_ngcontent-%COMP%]:last-child {\n    margin-bottom: 0;\n}\n\n.toggle-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 14px;\n    cursor: pointer;\n}\n\n.toggle-wrapper[_ngcontent-%COMP%] {\n    position: relative;\n    width: 44px;\n    height: 24px;\n    flex-shrink: 0;\n}\n\n.toggle-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n.toggle-slider[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: #d1d5db;\n    border-radius: 12px;\n    transition: all 0.2s ease;\n}\n\n.toggle-slider[_ngcontent-%COMP%]::before {\n    content: '';\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 20px;\n    height: 20px;\n    background: #ffffff;\n    border-radius: 50%;\n    transition: all 0.2s ease;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.toggle-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .toggle-slider[_ngcontent-%COMP%] {\n    background: #6366f1;\n}\n\n.toggle-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:checked    + .toggle-slider[_ngcontent-%COMP%]::before {\n    transform: translateX(20px);\n}\n\n.toggle-wrapper[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:disabled    + .toggle-slider[_ngcontent-%COMP%] {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.toggle-text[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.toggle-title[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: #334155;\n}\n\n.toggle-description[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #94a3b8;\n}\n\n\n\n.no-type-message[_ngcontent-%COMP%] {\n    text-align: center;\n    padding: 32px 20px;\n    background: #f8fafc;\n    border-radius: 12px;\n    border: 2px dashed #e2e8f0;\n}\n\n.message-icon[_ngcontent-%COMP%] {\n    width: 56px;\n    height: 56px;\n    background: #e2e8f0;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 16px;\n    font-size: 24px;\n    color: #94a3b8;\n}\n\n.no-type-message[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    color: #64748b;\n    font-size: 14px;\n}\n\n\n\n.panel-footer[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    border-top: 1px solid #e5e7eb;\n    background: #f8fafc;\n}\n\n.footer-left[_ngcontent-%COMP%], \n.footer-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.btn-primary[_ngcontent-%COMP%], \n.btn-secondary[_ngcontent-%COMP%], \n.btn-delete[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.btn-primary[_ngcontent-%COMP%] {\n    background: #6366f1;\n    color: #ffffff;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: #4f46e5;\n}\n\n.btn-primary[_ngcontent-%COMP%]:disabled {\n    background: #c7d2fe;\n    cursor: not-allowed;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n    background: #ffffff;\n    color: #475569;\n    border: 1px solid #d1d5db;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: #f1f5f9;\n    border-color: #94a3b8;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.btn-delete[_ngcontent-%COMP%] {\n    background: transparent;\n    color: #dc2626;\n    padding: 10px 16px;\n}\n\n.btn-delete[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: #fef2f2;\n}\n\n.btn-delete[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n\n\n@media (max-width: 768px) {\n    .edit-panel[_ngcontent-%COMP%] {\n        max-width: 100%;\n    }\n\n    .panel-header[_ngcontent-%COMP%] {\n        padding: 16px 20px;\n    }\n\n    .header-icon[_ngcontent-%COMP%] {\n        width: 40px;\n        height: 40px;\n        font-size: 18px;\n    }\n\n    .header-text[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n        font-size: 16px;\n    }\n\n    .panel-body[_ngcontent-%COMP%] {\n        padding: 20px;\n    }\n\n    .form-section[_ngcontent-%COMP%] {\n        margin-bottom: 24px;\n    }\n\n    .section-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n    }\n\n    .form-group[_ngcontent-%COMP%]   input[_ngcontent-%COMP%], \n   .form-group[_ngcontent-%COMP%]   select[_ngcontent-%COMP%], \n   .form-group[_ngcontent-%COMP%]   textarea[_ngcontent-%COMP%] {\n        padding: 12px 14px;\n        font-size: 16px; \n\n    }\n\n    .panel-footer[_ngcontent-%COMP%] {\n        padding: 14px 20px;\n        flex-direction: column-reverse;\n        gap: 12px;\n    }\n\n    .footer-left[_ngcontent-%COMP%], \n   .footer-right[_ngcontent-%COMP%] {\n        width: 100%;\n    }\n\n    .footer-right[_ngcontent-%COMP%] {\n        flex-direction: row;\n    }\n\n    .footer-right[_ngcontent-%COMP%]   .btn-primary[_ngcontent-%COMP%], \n   .footer-right[_ngcontent-%COMP%]   .btn-secondary[_ngcontent-%COMP%] {\n        flex: 1;\n        justify-content: center;\n    }\n\n    .btn-delete[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: center;\n        background: #fef2f2;\n    }\n\n    .toggle-label[_ngcontent-%COMP%] {\n        gap: 12px;\n    }\n\n    .encrypted-badge[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 480px) {\n    .panel-header[_ngcontent-%COMP%] {\n        padding: 14px 16px;\n    }\n\n    .header-content[_ngcontent-%COMP%] {\n        gap: 12px;\n    }\n\n    .header-icon[_ngcontent-%COMP%] {\n        width: 36px;\n        height: 36px;\n        font-size: 16px;\n        border-radius: 10px;\n    }\n\n    .header-text[_ngcontent-%COMP%]   h2[_ngcontent-%COMP%] {\n        font-size: 15px;\n    }\n\n    .header-subtitle[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n\n    .panel-body[_ngcontent-%COMP%] {\n        padding: 16px;\n    }\n\n    .section-title[_ngcontent-%COMP%] {\n        font-size: 12px;\n        gap: 8px;\n    }\n\n    .form-group[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n        font-size: 12px;\n    }\n\n    .toggle-title[_ngcontent-%COMP%] {\n        font-size: 13px;\n    }\n\n    .toggle-description[_ngcontent-%COMP%] {\n        font-size: 11px;\n    }\n\n    .no-type-message[_ngcontent-%COMP%] {\n        padding: 24px 16px;\n    }\n\n    .message-icon[_ngcontent-%COMP%] {\n        width: 48px;\n        height: 48px;\n        font-size: 20px;\n    }\n\n    .panel-footer[_ngcontent-%COMP%] {\n        padding: 12px 16px;\n    }\n\n    .btn-primary[_ngcontent-%COMP%], \n   .btn-secondary[_ngcontent-%COMP%] {\n        padding: 10px 16px;\n        font-size: 13px;\n    }\n}\n\n\n\n@keyframes _ngcontent-%COMP%_spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n.fa-spin[_ngcontent-%COMP%] {\n    animation: _ngcontent-%COMP%_spin 1s linear infinite;\n}\n\n\n\n.panel-body[_ngcontent-%COMP%] {\n    scroll-behavior: smooth;\n    -webkit-overflow-scrolling: touch;\n}\n\n\n\n.panel-body[_ngcontent-%COMP%]::-webkit-scrollbar {\n    width: 6px;\n}\n\n.panel-body[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.panel-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n    background: #d1d5db;\n    border-radius: 3px;\n}\n\n.panel-body[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n    background: #94a3b8;\n}"], changeDetection: 0 });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CredentialEditPanelComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-credential-edit-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"panel-backdrop\" *ngIf=\"isOpen\" (click)=\"onBackdropClick($event)\">\n    <div class=\"edit-panel\" [class.open]=\"isOpen\">\n        <!-- Panel Header -->\n        <div class=\"panel-header\">\n            <div class=\"header-content\">\n                <div class=\"header-icon\" *ngIf=\"selectedType\" [style.backgroundColor]=\"getTypeColor(selectedType) + '15'\" [style.color]=\"getTypeColor(selectedType)\">\n                    <i [class]=\"getTypeIcon(selectedType)\"></i>\n                </div>\n                <div class=\"header-icon default\" *ngIf=\"!selectedType\">\n                    <i class=\"fa-solid fa-key\"></i>\n                </div>\n                <div class=\"header-text\">\n                    <h2>{{panelTitle}}</h2>\n                    <span class=\"header-subtitle\" *ngIf=\"selectedType\">{{selectedType.Name}}</span>\n                    <span class=\"header-subtitle\" *ngIf=\"!selectedType\">Select a credential type</span>\n                </div>\n            </div>\n            <button class=\"close-btn\" (click)=\"closePanel()\" [disabled]=\"isSaving\">\n                <i class=\"fa-solid fa-times\"></i>\n            </button>\n        </div>\n\n        <!-- Panel Body -->\n        <div class=\"panel-body\">\n            <mj-loading *ngIf=\"isLoading\" text=\"Loading...\"></mj-loading>\n\n            <form *ngIf=\"!isLoading\" class=\"credential-form\" (submit)=\"$event.preventDefault(); save()\">\n                <!-- Basic Info Section -->\n                <div class=\"form-section\">\n                    <h3 class=\"section-title\">\n                        <i class=\"fa-solid fa-info-circle\"></i>\n                        Basic Information\n                    </h3>\n\n                    <div class=\"form-group\">\n                        <label for=\"credentialName\" class=\"required\">Name</label>\n                        <input\n                            type=\"text\"\n                            id=\"credentialName\"\n                            name=\"credentialName\"\n                            [(ngModel)]=\"name\"\n                            placeholder=\"e.g., Production OpenAI Key\"\n                            [disabled]=\"isSaving\"\n                            required\n                        />\n                    </div>\n\n                    <div class=\"form-group\">\n                        <label for=\"credentialType\" class=\"required\">Credential Type</label>\n                        <select\n                            id=\"credentialType\"\n                            name=\"credentialType\"\n                            [(ngModel)]=\"selectedTypeId\"\n                            (ngModelChange)=\"onTypeChange()\"\n                            [disabled]=\"isSaving || !isNew\"\n                            required\n                        >\n                            <option [ngValue]=\"''\">Select a type...</option>\n                            <optgroup *ngFor=\"let group of groupedCredentialTypes\" [label]=\"group.category\">\n                                <option *ngFor=\"let type of group.types\" [ngValue]=\"type.ID\">\n                                    {{type.Name}}\n                                </option>\n                            </optgroup>\n                        </select>\n                        <span class=\"field-hint\" *ngIf=\"!isNew\">Type cannot be changed after creation</span>\n                    </div>\n\n                    <div class=\"form-group\">\n                        <label for=\"credentialCategory\">Category</label>\n                        <select\n                            id=\"credentialCategory\"\n                            name=\"credentialCategory\"\n                            [(ngModel)]=\"selectedCategoryId\"\n                            [disabled]=\"isSaving\"\n                        >\n                            <option [ngValue]=\"''\">No category</option>\n                            <option *ngFor=\"let cat of categories\" [ngValue]=\"cat.ID\">{{cat.Name}}</option>\n                        </select>\n                    </div>\n\n                    <div class=\"form-group\">\n                        <label for=\"credentialDescription\">Description</label>\n                        <textarea\n                            id=\"credentialDescription\"\n                            name=\"credentialDescription\"\n                            [(ngModel)]=\"description\"\n                            placeholder=\"Optional description...\"\n                            rows=\"3\"\n                            [disabled]=\"isSaving\"\n                        ></textarea>\n                    </div>\n                </div>\n\n                <!-- Credential Values Section -->\n                <div class=\"form-section\" *ngIf=\"schemaFields.length > 0\">\n                    <h3 class=\"section-title\">\n                        <i class=\"fa-solid fa-key\"></i>\n                        Credential Values\n                        <span class=\"encrypted-badge\">\n                            <i class=\"fa-solid fa-lock\"></i>\n                            Encrypted\n                        </span>\n                    </h3>\n\n                    <div class=\"form-group\" *ngFor=\"let field of schemaFields\">\n                        <label [for]=\"'field-' + field.name\" [class.required]=\"field.required\">\n                            {{field.title}}\n                        </label>\n\n                        <div class=\"secret-field-wrapper\" *ngIf=\"field.isSecret; else regularField\">\n                            <input\n                                [type]=\"isSecretVisible(field.name) ? 'text' : 'password'\"\n                                [id]=\"'field-' + field.name\"\n                                [name]=\"'field-' + field.name\"\n                                [value]=\"credentialValues[field.name]\"\n                                (input)=\"onValueChange(field.name, $any($event.target).value)\"\n                                [placeholder]=\"field.description || 'Enter ' + field.title\"\n                                [disabled]=\"isSaving\"\n                                [required]=\"field.required\"\n                                autocomplete=\"off\"\n                            />\n                            <button\n                                type=\"button\"\n                                class=\"toggle-visibility-btn\"\n                                (click)=\"toggleSecretVisibility(field.name)\"\n                                [title]=\"isSecretVisible(field.name) ? 'Hide' : 'Show'\"\n                            >\n                                <i [class]=\"isSecretVisible(field.name) ? 'fa-solid fa-eye-slash' : 'fa-solid fa-eye'\"></i>\n                            </button>\n                        </div>\n\n                        <ng-template #regularField>\n                            <input\n                                *ngIf=\"field.type === 'string' || field.type === 'number'\"\n                                [type]=\"field.type === 'number' ? 'number' : 'text'\"\n                                [id]=\"'field-' + field.name\"\n                                [name]=\"'field-' + field.name\"\n                                [value]=\"credentialValues[field.name]\"\n                                (input)=\"onValueChange(field.name, $any($event.target).value)\"\n                                [placeholder]=\"field.description || 'Enter ' + field.title\"\n                                [disabled]=\"isSaving\"\n                                [required]=\"field.required\"\n                            />\n                        </ng-template>\n\n                        <span class=\"field-hint\" *ngIf=\"field.description && !field.isSecret\">{{field.description}}</span>\n                    </div>\n                </div>\n\n                <!-- No Type Selected Message -->\n                <div class=\"no-type-message\" *ngIf=\"isNew && !selectedTypeId\">\n                    <div class=\"message-icon\">\n                        <i class=\"fa-solid fa-hand-pointer\"></i>\n                    </div>\n                    <p>Select a credential type above to configure the credential values.</p>\n                </div>\n\n                <!-- Settings Section -->\n                <div class=\"form-section\">\n                    <h3 class=\"section-title\">\n                        <i class=\"fa-solid fa-cog\"></i>\n                        Settings\n                    </h3>\n\n                    <div class=\"toggle-group\">\n                        <label class=\"toggle-label\">\n                            <span class=\"toggle-wrapper\">\n                                <input\n                                    type=\"checkbox\"\n                                    name=\"isActive\"\n                                    [(ngModel)]=\"isActive\"\n                                    [disabled]=\"isSaving\"\n                                />\n                                <span class=\"toggle-slider\"></span>\n                            </span>\n                            <span class=\"toggle-text\">\n                                <span class=\"toggle-title\">Active</span>\n                                <span class=\"toggle-description\">Enable this credential for use</span>\n                            </span>\n                        </label>\n                    </div>\n\n                    <div class=\"toggle-group\">\n                        <label class=\"toggle-label\">\n                            <span class=\"toggle-wrapper\">\n                                <input\n                                    type=\"checkbox\"\n                                    name=\"isDefault\"\n                                    [(ngModel)]=\"isDefault\"\n                                    [disabled]=\"isSaving\"\n                                />\n                                <span class=\"toggle-slider\"></span>\n                            </span>\n                            <span class=\"toggle-text\">\n                                <span class=\"toggle-title\">Default</span>\n                                <span class=\"toggle-description\">Use as default for this credential type</span>\n                            </span>\n                        </label>\n                    </div>\n\n                    <div class=\"form-group\">\n                        <label for=\"expiresAt\">Expiration Date</label>\n                        <input\n                            type=\"date\"\n                            id=\"expiresAt\"\n                            name=\"expiresAt\"\n                            [value]=\"formatDateForInput(expiresAt)\"\n                            (change)=\"onExpiresAtChange($any($event.target).value)\"\n                            [disabled]=\"isSaving\"\n                        />\n                        <span class=\"field-hint\">Leave empty for no expiration</span>\n                    </div>\n                </div>\n            </form>\n        </div>\n\n        <!-- Panel Footer -->\n        <div class=\"panel-footer\">\n            <div class=\"footer-left\">\n                <button\n                    class=\"btn-delete\"\n                    *ngIf=\"!isNew\"\n                    (click)=\"deleteCredential()\"\n                    [disabled]=\"isSaving\"\n                >\n                    <i class=\"fa-solid fa-trash\"></i>\n                    <span>Delete</span>\n                </button>\n            </div>\n            <div class=\"footer-right\">\n                <button\n                    class=\"btn-secondary\"\n                    (click)=\"closePanel()\"\n                    [disabled]=\"isSaving\"\n                >\n                    Cancel\n                </button>\n                <button\n                    class=\"btn-primary\"\n                    (click)=\"save()\"\n                    [disabled]=\"isSaving || !canSave\"\n                >\n                    <i class=\"fa-solid fa-spinner fa-spin\" *ngIf=\"isSaving\"></i>\n                    <i class=\"fa-solid fa-check\" *ngIf=\"!isSaving\"></i>\n                    <span>{{isNew ? 'Create' : 'Save'}}</span>\n                </button>\n            </div>\n        </div>\n    </div>\n</div>\n", styles: ["/* Panel Backdrop */\n.panel-backdrop {\n    position: fixed;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.5);\n    z-index: 1000;\n    display: flex;\n    justify-content: flex-end;\n    animation: fadeIn 0.2s ease-out;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n/* Slide-in Panel */\n.edit-panel {\n    width: 100%;\n    max-width: 520px;\n    height: 100%;\n    background: #ffffff;\n    display: flex;\n    flex-direction: column;\n    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);\n    transform: translateX(100%);\n    animation: slideIn 0.3s ease-out forwards;\n}\n\n@keyframes slideIn {\n    from { transform: translateX(100%); }\n    to { transform: translateX(0); }\n}\n\n/* Panel Header */\n.panel-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    border-bottom: 1px solid #e5e7eb;\n    background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);\n}\n\n.header-content {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.header-icon {\n    width: 48px;\n    height: 48px;\n    border-radius: 12px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: 20px;\n    flex-shrink: 0;\n}\n\n.header-icon.default {\n    background: #f1f5f9;\n    color: #64748b;\n}\n\n.header-text h2 {\n    font-size: 18px;\n    font-weight: 600;\n    color: #1e293b;\n    margin: 0 0 4px 0;\n}\n\n.header-subtitle {\n    font-size: 13px;\n    color: #64748b;\n}\n\n.close-btn {\n    width: 36px;\n    height: 36px;\n    border: none;\n    background: #f1f5f9;\n    border-radius: 8px;\n    cursor: pointer;\n    color: #64748b;\n    font-size: 16px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    transition: all 0.15s ease;\n}\n\n.close-btn:hover:not(:disabled) {\n    background: #e2e8f0;\n    color: #334155;\n}\n\n.close-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* Panel Body */\n.panel-body {\n    flex: 1;\n    overflow-y: auto;\n    padding: 24px;\n}\n\n/* Form Sections */\n.form-section {\n    margin-bottom: 28px;\n}\n\n.form-section:last-child {\n    margin-bottom: 0;\n}\n\n.section-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #334155;\n    margin: 0 0 16px 0;\n    padding-bottom: 10px;\n    border-bottom: 1px solid #f1f5f9;\n}\n\n.section-title i {\n    color: #6366f1;\n    font-size: 14px;\n}\n\n.encrypted-badge {\n    margin-left: auto;\n    background: #dcfce7;\n    color: #166534;\n    padding: 4px 10px;\n    border-radius: 20px;\n    font-size: 11px;\n    font-weight: 500;\n    display: flex;\n    align-items: center;\n    gap: 5px;\n}\n\n.encrypted-badge i {\n    color: #16a34a;\n    font-size: 10px;\n}\n\n/* Form Groups */\n.form-group {\n    margin-bottom: 18px;\n}\n\n.form-group:last-child {\n    margin-bottom: 0;\n}\n\n.form-group label {\n    display: block;\n    font-size: 13px;\n    font-weight: 500;\n    color: #475569;\n    margin-bottom: 6px;\n}\n\n.form-group label.required::after {\n    content: '*';\n    color: #ef4444;\n    margin-left: 4px;\n}\n\n.form-group input[type=\"text\"],\n.form-group input[type=\"password\"],\n.form-group input[type=\"number\"],\n.form-group input[type=\"date\"],\n.form-group select,\n.form-group textarea {\n    width: 100%;\n    padding: 10px 14px;\n    border: 1px solid #d1d5db;\n    border-radius: 8px;\n    font-size: 14px;\n    color: #1e293b;\n    background: #ffffff;\n    transition: all 0.15s ease;\n    box-sizing: border-box;\n}\n\n.form-group input:focus,\n.form-group select:focus,\n.form-group textarea:focus {\n    outline: none;\n    border-color: #6366f1;\n    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);\n}\n\n.form-group input:disabled,\n.form-group select:disabled,\n.form-group textarea:disabled {\n    background: #f8fafc;\n    color: #94a3b8;\n    cursor: not-allowed;\n}\n\n.form-group textarea {\n    resize: vertical;\n    min-height: 80px;\n}\n\n.form-group select {\n    cursor: pointer;\n}\n\n.field-hint {\n    display: block;\n    font-size: 12px;\n    color: #94a3b8;\n    margin-top: 5px;\n}\n\n/* Secret Field Wrapper */\n.secret-field-wrapper {\n    position: relative;\n    display: flex;\n}\n\n.secret-field-wrapper input {\n    flex: 1;\n    padding-right: 44px;\n}\n\n.toggle-visibility-btn {\n    position: absolute;\n    right: 4px;\n    top: 50%;\n    transform: translateY(-50%);\n    width: 36px;\n    height: 36px;\n    border: none;\n    background: transparent;\n    color: #94a3b8;\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 6px;\n    transition: all 0.15s ease;\n}\n\n.toggle-visibility-btn:hover {\n    background: #f1f5f9;\n    color: #6366f1;\n}\n\n/* Toggle Groups */\n.toggle-group {\n    margin-bottom: 16px;\n}\n\n.toggle-group:last-child {\n    margin-bottom: 0;\n}\n\n.toggle-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 14px;\n    cursor: pointer;\n}\n\n.toggle-wrapper {\n    position: relative;\n    width: 44px;\n    height: 24px;\n    flex-shrink: 0;\n}\n\n.toggle-wrapper input {\n    position: absolute;\n    opacity: 0;\n    width: 0;\n    height: 0;\n}\n\n.toggle-slider {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: #d1d5db;\n    border-radius: 12px;\n    transition: all 0.2s ease;\n}\n\n.toggle-slider::before {\n    content: '';\n    position: absolute;\n    top: 2px;\n    left: 2px;\n    width: 20px;\n    height: 20px;\n    background: #ffffff;\n    border-radius: 50%;\n    transition: all 0.2s ease;\n    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);\n}\n\n.toggle-wrapper input:checked + .toggle-slider {\n    background: #6366f1;\n}\n\n.toggle-wrapper input:checked + .toggle-slider::before {\n    transform: translateX(20px);\n}\n\n.toggle-wrapper input:disabled + .toggle-slider {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.toggle-text {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.toggle-title {\n    font-size: 14px;\n    font-weight: 500;\n    color: #334155;\n}\n\n.toggle-description {\n    font-size: 12px;\n    color: #94a3b8;\n}\n\n/* No Type Message */\n.no-type-message {\n    text-align: center;\n    padding: 32px 20px;\n    background: #f8fafc;\n    border-radius: 12px;\n    border: 2px dashed #e2e8f0;\n}\n\n.message-icon {\n    width: 56px;\n    height: 56px;\n    background: #e2e8f0;\n    border-radius: 50%;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    margin: 0 auto 16px;\n    font-size: 24px;\n    color: #94a3b8;\n}\n\n.no-type-message p {\n    margin: 0;\n    color: #64748b;\n    font-size: 14px;\n}\n\n/* Panel Footer */\n.panel-footer {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 16px 24px;\n    border-top: 1px solid #e5e7eb;\n    background: #f8fafc;\n}\n\n.footer-left,\n.footer-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.btn-primary,\n.btn-secondary,\n.btn-delete {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    cursor: pointer;\n    transition: all 0.15s ease;\n}\n\n.btn-primary {\n    background: #6366f1;\n    color: #ffffff;\n}\n\n.btn-primary:hover:not(:disabled) {\n    background: #4f46e5;\n}\n\n.btn-primary:disabled {\n    background: #c7d2fe;\n    cursor: not-allowed;\n}\n\n.btn-secondary {\n    background: #ffffff;\n    color: #475569;\n    border: 1px solid #d1d5db;\n}\n\n.btn-secondary:hover:not(:disabled) {\n    background: #f1f5f9;\n    border-color: #94a3b8;\n}\n\n.btn-secondary:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.btn-delete {\n    background: transparent;\n    color: #dc2626;\n    padding: 10px 16px;\n}\n\n.btn-delete:hover:not(:disabled) {\n    background: #fef2f2;\n}\n\n.btn-delete:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n    .edit-panel {\n        max-width: 100%;\n    }\n\n    .panel-header {\n        padding: 16px 20px;\n    }\n\n    .header-icon {\n        width: 40px;\n        height: 40px;\n        font-size: 18px;\n    }\n\n    .header-text h2 {\n        font-size: 16px;\n    }\n\n    .panel-body {\n        padding: 20px;\n    }\n\n    .form-section {\n        margin-bottom: 24px;\n    }\n\n    .section-title {\n        font-size: 13px;\n    }\n\n    .form-group input,\n    .form-group select,\n    .form-group textarea {\n        padding: 12px 14px;\n        font-size: 16px; /* Prevents iOS zoom on focus */\n    }\n\n    .panel-footer {\n        padding: 14px 20px;\n        flex-direction: column-reverse;\n        gap: 12px;\n    }\n\n    .footer-left,\n    .footer-right {\n        width: 100%;\n    }\n\n    .footer-right {\n        flex-direction: row;\n    }\n\n    .footer-right .btn-primary,\n    .footer-right .btn-secondary {\n        flex: 1;\n        justify-content: center;\n    }\n\n    .btn-delete {\n        width: 100%;\n        justify-content: center;\n        background: #fef2f2;\n    }\n\n    .toggle-label {\n        gap: 12px;\n    }\n\n    .encrypted-badge {\n        display: none;\n    }\n}\n\n@media (max-width: 480px) {\n    .panel-header {\n        padding: 14px 16px;\n    }\n\n    .header-content {\n        gap: 12px;\n    }\n\n    .header-icon {\n        width: 36px;\n        height: 36px;\n        font-size: 16px;\n        border-radius: 10px;\n    }\n\n    .header-text h2 {\n        font-size: 15px;\n    }\n\n    .header-subtitle {\n        font-size: 12px;\n    }\n\n    .panel-body {\n        padding: 16px;\n    }\n\n    .section-title {\n        font-size: 12px;\n        gap: 8px;\n    }\n\n    .form-group label {\n        font-size: 12px;\n    }\n\n    .toggle-title {\n        font-size: 13px;\n    }\n\n    .toggle-description {\n        font-size: 11px;\n    }\n\n    .no-type-message {\n        padding: 24px 16px;\n    }\n\n    .message-icon {\n        width: 48px;\n        height: 48px;\n        font-size: 20px;\n    }\n\n    .panel-footer {\n        padding: 12px 16px;\n    }\n\n    .btn-primary,\n    .btn-secondary {\n        padding: 10px 16px;\n        font-size: 13px;\n    }\n}\n\n/* Animations for saving state */\n@keyframes spin {\n    from { transform: rotate(0deg); }\n    to { transform: rotate(360deg); }\n}\n\n.fa-spin {\n    animation: spin 1s linear infinite;\n}\n\n/* Smooth scrolling */\n.panel-body {\n    scroll-behavior: smooth;\n    -webkit-overflow-scrolling: touch;\n}\n\n/* Custom scrollbar */\n.panel-body::-webkit-scrollbar {\n    width: 6px;\n}\n\n.panel-body::-webkit-scrollbar-track {\n    background: transparent;\n}\n\n.panel-body::-webkit-scrollbar-thumb {\n    background: #d1d5db;\n    border-radius: 3px;\n}\n\n.panel-body::-webkit-scrollbar-thumb:hover {\n    background: #94a3b8;\n}\n"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], { credential: [{
+            type: Input
+        }], credentialTypes: [{
+            type: Input
+        }], isOpen: [{
+            type: Input
+        }], close: [{
+            type: Output
+        }], saved: [{
+            type: Output
+        }], deleted: [{
+            type: Output
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(CredentialEditPanelComponent, { className: "CredentialEditPanelComponent", filePath: "src/Credentials/components/credential-edit-panel.component.ts", lineNumber: 30 }); })();
+//# sourceMappingURL=credential-edit-panel.component.js.map