import { Component, EventEmitter, Output } from '@angular/core';
import { Metadata, RunView } from '@memberjunction/core';
import { UUIDsEqual } from '@memberjunction/global';
import * as i0 from "@angular/core";
import * as i1 from "@angular/common";
import * as i2 from "@angular/forms";
import * as i3 from "@progress/kendo-angular-buttons";
import * as i4 from "@progress/kendo-angular-dropdowns";
import * as i5 from "@progress/kendo-angular-inputs";
import * as i6 from "@progress/kendo-angular-dialog";
import * as i7 from "@memberjunction/ng-shared-generic";
const _c0 = a0 => ({ node: a0 });
const _c1 = () => ({ FullPath: "(No Parent - Root Level)", ID: null });
function APIScopesPanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-loading", 2);
} }
function APIScopesPanelComponent_Conditional_2_Conditional_23_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 22);
    i0.ɵɵelement(1, "i", 14);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.SuccessMessage, " ");
} }
function APIScopesPanelComponent_Conditional_2_Conditional_24_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 23);
    i0.ɵɵelement(1, "i", 26);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.ErrorMessage, " ");
} }
function APIScopesPanelComponent_Conditional_2_For_27_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function APIScopesPanelComponent_Conditional_2_For_27_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, APIScopesPanelComponent_Conditional_2_For_27_ng_container_0_Template, 1, 0, "ng-container", 27);
} if (rf & 2) {
    const node_r3 = ctx.$implicit;
    i0.ɵɵnextContext();
    const scopeNode_r4 = i0.ɵɵreference(30);
    i0.ɵɵproperty("ngTemplateOutlet", scopeNode_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, node_r3));
} }
function APIScopesPanelComponent_Conditional_2_Conditional_28_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 25);
    i0.ɵɵelement(1, "i", 7);
    i0.ɵɵelementStart(2, "span");
    i0.ɵɵtext(3, "No scopes configured");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "p");
    i0.ɵɵtext(5, "Create scopes to define API access permissions");
    i0.ɵɵelementEnd()();
} }
function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 47);
    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const node_r7 = i0.ɵɵnextContext().node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.toggleExpanded(node_r7)); });
    i0.ɵɵelement(1, "i", 48);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const node_r7 = i0.ɵɵnextContext().node;
    i0.ɵɵadvance();
    i0.ɵɵclassProp("fa-chevron-right", !node_r7.expanded)("fa-chevron-down", node_r7.expanded);
} }
function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "span", 31);
} }
function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_10_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 36);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const node_r7 = i0.ɵɵnextContext().node;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", node_r7.scope.FullPath, " ");
} }
function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 37);
    i0.ɵɵtext(1, "Inactive");
    i0.ɵɵelementEnd();
} }
function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 40);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const node_r7 = i0.ɵɵnextContext().node;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", node_r7.scope.ResourceType, " ");
} }
function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_16_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 41);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const node_r7 = i0.ɵɵnextContext().node;
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", node_r7.scope.Description, " ");
} }
function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_For_2_ng_container_0_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementContainer(0);
} }
function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_For_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵtemplate(0, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_For_2_ng_container_0_Template, 1, 0, "ng-container", 27);
} if (rf & 2) {
    const child_r8 = ctx.$implicit;
    i0.ɵɵnextContext(3);
    const scopeNode_r4 = i0.ɵɵreference(30);
    i0.ɵɵproperty("ngTemplateOutlet", scopeNode_r4)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, child_r8));
} }
function APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 46);
    i0.ɵɵrepeaterCreate(1, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_For_2_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const node_r7 = i0.ɵɵnextContext().node;
    i0.ɵɵadvance();
    i0.ɵɵrepeater(node_r7.children);
} }
function APIScopesPanelComponent_Conditional_2_ng_template_29_Template(rf, ctx) { if (rf & 1) {
    const _r5 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 28)(1, "div", 29);
    i0.ɵɵconditionalCreate(2, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_2_Template, 2, 4, "button", 30);
    i0.ɵɵconditionalCreate(3, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_3_Template, 1, 0, "span", 31);
    i0.ɵɵelementStart(4, "div", 32);
    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_ng_template_29_Template_div_click_4_listener() { const node_r7 = i0.ɵɵrestoreView(_r5).node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openEditDialog(node_r7.scope)); });
    i0.ɵɵelementStart(5, "div", 33);
    i0.ɵɵelement(6, "i", 12);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "div", 34)(8, "div", 35);
    i0.ɵɵtext(9);
    i0.ɵɵconditionalCreate(10, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_10_Template, 2, 1, "span", 36);
    i0.ɵɵconditionalCreate(11, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_11_Template, 2, 0, "span", 37);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(12, "div", 38)(13, "span", 39);
    i0.ɵɵtext(14);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(15, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_15_Template, 2, 1, "span", 40);
    i0.ɵɵconditionalCreate(16, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_16_Template, 2, 1, "span", 41);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(17, "div", 42)(18, "button", 43);
    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_ng_template_29_Template_button_click_18_listener() { const node_r7 = i0.ɵɵrestoreView(_r5).node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openCreateDialog(node_r7.scope)); });
    i0.ɵɵelement(19, "i", 21);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(20, "button", 44);
    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_ng_template_29_Template_button_click_20_listener() { const node_r7 = i0.ɵɵrestoreView(_r5).node; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.openEditDialog(node_r7.scope)); });
    i0.ɵɵelement(21, "i", 45);
    i0.ɵɵelementEnd()()();
    i0.ɵɵconditionalCreate(22, APIScopesPanelComponent_Conditional_2_ng_template_29_Conditional_22_Template, 3, 0, "div", 46);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const node_r7 = ctx.node;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵstyleProp("padding-left", node_r7.level * 24, "px");
    i0.ɵɵadvance();
    i0.ɵɵclassProp("inactive", !node_r7.scope.IsActive);
    i0.ɵɵadvance();
    i0.ɵɵconditional(node_r7.children.length > 0 ? 2 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(node_r7.children.length === 0 ? 3 : -1);
    i0.ɵɵadvance(2);
    i0.ɵɵstyleProp("background-color", ctx_r1.getCategoryColor(node_r7.scope.Category));
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate1(" ", node_r7.scope.Name, " ");
    i0.ɵɵadvance();
    i0.ɵɵconditional(node_r7.scope.FullPath && node_r7.scope.FullPath !== node_r7.scope.Name ? 10 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!node_r7.scope.IsActive ? 11 : -1);
    i0.ɵɵadvance(2);
    i0.ɵɵstyleProp("color", ctx_r1.getCategoryColor(node_r7.scope.Category));
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", node_r7.scope.Category, " ");
    i0.ɵɵadvance();
    i0.ɵɵconditional(node_r7.scope.ResourceType ? 15 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(node_r7.scope.Description ? 16 : -1);
    i0.ɵɵadvance(6);
    i0.ɵɵconditional(node_r7.expanded && node_r7.children.length > 0 ? 22 : -1);
} }
function APIScopesPanelComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 4)(1, "div", 5)(2, "h3", 6);
    i0.ɵɵelement(3, "i", 7);
    i0.ɵɵtext(4, " API Scopes ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "p", 8);
    i0.ɵɵtext(6, "Manage hierarchical permission scopes for API access");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(7, "div", 9)(8, "div", 10)(9, "span", 11);
    i0.ɵɵelement(10, "i", 12);
    i0.ɵɵtext(11);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(12, "span", 13);
    i0.ɵɵelement(13, "i", 14);
    i0.ɵɵtext(14);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(15, "div", 15)(16, "button", 16);
    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_Template_button_click_16_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.expandAll()); });
    i0.ɵɵelement(17, "i", 17);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(18, "button", 18);
    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_Template_button_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.collapseAll()); });
    i0.ɵɵelement(19, "i", 19);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(20, "button", 20);
    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_2_Template_button_click_20_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openCreateDialog()); });
    i0.ɵɵelement(21, "i", 21);
    i0.ɵɵtext(22, " New Scope ");
    i0.ɵɵelementEnd()()();
    i0.ɵɵconditionalCreate(23, APIScopesPanelComponent_Conditional_2_Conditional_23_Template, 3, 1, "div", 22);
    i0.ɵɵconditionalCreate(24, APIScopesPanelComponent_Conditional_2_Conditional_24_Template, 3, 1, "div", 23);
    i0.ɵɵelementStart(25, "div", 24);
    i0.ɵɵrepeaterCreate(26, APIScopesPanelComponent_Conditional_2_For_27_Template, 1, 4, "ng-container", null, i0.ɵɵrepeaterTrackByIdentity);
    i0.ɵɵconditionalCreate(28, APIScopesPanelComponent_Conditional_2_Conditional_28_Template, 6, 0, "div", 25);
    i0.ɵɵelementEnd();
    i0.ɵɵtemplate(29, APIScopesPanelComponent_Conditional_2_ng_template_29_Template, 23, 17, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(11);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.getTotalCount(), " total ");
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.getActiveCount(), " active ");
    i0.ɵɵadvance(9);
    i0.ɵɵconditional(ctx_r1.SuccessMessage ? 23 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.ErrorMessage ? 24 : -1);
    i0.ɵɵadvance(2);
    i0.ɵɵrepeater(ctx_r1.ScopeTree);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r1.ScopeTree.length === 0 ? 28 : -1);
} }
function APIScopesPanelComponent_Conditional_3_Conditional_19_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 56);
    i0.ɵɵtext(1, " Full path will be: ");
    i0.ɵɵelementStart(2, "code");
    i0.ɵɵtext(3);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate2("", ctx_r1.SelectedParentScope.FullPath, ":", ctx_r1.EditName || "...");
} }
function APIScopesPanelComponent_Conditional_3_Conditional_43_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "mj-loading", 68);
} if (rf & 2) {
    i0.ɵɵproperty("showText", false);
} }
function APIScopesPanelComponent_Conditional_3_Conditional_44_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span");
    i0.ɵɵelement(1, "i", 70);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.EditingScope ? "Update" : "Create", " ");
} }
function APIScopesPanelComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
    const _r9 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "kendo-window", 49);
    i0.ɵɵlistener("close", function APIScopesPanelComponent_Conditional_3_Template_kendo_window_close_0_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDialogs()); });
    i0.ɵɵelementStart(1, "kendo-window-titlebar")(2, "div", 50);
    i0.ɵɵelement(3, "i", 7);
    i0.ɵɵelementStart(4, "span");
    i0.ɵɵtext(5);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(6, "button", 51);
    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_3_Template_button_click_6_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDialogs()); });
    i0.ɵɵelement(7, "i", 52);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(8, "div", 53)(9, "div", 54)(10, "label");
    i0.ɵɵtext(11, "Scope Name *");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(12, "input", 55);
    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_input_ngModelChange_12_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditName, $event) || (ctx_r1.EditName = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(13, "span", 56);
    i0.ɵɵtext(14, "Use lowercase, single word. Will be combined with parent for full path.");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(15, "div", 54)(16, "label");
    i0.ɵɵtext(17, "Parent Scope");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(18, "kendo-dropdownlist", 57);
    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_kendo_dropdownlist_ngModelChange_18_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditParentId, $event) || (ctx_r1.EditParentId = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(19, APIScopesPanelComponent_Conditional_3_Conditional_19_Template, 4, 2, "span", 56);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(20, "div", 58)(21, "div", 59)(22, "label");
    i0.ɵɵtext(23, "Category");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(24, "kendo-dropdownlist", 60);
    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_kendo_dropdownlist_ngModelChange_24_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditCategory, $event) || (ctx_r1.EditCategory = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(25, "div", 59)(26, "label");
    i0.ɵɵtext(27, "Resource Type");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(28, "kendo-dropdownlist", 61);
    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_kendo_dropdownlist_ngModelChange_28_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditResourceType, $event) || (ctx_r1.EditResourceType = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(29, "div", 54)(30, "label");
    i0.ɵɵtext(31, "Description");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(32, "textarea", 62);
    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_textarea_ngModelChange_32_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditDescription, $event) || (ctx_r1.EditDescription = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(33, "div", 54)(34, "label", 63)(35, "input", 64);
    i0.ɵɵtwoWayListener("ngModelChange", function APIScopesPanelComponent_Conditional_3_Template_input_ngModelChange_35_listener($event) { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditIsActive, $event) || (ctx_r1.EditIsActive = $event); return i0.ɵɵresetView($event); });
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(36, "div")(37, "span");
    i0.ɵɵtext(38, "Active");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(39, "span", 65);
    i0.ɵɵtext(40, "Inactive scopes cannot be assigned to keys or applications");
    i0.ɵɵelementEnd()()()();
    i0.ɵɵelementStart(41, "div", 66)(42, "button", 67);
    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_3_Template_button_click_42_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.saveScope()); });
    i0.ɵɵconditionalCreate(43, APIScopesPanelComponent_Conditional_3_Conditional_43_Template, 1, 1, "mj-loading", 68);
    i0.ɵɵconditionalCreate(44, APIScopesPanelComponent_Conditional_3_Conditional_44_Template, 3, 1, "span");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(45, "button", 69);
    i0.ɵɵlistener("click", function APIScopesPanelComponent_Conditional_3_Template_button_click_45_listener() { i0.ɵɵrestoreView(_r9); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.closeDialogs()); });
    i0.ɵɵtext(46, "Cancel");
    i0.ɵɵelementEnd()()()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵproperty("width", 560)("minWidth", 420)("minHeight", 480)("resizable", true)("draggable", true)("top", 80);
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r1.EditingScope ? "Edit Scope" : "New Scope");
    i0.ɵɵadvance(7);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditName);
    i0.ɵɵadvance(6);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditParentId);
    i0.ɵɵproperty("data", ctx_r1.getParentOptions())("textField", "FullPath")("valueField", "ID")("valuePrimitive", true)("defaultItem", i0.ɵɵpureFunction0(29, _c1));
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.SelectedParentScope ? 19 : -1);
    i0.ɵɵadvance(5);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditCategory);
    i0.ɵɵproperty("data", ctx_r1.Categories)("valuePrimitive", true);
    i0.ɵɵadvance(4);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditResourceType);
    i0.ɵɵproperty("data", ctx_r1.ResourceTypes)("valuePrimitive", true)("defaultItem", "");
    i0.ɵɵadvance(4);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditDescription);
    i0.ɵɵproperty("rows", 3);
    i0.ɵɵadvance(3);
    i0.ɵɵtwoWayProperty("ngModel", ctx_r1.EditIsActive);
    i0.ɵɵadvance(7);
    i0.ɵɵproperty("themeColor", "primary")("disabled", !ctx_r1.EditName.trim() || ctx_r1.IsSaving);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.IsSaving ? 43 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(!ctx_r1.IsSaving ? 44 : -1);
} }
/**
 * API Scopes Panel Component
 * Manages API Scopes in a hierarchical tree structure
 */
