npm - @memberjunction/ng-dashboards - Versions diffs - 5.22.0 → 5.24.0 - Mend

@memberjunction/ng-dashboards 5.22.0 → 5.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (245) hide show

package/dist/ComponentStudio/components/browser/component-browser.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"component-browser.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/browser/component-browser.component.ts","../../../../src/ComponentStudio/components/browser/component-browser.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Output,\n EventEmitter,\n OnInit,\n OnDestroy,\n ChangeDetectorRef\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport {\n ComponentStudioStateService,\n DisplayComponent,\n FileLoadedComponent\n} from '../../services/component-studio-state.service';\n\n@Component({\n standalone: false,\n selector: 'mj-component-browser',\n templateUrl: './component-browser.component.html',\n styleUrls: ['./component-browser.component.css']\n})\nexport class ComponentBrowserComponent implements OnInit, OnDestroy {\n\n @Output() NewComponent = new EventEmitter<void>();\n @Output() ImportFromFile = new EventEmitter<void>();\n @Output() ImportFromText = new EventEmitter<void>();\n @Output() ImportFromArtifact = new EventEmitter<void>();\n\n public ImportDropdownOpen = false;\n\n private stateChangedSub: Subscription \| null = null;\n\n constructor(\n public State: ComponentStudioStateService,\n private cdr: ChangeDetectorRef\n ) {}\n\n ngOnInit(): void {\n this.stateChangedSub = this.State.StateChanged.subscribe(() => {\n this.cdr.detectChanges();\n });\n }\n\n ngOnDestroy(): void {\n if (this.stateChangedSub) {\n this.stateChangedSub.unsubscribe();\n this.stateChangedSub = null;\n }\n }\n\n // ============================================================\n // SEARCH\n // ============================================================\n\n OnSearchChange(value: string): void {\n this.State.SearchQuery = value;\n }\n\n // ============================================================\n // CARD EXPANSION\n // ============================================================\n\n ToggleComponentExpansion(component: DisplayComponent): void {\n const componentId = this.State.GetComponentId(component);\n const expandedId = this.State.ExpandedComponent\n ? this.State.GetComponentId(this.State.ExpandedComponent)\n : null;\n\n this.State.ExpandedComponent = expandedId === componentId ? null : component;\n this.cdr.detectChanges();\n }\n\n IsExpanded(component: DisplayComponent): boolean {\n if (!this.State.ExpandedComponent) return false;\n return this.State.GetComponentId(this.State.ExpandedComponent) === this.State.GetComponentId(component);\n }\n\n // ============================================================\n // RUNNING STATE CHECKS\n // ============================================================\n\n IsComponentRunning(component: DisplayComponent): boolean {\n if (!this.State.SelectedComponent \|\| !this.State.IsRunning) return false;\n return this.State.GetComponentId(this.State.SelectedComponent) === this.State.GetComponentId(component);\n }\n\n IsAnotherComponentRunning(component: DisplayComponent): boolean {\n if (!this.State.SelectedComponent \|\| !this.State.IsRunning) return false;\n return this.State.GetComponentId(this.State.SelectedComponent) !== this.State.GetComponentId(component);\n }\n\n // ============================================================\n // ACTIONS\n // ============================================================\n\n OnRunComponent(component: DisplayComponent, event: Event): void {\n event.stopPropagation();\n this.State.RunComponent(component);\n }\n\n OnStopComponent(event: Event): void {\n event.stopPropagation();\n this.State.StopComponent();\n }\n\n OnSwitchComponent(component: DisplayComponent, event: Event): void {\n event.stopPropagation();\n this.State.RunComponent(component);\n }\n\n OnToggleFavorite(component: DisplayComponent, event: Event): void {\n event.stopPropagation();\n this.State.ToggleFavorite(component);\n }\n\n OnRemoveFileComponent(component: FileLoadedComponent, event: Event): void {\n event.stopPropagation();\n this.State.RemoveFileLoadedComponent(component);\n }\n\n // ============================================================\n // IMPORT DROPDOWN\n // ============================================================\n\n ToggleImportDropdown(): void {\n this.ImportDropdownOpen = !this.ImportDropdownOpen;\n }\n\n CloseImportDropdown(): void {\n this.ImportDropdownOpen = false;\n }\n\n OnImportFromFile(): void {\n this.CloseImportDropdown();\n this.ImportFromFile.emit();\n }\n\n OnImportFromText(): void {\n this.CloseImportDropdown();\n this.ImportFromText.emit();\n }\n\n OnImportFromArtifact(): void {\n this.CloseImportDropdown();\n this.ImportFromArtifact.emit();\n }\n\n OnNewComponent(): void {\n this.NewComponent.emit();\n }\n\n // ============================================================\n // UI HELPERS\n // ============================================================\n\n GetStatusBadgeClass(component: DisplayComponent): string {\n if (this.State.IsFileLoadedComponent(component)) {\n const status = this.State.GetComponentStatus(component);\n if (status === 'Text') return 'text';\n if (status === 'Artifact') return 'artifact';\n return 'file';\n }\n const status = this.State.GetComponentStatus(component);\n if (status === 'Deprecated') return 'deprecated';\n if (status === 'Published') return 'published';\n return 'draft';\n }\n\n GetStatusLabel(component: DisplayComponent): string {\n if (this.State.IsFileLoadedComponent(component)) {\n const status = this.State.GetComponentStatus(component);\n return status \|\| 'File';\n }\n return this.State.GetComponentStatus(component) \|\| 'Draft';\n }\n\n GetFileBadgeTooltip(component: DisplayComponent): string {\n const status = this.State.GetComponentStatus(component);\n if (status === 'Text') return 'Imported from text input';\n if (status === 'Artifact') return 'Loaded from artifact';\n const filename = this.State.GetComponentFilename(component);\n return filename ? `Loaded from ${filename}` : 'Loaded from file';\n }\n\n GetFileBadgeLabel(component: DisplayComponent): string {\n const status = this.State.GetComponentStatus(component);\n if (status === 'Text') return 'Text Import';\n if (status === 'Artifact') return 'Artifact';\n return this.State.GetComponentFilename(component) \|\| 'File';\n }\n\n GetFileBadgeIcon(component: DisplayComponent): string {\n const status = this.State.GetComponentStatus(component);\n if (status === 'Text') return 'fa-keyboard';\n if (status === 'Artifact') return 'fa-database';\n return 'fa-file';\n }\n\n TrackByComponentId(_index: number, component: DisplayComponent): string {\n return this.State.GetComponentId(component);\n }\n\n TrackByCategoryName(_index: number, category: { name: string }): string {\n return category.name;\n }\n}\n","<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"]}
1	+ {"version":3,"file":"component-browser.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/browser/component-browser.component.ts","../../../../src/ComponentStudio/components/browser/component-browser.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Output,\n EventEmitter,\n OnInit,\n OnDestroy,\n ChangeDetectorRef\n} from '@angular/core';\nimport { Subscription } from 'rxjs';\nimport {\n ComponentStudioStateService,\n DisplayComponent,\n FileLoadedComponent\n} from '../../services/component-studio-state.service';\n\n@Component({\n standalone: false,\n selector: 'mj-component-browser',\n templateUrl: './component-browser.component.html',\n styleUrls: ['./component-browser.component.css']\n})\nexport class ComponentBrowserComponent implements OnInit, OnDestroy {\n\n @Output() NewComponent = new EventEmitter<void>();\n @Output() ImportFromFile = new EventEmitter<void>();\n @Output() ImportFromText = new EventEmitter<void>();\n @Output() ImportFromArtifact = new EventEmitter<void>();\n\n public ImportDropdownOpen = false;\n\n private stateChangedSub: Subscription \| null = null;\n\n constructor(\n public State: ComponentStudioStateService,\n private cdr: ChangeDetectorRef\n ) {}\n\n ngOnInit(): void {\n this.stateChangedSub = this.State.StateChanged.subscribe(() => {\n this.cdr.detectChanges();\n });\n }\n\n ngOnDestroy(): void {\n if (this.stateChangedSub) {\n this.stateChangedSub.unsubscribe();\n this.stateChangedSub = null;\n }\n }\n\n // ============================================================\n // SEARCH\n // ============================================================\n\n OnSearchChange(value: string): void {\n this.State.SearchQuery = value;\n }\n\n // ============================================================\n // CARD EXPANSION\n // ============================================================\n\n ToggleComponentExpansion(component: DisplayComponent): void {\n const componentId = this.State.GetComponentId(component);\n const expandedId = this.State.ExpandedComponent\n ? this.State.GetComponentId(this.State.ExpandedComponent)\n : null;\n\n this.State.ExpandedComponent = expandedId === componentId ? null : component;\n this.cdr.detectChanges();\n }\n\n IsExpanded(component: DisplayComponent): boolean {\n if (!this.State.ExpandedComponent) return false;\n return this.State.GetComponentId(this.State.ExpandedComponent) === this.State.GetComponentId(component);\n }\n\n // ============================================================\n // RUNNING STATE CHECKS\n // ============================================================\n\n IsComponentRunning(component: DisplayComponent): boolean {\n if (!this.State.SelectedComponent \|\| !this.State.IsRunning) return false;\n return this.State.GetComponentId(this.State.SelectedComponent) === this.State.GetComponentId(component);\n }\n\n IsAnotherComponentRunning(component: DisplayComponent): boolean {\n if (!this.State.SelectedComponent \|\| !this.State.IsRunning) return false;\n return this.State.GetComponentId(this.State.SelectedComponent) !== this.State.GetComponentId(component);\n }\n\n // ============================================================\n // ACTIONS\n // ============================================================\n\n OnRunComponent(component: DisplayComponent, event: Event): void {\n event.stopPropagation();\n this.State.RunComponent(component);\n }\n\n OnStopComponent(event: Event): void {\n event.stopPropagation();\n this.State.StopComponent();\n }\n\n OnSwitchComponent(component: DisplayComponent, event: Event): void {\n event.stopPropagation();\n this.State.RunComponent(component);\n }\n\n OnToggleFavorite(component: DisplayComponent, event: Event): void {\n event.stopPropagation();\n this.State.ToggleFavorite(component);\n }\n\n OnRemoveFileComponent(component: FileLoadedComponent, event: Event): void {\n event.stopPropagation();\n this.State.RemoveFileLoadedComponent(component);\n }\n\n // ============================================================\n // IMPORT DROPDOWN\n // ============================================================\n\n ToggleImportDropdown(): void {\n this.ImportDropdownOpen = !this.ImportDropdownOpen;\n }\n\n CloseImportDropdown(): void {\n this.ImportDropdownOpen = false;\n }\n\n OnImportFromFile(): void {\n this.CloseImportDropdown();\n this.ImportFromFile.emit();\n }\n\n OnImportFromText(): void {\n this.CloseImportDropdown();\n this.ImportFromText.emit();\n }\n\n OnImportFromArtifact(): void {\n this.CloseImportDropdown();\n this.ImportFromArtifact.emit();\n }\n\n OnNewComponent(): void {\n this.NewComponent.emit();\n }\n\n // ============================================================\n // UI HELPERS\n // ============================================================\n\n GetStatusBadgeClass(component: DisplayComponent): string {\n if (this.State.IsFileLoadedComponent(component)) {\n const status = this.State.GetComponentStatus(component);\n if (status === 'Text') return 'text';\n if (status === 'Artifact') return 'artifact';\n return 'file';\n }\n const status = this.State.GetComponentStatus(component);\n if (status === 'Deprecated') return 'deprecated';\n if (status === 'Published') return 'published';\n return 'draft';\n }\n\n GetStatusLabel(component: DisplayComponent): string {\n if (this.State.IsFileLoadedComponent(component)) {\n const status = this.State.GetComponentStatus(component);\n return status \|\| 'File';\n }\n return this.State.GetComponentStatus(component) \|\| 'Draft';\n }\n\n GetFileBadgeTooltip(component: DisplayComponent): string {\n const status = this.State.GetComponentStatus(component);\n if (status === 'Text') return 'Imported from text input';\n if (status === 'Artifact') return 'Loaded from artifact';\n const filename = this.State.GetComponentFilename(component);\n return filename ? `Loaded from ${filename}` : 'Loaded from file';\n }\n\n GetFileBadgeLabel(component: DisplayComponent): string {\n const status = this.State.GetComponentStatus(component);\n if (status === 'Text') return 'Text Import';\n if (status === 'Artifact') return 'Artifact';\n return this.State.GetComponentFilename(component) \|\| 'File';\n }\n\n GetFileBadgeIcon(component: DisplayComponent): string {\n const status = this.State.GetComponentStatus(component);\n if (status === 'Text') return 'fa-keyboard';\n if (status === 'Artifact') return 'fa-database';\n return 'fa-file';\n }\n\n TrackByComponentId(_index: number, component: DisplayComponent): string {\n return this.State.GetComponentId(component);\n }\n\n TrackByCategoryName(_index: number, category: { name: string }): string {\n return category.name;\n }\n}\n","<div class=\"component-browser\">\n\n <!-- Header -->\n <div class=\"browser-header\">\n <div class=\"header-top-row\">\n <button mjButton variant=\"primary\"\n (click)=\"OnNewComponent()\">\n <i class=\"fa-solid fa-plus\"></i> New Component\n </button>\n <div class=\"import-dropdown\" [class.open]=\"ImportDropdownOpen\">\n <button mjButton\n (click)=\"ToggleImportDropdown()\">\n <i class=\"fa-solid fa-file-import\"></i> Import\n <i class=\"fa-solid fa-chevron-down dropdown-chevron\"></i>\n </button>\n @if (ImportDropdownOpen) {\n <div class=\"dropdown-menu\">\n <button class=\"dropdown-item\" (click)=\"OnImportFromArtifact()\">\n <i class=\"fa-solid fa-database\"></i> From Artifact\n </button>\n <button class=\"dropdown-item\" (click)=\"OnImportFromFile()\">\n <i class=\"fa-solid fa-file\"></i> From File\n </button>\n <button class=\"dropdown-item\" (click)=\"OnImportFromText()\">\n <i class=\"fa-solid fa-keyboard\"></i> From Text\n </button>\n </div>\n }\n </div>\n </div>\n\n <div class=\"header-controls-row\">\n <button\n class=\"filter-toggle-btn\"\n [class.active]=\"State.IsFilterPanelExpanded \|\| State.GetActiveFilterCount() > 0\"\n (click)=\"State.ToggleFilterPanel()\"\n [title]=\"State.IsFilterPanelExpanded ? 'Hide filters' : 'Show filters'\">\n <i class=\"fa-solid fa-sliders\"></i>\n @if (State.GetActiveFilterCount() > 0) {\n <span class=\"filter-count-badge\">{{ State.GetActiveFilterCount() }}</span>\n }\n </button>\n <span class=\"component-count\">\n {{ State.FilteredComponents.length }} of {{ State.AllComponents.length }}\n </span>\n </div>\n </div>\n\n <!-- Search -->\n <div class=\"search-box\">\n <div class=\"search-input-wrapper\">\n <i class=\"fa-solid fa-search search-icon\"></i>\n <input\n type=\"text\"\n class=\"mj-input\"\n [value]=\"State.SearchQuery\"\n (input)=\"OnSearchChange($any($event.target).value)\"\n placeholder=\"Search components...\">\n </div>\n </div>\n\n <!-- Collapsible Filter Panel -->\n @if (State.IsFilterPanelExpanded) {\n <div class=\"filter-panel\">\n <div class=\"filter-panel-content\">\n\n <!-- Quick Filters -->\n <div class=\"filter-section\">\n <label class=\"filter-section-label\">Quick Filters</label>\n <div class=\"filter-options\">\n <label class=\"filter-checkbox\">\n <input type=\"checkbox\"\n [checked]=\"State.ShowOnlyFavorites\"\n (change)=\"State.ToggleShowOnlyFavorites()\">\n <i class=\"fa-solid fa-star filter-icon favorites-icon\"></i>\n <span>Favorites only</span>\n </label>\n <label class=\"filter-checkbox\">\n <input type=\"checkbox\"\n [checked]=\"State.ShowDeprecatedComponents\"\n (change)=\"State.ToggleShowDeprecatedComponents()\">\n <i class=\"fa-solid fa-archive filter-icon deprecated-icon\"></i>\n <span>Show deprecated\n @if (State.GetDeprecatedCount() > 0) {\n <span class=\"deprecated-count\">({{ State.GetDeprecatedCount() }})</span>\n }\n </span>\n </label>\n </div>\n </div>\n\n <!-- Category Pills -->\n @if (State.AvailableCategories.length > 0) {\n <div class=\"filter-section\">\n <label class=\"filter-section-label\">Categories</label>\n <div class=\"category-pills\">\n @for (category of State.GetVisibleCategories(); track TrackByCategoryName($index, category)) {\n <button\n class=\"category-pill\"\n [class.active]=\"State.IsCategorySelected(category.name)\"\n [style.--pill-color]=\"category.color\"\n (click)=\"State.ToggleCategory(category.name)\">\n <span class=\"pill-name\">{{ category.name }}</span>\n <span class=\"pill-count\">{{ category.count }}</span>\n </button>\n }\n </div>\n @if (State.AvailableCategories.length > 5) {\n <button\n class=\"show-more-btn\"\n (click)=\"State.ToggleShowAllCategories()\">\n @if (State.ShowAllCategories) {\n <i class=\"fa-solid fa-chevron-up\"></i> Show less\n } @else {\n <i class=\"fa-solid fa-chevron-down\"></i> Show {{ State.AvailableCategories.length - 5 }} more\n }\n </button>\n }\n </div>\n }\n\n <!-- Clear All -->\n @if (State.GetActiveFilterCount() > 0) {\n <div class=\"filter-panel-footer\">\n <button class=\"clear-all-btn\" (click)=\"State.ClearAllFilters()\">\n <i class=\"fa-solid fa-times\"></i> Clear All Filters\n </button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Component Card List -->\n <div class=\"component-list\">\n @if (State.IsLoading) {\n <div class=\"loading-state\">\n <mj-loading text=\"Loading components...\" size=\"small\"></mj-loading>\n </div>\n } @else if (State.FilteredComponents.length === 0) {\n <div class=\"empty-state\">\n @if (State.AllComponents.length === 0) {\n <i class=\"fa-solid fa-puzzle-piece empty-icon\"></i>\n <p class=\"empty-title\">No components found</p>\n <p class=\"empty-subtitle\">Create a new component or import one to get started.</p>\n } @else {\n <i class=\"fa-solid fa-filter empty-icon\"></i>\n <p class=\"empty-title\">No matching components</p>\n <p class=\"empty-subtitle\">Try adjusting your search or filters.</p>\n }\n </div>\n } @else {\n @for (component of State.FilteredComponents; track TrackByComponentId($index, component)) {\n <div class=\"component-card\"\n [class.expanded]=\"IsExpanded(component)\"\n [class.running]=\"IsComponentRunning(component)\"\n [class.file-loaded]=\"State.IsFileLoadedComponent(component)\">\n\n <!-- Card Header (always visible) -->\n <div class=\"card-header\" (click)=\"ToggleComponentExpansion(component)\">\n <div class=\"card-type-icon\"\n [style.color]=\"State.GetComponentTypeColor(State.GetComponentType(component))\">\n <i class=\"fa-solid\"\n [ngClass]=\"State.GetComponentTypeIcon(State.GetComponentType(component))\"></i>\n </div>\n\n <div class=\"card-body\">\n <div class=\"card-title-row\">\n <span class=\"card-name\">{{ State.GetComponentName(component) }}</span>\n @if (State.IsFileLoadedComponent(component)) {\n <span class=\"file-badge\" [title]=\"GetFileBadgeTooltip(component)\">\n <i class=\"fa-solid\" [ngClass]=\"GetFileBadgeIcon(component)\"></i>\n {{ GetFileBadgeLabel(component) }}\n </span>\n }\n </div>\n <div class=\"card-meta-row\">\n <span class=\"version-badge\">v{{ State.GetComponentVersion(component) }}</span>\n <span class=\"status-badge\" [ngClass]=\"GetStatusBadgeClass(component)\">\n {{ GetStatusLabel(component) }}\n </span>\n <span class=\"namespace-chip\"\n [style.background-color]=\"State.GetNamespaceColor(State.GetComponentNamespace(component))\"\n [title]=\"State.GetComponentNamespace(component) \|\| 'Uncategorized'\">\n <i class=\"fa-solid fa-folder-tree\"></i>\n {{ State.FormatNamespace(State.GetComponentNamespace(component)) }}\n </span>\n </div>\n </div>\n\n <div class=\"card-end\">\n @if (!State.IsFileLoadedComponent(component)) {\n <button\n class=\"favorite-btn\"\n [class.is-favorite]=\"State.IsFavorite(component)\"\n (click)=\"OnToggleFavorite(component, $event)\"\n [title]=\"State.IsFavorite(component) ? 'Remove from favorites' : 'Add to favorites'\">\n @if (State.IsFavorite(component)) {\n <i class=\"fa-solid fa-star\"></i>\n } @else {\n <i class=\"fa-regular fa-star\"></i>\n }\n </button>\n }\n @if (State.IsFileLoadedComponent(component)) {\n <button\n class=\"remove-btn\"\n (click)=\"OnRemoveFileComponent($any(component), $event)\"\n title=\"Remove imported component\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n <div class=\"card-chevron\">\n @if (IsExpanded(component)) {\n <i class=\"fa-solid fa-chevron-up\"></i>\n } @else {\n <i class=\"fa-solid fa-chevron-down\"></i>\n }\n </div>\n </div>\n </div>\n\n <!-- Card Details (expanded) -->\n @if (IsExpanded(component)) {\n <div class=\"card-details\">\n @if (State.GetComponentDescription(component)) {\n <div class=\"detail-description\">\n <p>{{ State.GetComponentDescription(component) }}</p>\n </div>\n }\n\n <div class=\"detail-info-grid\">\n <div class=\"info-item\">\n <span class=\"info-label\">Type</span>\n <span class=\"info-value\">{{ State.GetComponentType(component) \|\| 'Unknown' }}</span>\n </div>\n <div class=\"info-item\">\n <span class=\"info-label\">Version</span>\n <span class=\"info-value\">{{ State.GetComponentVersion(component) }}</span>\n </div>\n <div class=\"info-item\">\n <span class=\"info-label\">Status</span>\n <span class=\"info-value\">{{ State.GetComponentStatus(component) \|\| 'Draft' }}</span>\n </div>\n @if (State.IsFileLoadedComponent(component)) {\n <div class=\"info-item\">\n <span class=\"info-label\">Loaded</span>\n <span class=\"info-value\">{{ State.GetComponentLoadedAt(component) \| date:'short' }}</span>\n </div>\n } @else if (State.GetComponentUpdatedAt(component)) {\n <div class=\"info-item\">\n <span class=\"info-label\">Updated</span>\n <span class=\"info-value\">{{ State.GetComponentUpdatedAt(component) \| date:'short' }}</span>\n </div>\n }\n </div>\n\n <div class=\"detail-actions\">\n @if (IsComponentRunning(component)) {\n <button mjButton variant=\"danger\"\n (click)=\"OnStopComponent($event)\">\n <i class=\"fa-solid fa-stop\"></i> Stop\n </button>\n } @else if (IsAnotherComponentRunning(component)) {\n <button mjButton\n title=\"Stop current component and run this one\"\n (click)=\"OnSwitchComponent(component, $event)\">\n <i class=\"fa-solid fa-exchange-alt\"></i> Switch To This\n </button>\n } @else {\n <button mjButton variant=\"primary\"\n (click)=\"OnRunComponent(component, $event)\">\n <i class=\"fa-solid fa-play\"></i> Run\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n }\n </div>\n</div>\n"]}

