@memberjunction/ng-dashboards 3.4.0 → 4.1.0

package/dist/APIKeys/api-key-edit-panel.component.js

@@ -9,18 +9,18 @@ import * as i3 from "@progress/kendo-angular-inputs";
 import * as i4 from "@progress/kendo-angular-dateinputs";
 import * as i5 from "@progress/kendo-angular-buttons";
 import * as i6 from "@memberjunction/ng-shared-generic";
-function APIKeyEditPanelComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 10);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_div_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
+    i0.ɵɵelementStart(0, "div", 9);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
     i0.ɵɵelementEnd();
 } }
-function APIKeyEditPanelComponent_mj_loading_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 11);
+function APIKeyEditPanelComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 8);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵelement(1, "i", 27);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 10);
+    i0.ɵɵelement(1, "i", 24);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -28,9 +28,9 @@ function APIKeyEditPanelComponent_ng_container_12_div_1_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.SuccessMessage, " ");
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 28);
-    i0.ɵɵelement(1, "i", 29);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 11);
+    i0.ɵɵelement(1, "i", 25);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -38,16 +38,16 @@ function APIKeyEditPanelComponent_ng_container_12_div_2_Template(rf, ctx) { if (
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.ErrorMessage, " ");
 } }
-function APIKeyEditPanelComponent_ng_container_12_span_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 30);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 16);
     i0.ɵɵtext(1, "!");
     i0.ɵɵelementEnd();
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_button_33_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_33_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 52);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_div_15_button_33_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleEdit()); });
-    i0.ɵɵelement(1, "i", 53);
+    i0.ɵɵelementStart(0, "button", 46);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_33_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleEdit()); });
+    i0.ɵɵelement(1, "i", 47);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -57,94 +57,96 @@ function APIKeyEditPanelComponent_ng_container_12_div_15_button_33_Template(rf,
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.IsEditing ? "Cancel" : "Edit", " ");
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_button_47_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_47_Template(rf, ctx) { if (rf & 1) {
     const _r6 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 54);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_div_15_button_47_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.EditExpiresAt = null); });
+    i0.ɵɵelementStart(0, "button", 48);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_47_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.EditExpiresAt = null); });
     i0.ɵɵelement(1, "i", 7);
     i0.ɵɵtext(2, " Never expires ");
     i0.ɵɵelementEnd();
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_div_48_mj_loading_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 58);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_48_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 50);
 } if (rf & 2) {
     i0.ɵɵproperty("showText", false);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_div_48_span_3_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_48_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 59);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " Save Changes ");
     i0.ɵɵelementEnd();
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_div_48_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_48_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 55)(1, "button", 56);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_div_15_div_48_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.saveChanges()); });
-    i0.ɵɵtemplate(2, APIKeyEditPanelComponent_ng_container_12_div_15_div_48_mj_loading_2_Template, 1, 1, "mj-loading", 57)(3, APIKeyEditPanelComponent_ng_container_12_div_15_div_48_span_3_Template, 3, 0, "span", 9);
+    i0.ɵɵelementStart(0, "div", 43)(1, "button", 49);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_48_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.saveChanges()); });
+    i0.ɵɵconditionalCreate(2, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_48_Conditional_2_Template, 1, 1, "mj-loading", 50);
+    i0.ɵɵconditionalCreate(3, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_48_Conditional_3_Template, 3, 0, "span");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
     i0.ɵɵproperty("themeColor", "primary")("disabled", ctx_r1.IsSaving);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.IsSaving);
+    i0.ɵɵconditional(ctx_r1.IsSaving ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.IsSaving);
+    i0.ɵɵconditional(!ctx_r1.IsSaving ? 3 : -1);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_3_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 63)(1, "div", 64);
-    i0.ɵɵelement(2, "i", 65);
+    i0.ɵɵelementStart(0, "div", 52)(1, "div", 54);
+    i0.ɵɵelement(2, "i", 55);
     i0.ɵɵelementStart(3, "div")(4, "strong");
     i0.ɵɵtext(5, "Revoke this API key");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "p");
     i0.ɵɵtext(7, "Once revoked, this key will immediately stop working. This action cannot be undone.");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "button", 66);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_3_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.startRevoke()); });
-    i0.ɵɵelement(9, "i", 67);
+    i0.ɵɵelementStart(8, "button", 56);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_3_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.startRevoke()); });
+    i0.ɵɵelement(9, "i", 57);
     i0.ɵɵtext(10, " Revoke Key ");
     i0.ɵɵelementEnd()();
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_4_mj_loading_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 58);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_4_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 50);
 } if (rf & 2) {
     i0.ɵɵproperty("showText", false);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_4_span_20_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_4_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 67);
+    i0.ɵɵelement(1, "i", 57);
     i0.ɵɵtext(2, " Revoke Key ");
     i0.ɵɵelementEnd();
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_4_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 68)(1, "div", 69);
-    i0.ɵɵelement(2, "i", 70);
+    i0.ɵɵelementStart(0, "div", 53)(1, "div", 58);
+    i0.ɵɵelement(2, "i", 59);
     i0.ɵɵelementStart(3, "div")(4, "strong");
     i0.ɵɵtext(5, "Are you absolutely sure?");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "p");
     i0.ɵɵtext(7, "This will permanently revoke the API key. Any applications using this key will immediately lose access.");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "div", 71)(9, "label");
+    i0.ɵɵelementStart(8, "div", 60)(9, "label");
     i0.ɵɵtext(10, "Type ");
     i0.ɵɵelementStart(11, "code");
     i0.ɵɵtext(12, "REVOKE");
     i0.ɵɵelementEnd();
     i0.ɵɵtext(13, " to confirm:");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(14, "input", 72);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_4_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.RevokeConfirmText, $event) || (ctx_r1.RevokeConfirmText = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(14, "input", 61);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_4_Template_input_ngModelChange_14_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); i0.ɵɵtwoWayBindingSet(ctx_r1.RevokeConfirmText, $event) || (ctx_r1.RevokeConfirmText = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 73)(16, "button", 25);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_4_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.cancelRevoke()); });
+    i0.ɵɵelementStart(15, "div", 62)(16, "button", 23);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_4_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.cancelRevoke()); });
     i0.ɵɵtext(17, "Cancel");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "button", 74);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_4_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.confirmRevoke()); });
-    i0.ɵɵtemplate(19, APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_4_mj_loading_19_Template, 1, 1, "mj-loading", 57)(20, APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_4_span_20_Template, 3, 0, "span", 9);
+    i0.ɵɵelementStart(18, "button", 63);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_4_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.confirmRevoke()); });
+    i0.ɵɵconditionalCreate(19, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_4_Conditional_19_Template, 1, 1, "mj-loading", 50);
+    i0.ɵɵconditionalCreate(20, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_4_Conditional_20_Template, 3, 0, "span");
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
@@ -153,26 +155,27 @@ function APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_4_Template(r
     i0.ɵɵadvance(4);
     i0.ɵɵproperty("disabled", ctx_r1.RevokeConfirmText !== "REVOKE" || ctx_r1.IsRevoking);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.IsRevoking);
+    i0.ɵɵconditional(ctx_r1.IsRevoking ? 19 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.IsRevoking);
+    i0.ɵɵconditional(!ctx_r1.IsRevoking ? 20 : -1);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_div_49_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 60)(1, "h4");
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 44)(1, "h4");
     i0.ɵɵtext(2, "Danger Zone");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(3, APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_3_Template, 11, 0, "div", 61)(4, APIKeyEditPanelComponent_ng_container_12_div_15_div_49_div_4_Template, 21, 4, "div", 62);
+    i0.ɵɵconditionalCreate(3, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_3_Template, 11, 0, "div", 52);
+    i0.ɵɵconditionalCreate(4, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Conditional_4_Template, 21, 4, "div", 53);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", !ctx_r1.ShowRevokeConfirm);
+    i0.ɵɵconditional(!ctx_r1.ShowRevokeConfirm ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.ShowRevokeConfirm);
+    i0.ɵɵconditional(ctx_r1.ShowRevokeConfirm ? 4 : -1);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_div_50_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 75);
-    i0.ɵɵelement(1, "i", 67);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_50_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45);
+    i0.ɵɵelement(1, "i", 57);
     i0.ɵɵelementStart(2, "div")(3, "strong");
     i0.ɵɵtext(4, "This API key has been revoked");
     i0.ɵɵelementEnd();
@@ -180,66 +183,67 @@ function APIKeyEditPanelComponent_ng_container_12_div_15_div_50_Template(rf, ctx
     i0.ɵɵtext(6, "It can no longer be used for authentication. Consider deleting this record if no longer needed.");
     i0.ɵɵelementEnd()()();
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_15_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 31)(1, "div", 32)(2, "div", 33)(3, "div", 34)(4, "span", 35);
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 26)(2, "div", 27)(3, "div", 28)(4, "span", 29);
     i0.ɵɵtext(5, "Key Hash");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "code", 36);
+    i0.ɵɵelementStart(6, "code", 30);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(8, "div", 37)(9, "div", 38)(10, "span", 35);
+    i0.ɵɵelementStart(8, "div", 31)(9, "div", 32)(10, "span", 29);
     i0.ɵɵtext(11, "Created");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "span", 39);
+    i0.ɵɵelementStart(12, "span", 33);
     i0.ɵɵtext(13);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 38)(15, "span", 35);
+    i0.ɵɵelementStart(14, "div", 32)(15, "span", 29);
     i0.ɵɵtext(16, "Created By");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(17, "span", 39);
+    i0.ɵɵelementStart(17, "span", 33);
     i0.ɵɵtext(18);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(19, "div", 38)(20, "span", 35);
+    i0.ɵɵelementStart(19, "div", 32)(20, "span", 29);
     i0.ɵɵtext(21, "Owner");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(22, "span", 39);
+    i0.ɵɵelementStart(22, "span", 33);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(24, "div", 38)(25, "span", 35);
+    i0.ɵɵelementStart(24, "div", 32)(25, "span", 29);
     i0.ɵɵtext(26, "Last Used");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(27, "span", 39);
+    i0.ɵɵelementStart(27, "span", 33);
     i0.ɵɵtext(28);
     i0.ɵɵelementEnd()()()();
-    i0.ɵɵelementStart(29, "div", 40)(30, "div", 41)(31, "h4");
+    i0.ɵɵelementStart(29, "div", 34)(30, "div", 35)(31, "h4");
     i0.ɵɵtext(32, "Key Configuration");
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(33, APIKeyEditPanelComponent_ng_container_12_div_15_button_33_Template, 3, 5, "button", 42);
+    i0.ɵɵconditionalCreate(33, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_33_Template, 3, 5, "button", 36);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(34, "div", 43)(35, "label");
+    i0.ɵɵelementStart(34, "div", 37)(35, "label");
     i0.ɵɵtext(36, "Label");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(37, "input", 44);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyEditPanelComponent_ng_container_12_div_15_Template_input_ngModelChange_37_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditLabel, $event) || (ctx_r1.EditLabel = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(37, "input", 38);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Template_input_ngModelChange_37_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditLabel, $event) || (ctx_r1.EditLabel = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(38, "div", 43)(39, "label");
+    i0.ɵɵelementStart(38, "div", 37)(39, "label");
     i0.ɵɵtext(40, "Description");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(41, "textarea", 45);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyEditPanelComponent_ng_container_12_div_15_Template_textarea_ngModelChange_41_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditDescription, $event) || (ctx_r1.EditDescription = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(41, "textarea", 39);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Template_textarea_ngModelChange_41_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditDescription, $event) || (ctx_r1.EditDescription = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(42, "div", 43)(43, "label");
+    i0.ɵɵelementStart(42, "div", 37)(43, "label");
     i0.ɵɵtext(44, "Expiration");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(45, "div", 46)(46, "kendo-datepicker", 47);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyEditPanelComponent_ng_container_12_div_15_Template_kendo_datepicker_ngModelChange_46_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditExpiresAt, $event) || (ctx_r1.EditExpiresAt = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(45, "div", 40)(46, "kendo-datepicker", 41);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyEditPanelComponent_Conditional_12_Conditional_14_Template_kendo_datepicker_ngModelChange_46_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.EditExpiresAt, $event) || (ctx_r1.EditExpiresAt = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(47, APIKeyEditPanelComponent_ng_container_12_div_15_button_47_Template, 3, 0, "button", 48);
+    i0.ɵɵconditionalCreate(47, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_47_Template, 3, 0, "button", 42);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(48, APIKeyEditPanelComponent_ng_container_12_div_15_div_48_Template, 4, 4, "div", 49);
+    i0.ɵɵconditionalCreate(48, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_48_Template, 4, 4, "div", 43);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(49, APIKeyEditPanelComponent_ng_container_12_div_15_div_49_Template, 5, 2, "div", 50)(50, APIKeyEditPanelComponent_ng_container_12_div_15_div_50_Template, 7, 0, "div", 51);
+    i0.ɵɵconditionalCreate(49, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_49_Template, 5, 2, "div", 44);
+    i0.ɵɵconditionalCreate(50, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Conditional_50_Template, 7, 0, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
@@ -256,7 +260,7 @@ function APIKeyEditPanelComponent_ng_container_12_div_15_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r1.APIKey.LastUsedAt ? ctx_r1.formatDate(ctx_r1.APIKey.LastUsedAt) : "Never", " ");
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngIf", ctx_r1.APIKey.Status === "Active");
+    i0.ɵɵconditional(ctx_r1.APIKey.Status === "Active" ? 33 : -1);
     i0.ɵɵadvance(4);
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditLabel);
     i0.ɵɵproperty("disabled", !ctx_r1.IsEditing);
