@memberjunction/ng-dashboards 3.2.0 → 3.4.0

package/dist/ComponentStudio/components/browser/component-browser.component.js

@@ -0,0 +1,636 @@
+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 "@progress/kendo-angular-inputs";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "@memberjunction/ng-shared-generic";
+function ComponentBrowserComponent_Conditional_11_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 8)(1, "button", 21);
+    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", 22);
+    i0.ɵɵtext(3, " From Artifact ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 21);
+    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", 23);
+    i0.ɵɵtext(6, " From File ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "button", 21);
+    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", 24);
+    i0.ɵɵtext(9, " From Text ");
+    i0.ɵɵelementEnd()();
+} }
+function ComponentBrowserComponent_Conditional_15_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 12);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(ctx_r1.State.GetActiveFilterCount());
+} }
+function ComponentBrowserComponent_ng_template_20_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 25);
+} }
+function ComponentBrowserComponent_Conditional_21_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 34);
+    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_21_Conditional_17_For_5_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 39);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_21_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", 40);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 41);
+    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_21_Conditional_17_Conditional_6_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 43);
+    i0.ɵɵtext(1, " Show less ");
+} }
+function ComponentBrowserComponent_Conditional_21_Conditional_17_Conditional_6_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 44);
+    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_21_Conditional_17_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 42);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_21_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.ɵɵtemplate(1, ComponentBrowserComponent_Conditional_21_Conditional_17_Conditional_6_Conditional_1_Template, 2, 0)(2, ComponentBrowserComponent_Conditional_21_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_21_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 27)(1, "label", 28);
+    i0.ɵɵtext(2, "Categories");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "div", 36);
+    i0.ɵɵrepeaterCreate(4, ComponentBrowserComponent_Conditional_21_Conditional_17_For_5_Template, 5, 6, "button", 37, i0.ɵɵcomponentInstance().TrackByCategoryName, true);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(6, ComponentBrowserComponent_Conditional_21_Conditional_17_Conditional_6_Template, 3, 1, "button", 38);
+    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_21_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 35)(1, "button", 45);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_21_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", 46);
+    i0.ɵɵtext(3, " Clear All Filters ");
+    i0.ɵɵelementEnd()();
+} }
+function ComponentBrowserComponent_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 17)(1, "div", 26)(2, "div", 27)(3, "label", 28);
+    i0.ɵɵtext(4, "Quick Filters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 29)(6, "label", 30)(7, "input", 31);
+    i0.ɵɵlistener("change", function ComponentBrowserComponent_Conditional_21_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", 32);
+    i0.ɵɵelementStart(9, "span");
+    i0.ɵɵtext(10, "Favorites only");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "label", 30)(12, "input", 31);
+    i0.ɵɵlistener("change", function ComponentBrowserComponent_Conditional_21_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", 33);
+    i0.ɵɵelementStart(14, "span");
+    i0.ɵɵtext(15, "Show deprecated ");
+    i0.ɵɵtemplate(16, ComponentBrowserComponent_Conditional_21_Conditional_16_Template, 2, 1, "span", 34);
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵtemplate(17, ComponentBrowserComponent_Conditional_21_Conditional_17_Template, 7, 1, "div", 27)(18, ComponentBrowserComponent_Conditional_21_Conditional_18_Template, 4, 0, "div", 35);
+    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_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 19);
+    i0.ɵɵelement(1, "mj-loading", 47);
+    i0.ɵɵelementEnd();
+} }
+function ComponentBrowserComponent_Conditional_24_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 48);
+    i0.ɵɵelementStart(1, "p", 49);
+    i0.ɵɵtext(2, "No components found");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 50);
+    i0.ɵɵtext(4, "Create a new component or import one to get started.");
+    i0.ɵɵelementEnd();
+} }
+function ComponentBrowserComponent_Conditional_24_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 51);
+    i0.ɵɵelementStart(1, "p", 49);
+    i0.ɵɵtext(2, "No matching components");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "p", 50);
+    i0.ɵɵtext(4, "Try adjusting your search or filters.");
+    i0.ɵɵelementEnd();
+} }
+function ComponentBrowserComponent_Conditional_24_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 20);
+    i0.ɵɵtemplate(1, ComponentBrowserComponent_Conditional_24_Conditional_1_Template, 5, 0)(2, ComponentBrowserComponent_Conditional_24_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_25_For_1_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 60);
+    i0.ɵɵelement(1, "i", 56);
+    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_25_For_1_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 72);
+} }
+function ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 73);
+} }
+function ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 71);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_25_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.ɵɵtemplate(1, ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Conditional_1_Template, 1, 0, "i", 72)(2, ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Conditional_2_Template, 1, 0, "i", 73);
+    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_25_For_1_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r11 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 74);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_25_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", 46);
+    i0.ɵɵelementEnd();
+} }
+function ComponentBrowserComponent_Conditional_25_For_1_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 43);
+} }
+function ComponentBrowserComponent_Conditional_25_For_1_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 44);
+} }
+function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 75)(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_25_For_1_Conditional_23_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 77)(1, "span", 78);
+    i0.ɵɵtext(2, "Loaded");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 79);
+    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_25_For_1_Conditional_23_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 77)(1, "span", 78);
+    i0.ɵɵtext(2, "Updated");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(3, "span", 79);
+    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_25_For_1_Conditional_23_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    const _r12 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 3);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_25_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", 83);
+    i0.ɵɵtext(2, " Stop ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("themeColor", "error");
+} }
+function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "button", 84);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_25_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", 85);
+    i0.ɵɵtext(2, " Switch To This ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("themeColor", "base");
+} }
+function ComponentBrowserComponent_Conditional_25_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_25_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", 86);
+    i0.ɵɵtext(2, " Run ");
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    i0.ɵɵproperty("themeColor", "primary");
+} }
+function ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 70);
+    i0.ɵɵtemplate(1, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_1_Template, 3, 1, "div", 75);
+    i0.ɵɵelementStart(2, "div", 76)(3, "div", 77)(4, "span", 78);
+    i0.ɵɵtext(5, "Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "span", 79);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 77)(9, "span", 78);
+    i0.ɵɵtext(10, "Version");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "span", 79);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(13, "div", 77)(14, "span", 78);
+    i0.ɵɵtext(15, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(16, "span", 79);
+    i0.ɵɵtext(17);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(18, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_18_Template, 6, 4, "div", 77)(19, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_19_Template, 6, 4, "div", 77);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 80);
+    i0.ɵɵtemplate(21, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_21_Template, 3, 1, "button", 81)(22, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_22_Template, 3, 1, "button", 82)(23, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Conditional_23_Template, 3, 1, "button", 81);
+    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_25_For_1_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 53)(1, "div", 54);
+    i0.ɵɵlistener("click", function ComponentBrowserComponent_Conditional_25_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", 55);
+    i0.ɵɵelement(3, "i", 56);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 57)(5, "div", 58)(6, "span", 59);
+    i0.ɵɵtext(7);
+    i0.ɵɵelementEnd();
+    i0.ɵɵtemplate(8, ComponentBrowserComponent_Conditional_25_For_1_Conditional_8_Template, 3, 3, "span", 60);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 61)(10, "span", 62);
+    i0.ɵɵtext(11);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "span", 63);
+    i0.ɵɵtext(13);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "span", 64);
+    i0.ɵɵelement(15, "i", 65);
+    i0.ɵɵtext(16);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵelementStart(17, "div", 66);
+    i0.ɵɵtemplate(18, ComponentBrowserComponent_Conditional_25_For_1_Conditional_18_Template, 3, 4, "button", 67)(19, ComponentBrowserComponent_Conditional_25_For_1_Conditional_19_Template, 2, 0, "button", 68);
+    i0.ɵɵelementStart(20, "div", 69);
+    i0.ɵɵtemplate(21, ComponentBrowserComponent_Conditional_25_For_1_Conditional_21_Template, 1, 0, "i", 43)(22, ComponentBrowserComponent_Conditional_25_For_1_Conditional_22_Template, 1, 0, "i", 44);
+    i0.ɵɵelementEnd()()();
+    i0.ɵɵtemplate(23, ComponentBrowserComponent_Conditional_25_For_1_Conditional_23_Template, 24, 6, "div", 70);
+    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_25_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ComponentBrowserComponent_Conditional_25_For_1_Template, 24, 22, "div", 52, 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" }, decls: 26, vars: 15, consts: [[1, "component-browser"], [1, "browser-header"], [1, "header-top-row"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-plus"], [1, "import-dropdown"], [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"], ["placeholder", "Search components...", 3, "valueChange", "value", "clearButton"], ["kendoTextBoxPrefixTemplate", ""], [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, "fa-solid", "fa-search", "search-icon"], [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"], ["kendoButton", "", 3, "themeColor"], ["kendoButton", "", "title", "Stop current component and run this one", 3, "themeColor"], [1, "fa-solid", "fa-stop"], ["kendoButton", "", "title", "Stop current component and run this one", 3, "click", "themeColor"], [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", 3);
+            i0.ɵɵlistener("click", function ComponentBrowserComponent_Template_button_click_7_listener() { return ctx.ToggleImportDropdown(); });
+            i0.ɵɵelement(8, "i", 6);
+            i0.ɵɵtext(9, " Import ");
+            i0.ɵɵelement(10, "i", 7);
+            i0.ɵɵelementEnd();
+            i0.ɵɵtemplate(11, ComponentBrowserComponent_Conditional_11_Template, 10, 0, "div", 8);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(12, "div", 9)(13, "button", 10);
+            i0.ɵɵlistener("click", function ComponentBrowserComponent_Template_button_click_13_listener() { return ctx.State.ToggleFilterPanel(); });
+            i0.ɵɵelement(14, "i", 11);
+            i0.ɵɵtemplate(15, ComponentBrowserComponent_Conditional_15_Template, 2, 1, "span", 12);
+            i0.ɵɵelementEnd();
+            i0.ɵɵelementStart(16, "span", 13);
+            i0.ɵɵtext(17);
+            i0.ɵɵelementEnd()()();
+            i0.ɵɵelementStart(18, "div", 14)(19, "kendo-textbox", 15);
+            i0.ɵɵlistener("valueChange", function ComponentBrowserComponent_Template_kendo_textbox_valueChange_19_listener($event) { return ctx.OnSearchChange($event); });
+            i0.ɵɵtemplate(20, ComponentBrowserComponent_ng_template_20_Template, 1, 0, "ng-template", 16);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵtemplate(21, ComponentBrowserComponent_Conditional_21_Template, 19, 5, "div", 17);
+            i0.ɵɵelementStart(22, "div", 18);
+            i0.ɵɵtemplate(23, ComponentBrowserComponent_Conditional_23_Template, 2, 0, "div", 19)(24, ComponentBrowserComponent_Conditional_24_Template, 3, 1, "div", 20)(25, ComponentBrowserComponent_Conditional_25_Template, 2, 0);
+            i0.ɵɵelementEnd()();
+        } if (rf & 2) {
+            i0.ɵɵadvance(3);
+            i0.ɵɵproperty("themeColor", "primary");
+            i0.ɵɵadvance(3);
+            i0.ɵɵclassProp("open", ctx.ImportDropdownOpen);
+            i0.ɵɵadvance();
+            i0.ɵɵproperty("themeColor", "base");
+            i0.ɵɵadvance(4);
+            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(2);
+            i0.ɵɵproperty("value", ctx.State.SearchQuery)("clearButton", true);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.State.IsFilterPanelExpanded ? 21 : -1);
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.State.IsLoading ? 23 : ctx.State.FilteredComponents.length === 0 ? 24 : 25);
+        } }, dependencies: [i2.NgClass, i3.TextBoxComponent, i3.TextBoxPrefixTemplateDirective, i4.ButtonComponent, i5.LoadingComponent, 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(--mat-sys-surface-container-low);\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(--mat-sys-outline);\n  background: var(--mat-sys-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(--mat-sys-on-surface-variant);\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(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-extra-small);\n  box-shadow: var(--mat-sys-elevation-2);\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(--mat-sys-on-surface);\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(--mat-sys-surface-variant);\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(--mat-sys-on-surface-variant);\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(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-extra-small);\n  background: var(--mat-sys-surface);\n  color: var(--mat-sys-on-surface-variant);\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(--mat-sys-on-surface-variant);\n  color: var(--mat-sys-on-surface);\n}\n\n.filter-toggle-btn.active[_ngcontent-%COMP%] {\n  border-color: var(--mat-sys-primary);\n  color: var(--mat-sys-primary);\n  background: #eff6ff;\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(--mat-sys-primary);\n  color: #fff;\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(--mat-sys-on-surface-variant);\n  margin-left: 6px;\n}\n\n\n\n\n\n\n\n\n.filter-panel[_ngcontent-%COMP%] {\n  border-bottom: 1px solid var(--mat-sys-outline);\n  background: var(--mat-sys-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(--mat-sys-on-surface-variant);\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(--mat-sys-on-surface-variant);\n  transition: background 0.15s;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]:hover {\n  background: var(--mat-sys-surface-variant);\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   input[type=\"checkbox\"][_ngcontent-%COMP%] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--mat-sys-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: #eab308;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .deprecated-icon[_ngcontent-%COMP%] {\n  color: #94a3b8;\n}\n\n.filter-checkbox[_ngcontent-%COMP%]   .deprecated-count[_ngcontent-%COMP%] {\n  color: #94a3b8;\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(--mat-sys-outline);\n  border-radius: 14px;\n  background: var(--mat-sys-surface);\n  font-size: 12px;\n  color: var(--mat-sys-on-surface-variant);\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(--mat-sys-on-surface-variant);\n  background: var(--mat-sys-surface-variant);\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(--mat-sys-primary));\n  background: var(--mat-sys-surface-container-lowest);\n}\n\n.category-pill.active[_ngcontent-%COMP%] {\n  border-color: var(--pill-color, var(--mat-sys-primary));\n  background: var(--pill-color, var(--mat-sys-primary));\n  color: #fff;\n}\n\n.category-pill.active[_ngcontent-%COMP%]   .pill-count[_ngcontent-%COMP%] {\n  background: rgba(255, 255, 255, 0.25);\n  color: #fff;\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(--mat-sys-primary);\n  cursor: pointer;\n}\n\n.show-more-btn[_ngcontent-%COMP%]:hover {\n  color: var(--mat-sys-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(--mat-sys-outline-variant);\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: #ef4444;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.clear-all-btn[_ngcontent-%COMP%]:hover {\n  background: #fef2f2;\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(--mat-sys-outline);\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(--mat-sys-on-surface-variant);\n  margin: 0 0 4px;\n}\n\n.empty-state[_ngcontent-%COMP%]   .empty-subtitle[_ngcontent-%COMP%] {\n  font-size: 13px;\n  color: var(--mat-sys-on-surface-variant);\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(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-small);\n  background: var(--mat-sys-surface);\n  transition: all 0.15s;\n  overflow: hidden;\n}\n\n.component-card[_ngcontent-%COMP%]:hover {\n  box-shadow: var(--mat-sys-elevation-1);\n  border-color: var(--mat-sys-outline);\n}\n\n\n\n.component-card.running[_ngcontent-%COMP%] {\n  border-left: 3px solid #10b981;\n}\n\n\n\n.component-card.file-loaded[_ngcontent-%COMP%] {\n  border-style: dashed;\n  border-color: #94a3b8;\n}\n\n.component-card.file-loaded[_ngcontent-%COMP%]:hover {\n  border-color: #64748b;\n}\n\n\n\n.component-card.expanded[_ngcontent-%COMP%] {\n  border-color: var(--mat-sys-primary);\n  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.1);\n}\n\n.component-card.expanded.running[_ngcontent-%COMP%] {\n  border-color: var(--mat-sys-primary);\n  border-left: 3px solid #10b981;\n}\n\n.component-card.expanded.file-loaded[_ngcontent-%COMP%] {\n  border-style: solid;\n  border-color: var(--mat-sys-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(--mat-sys-surface-container-lowest);\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(--mat-sys-surface-variant);\n  border-radius: var(--mat-sys-corner-extra-small);\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(--mat-sys-on-surface);\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: #f0f9ff;\n  color: #0284c7;\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(--mat-sys-on-surface-variant);\n  background: var(--mat-sys-surface-variant);\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: #d1fae5;\n  color: #065f46;\n}\n\n.status-badge.draft[_ngcontent-%COMP%] {\n  background: #e0e7ff;\n  color: #3730a3;\n}\n\n.status-badge.deprecated[_ngcontent-%COMP%] {\n  background: #fee2e2;\n  color: #991b1b;\n}\n\n.status-badge.file[_ngcontent-%COMP%] {\n  background: #fef3c7;\n  color: #92400e;\n}\n\n.status-badge.text[_ngcontent-%COMP%] {\n  background: #ede9fe;\n  color: #5b21b6;\n}\n\n.status-badge.artifact[_ngcontent-%COMP%] {\n  background: #cffafe;\n  color: #155e75;\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: #fff;\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(--mat-sys-outline);\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.favorite-btn[_ngcontent-%COMP%]:hover {\n  color: #eab308;\n  background: #fefce8;\n}\n\n.favorite-btn.is-favorite[_ngcontent-%COMP%] {\n  color: #eab308;\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(--mat-sys-outline);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.remove-btn[_ngcontent-%COMP%]:hover {\n  color: #ef4444;\n  background: #fef2f2;\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(--mat-sys-on-surface-variant);\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(--mat-sys-outline-variant);\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(--mat-sys-on-surface-variant);\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(--mat-sys-on-surface-variant);\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(--mat-sys-on-surface);\n}\n\n.detail-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mat-sys-outline-variant);\n}"] });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentBrowserComponent, [{
+        type: Component,
+        args: [{ 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 kendoButton\n        [themeColor]=\"'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 kendoButton\n          [themeColor]=\"'base'\"\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    <kendo-textbox\n      [value]=\"State.SearchQuery\"\n      (valueChange)=\"OnSearchChange($event)\"\n      placeholder=\"Search components...\"\n      [clearButton]=\"true\">\n      <ng-template kendoTextBoxPrefixTemplate>\n        <i class=\"fa-solid fa-search search-icon\"></i>\n      </ng-template>\n    </kendo-textbox>\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 kendoButton\n                    [themeColor]=\"'error'\"\n                    (click)=\"OnStopComponent($event)\">\n                    <i class=\"fa-solid fa-stop\"></i> Stop\n                  </button>\n                } @else if (IsAnotherComponentRunning(component)) {\n                  <button kendoButton\n                    [themeColor]=\"'base'\"\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 kendoButton\n                    [themeColor]=\"'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(--mat-sys-surface-container-low);\n  overflow: hidden;\n}\n\n/* ============================================================ */\n/* Header                                                        */\n/* ============================================================ */\n\n.browser-header {\n  padding: 12px 14px 8px;\n  border-bottom: 1px solid var(--mat-sys-outline);\n  background: var(--mat-sys-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(--mat-sys-on-surface-variant);\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(--mat-sys-surface);\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-extra-small);\n  box-shadow: var(--mat-sys-elevation-2);\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(--mat-sys-on-surface);\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(--mat-sys-surface-variant);\n}\n\n.import-dropdown .dropdown-menu .dropdown-item i {\n  width: 16px;\n  text-align: center;\n  color: var(--mat-sys-on-surface-variant);\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(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-extra-small);\n  background: var(--mat-sys-surface);\n  color: var(--mat-sys-on-surface-variant);\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(--mat-sys-on-surface-variant);\n  color: var(--mat-sys-on-surface);\n}\n\n.filter-toggle-btn.active {\n  border-color: var(--mat-sys-primary);\n  color: var(--mat-sys-primary);\n  background: #eff6ff;\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(--mat-sys-primary);\n  color: #fff;\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(--mat-sys-on-surface-variant);\n  margin-left: 6px;\n}\n\n/* ============================================================ */\n/* Filter Panel                                                  */\n/* ============================================================ */\n\n.filter-panel {\n  border-bottom: 1px solid var(--mat-sys-outline);\n  background: var(--mat-sys-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(--mat-sys-on-surface-variant);\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(--mat-sys-on-surface-variant);\n  transition: background 0.15s;\n}\n\n.filter-checkbox:hover {\n  background: var(--mat-sys-surface-variant);\n}\n\n.filter-checkbox input[type=\"checkbox\"] {\n  width: 14px;\n  height: 14px;\n  accent-color: var(--mat-sys-primary);\n  cursor: pointer;\n}\n\n.filter-checkbox .filter-icon {\n  font-size: 12px;\n}\n\n.filter-checkbox .favorites-icon {\n  color: #eab308;\n}\n\n.filter-checkbox .deprecated-icon {\n  color: #94a3b8;\n}\n\n.filter-checkbox .deprecated-count {\n  color: #94a3b8;\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(--mat-sys-outline);\n  border-radius: 14px;\n  background: var(--mat-sys-surface);\n  font-size: 12px;\n  color: var(--mat-sys-on-surface-variant);\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(--mat-sys-on-surface-variant);\n  background: var(--mat-sys-surface-variant);\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(--mat-sys-primary));\n  background: var(--mat-sys-surface-container-lowest);\n}\n\n.category-pill.active {\n  border-color: var(--pill-color, var(--mat-sys-primary));\n  background: var(--pill-color, var(--mat-sys-primary));\n  color: #fff;\n}\n\n.category-pill.active .pill-count {\n  background: rgba(255, 255, 255, 0.25);\n  color: #fff;\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(--mat-sys-primary);\n  cursor: pointer;\n}\n\n.show-more-btn:hover {\n  color: var(--mat-sys-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(--mat-sys-outline-variant);\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: #ef4444;\n  cursor: pointer;\n  transition: background 0.15s;\n}\n\n.clear-all-btn:hover {\n  background: #fef2f2;\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(--mat-sys-outline);\n  margin-bottom: 12px;\n}\n\n.empty-state .empty-title {\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mat-sys-on-surface-variant);\n  margin: 0 0 4px;\n}\n\n.empty-state .empty-subtitle {\n  font-size: 13px;\n  color: var(--mat-sys-on-surface-variant);\n  margin: 0;\n}\n\n/* ============================================================ */\n/* Component Card                                                */\n/* ============================================================ */\n\n.component-card {\n  margin-bottom: 6px;\n  border: 1px solid var(--mat-sys-outline);\n  border-radius: var(--mat-sys-corner-small);\n  background: var(--mat-sys-surface);\n  transition: all 0.15s;\n  overflow: hidden;\n}\n\n.component-card:hover {\n  box-shadow: var(--mat-sys-elevation-1);\n  border-color: var(--mat-sys-outline);\n}\n\n/* Running state: green left border */\n.component-card.running {\n  border-left: 3px solid #10b981;\n}\n\n/* File-loaded state: dashed border */\n.component-card.file-loaded {\n  border-style: dashed;\n  border-color: #94a3b8;\n}\n\n.component-card.file-loaded:hover {\n  border-color: #64748b;\n}\n\n/* Expanded state: blue border */\n.component-card.expanded {\n  border-color: var(--mat-sys-primary);\n  box-shadow: 0 2px 12px rgba(59, 130, 246, 0.1);\n}\n\n.component-card.expanded.running {\n  border-color: var(--mat-sys-primary);\n  border-left: 3px solid #10b981;\n}\n\n.component-card.expanded.file-loaded {\n  border-style: solid;\n  border-color: var(--mat-sys-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(--mat-sys-surface-container-lowest);\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(--mat-sys-surface-variant);\n  border-radius: var(--mat-sys-corner-extra-small);\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(--mat-sys-on-surface);\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: #f0f9ff;\n  color: #0284c7;\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(--mat-sys-on-surface-variant);\n  background: var(--mat-sys-surface-variant);\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: #d1fae5;\n  color: #065f46;\n}\n\n.status-badge.draft {\n  background: #e0e7ff;\n  color: #3730a3;\n}\n\n.status-badge.deprecated {\n  background: #fee2e2;\n  color: #991b1b;\n}\n\n.status-badge.file {\n  background: #fef3c7;\n  color: #92400e;\n}\n\n.status-badge.text {\n  background: #ede9fe;\n  color: #5b21b6;\n}\n\n.status-badge.artifact {\n  background: #cffafe;\n  color: #155e75;\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: #fff;\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(--mat-sys-outline);\n  font-size: 14px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.favorite-btn:hover {\n  color: #eab308;\n  background: #fefce8;\n}\n\n.favorite-btn.is-favorite {\n  color: #eab308;\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(--mat-sys-outline);\n  font-size: 12px;\n  cursor: pointer;\n  transition: all 0.15s;\n}\n\n.remove-btn:hover {\n  color: #ef4444;\n  background: #fef2f2;\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(--mat-sys-on-surface-variant);\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(--mat-sys-outline-variant);\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(--mat-sys-on-surface-variant);\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(--mat-sys-on-surface-variant);\n  text-transform: uppercase;\n  letter-spacing: 0.4px;\n}\n\n.detail-info-grid .info-value {\n  font-size: 13px;\n  color: var(--mat-sys-on-surface);\n}\n\n.detail-actions {\n  display: flex;\n  gap: 8px;\n  padding-top: 8px;\n  border-top: 1px solid var(--mat-sys-outline-variant);\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: 21 }); })();
+//# sourceMappingURL=component-browser.component.js.map