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/Actions/components/explorer/action-toolbar.component.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"action-toolbar.component.js","sourceRoot":"","sources":["../../../../src/Actions/components/explorer/action-toolbar.component.ts","../../../../src/Actions/components/explorer/action-toolbar.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Input,\n Output,\n EventEmitter,\n OnInit,\n OnDestroy,\n ChangeDetectionStrategy,\n ChangeDetectorRef\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';\nimport {\n ActionExplorerStateService,\n ActionViewMode,\n SortField,\n SortDirection,\n ActionFilters\n} from '../../services/action-explorer-state.service';\n\ninterface SortOption {\n field: SortField;\n label: string;\n icon: string;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-action-toolbar',\n templateUrl: './action-toolbar.component.html',\n styleUrls: ['./action-toolbar.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ActionToolbarComponent implements OnInit, OnDestroy {\n @Input() TotalCount = 0;\n @Input() FilteredCount = 0;\n @Output() NewActionClick = new EventEmitter<void>();\n @Output() RefreshClick = new EventEmitter<void>();\n\n public ViewMode: ActionViewMode = 'card';\n public SortField: SortField = 'name';\n public SortDirection: SortDirection = 'asc';\n public Filters: ActionFilters = {\n searchTerm: '',\n statuses: [],\n types: [],\n approvalStatuses: [],\n hasExecutions: null\n };\n\n public ShowFiltersDropdown = false;\n public ShowSortDropdown = false;\n\n public SortOptions: SortOption[] = [\n { field: 'name', label: 'Name', icon: 'fa-solid fa-font' },\n { field: 'updated', label: 'Last Updated', icon: 'fa-solid fa-clock' },\n { field: 'status', label: 'Status', icon: 'fa-solid fa-circle-check' },\n { field: 'type', label: 'Type', icon: 'fa-solid fa-tag' },\n { field: 'category', label: 'Category', icon: 'fa-solid fa-folder' }\n ];\n\n public StatusOptions = [\n { value: 'Active', label: 'Active', color: 'success' },\n { value: 'Pending', label: 'Pending', color: 'warning' },\n { value: 'Disabled', label: 'Disabled', color: 'error' }\n ];\n\n public TypeOptions = [\n { value: 'Generated', label: 'AI Generated', icon: 'fa-solid fa-robot' },\n { value: 'Custom', label: 'Custom', icon: 'fa-solid fa-code' }\n ];\n\n private destroy$ = new Subject<void>();\n private searchInput$ = new Subject<string>();\n\n constructor(\n public StateService: ActionExplorerStateService,\n private cdr: ChangeDetectorRef\n ) {}\n\n ngOnInit(): void {\n this.subscribeToState();\n this.setupSearchDebounce();\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n private subscribeToState(): void {\n this.StateService.ViewMode$.pipe(takeUntil(this.destroy$)).subscribe(mode => {\n this.ViewMode = mode;\n this.cdr.markForCheck();\n });\n\n this.StateService.SortConfig$.pipe(takeUntil(this.destroy$)).subscribe(config => {\n this.SortField = config.field;\n this.SortDirection = config.direction;\n this.cdr.markForCheck();\n });\n\n this.StateService.Filters$.pipe(takeUntil(this.destroy$)).subscribe(filters => {\n this.Filters = filters;\n this.cdr.markForCheck();\n });\n }\n\n private setupSearchDebounce(): void {\n this.searchInput$.pipe(\n debounceTime(300),\n distinctUntilChanged(),\n takeUntil(this.destroy$)\n ).subscribe(term => {\n this.StateService.setSearchTerm(term);\n });\n }\n\n public onSearchInput(term: string): void {\n this.searchInput$.next(term);\n }\n\n public clearSearch(): void {\n this.StateService.setSearchTerm('');\n }\n\n public setViewMode(mode: ActionViewMode): void {\n this.StateService.setViewMode(mode);\n }\n\n public setSortField(field: SortField): void {\n this.StateService.setSortField(field);\n this.ShowSortDropdown = false;\n }\n\n public toggleSortDirection(): void {\n this.StateService.toggleSortDirection();\n }\n\n public toggleStatus(status: string): void {\n const current = [...this.Filters.statuses];\n const index = current.indexOf(status);\n if (index >= 0) {\n current.splice(index, 1);\n } else {\n current.push(status);\n }\n this.StateService.setStatusFilter(current);\n }\n\n public toggleType(type: string): void {\n const current = [...this.Filters.types];\n const index = current.indexOf(type);\n if (index >= 0) {\n current.splice(index, 1);\n } else {\n current.push(type);\n }\n this.StateService.setTypeFilter(current);\n }\n\n public isStatusSelected(status: string): boolean {\n return this.Filters.statuses.includes(status);\n }\n\n public isTypeSelected(type: string): boolean {\n return this.Filters.types.includes(type);\n }\n\n public clearFilters(): void {\n this.StateService.clearFilters();\n }\n\n public hasActiveFilters(): boolean {\n return this.StateService.hasActiveFilters();\n }\n\n public getActiveFilterCount(): number {\n let count = 0;\n if (this.Filters.searchTerm) count++;\n count += this.Filters.statuses.length;\n count += this.Filters.types.length;\n count += this.Filters.approvalStatuses.length;\n if (this.Filters.hasExecutions != null) count++;\n return count;\n }\n\n public toggleFiltersDropdown(): void {\n this.ShowFiltersDropdown = !this.ShowFiltersDropdown;\n if (this.ShowFiltersDropdown) {\n this.ShowSortDropdown = false;\n }\n }\n\n public toggleSortDropdown(): void {\n this.ShowSortDropdown = !this.ShowSortDropdown;\n if (this.ShowSortDropdown) {\n this.ShowFiltersDropdown = false;\n }\n }\n\n public closeDropdowns(): void {\n this.ShowFiltersDropdown = false;\n this.ShowSortDropdown = false;\n }\n\n public getSortLabel(): string {\n const option = this.SortOptions.find(o => o.field === this.SortField);\n return option?.label \|\| 'Sort';\n }\n\n public getSortIcon(): string {\n return this.SortDirection === 'asc' ? 'fa-solid fa-arrow-up-short-wide' : 'fa-solid fa-arrow-down-wide-short';\n }\n\n public onNewAction(): void {\n this.NewActionClick.emit();\n }\n\n public onRefresh(): void {\n this.RefreshClick.emit();\n }\n}\n","<div class=\"action-toolbar\">\n <div class=\"toolbar-left\">\n <!-- Search -->\n <div class=\"search-container\">\n <kendo-textbox\n [placeholder]=\"'Search actions...'\"\n [value]=\"Filters.searchTerm\"\n (valueChange)=\"onSearchInput($event)\">\n <ng-template kendoTextBoxPrefixTemplate>\n <i class=\"fa-solid fa-search\"></i>\n </ng-template>\n @if (Filters.searchTerm) {\n <ng-template kendoTextBoxSuffixTemplate>\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n (click)=\"clearSearch()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </ng-template>\n }\n </kendo-textbox>\n </div>\n\n <!-- Filters Dropdown -->\n <div class=\"dropdown-container\" (clickOutside)=\"ShowFiltersDropdown = false\">\n <button kendoButton\n [fillMode]=\"'outline'\"\n [class.active]=\"hasActiveFilters()\"\n (click)=\"toggleFiltersDropdown()\">\n <i class=\"fa-solid fa-filter\"></i>\n Filters\n @if (getActiveFilterCount() > 0) {\n <span class=\"filter-badge\">{{ getActiveFilterCount() }}</span>\n }\n <i [class]=\"ShowFiltersDropdown ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n </button>\n\n @if (ShowFiltersDropdown) {\n <div class=\"dropdown-menu filters-menu\">\n <div class=\"dropdown-section\">\n <div class=\"section-header\">\n <span>Status</span>\n @if (Filters.statuses.length > 0) {\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n (click)=\"StateService.setStatusFilter([])\">\n Clear\n </button>\n }\n </div>\n <div class=\"filter-options\">\n @for (status of StatusOptions; track status.value) {\n <label class=\"filter-option\" [class.selected]=\"isStatusSelected(status.value)\">\n <input type=\"checkbox\"\n [checked]=\"isStatusSelected(status.value)\"\n (change)=\"toggleStatus(status.value)\">\n <span class=\"status-dot\" [attr.data-status]=\"status.value\"></span>\n {{ status.label }}\n </label>\n }\n </div>\n </div>\n\n <div class=\"dropdown-section\">\n <div class=\"section-header\">\n <span>Type</span>\n @if (Filters.types.length > 0) {\n <button kendoButton\n [fillMode]=\"'flat'\"\n [size]=\"'small'\"\n (click)=\"StateService.setTypeFilter([])\">\n Clear\n </button>\n }\n </div>\n <div class=\"filter-options\">\n @for (type of TypeOptions; track type.value) {\n <label class=\"filter-option\" [class.selected]=\"isTypeSelected(type.value)\">\n <input type=\"checkbox\"\n [checked]=\"isTypeSelected(type.value)\"\n (change)=\"toggleType(type.value)\">\n <i [class]=\"type.icon\"></i>\n {{ type.label }}\n </label>\n }\n </div>\n </div>\n\n @if (hasActiveFilters()) {\n <div class=\"dropdown-footer\">\n <button kendoButton\n [fillMode]=\"'flat'\"\n [themeColor]=\"'error'\"\n (click)=\"clearFilters()\">\n <i class=\"fa-solid fa-times\"></i>\n Clear All Filters\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Active Filter Chips -->\n @if (hasActiveFilters()) {\n <div class=\"active-filters\">\n @for (status of Filters.statuses; track status) {\n <kendo-chip\n [removable]=\"true\"\n [size]=\"'small'\"\n (remove)=\"toggleStatus(status)\">\n Status: {{ status }}\n </kendo-chip>\n }\n @for (type of Filters.types; track type) {\n <kendo-chip\n [removable]=\"true\"\n [size]=\"'small'\"\n (remove)=\"toggleType(type)\">\n Type: {{ type === 'Generated' ? 'AI Generated' : type }}\n </kendo-chip>\n }\n </div>\n }\n </div>\n\n <div class=\"toolbar-right\">\n <!-- Results Count -->\n <div class=\"results-count\">\n <span class=\"count\">{{ FilteredCount }}</span>\n @if (FilteredCount !== TotalCount) {\n <span class=\"of-total\">of {{ TotalCount }}</span>\n }\n <span class=\"label\">actions</span>\n </div>\n\n <!-- Sort Dropdown -->\n <div class=\"dropdown-container\" (clickOutside)=\"ShowSortDropdown = false\">\n <button kendoButton\n [fillMode]=\"'outline'\"\n (click)=\"toggleSortDropdown()\">\n <i [class]=\"getSortIcon()\"></i>\n {{ getSortLabel() }}\n <i [class]=\"ShowSortDropdown ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n </button>\n\n @if (ShowSortDropdown) {\n <div class=\"dropdown-menu sort-menu\">\n @for (option of SortOptions; track option.field) {\n <button class=\"sort-option\"\n [class.selected]=\"SortField === option.field\"\n (click)=\"setSortField(option.field)\">\n <i [class]=\"option.icon\"></i>\n {{ option.label }}\n @if (SortField === option.field) {\n <i [class]=\"SortDirection === 'asc' ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'\" class=\"direction-icon\"></i>\n }\n </button>\n }\n </div>\n }\n </div>\n\n <!-- View Mode Toggle -->\n <div class=\"view-toggle\">\n <button kendoButton\n [fillMode]=\"ViewMode === 'card' ? 'solid' : 'outline'\"\n [themeColor]=\"ViewMode === 'card' ? 'primary' : 'base'\"\n title=\"Card View\"\n (click)=\"setViewMode('card')\">\n <i class=\"fa-solid fa-grip\"></i>\n </button>\n <button kendoButton\n [fillMode]=\"ViewMode === 'list' ? 'solid' : 'outline'\"\n [themeColor]=\"ViewMode === 'list' ? 'primary' : 'base'\"\n title=\"List View\"\n (click)=\"setViewMode('list')\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n <button kendoButton\n [fillMode]=\"ViewMode === 'compact' ? 'solid' : 'outline'\"\n [themeColor]=\"ViewMode === 'compact' ? 'primary' : 'base'\"\n title=\"Compact View\"\n (click)=\"setViewMode('compact')\">\n <i class=\"fa-solid fa-bars\"></i>\n </button>\n </div>\n\n <!-- Refresh Button -->\n <button kendoButton\n [fillMode]=\"'flat'\"\n title=\"Refresh\"\n (click)=\"onRefresh()\">\n <i class=\"fa-solid fa-refresh\"></i>\n </button>\n\n <!-- New Action Button -->\n <button kendoButton\n [fillMode]=\"'solid'\"\n [themeColor]=\"'primary'\"\n (click)=\"onNewAction()\">\n <i class=\"fa-solid fa-plus\"></i>\n New Action\n </button>\n </div>\n</div>\n"]}
1	+ {"version":3,"file":"action-toolbar.component.js","sourceRoot":"","sources":["../../../../src/Actions/components/explorer/action-toolbar.component.ts","../../../../src/Actions/components/explorer/action-toolbar.component.html"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Input,\n Output,\n EventEmitter,\n OnInit,\n OnDestroy,\n ChangeDetectionStrategy,\n ChangeDetectorRef\n} from '@angular/core';\nimport { Subject } from 'rxjs';\nimport { takeUntil, debounceTime, distinctUntilChanged } from 'rxjs/operators';\nimport {\n ActionExplorerStateService,\n ActionViewMode,\n SortField,\n SortDirection,\n ActionFilters\n} from '../../services/action-explorer-state.service';\n\ninterface SortOption {\n field: SortField;\n label: string;\n icon: string;\n}\n\n@Component({\n standalone: false,\n selector: 'mj-action-toolbar',\n templateUrl: './action-toolbar.component.html',\n styleUrls: ['./action-toolbar.component.css'],\n changeDetection: ChangeDetectionStrategy.OnPush\n})\nexport class ActionToolbarComponent implements OnInit, OnDestroy {\n @Input() TotalCount = 0;\n @Input() FilteredCount = 0;\n @Output() NewActionClick = new EventEmitter<void>();\n @Output() RefreshClick = new EventEmitter<void>();\n\n public ViewMode: ActionViewMode = 'card';\n public SortField: SortField = 'name';\n public SortDirection: SortDirection = 'asc';\n public Filters: ActionFilters = {\n searchTerm: '',\n statuses: [],\n types: [],\n approvalStatuses: [],\n hasExecutions: null\n };\n\n public ShowFiltersDropdown = false;\n public ShowSortDropdown = false;\n\n public SortOptions: SortOption[] = [\n { field: 'name', label: 'Name', icon: 'fa-solid fa-font' },\n { field: 'updated', label: 'Last Updated', icon: 'fa-solid fa-clock' },\n { field: 'status', label: 'Status', icon: 'fa-solid fa-circle-check' },\n { field: 'type', label: 'Type', icon: 'fa-solid fa-tag' },\n { field: 'category', label: 'Category', icon: 'fa-solid fa-folder' }\n ];\n\n public StatusOptions = [\n { value: 'Active', label: 'Active', color: 'success' },\n { value: 'Pending', label: 'Pending', color: 'warning' },\n { value: 'Disabled', label: 'Disabled', color: 'error' }\n ];\n\n public TypeOptions = [\n { value: 'Generated', label: 'AI Generated', icon: 'fa-solid fa-robot' },\n { value: 'Custom', label: 'Custom', icon: 'fa-solid fa-code' }\n ];\n\n private destroy$ = new Subject<void>();\n private searchInput$ = new Subject<string>();\n\n constructor(\n public StateService: ActionExplorerStateService,\n private cdr: ChangeDetectorRef\n ) {}\n\n ngOnInit(): void {\n this.subscribeToState();\n this.setupSearchDebounce();\n }\n\n ngOnDestroy(): void {\n this.destroy$.next();\n this.destroy$.complete();\n }\n\n private subscribeToState(): void {\n this.StateService.ViewMode$.pipe(takeUntil(this.destroy$)).subscribe(mode => {\n this.ViewMode = mode;\n this.cdr.markForCheck();\n });\n\n this.StateService.SortConfig$.pipe(takeUntil(this.destroy$)).subscribe(config => {\n this.SortField = config.field;\n this.SortDirection = config.direction;\n this.cdr.markForCheck();\n });\n\n this.StateService.Filters$.pipe(takeUntil(this.destroy$)).subscribe(filters => {\n this.Filters = filters;\n this.cdr.markForCheck();\n });\n }\n\n private setupSearchDebounce(): void {\n this.searchInput$.pipe(\n debounceTime(300),\n distinctUntilChanged(),\n takeUntil(this.destroy$)\n ).subscribe(term => {\n this.StateService.setSearchTerm(term);\n });\n }\n\n public onSearchInput(term: string): void {\n this.searchInput$.next(term);\n }\n\n public clearSearch(): void {\n this.StateService.setSearchTerm('');\n }\n\n public setViewMode(mode: ActionViewMode): void {\n this.StateService.setViewMode(mode);\n }\n\n public setSortField(field: SortField): void {\n this.StateService.setSortField(field);\n this.ShowSortDropdown = false;\n }\n\n public toggleSortDirection(): void {\n this.StateService.toggleSortDirection();\n }\n\n public toggleStatus(status: string): void {\n const current = [...this.Filters.statuses];\n const index = current.indexOf(status);\n if (index >= 0) {\n current.splice(index, 1);\n } else {\n current.push(status);\n }\n this.StateService.setStatusFilter(current);\n }\n\n public toggleType(type: string): void {\n const current = [...this.Filters.types];\n const index = current.indexOf(type);\n if (index >= 0) {\n current.splice(index, 1);\n } else {\n current.push(type);\n }\n this.StateService.setTypeFilter(current);\n }\n\n public isStatusSelected(status: string): boolean {\n return this.Filters.statuses.includes(status);\n }\n\n public isTypeSelected(type: string): boolean {\n return this.Filters.types.includes(type);\n }\n\n public clearFilters(): void {\n this.StateService.clearFilters();\n }\n\n public hasActiveFilters(): boolean {\n return this.StateService.hasActiveFilters();\n }\n\n public getActiveFilterCount(): number {\n let count = 0;\n if (this.Filters.searchTerm) count++;\n count += this.Filters.statuses.length;\n count += this.Filters.types.length;\n count += this.Filters.approvalStatuses.length;\n if (this.Filters.hasExecutions != null) count++;\n return count;\n }\n\n public toggleFiltersDropdown(): void {\n this.ShowFiltersDropdown = !this.ShowFiltersDropdown;\n if (this.ShowFiltersDropdown) {\n this.ShowSortDropdown = false;\n }\n }\n\n public toggleSortDropdown(): void {\n this.ShowSortDropdown = !this.ShowSortDropdown;\n if (this.ShowSortDropdown) {\n this.ShowFiltersDropdown = false;\n }\n }\n\n public closeDropdowns(): void {\n this.ShowFiltersDropdown = false;\n this.ShowSortDropdown = false;\n }\n\n public getSortLabel(): string {\n const option = this.SortOptions.find(o => o.field === this.SortField);\n return option?.label \|\| 'Sort';\n }\n\n public getSortIcon(): string {\n return this.SortDirection === 'asc' ? 'fa-solid fa-arrow-up-short-wide' : 'fa-solid fa-arrow-down-wide-short';\n }\n\n public onNewAction(): void {\n this.NewActionClick.emit();\n }\n\n public onRefresh(): void {\n this.RefreshClick.emit();\n }\n}\n","<div class=\"action-toolbar\">\n <div class=\"toolbar-left\">\n <!-- Search -->\n <div class=\"search-container\">\n <div class=\"search-input-wrapper\">\n <i class=\"fa-solid fa-search search-icon\"></i>\n <input type=\"text\" class=\"mj-input\"\n placeholder=\"Search actions...\"\n [value]=\"Filters.searchTerm\"\n (input)=\"onSearchInput($any($event.target).value)\" />\n @if (Filters.searchTerm) {\n <button mjButton variant=\"flat\" size=\"sm\" class=\"search-clear\"\n (click)=\"clearSearch()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n </div>\n </div>\n\n <!-- Filters Dropdown -->\n <div class=\"dropdown-container\" (clickOutside)=\"ShowFiltersDropdown = false\">\n <button mjButton\n variant=\"outline\"\n [class.active]=\"hasActiveFilters()\"\n (click)=\"toggleFiltersDropdown()\">\n <i class=\"fa-solid fa-filter\"></i>\n Filters\n @if (getActiveFilterCount() > 0) {\n <span class=\"filter-badge\">{{ getActiveFilterCount() }}</span>\n }\n <i [class]=\"ShowFiltersDropdown ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n </button>\n\n @if (ShowFiltersDropdown) {\n <div class=\"dropdown-menu filters-menu\">\n <div class=\"dropdown-section\">\n <div class=\"section-header\">\n <span>Status</span>\n @if (Filters.statuses.length > 0) {\n <button mjButton\n variant=\"flat\"\n size=\"sm\"\n (click)=\"StateService.setStatusFilter([])\">\n Clear\n </button>\n }\n </div>\n <div class=\"filter-options\">\n @for (status of StatusOptions; track status.value) {\n <label class=\"filter-option\" [class.selected]=\"isStatusSelected(status.value)\">\n <input type=\"checkbox\"\n [checked]=\"isStatusSelected(status.value)\"\n (change)=\"toggleStatus(status.value)\">\n <span class=\"status-dot\" [attr.data-status]=\"status.value\"></span>\n {{ status.label }}\n </label>\n }\n </div>\n </div>\n\n <div class=\"dropdown-section\">\n <div class=\"section-header\">\n <span>Type</span>\n @if (Filters.types.length > 0) {\n <button mjButton\n variant=\"flat\"\n size=\"sm\"\n (click)=\"StateService.setTypeFilter([])\">\n Clear\n </button>\n }\n </div>\n <div class=\"filter-options\">\n @for (type of TypeOptions; track type.value) {\n <label class=\"filter-option\" [class.selected]=\"isTypeSelected(type.value)\">\n <input type=\"checkbox\"\n [checked]=\"isTypeSelected(type.value)\"\n (change)=\"toggleType(type.value)\">\n <i [class]=\"type.icon\"></i>\n {{ type.label }}\n </label>\n }\n </div>\n </div>\n\n @if (hasActiveFilters()) {\n <div class=\"dropdown-footer\">\n <button mjButton\n variant=\"danger\"\n (click)=\"clearFilters()\">\n <i class=\"fa-solid fa-times\"></i>\n Clear All Filters\n </button>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Active Filter Chips -->\n @if (hasActiveFilters()) {\n <div class=\"active-filters\">\n @for (status of Filters.statuses; track status) {\n <span class=\"status-chip removable\" (click)=\"toggleStatus(status)\">\n Status: {{ status }} <i class=\"fa-solid fa-times\"></i>\n </span>\n }\n @for (type of Filters.types; track type) {\n <span class=\"status-chip removable\" (click)=\"toggleType(type)\">\n Type: {{ type === 'Generated' ? 'AI Generated' : type }} <i class=\"fa-solid fa-times\"></i>\n </span>\n }\n </div>\n }\n </div>\n\n <div class=\"toolbar-right\">\n <!-- Results Count -->\n <div class=\"results-count\">\n <span class=\"count\">{{ FilteredCount }}</span>\n @if (FilteredCount !== TotalCount) {\n <span class=\"of-total\">of {{ TotalCount }}</span>\n }\n <span class=\"label\">actions</span>\n </div>\n\n <!-- Sort Dropdown -->\n <div class=\"dropdown-container\" (clickOutside)=\"ShowSortDropdown = false\">\n <button mjButton\n variant=\"outline\"\n (click)=\"toggleSortDropdown()\">\n <i [class]=\"getSortIcon()\"></i>\n {{ getSortLabel() }}\n <i [class]=\"ShowSortDropdown ? 'fa-solid fa-chevron-up' : 'fa-solid fa-chevron-down'\"></i>\n </button>\n\n @if (ShowSortDropdown) {\n <div class=\"dropdown-menu sort-menu\">\n @for (option of SortOptions; track option.field) {\n <button class=\"sort-option\"\n [class.selected]=\"SortField === option.field\"\n (click)=\"setSortField(option.field)\">\n <i [class]=\"option.icon\"></i>\n {{ option.label }}\n @if (SortField === option.field) {\n <i [class]=\"SortDirection === 'asc' ? 'fa-solid fa-arrow-up' : 'fa-solid fa-arrow-down'\" class=\"direction-icon\"></i>\n }\n </button>\n }\n </div>\n }\n </div>\n\n <!-- View Mode Toggle -->\n <div class=\"view-toggle\">\n <button mjButton\n [variant]=\"ViewMode === 'card' ? 'primary' : 'outline'\"\n title=\"Card View\"\n (click)=\"setViewMode('card')\">\n <i class=\"fa-solid fa-grip\"></i>\n </button>\n <button mjButton\n [variant]=\"ViewMode === 'list' ? 'primary' : 'outline'\"\n title=\"List View\"\n (click)=\"setViewMode('list')\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n <button mjButton\n [variant]=\"ViewMode === 'compact' ? 'primary' : 'outline'\"\n title=\"Compact View\"\n (click)=\"setViewMode('compact')\">\n <i class=\"fa-solid fa-bars\"></i>\n </button>\n </div>\n\n <!-- Refresh Button -->\n <button mjButton\n variant=\"flat\"\n title=\"Refresh\"\n (click)=\"onRefresh()\">\n <i class=\"fa-solid fa-refresh\"></i>\n </button>\n\n <!-- New Action Button -->\n <button mjButton\n variant=\"primary\"\n (click)=\"onNewAction()\">\n <i class=\"fa-solid fa-plus\"></i>\n New Action\n </button>\n </div>\n</div>\n"]}