export class APIScopesPanelComponent {
    ScopeUpdated = new EventEmitter();
    md = new Metadata();
    cdr;
    // Loading states
    IsLoading = true;
    IsSaving = false;
    // Data
    ScopeTree = [];
    FlatScopes = [];
    // Edit state
    EditingScope = null;
    EditName = '';
    EditDescription = '';
    EditCategory = '';
    EditResourceType = '';
    EditParentId = null;
    EditIsActive = true;
    // Dialog states
    ShowCreateDialog = false;
    ShowEditDialog = false;
    SelectedParentScope = null;
    // Messages
    SuccessMessage = '';
    ErrorMessage = '';
    // Category colors
    CategoryColors = {
        'Entities': '#6366f1',
        'Agents': '#10b981',
        'Admin': '#f59e0b',
        'Actions': '#8b5cf6',
        'Queries': '#3b82f6',
        'Reports': '#ef4444',
        'Communication': '#ec4899',
        'Other': '#6b7280'
    };
    // Resource type options
    ResourceTypes = ['Entity', 'Agent', 'Query', 'Mutation', 'Action', 'Report', 'Admin', 'Other'];
    Categories = ['Entities', 'Agents', 'Admin', 'Actions', 'Queries', 'Reports', 'Communication', 'Other'];
    constructor(cdr) {
        this.cdr = cdr;
    }
    async ngOnInit() {
        await this.loadData();
    }
    /**
     * Load all scopes
     */
    async loadData() {
        this.IsLoading = true;
        try {
            const rv = new RunView();
            const result = await rv.RunView({
                EntityName: 'MJ: API Scopes',
                OrderBy: 'FullPath',
                ResultType: 'entity_object'
            });
            if (result.Success) {
                this.FlatScopes = result.Results;
                this.buildTree();
            }
        }
        catch (error) {
            console.error('Error loading scopes:', error);
            this.ErrorMessage = 'Failed to load scopes';
        }
        finally {
            this.IsLoading = false;
            this.cdr.markForCheck();
        }
    }
    /**
     * Build tree structure from flat scopes
     */
    buildTree() {
        const scopeMap = new Map();
        const rootNodes = [];
        // Create nodes
        for (const scope of this.FlatScopes) {
            scopeMap.set(scope.ID, {
                scope,
                children: [],
                expanded: true,
                level: 0
            });
        }
        // Build hierarchy
        for (const scope of this.FlatScopes) {
            const node = scopeMap.get(scope.ID);
            if (scope.ParentID) {
                const parent = scopeMap.get(scope.ParentID);
                if (parent) {
                    parent.children.push(node);
                    node.level = parent.level + 1;
                }
                else {
                    rootNodes.push(node);
                }
            }
            else {
                rootNodes.push(node);
            }
        }
        // Calculate levels recursively
        const calculateLevels = (nodes, level) => {
            for (const node of nodes) {
                node.level = level;
                calculateLevels(node.children, level + 1);
            }
        };
        calculateLevels(rootNodes, 0);
        this.ScopeTree = rootNodes;
    }
    /**
     * Open create dialog for new scope
     */
    openCreateDialog(parentScope = null) {
        this.EditName = '';
        this.EditDescription = '';
        this.EditCategory = parentScope?.Category || 'Entities';
        this.EditResourceType = '';
        this.EditParentId = parentScope?.ID || null;
        this.EditIsActive = true;
        this.EditingScope = null;
        this.SelectedParentScope = parentScope;
        this.ShowCreateDialog = true;
    }
    /**
     * Open edit dialog for existing scope
     */
    openEditDialog(scope) {
        this.EditingScope = scope;
        this.EditName = scope.Name;
        this.EditDescription = scope.Description || '';
        this.EditCategory = scope.Category || 'Entities';
        this.EditResourceType = scope.ResourceType || '';
        this.EditParentId = scope.ParentID;
        this.EditIsActive = scope.IsActive;
        this.SelectedParentScope = scope.ParentID
            ? this.FlatScopes.find(s => UUIDsEqual(s.ID, scope.ParentID)) || null
            : null;
        this.ShowEditDialog = true;
    }
    /**
     * Save scope (create or update)
     */
    async saveScope() {
        this.IsSaving = true;
        this.ErrorMessage = '';
        try {
            let scope;
            if (this.EditingScope) {
                scope = this.EditingScope;
            }
            else {
                scope = await this.md.GetEntityObject('MJ: API Scopes');
                scope.NewRecord();
            }
            scope.Name = this.EditName.trim();
            scope.Description = this.EditDescription.trim() || null;
            scope.Category = this.EditCategory;
            scope.ResourceType = this.EditResourceType || null;
            scope.ParentID = this.EditParentId;
            scope.IsActive = this.EditIsActive;
            // FullPath is auto-computed by the trigger
            const result = await scope.Save();
            if (result) {
                this.SuccessMessage = this.EditingScope
                    ? 'Scope updated successfully'
                    : 'Scope created successfully';
                this.closeDialogs();
                await this.loadData();
                this.ScopeUpdated.emit();
                setTimeout(() => this.SuccessMessage = '', 3000);
            }
            else {
                this.ErrorMessage = 'Failed to save scope';
            }
        }
        catch (error) {
            console.error('Error saving scope:', error);
            this.ErrorMessage = 'An error occurred while saving';
        }
        finally {
            this.IsSaving = false;
        }
    }
    /**
     * Toggle node expansion
     */
    toggleExpanded(node) {
        node.expanded = !node.expanded;
    }
    /**
     * Expand all nodes
     */
    expandAll() {
        const expand = (nodes) => {
            for (const node of nodes) {
                node.expanded = true;
                expand(node.children);
            }
        };
        expand(this.ScopeTree);
    }
    /**
     * Collapse all nodes
     */
    collapseAll() {
        const collapse = (nodes) => {
            for (const node of nodes) {
                node.expanded = false;
                collapse(node.children);
            }
        };
        collapse(this.ScopeTree);
    }
    /**
     * Close all dialogs
     */
    closeDialogs() {
        this.ShowCreateDialog = false;
        this.ShowEditDialog = false;
        this.EditingScope = null;
        this.SelectedParentScope = null;
    }
    /**
     * Get parent scopes for dropdown (exclude self and descendants)
     */
    getParentOptions() {
        if (!this.EditingScope) {
            return this.FlatScopes;
        }
        // Exclude self and all descendants
        const excludeIds = new Set([this.EditingScope.ID]);
        const addDescendants = (parentId) => {
            for (const scope of this.FlatScopes) {
                if (UUIDsEqual(scope.ParentID, parentId) && !excludeIds.has(scope.ID)) {
                    excludeIds.add(scope.ID);
                    addDescendants(scope.ID);
                }
            }
        };
        addDescendants(this.EditingScope.ID);
        return this.FlatScopes.filter(s => !excludeIds.has(s.ID));
    }
    /**
     * Get category color
     */
    getCategoryColor(category) {
        return this.CategoryColors[category || 'Other'] || this.CategoryColors['Other'];
    }
    /**
     * Get count of total scopes
     */
    getTotalCount() {
        return this.FlatScopes.length;
    }
    /**
     * Get count of active scopes
     */
    getActiveCount() {
        return this.FlatScopes.filter(s => s.IsActive).length;
    }
    static ɵfac = function APIScopesPanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || APIScopesPanelComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: APIScopesPanelComponent, selectors: [["mj-api-scopes-panel"]], outputs: { ScopeUpdated: "ScopeUpdated" }, standalone: false, decls: 4, vars: 3, consts: [["scopeNode", ""], [1, "scopes-panel"], ["text", "Loading scopes..."], [3, "width", "minWidth", "minHeight", "resizable", "draggable", "top"], [1, "panel-header"], [1, "header-left"], [1, "panel-title"], [1, "fa-solid", "fa-shield-halved"], [1, "panel-subtitle"], [1, "header-actions"], [1, "scope-stats"], [1, "stat"], [1, "fa-solid", "fa-shield"], [1, "stat", "active"], [1, "fa-solid", "fa-check-circle"], [1, "tree-controls"], ["title", "Expand All", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-plus-square"], ["title", "Collapse All", 1, "btn-icon", 3, "click"], [1, "fa-solid", "fa-minus-square"], [1, "btn-create", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "message", "success"], [1, "message", "error"], [1, "scope-tree"], [1, "empty-state"], [1, "fa-solid", "fa-circle-exclamation"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "scope-node"], [1, "node-content"], [1, "expand-btn"], [1, "expand-placeholder"], [1, "scope-info", 3, "click"], [1, "scope-icon"], [1, "scope-details"], [1, "scope-name"], [1, "full-path"], [1, "status-badge"], [1, "scope-meta"], [1, "category"], [1, "resource-type"], [1, "description"], [1, "node-actions"], ["title", "Add Child Scope", 1, "btn-node-action", 3, "click"], ["title", "Edit Scope", 1, "btn-node-action", 3, "click"], [1, "fa-solid", "fa-pencil"], [1, "children"], [1, "expand-btn", 3, "click"], [1, "fa-solid"], [3, "close", "width", "minWidth", "minHeight", "resizable", "draggable", "top"], [1, "dialog-title"], ["kendoButton", "", "fillMode", "flat", "title", "Close (Esc)", 1, "window-close-btn", 3, "click"], [1, "fa-solid", "fa-times"], [1, "dialog-content"], [1, "form-field"], ["kendoTextBox", "", "placeholder", "e.g., runview, create, execute", 1, "form-input", 3, "ngModelChange", "ngModel"], [1, "field-hint"], [3, "ngModelChange", "ngModel", "data", "textField", "valueField", "valuePrimitive", "defaultItem"], [1, "form-row"], [1, "form-field", "half"], [3, "ngModelChange", "ngModel", "data", "valuePrimitive"], [3, "ngModelChange", "ngModel", "data", "valuePrimitive", "defaultItem"], ["kendoTextArea", "", "placeholder", "Describe what this scope allows...", 1, "form-textarea", 3, "ngModelChange", "ngModel", "rows"], [1, "checkbox-label"], ["type", "checkbox", "kendoCheckBox", "", 3, "ngModelChange", "ngModel"], [1, "checkbox-hint"], [1, "dialog-actions"], ["kendoButton", "", 3, "click", "themeColor", "disabled"], ["size", "small", 3, "showText"], ["kendoButton", "", 3, "click"], [1, "fa-solid", "fa-save"]], template: function APIScopesPanelComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 1);
            i0.ɵɵconditionalCreate(1, APIScopesPanelComponent_Conditional_1_Template, 1, 0, "mj-loading", 2);
            i0.ɵɵconditionalCreate(2, APIScopesPanelComponent_Conditional_2_Template, 31, 5);
            i0.ɵɵconditionalCreate(3, APIScopesPanelComponent_Conditional_3_Template, 47, 30, "kendo-window", 3);
            i0.ɵɵelementEnd();
        } if (rf & 2) {
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.IsLoading ? 1 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(!ctx.IsLoading ? 2 : -1);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.ShowCreateDialog || ctx.ShowEditDialog ? 3 : -1);
        } }, dependencies: [i1.NgTemplateOutlet, i2.DefaultValueAccessor, i2.CheckboxControlValueAccessor, i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.DropDownListComponent, i5.TextBoxDirective, i5.TextAreaDirective, i5.CheckBoxDirective, i6.WindowComponent, i6.WindowTitleBarComponent, i7.LoadingComponent], styles: [".scopes-panel[_ngcontent-%COMP%] {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n\n\n.panel-header[_ngcontent-%COMP%] {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n    flex-wrap: wrap;\n    gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 200px;\n}\n\n.panel-title[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n}\n\n.panel-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.panel-subtitle[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n.header-actions[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.scope-stats[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n}\n\n.stat[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.stat.active[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n}\n\n.stat[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n}\n\n.tree-controls[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n}\n\n.btn-icon[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.btn-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n}\n\n.btn-create[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-create[_ngcontent-%COMP%]:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}\n\n\n\n.message[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 14px;\n}\n\n.message.success[_ngcontent-%COMP%] {\n    background: var(--mj-color-success-100);\n    color: var(--mj-color-success-800);\n    border: 1px solid var(--mj-status-success-border);\n}\n\n.message.error[_ngcontent-%COMP%] {\n    background: var(--mj-color-error-100);\n    color: var(--mj-status-error);\n    border: 1px solid var(--mj-status-error-border);\n}\n\n\n\n.scope-tree[_ngcontent-%COMP%] {\n    flex: 1;\n    overflow-y: auto;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: var(--mj-shadow-md);\n}\n\n.scope-node[_ngcontent-%COMP%] {\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.scope-node[_ngcontent-%COMP%]:last-child {\n    border-bottom: none;\n}\n\n.node-content[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    transition: background 0.2s ease;\n}\n\n.node-content[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.node-content.inactive[_ngcontent-%COMP%] {\n    opacity: 0.6;\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    transition: transform 0.2s ease;\n    flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-secondary);\n}\n\n.expand-placeholder[_ngcontent-%COMP%] {\n    width: 24px;\n    flex-shrink: 0;\n}\n\n.scope-info[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n}\n\n.scope-icon[_ngcontent-%COMP%] {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.scope-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 14px;\n    color: var(--mj-text-inverse);\n}\n\n.scope-details[_ngcontent-%COMP%] {\n    flex: 1;\n    min-width: 0;\n}\n\n.scope-name[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    flex-wrap: wrap;\n}\n\n.full-path[_ngcontent-%COMP%] {\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n    font-size: 10px;\n    font-weight: 500;\n    padding: 2px 6px;\n    border-radius: 4px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.scope-meta[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-top: 4px;\n    font-size: 12px;\n    flex-wrap: wrap;\n}\n\n.category[_ngcontent-%COMP%] {\n    font-weight: 500;\n}\n\n.resource-type[_ngcontent-%COMP%] {\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-sunken);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.description[_ngcontent-%COMP%] {\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.node-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 4px;\n    margin-left: 12px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.node-content[_ngcontent-%COMP%]:hover   .node-actions[_ngcontent-%COMP%] {\n    opacity: 1;\n}\n\n.btn-node-action[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-node-action[_ngcontent-%COMP%]:hover {\n    background: var(--mj-status-success);\n    border-color: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.btn-node-action[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 12px;\n}\n\n.children[_ngcontent-%COMP%] {\n    margin-left: 0;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px;\n    color: var(--mj-text-secondary);\n    text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state[_ngcontent-%COMP%]   span[_ngcontent-%COMP%] {\n    font-size: 16px;\n    font-weight: 500;\n}\n\n.empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n    font-size: 14px;\n    margin-top: 8px;\n}\n\n\n\n\n\n\n\n\n[_nghost-%COMP%]     kendo-window {\n    border-radius: 16px !important;\n    overflow: hidden;\n    box-shadow: var(--mj-shadow-2xl) !important;\n    background: var(--mj-bg-surface) !important;\n}\n\n[_nghost-%COMP%]     kendo-window .k-window-content {\n    padding: 0 !important;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    background: var(--mj-bg-surface) !important;\n}\n\n[_nghost-%COMP%]     kendo-window-titlebar {\n    display: flex !important;\n    align-items: center;\n    justify-content: space-between;\n    padding: 18px 24px !important;\n    background: var(--mj-bg-page) !important;\n    border-bottom: 1px solid var(--mj-border-default) !important;\n}\n\n.dialog-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}\n\n.dialog-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    color: var(--mj-status-success);\n    font-size: 18px;\n}\n\n.window-close-btn[_ngcontent-%COMP%] {\n    margin-left: auto;\n    color: var(--mj-text-muted);\n    transition: all 0.2s ease;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n}\n\n.window-close-btn[_ngcontent-%COMP%]:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n.window-close-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n    font-size: 16px;\n}\n\n\n\n.dialog-content[_ngcontent-%COMP%] {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n\n\n.form-field[_ngcontent-%COMP%] {\n    margin-bottom: 20px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-of-type {\n    margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%]   label[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n    letter-spacing: 0.01em;\n}\n\n.form-input[_ngcontent-%COMP%] {\n    width: 100%;\n}\n\n.form-textarea[_ngcontent-%COMP%] {\n    width: 100%;\n    resize: vertical;\n    min-height: 80px;\n}\n\n[_nghost-%COMP%]     .form-input .k-input, \n[_nghost-%COMP%]     .form-textarea .k-input-inner, \n[_nghost-%COMP%]     .form-field .k-dropdownlist {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: var(--mj-border-default);\n    background: var(--mj-bg-surface) !important;\n    color: var(--mj-text-primary) !important;\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%]     .form-field .k-dropdownlist.k-focus {\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n}\n\n.field-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 6px;\n    line-height: 1.4;\n}\n\n.form-row[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 16px;\n}\n\n.form-field.half[_ngcontent-%COMP%] {\n    flex: 1;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    padding: 12px 16px;\n    background: var(--mj-bg-page);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n    transition: all 0.2s ease;\n}\n\n.checkbox-label[_ngcontent-%COMP%]:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.checkbox-label[_ngcontent-%COMP%]   input[_ngcontent-%COMP%] {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.checkbox-label[_ngcontent-%COMP%]   span[_ngcontent-%COMP%]:first-of-type {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 14px;\n}\n\n.checkbox-hint[_ngcontent-%COMP%] {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n\n\n.dialog-actions[_ngcontent-%COMP%] {\n    display: flex;\n    gap: 12px;\n    padding: 20px 24px;\n    background: var(--mj-bg-page);\n    border-top: 1px solid var(--mj-border-default);\n    margin: 0 -24px -24px -24px;\n}\n\n[_nghost-%COMP%]     .dialog-actions .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%]     .dialog-actions .k-button-solid-primary {\n    background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n    border: none;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n\n[_nghost-%COMP%]     .dialog-actions .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(APIScopesPanelComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-api-scopes-panel', template: "<div class=\"scopes-panel\">\n  @if (IsLoading) {\n    <mj-loading text=\"Loading scopes...\"></mj-loading>\n  }\n\n  @if (!IsLoading) {\n    <!-- Header -->\n    <div class=\"panel-header\">\n      <div class=\"header-left\">\n        <h3 class=\"panel-title\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          API Scopes\n        </h3>\n        <p class=\"panel-subtitle\">Manage hierarchical permission scopes for API access</p>\n      </div>\n      <div class=\"header-actions\">\n        <div class=\"scope-stats\">\n          <span class=\"stat\">\n            <i class=\"fa-solid fa-shield\"></i>\n            {{getTotalCount()}} total\n          </span>\n          <span class=\"stat active\">\n            <i class=\"fa-solid fa-check-circle\"></i>\n            {{getActiveCount()}} active\n          </span>\n        </div>\n        <div class=\"tree-controls\">\n          <button class=\"btn-icon\" (click)=\"expandAll()\" title=\"Expand All\">\n            <i class=\"fa-solid fa-plus-square\"></i>\n          </button>\n          <button class=\"btn-icon\" (click)=\"collapseAll()\" title=\"Collapse All\">\n            <i class=\"fa-solid fa-minus-square\"></i>\n          </button>\n        </div>\n        <button class=\"btn-create\" (click)=\"openCreateDialog()\">\n          <i class=\"fa-solid fa-plus\"></i>\n          New Scope\n        </button>\n      </div>\n    </div>\n    <!-- Messages -->\n    @if (SuccessMessage) {\n      <div class=\"message success\">\n        <i class=\"fa-solid fa-check-circle\"></i>\n        {{SuccessMessage}}\n      </div>\n    }\n    @if (ErrorMessage) {\n      <div class=\"message error\">\n        <i class=\"fa-solid fa-circle-exclamation\"></i>\n        {{ErrorMessage}}\n      </div>\n    }\n    <!-- Scope Tree -->\n    <div class=\"scope-tree\">\n      @for (node of ScopeTree; track node) {\n        <ng-container *ngTemplateOutlet=\"scopeNode; context: { node: node }\"></ng-container>\n      }\n      <!-- Empty State -->\n      @if (ScopeTree.length === 0) {\n        <div class=\"empty-state\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          <span>No scopes configured</span>\n          <p>Create scopes to define API access permissions</p>\n        </div>\n      }\n    </div>\n    <!-- Recursive Node Template -->\n    <ng-template #scopeNode let-node=\"node\">\n      <div class=\"scope-node\" [style.padding-left.px]=\"node.level * 24\">\n        <div class=\"node-content\" [class.inactive]=\"!node.scope.IsActive\">\n          @if (node.children.length > 0) {\n            <button class=\"expand-btn\"\n              (click)=\"toggleExpanded(node)\">\n              <i class=\"fa-solid\"\n                [class.fa-chevron-right]=\"!node.expanded\"\n              [class.fa-chevron-down]=\"node.expanded\"></i>\n            </button>\n          }\n          @if (node.children.length === 0) {\n            <span class=\"expand-placeholder\"></span>\n          }\n          <div class=\"scope-info\" (click)=\"openEditDialog(node.scope)\">\n            <div class=\"scope-icon\" [style.backgroundColor]=\"getCategoryColor(node.scope.Category)\">\n              <i class=\"fa-solid fa-shield\"></i>\n            </div>\n            <div class=\"scope-details\">\n              <div class=\"scope-name\">\n                {{node.scope.Name}}\n                @if (node.scope.FullPath && node.scope.FullPath !== node.scope.Name) {\n                  <span class=\"full-path\">\n                    {{node.scope.FullPath}}\n                  </span>\n                }\n                @if (!node.scope.IsActive) {\n                  <span class=\"status-badge\">Inactive</span>\n                }\n              </div>\n              <div class=\"scope-meta\">\n                <span class=\"category\" [style.color]=\"getCategoryColor(node.scope.Category)\">\n                  {{node.scope.Category}}\n                </span>\n                @if (node.scope.ResourceType) {\n                  <span class=\"resource-type\">\n                    {{node.scope.ResourceType}}\n                  </span>\n                }\n                @if (node.scope.Description) {\n                  <span class=\"description\">\n                    {{node.scope.Description}}\n                  </span>\n                }\n              </div>\n            </div>\n          </div>\n          <div class=\"node-actions\">\n            <button class=\"btn-node-action\" (click)=\"openCreateDialog(node.scope)\" title=\"Add Child Scope\">\n              <i class=\"fa-solid fa-plus\"></i>\n            </button>\n            <button class=\"btn-node-action\" (click)=\"openEditDialog(node.scope)\" title=\"Edit Scope\">\n              <i class=\"fa-solid fa-pencil\"></i>\n            </button>\n          </div>\n        </div>\n        @if (node.expanded && node.children.length > 0) {\n          <div class=\"children\">\n            @for (child of node.children; track child) {\n              <ng-container *ngTemplateOutlet=\"scopeNode; context: { node: child }\"></ng-container>\n            }\n          </div>\n        }\n      </div>\n    </ng-template>\n  }\n\n  <!-- Create/Edit Dialog -->\n  @if (ShowCreateDialog || ShowEditDialog) {\n    <kendo-window\n      [width]=\"560\"\n      [minWidth]=\"420\"\n      [minHeight]=\"480\"\n      [resizable]=\"true\"\n      [draggable]=\"true\"\n      [top]=\"80\"\n      (close)=\"closeDialogs()\">\n      <kendo-window-titlebar>\n        <div class=\"dialog-title\">\n          <i class=\"fa-solid fa-shield-halved\"></i>\n          <span>{{EditingScope ? 'Edit Scope' : 'New Scope'}}</span>\n        </div>\n        <button kendoButton fillMode=\"flat\" (click)=\"closeDialogs()\" class=\"window-close-btn\" title=\"Close (Esc)\">\n          <i class=\"fa-solid fa-times\"></i>\n        </button>\n      </kendo-window-titlebar>\n      <div class=\"dialog-content\">\n        <div class=\"form-field\">\n          <label>Scope Name *</label>\n          <input kendoTextBox [(ngModel)]=\"EditName\"\n            placeholder=\"e.g., runview, create, execute\"\n            class=\"form-input\" />\n          <span class=\"field-hint\">Use lowercase, single word. Will be combined with parent for full path.</span>\n        </div>\n        <div class=\"form-field\">\n          <label>Parent Scope</label>\n          <kendo-dropdownlist [(ngModel)]=\"EditParentId\"\n            [data]=\"getParentOptions()\"\n            [textField]=\"'FullPath'\"\n            [valueField]=\"'ID'\"\n            [valuePrimitive]=\"true\"\n            [defaultItem]=\"{ FullPath: '(No Parent - Root Level)', ID: null }\">\n          </kendo-dropdownlist>\n          @if (SelectedParentScope) {\n            <span class=\"field-hint\">\n              Full path will be: <code>{{SelectedParentScope.FullPath}}:{{EditName || '...'}}</code>\n            </span>\n          }\n        </div>\n        <div class=\"form-row\">\n          <div class=\"form-field half\">\n            <label>Category</label>\n            <kendo-dropdownlist [(ngModel)]=\"EditCategory\"\n              [data]=\"Categories\"\n              [valuePrimitive]=\"true\">\n            </kendo-dropdownlist>\n          </div>\n          <div class=\"form-field half\">\n            <label>Resource Type</label>\n            <kendo-dropdownlist [(ngModel)]=\"EditResourceType\"\n              [data]=\"ResourceTypes\"\n              [valuePrimitive]=\"true\"\n              [defaultItem]=\"''\">\n            </kendo-dropdownlist>\n          </div>\n        </div>\n        <div class=\"form-field\">\n          <label>Description</label>\n          <textarea kendoTextArea [(ngModel)]=\"EditDescription\"\n            placeholder=\"Describe what this scope allows...\"\n            [rows]=\"3\"\n          class=\"form-textarea\"></textarea>\n        </div>\n        <div class=\"form-field\">\n          <label class=\"checkbox-label\">\n            <input type=\"checkbox\" kendoCheckBox [(ngModel)]=\"EditIsActive\" />\n            <div>\n              <span>Active</span>\n              <span class=\"checkbox-hint\">Inactive scopes cannot be assigned to keys or applications</span>\n            </div>\n          </label>\n        </div>\n        <div class=\"dialog-actions\">\n          <button kendoButton [themeColor]=\"'primary'\"\n            [disabled]=\"!EditName.trim() || IsSaving\"\n            (click)=\"saveScope()\">\n            @if (IsSaving) {\n              <mj-loading [showText]=\"false\" size=\"small\"></mj-loading>\n            }\n            @if (!IsSaving) {\n              <span>\n                <i class=\"fa-solid fa-save\"></i>\n                {{EditingScope ? 'Update' : 'Create'}}\n              </span>\n            }\n          </button>\n          <button kendoButton (click)=\"closeDialogs()\">Cancel</button>\n        </div>\n      </div>\n    </kendo-window>\n  }\n</div>\n", styles: [".scopes-panel {\n    height: 100%;\n    display: flex;\n    flex-direction: column;\n}\n\n/* Panel Header */\n.panel-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n    margin-bottom: 24px;\n    flex-wrap: wrap;\n    gap: 16px;\n}\n\n.header-left {\n    flex: 1;\n    min-width: 200px;\n}\n\n.panel-title {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    font-size: 18px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin: 0 0 4px 0;\n}\n\n.panel-title i {\n    color: var(--mj-status-success);\n}\n\n.panel-subtitle {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n    margin: 0;\n}\n\n.header-actions {\n    display: flex;\n    align-items: center;\n    gap: 16px;\n}\n\n.scope-stats {\n    display: flex;\n    gap: 16px;\n}\n\n.stat {\n    display: flex;\n    align-items: center;\n    gap: 6px;\n    font-size: 13px;\n    color: var(--mj-text-secondary);\n}\n\n.stat.active {\n    color: var(--mj-status-success);\n}\n\n.stat i {\n    font-size: 14px;\n}\n\n.tree-controls {\n    display: flex;\n    gap: 4px;\n}\n\n.btn-icon {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 32px;\n    height: 32px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-icon:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.btn-icon i {\n    font-size: 14px;\n    color: var(--mj-text-secondary);\n}\n\n.btn-create {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    padding: 10px 20px;\n    background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n    color: var(--mj-text-inverse);\n    border: none;\n    border-radius: 8px;\n    font-weight: 600;\n    font-size: 14px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-create:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}\n\n/* Messages */\n.message {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    padding: 12px 16px;\n    border-radius: 8px;\n    margin-bottom: 16px;\n    font-size: 14px;\n}\n\n.message.success {\n    background: var(--mj-color-success-100);\n    color: var(--mj-color-success-800);\n    border: 1px solid var(--mj-status-success-border);\n}\n\n.message.error {\n    background: var(--mj-color-error-100);\n    color: var(--mj-status-error);\n    border: 1px solid var(--mj-status-error-border);\n}\n\n/* Scope Tree */\n.scope-tree {\n    flex: 1;\n    overflow-y: auto;\n    background: var(--mj-bg-surface);\n    border-radius: 12px;\n    box-shadow: var(--mj-shadow-md);\n}\n\n.scope-node {\n    border-bottom: 1px solid var(--mj-border-default);\n}\n\n.scope-node:last-child {\n    border-bottom: none;\n}\n\n.node-content {\n    display: flex;\n    align-items: center;\n    padding: 12px 16px;\n    transition: background 0.2s ease;\n}\n\n.node-content:hover {\n    background: var(--mj-bg-surface-hover);\n}\n\n.node-content.inactive {\n    opacity: 0.6;\n}\n\n.expand-btn {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 24px;\n    height: 24px;\n    background: none;\n    border: none;\n    cursor: pointer;\n    color: var(--mj-text-muted);\n    transition: transform 0.2s ease;\n    flex-shrink: 0;\n}\n\n.expand-btn:hover {\n    color: var(--mj-text-secondary);\n}\n\n.expand-placeholder {\n    width: 24px;\n    flex-shrink: 0;\n}\n\n.scope-info {\n    display: flex;\n    align-items: center;\n    flex: 1;\n    min-width: 0;\n    cursor: pointer;\n}\n\n.scope-icon {\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n    margin-right: 12px;\n    flex-shrink: 0;\n}\n\n.scope-icon i {\n    font-size: 14px;\n    color: var(--mj-text-inverse);\n}\n\n.scope-details {\n    flex: 1;\n    min-width: 0;\n}\n\n.scope-name {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n    font-size: 14px;\n    font-weight: 500;\n    color: var(--mj-text-primary);\n    flex-wrap: wrap;\n}\n\n.full-path {\n    font-family: monospace;\n    font-size: 12px;\n    color: var(--mj-text-muted);\n    background: var(--mj-bg-surface-sunken);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.status-badge {\n    font-size: 10px;\n    font-weight: 500;\n    padding: 2px 6px;\n    border-radius: 4px;\n    background: var(--mj-bg-surface-sunken);\n    color: var(--mj-text-secondary);\n}\n\n.scope-meta {\n    display: flex;\n    align-items: center;\n    gap: 12px;\n    margin-top: 4px;\n    font-size: 12px;\n    flex-wrap: wrap;\n}\n\n.category {\n    font-weight: 500;\n}\n\n.resource-type {\n    color: var(--mj-text-secondary);\n    background: var(--mj-bg-surface-sunken);\n    padding: 2px 6px;\n    border-radius: 4px;\n}\n\n.description {\n    color: var(--mj-text-muted);\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    max-width: 300px;\n}\n\n.node-actions {\n    display: flex;\n    gap: 4px;\n    margin-left: 12px;\n    opacity: 0;\n    transition: opacity 0.2s ease;\n}\n\n.node-content:hover .node-actions {\n    opacity: 1;\n}\n\n.btn-node-action {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 28px;\n    height: 28px;\n    background: var(--mj-bg-surface);\n    border: 1px solid var(--mj-border-default);\n    border-radius: 6px;\n    cursor: pointer;\n    transition: all 0.2s ease;\n}\n\n.btn-node-action:hover {\n    background: var(--mj-status-success);\n    border-color: var(--mj-status-success);\n    color: var(--mj-text-inverse);\n}\n\n.btn-node-action i {\n    font-size: 12px;\n}\n\n.children {\n    margin-left: 0;\n}\n\n/* Empty State */\n.empty-state {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 48px;\n    color: var(--mj-text-secondary);\n    text-align: center;\n}\n\n.empty-state i {\n    font-size: 48px;\n    margin-bottom: 16px;\n    opacity: 0.5;\n}\n\n.empty-state span {\n    font-size: 16px;\n    font-weight: 500;\n}\n\n.empty-state p {\n    font-size: 14px;\n    margin-top: 8px;\n}\n\n/* ========================================\n   Dialog Styles - Polished & Professional\n   ======================================== */\n\n/* Window styling */\n:host ::ng-deep kendo-window {\n    border-radius: 16px !important;\n    overflow: hidden;\n    box-shadow: var(--mj-shadow-2xl) !important;\n    background: var(--mj-bg-surface) !important;\n}\n\n:host ::ng-deep kendo-window .k-window-content {\n    padding: 0 !important;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    background: var(--mj-bg-surface) !important;\n}\n\n:host ::ng-deep kendo-window-titlebar {\n    display: flex !important;\n    align-items: center;\n    justify-content: space-between;\n    padding: 18px 24px !important;\n    background: var(--mj-bg-page) !important;\n    border-bottom: 1px solid var(--mj-border-default) !important;\n}\n\n.dialog-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}\n\n.dialog-title i {\n    color: var(--mj-status-success);\n    font-size: 18px;\n}\n\n.window-close-btn {\n    margin-left: auto;\n    color: var(--mj-text-muted);\n    transition: all 0.2s ease;\n    width: 32px;\n    height: 32px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: 8px;\n}\n\n.window-close-btn:hover {\n    color: var(--mj-text-primary);\n    background: var(--mj-bg-surface-hover);\n}\n\n.window-close-btn i {\n    font-size: 16px;\n}\n\n/* Dialog Content */\n.dialog-content {\n    padding: 24px;\n    flex: 1;\n    overflow-y: auto;\n}\n\n/* Form Fields */\n.form-field {\n    margin-bottom: 20px;\n}\n\n.form-field:last-of-type {\n    margin-bottom: 0;\n}\n\n.form-field label {\n    display: block;\n    font-size: 13px;\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    margin-bottom: 8px;\n    letter-spacing: 0.01em;\n}\n\n.form-input {\n    width: 100%;\n}\n\n.form-textarea {\n    width: 100%;\n    resize: vertical;\n    min-height: 80px;\n}\n\n:host ::ng-deep .form-input .k-input,\n:host ::ng-deep .form-textarea .k-input-inner,\n:host ::ng-deep .form-field .k-dropdownlist {\n    padding: 10px 14px;\n    border-radius: 8px;\n    font-size: 14px;\n    border-color: var(--mj-border-default);\n    background: var(--mj-bg-surface) !important;\n    color: var(--mj-text-primary) !important;\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 .form-field .k-dropdownlist.k-focus {\n    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-status-success) 10%, transparent);\n}\n\n.field-hint {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 6px;\n    line-height: 1.4;\n}\n\n.form-row {\n    display: flex;\n    gap: 16px;\n}\n\n.form-field.half {\n    flex: 1;\n}\n\n.checkbox-label {\n    display: flex;\n    align-items: flex-start;\n    gap: 12px;\n    cursor: pointer;\n    padding: 12px 16px;\n    background: var(--mj-bg-page);\n    border-radius: 10px;\n    border: 1px solid var(--mj-border-default);\n    transition: all 0.2s ease;\n}\n\n.checkbox-label:hover {\n    background: var(--mj-bg-surface-sunken);\n    border-color: var(--mj-border-strong);\n}\n\n.checkbox-label input {\n    margin-top: 2px;\n    flex-shrink: 0;\n}\n\n.checkbox-label span:first-of-type {\n    font-weight: 600;\n    color: var(--mj-text-primary);\n    font-size: 14px;\n}\n\n.checkbox-hint {\n    display: block;\n    font-size: 12px;\n    color: var(--mj-text-secondary);\n    margin-top: 4px;\n    line-height: 1.4;\n}\n\n/* Dialog Actions */\n.dialog-actions {\n    display: flex;\n    gap: 12px;\n    padding: 20px 24px;\n    background: var(--mj-bg-page);\n    border-top: 1px solid var(--mj-border-default);\n    margin: 0 -24px -24px -24px;\n}\n\n:host ::ng-deep .dialog-actions .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 .dialog-actions .k-button-solid-primary {\n    background: linear-gradient(135deg, var(--mj-status-success) 0%, var(--mj-color-success-600) 100%);\n    border: none;\n    box-shadow: 0 2px 8px color-mix(in srgb, var(--mj-status-success) 30%, transparent);\n}\n\n:host ::ng-deep .dialog-actions .k-button-solid-primary:hover {\n    transform: translateY(-1px);\n    box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-status-success) 40%, transparent);\n}\n"] }]
    }], () => [{ type: i0.ChangeDetectorRef }], { ScopeUpdated: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(APIScopesPanelComponent, { className: "APIScopesPanelComponent", filePath: "src/APIKeys/api-scopes-panel.component.ts", lineNumber: 23 }); })();
//# sourceMappingURL=api-scopes-panel.component.js.map