package/dist/ComponentStudio/components/editors/code-editor-panel.component.js CHANGED Viewed

@@ -3,8 +3,8 @@ import { unifiedMergeView, getChunks, goToNextChunk, goToPreviousChunk } from '@
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/component-studio-state.service";
 import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-buttons";
-import * as i4 from "@memberjunction/ng-code-editor";
+import * as i3 from "@memberjunction/ng-code-editor";
+import * as i4 from "@memberjunction/ng-ui-components";
 const _c0 = ["diffEditor"];
 const _forTrack0 = ($index, $item) => $item.title;
 function CodeEditorPanelComponent_For_3_Conditional_1_Template(rf, ctx) { if (rf & 1) {
@@ -62,19 +62,14 @@ function CodeEditorPanelComponent_Conditional_17_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelement(2, "i", 24);
     i0.ɵɵtext(3, " Apply ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 23);
+    i0.ɵɵelementStart(4, "button", 25);
     i0.ɵɵlistener("click", function CodeEditorPanelComponent_Conditional_17_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.CancelChanges()); });
     i0.ɵɵtext(5, " Cancel ");
     i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("themeColor", "primary");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("themeColor", "base");
 } }
 function CodeEditorPanelComponent_Conditional_19_Case_0_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "div", 25)(1, "mj-code-editor", 27);