package/dist/Actions/components/explorer/action-tree-panel.component.js CHANGED Viewed

@@ -4,36 +4,27 @@ import { takeUntil } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "../../services/action-explorer-state.service";
 import * as i2 from "@angular/common";
-import * as i3 from "@progress/kendo-angular-buttons";
-import * as i4 from "@progress/kendo-angular-inputs";
+import * as i3 from "@memberjunction/ng-ui-components";
 const _c0 = a0 => ({ nodes: a0 });
 const _forTrack0 = ($index, $item) => $item.category.ID;
-function ActionTreePanelComponent_Conditional_0_ng_template_15_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "i", 31);
-} }
-function ActionTreePanelComponent_Conditional_0_Conditional_16_ng_template_0_Template(rf, ctx) { if (rf & 1) {
+function ActionTreePanelComponent_Conditional_0_Conditional_17_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 32);
-    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_Conditional_16_ng_template_0_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onSearchChange("")); });
+    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_Conditional_17_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.onSearchChange("")); });
     i0.ɵɵelement(1, "i", 33);
     i0.ɵɵelementEnd();
-} if (rf & 2) {
-    i0.ɵɵproperty("fillMode", "flat")("size", "small");
 } }
-function ActionTreePanelComponent_Conditional_0_Conditional_16_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵtemplate(0, ActionTreePanelComponent_Conditional_0_Conditional_16_ng_template_0_Template, 2, 2, "ng-template", 17);
-} }
-function ActionTreePanelComponent_Conditional_0_Conditional_25_Template(rf, ctx) { if (rf & 1) {
+function ActionTreePanelComponent_Conditional_0_Conditional_26_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 34);
-    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_Conditional_25_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectCategory("uncategorized")); });
-    i0.ɵɵelementStart(1, "span", 20);
+    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_Conditional_26_Template_div_click_0_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r1.selectCategory("uncategorized")); });
+    i0.ɵɵelementStart(1, "span", 21);
     i0.ɵɵelement(2, "i", 35);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(3, "span", 22);
