@memberjunction/ng-dashboards 3.4.0 → 4.1.0

package/dist/APIKeys/api-key-list.component.js

@@ -5,20 +5,20 @@ import * as i0 from "@angular/core";
 import * as i1 from "@angular/common";
 import * as i2 from "@angular/forms";
 import * as i3 from "@memberjunction/ng-shared-generic";
-function APIKeyListComponent_button_11_Template(rf, ctx) { if (rf & 1) {
+function APIKeyListComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 22);
-    i0.ɵɵlistener("click", function APIKeyListComponent_button_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_11_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.clearSearch()); });
     i0.ɵɵelement(1, "i", 23);
     i0.ɵɵelementEnd();
 } }
-function APIKeyListComponent_mj_loading_45_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "mj-loading", 24);
+function APIKeyListComponent_Conditional_45_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "mj-loading", 19);
 } }
-function APIKeyListComponent_div_46_div_22_div_16_ng_container_2_span_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 61);
+function APIKeyListComponent_Conditional_46_For_23_Conditional_16_For_3_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 57);
     i0.ɵɵelement(1, "i");
-    i0.ɵɵelementStart(2, "span", 62);
+    i0.ɵɵelementStart(2, "span", 58);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -30,17 +30,14 @@ function APIKeyListComponent_div_46_div_22_div_16_ng_container_2_span_1_Template
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate(cat_r6.count);
 } }
-function APIKeyListComponent_div_46_div_22_div_16_ng_container_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, APIKeyListComponent_div_46_div_22_div_16_ng_container_2_span_1_Template, 4, 8, "span", 60);
-    i0.ɵɵelementContainerEnd();
+function APIKeyListComponent_Conditional_46_For_23_Conditional_16_For_3_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, APIKeyListComponent_Conditional_46_For_23_Conditional_16_For_3_Conditional_0_Template, 4, 8, "span", 56);
 } if (rf & 2) {
-    const i_r7 = ctx.index;
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", i_r7 < 3);
+    const ɵ$index_154_r7 = ctx.$index;
+    i0.ɵɵconditional(ɵ$index_154_r7 < 3 ? 0 : -1);
 } }
-function APIKeyListComponent_div_46_div_22_div_16_span_3_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 63);
+function APIKeyListComponent_Conditional_46_For_23_Conditional_16_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 54);
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -49,58 +46,60 @@ function APIKeyListComponent_div_46_div_22_div_16_span_3_Template(rf, ctx) { if
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" +", ctx_r1.getScopeInfo(key_r5).categories.length - 3, " ");
 } }
-function APIKeyListComponent_div_46_div_22_div_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 55)(1, "div", 56);
-    i0.ɵɵtemplate(2, APIKeyListComponent_div_46_div_22_div_16_ng_container_2_Template, 2, 1, "ng-container", 57)(3, APIKeyListComponent_div_46_div_22_div_16_span_3_Template, 2, 1, "span", 58);
+function APIKeyListComponent_Conditional_46_For_23_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 45)(1, "div", 53);
+    i0.ɵɵrepeaterCreate(2, APIKeyListComponent_Conditional_46_For_23_Conditional_16_For_3_Template, 1, 1, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(4, APIKeyListComponent_Conditional_46_For_23_Conditional_16_Conditional_4_Template, 2, 1, "span", 54);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 59);
-    i0.ɵɵtext(5);
+    i0.ɵɵelementStart(5, "span", 55);
+    i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const key_r5 = i0.ɵɵnextContext().$implicit;
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.getScopeInfo(key_r5).categories);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.getScopeInfo(key_r5).categories.length > 3);
+    i0.ɵɵrepeater(ctx_r1.getScopeInfo(key_r5).categories);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.getScopeInfo(key_r5).categories.length > 3 ? 4 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵtextInterpolate1(" ", ctx_r1.getScopeInfo(key_r5).count, " total ");
 } }
-function APIKeyListComponent_div_46_div_22_span_17_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 64);
-    i0.ɵɵelement(1, "i", 65);
+function APIKeyListComponent_Conditional_46_For_23_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 46);
+    i0.ɵɵelement(1, "i", 59);
     i0.ɵɵtext(2, " None ");
     i0.ɵɵelementEnd();
 } }
-function APIKeyListComponent_div_46_div_22_Template(rf, ctx) { if (rf & 1) {
+function APIKeyListComponent_Conditional_46_For_23_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 36);
-    i0.ɵɵlistener("click", function APIKeyListComponent_div_46_div_22_Template_div_click_0_listener() { const key_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectKey(key_r5)); });
-    i0.ɵɵelementStart(1, "div", 37)(2, "div", 38);
-    i0.ɵɵelement(3, "i", 39);
+    i0.ɵɵelementStart(0, "div", 34);
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_46_For_23_Template_div_click_0_listener() { const key_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectKey(key_r5)); });
+    i0.ɵɵelementStart(1, "div", 35)(2, "div", 36);
+    i0.ɵɵelement(3, "i", 37);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 40)(5, "span", 41);
+    i0.ɵɵelementStart(4, "div", 38)(5, "span", 39);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "code", 42);
+    i0.ɵɵelementStart(7, "code", 40);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(9, "div", 43)(10, "span", 44);
+    i0.ɵɵelementStart(9, "div", 41)(10, "span", 42);
     i0.ɵɵtext(11);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(12, "div", 45)(13, "span", 46);
+    i0.ɵɵelementStart(12, "div", 43)(13, "span", 44);
     i0.ɵɵtext(14);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(15, "div", 30);
-    i0.ɵɵtemplate(16, APIKeyListComponent_div_46_div_22_div_16_Template, 6, 3, "div", 47)(17, APIKeyListComponent_div_46_div_22_span_17_Template, 3, 0, "span", 48);
+    i0.ɵɵelementStart(15, "div", 28);
+    i0.ɵɵconditionalCreate(16, APIKeyListComponent_Conditional_46_For_23_Conditional_16_Template, 7, 2, "div", 45);
+    i0.ɵɵconditionalCreate(17, APIKeyListComponent_Conditional_46_For_23_Conditional_17_Template, 3, 0, "span", 46);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(18, "div", 49)(19, "span", 50);
+    i0.ɵɵelementStart(18, "div", 47)(19, "span", 48);
     i0.ɵɵtext(20);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(21, "div", 51)(22, "span", 52);
+    i0.ɵɵelementStart(21, "div", 49)(22, "span", 50);
     i0.ɵɵtext(23);
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(24, "div", 53)(25, "span", 54);
+    i0.ɵɵelementStart(24, "div", 51)(25, "span", 52);
     i0.ɵɵtext(26);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
@@ -111,7 +110,7 @@ function APIKeyListComponent_div_46_div_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate(key_r5.Label);
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1("...", key_r5.Hash.slice(-12), "");
+    i0.ɵɵtextInterpolate1("...", key_r5.Hash.slice(-12));
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(key_r5.User);
     i0.ɵɵadvance(2);
@@ -119,9 +118,9 @@ function APIKeyListComponent_div_46_div_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", key_r5.Status, " ");
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.getScopeInfo(key_r5).count > 0);
+    i0.ɵɵconditional(ctx_r1.getScopeInfo(key_r5).count > 0 ? 16 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.getScopeInfo(key_r5).count === 0);
+    i0.ɵɵconditional(ctx_r1.getScopeInfo(key_r5).count === 0 ? 17 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("ngClass", ctx_r1.getExpirationClass(key_r5));
     i0.ɵɵadvance();
@@ -133,7 +132,7 @@ function APIKeyListComponent_div_46_div_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵtextInterpolate(ctx_r1.formatDate(key_r5.__mj_CreatedAt));
 } }
-function APIKeyListComponent_div_46_div_23_span_2_Template(rf, ctx) { if (rf & 1) {
+function APIKeyListComponent_Conditional_46_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -142,7 +141,7 @@ function APIKeyListComponent_div_46_div_23_span_2_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("No keys matching \"", ctx_r1.SearchText, "\"");
 } }
-function APIKeyListComponent_div_46_div_23_span_3_Template(rf, ctx) { if (rf & 1) {
+function APIKeyListComponent_Conditional_46_Conditional_24_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -151,71 +150,75 @@ function APIKeyListComponent_div_46_div_23_span_3_Template(rf, ctx) { if (rf & 1
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1("No ", ctx_r1.Filter, " keys found");
 } }
-function APIKeyListComponent_div_46_div_23_span_4_Template(rf, ctx) { if (rf & 1) {
+function APIKeyListComponent_Conditional_46_Conditional_24_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1, "No API keys created yet");
     i0.ɵɵelementEnd();
 } }
-function APIKeyListComponent_div_46_div_23_button_5_Template(rf, ctx) { if (rf & 1) {
+function APIKeyListComponent_Conditional_46_Conditional_24_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r8 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 69);
-    i0.ɵɵlistener("click", function APIKeyListComponent_div_46_div_23_button_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.requestCreate()); });
+    i0.ɵɵelementStart(0, "button", 61);
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_46_Conditional_24_Conditional_5_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r8); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.requestCreate()); });
     i0.ɵɵelement(1, "i", 10);
     i0.ɵɵtext(2, " Generate Your First Key ");
     i0.ɵɵelementEnd();
 } }
