import { Component, Output, EventEmitter } from '@angular/core';
import * as i0 from "@angular/core";
import * as i1 from "../../services/component-studio-state.service";
import * as i2 from "@angular/common";
import * as i3 from "@memberjunction/ng-shared-generic";
import * as i4 from "@memberjunction/ng-ui-components";
function ComponentBrowserComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
    const _r1 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 9)(1, "button", 23);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_11_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnImportFromArtifact()); });
    i0.ɵɵelement(2, "i", 24);
    i0.ɵɵtext(3, " From Artifact ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "button", 23);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_11_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnImportFromFile()); });
    i0.ɵɵelement(5, "i", 25);
    i0.ɵɵtext(6, " From File ");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(7, "button", 23);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_11_Template_button_click_7_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnImportFromText()); });
    i0.ɵɵelement(8, "i", 26);
    i0.ɵɵtext(9, " From Text ");
    i0.ɵɵelementEnd()();
} }
function ComponentBrowserComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 13);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate(ctx_r1.State.GetActiveFilterCount());
} }
function ComponentBrowserComponent_Conditional_22_Conditional_16_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 35);
    i0.ɵɵtext(1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1("(", ctx_r1.State.GetDeprecatedCount(), ")");
} }
function ComponentBrowserComponent_Conditional_22_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
    const _r4 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 40);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_22_Conditional_17_For_5_Template_button_click_0_listener() { const category_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.State.ToggleCategory(category_r5.name)); });
    i0.ɵɵelementStart(1, "span", 41);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "span", 42);
    i0.ɵɵtext(4);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const category_r5 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵstyleProp("--pill-color", category_r5.color);
    i0.ɵɵclassProp("active", ctx_r1.State.IsCategorySelected(category_r5.name));
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(category_r5.name);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(category_r5.count);
} }
function ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 44);
    i0.ɵɵtext(1, " Show less ");
} }
function ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 45);
    i0.ɵɵtext(1);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(4);
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" Show ", ctx_r1.State.AvailableCategories.length - 5, " more ");
} }
function ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Template(rf, ctx) { if (rf & 1) {
    const _r6 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 43);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.State.ToggleShowAllCategories()); });
    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Conditional_1_Template, 2, 0)(2, ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Conditional_2_Template, 2, 1);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(3);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.State.ShowAllCategories ? 1 : 2);
} }
function ComponentBrowserComponent_Conditional_22_Conditional_17_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 28)(1, "label", 29);
    i0.ɵɵtext(2, "Categories");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "div", 37);
    i0.ɵɵrepeaterCreate(4, ComponentBrowserComponent_Conditional_22_Conditional_17_For_5_Template, 5, 6, "button", 38, i0.ɵɵcomponentInstance().TrackByCategoryName, true);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(6, ComponentBrowserComponent_Conditional_22_Conditional_17_Conditional_6_Template, 3, 1, "button", 39);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(4);
    i0.ɵɵrepeater(ctx_r1.State.GetVisibleCategories());
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r1.State.AvailableCategories.length > 5 ? 6 : -1);
} }
function ComponentBrowserComponent_Conditional_22_Conditional_18_Template(rf, ctx) { if (rf & 1) {
    const _r7 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 36)(1, "button", 46);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_22_Conditional_18_Template_button_click_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.State.ClearAllFilters()); });
    i0.ɵɵelement(2, "i", 47);
    i0.ɵɵtext(3, " Clear All Filters ");
    i0.ɵɵelementEnd()();
} }
function ComponentBrowserComponent_Conditional_22_Template(rf, ctx) { if (rf & 1) {
    const _r3 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 19)(1, "div", 27)(2, "div", 28)(3, "label", 29);
    i0.ɵɵtext(4, "Quick Filters");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(5, "div", 30)(6, "label", 31)(7, "input", 32);
    i0.ɵɵlistener("change", function ComponentBrowserComponent_Conditional_22_Template_input_change_7_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.State.ToggleShowOnlyFavorites()); });
    i0.ɵɵelementEnd();
    i0.ɵɵelement(8, "i", 33);
    i0.ɵɵelementStart(9, "span");
    i0.ɵɵtext(10, "Favorites only");
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(11, "label", 31)(12, "input", 32);
    i0.ɵɵlistener("change", function ComponentBrowserComponent_Conditional_22_Template_input_change_12_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.State.ToggleShowDeprecatedComponents()); });
    i0.ɵɵelementEnd();
    i0.ɵɵelement(13, "i", 34);
    i0.ɵɵelementStart(14, "span");
    i0.ɵɵtext(15, "Show deprecated ");
    i0.ɵɵconditionalCreate(16, ComponentBrowserComponent_Conditional_22_Conditional_16_Template, 2, 1, "span", 35);
    i0.ɵɵelementEnd()()()();
    i0.ɵɵconditionalCreate(17, ComponentBrowserComponent_Conditional_22_Conditional_17_Template, 7, 1, "div", 28);
    i0.ɵɵconditionalCreate(18, ComponentBrowserComponent_Conditional_22_Conditional_18_Template, 4, 0, "div", 36);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance(7);
    i0.ɵɵproperty("checked", ctx_r1.State.ShowOnlyFavorites);
    i0.ɵɵadvance(5);
    i0.ɵɵproperty("checked", ctx_r1.State.ShowDeprecatedComponents);
    i0.ɵɵadvance(4);
    i0.ɵɵconditional(ctx_r1.State.GetDeprecatedCount() > 0 ? 16 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.State.AvailableCategories.length > 0 ? 17 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.State.GetActiveFilterCount() > 0 ? 18 : -1);
} }
function ComponentBrowserComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 21);
    i0.ɵɵelement(1, "mj-loading", 48);
    i0.ɵɵelementEnd();
} }
function ComponentBrowserComponent_Conditional_25_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 49);
    i0.ɵɵelementStart(1, "p", 50);
    i0.ɵɵtext(2, "No components found");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "p", 51);
    i0.ɵɵtext(4, "Create a new component or import one to get started.");
    i0.ɵɵelementEnd();
} }
function ComponentBrowserComponent_Conditional_25_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 52);
    i0.ɵɵelementStart(1, "p", 50);
    i0.ɵɵtext(2, "No matching components");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "p", 51);
    i0.ɵɵtext(4, "Try adjusting your search or filters.");
    i0.ɵɵelementEnd();
} }
function ComponentBrowserComponent_Conditional_25_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 22);
    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_25_Conditional_1_Template, 5, 0)(2, ComponentBrowserComponent_Conditional_25_Conditional_2_Template, 5, 0);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.State.AllComponents.length === 0 ? 1 : 2);
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "span", 61);
    i0.ɵɵelement(1, "i", 57);
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const component_r9 = i0.ɵɵnextContext().$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵproperty("title", ctx_r1.GetFileBadgeTooltip(component_r9));
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", ctx_r1.GetFileBadgeIcon(component_r9));
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r1.GetFileBadgeLabel(component_r9), " ");
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 73);
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 74);
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Template(rf, ctx) { if (rf & 1) {
    const _r10 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 72);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r10); const component_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnToggleFavorite(component_r9, $event)); });
    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Conditional_1_Template, 1, 0, "i", 73)(2, ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Conditional_2_Template, 1, 0, "i", 74);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const component_r9 = i0.ɵɵnextContext().$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("is-favorite", ctx_r1.State.IsFavorite(component_r9));
    i0.ɵɵproperty("title", ctx_r1.State.IsFavorite(component_r9) ? "Remove from favorites" : "Add to favorites");
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.State.IsFavorite(component_r9) ? 1 : 2);
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_19_Template(rf, ctx) { if (rf & 1) {
    const _r11 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 75);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Conditional_19_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r11); const component_r9 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRemoveFileComponent(component_r9, $event)); });
    i0.ɵɵelement(1, "i", 47);
    i0.ɵɵelementEnd();
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 44);
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelement(0, "i", 45);
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 76)(1, "p");
    i0.ɵɵtext(2);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const component_r9 = i0.ɵɵnextContext(2).$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate(ctx_r1.State.GetComponentDescription(component_r9));
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_18_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 78)(1, "span", 79);
    i0.ɵɵtext(2, "Loaded");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "span", 80);
    i0.ɵɵtext(4);
    i0.ɵɵpipe(5, "date");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const component_r9 = i0.ɵɵnextContext(2).$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r1.State.GetComponentLoadedAt(component_r9), "short"));
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_19_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 78)(1, "span", 79);
    i0.ɵɵtext(2, "Updated");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(3, "span", 80);
    i0.ɵɵtext(4);
    i0.ɵɵpipe(5, "date");
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const component_r9 = i0.ɵɵnextContext(2).$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate(i0.ɵɵpipeBind2(5, 1, ctx_r1.State.GetComponentUpdatedAt(component_r9), "short"));
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_21_Template(rf, ctx) { if (rf & 1) {
    const _r12 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 85);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_21_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r12); const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.OnStopComponent($event)); });
    i0.ɵɵelement(1, "i", 86);
    i0.ɵɵtext(2, " Stop ");
    i0.ɵɵelementEnd();
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_22_Template(rf, ctx) { if (rf & 1) {
    const _r13 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 87);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_22_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r13); const component_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnSwitchComponent(component_r9, $event)); });
    i0.ɵɵelement(1, "i", 88);
    i0.ɵɵtext(2, " Switch To This ");
    i0.ɵɵelementEnd();
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_23_Template(rf, ctx) { if (rf & 1) {
    const _r14 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "button", 3);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_23_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r14); const component_r9 = i0.ɵɵnextContext(2).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.OnRunComponent(component_r9, $event)); });
    i0.ɵɵelement(1, "i", 89);
    i0.ɵɵtext(2, " Run ");
    i0.ɵɵelementEnd();
} }
function ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵelementStart(0, "div", 71);
    i0.ɵɵconditionalCreate(1, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_1_Template, 3, 1, "div", 76);
    i0.ɵɵelementStart(2, "div", 77)(3, "div", 78)(4, "span", 79);
    i0.ɵɵtext(5, "Type");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(6, "span", 80);
    i0.ɵɵtext(7);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(8, "div", 78)(9, "span", 79);
    i0.ɵɵtext(10, "Version");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(11, "span", 80);
    i0.ɵɵtext(12);
    i0.ɵɵelementEnd()();
    i0.ɵɵelementStart(13, "div", 78)(14, "span", 79);
    i0.ɵɵtext(15, "Status");
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(16, "span", 80);
    i0.ɵɵtext(17);
    i0.ɵɵelementEnd()();
    i0.ɵɵconditionalCreate(18, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_18_Template, 6, 4, "div", 78)(19, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_19_Template, 6, 4, "div", 78);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(20, "div", 81);
    i0.ɵɵconditionalCreate(21, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_21_Template, 3, 0, "button", 82)(22, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_22_Template, 3, 0, "button", 83)(23, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Conditional_23_Template, 3, 0, "button", 84);
    i0.ɵɵelementEnd()();
} if (rf & 2) {
    const component_r9 = i0.ɵɵnextContext().$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.State.GetComponentDescription(component_r9) ? 1 : -1);
    i0.ɵɵadvance(6);
    i0.ɵɵtextInterpolate(ctx_r1.State.GetComponentType(component_r9) || "Unknown");
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r1.State.GetComponentVersion(component_r9));
    i0.ɵɵadvance(5);
    i0.ɵɵtextInterpolate(ctx_r1.State.GetComponentStatus(component_r9) || "Draft");
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.State.IsFileLoadedComponent(component_r9) ? 18 : ctx_r1.State.GetComponentUpdatedAt(component_r9) ? 19 : -1);
    i0.ɵɵadvance(3);
    i0.ɵɵconditional(ctx_r1.IsComponentRunning(component_r9) ? 21 : ctx_r1.IsAnotherComponentRunning(component_r9) ? 22 : 23);
} }
function ComponentBrowserComponent_Conditional_26_For_1_Template(rf, ctx) { if (rf & 1) {
    const _r8 = i0.ɵɵgetCurrentView();
    i0.ɵɵelementStart(0, "div", 54)(1, "div", 55);
    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_26_For_1_Template_div_click_1_listener() { const component_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.ToggleComponentExpansion(component_r9)); });
    i0.ɵɵelementStart(2, "div", 56);
    i0.ɵɵelement(3, "i", 57);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(4, "div", 58)(5, "div", 59)(6, "span", 60);
    i0.ɵɵtext(7);
    i0.ɵɵelementEnd();
    i0.ɵɵconditionalCreate(8, ComponentBrowserComponent_Conditional_26_For_1_Conditional_8_Template, 3, 3, "span", 61);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(9, "div", 62)(10, "span", 63);
    i0.ɵɵtext(11);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(12, "span", 64);
    i0.ɵɵtext(13);
    i0.ɵɵelementEnd();
    i0.ɵɵelementStart(14, "span", 65);
    i0.ɵɵelement(15, "i", 66);
    i0.ɵɵtext(16);
    i0.ɵɵelementEnd()()();
    i0.ɵɵelementStart(17, "div", 67);
    i0.ɵɵconditionalCreate(18, ComponentBrowserComponent_Conditional_26_For_1_Conditional_18_Template, 3, 4, "button", 68);
    i0.ɵɵconditionalCreate(19, ComponentBrowserComponent_Conditional_26_For_1_Conditional_19_Template, 2, 0, "button", 69);
    i0.ɵɵelementStart(20, "div", 70);
    i0.ɵɵconditionalCreate(21, ComponentBrowserComponent_Conditional_26_For_1_Conditional_21_Template, 1, 0, "i", 44)(22, ComponentBrowserComponent_Conditional_26_For_1_Conditional_22_Template, 1, 0, "i", 45);
    i0.ɵɵelementEnd()()();
    i0.ɵɵconditionalCreate(23, ComponentBrowserComponent_Conditional_26_For_1_Conditional_23_Template, 24, 6, "div", 71);
    i0.ɵɵelementEnd();
} if (rf & 2) {
    const component_r9 = ctx.$implicit;
    const ctx_r1 = i0.ɵɵnextContext(2);
    i0.ɵɵclassProp("expanded", ctx_r1.IsExpanded(component_r9))("running", ctx_r1.IsComponentRunning(component_r9))("file-loaded", ctx_r1.State.IsFileLoadedComponent(component_r9));
    i0.ɵɵadvance(2);
    i0.ɵɵstyleProp("color", ctx_r1.State.GetComponentTypeColor(ctx_r1.State.GetComponentType(component_r9)));
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", ctx_r1.State.GetComponentTypeIcon(ctx_r1.State.GetComponentType(component_r9)));
    i0.ɵɵadvance(4);
    i0.ɵɵtextInterpolate(ctx_r1.State.GetComponentName(component_r9));
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.State.IsFileLoadedComponent(component_r9) ? 8 : -1);
    i0.ɵɵadvance(3);
    i0.ɵɵtextInterpolate1("v", ctx_r1.State.GetComponentVersion(component_r9));
    i0.ɵɵadvance();
    i0.ɵɵproperty("ngClass", ctx_r1.GetStatusBadgeClass(component_r9));
    i0.ɵɵadvance();
    i0.ɵɵtextInterpolate1(" ", ctx_r1.GetStatusLabel(component_r9), " ");
    i0.ɵɵadvance();
    i0.ɵɵstyleProp("background-color", ctx_r1.State.GetNamespaceColor(ctx_r1.State.GetComponentNamespace(component_r9)));
    i0.ɵɵproperty("title", ctx_r1.State.GetComponentNamespace(component_r9) || "Uncategorized");
    i0.ɵɵadvance(2);
    i0.ɵɵtextInterpolate1(" ", ctx_r1.State.FormatNamespace(ctx_r1.State.GetComponentNamespace(component_r9)), " ");
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(!ctx_r1.State.IsFileLoadedComponent(component_r9) ? 18 : -1);
    i0.ɵɵadvance();
    i0.ɵɵconditional(ctx_r1.State.IsFileLoadedComponent(component_r9) ? 19 : -1);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r1.IsExpanded(component_r9) ? 21 : 22);
    i0.ɵɵadvance(2);
    i0.ɵɵconditional(ctx_r1.IsExpanded(component_r9) ? 23 : -1);
} }
function ComponentBrowserComponent_Conditional_26_Template(rf, ctx) { if (rf & 1) {
    i0.ɵɵrepeaterCreate(0, ComponentBrowserComponent_Conditional_26_For_1_Template, 24, 22, "div", 53, i0.ɵɵcomponentInstance().TrackByComponentId, true);
} if (rf & 2) {
    const ctx_r1 = i0.ɵɵnextContext();
    i0.ɵɵrepeater(ctx_r1.State.FilteredComponents);
} }
export class ComponentBrowserComponent {
    State;
    cdr;
    NewComponent = new EventEmitter();
    ImportFromFile = new EventEmitter();
    ImportFromText = new EventEmitter();
    ImportFromArtifact = new EventEmitter();
    ImportDropdownOpen = false;
    stateChangedSub = null;
    constructor(State, cdr) {
        this.State = State;
        this.cdr = cdr;
    }
    ngOnInit() {
        this.stateChangedSub = this.State.StateChanged.subscribe(() => {
            this.cdr.detectChanges();
        });
    }
    ngOnDestroy() {
        if (this.stateChangedSub) {
            this.stateChangedSub.unsubscribe();
            this.stateChangedSub = null;
        }
    }
    // ============================================================
    // SEARCH
    // ============================================================
    OnSearchChange(value) {
        this.State.SearchQuery = value;
    }
    // ============================================================
    // CARD EXPANSION
    // ============================================================
    ToggleComponentExpansion(component) {
        const componentId = this.State.GetComponentId(component);
        const expandedId = this.State.ExpandedComponent
            ? this.State.GetComponentId(this.State.ExpandedComponent)
            : null;
        this.State.ExpandedComponent = expandedId === componentId ? null : component;
        this.cdr.detectChanges();
    }
    IsExpanded(component) {
        if (!this.State.ExpandedComponent)
            return false;
        return this.State.GetComponentId(this.State.ExpandedComponent) === this.State.GetComponentId(component);
    }
    // ============================================================
    // RUNNING STATE CHECKS
    // ============================================================
    IsComponentRunning(component) {
        if (!this.State.SelectedComponent || !this.State.IsRunning)
            return false;
        return this.State.GetComponentId(this.State.SelectedComponent) === this.State.GetComponentId(component);
    }
    IsAnotherComponentRunning(component) {
        if (!this.State.SelectedComponent || !this.State.IsRunning)
            return false;
        return this.State.GetComponentId(this.State.SelectedComponent) !== this.State.GetComponentId(component);
    }
    // ============================================================
    // ACTIONS
    // ============================================================
    OnRunComponent(component, event) {
        event.stopPropagation();
        this.State.RunComponent(component);
    }
    OnStopComponent(event) {
        event.stopPropagation();
        this.State.StopComponent();
    }
    OnSwitchComponent(component, event) {
        event.stopPropagation();
        this.State.RunComponent(component);
    }
    OnToggleFavorite(component, event) {
        event.stopPropagation();
        this.State.ToggleFavorite(component);
    }
    OnRemoveFileComponent(component, event) {
        event.stopPropagation();
        this.State.RemoveFileLoadedComponent(component);
    }
    // ============================================================
    // IMPORT DROPDOWN
    // ============================================================
    ToggleImportDropdown() {
        this.ImportDropdownOpen = !this.ImportDropdownOpen;
    }
    CloseImportDropdown() {
        this.ImportDropdownOpen = false;
    }
    OnImportFromFile() {
        this.CloseImportDropdown();
        this.ImportFromFile.emit();
    }
    OnImportFromText() {
        this.CloseImportDropdown();
        this.ImportFromText.emit();
    }
    OnImportFromArtifact() {
        this.CloseImportDropdown();
        this.ImportFromArtifact.emit();
    }
    OnNewComponent() {
        this.NewComponent.emit();
    }
    // ============================================================
    // UI HELPERS
    // ============================================================
    GetStatusBadgeClass(component) {
        if (this.State.IsFileLoadedComponent(component)) {
            const status = this.State.GetComponentStatus(component);
            if (status === 'Text')
                return 'text';
            if (status === 'Artifact')
                return 'artifact';
            return 'file';
        }
        const status = this.State.GetComponentStatus(component);
        if (status === 'Deprecated')
            return 'deprecated';
        if (status === 'Published')
            return 'published';
        return 'draft';
    }
    GetStatusLabel(component) {
        if (this.State.IsFileLoadedComponent(component)) {
            const status = this.State.GetComponentStatus(component);
            return status || 'File';
        }
        return this.State.GetComponentStatus(component) || 'Draft';
    }
    GetFileBadgeTooltip(component) {
        const status = this.State.GetComponentStatus(component);
        if (status === 'Text')
            return 'Imported from text input';
        if (status === 'Artifact')
            return 'Loaded from artifact';
        const filename = this.State.GetComponentFilename(component);
        return filename ? `Loaded from ${filename}` : 'Loaded from file';
    }
    GetFileBadgeLabel(component) {
        const status = this.State.GetComponentStatus(component);
        if (status === 'Text')
            return 'Text Import';
        if (status === 'Artifact')
            return 'Artifact';
        return this.State.GetComponentFilename(component) || 'File';
    }
    GetFileBadgeIcon(component) {
        const status = this.State.GetComponentStatus(component);
        if (status === 'Text')
            return 'fa-keyboard';
        if (status === 'Artifact')
            return 'fa-database';
        return 'fa-file';
    }
    TrackByComponentId(_index, component) {
        return this.State.GetComponentId(component);
    }
    TrackByCategoryName(_index, category) {
        return category.name;
    }
    static ɵfac = function ComponentBrowserComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComponentBrowserComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentBrowserComponent, selectors: [["mj-component-browser"]], outputs: { NewComponent: "NewComponent", ImportFromFile: "ImportFromFile", ImportFromText: "ImportFromText", ImportFromArtifact: "ImportFromArtifact" }, standalone: false, decls: 27, vars: 12, consts: [[1, "component-browser"], [1, "browser-header"], [1, "header-top-row"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-plus"], [1, "import-dropdown"], ["mjButton", "", 3, "click"], [1, "fa-solid", "fa-file-import"], [1, "fa-solid", "fa-chevron-down", "dropdown-chevron"], [1, "dropdown-menu"], [1, "header-controls-row"], [1, "filter-toggle-btn", 3, "click", "title"], [1, "fa-solid", "fa-sliders"], [1, "filter-count-badge"], [1, "component-count"], [1, "search-box"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Search components...", 1, "mj-input", 3, "input", "value"], [1, "filter-panel"], [1, "component-list"], [1, "loading-state"], [1, "empty-state"], [1, "dropdown-item", 3, "click"], [1, "fa-solid", "fa-database"], [1, "fa-solid", "fa-file"], [1, "fa-solid", "fa-keyboard"], [1, "filter-panel-content"], [1, "filter-section"], [1, "filter-section-label"], [1, "filter-options"], [1, "filter-checkbox"], ["type", "checkbox", 3, "change", "checked"], [1, "fa-solid", "fa-star", "filter-icon", "favorites-icon"], [1, "fa-solid", "fa-archive", "filter-icon", "deprecated-icon"], [1, "deprecated-count"], [1, "filter-panel-footer"], [1, "category-pills"], [1, "category-pill", 3, "active", "--pill-color"], [1, "show-more-btn"], [1, "category-pill", 3, "click"], [1, "pill-name"], [1, "pill-count"], [1, "show-more-btn", 3, "click"], [1, "fa-solid", "fa-chevron-up"], [1, "fa-solid", "fa-chevron-down"], [1, "clear-all-btn", 3, "click"], [1, "fa-solid", "fa-times"], ["text", "Loading components...", "size", "small"], [1, "fa-solid", "fa-puzzle-piece", "empty-icon"], [1, "empty-title"], [1, "empty-subtitle"], [1, "fa-solid", "fa-filter", "empty-icon"], [1, "component-card", 3, "expanded", "running", "file-loaded"], [1, "component-card"], [1, "card-header", 3, "click"], [1, "card-type-icon"], [1, "fa-solid", 3, "ngClass"], [1, "card-body"], [1, "card-title-row"], [1, "card-name"], [1, "file-badge", 3, "title"], [1, "card-meta-row"], [1, "version-badge"], [1, "status-badge", 3, "ngClass"], [1, "namespace-chip", 3, "title"], [1, "fa-solid", "fa-folder-tree"], [1, "card-end"], [1, "favorite-btn", 3, "is-favorite", "title"], ["title", "Remove imported component", 1, "remove-btn"], [1, "card-chevron"], [1, "card-details"], [1, "favorite-btn", 3, "click", "title"], [1, "fa-solid", "fa-star"], [1, "fa-regular", "fa-star"], ["title", "Remove imported component", 1, "remove-btn", 3, "click"], [1, "detail-description"], [1, "detail-info-grid"], [1, "info-item"], [1, "info-label"], [1, "info-value"], [1, "detail-actions"], ["mjButton", "", "variant", "danger"], ["mjButton", "", "title", "Stop current component and run this one"], ["mjButton", "", "variant", "primary"], ["mjButton", "", "variant", "danger", 3, "click"], [1, "fa-solid", "fa-stop"], ["mjButton", "", "title", "Stop current component and run this one", 3, "click"], [1, "fa-solid", "fa-exchange-alt"], [1, "fa-solid", "fa-play"]], template: function ComponentBrowserComponent_Template(rf, ctx) { if (rf & 1) {
            i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "div", 2)(3, "button", 3);
            i0.ɵɵlistener("click", function ComponentBrowserComponent_Template_button_click_3_listener() { return ctx.OnNewComponent(); });
            i0.ɵɵelement(4, "i", 4);
            i0.ɵɵtext(5, " New Component ");
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(6, "div", 5)(7, "button", 6);
            i0.ɵɵlistener("click", function ComponentBrowserComponent_Template_button_click_7_listener() { return ctx.ToggleImportDropdown(); });
            i0.ɵɵelement(8, "i", 7);
            i0.ɵɵtext(9, " Import ");
            i0.ɵɵelement(10, "i", 8);
            i0.ɵɵelementEnd();
            i0.ɵɵconditionalCreate(11, ComponentBrowserComponent_Conditional_11_Template, 10, 0, "div", 9);
            i0.ɵɵelementEnd()();
            i0.ɵɵelementStart(12, "div", 10)(13, "button", 11);
            i0.ɵɵlistener("click", function ComponentBrowserComponent_Template_button_click_13_listener() { return ctx.State.ToggleFilterPanel(); });
            i0.ɵɵelement(14, "i", 12);
            i0.ɵɵconditionalCreate(15, ComponentBrowserComponent_Conditional_15_Template, 2, 1, "span", 13);
            i0.ɵɵelementEnd();
            i0.ɵɵelementStart(16, "span", 14);
            i0.ɵɵtext(17);
            i0.ɵɵelementEnd()()();
            i0.ɵɵelementStart(18, "div", 15)(19, "div", 16);
            i0.ɵɵelement(20, "i", 17);
            i0.ɵɵelementStart(21, "input", 18);
            i0.ɵɵlistener("input", function ComponentBrowserComponent_Template_input_input_21_listener($event) { return ctx.OnSearchChange($event.target.value); });
            i0.ɵɵelementEnd()()();
            i0.ɵɵconditionalCreate(22, ComponentBrowserComponent_Conditional_22_Template, 19, 5, "div", 19);
            i0.ɵɵelementStart(23, "div", 20);
            i0.ɵɵconditionalCreate(24, ComponentBrowserComponent_Conditional_24_Template, 2, 0, "div", 21)(25, ComponentBrowserComponent_Conditional_25_Template, 3, 1, "div", 22)(26, ComponentBrowserComponent_Conditional_26_Template, 2, 0);
            i0.ɵɵelementEnd()();
        } if (rf & 2) {
            i0.ɵɵadvance(6);
            i0.ɵɵclassProp("open", ctx.ImportDropdownOpen);
            i0.ɵɵadvance(5);
            i0.ɵɵconditional(ctx.ImportDropdownOpen ? 11 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵclassProp("active", ctx.State.IsFilterPanelExpanded || ctx.State.GetActiveFilterCount() > 0);
            i0.ɵɵproperty("title", ctx.State.IsFilterPanelExpanded ? "Hide filters" : "Show filters");
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.State.GetActiveFilterCount() > 0 ? 15 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵtextInterpolate2(" ", ctx.State.FilteredComponents.length, " of ", ctx.State.AllComponents.length, " ");
            i0.ɵɵadvance(4);
            i0.ɵɵproperty("value", ctx.State.SearchQuery);
            i0.ɵɵadvance();
            i0.ɵɵconditional(ctx.State.IsFilterPanelExpanded ? 22 : -1);
            i0.ɵɵadvance(2);
            i0.ɵɵconditional(ctx.State.IsLoading ? 24 : ctx.State.FilteredComponents.length === 0 ? 25 : 26);
        } }, dependencies: [i2.NgClass, i3.LoadingComponent, i4.MJButtonDirective, i2.DatePipe], styles: ["\n\n\n\n\n\n\n[_nghost-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n.component-browser[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n\n\n\n\n\n\n\n.browser-header[_ngcontent-%COMP%] {\n  padding: 12px 14px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.browser-header[_ngcontent-%COMP%]   .header-top-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.browser-header[_ngcontent-%COMP%]   .header-controls-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.browser-header[_ngcontent-%COMP%]   .component-count[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-left: auto;\n}\n\n\n\n\n\n\n\n\n.import-dropdown[_ngcontent-%COMP%] {\n  position: relative;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-chevron[_ngcontent-%COMP%] {\n  margin-left: 4px;\n  font-size: 10px;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  min-width: 180px;\n  margin-top: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  box-shadow: var(--mj-shadow-md);\n  overflow: hidden;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 8px 14px;\n  border: none;\n  background: none;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s;\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.import-dropdown[_ngcontent-%COMP%]   .dropdown-menu[_ngcontent-%COMP%]   .dropdown-item[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n\n\n\n\n\n\n\n.filter-toggle-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s;\n  position: relative;\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-secondary);\n  color: var(--mj-text-primary);\n}\n\n.filter-toggle-btn.active[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.filter-toggle-btn[_ngcontent-%COMP%]   .filter-count-badge[_ngcontent-%COMP%] {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n}\n\n\n\n\n\n\n\n\n.search-box[_ngcontent-%COMP%] {\n  padding: 8px 14px;\n  flex-shrink: 0;\n}\n\n.search-box[_ngcontent-%COMP%]   .search-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-secondary);\n  margin-left: 6px;\n}\n\n\n\n\n\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.filter-panel[_ngcontent-%COMP%]   .filter-panel-content[_ngcontent-%COMP%] {\n  padding: 8px 14px 12px;\n}\n\n.filter-section[_ngcontent-%COMP%] {\n  margin-bottom: 10px;\n}\n\n.filter-section[_ngcontent-%COMP%]:last-child {\n  margin-bottom: 0;\n}\n\n.filter-section[_ngcontent-%COMP%]   .filter-section-label[_ngcontent-%COMP%] {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.filter-options[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.filter-checkbox[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: background 0.15s;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .filter-icon[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .favorites-icon[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .deprecated-icon[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .deprecated-count[_ngcontent-%COMP%] {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n\n\n\n\n\n\n\n.category-pills[_ngcontent-%COMP%] {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.category-pill[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 14px;\n  background: var(--mj-bg-surface);\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.category-pill[_ngcontent-%COMP%]   .pill-name[_ngcontent-%COMP%] {\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.category-pill[_ngcontent-%COMP%]   .pill-count[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 0 5px;\n  border-radius: 8px;\n  line-height: 16px;\n}\n\n.category-pill[_ngcontent-%COMP%]:hover {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--mj-bg-surface);\n}\n\n.category-pill.active[_ngcontent-%COMP%] {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--pill-color, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n.category-pill.active[_ngcontent-%COMP%]   .pill-count[_ngcontent-%COMP%] {\n  background: rgba(255, 255, 255, 0.25);\n  color: var(--mj-text-inverse);\n}\n\n.show-more-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 6px;\n  padding: 2px 0;\n  border: none;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.show-more-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n.filter-panel-footer[_ngcontent-%COMP%] {\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.clear-all-btn[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 10px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.clear-all-btn[_ngcontent-%COMP%]:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n\n\n\n\n\n\n\n.component-list[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 10px;\n}\n\n\n\n\n\n\n\n\n.loading-state[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n.empty-state[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-icon[_ngcontent-%COMP%] {\n  font-size: 32px;\n  color: var(--mj-border-default);\n  margin-bottom: 12px;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-title[_ngcontent-%COMP%] {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin: 0 0 4px;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n\n\n\n\n\n\n\n.component-card[_ngcontent-%COMP%] {\n  margin-bottom: 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  transition: all 0.15s;\n  overflow: hidden;\n}\n\n.component-card[_ngcontent-%COMP%]:hover {\n  box-shadow: var(--mj-shadow-sm);\n  border-color: var(--mj-border-default);\n}\n\n\n\n.component-card.running[_ngcontent-%COMP%] {\n  border-left: 3px solid var(--mj-status-success);\n}\n\n\n\n.component-card.file-loaded[_ngcontent-%COMP%] {\n  border-style: dashed;\n  border-color: var(--mj-text-muted);\n}\n\n.component-card.file-loaded[_ngcontent-%COMP%]:hover {\n  border-color: var(--mj-text-secondary);\n}\n\n\n\n.component-card.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.component-card.expanded.running[_ngcontent-%COMP%] {\n  border-color: var(--mj-brand-primary);\n  border-left: 3px solid var(--mj-status-success);\n}\n\n.component-card.expanded.file-loaded[_ngcontent-%COMP%] {\n  border-style: solid;\n  border-color: var(--mj-brand-primary);\n}\n\n\n\n\n\n\n\n\n.card-header[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 10px 12px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.card-header[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface);\n}\n\n.card-type-icon[_ngcontent-%COMP%] {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  margin-top: 2px;\n}\n\n.card-body[_ngcontent-%COMP%] {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-title-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-bottom: 4px;\n}\n\n.card-name[_ngcontent-%COMP%] {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-meta-row[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.version-badge[_ngcontent-%COMP%] {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n.status-badge[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 7px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge.published[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge.draft[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.deprecated[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge.file[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.status-badge.text[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.artifact[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.namespace-chip[_ngcontent-%COMP%] {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 7px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-inverse);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.namespace-chip[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 9px;\n  opacity: 0.8;\n}\n\n\n\n\n\n\n\n\n.card-end[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.favorite-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.favorite-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-warning);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n.favorite-btn.is-favorite[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.remove-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.remove-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-chevron[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n}\n\n\n\n\n\n\n\n\n.card-details[_ngcontent-%COMP%] {\n  padding: 0 12px 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-description[_ngcontent-%COMP%] {\n  padding: 8px 0;\n}\n\n.detail-description[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n.detail-info-grid[_ngcontent-%COMP%] {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px 16px;\n  padding: 8px 0;\n}\n\n.detail-info-grid[_ngcontent-%COMP%]   .info-item[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.detail-info-grid[_ngcontent-%COMP%]   .info-label[_ngcontent-%COMP%] {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.detail-info-grid[_ngcontent-%COMP%]   .info-value[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.detail-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}"] });
}
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentBrowserComponent, [{
        type: Component,
        args: [{ standalone: false, selector: 'mj-component-browser', template: "<div class=\"component-browser\">\n\n  <!-- Header -->\n  <div class=\"browser-header\">\n    <div class=\"header-top-row\">\n      <button mjButton variant=\"primary\"\n        (click)=\"OnNewComponent()\">\n        <i class=\"fa-solid fa-plus\"></i> New Component\n      </button>\n      <div class=\"import-dropdown\" [class.open]=\"ImportDropdownOpen\">\n        <button mjButton\n          (click)=\"ToggleImportDropdown()\">\n          <i class=\"fa-solid fa-file-import\"></i> Import\n          <i class=\"fa-solid fa-chevron-down dropdown-chevron\"></i>\n        </button>\n        @if (ImportDropdownOpen) {\n          <div class=\"dropdown-menu\">\n            <button class=\"dropdown-item\" (click)=\"OnImportFromArtifact()\">\n              <i class=\"fa-solid fa-database\"></i> From Artifact\n            </button>\n            <button class=\"dropdown-item\" (click)=\"OnImportFromFile()\">\n              <i class=\"fa-solid fa-file\"></i> From File\n            </button>\n            <button class=\"dropdown-item\" (click)=\"OnImportFromText()\">\n              <i class=\"fa-solid fa-keyboard\"></i> From Text\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n\n    <div class=\"header-controls-row\">\n      <button\n        class=\"filter-toggle-btn\"\n        [class.active]=\"State.IsFilterPanelExpanded || State.GetActiveFilterCount() > 0\"\n        (click)=\"State.ToggleFilterPanel()\"\n        [title]=\"State.IsFilterPanelExpanded ? 'Hide filters' : 'Show filters'\">\n        <i class=\"fa-solid fa-sliders\"></i>\n        @if (State.GetActiveFilterCount() > 0) {\n          <span class=\"filter-count-badge\">{{ State.GetActiveFilterCount() }}</span>\n        }\n      </button>\n      <span class=\"component-count\">\n        {{ State.FilteredComponents.length }} of {{ State.AllComponents.length }}\n      </span>\n    </div>\n  </div>\n\n  <!-- Search -->\n  <div class=\"search-box\">\n    <div class=\"search-input-wrapper\">\n      <i class=\"fa-solid fa-search search-icon\"></i>\n      <input\n        type=\"text\"\n        class=\"mj-input\"\n        [value]=\"State.SearchQuery\"\n        (input)=\"OnSearchChange($any($event.target).value)\"\n        placeholder=\"Search components...\">\n    </div>\n  </div>\n\n  <!-- Collapsible Filter Panel -->\n  @if (State.IsFilterPanelExpanded) {\n    <div class=\"filter-panel\">\n      <div class=\"filter-panel-content\">\n\n        <!-- Quick Filters -->\n        <div class=\"filter-section\">\n          <label class=\"filter-section-label\">Quick Filters</label>\n          <div class=\"filter-options\">\n            <label class=\"filter-checkbox\">\n              <input type=\"checkbox\"\n                [checked]=\"State.ShowOnlyFavorites\"\n                (change)=\"State.ToggleShowOnlyFavorites()\">\n              <i class=\"fa-solid fa-star filter-icon favorites-icon\"></i>\n              <span>Favorites only</span>\n            </label>\n            <label class=\"filter-checkbox\">\n              <input type=\"checkbox\"\n                [checked]=\"State.ShowDeprecatedComponents\"\n                (change)=\"State.ToggleShowDeprecatedComponents()\">\n              <i class=\"fa-solid fa-archive filter-icon deprecated-icon\"></i>\n              <span>Show deprecated\n                @if (State.GetDeprecatedCount() > 0) {\n                  <span class=\"deprecated-count\">({{ State.GetDeprecatedCount() }})</span>\n                }\n              </span>\n            </label>\n          </div>\n        </div>\n\n        <!-- Category Pills -->\n        @if (State.AvailableCategories.length > 0) {\n          <div class=\"filter-section\">\n            <label class=\"filter-section-label\">Categories</label>\n            <div class=\"category-pills\">\n              @for (category of State.GetVisibleCategories(); track TrackByCategoryName($index, category)) {\n                <button\n                  class=\"category-pill\"\n                  [class.active]=\"State.IsCategorySelected(category.name)\"\n                  [style.--pill-color]=\"category.color\"\n                  (click)=\"State.ToggleCategory(category.name)\">\n                  <span class=\"pill-name\">{{ category.name }}</span>\n                  <span class=\"pill-count\">{{ category.count }}</span>\n                </button>\n              }\n            </div>\n            @if (State.AvailableCategories.length > 5) {\n              <button\n                class=\"show-more-btn\"\n                (click)=\"State.ToggleShowAllCategories()\">\n                @if (State.ShowAllCategories) {\n                  <i class=\"fa-solid fa-chevron-up\"></i> Show less\n                } @else {\n                  <i class=\"fa-solid fa-chevron-down\"></i> Show {{ State.AvailableCategories.length - 5 }} more\n                }\n              </button>\n            }\n          </div>\n        }\n\n        <!-- Clear All -->\n        @if (State.GetActiveFilterCount() > 0) {\n          <div class=\"filter-panel-footer\">\n            <button class=\"clear-all-btn\" (click)=\"State.ClearAllFilters()\">\n              <i class=\"fa-solid fa-times\"></i> Clear All Filters\n            </button>\n          </div>\n        }\n      </div>\n    </div>\n  }\n\n  <!-- Component Card List -->\n  <div class=\"component-list\">\n    @if (State.IsLoading) {\n      <div class=\"loading-state\">\n        <mj-loading text=\"Loading components...\" size=\"small\"></mj-loading>\n      </div>\n    } @else if (State.FilteredComponents.length === 0) {\n      <div class=\"empty-state\">\n        @if (State.AllComponents.length === 0) {\n          <i class=\"fa-solid fa-puzzle-piece empty-icon\"></i>\n          <p class=\"empty-title\">No components found</p>\n          <p class=\"empty-subtitle\">Create a new component or import one to get started.</p>\n        } @else {\n          <i class=\"fa-solid fa-filter empty-icon\"></i>\n          <p class=\"empty-title\">No matching components</p>\n          <p class=\"empty-subtitle\">Try adjusting your search or filters.</p>\n        }\n      </div>\n    } @else {\n      @for (component of State.FilteredComponents; track TrackByComponentId($index, component)) {\n        <div class=\"component-card\"\n          [class.expanded]=\"IsExpanded(component)\"\n          [class.running]=\"IsComponentRunning(component)\"\n          [class.file-loaded]=\"State.IsFileLoadedComponent(component)\">\n\n          <!-- Card Header (always visible) -->\n          <div class=\"card-header\" (click)=\"ToggleComponentExpansion(component)\">\n            <div class=\"card-type-icon\"\n              [style.color]=\"State.GetComponentTypeColor(State.GetComponentType(component))\">\n              <i class=\"fa-solid\"\n                [ngClass]=\"State.GetComponentTypeIcon(State.GetComponentType(component))\"></i>\n            </div>\n\n            <div class=\"card-body\">\n              <div class=\"card-title-row\">\n                <span class=\"card-name\">{{ State.GetComponentName(component) }}</span>\n                @if (State.IsFileLoadedComponent(component)) {\n                  <span class=\"file-badge\" [title]=\"GetFileBadgeTooltip(component)\">\n                    <i class=\"fa-solid\" [ngClass]=\"GetFileBadgeIcon(component)\"></i>\n                    {{ GetFileBadgeLabel(component) }}\n                  </span>\n                }\n              </div>\n              <div class=\"card-meta-row\">\n                <span class=\"version-badge\">v{{ State.GetComponentVersion(component) }}</span>\n                <span class=\"status-badge\" [ngClass]=\"GetStatusBadgeClass(component)\">\n                  {{ GetStatusLabel(component) }}\n                </span>\n                <span class=\"namespace-chip\"\n                  [style.background-color]=\"State.GetNamespaceColor(State.GetComponentNamespace(component))\"\n                  [title]=\"State.GetComponentNamespace(component) || 'Uncategorized'\">\n                  <i class=\"fa-solid fa-folder-tree\"></i>\n                  {{ State.FormatNamespace(State.GetComponentNamespace(component)) }}\n                </span>\n              </div>\n            </div>\n\n            <div class=\"card-end\">\n              @if (!State.IsFileLoadedComponent(component)) {\n                <button\n                  class=\"favorite-btn\"\n                  [class.is-favorite]=\"State.IsFavorite(component)\"\n                  (click)=\"OnToggleFavorite(component, $event)\"\n                  [title]=\"State.IsFavorite(component) ? 'Remove from favorites' : 'Add to favorites'\">\n                  @if (State.IsFavorite(component)) {\n                    <i class=\"fa-solid fa-star\"></i>\n                  } @else {\n                    <i class=\"fa-regular fa-star\"></i>\n                  }\n                </button>\n              }\n              @if (State.IsFileLoadedComponent(component)) {\n                <button\n                  class=\"remove-btn\"\n                  (click)=\"OnRemoveFileComponent($any(component), $event)\"\n                  title=\"Remove imported component\">\n                  <i class=\"fa-solid fa-times\"></i>\n                </button>\n              }\n              <div class=\"card-chevron\">\n                @if (IsExpanded(component)) {\n                  <i class=\"fa-solid fa-chevron-up\"></i>\n                } @else {\n                  <i class=\"fa-solid fa-chevron-down\"></i>\n                }\n              </div>\n            </div>\n          </div>\n\n          <!-- Card Details (expanded) -->\n          @if (IsExpanded(component)) {\n            <div class=\"card-details\">\n              @if (State.GetComponentDescription(component)) {\n                <div class=\"detail-description\">\n                  <p>{{ State.GetComponentDescription(component) }}</p>\n                </div>\n              }\n\n              <div class=\"detail-info-grid\">\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Type</span>\n                  <span class=\"info-value\">{{ State.GetComponentType(component) || 'Unknown' }}</span>\n                </div>\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Version</span>\n                  <span class=\"info-value\">{{ State.GetComponentVersion(component) }}</span>\n                </div>\n                <div class=\"info-item\">\n                  <span class=\"info-label\">Status</span>\n                  <span class=\"info-value\">{{ State.GetComponentStatus(component) || 'Draft' }}</span>\n                </div>\n                @if (State.IsFileLoadedComponent(component)) {\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Loaded</span>\n                    <span class=\"info-value\">{{ State.GetComponentLoadedAt(component) | date:'short' }}</span>\n                  </div>\n                } @else if (State.GetComponentUpdatedAt(component)) {\n                  <div class=\"info-item\">\n                    <span class=\"info-label\">Updated</span>\n                    <span class=\"info-value\">{{ State.GetComponentUpdatedAt(component) | date:'short' }}</span>\n                  </div>\n                }\n              </div>\n\n              <div class=\"detail-actions\">\n                @if (IsComponentRunning(component)) {\n                  <button mjButton variant=\"danger\"\n                    (click)=\"OnStopComponent($event)\">\n                    <i class=\"fa-solid fa-stop\"></i> Stop\n                  </button>\n                } @else if (IsAnotherComponentRunning(component)) {\n                  <button mjButton\n                    title=\"Stop current component and run this one\"\n                    (click)=\"OnSwitchComponent(component, $event)\">\n                    <i class=\"fa-solid fa-exchange-alt\"></i> Switch To This\n                  </button>\n                } @else {\n                  <button mjButton variant=\"primary\"\n                    (click)=\"OnRunComponent(component, $event)\">\n                    <i class=\"fa-solid fa-play\"></i> Run\n                  </button>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      }\n    }\n  </div>\n</div>\n", styles: ["/* ============================================================ */\n/* Component Browser - Left Panel                               */\n/* ============================================================ */\n\n:host {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  overflow: hidden;\n}\n\n.component-browser {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-sunken);\n  overflow: hidden;\n}\n\n/* ============================================================ */\n/* Header                                                        */\n/* ============================================================ */\n\n.browser-header {\n  padding: 12px 14px 8px;\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.browser-header .header-top-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-bottom: 8px;\n}\n\n.browser-header .header-controls-row {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.browser-header .component-count {\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  margin-left: auto;\n}\n\n/* ============================================================ */\n/* Import Dropdown                                               */\n/* ============================================================ */\n\n.import-dropdown {\n  position: relative;\n}\n\n.import-dropdown .dropdown-chevron {\n  margin-left: 4px;\n  font-size: 10px;\n}\n\n.import-dropdown .dropdown-menu {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 1000;\n  min-width: 180px;\n  margin-top: 4px;\n  background: var(--mj-bg-surface);\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  box-shadow: var(--mj-shadow-md);\n  overflow: hidden;\n}\n\n.import-dropdown .dropdown-menu .dropdown-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  width: 100%;\n  padding: 8px 14px;\n  border: none;\n  background: none;\n  font-size: 13px;\n  color: var(--mj-text-primary);\n  cursor: pointer;\n  text-align: left;\n  transition: background 0.15s;\n}\n\n.import-dropdown .dropdown-menu .dropdown-item:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.import-dropdown .dropdown-menu .dropdown-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mj-text-secondary);\n}\n\n/* ============================================================ */\n/* Filter Toggle Button                                          */\n/* ============================================================ */\n\n.filter-toggle-btn {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 5px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 4px;\n  background: var(--mj-bg-surface);\n  color: var(--mj-text-secondary);\n  font-size: 13px;\n  cursor: pointer;\n  transition: all 0.15s;\n  position: relative;\n}\n\n.filter-toggle-btn:hover {\n  border-color: var(--mj-text-secondary);\n  color: var(--mj-text-primary);\n}\n\n.filter-toggle-btn.active {\n  border-color: var(--mj-brand-primary);\n  color: var(--mj-brand-primary);\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n}\n\n.filter-toggle-btn .filter-count-badge {\n  position: absolute;\n  top: -6px;\n  right: -6px;\n  min-width: 16px;\n  height: 16px;\n  padding: 0 4px;\n  border-radius: 8px;\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n  font-size: 10px;\n  font-weight: 600;\n  line-height: 16px;\n  text-align: center;\n}\n\n/* ============================================================ */\n/* Search Box                                                    */\n/* ============================================================ */\n\n.search-box {\n  padding: 8px 14px;\n  flex-shrink: 0;\n}\n\n.search-box .search-icon {\n  color: var(--mj-text-secondary);\n  margin-left: 6px;\n}\n\n/* ============================================================ */\n/* Filter Panel                                                  */\n/* ============================================================ */\n\n.filter-panel {\n  border-bottom: 1px solid var(--mj-border-default);\n  background: var(--mj-bg-surface);\n  flex-shrink: 0;\n}\n\n.filter-panel .filter-panel-content {\n  padding: 8px 14px 12px;\n}\n\n.filter-section {\n  margin-bottom: 10px;\n}\n\n.filter-section:last-child {\n  margin-bottom: 0;\n}\n\n.filter-section .filter-section-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 6px;\n}\n\n.filter-options {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n\n.filter-checkbox {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 4px 6px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  transition: background 0.15s;\n}\n\n.filter-checkbox:hover {\n  background: var(--mj-bg-surface-sunken);\n}\n\n.filter-checkbox input[type=\"checkbox\"] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.filter-checkbox .filter-icon {\n  font-size: 12px;\n}\n\n.filter-checkbox .favorites-icon {\n  color: var(--mj-status-warning);\n}\n\n.filter-checkbox .deprecated-icon {\n  color: var(--mj-text-muted);\n}\n\n.filter-checkbox .deprecated-count {\n  color: var(--mj-text-muted);\n  font-size: 12px;\n}\n\n/* ============================================================ */\n/* Category Pills                                                */\n/* ============================================================ */\n\n.category-pills {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 6px;\n}\n\n.category-pill {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 3px 10px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 14px;\n  background: var(--mj-bg-surface);\n  font-size: 12px;\n  color: var(--mj-text-secondary);\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.category-pill .pill-name {\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.category-pill .pill-count {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 0 5px;\n  border-radius: 8px;\n  line-height: 16px;\n}\n\n.category-pill:hover {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--mj-bg-surface);\n}\n\n.category-pill.active {\n  border-color: var(--pill-color, var(--mj-brand-primary));\n  background: var(--pill-color, var(--mj-brand-primary));\n  color: var(--mj-text-inverse);\n}\n\n.category-pill.active .pill-count {\n  background: rgba(255, 255, 255, 0.25);\n  color: var(--mj-text-inverse);\n}\n\n.show-more-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  margin-top: 6px;\n  padding: 2px 0;\n  border: none;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-brand-primary);\n  cursor: pointer;\n}\n\n.show-more-btn:hover {\n  color: var(--mj-brand-primary);\n  text-decoration: underline;\n}\n\n.filter-panel-footer {\n  margin-top: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.clear-all-btn {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  padding: 4px 10px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  font-size: 12px;\n  color: var(--mj-status-error);\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.clear-all-btn:hover {\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n/* ============================================================ */\n/* Component List (scrollable)                                   */\n/* ============================================================ */\n\n.component-list {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 10px;\n}\n\n/* ============================================================ */\n/* Loading & Empty States                                        */\n/* ============================================================ */\n\n.loading-state {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n}\n\n.empty-state {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  padding: 40px 20px;\n  text-align: center;\n}\n\n.empty-state .empty-icon {\n  font-size: 32px;\n  color: var(--mj-border-default);\n  margin-bottom: 12px;\n}\n\n.empty-state .empty-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  margin: 0 0 4px;\n}\n\n.empty-state .empty-subtitle {\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  margin: 0;\n}\n\n/* ============================================================ */\n/* Component Card                                                */\n/* ============================================================ */\n\n.component-card {\n  margin-bottom: 6px;\n  border: 1px solid var(--mj-border-default);\n  border-radius: 8px;\n  background: var(--mj-bg-surface);\n  transition: all 0.15s;\n  overflow: hidden;\n}\n\n.component-card:hover {\n  box-shadow: var(--mj-shadow-sm);\n  border-color: var(--mj-border-default);\n}\n\n/* Running state: green left border */\n.component-card.running {\n  border-left: 3px solid var(--mj-status-success);\n}\n\n/* File-loaded state: dashed border */\n.component-card.file-loaded {\n  border-style: dashed;\n  border-color: var(--mj-text-muted);\n}\n\n.component-card.file-loaded:hover {\n  border-color: var(--mj-text-secondary);\n}\n\n/* Expanded state: blue border */\n.component-card.expanded {\n  border-color: var(--mj-brand-primary);\n  box-shadow: var(--mj-shadow-sm);\n}\n\n.component-card.expanded.running {\n  border-color: var(--mj-brand-primary);\n  border-left: 3px solid var(--mj-status-success);\n}\n\n.component-card.expanded.file-loaded {\n  border-style: solid;\n  border-color: var(--mj-brand-primary);\n}\n\n/* ============================================================ */\n/* Card Header                                                   */\n/* ============================================================ */\n\n.card-header {\n  display: flex;\n  align-items: flex-start;\n  gap: 10px;\n  padding: 10px 12px;\n  cursor: pointer;\n  user-select: none;\n}\n\n.card-header:hover {\n  background: var(--mj-bg-surface);\n}\n\n.card-type-icon {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 16px;\n  background: var(--mj-bg-surface-sunken);\n  border-radius: 4px;\n  margin-top: 2px;\n}\n\n.card-body {\n  flex: 1;\n  min-width: 0;\n}\n\n.card-title-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-bottom: 4px;\n}\n\n.card-name {\n  font-size: 13px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.file-badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 6px;\n  border-radius: 4px;\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n  font-size: 10px;\n  font-weight: 500;\n  white-space: nowrap;\n  max-width: 120px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.card-meta-row {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n\n.version-badge {\n  font-size: 11px;\n  font-weight: 500;\n  color: var(--mj-text-secondary);\n  background: var(--mj-bg-surface-sunken);\n  padding: 1px 6px;\n  border-radius: 4px;\n}\n\n.status-badge {\n  display: inline-flex;\n  align-items: center;\n  padding: 1px 7px;\n  border-radius: 4px;\n  font-size: 10px;\n  font-weight: 600;\n  text-transform: uppercase;\n  letter-spacing: 0.3px;\n}\n\n.status-badge.published {\n  background: color-mix(in srgb, var(--mj-status-success) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-success);\n}\n\n.status-badge.draft {\n  background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.deprecated {\n  background: color-mix(in srgb, var(--mj-status-error) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-error);\n}\n\n.status-badge.file {\n  background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n  color: var(--mj-status-warning);\n}\n\n.status-badge.text {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.status-badge.artifact {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.namespace-chip {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  padding: 1px 7px;\n  border-radius: 10px;\n  font-size: 10px;\n  font-weight: 500;\n  color: var(--mj-text-inverse);\n  max-width: 160px;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.namespace-chip i {\n  font-size: 9px;\n  opacity: 0.8;\n}\n\n/* ============================================================ */\n/* Card End (favorite, remove, chevron)                          */\n/* ============================================================ */\n\n.card-end {\n  display: flex;\n  align-items: center;\n  gap: 2px;\n  flex-shrink: 0;\n  margin-top: 2px;\n}\n\n.favorite-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.favorite-btn:hover {\n  color: var(--mj-status-warning);\n  background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n}\n\n.favorite-btn.is-favorite {\n  color: var(--mj-status-warning);\n}\n\n.remove-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 28px;\n  height: 28px;\n  border: none;\n  border-radius: 4px;\n  background: none;\n  color: var(--mj-border-default);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.remove-btn:hover {\n  color: var(--mj-status-error);\n  background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n}\n\n.card-chevron {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 24px;\n  height: 24px;\n  color: var(--mj-text-secondary);\n  font-size: 11px;\n}\n\n/* ============================================================ */\n/* Card Details (expanded content)                               */\n/* ============================================================ */\n\n.card-details {\n  padding: 0 12px 12px;\n  border-top: 1px solid var(--mj-border-default);\n}\n\n.detail-description {\n  padding: 8px 0;\n}\n\n.detail-description p {\n  margin: 0;\n  font-size: 13px;\n  color: var(--mj-text-secondary);\n  line-height: 1.5;\n}\n\n.detail-info-grid {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 6px 16px;\n  padding: 8px 0;\n}\n\n.detail-info-grid .info-item {\n  display: flex;\n  flex-direction: column;\n  gap: 1px;\n}\n\n.detail-info-grid .info-label {\n  font-size: 10px;\n  font-weight: 600;\n  color: var(--mj-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.detail-info-grid .info-value {\n  font-size: 13px;\n  color: var(--mj-text-primary);\n}\n\n.detail-actions {\n  display: flex;\n  gap: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mj-border-default);\n}\n"] }]
    }], () => [{ type: i1.ComponentStudioStateService }, { type: i0.ChangeDetectorRef }], { NewComponent: [{
            type: Output
        }], ImportFromFile: [{
            type: Output
        }], ImportFromText: [{
            type: Output
        }], ImportFromArtifact: [{
            type: Output
        }] }); })();
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentBrowserComponent, { className: "ComponentBrowserComponent", filePath: "src/ComponentStudio/components/browser/component-browser.component.ts", lineNumber: 22 }); })();
//# sourceMappingURL=component-browser.component.js.map