+    i0.ɵɵelementStart(3, "span", 23);
     i0.ɵɵtext(4, "Uncategorized");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "span", 23);
+    i0.ɵɵelementStart(5, "span", 24);
     i0.ɵɵtext(6);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
@@ -42,13 +33,13 @@ function ActionTreePanelComponent_Conditional_0_Conditional_25_Template(rf, ctx)
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r1.getUncategorizedCount());
 } }
-function ActionTreePanelComponent_Conditional_0_ng_container_27_Template(rf, ctx) { if (rf & 1) {
+function ActionTreePanelComponent_Conditional_0_ng_container_28_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+function ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Conditional_2_Template(rf, ctx) { if (rf & 1) {
     const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 46);
-    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const node_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleExpanded(node_r6.category.ID, $event)); });
+    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Conditional_2_Template_button_click_0_listener($event) { i0.ɵɵrestoreView(_r7); const node_r6 = i0.ɵɵnextContext().$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.toggleExpanded(node_r6.category.ID, $event)); });
     i0.ɵɵelement(1, "i");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
@@ -58,29 +49,29 @@ function ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Conditional
     i0.ɵɵadvance();
     i0.ɵɵclassMap(ctx_r1.isExpanded(node_r6.category.ID) ? "fa-solid fa-chevron-down" : "fa-solid fa-chevron-right");
 } }