+    i0.ɵɵelementStart(0, "div", 26)(1, "mj-code-editor", 28);
     i0.ɵɵtwoWayListener("ngModelChange", function CodeEditorPanelComponent_Conditional_19_Case_0_Template_mj_code_editor_ngModelChange_1_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); i0.ɵɵtwoWayBindingSet(ctx_r2.ActiveSection.code, $event) || (ctx_r2.ActiveSection.code = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function CodeEditorPanelComponent_Conditional_19_Case_0_Template_mj_code_editor_ngModelChange_1_listener() { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.OnCodeChanged()); });
     i0.ɵɵelementEnd()();
@@ -85,8 +80,8 @@ function CodeEditorPanelComponent_Conditional_19_Case_0_Template(rf, ctx) { if (
     i0.ɵɵproperty("language", "javascript")("indentWithTab", true)("placeholder", "Enter component code...");
 } }
 function CodeEditorPanelComponent_Conditional_19_Case_1_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 25);
-    i0.ɵɵelement(1, "mj-code-editor", 28);
+    i0.ɵɵelementStart(0, "div", 26);
+    i0.ɵɵelement(1, "mj-code-editor", 29);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -94,8 +89,8 @@ function CodeEditorPanelComponent_Conditional_19_Case_1_Template(rf, ctx) { if (
     i0.ɵɵproperty("ngModel", ctx_r2.ActiveSection.originalCode)("language", "javascript")("readonly", true);
 } }
 function CodeEditorPanelComponent_Conditional_19_Case_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 26);
-    i0.ɵɵelement(1, "mj-code-editor", 29, 0);
+    i0.ɵɵelementStart(0, "div", 27);
+    i0.ɵɵelement(1, "mj-code-editor", 30, 0);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext(2);
@@ -103,7 +98,7 @@ function CodeEditorPanelComponent_Conditional_19_Case_2_Template(rf, ctx) { if (
     i0.ɵɵproperty("ngModel", ctx_r2.ActiveSection.code)("language", "javascript")("readonly", true)("extensions", ctx_r2.DiffExtensions);
 } }
 function CodeEditorPanelComponent_Conditional_19_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵconditionalCreate(0, CodeEditorPanelComponent_Conditional_19_Case_0_Template, 2, 4, "div", 25)(1, CodeEditorPanelComponent_Conditional_19_Case_1_Template, 2, 3, "div", 25)(2, CodeEditorPanelComponent_Conditional_19_Case_2_Template, 3, 4, "div", 26);
+    i0.ɵɵconditionalCreate(0, CodeEditorPanelComponent_Conditional_19_Case_0_Template, 2, 4, "div", 26)(1, CodeEditorPanelComponent_Conditional_19_Case_1_Template, 2, 3, "div", 26)(2, CodeEditorPanelComponent_Conditional_19_Case_2_Template, 3, 4, "div", 27);
 } if (rf & 2) {
     let tmp_1_0;
     const ctx_r2 = i0.ɵɵnextContext();
@@ -111,7 +106,7 @@ function CodeEditorPanelComponent_Conditional_19_Template(rf, ctx) { if (rf & 1)
 } }
 function CodeEditorPanelComponent_Conditional_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 14);
-    i0.ɵɵelement(1, "i", 30);
+    i0.ɵɵelement(1, "i", 31);
     i0.ɵɵelementStart(2, "p");
     i0.ɵɵtext(3, "No code sections available. Select a component to view its code.");
     i0.ɵɵelementEnd()();