@@ -267,42 +271,43 @@ function APIKeyEditPanelComponent_ng_container_12_div_15_Template(rf, ctx) { if
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditExpiresAt);
     i0.ɵɵproperty("disabled", !ctx_r1.IsEditing)("min", ctx_r1.getMinDate());
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.IsEditing && ctx_r1.EditExpiresAt);
+    i0.ɵɵconditional(ctx_r1.IsEditing && ctx_r1.EditExpiresAt ? 47 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.IsEditing);
+    i0.ɵɵconditional(ctx_r1.IsEditing ? 48 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.APIKey.Status === "Active");
+    i0.ɵɵconditional(ctx_r1.APIKey.Status === "Active" ? 49 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.APIKey.Status === "Revoked");
+    i0.ɵɵconditional(ctx_r1.APIKey.Status === "Revoked" ? 50 : -1);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_button_5_mj_loading_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 58);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_5_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 50);
 } if (rf & 2) {
     i0.ɵɵproperty("showText", false);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_button_5_span_2_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_5_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
-    i0.ɵɵelement(1, "i", 59);
+    i0.ɵɵelement(1, "i", 51);
     i0.ɵɵtext(2, " Save Changes ");
     i0.ɵɵelementEnd();
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_button_5_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 56);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_div_16_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.saveScopeChanges()); });
-    i0.ɵɵtemplate(1, APIKeyEditPanelComponent_ng_container_12_div_16_button_5_mj_loading_1_Template, 1, 1, "mj-loading", 57)(2, APIKeyEditPanelComponent_ng_container_12_div_16_button_5_span_2_Template, 3, 0, "span", 9);
+    i0.ɵɵelementStart(0, "button", 49);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.saveScopeChanges()); });
+    i0.ɵɵconditionalCreate(1, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_5_Conditional_1_Template, 1, 1, "mj-loading", 50);
+    i0.ɵɵconditionalCreate(2, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_5_Conditional_2_Template, 3, 0, "span");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵproperty("themeColor", "primary")("disabled", ctx_r1.IsSaving);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.IsSaving);
+    i0.ɵɵconditional(ctx_r1.IsSaving ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.IsSaving);
+    i0.ɵɵconditional(!ctx_r1.IsSaving ? 2 : -1);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_div_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 84);
-    i0.ɵɵelement(1, "i", 65);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 68);
+    i0.ɵɵelement(1, "i", 55);
     i0.ɵɵelementStart(2, "div")(3, "strong");
     i0.ɵɵtext(4, "Warning: No permissions assigned");
     i0.ɵɵelementEnd();
@@ -310,15 +315,15 @@ function APIKeyEditPanelComponent_ng_container_12_div_16_div_6_Template(rf, ctx)
     i0.ɵɵtext(6, "This API key has no assigned scopes and cannot perform any operations. All API requests using this key will be rejected until scopes are assigned.");
     i0.ɵɵelementEnd()()();
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_mj_loading_7_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 85);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 69);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_label_9_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_9_Template(rf, ctx) { if (rf & 1) {
     const _r13 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "label", 97);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_label_9_Template_label_click_0_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); });
-    i0.ɵɵelementStart(1, "input", 98);
-    i0.ɵɵlistener("change", function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_label_9_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r13); const category_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleCategoryAll(category_r12)); });
+    i0.ɵɵelementStart(0, "label", 80);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_9_Template_label_click_0_listener($event) { i0.ɵɵrestoreView(_r13); return i0.ɵɵresetView($event.stopPropagation()); });
+    i0.ɵɵelementStart(1, "input", 81);
+    i0.ɵɵlistener("change", function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_9_Template_input_change_1_listener() { i0.ɵɵrestoreView(_r13); const category_r12 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleCategoryAll(category_r12)); });
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "All");
@@ -328,8 +333,8 @@ function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_label_9_Tem
     i0.ɵɵadvance();
     i0.ɵɵproperty("checked", category_r12.allSelected);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_div_11_div_1_span_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 107);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_11_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 87);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -337,16 +342,16 @@ function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_div_11_div_
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", item_r15.scope.Description, " ");
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_div_11_div_1_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_11_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r14 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 101)(1, "label", 102)(2, "input", 103);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_div_11_div_1_Template_input_ngModelChange_2_listener($event) { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; i0.ɵɵtwoWayBindingSet(item_r15.selected, $event) || (item_r15.selected = $event); return i0.ɵɵresetView($event); });
-    i0.ɵɵlistener("change", function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_div_11_div_1_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.onScopeChange()); });
+    i0.ɵɵelementStart(0, "div", 82)(1, "label", 83)(2, "input", 84);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_11_For_2_Template_input_ngModelChange_2_listener($event) { const item_r15 = i0.ɵɵrestoreView(_r14).$implicit; i0.ɵɵtwoWayBindingSet(item_r15.selected, $event) || (item_r15.selected = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵlistener("change", function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_11_For_2_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(6); return i0.ɵɵresetView(ctx_r1.onScopeChange()); });
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 104)(4, "span", 105);
+    i0.ɵɵelementStart(3, "div", 85)(4, "span", 86);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_div_11_div_1_span_6_Template, 2, 1, "span", 106);
+    i0.ɵɵconditionalCreate(6, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_11_For_2_Conditional_6_Template, 2, 1, "span", 87);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const item_r15 = ctx.$implicit;
@@ -357,34 +362,34 @@ function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_div_11_div_
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(item_r15.scope.Name);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", item_r15.scope.Description);
+    i0.ɵɵconditional(item_r15.scope.Description ? 6 : -1);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_div_11_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 99);
-    i0.ɵɵtemplate(1, APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_div_11_div_1_Template, 7, 4, "div", 100);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 79);
+    i0.ɵɵrepeaterCreate(1, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_11_For_2_Template, 7, 4, "div", 82, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const category_r12 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", category_r12.scopes);
+    i0.ɵɵrepeater(category_r12.scopes);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Template(rf, ctx) { if (rf & 1) {
     const _r11 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 88)(1, "div", 89);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_Template_div_click_1_listener() { const category_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleCategory(category_r12)); });
-    i0.ɵɵelementStart(2, "div", 90);
+    i0.ɵɵelementStart(0, "div", 71)(1, "div", 72);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Template_div_click_1_listener() { const category_r12 = i0.ɵɵrestoreView(_r11).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.toggleCategory(category_r12)); });
+    i0.ɵɵelementStart(2, "div", 73);
     i0.ɵɵelement(3, "i");
-    i0.ɵɵelementStart(4, "span", 91);
+    i0.ɵɵelementStart(4, "span", 74);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 92);
+    i0.ɵɵelementStart(6, "span", 75);
     i0.ɵɵtext(7);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 93);
-    i0.ɵɵtemplate(9, APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_label_9_Template, 4, 1, "label", 94);
-    i0.ɵɵelement(10, "i", 95);
+    i0.ɵɵelementStart(8, "div", 76);
+    i0.ɵɵconditionalCreate(9, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_9_Template, 4, 1, "label", 77);
+    i0.ɵɵelement(10, "i", 78);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(11, APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_div_11_Template, 2, 1, "div", 96);
+    i0.ɵɵconditionalCreate(11, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Conditional_11_Template, 3, 0, "div", 79);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const category_r12 = ctx.$implicit;
@@ -397,58 +402,60 @@ function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_Template(rf
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate2(" ", ctx_r1.getSelectedCount(category_r12), "/", category_r12.scopes.length, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.APIKey.Status === "Active");
+    i0.ɵɵconditional(ctx_r1.APIKey.Status === "Active" ? 9 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("fa-chevron-down", !category_r12.expanded)("fa-chevron-up", category_r12.expanded);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", category_r12.expanded);
+    i0.ɵɵconditional(category_r12.expanded ? 11 : -1);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_div_8_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 86);
-    i0.ɵɵtemplate(1, APIKeyEditPanelComponent_ng_container_12_div_16_div_8_div_1_Template, 12, 13, "div", 87);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵrepeaterCreate(1, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_For_2_Template, 12, 13, "div", 71, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.ScopeCategories);
+    i0.ɵɵrepeater(ctx_r1.ScopeCategories);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 76)(1, "div", 77)(2, "div", 78)(3, "span", 79);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 64)(2, "div", 65)(3, "span", 66);
     i0.ɵɵtext(4);
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(5, APIKeyEditPanelComponent_ng_container_12_div_16_button_5_Template, 3, 4, "button", 80);
+    i0.ɵɵconditionalCreate(5, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_5_Template, 3, 4, "button", 67);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, APIKeyEditPanelComponent_ng_container_12_div_16_div_6_Template, 7, 0, "div", 81)(7, APIKeyEditPanelComponent_ng_container_12_div_16_mj_loading_7_Template, 1, 0, "mj-loading", 82)(8, APIKeyEditPanelComponent_ng_container_12_div_16_div_8_Template, 2, 1, "div", 83);
+    i0.ɵɵconditionalCreate(6, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_6_Template, 7, 0, "div", 68);
+    i0.ɵɵconditionalCreate(7, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_7_Template, 1, 0, "mj-loading", 69);
+    i0.ɵɵconditionalCreate(8, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Conditional_8_Template, 3, 0, "div", 70);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1("", ctx_r1.getAssignedScopeCount(), " permissions assigned");
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.HasScopeChanges && ctx_r1.APIKey.Status === "Active");
+    i0.ɵɵconditional(ctx_r1.HasScopeChanges && ctx_r1.APIKey.Status === "Active" ? 5 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.IsLoadingScopes && ctx_r1.getAssignedScopeCount() === 0 && ctx_r1.APIKey.Status === "Active");
+    i0.ɵɵconditional(!ctx_r1.IsLoadingScopes && ctx_r1.getAssignedScopeCount() === 0 && ctx_r1.APIKey.Status === "Active" ? 6 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.IsLoadingScopes);
+    i0.ɵɵconditional(ctx_r1.IsLoadingScopes ? 7 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.IsLoadingScopes);
+    i0.ɵɵconditional(!ctx_r1.IsLoadingScopes ? 8 : -1);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_17_mj_loading_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 111);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_16_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 88);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_17_div_2_div_14_div_10_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 127)(1, "span", 122);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_16_Conditional_2_Conditional_14_For_11_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 102)(1, "span", 98);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 123)(4, "span", 128);
+    i0.ɵɵelementStart(3, "span", 99)(4, "span", 103);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 129);
+    i0.ɵɵelementStart(7, "span", 104);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(9, "span", 125);
+    i0.ɵɵelementStart(9, "span", 101);
     i0.ɵɵtext(10);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -467,29 +474,29 @@ function APIKeyEditPanelComponent_ng_container_12_div_17_div_2_div_14_div_10_Tem
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1("", log_r16.responseTime, "ms");
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_17_div_2_div_14_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 120)(1, "div", 121)(2, "span", 122);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_16_Conditional_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 95)(1, "div", 97)(2, "span", 98);
     i0.ɵɵtext(3, "Time");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 123);
+    i0.ɵɵelementStart(4, "span", 99);
     i0.ɵɵtext(5, "Endpoint");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "span", 124);
+    i0.ɵɵelementStart(6, "span", 100);
     i0.ɵɵtext(7, "Status");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "span", 125);
+    i0.ɵɵelementStart(8, "span", 101);
     i0.ɵɵtext(9, "Duration");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(10, APIKeyEditPanelComponent_ng_container_12_div_17_div_2_div_14_div_10_Template, 11, 6, "div", 126);
+    i0.ɵɵrepeaterCreate(10, APIKeyEditPanelComponent_Conditional_12_Conditional_16_Conditional_2_Conditional_14_For_11_Template, 11, 6, "div", 102, i0.ɵɵrepeaterTrackByIdentity);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(4);
     i0.ɵɵadvance(10);
-    i0.ɵɵproperty("ngForOf", ctx_r1.UsageLogs);
+    i0.ɵɵrepeater(ctx_r1.UsageLogs);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_17_div_2_div_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 130);
-    i0.ɵɵelement(1, "i", 131);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_16_Conditional_2_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 96);
+    i0.ɵɵelement(1, "i", 105);
     i0.ɵɵelementStart(2, "span");
     i0.ɵɵtext(3, "No usage logs yet");
     i0.ɵɵelementEnd();
@@ -497,24 +504,25 @@ function APIKeyEditPanelComponent_ng_container_12_div_17_div_2_div_15_Template(r
     i0.ɵɵtext(5, "Usage will be recorded when this API key is used for authentication");
     i0.ɵɵelementEnd()();
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_17_div_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 112)(1, "div", 113)(2, "div", 114);
-    i0.ɵɵelement(3, "i", 19);
-    i0.ɵɵelementStart(4, "div", 115);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_16_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 89)(1, "div", 90)(2, "div", 91);
+    i0.ɵɵelement(3, "i", 17);
+    i0.ɵɵelementStart(4, "div", 92);
     i0.ɵɵtext(5);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(6, "div", 116);
+    i0.ɵɵelementStart(6, "div", 93);
     i0.ɵɵtext(7, "Total Requests");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(8, "div", 114);
-    i0.ɵɵelement(9, "i", 117);
-    i0.ɵɵelementStart(10, "div", 115);
+    i0.ɵɵelementStart(8, "div", 91);
+    i0.ɵɵelement(9, "i", 94);
+    i0.ɵɵelementStart(10, "div", 92);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(12, "div", 116);
+    i0.ɵɵelementStart(12, "div", 93);
     i0.ɵɵtext(13, "Last Used");
     i0.ɵɵelementEnd()()();
-    i0.ɵɵtemplate(14, APIKeyEditPanelComponent_ng_container_12_div_17_div_2_div_14_Template, 11, 1, "div", 118)(15, APIKeyEditPanelComponent_ng_container_12_div_17_div_2_div_15_Template, 6, 0, "div", 119);
+    i0.ɵɵconditionalCreate(14, APIKeyEditPanelComponent_Conditional_12_Conditional_16_Conditional_2_Conditional_14_Template, 12, 0, "div", 95);
+    i0.ɵɵconditionalCreate(15, APIKeyEditPanelComponent_Conditional_12_Conditional_16_Conditional_2_Conditional_15_Template, 6, 0, "div", 96);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(3);
@@ -523,74 +531,71 @@ function APIKeyEditPanelComponent_ng_container_12_div_17_div_2_Template(rf, ctx)
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.UsageLogs.length > 0 ? ctx_r1.formatRelativeTime(ctx_r1.UsageLogs[0].timestamp) : "Never", " ");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r1.UsageLogs.length > 0);
+    i0.ɵɵconditional(ctx_r1.UsageLogs.length > 0 ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.UsageLogs.length === 0);
+    i0.ɵɵconditional(ctx_r1.UsageLogs.length === 0 ? 15 : -1);
 } }
-function APIKeyEditPanelComponent_ng_container_12_div_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 108);
-    i0.ɵɵtemplate(1, APIKeyEditPanelComponent_ng_container_12_div_17_mj_loading_1_Template, 1, 0, "mj-loading", 109)(2, APIKeyEditPanelComponent_ng_container_12_div_17_div_2_Template, 16, 4, "div", 110);
+function APIKeyEditPanelComponent_Conditional_12_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21);
+    i0.ɵɵconditionalCreate(1, APIKeyEditPanelComponent_Conditional_12_Conditional_16_Conditional_1_Template, 1, 0, "mj-loading", 88);
+    i0.ɵɵconditionalCreate(2, APIKeyEditPanelComponent_Conditional_12_Conditional_16_Conditional_2_Template, 16, 4, "div", 89);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.IsLoadingLogs);
+    i0.ɵɵconditional(ctx_r1.IsLoadingLogs ? 1 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.IsLoadingLogs);
+    i0.ɵɵconditional(!ctx_r1.IsLoadingLogs ? 2 : -1);
 } }