-function ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
+function ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Conditional_3_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelement(0, "span", 40);
 } }
-function ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Conditional_13_ng_container_1_Template(rf, ctx) { if (rf & 1) {
+function ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Conditional_13_ng_container_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementContainer(0);
 } }
-function ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
+function ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Conditional_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 45);
-    i0.ɵɵtemplate(1, ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Conditional_13_ng_container_1_Template, 1, 0, "ng-container", 26);
+    i0.ɵɵtemplate(1, ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Conditional_13_ng_container_1_Template, 1, 0, "ng-container", 27);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const node_r6 = i0.ɵɵnextContext().$implicit;
     i0.ɵɵnextContext(2);
-    const categoryTreeTemplate_r8 = i0.ɵɵreference(29);
+    const categoryTreeTemplate_r8 = i0.ɵɵreference(30);
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngTemplateOutlet", categoryTreeTemplate_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(2, _c0, node_r6.children));
 } }
-function ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Template(rf, ctx) { if (rf & 1) {
+function ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 37)(1, "div", 38);
-    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Template_div_click_1_listener() { const node_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectCategory(node_r6.category.ID)); });
-    i0.ɵɵconditionalCreate(2, ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Conditional_2_Template, 2, 3, "button", 39)(3, ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Conditional_3_Template, 1, 0, "span", 40);
-    i0.ɵɵelementStart(4, "span", 20);
+    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Template_div_click_1_listener() { const node_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.selectCategory(node_r6.category.ID)); });
+    i0.ɵɵconditionalCreate(2, ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Conditional_2_Template, 2, 3, "button", 39)(3, ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Conditional_3_Template, 1, 0, "span", 40);
+    i0.ɵɵelementStart(4, "span", 21);
     i0.ɵɵelement(5, "i");
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(6, "span", 41);
@@ -90,10 +81,10 @@ function ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Template(rf
     i0.ɵɵtext(9);
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(10, "div", 43)(11, "button", 44);
-    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Template_button_click_11_listener($event) { const node_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onNewCategory(node_r6.category.ID, $event)); });
-    i0.ɵɵelement(12, "i", 29);
+    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Template_button_click_11_listener($event) { const node_r6 = i0.ɵɵrestoreView(_r5).$implicit; const ctx_r1 = i0.ɵɵnextContext(3); return i0.ɵɵresetView(ctx_r1.onNewCategory(node_r6.category.ID, $event)); });
+    i0.ɵɵelement(12, "i", 30);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵconditionalCreate(13, ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Conditional_13_Template, 2, 4, "div", 45);
+    i0.ɵɵconditionalCreate(13, ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Conditional_13_Template, 2, 4, "div", 45);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const node_r6 = ctx.$implicit;
@@ -113,13 +104,11 @@ function ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Template(rf
     i0.ɵɵproperty("title", node_r6.totalActionCount + " total actions");
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate(node_r6.totalActionCount);
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("fillMode", "flat")("size", "small");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(4);
     i0.ɵɵconditional(node_r6.children.length > 0 && ctx_r1.isExpanded(node_r6.category.ID) ? 13 : -1);
 } }
-function ActionTreePanelComponent_Conditional_0_ng_template_28_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵrepeaterCreate(0, ActionTreePanelComponent_Conditional_0_ng_template_28_For_1_Template, 14, 16, "div", 36, _forTrack0);
+function ActionTreePanelComponent_Conditional_0_ng_template_29_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵrepeaterCreate(0, ActionTreePanelComponent_Conditional_0_ng_template_29_For_1_Template, 14, 14, "div", 36, _forTrack0);
 } if (rf & 2) {
     const nodes_r9 = ctx.nodes;
     i0.ɵɵrepeater(nodes_r9);
@@ -142,60 +131,54 @@ function ActionTreePanelComponent_Conditional_0_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_Template_button_click_11_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.toggleCollapse()); });
     i0.ɵɵelement(12, "i", 13);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(13, "div", 14)(14, "kendo-textbox", 15);
-    i0.ɵɵlistener("valueChange", function ActionTreePanelComponent_Conditional_0_Template_kendo_textbox_valueChange_14_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchChange($event)); });
-    i0.ɵɵtemplate(15, ActionTreePanelComponent_Conditional_0_ng_template_15_Template, 1, 0, "ng-template", 16);
-    i0.ɵɵconditionalCreate(16, ActionTreePanelComponent_Conditional_0_Conditional_16_Template, 1, 0, null, 17);
+    i0.ɵɵelementStart(13, "div", 14)(14, "div", 15);
+    i0.ɵɵelement(15, "i", 16);
+    i0.ɵɵelementStart(16, "input", 17);
+    i0.ɵɵlistener("input", function ActionTreePanelComponent_Conditional_0_Template_input_input_16_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onSearchChange($event.target.value)); });
+    i0.ɵɵelementEnd();
+    i0.ɵɵconditionalCreate(17, ActionTreePanelComponent_Conditional_0_Conditional_17_Template, 2, 0, "button", 18);
     i0.ɵɵelementEnd()()();
-    i0.ɵɵelementStart(17, "div", 18)(18, "div", 19);
-    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_Template_div_click_18_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectCategory("all")); });
-    i0.ɵɵelementStart(19, "span", 20);
-    i0.ɵɵelement(20, "i", 21);
+    i0.ɵɵelementStart(18, "div", 19)(19, "div", 20);
+    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_Template_div_click_19_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectCategory("all")); });
+    i0.ɵɵelementStart(20, "span", 21);
+    i0.ɵɵelement(21, "i", 22);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(21, "span", 22);
-    i0.ɵɵtext(22, "All Actions");
+    i0.ɵɵelementStart(22, "span", 23);
+    i0.ɵɵtext(23, "All Actions");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(23, "span", 23);
-    i0.ɵɵtext(24);
+    i0.ɵɵelementStart(24, "span", 24);
+    i0.ɵɵtext(25);
     i0.ɵɵelementEnd()();
-    i0.ɵɵconditionalCreate(25, ActionTreePanelComponent_Conditional_0_Conditional_25_Template, 7, 3, "div", 24);
-    i0.ɵɵelementStart(26, "div", 25);
-    i0.ɵɵtemplate(27, ActionTreePanelComponent_Conditional_0_ng_container_27_Template, 1, 0, "ng-container", 26);
+    i0.ɵɵconditionalCreate(26, ActionTreePanelComponent_Conditional_0_Conditional_26_Template, 7, 3, "div", 25);
+    i0.ɵɵelementStart(27, "div", 26);
+    i0.ɵɵtemplate(28, ActionTreePanelComponent_Conditional_0_ng_container_28_Template, 1, 0, "ng-container", 27);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(28, ActionTreePanelComponent_Conditional_0_ng_template_28_Template, 2, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
+    i0.ɵɵtemplate(29, ActionTreePanelComponent_Conditional_0_ng_template_29_Template, 2, 0, "ng-template", null, 0, i0.ɵɵtemplateRefExtractor);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(30, "div", 27)(31, "button", 28);
-    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_Template_button_click_31_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNewCategory(null, $event)); });
-    i0.ɵɵelement(32, "i", 29);
-    i0.ɵɵtext(33, " New Category ");
+    i0.ɵɵelementStart(31, "div", 28)(32, "button", 29);
+    i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_0_Template_button_click_32_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onNewCategory(null, $event)); });
+    i0.ɵɵelement(33, "i", 30);
+    i0.ɵɵtext(34, " New Category ");
     i0.ɵɵelementEnd()();
-    i0.ɵɵelementStart(34, "div", 30);
-    i0.ɵɵlistener("mousedown", function ActionTreePanelComponent_Conditional_0_Template_div_mousedown_34_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event)); });
+    i0.ɵɵelementStart(35, "div", 31);
+    i0.ɵɵlistener("mousedown", function ActionTreePanelComponent_Conditional_0_Template_div_mousedown_35_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event)); });
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const categoryTreeTemplate_r8 = i0.ɵɵreference(29);
+    const categoryTreeTemplate_r8 = i0.ɵɵreference(30);
     const ctx_r1 = i0.ɵɵnextContext();
     i0.ɵɵstyleProp("width", ctx_r1.TreeWidth, "px");
