@memberjunction/ng-dashboards 5.22.0 → 5.24.0

package/dist/APIKeys/api-key-create-dialog.component.js

@@ -4,11 +4,9 @@ import { GraphQLEncryptionClient } from '@memberjunction/graphql-dataprovider';
 import { APIKeysEngineBase, parseAPIScopeUIConfig } from '@memberjunction/api-keys-base';
 import * as i0 from "@angular/core";
 import * as i1 from "@angular/forms";
-import * as i2 from "@progress/kendo-angular-buttons";
-import * as i3 from "@progress/kendo-angular-inputs";
-import * as i4 from "@progress/kendo-angular-dateinputs";
-import * as i5 from "@memberjunction/ng-shared-generic";
-import * as i6 from "@angular/common";
+import * as i2 from "@memberjunction/ng-ui-components";
+import * as i3 from "@memberjunction/ng-shared-generic";
+import * as i4 from "@angular/common";
 function APIKeyCreateDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 13);
@@ -69,14 +67,14 @@ function APIKeyCreateDialogComponent_Conditional_10_Conditional_19_Template(rf,
 } }
 function APIKeyCreateDialogComponent_Conditional_10_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 30)(1, "kendo-datepicker", 35);
-    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyCreateDialogComponent_Conditional_10_Conditional_20_Template_kendo_datepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.ExpiresAt, $event) || (ctx_r1.ExpiresAt = $event); return i0.ɵɵresetView($event); });
+    i0.ɵɵelementStart(0, "div", 30)(1, "mj-datepicker", 35);
+    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyCreateDialogComponent_Conditional_10_Conditional_20_Template_mj_datepicker_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r1.ExpiresAt, $event) || (ctx_r1.ExpiresAt = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext(2);
     i0.ɵɵadvance();
     i0.ɵɵtwoWayProperty("ngModel", ctx_r1.ExpiresAt);
-    i0.ɵɵproperty("min", ctx_r1.getMinDate());
+    i0.ɵɵproperty("Min", ctx_r1.getMinDate());
 } }
 function APIKeyCreateDialogComponent_Conditional_10_Conditional_21_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 31);
@@ -390,8 +388,6 @@ function APIKeyCreateDialogComponent_Conditional_14_Template(rf, ctx) { if (rf &
     i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_Conditional_14_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
     i0.ɵɵtext(4, "Cancel");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("themeColor", "primary");
 } }
 function APIKeyCreateDialogComponent_Conditional_15_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "mj-loading", 80);