-function APIKeyListComponent_div_46_div_23_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 66);
-    i0.ɵɵelement(1, "i", 39);
-    i0.ɵɵtemplate(2, APIKeyListComponent_div_46_div_23_span_2_Template, 2, 1, "span", 67)(3, APIKeyListComponent_div_46_div_23_span_3_Template, 2, 1, "span", 67)(4, APIKeyListComponent_div_46_div_23_span_4_Template, 2, 0, "span", 67)(5, APIKeyListComponent_div_46_div_23_button_5_Template, 3, 0, "button", 68);
+function APIKeyListComponent_Conditional_46_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 33);
+    i0.ɵɵelement(1, "i", 37);
+    i0.ɵɵconditionalCreate(2, APIKeyListComponent_Conditional_46_Conditional_24_Conditional_2_Template, 2, 1, "span");
+    i0.ɵɵconditionalCreate(3, APIKeyListComponent_Conditional_46_Conditional_24_Conditional_3_Template, 2, 1, "span");
+    i0.ɵɵconditionalCreate(4, APIKeyListComponent_Conditional_46_Conditional_24_Conditional_4_Template, 2, 0, "span");
+    i0.ɵɵconditionalCreate(5, APIKeyListComponent_Conditional_46_Conditional_24_Conditional_5_Template, 3, 0, "button", 60);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngIf", ctx_r1.SearchText);
+    i0.ɵɵconditional(ctx_r1.SearchText ? 2 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.SearchText && ctx_r1.Filter !== "all");
+    i0.ɵɵconditional(!ctx_r1.SearchText && ctx_r1.Filter !== "all" ? 3 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", !ctx_r1.SearchText && ctx_r1.Filter === "all");
+    i0.ɵɵconditional(!ctx_r1.SearchText && ctx_r1.Filter === "all" ? 4 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.Filter === "all" && !ctx_r1.SearchText);
+    i0.ɵɵconditional(ctx_r1.Filter === "all" && !ctx_r1.SearchText ? 5 : -1);
 } }
-function APIKeyListComponent_div_46_Template(rf, ctx) { if (rf & 1) {
+function APIKeyListComponent_Conditional_46_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 25)(1, "div", 26)(2, "div", 27);
-    i0.ɵɵlistener("click", function APIKeyListComponent_div_46_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("Label")); });
+    i0.ɵɵelementStart(0, "div", 20)(1, "div", 24)(2, "div", 25);
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_46_Template_div_click_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("Label")); });
     i0.ɵɵtext(3, " Key ");
     i0.ɵɵelement(4, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 28);
-    i0.ɵɵlistener("click", function APIKeyListComponent_div_46_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("User")); });
+    i0.ɵɵelementStart(5, "div", 26);
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_46_Template_div_click_5_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("User")); });
     i0.ɵɵtext(6, " Owner ");
     i0.ɵɵelement(7, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "div", 29);
-    i0.ɵɵlistener("click", function APIKeyListComponent_div_46_Template_div_click_8_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("Status")); });
+    i0.ɵɵelementStart(8, "div", 27);
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_46_Template_div_click_8_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("Status")); });
     i0.ɵɵtext(9, " Status ");
     i0.ɵɵelement(10, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(11, "div", 30);
+    i0.ɵɵelementStart(11, "div", 28);
     i0.ɵɵtext(12, " Scopes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(13, "div", 31);
-    i0.ɵɵlistener("click", function APIKeyListComponent_div_46_Template_div_click_13_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("ExpiresAt")); });
+    i0.ɵɵelementStart(13, "div", 29);
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_46_Template_div_click_13_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("ExpiresAt")); });
     i0.ɵɵtext(14, " Expires ");
     i0.ɵɵelement(15, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(16, "div", 32);
-    i0.ɵɵlistener("click", function APIKeyListComponent_div_46_Template_div_click_16_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("LastUsedAt")); });
+    i0.ɵɵelementStart(16, "div", 30);
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_46_Template_div_click_16_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("LastUsedAt")); });
     i0.ɵɵtext(17, " Last Used ");
     i0.ɵɵelement(18, "i");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(19, "div", 33);
-    i0.ɵɵlistener("click", function APIKeyListComponent_div_46_Template_div_click_19_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("__mj_CreatedAt")); });
+    i0.ɵɵelementStart(19, "div", 31);
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_46_Template_div_click_19_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleSort("__mj_CreatedAt")); });
     i0.ɵɵtext(20, " Created ");
     i0.ɵɵelement(21, "i");
     i0.ɵɵelementEnd()();
-    i0.ɵɵtemplate(22, APIKeyListComponent_div_46_div_22_Template, 27, 18, "div", 34)(23, APIKeyListComponent_div_46_div_23_Template, 6, 4, "div", 35);
+    i0.ɵɵrepeaterCreate(22, APIKeyListComponent_Conditional_46_For_23_Template, 27, 18, "div", 32, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵconditionalCreate(24, APIKeyListComponent_Conditional_46_Conditional_24_Template, 6, 4, "div", 33);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -232,14 +235,14 @@ function APIKeyListComponent_div_46_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(3);
     i0.ɵɵclassMap(ctx_r1.getSortIcon("__mj_CreatedAt"));
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r1.getPaginatedKeys());
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", ctx_r1.FilteredKeys.length === 0);
+    i0.ɵɵrepeater(ctx_r1.getPaginatedKeys());
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.FilteredKeys.length === 0 ? 24 : -1);
 } }
-function APIKeyListComponent_div_47_ng_container_6_button_1_Template(rf, ctx) { if (rf & 1) {
+function APIKeyListComponent_Conditional_47_For_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "button", 78);
-    i0.ɵɵlistener("click", function APIKeyListComponent_div_47_ng_container_6_button_1_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const page_r11 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.goToPage(page_r11)); });
+    i0.ɵɵelementStart(0, "button", 69);
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_47_For_7_Conditional_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r10); const page_r11 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.goToPage(page_r11)); });
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -249,35 +252,33 @@ function APIKeyListComponent_div_47_ng_container_6_button_1_Template(rf, ctx) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", page_r11, " ");
 } }
-function APIKeyListComponent_div_47_ng_container_6_span_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "span", 79);
+function APIKeyListComponent_Conditional_47_For_7_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 68);
     i0.ɵɵtext(1, "...");
     i0.ɵɵelementEnd();
 } }
-function APIKeyListComponent_div_47_ng_container_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementContainerStart(0);
-    i0.ɵɵtemplate(1, APIKeyListComponent_div_47_ng_container_6_button_1_Template, 2, 3, "button", 76)(2, APIKeyListComponent_div_47_ng_container_6_span_2_Template, 2, 0, "span", 77);
-    i0.ɵɵelementContainerEnd();
+function APIKeyListComponent_Conditional_47_For_7_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵconditionalCreate(0, APIKeyListComponent_Conditional_47_For_7_Conditional_0_Template, 2, 3, "button", 67);
+    i0.ɵɵconditionalCreate(1, APIKeyListComponent_Conditional_47_For_7_Conditional_1_Template, 2, 0, "span", 68);
 } if (rf & 2) {
     const page_r11 = ctx.$implicit;
+    i0.ɵɵconditional(page_r11 > 0 ? 0 : -1);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", page_r11 > 0);
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("ngIf", page_r11 === -1);
+    i0.ɵɵconditional(page_r11 === -1 ? 1 : -1);
 } }
-function APIKeyListComponent_div_47_Template(rf, ctx) { if (rf & 1) {
+function APIKeyListComponent_Conditional_47_Template(rf, ctx) { if (rf & 1) {
     const _r9 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 70)(1, "div", 71);
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 62);
     i0.ɵɵtext(2);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "div", 72)(4, "button", 73);
-    i0.ɵɵlistener("click", function APIKeyListComponent_div_47_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.goToPage(ctx_r1.CurrentPage - 1)); });
-    i0.ɵɵelement(5, "i", 74);
+    i0.ɵɵelementStart(3, "div", 63)(4, "button", 64);
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_47_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.goToPage(ctx_r1.CurrentPage - 1)); });
+    i0.ɵɵelement(5, "i", 65);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(6, APIKeyListComponent_div_47_ng_container_6_Template, 3, 2, "ng-container", 57);
-    i0.ɵɵelementStart(7, "button", 73);
-    i0.ɵɵlistener("click", function APIKeyListComponent_div_47_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.goToPage(ctx_r1.CurrentPage + 1)); });
-    i0.ɵɵelement(8, "i", 75);
+    i0.ɵɵrepeaterCreate(6, APIKeyListComponent_Conditional_47_For_7_Template, 2, 2, null, null, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementStart(8, "button", 64);
+    i0.ɵɵlistener("click", function APIKeyListComponent_Conditional_47_Template_button_click_8_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.goToPage(ctx_r1.CurrentPage + 1)); });
+    i0.ɵɵelement(9, "i", 66);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
@@ -286,14 +287,10 @@ function APIKeyListComponent_div_47_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.CurrentPage === 1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngForOf", ctx_r1.getPageNumbers());
-    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.getPageNumbers());
+    i0.ɵɵadvance(2);
     i0.ɵɵproperty("disabled", ctx_r1.CurrentPage === ctx_r1.getTotalPages());
 } }
-/** Tree shaking prevention function */
-export function LoadAPIKeyList() {
-    // This function prevents tree shaking
-}
 /**
  * List view component for displaying and filtering API keys
  */