-    i0.ɵɵadvance(7);
-    i0.ɵɵproperty("fillMode", "flat")("size", "small");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("fillMode", "flat")("size", "small");
-    i0.ɵɵadvance(2);
-    i0.ɵɵproperty("fillMode", "flat")("size", "small");
-    i0.ɵɵadvance(3);
-    i0.ɵɵproperty("placeholder", "Filter categories...")("value", ctx_r1.SearchTerm)("size", "small");
-    i0.ɵɵadvance(2);
-    i0.ɵɵconditional(ctx_r1.SearchTerm ? 16 : -1);
+    i0.ɵɵadvance(16);
+    i0.ɵɵproperty("value", ctx_r1.SearchTerm);
+    i0.ɵɵadvance();
+    i0.ɵɵconditional(ctx_r1.SearchTerm ? 17 : -1);
     i0.ɵɵadvance(2);
     i0.ɵɵclassProp("selected", ctx_r1.isSelected("all"));
     i0.ɵɵadvance(6);
     i0.ɵɵtextInterpolate(ctx_r1.getTotalActionCount());
     i0.ɵɵadvance();
-    i0.ɵɵconditional(ctx_r1.getUncategorizedCount() > 0 ? 25 : -1);
+    i0.ɵɵconditional(ctx_r1.getUncategorizedCount() > 0 ? 26 : -1);
     i0.ɵɵadvance(2);
-    i0.ɵɵproperty("ngTemplateOutlet", categoryTreeTemplate_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(21, _c0, ctx_r1.FilteredTree));
-    i0.ɵɵadvance(4);
-    i0.ɵɵproperty("fillMode", "outline")("themeColor", "primary")("size", "small");
+    i0.ɵɵproperty("ngTemplateOutlet", categoryTreeTemplate_r8)("ngTemplateOutletContext", i0.ɵɵpureFunction1(10, _c0, ctx_r1.FilteredTree));
 } }
 function ActionTreePanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1) {
     const _r10 = i0.ɵɵgetCurrentView();
@@ -205,15 +188,12 @@ function ActionTreePanelComponent_Conditional_1_Template(rf, ctx) { if (rf & 1)
     i0.ɵɵelementEnd();
     i0.ɵɵelementStart(3, "button", 49);
     i0.ɵɵlistener("click", function ActionTreePanelComponent_Conditional_1_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r10); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.selectCategory("all")); });
-    i0.ɵɵelement(4, "i", 21);
+    i0.ɵɵelement(4, "i", 22);
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
     const ctx_r1 = i0.ɵɵnextContext();
-    i0.ɵɵadvance();
-    i0.ɵɵproperty("fillMode", "flat");
-    i0.ɵɵadvance(2);
+    i0.ɵɵadvance(3);
     i0.ɵɵclassProp("selected", ctx_r1.isSelected("all"));