@@ -221,7 +216,7 @@ export class CodeEditorPanelComponent {
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.DiffEditorRef = _t.first);
-        } }, standalone: false, decls: 21, vars: 9, consts: [["diffEditor", ""], [1, "code-editor-panel"], [1, "code-tab-bar"], [1, "code-tab", 3, "active"], [1, "code-toolbar"], [1, "view-mode-toggle"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-code-compare"], [1, "diff-nav"], [1, "toolbar-spacer"], ["title", "Copy code to clipboard", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "action-buttons"], [1, "code-editor-body"], [1, "empty-state"], [1, "code-tab", 3, "click"], [1, "fa-solid", "fa-puzzle-piece", "dep-icon"], ["title", "Modified", 1, "modified-dot"], [1, "diff-count"], ["title", "Previous change (\u2191)", 1, "icon-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["title", "Next change (\u2193)", 1, "icon-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-check"], [1, "editor-pane"], [1, "editor-pane", "diff-pane"], [3, "ngModelChange", "ngModel", "language", "indentWithTab", "placeholder"], [3, "ngModel", "language", "readonly"], [3, "ngModel", "language", "readonly", "extensions"], [1, "fa-solid", "fa-file-code"]], template: function CodeEditorPanelComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, standalone: false, decls: 21, vars: 9, consts: [["diffEditor", ""], [1, "code-editor-panel"], [1, "code-tab-bar"], [1, "code-tab", 3, "active"], [1, "code-toolbar"], [1, "view-mode-toggle"], [1, "mode-btn", 3, "click"], [1, "fa-solid", "fa-code-compare"], [1, "diff-nav"], [1, "toolbar-spacer"], ["title", "Copy code to clipboard", 1, "icon-btn", 3, "click"], [1, "fa-solid", "fa-copy"], [1, "action-buttons"], [1, "code-editor-body"], [1, "empty-state"], [1, "code-tab", 3, "click"], [1, "fa-solid", "fa-puzzle-piece", "dep-icon"], ["title", "Modified", 1, "modified-dot"], [1, "diff-count"], ["title", "Previous change (\u2191)", 1, "icon-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-up"], ["title", "Next change (\u2193)", 1, "icon-btn", 3, "click", "disabled"], [1, "fa-solid", "fa-chevron-down"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-check"], ["mjButton", "", 3, "click"], [1, "editor-pane"], [1, "editor-pane", "diff-pane"], [3, "ngModelChange", "ngModel", "language", "indentWithTab", "placeholder"], [3, "ngModel", "language", "readonly"], [3, "ngModel", "language", "readonly", "extensions"], [1, "fa-solid", "fa-file-code"]], template: function CodeEditorPanelComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 1)(1, "div", 2);
             i0.ɵɵrepeaterCreate(2, CodeEditorPanelComponent_For_3_Template, 4, 5, "button", 3, _forTrack0);
             i0.ɵɵelementEnd();
@@ -244,7 +239,7 @@ export class CodeEditorPanelComponent {
             i0.ɵɵlistener("click", function CodeEditorPanelComponent_Template_button_click_15_listener() { return ctx.CopyCode(); });
             i0.ɵɵelement(16, "i", 11);
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(17, CodeEditorPanelComponent_Conditional_17_Template, 6, 2, "div", 12);
+            i0.ɵɵconditionalCreate(17, CodeEditorPanelComponent_Conditional_17_Template, 6, 0, "div", 12);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(18, "div", 13);
             i0.ɵɵconditionalCreate(19, CodeEditorPanelComponent_Conditional_19_Template, 3, 1)(20, CodeEditorPanelComponent_Conditional_20_Template, 4, 0, "div", 14);
@@ -264,7 +259,7 @@ export class CodeEditorPanelComponent {
             i0.ɵɵconditional(ctx.State.IsEditingCode ? 17 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.ActiveSection ? 19 : 20);
-        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.CodeEditorComponent], styles: [".code-editor-panel[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    \n\n    .code-tab-bar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      height: 36px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n      gap: 2px;\n      overflow-x: auto;\n    }\n\n    .code-tab[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 5px 12px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n      font-family: inherit;\n      position: relative;\n    }\n\n    .code-tab[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .code-tab.active[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    }\n\n    .dep-icon[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-brand-primary);\n    }\n\n    .modified-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--mj-status-error);\n      display: inline-block;\n      margin-left: 2px;\n    }\n\n    \n\n    .code-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 4px 8px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n      gap: 8px;\n    }\n\n    .view-mode-toggle[_ngcontent-%COMP%] {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      border: none;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n    }\n\n    .toolbar-spacer[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .icon-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: 6px;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n      font-size: 13px;\n      transition: all 0.15s ease;\n    }\n\n    .icon-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .action-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n    }\n\n    .diff-nav[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      margin-left: 4px;\n    }\n\n    .diff-count[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n      padding: 0 4px;\n      white-space: nowrap;\n    }\n\n    .icon-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.35;\n      cursor: default;\n    }\n\n    \n\n    .code-editor-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n    }\n\n    .editor-pane[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .editor-pane[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n      display: block;\n      height: 100%;\n    }\n\n    \n\n    [_nghost-%COMP%]     .diff-pane .cm-mergeView .cm-changedLine {\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    }\n\n    [_nghost-%COMP%]     .diff-pane .cm-mergeView .cm-deletedChunk {\n      background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    }\n\n    \n\n    .empty-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px 20px;\n      color: var(--mj-text-secondary);\n      flex: 1;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }"] });
+        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.MJButtonDirective], styles: [".code-editor-panel[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n\n    \n\n    .code-tab-bar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 0 8px;\n      height: 36px;\n      background: var(--mj-bg-surface-sunken);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n      gap: 2px;\n      overflow-x: auto;\n    }\n\n    .code-tab[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 5px;\n      padding: 5px 12px;\n      border: none;\n      border-radius: 8px;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 12px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      white-space: nowrap;\n      font-family: inherit;\n      position: relative;\n    }\n\n    .code-tab[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .code-tab.active[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface);\n      color: var(--mj-brand-primary);\n      font-weight: 600;\n      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n    }\n\n    .dep-icon[_ngcontent-%COMP%] {\n      font-size: 10px;\n      color: var(--mj-brand-primary);\n    }\n\n    .modified-dot[_ngcontent-%COMP%] {\n      width: 6px;\n      height: 6px;\n      border-radius: 50%;\n      background: var(--mj-status-error);\n      display: inline-block;\n      margin-left: 2px;\n    }\n\n    \n\n    .code-toolbar[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      padding: 4px 8px;\n      background: var(--mj-bg-surface);\n      border-bottom: 1px solid var(--mj-border-default);\n      flex-shrink: 0;\n      gap: 8px;\n    }\n\n    .view-mode-toggle[_ngcontent-%COMP%] {\n      display: inline-flex;\n      border: 1px solid var(--mj-border-default);\n      border-radius: 8px;\n      overflow: hidden;\n    }\n\n    .mode-btn[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      padding: 4px 10px;\n      border: none;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      font-size: 11px;\n      font-weight: 500;\n      cursor: pointer;\n      transition: all 0.15s ease;\n      font-family: inherit;\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:not(:last-child) {\n      border-right: 1px solid var(--mj-border-default);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n    }\n\n    .mode-btn.active[_ngcontent-%COMP%] {\n      background: var(--mj-brand-primary);\n      color: var(--mj-text-inverse);\n    }\n\n    .mode-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 10px;\n    }\n\n    .toolbar-spacer[_ngcontent-%COMP%] {\n      flex: 1;\n    }\n\n    .icon-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: 6px;\n      background: transparent;\n      color: var(--mj-text-secondary);\n      cursor: pointer;\n      font-size: 13px;\n      transition: all 0.15s ease;\n    }\n\n    .icon-btn[_ngcontent-%COMP%]:hover {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n    }\n\n    .action-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n    }\n\n    .diff-nav[_ngcontent-%COMP%] {\n      display: inline-flex;\n      align-items: center;\n      gap: 4px;\n      margin-left: 4px;\n    }\n\n    .diff-count[_ngcontent-%COMP%] {\n      font-size: 11px;\n      font-weight: 500;\n      color: var(--mj-text-secondary);\n      padding: 0 4px;\n      white-space: nowrap;\n    }\n\n    .icon-btn[_ngcontent-%COMP%]:disabled {\n      opacity: 0.35;\n      cursor: default;\n    }\n\n    \n\n    .code-editor-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n      min-height: 0;\n    }\n\n    .editor-pane[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      min-height: 0;\n    }\n\n    .editor-pane[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n      display: block;\n      height: 100%;\n    }\n\n    \n\n    [_nghost-%COMP%]     .diff-pane .cm-mergeView .cm-changedLine {\n      background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n    }\n\n    [_nghost-%COMP%]     .diff-pane .cm-mergeView .cm-deletedChunk {\n      background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n    }\n\n    \n\n    .empty-state[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      padding: 40px 20px;\n      color: var(--mj-text-secondary);\n      flex: 1;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 12px;\n      opacity: 0.4;\n    }\n\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CodeEditorPanelComponent, [{
         type: Component,
@@ -317,10 +312,10 @@ export class CodeEditorPanelComponent {
         </button>
         @if (State.IsEditingCode) {
           <div class="action-buttons">
-            <button kendoButton [themeColor]="'primary'" (click)="ApplyChanges()">
+            <button mjButton variant="primary" (click)="ApplyChanges()">
               <i class="fa-solid fa-check"></i> Apply
             </button>
-            <button kendoButton [themeColor]="'base'" (click)="CancelChanges()">
+            <button mjButton (click)="CancelChanges()">
               Cancel
             </button>
           </div>

package/dist/ComponentStudio/components/editors/code-editor-panel.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"code-editor-panel.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/code-editor-panel.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ChangeDetectorRef, ViewChild } from '@angular/core';\nimport { Extension } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport { unifiedMergeView, getChunks, goToNextChunk, goToPreviousChunk } from '@codemirror/merge';\nimport { ComponentStudioStateService, CodeSection } from '../../services/component-studio-state.service';\n\ntype CodeViewMode = 'current' \| 'original' \| 'diff';\n\n@Component({\n standalone: false,\n selector: 'mj-code-editor-panel',\n template: `\n <div class=\"code-editor-panel\">\n <!-- Tab bar: one tab per code section -->\n <div class=\"code-tab-bar\">\n @for (section of State.CodeSections; track section.title; let i = $index) {\n <button class=\"code-tab\"\n [class.active]=\"ActiveTabIndex === i\"\n (click)=\"SelectTab(i)\">\n @if (section.isDependency) {\n <i class=\"fa-solid fa-puzzle-piece dep-icon\"></i>\n }\n {{ section.title }}\n @if (HasChanges(section)) {\n <span class=\"modified-dot\" title=\"Modified\"></span>\n }\n </button>\n }\n </div>\n\n <!-- Toolbar: view mode toggle + actions -->\n <div class=\"code-toolbar\">\n <div class=\"view-mode-toggle\">\n <button class=\"mode-btn\" [class.active]=\"ViewMode === 'current'\" (click)=\"SetViewMode('current')\">\n Current\n </button>\n <button class=\"mode-btn\" [class.active]=\"ViewMode === 'original'\" (click)=\"SetViewMode('original')\">\n Original\n </button>\n <button class=\"mode-btn\" [class.active]=\"ViewMode === 'diff'\" (click)=\"SetViewMode('diff')\">\n <i class=\"fa-solid fa-code-compare\"></i> Diff\n </button>\n </div>\n @if (ViewMode === 'diff') {\n <div class=\"diff-nav\">\n <span class=\"diff-count\">{{ DiffChunkCount }} change{{ DiffChunkCount !== 1 ? 's' : '' }}</span>\n <button class=\"icon-btn\" (click)=\"GoToPreviousChunk()\" title=\"Previous change (↑)\" [disabled]=\"DiffChunkCount === 0\">\n <i class=\"fa-solid fa-chevron-up\"></i>\n </button>\n <button class=\"icon-btn\" (click)=\"GoToNextChunk()\" title=\"Next change (↓)\" [disabled]=\"DiffChunkCount === 0\">\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n </div>\n }\n <span class=\"toolbar-spacer\"></span>\n <button class=\"icon-btn\" (click)=\"CopyCode()\" title=\"Copy code to clipboard\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (State.IsEditingCode) {\n <div class=\"action-buttons\">\n <button kendoButton [themeColor]=\"'primary'\" (click)=\"ApplyChanges()\">\n <i class=\"fa-solid fa-check\"></i> Apply\n </button>\n <button kendoButton [themeColor]=\"'base'\" (click)=\"CancelChanges()\">\n Cancel\n </button>\n </div>\n }\n </div>\n\n <!-- Editor body -->\n <div class=\"code-editor-body\">\n @if (ActiveSection) {\n @switch (ViewMode) {\n @case ('current') {\n <div class=\"editor-pane\">\n <mj-code-editor\n [(ngModel)]=\"ActiveSection.code\"\n [language]=\"'javascript'\"\n [indentWithTab]=\"true\"\n [placeholder]=\"'Enter component code...'\"\n (ngModelChange)=\"OnCodeChanged()\">\n </mj-code-editor>\n </div>\n }\n @case ('original') {\n <div class=\"editor-pane\">\n <mj-code-editor\n [ngModel]=\"ActiveSection.originalCode\"\n [language]=\"'javascript'\"\n [readonly]=\"true\">\n </mj-code-editor>\n </div>\n }\n @case ('diff') {\n <div class=\"editor-pane diff-pane\">\n <mj-code-editor\n #diffEditor\n [ngModel]=\"ActiveSection.code\"\n [language]=\"'javascript'\"\n [readonly]=\"true\"\n [extensions]=\"DiffExtensions\">\n </mj-code-editor>\n </div>\n }\n }\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-file-code\"></i>\n <p>No code sections available. Select a component to view its code.</p>\n </div>\n }\n </div>\n </div>\n `,\n styles: [`\n .code-editor-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n /* ---- Tab bar ---- /\n .code-tab-bar {\n display: flex;\n align-items: center;\n padding: 0 8px;\n height: 36px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 2px;\n overflow-x: auto;\n }\n\n .code-tab {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 5px 12px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n font-family: inherit;\n position: relative;\n }\n\n .code-tab:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .code-tab.active {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n font-weight: 600;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n }\n\n .dep-icon {\n font-size: 10px;\n color: var(--mj-brand-primary);\n }\n\n .modified-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mj-status-error);\n display: inline-block;\n margin-left: 2px;\n }\n\n / ---- Toolbar ---- /\n .code-toolbar {\n display: flex;\n align-items: center;\n padding: 4px 8px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 8px;\n }\n\n .view-mode-toggle {\n display: inline-flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n }\n\n .mode-btn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .mode-btn:not(:last-child) {\n border-right: 1px solid var(--mj-border-default);\n }\n\n .mode-btn:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .mode-btn.active {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n }\n\n .mode-btn i {\n font-size: 10px;\n }\n\n .toolbar-spacer {\n flex: 1;\n }\n\n .icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 13px;\n transition: all 0.15s ease;\n }\n\n .icon-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .action-buttons {\n display: flex;\n gap: 6px;\n }\n\n .diff-nav {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n margin-left: 4px;\n }\n\n .diff-count {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n padding: 0 4px;\n white-space: nowrap;\n }\n\n .icon-btn:disabled {\n opacity: 0.35;\n cursor: default;\n }\n\n / ---- Editor body ---- /\n .code-editor-body {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n min-height: 0;\n }\n\n .editor-pane {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n }\n\n .editor-pane mj-code-editor {\n display: block;\n height: 100%;\n }\n\n / ---- Diff-specific styles ---- /\n :host ::ng-deep .diff-pane .cm-mergeView .cm-changedLine {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n }\n\n :host ::ng-deep .diff-pane .cm-mergeView .cm-deletedChunk {\n background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n }\n\n / ---- Empty state ---- */\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n flex: 1;\n }\n\n .empty-state i {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.4;\n }\n\n .empty-state p {\n margin: 0;\n font-size: 13px;\n text-align: center;\n }\n `]\n})\nexport class CodeEditorPanelComponent {\n ActiveTabIndex = 0;\n ViewMode: CodeViewMode = 'current';\n DiffExtensions: Extension[] = [];\n DiffChunkCount = 0;\n\n @ViewChild('diffEditor') set DiffEditorRef(ref: { view?: EditorView } \| undefined) {\n if (ref?.view) {\n this.diffView = ref.view;\n this.updateChunkCount();\n }\n }\n private diffView: EditorView \| null = null;\n\n constructor(\n public State: ComponentStudioStateService,\n private cdr: ChangeDetectorRef\n ) {}\n\n get ActiveSection(): CodeSection \| null {\n const sections = this.State.CodeSections;\n if (sections.length === 0) return null;\n if (this.ActiveTabIndex >= sections.length) {\n this.ActiveTabIndex = 0;\n }\n return sections[this.ActiveTabIndex];\n }\n\n HasChanges(section: CodeSection): boolean {\n return section.code !== section.originalCode;\n }\n\n SelectTab(index: number): void {\n this.ActiveTabIndex = index;\n this.ViewMode = 'current';\n this.cdr.detectChanges();\n }\n\n SetViewMode(mode: CodeViewMode): void {\n this.ViewMode = mode;\n if (mode === 'diff') {\n this.buildDiffExtensions();\n }\n this.cdr.detectChanges();\n }\n\n OnCodeChanged(): void {\n this.State.IsEditingCode = true;\n }\n\n ApplyChanges(): void {\n this.State.ApplyCodeChanges();\n }\n\n CancelChanges(): void {\n this.State.InitializeEditors();\n this.ActiveTabIndex = 0;\n this.ViewMode = 'current';\n this.cdr.detectChanges();\n }\n\n CopyCode(): void {\n const section = this.ActiveSection;\n if (!section) return;\n\n const text = this.ViewMode === 'original' ? section.originalCode : section.code;\n navigator.clipboard.writeText(text).catch(err => {\n console.error('Failed to copy code to clipboard:', err);\n });\n }\n\n GoToNextChunk(): void {\n if (this.diffView) {\n goToNextChunk(this.diffView);\n }\n }\n\n GoToPreviousChunk(): void {\n if (this.diffView) {\n goToPreviousChunk(this.diffView);\n }\n }\n\n private updateChunkCount(): void {\n if (!this.diffView) {\n this.DiffChunkCount = 0;\n return;\n }\n // Schedule after the merge view has initialized\n Promise.resolve().then(() => {\n if (!this.diffView) return;\n const result = getChunks(this.diffView.state);\n this.DiffChunkCount = result ? result.chunks.length : 0;\n this.cdr.detectChanges();\n });\n }\n\n private buildDiffExtensions(): void {\n const section = this.ActiveSection;\n if (!section) {\n this.DiffExtensions = [];\n return;\n }\n\n this.DiffExtensions = unifiedMergeView({\n original: section.originalCode,\n highlightChanges: true,\n gutter: true\n });\n }\n}\n"]}
1	+ {"version":3,"file":"code-editor-panel.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/code-editor-panel.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ChangeDetectorRef, ViewChild } from '@angular/core';\nimport { Extension } from '@codemirror/state';\nimport { EditorView } from '@codemirror/view';\nimport { unifiedMergeView, getChunks, goToNextChunk, goToPreviousChunk } from '@codemirror/merge';\nimport { ComponentStudioStateService, CodeSection } from '../../services/component-studio-state.service';\n\ntype CodeViewMode = 'current' \| 'original' \| 'diff';\n\n@Component({\n standalone: false,\n selector: 'mj-code-editor-panel',\n template: `\n <div class=\"code-editor-panel\">\n <!-- Tab bar: one tab per code section -->\n <div class=\"code-tab-bar\">\n @for (section of State.CodeSections; track section.title; let i = $index) {\n <button class=\"code-tab\"\n [class.active]=\"ActiveTabIndex === i\"\n (click)=\"SelectTab(i)\">\n @if (section.isDependency) {\n <i class=\"fa-solid fa-puzzle-piece dep-icon\"></i>\n }\n {{ section.title }}\n @if (HasChanges(section)) {\n <span class=\"modified-dot\" title=\"Modified\"></span>\n }\n </button>\n }\n </div>\n\n <!-- Toolbar: view mode toggle + actions -->\n <div class=\"code-toolbar\">\n <div class=\"view-mode-toggle\">\n <button class=\"mode-btn\" [class.active]=\"ViewMode === 'current'\" (click)=\"SetViewMode('current')\">\n Current\n </button>\n <button class=\"mode-btn\" [class.active]=\"ViewMode === 'original'\" (click)=\"SetViewMode('original')\">\n Original\n </button>\n <button class=\"mode-btn\" [class.active]=\"ViewMode === 'diff'\" (click)=\"SetViewMode('diff')\">\n <i class=\"fa-solid fa-code-compare\"></i> Diff\n </button>\n </div>\n @if (ViewMode === 'diff') {\n <div class=\"diff-nav\">\n <span class=\"diff-count\">{{ DiffChunkCount }} change{{ DiffChunkCount !== 1 ? 's' : '' }}</span>\n <button class=\"icon-btn\" (click)=\"GoToPreviousChunk()\" title=\"Previous change (↑)\" [disabled]=\"DiffChunkCount === 0\">\n <i class=\"fa-solid fa-chevron-up\"></i>\n </button>\n <button class=\"icon-btn\" (click)=\"GoToNextChunk()\" title=\"Next change (↓)\" [disabled]=\"DiffChunkCount === 0\">\n <i class=\"fa-solid fa-chevron-down\"></i>\n </button>\n </div>\n }\n <span class=\"toolbar-spacer\"></span>\n <button class=\"icon-btn\" (click)=\"CopyCode()\" title=\"Copy code to clipboard\">\n <i class=\"fa-solid fa-copy\"></i>\n </button>\n @if (State.IsEditingCode) {\n <div class=\"action-buttons\">\n <button mjButton variant=\"primary\" (click)=\"ApplyChanges()\">\n <i class=\"fa-solid fa-check\"></i> Apply\n </button>\n <button mjButton (click)=\"CancelChanges()\">\n Cancel\n </button>\n </div>\n }\n </div>\n\n <!-- Editor body -->\n <div class=\"code-editor-body\">\n @if (ActiveSection) {\n @switch (ViewMode) {\n @case ('current') {\n <div class=\"editor-pane\">\n <mj-code-editor\n [(ngModel)]=\"ActiveSection.code\"\n [language]=\"'javascript'\"\n [indentWithTab]=\"true\"\n [placeholder]=\"'Enter component code...'\"\n (ngModelChange)=\"OnCodeChanged()\">\n </mj-code-editor>\n </div>\n }\n @case ('original') {\n <div class=\"editor-pane\">\n <mj-code-editor\n [ngModel]=\"ActiveSection.originalCode\"\n [language]=\"'javascript'\"\n [readonly]=\"true\">\n </mj-code-editor>\n </div>\n }\n @case ('diff') {\n <div class=\"editor-pane diff-pane\">\n <mj-code-editor\n #diffEditor\n [ngModel]=\"ActiveSection.code\"\n [language]=\"'javascript'\"\n [readonly]=\"true\"\n [extensions]=\"DiffExtensions\">\n </mj-code-editor>\n </div>\n }\n }\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-file-code\"></i>\n <p>No code sections available. Select a component to view its code.</p>\n </div>\n }\n </div>\n </div>\n `,\n styles: [`\n .code-editor-panel {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n\n /* ---- Tab bar ---- /\n .code-tab-bar {\n display: flex;\n align-items: center;\n padding: 0 8px;\n height: 36px;\n background: var(--mj-bg-surface-sunken);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 2px;\n overflow-x: auto;\n }\n\n .code-tab {\n display: inline-flex;\n align-items: center;\n gap: 5px;\n padding: 5px 12px;\n border: none;\n border-radius: 8px;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 12px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n white-space: nowrap;\n font-family: inherit;\n position: relative;\n }\n\n .code-tab:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .code-tab.active {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n font-weight: 600;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);\n }\n\n .dep-icon {\n font-size: 10px;\n color: var(--mj-brand-primary);\n }\n\n .modified-dot {\n width: 6px;\n height: 6px;\n border-radius: 50%;\n background: var(--mj-status-error);\n display: inline-block;\n margin-left: 2px;\n }\n\n / ---- Toolbar ---- /\n .code-toolbar {\n display: flex;\n align-items: center;\n padding: 4px 8px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-shrink: 0;\n gap: 8px;\n }\n\n .view-mode-toggle {\n display: inline-flex;\n border: 1px solid var(--mj-border-default);\n border-radius: 8px;\n overflow: hidden;\n }\n\n .mode-btn {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n padding: 4px 10px;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 11px;\n font-weight: 500;\n cursor: pointer;\n transition: all 0.15s ease;\n font-family: inherit;\n }\n\n .mode-btn:not(:last-child) {\n border-right: 1px solid var(--mj-border-default);\n }\n\n .mode-btn:hover {\n background: var(--mj-bg-surface-sunken);\n }\n\n .mode-btn.active {\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n }\n\n .mode-btn i {\n font-size: 10px;\n }\n\n .toolbar-spacer {\n flex: 1;\n }\n\n .icon-btn {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border: none;\n border-radius: 6px;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n font-size: 13px;\n transition: all 0.15s ease;\n }\n\n .icon-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n }\n\n .action-buttons {\n display: flex;\n gap: 6px;\n }\n\n .diff-nav {\n display: inline-flex;\n align-items: center;\n gap: 4px;\n margin-left: 4px;\n }\n\n .diff-count {\n font-size: 11px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n padding: 0 4px;\n white-space: nowrap;\n }\n\n .icon-btn:disabled {\n opacity: 0.35;\n cursor: default;\n }\n\n / ---- Editor body ---- /\n .code-editor-body {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n min-height: 0;\n }\n\n .editor-pane {\n flex: 1;\n overflow: hidden;\n min-height: 0;\n }\n\n .editor-pane mj-code-editor {\n display: block;\n height: 100%;\n }\n\n / ---- Diff-specific styles ---- /\n :host ::ng-deep .diff-pane .cm-mergeView .cm-changedLine {\n background: color-mix(in srgb, var(--mj-brand-primary) 8%, transparent);\n }\n\n :host ::ng-deep .diff-pane .cm-mergeView .cm-deletedChunk {\n background: color-mix(in srgb, var(--mj-status-error) 8%, transparent);\n }\n\n / ---- Empty state ---- */\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n flex: 1;\n }\n\n .empty-state i {\n font-size: 32px;\n margin-bottom: 12px;\n opacity: 0.4;\n }\n\n .empty-state p {\n margin: 0;\n font-size: 13px;\n text-align: center;\n }\n `]\n})\nexport class CodeEditorPanelComponent {\n ActiveTabIndex = 0;\n ViewMode: CodeViewMode = 'current';\n DiffExtensions: Extension[] = [];\n DiffChunkCount = 0;\n\n @ViewChild('diffEditor') set DiffEditorRef(ref: { view?: EditorView } \| undefined) {\n if (ref?.view) {\n this.diffView = ref.view;\n this.updateChunkCount();\n }\n }\n private diffView: EditorView \| null = null;\n\n constructor(\n public State: ComponentStudioStateService,\n private cdr: ChangeDetectorRef\n ) {}\n\n get ActiveSection(): CodeSection \| null {\n const sections = this.State.CodeSections;\n if (sections.length === 0) return null;\n if (this.ActiveTabIndex >= sections.length) {\n this.ActiveTabIndex = 0;\n }\n return sections[this.ActiveTabIndex];\n }\n\n HasChanges(section: CodeSection): boolean {\n return section.code !== section.originalCode;\n }\n\n SelectTab(index: number): void {\n this.ActiveTabIndex = index;\n this.ViewMode = 'current';\n this.cdr.detectChanges();\n }\n\n SetViewMode(mode: CodeViewMode): void {\n this.ViewMode = mode;\n if (mode === 'diff') {\n this.buildDiffExtensions();\n }\n this.cdr.detectChanges();\n }\n\n OnCodeChanged(): void {\n this.State.IsEditingCode = true;\n }\n\n ApplyChanges(): void {\n this.State.ApplyCodeChanges();\n }\n\n CancelChanges(): void {\n this.State.InitializeEditors();\n this.ActiveTabIndex = 0;\n this.ViewMode = 'current';\n this.cdr.detectChanges();\n }\n\n CopyCode(): void {\n const section = this.ActiveSection;\n if (!section) return;\n\n const text = this.ViewMode === 'original' ? section.originalCode : section.code;\n navigator.clipboard.writeText(text).catch(err => {\n console.error('Failed to copy code to clipboard:', err);\n });\n }\n\n GoToNextChunk(): void {\n if (this.diffView) {\n goToNextChunk(this.diffView);\n }\n }\n\n GoToPreviousChunk(): void {\n if (this.diffView) {\n goToPreviousChunk(this.diffView);\n }\n }\n\n private updateChunkCount(): void {\n if (!this.diffView) {\n this.DiffChunkCount = 0;\n return;\n }\n // Schedule after the merge view has initialized\n Promise.resolve().then(() => {\n if (!this.diffView) return;\n const result = getChunks(this.diffView.state);\n this.DiffChunkCount = result ? result.chunks.length : 0;\n this.cdr.detectChanges();\n });\n }\n\n private buildDiffExtensions(): void {\n const section = this.ActiveSection;\n if (!section) {\n this.DiffExtensions = [];\n return;\n }\n\n this.DiffExtensions = unifiedMergeView({\n original: section.originalCode,\n highlightChanges: true,\n gutter: true\n });\n }\n}\n"]}

package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js CHANGED Viewed

@@ -2,8 +2,8 @@ import { Component } from '@angular/core';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/component-studio-state.service";
 import * as i2 from "@angular/forms";
-import * as i3 from "@progress/kendo-angular-buttons";
-import * as i4 from "@memberjunction/ng-code-editor";
+import * as i3 from "@memberjunction/ng-code-editor";
+import * as i4 from "@memberjunction/ng-ui-components";
 function DataRequirementsEditorComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 4)(1, "button", 7);