-function APIKeyEditPanelComponent_ng_container_12_Template(rf, ctx) { if (rf & 1) {
+function APIKeyEditPanelComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, APIKeyEditPanelComponent_ng_container_12_div_1_Template, 3, 1, "div", 12)(2, APIKeyEditPanelComponent_ng_container_12_div_2_Template, 3, 1, "div", 13);
-    i0.ɵɵelementStart(3, "div", 14)(4, "button", 15);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ActiveTab = "details"); });
-    i0.ɵɵelement(5, "i", 16);
-    i0.ɵɵtext(6, " Details ");
+    i0.ɵɵconditionalCreate(0, APIKeyEditPanelComponent_Conditional_12_Conditional_0_Template, 3, 1, "div", 10);
+    i0.ɵɵconditionalCreate(1, APIKeyEditPanelComponent_Conditional_12_Conditional_1_Template, 3, 1, "div", 11);
+    i0.ɵɵelementStart(2, "div", 12)(3, "button", 13);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ActiveTab = "details"); });
+    i0.ɵɵelement(4, "i", 14);
+    i0.ɵɵtext(5, " Details ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "button", 15);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ActiveTab = "scopes"); });
-    i0.ɵɵelement(8, "i", 17);
-    i0.ɵɵtext(9, " Permissions ");
-    i0.ɵɵtemplate(10, APIKeyEditPanelComponent_ng_container_12_span_10_Template, 2, 0, "span", 18);
+    i0.ɵɵelementStart(6, "button", 13);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ActiveTab = "scopes"); });
+    i0.ɵɵelement(7, "i", 15);
+    i0.ɵɵtext(8, " Permissions ");
+    i0.ɵɵconditionalCreate(9, APIKeyEditPanelComponent_Conditional_12_Conditional_9_Template, 2, 0, "span", 16);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "button", 15);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ActiveTab = "usage"); });
-    i0.ɵɵelement(12, "i", 19);
-    i0.ɵɵtext(13, " Usage ");
+    i0.ɵɵelementStart(10, "button", 13);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.ActiveTab = "usage"); });
+    i0.ɵɵelement(11, "i", 17);
+    i0.ɵɵtext(12, " Usage ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(14, "div", 20);
-    i0.ɵɵtemplate(15, APIKeyEditPanelComponent_ng_container_12_div_15_Template, 51, 20, "div", 21)(16, APIKeyEditPanelComponent_ng_container_12_div_16_Template, 9, 5, "div", 22)(17, APIKeyEditPanelComponent_ng_container_12_div_17_Template, 3, 2, "div", 23);
+    i0.ɵɵelementStart(13, "div", 18);
+    i0.ɵɵconditionalCreate(14, APIKeyEditPanelComponent_Conditional_12_Conditional_14_Template, 51, 20, "div", 19);
+    i0.ɵɵconditionalCreate(15, APIKeyEditPanelComponent_Conditional_12_Conditional_15_Template, 9, 5, "div", 20);
+    i0.ɵɵconditionalCreate(16, APIKeyEditPanelComponent_Conditional_12_Conditional_16_Template, 3, 2, "div", 21);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 24)(19, "button", 25);
-    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_ng_container_12_Template_button_click_19_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
-    i0.ɵɵtext(20, "Close");
+    i0.ɵɵelementStart(17, "div", 22)(18, "button", 23);
+    i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Conditional_12_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
+    i0.ɵɵtext(19, "Close");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementContainerEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵconditional(ctx_r1.SuccessMessage ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.SuccessMessage);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.ErrorMessage);
+    i0.ɵɵconditional(ctx_r1.ErrorMessage ? 1 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("active", ctx_r1.ActiveTab === "details");
     i0.ɵɵadvance(3);
     i0.ɵɵclassProp("active", ctx_r1.ActiveTab === "scopes");
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("ngIf", ctx_r1.HasScopeChanges);
+    i0.ɵɵconditional(ctx_r1.HasScopeChanges ? 9 : -1);
     i0.ɵɵadvance();
     i0.ɵɵclassProp("active", ctx_r1.ActiveTab === "usage");
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", ctx_r1.ActiveTab === "details");
+    i0.ɵɵconditional(ctx_r1.ActiveTab === "details" ? 14 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.ActiveTab === "scopes");
+    i0.ɵɵconditional(ctx_r1.ActiveTab === "scopes" ? 15 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.ActiveTab === "usage");
+    i0.ɵɵconditional(ctx_r1.ActiveTab === "usage" ? 16 : -1);
 } }
-/** Tree shaking prevention function */
-export function LoadAPIKeyEditPanel() {
-    // This function prevents tree shaking
-}
 /**
  * Panel for viewing and editing existing API keys
  */
@@ -1020,9 +1025,9 @@ export class APIKeyEditPanelComponent {
     }
     static ɵfac = function APIKeyEditPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || APIKeyEditPanelComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: APIKeyEditPanelComponent, selectors: [["mj-api-key-edit-panel"]], hostBindings: function APIKeyEditPanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("keydown.escape", function APIKeyEditPanelComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, false, i0.ɵɵresolveDocument);
