import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
import { Metadata } from '@memberjunction/core';
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";
function APIKeyCreateDialogComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 13);
    i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_Conditional_0_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.Step !== "success" ? ctx_r1.close() : null); });
    i0.ɵɵelementEnd();
} }
function APIKeyCreateDialogComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 14);
    i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_Conditional_7_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
    i0.ɵɵelement(1, "i", 15);
    i0.ɵɵelementEnd();
} }
function APIKeyCreateDialogComponent_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 6)(1, "div", 16)(2, "div", 17);
    i0.ɵɵtext(3, "1");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 18);
    i0.ɵɵtext(5, "Configure");
    i0.ɵɵelementEnd()();
    i0.ɵɵelement(6, "div", 19);
    i0.ɵɵelementStart(7, "div", 16)(8, "div", 17);
    i0.ɵɵtext(9, "2");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(10, "div", 18);
    i0.ɵɵtext(11, "Permissions");
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵclassProp("active", ctx_r1.Step === "configure")("completed", ctx_r1.Step === "scopes");
    i0.ɵɵadvance(5);
    i0.ɵɵclassProp("active", ctx_r1.Step === "scopes");
    i0.ɵɵadvance();
    i0.ɵɵclassProp("active", ctx_r1.Step === "scopes");
} }
function APIKeyCreateDialogComponent_Conditional_10_Conditional_19_For_2_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 34);
    i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_Conditional_10_Conditional_19_For_2_Template_button_click_0_listener() { const preset_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onPresetSelect(preset_r6)); });
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const preset_r6 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵclassProp("active", ctx_r1.SelectedPreset === preset_r6);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", preset_r6.label, " ");
} }
function APIKeyCreateDialogComponent_Conditional_10_Conditional_19_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 29);
    i0.ɵɵrepeaterCreate(1, APIKeyCreateDialogComponent_Conditional_10_Conditional_19_For_2_Template, 2, 3, "button", 33, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r1.ExpirationPresets);
} }
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.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.ExpiresAt);
    i0.ɵɵproperty("min", ctx_r1.getMinDate());
} }
function APIKeyCreateDialogComponent_Conditional_10_Conditional_21_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 31);
    i0.ɵɵelement(1, "i", 36);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3);
    i0.ɵɵpipe(4, "date");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1("Key will expire on ", i0.ɵɵpipeBind2(4, 1, ctx_r1.ExpiresAt, "MMMM d, yyyy"));
} }
function APIKeyCreateDialogComponent_Conditional_10_Conditional_22_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 32);
    i0.ɵɵelement(1, "i", 37);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.Error, " ");
} }
function APIKeyCreateDialogComponent_Conditional_10_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 8)(1, "div", 20)(2, "label", 21);
    i0.ɵɵtext(3, "Key Label");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "input", 22);
    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyCreateDialogComponent_Conditional_10_Template_input_ngModelChange_4_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.Label, $event) || (ctx_r1.Label = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "div", 23);
    i0.ɵɵtext(6, "A memorable name to identify this key's purpose");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "div", 20)(8, "label", 24);
    i0.ɵɵtext(9, "Description");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(10, "textarea", 25);
    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyCreateDialogComponent_Conditional_10_Template_textarea_ngModelChange_10_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.Description, $event) || (ctx_r1.Description = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(11, "div", 20)(12, "label", 24);
    i0.ɵɵtext(13, "Expiration");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(14, "div", 26)(15, "label", 27)(16, "input", 28);
    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyCreateDialogComponent_Conditional_10_Template_input_ngModelChange_16_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.NeverExpires, $event) || (ctx_r1.NeverExpires = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("change", function APIKeyCreateDialogComponent_Conditional_10_Template_input_change_16_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNeverExpiresChange()); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(17, "span");
    i0.ɵɵtext(18, "Never expires");
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(19, APIKeyCreateDialogComponent_Conditional_10_Conditional_19_Template, 3, 0, "div", 29);
    i0.ɵɵconditionalCreate(20, APIKeyCreateDialogComponent_Conditional_10_Conditional_20_Template, 2, 2, "div", 30);
    i0.ɵɵconditionalCreate(21, APIKeyCreateDialogComponent_Conditional_10_Conditional_21_Template, 5, 4, "div", 31);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(22, APIKeyCreateDialogComponent_Conditional_10_Conditional_22_Template, 3, 1, "div", 32);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(4);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.Label);
    i0.ɵɵadvance(6);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.Description);
    i0.ɵɵproperty("rows", 3);
    i0.ɵɵadvance(6);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.NeverExpires);
    i0.ɵɵadvance(3);
    i0.ɵɵconditional(!ctx_r1.NeverExpires ? 19 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!ctx_r1.NeverExpires && (ctx_r1.SelectedPreset == null ? null : ctx_r1.SelectedPreset.days) === -1 ? 20 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!ctx_r1.NeverExpires && ctx_r1.ExpiresAt ? 21 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.Error ? 22 : -1);
} }
function APIKeyCreateDialogComponent_Conditional_11_Conditional_7_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 40)(1, "span", 46);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵtext(3, " selected ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r1.getSelectedScopeCount());
} }
function APIKeyCreateDialogComponent_Conditional_11_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-loading", 41);
} }
function APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Conditional_14_For_2_Conditional_6_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 61);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const item_r11 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", item_r11.scope.Description, " ");
} }
function APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Conditional_14_For_2_Template(rf, ctx) { if (rf & 1) {
    const _r10 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 57)(1, "label", 58)(2, "input", 28);
    i0.ɵɵtwoWayListener("ngModelChange", function APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Conditional_14_For_2_Template_input_ngModelChange_2_listener($event) { const item_r11 = i0.ɵɵrestoreView(_r10).$implicit; i0.ɵɵtwoWayBindingSet(item_r11.selected, $event) || (item_r11.selected = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵlistener("change", function APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Conditional_14_For_2_Template_input_change_2_listener() { i0.ɵɵrestoreView(_r10); const category_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.updateCategoryState(category_r9)); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 59)(4, "span", 60);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(6, APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Conditional_14_For_2_Conditional_6_Template, 2, 1, "span", 61);
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const item_r11 = ctx.$implicit;
    i0.ɵɵadvance(2);
    i0.ɵɵtwoWayProperty("ngModel", item_r11.selected);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate(item_r11.scope.Name);
    i0.ɵɵadvance();
    i0.ɵɵconditional(item_r11.scope.Description ? 6 : -1);
} }
function APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Conditional_14_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 56);
    i0.ɵɵrepeaterCreate(1, APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Conditional_14_For_2_Template, 7, 3, "div", 57, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const category_r9 = i0.ɵɵnextContext().$implicit;
    i0.ɵɵadvance();
    i0.ɵɵrepeater(category_r9.scopes);
} }
function APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 47)(1, "div", 48);
    i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Template_div_click_1_listener() { const category_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleCategory(category_r9)); });
    i0.ɵɵelementStart(2, "div", 49);
    i0.ɵɵelement(3, "i");
    i0.ɵɵelementStart(4, "span", 50);
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "span", 51);
    i0.ɵɵtext(7);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(8, "div", 52)(9, "label", 53);
    i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Template_label_click_9_listener($event) { i0.ɵɵrestoreView(_r8); return i0.ɵɵresetView($event.stopPropagation()); });
    i0.ɵɵelementStart(10, "input", 54);
    i0.ɵɵlistener("change", function APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Template_input_change_10_listener() { const category_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleCategoryAll(category_r9)); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(11, "span");
    i0.ɵɵtext(12, "All");
    i0.ɵɵelementEnd()();
    i0.ɵɵelement(13, "i", 55);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(14, APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Conditional_14_Template, 3, 0, "div", 56);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const category_r9 = ctx.$implicit;
    i0.ɵɵadvance(3);
    i0.ɵɵclassMap(category_r9.icon);
    i0.ɵɵstyleProp("color", category_r9.color);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(category_r9.name);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(category_r9.scopes.length);
    i0.ɵɵadvance(3);
    i0.ɵɵproperty("checked", category_r9.allSelected);
    i0.ɵɵadvance(3);
    i0.ɵɵclassProp("fa-chevron-down", !category_r9.expanded)("fa-chevron-up", category_r9.expanded);
    i0.ɵɵadvance();
    i0.ɵɵconditional(category_r9.expanded ? 14 : -1);
} }
function APIKeyCreateDialogComponent_Conditional_11_Conditional_9_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 42);
    i0.ɵɵrepeaterCreate(1, APIKeyCreateDialogComponent_Conditional_11_Conditional_9_For_2_Template, 15, 12, "div", 47, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵrepeater(ctx_r1.ScopeCategories);
} }
function APIKeyCreateDialogComponent_Conditional_11_Conditional_17_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 45);
    i0.ɵɵelement(1, "i", 62);
    i0.ɵɵelementStart(2, "div")(3, "strong");
    i0.ɵɵtext(4, "Warning: No permissions selected");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "p");
    i0.ɵɵtext(6, "API keys without any assigned scopes will have ");
    i0.ɵɵelementStart(7, "strong");
    i0.ɵɵtext(8, "no permissions");
    i0.ɵɵelementEnd();
    i0.ɵɵtext(9, " and cannot perform any operations. This key will be rejected by all API endpoints until scopes are assigned.");
    i0.ɵɵelementEnd()()();
} }
function APIKeyCreateDialogComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 9)(1, "div", 38)(2, "div", 39)(3, "h4");
    i0.ɵɵtext(4, "Select Permission Scopes");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "p");
    i0.ɵɵtext(6, "Choose what this API key can access. You can always modify this later.");
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(7, APIKeyCreateDialogComponent_Conditional_11_Conditional_7_Template, 4, 1, "div", 40);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(8, APIKeyCreateDialogComponent_Conditional_11_Conditional_8_Template, 1, 0, "mj-loading", 41);
    i0.ɵɵconditionalCreate(9, APIKeyCreateDialogComponent_Conditional_11_Conditional_9_Template, 3, 0, "div", 42);
    i0.ɵɵelementStart(10, "div", 43);
    i0.ɵɵelement(11, "i", 44);
    i0.ɵɵelementStart(12, "span");
    i0.ɵɵtext(13, "Tip: Use wildcards like ");
    i0.ɵɵelementStart(14, "code");
    i0.ɵɵtext(15, "entities:*");
    i0.ɵɵelementEnd();
    i0.ɵɵtext(16, " for broad access within a category");
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(17, APIKeyCreateDialogComponent_Conditional_11_Conditional_17_Template, 10, 0, "div", 45);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(7);
    i0.ɵɵconditional(ctx_r1.getSelectedScopeCount() > 0 ? 7 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.IsLoadingScopes ? 8 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!ctx_r1.IsLoadingScopes ? 9 : -1);
    i0.ɵɵadvance(8);
    i0.ɵɵconditional(!ctx_r1.IsLoadingScopes && ctx_r1.getSelectedScopeCount() === 0 ? 17 : -1);
} }
function APIKeyCreateDialogComponent_Conditional_12_Conditional_23_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 71)(1, "span", 72);
    i0.ɵɵtext(2, "Description:");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "span", 73);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate(ctx_r1.Description);
} }
function APIKeyCreateDialogComponent_Conditional_12_Template(rf, ctx) { if (rf & 1) {
    const _r12 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 10)(1, "div", 63);
    i0.ɵɵelement(2, "i", 64);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "h3", 65);
    i0.ɵɵtext(4, "API Key Created Successfully!");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "div", 66)(6, "div", 67);
    i0.ɵɵelement(7, "i", 62);
    i0.ɵɵelementStart(8, "span");
    i0.ɵɵtext(9, "Copy this key now. It won't be shown again!");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(10, "div", 68)(11, "code");
    i0.ɵɵtext(12);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(13, "button", 69);
    i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_Conditional_12_Template_button_click_13_listener() { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.copyKey()); });
    i0.ɵɵelement(14, "i", 55);
    i0.ɵɵelementStart(15, "span");
    i0.ɵɵtext(16);
    i0.ɵɵelementEnd()()()();
    i0.ɵɵelementStart(17, "div", 70)(18, "div", 71)(19, "span", 72);
    i0.ɵɵtext(20, "Label:");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(21, "span", 73);
    i0.ɵɵtext(22);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(23, APIKeyCreateDialogComponent_Conditional_12_Conditional_23_Template, 5, 1, "div", 71);
    i0.ɵɵelementStart(24, "div", 71)(25, "span", 72);
    i0.ɵɵtext(26, "Expires:");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(27, "span", 73);
    i0.ɵɵtext(28);
    i0.ɵɵpipe(29, "date");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(30, "div", 71)(31, "span", 72);
    i0.ɵɵtext(32, "Scopes:");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(33, "span", 73);
    i0.ɵɵtext(34);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(35, "div", 74);
    i0.ɵɵelement(36, "i", 75);
    i0.ɵɵelementStart(37, "div")(38, "strong");
    i0.ɵɵtext(39, "Security Note:");
    i0.ɵɵelementEnd();
    i0.ɵɵtext(40, " Store this key securely. We only store a hash - the original key cannot be recovered. ");
    i0.ɵɵelementEnd()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(12);
    i0.ɵɵtextInterpolate(ctx_r1.RawApiKey);
    i0.ɵɵadvance();
    i0.ɵɵclassProp("copied", ctx_r1.KeyCopied);
    i0.ɵɵadvance();
    i0.ɵɵclassProp("fa-copy", !ctx_r1.KeyCopied)("fa-check", ctx_r1.KeyCopied);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r1.KeyCopied ? "Copied!" : "Copy");
    i0.ɵɵadvance(6);
    i0.ɵɵtextInterpolate(ctx_r1.Label);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.Description ? 23 : -1);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.NeverExpires ? "Never" : i0.ɵɵpipeBind2(29, 12, ctx_r1.ExpiresAt, "MMMM d, yyyy"), " ");
    i0.ɵɵadvance(6);
    i0.ɵɵtextInterpolate1("", ctx_r1.getSelectedScopeCount(), " permissions");
} }
function APIKeyCreateDialogComponent_Conditional_14_Template(rf, ctx) { if (rf & 1) {
    const _r13 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 76);
    i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_Conditional_14_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.goToScopes()); });
    i0.ɵɵtext(1, " Next: Permissions ");
    i0.ɵɵelement(2, "i", 77);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "button", 78);
    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);
} if (rf & 2) {
    i0.ɵɵproperty("showText", false);
} }
function APIKeyCreateDialogComponent_Conditional_15_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span");
    i0.ɵɵelement(1, "i", 4);
    i0.ɵɵtext(2, " Generate Key ");
    i0.ɵɵelementEnd();
} }
function APIKeyCreateDialogComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    const _r14 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 79);
    i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_Conditional_15_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.createKey()); });
    i0.ɵɵconditionalCreate(1, APIKeyCreateDialogComponent_Conditional_15_Conditional_1_Template, 1, 1, "mj-loading", 80);
    i0.ɵɵconditionalCreate(2, APIKeyCreateDialogComponent_Conditional_15_Conditional_2_Template, 3, 0, "span");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "button", 78);
    i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_Conditional_15_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.goBack()); });
    i0.ɵɵelement(4, "i", 81);
    i0.ɵɵtext(5, " Back ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("themeColor", "primary")("disabled", ctx_r1.IsCreating);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.IsCreating ? 1 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!ctx_r1.IsCreating ? 2 : -1);
} }
function APIKeyCreateDialogComponent_Conditional_16_Template(rf, ctx) { if (rf & 1) {
    const _r15 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 76);
    i0.ɵɵlistener("click", function APIKeyCreateDialogComponent_Conditional_16_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.close()); });
    i0.ɵɵelement(1, "i", 82);
    i0.ɵɵtext(2, " Done ");
    i0.ɵɵelementEnd();
} if (rf & 2) {
    i0.ɵɵproperty("themeColor", "primary");
} }
/**
 * Dialog for creating new API keys
 * Shows the raw key only once - it cannot be recovered after closing
 */