@@ -11,27 +11,22 @@ function DataRequirementsEditorComponent_Conditional_5_Template(rf, ctx) { if (r
     i0.ɵɵelement(2, "i", 8);
     i0.ɵɵtext(3, " Apply Changes ");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "button", 7);
+    i0.ɵɵelementStart(4, "button", 9);
     i0.ɵɵlistener("click", function DataRequirementsEditorComponent_Conditional_5_Template_button_click_4_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.CancelChanges()); });
-    i0.ɵɵelement(5, "i", 9);
+    i0.ɵɵelement(5, "i", 10);
     i0.ɵɵtext(6, " Cancel ");
     i0.ɵɵelementEnd()();
-} if (rf & 2) {
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("themeColor", "primary");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("themeColor", "base");
 } }
 function DataRequirementsEditorComponent_Conditional_7_Conditional_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 10)(1, "span", 13);
-    i0.ɵɵelement(2, "i", 14);
+    i0.ɵɵelementStart(0, "div", 11)(1, "span", 14);
+    i0.ɵɵelement(2, "i", 15);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "span", 13);
-    i0.ɵɵelement(5, "i", 15);
+    i0.ɵɵelementStart(4, "span", 14);
+    i0.ɵɵelement(5, "i", 16);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(7, "span", 16);
+    i0.ɵɵelementStart(7, "span", 17);
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -45,8 +40,8 @@ function DataRequirementsEditorComponent_Conditional_7_Conditional_0_Template(rf
 } }
 function DataRequirementsEditorComponent_Conditional_7_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
