@memberjunction/ng-dashboards 2.85.0 → 2.86.0

package/dist/ComponentStudio/component-studio-dashboard.component.js

@@ -0,0 +1,751 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { BaseDashboard } from '../generic/base-dashboard';
+import { RegisterClass } from '@memberjunction/global';
+import { RunView } from '@memberjunction/core';
+import { Subject, BehaviorSubject, combineLatest } from 'rxjs';
+import { debounceTime, distinctUntilChanged, takeUntil } from 'rxjs/operators';
+import { SharedService } from '@memberjunction/ng-shared';
+import * as i0 from "@angular/core";
+import * as i1 from "@angular/common";
+import * as i2 from "@progress/kendo-angular-inputs";
+import * as i3 from "@progress/kendo-angular-dialog";
+import * as i4 from "@progress/kendo-angular-buttons";
+import * as i5 from "@progress/kendo-angular-grid";
+import * as i6 from "./components/component-preview.component";
+import * as i7 from "./components/component-dependencies.component";
+import * as i8 from "./components/component-studio-settings.component";
+const _forTrack0 = ($index, $item) => $item.ID;
+function ComponentStudioDashboardComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 2)(1, "div", 4)(2, "div", 5);
+    i0.ɵɵelement(3, "i", 6);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 7);
+    i0.ɵɵtext(5, "Loading Component Studio...");
+    i0.ɵɵelementEnd()()();
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_ng_template_10_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 38);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_16_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 34)(1, "input", 35);
+    i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_16_Template_input_change_1_listener($event) { const type_r5 = i0.ɵɵrestoreView(_r4).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onTypeFilterChange(type_r5, $event.target.checked)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(2, "span", 39);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const type_r5 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.selectedTypes$.value.has(type_r5));
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r1.getComponentTypeColor(type_r5));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", type_r5, " ");
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_22_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "label", 34)(1, "input", 35);
+    i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_22_Template_input_change_1_listener($event) { const status_r7 = i0.ɵɵrestoreView(_r6).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onStatusFilterChange(status_r7, $event.target.checked)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(2, "span", 40);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const status_r7 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("checked", ctx_r1.selectedStatuses$.value.has(status_r7));
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusBadgeClass(status_r7));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate(status_r7);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 19)(1, "div", 27)(2, "h3");
+    i0.ɵɵtext(3, "Filters");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "button", 28);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.clearFilters()); });
+    i0.ɵɵtext(5, " Clear All ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 29)(7, "label", 30);
+    i0.ɵɵtext(8, "Search");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "kendo-textbox", 31);
+    i0.ɵɵlistener("valueChange", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template_kendo_textbox_valueChange_9_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSearchChange($event)); });
+    i0.ɵɵtemplate(10, ComponentStudioDashboardComponent_Conditional_3_Conditional_14_ng_template_10_Template, 1, 0, "ng-template", 32);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(11, "div", 29)(12, "label", 30);
+    i0.ɵɵtext(13, "Component Type");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(14, "div", 33);
+    i0.ɵɵrepeaterCreate(15, ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_16_Template, 4, 4, "label", 34, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(17, "div", 29)(18, "label", 30);
+    i0.ɵɵtext(19, "Status");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 33);
+    i0.ɵɵrepeaterCreate(21, ComponentStudioDashboardComponent_Conditional_3_Conditional_14_For_22_Template, 4, 3, "label", 34, i0.ɵɵrepeaterTrackByIdentity);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(23, "div", 29)(24, "label", 30);
+    i0.ɵɵtext(25, "Source");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(26, "div", 33)(27, "label", 34)(28, "input", 35);
+    i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template_input_change_28_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSourceFilterChange("Local", $event.target.checked)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(29, "i", 36);
+    i0.ɵɵtext(30, " Local ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(31, "label", 34)(32, "input", 35);
+    i0.ɵɵlistener("change", function ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template_input_change_32_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSourceFilterChange("Registry", $event.target.checked)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(33, "i", 37);
+    i0.ɵɵtext(34, " Registry ");
+    i0.ɵɵelementEnd()()()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("fillMode", "flat")("size", "small");
+    i0.ɵɵadvance(5);
+    i0.ɵɵproperty("value", ctx_r1.searchQuery$.value)("clearButton", true);
+    i0.ɵɵadvance(6);
+    i0.ɵɵrepeater(ctx_r1.componentTypes);
+    i0.ɵɵadvance(6);
+    i0.ɵɵrepeater(ctx_r1.componentStatuses);
+    i0.ɵɵadvance(7);
+    i0.ɵɵproperty("checked", ctx_r1.selectedSources$.value.has("Local"));
+    i0.ɵɵadvance(4);
+    i0.ɵɵproperty("checked", ctx_r1.selectedSources$.value.has("Registry"));
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Conditional_21_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 60);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Conditional_22_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "i", 61);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Template(rf, ctx) { if (rf & 1) {
+    const _r8 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 46);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Template_div_click_0_listener() { const component_r9 = i0.ɵɵrestoreView(_r8).$implicit; const ctx_r1 = i0.ɵɵnextContext(4); return i0.ɵɵresetView(ctx_r1.selectComponent(component_r9)); });
+    i0.ɵɵelementStart(1, "div", 47)(2, "div", 48);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "div", 49);
+    i0.ɵɵtext(5);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(6, "div", 50)(7, "h4", 51);
+    i0.ɵɵtext(8);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 52);
+    i0.ɵɵtext(10);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "p", 53);
+    i0.ɵɵtext(12);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(13, "div", 54);
+    i0.ɵɵelement(14, "i", 55);
+    i0.ɵɵtext(15);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(16, "div", 56)(17, "div", 57);
+    i0.ɵɵelement(18, "i", 58);
+    i0.ɵɵtext(19);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(20, "div", 59);
+    i0.ɵɵtemplate(21, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Conditional_21_Template, 1, 0, "i", 60)(22, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Conditional_22_Template, 1, 0, "i", 61);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    const component_r9 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵclassProp("selected", ctx_r1.selectedComponentId === component_r9.ID);
+    i0.ɵɵadvance(2);
+    i0.ɵɵstyleProp("background-color", ctx_r1.getComponentTypeColor(component_r9.Type || "Other"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", component_r9.Type || "Other", " ");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusBadgeClass(component_r9.Status || "Draft"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", component_r9.Status, " ");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate(component_r9.Name);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate1("v", component_r9.Version, "");
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(component_r9.Description || "No description available");
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", component_r9.Namespace || "root", " ");
+    i0.ɵɵadvance(4);
+    i0.ɵɵtextInterpolate1(" ", component_r9.DeveloperOrganization || component_r9.DeveloperName || "Unknown", " ");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(!component_r9.SourceRegistryID ? 21 : 22);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 43);
+    i0.ɵɵrepeaterCreate(1, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_For_2_Template, 23, 13, "div", 45, _forTrack0);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵadvance();
+    i0.ɵɵrepeater(ctx_r1.filteredComponents$.value);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_ng_template_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 71);
+    i0.ɵɵelement(1, "span", 72);
+    i0.ɵɵtext(2);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r11 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵadvance();
+    i0.ɵɵstyleProp("background-color", ctx_r1.getComponentTypeColor(dataItem_r11.Type || "Other"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", dataItem_r11.Name, " ");
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_ng_template_6_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "span", 40);
+    i0.ɵɵtext(1);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const dataItem_r12 = ctx.$implicit;
+    const ctx_r1 = i0.ɵɵnextContext(4);
+    i0.ɵɵproperty("ngClass", ctx_r1.getStatusBadgeClass(dataItem_r12.Status || "Draft"));
+    i0.ɵɵadvance();
+    i0.ɵɵtextInterpolate1(" ", dataItem_r12.Status, " ");
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r10 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "kendo-grid", 62);
+    i0.ɵɵlistener("selectionChange", function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_Template_kendo_grid_selectionChange_0_listener($event) { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectComponent($event.selectedRows && $event.selectedRows[0] ? $event.selectedRows[0].dataItem : null)); });
+    i0.ɵɵelementStart(1, "kendo-grid-column", 63);
+    i0.ɵɵtemplate(2, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_ng_template_2_Template, 3, 3, "ng-template", 64);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(3, "kendo-grid-column", 65)(4, "kendo-grid-column", 66);
+    i0.ɵɵelementStart(5, "kendo-grid-column", 67);
+    i0.ɵɵtemplate(6, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_ng_template_6_Template, 2, 2, "ng-template", 64);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelement(7, "kendo-grid-column", 68)(8, "kendo-grid-column", 69)(9, "kendo-grid-column", 70);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("data", ctx_r1.filteredComponents$.value)("pageSize", 20)("pageable", true)("sortable", true)("filterable", false)("resizable", true)("selectable", true);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", 250);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("width", 80);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", 100);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", 100);
+    i0.ɵɵadvance(2);
+    i0.ɵɵproperty("width", 200);
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("width", 150);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 21)(1, "div", 41)(2, "span", 42);
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵtemplate(4, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_4_Template, 3, 0, "div", 43)(5, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Conditional_5_Template, 10, 13, "kendo-grid", 44);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance(3);
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.filteredComponents$.value.length, " components found ");
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.viewMode === "grid" ? 4 : 5);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r13 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-component-preview", 75);
+    i0.ɵɵlistener("openEntityRecord", function ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Conditional_1_Template_mj_component_preview_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r13); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("component", ctx_r1.selectedComponent)("componentSpec", ctx_r1.componentSpec);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵelement(1, "i", 76);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "No Component Selected");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Select a component from the Browse tab to preview it");
+    i0.ɵɵelementEnd()();
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 22);
+    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Conditional_1_Template, 1, 2, "mj-component-preview", 73)(2, ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Conditional_2_Template, 6, 0, "div", 74);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedComponent ? 1 : 2);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Conditional_1_Template(rf, ctx) { if (rf & 1) {
+    const _r14 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "mj-component-dependencies", 78);
+    i0.ɵɵlistener("openEntityRecord", function ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Conditional_1_Template_mj_component_dependencies_openEntityRecord_0_listener($event) { i0.ɵɵrestoreView(_r14); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(3);
+    i0.ɵɵproperty("component", ctx_r1.selectedComponent);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 74);
+    i0.ɵɵelement(1, "i", 79);
+    i0.ɵɵelementStart(2, "h3");
+    i0.ɵɵtext(3, "No Component Selected");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(4, "p");
+    i0.ɵɵtext(5, "Select a component to view its dependencies");
+    i0.ɵɵelementEnd()();
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 23);
+    i0.ɵɵtemplate(1, ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Conditional_1_Template, 1, 1, "mj-component-dependencies", 77)(2, ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Conditional_2_Template, 6, 0, "div", 74);
+    i0.ɵɵelementEnd();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext(2);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.selectedComponent ? 1 : 2);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Conditional_19_Template(rf, ctx) { if (rf & 1) {
+    const _r15 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 24)(1, "mj-component-studio-settings", 80);
+    i0.ɵɵlistener("openEntityRecord", function ComponentStudioDashboardComponent_Conditional_3_Conditional_19_Template_mj_component_studio_settings_openEntityRecord_1_listener($event) { i0.ɵɵrestoreView(_r15); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onOpenEntityRecord($event)); });
+    i0.ɵɵelementEnd()();
+} }
+function ComponentStudioDashboardComponent_Conditional_3_For_22_Template(rf, ctx) { if (rf & 1) {
+    const _r16 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 81);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_For_22_Template_div_click_0_listener() { const $index_r17 = i0.ɵɵrestoreView(_r16).$index; const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onTabChange(ctx_r1.navigationItems[$index_r17])); });
+    i0.ɵɵelement(1, "i");
+    i0.ɵɵelementStart(2, "span");
+    i0.ɵɵtext(3);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const navItem_r18 = ctx.$implicit;
+    i0.ɵɵclassProp("active", navItem_r18.selected);
+    i0.ɵɵadvance();
+    i0.ɵɵclassMap(navItem_r18.icon);
+    i0.ɵɵadvance(2);
+    i0.ɵɵtextInterpolate(navItem_r18.text);
+} }
+function ComponentStudioDashboardComponent_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 3)(1, "div", 8)(2, "div", 9)(3, "h1", 10);
+    i0.ɵɵelement(4, "i", 11);
+    i0.ɵɵtext(5, " Component Studio ");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(6, "div", 12);
+    i0.ɵɵtext(7, " Discover, preview, and test reusable components ");
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(8, "div", 13)(9, "div", 14)(10, "button", 15);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_Template_button_click_10_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleViewMode()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "button", 16);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleFilterPanel()); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(12, "button", 17);
+    i0.ɵɵlistener("click", function ComponentStudioDashboardComponent_Conditional_3_Template_button_click_12_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.refreshData()); });
+    i0.ɵɵelementEnd()()()();
+    i0.ɵɵelementStart(13, "div", 18);
+    i0.ɵɵtemplate(14, ComponentStudioDashboardComponent_Conditional_3_Conditional_14_Template, 35, 6, "div", 19);
+    i0.ɵɵelementStart(15, "div", 20);
+    i0.ɵɵtemplate(16, ComponentStudioDashboardComponent_Conditional_3_Conditional_16_Template, 6, 2, "div", 21)(17, ComponentStudioDashboardComponent_Conditional_3_Conditional_17_Template, 3, 1, "div", 22)(18, ComponentStudioDashboardComponent_Conditional_3_Conditional_18_Template, 3, 1, "div", 23)(19, ComponentStudioDashboardComponent_Conditional_3_Conditional_19_Template, 2, 0, "div", 24);
+    i0.ɵɵelementEnd()();
+    i0.ɵɵelementStart(20, "div", 25);
+    i0.ɵɵrepeaterCreate(21, ComponentStudioDashboardComponent_Conditional_3_For_22_Template, 4, 5, "div", 26, i0.ɵɵrepeaterTrackByIndex);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵadvance(10);
+    i0.ɵɵproperty("icon", ctx_r1.viewMode === "grid" ? "fa-solid fa-list" : "fa-solid fa-th")("fillMode", "flat");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("icon", ctx_r1.showFilterPanel ? "fa-solid fa-filter-circle-xmark" : "fa-solid fa-filter")("fillMode", "flat");
+    i0.ɵɵadvance();
+    i0.ɵɵproperty("icon", "fa-solid fa-sync")("fillMode", "flat");
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.showFilterPanel && ctx_r1.activeTab === "browse" ? 14 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵconditional(ctx_r1.activeTab === "browse" ? 16 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.activeTab === "preview" ? 17 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.activeTab === "dependencies" ? 18 : -1);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.activeTab === "settings" ? 19 : -1);
+    i0.ɵɵadvance(2);
+    i0.ɵɵrepeater(ctx_r1.navigationConfig);
+} }
+let ComponentStudioDashboardComponent = class ComponentStudioDashboardComponent extends BaseDashboard {
+    cdr;
+    // State management
+    isLoading = false;
+    activeTab = 'browse'; // Default tab
+    viewMode = 'grid';
+    selectedComponentId = null;
+    showFilterPanel = true;
+    showPreviewPanel = false;
+    // Data
+    components$ = new BehaviorSubject([]);
+    filteredComponents$ = new BehaviorSubject([]);
+    registries$ = new BehaviorSubject([]);
+    libraries$ = new BehaviorSubject([]);
+    // Filters
+    searchQuery$ = new BehaviorSubject('');
+    selectedTypes$ = new BehaviorSubject(new Set());
+    selectedStatuses$ = new BehaviorSubject(new Set(['Published'])); // Default to published
+    selectedSources$ = new BehaviorSubject(new Set());
+    selectedNamespaces$ = new BehaviorSubject(new Set());
+    // Component types for filtering
+    componentTypes = ['Report', 'Dashboard', 'Form', 'Table', 'Chart', 'Navigation', 'Search', 'Widget', 'Utility', 'Other'];
+    componentStatuses = ['Draft', 'Published', 'Deprecated'];
+    // Preview
+    selectedComponent = null;
+    componentSpec = null;
+    previewError = null;
+    // Navigation items for bottom navigation
+    navigationItems = ['browse', 'preview', 'dependencies', 'settings'];
+    navigationConfig = [
+        { text: 'Browse', icon: 'fa-solid fa-th', selected: true },
+        { text: 'Preview', icon: 'fa-solid fa-eye', selected: false },
+        { text: 'Dependencies', icon: 'fa-solid fa-sitemap', selected: false },
+        { text: 'Settings', icon: 'fa-solid fa-cog', selected: false }
+    ];
+    destroy$ = new Subject();
+    stateChangeSubject = new Subject();
+    constructor(cdr) {
+        super();
+        this.cdr = cdr;
+    }
+    ngAfterViewInit() {
+        this.initDashboard();
+        this.loadData();
+        this.emitStateChange();
+        this.updateNavigationSelection();
+        // Force change detection
+        this.cdr.detectChanges();
+    }
+    initDashboard() {
+        // Initialize dashboard - called once when dashboard is created
+        this.setupStateManagement();
+        this.setupFilterSubscriptions();
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.stateChangeSubject.complete();
+    }
+    async loadData() {
+        this.isLoading = true;
+        this.cdr.markForCheck();
+        try {
+            const rv = new RunView();
+            // Load all data in parallel using RunViews
+            const [componentsResult, registriesResult, librariesResult] = await rv.RunViews([
+                {
+                    EntityName: 'Components',
+                    ExtraFilter: '',
+                    OrderBy: 'Name',
+                    MaxRows: 1000,
+                    ResultType: 'entity_object'
+                },
+                {
+                    EntityName: 'Component Registries',
+                    ExtraFilter: '',
+                    OrderBy: 'Name',
+                    MaxRows: 100,
+                    ResultType: 'entity_object'
+                },
+                {
+                    EntityName: 'Component Libraries',
+                    ExtraFilter: '',
+                    OrderBy: 'Name',
+                    MaxRows: 500,
+                    ResultType: 'entity_object'
+                }
+            ]);
+            if (componentsResult.Success) {
+                const components = componentsResult.Results;
+                // Load dependencies for each component if needed
+                // For now, just set the basic data
+                this.components$.next(components);
+                this.applyFilters();
+            }
+            if (registriesResult.Success) {
+                this.registries$.next(registriesResult.Results);
+            }
+            if (librariesResult.Success) {
+                this.libraries$.next(librariesResult.Results);
+            }
+        }
+        catch (error) {
+            console.error('Failed to load component data:', error);
+        }
+        finally {
+            this.isLoading = false;
+            this.cdr.markForCheck();
+        }
+    }
+    setupFilterSubscriptions() {
+        // Combine all filter observables and apply filters when any change
+        combineLatest([
+            this.searchQuery$.pipe(debounceTime(300), distinctUntilChanged()),
+            this.selectedTypes$,
+            this.selectedStatuses$,
+            this.selectedSources$,
+            this.selectedNamespaces$,
+            this.components$
+        ])
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(([search, types, statuses, sources, namespaces, components]) => {
+            this.applyFiltersWithCriteria(search, types, statuses, sources, namespaces, components);
+        });
+    }
+    applyFilters() {
+        const search = this.searchQuery$.value;
+        const types = this.selectedTypes$.value;
+        const statuses = this.selectedStatuses$.value;
+        const sources = this.selectedSources$.value;
+        const namespaces = this.selectedNamespaces$.value;
+        const components = this.components$.value;
+        this.applyFiltersWithCriteria(search, types, statuses, sources, namespaces, components);
+    }
+    applyFiltersWithCriteria(search, types, statuses, sources, namespaces, components) {
+        let filtered = [...components];
+        // Search filter
+        if (search) {
+            const query = search.toLowerCase();
+            filtered = filtered.filter(c => c.Name?.toLowerCase().includes(query) ||
+                c.Description?.toLowerCase().includes(query) ||
+                c.Namespace?.toLowerCase().includes(query) ||
+                c.DeveloperName?.toLowerCase().includes(query) ||
+                c.DeveloperOrganization?.toLowerCase().includes(query));
+        }
+        // Type filter
+        if (types.size > 0) {
+            filtered = filtered.filter(c => c.Type && types.has(c.Type));
+        }
+        // Status filter
+        if (statuses.size > 0) {
+            filtered = filtered.filter(c => c.Status && statuses.has(c.Status));
+        }
+        // Source filter (Local vs Registry)
+        if (sources.size > 0) {
+            filtered = filtered.filter(c => {
+                const isLocal = !c.SourceRegistryID;
+                return (sources.has('Local') && isLocal) || (sources.has('Registry') && !isLocal);
+            });
+        }
+        // Namespace filter
+        if (namespaces.size > 0) {
+            filtered = filtered.filter(c => {
+                if (!c.Namespace)
+                    return false;
+                // Check if namespace starts with any selected namespace
+                return Array.from(namespaces).some(ns => c.Namespace?.startsWith(ns));
+            });
+        }
+        this.filteredComponents$.next(filtered);
+        this.cdr.markForCheck();
+    }
+    onTabChange(tabId) {
+        this.activeTab = tabId;
+        this.updateNavigationSelection();
+        // Trigger resize for rendering issues
+        setTimeout(() => {
+            SharedService.Instance.InvokeManualResize();
+        }, 100);
+        this.emitStateChange();
+        this.cdr.markForCheck();
+    }
+    onNavigationChange(event) {
+        const index = event.index;
+        if (index >= 0 && index < this.navigationItems.length) {
+            this.activeTab = this.navigationItems[index];
+            this.updateNavigationSelection();
+            this.emitStateChange();
+            setTimeout(() => {
+                SharedService.Instance.InvokeManualResize();
+            }, 100);
+            this.cdr.markForCheck();
+        }
+    }
+    updateNavigationSelection() {
+        this.navigationConfig.forEach((item, index) => {
+            item.selected = this.navigationItems[index] === this.activeTab;
+        });
+    }
+    toggleViewMode() {
+        this.viewMode = this.viewMode === 'grid' ? 'list' : 'grid';
+        this.emitStateChange();
+        this.cdr.markForCheck();
+    }
+    toggleFilterPanel() {
+        this.showFilterPanel = !this.showFilterPanel;
+        this.cdr.markForCheck();
+    }
+    async selectComponent(component) {
+        if (!component)
+            return;
+        this.selectedComponent = component;
+        this.selectedComponentId = component.ID;
+        // Load component details if in preview mode
+        if (this.activeTab === 'preview') {
+            await this.loadComponentDetails(component);
+        }
+        this.emitStateChange();
+        this.cdr.markForCheck();
+    }
+    async loadComponentDetails(component) {
+        try {
+            // TODO: Load component spec from storage
+            // For now, we'll need to implement storage of ComponentSpec
+            this.componentSpec = null;
+            this.previewError = null;
+        }
+        catch (error) {
+            this.previewError = 'Failed to load component details';
+            console.error('Error loading component details:', error);
+        }
+    }
+    onSearchChange(query) {
+        this.searchQuery$.next(query);
+    }
+    onTypeFilterChange(type, checked) {
+        const types = new Set(this.selectedTypes$.value);
+        if (checked) {
+            types.add(type);
+        }
+        else {
+            types.delete(type);
+        }
+        this.selectedTypes$.next(types);
+    }
+    onStatusFilterChange(status, checked) {
+        const statuses = new Set(this.selectedStatuses$.value);
+        if (checked) {
+            statuses.add(status);
+        }
+        else {
+            statuses.delete(status);
+        }
+        this.selectedStatuses$.next(statuses);
+    }
+    onSourceFilterChange(source, checked) {
+        const sources = new Set(this.selectedSources$.value);
+        if (checked) {
+            sources.add(source);
+        }
+        else {
+            sources.delete(source);
+        }
+        this.selectedSources$.next(sources);
+    }
+    clearFilters() {
+        this.searchQuery$.next('');
+        this.selectedTypes$.next(new Set());
+        this.selectedStatuses$.next(new Set(['Published']));
+        this.selectedSources$.next(new Set());
+        this.selectedNamespaces$.next(new Set());
+    }
+    onOpenEntityRecord(event) {
+        this.OpenEntityRecord.emit({
+            EntityName: event.entityName,
+            RecordPKey: event.key
+        });
+    }
+    async refreshData() {
+        await this.loadData();
+    }
+    setupStateManagement() {
+        this.stateChangeSubject.pipe(debounceTime(50), takeUntil(this.destroy$)).subscribe(state => {
+            this.UserStateChanged.emit(state);
+        });
+    }
+    emitStateChange() {
+        const state = {
+            activeTab: this.activeTab,
+            selectedComponentId: this.selectedComponentId,
+            filterState: {
+                types: Array.from(this.selectedTypes$.value),
+                statuses: Array.from(this.selectedStatuses$.value),
+                sources: Array.from(this.selectedSources$.value),
+                namespaces: Array.from(this.selectedNamespaces$.value)
+            },
+            searchQuery: this.searchQuery$.value,
+            viewMode: this.viewMode,
+            previewState: {
+                componentId: this.selectedComponentId,
+                isLoading: false,
+                error: this.previewError,
+                testData: null
+            }
+        };
+        this.stateChangeSubject.next(state);
+    }
+    // Helper methods for template
+    getComponentTypeColor(type) {
+        const colors = {
+            'Report': '#3B82F6', // Blue
+            'Dashboard': '#8B5CF6', // Purple
+            'Form': '#10B981', // Green
+            'Chart': '#F97316', // Orange
+            'Table': '#06B6D4', // Cyan
+            'Widget': '#EC4899', // Pink
+            'Navigation': '#6366F1', // Indigo
+            'Search': '#14B8A6', // Teal
+            'Utility': '#64748B', // Slate
+            'Other': '#9CA3AF' // Gray
+        };
+        return colors[type] || colors['Other'];
+    }
+    getStatusBadgeClass(status) {
+        const classes = {
+            'Draft': 'badge-draft',
+            'Published': 'badge-published',
+            'Deprecated': 'badge-deprecated'
+        };
+        return classes[status] || 'badge-default';
+    }
+    static ɵfac = function ComponentStudioDashboardComponent_Factory(t) { return new (t || ComponentStudioDashboardComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ComponentStudioDashboardComponent, selectors: [["mj-component-studio-dashboard"]], features: [i0.ɵɵInheritDefinitionFeature], decls: 4, vars: 2, consts: [[1, "component-studio-dashboard"], ["kendoDialogContainer", ""], [1, "loading-container"], [1, "dashboard-wrapper"], [1, "loading-content"], [1, "loading-spinner"], [1, "fa-solid", "fa-spinner", "fa-spin", "fa-3x"], [1, "loading-text"], [1, "dashboard-header"], [1, "header-left"], [1, "dashboard-title"], [1, "fa-solid", "fa-puzzle-piece"], [1, "dashboard-subtitle"], [1, "header-right"], [1, "header-actions"], ["kendoButton", "", "title", "Toggle view mode", 3, "click", "icon", "fillMode"], ["kendoButton", "", "title", "Toggle filters", 3, "click", "icon", "fillMode"], ["kendoButton", "", "title", "Refresh", 3, "click", "icon", "fillMode"], [1, "dashboard-content"], [1, "filter-panel"], [1, "content-area"], [1, "browse-content"], [1, "preview-content"], [1, "dependencies-content"], [1, "settings-content"], [1, "dashboard-navigation"], [1, "nav-item", 3, "active"], [1, "filter-header"], ["kendoButton", "", 3, "click", "fillMode", "size"], [1, "filter-section"], [1, "filter-label"], ["placeholder", "Search components...", 3, "valueChange", "value", "clearButton"], ["kendoTextBoxPrefixTemplate", ""], [1, "filter-options"], [1, "checkbox-label"], ["type", "checkbox", 3, "change", "checked"], [1, "fa-solid", "fa-house"], [1, "fa-solid", "fa-cloud"], [1, "fa-solid", "fa-search"], [1, "type-indicator"], [1, "status-badge", 3, "ngClass"], [1, "results-summary"], [1, "result-count"], [1, "component-grid"], [3, "data", "pageSize", "pageable", "sortable", "filterable", "resizable", "selectable"], [1, "component-card", 3, "selected"], [1, "component-card", 3, "click"], [1, "card-header"], [1, "card-type"], [1, "card-status", 3, "ngClass"], [1, "card-body"], [1, "card-title"], [1, "card-version"], [1, "card-description"], [1, "card-namespace"], [1, "fa-solid", "fa-folder-tree"], [1, "card-footer"], [1, "card-developer"], [1, "fa-solid", "fa-user"], [1, "card-source"], ["title", "Local", 1, "fa-solid", "fa-house"], ["title", "Registry", 1, "fa-solid", "fa-cloud"], [3, "selectionChange", "data", "pageSize", "pageable", "sortable", "filterable", "resizable", "selectable"], ["field", "Name", "title", "Component", 3, "width"], ["kendoGridCellTemplate", ""], ["field", "Version", "title", "Version", 3, "width"], ["field", "Type", "title", "Type", 3, "width"], ["field", "Status", "title", "Status", 3, "width"], ["field", "Namespace", "title", "Namespace", 3, "width"], ["field", "DeveloperOrganization", "title", "Developer", 3, "width"], ["field", "Description", "title", "Description"], [1, "component-name"], [1, "type-dot"], [3, "component", "componentSpec"], [1, "empty-state"], [3, "openEntityRecord", "component", "componentSpec"], [1, "fa-solid", "fa-eye", "fa-4x"], [3, "component"], [3, "openEntityRecord", "component"], [1, "fa-solid", "fa-sitemap", "fa-4x"], [3, "openEntityRecord"], [1, "nav-item", 3, "click"]], template: function ComponentStudioDashboardComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "div", 0);
+            i0.ɵɵelement(1, "div", 1);
+            i0.ɵɵtemplate(2, ComponentStudioDashboardComponent_Conditional_2_Template, 6, 0, "div", 2)(3, ComponentStudioDashboardComponent_Conditional_3_Template, 23, 11, "div", 3);
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵadvance(2);
+            i0.ɵɵconditional(ctx.isLoading ? 2 : -1);
+            i0.ɵɵadvance();
+            i0.ɵɵconditional(!ctx.isLoading ? 3 : -1);
+        } }, dependencies: [i1.NgClass, i2.TextBoxComponent, i2.TextBoxPrefixTemplateDirective, i3.DialogContainerDirective, i4.ButtonComponent, i5.GridComponent, i5.ColumnComponent, i5.CellTemplateDirective, i6.ComponentPreviewComponent, i7.ComponentDependenciesComponent, i8.ComponentStudioSettingsComponent], styles: ["[_nghost-%COMP%] {\n  display: block;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.component-studio-dashboard[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.03);\n    backdrop-filter: blur(10px);\n    z-index: 0;\n  }\n\n  .loading-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    position: relative;\n    z-index: 1;\n    \n    .loading-content {\n      text-align: center;\n      color: white;\n      \n      .loading-spinner {\n        margin-bottom: 20px;\n        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n      }\n      \n      .loading-text {\n        font-size: 18px;\n        font-weight: 500;\n        opacity: 0.9;\n      }\n    }\n  }\n\n  .dashboard-wrapper {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    position: relative;\n    z-index: 1;\n  }\n\n  // Header\n  .dashboard-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 30px;\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(20px);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n    position: relative;\n    z-index: 2;\n    \n    .header-left {\n      .dashboard-title {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        font-size: 28px;\n        font-weight: 700;\n        color: white;\n        margin: 0;\n        \n        i {\n          font-size: 32px;\n        }\n      }\n      \n      .dashboard-subtitle {\n        color: rgba(255, 255, 255, 0.8);\n        font-size: 14px;\n        margin-top: 4px;\n        margin-left: 44px;\n      }\n    }\n    \n    .header-right {\n      .header-actions {\n        display: flex;\n        gap: 8px;\n        \n        button {\n          background: rgba(255, 255, 255, 0.2);\n          border: 1px solid rgba(255, 255, 255, 0.3);\n          color: white;\n          \n          &:hover {\n            background: rgba(255, 255, 255, 0.3);\n          }\n        }\n      }\n    }\n  }\n\n  // Main Content\n  .dashboard-content {\n    flex: 1;\n    display: flex;\n    overflow: hidden;\n    background: rgba(255, 255, 255, 0.95);\n    margin: 20px;\n    border-radius: 12px;\n    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n    position: relative;\n    z-index: 1;\n  }\n\n  // Filter Panel\n  .filter-panel {\n    width: 280px;\n    background: white;\n    border-right: 1px solid #e5e7eb;\n    padding: 20px;\n    overflow-y: auto;\n    \n    .filter-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      \n      h3 {\n        font-size: 16px;\n        font-weight: 600;\n        color: #1f2937;\n        margin: 0;\n      }\n      \n      button {\n        padding: 4px 8px;\n        font-size: 12px;\n      }\n    }\n    \n    .filter-section {\n      margin-bottom: 24px;\n      \n      .filter-label {\n        display: block;\n        font-size: 13px;\n        font-weight: 600;\n        color: #6b7280;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        margin-bottom: 8px;\n      }\n      \n      kendo-textbox {\n        width: 100%;\n      }\n      \n      .filter-options {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        \n        .checkbox-label {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 14px;\n          color: #374151;\n          \n          &:hover {\n            color: #111827;\n          }\n          \n          input[type=\"checkbox\"] {\n            cursor: pointer;\n          }\n          \n          .type-indicator {\n            width: 12px;\n            height: 12px;\n            border-radius: 3px;\n            flex-shrink: 0;\n          }\n          \n          .status-badge {\n            padding: 2px 8px;\n            border-radius: 12px;\n            font-size: 11px;\n            font-weight: 600;\n            \n            &.badge-draft {\n              background: #fef3c7;\n              color: #92400e;\n            }\n            \n            &.badge-published {\n              background: #d1fae5;\n              color: #065f46;\n            }\n            \n            &.badge-deprecated {\n              background: #fee2e2;\n              color: #991b1b;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  // Content Area\n  .content-area {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    \n    .browse-content {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      padding: 20px;\n      \n      .results-summary {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 20px;\n        \n        .result-count {\n          font-size: 14px;\n          color: #6b7280;\n        }\n      }\n      \n      // Component Grid\n      .component-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n        gap: 20px;\n        overflow-y: auto;\n        padding: 4px;\n        \n        .component-card {\n          background: white;\n          border: 2px solid #e5e7eb;\n          border-radius: 12px;\n          padding: 16px;\n          cursor: pointer;\n          transition: all 0.2s ease;\n          position: relative;\n          overflow: hidden;\n          height: fit-content;\n          \n          &:hover {\n            border-color: #9ca3af;\n            transform: translateY(-2px);\n            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n          }\n          \n          &.selected {\n            border-color: #6366f1;\n            background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);\n          }\n          \n          .card-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 12px;\n            \n            .card-type {\n              padding: 4px 10px;\n              border-radius: 6px;\n              color: white;\n              font-size: 11px;\n              font-weight: 600;\n              text-transform: uppercase;\n              letter-spacing: 0.05em;\n            }\n            \n            .card-status {\n              padding: 3px 8px;\n              border-radius: 12px;\n              font-size: 11px;\n              font-weight: 600;\n              \n              &.badge-draft {\n                background: #fef3c7;\n                color: #92400e;\n              }\n              \n              &.badge-published {\n                background: #d1fae5;\n                color: #065f46;\n              }\n              \n              &.badge-deprecated {\n                background: #fee2e2;\n                color: #991b1b;\n              }\n            }\n          }\n          \n          .card-body {\n            margin-bottom: 12px;\n            \n            .card-title {\n              font-size: 16px;\n              font-weight: 600;\n              color: #111827;\n              margin: 0 0 4px 0;\n            }\n            \n            .card-version {\n              font-size: 12px;\n              color: #6b7280;\n              margin-bottom: 8px;\n            }\n            \n            .card-description {\n              font-size: 13px;\n              color: #6b7280;\n              line-height: 1.5;\n              margin: 8px 0;\n              display: -webkit-box;\n              -webkit-line-clamp: 2;\n              -webkit-box-orient: vertical;\n              overflow: hidden;\n            }\n            \n            .card-namespace {\n              font-size: 12px;\n              color: #9ca3af;\n              display: flex;\n              align-items: center;\n              gap: 6px;\n              \n              i {\n                font-size: 11px;\n              }\n            }\n          }\n          \n          .card-footer {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding-top: 12px;\n            border-top: 1px solid #f3f4f6;\n            \n            .card-developer {\n              font-size: 12px;\n              color: #6b7280;\n              display: flex;\n              align-items: center;\n              gap: 6px;\n              \n              i {\n                font-size: 11px;\n              }\n            }\n            \n            .card-source {\n              font-size: 14px;\n              color: #9ca3af;\n            }\n          }\n        }\n      }\n      \n      // List View (Kendo Grid styling)\n      kendo-grid {\n        height: 100%;\n        \n        .component-name {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          \n          .type-dot {\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n          }\n        }\n        \n        .status-badge {\n          padding: 2px 8px;\n          border-radius: 12px;\n          font-size: 11px;\n          font-weight: 600;\n          display: inline-block;\n          \n          &.badge-draft {\n            background: #fef3c7;\n            color: #92400e;\n          }\n          \n          &.badge-published {\n            background: #d1fae5;\n            color: #065f46;\n          }\n          \n          &.badge-deprecated {\n            background: #fee2e2;\n            color: #991b1b;\n          }\n        }\n      }\n    }\n    \n    .preview-content,\n    .dependencies-content,\n    .settings-content {\n      height: 100%;\n      padding: 20px;\n      overflow-y: auto;\n    }\n    \n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      color: #9ca3af;\n      \n      i {\n        margin-bottom: 20px;\n        opacity: 0.5;\n      }\n      \n      h3 {\n        font-size: 20px;\n        font-weight: 600;\n        color: #6b7280;\n        margin: 0 0 8px 0;\n      }\n      \n      p {\n        font-size: 14px;\n        color: #9ca3af;\n        margin: 0;\n      }\n    }\n  }\n\n  // Bottom Navigation\n  .dashboard-navigation {\n    display: flex;\n    justify-content: center;\n    gap: 4px;\n    padding: 12px 20px;\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(20px);\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n    position: relative;\n    z-index: 2;\n    \n    .nav-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 24px;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      color: rgba(255, 255, 255, 0.7);\n      \n      i {\n        font-size: 20px;\n      }\n      \n      span {\n        font-size: 12px;\n        font-weight: 500;\n      }\n      \n      &:hover {\n        background: rgba(255, 255, 255, 0.15);\n        color: white;\n      }\n      \n      &.active {\n        background: rgba(255, 255, 255, 0.25);\n        color: white;\n      }\n    }\n  }\n}\n\n//[_ngcontent-%COMP%]   Animations\n@keyframes[_ngcontent-%COMP%]   pulse[_ngcontent-%COMP%] {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}"], changeDetection: 0 });
+};
+ComponentStudioDashboardComponent = __decorate([
+    RegisterClass(BaseDashboard, 'ComponentStudioDashboard')
+], ComponentStudioDashboardComponent);
+export { ComponentStudioDashboardComponent };
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ComponentStudioDashboardComponent, [{
+        type: Component,
+        args: [{ selector: 'mj-component-studio-dashboard', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"component-studio-dashboard\">\n  <!-- Dialog container for Kendo dialogs -->\n  <div kendoDialogContainer></div>\n  \n  @if (isLoading) {\n    <div class=\"loading-container\">\n      <div class=\"loading-content\">\n        <div class=\"loading-spinner\">\n          <i class=\"fa-solid fa-spinner fa-spin fa-3x\"></i>\n        </div>\n        <div class=\"loading-text\">Loading Component Studio...</div>\n      </div>\n    </div>\n  }\n  \n  @if (!isLoading) {\n    <div class=\"dashboard-wrapper\">\n      <!-- Header -->\n      <div class=\"dashboard-header\">\n        <div class=\"header-left\">\n          <h1 class=\"dashboard-title\">\n            <i class=\"fa-solid fa-puzzle-piece\"></i>\n            Component Studio\n          </h1>\n          <div class=\"dashboard-subtitle\">\n            Discover, preview, and test reusable components\n          </div>\n        </div>\n        <div class=\"header-right\">\n          <div class=\"header-actions\">\n            <button kendoButton \n              [icon]=\"viewMode === 'grid' ? 'fa-solid fa-list' : 'fa-solid fa-th'\"\n              [fillMode]=\"'flat'\"\n              (click)=\"toggleViewMode()\"\n              title=\"Toggle view mode\">\n            </button>\n            <button kendoButton \n              [icon]=\"showFilterPanel ? 'fa-solid fa-filter-circle-xmark' : 'fa-solid fa-filter'\"\n              [fillMode]=\"'flat'\"\n              (click)=\"toggleFilterPanel()\"\n              title=\"Toggle filters\">\n            </button>\n            <button kendoButton \n              [icon]=\"'fa-solid fa-sync'\"\n              [fillMode]=\"'flat'\"\n              (click)=\"refreshData()\"\n              title=\"Refresh\">\n            </button>\n          </div>\n        </div>\n      </div>\n\n      <!-- Main Content Area -->\n      <div class=\"dashboard-content\">\n        <!-- Left Filter Panel -->\n        @if (showFilterPanel && activeTab === 'browse') {\n          <div class=\"filter-panel\">\n            <div class=\"filter-header\">\n              <h3>Filters</h3>\n              <button kendoButton \n                [fillMode]=\"'flat'\"\n                [size]=\"'small'\"\n                (click)=\"clearFilters()\">\n                Clear All\n              </button>\n            </div>\n            \n            <!-- Search -->\n            <div class=\"filter-section\">\n              <label class=\"filter-label\">Search</label>\n              <kendo-textbox \n                [value]=\"searchQuery$.value\"\n                (valueChange)=\"onSearchChange($event)\"\n                placeholder=\"Search components...\"\n                [clearButton]=\"true\">\n                <ng-template kendoTextBoxPrefixTemplate>\n                  <i class=\"fa-solid fa-search\"></i>\n                </ng-template>\n              </kendo-textbox>\n            </div>\n\n            <!-- Type Filter -->\n            <div class=\"filter-section\">\n              <label class=\"filter-label\">Component Type</label>\n              <div class=\"filter-options\">\n                @for (type of componentTypes; track type) {\n                  <label class=\"checkbox-label\">\n                    <input type=\"checkbox\" \n                      [checked]=\"selectedTypes$.value.has(type)\"\n                      (change)=\"onTypeFilterChange(type, $any($event.target).checked)\">\n                    <span class=\"type-indicator\" [style.background-color]=\"getComponentTypeColor(type)\"></span>\n                    {{ type }}\n                  </label>\n                }\n              </div>\n            </div>\n\n            <!-- Status Filter -->\n            <div class=\"filter-section\">\n              <label class=\"filter-label\">Status</label>\n              <div class=\"filter-options\">\n                @for (status of componentStatuses; track status) {\n                  <label class=\"checkbox-label\">\n                    <input type=\"checkbox\" \n                      [checked]=\"selectedStatuses$.value.has(status)\"\n                      (change)=\"onStatusFilterChange(status, $any($event.target).checked)\">\n                    <span class=\"status-badge\" [ngClass]=\"getStatusBadgeClass(status)\">{{ status }}</span>\n                  </label>\n                }\n              </div>\n            </div>\n\n            <!-- Source Filter -->\n            <div class=\"filter-section\">\n              <label class=\"filter-label\">Source</label>\n              <div class=\"filter-options\">\n                <label class=\"checkbox-label\">\n                  <input type=\"checkbox\" \n                    [checked]=\"selectedSources$.value.has('Local')\"\n                    (change)=\"onSourceFilterChange('Local', $any($event.target).checked)\">\n                  <i class=\"fa-solid fa-house\"></i> Local\n                </label>\n                <label class=\"checkbox-label\">\n                  <input type=\"checkbox\" \n                    [checked]=\"selectedSources$.value.has('Registry')\"\n                    (change)=\"onSourceFilterChange('Registry', $any($event.target).checked)\">\n                  <i class=\"fa-solid fa-cloud\"></i> Registry\n                </label>\n              </div>\n            </div>\n          </div>\n        }\n\n        <!-- Center Content Area -->\n        <div class=\"content-area\">\n          <!-- Tab Content -->\n          @if (activeTab === 'browse') {\n            <div class=\"browse-content\">\n              <!-- Results Summary -->\n              <div class=\"results-summary\">\n                <span class=\"result-count\">\n                  {{ filteredComponents$.value.length }} components found\n                </span>\n              </div>\n\n              <!-- Component Grid/List -->\n              @if (viewMode === 'grid') {\n                <div class=\"component-grid\">\n                  @for (component of filteredComponents$.value; track component.ID) {\n                    <div class=\"component-card\" \n                      [class.selected]=\"selectedComponentId === component.ID\"\n                      (click)=\"selectComponent(component)\">\n                      <div class=\"card-header\">\n                        <div class=\"card-type\" [style.background-color]=\"getComponentTypeColor(component.Type || 'Other')\">\n                          {{ component.Type || 'Other' }}\n                        </div>\n                        <div class=\"card-status\" [ngClass]=\"getStatusBadgeClass(component.Status || 'Draft')\">\n                          {{ component.Status }}\n                        </div>\n                      </div>\n                      <div class=\"card-body\">\n                        <h4 class=\"card-title\">{{ component.Name }}</h4>\n                        <div class=\"card-version\">v{{ component.Version }}</div>\n                        <p class=\"card-description\">{{ component.Description || 'No description available' }}</p>\n                        <div class=\"card-namespace\">\n                          <i class=\"fa-solid fa-folder-tree\"></i>\n                          {{ component.Namespace || 'root' }}\n                        </div>\n                      </div>\n                      <div class=\"card-footer\">\n                        <div class=\"card-developer\">\n                          <i class=\"fa-solid fa-user\"></i>\n                          {{ component.DeveloperOrganization || component.DeveloperName || 'Unknown' }}\n                        </div>\n                        <div class=\"card-source\">\n                          @if (!component.SourceRegistryID) {\n                            <i class=\"fa-solid fa-house\" title=\"Local\"></i>\n                          } @else {\n                            <i class=\"fa-solid fa-cloud\" title=\"Registry\"></i>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n              } @else {\n                <!-- List View -->\n                <kendo-grid \n                  [data]=\"filteredComponents$.value\"\n                  [pageSize]=\"20\"\n                  [pageable]=\"true\"\n                  [sortable]=\"true\"\n                  [filterable]=\"false\"\n                  [resizable]=\"true\"\n                  [selectable]=\"true\"\n                  (selectionChange)=\"selectComponent($event.selectedRows && $event.selectedRows[0] ? $event.selectedRows[0].dataItem : null)\">\n                  <kendo-grid-column field=\"Name\" title=\"Component\" [width]=\"250\">\n                    <ng-template kendoGridCellTemplate let-dataItem>\n                      <div class=\"component-name\">\n                        <span class=\"type-dot\" [style.background-color]=\"getComponentTypeColor(dataItem.Type || 'Other')\"></span>\n                        {{ dataItem.Name }}\n                      </div>\n                    </ng-template>\n                  </kendo-grid-column>\n                  <kendo-grid-column field=\"Version\" title=\"Version\" [width]=\"80\"></kendo-grid-column>\n                  <kendo-grid-column field=\"Type\" title=\"Type\" [width]=\"100\"></kendo-grid-column>\n                  <kendo-grid-column field=\"Status\" title=\"Status\" [width]=\"100\">\n                    <ng-template kendoGridCellTemplate let-dataItem>\n                      <span class=\"status-badge\" [ngClass]=\"getStatusBadgeClass(dataItem.Status || 'Draft')\">\n                        {{ dataItem.Status }}\n                      </span>\n                    </ng-template>\n                  </kendo-grid-column>\n                  <kendo-grid-column field=\"Namespace\" title=\"Namespace\" [width]=\"200\"></kendo-grid-column>\n                  <kendo-grid-column field=\"DeveloperOrganization\" title=\"Developer\" [width]=\"150\"></kendo-grid-column>\n                  <kendo-grid-column field=\"Description\" title=\"Description\"></kendo-grid-column>\n                </kendo-grid>\n              }\n            </div>\n          }\n\n          @if (activeTab === 'preview') {\n            <div class=\"preview-content\">\n              @if (selectedComponent) {\n                <mj-component-preview \n                  [component]=\"selectedComponent\"\n                  [componentSpec]=\"componentSpec\"\n                  (openEntityRecord)=\"onOpenEntityRecord($event)\">\n                </mj-component-preview>\n              } @else {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-eye fa-4x\"></i>\n                  <h3>No Component Selected</h3>\n                  <p>Select a component from the Browse tab to preview it</p>\n                </div>\n              }\n            </div>\n          }\n\n          @if (activeTab === 'dependencies') {\n            <div class=\"dependencies-content\">\n              @if (selectedComponent) {\n                <mj-component-dependencies\n                  [component]=\"selectedComponent\"\n                  (openEntityRecord)=\"onOpenEntityRecord($event)\">\n                </mj-component-dependencies>\n              } @else {\n                <div class=\"empty-state\">\n                  <i class=\"fa-solid fa-sitemap fa-4x\"></i>\n                  <h3>No Component Selected</h3>\n                  <p>Select a component to view its dependencies</p>\n                </div>\n              }\n            </div>\n          }\n\n          @if (activeTab === 'settings') {\n            <div class=\"settings-content\">\n              <mj-component-studio-settings\n                (openEntityRecord)=\"onOpenEntityRecord($event)\">\n              </mj-component-studio-settings>\n            </div>\n          }\n        </div>\n      </div>\n\n      <!-- Bottom Navigation -->\n      <div class=\"dashboard-navigation\">\n        @for (navItem of navigationConfig; track $index) {\n          <div \n            class=\"nav-item\"\n            [class.active]=\"navItem.selected\"\n            (click)=\"onTabChange(navigationItems[$index])\">\n            <i [class]=\"navItem.icon\"></i>\n            <span>{{ navItem.text }}</span>\n          </div>\n        }\n      </div>\n    </div>\n  }\n</div>", styles: [":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  position: relative;\n}\n\n.component-studio-dashboard {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);\n  position: relative;\n  overflow: hidden;\n\n  &::before {\n    content: '';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background: rgba(255, 255, 255, 0.03);\n    backdrop-filter: blur(10px);\n    z-index: 0;\n  }\n\n  .loading-container {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 100%;\n    position: relative;\n    z-index: 1;\n    \n    .loading-content {\n      text-align: center;\n      color: white;\n      \n      .loading-spinner {\n        margin-bottom: 20px;\n        animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n      }\n      \n      .loading-text {\n        font-size: 18px;\n        font-weight: 500;\n        opacity: 0.9;\n      }\n    }\n  }\n\n  .dashboard-wrapper {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    position: relative;\n    z-index: 1;\n  }\n\n  // Header\n  .dashboard-header {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 20px 30px;\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(20px);\n    border-bottom: 1px solid rgba(255, 255, 255, 0.2);\n    position: relative;\n    z-index: 2;\n    \n    .header-left {\n      .dashboard-title {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        font-size: 28px;\n        font-weight: 700;\n        color: white;\n        margin: 0;\n        \n        i {\n          font-size: 32px;\n        }\n      }\n      \n      .dashboard-subtitle {\n        color: rgba(255, 255, 255, 0.8);\n        font-size: 14px;\n        margin-top: 4px;\n        margin-left: 44px;\n      }\n    }\n    \n    .header-right {\n      .header-actions {\n        display: flex;\n        gap: 8px;\n        \n        button {\n          background: rgba(255, 255, 255, 0.2);\n          border: 1px solid rgba(255, 255, 255, 0.3);\n          color: white;\n          \n          &:hover {\n            background: rgba(255, 255, 255, 0.3);\n          }\n        }\n      }\n    }\n  }\n\n  // Main Content\n  .dashboard-content {\n    flex: 1;\n    display: flex;\n    overflow: hidden;\n    background: rgba(255, 255, 255, 0.95);\n    margin: 20px;\n    border-radius: 12px;\n    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);\n    position: relative;\n    z-index: 1;\n  }\n\n  // Filter Panel\n  .filter-panel {\n    width: 280px;\n    background: white;\n    border-right: 1px solid #e5e7eb;\n    padding: 20px;\n    overflow-y: auto;\n    \n    .filter-header {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      margin-bottom: 20px;\n      \n      h3 {\n        font-size: 16px;\n        font-weight: 600;\n        color: #1f2937;\n        margin: 0;\n      }\n      \n      button {\n        padding: 4px 8px;\n        font-size: 12px;\n      }\n    }\n    \n    .filter-section {\n      margin-bottom: 24px;\n      \n      .filter-label {\n        display: block;\n        font-size: 13px;\n        font-weight: 600;\n        color: #6b7280;\n        text-transform: uppercase;\n        letter-spacing: 0.05em;\n        margin-bottom: 8px;\n      }\n      \n      kendo-textbox {\n        width: 100%;\n      }\n      \n      .filter-options {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        \n        .checkbox-label {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          cursor: pointer;\n          font-size: 14px;\n          color: #374151;\n          \n          &:hover {\n            color: #111827;\n          }\n          \n          input[type=\"checkbox\"] {\n            cursor: pointer;\n          }\n          \n          .type-indicator {\n            width: 12px;\n            height: 12px;\n            border-radius: 3px;\n            flex-shrink: 0;\n          }\n          \n          .status-badge {\n            padding: 2px 8px;\n            border-radius: 12px;\n            font-size: 11px;\n            font-weight: 600;\n            \n            &.badge-draft {\n              background: #fef3c7;\n              color: #92400e;\n            }\n            \n            &.badge-published {\n              background: #d1fae5;\n              color: #065f46;\n            }\n            \n            &.badge-deprecated {\n              background: #fee2e2;\n              color: #991b1b;\n            }\n          }\n        }\n      }\n    }\n  }\n\n  // Content Area\n  .content-area {\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    overflow: hidden;\n    \n    .browse-content {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n      padding: 20px;\n      \n      .results-summary {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-bottom: 20px;\n        \n        .result-count {\n          font-size: 14px;\n          color: #6b7280;\n        }\n      }\n      \n      // Component Grid\n      .component-grid {\n        display: grid;\n        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));\n        gap: 20px;\n        overflow-y: auto;\n        padding: 4px;\n        \n        .component-card {\n          background: white;\n          border: 2px solid #e5e7eb;\n          border-radius: 12px;\n          padding: 16px;\n          cursor: pointer;\n          transition: all 0.2s ease;\n          position: relative;\n          overflow: hidden;\n          height: fit-content;\n          \n          &:hover {\n            border-color: #9ca3af;\n            transform: translateY(-2px);\n            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n          }\n          \n          &.selected {\n            border-color: #6366f1;\n            background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);\n          }\n          \n          .card-header {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            margin-bottom: 12px;\n            \n            .card-type {\n              padding: 4px 10px;\n              border-radius: 6px;\n              color: white;\n              font-size: 11px;\n              font-weight: 600;\n              text-transform: uppercase;\n              letter-spacing: 0.05em;\n            }\n            \n            .card-status {\n              padding: 3px 8px;\n              border-radius: 12px;\n              font-size: 11px;\n              font-weight: 600;\n              \n              &.badge-draft {\n                background: #fef3c7;\n                color: #92400e;\n              }\n              \n              &.badge-published {\n                background: #d1fae5;\n                color: #065f46;\n              }\n              \n              &.badge-deprecated {\n                background: #fee2e2;\n                color: #991b1b;\n              }\n            }\n          }\n          \n          .card-body {\n            margin-bottom: 12px;\n            \n            .card-title {\n              font-size: 16px;\n              font-weight: 600;\n              color: #111827;\n              margin: 0 0 4px 0;\n            }\n            \n            .card-version {\n              font-size: 12px;\n              color: #6b7280;\n              margin-bottom: 8px;\n            }\n            \n            .card-description {\n              font-size: 13px;\n              color: #6b7280;\n              line-height: 1.5;\n              margin: 8px 0;\n              display: -webkit-box;\n              -webkit-line-clamp: 2;\n              -webkit-box-orient: vertical;\n              overflow: hidden;\n            }\n            \n            .card-namespace {\n              font-size: 12px;\n              color: #9ca3af;\n              display: flex;\n              align-items: center;\n              gap: 6px;\n              \n              i {\n                font-size: 11px;\n              }\n            }\n          }\n          \n          .card-footer {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n            padding-top: 12px;\n            border-top: 1px solid #f3f4f6;\n            \n            .card-developer {\n              font-size: 12px;\n              color: #6b7280;\n              display: flex;\n              align-items: center;\n              gap: 6px;\n              \n              i {\n                font-size: 11px;\n              }\n            }\n            \n            .card-source {\n              font-size: 14px;\n              color: #9ca3af;\n            }\n          }\n        }\n      }\n      \n      // List View (Kendo Grid styling)\n      kendo-grid {\n        height: 100%;\n        \n        .component-name {\n          display: flex;\n          align-items: center;\n          gap: 8px;\n          \n          .type-dot {\n            width: 8px;\n            height: 8px;\n            border-radius: 50%;\n          }\n        }\n        \n        .status-badge {\n          padding: 2px 8px;\n          border-radius: 12px;\n          font-size: 11px;\n          font-weight: 600;\n          display: inline-block;\n          \n          &.badge-draft {\n            background: #fef3c7;\n            color: #92400e;\n          }\n          \n          &.badge-published {\n            background: #d1fae5;\n            color: #065f46;\n          }\n          \n          &.badge-deprecated {\n            background: #fee2e2;\n            color: #991b1b;\n          }\n        }\n      }\n    }\n    \n    .preview-content,\n    .dependencies-content,\n    .settings-content {\n      height: 100%;\n      padding: 20px;\n      overflow-y: auto;\n    }\n    \n    .empty-state {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      height: 100%;\n      color: #9ca3af;\n      \n      i {\n        margin-bottom: 20px;\n        opacity: 0.5;\n      }\n      \n      h3 {\n        font-size: 20px;\n        font-weight: 600;\n        color: #6b7280;\n        margin: 0 0 8px 0;\n      }\n      \n      p {\n        font-size: 14px;\n        color: #9ca3af;\n        margin: 0;\n      }\n    }\n  }\n\n  // Bottom Navigation\n  .dashboard-navigation {\n    display: flex;\n    justify-content: center;\n    gap: 4px;\n    padding: 12px 20px;\n    background: rgba(255, 255, 255, 0.1);\n    backdrop-filter: blur(20px);\n    border-top: 1px solid rgba(255, 255, 255, 0.2);\n    position: relative;\n    z-index: 2;\n    \n    .nav-item {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: 4px;\n      padding: 8px 24px;\n      border-radius: 8px;\n      cursor: pointer;\n      transition: all 0.2s ease;\n      color: rgba(255, 255, 255, 0.7);\n      \n      i {\n        font-size: 20px;\n      }\n      \n      span {\n        font-size: 12px;\n        font-weight: 500;\n      }\n      \n      &:hover {\n        background: rgba(255, 255, 255, 0.15);\n        color: white;\n      }\n      \n      &.active {\n        background: rgba(255, 255, 255, 0.25);\n        color: white;\n      }\n    }\n  }\n}\n\n// Animations\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.5;\n  }\n}"] }]
+    }], () => [{ type: i0.ChangeDetectorRef }], null); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ComponentStudioDashboardComponent, { className: "ComponentStudioDashboardComponent", filePath: "src/ComponentStudio/component-studio-dashboard.component.ts", lineNumber: 53 }); })();
+/**
+ * Function to prevent tree shaking of the ComponentStudioDashboardComponent.
+ * This is called in public-api.ts to ensure the component is included in the build.
+ */
+export function LoadComponentStudioDashboard() {
+    // This function doesn't need to do anything, it just needs to exist
+    // to create a reference to the component that prevents tree shaking
+}
+//# sourceMappingURL=component-studio-dashboard.component.js.map