@@ -702,7 +699,7 @@ export class APIKeyListComponent {
         }
     }
     static ɵfac = function APIKeyListComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || APIKeyListComponent)(); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: APIKeyListComponent, selectors: [["mj-api-key-list"]], inputs: { Filter: "Filter" }, outputs: { KeySelected: "KeySelected", CreateRequested: "CreateRequested" }, features: [i0.ɵɵNgOnChangesFeature], decls: 48, vars: 29, consts: [[1, "list-container"], [1, "list-header"], [1, "header-left"], [1, "count-badge"], [1, "header-right"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search keys...", 3, "ngModelChange", "ngModel"], ["class", "clear-search", 3, "click", 4, "ngIf"], [1, "create-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "filter-tabs"], [1, "filter-tab", 3, "click"], [1, "tab-count"], [1, "fa-solid", "fa-check-circle", "status-active"], [1, "fa-solid", "fa-clock", "status-warning"], [1, "fa-solid", "fa-circle-exclamation", "status-danger"], [1, "fa-solid", "fa-question-circle", "status-info"], [1, "fa-solid", "fa-ban", "status-revoked"], ["text", "Loading API keys...", 4, "ngIf"], ["class", "key-grid", 4, "ngIf"], ["class", "pagination", 4, "ngIf"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading API keys..."], [1, "key-grid"], [1, "grid-header"], [1, "col-key", "sortable", 3, "click"], [1, "col-owner", "sortable", 3, "click"], [1, "col-status", "sortable", 3, "click"], [1, "col-scopes"], [1, "col-expires", "sortable", 3, "click"], [1, "col-used", "sortable", 3, "click"], [1, "col-created", "sortable", 3, "click"], ["class", "grid-row", 3, "click", 4, "ngFor", "ngForOf"], ["class", "empty-state", 4, "ngIf"], [1, "grid-row", 3, "click"], [1, "col-key"], [1, "key-icon"], [1, "fa-solid", "fa-key"], [1, "key-details"], [1, "key-label"], [1, "key-hash"], [1, "col-owner"], [1, "owner-name"], [1, "col-status"], [1, "status-badge"], ["class", "scopes-display", 4, "ngIf"], ["class", "no-scopes", 4, "ngIf"], [1, "col-expires"], [1, "expires-value", 3, "ngClass"], [1, "col-used"], [1, "used-value"], [1, "col-created"], [1, "created-value"], [1, "scopes-display"], [1, "scope-badges"], [4, "ngFor", "ngForOf"], ["class", "scope-more", 4, "ngIf"], [1, "scopes-total"], ["class", "scope-badge", 3, "backgroundColor", "color", "title", 4, "ngIf"], [1, "scope-badge", 3, "title"], [1, "badge-count"], [1, "scope-more"], [1, "no-scopes"], [1, "fa-solid", "fa-shield-xmark"], [1, "empty-state"], [4, "ngIf"], ["class", "create-empty-btn", 3, "click", 4, "ngIf"], [1, "create-empty-btn", 3, "click"], [1, "pagination"], [1, "page-info"], [1, "page-buttons"], [1, "page-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-left"], [1, "fa-solid", "fa-chevron-right"], ["class", "page-btn", 3, "active", "click", 4, "ngIf"], ["class", "page-ellipsis", 4, "ngIf"], [1, "page-btn", 3, "click"], [1, "page-ellipsis"]], template: function APIKeyListComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: APIKeyListComponent, selectors: [["mj-api-key-list"]], inputs: { Filter: "Filter" }, outputs: { KeySelected: "KeySelected", CreateRequested: "CreateRequested" }, standalone: false, features: [i0.ɵɵNgOnChangesFeature], decls: 48, vars: 29, consts: [[1, "list-container"], [1, "list-header"], [1, "header-left"], [1, "count-badge"], [1, "header-right"], [1, "search-box"], [1, "fa-solid", "fa-search"], ["type", "text", "placeholder", "Search keys...", 3, "ngModelChange", "ngModel"], [1, "clear-search"], [1, "create-btn", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "filter-tabs"], [1, "filter-tab", 3, "click"], [1, "tab-count"], [1, "fa-solid", "fa-check-circle", "status-active"], [1, "fa-solid", "fa-clock", "status-warning"], [1, "fa-solid", "fa-circle-exclamation", "status-danger"], [1, "fa-solid", "fa-question-circle", "status-info"], [1, "fa-solid", "fa-ban", "status-revoked"], ["text", "Loading API keys..."], [1, "key-grid"], [1, "pagination"], [1, "clear-search", 3, "click"], [1, "fa-solid", "fa-times"], [1, "grid-header"], [1, "col-key", "sortable", 3, "click"], [1, "col-owner", "sortable", 3, "click"], [1, "col-status", "sortable", 3, "click"], [1, "col-scopes"], [1, "col-expires", "sortable", 3, "click"], [1, "col-used", "sortable", 3, "click"], [1, "col-created", "sortable", 3, "click"], [1, "grid-row"], [1, "empty-state"], [1, "grid-row", 3, "click"], [1, "col-key"], [1, "key-icon"], [1, "fa-solid", "fa-key"], [1, "key-details"], [1, "key-label"], [1, "key-hash"], [1, "col-owner"], [1, "owner-name"], [1, "col-status"], [1, "status-badge"], [1, "scopes-display"], [1, "no-scopes"], [1, "col-expires"], [1, "expires-value", 3, "ngClass"], [1, "col-used"], [1, "used-value"], [1, "col-created"], [1, "created-value"], [1, "scope-badges"], [1, "scope-more"], [1, "scopes-total"], [1, "scope-badge", 3, "backgroundColor", "color", "title"], [1, "scope-badge", 3, "title"], [1, "badge-count"], [1, "fa-solid", "fa-shield-xmark"], [1, "create-empty-btn"], [1, "create-empty-btn", 3, "click"], [1, "page-info"], [1, "page-buttons"], [1, "page-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-left"], [1, "fa-solid", "fa-chevron-right"], [1, "page-btn", 3, "active"], [1, "page-ellipsis"], [1, "page-btn", 3, "click"]], template: function APIKeyListComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "h3");
             i0.ɵɵtext(4, "API Keys");
             i0.ɵɵelementEnd();
@@ -715,7 +712,7 @@ export class APIKeyListComponent {
             i0.ɵɵtwoWayListener("ngModelChange", function APIKeyListComponent_Template_input_ngModelChange_10_listener($event) { i0.ɵɵtwoWayBindingSet(ctx.SearchText, $event) || (ctx.SearchText = $event); return $event; });
             i0.ɵɵlistener("ngModelChange", function APIKeyListComponent_Template_input_ngModelChange_10_listener() { return ctx.onSearch(); });
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(11, APIKeyListComponent_button_11_Template, 2, 0, "button", 8);
+            i0.ɵɵconditionalCreate(11, APIKeyListComponent_Conditional_11_Template, 2, 0, "button", 8);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(12, "button", 9);
             i0.ɵɵlistener("click", function APIKeyListComponent_Template_button_click_12_listener() { return ctx.requestCreate(); });
@@ -763,15 +760,17 @@ export class APIKeyListComponent {
             i0.ɵɵelementStart(43, "span", 13);
             i0.ɵɵtext(44);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵtemplate(45, APIKeyListComponent_mj_loading_45_Template, 1, 0, "mj-loading", 19)(46, APIKeyListComponent_div_46_Template, 24, 14, "div", 20)(47, APIKeyListComponent_div_47_Template, 9, 6, "div", 21);
+            i0.ɵɵconditionalCreate(45, APIKeyListComponent_Conditional_45_Template, 1, 0, "mj-loading", 19);
+            i0.ɵɵconditionalCreate(46, APIKeyListComponent_Conditional_46_Template, 25, 13, "div", 20);
+            i0.ɵɵconditionalCreate(47, APIKeyListComponent_Conditional_47_Template, 10, 5, "div", 21);
             i0.ɵɵelementEnd();
         } if (rf & 2) {
             i0.ɵɵadvance(6);
-            i0.ɵɵtextInterpolate2("", ctx.FilteredKeys.length, " of ", ctx.AllKeys.length, "");
+            i0.ɵɵtextInterpolate2("", ctx.FilteredKeys.length, " of ", ctx.AllKeys.length);
             i0.ɵɵadvance(4);
             i0.ɵɵtwoWayProperty("ngModel", ctx.SearchText);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.SearchText);
+            i0.ɵɵconditional(ctx.SearchText ? 11 : -1);
             i0.ɵɵadvance(5);
             i0.ɵɵclassProp("active", ctx.Filter === "all");
             i0.ɵɵadvance(3);
@@ -797,16 +796,16 @@ export class APIKeyListComponent {
             i0.ɵɵadvance(4);
             i0.ɵɵtextInterpolate(ctx.Stats.revoked);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsLoading);
+            i0.ɵɵconditional(ctx.IsLoading ? 45 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.IsLoading);
+            i0.ɵɵconditional(!ctx.IsLoading ? 46 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", !ctx.IsLoading && ctx.FilteredKeys.length > ctx.PageSize);
-        } }, dependencies: [i1.NgClass, i1.NgForOf, i1.NgIf, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent], styles: [".list-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n\n\n.list-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-left[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: #78350f;\n}\n\n.count-badge[_ngcontent-%COMP%] {\n    padding: 4px 12px;\n    background: rgba(255, 255, 255, 0.7);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #92400e;\n}\n\n.header-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n\n\n.search-box[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    color: #9ca3af;\n    font-size: 14px;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 260px;\n    padding: 10px 36px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 14px;\n    transition: all 0.2s ease;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: #f59e0b;\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n.clear-search[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #e5e7eb;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.clear-search[_ngcontent-%COMP%]:hover {\n    background: #d1d5db;\n}\n\n.clear-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    position: static;\n    font-size: 10px;\n    color: #6b7280;\n}\n\n\n\n.create-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\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.create-btn[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n\n\n.filter-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    padding: 0 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    overflow-x: auto;\n}\n\n.filter-tab[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 16px;\n    background: transparent;\n    border: none;\n    border-bottom: 2px solid transparent;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    white-space: nowrap;\n    transition: all 0.2s ease;\n}\n\n.filter-tab[_ngcontent-%COMP%]:hover {\n    color: #374151;\n    background: #f3f4f6;\n}\n\n.filter-tab.active[_ngcontent-%COMP%] {\n    color: #f59e0b;\n    border-bottom-color: #f59e0b;\n}\n\n.filter-tab.has-warning[_ngcontent-%COMP%]   .tab-count[_ngcontent-%COMP%] {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.filter-tab.has-danger[_ngcontent-%COMP%]   .tab-count[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.tab-count[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.status-active[_ngcontent-%COMP%] { color: #10b981; }\n.status-warning[_ngcontent-%COMP%] { color: #f59e0b; }\n.status-danger[_ngcontent-%COMP%] { color: #ef4444; }\n.status-info[_ngcontent-%COMP%] { color: #6b7280; }\n.status-revoked[_ngcontent-%COMP%] { color: #6b7280; }\n\n\n\n.key-grid[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.grid-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 2fr 1fr 90px 160px 100px 110px 100px;\n    gap: 12px;\n    padding: 14px 24px;\n    background: #f3f4f6;\n    border-bottom: 1px solid #e5e7eb;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    position: sticky;\n    top: 0;\n}\n\n.sortable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color 0.2s ease;\n}\n\n.sortable[_ngcontent-%COMP%]:hover {\n    color: #374151;\n}\n\n.sortable[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n    opacity: 0.5;\n}\n\n\n\n.grid-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 2fr 1fr 90px 160px 100px 110px 100px;\n    gap: 12px;\n    padding: 16px 24px;\n    border-bottom: 1px solid #f3f4f6;\n    cursor: pointer;\n    transition: background 0.2s ease;\n    align-items: center;\n}\n\n.grid-row[_ngcontent-%COMP%]:hover {\n    background: #fefce8;\n}\n\n.grid-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n\n\n.col-key[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    min-width: 0;\n}\n\n.key-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);\n    border-radius: 8px;\n    flex-shrink: 0;\n}\n\n.key-icon.active[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n}\n\n.key-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: white;\n}\n\n.key-details[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n}\n\n.key-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-hash[_ngcontent-%COMP%] {\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 11px;\n    color: #6b7280;\n    background: #f3f4f6;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n\n\n.owner-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #374151;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: capitalize;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.status-badge.revoked[_ngcontent-%COMP%] {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n\n\n.col-scopes[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n}\n\n.scopes-display[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.scope-badges[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-wrap: wrap;\n}\n\n.scope-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    cursor: default;\n    transition: transform 0.15s ease;\n}\n\n.scope-badge[_ngcontent-%COMP%]:hover {\n    transform: scale(1.05);\n}\n\n.scope-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.badge-count[_ngcontent-%COMP%] {\n    font-weight: 700;\n}\n\n.scope-more[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 3px 6px;\n    background: #f3f4f6;\n    border-radius: 12px;\n    font-size: 10px;\n    font-weight: 600;\n    color: #6b7280;\n}\n\n.scopes-total[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: #9ca3af;\n}\n\n.no-scopes[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #d1d5db;\n}\n\n.no-scopes[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n}\n\n\n\n.expires-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n}\n\n.expires-value.never[_ngcontent-%COMP%] {\n    color: #6b7280;\n}\n\n.expires-value.ok[_ngcontent-%COMP%] {\n    color: #059669;\n}\n\n.expires-value.warning[_ngcontent-%COMP%] {\n    color: #d97706;\n    font-weight: 500;\n}\n\n.expires-value.critical[_ngcontent-%COMP%] {\n    color: #dc2626;\n    font-weight: 600;\n}\n\n.expires-value.expired[_ngcontent-%COMP%] {\n    color: #dc2626;\n    font-weight: 600;\n}\n\n\n\n.used-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #374151;\n}\n\n.used-value.never[_ngcontent-%COMP%] {\n    color: #9ca3af;\n    font-style: italic;\n}\n\n\n\n.created-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6b7280;\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: 64px 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.3;\n}\n\n.empty-state[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: #374151;\n}\n\n.create-empty-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 20px;\n    padding: 12px 24px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\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.create-empty-btn[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n\n\n.pagination[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n}\n\n.page-info[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.page-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.page-btn[_ngcontent-%COMP%] {\n    min-width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.page-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.page-btn.active[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.page-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.page-ellipsis[_ngcontent-%COMP%] {\n    padding: 0 8px;\n    color: #9ca3af;\n}\n\n\n\n@media (max-width: 1200px) {\n    .grid-header[_ngcontent-%COMP%], \n   .grid-row[_ngcontent-%COMP%] {\n        grid-template-columns: 2fr 1fr 90px 120px 100px;\n    }\n\n    .col-used[_ngcontent-%COMP%], \n   .col-created[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 1024px) {\n    .grid-header[_ngcontent-%COMP%], \n   .grid-row[_ngcontent-%COMP%] {\n        grid-template-columns: 2fr 90px 110px 100px;\n    }\n\n    .col-owner[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .header-right[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: space-between;\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n        width: 180px;\n    }\n\n    .grid-header[_ngcontent-%COMP%], \n   .grid-row[_ngcontent-%COMP%] {\n        grid-template-columns: 2fr 90px 100px;\n    }\n\n    .col-expires[_ngcontent-%COMP%], \n   .col-scopes[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .filter-tabs[_ngcontent-%COMP%] {\n        padding: 0 16px;\n    }\n}"] });
+            i0.ɵɵconditional(!ctx.IsLoading && ctx.FilteredKeys.length > ctx.PageSize ? 47 : -1);
+        } }, dependencies: [i1.NgClass, i2.DefaultValueAccessor, i2.NgControlStatus, i2.NgModel, i3.LoadingComponent], styles: [".list-container[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n\n\n.list-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-left[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: #78350f;\n}\n\n.count-badge[_ngcontent-%COMP%] {\n    padding: 4px 12px;\n    background: rgba(255, 255, 255, 0.7);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #92400e;\n}\n\n.header-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n\n\n.search-box[_ngcontent-%COMP%] {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 12px;\n    color: #9ca3af;\n    font-size: 14px;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    width: 260px;\n    padding: 10px 36px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 14px;\n    transition: all 0.2s ease;\n}\n\n.search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%]:focus {\n    outline: none;\n    border-color: #f59e0b;\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n.clear-search[_ngcontent-%COMP%] {\n    position: absolute;\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #e5e7eb;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.clear-search[_ngcontent-%COMP%]:hover {\n    background: #d1d5db;\n}\n\n.clear-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    position: static;\n    font-size: 10px;\n    color: #6b7280;\n}\n\n\n\n.create-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\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.create-btn[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n\n\n.filter-tabs[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    padding: 0 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    overflow-x: auto;\n}\n\n.filter-tab[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 16px;\n    background: transparent;\n    border: none;\n    border-bottom: 2px solid transparent;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    white-space: nowrap;\n    transition: all 0.2s ease;\n}\n\n.filter-tab[_ngcontent-%COMP%]:hover {\n    color: #374151;\n    background: #f3f4f6;\n}\n\n.filter-tab.active[_ngcontent-%COMP%] {\n    color: #f59e0b;\n    border-bottom-color: #f59e0b;\n}\n\n.filter-tab.has-warning[_ngcontent-%COMP%]   .tab-count[_ngcontent-%COMP%] {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.filter-tab.has-danger[_ngcontent-%COMP%]   .tab-count[_ngcontent-%COMP%] {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.tab-count[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.status-active[_ngcontent-%COMP%] { color: #10b981; }\n.status-warning[_ngcontent-%COMP%] { color: #f59e0b; }\n.status-danger[_ngcontent-%COMP%] { color: #ef4444; }\n.status-info[_ngcontent-%COMP%] { color: #6b7280; }\n.status-revoked[_ngcontent-%COMP%] { color: #6b7280; }\n\n\n\n.key-grid[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.grid-header[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 2fr 1fr 90px 160px 100px 110px 100px;\n    gap: 12px;\n    padding: 14px 24px;\n    background: #f3f4f6;\n    border-bottom: 1px solid #e5e7eb;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    position: sticky;\n    top: 0;\n}\n\n.sortable[_ngcontent-%COMP%] {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color 0.2s ease;\n}\n\n.sortable[_ngcontent-%COMP%]:hover {\n    color: #374151;\n}\n\n.sortable[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n    opacity: 0.5;\n}\n\n\n\n.grid-row[_ngcontent-%COMP%] {\n    display: grid;\n    grid-template-columns: 2fr 1fr 90px 160px 100px 110px 100px;\n    gap: 12px;\n    padding: 16px 24px;\n    border-bottom: 1px solid #f3f4f6;\n    cursor: pointer;\n    transition: background 0.2s ease;\n    align-items: center;\n}\n\n.grid-row[_ngcontent-%COMP%]:hover {\n    background: #fefce8;\n}\n\n.grid-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n\n\n.col-key[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    min-width: 0;\n}\n\n.key-icon[_ngcontent-%COMP%] {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);\n    border-radius: 8px;\n    flex-shrink: 0;\n}\n\n.key-icon.active[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n}\n\n.key-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: white;\n}\n\n.key-details[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n}\n\n.key-label[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-hash[_ngcontent-%COMP%] {\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 11px;\n    color: #6b7280;\n    background: #f3f4f6;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n\n\n.owner-name[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: #374151;\n}\n\n\n\n.status-badge[_ngcontent-%COMP%] {\n    display: inline-block;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: capitalize;\n}\n\n.status-badge.active[_ngcontent-%COMP%] {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.status-badge.revoked[_ngcontent-%COMP%] {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n\n\n.col-scopes[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n}\n\n.scopes-display[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.scope-badges[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-wrap: wrap;\n}\n\n.scope-badge[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    cursor: default;\n    transition: transform 0.15s ease;\n}\n\n.scope-badge[_ngcontent-%COMP%]:hover {\n    transform: scale(1.05);\n}\n\n.scope-badge[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 10px;\n}\n\n.badge-count[_ngcontent-%COMP%] {\n    font-weight: 700;\n}\n\n.scope-more[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 3px 6px;\n    background: #f3f4f6;\n    border-radius: 12px;\n    font-size: 10px;\n    font-weight: 600;\n    color: #6b7280;\n}\n\n.scopes-total[_ngcontent-%COMP%] {\n    font-size: 11px;\n    color: #9ca3af;\n}\n\n.no-scopes[_ngcontent-%COMP%] {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #d1d5db;\n}\n\n.no-scopes[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 11px;\n}\n\n\n\n.expires-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n}\n\n.expires-value.never[_ngcontent-%COMP%] {\n    color: #6b7280;\n}\n\n.expires-value.ok[_ngcontent-%COMP%] {\n    color: #059669;\n}\n\n.expires-value.warning[_ngcontent-%COMP%] {\n    color: #d97706;\n    font-weight: 500;\n}\n\n.expires-value.critical[_ngcontent-%COMP%] {\n    color: #dc2626;\n    font-weight: 600;\n}\n\n.expires-value.expired[_ngcontent-%COMP%] {\n    color: #dc2626;\n    font-weight: 600;\n}\n\n\n\n.used-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #374151;\n}\n\n.used-value.never[_ngcontent-%COMP%] {\n    color: #9ca3af;\n    font-style: italic;\n}\n\n\n\n.created-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6b7280;\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: 64px 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.3;\n}\n\n.empty-state[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    color: #374151;\n}\n\n.create-empty-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 20px;\n    padding: 12px 24px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\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.create-empty-btn[_ngcontent-%COMP%]:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n\n\n.pagination[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n}\n\n.page-info[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.page-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.page-btn[_ngcontent-%COMP%] {\n    min-width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.page-btn[_ngcontent-%COMP%]:hover:not(:disabled) {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.page-btn.active[_ngcontent-%COMP%] {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.page-btn[_ngcontent-%COMP%]:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.page-ellipsis[_ngcontent-%COMP%] {\n    padding: 0 8px;\n    color: #9ca3af;\n}\n\n\n\n@media (max-width: 1200px) {\n    .grid-header[_ngcontent-%COMP%], \n   .grid-row[_ngcontent-%COMP%] {\n        grid-template-columns: 2fr 1fr 90px 120px 100px;\n    }\n\n    .col-used[_ngcontent-%COMP%], \n   .col-created[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 1024px) {\n    .grid-header[_ngcontent-%COMP%], \n   .grid-row[_ngcontent-%COMP%] {\n        grid-template-columns: 2fr 90px 110px 100px;\n    }\n\n    .col-owner[_ngcontent-%COMP%] {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header[_ngcontent-%COMP%] {\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .header-right[_ngcontent-%COMP%] {\n        width: 100%;\n        justify-content: space-between;\n    }\n\n    .search-box[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n        width: 180px;\n    }\n\n    .grid-header[_ngcontent-%COMP%], \n   .grid-row[_ngcontent-%COMP%] {\n        grid-template-columns: 2fr 90px 100px;\n    }\n\n    .col-expires[_ngcontent-%COMP%], \n   .col-scopes[_ngcontent-%COMP%] {\n        display: none;\n    }\n\n    .filter-tabs[_ngcontent-%COMP%] {\n        padding: 0 16px;\n    }\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIKeyListComponent, [{
         type: Component,
-        args: [{ selector: 'mj-api-key-list', template: "<div class=\"list-container\">\n    <!-- Header -->\n    <div class=\"list-header\">\n        <div class=\"header-left\">\n            <h3>API Keys</h3>\n            <span class=\"count-badge\">{{FilteredKeys.length}} of {{AllKeys.length}}</span>\n        </div>\n        <div class=\"header-right\">\n            <div class=\"search-box\">\n                <i class=\"fa-solid fa-search\"></i>\n                <input type=\"text\" [(ngModel)]=\"SearchText\"\n                       (ngModelChange)=\"onSearch()\"\n                       placeholder=\"Search keys...\" />\n                <button class=\"clear-search\" *ngIf=\"SearchText\" (click)=\"clearSearch()\">\n                    <i class=\"fa-solid fa-times\"></i>\n                </button>\n            </div>\n            <button class=\"create-btn\" (click)=\"requestCreate()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                Generate Key\n            </button>\n        </div>\n    </div>\n\n    <!-- Filter Tabs -->\n    <div class=\"filter-tabs\">\n        <button class=\"filter-tab\" [class.active]=\"Filter === 'all'\"\n                (click)=\"setFilter('all')\">\n            All\n            <span class=\"tab-count\">{{Stats.total}}</span>\n        </button>\n        <button class=\"filter-tab\" [class.active]=\"Filter === 'active'\"\n                (click)=\"setFilter('active')\">\n            <i class=\"fa-solid fa-check-circle status-active\"></i>\n            Active\n            <span class=\"tab-count\">{{Stats.active}}</span>\n        </button>\n        <button class=\"filter-tab\" [class.active]=\"Filter === 'expiring'\"\n                [class.has-warning]=\"Stats.expiring > 0\"\n                (click)=\"setFilter('expiring')\">\n            <i class=\"fa-solid fa-clock status-warning\"></i>\n            Expiring Soon\n            <span class=\"tab-count\">{{Stats.expiring}}</span>\n        </button>\n        <button class=\"filter-tab\" [class.active]=\"Filter === 'expired'\"\n                [class.has-danger]=\"Stats.expired > 0\"\n                (click)=\"setFilter('expired')\">\n            <i class=\"fa-solid fa-circle-exclamation status-danger\"></i>\n            Expired\n            <span class=\"tab-count\">{{Stats.expired}}</span>\n        </button>\n        <button class=\"filter-tab\" [class.active]=\"Filter === 'never-used'\"\n                (click)=\"setFilter('never-used')\">\n            <i class=\"fa-solid fa-question-circle status-info\"></i>\n            Never Used\n            <span class=\"tab-count\">{{Stats.neverUsed}}</span>\n        </button>\n        <button class=\"filter-tab\" [class.active]=\"Filter === 'revoked'\"\n                (click)=\"setFilter('revoked')\">\n            <i class=\"fa-solid fa-ban status-revoked\"></i>\n            Revoked\n            <span class=\"tab-count\">{{Stats.revoked}}</span>\n        </button>\n    </div>\n\n    <!-- Loading -->\n    <mj-loading *ngIf=\"IsLoading\" text=\"Loading API keys...\"></mj-loading>\n\n    <!-- Grid -->\n    <div class=\"key-grid\" *ngIf=\"!IsLoading\">\n        <!-- Header Row -->\n        <div class=\"grid-header\">\n            <div class=\"col-key sortable\" (click)=\"toggleSort('Label')\">\n                Key\n                <i [class]=\"getSortIcon('Label')\"></i>\n            </div>\n            <div class=\"col-owner sortable\" (click)=\"toggleSort('User')\">\n                Owner\n                <i [class]=\"getSortIcon('User')\"></i>\n            </div>\n            <div class=\"col-status sortable\" (click)=\"toggleSort('Status')\">\n                Status\n                <i [class]=\"getSortIcon('Status')\"></i>\n            </div>\n            <div class=\"col-scopes\">\n                Scopes\n            </div>\n            <div class=\"col-expires sortable\" (click)=\"toggleSort('ExpiresAt')\">\n                Expires\n                <i [class]=\"getSortIcon('ExpiresAt')\"></i>\n            </div>\n            <div class=\"col-used sortable\" (click)=\"toggleSort('LastUsedAt')\">\n                Last Used\n                <i [class]=\"getSortIcon('LastUsedAt')\"></i>\n            </div>\n            <div class=\"col-created sortable\" (click)=\"toggleSort('__mj_CreatedAt')\">\n                Created\n                <i [class]=\"getSortIcon('__mj_CreatedAt')\"></i>\n            </div>\n        </div>\n\n        <!-- Key Rows -->\n        <div class=\"grid-row\" *ngFor=\"let key of getPaginatedKeys()\"\n             (click)=\"selectKey(key)\">\n            <div class=\"col-key\">\n                <div class=\"key-icon\" [class.active]=\"key.Status === 'Active'\">\n                    <i class=\"fa-solid fa-key\"></i>\n                </div>\n                <div class=\"key-details\">\n                    <span class=\"key-label\">{{key.Label}}</span>\n                    <code class=\"key-hash\">...{{key.Hash.slice(-12)}}</code>\n                </div>\n            </div>\n            <div class=\"col-owner\">\n                <span class=\"owner-name\">{{key.User}}</span>\n            </div>\n            <div class=\"col-status\">\n                <span class=\"status-badge\" [class.active]=\"key.Status === 'Active'\"\n                      [class.revoked]=\"key.Status === 'Revoked'\">\n                    {{key.Status}}\n                </span>\n            </div>\n            <div class=\"col-scopes\">\n                <div class=\"scopes-display\" *ngIf=\"getScopeInfo(key).count > 0\">\n                    <div class=\"scope-badges\">\n                        <ng-container *ngFor=\"let cat of getScopeInfo(key).categories; let i = index\">\n                            <span class=\"scope-badge\" *ngIf=\"i < 3\"\n                                  [style.backgroundColor]=\"cat.color + '15'\"\n                                  [style.color]=\"cat.color\"\n                                  [title]=\"cat.category + ': ' + cat.count + ' scope(s)'\">\n                                <i [class]=\"cat.icon\"></i>\n                                <span class=\"badge-count\">{{cat.count}}</span>\n                            </span>\n                        </ng-container>\n                        <span class=\"scope-more\" *ngIf=\"getScopeInfo(key).categories.length > 3\">\n                            +{{getScopeInfo(key).categories.length - 3}}\n                        </span>\n                    </div>\n                    <span class=\"scopes-total\">\n                        {{getScopeInfo(key).count}} total\n                    </span>\n                </div>\n                <span class=\"no-scopes\" *ngIf=\"getScopeInfo(key).count === 0\">\n                    <i class=\"fa-solid fa-shield-xmark\"></i>\n                    None\n                </span>\n            </div>\n            <div class=\"col-expires\">\n                <span class=\"expires-value\" [ngClass]=\"getExpirationClass(key)\">\n                    {{formatExpiration(key.ExpiresAt)}}\n                </span>\n            </div>\n            <div class=\"col-used\">\n                <span class=\"used-value\" [class.never]=\"!key.LastUsedAt\">\n                    {{formatDate(key.LastUsedAt)}}\n                </span>\n            </div>\n            <div class=\"col-created\">\n                <span class=\"created-value\">{{formatDate(key.__mj_CreatedAt)}}</span>\n            </div>\n        </div>\n\n        <!-- Empty State -->\n        <div class=\"empty-state\" *ngIf=\"FilteredKeys.length === 0\">\n            <i class=\"fa-solid fa-key\"></i>\n            <span *ngIf=\"SearchText\">No keys matching \"{{SearchText}}\"</span>\n            <span *ngIf=\"!SearchText && Filter !== 'all'\">No {{Filter}} keys found</span>\n            <span *ngIf=\"!SearchText && Filter === 'all'\">No API keys created yet</span>\n            <button class=\"create-empty-btn\" *ngIf=\"Filter === 'all' && !SearchText\"\n                    (click)=\"requestCreate()\">\n                <i class=\"fa-solid fa-plus\"></i>\n                Generate Your First Key\n            </button>\n        </div>\n    </div>\n\n    <!-- Pagination -->\n    <div class=\"pagination\" *ngIf=\"!IsLoading && FilteredKeys.length > PageSize\">\n        <div class=\"page-info\">\n            Showing {{(CurrentPage - 1) * PageSize + 1}} - {{Math.min(CurrentPage * PageSize, FilteredKeys.length)}}\n            of {{FilteredKeys.length}}\n        </div>\n        <div class=\"page-buttons\">\n            <button class=\"page-btn\" [disabled]=\"CurrentPage === 1\"\n                    (click)=\"goToPage(CurrentPage - 1)\">\n                <i class=\"fa-solid fa-chevron-left\"></i>\n            </button>\n            <ng-container *ngFor=\"let page of getPageNumbers()\">\n                <button class=\"page-btn\" *ngIf=\"page > 0\"\n                        [class.active]=\"page === CurrentPage\"\n                        (click)=\"goToPage(page)\">\n                    {{page}}\n                </button>\n                <span class=\"page-ellipsis\" *ngIf=\"page === -1\">...</span>\n            </ng-container>\n            <button class=\"page-btn\" [disabled]=\"CurrentPage === getTotalPages()\"\n                    (click)=\"goToPage(CurrentPage + 1)\">\n                <i class=\"fa-solid fa-chevron-right\"></i>\n            </button>\n        </div>\n    </div>\n</div>\n", styles: [".list-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n/* Header */\n.list-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n}\n\n.header-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-left h3 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: #78350f;\n}\n\n.count-badge {\n    padding: 4px 12px;\n    background: rgba(255, 255, 255, 0.7);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #92400e;\n}\n\n.header-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n/* Search Box */\n.search-box {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box i {\n    position: absolute;\n    left: 12px;\n    color: #9ca3af;\n    font-size: 14px;\n}\n\n.search-box input {\n    width: 260px;\n    padding: 10px 36px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 14px;\n    transition: all 0.2s ease;\n}\n\n.search-box input:focus {\n    outline: none;\n    border-color: #f59e0b;\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n.clear-search {\n    position: absolute;\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #e5e7eb;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.clear-search:hover {\n    background: #d1d5db;\n}\n\n.clear-search i {\n    position: static;\n    font-size: 10px;\n    color: #6b7280;\n}\n\n/* Create Button */\n.create-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\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.create-btn:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n/* Filter Tabs */\n.filter-tabs {\n    display: flex;\n    gap: 4px;\n    padding: 0 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    overflow-x: auto;\n}\n\n.filter-tab {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 16px;\n    background: transparent;\n    border: none;\n    border-bottom: 2px solid transparent;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    white-space: nowrap;\n    transition: all 0.2s ease;\n}\n\n.filter-tab:hover {\n    color: #374151;\n    background: #f3f4f6;\n}\n\n.filter-tab.active {\n    color: #f59e0b;\n    border-bottom-color: #f59e0b;\n}\n\n.filter-tab.has-warning .tab-count {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.filter-tab.has-danger .tab-count {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.tab-count {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.status-active { color: #10b981; }\n.status-warning { color: #f59e0b; }\n.status-danger { color: #ef4444; }\n.status-info { color: #6b7280; }\n.status-revoked { color: #6b7280; }\n\n/* Key Grid */\n.key-grid {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.grid-header {\n    display: grid;\n    grid-template-columns: 2fr 1fr 90px 160px 100px 110px 100px;\n    gap: 12px;\n    padding: 14px 24px;\n    background: #f3f4f6;\n    border-bottom: 1px solid #e5e7eb;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    position: sticky;\n    top: 0;\n}\n\n.sortable {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color 0.2s ease;\n}\n\n.sortable:hover {\n    color: #374151;\n}\n\n.sortable i {\n    font-size: 10px;\n    opacity: 0.5;\n}\n\n/* Grid Rows */\n.grid-row {\n    display: grid;\n    grid-template-columns: 2fr 1fr 90px 160px 100px 110px 100px;\n    gap: 12px;\n    padding: 16px 24px;\n    border-bottom: 1px solid #f3f4f6;\n    cursor: pointer;\n    transition: background 0.2s ease;\n    align-items: center;\n}\n\n.grid-row:hover {\n    background: #fefce8;\n}\n\n.grid-row:last-child {\n    border-bottom: none;\n}\n\n/* Key Column */\n.col-key {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    min-width: 0;\n}\n\n.key-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);\n    border-radius: 8px;\n    flex-shrink: 0;\n}\n\n.key-icon.active {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n}\n\n.key-icon i {\n    font-size: 16px;\n    color: white;\n}\n\n.key-details {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n}\n\n.key-label {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-hash {\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 11px;\n    color: #6b7280;\n    background: #f3f4f6;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n/* Owner Column */\n.owner-name {\n    font-size: 14px;\n    color: #374151;\n}\n\n/* Status Column */\n.status-badge {\n    display: inline-block;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: capitalize;\n}\n\n.status-badge.active {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.status-badge.revoked {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n/* Scopes Column */\n.col-scopes {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n}\n\n.scopes-display {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.scope-badges {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-wrap: wrap;\n}\n\n.scope-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    cursor: default;\n    transition: transform 0.15s ease;\n}\n\n.scope-badge:hover {\n    transform: scale(1.05);\n}\n\n.scope-badge i {\n    font-size: 10px;\n}\n\n.badge-count {\n    font-weight: 700;\n}\n\n.scope-more {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 3px 6px;\n    background: #f3f4f6;\n    border-radius: 12px;\n    font-size: 10px;\n    font-weight: 600;\n    color: #6b7280;\n}\n\n.scopes-total {\n    font-size: 11px;\n    color: #9ca3af;\n}\n\n.no-scopes {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #d1d5db;\n}\n\n.no-scopes i {\n    font-size: 11px;\n}\n\n/* Expires Column */\n.expires-value {\n    font-size: 13px;\n}\n\n.expires-value.never {\n    color: #6b7280;\n}\n\n.expires-value.ok {\n    color: #059669;\n}\n\n.expires-value.warning {\n    color: #d97706;\n    font-weight: 500;\n}\n\n.expires-value.critical {\n    color: #dc2626;\n    font-weight: 600;\n}\n\n.expires-value.expired {\n    color: #dc2626;\n    font-weight: 600;\n}\n\n/* Used Column */\n.used-value {\n    font-size: 13px;\n    color: #374151;\n}\n\n.used-value.never {\n    color: #9ca3af;\n    font-style: italic;\n}\n\n/* Created Column */\n.created-value {\n    font-size: 13px;\n    color: #6b7280;\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: 64px 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.3;\n}\n\n.empty-state span {\n    font-size: 16px;\n    color: #374151;\n}\n\n.create-empty-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 20px;\n    padding: 12px 24px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\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.create-empty-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n/* Pagination */\n.pagination {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n}\n\n.page-info {\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.page-buttons {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.page-btn {\n    min-width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.page-btn:hover:not(:disabled) {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.page-btn.active {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.page-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.page-ellipsis {\n    padding: 0 8px;\n    color: #9ca3af;\n}\n\n/* Responsive */\n@media (max-width: 1200px) {\n    .grid-header,\n    .grid-row {\n        grid-template-columns: 2fr 1fr 90px 120px 100px;\n    }\n\n    .col-used,\n    .col-created {\n        display: none;\n    }\n}\n\n@media (max-width: 1024px) {\n    .grid-header,\n    .grid-row {\n        grid-template-columns: 2fr 90px 110px 100px;\n    }\n\n    .col-owner {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header {\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .header-right {\n        width: 100%;\n        justify-content: space-between;\n    }\n\n    .search-box input {\n        width: 180px;\n    }\n\n    .grid-header,\n    .grid-row {\n        grid-template-columns: 2fr 90px 100px;\n    }\n\n    .col-expires,\n    .col-scopes {\n        display: none;\n    }\n\n    .filter-tabs {\n        padding: 0 16px;\n    }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-api-key-list', template: "<div class=\"list-container\">\n  <!-- Header -->\n  <div class=\"list-header\">\n    <div class=\"header-left\">\n      <h3>API Keys</h3>\n      <span class=\"count-badge\">{{FilteredKeys.length}} of {{AllKeys.length}}</span>\n    </div>\n    <div class=\"header-right\">\n      <div class=\"search-box\">\n        <i class=\"fa-solid fa-search\"></i>\n        <input type=\"text\" [(ngModel)]=\"SearchText\"\n          (ngModelChange)=\"onSearch()\"\n          placeholder=\"Search keys...\" />\n        @if (SearchText) {\n          <button class=\"clear-search\" (click)=\"clearSearch()\">\n            <i class=\"fa-solid fa-times\"></i>\n          </button>\n        }\n      </div>\n      <button class=\"create-btn\" (click)=\"requestCreate()\">\n        <i class=\"fa-solid fa-plus\"></i>\n        Generate Key\n      </button>\n    </div>\n  </div>\n\n  <!-- Filter Tabs -->\n  <div class=\"filter-tabs\">\n    <button class=\"filter-tab\" [class.active]=\"Filter === 'all'\"\n      (click)=\"setFilter('all')\">\n      All\n      <span class=\"tab-count\">{{Stats.total}}</span>\n    </button>\n    <button class=\"filter-tab\" [class.active]=\"Filter === 'active'\"\n      (click)=\"setFilter('active')\">\n      <i class=\"fa-solid fa-check-circle status-active\"></i>\n      Active\n      <span class=\"tab-count\">{{Stats.active}}</span>\n    </button>\n    <button class=\"filter-tab\" [class.active]=\"Filter === 'expiring'\"\n      [class.has-warning]=\"Stats.expiring > 0\"\n      (click)=\"setFilter('expiring')\">\n      <i class=\"fa-solid fa-clock status-warning\"></i>\n      Expiring Soon\n      <span class=\"tab-count\">{{Stats.expiring}}</span>\n    </button>\n    <button class=\"filter-tab\" [class.active]=\"Filter === 'expired'\"\n      [class.has-danger]=\"Stats.expired > 0\"\n      (click)=\"setFilter('expired')\">\n      <i class=\"fa-solid fa-circle-exclamation status-danger\"></i>\n      Expired\n      <span class=\"tab-count\">{{Stats.expired}}</span>\n    </button>\n    <button class=\"filter-tab\" [class.active]=\"Filter === 'never-used'\"\n      (click)=\"setFilter('never-used')\">\n      <i class=\"fa-solid fa-question-circle status-info\"></i>\n      Never Used\n      <span class=\"tab-count\">{{Stats.neverUsed}}</span>\n    </button>\n    <button class=\"filter-tab\" [class.active]=\"Filter === 'revoked'\"\n      (click)=\"setFilter('revoked')\">\n      <i class=\"fa-solid fa-ban status-revoked\"></i>\n      Revoked\n      <span class=\"tab-count\">{{Stats.revoked}}</span>\n    </button>\n  </div>\n\n  <!-- Loading -->\n  @if (IsLoading) {\n    <mj-loading text=\"Loading API keys...\"></mj-loading>\n  }\n\n  <!-- Grid -->\n  @if (!IsLoading) {\n    <div class=\"key-grid\">\n      <!-- Header Row -->\n      <div class=\"grid-header\">\n        <div class=\"col-key sortable\" (click)=\"toggleSort('Label')\">\n          Key\n          <i [class]=\"getSortIcon('Label')\"></i>\n        </div>\n        <div class=\"col-owner sortable\" (click)=\"toggleSort('User')\">\n          Owner\n          <i [class]=\"getSortIcon('User')\"></i>\n        </div>\n        <div class=\"col-status sortable\" (click)=\"toggleSort('Status')\">\n          Status\n          <i [class]=\"getSortIcon('Status')\"></i>\n        </div>\n        <div class=\"col-scopes\">\n          Scopes\n        </div>\n        <div class=\"col-expires sortable\" (click)=\"toggleSort('ExpiresAt')\">\n          Expires\n          <i [class]=\"getSortIcon('ExpiresAt')\"></i>\n        </div>\n        <div class=\"col-used sortable\" (click)=\"toggleSort('LastUsedAt')\">\n          Last Used\n          <i [class]=\"getSortIcon('LastUsedAt')\"></i>\n        </div>\n        <div class=\"col-created sortable\" (click)=\"toggleSort('__mj_CreatedAt')\">\n          Created\n          <i [class]=\"getSortIcon('__mj_CreatedAt')\"></i>\n        </div>\n      </div>\n      <!-- Key Rows -->\n      @for (key of getPaginatedKeys(); track key) {\n        <div class=\"grid-row\"\n          (click)=\"selectKey(key)\">\n          <div class=\"col-key\">\n            <div class=\"key-icon\" [class.active]=\"key.Status === 'Active'\">\n              <i class=\"fa-solid fa-key\"></i>\n            </div>\n            <div class=\"key-details\">\n              <span class=\"key-label\">{{key.Label}}</span>\n              <code class=\"key-hash\">...{{key.Hash.slice(-12)}}</code>\n            </div>\n          </div>\n          <div class=\"col-owner\">\n            <span class=\"owner-name\">{{key.User}}</span>\n          </div>\n          <div class=\"col-status\">\n            <span class=\"status-badge\" [class.active]=\"key.Status === 'Active'\"\n              [class.revoked]=\"key.Status === 'Revoked'\">\n              {{key.Status}}\n            </span>\n          </div>\n          <div class=\"col-scopes\">\n            @if (getScopeInfo(key).count > 0) {\n              <div class=\"scopes-display\">\n                <div class=\"scope-badges\">\n                  @for (cat of getScopeInfo(key).categories; track cat; let i = $index) {\n                    @if (i < 3) {\n                      <span class=\"scope-badge\"\n                        [style.backgroundColor]=\"cat.color + '15'\"\n                        [style.color]=\"cat.color\"\n                        [title]=\"cat.category + ': ' + cat.count + ' scope(s)'\">\n                        <i [class]=\"cat.icon\"></i>\n                        <span class=\"badge-count\">{{cat.count}}</span>\n                      </span>\n                    }\n                  }\n                  @if (getScopeInfo(key).categories.length > 3) {\n                    <span class=\"scope-more\">\n                      +{{getScopeInfo(key).categories.length - 3}}\n                    </span>\n                  }\n                </div>\n                <span class=\"scopes-total\">\n                  {{getScopeInfo(key).count}} total\n                </span>\n              </div>\n            }\n            @if (getScopeInfo(key).count === 0) {\n              <span class=\"no-scopes\">\n                <i class=\"fa-solid fa-shield-xmark\"></i>\n                None\n              </span>\n            }\n          </div>\n          <div class=\"col-expires\">\n            <span class=\"expires-value\" [ngClass]=\"getExpirationClass(key)\">\n              {{formatExpiration(key.ExpiresAt)}}\n            </span>\n          </div>\n          <div class=\"col-used\">\n            <span class=\"used-value\" [class.never]=\"!key.LastUsedAt\">\n              {{formatDate(key.LastUsedAt)}}\n            </span>\n          </div>\n          <div class=\"col-created\">\n            <span class=\"created-value\">{{formatDate(key.__mj_CreatedAt)}}</span>\n          </div>\n        </div>\n      }\n      <!-- Empty State -->\n      @if (FilteredKeys.length === 0) {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-key\"></i>\n          @if (SearchText) {\n            <span>No keys matching \"{{SearchText}}\"</span>\n          }\n          @if (!SearchText && Filter !== 'all') {\n            <span>No {{Filter}} keys found</span>\n          }\n          @if (!SearchText && Filter === 'all') {\n            <span>No API keys created yet</span>\n          }\n          @if (Filter === 'all' && !SearchText) {\n            <button class=\"create-empty-btn\"\n              (click)=\"requestCreate()\">\n              <i class=\"fa-solid fa-plus\"></i>\n              Generate Your First Key\n            </button>\n          }\n        </div>\n      }\n    </div>\n  }\n\n  <!-- Pagination -->\n  @if (!IsLoading && FilteredKeys.length > PageSize) {\n    <div class=\"pagination\">\n      <div class=\"page-info\">\n        Showing {{(CurrentPage - 1) * PageSize + 1}} - {{Math.min(CurrentPage * PageSize, FilteredKeys.length)}}\n        of {{FilteredKeys.length}}\n      </div>\n      <div class=\"page-buttons\">\n        <button class=\"page-btn\" [disabled]=\"CurrentPage === 1\"\n          (click)=\"goToPage(CurrentPage - 1)\">\n          <i class=\"fa-solid fa-chevron-left\"></i>\n        </button>\n        @for (page of getPageNumbers(); track page) {\n          @if (page > 0) {\n            <button class=\"page-btn\"\n              [class.active]=\"page === CurrentPage\"\n              (click)=\"goToPage(page)\">\n              {{page}}\n            </button>\n          }\n          @if (page === -1) {\n            <span class=\"page-ellipsis\">...</span>\n          }\n        }\n        <button class=\"page-btn\" [disabled]=\"CurrentPage === getTotalPages()\"\n          (click)=\"goToPage(CurrentPage + 1)\">\n          <i class=\"fa-solid fa-chevron-right\"></i>\n        </button>\n      </div>\n    </div>\n  }\n</div>\n", styles: [".list-container {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    background: white;\n    border-radius: 12px;\n    overflow: hidden;\n    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n/* Header */\n.list-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);\n    border-bottom: 1px solid #fcd34d;\n}\n\n.header-left {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.header-left h3 {\n    margin: 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: #78350f;\n}\n\n.count-badge {\n    padding: 4px 12px;\n    background: rgba(255, 255, 255, 0.7);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: #92400e;\n}\n\n.header-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n/* Search Box */\n.search-box {\n    position: relative;\n    display: flex;\n    align-items: center;\n}\n\n.search-box i {\n    position: absolute;\n    left: 12px;\n    color: #9ca3af;\n    font-size: 14px;\n}\n\n.search-box input {\n    width: 260px;\n    padding: 10px 36px;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 8px;\n    font-size: 14px;\n    transition: all 0.2s ease;\n}\n\n.search-box input:focus {\n    outline: none;\n    border-color: #f59e0b;\n    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);\n}\n\n.clear-search {\n    position: absolute;\n    right: 8px;\n    width: 24px;\n    height: 24px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: #e5e7eb;\n    border: none;\n    border-radius: 50%;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.clear-search:hover {\n    background: #d1d5db;\n}\n\n.clear-search i {\n    position: static;\n    font-size: 10px;\n    color: #6b7280;\n}\n\n/* Create Button */\n.create-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\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.create-btn:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n/* Filter Tabs */\n.filter-tabs {\n    display: flex;\n    gap: 4px;\n    padding: 0 24px;\n    background: #f9fafb;\n    border-bottom: 1px solid #e5e7eb;\n    overflow-x: auto;\n}\n\n.filter-tab {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 14px 16px;\n    background: transparent;\n    border: none;\n    border-bottom: 2px solid transparent;\n    font-size: 13px;\n    font-weight: 500;\n    color: #6b7280;\n    cursor: pointer;\n    white-space: nowrap;\n    transition: all 0.2s ease;\n}\n\n.filter-tab:hover {\n    color: #374151;\n    background: #f3f4f6;\n}\n\n.filter-tab.active {\n    color: #f59e0b;\n    border-bottom-color: #f59e0b;\n}\n\n.filter-tab.has-warning .tab-count {\n    background: #fef3c7;\n    color: #d97706;\n}\n\n.filter-tab.has-danger .tab-count {\n    background: #fee2e2;\n    color: #dc2626;\n}\n\n.tab-count {\n    padding: 2px 8px;\n    background: #e5e7eb;\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 600;\n}\n\n.status-active { color: #10b981; }\n.status-warning { color: #f59e0b; }\n.status-danger { color: #ef4444; }\n.status-info { color: #6b7280; }\n.status-revoked { color: #6b7280; }\n\n/* Key Grid */\n.key-grid {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.grid-header {\n    display: grid;\n    grid-template-columns: 2fr 1fr 90px 160px 100px 110px 100px;\n    gap: 12px;\n    padding: 14px 24px;\n    background: #f3f4f6;\n    border-bottom: 1px solid #e5e7eb;\n    font-size: 11px;\n    font-weight: 600;\n    color: #6b7280;\n    text-transform: uppercase;\n    letter-spacing: 0.5px;\n    position: sticky;\n    top: 0;\n}\n\n.sortable {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    transition: color 0.2s ease;\n}\n\n.sortable:hover {\n    color: #374151;\n}\n\n.sortable i {\n    font-size: 10px;\n    opacity: 0.5;\n}\n\n/* Grid Rows */\n.grid-row {\n    display: grid;\n    grid-template-columns: 2fr 1fr 90px 160px 100px 110px 100px;\n    gap: 12px;\n    padding: 16px 24px;\n    border-bottom: 1px solid #f3f4f6;\n    cursor: pointer;\n    transition: background 0.2s ease;\n    align-items: center;\n}\n\n.grid-row:hover {\n    background: #fefce8;\n}\n\n.grid-row:last-child {\n    border-bottom: none;\n}\n\n/* Key Column */\n.col-key {\n    display: flex;\n    align-items: center;\n    gap: 14px;\n    min-width: 0;\n}\n\n.key-icon {\n    width: 40px;\n    height: 40px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: linear-gradient(135deg, #6b7280 0%, #4b5563 100%);\n    border-radius: 8px;\n    flex-shrink: 0;\n}\n\n.key-icon.active {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n}\n\n.key-icon i {\n    font-size: 16px;\n    color: white;\n}\n\n.key-details {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n}\n\n.key-label {\n    font-weight: 600;\n    font-size: 14px;\n    color: #1f2937;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n}\n\n.key-hash {\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 11px;\n    color: #6b7280;\n    background: #f3f4f6;\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n/* Owner Column */\n.owner-name {\n    font-size: 14px;\n    color: #374151;\n}\n\n/* Status Column */\n.status-badge {\n    display: inline-block;\n    padding: 4px 10px;\n    border-radius: 12px;\n    font-size: 12px;\n    font-weight: 600;\n    text-transform: capitalize;\n}\n\n.status-badge.active {\n    background: #d1fae5;\n    color: #059669;\n}\n\n.status-badge.revoked {\n    background: #f3f4f6;\n    color: #6b7280;\n}\n\n/* Scopes Column */\n.col-scopes {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n    min-width: 0;\n}\n\n.scopes-display {\n    display: flex;\n    flex-direction: column;\n    gap: 4px;\n}\n\n.scope-badges {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n    flex-wrap: wrap;\n}\n\n.scope-badge {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    padding: 3px 8px;\n    border-radius: 12px;\n    font-size: 11px;\n    font-weight: 600;\n    cursor: default;\n    transition: transform 0.15s ease;\n}\n\n.scope-badge:hover {\n    transform: scale(1.05);\n}\n\n.scope-badge i {\n    font-size: 10px;\n}\n\n.badge-count {\n    font-weight: 700;\n}\n\n.scope-more {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 3px 6px;\n    background: #f3f4f6;\n    border-radius: 12px;\n    font-size: 10px;\n    font-weight: 600;\n    color: #6b7280;\n}\n\n.scopes-total {\n    font-size: 11px;\n    color: #9ca3af;\n}\n\n.no-scopes {\n    display: inline-flex;\n    align-items: center;\n    gap: 4px;\n    font-size: 12px;\n    color: #d1d5db;\n}\n\n.no-scopes i {\n    font-size: 11px;\n}\n\n/* Expires Column */\n.expires-value {\n    font-size: 13px;\n}\n\n.expires-value.never {\n    color: #6b7280;\n}\n\n.expires-value.ok {\n    color: #059669;\n}\n\n.expires-value.warning {\n    color: #d97706;\n    font-weight: 500;\n}\n\n.expires-value.critical {\n    color: #dc2626;\n    font-weight: 600;\n}\n\n.expires-value.expired {\n    color: #dc2626;\n    font-weight: 600;\n}\n\n/* Used Column */\n.used-value {\n    font-size: 13px;\n    color: #374151;\n}\n\n.used-value.never {\n    color: #9ca3af;\n    font-style: italic;\n}\n\n/* Created Column */\n.created-value {\n    font-size: 13px;\n    color: #6b7280;\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: 64px 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.3;\n}\n\n.empty-state span {\n    font-size: 16px;\n    color: #374151;\n}\n\n.create-empty-btn {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    margin-top: 20px;\n    padding: 12px 24px;\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\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.create-empty-btn:hover {\n    transform: translateY(-2px);\n    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);\n}\n\n/* Pagination */\n.pagination {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 16px 24px;\n    background: #f9fafb;\n    border-top: 1px solid #e5e7eb;\n}\n\n.page-info {\n    font-size: 13px;\n    color: #6b7280;\n}\n\n.page-buttons {\n    display: flex;\n    align-items: center;\n    gap: 4px;\n}\n\n.page-btn {\n    min-width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: white;\n    border: 1px solid #e5e7eb;\n    border-radius: 6px;\n    font-size: 14px;\n    font-weight: 500;\n    color: #374151;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.page-btn:hover:not(:disabled) {\n    border-color: #f59e0b;\n    color: #f59e0b;\n}\n\n.page-btn.active {\n    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);\n    border-color: #f59e0b;\n    color: white;\n}\n\n.page-btn:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n}\n\n.page-ellipsis {\n    padding: 0 8px;\n    color: #9ca3af;\n}\n\n/* Responsive */\n@media (max-width: 1200px) {\n    .grid-header,\n    .grid-row {\n        grid-template-columns: 2fr 1fr 90px 120px 100px;\n    }\n\n    .col-used,\n    .col-created {\n        display: none;\n    }\n}\n\n@media (max-width: 1024px) {\n    .grid-header,\n    .grid-row {\n        grid-template-columns: 2fr 90px 110px 100px;\n    }\n\n    .col-owner {\n        display: none;\n    }\n}\n\n@media (max-width: 768px) {\n    .list-header {\n        flex-direction: column;\n        gap: 16px;\n    }\n\n    .header-right {\n        width: 100%;\n        justify-content: space-between;\n    }\n\n    .search-box input {\n        width: 180px;\n    }\n\n    .grid-header,\n    .grid-row {\n        grid-template-columns: 2fr 90px 100px;\n    }\n\n    .col-expires,\n    .col-scopes {\n        display: none;\n    }\n\n    .filter-tabs {\n        padding: 0 16px;\n    }\n}\n"] }]
     }], null, { Filter: [{
             type: Input
         }], KeySelected: [{
@@ -814,5 +813,5 @@ export class APIKeyListComponent {
         }], CreateRequested: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIKeyListComponent, { className: "APIKeyListComponent", filePath: "src/APIKeys/api-key-list.component.ts", lineNumber: 37 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIKeyListComponent, { className: "APIKeyListComponent", filePath: "src/APIKeys/api-key-list.component.ts", lineNumber: 32 }); })();
 //# sourceMappingURL=api-key-list.component.js.map