-        } }, inputs: { Visible: "Visible", KeyId: "KeyId" }, outputs: { VisibleChange: "VisibleChange", Updated: "Updated", Revoked: "Revoked", Closed: "Closed" }, features: [i0.ɵɵNgOnChangesFeature], decls: 13, vars: 10, consts: [["class", "slideout-backdrop", 3, "click", 4, "ngIf"], [1, "slideout-panel"], [1, "slideout-header"], [1, "slideout-title"], [1, "fa-solid", "fa-key"], [1, "key-status"], ["title", "Close (Esc)", 1, "slideout-close", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading key details...", 4, "ngIf"], [4, "ngIf"], [1, "slideout-backdrop", 3, "click"], ["text", "Loading key details..."], ["class", "message success", 4, "ngIf"], ["class", "message error", 4, "ngIf"], [1, "slideout-tabs"], [1, "slideout-tab", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-shield-halved"], ["class", "tab-badge unsaved", 4, "ngIf"], [1, "fa-solid", "fa-chart-line"], [1, "slideout-content"], ["class", "tab-panel", 4, "ngIf"], ["class", "tab-panel scopes-panel", 4, "ngIf"], ["class", "tab-panel usage-panel", 4, "ngIf"], [1, "slideout-footer"], ["kendoButton", "", 3, "click"], [1, "message", "success"], [1, "fa-solid", "fa-check-circle"], [1, "message", "error"], [1, "fa-solid", "fa-circle-exclamation"], [1, "tab-badge", "unsaved"], [1, "tab-panel"], [1, "key-info-card"], [1, "info-header"], [1, "info-row"], [1, "info-label"], [1, "hash-value"], [1, "info-grid"], [1, "info-item"], [1, "info-value"], [1, "edit-section"], [1, "section-header"], ["class", "edit-toggle", 3, "click", 4, "ngIf"], [1, "form-field"], ["kendoTextBox", "", 1, "form-input", 3, "ngModelChange", "ngModel", "disabled"], ["kendoTextArea", "", 1, "form-textarea", 3, "ngModelChange", "ngModel", "disabled", "rows"], [1, "expiration-field"], ["format", "MMM d, yyyy", "placeholder", "Never expires", 3, "ngModelChange", "ngModel", "disabled", "min"], ["class", "clear-btn", 3, "click", 4, "ngIf"], ["class", "edit-actions", 4, "ngIf"], ["class", "danger-zone", 4, "ngIf"], ["class", "revoked-notice", 4, "ngIf"], [1, "edit-toggle", 3, "click"], [1, "fa-solid"], [1, "clear-btn", 3, "click"], [1, "edit-actions"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], ["size", "small", 3, "showText", 4, "ngIf"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-save"], [1, "danger-zone"], ["class", "revoke-section", 4, "ngIf"], ["class", "revoke-confirm", 4, "ngIf"], [1, "revoke-section"], [1, "revoke-info"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "revoke-btn", 3, "click"], [1, "fa-solid", "fa-ban"], [1, "revoke-confirm"], [1, "confirm-warning"], [1, "fa-solid", "fa-skull-crossbones"], [1, "confirm-input"], ["kendoTextBox", "", "placeholder", "REVOKE", 3, "ngModelChange", "ngModel"], [1, "confirm-actions"], [1, "confirm-revoke-btn", 3, "click", "disabled"], [1, "revoked-notice"], [1, "tab-panel", "scopes-panel"], [1, "scopes-header"], [1, "scopes-info"], [1, "scope-count"], ["kendoButton", "", 3, "themeColor", "disabled", "click", 4, "ngIf"], ["class", "no-scopes-warning", 4, "ngIf"], ["text", "Loading permissions...", 4, "ngIf"], ["class", "scope-categories", 4, "ngIf"], [1, "no-scopes-warning"], ["text", "Loading permissions..."], [1, "scope-categories"], ["class", "scope-category", 4, "ngFor", "ngForOf"], [1, "scope-category"], [1, "category-header", 3, "click"], [1, "category-left"], [1, "category-name"], [1, "category-count"], [1, "category-right"], ["class", "category-all-toggle", 3, "click", 4, "ngIf"], [1, "fa-solid", "expand-icon"], ["class", "category-scopes", 4, "ngIf"], [1, "category-all-toggle", 3, "click"], ["type", "checkbox", "kendoCheckBox", "", 3, "change", "checked"], [1, "category-scopes"], ["class", "scope-item", 4, "ngFor", "ngForOf"], [1, "scope-item"], [1, "scope-label"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "change", "ngModel", "disabled"], [1, "scope-info"], [1, "scope-name"], ["class", "scope-desc", 4, "ngIf"], [1, "scope-desc"], [1, "tab-panel", "usage-panel"], ["text", "Loading usage logs...", 4, "ngIf"], ["class", "usage-content", 4, "ngIf"], ["text", "Loading usage logs..."], [1, "usage-content"], [1, "usage-stats"], [1, "stat-card"], [1, "stat-value"], [1, "stat-label"], [1, "fa-solid", "fa-clock"], ["class", "usage-logs", 4, "ngIf"], ["class", "empty-state", 4, "ngIf"], [1, "usage-logs"], [1, "log-header"], [1, "col-time"], [1, "col-endpoint"], [1, "col-status"], [1, "col-duration"], ["class", "log-item", 4, "ngFor", "ngForOf"], [1, "log-item"], [1, "method-badge"], [1, "col-status", 3, "ngClass"], [1, "empty-state"], [1, "fa-solid", "fa-chart-area"]], template: function APIKeyEditPanelComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, APIKeyEditPanelComponent_div_0_Template, 1, 0, "div", 0);
+            i0.ɵɵlistener("keydown.escape", function APIKeyEditPanelComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, i0.ɵɵresolveDocument);
+        } }, inputs: { Visible: "Visible", KeyId: "KeyId" }, outputs: { VisibleChange: "VisibleChange", Updated: "Updated", Revoked: "Revoked", Closed: "Closed" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 13, vars: 10, consts: [[1, "slideout-backdrop"], [1, "slideout-panel"], [1, "slideout-header"], [1, "slideout-title"], [1, "fa-solid", "fa-key"], [1, "key-status"], ["title", "Close (Esc)", 1, "slideout-close", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading key details..."], [1, "slideout-backdrop", 3, "click"], [1, "message", "success"], [1, "message", "error"], [1, "slideout-tabs"], [1, "slideout-tab", 3, "click"], [1, "fa-solid", "fa-info-circle"], [1, "fa-solid", "fa-shield-halved"], [1, "tab-badge", "unsaved"], [1, "fa-solid", "fa-chart-line"], [1, "slideout-content"], [1, "tab-panel"], [1, "tab-panel", "scopes-panel"], [1, "tab-panel", "usage-panel"], [1, "slideout-footer"], ["kendoButton", "", 3, "click"], [1, "fa-solid", "fa-check-circle"], [1, "fa-solid", "fa-circle-exclamation"], [1, "key-info-card"], [1, "info-header"], [1, "info-row"], [1, "info-label"], [1, "hash-value"], [1, "info-grid"], [1, "info-item"], [1, "info-value"], [1, "edit-section"], [1, "section-header"], [1, "edit-toggle"], [1, "form-field"], ["kendoTextBox", "", 1, "form-input", 3, "ngModelChange", "ngModel", "disabled"], ["kendoTextArea", "", 1, "form-textarea", 3, "ngModelChange", "ngModel", "disabled", "rows"], [1, "expiration-field"], ["format", "MMM d, yyyy", "placeholder", "Never expires", 3, "ngModelChange", "ngModel", "disabled", "min"], [1, "clear-btn"], [1, "edit-actions"], [1, "danger-zone"], [1, "revoked-notice"], [1, "edit-toggle", 3, "click"], [1, "fa-solid"], [1, "clear-btn", 3, "click"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-save"], [1, "revoke-section"], [1, "revoke-confirm"], [1, "revoke-info"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "revoke-btn", 3, "click"], [1, "fa-solid", "fa-ban"], [1, "confirm-warning"], [1, "fa-solid", "fa-skull-crossbones"], [1, "confirm-input"], ["kendoTextBox", "", "placeholder", "REVOKE", 3, "ngModelChange", "ngModel"], [1, "confirm-actions"], [1, "confirm-revoke-btn", 3, "click", "disabled"], [1, "scopes-header"], [1, "scopes-info"], [1, "scope-count"], ["kendoButton", "", 3, "themeColor", "disabled"], [1, "no-scopes-warning"], ["text", "Loading permissions..."], [1, "scope-categories"], [1, "scope-category"], [1, "category-header", 3, "click"], [1, "category-left"], [1, "category-name"], [1, "category-count"], [1, "category-right"], [1, "category-all-toggle"], [1, "fa-solid", "expand-icon"], [1, "category-scopes"], [1, "category-all-toggle", 3, "click"], ["type", "checkbox", "kendoCheckBox", "", 3, "change", "checked"], [1, "scope-item"], [1, "scope-label"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "change", "ngModel", "disabled"], [1, "scope-info"], [1, "scope-name"], [1, "scope-desc"], ["text", "Loading usage logs..."], [1, "usage-content"], [1, "usage-stats"], [1, "stat-card"], [1, "stat-value"], [1, "stat-label"], [1, "fa-solid", "fa-clock"], [1, "usage-logs"], [1, "empty-state"], [1, "log-header"], [1, "col-time"], [1, "col-endpoint"], [1, "col-status"], [1, "col-duration"], [1, "log-item"], [1, "method-badge"], [1, "col-status", 3, "ngClass"], [1, "fa-solid", "fa-chart-area"]], template: function APIKeyEditPanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, APIKeyEditPanelComponent_Conditional_0_Template, 1, 0, "div", 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵelement(4, "i", 4);
             i0.ɵɵelementStart(5, "span");
@@ -1035,10 +1040,11 @@ export class APIKeyEditPanelComponent {
             i0.ɵɵlistener("click", function APIKeyEditPanelComponent_Template_button_click_9_listener() { return ctx.close(); });
             i0.ɵɵelement(10, "i", 7);
             i0.ɵɵelementEnd()();
-            i0.ɵɵtemplate(11, APIKeyEditPanelComponent_mj_loading_11_Template, 1, 0, "mj-loading", 8)(12, APIKeyEditPanelComponent_ng_container_12_Template, 21, 12, "ng-container", 9);
+            i0.ɵɵconditionalCreate(11, APIKeyEditPanelComponent_Conditional_11_Template, 1, 0, "mj-loading", 8);
+            i0.ɵɵconditionalCreate(12, APIKeyEditPanelComponent_Conditional_12_Template, 20, 12);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.Visible);
+            i0.ɵɵconditional(ctx.Visible ? 0 : -1);
             i0.ɵɵadvance();
             i0.ɵɵclassProp("open", ctx.Visible);
             i0.ɵɵadvance(6);
@@ -1046,14 +1052,14 @@ export class APIKeyEditPanelComponent {
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.APIKey == null ? null : ctx.APIKey.Status, " ");
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.IsLoading);
+            i0.ɵɵconditional(ctx.IsLoading ? 11 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.IsLoading && ctx.APIKey);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.TextAreaDirective, i3.TextBoxDirective, i3.CheckBoxDirective, i4.DatePickerComponent, i5.ButtonComponent, i6.LoadingComponent], styles: ["\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 100;\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 520px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--card-background, #ffffff);\n    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n    flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #78350f;\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #f59e0b;\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.key-status[_ngcontent-%COMP%] {\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.key-status.active[_ngcontent-%COMP%] {\n    background: rgba(16, 185, 129, 0.2);\n    color: #059669;\n}\n\n.key-status.revoked[_ngcontent-%COMP%] {\n    background: rgba(220, 38, 38, 0.2);\n    color: #dc2626;\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(255, 255, 255, 0.5);\n    border: none;\n    border-radius: 8px;\n    color: #92400e;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.8);\n    color: #78350f;\n}\n\n\n\n.slideout-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    padding: 12px 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-tab[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    position: relative;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:hover {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n.slideout-tab.active[_ngcontent-%COMP%] {\n    background: #f59e0b;\n    color: white;\n}\n\n.slideout-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: rgba(255, 255, 255, 0.2);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.tab-badge.unsaved[_ngcontent-%COMP%] {\n    background: #ef4444;\n    color: white;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:not(.active)   .tab-badge[_ngcontent-%COMP%] {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0;\n}\n\n.tab-panel[_ngcontent-%COMP%] {\n    padding: 20px 24px;\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button {\n    min-width: 80px;\n    padding: 8px 16px;\n    font-weight: 500;\n    border-radius: 6px;\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    margin: 12px 16px;\n    border-radius: 8px;\n    font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.message.error[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n\n\n\n\n\n.key-info-card[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-radius: 10px;\n    padding: 14px 16px;\n    margin-bottom: 16px;\n}\n\n.info-header[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n    padding-bottom: 12px;\n    border-bottom: 1px solid rgba(245, 158, 11, 0.3);\n}\n\n.info-row[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: #92400e;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.hash-value[_ngcontent-%COMP%] {\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 13px;\n    color: #78350f;\n    word-break: break-all;\n    background: rgba(255, 255, 255, 0.5);\n    padding: 8px 12px;\n    border-radius: 6px;\n}\n\n.info-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 10px 16px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.info-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: #78350f;\n}\n\n.info-value.never-used[_ngcontent-%COMP%] {\n    color: #6b7280;\n    font-style: italic;\n}\n\n\n\n.edit-section[_ngcontent-%COMP%] {\n    background: #f9fafb;\n    border-radius: 10px;\n    padding: 16px;\n    margin-bottom: 16px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 14px;\n}\n\n.section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.edit-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.edit-toggle[_ngcontent-%COMP%]:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.form-field[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    font-weight: 500;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.form-input[_ngcontent-%COMP%], \n.form-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.expiration-field[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: 1px dashed #d1d5db;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n    margin-top: 14px;\n    padding-top: 14px;\n    border-top: 1px solid #e5e7eb;\n}\n\n\n\n.danger-zone[_ngcontent-%COMP%] {\n    background: #fef2f2;\n    border: 1px solid #fecaca;\n    border-radius: 10px;\n    padding: 14px 16px;\n}\n\n.danger-zone[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    font-size: 12px;\n    font-weight: 600;\n    color: #dc2626;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.revoke-section[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n}\n\n.revoke-info[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    flex: 1;\n}\n\n.revoke-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: #dc2626;\n    margin-top: 2px;\n}\n\n.revoke-info[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    color: #991b1b;\n    margin-bottom: 4px;\n}\n\n.revoke-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: #7f1d1d;\n}\n\n.revoke-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: white;\n    border: 1px solid #dc2626;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #dc2626;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.revoke-btn[_ngcontent-%COMP%]:hover {\n    background: #dc2626;\n    color: white;\n}\n\n\n\n.revoke-confirm[_ngcontent-%COMP%] {\n    background: #fef2f2;\n    border-radius: 8px;\n}\n\n.confirm-warning[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.confirm-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: #dc2626;\n}\n\n.confirm-warning[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    color: #991b1b;\n    font-size: 16px;\n    margin-bottom: 4px;\n}\n\n.confirm-warning[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: #7f1d1d;\n}\n\n.confirm-input[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.confirm-input[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #7f1d1d;\n    margin-bottom: 8px;\n}\n\n.confirm-input[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-weight: 600;\n}\n\n.confirm-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.confirm-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: #dc2626;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: white;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: #b91c1c;\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n\n\n.revoked-notice[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 20px;\n    background: #f3f4f6;\n    border-radius: 12px;\n}\n\n.revoked-notice[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: #6b7280;\n}\n\n.revoked-notice[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.revoked-notice[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: #6b7280;\n}\n\n\n\n.scopes-tab[_ngcontent-%COMP%] {\n    padding: 16px;\n}\n\n.scopes-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    padding-bottom: 16px;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.scope-count[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: #374151;\n}\n\n\n\n.scope-categories[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category[_ngcontent-%COMP%] {\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n}\n\n.category-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n}\n\n.category-count[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.category-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.category-all-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.category-all-toggle[_ngcontent-%COMP%]:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.category-all-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin: 0;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    color: #9ca3af;\n    font-size: 12px;\n    transition: transform 0.2s ease;\n}\n\n.category-scopes[_ngcontent-%COMP%] {\n    padding: 8px 16px 16px;\n    border-top: 1px solid #e5e7eb;\n    background: white;\n}\n\n.scope-item[_ngcontent-%COMP%] {\n    padding: 10px 0;\n    border-bottom: 1px solid #f3f4f6;\n}\n\n.scope-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: #374151;\n    font-family: monospace;\n}\n\n.scope-desc[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 2px;\n}\n\n\n\n.usage-tab[_ngcontent-%COMP%] {\n    padding: 16px;\n}\n\n.usage-stats[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.stat-card[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 20px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-radius: 12px;\n    text-align: center;\n}\n\n.stat-card[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: #f59e0b;\n    margin-bottom: 12px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: #78350f;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #92400e;\n    margin-top: 4px;\n}\n\n\n\n.usage-logs[_ngcontent-%COMP%] {\n    background: #f9fafb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.log-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 100px 1fr 80px 80px;\n    gap: 12px;\n    padding: 12px 16px;\n    background: #e5e7eb;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.log-item[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 100px 1fr 80px 80px;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid #e5e7eb;\n    font-size: 13px;\n    align-items: center;\n}\n\n.log-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.col-time[_ngcontent-%COMP%] {\n    color: #6b7280;\n}\n\n.col-endpoint[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-family: monospace;\n    color: #374151;\n}\n\n.method-badge[_ngcontent-%COMP%] {\n    padding: 2px 6px;\n    background: #dbeafe;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    color: #1d4ed8;\n}\n\n.col-status[_ngcontent-%COMP%] {\n    font-weight: 600;\n}\n\n.col-status.status-success[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n.col-status.status-warning[_ngcontent-%COMP%] {\n    color: #f59e0b;\n}\n\n.col-status.status-error[_ngcontent-%COMP%] {\n    color: #ef4444;\n}\n\n.col-duration[_ngcontent-%COMP%] {\n    color: #6b7280;\n    text-align: right;\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: 48px 24px;\n    color: #6b7280;\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 500;\n    color: #374151;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 8px 0 0 0;\n    font-size: 13px;\n}\n\n\n\n\n\n\n[_nghost-%COMP%]     .form-input .k-input, \n[_nghost-%COMP%]     .form-textarea .k-input-inner, \n[_nghost-%COMP%]     .k-datepicker .k-input {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .form-input:focus-within, \n[_nghost-%COMP%]     .form-textarea:focus-within, \n[_nghost-%COMP%]     .k-datepicker:focus-within {\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n\n\n[_nghost-%COMP%]     .edit-actions .k-button {\n    min-width: 120px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .edit-actions .k-button-solid-primary {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);\n}\n\n[_nghost-%COMP%]     .edit-actions .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n\n\n[_nghost-%COMP%]     .scopes-header .k-button {\n    min-width: 120px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .scopes-header .k-button-solid-primary {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);\n}\n\n[_nghost-%COMP%]     .scopes-header .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n\n\n.no-scopes-warning[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 16px;\n    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n    border: 1px solid #fecaca;\n    border-radius: 10px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    color: #991b1b;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: #dc2626;\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    color: #991b1b;\n    font-size: 14px;\n    margin-bottom: 4px;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    line-height: 1.5;\n}"] });
+            i0.ɵɵconditional(!ctx.IsLoading && ctx.APIKey ? 12 : -1);
+        } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.TextBoxDirective, i3.TextAreaDirective, i3.CheckBoxDirective, i4.DatePickerComponent, i5.ButtonComponent, i6.LoadingComponent], styles: ["\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 100;\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 520px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--card-background, #ffffff);\n    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n    flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #78350f;\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: #f59e0b;\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.key-status[_ngcontent-%COMP%] {\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.key-status.active[_ngcontent-%COMP%] {\n    background: rgba(16, 185, 129, 0.2);\n    color: #059669;\n}\n\n.key-status.revoked[_ngcontent-%COMP%] {\n    background: rgba(220, 38, 38, 0.2);\n    color: #dc2626;\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(255, 255, 255, 0.5);\n    border: none;\n    border-radius: 8px;\n    color: #92400e;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n    background: rgba(255, 255, 255, 0.8);\n    color: #78350f;\n}\n\n\n\n.slideout-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    padding: 12px 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-tab[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    position: relative;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:hover {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n.slideout-tab.active[_ngcontent-%COMP%] {\n    background: #f59e0b;\n    color: white;\n}\n\n.slideout-tab[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.tab-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: rgba(255, 255, 255, 0.2);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.tab-badge.unsaved[_ngcontent-%COMP%] {\n    background: #ef4444;\n    color: white;\n}\n\n.slideout-tab[_ngcontent-%COMP%]:not(.active)   .tab-badge[_ngcontent-%COMP%] {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0;\n}\n\n.tab-panel[_ngcontent-%COMP%] {\n    padding: 20px 24px;\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button {\n    min-width: 80px;\n    padding: 8px 16px;\n    font-weight: 500;\n    border-radius: 6px;\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    margin: 12px 16px;\n    border-radius: 8px;\n    font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.message.error[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n\n\n\n\n\n.key-info-card[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-radius: 10px;\n    padding: 14px 16px;\n    margin-bottom: 16px;\n}\n\n.info-header[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n    padding-bottom: 12px;\n    border-bottom: 1px solid rgba(245, 158, 11, 0.3);\n}\n\n.info-row[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.info-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: #92400e;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.hash-value[_ngcontent-%COMP%] {\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 13px;\n    color: #78350f;\n    word-break: break-all;\n    background: rgba(255, 255, 255, 0.5);\n    padding: 8px 12px;\n    border-radius: 6px;\n}\n\n.info-grid[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 10px 16px;\n}\n\n.info-item[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.info-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: #78350f;\n}\n\n.info-value.never-used[_ngcontent-%COMP%] {\n    color: #6b7280;\n    font-style: italic;\n}\n\n\n\n.edit-section[_ngcontent-%COMP%] {\n    background: #f9fafb;\n    border-radius: 10px;\n    padding: 16px;\n    margin-bottom: 16px;\n}\n\n.section-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 14px;\n}\n\n.section-header[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.edit-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.edit-toggle[_ngcontent-%COMP%]:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.form-field[_ngcontent-%COMP%] {\n    margin-bottom: 12px;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    font-weight: 500;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.form-input[_ngcontent-%COMP%], \n.form-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.expiration-field[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.clear-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: 1px dashed #d1d5db;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.clear-btn[_ngcontent-%COMP%]:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.edit-actions[_ngcontent-%COMP%] {\n    margin-top: 14px;\n    padding-top: 14px;\n    border-top: 1px solid #e5e7eb;\n}\n\n\n\n.danger-zone[_ngcontent-%COMP%] {\n    background: #fef2f2;\n    border: 1px solid #fecaca;\n    border-radius: 10px;\n    padding: 14px 16px;\n}\n\n.danger-zone[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 12px 0;\n    font-size: 12px;\n    font-weight: 600;\n    color: #dc2626;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.revoke-section[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n}\n\n.revoke-info[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    flex: 1;\n}\n\n.revoke-info[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: #dc2626;\n    margin-top: 2px;\n}\n\n.revoke-info[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    color: #991b1b;\n    margin-bottom: 4px;\n}\n\n.revoke-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: #7f1d1d;\n}\n\n.revoke-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: white;\n    border: 1px solid #dc2626;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #dc2626;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.revoke-btn[_ngcontent-%COMP%]:hover {\n    background: #dc2626;\n    color: white;\n}\n\n\n\n.revoke-confirm[_ngcontent-%COMP%] {\n    background: #fef2f2;\n    border-radius: 8px;\n}\n\n.confirm-warning[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.confirm-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: #dc2626;\n}\n\n.confirm-warning[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    color: #991b1b;\n    font-size: 16px;\n    margin-bottom: 4px;\n}\n\n.confirm-warning[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: #7f1d1d;\n}\n\n.confirm-input[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.confirm-input[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #7f1d1d;\n    margin-bottom: 8px;\n}\n\n.confirm-input[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-weight: 600;\n}\n\n.confirm-input[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.confirm-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: #dc2626;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: white;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    background: #b91c1c;\n}\n\n.confirm-revoke-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n\n\n.revoked-notice[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 20px;\n    background: #f3f4f6;\n    border-radius: 12px;\n}\n\n.revoked-notice[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: #6b7280;\n}\n\n.revoked-notice[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.revoked-notice[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: #6b7280;\n}\n\n\n\n.scopes-tab[_ngcontent-%COMP%] {\n    padding: 16px;\n}\n\n.scopes-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    padding-bottom: 16px;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.scope-count[_ngcontent-%COMP%] {\n    font-size: 14px;\n    font-weight: 500;\n    color: #374151;\n}\n\n\n\n.scope-categories[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category[_ngcontent-%COMP%] {\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n    background: #f3f4f6;\n}\n\n.category-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n}\n\n.category-count[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.category-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.category-all-toggle[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.category-all-toggle[_ngcontent-%COMP%]:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.category-all-toggle[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin: 0;\n}\n\n.expand-icon[_ngcontent-%COMP%] {\n    color: #9ca3af;\n    font-size: 12px;\n    transition: transform 0.2s ease;\n}\n\n.category-scopes[_ngcontent-%COMP%] {\n    padding: 8px 16px 16px;\n    border-top: 1px solid #e5e7eb;\n    background: white;\n}\n\n.scope-item[_ngcontent-%COMP%] {\n    padding: 10px 0;\n    border-bottom: 1px solid #f3f4f6;\n}\n\n.scope-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: #374151;\n    font-family: monospace;\n}\n\n.scope-desc[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 2px;\n}\n\n\n\n.usage-tab[_ngcontent-%COMP%] {\n    padding: 16px;\n}\n\n.usage-stats[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.stat-card[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 20px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-radius: 12px;\n    text-align: center;\n}\n\n.stat-card[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 24px;\n    color: #f59e0b;\n    margin-bottom: 12px;\n}\n\n.stat-value[_ngcontent-%COMP%] {\n    font-size: 24px;\n    font-weight: 700;\n    color: #78350f;\n}\n\n.stat-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: #92400e;\n    margin-top: 4px;\n}\n\n\n\n.usage-logs[_ngcontent-%COMP%] {\n    background: #f9fafb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.log-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 100px 1fr 80px 80px;\n    gap: 12px;\n    padding: 12px 16px;\n    background: #e5e7eb;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.log-item[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 100px 1fr 80px 80px;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid #e5e7eb;\n    font-size: 13px;\n    align-items: center;\n}\n\n.log-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.col-time[_ngcontent-%COMP%] {\n    color: #6b7280;\n}\n\n.col-endpoint[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-family: monospace;\n    color: #374151;\n}\n\n.method-badge[_ngcontent-%COMP%] {\n    padding: 2px 6px;\n    background: #dbeafe;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    color: #1d4ed8;\n}\n\n.col-status[_ngcontent-%COMP%] {\n    font-weight: 600;\n}\n\n.col-status.status-success[_ngcontent-%COMP%] {\n    color: #10b981;\n}\n\n.col-status.status-warning[_ngcontent-%COMP%] {\n    color: #f59e0b;\n}\n\n.col-status.status-error[_ngcontent-%COMP%] {\n    color: #ef4444;\n}\n\n.col-duration[_ngcontent-%COMP%] {\n    color: #6b7280;\n    text-align: right;\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: 48px 24px;\n    color: #6b7280;\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 500;\n    color: #374151;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 8px 0 0 0;\n    font-size: 13px;\n}\n\n\n\n\n\n\n[_nghost-%COMP%]     .form-input .k-input, \n[_nghost-%COMP%]     .form-textarea .k-input-inner, \n[_nghost-%COMP%]     .k-datepicker .k-input {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .form-input:focus-within, \n[_nghost-%COMP%]     .form-textarea:focus-within, \n[_nghost-%COMP%]     .k-datepicker:focus-within {\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n\n\n[_nghost-%COMP%]     .edit-actions .k-button {\n    min-width: 120px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .edit-actions .k-button-solid-primary {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);\n}\n\n[_nghost-%COMP%]     .edit-actions .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n\n\n[_nghost-%COMP%]     .scopes-header .k-button {\n    min-width: 120px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .scopes-header .k-button-solid-primary {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);\n}\n\n[_nghost-%COMP%]     .scopes-header .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n\n\n.no-scopes-warning[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 16px;\n    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n    border: 1px solid #fecaca;\n    border-radius: 10px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    color: #991b1b;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: #dc2626;\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    color: #991b1b;\n    font-size: 14px;\n    margin-bottom: 4px;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    line-height: 1.5;\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIKeyEditPanelComponent, [{
         type: Component,
-        args: [{ selector: 'mj-api-key-edit-panel', template: "<!-- Slide-out Backdrop -->\n<div class=\"slideout-backdrop\" *ngIf=\"Visible\" (click)=\"close()\"></div>\n\n<!-- Slide-out Panel -->\n<div class=\"slideout-panel\" [class.open]=\"Visible\">\n    <!-- Header -->\n    <div class=\"slideout-header\">\n        <div class=\"slideout-title\">\n            <i class=\"fa-solid fa-key\"></i>\n            <span>API Key Details</span>\n            <span class=\"key-status\" [class.active]=\"APIKey?.Status === 'Active'\"\n                  [class.revoked]=\"APIKey?.Status === 'Revoked'\">\n                {{APIKey?.Status}}\n            </span>\n        </div>\n        <button class=\"slideout-close\" (click)=\"close()\" title=\"Close (Esc)\">\n            <i class=\"fa-solid fa-times\"></i>\n        </button>\n    </div>\n\n    <mj-loading *ngIf=\"IsLoading\" text=\"Loading key details...\"></mj-loading>\n\n    <ng-container *ngIf=\"!IsLoading && APIKey\">\n        <!-- Success/Error Messages -->\n        <div class=\"message success\" *ngIf=\"SuccessMessage\">\n            <i class=\"fa-solid fa-check-circle\"></i>\n            {{SuccessMessage}}\n        </div>\n        <div class=\"message error\" *ngIf=\"ErrorMessage\">\n            <i class=\"fa-solid fa-circle-exclamation\"></i>\n            {{ErrorMessage}}\n        </div>\n\n        <!-- Tabs -->\n        <div class=\"slideout-tabs\">\n            <button class=\"slideout-tab\" [class.active]=\"ActiveTab === 'details'\"\n                    (click)=\"ActiveTab = 'details'\">\n                <i class=\"fa-solid fa-info-circle\"></i>\n                Details\n            </button>\n            <button class=\"slideout-tab\" [class.active]=\"ActiveTab === 'scopes'\"\n                    (click)=\"ActiveTab = 'scopes'\">\n                <i class=\"fa-solid fa-shield-halved\"></i>\n                Permissions\n                <span class=\"tab-badge unsaved\" *ngIf=\"HasScopeChanges\">!</span>\n            </button>\n            <button class=\"slideout-tab\" [class.active]=\"ActiveTab === 'usage'\"\n                    (click)=\"ActiveTab = 'usage'\">\n                <i class=\"fa-solid fa-chart-line\"></i>\n                Usage\n            </button>\n        </div>\n\n        <div class=\"slideout-content\">\n            <!-- Details Tab -->\n            <div class=\"tab-panel\" *ngIf=\"ActiveTab === 'details'\">\n                <div class=\"key-info-card\">\n                    <div class=\"info-header\">\n                        <div class=\"info-row\">\n                            <span class=\"info-label\">Key Hash</span>\n                            <code class=\"hash-value\">{{APIKey.Hash}}</code>\n                        </div>\n                    </div>\n\n                    <div class=\"info-grid\">\n                        <div class=\"info-item\">\n                            <span class=\"info-label\">Created</span>\n                            <span class=\"info-value\">{{formatDate(APIKey.__mj_CreatedAt)}}</span>\n                        </div>\n                        <div class=\"info-item\">\n                            <span class=\"info-label\">Created By</span>\n                            <span class=\"info-value\">{{APIKey.CreatedByUser}}</span>\n                        </div>\n                        <div class=\"info-item\">\n                            <span class=\"info-label\">Owner</span>\n                            <span class=\"info-value\">{{APIKey.User}}</span>\n                        </div>\n                        <div class=\"info-item\">\n                            <span class=\"info-label\">Last Used</span>\n                            <span class=\"info-value\" [class.never-used]=\"!APIKey.LastUsedAt\">\n                                {{APIKey.LastUsedAt ? formatDate(APIKey.LastUsedAt) : 'Never'}}\n                            </span>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Editable Fields -->\n                <div class=\"edit-section\">\n                    <div class=\"section-header\">\n                        <h4>Key Configuration</h4>\n                        <button class=\"edit-toggle\" *ngIf=\"APIKey.Status === 'Active'\"\n                                (click)=\"toggleEdit()\">\n                            <i class=\"fa-solid\" [class.fa-pencil]=\"!IsEditing\" [class.fa-times]=\"IsEditing\"></i>\n                            {{IsEditing ? 'Cancel' : 'Edit'}}\n                        </button>\n                    </div>\n\n                    <div class=\"form-field\">\n                        <label>Label</label>\n                        <input kendoTextBox [(ngModel)]=\"EditLabel\"\n                               [disabled]=\"!IsEditing\"\n                               class=\"form-input\" />\n                    </div>\n\n                    <div class=\"form-field\">\n                        <label>Description</label>\n                        <textarea kendoTextArea [(ngModel)]=\"EditDescription\"\n                                  [disabled]=\"!IsEditing\"\n                                  [rows]=\"3\"\n                                  class=\"form-textarea\"></textarea>\n                    </div>\n\n                    <div class=\"form-field\">\n                        <label>Expiration</label>\n                        <div class=\"expiration-field\">\n                            <kendo-datepicker [(ngModel)]=\"EditExpiresAt\"\n                                              [disabled]=\"!IsEditing\"\n                                              [min]=\"getMinDate()\"\n                                              format=\"MMM d, yyyy\"\n                                              placeholder=\"Never expires\">\n                            </kendo-datepicker>\n                            <button class=\"clear-btn\" *ngIf=\"IsEditing && EditExpiresAt\"\n                                    (click)=\"EditExpiresAt = null\">\n                                <i class=\"fa-solid fa-times\"></i>\n                                Never expires\n                            </button>\n                        </div>\n                    </div>\n\n                    <div class=\"edit-actions\" *ngIf=\"IsEditing\">\n                        <button kendoButton [themeColor]=\"'primary'\"\n                                [disabled]=\"IsSaving\"\n                                (click)=\"saveChanges()\">\n                            <mj-loading *ngIf=\"IsSaving\" [showText]=\"false\" size=\"small\"></mj-loading>\n                            <span *ngIf=\"!IsSaving\">\n                                <i class=\"fa-solid fa-save\"></i>\n                                Save Changes\n                            </span>\n                        </button>\n                    </div>\n                </div>\n\n                <!-- Revoke Section -->\n                <div class=\"danger-zone\" *ngIf=\"APIKey.Status === 'Active'\">\n                    <h4>Danger Zone</h4>\n                    <div class=\"revoke-section\" *ngIf=\"!ShowRevokeConfirm\">\n                        <div class=\"revoke-info\">\n                            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                            <div>\n                                <strong>Revoke this API key</strong>\n                                <p>Once revoked, this key will immediately stop working. This action cannot be undone.</p>\n                            </div>\n                        </div>\n                        <button class=\"revoke-btn\" (click)=\"startRevoke()\">\n                            <i class=\"fa-solid fa-ban\"></i>\n                            Revoke Key\n                        </button>\n                    </div>\n\n                    <div class=\"revoke-confirm\" *ngIf=\"ShowRevokeConfirm\">\n                        <div class=\"confirm-warning\">\n                            <i class=\"fa-solid fa-skull-crossbones\"></i>\n                            <div>\n                                <strong>Are you absolutely sure?</strong>\n                                <p>This will permanently revoke the API key. Any applications using this key will immediately lose access.</p>\n                            </div>\n                        </div>\n                        <div class=\"confirm-input\">\n                            <label>Type <code>REVOKE</code> to confirm:</label>\n                            <input kendoTextBox [(ngModel)]=\"RevokeConfirmText\"\n                                   placeholder=\"REVOKE\" />\n                        </div>\n                        <div class=\"confirm-actions\">\n                            <button kendoButton (click)=\"cancelRevoke()\">Cancel</button>\n                            <button class=\"confirm-revoke-btn\"\n                                    [disabled]=\"RevokeConfirmText !== 'REVOKE' || IsRevoking\"\n                                    (click)=\"confirmRevoke()\">\n                                <mj-loading *ngIf=\"IsRevoking\" [showText]=\"false\" size=\"small\"></mj-loading>\n                                <span *ngIf=\"!IsRevoking\">\n                                    <i class=\"fa-solid fa-ban\"></i>\n                                    Revoke Key\n                                </span>\n                            </button>\n                        </div>\n                    </div>\n                </div>\n\n                <!-- Revoked Notice -->\n                <div class=\"revoked-notice\" *ngIf=\"APIKey.Status === 'Revoked'\">\n                    <i class=\"fa-solid fa-ban\"></i>\n                    <div>\n                        <strong>This API key has been revoked</strong>\n                        <p>It can no longer be used for authentication. Consider deleting this record if no longer needed.</p>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Scopes Tab -->\n            <div class=\"tab-panel scopes-panel\" *ngIf=\"ActiveTab === 'scopes'\">\n                <div class=\"scopes-header\">\n                    <div class=\"scopes-info\">\n                        <span class=\"scope-count\">{{getAssignedScopeCount()}} permissions assigned</span>\n                    </div>\n                    <button kendoButton [themeColor]=\"'primary'\"\n                            *ngIf=\"HasScopeChanges && APIKey.Status === 'Active'\"\n                            [disabled]=\"IsSaving\"\n                            (click)=\"saveScopeChanges()\">\n                        <mj-loading *ngIf=\"IsSaving\" [showText]=\"false\" size=\"small\"></mj-loading>\n                        <span *ngIf=\"!IsSaving\">\n                            <i class=\"fa-solid fa-save\"></i>\n                            Save Changes\n                        </span>\n                    </button>\n                </div>\n\n                <!-- No Scopes Warning -->\n                <div class=\"no-scopes-warning\" *ngIf=\"!IsLoadingScopes && getAssignedScopeCount() === 0 && APIKey.Status === 'Active'\">\n                    <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                    <div>\n                        <strong>Warning: No permissions assigned</strong>\n                        <p>This API key has no assigned scopes and cannot perform any operations. All API requests using this key will be rejected until scopes are assigned.</p>\n                    </div>\n                </div>\n\n                <mj-loading *ngIf=\"IsLoadingScopes\" text=\"Loading permissions...\"></mj-loading>\n\n                <div class=\"scope-categories\" *ngIf=\"!IsLoadingScopes\">\n                    <div class=\"scope-category\" *ngFor=\"let category of ScopeCategories\">\n                        <div class=\"category-header\" (click)=\"toggleCategory(category)\">\n                            <div class=\"category-left\">\n                                <i [class]=\"category.icon\" [style.color]=\"category.color\"></i>\n                                <span class=\"category-name\">{{category.name}}</span>\n                                <span class=\"category-count\">\n                                    {{getSelectedCount(category)}}/{{category.scopes.length}}\n                                </span>\n                            </div>\n                            <div class=\"category-right\">\n                                <label class=\"category-all-toggle\"\n                                       (click)=\"$event.stopPropagation()\"\n                                       *ngIf=\"APIKey.Status === 'Active'\">\n                                    <input type=\"checkbox\" kendoCheckBox\n                                           [checked]=\"category.allSelected\"\n                                           (change)=\"toggleCategoryAll(category)\" />\n                                    <span>All</span>\n                                </label>\n                                <i class=\"fa-solid expand-icon\" [class.fa-chevron-down]=\"!category.expanded\"\n                                   [class.fa-chevron-up]=\"category.expanded\"></i>\n                            </div>\n                        </div>\n\n                        <div class=\"category-scopes\" *ngIf=\"category.expanded\">\n                            <div class=\"scope-item\" *ngFor=\"let item of category.scopes\">\n                                <label class=\"scope-label\">\n                                    <input type=\"checkbox\" kendoCheckBox\n                                           [(ngModel)]=\"item.selected\"\n                                           [disabled]=\"APIKey.Status === 'Revoked'\"\n                                           (change)=\"onScopeChange()\" />\n                                    <div class=\"scope-info\">\n                                        <span class=\"scope-name\">{{item.scope.Name}}</span>\n                                        <span class=\"scope-desc\" *ngIf=\"item.scope.Description\">\n                                            {{item.scope.Description}}\n                                        </span>\n                                    </div>\n                                </label>\n                            </div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n\n            <!-- Usage Tab -->\n            <div class=\"tab-panel usage-panel\" *ngIf=\"ActiveTab === 'usage'\">\n                <mj-loading *ngIf=\"IsLoadingLogs\" text=\"Loading usage logs...\"></mj-loading>\n\n                <div class=\"usage-content\" *ngIf=\"!IsLoadingLogs\">\n                    <div class=\"usage-stats\">\n                        <div class=\"stat-card\">\n                            <i class=\"fa-solid fa-chart-line\"></i>\n                            <div class=\"stat-value\">{{UsageLogs.length}}</div>\n                            <div class=\"stat-label\">Total Requests</div>\n                        </div>\n                        <div class=\"stat-card\">\n                            <i class=\"fa-solid fa-clock\"></i>\n                            <div class=\"stat-value\">\n                                {{UsageLogs.length > 0 ? formatRelativeTime(UsageLogs[0].timestamp) : 'Never'}}\n                            </div>\n                            <div class=\"stat-label\">Last Used</div>\n                        </div>\n                    </div>\n\n                    <div class=\"usage-logs\" *ngIf=\"UsageLogs.length > 0\">\n                        <div class=\"log-header\">\n                            <span class=\"col-time\">Time</span>\n                            <span class=\"col-endpoint\">Endpoint</span>\n                            <span class=\"col-status\">Status</span>\n                            <span class=\"col-duration\">Duration</span>\n                        </div>\n                        <div class=\"log-item\" *ngFor=\"let log of UsageLogs\">\n                            <span class=\"col-time\">{{formatRelativeTime(log.timestamp)}}</span>\n                            <span class=\"col-endpoint\">\n                                <span class=\"method-badge\">{{log.method}}</span>\n                                {{log.endpoint}}\n                            </span>\n                            <span class=\"col-status\" [ngClass]=\"getStatusClass(log.statusCode)\">\n                                {{log.statusCode}}\n                            </span>\n                            <span class=\"col-duration\">{{log.responseTime}}ms</span>\n                        </div>\n                    </div>\n\n                    <div class=\"empty-state\" *ngIf=\"UsageLogs.length === 0\">\n                        <i class=\"fa-solid fa-chart-area\"></i>\n                        <span>No usage logs yet</span>\n                        <p>Usage will be recorded when this API key is used for authentication</p>\n                    </div>\n                </div>\n            </div>\n        </div>\n\n        <!-- Footer -->\n        <div class=\"slideout-footer\">\n            <button kendoButton (click)=\"close()\">Close</button>\n        </div>\n    </ng-container>\n</div>\n", styles: ["/* ========================================\n   Slide-out Panel Styles\n   ======================================== */\n\n/* Backdrop */\n.slideout-backdrop {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 100;\n    animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n/* Slide-out Panel */\n.slideout-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 520px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--card-background, #ffffff);\n    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open {\n    transform: translateX(0);\n}\n\n/* Panel Header */\n.slideout-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n    flex-shrink: 0;\n}\n\n.slideout-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #78350f;\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title i {\n    color: #f59e0b;\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.key-status {\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.key-status.active {\n    background: rgba(16, 185, 129, 0.2);\n    color: #059669;\n}\n\n.key-status.revoked {\n    background: rgba(220, 38, 38, 0.2);\n    color: #dc2626;\n}\n\n.slideout-close {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(255, 255, 255, 0.5);\n    border: none;\n    border-radius: 8px;\n    color: #92400e;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close:hover {\n    background: rgba(255, 255, 255, 0.8);\n    color: #78350f;\n}\n\n/* Panel Tabs */\n.slideout-tabs {\n    display: flex;\n    gap: 4px;\n    padding: 12px 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-tab {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    position: relative;\n}\n\n.slideout-tab:hover {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n.slideout-tab.active {\n    background: #f59e0b;\n    color: white;\n}\n\n.slideout-tab i {\n    font-size: 14px;\n}\n\n.tab-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: rgba(255, 255, 255, 0.2);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.tab-badge.unsaved {\n    background: #ef4444;\n    color: white;\n}\n\n.slideout-tab:not(.active) .tab-badge {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n/* Panel Content */\n.slideout-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0;\n}\n\n.tab-panel {\n    padding: 20px 24px;\n}\n\n/* Panel Footer */\n.slideout-footer {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n:host ::ng-deep .slideout-footer .k-button {\n    min-width: 80px;\n    padding: 8px 16px;\n    font-weight: 500;\n    border-radius: 6px;\n}\n\n/* Messages */\n.message {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    margin: 12px 16px;\n    border-radius: 8px;\n    font-size: 14px;\n}\n\n.message.success {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.message.error {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n/* Legacy tab styles removed - now using slideout-tabs */\n\n/* Key Info Card */\n.key-info-card {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-radius: 10px;\n    padding: 14px 16px;\n    margin-bottom: 16px;\n}\n\n.info-header {\n    margin-bottom: 12px;\n    padding-bottom: 12px;\n    border-bottom: 1px solid rgba(245, 158, 11, 0.3);\n}\n\n.info-row {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.info-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: #92400e;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.hash-value {\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 13px;\n    color: #78350f;\n    word-break: break-all;\n    background: rgba(255, 255, 255, 0.5);\n    padding: 8px 12px;\n    border-radius: 6px;\n}\n\n.info-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 10px 16px;\n}\n\n.info-item {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.info-value {\n    font-size: 13px;\n    font-weight: 500;\n    color: #78350f;\n}\n\n.info-value.never-used {\n    color: #6b7280;\n    font-style: italic;\n}\n\n/* Edit Section */\n.edit-section {\n    background: #f9fafb;\n    border-radius: 10px;\n    padding: 16px;\n    margin-bottom: 16px;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 14px;\n}\n\n.section-header h4 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.edit-toggle {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.edit-toggle:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.form-field {\n    margin-bottom: 12px;\n}\n\n.form-field label {\n    display: block;\n    font-size: 12px;\n    font-weight: 500;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.form-input,\n.form-textarea {\n    width: 100%;\n}\n\n.expiration-field {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.clear-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: 1px dashed #d1d5db;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.clear-btn:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.edit-actions {\n    margin-top: 14px;\n    padding-top: 14px;\n    border-top: 1px solid #e5e7eb;\n}\n\n/* Danger Zone */\n.danger-zone {\n    background: #fef2f2;\n    border: 1px solid #fecaca;\n    border-radius: 10px;\n    padding: 14px 16px;\n}\n\n.danger-zone h4 {\n    margin: 0 0 12px 0;\n    font-size: 12px;\n    font-weight: 600;\n    color: #dc2626;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.revoke-section {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n}\n\n.revoke-info {\n    display: flex;\n    gap: 12px;\n    flex: 1;\n}\n\n.revoke-info i {\n    font-size: 20px;\n    color: #dc2626;\n    margin-top: 2px;\n}\n\n.revoke-info strong {\n    display: block;\n    color: #991b1b;\n    margin-bottom: 4px;\n}\n\n.revoke-info p {\n    margin: 0;\n    font-size: 13px;\n    color: #7f1d1d;\n}\n\n.revoke-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: white;\n    border: 1px solid #dc2626;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #dc2626;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.revoke-btn:hover {\n    background: #dc2626;\n    color: white;\n}\n\n/* Revoke Confirm */\n.revoke-confirm {\n    background: #fef2f2;\n    border-radius: 8px;\n}\n\n.confirm-warning {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.confirm-warning i {\n    font-size: 24px;\n    color: #dc2626;\n}\n\n.confirm-warning strong {\n    display: block;\n    color: #991b1b;\n    font-size: 16px;\n    margin-bottom: 4px;\n}\n\n.confirm-warning p {\n    margin: 0;\n    font-size: 13px;\n    color: #7f1d1d;\n}\n\n.confirm-input {\n    margin-bottom: 16px;\n}\n\n.confirm-input label {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #7f1d1d;\n    margin-bottom: 8px;\n}\n\n.confirm-input code {\n    background: #fee2e2;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-weight: 600;\n}\n\n.confirm-input input {\n    width: 100%;\n}\n\n.confirm-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.confirm-revoke-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: #dc2626;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: white;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.confirm-revoke-btn:hover:not(:disabled) {\n    background: #b91c1c;\n}\n\n.confirm-revoke-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* Revoked Notice */\n.revoked-notice {\n    display: flex;\n    gap: 12px;\n    padding: 20px;\n    background: #f3f4f6;\n    border-radius: 12px;\n}\n\n.revoked-notice i {\n    font-size: 24px;\n    color: #6b7280;\n}\n\n.revoked-notice strong {\n    display: block;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.revoked-notice p {\n    margin: 0;\n    font-size: 13px;\n    color: #6b7280;\n}\n\n/* Scopes Tab */\n.scopes-tab {\n    padding: 16px;\n}\n\n.scopes-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    padding-bottom: 16px;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.scope-count {\n    font-size: 14px;\n    font-weight: 500;\n    color: #374151;\n}\n\n/* Scope Categories */\n.scope-categories {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category {\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header:hover {\n    background: #f3f4f6;\n}\n\n.category-left {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left i {\n    font-size: 16px;\n}\n\n.category-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n}\n\n.category-count {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.category-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.category-all-toggle {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.category-all-toggle:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.category-all-toggle input {\n    margin: 0;\n}\n\n.expand-icon {\n    color: #9ca3af;\n    font-size: 12px;\n    transition: transform 0.2s ease;\n}\n\n.category-scopes {\n    padding: 8px 16px 16px;\n    border-top: 1px solid #e5e7eb;\n    background: white;\n}\n\n.scope-item {\n    padding: 10px 0;\n    border-bottom: 1px solid #f3f4f6;\n}\n\n.scope-item:last-child {\n    border-bottom: none;\n}\n\n.scope-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info {\n    flex: 1;\n}\n\n.scope-name {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: #374151;\n    font-family: monospace;\n}\n\n.scope-desc {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 2px;\n}\n\n/* Usage Tab */\n.usage-tab {\n    padding: 16px;\n}\n\n.usage-stats {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.stat-card {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 20px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-radius: 12px;\n    text-align: center;\n}\n\n.stat-card i {\n    font-size: 24px;\n    color: #f59e0b;\n    margin-bottom: 12px;\n}\n\n.stat-value {\n    font-size: 24px;\n    font-weight: 700;\n    color: #78350f;\n}\n\n.stat-label {\n    font-size: 12px;\n    color: #92400e;\n    margin-top: 4px;\n}\n\n/* Usage Logs */\n.usage-logs {\n    background: #f9fafb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.log-header {\n    display: grid;\n    grid-template-columns: 100px 1fr 80px 80px;\n    gap: 12px;\n    padding: 12px 16px;\n    background: #e5e7eb;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.log-item {\n    display: grid;\n    grid-template-columns: 100px 1fr 80px 80px;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid #e5e7eb;\n    font-size: 13px;\n    align-items: center;\n}\n\n.log-item:last-child {\n    border-bottom: none;\n}\n\n.col-time {\n    color: #6b7280;\n}\n\n.col-endpoint {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-family: monospace;\n    color: #374151;\n}\n\n.method-badge {\n    padding: 2px 6px;\n    background: #dbeafe;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    color: #1d4ed8;\n}\n\n.col-status {\n    font-weight: 600;\n}\n\n.col-status.status-success {\n    color: #10b981;\n}\n\n.col-status.status-warning {\n    color: #f59e0b;\n}\n\n.col-status.status-error {\n    color: #ef4444;\n}\n\n.col-duration {\n    color: #6b7280;\n    text-align: right;\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: 48px 24px;\n    color: #6b7280;\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state span {\n    font-size: 16px;\n    font-weight: 500;\n    color: #374151;\n}\n\n.empty-state p {\n    margin: 8px 0 0 0;\n    font-size: 13px;\n}\n\n/* Legacy kendo-window styles removed - now using slideout-panel */\n\n/* Input and form field styling */\n:host ::ng-deep .form-input .k-input,\n:host ::ng-deep .form-textarea .k-input-inner,\n:host ::ng-deep .k-datepicker .k-input {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .form-input:focus-within,\n:host ::ng-deep .form-textarea:focus-within,\n:host ::ng-deep .k-datepicker:focus-within {\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Button styling in edit actions */\n:host ::ng-deep .edit-actions .k-button {\n    min-width: 120px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .edit-actions .k-button-solid-primary {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);\n}\n\n:host ::ng-deep .edit-actions .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n/* Scopes header button styling */\n:host ::ng-deep .scopes-header .k-button {\n    min-width: 120px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .scopes-header .k-button-solid-primary {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);\n}\n\n:host ::ng-deep .scopes-header .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n/* No Scopes Warning */\n.no-scopes-warning {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 16px;\n    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n    border: 1px solid #fecaca;\n    border-radius: 10px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    color: #991b1b;\n}\n\n.no-scopes-warning i {\n    font-size: 20px;\n    color: #dc2626;\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.no-scopes-warning strong {\n    display: block;\n    color: #991b1b;\n    font-size: 14px;\n    margin-bottom: 4px;\n}\n\n.no-scopes-warning p {\n    margin: 0;\n    line-height: 1.5;\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-api-key-edit-panel', template: "<!-- Slide-out Backdrop -->\n@if (Visible) {\n  <div class=\"slideout-backdrop\" (click)=\"close()\"></div>\n}\n\n<!-- Slide-out Panel -->\n<div class=\"slideout-panel\" [class.open]=\"Visible\">\n  <!-- Header -->\n  <div class=\"slideout-header\">\n    <div class=\"slideout-title\">\n      <i class=\"fa-solid fa-key\"></i>\n      <span>API Key Details</span>\n      <span class=\"key-status\" [class.active]=\"APIKey?.Status === 'Active'\"\n        [class.revoked]=\"APIKey?.Status === 'Revoked'\">\n        {{APIKey?.Status}}\n      </span>\n    </div>\n    <button class=\"slideout-close\" (click)=\"close()\" title=\"Close (Esc)\">\n      <i class=\"fa-solid fa-times\"></i>\n    </button>\n  </div>\n\n  @if (IsLoading) {\n    <mj-loading text=\"Loading key details...\"></mj-loading>\n  }\n\n  @if (!IsLoading && APIKey) {\n    <!-- Success/Error Messages -->\n    @if (SuccessMessage) {\n      <div class=\"message success\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n        {{SuccessMessage}}\n      </div>\n    }\n    @if (ErrorMessage) {\n      <div class=\"message error\">\n        <i class=\"fa-solid fa-circle-exclamation\"></i>\n        {{ErrorMessage}}\n      </div>\n    }\n    <!-- Tabs -->\n    <div class=\"slideout-tabs\">\n      <button class=\"slideout-tab\" [class.active]=\"ActiveTab === 'details'\"\n        (click)=\"ActiveTab = 'details'\">\n        <i class=\"fa-solid fa-info-circle\"></i>\n        Details\n      </button>\n      <button class=\"slideout-tab\" [class.active]=\"ActiveTab === 'scopes'\"\n        (click)=\"ActiveTab = 'scopes'\">\n        <i class=\"fa-solid fa-shield-halved\"></i>\n        Permissions\n        @if (HasScopeChanges) {\n          <span class=\"tab-badge unsaved\">!</span>\n        }\n      </button>\n      <button class=\"slideout-tab\" [class.active]=\"ActiveTab === 'usage'\"\n        (click)=\"ActiveTab = 'usage'\">\n        <i class=\"fa-solid fa-chart-line\"></i>\n        Usage\n      </button>\n    </div>\n    <div class=\"slideout-content\">\n      <!-- Details Tab -->\n      @if (ActiveTab === 'details') {\n        <div class=\"tab-panel\">\n          <div class=\"key-info-card\">\n            <div class=\"info-header\">\n              <div class=\"info-row\">\n                <span class=\"info-label\">Key Hash</span>\n                <code class=\"hash-value\">{{APIKey.Hash}}</code>\n              </div>\n            </div>\n            <div class=\"info-grid\">\n              <div class=\"info-item\">\n                <span class=\"info-label\">Created</span>\n                <span class=\"info-value\">{{formatDate(APIKey.__mj_CreatedAt)}}</span>\n              </div>\n              <div class=\"info-item\">\n                <span class=\"info-label\">Created By</span>\n                <span class=\"info-value\">{{APIKey.CreatedByUser}}</span>\n              </div>\n              <div class=\"info-item\">\n                <span class=\"info-label\">Owner</span>\n                <span class=\"info-value\">{{APIKey.User}}</span>\n              </div>\n              <div class=\"info-item\">\n                <span class=\"info-label\">Last Used</span>\n                <span class=\"info-value\" [class.never-used]=\"!APIKey.LastUsedAt\">\n                  {{APIKey.LastUsedAt ? formatDate(APIKey.LastUsedAt) : 'Never'}}\n                </span>\n              </div>\n            </div>\n          </div>\n          <!-- Editable Fields -->\n          <div class=\"edit-section\">\n            <div class=\"section-header\">\n              <h4>Key Configuration</h4>\n              @if (APIKey.Status === 'Active') {\n                <button class=\"edit-toggle\"\n                  (click)=\"toggleEdit()\">\n                  <i class=\"fa-solid\" [class.fa-pencil]=\"!IsEditing\" [class.fa-times]=\"IsEditing\"></i>\n                  {{IsEditing ? 'Cancel' : 'Edit'}}\n                </button>\n              }\n            </div>\n            <div class=\"form-field\">\n              <label>Label</label>\n              <input kendoTextBox [(ngModel)]=\"EditLabel\"\n                [disabled]=\"!IsEditing\"\n                class=\"form-input\" />\n            </div>\n            <div class=\"form-field\">\n              <label>Description</label>\n              <textarea kendoTextArea [(ngModel)]=\"EditDescription\"\n                [disabled]=\"!IsEditing\"\n                [rows]=\"3\"\n              class=\"form-textarea\"></textarea>\n            </div>\n            <div class=\"form-field\">\n              <label>Expiration</label>\n              <div class=\"expiration-field\">\n                <kendo-datepicker [(ngModel)]=\"EditExpiresAt\"\n                  [disabled]=\"!IsEditing\"\n                  [min]=\"getMinDate()\"\n                  format=\"MMM d, yyyy\"\n                  placeholder=\"Never expires\">\n                </kendo-datepicker>\n                @if (IsEditing && EditExpiresAt) {\n                  <button class=\"clear-btn\"\n                    (click)=\"EditExpiresAt = null\">\n                    <i class=\"fa-solid fa-times\"></i>\n                    Never expires\n                  </button>\n                }\n              </div>\n            </div>\n            @if (IsEditing) {\n              <div class=\"edit-actions\">\n                <button kendoButton [themeColor]=\"'primary'\"\n                  [disabled]=\"IsSaving\"\n                  (click)=\"saveChanges()\">\n                  @if (IsSaving) {\n                    <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n                  }\n                  @if (!IsSaving) {\n                    <span>\n                      <i class=\"fa-solid fa-save\"></i>\n                      Save Changes\n                    </span>\n                  }\n                </button>\n              </div>\n            }\n          </div>\n          <!-- Revoke Section -->\n          @if (APIKey.Status === 'Active') {\n            <div class=\"danger-zone\">\n              <h4>Danger Zone</h4>\n              @if (!ShowRevokeConfirm) {\n                <div class=\"revoke-section\">\n                  <div class=\"revoke-info\">\n                    <i class=\"fa-solid fa-triangle-exclamation\"></i>\n                    <div>\n                      <strong>Revoke this API key</strong>\n                      <p>Once revoked, this key will immediately stop working. This action cannot be undone.</p>\n                    </div>\n                  </div>\n                  <button class=\"revoke-btn\" (click)=\"startRevoke()\">\n                    <i class=\"fa-solid fa-ban\"></i>\n                    Revoke Key\n                  </button>\n                </div>\n              }\n              @if (ShowRevokeConfirm) {\n                <div class=\"revoke-confirm\">\n                  <div class=\"confirm-warning\">\n                    <i class=\"fa-solid fa-skull-crossbones\"></i>\n                    <div>\n                      <strong>Are you absolutely sure?</strong>\n                      <p>This will permanently revoke the API key. Any applications using this key will immediately lose access.</p>\n                    </div>\n                  </div>\n                  <div class=\"confirm-input\">\n                    <label>Type <code>REVOKE</code> to confirm:</label>\n                    <input kendoTextBox [(ngModel)]=\"RevokeConfirmText\"\n                      placeholder=\"REVOKE\" />\n                  </div>\n                  <div class=\"confirm-actions\">\n                    <button kendoButton (click)=\"cancelRevoke()\">Cancel</button>\n                    <button class=\"confirm-revoke-btn\"\n                      [disabled]=\"RevokeConfirmText !== 'REVOKE' || IsRevoking\"\n                      (click)=\"confirmRevoke()\">\n                      @if (IsRevoking) {\n                        <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n                      }\n                      @if (!IsRevoking) {\n                        <span>\n                          <i class=\"fa-solid fa-ban\"></i>\n                          Revoke Key\n                        </span>\n                      }\n                    </button>\n                  </div>\n                </div>\n              }\n            </div>\n          }\n          <!-- Revoked Notice -->\n          @if (APIKey.Status === 'Revoked') {\n            <div class=\"revoked-notice\">\n              <i class=\"fa-solid fa-ban\"></i>\n              <div>\n                <strong>This API key has been revoked</strong>\n                <p>It can no longer be used for authentication. Consider deleting this record if no longer needed.</p>\n              </div>\n            </div>\n          }\n        </div>\n      }\n      <!-- Scopes Tab -->\n      @if (ActiveTab === 'scopes') {\n        <div class=\"tab-panel scopes-panel\">\n          <div class=\"scopes-header\">\n            <div class=\"scopes-info\">\n              <span class=\"scope-count\">{{getAssignedScopeCount()}} permissions assigned</span>\n            </div>\n            @if (HasScopeChanges && APIKey.Status === 'Active') {\n              <button kendoButton [themeColor]=\"'primary'\"\n                [disabled]=\"IsSaving\"\n                (click)=\"saveScopeChanges()\">\n                @if (IsSaving) {\n                  <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n                }\n                @if (!IsSaving) {\n                  <span>\n                    <i class=\"fa-solid fa-save\"></i>\n                    Save Changes\n                  </span>\n                }\n              </button>\n            }\n          </div>\n          <!-- No Scopes Warning -->\n          @if (!IsLoadingScopes && getAssignedScopeCount() === 0 && APIKey.Status === 'Active') {\n            <div class=\"no-scopes-warning\">\n              <i class=\"fa-solid fa-triangle-exclamation\"></i>\n              <div>\n                <strong>Warning: No permissions assigned</strong>\n                <p>This API key has no assigned scopes and cannot perform any operations. All API requests using this key will be rejected until scopes are assigned.</p>\n              </div>\n            </div>\n          }\n          @if (IsLoadingScopes) {\n            <mj-loading text=\"Loading permissions...\"></mj-loading>\n          }\n          @if (!IsLoadingScopes) {\n            <div class=\"scope-categories\">\n              @for (category of ScopeCategories; track category) {\n                <div class=\"scope-category\">\n                  <div class=\"category-header\" (click)=\"toggleCategory(category)\">\n                    <div class=\"category-left\">\n                      <i [class]=\"category.icon\" [style.color]=\"category.color\"></i>\n                      <span class=\"category-name\">{{category.name}}</span>\n                      <span class=\"category-count\">\n                        {{getSelectedCount(category)}}/{{category.scopes.length}}\n                      </span>\n                    </div>\n                    <div class=\"category-right\">\n                      @if (APIKey.Status === 'Active') {\n                        <label class=\"category-all-toggle\"\n                          (click)=\"$event.stopPropagation()\"\n                          >\n                          <input type=\"checkbox\" kendoCheckBox\n                            [checked]=\"category.allSelected\"\n                            (change)=\"toggleCategoryAll(category)\" />\n                          <span>All</span>\n                        </label>\n                      }\n                      <i class=\"fa-solid expand-icon\" [class.fa-chevron-down]=\"!category.expanded\"\n                      [class.fa-chevron-up]=\"category.expanded\"></i>\n                    </div>\n                  </div>\n                  @if (category.expanded) {\n                    <div class=\"category-scopes\">\n                      @for (item of category.scopes; track item) {\n                        <div class=\"scope-item\">\n                          <label class=\"scope-label\">\n                            <input type=\"checkbox\" kendoCheckBox\n                              [(ngModel)]=\"item.selected\"\n                              [disabled]=\"APIKey.Status === 'Revoked'\"\n                              (change)=\"onScopeChange()\" />\n                            <div class=\"scope-info\">\n                              <span class=\"scope-name\">{{item.scope.Name}}</span>\n                              @if (item.scope.Description) {\n                                <span class=\"scope-desc\">\n                                  {{item.scope.Description}}\n                                </span>\n                              }\n                            </div>\n                          </label>\n                        </div>\n                      }\n                    </div>\n                  }\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n      <!-- Usage Tab -->\n      @if (ActiveTab === 'usage') {\n        <div class=\"tab-panel usage-panel\">\n          @if (IsLoadingLogs) {\n            <mj-loading text=\"Loading usage logs...\"></mj-loading>\n          }\n          @if (!IsLoadingLogs) {\n            <div class=\"usage-content\">\n              <div class=\"usage-stats\">\n                <div class=\"stat-card\">\n                  <i class=\"fa-solid fa-chart-line\"></i>\n                  <div class=\"stat-value\">{{UsageLogs.length}}</div>\n                  <div class=\"stat-label\">Total Requests</div>\n                </div>\n                <div class=\"stat-card\">\n                  <i class=\"fa-solid fa-clock\"></i>\n                  <div class=\"stat-value\">\n                    {{UsageLogs.length > 0 ? formatRelativeTime(UsageLogs[0].timestamp) : 'Never'}}\n                  </div>\n                  <div class=\"stat-label\">Last Used</div>\n                </div>\n              </div>\n              @if (UsageLogs.length > 0) {\n                <div class=\"usage-logs\">\n                  <div class=\"log-header\">\n                    <span class=\"col-time\">Time</span>\n                    <span class=\"col-endpoint\">Endpoint</span>\n                    <span class=\"col-status\">Status</span>\n                    <span class=\"col-duration\">Duration</span>\n                  </div>\n                  @for (log of UsageLogs; track log) {\n                    <div class=\"log-item\">\n                      <span class=\"col-time\">{{formatRelativeTime(log.timestamp)}}</span>\n                      <span class=\"col-endpoint\">\n                        <span class=\"method-badge\">{{log.method}}</span>\n                        {{log.endpoint}}\n                      </span>\n                      <span class=\"col-status\" [ngClass]=\"getStatusClass(log.statusCode)\">\n                        {{log.statusCode}}\n                      </span>\n                      <span class=\"col-duration\">{{log.responseTime}}ms</span>\n                    </div>\n                  }\n                </div>\n              }\n              @if (UsageLogs.length === 0) {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-chart-area\"></i>\n                  <span>No usage logs yet</span>\n                  <p>Usage will be recorded when this API key is used for authentication</p>\n                </div>\n              }\n            </div>\n          }\n        </div>\n      }\n    </div>\n    <!-- Footer -->\n    <div class=\"slideout-footer\">\n      <button kendoButton (click)=\"close()\">Close</button>\n    </div>\n  }\n</div>\n", styles: ["/* ========================================\n   Slide-out Panel Styles\n   ======================================== */\n\n/* Backdrop */\n.slideout-backdrop {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(0, 0, 0, 0.3);\n    z-index: 100;\n    animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n/* Slide-out Panel */\n.slideout-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 520px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--card-background, #ffffff);\n    box-shadow: -8px 0 32px rgba(0, 0, 0, 0.15);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open {\n    transform: translateX(0);\n}\n\n/* Panel Header */\n.slideout-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n    flex-shrink: 0;\n}\n\n.slideout-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: #78350f;\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title i {\n    color: #f59e0b;\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.key-status {\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    text-transform: uppercase;\n    flex-shrink: 0;\n}\n\n.key-status.active {\n    background: rgba(16, 185, 129, 0.2);\n    color: #059669;\n}\n\n.key-status.revoked {\n    background: rgba(220, 38, 38, 0.2);\n    color: #dc2626;\n}\n\n.slideout-close {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: rgba(255, 255, 255, 0.5);\n    border: none;\n    border-radius: 8px;\n    color: #92400e;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close:hover {\n    background: rgba(255, 255, 255, 0.8);\n    color: #78350f;\n}\n\n/* Panel Tabs */\n.slideout-tabs {\n    display: flex;\n    gap: 4px;\n    padding: 12px 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n.slideout-tab {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 18px;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    position: relative;\n}\n\n.slideout-tab:hover {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n.slideout-tab.active {\n    background: #f59e0b;\n    color: white;\n}\n\n.slideout-tab i {\n    font-size: 14px;\n}\n\n.tab-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-width: 18px;\n    height: 18px;\n    padding: 0 5px;\n    background: rgba(255, 255, 255, 0.2);\n    border-radius: 9px;\n    font-size: 10px;\n    font-weight: 600;\n}\n\n.tab-badge.unsaved {\n    background: #ef4444;\n    color: white;\n}\n\n.slideout-tab:not(.active) .tab-badge {\n    background: #e5e7eb;\n    color: #374151;\n}\n\n/* Panel Content */\n.slideout-content {\n    flex: 1;\n    overflow-y: auto;\n    padding: 0;\n}\n\n.tab-panel {\n    padding: 20px 24px;\n}\n\n/* Panel Footer */\n.slideout-footer {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n    flex-shrink: 0;\n}\n\n:host ::ng-deep .slideout-footer .k-button {\n    min-width: 80px;\n    padding: 8px 16px;\n    font-weight: 500;\n    border-radius: 6px;\n}\n\n/* Messages */\n.message {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    margin: 12px 16px;\n    border-radius: 8px;\n    font-size: 14px;\n}\n\n.message.success {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.message.error {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n/* Legacy tab styles removed - now using slideout-tabs */\n\n/* Key Info Card */\n.key-info-card {\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-radius: 10px;\n    padding: 14px 16px;\n    margin-bottom: 16px;\n}\n\n.info-header {\n    margin-bottom: 12px;\n    padding-bottom: 12px;\n    border-bottom: 1px solid rgba(245, 158, 11, 0.3);\n}\n\n.info-row {\n    display: flex;\n    flex-direction: column;\n    gap: 6px;\n}\n\n.info-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: #92400e;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.hash-value {\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 13px;\n    color: #78350f;\n    word-break: break-all;\n    background: rgba(255, 255, 255, 0.5);\n    padding: 8px 12px;\n    border-radius: 6px;\n}\n\n.info-grid {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 10px 16px;\n}\n\n.info-item {\n    display: flex;\n    flex-direction: column;\n    gap: 2px;\n}\n\n.info-value {\n    font-size: 13px;\n    font-weight: 500;\n    color: #78350f;\n}\n\n.info-value.never-used {\n    color: #6b7280;\n    font-style: italic;\n}\n\n/* Edit Section */\n.edit-section {\n    background: #f9fafb;\n    border-radius: 10px;\n    padding: 16px;\n    margin-bottom: 16px;\n}\n\n.section-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 14px;\n}\n\n.section-header h4 {\n    margin: 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: #1f2937;\n}\n\n.edit-toggle {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.edit-toggle:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.form-field {\n    margin-bottom: 12px;\n}\n\n.form-field label {\n    display: block;\n    font-size: 12px;\n    font-weight: 500;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.form-input,\n.form-textarea {\n    width: 100%;\n}\n\n.expiration-field {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.clear-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 12px;\n    background: transparent;\n    border: 1px dashed #d1d5db;\n    border-radius: 6px;\n    font-size: 13px;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.clear-btn:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.edit-actions {\n    margin-top: 14px;\n    padding-top: 14px;\n    border-top: 1px solid #e5e7eb;\n}\n\n/* Danger Zone */\n.danger-zone {\n    background: #fef2f2;\n    border: 1px solid #fecaca;\n    border-radius: 10px;\n    padding: 14px 16px;\n}\n\n.danger-zone h4 {\n    margin: 0 0 12px 0;\n    font-size: 12px;\n    font-weight: 600;\n    color: #dc2626;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.revoke-section {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    gap: 20px;\n}\n\n.revoke-info {\n    display: flex;\n    gap: 12px;\n    flex: 1;\n}\n\n.revoke-info i {\n    font-size: 20px;\n    color: #dc2626;\n    margin-top: 2px;\n}\n\n.revoke-info strong {\n    display: block;\n    color: #991b1b;\n    margin-bottom: 4px;\n}\n\n.revoke-info p {\n    margin: 0;\n    font-size: 13px;\n    color: #7f1d1d;\n}\n\n.revoke-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: white;\n    border: 1px solid #dc2626;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: #dc2626;\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.revoke-btn:hover {\n    background: #dc2626;\n    color: white;\n}\n\n/* Revoke Confirm */\n.revoke-confirm {\n    background: #fef2f2;\n    border-radius: 8px;\n}\n\n.confirm-warning {\n    display: flex;\n    gap: 12px;\n    margin-bottom: 20px;\n}\n\n.confirm-warning i {\n    font-size: 24px;\n    color: #dc2626;\n}\n\n.confirm-warning strong {\n    display: block;\n    color: #991b1b;\n    font-size: 16px;\n    margin-bottom: 4px;\n}\n\n.confirm-warning p {\n    margin: 0;\n    font-size: 13px;\n    color: #7f1d1d;\n}\n\n.confirm-input {\n    margin-bottom: 16px;\n}\n\n.confirm-input label {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #7f1d1d;\n    margin-bottom: 8px;\n}\n\n.confirm-input code {\n    background: #fee2e2;\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-weight: 600;\n}\n\n.confirm-input input {\n    width: 100%;\n}\n\n.confirm-actions {\n    display: flex;\n    gap: 12px;\n    justify-content: flex-end;\n}\n\n.confirm-revoke-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: #dc2626;\n    border: none;\n    border-radius: 8px;\n    font-size: 14px;\n    font-weight: 600;\n    color: white;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.confirm-revoke-btn:hover:not(:disabled) {\n    background: #b91c1c;\n}\n\n.confirm-revoke-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n/* Revoked Notice */\n.revoked-notice {\n    display: flex;\n    gap: 12px;\n    padding: 20px;\n    background: #f3f4f6;\n    border-radius: 12px;\n}\n\n.revoked-notice i {\n    font-size: 24px;\n    color: #6b7280;\n}\n\n.revoked-notice strong {\n    display: block;\n    color: #374151;\n    margin-bottom: 4px;\n}\n\n.revoked-notice p {\n    margin: 0;\n    font-size: 13px;\n    color: #6b7280;\n}\n\n/* Scopes Tab */\n.scopes-tab {\n    padding: 16px;\n}\n\n.scopes-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 16px;\n    padding-bottom: 16px;\n    border-bottom: 1px solid #e5e7eb;\n}\n\n.scope-count {\n    font-size: 14px;\n    font-weight: 500;\n    color: #374151;\n}\n\n/* Scope Categories */\n.scope-categories {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category {\n    background: #f9fafb;\n    border: 1px solid #e5e7eb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header:hover {\n    background: #f3f4f6;\n}\n\n.category-left {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left i {\n    font-size: 16px;\n}\n\n.category-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n}\n\n.category-count {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: #6b7280;\n}\n\n.category-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.category-all-toggle {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 4px 10px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 12px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.category-all-toggle:hover {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.category-all-toggle input {\n    margin: 0;\n}\n\n.expand-icon {\n    color: #9ca3af;\n    font-size: 12px;\n    transition: transform 0.2s ease;\n}\n\n.category-scopes {\n    padding: 8px 16px 16px;\n    border-top: 1px solid #e5e7eb;\n    background: white;\n}\n\n.scope-item {\n    padding: 10px 0;\n    border-bottom: 1px solid #f3f4f6;\n}\n\n.scope-item:last-child {\n    border-bottom: none;\n}\n\n.scope-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info {\n    flex: 1;\n}\n\n.scope-name {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: #374151;\n    font-family: monospace;\n}\n\n.scope-desc {\n    display: block;\n    font-size: 12px;\n    color: #6b7280;\n    margin-top: 2px;\n}\n\n/* Usage Tab */\n.usage-tab {\n    padding: 16px;\n}\n\n.usage-stats {\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    gap: 16px;\n    margin-bottom: 24px;\n}\n\n.stat-card {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    padding: 20px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-radius: 12px;\n    text-align: center;\n}\n\n.stat-card i {\n    font-size: 24px;\n    color: #f59e0b;\n    margin-bottom: 12px;\n}\n\n.stat-value {\n    font-size: 24px;\n    font-weight: 700;\n    color: #78350f;\n}\n\n.stat-label {\n    font-size: 12px;\n    color: #92400e;\n    margin-top: 4px;\n}\n\n/* Usage Logs */\n.usage-logs {\n    background: #f9fafb;\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.log-header {\n    display: grid;\n    grid-template-columns: 100px 1fr 80px 80px;\n    gap: 12px;\n    padding: 12px 16px;\n    background: #e5e7eb;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n}\n\n.log-item {\n    display: grid;\n    grid-template-columns: 100px 1fr 80px 80px;\n    gap: 12px;\n    padding: 12px 16px;\n    border-bottom: 1px solid #e5e7eb;\n    font-size: 13px;\n    align-items: center;\n}\n\n.log-item:last-child {\n    border-bottom: none;\n}\n\n.col-time {\n    color: #6b7280;\n}\n\n.col-endpoint {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-family: monospace;\n    color: #374151;\n}\n\n.method-badge {\n    padding: 2px 6px;\n    background: #dbeafe;\n    border-radius: 4px;\n    font-size: 10px;\n    font-weight: 600;\n    color: #1d4ed8;\n}\n\n.col-status {\n    font-weight: 600;\n}\n\n.col-status.status-success {\n    color: #10b981;\n}\n\n.col-status.status-warning {\n    color: #f59e0b;\n}\n\n.col-status.status-error {\n    color: #ef4444;\n}\n\n.col-duration {\n    color: #6b7280;\n    text-align: right;\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: 48px 24px;\n    color: #6b7280;\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state span {\n    font-size: 16px;\n    font-weight: 500;\n    color: #374151;\n}\n\n.empty-state p {\n    margin: 8px 0 0 0;\n    font-size: 13px;\n}\n\n/* Legacy kendo-window styles removed - now using slideout-panel */\n\n/* Input and form field styling */\n:host ::ng-deep .form-input .k-input,\n:host ::ng-deep .form-textarea .k-input-inner,\n:host ::ng-deep .k-datepicker .k-input {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: #e5e7eb;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .form-input:focus-within,\n:host ::ng-deep .form-textarea:focus-within,\n:host ::ng-deep .k-datepicker:focus-within {\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n/* Button styling in edit actions */\n:host ::ng-deep .edit-actions .k-button {\n    min-width: 120px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .edit-actions .k-button-solid-primary {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);\n}\n\n:host ::ng-deep .edit-actions .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n/* Scopes header button styling */\n:host ::ng-deep .scopes-header .k-button {\n    min-width: 120px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .scopes-header .k-button-solid-primary {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border: none;\n    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);\n}\n\n:host ::ng-deep .scopes-header .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n/* No Scopes Warning */\n.no-scopes-warning {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 16px;\n    background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);\n    border: 1px solid #fecaca;\n    border-radius: 10px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    color: #991b1b;\n}\n\n.no-scopes-warning i {\n    font-size: 20px;\n    color: #dc2626;\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.no-scopes-warning strong {\n    display: block;\n    color: #991b1b;\n    font-size: 14px;\n    margin-bottom: 4px;\n}\n\n.no-scopes-warning p {\n    margin: 0;\n    line-height: 1.5;\n}\n"] }]
     }], null, { Visible: [{
             type: Input
         }], KeyId: [{
@@ -1070,5 +1076,5 @@ export class APIKeyEditPanelComponent {
             type: HostListener,
             args: ['document:keydown.escape']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIKeyEditPanelComponent, { className: "APIKeyEditPanelComponent", filePath: "src/APIKeys/api-key-edit-panel.component.ts", lineNumber: 47 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIKeyEditPanelComponent, { className: "APIKeyEditPanelComponent", filePath: "src/APIKeys/api-key-edit-panel.component.ts", lineNumber: 42 }); })();
 //# sourceMappingURL=api-key-edit-panel.component.js.map