export class APIKeyCreateDialogComponent {
    Visible = false;
    VisibleChange = new EventEmitter();
    Created = new EventEmitter();
    Closed = new EventEmitter();
    // Form fields
    Label = '';
    Description = '';
    ExpiresAt = null;
    NeverExpires = true;
    // Expiration presets
    ExpirationPresets = [
        { label: '30 days', days: 30 },
        { label: '90 days', days: 90 },
        { label: '1 year', days: 365 },
        { label: 'Custom', days: -1 }
    ];
    SelectedPreset = null;
    // Scopes
    ScopeCategories = [];
    IsLoadingScopes = true;
    // State
    IsCreating = false;
    Step = 'configure';
    RawApiKey = '';
    KeyCopied = false;
    Error = '';
    // Default UI config for categories without explicit configuration
    defaultUIConfig = {
        icon: 'fa-solid fa-ellipsis',
        color: 'var(--mj-text-muted)'
    };
    ngOnInit() {
        this.loadScopes();
    }
    /**
     * Handle escape key to close dialog
     */
    onEscapeKey() {
        if (this.Visible && !this.IsCreating) {
            this.close();
        }
    }
    /**
     * Load available scopes from cached data.
     * Uses UIConfig from root scopes for category icons/colors.
     */
    loadScopes() {
        this.IsLoadingScopes = true;
        try {
            const base = APIKeysEngineBase.Instance;
            const scopes = base.Scopes;
            // Build a map of category -> root scope UIConfig
            // Root scopes (ParentID is null) define the UI appearance for their category
            const categoryUIConfigs = new Map();
            for (const scope of scopes) {
                if (!scope.ParentID) {
                    // This is a root scope - use its UIConfig for the category
                    const uiConfig = parseAPIScopeUIConfig(scope);
                    categoryUIConfigs.set(scope.Category, {
                        icon: uiConfig.icon || this.defaultUIConfig.icon,
                        color: uiConfig.color || this.defaultUIConfig.color
                    });
                }
            }
            // Group scopes by category
            const categoryMap = new Map();
            for (const scope of scopes) {
                const category = scope.Category || 'Other';
                if (!categoryMap.has(category)) {
                    categoryMap.set(category, []);
                }
                categoryMap.get(category).push({
                    scope,
                    selected: false
                });
            }
            // Build categories with UI config from root scopes
            this.ScopeCategories = Array.from(categoryMap.entries())
                .sort(([a], [b]) => a.localeCompare(b))
                .map(([name, scopeItems]) => {
                const config = categoryUIConfigs.get(name) || this.defaultUIConfig;
                return {
                    name,
                    icon: config.icon,
                    color: config.color,
                    scopes: scopeItems.sort((a, b) => a.scope.Name.localeCompare(b.scope.Name)),
                    expanded: false,
                    allSelected: false
                };
            });
        }
        catch (error) {
            console.error('Error loading scopes:', error);
        }
        finally {
            this.IsLoadingScopes = false;
        }
    }
    /**
     * Handle expiration preset selection
     */
    onPresetSelect(preset) {
        this.SelectedPreset = preset;
        this.NeverExpires = false;
        if (preset.days > 0) {
            const date = new Date();
            date.setDate(date.getDate() + preset.days);
            this.ExpiresAt = date;
        }
        else {
            this.ExpiresAt = null;
        }
    }
    /**
     * Handle never expires toggle
     */
    onNeverExpiresChange() {
        if (this.NeverExpires) {
            this.ExpiresAt = null;
            this.SelectedPreset = null;
        }
    }
    /**
     * Toggle category expansion
     */
    toggleCategory(category) {
        category.expanded = !category.expanded;
    }
    /**
     * Toggle all scopes in a category
     */
    toggleCategoryAll(category) {
        category.allSelected = !category.allSelected;
        for (const item of category.scopes) {
            item.selected = category.allSelected;
        }
    }
    /**
     * Update category allSelected state
     */
    updateCategoryState(category) {
        category.allSelected = category.scopes.every(s => s.selected);
    }
    /**
     * Get selected scope count
     */
    getSelectedScopeCount() {
        return this.ScopeCategories.reduce((sum, cat) => sum + cat.scopes.filter(s => s.selected).length, 0);
    }
    /**
     * Proceed to scopes step
     */
    goToScopes() {
        if (!this.Label.trim()) {
            this.Error = 'Please enter a label for the API key';
            return;
        }
        this.Error = '';
        this.Step = 'scopes';
    }
    /**
     * Go back to configure step
     */
    goBack() {
        this.Step = 'configure';
    }
    /**
     * Create the API key using server-side cryptographic hashing
     */
    async createKey() {
        this.IsCreating = true;
        this.Error = '';
        try {
            // Get selected scope IDs
            const selectedScopeIds = this.ScopeCategories
                .flatMap(cat => cat.scopes)
                .filter(s => s.selected)
                .map(s => s.scope.ID);
            // Get the GraphQL provider and create the encryption client
            const provider = Metadata.Provider;
            const encryptionClient = new GraphQLEncryptionClient(provider);
            // Call the server to create the API key with proper crypto hashing
            const result = await encryptionClient.CreateAPIKey({
                Label: this.Label.trim(),
                Description: this.Description.trim() || undefined,
                ExpiresAt: this.NeverExpires ? undefined : (this.ExpiresAt || undefined),
                ScopeIDs: selectedScopeIds.length > 0 ? selectedScopeIds : undefined
            });
            if (result.Success && result.RawKey) {
                this.RawApiKey = result.RawKey;
                this.Step = 'success';
                this.Created.emit({
                    success: true,
                    rawKey: result.RawKey
                });
            }
            else {
                this.Error = result.Error || 'Failed to create API key. Please try again.';
            }
        }
        catch (error) {
            console.error('Error creating API key:', error);
            this.Error = 'An error occurred while creating the API key.';
        }
        finally {
            this.IsCreating = false;
        }
    }
    /**
     * Copy the API key to clipboard
     */
    async copyKey() {
        try {
            await navigator.clipboard.writeText(this.RawApiKey);
            this.KeyCopied = true;
            setTimeout(() => this.KeyCopied = false, 3000);
        }
        catch (error) {
            console.error('Failed to copy key:', error);
        }
    }
    /**
     * Close the dialog
     */
    close() {
        this.reset();
        this.Visible = false;
        this.VisibleChange.emit(false);
        this.Closed.emit();
    }
    /**
     * Reset form state
     */
    reset() {
        this.Label = '';
        this.Description = '';
        this.ExpiresAt = null;
        this.NeverExpires = true;
        this.SelectedPreset = null;
        this.Step = 'configure';
        this.RawApiKey = '';
        this.KeyCopied = false;
        this.Error = '';
        // Reset scope selections
        for (const category of this.ScopeCategories) {
            category.expanded = false;
            category.allSelected = false;
            for (const scope of category.scopes) {
                scope.selected = false;
            }
        }
    }
    /**
     * Get minimum date for expiration (tomorrow)
     */
    getMinDate() {
        const tomorrow = new Date();
        tomorrow.setDate(tomorrow.getDate() + 1);
        return tomorrow;
    }
    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) {
            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);
            i0.ɵɵelementStart(5, "span");
            i0.ɵɵtext(6, "Generate New API Key");
            i0.ɵɵelementEnd()();
            i0.ɵɵconditionalCreate(7, APIKeyCreateDialogComponent_Conditional_7_Template, 2, 0, "button", 5);
            i0.ɵɵelementEnd();
            i0.ɵɵconditionalCreate(8, APIKeyCreateDialogComponent_Conditional_8_Template, 12, 8, "div", 6);
            i0.ɵɵelementStart(9, "div", 7);
            i0.ɵɵconditionalCreate(10, APIKeyCreateDialogComponent_Conditional_10_Template, 23, 8, "div", 8);
            i0.ɵɵconditionalCreate(11, APIKeyCreateDialogComponent_Conditional_11_Template, 18, 4, "div", 9);
            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.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵconditional(ctx.Visible ? 0 : -1);
            i0.ɵɵadvance();
            i0.ɵɵclassProp("open", ctx.Visible);
            i0.ɵɵadvance(6);
            i0.ɵɵconditional(ctx.Step !== "success" ? 7 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.Step !== "success" ? 8 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.Step === "configure" ? 10 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.Step === "scopes" ? 11 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.Step === "success" ? 12 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.Step === "configure" ? 14 : -1);
            i0.ɵɵadvance();
            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}"] });
}
(() => { (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"] }]
    }], null, { Visible: [{
            type: Input
        }], VisibleChange: [{
            type: Output
        }], Created: [{
            type: Output
        }], Closed: [{
            type: Output
        }], onEscapeKey: [{
            type: HostListener,
            args: ['document:keydown.escape']
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIKeyCreateDialogComponent, { className: "APIKeyCreateDialogComponent", filePath: "src/APIKeys/api-key-create-dialog.component.ts", lineNumber: 40 }); })();
//# sourceMappingURL=api-key-create-dialog.component.js.map