-    i0.ɵɵproperty("fillMode", "flat");
 } }
 export class ActionTreePanelComponent {
     StateService;
@@ -425,15 +405,15 @@ export class ActionTreePanelComponent {
     static ɵfac = function ActionTreePanelComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ActionTreePanelComponent)(i0.ɵɵdirectiveInject(i1.ActionExplorerStateService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     static ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ActionTreePanelComponent, selectors: [["mj-action-tree-panel"]], hostBindings: function ActionTreePanelComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("mousemove", function ActionTreePanelComponent_mousemove_HostBindingHandler($event) { return ctx.onMouseMove($event); }, i0.ɵɵresolveDocument)("mouseup", function ActionTreePanelComponent_mouseup_HostBindingHandler() { return ctx.onMouseUp(); }, i0.ɵɵresolveDocument);
-        } }, inputs: { Categories: "Categories", Actions: "Actions" }, outputs: { CategorySelected: "CategorySelected", NewCategoryClick: "NewCategoryClick", EditCategoryClick: "EditCategoryClick" }, standalone: false, decls: 2, vars: 1, consts: [["categoryTreeTemplate", ""], [1, "tree-panel", 3, "width"], [1, "tree-panel-collapsed"], [1, "tree-panel"], [1, "tree-header"], [1, "header-content"], [1, "fa-solid", "fa-folder-tree"], [1, "header-actions"], ["kendoButton", "", "title", "Expand All", 3, "click", "fillMode", "size"], [1, "fa-solid", "fa-angles-down"], ["kendoButton", "", "title", "Collapse All", 3, "click", "fillMode", "size"], [1, "fa-solid", "fa-angles-up"], ["kendoButton", "", "title", "Collapse Panel", 3, "click", "fillMode", "size"], [1, "fa-solid", "fa-chevron-left"], [1, "tree-search"], [3, "valueChange", "placeholder", "value", "size"], ["kendoTextBoxPrefixTemplate", ""], ["kendoTextBoxSuffixTemplate", ""], [1, "tree-content"], [1, "tree-item", "root-item", 3, "click"], [1, "item-icon"], [1, "fa-solid", "fa-layer-group"], [1, "item-name"], [1, "item-count"], [1, "tree-item", "uncategorized-item", 3, "selected"], [1, "tree-categories"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "tree-footer"], ["kendoButton", "", 1, "new-category-btn", 3, "click", "fillMode", "themeColor", "size"], [1, "fa-solid", "fa-plus"], ["title", "Drag to resize", 1, "resize-handle", 3, "mousedown"], [1, "fa-solid", "fa-search"], ["kendoButton", "", 3, "click", "fillMode", "size"], [1, "fa-solid", "fa-times"], [1, "tree-item", "uncategorized-item", 3, "click"], [1, "fa-solid", "fa-inbox"], [1, "tree-node", 3, "--level"], [1, "tree-node"], [1, "tree-item", 3, "click"], [1, "expand-btn", 3, "title"], [1, "expand-placeholder"], [1, "item-name", 3, "title"], [1, "item-count", 3, "title"], [1, "item-actions"], ["kendoButton", "", "title", "Add Subcategory", 3, "click", "fillMode", "size"], [1, "tree-children"], [1, "expand-btn", 3, "click", "title"], ["kendoButton", "", "title", "Expand Category Panel", 3, "click", "fillMode"], [1, "fa-solid", "fa-chevron-right"], ["kendoButton", "", "title", "All Actions", 3, "click", "fillMode"]], template: function ActionTreePanelComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵconditionalCreate(0, ActionTreePanelComponent_Conditional_0_Template, 35, 23, "div", 1)(1, ActionTreePanelComponent_Conditional_1_Template, 5, 4, "div", 2);
+        } }, inputs: { Categories: "Categories", Actions: "Actions" }, outputs: { CategorySelected: "CategorySelected", NewCategoryClick: "NewCategoryClick", EditCategoryClick: "EditCategoryClick" }, standalone: false, decls: 2, vars: 1, consts: [["categoryTreeTemplate", ""], [1, "tree-panel", 3, "width"], [1, "tree-panel-collapsed"], [1, "tree-panel"], [1, "tree-header"], [1, "header-content"], [1, "fa-solid", "fa-folder-tree"], [1, "header-actions"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Expand All", 3, "click"], [1, "fa-solid", "fa-angles-down"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Collapse All", 3, "click"], [1, "fa-solid", "fa-angles-up"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Collapse Panel", 3, "click"], [1, "fa-solid", "fa-chevron-left"], [1, "tree-search"], [1, "search-input-wrapper"], [1, "fa-solid", "fa-search", "search-icon"], ["type", "text", "placeholder", "Filter categories...", 1, "mj-input", 3, "input", "value"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "search-clear"], [1, "tree-content"], [1, "tree-item", "root-item", 3, "click"], [1, "item-icon"], [1, "fa-solid", "fa-layer-group"], [1, "item-name"], [1, "item-count"], [1, "tree-item", "uncategorized-item", 3, "selected"], [1, "tree-categories"], [4, "ngTemplateOutlet", "ngTemplateOutletContext"], [1, "tree-footer"], ["mjButton", "", "variant", "primary", "size", "sm", 1, "new-category-btn", 3, "click"], [1, "fa-solid", "fa-plus"], ["title", "Drag to resize", 1, "resize-handle", 3, "mousedown"], ["mjButton", "", "variant", "flat", "size", "sm", 1, "search-clear", 3, "click"], [1, "fa-solid", "fa-times"], [1, "tree-item", "uncategorized-item", 3, "click"], [1, "fa-solid", "fa-inbox"], [1, "tree-node", 3, "--level"], [1, "tree-node"], [1, "tree-item", 3, "click"], [1, "expand-btn", 3, "title"], [1, "expand-placeholder"], [1, "item-name", 3, "title"], [1, "item-count", 3, "title"], [1, "item-actions"], ["mjButton", "", "variant", "flat", "size", "sm", "title", "Add Subcategory", 3, "click"], [1, "tree-children"], [1, "expand-btn", 3, "click", "title"], ["mjButton", "", "variant", "flat", "title", "Expand Category Panel", 3, "click"], [1, "fa-solid", "fa-chevron-right"], ["mjButton", "", "variant", "flat", "title", "All Actions", 3, "click"]], template: function ActionTreePanelComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, ActionTreePanelComponent_Conditional_0_Template, 36, 12, "div", 1)(1, ActionTreePanelComponent_Conditional_1_Template, 5, 2, "div", 2);
         } if (rf & 2) {
             i0.ɵɵconditional(!ctx.IsCollapsed ? 0 : 1);
-        } }, dependencies: [i2.NgTemplateOutlet, i3.ButtonComponent, i4.TextBoxComponent, i4.TextBoxSuffixTemplateDirective, i4.TextBoxPrefixTemplateDirective], styles: [".tree-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-default);\n  position: relative;\n  min-width: 180px;\n  max-width: 450px;\n}\n\n.tree-header[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.tree-header[_ngcontent-%COMP%]   .header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.tree-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.tree-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.tree-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 2px;\n}\n\n.tree-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 4px;\n  min-width: 28px;\n  height: 28px;\n}\n\n.tree-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.tree-search[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.tree-search[_ngcontent-%COMP%]   kendo-textbox[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.tree-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.tree-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.tree-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  gap: 8px;\n  position: relative;\n  color: var(--mj-text-primary);\n}\n\n.tree-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  padding-right: 40px; \n\n}\n\n.tree-item[_ngcontent-%COMP%]:hover   .item-count[_ngcontent-%COMP%] {\n  display: none; \n\n}\n\n.tree-item.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.tree-item.selected[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.tree-item.root-item[_ngcontent-%COMP%], \n.tree-item.uncategorized-item[_ngcontent-%COMP%] {\n  padding-left: 16px;\n  margin-bottom: 4px;\n}\n\n.tree-item.root-item[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n.tree-item.uncategorized-item[_ngcontent-%COMP%] {\n  opacity: 0.8;\n}\n\n.tree-item.uncategorized-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.tree-node[_ngcontent-%COMP%] {\n  padding-left: calc(var(--level, 0) * 16px);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.expand-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.expand-placeholder[_ngcontent-%COMP%] {\n  width: 20px;\n  flex-shrink: 0;\n}\n\n.item-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  flex-shrink: 0;\n}\n\n.item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-status-warning);\n}\n\n.item-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.item-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 8px;\n  border-radius: 10px;\n  flex-shrink: 0;\n}\n\n.tree-item.selected[_ngcontent-%COMP%]   .item-count[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.item-actions[_ngcontent-%COMP%] {\n  display: none;\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.tree-item[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%] {\n  display: flex;\n}\n\n.item-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 2px;\n  min-width: 24px;\n  height: 24px;\n}\n\n.item-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.tree-children[_ngcontent-%COMP%] {\n  \n\n}\n\n.tree-footer[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.new-category-btn[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 4px;\n  height: 100%;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 0.15s ease;\n  z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary);\n}\n\n\n\n.tree-panel-collapsed[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 8px 4px;\n  background: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-default);\n  width: 44px;\n  gap: 4px;\n}\n\n.tree-panel-collapsed[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px;\n}\n\n.tree-panel-collapsed[_ngcontent-%COMP%]   button.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 3px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n\n\n@media (max-width: 768px) {\n  .tree-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    z-index: 100;\n    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);\n  }\n}"], changeDetection: 0 });
+        } }, dependencies: [i2.NgTemplateOutlet, i3.MJButtonDirective], styles: [".tree-panel[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-default);\n  position: relative;\n  min-width: 180px;\n  max-width: 450px;\n}\n\n.tree-header[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.tree-header[_ngcontent-%COMP%]   .header-content[_ngcontent-%COMP%] {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.tree-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%] {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.tree-header[_ngcontent-%COMP%]   h3[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.tree-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%] {\n  display: flex;\n  gap: 2px;\n}\n\n.tree-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 4px;\n  min-width: 28px;\n  height: 28px;\n}\n\n.tree-header[_ngcontent-%COMP%]   .header-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n}\n\n.tree-search[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n.tree-search[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.tree-content[_ngcontent-%COMP%] {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.tree-item[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  gap: 8px;\n  position: relative;\n  color: var(--mj-text-primary);\n}\n\n.tree-item[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-hover);\n  padding-right: 40px; \n\n}\n\n.tree-item[_ngcontent-%COMP%]:hover   .item-count[_ngcontent-%COMP%] {\n  display: none; \n\n}\n\n.tree-item.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.tree-item.selected[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-brand-primary);\n}\n\n.tree-item.root-item[_ngcontent-%COMP%], \n.tree-item.uncategorized-item[_ngcontent-%COMP%] {\n  padding-left: 16px;\n  margin-bottom: 4px;\n}\n\n.tree-item.root-item[_ngcontent-%COMP%] {\n  font-weight: 600;\n}\n\n.tree-item.uncategorized-item[_ngcontent-%COMP%] {\n  opacity: 0.8;\n}\n\n.tree-item.uncategorized-item[_ngcontent-%COMP%]   .item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  color: var(--mj-status-warning);\n}\n\n.tree-node[_ngcontent-%COMP%] {\n  padding-left: calc(var(--level, 0) * 16px);\n}\n\n.expand-btn[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.expand-btn[_ngcontent-%COMP%]:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.expand-btn[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.expand-placeholder[_ngcontent-%COMP%] {\n  width: 20px;\n  flex-shrink: 0;\n}\n\n.item-icon[_ngcontent-%COMP%] {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  flex-shrink: 0;\n}\n\n.item-icon[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 14px;\n  color: var(--mj-status-warning);\n}\n\n.item-name[_ngcontent-%COMP%] {\n  flex: 1;\n  font-size: 13px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.item-count[_ngcontent-%COMP%] {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 8px;\n  border-radius: 10px;\n  flex-shrink: 0;\n}\n\n.tree-item.selected[_ngcontent-%COMP%]   .item-count[_ngcontent-%COMP%] {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.item-actions[_ngcontent-%COMP%] {\n  display: none;\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.tree-item[_ngcontent-%COMP%]:hover   .item-actions[_ngcontent-%COMP%] {\n  display: flex;\n}\n\n.item-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 2px;\n  min-width: 24px;\n  height: 24px;\n}\n\n.item-actions[_ngcontent-%COMP%]   button[_ngcontent-%COMP%]   i[_ngcontent-%COMP%] {\n  font-size: 10px;\n}\n\n.tree-children[_ngcontent-%COMP%] {\n  \n\n}\n\n.tree-footer[_ngcontent-%COMP%] {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.new-category-btn[_ngcontent-%COMP%] {\n  width: 100%;\n}\n\n\n\n.resize-handle[_ngcontent-%COMP%] {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 4px;\n  height: 100%;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 0.15s ease;\n  z-index: 10;\n}\n\n.resize-handle[_ngcontent-%COMP%]:hover, \n.resize-handle[_ngcontent-%COMP%]:active {\n  background: var(--mj-brand-primary);\n}\n\n\n\n.tree-panel-collapsed[_ngcontent-%COMP%] {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 8px 4px;\n  background: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-default);\n  width: 44px;\n  gap: 4px;\n}\n\n.tree-panel-collapsed[_ngcontent-%COMP%]   button[_ngcontent-%COMP%] {\n  padding: 8px;\n}\n\n.tree-panel-collapsed[_ngcontent-%COMP%]   button.selected[_ngcontent-%COMP%] {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar {\n  width: 6px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 3px;\n}\n\n.tree-content[_ngcontent-%COMP%]::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n\n\n@media (max-width: 768px) {\n  .tree-panel[_ngcontent-%COMP%] {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    z-index: 100;\n    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);\n  }\n}"], changeDetection: 0 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ActionTreePanelComponent, [{
         type: Component,
-        args: [{ standalone: false, selector: 'mj-action-tree-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!IsCollapsed) {\n  <div class=\"tree-panel\" [style.width.px]=\"TreeWidth\">\n    <div class=\"tree-header\">\n      <div class=\"header-content\">\n        <h3><i class=\"fa-solid fa-folder-tree\"></i> Categories</h3>\n        <div class=\"header-actions\">\n          <button kendoButton\n            [fillMode]=\"'flat'\"\n            [size]=\"'small'\"\n            title=\"Expand All\"\n            (click)=\"expandAll()\">\n            <i class=\"fa-solid fa-angles-down\"></i>\n          </button>\n          <button kendoButton\n            [fillMode]=\"'flat'\"\n            [size]=\"'small'\"\n            title=\"Collapse All\"\n            (click)=\"collapseAll()\">\n            <i class=\"fa-solid fa-angles-up\"></i>\n          </button>\n          <button kendoButton\n            [fillMode]=\"'flat'\"\n            [size]=\"'small'\"\n            title=\"Collapse Panel\"\n            (click)=\"toggleCollapse()\">\n            <i class=\"fa-solid fa-chevron-left\"></i>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"tree-search\">\n        <kendo-textbox\n          [placeholder]=\"'Filter categories...'\"\n          [value]=\"SearchTerm\"\n          (valueChange)=\"onSearchChange($event)\"\n          [size]=\"'small'\">\n          <ng-template kendoTextBoxPrefixTemplate>\n            <i class=\"fa-solid fa-search\"></i>\n          </ng-template>\n          @if (SearchTerm) {\n            <ng-template kendoTextBoxSuffixTemplate>\n              <button kendoButton\n                [fillMode]=\"'flat'\"\n                [size]=\"'small'\"\n                (click)=\"onSearchChange('')\">\n                <i class=\"fa-solid fa-times\"></i>\n              </button>\n            </ng-template>\n          }\n        </kendo-textbox>\n      </div>\n    </div>\n\n    <div class=\"tree-content\">\n      <!-- All Categories -->\n      <div class=\"tree-item root-item\"\n        [class.selected]=\"isSelected('all')\"\n        (click)=\"selectCategory('all')\">\n        <span class=\"item-icon\">\n          <i class=\"fa-solid fa-layer-group\"></i>\n        </span>\n        <span class=\"item-name\">All Actions</span>\n        <span class=\"item-count\">{{ getTotalActionCount() }}</span>\n      </div>\n\n      <!-- Uncategorized -->\n      @if (getUncategorizedCount() > 0) {\n        <div class=\"tree-item uncategorized-item\"\n          [class.selected]=\"isSelected('uncategorized')\"\n          (click)=\"selectCategory('uncategorized')\">\n          <span class=\"item-icon\">\n            <i class=\"fa-solid fa-inbox\"></i>\n          </span>\n          <span class=\"item-name\">Uncategorized</span>\n          <span class=\"item-count\">{{ getUncategorizedCount() }}</span>\n        </div>\n      }\n\n      <!-- Category Tree -->\n      <div class=\"tree-categories\">\n        <ng-container *ngTemplateOutlet=\"categoryTreeTemplate; context: { nodes: FilteredTree }\"></ng-container>\n      </div>\n\n      <ng-template #categoryTreeTemplate let-nodes=\"nodes\">\n        @for (node of nodes; track node.category.ID) {\n          <div class=\"tree-node\" [style.--level]=\"node.level\">\n            <div class=\"tree-item\"\n              [class.selected]=\"isSelected(node.category.ID)\"\n              [class.has-children]=\"node.children.length > 0\"\n              (click)=\"selectCategory(node.category.ID)\">\n\n              @if (node.children.length > 0) {\n                <button class=\"expand-btn\"\n                  (click)=\"toggleExpanded(node.category.ID, $event)\"\n                  [title]=\"isExpanded(node.category.ID) ? 'Collapse' : 'Expand'\">\n                  <i [class]=\"isExpanded(node.category.ID) ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n                </button>\n              } @else {\n                <span class=\"expand-placeholder\"></span>\n              }\n\n              <span class=\"item-icon\">\n                <i [class]=\"isExpanded(node.category.ID) ? 'fa-solid fa-folder-open' : 'fa-solid fa-folder'\"></i>\n              </span>\n              <span class=\"item-name\" [title]=\"node.category.Name\">{{ node.category.Name }}</span>\n              <span class=\"item-count\" [title]=\"node.totalActionCount + ' total actions'\">{{ node.totalActionCount }}</span>\n\n              <div class=\"item-actions\">\n                <button kendoButton\n                  [fillMode]=\"'flat'\"\n                  [size]=\"'small'\"\n                  title=\"Add Subcategory\"\n                  (click)=\"onNewCategory(node.category.ID, $event)\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                </button>\n              </div>\n            </div>\n\n            @if (node.children.length > 0 && isExpanded(node.category.ID)) {\n              <div class=\"tree-children\">\n                <ng-container *ngTemplateOutlet=\"categoryTreeTemplate; context: { nodes: node.children }\"></ng-container>\n              </div>\n            }\n          </div>\n        }\n      </ng-template>\n    </div>\n\n    <div class=\"tree-footer\">\n      <button kendoButton\n        [fillMode]=\"'outline'\"\n        [themeColor]=\"'primary'\"\n        [size]=\"'small'\"\n        class=\"new-category-btn\"\n        (click)=\"onNewCategory(null, $event)\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Category\n      </button>\n    </div>\n\n    <!-- Resize Handle -->\n    <div class=\"resize-handle\"\n      (mousedown)=\"onResizeStart($event)\"\n      title=\"Drag to resize\">\n    </div>\n  </div>\n} @else {\n  <!-- Collapsed State -->\n  <div class=\"tree-panel-collapsed\">\n    <button kendoButton\n      [fillMode]=\"'flat'\"\n      title=\"Expand Category Panel\"\n      (click)=\"toggleCollapse()\">\n      <i class=\"fa-solid fa-chevron-right\"></i>\n    </button>\n    <button kendoButton\n      [fillMode]=\"'flat'\"\n      title=\"All Actions\"\n      [class.selected]=\"isSelected('all')\"\n      (click)=\"selectCategory('all')\">\n      <i class=\"fa-solid fa-layer-group\"></i>\n    </button>\n  </div>\n}\n", styles: [".tree-panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-default);\n  position: relative;\n  min-width: 180px;\n  max-width: 450px;\n}\n\n.tree-header {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.tree-header .header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.tree-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.tree-header h3 i {\n  color: var(--mj-brand-primary);\n}\n\n.tree-header .header-actions {\n  display: flex;\n  gap: 2px;\n}\n\n.tree-header .header-actions button {\n  padding: 4px;\n  min-width: 28px;\n  height: 28px;\n}\n\n.tree-header .header-actions button i {\n  font-size: 12px;\n}\n\n.tree-search {\n  width: 100%;\n}\n\n.tree-search kendo-textbox {\n  width: 100%;\n}\n\n.tree-search i {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.tree-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.tree-item {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  gap: 8px;\n  position: relative;\n  color: var(--mj-text-primary);\n}\n\n.tree-item:hover {\n  background: var(--mj-bg-surface-hover);\n  padding-right: 40px; /* Make room for the action button */\n}\n\n.tree-item:hover .item-count {\n  display: none; /* Hide count when action button is visible */\n}\n\n.tree-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.tree-item.selected .item-icon i {\n  color: var(--mj-brand-primary);\n}\n\n.tree-item.root-item,\n.tree-item.uncategorized-item {\n  padding-left: 16px;\n  margin-bottom: 4px;\n}\n\n.tree-item.root-item {\n  font-weight: 600;\n}\n\n.tree-item.uncategorized-item {\n  opacity: 0.8;\n}\n\n.tree-item.uncategorized-item .item-icon i {\n  color: var(--mj-status-warning);\n}\n\n.tree-node {\n  padding-left: calc(var(--level, 0) * 16px);\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.expand-btn:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.expand-btn i {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.expand-placeholder {\n  width: 20px;\n  flex-shrink: 0;\n}\n\n.item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  flex-shrink: 0;\n}\n\n.item-icon i {\n  font-size: 14px;\n  color: var(--mj-status-warning);\n}\n\n.item-name {\n  flex: 1;\n  font-size: 13px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.item-count {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 8px;\n  border-radius: 10px;\n  flex-shrink: 0;\n}\n\n.tree-item.selected .item-count {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.item-actions {\n  display: none;\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.tree-item:hover .item-actions {\n  display: flex;\n}\n\n.item-actions button {\n  padding: 2px;\n  min-width: 24px;\n  height: 24px;\n}\n\n.item-actions button i {\n  font-size: 10px;\n}\n\n.tree-children {\n  /* Children are indented via --level CSS variable */\n}\n\n.tree-footer {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.new-category-btn {\n  width: 100%;\n}\n\n/* Resize Handle */\n.resize-handle {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 4px;\n  height: 100%;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 0.15s ease;\n  z-index: 10;\n}\n\n.resize-handle:hover,\n.resize-handle:active {\n  background: var(--mj-brand-primary);\n}\n\n/* Collapsed State */\n.tree-panel-collapsed {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 8px 4px;\n  background: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-default);\n  width: 44px;\n  gap: 4px;\n}\n\n.tree-panel-collapsed button {\n  padding: 8px;\n}\n\n.tree-panel-collapsed button.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* Scrollbar Styling */\n.tree-content::-webkit-scrollbar {\n  width: 6px;\n}\n\n.tree-content::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.tree-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 3px;\n}\n\n.tree-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n  .tree-panel {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    z-index: 100;\n    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);\n  }\n}\n"] }]
+        args: [{ standalone: false, selector: 'mj-action-tree-panel', changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (!IsCollapsed) {\n  <div class=\"tree-panel\" [style.width.px]=\"TreeWidth\">\n    <div class=\"tree-header\">\n      <div class=\"header-content\">\n        <h3><i class=\"fa-solid fa-folder-tree\"></i> Categories</h3>\n        <div class=\"header-actions\">\n          <button mjButton\n            variant=\"flat\"\n            size=\"sm\"\n            title=\"Expand All\"\n            (click)=\"expandAll()\">\n            <i class=\"fa-solid fa-angles-down\"></i>\n          </button>\n          <button mjButton\n            variant=\"flat\"\n            size=\"sm\"\n            title=\"Collapse All\"\n            (click)=\"collapseAll()\">\n            <i class=\"fa-solid fa-angles-up\"></i>\n          </button>\n          <button mjButton\n            variant=\"flat\"\n            size=\"sm\"\n            title=\"Collapse Panel\"\n            (click)=\"toggleCollapse()\">\n            <i class=\"fa-solid fa-chevron-left\"></i>\n          </button>\n        </div>\n      </div>\n\n      <div class=\"tree-search\">\n        <div class=\"search-input-wrapper\">\n          <i class=\"fa-solid fa-search search-icon\"></i>\n          <input type=\"text\" class=\"mj-input\"\n            placeholder=\"Filter categories...\"\n            [value]=\"SearchTerm\"\n            (input)=\"onSearchChange($any($event.target).value)\" />\n          @if (SearchTerm) {\n            <button mjButton variant=\"flat\" size=\"sm\" class=\"search-clear\"\n              (click)=\"onSearchChange('')\">\n              <i class=\"fa-solid fa-times\"></i>\n            </button>\n          }\n        </div>\n      </div>\n    </div>\n\n    <div class=\"tree-content\">\n      <!-- All Categories -->\n      <div class=\"tree-item root-item\"\n        [class.selected]=\"isSelected('all')\"\n        (click)=\"selectCategory('all')\">\n        <span class=\"item-icon\">\n          <i class=\"fa-solid fa-layer-group\"></i>\n        </span>\n        <span class=\"item-name\">All Actions</span>\n        <span class=\"item-count\">{{ getTotalActionCount() }}</span>\n      </div>\n\n      <!-- Uncategorized -->\n      @if (getUncategorizedCount() > 0) {\n        <div class=\"tree-item uncategorized-item\"\n          [class.selected]=\"isSelected('uncategorized')\"\n          (click)=\"selectCategory('uncategorized')\">\n          <span class=\"item-icon\">\n            <i class=\"fa-solid fa-inbox\"></i>\n          </span>\n          <span class=\"item-name\">Uncategorized</span>\n          <span class=\"item-count\">{{ getUncategorizedCount() }}</span>\n        </div>\n      }\n\n      <!-- Category Tree -->\n      <div class=\"tree-categories\">\n        <ng-container *ngTemplateOutlet=\"categoryTreeTemplate; context: { nodes: FilteredTree }\"></ng-container>\n      </div>\n\n      <ng-template #categoryTreeTemplate let-nodes=\"nodes\">\n        @for (node of nodes; track node.category.ID) {\n          <div class=\"tree-node\" [style.--level]=\"node.level\">\n            <div class=\"tree-item\"\n              [class.selected]=\"isSelected(node.category.ID)\"\n              [class.has-children]=\"node.children.length > 0\"\n              (click)=\"selectCategory(node.category.ID)\">\n\n              @if (node.children.length > 0) {\n                <button class=\"expand-btn\"\n                  (click)=\"toggleExpanded(node.category.ID, $event)\"\n                  [title]=\"isExpanded(node.category.ID) ? 'Collapse' : 'Expand'\">\n                  <i [class]=\"isExpanded(node.category.ID) ? 'fa-solid fa-chevron-down' : 'fa-solid fa-chevron-right'\"></i>\n                </button>\n              } @else {\n                <span class=\"expand-placeholder\"></span>\n              }\n\n              <span class=\"item-icon\">\n                <i [class]=\"isExpanded(node.category.ID) ? 'fa-solid fa-folder-open' : 'fa-solid fa-folder'\"></i>\n              </span>\n              <span class=\"item-name\" [title]=\"node.category.Name\">{{ node.category.Name }}</span>\n              <span class=\"item-count\" [title]=\"node.totalActionCount + ' total actions'\">{{ node.totalActionCount }}</span>\n\n              <div class=\"item-actions\">\n                <button mjButton\n                  variant=\"flat\"\n                  size=\"sm\"\n                  title=\"Add Subcategory\"\n                  (click)=\"onNewCategory(node.category.ID, $event)\">\n                  <i class=\"fa-solid fa-plus\"></i>\n                </button>\n              </div>\n            </div>\n\n            @if (node.children.length > 0 && isExpanded(node.category.ID)) {\n              <div class=\"tree-children\">\n                <ng-container *ngTemplateOutlet=\"categoryTreeTemplate; context: { nodes: node.children }\"></ng-container>\n              </div>\n            }\n          </div>\n        }\n      </ng-template>\n    </div>\n\n    <div class=\"tree-footer\">\n      <button mjButton\n        variant=\"primary\"\n        size=\"sm\"\n        class=\"new-category-btn\"\n        (click)=\"onNewCategory(null, $event)\">\n        <i class=\"fa-solid fa-plus\"></i>\n        New Category\n      </button>\n    </div>\n\n    <!-- Resize Handle -->\n    <div class=\"resize-handle\"\n      (mousedown)=\"onResizeStart($event)\"\n      title=\"Drag to resize\">\n    </div>\n  </div>\n} @else {\n  <!-- Collapsed State -->\n  <div class=\"tree-panel-collapsed\">\n    <button mjButton\n      variant=\"flat\"\n      title=\"Expand Category Panel\"\n      (click)=\"toggleCollapse()\">\n      <i class=\"fa-solid fa-chevron-right\"></i>\n    </button>\n    <button mjButton\n      variant=\"flat\"\n      title=\"All Actions\"\n      [class.selected]=\"isSelected('all')\"\n      (click)=\"selectCategory('all')\">\n      <i class=\"fa-solid fa-layer-group\"></i>\n    </button>\n  </div>\n}\n", styles: [".tree-panel {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  background: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-default);\n  position: relative;\n  min-width: 180px;\n  max-width: 450px;\n}\n\n.tree-header {\n  padding: 12px 16px;\n  border-bottom: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.tree-header .header-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 12px;\n}\n\n.tree-header h3 {\n  margin: 0;\n  font-size: 14px;\n  font-weight: 600;\n  color: var(--mj-text-primary);\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n\n.tree-header h3 i {\n  color: var(--mj-brand-primary);\n}\n\n.tree-header .header-actions {\n  display: flex;\n  gap: 2px;\n}\n\n.tree-header .header-actions button {\n  padding: 4px;\n  min-width: 28px;\n  height: 28px;\n}\n\n.tree-header .header-actions button i {\n  font-size: 12px;\n}\n\n.tree-search {\n  width: 100%;\n}\n\n.tree-search i {\n  font-size: 12px;\n  color: var(--mj-text-muted);\n}\n\n.tree-content {\n  flex: 1;\n  overflow-y: auto;\n  padding: 8px 0;\n}\n\n.tree-item {\n  display: flex;\n  align-items: center;\n  padding: 8px 12px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  gap: 8px;\n  position: relative;\n  color: var(--mj-text-primary);\n}\n\n.tree-item:hover {\n  background: var(--mj-bg-surface-hover);\n  padding-right: 40px; /* Make room for the action button */\n}\n\n.tree-item:hover .item-count {\n  display: none; /* Hide count when action button is visible */\n}\n\n.tree-item.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n.tree-item.selected .item-icon i {\n  color: var(--mj-brand-primary);\n}\n\n.tree-item.root-item,\n.tree-item.uncategorized-item {\n  padding-left: 16px;\n  margin-bottom: 4px;\n}\n\n.tree-item.root-item {\n  font-weight: 600;\n}\n\n.tree-item.uncategorized-item {\n  opacity: 0.8;\n}\n\n.tree-item.uncategorized-item .item-icon i {\n  color: var(--mj-status-warning);\n}\n\n.tree-node {\n  padding-left: calc(var(--level, 0) * 16px);\n}\n\n.expand-btn {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  cursor: pointer;\n  border-radius: 4px;\n  transition: all 0.15s ease;\n  flex-shrink: 0;\n}\n\n.expand-btn:hover {\n  background: var(--mj-bg-surface-active);\n}\n\n.expand-btn i {\n  font-size: 10px;\n  color: var(--mj-text-muted);\n}\n\n.expand-placeholder {\n  width: 20px;\n  flex-shrink: 0;\n}\n\n.item-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 20px;\n  flex-shrink: 0;\n}\n\n.item-icon i {\n  font-size: 14px;\n  color: var(--mj-status-warning);\n}\n\n.item-name {\n  flex: 1;\n  font-size: 13px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.item-count {\n  font-size: 11px;\n  color: var(--mj-text-muted);\n  background: var(--mj-bg-surface-sunken);\n  padding: 2px 8px;\n  border-radius: 10px;\n  flex-shrink: 0;\n}\n\n.tree-item.selected .item-count {\n  background: var(--mj-brand-primary);\n  color: var(--mj-text-inverse);\n}\n\n.item-actions {\n  display: none;\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n}\n\n.tree-item:hover .item-actions {\n  display: flex;\n}\n\n.item-actions button {\n  padding: 2px;\n  min-width: 24px;\n  height: 24px;\n}\n\n.item-actions button i {\n  font-size: 10px;\n}\n\n.tree-children {\n  /* Children are indented via --level CSS variable */\n}\n\n.tree-footer {\n  padding: 12px 16px;\n  border-top: 1px solid var(--mj-border-default);\n  flex-shrink: 0;\n}\n\n.new-category-btn {\n  width: 100%;\n}\n\n/* Resize Handle */\n.resize-handle {\n  position: absolute;\n  top: 0;\n  right: 0;\n  width: 4px;\n  height: 100%;\n  cursor: ew-resize;\n  background: transparent;\n  transition: background 0.15s ease;\n  z-index: 10;\n}\n\n.resize-handle:hover,\n.resize-handle:active {\n  background: var(--mj-brand-primary);\n}\n\n/* Collapsed State */\n.tree-panel-collapsed {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 8px 4px;\n  background: var(--mj-bg-surface-card);\n  border-right: 1px solid var(--mj-border-default);\n  width: 44px;\n  gap: 4px;\n}\n\n.tree-panel-collapsed button {\n  padding: 8px;\n}\n\n.tree-panel-collapsed button.selected {\n  background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n  color: var(--mj-brand-primary);\n}\n\n/* Scrollbar Styling */\n.tree-content::-webkit-scrollbar {\n  width: 6px;\n}\n\n.tree-content::-webkit-scrollbar-track {\n  background: transparent;\n}\n\n.tree-content::-webkit-scrollbar-thumb {\n  background: var(--mj-border-default);\n  border-radius: 3px;\n}\n\n.tree-content::-webkit-scrollbar-thumb:hover {\n  background: var(--mj-text-muted);\n}\n\n/* Mobile Responsiveness */\n@media (max-width: 768px) {\n  .tree-panel {\n    position: absolute;\n    left: 0;\n    top: 0;\n    bottom: 0;\n    z-index: 100;\n    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);\n  }\n}\n"] }]
     }], () => [{ type: i1.ActionExplorerStateService }, { type: i0.ChangeDetectorRef }], { Categories: [{
             type: Input
         }], Actions: [{