-    i0.ɵɵconditionalCreate(0, DataRequirementsEditorComponent_Conditional_7_Conditional_0_Template, 9, 5, "div", 10);
-    i0.ɵɵelementStart(1, "div", 11)(2, "mj-code-editor", 12);
+    i0.ɵɵconditionalCreate(0, DataRequirementsEditorComponent_Conditional_7_Conditional_0_Template, 9, 5, "div", 11);
+    i0.ɵɵelementStart(1, "div", 12)(2, "mj-code-editor", 13);
     i0.ɵɵtwoWayListener("ngModelChange", function DataRequirementsEditorComponent_Conditional_7_Template_mj_code_editor_ngModelChange_2_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); i0.ɵɵtwoWayBindingSet(ctx_r1.EditableContent, $event) || (ctx_r1.EditableContent = $event); return i0.ɵɵresetView($event); });
     i0.ɵɵlistener("ngModelChange", function DataRequirementsEditorComponent_Conditional_7_Template_mj_code_editor_ngModelChange_2_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnContentChanged()); });
     i0.ɵɵelementEnd()();
@@ -143,12 +138,12 @@ export class DataRequirementsEditorComponent {
         }
     }
     static ɵfac = function DataRequirementsEditorComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DataRequirementsEditorComponent)(i0.ɵɵdirectiveInject(i1.ComponentStudioStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
-    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataRequirementsEditorComponent, selectors: [["mj-data-requirements-editor"]], standalone: false, decls: 9, vars: 2, consts: [[1, "data-requirements-editor"], [1, "editor-header"], [1, "header-title"], [1, "fa-solid", "fa-database"], [1, "action-buttons"], [1, "editor-body"], [1, "empty-state"], ["kendoButton", "", 3, "click", "themeColor"], [1, "fa-solid", "fa-check"], [1, "fa-solid", "fa-times"], [1, "summary-bar"], [1, "json-editor-container"], [3, "ngModelChange", "ngModel", "language", "indentWithTab", "placeholder"], [1, "summary-item"], [1, "fa-solid", "fa-table"], [1, "fa-solid", "fa-search"], [1, "summary-item", "mode-badge"]], template: function DataRequirementsEditorComponent_Template(rf, ctx) { if (rf & 1) {
+    static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DataRequirementsEditorComponent, selectors: [["mj-data-requirements-editor"]], standalone: false, decls: 9, vars: 2, consts: [[1, "data-requirements-editor"], [1, "editor-header"], [1, "header-title"], [1, "fa-solid", "fa-database"], [1, "action-buttons"], [1, "editor-body"], [1, "empty-state"], ["mjButton", "", "variant", "primary", 3, "click"], [1, "fa-solid", "fa-check"], ["mjButton", "", 3, "click"], [1, "fa-solid", "fa-times"], [1, "summary-bar"], [1, "json-editor-container"], [3, "ngModelChange", "ngModel", "language", "indentWithTab", "placeholder"], [1, "summary-item"], [1, "fa-solid", "fa-table"], [1, "fa-solid", "fa-search"], [1, "summary-item", "mode-badge"]], template: function DataRequirementsEditorComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "div", 1)(2, "span", 2);
             i0.ɵɵelement(3, "i", 3);
             i0.ɵɵtext(4, " Data Requirements ");
             i0.ɵɵelementEnd();
-            i0.ɵɵconditionalCreate(5, DataRequirementsEditorComponent_Conditional_5_Template, 7, 2, "div", 4);
+            i0.ɵɵconditionalCreate(5, DataRequirementsEditorComponent_Conditional_5_Template, 7, 0, "div", 4);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(6, "div", 5);
             i0.ɵɵconditionalCreate(7, DataRequirementsEditorComponent_Conditional_7_Template, 3, 5)(8, DataRequirementsEditorComponent_Conditional_8_Template, 4, 0, "div", 6);
@@ -158,7 +153,7 @@ export class DataRequirementsEditorComponent {
             i0.ɵɵconditional(ctx.IsEditing ? 5 : -1);
             i0.ɵɵadvance(2);
             i0.ɵɵconditional(ctx.State.SelectedComponent ? 7 : 8);
-        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.ButtonComponent, i4.CodeEditorComponent], styles: [".data-requirements-editor[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n    .editor-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      flex-shrink: 0;\n    }\n    .header-title[_ngcontent-%COMP%] {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n    .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      margin-right: 6px;\n      color: var(--mj-text-secondary);\n    }\n    .action-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n    }\n    .summary-bar[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      padding: 6px 12px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 12px;\n      color: var(--mj-brand-primary);\n      flex-shrink: 0;\n    }\n    .summary-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .mode-badge[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n      padding: 1px 8px;\n      border-radius: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      font-size: 10px;\n    }\n    .editor-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n    .json-editor-container[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n    }\n    .json-editor-container[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n      display: block;\n      height: 100%;\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      color: var(--mj-text-secondary);\n      flex: 1;\n    }\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }"] });
+        } }, dependencies: [i2.NgControlStatus, i2.NgModel, i3.CodeEditorComponent, i4.MJButtonDirective], styles: [".data-requirements-editor[_ngcontent-%COMP%] {\n      display: flex;\n      flex-direction: column;\n      height: 100%;\n    }\n    .editor-header[_ngcontent-%COMP%] {\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 8px 12px;\n      border-bottom: 1px solid var(--mj-border-default);\n      background: var(--mj-bg-surface);\n      flex-shrink: 0;\n    }\n    .header-title[_ngcontent-%COMP%] {\n      font-weight: 600;\n      font-size: 13px;\n      color: var(--mj-text-primary);\n    }\n    .header-title[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      margin-right: 6px;\n      color: var(--mj-text-secondary);\n    }\n    .action-buttons[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 6px;\n    }\n    .summary-bar[_ngcontent-%COMP%] {\n      display: flex;\n      gap: 12px;\n      padding: 6px 12px;\n      background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n      border-bottom: 1px solid var(--mj-border-default);\n      font-size: 12px;\n      color: var(--mj-brand-primary);\n      flex-shrink: 0;\n    }\n    .summary-item[_ngcontent-%COMP%] {\n      display: flex;\n      align-items: center;\n      gap: 4px;\n    }\n    .mode-badge[_ngcontent-%COMP%] {\n      background: var(--mj-bg-surface-sunken);\n      color: var(--mj-text-primary);\n      padding: 1px 8px;\n      border-radius: 10px;\n      font-weight: 600;\n      text-transform: uppercase;\n      font-size: 10px;\n    }\n    .editor-body[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n      display: flex;\n      flex-direction: column;\n    }\n    .json-editor-container[_ngcontent-%COMP%] {\n      flex: 1;\n      overflow: hidden;\n    }\n    .json-editor-container[_ngcontent-%COMP%]   mj-code-editor[_ngcontent-%COMP%] {\n      display: block;\n      height: 100%;\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      color: var(--mj-text-secondary);\n      flex: 1;\n    }\n    .empty-state[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n      font-size: 32px;\n      margin-bottom: 12px;\n    }\n    .empty-state[_ngcontent-%COMP%]   p[_ngcontent-%COMP%] {\n      margin: 0;\n      font-size: 13px;\n      text-align: center;\n    }"] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DataRequirementsEditorComponent, [{
         type: Component,
@@ -171,10 +166,10 @@ export class DataRequirementsEditorComponent {
         </span>
         @if (IsEditing) {
           <div class="action-buttons">
-            <button kendoButton [themeColor]="'primary'" (click)="ApplyChanges()">
+            <button mjButton variant="primary" (click)="ApplyChanges()">
               <i class="fa-solid fa-check"></i> Apply Changes
             </button>
-            <button kendoButton [themeColor]="'base'" (click)="CancelChanges()">
+            <button mjButton (click)="CancelChanges()">
               <i class="fa-solid fa-times"></i> Cancel
             </button>
           </div>

package/dist/ComponentStudio/components/editors/data-requirements-editor.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"data-requirements-editor.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/data-requirements-editor.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAqB,MAAM,eAAe,CAAC;;;;;;;;IAgBjD,AADF,8BAA4B,gBAC4C;IAAzB,mMAAS,qBAAc,KAAC;IACnE,uBAAiC;IAAC,+BACpC;IAAA,iBAAS;IACT,iCAAoE;IAA1B,mMAAS,sBAAe,KAAC;IACjE,uBAAiC;IAAC,wBACpC;IACF,AADE,iBAAS,EACL;;IANgB,cAAwB;IAAxB,sCAAwB;IAGxB,eAAqB;IAArB,mCAAqB;;;IAWvC,AADF,+BAAyB,eACI;IACzB,wBAAiC;IACjC,YACF;IAAA,iBAAO;IACP,gCAA2B;IACzB,wBAAkC;IAClC,YACF;IAAA,iBAAO;IACP,gCAAsC;IACpC,YACF;IACF,AADE,iBAAO,EACH;;;IATF,eACF;IADE,0GACF;IAGE,eACF;IADE,sGACF;IAEE,eACF;IADE,gDACF;;;;IAZJ,gHAA2B;IAgBzB,AADF,+BAAmC,yBAMM;IAJrC,8UAA6B;IAI7B,2NAAiB,yBAAkB,KAAC;IAExC,AADE,iBAAiB,EACb;;;IAvBN,qDAcC;IAGG,eAA6B;IAA7B,sDAA6B;IAG7B,AADA,AADA,iCAAmB,uBACG,kDAC2B;;;IAKrD,8BAAyB;IACvB,uBAAoC;IACpC,yBAAG;IAAA,iEAAiD;IACtD,AADsD,iBAAI,EACpD;;AA2FhB,MAAM,OAAO,+BAA+B;IAOjC;IACC;IAPV,eAAe,GAAW,EAAE,CAAC;IAC7B,SAAS,GAAY,KAAK,CAAC;IAEnB,mBAAmB,GAAmC,IAAI,CAAC;IAEnE,YACS,KAAkC,EACjC,GAAsB;QADvB,UAAK,GAAL,KAAK,CAA6B;QACjC,QAAG,GAAH,GAAG,CAAmB;IAC7B,CAAC;IAEJ,IAAI,mBAAmB;QACrB,OAAO,IAAI,CAAC,mBAAmB,IAAI,IAAI,CAAC;IAC1C,CAAC;IAED,IAAI,WAAW;QACb,IAAI,CAAC,IAAI,CAAC,mBAAmB;YAAE,OAAO,CAAC,CAAC;QACxC,MAAM,QAAQ,GAAG,IAAI,CAAC,mBAAmB,CAAC,UAAU,CAAC,CAAC;QACtD,OAAO,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACvD,CAAC;IAED,IAAI,UAAU;QACZ,IAAI,CAAC,IAAI,CAAC,mBAAmB;YAAE,OAAO,CAAC,CAAC;QACxC,MAAM,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,SAAS,CAAC,CAAC;QACpD,OAAO,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;IACrD,CAAC;IAED,IAAI,QAAQ;QACV,IAAI,CAAC,IAAI,CAAC,mBAAmB;YAAE,OAAO,EAAE,CAAC;QACzC,OAAQ,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAY,IAAI,OAAO,CAAC;IACjE,CAAC;IAED,QAAQ;QACN,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,SAAS,CAAC,GAAG,EAAE;YACrC,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;QAC3B,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;QACtB,IAAI,CAAC,YAAY,EAAE,CAAC;IACtB,CAAC;IAED,YAAY;QACV,IAAI,CAAC;YACH,MAAM,IAAI,GAAkB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;YAChE,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;YACjD,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC;YAChC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC;YAC5B,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACzB,CAAC;QAAC,OAAO,KAAK,EAAE,CAAC;YACf,OAAO,CAAC,KAAK,CAAC,2CAA2C,EAAE,KAAK,CAAC,CAAC;QACpE,CAAC;IACH,CAAC;IAED,aAAa;QACX,IAAI,CAAC,WAAW,EAAE,CAAC;QACnB,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;QACvB,IAAI,CAAC,GAAG,CAAC,aAAa,EAAE,CAAC;IAC3B,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC;YACH,MAAM,IAAI,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;YACjD,MAAM,OAAO,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC;YACtF,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YACxD,IAAI,CAAC,YAAY,EAAE,CAAC;QACtB,CAAC;QAAC,MAAM,CAAC;YACP,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;YAC1B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QAClC,CAAC;IACH,CAAC;IAEO,YAAY;QAClB,IAAI,CAAC;YACH,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC;QAC9D,CAAC;QAAC,MAAM,CAAC;YACP,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC;QAClC,CAAC;IACH,CAAC;yHAjFU,+BAA+B;6DAA/B,+BAA+B;YAzIpC,AADF,AADF,8BAAsC,aACT,cACE;YACzB,uBAAoC;YACpC,mCACF;YAAA,iBAAO;YACP,iGAAiB;YAUnB,iBAAM;YAEN,8BAAyB;YA0BrB,AAzBF,uFAA+B,2EAyBtB;YAOb,AADE,iBAAM,EACF;;YA7CF,eASC;YATD,wCASC;YAID,eA8BC;YA9BD,qDA8BC;;;iFA0FI,+BAA+B;cA/I3C,SAAS;6BACI,KAAK,YACP,6BAA6B,YAC7B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDT;;kFAuFU,+BAA+B","sourcesContent":["import { Component, ChangeDetectorRef } from '@angular/core';\nimport { ComponentStudioStateService } from '../../services/component-studio-state.service';\nimport { ComponentSpec } from '@memberjunction/interactive-component-types';\n\n@Component({\n standalone: false,\n selector: 'mj-data-requirements-editor',\n template: `\n <div class=\"data-requirements-editor\">\n <div class=\"editor-header\">\n <span class=\"header-title\">\n <i class=\"fa-solid fa-database\"></i>\n Data Requirements\n </span>\n @if (IsEditing) {\n <div class=\"action-buttons\">\n <button kendoButton [themeColor]=\"'primary'\" (click)=\"ApplyChanges()\">\n <i class=\"fa-solid fa-check\"></i> Apply Changes\n </button>\n <button kendoButton [themeColor]=\"'base'\" (click)=\"CancelChanges()\">\n <i class=\"fa-solid fa-times\"></i> Cancel\n </button>\n </div>\n }\n </div>\n\n <div class=\"editor-body\">\n @if (State.SelectedComponent) {\n @if (HasDataRequirements) {\n <div class=\"summary-bar\">\n <span class=\"summary-item\">\n <i class=\"fa-solid fa-table\"></i>\n {{ EntityCount }} {{ EntityCount === 1 ? 'entity' : 'entities' }}\n </span>\n <span class=\"summary-item\">\n <i class=\"fa-solid fa-search\"></i>\n {{ QueryCount }} {{ QueryCount === 1 ? 'query' : 'queries' }}\n </span>\n <span class=\"summary-item mode-badge\">\n {{ DataMode }}\n </span>\n </div>\n }\n <div class=\"json-editor-container\">\n <mj-code-editor\n [(ngModel)]=\"EditableContent\"\n [language]=\"'json'\"\n [indentWithTab]=\"true\"\n [placeholder]=\"'Enter data requirements JSON...'\"\n (ngModelChange)=\"OnContentChanged()\">\n </mj-code-editor>\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-database\"></i>\n <p>Select a component to edit its data requirements.</p>\n </div>\n }\n </div>\n </div>\n `,\n styles: [`\n .data-requirements-editor {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n .editor-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n }\n .header-title {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n }\n .header-title i {\n margin-right: 6px;\n color: var(--mj-text-secondary);\n }\n .action-buttons {\n display: flex;\n gap: 6px;\n }\n .summary-bar {\n display: flex;\n gap: 12px;\n padding: 6px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n }\n .summary-item {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n .mode-badge {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n padding: 1px 8px;\n border-radius: 10px;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 10px;\n }\n .editor-body {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n .json-editor-container {\n flex: 1;\n overflow: hidden;\n }\n .json-editor-container mj-code-editor {\n display: block;\n height: 100%;\n }\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n flex: 1;\n }\n .empty-state i {\n font-size: 32px;\n margin-bottom: 12px;\n }\n .empty-state p {\n margin: 0;\n font-size: 13px;\n text-align: center;\n }\n `]\n})\nexport class DataRequirementsEditorComponent {\n EditableContent: string = '';\n IsEditing: boolean = false;\n\n private _parsedRequirements: Record<string, unknown> \| null = null;\n\n constructor(\n public State: ComponentStudioStateService,\n private cdr: ChangeDetectorRef\n ) {}\n\n get HasDataRequirements(): boolean {\n return this._parsedRequirements != null;\n }\n\n get EntityCount(): number {\n if (!this._parsedRequirements) return 0;\n const entities = this._parsedRequirements['entities'];\n return Array.isArray(entities) ? entities.length : 0;\n }\n\n get QueryCount(): number {\n if (!this._parsedRequirements) return 0;\n const queries = this._parsedRequirements['queries'];\n return Array.isArray(queries) ? queries.length : 0;\n }\n\n get DataMode(): string {\n if (!this._parsedRequirements) return '';\n return (this._parsedRequirements['mode'] as string) \|\| 'views';\n }\n\n ngOnInit(): void {\n this.loadContent();\n this.State.StateChanged.subscribe(() => {\n this.loadContent();\n this.cdr.detectChanges();\n });\n }\n\n OnContentChanged(): void {\n this.IsEditing = true;\n this.parseContent();\n }\n\n ApplyChanges(): void {\n try {\n const spec: ComponentSpec = JSON.parse(this.State.EditableSpec);\n const dataReq = JSON.parse(this.EditableContent);\n spec.dataRequirements = dataReq;\n this.State.UpdateSpec(spec);\n this.IsEditing = false;\n } catch (error) {\n console.error('Error applying data requirements changes:', error);\n }\n }\n\n CancelChanges(): void {\n this.loadContent();\n this.IsEditing = false;\n this.cdr.detectChanges();\n }\n\n private loadContent(): void {\n try {\n const spec = JSON.parse(this.State.EditableSpec);\n const dataReq = spec.dataRequirements \|\| { mode: 'views', entities: [], queries: [] };\n this.EditableContent = JSON.stringify(dataReq, null, 2);\n this.parseContent();\n } catch {\n this.EditableContent = '';\n this._parsedRequirements = null;\n }\n }\n\n private parseContent(): void {\n try {\n this._parsedRequirements = JSON.parse(this.EditableContent);\n } catch {\n this._parsedRequirements = null;\n }\n }\n}\n"]}
1	+ {"version":3,"file":"data-requirements-editor.component.js","sourceRoot":"","sources":["../../../../src/ComponentStudio/components/editors/data-requirements-editor.component.ts"],"names":[],"mappings":"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","sourcesContent":["import { Component, ChangeDetectorRef } from '@angular/core';\nimport { ComponentStudioStateService } from '../../services/component-studio-state.service';\nimport { ComponentSpec } from '@memberjunction/interactive-component-types';\n\n@Component({\n standalone: false,\n selector: 'mj-data-requirements-editor',\n template: `\n <div class=\"data-requirements-editor\">\n <div class=\"editor-header\">\n <span class=\"header-title\">\n <i class=\"fa-solid fa-database\"></i>\n Data Requirements\n </span>\n @if (IsEditing) {\n <div class=\"action-buttons\">\n <button mjButton variant=\"primary\" (click)=\"ApplyChanges()\">\n <i class=\"fa-solid fa-check\"></i> Apply Changes\n </button>\n <button mjButton (click)=\"CancelChanges()\">\n <i class=\"fa-solid fa-times\"></i> Cancel\n </button>\n </div>\n }\n </div>\n\n <div class=\"editor-body\">\n @if (State.SelectedComponent) {\n @if (HasDataRequirements) {\n <div class=\"summary-bar\">\n <span class=\"summary-item\">\n <i class=\"fa-solid fa-table\"></i>\n {{ EntityCount }} {{ EntityCount === 1 ? 'entity' : 'entities' }}\n </span>\n <span class=\"summary-item\">\n <i class=\"fa-solid fa-search\"></i>\n {{ QueryCount }} {{ QueryCount === 1 ? 'query' : 'queries' }}\n </span>\n <span class=\"summary-item mode-badge\">\n {{ DataMode }}\n </span>\n </div>\n }\n <div class=\"json-editor-container\">\n <mj-code-editor\n [(ngModel)]=\"EditableContent\"\n [language]=\"'json'\"\n [indentWithTab]=\"true\"\n [placeholder]=\"'Enter data requirements JSON...'\"\n (ngModelChange)=\"OnContentChanged()\">\n </mj-code-editor>\n </div>\n } @else {\n <div class=\"empty-state\">\n <i class=\"fa-solid fa-database\"></i>\n <p>Select a component to edit its data requirements.</p>\n </div>\n }\n </div>\n </div>\n `,\n styles: [`\n .data-requirements-editor {\n display: flex;\n flex-direction: column;\n height: 100%;\n }\n .editor-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 8px 12px;\n border-bottom: 1px solid var(--mj-border-default);\n background: var(--mj-bg-surface);\n flex-shrink: 0;\n }\n .header-title {\n font-weight: 600;\n font-size: 13px;\n color: var(--mj-text-primary);\n }\n .header-title i {\n margin-right: 6px;\n color: var(--mj-text-secondary);\n }\n .action-buttons {\n display: flex;\n gap: 6px;\n }\n .summary-bar {\n display: flex;\n gap: 12px;\n padding: 6px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 15%, var(--mj-bg-surface));\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n color: var(--mj-brand-primary);\n flex-shrink: 0;\n }\n .summary-item {\n display: flex;\n align-items: center;\n gap: 4px;\n }\n .mode-badge {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n padding: 1px 8px;\n border-radius: 10px;\n font-weight: 600;\n text-transform: uppercase;\n font-size: 10px;\n }\n .editor-body {\n flex: 1;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n }\n .json-editor-container {\n flex: 1;\n overflow: hidden;\n }\n .json-editor-container mj-code-editor {\n display: block;\n height: 100%;\n }\n .empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 40px 20px;\n color: var(--mj-text-secondary);\n flex: 1;\n }\n .empty-state i {\n font-size: 32px;\n margin-bottom: 12px;\n }\n .empty-state p {\n margin: 0;\n font-size: 13px;\n text-align: center;\n }\n `]\n})\nexport class DataRequirementsEditorComponent {\n EditableContent: string = '';\n IsEditing: boolean = false;\n\n private _parsedRequirements: Record<string, unknown> \| null = null;\n\n constructor(\n public State: ComponentStudioStateService,\n private cdr: ChangeDetectorRef\n ) {}\n\n get HasDataRequirements(): boolean {\n return this._parsedRequirements != null;\n }\n\n get EntityCount(): number {\n if (!this._parsedRequirements) return 0;\n const entities = this._parsedRequirements['entities'];\n return Array.isArray(entities) ? entities.length : 0;\n }\n\n get QueryCount(): number {\n if (!this._parsedRequirements) return 0;\n const queries = this._parsedRequirements['queries'];\n return Array.isArray(queries) ? queries.length : 0;\n }\n\n get DataMode(): string {\n if (!this._parsedRequirements) return '';\n return (this._parsedRequirements['mode'] as string) \|\| 'views';\n }\n\n ngOnInit(): void {\n this.loadContent();\n this.State.StateChanged.subscribe(() => {\n this.loadContent();\n this.cdr.detectChanges();\n });\n }\n\n OnContentChanged(): void {\n this.IsEditing = true;\n this.parseContent();\n }\n\n ApplyChanges(): void {\n try {\n const spec: ComponentSpec = JSON.parse(this.State.EditableSpec);\n const dataReq = JSON.parse(this.EditableContent);\n spec.dataRequirements = dataReq;\n this.State.UpdateSpec(spec);\n this.IsEditing = false;\n } catch (error) {\n console.error('Error applying data requirements changes:', error);\n }\n }\n\n CancelChanges(): void {\n this.loadContent();\n this.IsEditing = false;\n this.cdr.detectChanges();\n }\n\n private loadContent(): void {\n try {\n const spec = JSON.parse(this.State.EditableSpec);\n const dataReq = spec.dataRequirements \|\| { mode: 'views', entities: [], queries: [] };\n this.EditableContent = JSON.stringify(dataReq, null, 2);\n this.parseContent();\n } catch {\n this.EditableContent = '';\n this._parsedRequirements = null;\n }\n }\n\n private parseContent(): void {\n try {\n this._parsedRequirements = JSON.parse(this.EditableContent);\n } catch {\n this._parsedRequirements = null;\n }\n }\n}\n"]}