@@ -418,7 +414,7 @@ function APIKeyCreateDialogComponent_Conditional_15_Template(rf, ctx) { if (rf &
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("themeColor", "primary")("disabled", ctx_r1.IsCreating);
+    i0.ɵɵproperty("disabled", ctx_r1.IsCreating);
     i0.ɵɵadvance();
     i0.ɵɵconditional(ctx_r1.IsCreating ? 1 : -1);
     i0.ɵɵadvance();
@@ -431,8 +427,6 @@ function APIKeyCreateDialogComponent_Conditional_16_Template(rf, ctx) { if (rf &
     i0.ɵɵelement(1, "i", 82);
     i0.ɵɵtext(2, " Done ");
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("themeColor", "primary");
 } }
 /**
  * Dialog for creating new API keys
@@ -702,7 +696,7 @@ export class APIKeyCreateDialogComponent {
     static ɵfac = function APIKeyCreateDialogComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || APIKeyCreateDialogComponent)(); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: APIKeyCreateDialogComponent, selectors: [["mj-api-key-create-dialog"]], hostBindings: function APIKeyCreateDialogComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.escape", function APIKeyCreateDialogComponent_keydown_escape_HostBindingHandler() { return ctx.onEscapeKey(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { Visible: "Visible" }, outputs: { VisibleChange: "VisibleChange", Created: "Created", Closed: "Closed" }, standalone: false, decls: 17, vars: 11, consts: [[1, "slideout-backdrop"], [1, "slideout-panel"], [1, "slideout-header"], [1, "slideout-title"], [1, "fa-solid", "fa-key"], ["title", "Close (Esc)", 1, "slideout-close"], [1, "step-indicator"], [1, "slideout-content"], [1, "step-panel"], [1, "step-panel", "scopes-step"], [1, "step-panel", "success-step"], [1, "slideout-footer"], ["kendoButton", "", 3, "themeColor"], [1, "slideout-backdrop", 3, "click"], ["title", "Close (Esc)", 1, "slideout-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "step"], [1, "step-number"], [1, "step-label"], [1, "step-connector"], [1, "form-section"], [1, "form-label", "required"], ["kendoTextBox", "", "placeholder", "e.g., ElevenLabs Integration, CI/CD Pipeline", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "form-hint"], [1, "form-label"], ["kendoTextArea", "", "placeholder", "Optional notes about how this key will be used...", 1, "form-textarea", 3, "ngModelChange", "ngModel", "rows"], [1, "expiration-options"], [1, "checkbox-label"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "change", "ngModel"], [1, "preset-buttons"], [1, "custom-date"], [1, "expiration-preview"], [1, "error-message"], [1, "preset-btn", 3, "active"], [1, "preset-btn", 3, "click"], ["format", "MMM d, yyyy", "placeholder", "Select expiration date", 3, "ngModelChange", "ngModel", "min"], [1, "fa-solid", "fa-calendar-check"], [1, "fa-solid", "fa-circle-exclamation"], [1, "scopes-header"], [1, "scopes-info"], [1, "scopes-count"], ["text", "Loading scopes..."], [1, "scope-categories"], [1, "scope-tip"], [1, "fa-solid", "fa-lightbulb"], [1, "no-scopes-warning"], [1, "count"], [1, "scope-category"], [1, "category-header", 3, "click"], [1, "category-left"], [1, "category-name"], [1, "category-badge"], [1, "category-right"], [1, "select-all-label", 3, "click"], ["type", "checkbox", "kendoCheckBox", "", 3, "change", "checked"], [1, "fa-solid"], [1, "category-scopes"], [1, "scope-item"], [1, "scope-label"], [1, "scope-info"], [1, "scope-name"], [1, "scope-desc"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "success-icon"], [1, "fa-solid", "fa-check-circle"], [1, "success-title"], [1, "key-display"], [1, "key-warning"], [1, "key-value"], [1, "copy-btn", 3, "click"], [1, "key-details"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "security-note"], [1, "fa-solid", "fa-shield-check"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-arrow-right"], ["kendoButton", "", 3, "click"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-arrow-left"], [1, "fa-solid", "fa-check"]], template: function APIKeyCreateDialogComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { Visible: "Visible" }, outputs: { VisibleChange: "VisibleChange", Created: "Created", Closed: "Closed" }, standalone: false, decls: 17, vars: 11, consts: [[1, "slideout-backdrop"], [1, "slideout-panel"], [1, "slideout-header"], [1, "slideout-title"], [1, "fa-solid", "fa-key"], ["title", "Close (Esc)", 1, "slideout-close"], [1, "step-indicator"], [1, "slideout-content"], [1, "step-panel"], [1, "step-panel", "scopes-step"], [1, "step-panel", "success-step"], [1, "slideout-footer"], ["mjButton", "", "variant", "primary"], [1, "slideout-backdrop", 3, "click"], ["title", "Close (Esc)", 1, "slideout-close", 3, "click"], [1, "fa-solid", "fa-times"], [1, "step"], [1, "step-number"], [1, "step-label"], [1, "step-connector"], [1, "form-section"], [1, "form-label", "required"], ["placeholder", "e.g., ElevenLabs Integration, CI/CD Pipeline", 1, "mj-input", "form-input", 3, "ngModelChange", "ngModel"], [1, "form-hint"], [1, "form-label"], ["placeholder", "Optional notes about how this key will be used...", 1, "mj-textarea", "form-textarea", 3, "ngModelChange", "ngModel", "rows"], [1, "expiration-options"], [1, "checkbox-label"], ["type", "checkbox", 1, "mj-checkbox", 3, "ngModelChange", "change", "ngModel"], [1, "preset-buttons"], [1, "custom-date"], [1, "expiration-preview"], [1, "error-message"], [1, "preset-btn", 3, "active"], [1, "preset-btn", 3, "click"], ["Format", "MMM d, yyyy", "Placeholder", "Select expiration date", 3, "ngModelChange", "ngModel", "Min"], [1, "fa-solid", "fa-calendar-check"], [1, "fa-solid", "fa-circle-exclamation"], [1, "scopes-header"], [1, "scopes-info"], [1, "scopes-count"], ["text", "Loading scopes..."], [1, "scope-categories"], [1, "scope-tip"], [1, "fa-solid", "fa-lightbulb"], [1, "no-scopes-warning"], [1, "count"], [1, "scope-category"], [1, "category-header", 3, "click"], [1, "category-left"], [1, "category-name"], [1, "category-badge"], [1, "category-right"], [1, "select-all-label", 3, "click"], ["type", "checkbox", 1, "mj-checkbox", 3, "change", "checked"], [1, "fa-solid"], [1, "category-scopes"], [1, "scope-item"], [1, "scope-label"], [1, "scope-info"], [1, "scope-name"], [1, "scope-desc"], [1, "fa-solid", "fa-triangle-exclamation"], [1, "success-icon"], [1, "fa-solid", "fa-check-circle"], [1, "success-title"], [1, "key-display"], [1, "key-warning"], [1, "key-value"], [1, "copy-btn", 3, "click"], [1, "key-details"], [1, "detail-row"], [1, "detail-label"], [1, "detail-value"], [1, "security-note"], [1, "fa-solid", "fa-shield-check"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-arrow-right"], ["mjButton", "", 3, "click"], ["mjButton", "", "variant", "primary", 3, "click", "disabled"], ["size", "small", 3, "showText"], [1, "fa-solid", "fa-arrow-left"], [1, "fa-solid", "fa-check"]], template: function APIKeyCreateDialogComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵconditionalCreate(0, APIKeyCreateDialogComponent_Conditional_0_Template, 1, 0, "div", 0);
             i0.ɵɵelementStart(1, "div", 1)(2, "div", 2)(3, "div", 3);
             i0.ɵɵelement(4, "i", 4);
@@ -718,9 +712,9 @@ export class APIKeyCreateDialogComponent {
             i0.ɵɵconditionalCreate(12, APIKeyCreateDialogComponent_Conditional_12_Template, 41, 15, "div", 10);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(13, "div", 11);
-            i0.ɵɵconditionalCreate(14, APIKeyCreateDialogComponent_Conditional_14_Template, 5, 1);
-            i0.ɵɵconditionalCreate(15, APIKeyCreateDialogComponent_Conditional_15_Template, 6, 4);
-            i0.ɵɵconditionalCreate(16, APIKeyCreateDialogComponent_Conditional_16_Template, 3, 1, "button", 12);
+            i0.ɵɵconditionalCreate(14, APIKeyCreateDialogComponent_Conditional_14_Template, 5, 0);
+            i0.ɵɵconditionalCreate(15, APIKeyCreateDialogComponent_Conditional_15_Template, 6, 3);
+            i0.ɵɵconditionalCreate(16, APIKeyCreateDialogComponent_Conditional_16_Template, 3, 0, "button", 12);
             i0.ɵɵelementEnd()();
         } if (rf & 2) {
             i0.ɵɵconditional(ctx.Visible ? 0 : -1);
@@ -742,11 +736,11 @@ export class APIKeyCreateDialogComponent {
             i0.ɵɵconditional(ctx.Step === "scopes" ? 15 : -1);
             i0.ɵɵadvance();
             i0.ɵɵconditional(ctx.Step === "success" ? 16 : -1);
-        } }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.ButtonComponent, i3.TextBoxDirective, i3.TextAreaDirective, i3.CheckBoxDirective, i4.DatePickerComponent, i5.LoadingComponent, i6.DatePipe], styles: ["\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 100;\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 520px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--mj-bg-surface);\n    box-shadow: -8px 0 32px var(--mj-bg-overlay);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: var(--mj-text-primary);\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-secondary);\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.step-panel[_ngcontent-%COMP%] {\n    padding: 24px;\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: var(--mj-bg-page);\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button-solid-primary {\n    background: var(--mj-brand-primary);\n    border: none;\n    box-shadow: var(--mj-shadow-brand-sm);\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-brand-md);\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button i {\n    margin: 0 5px;\n}\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n    border-bottom: 1px solid var(--mj-color-accent-300);\n}\n\n.step[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n}\n\n.step-number[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface);\n    border: 2px solid var(--mj-color-neutral-300);\n    border-radius: 50%;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%]   .step-number[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.step.completed[_ngcontent-%COMP%]   .step-number[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n    border-color: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.step-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.step.active[_ngcontent-%COMP%]   .step-label[_ngcontent-%COMP%] {\n    color: var(--mj-color-brand-800);\n    font-weight: 600;\n}\n\n.step-connector[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 2px;\n    background: var(--mj-color-neutral-300);\n    margin: 0 16px;\n    margin-bottom: 20px;\n    transition: background 0.2s ease;\n}\n\n.step-connector.active[_ngcontent-%COMP%] {\n    background: linear-gradient(90deg, var(--mj-status-success), var(--mj-brand-primary));\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 24px;\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.scopes-content[_ngcontent-%COMP%] {\n    max-height: 450px;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n    display: block;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.form-label.required[_ngcontent-%COMP%]::after {\n    content: ' *';\n    color: var(--mj-status-error);\n}\n\n.form-input[_ngcontent-%COMP%], \n.form-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.form-hint[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 6px;\n}\n\n\n\n.expiration-options[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n}\n\n.preset-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.preset-btn[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.preset-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-color-brand-50);\n}\n\n.preset-btn.active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.custom-date[_ngcontent-%COMP%] {\n    margin-top: 4px;\n}\n\n.expiration-preview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    background: var(--mj-color-success-50);\n    border-radius: 8px;\n    font-size: 13px;\n    color: var(--mj-color-success-600);\n}\n\n.expiration-preview[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n\n\n.error-message[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-color-error-50);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 8px;\n    color: var(--mj-color-error-600);\n    font-size: 14px;\n}\n\n\n\n.scopes-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 20px;\n}\n\n.scopes-info[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 4px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.scopes-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.scopes-count[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: var(--mj-brand-primary);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-inverse);\n}\n\n.scopes-count[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n    font-weight: 700;\n}\n\n\n\n.scope-categories[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category[_ngcontent-%COMP%] {\n    background: var(--mj-bg-page);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.category-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.category-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.category-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.select-all-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n}\n\n.category-right[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 12px;\n}\n\n.category-scopes[_ngcontent-%COMP%] {\n    padding: 8px 16px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n}\n\n.scope-item[_ngcontent-%COMP%] {\n    padding: 10px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.scope-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    font-family: monospace;\n}\n\n.scope-desc[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.scope-tip[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    background: var(--mj-status-info-bg);\n    border-radius: 8px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: var(--mj-status-info-text);\n}\n\n.scope-tip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-info);\n}\n\n.scope-tip[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-color-info-100);\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-family: monospace;\n}\n\n\n\n.no-scopes-warning[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 16px;\n    background: linear-gradient(135deg, var(--mj-color-error-50) 0%, var(--mj-color-error-100) 100%);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 10px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: var(--mj-status-error);\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-color-error-600);\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    color: var(--mj-status-error);\n    font-size: 14px;\n    margin-bottom: 4px;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    line-height: 1.5;\n}\n\n\n\n.success-content[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.success-icon[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.success-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 64px;\n    color: var(--mj-status-success);\n}\n\n.success-title[_ngcontent-%COMP%] {\n    margin: 0 0 24px 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n\n\n.key-display[_ngcontent-%COMP%] {\n    background: var(--mj-color-neutral-800);\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 24px;\n}\n\n.key-warning[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-color-accent-300);\n}\n\n.key-value[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    padding: 12px 16px;\n}\n\n.key-value[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    flex: 1;\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 14px;\n    color: var(--mj-status-success);\n    word-break: break-all;\n    text-align: left;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: var(--mj-color-neutral-600);\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-inverse);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-text-secondary);\n}\n\n.copy-btn.copied[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n\n\n.key-details[_ngcontent-%COMP%] {\n    text-align: left;\n    background: var(--mj-bg-page);\n    border-radius: 10px;\n    padding: 16px 20px;\n    margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n\n\n.security-note[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    text-align: left;\n    padding: 16px;\n    background: linear-gradient(135deg, var(--mj-color-success-50) 0%, var(--mj-color-success-100) 100%);\n    border-radius: 10px;\n    font-size: 13px;\n    color: var(--mj-color-success-800);\n}\n\n.security-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-status-success);\n    margin-top: 2px;\n}\n\n.security-note[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n}\n\n\n\n[_nghost-%COMP%]     .form-input .k-input, \n[_nghost-%COMP%]     .form-textarea .k-input-inner, \n[_nghost-%COMP%]     .k-datepicker .k-input {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: var(--mj-border-default);\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .form-input:focus-within, \n[_nghost-%COMP%]     .form-textarea:focus-within, \n[_nghost-%COMP%]     .k-datepicker:focus-within {\n    box-shadow: var(--mj-focus-ring);\n}"] });
+        } }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.MJButtonDirective, i2.MJDatepickerComponent, i3.LoadingComponent, i4.DatePipe], styles: ["\n\n\n\n\n\n\n.slideout-backdrop[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 100;\n    animation: _ngcontent-%COMP%_fadeIn 0.2s ease;\n}\n\n@keyframes _ngcontent-%COMP%_fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n\n\n.slideout-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 520px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--mj-bg-surface);\n    box-shadow: -8px 0 32px var(--mj-bg-overlay);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open[_ngcontent-%COMP%] {\n    transform: translateX(0);\n}\n\n\n\n.slideout-header[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: var(--mj-text-primary);\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-brand-primary);\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%] {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-secondary);\n}\n\n\n\n.slideout-content[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.step-panel[_ngcontent-%COMP%] {\n    padding: 24px;\n}\n\n\n\n.slideout-footer[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: var(--mj-bg-page);\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button-solid-primary {\n    background: var(--mj-brand-primary);\n    border: none;\n    box-shadow: var(--mj-shadow-brand-sm);\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-brand-md);\n}\n\n[_nghost-%COMP%]     .slideout-footer .k-button i {\n    margin: 0 5px;\n}\n\n\n\n.step-indicator[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n    border-bottom: 1px solid var(--mj-color-accent-300);\n}\n\n.step[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n}\n\n.step-number[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface);\n    border: 2px solid var(--mj-color-neutral-300);\n    border-radius: 50%;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.step.active[_ngcontent-%COMP%]   .step-number[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.step.completed[_ngcontent-%COMP%]   .step-number[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n    border-color: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.step-label[_ngcontent-%COMP%] {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.step.active[_ngcontent-%COMP%]   .step-label[_ngcontent-%COMP%] {\n    color: var(--mj-color-brand-800);\n    font-weight: 600;\n}\n\n.step-connector[_ngcontent-%COMP%] {\n    width: 80px;\n    height: 2px;\n    background: var(--mj-color-neutral-300);\n    margin: 0 16px;\n    margin-bottom: 20px;\n    transition: background 0.2s ease;\n}\n\n.step-connector.active[_ngcontent-%COMP%] {\n    background: linear-gradient(90deg, var(--mj-status-success), var(--mj-brand-primary));\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 24px;\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.scopes-content[_ngcontent-%COMP%] {\n    max-height: 450px;\n}\n\n\n\n.form-section[_ngcontent-%COMP%] {\n    margin-bottom: 24px;\n}\n\n.form-label[_ngcontent-%COMP%] {\n    display: block;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.form-label.required[_ngcontent-%COMP%]::after {\n    content: ' *';\n    color: var(--mj-status-error);\n}\n\n.form-input[_ngcontent-%COMP%], \n.form-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.form-hint[_ngcontent-%COMP%] {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 6px;\n}\n\n\n\n.expiration-options[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n}\n\n.preset-buttons[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.preset-btn[_ngcontent-%COMP%] {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.preset-btn[_ngcontent-%COMP%]:hover {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-color-brand-50);\n}\n\n.preset-btn.active[_ngcontent-%COMP%] {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.custom-date[_ngcontent-%COMP%] {\n    margin-top: 4px;\n}\n\n.expiration-preview[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    background: var(--mj-color-success-50);\n    border-radius: 8px;\n    font-size: 13px;\n    color: var(--mj-color-success-600);\n}\n\n.expiration-preview[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n\n\n.error-message[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-color-error-50);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 8px;\n    color: var(--mj-color-error-600);\n    font-size: 14px;\n}\n\n\n\n.scopes-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 20px;\n}\n\n.scopes-info[_ngcontent-%COMP%]   h4[_ngcontent-%COMP%] {\n    margin: 0 0 4px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.scopes-info[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.scopes-count[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: var(--mj-brand-primary);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-inverse);\n}\n\n.scopes-count[_ngcontent-%COMP%]   .count[_ngcontent-%COMP%] {\n    font-weight: 700;\n}\n\n\n\n.scope-categories[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category[_ngcontent-%COMP%] {\n    background: var(--mj-bg-page);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.category-left[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n.category-name[_ngcontent-%COMP%] {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.category-badge[_ngcontent-%COMP%] {\n    padding: 2px 8px;\n    background: var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.category-right[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.select-all-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n}\n\n.category-right[_ngcontent-%COMP%]    > i[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    font-size: 12px;\n}\n\n.category-scopes[_ngcontent-%COMP%] {\n    padding: 8px 16px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n}\n\n.scope-item[_ngcontent-%COMP%] {\n    padding: 10px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.scope-item[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.scope-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    font-family: monospace;\n}\n\n.scope-desc[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.scope-tip[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    background: var(--mj-status-info-bg);\n    border-radius: 8px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: var(--mj-status-info-text);\n}\n\n.scope-tip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-info);\n}\n\n.scope-tip[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    background: var(--mj-color-info-100);\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-family: monospace;\n}\n\n\n\n.no-scopes-warning[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 16px;\n    background: linear-gradient(135deg, var(--mj-color-error-50) 0%, var(--mj-color-error-100) 100%);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 10px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: var(--mj-status-error);\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-color-error-600);\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    color: var(--mj-status-error);\n    font-size: 14px;\n    margin-bottom: 4px;\n}\n\n.no-scopes-warning[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    margin: 0;\n    line-height: 1.5;\n}\n\n\n\n.success-content[_ngcontent-%COMP%] {\n    text-align: center;\n}\n\n.success-icon[_ngcontent-%COMP%] {\n    margin-bottom: 16px;\n}\n\n.success-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 64px;\n    color: var(--mj-status-success);\n}\n\n.success-title[_ngcontent-%COMP%] {\n    margin: 0 0 24px 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n\n\n.key-display[_ngcontent-%COMP%] {\n    background: var(--mj-color-neutral-800);\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 24px;\n}\n\n.key-warning[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-color-accent-300);\n}\n\n.key-value[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    padding: 12px 16px;\n}\n\n.key-value[_ngcontent-%COMP%]   code[_ngcontent-%COMP%] {\n    flex: 1;\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 14px;\n    color: var(--mj-status-success);\n    word-break: break-all;\n    text-align: left;\n}\n\n.copy-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: var(--mj-color-neutral-600);\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-inverse);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.copy-btn[_ngcontent-%COMP%]:hover {\n    background: var(--mj-text-secondary);\n}\n\n.copy-btn.copied[_ngcontent-%COMP%] {\n    background: var(--mj-status-success);\n}\n\n\n\n.key-details[_ngcontent-%COMP%] {\n    text-align: left;\n    background: var(--mj-bg-page);\n    border-radius: 10px;\n    padding: 16px 20px;\n    margin-bottom: 20px;\n}\n\n.detail-row[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-row[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.detail-label[_ngcontent-%COMP%] {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.detail-value[_ngcontent-%COMP%] {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n\n\n.security-note[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    text-align: left;\n    padding: 16px;\n    background: linear-gradient(135deg, var(--mj-color-success-50) 0%, var(--mj-color-success-100) 100%);\n    border-radius: 10px;\n    font-size: 13px;\n    color: var(--mj-color-success-800);\n}\n\n.security-note[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 20px;\n    color: var(--mj-status-success);\n    margin-top: 2px;\n}\n\n.security-note[_ngcontent-%COMP%]   strong[_ngcontent-%COMP%] {\n    display: block;\n    margin-bottom: 4px;\n}\n\n\n\n[_nghost-%COMP%]     .form-input .k-input, \n[_nghost-%COMP%]     .form-textarea .k-input-inner, \n[_nghost-%COMP%]     .k-datepicker .k-input {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: var(--mj-border-default);\n    transition: all 0.2s ease;\n}\n\n[_nghost-%COMP%]     .form-input:focus-within, \n[_nghost-%COMP%]     .form-textarea:focus-within, \n[_nghost-%COMP%]     .k-datepicker:focus-within {\n    box-shadow: var(--mj-focus-ring);\n}"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIKeyCreateDialogComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-api-key-create-dialog', template: "<!-- Slide-out Backdrop -->\n@if (Visible) {\n  <div class=\"slideout-backdrop\" (click)=\"Step !== 'success' ? close() : null\"></div>\n}\n\n<!-- Slide-out Panel -->\n<div class=\"slideout-panel\" [class.open]=\"Visible\">\n  <!-- Header -->\n  <div class=\"slideout-header\">\n    <div class=\"slideout-title\">\n      <i class=\"fa-solid fa-key\"></i>\n      <span>Generate New API Key</span>\n    </div>\n    @if (Step !== 'success') {\n      <button class=\"slideout-close\" (click)=\"close()\" title=\"Close (Esc)\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    }\n  </div>\n\n  <!-- Step Indicator -->\n  @if (Step !== 'success') {\n    <div class=\"step-indicator\">\n      <div class=\"step\" [class.active]=\"Step === 'configure'\" [class.completed]=\"Step === 'scopes'\">\n        <div class=\"step-number\">1</div>\n        <div class=\"step-label\">Configure</div>\n      </div>\n      <div class=\"step-connector\" [class.active]=\"Step === 'scopes'\"></div>\n      <div class=\"step\" [class.active]=\"Step === 'scopes'\">\n        <div class=\"step-number\">2</div>\n        <div class=\"step-label\">Permissions</div>\n      </div>\n    </div>\n  }\n\n  <div class=\"slideout-content\">\n    <!-- Configure Step -->\n    @if (Step === 'configure') {\n      <div class=\"step-panel\">\n        <div class=\"form-section\">\n          <label class=\"form-label required\">Key Label</label>\n          <input kendoTextBox [(ngModel)]=\"Label\"\n            placeholder=\"e.g., ElevenLabs Integration, CI/CD Pipeline\"\n            class=\"form-input\" />\n          <div class=\"form-hint\">A memorable name to identify this key's purpose</div>\n        </div>\n        <div class=\"form-section\">\n          <label class=\"form-label\">Description</label>\n          <textarea kendoTextArea [(ngModel)]=\"Description\"\n            placeholder=\"Optional notes about how this key will be used...\"\n            [rows]=\"3\"\n          class=\"form-textarea\"></textarea>\n        </div>\n        <div class=\"form-section\">\n          <label class=\"form-label\">Expiration</label>\n          <div class=\"expiration-options\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" kendoCheckBox\n                [(ngModel)]=\"NeverExpires\"\n                (change)=\"onNeverExpiresChange()\" />\n              <span>Never expires</span>\n            </label>\n            @if (!NeverExpires) {\n              <div class=\"preset-buttons\">\n                @for (preset of ExpirationPresets; track preset) {\n                  <button\n                    class=\"preset-btn\"\n                    [class.active]=\"SelectedPreset === preset\"\n                    (click)=\"onPresetSelect(preset)\">\n                    {{preset.label}}\n                  </button>\n                }\n              </div>\n            }\n            @if (!NeverExpires && SelectedPreset?.days === -1) {\n              <div class=\"custom-date\">\n                <kendo-datepicker [(ngModel)]=\"ExpiresAt\"\n                  [min]=\"getMinDate()\"\n                  format=\"MMM d, yyyy\"\n                  placeholder=\"Select expiration date\">\n                </kendo-datepicker>\n              </div>\n            }\n            @if (!NeverExpires && ExpiresAt) {\n              <div class=\"expiration-preview\">\n                <i class=\"fa-solid fa-calendar-check\"></i>\n                <span>Key will expire on {{ExpiresAt | date:'MMMM d, yyyy'}}</span>\n              </div>\n            }\n          </div>\n        </div>\n        @if (Error) {\n          <div class=\"error-message\">\n            <i class=\"fa-solid fa-circle-exclamation\"></i>\n            {{Error}}\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Scopes Step -->\n    @if (Step === 'scopes') {\n      <div class=\"step-panel scopes-step\">\n        <div class=\"scopes-header\">\n          <div class=\"scopes-info\">\n            <h4>Select Permission Scopes</h4>\n            <p>Choose what this API key can access. You can always modify this later.</p>\n          </div>\n          @if (getSelectedScopeCount() > 0) {\n            <div class=\"scopes-count\">\n              <span class=\"count\">{{getSelectedScopeCount()}}</span> selected\n            </div>\n          }\n        </div>\n        @if (IsLoadingScopes) {\n          <mj-loading text=\"Loading scopes...\"></mj-loading>\n        }\n        @if (!IsLoadingScopes) {\n          <div class=\"scope-categories\">\n            @for (category of ScopeCategories; track category) {\n              <div class=\"scope-category\">\n                <div class=\"category-header\" (click)=\"toggleCategory(category)\">\n                  <div class=\"category-left\">\n                    <i [class]=\"category.icon\" [style.color]=\"category.color\"></i>\n                    <span class=\"category-name\">{{category.name}}</span>\n                    <span class=\"category-badge\">{{category.scopes.length}}</span>\n                  </div>\n                  <div class=\"category-right\">\n                    <label class=\"select-all-label\" (click)=\"$event.stopPropagation()\">\n                      <input type=\"checkbox\" kendoCheckBox\n                        [checked]=\"category.allSelected\"\n                        (change)=\"toggleCategoryAll(category)\" />\n                      <span>All</span>\n                    </label>\n                    <i class=\"fa-solid\" [class.fa-chevron-down]=\"!category.expanded\"\n                    [class.fa-chevron-up]=\"category.expanded\"></i>\n                  </div>\n                </div>\n                @if (category.expanded) {\n                  <div class=\"category-scopes\">\n                    @for (item of category.scopes; track item) {\n                      <div class=\"scope-item\">\n                        <label class=\"scope-label\">\n                          <input type=\"checkbox\" kendoCheckBox\n                            [(ngModel)]=\"item.selected\"\n                            (change)=\"updateCategoryState(category)\" />\n                          <div class=\"scope-info\">\n                            <span class=\"scope-name\">{{item.scope.Name}}</span>\n                            @if (item.scope.Description) {\n                              <span class=\"scope-desc\">\n                                {{item.scope.Description}}\n                              </span>\n                            }\n                          </div>\n                        </label>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        <div class=\"scope-tip\">\n          <i class=\"fa-solid fa-lightbulb\"></i>\n          <span>Tip: Use wildcards like <code>entities:*</code> for broad access within a category</span>\n        </div>\n        <!-- No Scopes Warning -->\n        @if (!IsLoadingScopes && getSelectedScopeCount() === 0) {\n          <div class=\"no-scopes-warning\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <div>\n              <strong>Warning: No permissions selected</strong>\n              <p>API keys without any assigned scopes will have <strong>no permissions</strong> and cannot perform any operations. This key will be rejected by all API endpoints until scopes are assigned.</p>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Success Step -->\n    @if (Step === 'success') {\n      <div class=\"step-panel success-step\">\n        <div class=\"success-icon\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n        </div>\n        <h3 class=\"success-title\">API Key Created Successfully!</h3>\n        <div class=\"key-display\">\n          <div class=\"key-warning\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <span>Copy this key now. It won't be shown again!</span>\n          </div>\n          <div class=\"key-value\">\n            <code>{{RawApiKey}}</code>\n            <button class=\"copy-btn\" (click)=\"copyKey()\" [class.copied]=\"KeyCopied\">\n              <i class=\"fa-solid\" [class.fa-copy]=\"!KeyCopied\" [class.fa-check]=\"KeyCopied\"></i>\n              <span>{{KeyCopied ? 'Copied!' : 'Copy'}}</span>\n            </button>\n          </div>\n        </div>\n        <div class=\"key-details\">\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Label:</span>\n            <span class=\"detail-value\">{{Label}}</span>\n          </div>\n          @if (Description) {\n            <div class=\"detail-row\">\n              <span class=\"detail-label\">Description:</span>\n              <span class=\"detail-value\">{{Description}}</span>\n            </div>\n          }\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Expires:</span>\n            <span class=\"detail-value\">\n              {{NeverExpires ? 'Never' : (ExpiresAt | date:'MMMM d, yyyy')}}\n            </span>\n          </div>\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Scopes:</span>\n            <span class=\"detail-value\">{{getSelectedScopeCount()}} permissions</span>\n          </div>\n        </div>\n        <div class=\"security-note\">\n          <i class=\"fa-solid fa-shield-check\"></i>\n          <div>\n            <strong>Security Note:</strong>\n            Store this key securely. We only store a hash - the original key cannot be recovered.\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"slideout-footer\">\n    @if (Step === 'configure') {\n      <button kendoButton [themeColor]=\"'primary'\" (click)=\"goToScopes()\">\n        Next: Permissions\n        <i class=\"fa-solid fa-arrow-right\"></i>\n      </button>\n      <button kendoButton (click)=\"close()\">Cancel</button>\n    }\n\n    @if (Step === 'scopes') {\n      <button kendoButton [themeColor]=\"'primary'\"\n        [disabled]=\"IsCreating\"\n        (click)=\"createKey()\">\n        @if (IsCreating) {\n          <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n        }\n        @if (!IsCreating) {\n          <span>\n            <i class=\"fa-solid fa-key\"></i>\n            Generate Key\n          </span>\n        }\n      </button>\n      <button kendoButton (click)=\"goBack()\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n        Back\n      </button>\n    }\n\n    @if (Step === 'success') {\n      <button kendoButton [themeColor]=\"'primary'\" (click)=\"close()\">\n        <i class=\"fa-solid fa-check\"></i>\n        Done\n      </button>\n    }\n  </div>\n</div>\n", styles: ["/* ========================================\n   Slide-out Panel Styles\n   ======================================== */\n\n/* Backdrop */\n.slideout-backdrop {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 100;\n    animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n/* Slide-out Panel */\n.slideout-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 520px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--mj-bg-surface);\n    box-shadow: -8px 0 32px var(--mj-bg-overlay);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open {\n    transform: translateX(0);\n}\n\n/* Panel Header */\n.slideout-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.slideout-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: var(--mj-text-primary);\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title i {\n    color: var(--mj-brand-primary);\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.slideout-close {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-secondary);\n}\n\n/* Panel Content */\n.slideout-content {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.step-panel {\n    padding: 24px;\n}\n\n/* Panel Footer */\n.slideout-footer {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: var(--mj-bg-page);\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n:host ::ng-deep .slideout-footer .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .slideout-footer .k-button-solid-primary {\n    background: var(--mj-brand-primary);\n    border: none;\n    box-shadow: var(--mj-shadow-brand-sm);\n}\n\n:host ::ng-deep .slideout-footer .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-brand-md);\n}\n\n:host ::ng-deep .slideout-footer .k-button i {\n    margin: 0 5px;\n}\n\n/* Step Indicator */\n.step-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n    border-bottom: 1px solid var(--mj-color-accent-300);\n}\n\n.step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n}\n\n.step-number {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface);\n    border: 2px solid var(--mj-color-neutral-300);\n    border-radius: 50%;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.step.active .step-number {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.step.completed .step-number {\n    background: var(--mj-status-success);\n    border-color: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.step-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.step.active .step-label {\n    color: var(--mj-color-brand-800);\n    font-weight: 600;\n}\n\n.step-connector {\n    width: 80px;\n    height: 2px;\n    background: var(--mj-color-neutral-300);\n    margin: 0 16px;\n    margin-bottom: 20px;\n    transition: background 0.2s ease;\n}\n\n.step-connector.active {\n    background: linear-gradient(90deg, var(--mj-status-success), var(--mj-brand-primary));\n}\n\n/* Dialog Content */\n.dialog-content {\n    padding: 24px;\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.scopes-content {\n    max-height: 450px;\n}\n\n/* Form Sections */\n.form-section {\n    margin-bottom: 24px;\n}\n\n.form-label {\n    display: block;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.form-label.required::after {\n    content: ' *';\n    color: var(--mj-status-error);\n}\n\n.form-input,\n.form-textarea {\n    width: 100%;\n}\n\n.form-hint {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 6px;\n}\n\n/* Expiration Options */\n.expiration-options {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n}\n\n.preset-buttons {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.preset-btn {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.preset-btn:hover {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-color-brand-50);\n}\n\n.preset-btn.active {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.custom-date {\n    margin-top: 4px;\n}\n\n.expiration-preview {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    background: var(--mj-color-success-50);\n    border-radius: 8px;\n    font-size: 13px;\n    color: var(--mj-color-success-600);\n}\n\n.expiration-preview i {\n    color: var(--mj-status-success);\n}\n\n/* Error Message */\n.error-message {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-color-error-50);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 8px;\n    color: var(--mj-color-error-600);\n    font-size: 14px;\n}\n\n/* Scopes */\n.scopes-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 20px;\n}\n\n.scopes-info h4 {\n    margin: 0 0 4px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.scopes-info p {\n    margin: 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.scopes-count {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: var(--mj-brand-primary);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-inverse);\n}\n\n.scopes-count .count {\n    font-weight: 700;\n}\n\n/* Scope Categories */\n.scope-categories {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category {\n    background: var(--mj-bg-page);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.category-left {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left i {\n    font-size: 16px;\n}\n\n.category-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.category-badge {\n    padding: 2px 8px;\n    background: var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.category-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.select-all-label {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n}\n\n.category-right > i {\n    color: var(--mj-text-muted);\n    font-size: 12px;\n}\n\n.category-scopes {\n    padding: 8px 16px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n}\n\n.scope-item {\n    padding: 10px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.scope-item:last-child {\n    border-bottom: none;\n}\n\n.scope-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info {\n    flex: 1;\n}\n\n.scope-name {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    font-family: monospace;\n}\n\n.scope-desc {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.scope-tip {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    background: var(--mj-status-info-bg);\n    border-radius: 8px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: var(--mj-status-info-text);\n}\n\n.scope-tip i {\n    color: var(--mj-status-info);\n}\n\n.scope-tip code {\n    background: var(--mj-color-info-100);\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-family: monospace;\n}\n\n/* No Scopes Warning */\n.no-scopes-warning {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 16px;\n    background: linear-gradient(135deg, var(--mj-color-error-50) 0%, var(--mj-color-error-100) 100%);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 10px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: var(--mj-status-error);\n}\n\n.no-scopes-warning i {\n    font-size: 20px;\n    color: var(--mj-color-error-600);\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.no-scopes-warning strong {\n    display: block;\n    color: var(--mj-status-error);\n    font-size: 14px;\n    margin-bottom: 4px;\n}\n\n.no-scopes-warning p {\n    margin: 0;\n    line-height: 1.5;\n}\n\n/* Success Content */\n.success-content {\n    text-align: center;\n}\n\n.success-icon {\n    margin-bottom: 16px;\n}\n\n.success-icon i {\n    font-size: 64px;\n    color: var(--mj-status-success);\n}\n\n.success-title {\n    margin: 0 0 24px 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n/* Key Display */\n.key-display {\n    background: var(--mj-color-neutral-800);\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 24px;\n}\n\n.key-warning {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-color-accent-300);\n}\n\n.key-value {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    padding: 12px 16px;\n}\n\n.key-value code {\n    flex: 1;\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 14px;\n    color: var(--mj-status-success);\n    word-break: break-all;\n    text-align: left;\n}\n\n.copy-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: var(--mj-color-neutral-600);\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-inverse);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.copy-btn:hover {\n    background: var(--mj-text-secondary);\n}\n\n.copy-btn.copied {\n    background: var(--mj-status-success);\n}\n\n/* Key Details */\n.key-details {\n    text-align: left;\n    background: var(--mj-bg-page);\n    border-radius: 10px;\n    padding: 16px 20px;\n    margin-bottom: 20px;\n}\n\n.detail-row {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.detail-value {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n/* Security Note */\n.security-note {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    text-align: left;\n    padding: 16px;\n    background: linear-gradient(135deg, var(--mj-color-success-50) 0%, var(--mj-color-success-100) 100%);\n    border-radius: 10px;\n    font-size: 13px;\n    color: var(--mj-color-success-800);\n}\n\n.security-note i {\n    font-size: 20px;\n    color: var(--mj-status-success);\n    margin-top: 2px;\n}\n\n.security-note strong {\n    display: block;\n    margin-bottom: 4px;\n}\n\n/* Form input styling */\n:host ::ng-deep .form-input .k-input,\n:host ::ng-deep .form-textarea .k-input-inner,\n:host ::ng-deep .k-datepicker .k-input {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: var(--mj-border-default);\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .form-input:focus-within,\n:host ::ng-deep .form-textarea:focus-within,\n:host ::ng-deep .k-datepicker:focus-within {\n    box-shadow: var(--mj-focus-ring);\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-api-key-create-dialog', template: "<!-- Slide-out Backdrop -->\n@if (Visible) {\n  <div class=\"slideout-backdrop\" (click)=\"Step !== 'success' ? close() : null\"></div>\n}\n\n<!-- Slide-out Panel -->\n<div class=\"slideout-panel\" [class.open]=\"Visible\">\n  <!-- Header -->\n  <div class=\"slideout-header\">\n    <div class=\"slideout-title\">\n      <i class=\"fa-solid fa-key\"></i>\n      <span>Generate New API Key</span>\n    </div>\n    @if (Step !== 'success') {\n      <button class=\"slideout-close\" (click)=\"close()\" title=\"Close (Esc)\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    }\n  </div>\n\n  <!-- Step Indicator -->\n  @if (Step !== 'success') {\n    <div class=\"step-indicator\">\n      <div class=\"step\" [class.active]=\"Step === 'configure'\" [class.completed]=\"Step === 'scopes'\">\n        <div class=\"step-number\">1</div>\n        <div class=\"step-label\">Configure</div>\n      </div>\n      <div class=\"step-connector\" [class.active]=\"Step === 'scopes'\"></div>\n      <div class=\"step\" [class.active]=\"Step === 'scopes'\">\n        <div class=\"step-number\">2</div>\n        <div class=\"step-label\">Permissions</div>\n      </div>\n    </div>\n  }\n\n  <div class=\"slideout-content\">\n    <!-- Configure Step -->\n    @if (Step === 'configure') {\n      <div class=\"step-panel\">\n        <div class=\"form-section\">\n          <label class=\"form-label required\">Key Label</label>\n          <input class=\"mj-input form-input\" [(ngModel)]=\"Label\"\n            placeholder=\"e.g., ElevenLabs Integration, CI/CD Pipeline\" />\n          <div class=\"form-hint\">A memorable name to identify this key's purpose</div>\n        </div>\n        <div class=\"form-section\">\n          <label class=\"form-label\">Description</label>\n          <textarea class=\"mj-textarea form-textarea\" [(ngModel)]=\"Description\"\n            placeholder=\"Optional notes about how this key will be used...\"\n            [rows]=\"3\"></textarea>\n        </div>\n        <div class=\"form-section\">\n          <label class=\"form-label\">Expiration</label>\n          <div class=\"expiration-options\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" class=\"mj-checkbox\"\n                [(ngModel)]=\"NeverExpires\"\n                (change)=\"onNeverExpiresChange()\" />\n              <span>Never expires</span>\n            </label>\n            @if (!NeverExpires) {\n              <div class=\"preset-buttons\">\n                @for (preset of ExpirationPresets; track preset) {\n                  <button\n                    class=\"preset-btn\"\n                    [class.active]=\"SelectedPreset === preset\"\n                    (click)=\"onPresetSelect(preset)\">\n                    {{preset.label}}\n                  </button>\n                }\n              </div>\n            }\n            @if (!NeverExpires && SelectedPreset?.days === -1) {\n              <div class=\"custom-date\">\n                <mj-datepicker [(ngModel)]=\"ExpiresAt\"\n                  [Min]=\"getMinDate()\"\n                  Format=\"MMM d, yyyy\"\n                  Placeholder=\"Select expiration date\">\n                </mj-datepicker>\n              </div>\n            }\n            @if (!NeverExpires && ExpiresAt) {\n              <div class=\"expiration-preview\">\n                <i class=\"fa-solid fa-calendar-check\"></i>\n                <span>Key will expire on {{ExpiresAt | date:'MMMM d, yyyy'}}</span>\n              </div>\n            }\n          </div>\n        </div>\n        @if (Error) {\n          <div class=\"error-message\">\n            <i class=\"fa-solid fa-circle-exclamation\"></i>\n            {{Error}}\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Scopes Step -->\n    @if (Step === 'scopes') {\n      <div class=\"step-panel scopes-step\">\n        <div class=\"scopes-header\">\n          <div class=\"scopes-info\">\n            <h4>Select Permission Scopes</h4>\n            <p>Choose what this API key can access. You can always modify this later.</p>\n          </div>\n          @if (getSelectedScopeCount() > 0) {\n            <div class=\"scopes-count\">\n              <span class=\"count\">{{getSelectedScopeCount()}}</span> selected\n            </div>\n          }\n        </div>\n        @if (IsLoadingScopes) {\n          <mj-loading text=\"Loading scopes...\"></mj-loading>\n        }\n        @if (!IsLoadingScopes) {\n          <div class=\"scope-categories\">\n            @for (category of ScopeCategories; track category) {\n              <div class=\"scope-category\">\n                <div class=\"category-header\" (click)=\"toggleCategory(category)\">\n                  <div class=\"category-left\">\n                    <i [class]=\"category.icon\" [style.color]=\"category.color\"></i>\n                    <span class=\"category-name\">{{category.name}}</span>\n                    <span class=\"category-badge\">{{category.scopes.length}}</span>\n                  </div>\n                  <div class=\"category-right\">\n                    <label class=\"select-all-label\" (click)=\"$event.stopPropagation()\">\n                      <input type=\"checkbox\" class=\"mj-checkbox\"\n                        [checked]=\"category.allSelected\"\n                        (change)=\"toggleCategoryAll(category)\" />\n                      <span>All</span>\n                    </label>\n                    <i class=\"fa-solid\" [class.fa-chevron-down]=\"!category.expanded\"\n                    [class.fa-chevron-up]=\"category.expanded\"></i>\n                  </div>\n                </div>\n                @if (category.expanded) {\n                  <div class=\"category-scopes\">\n                    @for (item of category.scopes; track item) {\n                      <div class=\"scope-item\">\n                        <label class=\"scope-label\">\n                          <input type=\"checkbox\" class=\"mj-checkbox\"\n                            [(ngModel)]=\"item.selected\"\n                            (change)=\"updateCategoryState(category)\" />\n                          <div class=\"scope-info\">\n                            <span class=\"scope-name\">{{item.scope.Name}}</span>\n                            @if (item.scope.Description) {\n                              <span class=\"scope-desc\">\n                                {{item.scope.Description}}\n                              </span>\n                            }\n                          </div>\n                        </label>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        <div class=\"scope-tip\">\n          <i class=\"fa-solid fa-lightbulb\"></i>\n          <span>Tip: Use wildcards like <code>entities:*</code> for broad access within a category</span>\n        </div>\n        <!-- No Scopes Warning -->\n        @if (!IsLoadingScopes && getSelectedScopeCount() === 0) {\n          <div class=\"no-scopes-warning\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <div>\n              <strong>Warning: No permissions selected</strong>\n              <p>API keys without any assigned scopes will have <strong>no permissions</strong> and cannot perform any operations. This key will be rejected by all API endpoints until scopes are assigned.</p>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Success Step -->\n    @if (Step === 'success') {\n      <div class=\"step-panel success-step\">\n        <div class=\"success-icon\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n        </div>\n        <h3 class=\"success-title\">API Key Created Successfully!</h3>\n        <div class=\"key-display\">\n          <div class=\"key-warning\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <span>Copy this key now. It won't be shown again!</span>\n          </div>\n          <div class=\"key-value\">\n            <code>{{RawApiKey}}</code>\n            <button class=\"copy-btn\" (click)=\"copyKey()\" [class.copied]=\"KeyCopied\">\n              <i class=\"fa-solid\" [class.fa-copy]=\"!KeyCopied\" [class.fa-check]=\"KeyCopied\"></i>\n              <span>{{KeyCopied ? 'Copied!' : 'Copy'}}</span>\n            </button>\n          </div>\n        </div>\n        <div class=\"key-details\">\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Label:</span>\n            <span class=\"detail-value\">{{Label}}</span>\n          </div>\n          @if (Description) {\n            <div class=\"detail-row\">\n              <span class=\"detail-label\">Description:</span>\n              <span class=\"detail-value\">{{Description}}</span>\n            </div>\n          }\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Expires:</span>\n            <span class=\"detail-value\">\n              {{NeverExpires ? 'Never' : (ExpiresAt | date:'MMMM d, yyyy')}}\n            </span>\n          </div>\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Scopes:</span>\n            <span class=\"detail-value\">{{getSelectedScopeCount()}} permissions</span>\n          </div>\n        </div>\n        <div class=\"security-note\">\n          <i class=\"fa-solid fa-shield-check\"></i>\n          <div>\n            <strong>Security Note:</strong>\n            Store this key securely. We only store a hash - the original key cannot be recovered.\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"slideout-footer\">\n    @if (Step === 'configure') {\n      <button mjButton variant=\"primary\" (click)=\"goToScopes()\">\n        Next: Permissions\n        <i class=\"fa-solid fa-arrow-right\"></i>\n      </button>\n      <button mjButton (click)=\"close()\">Cancel</button>\n    }\n\n    @if (Step === 'scopes') {\n      <button mjButton variant=\"primary\"\n        [disabled]=\"IsCreating\"\n        (click)=\"createKey()\">\n        @if (IsCreating) {\n          <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n        }\n        @if (!IsCreating) {\n          <span>\n            <i class=\"fa-solid fa-key\"></i>\n            Generate Key\n          </span>\n        }\n      </button>\n      <button mjButton (click)=\"goBack()\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n        Back\n      </button>\n    }\n\n    @if (Step === 'success') {\n      <button mjButton variant=\"primary\" (click)=\"close()\">\n        <i class=\"fa-solid fa-check\"></i>\n        Done\n      </button>\n    }\n  </div>\n</div>\n", styles: ["/* ========================================\n   Slide-out Panel Styles\n   ======================================== */\n\n/* Backdrop */\n.slideout-backdrop {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: var(--mj-bg-overlay);\n    z-index: 100;\n    animation: fadeIn 0.2s ease;\n}\n\n@keyframes fadeIn {\n    from { opacity: 0; }\n    to { opacity: 1; }\n}\n\n/* Slide-out Panel */\n.slideout-panel {\n    position: absolute;\n    top: 0;\n    right: 0;\n    width: 520px;\n    height: 100%;\n    max-height: 100%;\n    background: var(--mj-bg-surface);\n    box-shadow: -8px 0 32px var(--mj-bg-overlay);\n    z-index: 101;\n    display: flex;\n    flex-direction: column;\n    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n    transform: translateX(100%);\n    overflow: hidden;\n}\n\n.slideout-panel.open {\n    transform: translateX(0);\n}\n\n/* Panel Header */\n.slideout-header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    padding: 20px 24px;\n    background: var(--mj-bg-page);\n    border-bottom: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n.slideout-title {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    font-weight: 600;\n    font-size: 17px;\n    color: var(--mj-text-primary);\n    flex: 1;\n    min-width: 0;\n}\n\n.slideout-title i {\n    color: var(--mj-brand-primary);\n    font-size: 18px;\n    flex-shrink: 0;\n}\n\n.slideout-close {\n    width: 36px;\n    height: 36px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: transparent;\n    border: none;\n    border-radius: 8px;\n    color: var(--mj-text-muted);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    flex-shrink: 0;\n}\n\n.slideout-close:hover {\n    background: var(--mj-bg-surface-hover);\n    color: var(--mj-text-secondary);\n}\n\n/* Panel Content */\n.slideout-content {\n    flex: 1;\n    overflow-y: auto;\n}\n\n.step-panel {\n    padding: 24px;\n}\n\n/* Panel Footer */\n.slideout-footer {\n    display: flex;\n    gap: 12px;\n    padding: 16px 24px;\n    background: var(--mj-bg-page);\n    border-top: 1px solid var(--mj-border-default);\n    flex-shrink: 0;\n}\n\n:host ::ng-deep .slideout-footer .k-button {\n    min-width: 100px;\n    padding: 10px 20px;\n    font-weight: 600;\n    border-radius: 8px;\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .slideout-footer .k-button-solid-primary {\n    background: var(--mj-brand-primary);\n    border: none;\n    box-shadow: var(--mj-shadow-brand-sm);\n}\n\n:host ::ng-deep .slideout-footer .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: var(--mj-shadow-brand-md);\n}\n\n:host ::ng-deep .slideout-footer .k-button i {\n    margin: 0 5px;\n}\n\n/* Step Indicator */\n.step-indicator {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 20px 24px;\n    background: linear-gradient(135deg, var(--mj-color-brand-100) 0%, var(--mj-color-brand-200) 100%);\n    border-bottom: 1px solid var(--mj-color-accent-300);\n}\n\n.step {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n}\n\n.step-number {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background: var(--mj-bg-surface);\n    border: 2px solid var(--mj-color-neutral-300);\n    border-radius: 50%;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    transition: all 0.2s ease;\n}\n\n.step.active .step-number {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.step.completed .step-number {\n    background: var(--mj-status-success);\n    border-color: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.step-label {\n    font-size: 12px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.step.active .step-label {\n    color: var(--mj-color-brand-800);\n    font-weight: 600;\n}\n\n.step-connector {\n    width: 80px;\n    height: 2px;\n    background: var(--mj-color-neutral-300);\n    margin: 0 16px;\n    margin-bottom: 20px;\n    transition: background 0.2s ease;\n}\n\n.step-connector.active {\n    background: linear-gradient(90deg, var(--mj-status-success), var(--mj-brand-primary));\n}\n\n/* Dialog Content */\n.dialog-content {\n    padding: 24px;\n    max-height: 400px;\n    overflow-y: auto;\n}\n\n.scopes-content {\n    max-height: 450px;\n}\n\n/* Form Sections */\n.form-section {\n    margin-bottom: 24px;\n}\n\n.form-label {\n    display: block;\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin-bottom: 8px;\n}\n\n.form-label.required::after {\n    content: ' *';\n    color: var(--mj-status-error);\n}\n\n.form-input,\n.form-textarea {\n    width: 100%;\n}\n\n.form-hint {\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 6px;\n}\n\n/* Expiration Options */\n.expiration-options {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    cursor: pointer;\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n}\n\n.preset-buttons {\n    display: flex;\n    gap: 8px;\n    flex-wrap: wrap;\n}\n\n.preset-btn {\n    padding: 8px 16px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.preset-btn:hover {\n    border-color: var(--mj-brand-primary);\n    background: var(--mj-color-brand-50);\n}\n\n.preset-btn.active {\n    background: var(--mj-brand-primary);\n    border-color: var(--mj-brand-primary);\n    color: var(--mj-text-inverse);\n}\n\n.custom-date {\n    margin-top: 4px;\n}\n\n.expiration-preview {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 14px;\n    background: var(--mj-color-success-50);\n    border-radius: 8px;\n    font-size: 13px;\n    color: var(--mj-color-success-600);\n}\n\n.expiration-preview i {\n    color: var(--mj-status-success);\n}\n\n/* Error Message */\n.error-message {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 12px 16px;\n    background: var(--mj-color-error-50);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 8px;\n    color: var(--mj-color-error-600);\n    font-size: 14px;\n}\n\n/* Scopes */\n.scopes-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 20px;\n}\n\n.scopes-info h4 {\n    margin: 0 0 4px 0;\n    font-size: 16px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n}\n\n.scopes-info p {\n    margin: 0;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.scopes-count {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 6px 12px;\n    background: var(--mj-brand-primary);\n    border-radius: 20px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-inverse);\n}\n\n.scopes-count .count {\n    font-weight: 700;\n}\n\n/* Scope Categories */\n.scope-categories {\n    display: flex;\n    flex-direction: column;\n    gap: 8px;\n}\n\n.scope-category {\n    background: var(--mj-bg-page);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 10px;\n    overflow: hidden;\n}\n\n.category-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 14px 16px;\n    cursor: pointer;\n    transition: background 0.2s ease;\n}\n\n.category-header:hover {\n    background: var(--mj-bg-surface-sunken);\n}\n\n.category-left {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n}\n\n.category-left i {\n    font-size: 16px;\n}\n\n.category-name {\n    font-weight: 600;\n    font-size: 14px;\n    color: var(--mj-text-primary);\n}\n\n.category-badge {\n    padding: 2px 8px;\n    background: var(--mj-border-default);\n    border-radius: 10px;\n    font-size: 11px;\n    font-weight: 500;\n    color: var(--mj-text-secondary);\n}\n\n.category-right {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n}\n\n.select-all-label {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    cursor: pointer;\n}\n\n.category-right > i {\n    color: var(--mj-text-muted);\n    font-size: 12px;\n}\n\n.category-scopes {\n    padding: 8px 16px 16px;\n    border-top: 1px solid var(--mj-border-default);\n    background: var(--mj-bg-surface);\n}\n\n.scope-item {\n    padding: 10px 0;\n    border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.scope-item:last-child {\n    border-bottom: none;\n}\n\n.scope-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 10px;\n    cursor: pointer;\n}\n\n.scope-info {\n    flex: 1;\n}\n\n.scope-name {\n    display: block;\n    font-weight: 500;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n    font-family: monospace;\n}\n\n.scope-desc {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 2px;\n}\n\n.scope-tip {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    background: var(--mj-status-info-bg);\n    border-radius: 8px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: var(--mj-status-info-text);\n}\n\n.scope-tip i {\n    color: var(--mj-status-info);\n}\n\n.scope-tip code {\n    background: var(--mj-color-info-100);\n    padding: 2px 6px;\n    border-radius: 4px;\n    font-family: monospace;\n}\n\n/* No Scopes Warning */\n.no-scopes-warning {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    padding: 16px;\n    background: linear-gradient(135deg, var(--mj-color-error-50) 0%, var(--mj-color-error-100) 100%);\n    border: 1px solid var(--mj-status-error-border);\n    border-radius: 10px;\n    margin-top: 16px;\n    font-size: 13px;\n    color: var(--mj-status-error);\n}\n\n.no-scopes-warning i {\n    font-size: 20px;\n    color: var(--mj-color-error-600);\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.no-scopes-warning strong {\n    display: block;\n    color: var(--mj-status-error);\n    font-size: 14px;\n    margin-bottom: 4px;\n}\n\n.no-scopes-warning p {\n    margin: 0;\n    line-height: 1.5;\n}\n\n/* Success Content */\n.success-content {\n    text-align: center;\n}\n\n.success-icon {\n    margin-bottom: 16px;\n}\n\n.success-icon i {\n    font-size: 64px;\n    color: var(--mj-status-success);\n}\n\n.success-title {\n    margin: 0 0 24px 0;\n    font-size: 20px;\n    font-weight: 700;\n    color: var(--mj-text-primary);\n}\n\n/* Key Display */\n.key-display {\n    background: var(--mj-color-neutral-800);\n    border-radius: 12px;\n    padding: 20px;\n    margin-bottom: 24px;\n}\n\n.key-warning {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    gap: 8px;\n    padding: 10px 16px;\n    background: color-mix(in srgb, var(--mj-brand-primary) 20%, transparent);\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-color-accent-300);\n}\n\n.key-value {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    background: var(--mj-bg-surface-card);\n    border-radius: 8px;\n    padding: 12px 16px;\n}\n\n.key-value code {\n    flex: 1;\n    font-family: 'Fira Code', 'Consolas', monospace;\n    font-size: 14px;\n    color: var(--mj-status-success);\n    word-break: break-all;\n    text-align: left;\n}\n\n.copy-btn {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    padding: 8px 16px;\n    background: var(--mj-color-neutral-600);\n    border: none;\n    border-radius: 6px;\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-inverse);\n    cursor: pointer;\n    transition: all 0.2s ease;\n    white-space: nowrap;\n}\n\n.copy-btn:hover {\n    background: var(--mj-text-secondary);\n}\n\n.copy-btn.copied {\n    background: var(--mj-status-success);\n}\n\n/* Key Details */\n.key-details {\n    text-align: left;\n    background: var(--mj-bg-page);\n    border-radius: 10px;\n    padding: 16px 20px;\n    margin-bottom: 20px;\n}\n\n.detail-row {\n    display: flex;\n    justify-content: space-between;\n    padding: 8px 0;\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.detail-row:last-child {\n    border-bottom: none;\n}\n\n.detail-label {\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.detail-value {\n    font-size: 13px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n}\n\n/* Security Note */\n.security-note {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    text-align: left;\n    padding: 16px;\n    background: linear-gradient(135deg, var(--mj-color-success-50) 0%, var(--mj-color-success-100) 100%);\n    border-radius: 10px;\n    font-size: 13px;\n    color: var(--mj-color-success-800);\n}\n\n.security-note i {\n    font-size: 20px;\n    color: var(--mj-status-success);\n    margin-top: 2px;\n}\n\n.security-note strong {\n    display: block;\n    margin-bottom: 4px;\n}\n\n/* Form input styling */\n:host ::ng-deep .form-input .k-input,\n:host ::ng-deep .form-textarea .k-input-inner,\n:host ::ng-deep .k-datepicker .k-input {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: var(--mj-border-default);\n    transition: all 0.2s ease;\n}\n\n:host ::ng-deep .form-input:focus-within,\n:host ::ng-deep .form-textarea:focus-within,\n:host ::ng-deep .k-datepicker:focus-within {\n    box-shadow: var(--mj-focus-ring);\n}\n"] }]
     }], null, { Visible: [{
             type: Input
         }], VisibleChange: [{

package/dist/APIKeys/api-key-create-dialog.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"api-key-create-dialog.component.js","sourceRoot":"","sources":["../../src/APIKeys/api-key-create-dialog.component.ts","../../src/APIKeys/api-key-create-dialog.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';\nimport { Metadata } from '@memberjunction/core';\nimport { MJAPIScopeEntity } from '@memberjunction/core-entities';\nimport { GraphQLDataProvider, GraphQLEncryptionClient } from '@memberjunction/graphql-dataprovider';\nimport { APIKeysEngineBase, parseAPIScopeUIConfig } from '@memberjunction/api-keys-base';\n\n/** Scope selection item */\ninterface ScopeItem {\n    scope: MJAPIScopeEntity;\n    selected: boolean;\n}\n\n/** Grouped scopes by category */\ninterface ScopeCategory {\n    name: string;\n    icon: string;\n    color: string;\n    scopes: ScopeItem[];\n    expanded: boolean;\n    allSelected: boolean;\n}\n\n/** Result of key creation */\nexport interface APIKeyCreateResult {\n    success: boolean;\n    apiKeyId?: string;\n    rawKey?: string;\n    error?: string;\n}\n/**\n * Dialog for creating new API keys\n * Shows the raw key only once - it cannot be recovered after closing\n */\n@Component({\n  standalone: false,\n    selector: 'mj-api-key-create-dialog',\n    templateUrl: './api-key-create-dialog.component.html',\n    styleUrls: ['./api-key-create-dialog.component.css']\n})\nexport class APIKeyCreateDialogComponent implements OnInit {\n    @Input() Visible = false;\n    @Output() VisibleChange = new EventEmitter<boolean>();\n    @Output() Created = new EventEmitter<APIKeyCreateResult>();\n    @Output() Closed = new EventEmitter<void>();\n\n    // Form fields\n    public Label = '';\n    public Description = '';\n    public ExpiresAt: Date | null = null;\n    public NeverExpires = true;\n\n    // Expiration presets\n    public ExpirationPresets = [\n        { label: '30 days', days: 30 },\n        { label: '90 days', days: 90 },\n        { label: '1 year', days: 365 },\n        { label: 'Custom', days: -1 }\n    ];\n    public SelectedPreset: { label: string; days: number } | null = null;\n\n    // Scopes\n    public ScopeCategories: ScopeCategory[] = [];\n    public IsLoadingScopes = true;\n\n    // State\n    public IsCreating = false;\n    public Step: 'configure' | 'scopes' | 'success' = 'configure';\n    public RawApiKey = '';\n    public KeyCopied = false;\n    public Error = '';\n\n    // Default UI config for categories without explicit configuration\n    private readonly defaultUIConfig = {\n        icon: 'fa-solid fa-ellipsis',\n        color: 'var(--mj-text-muted)'\n    };\n\n    ngOnInit(): void {\n        this.loadScopes();\n    }\n\n    /**\n     * Handle escape key to close dialog\n     */\n    @HostListener('document:keydown.escape')\n    public onEscapeKey(): void {\n        if (this.Visible && !this.IsCreating) {\n            this.close();\n        }\n    }\n\n    /**\n     * Load available scopes from cached data.\n     * Uses UIConfig from root scopes for category icons/colors.\n     */\n    private loadScopes(): void {\n        this.IsLoadingScopes = true;\n        try {\n            const base = APIKeysEngineBase.Instance;\n            const scopes = base.Scopes;\n\n            // Build a map of category -> root scope UIConfig\n            // Root scopes (ParentID is null) define the UI appearance for their category\n            const categoryUIConfigs = new Map<string, { icon: string; color: string }>();\n            for (const scope of scopes) {\n                if (!scope.ParentID) {\n                    // This is a root scope - use its UIConfig for the category\n                    const uiConfig = parseAPIScopeUIConfig(scope);\n                    categoryUIConfigs.set(scope.Category, {\n                        icon: uiConfig.icon || this.defaultUIConfig.icon,\n                        color: uiConfig.color || this.defaultUIConfig.color\n                    });\n                }\n            }\n\n            // Group scopes by category\n            const categoryMap = new Map<string, ScopeItem[]>();\n            for (const scope of scopes) {\n                const category = scope.Category || 'Other';\n                if (!categoryMap.has(category)) {\n                    categoryMap.set(category, []);\n                }\n                categoryMap.get(category)!.push({\n                    scope,\n                    selected: false\n                });\n            }\n\n            // Build categories with UI config from root scopes\n            this.ScopeCategories = Array.from(categoryMap.entries())\n                .sort(([a], [b]) => a.localeCompare(b))\n                .map(([name, scopeItems]) => {\n                    const config = categoryUIConfigs.get(name) || this.defaultUIConfig;\n                    return {\n                        name,\n                        icon: config.icon,\n                        color: config.color,\n                        scopes: scopeItems.sort((a, b) => a.scope.Name.localeCompare(b.scope.Name)),\n                        expanded: false,\n                        allSelected: false\n                    };\n                });\n        } catch (error) {\n            console.error('Error loading scopes:', error);\n        } finally {\n            this.IsLoadingScopes = false;\n        }\n    }\n\n    /**\n     * Handle expiration preset selection\n     */\n    public onPresetSelect(preset: { label: string; days: number }): void {\n        this.SelectedPreset = preset;\n        this.NeverExpires = false;\n\n        if (preset.days > 0) {\n            const date = new Date();\n            date.setDate(date.getDate() + preset.days);\n            this.ExpiresAt = date;\n        } else {\n            this.ExpiresAt = null;\n        }\n    }\n\n    /**\n     * Handle never expires toggle\n     */\n    public onNeverExpiresChange(): void {\n        if (this.NeverExpires) {\n            this.ExpiresAt = null;\n            this.SelectedPreset = null;\n        }\n    }\n\n    /**\n     * Toggle category expansion\n     */\n    public toggleCategory(category: ScopeCategory): void {\n        category.expanded = !category.expanded;\n    }\n\n    /**\n     * Toggle all scopes in a category\n     */\n    public toggleCategoryAll(category: ScopeCategory): void {\n        category.allSelected = !category.allSelected;\n        for (const item of category.scopes) {\n            item.selected = category.allSelected;\n        }\n    }\n\n    /**\n     * Update category allSelected state\n     */\n    public updateCategoryState(category: ScopeCategory): void {\n        category.allSelected = category.scopes.every(s => s.selected);\n    }\n\n    /**\n     * Get selected scope count\n     */\n    public getSelectedScopeCount(): number {\n        return this.ScopeCategories.reduce((sum, cat) =>\n            sum + cat.scopes.filter(s => s.selected).length, 0);\n    }\n\n    /**\n     * Proceed to scopes step\n     */\n    public goToScopes(): void {\n        if (!this.Label.trim()) {\n            this.Error = 'Please enter a label for the API key';\n            return;\n        }\n        this.Error = '';\n        this.Step = 'scopes';\n    }\n\n    /**\n     * Go back to configure step\n     */\n    public goBack(): void {\n        this.Step = 'configure';\n    }\n\n    /**\n     * Create the API key using server-side cryptographic hashing\n     */\n    public async createKey(): Promise<void> {\n        this.IsCreating = true;\n        this.Error = '';\n\n        try {\n            // Get selected scope IDs\n            const selectedScopeIds = this.ScopeCategories\n                .flatMap(cat => cat.scopes)\n                .filter(s => s.selected)\n                .map(s => s.scope.ID);\n\n            // Get the GraphQL provider and create the encryption client\n            const provider = Metadata.Provider as GraphQLDataProvider;\n            const encryptionClient = new GraphQLEncryptionClient(provider);\n\n            // Call the server to create the API key with proper crypto hashing\n            const result = await encryptionClient.CreateAPIKey({\n                Label: this.Label.trim(),\n                Description: this.Description.trim() || undefined,\n                ExpiresAt: this.NeverExpires ? undefined : (this.ExpiresAt || undefined),\n                ScopeIDs: selectedScopeIds.length > 0 ? selectedScopeIds : undefined\n            });\n\n            if (result.Success && result.RawKey) {\n                this.RawApiKey = result.RawKey;\n                this.Step = 'success';\n\n                this.Created.emit({\n                    success: true,\n                    rawKey: result.RawKey\n                });\n            } else {\n                this.Error = result.Error || 'Failed to create API key. Please try again.';\n            }\n        } catch (error) {\n            console.error('Error creating API key:', error);\n            this.Error = 'An error occurred while creating the API key.';\n        } finally {\n            this.IsCreating = false;\n        }\n    }\n\n    /**\n     * Copy the API key to clipboard\n     */\n    public async copyKey(): Promise<void> {\n        try {\n            await navigator.clipboard.writeText(this.RawApiKey);\n            this.KeyCopied = true;\n            setTimeout(() => this.KeyCopied = false, 3000);\n        } catch (error) {\n            console.error('Failed to copy key:', error);\n        }\n    }\n\n    /**\n     * Close the dialog\n     */\n    public close(): void {\n        this.reset();\n        this.Visible = false;\n        this.VisibleChange.emit(false);\n        this.Closed.emit();\n    }\n\n    /**\n     * Reset form state\n     */\n    private reset(): void {\n        this.Label = '';\n        this.Description = '';\n        this.ExpiresAt = null;\n        this.NeverExpires = true;\n        this.SelectedPreset = null;\n        this.Step = 'configure';\n        this.RawApiKey = '';\n        this.KeyCopied = false;\n        this.Error = '';\n\n        // Reset scope selections\n        for (const category of this.ScopeCategories) {\n            category.expanded = false;\n            category.allSelected = false;\n            for (const scope of category.scopes) {\n                scope.selected = false;\n            }\n        }\n    }\n\n    /**\n     * Get minimum date for expiration (tomorrow)\n     */\n    public getMinDate(): Date {\n        const tomorrow = new Date();\n        tomorrow.setDate(tomorrow.getDate() + 1);\n        return tomorrow;\n    }\n}\n","<!-- Slide-out Backdrop -->\n@if (Visible) {\n  <div class=\"slideout-backdrop\" (click)=\"Step !== 'success' ? close() : null\"></div>\n}\n\n<!-- Slide-out Panel -->\n<div class=\"slideout-panel\" [class.open]=\"Visible\">\n  <!-- Header -->\n  <div class=\"slideout-header\">\n    <div class=\"slideout-title\">\n      <i class=\"fa-solid fa-key\"></i>\n      <span>Generate New API Key</span>\n    </div>\n    @if (Step !== 'success') {\n      <button class=\"slideout-close\" (click)=\"close()\" title=\"Close (Esc)\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    }\n  </div>\n\n  <!-- Step Indicator -->\n  @if (Step !== 'success') {\n    <div class=\"step-indicator\">\n      <div class=\"step\" [class.active]=\"Step === 'configure'\" [class.completed]=\"Step === 'scopes'\">\n        <div class=\"step-number\">1</div>\n        <div class=\"step-label\">Configure</div>\n      </div>\n      <div class=\"step-connector\" [class.active]=\"Step === 'scopes'\"></div>\n      <div class=\"step\" [class.active]=\"Step === 'scopes'\">\n        <div class=\"step-number\">2</div>\n        <div class=\"step-label\">Permissions</div>\n      </div>\n    </div>\n  }\n\n  <div class=\"slideout-content\">\n    <!-- Configure Step -->\n    @if (Step === 'configure') {\n      <div class=\"step-panel\">\n        <div class=\"form-section\">\n          <label class=\"form-label required\">Key Label</label>\n          <input kendoTextBox [(ngModel)]=\"Label\"\n            placeholder=\"e.g., ElevenLabs Integration, CI/CD Pipeline\"\n            class=\"form-input\" />\n          <div class=\"form-hint\">A memorable name to identify this key's purpose</div>\n        </div>\n        <div class=\"form-section\">\n          <label class=\"form-label\">Description</label>\n          <textarea kendoTextArea [(ngModel)]=\"Description\"\n            placeholder=\"Optional notes about how this key will be used...\"\n            [rows]=\"3\"\n          class=\"form-textarea\"></textarea>\n        </div>\n        <div class=\"form-section\">\n          <label class=\"form-label\">Expiration</label>\n          <div class=\"expiration-options\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" kendoCheckBox\n                [(ngModel)]=\"NeverExpires\"\n                (change)=\"onNeverExpiresChange()\" />\n              <span>Never expires</span>\n            </label>\n            @if (!NeverExpires) {\n              <div class=\"preset-buttons\">\n                @for (preset of ExpirationPresets; track preset) {\n                  <button\n                    class=\"preset-btn\"\n                    [class.active]=\"SelectedPreset === preset\"\n                    (click)=\"onPresetSelect(preset)\">\n                    {{preset.label}}\n                  </button>\n                }\n              </div>\n            }\n            @if (!NeverExpires && SelectedPreset?.days === -1) {\n              <div class=\"custom-date\">\n                <kendo-datepicker [(ngModel)]=\"ExpiresAt\"\n                  [min]=\"getMinDate()\"\n                  format=\"MMM d, yyyy\"\n                  placeholder=\"Select expiration date\">\n                </kendo-datepicker>\n              </div>\n            }\n            @if (!NeverExpires && ExpiresAt) {\n              <div class=\"expiration-preview\">\n                <i class=\"fa-solid fa-calendar-check\"></i>\n                <span>Key will expire on {{ExpiresAt | date:'MMMM d, yyyy'}}</span>\n              </div>\n            }\n          </div>\n        </div>\n        @if (Error) {\n          <div class=\"error-message\">\n            <i class=\"fa-solid fa-circle-exclamation\"></i>\n            {{Error}}\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Scopes Step -->\n    @if (Step === 'scopes') {\n      <div class=\"step-panel scopes-step\">\n        <div class=\"scopes-header\">\n          <div class=\"scopes-info\">\n            <h4>Select Permission Scopes</h4>\n            <p>Choose what this API key can access. You can always modify this later.</p>\n          </div>\n          @if (getSelectedScopeCount() > 0) {\n            <div class=\"scopes-count\">\n              <span class=\"count\">{{getSelectedScopeCount()}}</span> selected\n            </div>\n          }\n        </div>\n        @if (IsLoadingScopes) {\n          <mj-loading text=\"Loading scopes...\"></mj-loading>\n        }\n        @if (!IsLoadingScopes) {\n          <div class=\"scope-categories\">\n            @for (category of ScopeCategories; track category) {\n              <div class=\"scope-category\">\n                <div class=\"category-header\" (click)=\"toggleCategory(category)\">\n                  <div class=\"category-left\">\n                    <i [class]=\"category.icon\" [style.color]=\"category.color\"></i>\n                    <span class=\"category-name\">{{category.name}}</span>\n                    <span class=\"category-badge\">{{category.scopes.length}}</span>\n                  </div>\n                  <div class=\"category-right\">\n                    <label class=\"select-all-label\" (click)=\"$event.stopPropagation()\">\n                      <input type=\"checkbox\" kendoCheckBox\n                        [checked]=\"category.allSelected\"\n                        (change)=\"toggleCategoryAll(category)\" />\n                      <span>All</span>\n                    </label>\n                    <i class=\"fa-solid\" [class.fa-chevron-down]=\"!category.expanded\"\n                    [class.fa-chevron-up]=\"category.expanded\"></i>\n                  </div>\n                </div>\n                @if (category.expanded) {\n                  <div class=\"category-scopes\">\n                    @for (item of category.scopes; track item) {\n                      <div class=\"scope-item\">\n                        <label class=\"scope-label\">\n                          <input type=\"checkbox\" kendoCheckBox\n                            [(ngModel)]=\"item.selected\"\n                            (change)=\"updateCategoryState(category)\" />\n                          <div class=\"scope-info\">\n                            <span class=\"scope-name\">{{item.scope.Name}}</span>\n                            @if (item.scope.Description) {\n                              <span class=\"scope-desc\">\n                                {{item.scope.Description}}\n                              </span>\n                            }\n                          </div>\n                        </label>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        <div class=\"scope-tip\">\n          <i class=\"fa-solid fa-lightbulb\"></i>\n          <span>Tip: Use wildcards like <code>entities:*</code> for broad access within a category</span>\n        </div>\n        <!-- No Scopes Warning -->\n        @if (!IsLoadingScopes && getSelectedScopeCount() === 0) {\n          <div class=\"no-scopes-warning\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <div>\n              <strong>Warning: No permissions selected</strong>\n              <p>API keys without any assigned scopes will have <strong>no permissions</strong> and cannot perform any operations. This key will be rejected by all API endpoints until scopes are assigned.</p>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Success Step -->\n    @if (Step === 'success') {\n      <div class=\"step-panel success-step\">\n        <div class=\"success-icon\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n        </div>\n        <h3 class=\"success-title\">API Key Created Successfully!</h3>\n        <div class=\"key-display\">\n          <div class=\"key-warning\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <span>Copy this key now. It won't be shown again!</span>\n          </div>\n          <div class=\"key-value\">\n            <code>{{RawApiKey}}</code>\n            <button class=\"copy-btn\" (click)=\"copyKey()\" [class.copied]=\"KeyCopied\">\n              <i class=\"fa-solid\" [class.fa-copy]=\"!KeyCopied\" [class.fa-check]=\"KeyCopied\"></i>\n              <span>{{KeyCopied ? 'Copied!' : 'Copy'}}</span>\n            </button>\n          </div>\n        </div>\n        <div class=\"key-details\">\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Label:</span>\n            <span class=\"detail-value\">{{Label}}</span>\n          </div>\n          @if (Description) {\n            <div class=\"detail-row\">\n              <span class=\"detail-label\">Description:</span>\n              <span class=\"detail-value\">{{Description}}</span>\n            </div>\n          }\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Expires:</span>\n            <span class=\"detail-value\">\n              {{NeverExpires ? 'Never' : (ExpiresAt | date:'MMMM d, yyyy')}}\n            </span>\n          </div>\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Scopes:</span>\n            <span class=\"detail-value\">{{getSelectedScopeCount()}} permissions</span>\n          </div>\n        </div>\n        <div class=\"security-note\">\n          <i class=\"fa-solid fa-shield-check\"></i>\n          <div>\n            <strong>Security Note:</strong>\n            Store this key securely. We only store a hash - the original key cannot be recovered.\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"slideout-footer\">\n    @if (Step === 'configure') {\n      <button kendoButton [themeColor]=\"'primary'\" (click)=\"goToScopes()\">\n        Next: Permissions\n        <i class=\"fa-solid fa-arrow-right\"></i>\n      </button>\n      <button kendoButton (click)=\"close()\">Cancel</button>\n    }\n\n    @if (Step === 'scopes') {\n      <button kendoButton [themeColor]=\"'primary'\"\n        [disabled]=\"IsCreating\"\n        (click)=\"createKey()\">\n        @if (IsCreating) {\n          <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n        }\n        @if (!IsCreating) {\n          <span>\n            <i class=\"fa-solid fa-key\"></i>\n            Generate Key\n          </span>\n        }\n      </button>\n      <button kendoButton (click)=\"goBack()\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n        Back\n      </button>\n    }\n\n    @if (Step === 'success') {\n      <button kendoButton [themeColor]=\"'primary'\" (click)=\"close()\">\n        <i class=\"fa-solid fa-check\"></i>\n        Done\n      </button>\n    }\n  </div>\n</div>\n"]}
+{"version":3,"file":"api-key-create-dialog.component.js","sourceRoot":"","sources":["../../src/APIKeys/api-key-create-dialog.component.ts","../../src/APIKeys/api-key-create-dialog.component.html"],"names":[],"mappings":"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","sourcesContent":["import { Component, EventEmitter, HostListener, Input, OnInit, Output } from '@angular/core';\nimport { Metadata } from '@memberjunction/core';\nimport { MJAPIScopeEntity } from '@memberjunction/core-entities';\nimport { GraphQLDataProvider, GraphQLEncryptionClient } from '@memberjunction/graphql-dataprovider';\nimport { APIKeysEngineBase, parseAPIScopeUIConfig } from '@memberjunction/api-keys-base';\n\n/** Scope selection item */\ninterface ScopeItem {\n    scope: MJAPIScopeEntity;\n    selected: boolean;\n}\n\n/** Grouped scopes by category */\ninterface ScopeCategory {\n    name: string;\n    icon: string;\n    color: string;\n    scopes: ScopeItem[];\n    expanded: boolean;\n    allSelected: boolean;\n}\n\n/** Result of key creation */\nexport interface APIKeyCreateResult {\n    success: boolean;\n    apiKeyId?: string;\n    rawKey?: string;\n    error?: string;\n}\n/**\n * Dialog for creating new API keys\n * Shows the raw key only once - it cannot be recovered after closing\n */\n@Component({\n  standalone: false,\n    selector: 'mj-api-key-create-dialog',\n    templateUrl: './api-key-create-dialog.component.html',\n    styleUrls: ['./api-key-create-dialog.component.css']\n})\nexport class APIKeyCreateDialogComponent implements OnInit {\n    @Input() Visible = false;\n    @Output() VisibleChange = new EventEmitter<boolean>();\n    @Output() Created = new EventEmitter<APIKeyCreateResult>();\n    @Output() Closed = new EventEmitter<void>();\n\n    // Form fields\n    public Label = '';\n    public Description = '';\n    public ExpiresAt: Date | null = null;\n    public NeverExpires = true;\n\n    // Expiration presets\n    public ExpirationPresets = [\n        { label: '30 days', days: 30 },\n        { label: '90 days', days: 90 },\n        { label: '1 year', days: 365 },\n        { label: 'Custom', days: -1 }\n    ];\n    public SelectedPreset: { label: string; days: number } | null = null;\n\n    // Scopes\n    public ScopeCategories: ScopeCategory[] = [];\n    public IsLoadingScopes = true;\n\n    // State\n    public IsCreating = false;\n    public Step: 'configure' | 'scopes' | 'success' = 'configure';\n    public RawApiKey = '';\n    public KeyCopied = false;\n    public Error = '';\n\n    // Default UI config for categories without explicit configuration\n    private readonly defaultUIConfig = {\n        icon: 'fa-solid fa-ellipsis',\n        color: 'var(--mj-text-muted)'\n    };\n\n    ngOnInit(): void {\n        this.loadScopes();\n    }\n\n    /**\n     * Handle escape key to close dialog\n     */\n    @HostListener('document:keydown.escape')\n    public onEscapeKey(): void {\n        if (this.Visible && !this.IsCreating) {\n            this.close();\n        }\n    }\n\n    /**\n     * Load available scopes from cached data.\n     * Uses UIConfig from root scopes for category icons/colors.\n     */\n    private loadScopes(): void {\n        this.IsLoadingScopes = true;\n        try {\n            const base = APIKeysEngineBase.Instance;\n            const scopes = base.Scopes;\n\n            // Build a map of category -> root scope UIConfig\n            // Root scopes (ParentID is null) define the UI appearance for their category\n            const categoryUIConfigs = new Map<string, { icon: string; color: string }>();\n            for (const scope of scopes) {\n                if (!scope.ParentID) {\n                    // This is a root scope - use its UIConfig for the category\n                    const uiConfig = parseAPIScopeUIConfig(scope);\n                    categoryUIConfigs.set(scope.Category, {\n                        icon: uiConfig.icon || this.defaultUIConfig.icon,\n                        color: uiConfig.color || this.defaultUIConfig.color\n                    });\n                }\n            }\n\n            // Group scopes by category\n            const categoryMap = new Map<string, ScopeItem[]>();\n            for (const scope of scopes) {\n                const category = scope.Category || 'Other';\n                if (!categoryMap.has(category)) {\n                    categoryMap.set(category, []);\n                }\n                categoryMap.get(category)!.push({\n                    scope,\n                    selected: false\n                });\n            }\n\n            // Build categories with UI config from root scopes\n            this.ScopeCategories = Array.from(categoryMap.entries())\n                .sort(([a], [b]) => a.localeCompare(b))\n                .map(([name, scopeItems]) => {\n                    const config = categoryUIConfigs.get(name) || this.defaultUIConfig;\n                    return {\n                        name,\n                        icon: config.icon,\n                        color: config.color,\n                        scopes: scopeItems.sort((a, b) => a.scope.Name.localeCompare(b.scope.Name)),\n                        expanded: false,\n                        allSelected: false\n                    };\n                });\n        } catch (error) {\n            console.error('Error loading scopes:', error);\n        } finally {\n            this.IsLoadingScopes = false;\n        }\n    }\n\n    /**\n     * Handle expiration preset selection\n     */\n    public onPresetSelect(preset: { label: string; days: number }): void {\n        this.SelectedPreset = preset;\n        this.NeverExpires = false;\n\n        if (preset.days > 0) {\n            const date = new Date();\n            date.setDate(date.getDate() + preset.days);\n            this.ExpiresAt = date;\n        } else {\n            this.ExpiresAt = null;\n        }\n    }\n\n    /**\n     * Handle never expires toggle\n     */\n    public onNeverExpiresChange(): void {\n        if (this.NeverExpires) {\n            this.ExpiresAt = null;\n            this.SelectedPreset = null;\n        }\n    }\n\n    /**\n     * Toggle category expansion\n     */\n    public toggleCategory(category: ScopeCategory): void {\n        category.expanded = !category.expanded;\n    }\n\n    /**\n     * Toggle all scopes in a category\n     */\n    public toggleCategoryAll(category: ScopeCategory): void {\n        category.allSelected = !category.allSelected;\n        for (const item of category.scopes) {\n            item.selected = category.allSelected;\n        }\n    }\n\n    /**\n     * Update category allSelected state\n     */\n    public updateCategoryState(category: ScopeCategory): void {\n        category.allSelected = category.scopes.every(s => s.selected);\n    }\n\n    /**\n     * Get selected scope count\n     */\n    public getSelectedScopeCount(): number {\n        return this.ScopeCategories.reduce((sum, cat) =>\n            sum + cat.scopes.filter(s => s.selected).length, 0);\n    }\n\n    /**\n     * Proceed to scopes step\n     */\n    public goToScopes(): void {\n        if (!this.Label.trim()) {\n            this.Error = 'Please enter a label for the API key';\n            return;\n        }\n        this.Error = '';\n        this.Step = 'scopes';\n    }\n\n    /**\n     * Go back to configure step\n     */\n    public goBack(): void {\n        this.Step = 'configure';\n    }\n\n    /**\n     * Create the API key using server-side cryptographic hashing\n     */\n    public async createKey(): Promise<void> {\n        this.IsCreating = true;\n        this.Error = '';\n\n        try {\n            // Get selected scope IDs\n            const selectedScopeIds = this.ScopeCategories\n                .flatMap(cat => cat.scopes)\n                .filter(s => s.selected)\n                .map(s => s.scope.ID);\n\n            // Get the GraphQL provider and create the encryption client\n            const provider = Metadata.Provider as GraphQLDataProvider;\n            const encryptionClient = new GraphQLEncryptionClient(provider);\n\n            // Call the server to create the API key with proper crypto hashing\n            const result = await encryptionClient.CreateAPIKey({\n                Label: this.Label.trim(),\n                Description: this.Description.trim() || undefined,\n                ExpiresAt: this.NeverExpires ? undefined : (this.ExpiresAt || undefined),\n                ScopeIDs: selectedScopeIds.length > 0 ? selectedScopeIds : undefined\n            });\n\n            if (result.Success && result.RawKey) {\n                this.RawApiKey = result.RawKey;\n                this.Step = 'success';\n\n                this.Created.emit({\n                    success: true,\n                    rawKey: result.RawKey\n                });\n            } else {\n                this.Error = result.Error || 'Failed to create API key. Please try again.';\n            }\n        } catch (error) {\n            console.error('Error creating API key:', error);\n            this.Error = 'An error occurred while creating the API key.';\n        } finally {\n            this.IsCreating = false;\n        }\n    }\n\n    /**\n     * Copy the API key to clipboard\n     */\n    public async copyKey(): Promise<void> {\n        try {\n            await navigator.clipboard.writeText(this.RawApiKey);\n            this.KeyCopied = true;\n            setTimeout(() => this.KeyCopied = false, 3000);\n        } catch (error) {\n            console.error('Failed to copy key:', error);\n        }\n    }\n\n    /**\n     * Close the dialog\n     */\n    public close(): void {\n        this.reset();\n        this.Visible = false;\n        this.VisibleChange.emit(false);\n        this.Closed.emit();\n    }\n\n    /**\n     * Reset form state\n     */\n    private reset(): void {\n        this.Label = '';\n        this.Description = '';\n        this.ExpiresAt = null;\n        this.NeverExpires = true;\n        this.SelectedPreset = null;\n        this.Step = 'configure';\n        this.RawApiKey = '';\n        this.KeyCopied = false;\n        this.Error = '';\n\n        // Reset scope selections\n        for (const category of this.ScopeCategories) {\n            category.expanded = false;\n            category.allSelected = false;\n            for (const scope of category.scopes) {\n                scope.selected = false;\n            }\n        }\n    }\n\n    /**\n     * Get minimum date for expiration (tomorrow)\n     */\n    public getMinDate(): Date {\n        const tomorrow = new Date();\n        tomorrow.setDate(tomorrow.getDate() + 1);\n        return tomorrow;\n    }\n}\n","<!-- Slide-out Backdrop -->\n@if (Visible) {\n  <div class=\"slideout-backdrop\" (click)=\"Step !== 'success' ? close() : null\"></div>\n}\n\n<!-- Slide-out Panel -->\n<div class=\"slideout-panel\" [class.open]=\"Visible\">\n  <!-- Header -->\n  <div class=\"slideout-header\">\n    <div class=\"slideout-title\">\n      <i class=\"fa-solid fa-key\"></i>\n      <span>Generate New API Key</span>\n    </div>\n    @if (Step !== 'success') {\n      <button class=\"slideout-close\" (click)=\"close()\" title=\"Close (Esc)\">\n        <i class=\"fa-solid fa-times\"></i>\n      </button>\n    }\n  </div>\n\n  <!-- Step Indicator -->\n  @if (Step !== 'success') {\n    <div class=\"step-indicator\">\n      <div class=\"step\" [class.active]=\"Step === 'configure'\" [class.completed]=\"Step === 'scopes'\">\n        <div class=\"step-number\">1</div>\n        <div class=\"step-label\">Configure</div>\n      </div>\n      <div class=\"step-connector\" [class.active]=\"Step === 'scopes'\"></div>\n      <div class=\"step\" [class.active]=\"Step === 'scopes'\">\n        <div class=\"step-number\">2</div>\n        <div class=\"step-label\">Permissions</div>\n      </div>\n    </div>\n  }\n\n  <div class=\"slideout-content\">\n    <!-- Configure Step -->\n    @if (Step === 'configure') {\n      <div class=\"step-panel\">\n        <div class=\"form-section\">\n          <label class=\"form-label required\">Key Label</label>\n          <input class=\"mj-input form-input\" [(ngModel)]=\"Label\"\n            placeholder=\"e.g., ElevenLabs Integration, CI/CD Pipeline\" />\n          <div class=\"form-hint\">A memorable name to identify this key's purpose</div>\n        </div>\n        <div class=\"form-section\">\n          <label class=\"form-label\">Description</label>\n          <textarea class=\"mj-textarea form-textarea\" [(ngModel)]=\"Description\"\n            placeholder=\"Optional notes about how this key will be used...\"\n            [rows]=\"3\"></textarea>\n        </div>\n        <div class=\"form-section\">\n          <label class=\"form-label\">Expiration</label>\n          <div class=\"expiration-options\">\n            <label class=\"checkbox-label\">\n              <input type=\"checkbox\" class=\"mj-checkbox\"\n                [(ngModel)]=\"NeverExpires\"\n                (change)=\"onNeverExpiresChange()\" />\n              <span>Never expires</span>\n            </label>\n            @if (!NeverExpires) {\n              <div class=\"preset-buttons\">\n                @for (preset of ExpirationPresets; track preset) {\n                  <button\n                    class=\"preset-btn\"\n                    [class.active]=\"SelectedPreset === preset\"\n                    (click)=\"onPresetSelect(preset)\">\n                    {{preset.label}}\n                  </button>\n                }\n              </div>\n            }\n            @if (!NeverExpires && SelectedPreset?.days === -1) {\n              <div class=\"custom-date\">\n                <mj-datepicker [(ngModel)]=\"ExpiresAt\"\n                  [Min]=\"getMinDate()\"\n                  Format=\"MMM d, yyyy\"\n                  Placeholder=\"Select expiration date\">\n                </mj-datepicker>\n              </div>\n            }\n            @if (!NeverExpires && ExpiresAt) {\n              <div class=\"expiration-preview\">\n                <i class=\"fa-solid fa-calendar-check\"></i>\n                <span>Key will expire on {{ExpiresAt | date:'MMMM d, yyyy'}}</span>\n              </div>\n            }\n          </div>\n        </div>\n        @if (Error) {\n          <div class=\"error-message\">\n            <i class=\"fa-solid fa-circle-exclamation\"></i>\n            {{Error}}\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Scopes Step -->\n    @if (Step === 'scopes') {\n      <div class=\"step-panel scopes-step\">\n        <div class=\"scopes-header\">\n          <div class=\"scopes-info\">\n            <h4>Select Permission Scopes</h4>\n            <p>Choose what this API key can access. You can always modify this later.</p>\n          </div>\n          @if (getSelectedScopeCount() > 0) {\n            <div class=\"scopes-count\">\n              <span class=\"count\">{{getSelectedScopeCount()}}</span> selected\n            </div>\n          }\n        </div>\n        @if (IsLoadingScopes) {\n          <mj-loading text=\"Loading scopes...\"></mj-loading>\n        }\n        @if (!IsLoadingScopes) {\n          <div class=\"scope-categories\">\n            @for (category of ScopeCategories; track category) {\n              <div class=\"scope-category\">\n                <div class=\"category-header\" (click)=\"toggleCategory(category)\">\n                  <div class=\"category-left\">\n                    <i [class]=\"category.icon\" [style.color]=\"category.color\"></i>\n                    <span class=\"category-name\">{{category.name}}</span>\n                    <span class=\"category-badge\">{{category.scopes.length}}</span>\n                  </div>\n                  <div class=\"category-right\">\n                    <label class=\"select-all-label\" (click)=\"$event.stopPropagation()\">\n                      <input type=\"checkbox\" class=\"mj-checkbox\"\n                        [checked]=\"category.allSelected\"\n                        (change)=\"toggleCategoryAll(category)\" />\n                      <span>All</span>\n                    </label>\n                    <i class=\"fa-solid\" [class.fa-chevron-down]=\"!category.expanded\"\n                    [class.fa-chevron-up]=\"category.expanded\"></i>\n                  </div>\n                </div>\n                @if (category.expanded) {\n                  <div class=\"category-scopes\">\n                    @for (item of category.scopes; track item) {\n                      <div class=\"scope-item\">\n                        <label class=\"scope-label\">\n                          <input type=\"checkbox\" class=\"mj-checkbox\"\n                            [(ngModel)]=\"item.selected\"\n                            (change)=\"updateCategoryState(category)\" />\n                          <div class=\"scope-info\">\n                            <span class=\"scope-name\">{{item.scope.Name}}</span>\n                            @if (item.scope.Description) {\n                              <span class=\"scope-desc\">\n                                {{item.scope.Description}}\n                              </span>\n                            }\n                          </div>\n                        </label>\n                      </div>\n                    }\n                  </div>\n                }\n              </div>\n            }\n          </div>\n        }\n        <div class=\"scope-tip\">\n          <i class=\"fa-solid fa-lightbulb\"></i>\n          <span>Tip: Use wildcards like <code>entities:*</code> for broad access within a category</span>\n        </div>\n        <!-- No Scopes Warning -->\n        @if (!IsLoadingScopes && getSelectedScopeCount() === 0) {\n          <div class=\"no-scopes-warning\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <div>\n              <strong>Warning: No permissions selected</strong>\n              <p>API keys without any assigned scopes will have <strong>no permissions</strong> and cannot perform any operations. This key will be rejected by all API endpoints until scopes are assigned.</p>\n            </div>\n          </div>\n        }\n      </div>\n    }\n\n    <!-- Success Step -->\n    @if (Step === 'success') {\n      <div class=\"step-panel success-step\">\n        <div class=\"success-icon\">\n          <i class=\"fa-solid fa-check-circle\"></i>\n        </div>\n        <h3 class=\"success-title\">API Key Created Successfully!</h3>\n        <div class=\"key-display\">\n          <div class=\"key-warning\">\n            <i class=\"fa-solid fa-triangle-exclamation\"></i>\n            <span>Copy this key now. It won't be shown again!</span>\n          </div>\n          <div class=\"key-value\">\n            <code>{{RawApiKey}}</code>\n            <button class=\"copy-btn\" (click)=\"copyKey()\" [class.copied]=\"KeyCopied\">\n              <i class=\"fa-solid\" [class.fa-copy]=\"!KeyCopied\" [class.fa-check]=\"KeyCopied\"></i>\n              <span>{{KeyCopied ? 'Copied!' : 'Copy'}}</span>\n            </button>\n          </div>\n        </div>\n        <div class=\"key-details\">\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Label:</span>\n            <span class=\"detail-value\">{{Label}}</span>\n          </div>\n          @if (Description) {\n            <div class=\"detail-row\">\n              <span class=\"detail-label\">Description:</span>\n              <span class=\"detail-value\">{{Description}}</span>\n            </div>\n          }\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Expires:</span>\n            <span class=\"detail-value\">\n              {{NeverExpires ? 'Never' : (ExpiresAt | date:'MMMM d, yyyy')}}\n            </span>\n          </div>\n          <div class=\"detail-row\">\n            <span class=\"detail-label\">Scopes:</span>\n            <span class=\"detail-value\">{{getSelectedScopeCount()}} permissions</span>\n          </div>\n        </div>\n        <div class=\"security-note\">\n          <i class=\"fa-solid fa-shield-check\"></i>\n          <div>\n            <strong>Security Note:</strong>\n            Store this key securely. We only store a hash - the original key cannot be recovered.\n          </div>\n        </div>\n      </div>\n    }\n  </div>\n\n  <!-- Footer -->\n  <div class=\"slideout-footer\">\n    @if (Step === 'configure') {\n      <button mjButton variant=\"primary\" (click)=\"goToScopes()\">\n        Next: Permissions\n        <i class=\"fa-solid fa-arrow-right\"></i>\n      </button>\n      <button mjButton (click)=\"close()\">Cancel</button>\n    }\n\n    @if (Step === 'scopes') {\n      <button mjButton variant=\"primary\"\n        [disabled]=\"IsCreating\"\n        (click)=\"createKey()\">\n        @if (IsCreating) {\n          <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n        }\n        @if (!IsCreating) {\n          <span>\n            <i class=\"fa-solid fa-key\"></i>\n            Generate Key\n          </span>\n        }\n      </button>\n      <button mjButton (click)=\"goBack()\">\n        <i class=\"fa-solid fa-arrow-left\"></i>\n        Back\n      </button>\n    }\n\n    @if (Step === 'success') {\n      <button mjButton variant=\"primary\" (click)=\"close()\">\n        <i class=\"fa-solid fa-check\"></i>\n        Done\n      </button>\n    }\n  </div>\n</div>\n"]}