@memberjunction/ng-dashboard-viewer 5.11.0 → 5.13.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.
- package/dist/lib/breadcrumb/dashboard-breadcrumb.component.js +2 -2
- package/dist/lib/config-dialogs/confirm-dialog.component.js +2 -2
- package/dist/lib/config-panels/artifact-config-panel.component.js +2 -2
- package/dist/lib/config-panels/query-config-panel.component.js +2 -2
- package/dist/lib/config-panels/view-config-panel.component.js +2 -2
- package/dist/lib/config-panels/weburl-config-panel.component.js +2 -2
- package/dist/lib/dashboard-browser/dashboard-browser.component.js +5 -5
- package/dist/lib/dashboard-browser/dashboard-browser.component.js.map +1 -1
- package/dist/lib/dashboard-viewer/dashboard-viewer.component.js +54 -54
- package/dist/lib/dashboard-viewer/dashboard-viewer.component.js.map +1 -1
- package/dist/lib/dialogs/add-panel-dialog/add-panel-dialog.component.js +2 -2
- package/dist/lib/dialogs/edit-part-dialog/edit-part-dialog.component.js +2 -2
- package/dist/lib/parts/artifact-part.component.js +2 -2
- package/dist/lib/parts/artifact-part.component.js.map +1 -1
- package/dist/lib/parts/query-part.component.js +2 -2
- package/dist/lib/parts/query-part.component.js.map +1 -1
- package/dist/lib/parts/view-part.component.js +2 -2
- package/dist/lib/parts/view-part.component.js.map +1 -1
- package/dist/lib/parts/weburl-part.component.js +2 -2
- package/dist/lib/parts/weburl-part.component.js.map +1 -1
- package/dist/lib/services/golden-layout-wrapper.service.js +1 -1
- package/dist/lib/services/golden-layout-wrapper.service.js.map +1 -1
- package/package.json +9 -9
|
@@ -1347,12 +1347,12 @@ export class DashboardBrowserComponent {
|
|
|
1347
1347
|
align-items: center;
|
|
1348
1348
|
gap: 8px;
|
|
1349
1349
|
padding: 8px 12px;
|
|
1350
|
-
background:
|
|
1351
|
-
color:
|
|
1350
|
+
background: var(--mj-brand-primary);
|
|
1351
|
+
color: var(--mj-text-inverse);
|
|
1352
1352
|
border-radius: 6px;
|
|
1353
1353
|
font-size: 13px;
|
|
1354
1354
|
font-weight: 500;
|
|
1355
|
-
box-shadow: 0 4px 12px
|
|
1355
|
+
box-shadow: 0 4px 12px color-mix(in srgb, var(--mj-text-primary) 30%, transparent);
|
|
1356
1356
|
white-space: nowrap;
|
|
1357
1357
|
`;
|
|
1358
1358
|
const icon = document.createElement('i');
|
|
@@ -1795,11 +1795,11 @@ export class DashboardBrowserComponent {
|
|
|
1795
1795
|
i0.ɵɵconditional(ctx.ShowCreateCategoryDialog ? 27 : -1);
|
|
1796
1796
|
i0.ɵɵadvance();
|
|
1797
1797
|
i0.ɵɵconditional(ctx.ShowDeleteCategoryConfirm ? 28 : -1);
|
|
1798
|
-
} }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.DashboardBreadcrumbComponent, i4.ConfirmDialogComponent], styles: ["\n\n\n.dashboard-browser[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: #f5f7fa;\n position: relative;\n}\n\n\n\n.browser-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 24px 0 0;\n background: #fff;\n border-bottom: 1px solid #e0e0e0;\n gap: 16px;\n}\n\n.toolbar-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.dashboard-count[_ngcontent-%COMP%] {\n color: #666;\n font-size: 13px;\n padding: 4px 10px;\n background: #f0f0f0;\n border-radius: 12px;\n}\n\n\n\n.browser-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n background: #fff;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.header-left[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n}\n\n.header-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: #f0f0f0;\n border-radius: 6px;\n padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: #666;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n color: #333;\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n background: #fff;\n color: #5c6bc0;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.select-mode-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n background: #f0f0f0;\n border: none;\n border-radius: 6px;\n font-size: 13px;\n color: #666;\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.select-mode-btn[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.select-mode-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.selection-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 12px;\n background: #e3f2fd;\n border-radius: 6px;\n}\n\n.selection-toolbar[_ngcontent-%COMP%] .action-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.selection-toolbar[_ngcontent-%COMP%] .action-btn[_ngcontent-%COMP%]:disabled:hover {\n background: transparent;\n color: #666;\n}\n\n.selected-count[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #1976d2;\n font-weight: 500;\n min-width: 70px;\n}\n\n\n\n.btn-primary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: #5c6bc0;\n color: #fff;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n background: #4a5ab9;\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: #f0f0f0;\n color: #333;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n}\n\n.action-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: #666;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.action-btn.danger[_ngcontent-%COMP%]:hover {\n background: #ffebee;\n color: #d32f2f;\n}\n\n\n\n.browser-filters[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 24px;\n background: #fff;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.search-box[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n flex: 1;\n max-width: 400px;\n background: #f5f5f5;\n border-radius: 6px;\n padding: 0 12px;\n}\n\n.search-box[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #999;\n font-size: 14px;\n}\n\n.search-box[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n flex: 1;\n border: none;\n background: transparent;\n padding: 10px 12px;\n font-size: 14px;\n outline: none;\n}\n\n.search-box[_ngcontent-%COMP%] .clear-btn[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: #999;\n cursor: pointer;\n border-radius: 50%;\n}\n\n.search-box[_ngcontent-%COMP%] .clear-btn[_ngcontent-%COMP%]:hover {\n background: #e0e0e0;\n color: #666;\n}\n\n.category-filter[_ngcontent-%COMP%] select[_ngcontent-%COMP%] {\n padding: 10px 32px 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: #fff;\n cursor: pointer;\n outline: none;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 10px center;\n}\n\n.clear-filters-btn[_ngcontent-%COMP%], \n.select-all-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border: none;\n background: transparent;\n color: #666;\n font-size: 13px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.clear-filters-btn[_ngcontent-%COMP%]:hover, \n.select-all-btn[_ngcontent-%COMP%]:hover {\n background: #f0f0f0;\n color: #333;\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.9);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n}\n\n\n\n.dashboard-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n padding: 24px;\n overflow-y: auto;\n}\n\n.dashboard-card[_ngcontent-%COMP%] {\n background: #fff;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n cursor: pointer;\n transition: all 0.2s;\n border: 2px solid transparent;\n position: relative;\n}\n\n.dashboard-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n transform: translateY(-2px);\n}\n\n.dashboard-card.selected[_ngcontent-%COMP%] {\n border-color: #5c6bc0;\n background: #f8f9ff;\n}\n\n.dashboard-card.dragging[_ngcontent-%COMP%] {\n opacity: 0.5;\n}\n\n.card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 16px;\n border-bottom: 1px solid #f0f0f0;\n}\n\n.card-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #5c6bc0, #7986cb);\n border-radius: 8px;\n color: #fff;\n font-size: 16px;\n}\n\n\n\n.card-select-area[_ngcontent-%COMP%] {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 2;\n padding: 10px;\n background: #e3f2fd;\n border-radius: 8px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s;\n}\n\n.card-select-area[_ngcontent-%COMP%]:hover {\n background: #bbdefb;\n}\n\n.dashboard-card.selected[_ngcontent-%COMP%] .card-select-area[_ngcontent-%COMP%] {\n background: #5c6bc0;\n}\n\n.card-select-area[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n accent-color: #5c6bc0;\n}\n\n.card-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n margin-left: auto;\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.dashboard-card[_ngcontent-%COMP%]:hover .card-actions[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.card-content[_ngcontent-%COMP%] {\n padding: 16px;\n}\n\n.card-title[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 16px;\n font-weight: 600;\n color: #333;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n\n\n.shared-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #e3f2fd;\n color: #1976d2;\n font-size: 10px;\n flex-shrink: 0;\n}\n\n.card-description[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 13px;\n color: #666;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: #999;\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n\n\n.dashboard-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n background: #fff;\n margin: 16px 24px;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.list-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: #f5f7fa;\n border-bottom: 1px solid #e0e0e0;\n font-size: 12px;\n font-weight: 600;\n color: #666;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.list-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n border-bottom: 1px solid #f0f0f0;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.list-row[_ngcontent-%COMP%]:hover {\n background: #f8f9ff;\n}\n\n.list-row.selected[_ngcontent-%COMP%] {\n background: #e8eaf6;\n}\n\n.list-row.dragging[_ngcontent-%COMP%] {\n opacity: 0.5;\n}\n\n.list-col[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n}\n\n.checkbox-col[_ngcontent-%COMP%] {\n width: 40px;\n}\n\n.checkbox-col[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n\n.name-col[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n gap: 10px;\n display: flex;\n align-items: center;\n}\n\n.name-col[_ngcontent-%COMP%] .shared-badge[_ngcontent-%COMP%] {\n margin-left: 4px;\n}\n\n.row-icon[_ngcontent-%COMP%] {\n color: #5c6bc0;\n font-size: 14px;\n}\n\n.dashboard-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: #333;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.category-col[_ngcontent-%COMP%], \n.type-col[_ngcontent-%COMP%] {\n width: 120px;\n color: #666;\n font-size: 13px;\n}\n\n.date-col[_ngcontent-%COMP%] {\n width: 120px;\n color: #999;\n font-size: 13px;\n}\n\n.actions-col[_ngcontent-%COMP%] {\n width: 80px;\n justify-content: flex-end;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.list-row[_ngcontent-%COMP%]:hover .actions-col[_ngcontent-%COMP%] {\n opacity: 1;\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 flex: 1;\n padding: 48px 24px;\n text-align: center;\n min-height: 400px;\n}\n\n.empty-state-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 480px;\n}\n\n\n\n.empty-icon[_ngcontent-%COMP%] {\n width: 100px;\n height: 100px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #f5f7fa, #e8eaf6);\n border-radius: 50%;\n margin-bottom: 24px;\n box-shadow: 0 4px 20px rgba(92, 107, 192, 0.1);\n}\n\n.empty-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 40px;\n color: #9fa8da;\n}\n\n.empty-icon.folder-empty[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #fff3e0, #ffe0b2);\n}\n\n.empty-icon.folder-empty[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #ffb74d;\n}\n\n.empty-icon.search-empty[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n}\n\n.empty-icon.search-empty[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #64b5f6;\n}\n\n\n\n.empty-illustration[_ngcontent-%COMP%] {\n position: relative;\n width: 160px;\n height: 160px;\n margin-bottom: 32px;\n}\n\n.illustration-bg[_ngcontent-%COMP%] {\n width: 120px;\n height: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #5c6bc0, #7986cb);\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 8px 32px rgba(92, 107, 192, 0.3);\n}\n\n.illustration-bg[_ngcontent-%COMP%] .main-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n color: #fff;\n}\n\n.illustration-accent[_ngcontent-%COMP%] {\n position: absolute;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.illustration-accent[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.illustration-accent.accent-1[_ngcontent-%COMP%] {\n top: 0;\n right: 10px;\n}\n\n.illustration-accent.accent-1[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #26a69a;\n}\n\n.illustration-accent.accent-2[_ngcontent-%COMP%] {\n bottom: 10px;\n left: 0;\n}\n\n.illustration-accent.accent-2[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #ff7043;\n}\n\n.illustration-accent.accent-3[_ngcontent-%COMP%] {\n bottom: 0;\n right: 0;\n}\n\n.illustration-accent.accent-3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #ab47bc;\n}\n\n\n\n.empty-title[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 24px;\n font-weight: 600;\n color: #333;\n}\n\n.empty-state-content[_ngcontent-%COMP%] h3.empty-title[_ngcontent-%COMP%] {\n font-size: 20px;\n}\n\n.empty-description[_ngcontent-%COMP%] {\n margin: 0 0 28px 0;\n color: #666;\n font-size: 15px;\n line-height: 1.6;\n max-width: 380px;\n}\n\n.empty-description[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: #333;\n}\n\n\n\n.empty-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n margin-bottom: 32px;\n}\n\n.btn-primary.large[_ngcontent-%COMP%] {\n padding: 14px 28px;\n font-size: 15px;\n border-radius: 8px;\n}\n\n\n\n.empty-features[_ngcontent-%COMP%] {\n display: flex;\n gap: 32px;\n padding-top: 24px;\n border-top: 1px solid #e0e0e0;\n}\n\n.feature-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n color: #666;\n font-size: 13px;\n}\n\n.feature-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #f5f7fa;\n border-radius: 8px;\n color: #5c6bc0;\n font-size: 16px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%]:not(.empty-title) {\n margin: 0 0 8px 0;\n font-size: 18px;\n color: #333;\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%]:not(.empty-description) {\n margin: 0 0 24px 0;\n color: #666;\n font-size: 14px;\n max-width: 300px;\n}\n\n\n\n.category-drop-zones[_ngcontent-%COMP%] {\n position: fixed;\n bottom: 24px;\n left: 50%;\n transform: translateX(-50%);\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n padding: 16px;\n z-index: 1000;\n}\n\n.drop-zone-header[_ngcontent-%COMP%] {\n font-size: 12px;\n color: #666;\n margin-bottom: 12px;\n text-align: center;\n}\n\n.drop-zones[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.drop-zone[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: #f5f5f5;\n border: 2px dashed #ccc;\n border-radius: 6px;\n font-size: 13px;\n color: #666;\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.drop-zone[_ngcontent-%COMP%]:hover, \n.drop-zone.active[_ngcontent-%COMP%] {\n background: #e3f2fd;\n border-color: #5c6bc0;\n color: #333;\n}\n\n\n\n.move-dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.move-dialog[_ngcontent-%COMP%] {\n background: #fff;\n border-radius: 12px;\n width: 400px;\n max-width: 90%;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n color: #333;\n}\n\n.close-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: #666;\n cursor: pointer;\n border-radius: 4px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: #f0f0f0;\n}\n\n.dialog-content[_ngcontent-%COMP%] {\n padding: 20px;\n overflow-y: auto;\n}\n\n.dialog-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n color: #666;\n font-size: 14px;\n}\n\n.category-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.category-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.category-option[_ngcontent-%COMP%]:hover {\n background: #f5f5f5;\n}\n\n.category-option[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n}\n\n.dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n}\n\n\n\n.new-dropdown[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.dropdown-caret[_ngcontent-%COMP%] {\n font-size: 10px;\n margin-left: 4px;\n}\n\n.dropdown-menu[_ngcontent-%COMP%] {\n position: absolute;\n top: 100%;\n right: 0;\n margin-top: 4px;\n min-width: 160px;\n background: #fff;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n overflow: hidden;\n}\n\n.dropdown-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: transparent;\n color: #333;\n font-size: 14px;\n cursor: pointer;\n text-align: left;\n transition: background 0.15s;\n}\n\n.dropdown-item[_ngcontent-%COMP%]:hover {\n background: #f5f5f5;\n}\n\n.dropdown-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n width: 16px;\n text-align: center;\n}\n\n.dropdown-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n z-index: 1000;\n}\n\n\n\n.create-category-dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1002;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] {\n background: #fff;\n border-radius: 12px;\n width: 400px;\n max-width: 90%;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n color: #333;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #5c6bc0;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-content[_ngcontent-%COMP%] {\n padding: 20px;\n}\n\n.form-field[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #555;\n}\n\n.form-field[_ngcontent-%COMP%] input[_ngcontent-%COMP%], \n.form-field[_ngcontent-%COMP%] textarea[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #ddd;\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s, box-shadow 0.15s;\n box-sizing: border-box;\n}\n\n.form-field[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus, \n.form-field[_ngcontent-%COMP%] textarea[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.1);\n}\n\n.form-field[_ngcontent-%COMP%] textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 80px;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] .btn-primary[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] .btn-secondary[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n margin-left: auto;\n}\n\n\n\n.breadcrumb-nav[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 24px;\n background: #fff;\n border-bottom: 1px solid #e0e0e0;\n flex-wrap: wrap;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n background: transparent;\n color: #5c6bc0;\n font-size: 13px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.15s;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%]:hover {\n background: #f0f0f0;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n color: #333;\n font-weight: 500;\n cursor: default;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%]:hover {\n background: transparent;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.breadcrumb-item.root[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n color: #999;\n font-size: 10px;\n}\n\n\n\n.category-card[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.category-card[_ngcontent-%COMP%]:hover {\n border-color: #5c6bc0;\n}\n\n.folder-icon[_ngcontent-%COMP%] {\n background: linear-gradient(135deg, #ffa726, #ffb74d) !important;\n}\n\n.category-row[_ngcontent-%COMP%] {\n background: #fafafa;\n}\n\n.category-row[_ngcontent-%COMP%]:hover {\n background: #fff3e0 !important;\n}\n\n.category-row[_ngcontent-%COMP%] .folder-icon[_ngcontent-%COMP%] {\n color: #ffa726;\n}\n\n\n\n.dashboard-card.category-card.drop-target[_ngcontent-%COMP%], \n.list-row.category-row.drop-target[_ngcontent-%COMP%] {\n background: #e3f2fd;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.3);\n}\n\n\n\nmark[_ngcontent-%COMP%] {\n background: #fff59d;\n color: inherit;\n padding: 0 2px;\n border-radius: 2px;\n}\n\n\n\n.delete-category-dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1002;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] {\n background: #fff;\n border-radius: 12px;\n width: 480px;\n max-width: 90%;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-header.danger[_ngcontent-%COMP%] {\n background: #ffebee;\n border-bottom-color: #ffcdd2;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-header.danger[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n color: #c62828;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-header.danger[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #d32f2f;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-content[_ngcontent-%COMP%] {\n padding: 20px;\n}\n\n.warning-message[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.warning-message[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n color: #333;\n font-size: 14px;\n line-height: 1.5;\n}\n\n.warning-message[_ngcontent-%COMP%] .content-warning[_ngcontent-%COMP%] {\n color: #d32f2f;\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 16px;\n}\n\n.warning-message[_ngcontent-%COMP%] .content-list[_ngcontent-%COMP%] {\n margin: 8px 0 0 0;\n padding-left: 24px;\n color: #666;\n}\n\n.warning-message[_ngcontent-%COMP%] .content-list[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n margin: 6px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.warning-message[_ngcontent-%COMP%] .content-list[_ngcontent-%COMP%] li[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: #999;\n width: 16px;\n text-align: center;\n}\n\n.confirmation-checkbox[_ngcontent-%COMP%] {\n background: #fff3e0;\n border: 1px solid #ffcc80;\n border-radius: 8px;\n padding: 16px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n}\n\n.checkbox-label[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n margin-top: 2px;\n cursor: pointer;\n accent-color: #d32f2f;\n}\n\n.checkbox-text[_ngcontent-%COMP%] {\n font-size: 13px;\n color: #666;\n line-height: 1.5;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: #d32f2f;\n color: #fff;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover {\n background: #c62828;\n}\n\n.btn-danger[_ngcontent-%COMP%]:disabled {\n background: #e0e0e0;\n color: #999;\n cursor: not-allowed;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] .btn-secondary[_ngcontent-%COMP%] {\n margin-left: auto;\n}"], changeDetection: 0 });
|
|
1798
|
+
} }, dependencies: [i1.DefaultValueAccessor, i1.CheckboxControlValueAccessor, i1.NgControlStatus, i1.NgModel, i2.LoadingComponent, i3.DashboardBreadcrumbComponent, i4.ConfirmDialogComponent], styles: ["\n\n\n.dashboard-browser[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-page);\n position: relative;\n}\n\n\n\n.browser-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 24px 0 0;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n gap: 16px;\n}\n\n.toolbar-actions[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.dashboard-count[_ngcontent-%COMP%] {\n color: var(--mj-text-secondary);\n font-size: 13px;\n padding: 4px 10px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 12px;\n}\n\n\n\n.browser-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.header-left[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.header-left[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.header-left[_ngcontent-%COMP%] h2[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.header-right[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n\n\n.view-toggle[_ngcontent-%COMP%] {\n display: flex;\n background: var(--mj-bg-surface-sunken);\n border-radius: 6px;\n padding: 2px;\n}\n\n.toggle-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.toggle-btn[_ngcontent-%COMP%]:hover {\n color: var(--mj-text-primary);\n}\n\n.toggle-btn.active[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n\n\n.select-mode-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n background: var(--mj-bg-surface-sunken);\n border: none;\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.select-mode-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.select-mode-btn[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n\n\n.selection-toolbar[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-radius: 6px;\n}\n\n.selection-toolbar[_ngcontent-%COMP%] .action-btn[_ngcontent-%COMP%]:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.selection-toolbar[_ngcontent-%COMP%] .action-btn[_ngcontent-%COMP%]:disabled:hover {\n background: transparent;\n color: var(--mj-text-secondary);\n}\n\n.selected-count[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-brand-primary);\n font-weight: 500;\n min-width: 70px;\n}\n\n\n\n.btn-primary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-primary[_ngcontent-%COMP%]:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-secondary[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n}\n\n.action-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.action-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.action-btn.danger[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n\n\n.browser-filters[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 24px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-box[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n flex: 1;\n max-width: 400px;\n background: var(--mj-bg-surface-card);\n border-radius: 6px;\n padding: 0 12px;\n}\n\n.search-box[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.search-box[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n flex: 1;\n border: none;\n background: transparent;\n padding: 10px 12px;\n font-size: 14px;\n outline: none;\n}\n\n.search-box[_ngcontent-%COMP%] .clear-btn[_ngcontent-%COMP%] {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n border-radius: 50%;\n}\n\n.search-box[_ngcontent-%COMP%] .clear-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n}\n\n.category-filter[_ngcontent-%COMP%] select[_ngcontent-%COMP%] {\n padding: 10px 32px 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 14px;\n background: var(--mj-bg-surface);\n cursor: pointer;\n outline: none;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 10px center;\n}\n\n.clear-filters-btn[_ngcontent-%COMP%], \n.select-all-btn[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 13px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.clear-filters-btn[_ngcontent-%COMP%]:hover, \n.select-all-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n\n\n.loading-overlay[_ngcontent-%COMP%] {\n position: absolute;\n inset: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n}\n\n\n\n.dashboard-grid[_ngcontent-%COMP%] {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n padding: 24px;\n overflow-y: auto;\n}\n\n.dashboard-card[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n cursor: pointer;\n transition: all 0.2s;\n border: 2px solid transparent;\n position: relative;\n}\n\n.dashboard-card[_ngcontent-%COMP%]:hover {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n transform: translateY(-2px);\n}\n\n.dashboard-card.selected[_ngcontent-%COMP%] {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.dashboard-card.dragging[_ngcontent-%COMP%] {\n opacity: 0.5;\n}\n\n.card-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 16px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.card-icon[_ngcontent-%COMP%] {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-brand-primary);\n border-radius: 8px;\n color: var(--mj-text-inverse);\n font-size: 16px;\n}\n\n\n\n.card-select-area[_ngcontent-%COMP%] {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 2;\n padding: 10px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-radius: 8px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s;\n}\n\n.card-select-area[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.dashboard-card.selected[_ngcontent-%COMP%] .card-select-area[_ngcontent-%COMP%] {\n background: var(--mj-brand-primary);\n}\n\n.card-select-area[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n cursor: pointer;\n accent-color: var(--mj-brand-primary);\n}\n\n.card-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 4px;\n margin-left: auto;\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.dashboard-card[_ngcontent-%COMP%]:hover .card-actions[_ngcontent-%COMP%] {\n opacity: 1;\n}\n\n.card-content[_ngcontent-%COMP%] {\n padding: 16px;\n}\n\n.card-title[_ngcontent-%COMP%] {\n margin: 0 0 8px 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n\n\n.shared-badge[_ngcontent-%COMP%] {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n font-size: 10px;\n flex-shrink: 0;\n}\n\n.card-description[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.card-meta[_ngcontent-%COMP%] {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n}\n\n.meta-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n\n\n.dashboard-list[_ngcontent-%COMP%] {\n flex: 1;\n overflow-y: auto;\n background: var(--mj-bg-surface);\n margin: 16px 24px;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.list-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.list-row[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.list-row[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.list-row.selected[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.list-row.dragging[_ngcontent-%COMP%] {\n opacity: 0.5;\n}\n\n.list-col[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n}\n\n.checkbox-col[_ngcontent-%COMP%] {\n width: 40px;\n}\n\n.checkbox-col[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n\n.name-col[_ngcontent-%COMP%] {\n flex: 1;\n min-width: 200px;\n gap: 10px;\n display: flex;\n align-items: center;\n}\n\n.name-col[_ngcontent-%COMP%] .shared-badge[_ngcontent-%COMP%] {\n margin-left: 4px;\n}\n\n.row-icon[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.dashboard-name[_ngcontent-%COMP%] {\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.category-col[_ngcontent-%COMP%], \n.type-col[_ngcontent-%COMP%] {\n width: 120px;\n color: var(--mj-text-secondary);\n font-size: 13px;\n}\n\n.date-col[_ngcontent-%COMP%] {\n width: 120px;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n.actions-col[_ngcontent-%COMP%] {\n width: 80px;\n justify-content: flex-end;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.list-row[_ngcontent-%COMP%]:hover .actions-col[_ngcontent-%COMP%] {\n opacity: 1;\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 flex: 1;\n padding: 48px 24px;\n text-align: center;\n min-height: 400px;\n}\n\n.empty-state-content[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 480px;\n}\n\n\n\n.empty-icon[_ngcontent-%COMP%] {\n width: 100px;\n height: 100px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-radius: 50%;\n margin-bottom: 24px;\n box-shadow: 0 4px 20px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.empty-icon[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 40px;\n color: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n}\n\n.empty-icon.folder-empty[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.empty-icon.folder-empty[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n.empty-icon.search-empty[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.empty-icon.search-empty[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.empty-illustration[_ngcontent-%COMP%] {\n position: relative;\n width: 160px;\n height: 160px;\n margin-bottom: 32px;\n}\n\n.illustration-bg[_ngcontent-%COMP%] {\n width: 120px;\n height: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-brand-primary);\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 8px 32px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.illustration-bg[_ngcontent-%COMP%] .main-icon[_ngcontent-%COMP%] {\n font-size: 48px;\n color: var(--mj-text-inverse);\n}\n\n.illustration-accent[_ngcontent-%COMP%] {\n position: absolute;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-surface);\n border-radius: 50%;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.illustration-accent[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 16px;\n}\n\n.illustration-accent.accent-1[_ngcontent-%COMP%] {\n top: 0;\n right: 10px;\n}\n\n.illustration-accent.accent-1[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-success);\n}\n\n.illustration-accent.accent-2[_ngcontent-%COMP%] {\n bottom: 10px;\n left: 0;\n}\n\n.illustration-accent.accent-2[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.illustration-accent.accent-3[_ngcontent-%COMP%] {\n bottom: 0;\n right: 0;\n}\n\n.illustration-accent.accent-3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n\n\n.empty-title[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n font-size: 24px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.empty-state-content[_ngcontent-%COMP%] h3.empty-title[_ngcontent-%COMP%] {\n font-size: 20px;\n}\n\n.empty-description[_ngcontent-%COMP%] {\n margin: 0 0 28px 0;\n color: var(--mj-text-secondary);\n font-size: 15px;\n line-height: 1.6;\n max-width: 380px;\n}\n\n.empty-description[_ngcontent-%COMP%] strong[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n}\n\n\n\n.empty-actions[_ngcontent-%COMP%] {\n display: flex;\n gap: 12px;\n margin-bottom: 32px;\n}\n\n.btn-primary.large[_ngcontent-%COMP%] {\n padding: 14px 28px;\n font-size: 15px;\n border-radius: 8px;\n}\n\n\n\n.empty-features[_ngcontent-%COMP%] {\n display: flex;\n gap: 32px;\n padding-top: 24px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.feature-item[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-secondary);\n font-size: 13px;\n}\n\n.feature-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-page);\n border-radius: 8px;\n color: var(--mj-brand-primary);\n font-size: 16px;\n}\n\n\n\n.empty-state[_ngcontent-%COMP%] h3[_ngcontent-%COMP%]:not(.empty-title) {\n margin: 0 0 8px 0;\n font-size: 18px;\n color: var(--mj-text-primary);\n}\n\n.empty-state[_ngcontent-%COMP%] p[_ngcontent-%COMP%]:not(.empty-description) {\n margin: 0 0 24px 0;\n color: var(--mj-text-secondary);\n font-size: 14px;\n max-width: 300px;\n}\n\n\n\n.category-drop-zones[_ngcontent-%COMP%] {\n position: fixed;\n bottom: 24px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n padding: 16px;\n z-index: 1000;\n}\n\n.drop-zone-header[_ngcontent-%COMP%] {\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-bottom: 12px;\n text-align: center;\n}\n\n.drop-zones[_ngcontent-%COMP%] {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.drop-zone[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: var(--mj-bg-surface-card);\n border: 2px dashed var(--mj-border-strong);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.drop-zone[_ngcontent-%COMP%]:hover, \n.drop-zone.active[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-primary);\n}\n\n\n\n.move-dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.move-dialog[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n width: 400px;\n max-width: 90%;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n color: var(--mj-text-primary);\n}\n\n.close-btn[_ngcontent-%COMP%] {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n border-radius: 4px;\n}\n\n.close-btn[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.dialog-content[_ngcontent-%COMP%] {\n padding: 20px;\n overflow-y: auto;\n}\n\n.dialog-content[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 16px 0;\n color: var(--mj-text-secondary);\n font-size: 14px;\n}\n\n.category-list[_ngcontent-%COMP%] {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.category-option[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.category-option[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.category-option[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n justify-content: flex-end;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n\n\n.new-dropdown[_ngcontent-%COMP%] {\n position: relative;\n}\n\n.dropdown-caret[_ngcontent-%COMP%] {\n font-size: 10px;\n margin-left: 4px;\n}\n\n.dropdown-menu[_ngcontent-%COMP%] {\n position: absolute;\n top: 100%;\n right: 0;\n margin-top: 4px;\n min-width: 160px;\n background: var(--mj-bg-surface);\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n overflow: hidden;\n}\n\n.dropdown-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: transparent;\n color: var(--mj-text-primary);\n font-size: 14px;\n cursor: pointer;\n text-align: left;\n transition: background 0.15s;\n}\n\n.dropdown-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.dropdown-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n width: 16px;\n text-align: center;\n}\n\n.dropdown-backdrop[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n z-index: 1000;\n}\n\n\n\n.create-category-dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1002;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n width: 400px;\n max-width: 90%;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-brand-primary);\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-content[_ngcontent-%COMP%] {\n padding: 20px;\n}\n\n.form-field[_ngcontent-%COMP%] {\n margin-bottom: 16px;\n}\n\n.form-field[_ngcontent-%COMP%]:last-child {\n margin-bottom: 0;\n}\n\n.form-field[_ngcontent-%COMP%] label[_ngcontent-%COMP%] {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.form-field[_ngcontent-%COMP%] input[_ngcontent-%COMP%], \n.form-field[_ngcontent-%COMP%] textarea[_ngcontent-%COMP%] {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s, box-shadow 0.15s;\n box-sizing: border-box;\n}\n\n.form-field[_ngcontent-%COMP%] input[_ngcontent-%COMP%]:focus, \n.form-field[_ngcontent-%COMP%] textarea[_ngcontent-%COMP%]:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-field[_ngcontent-%COMP%] textarea[_ngcontent-%COMP%] {\n resize: vertical;\n min-height: 80px;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] .btn-primary[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n}\n\n.create-category-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] .btn-secondary[_ngcontent-%COMP%] {\n flex: 0 0 auto;\n margin-left: auto;\n}\n\n\n\n.breadcrumb-nav[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 24px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-wrap: wrap;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n background: transparent;\n color: var(--mj-brand-primary);\n font-size: 13px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.15s;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%]:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%] {\n color: var(--mj-text-primary);\n font-weight: 500;\n cursor: default;\n}\n\n.breadcrumb-item.current[_ngcontent-%COMP%]:hover {\n background: transparent;\n}\n\n.breadcrumb-item[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 12px;\n}\n\n.breadcrumb-item.root[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n font-size: 14px;\n}\n\n.breadcrumb-separator[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n font-size: 10px;\n}\n\n\n\n.category-card[_ngcontent-%COMP%] {\n cursor: pointer;\n}\n\n.category-card[_ngcontent-%COMP%]:hover {\n border-color: var(--mj-brand-primary);\n}\n\n.folder-icon[_ngcontent-%COMP%] {\n background: var(--mj-status-warning) !important;\n}\n\n.category-row[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface-card);\n}\n\n.category-row[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface)) !important;\n}\n\n.category-row[_ngcontent-%COMP%] .folder-icon[_ngcontent-%COMP%] {\n color: var(--mj-status-warning);\n}\n\n\n\n.dashboard-card.category-card.drop-target[_ngcontent-%COMP%], \n.list-row.category-row.drop-target[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n\n\nmark[_ngcontent-%COMP%] {\n background: var(--mj-status-warning);\n color: inherit;\n padding: 0 2px;\n border-radius: 2px;\n}\n\n\n\n.delete-category-dialog-overlay[_ngcontent-%COMP%] {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1002;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n width: 480px;\n max-width: 90%;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-header[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-header.danger[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-bottom-color: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-header.danger[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-header.danger[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-header[_ngcontent-%COMP%] h3[_ngcontent-%COMP%] {\n margin: 0;\n font-size: 18px;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-content[_ngcontent-%COMP%] {\n padding: 20px;\n}\n\n.warning-message[_ngcontent-%COMP%] {\n margin-bottom: 20px;\n}\n\n.warning-message[_ngcontent-%COMP%] p[_ngcontent-%COMP%] {\n margin: 0 0 12px 0;\n color: var(--mj-text-primary);\n font-size: 14px;\n line-height: 1.5;\n}\n\n.warning-message[_ngcontent-%COMP%] .content-warning[_ngcontent-%COMP%] {\n color: var(--mj-status-error);\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 16px;\n}\n\n.warning-message[_ngcontent-%COMP%] .content-list[_ngcontent-%COMP%] {\n margin: 8px 0 0 0;\n padding-left: 24px;\n color: var(--mj-text-secondary);\n}\n\n.warning-message[_ngcontent-%COMP%] .content-list[_ngcontent-%COMP%] li[_ngcontent-%COMP%] {\n margin: 6px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.warning-message[_ngcontent-%COMP%] .content-list[_ngcontent-%COMP%] li[_ngcontent-%COMP%] i[_ngcontent-%COMP%] {\n color: var(--mj-text-disabled);\n width: 16px;\n text-align: center;\n}\n\n.confirmation-checkbox[_ngcontent-%COMP%] {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n border-radius: 8px;\n padding: 16px;\n}\n\n.checkbox-label[_ngcontent-%COMP%] {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n}\n\n.checkbox-label[_ngcontent-%COMP%] input[_ngcontent-%COMP%] {\n width: 18px;\n height: 18px;\n margin-top: 2px;\n cursor: pointer;\n accent-color: var(--mj-status-error);\n}\n\n.checkbox-text[_ngcontent-%COMP%] {\n font-size: 13px;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] {\n display: flex;\n gap: 10px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.btn-danger[_ngcontent-%COMP%] {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-danger[_ngcontent-%COMP%]:hover {\n background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n.btn-danger[_ngcontent-%COMP%]:disabled {\n background: var(--mj-border-default);\n color: var(--mj-text-disabled);\n cursor: not-allowed;\n}\n\n.delete-category-dialog[_ngcontent-%COMP%] .dialog-footer[_ngcontent-%COMP%] .btn-secondary[_ngcontent-%COMP%] {\n margin-left: auto;\n}"], changeDetection: 0 });
|
|
1799
1799
|
}
|
|
1800
1800
|
(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DashboardBrowserComponent, [{
|
|
1801
1801
|
type: Component,
|
|
1802
|
-
args: [{ standalone: false, selector: 'mj-dashboard-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Dashboard Browser Component -->\n<div class=\"dashboard-browser\" [class.loading]=\"IsLoading\">\n <!-- Toolbar Row: Breadcrumb + Actions -->\n <div class=\"browser-toolbar\">\n <!-- Breadcrumb Navigation -->\n <mj-dashboard-breadcrumb\n [Categories]=\"Categories\"\n [CurrentCategoryId]=\"SelectedCategoryId\"\n [RootIcon]=\"IconClass\"\n [RootLabel]=\"Title\"\n [AllowDragDrop]=\"AllowDragDrop && (DraggingId !== null || IsSelectionMode)\"\n Size=\"large\"\n (Navigate)=\"NavigateToCategory($event.CategoryId)\"\n (DashboardDrop)=\"OnBreadcrumbDrop($event)\">\n </mj-dashboard-breadcrumb>\n\n <!-- Right-side Actions -->\n <div class=\"toolbar-actions\">\n <!-- Dashboard count -->\n <span class=\"dashboard-count\">{{ FilteredDashboards.length }} dashboards</span>\n\n <!-- View Toggle -->\n <div class=\"view-toggle\">\n <button\n class=\"toggle-btn\"\n [class.active]=\"ViewMode === 'cards'\"\n (click)=\"SetViewMode('cards')\"\n title=\"Card View\">\n <i class=\"fa-solid fa-grip\"></i>\n </button>\n <button\n class=\"toggle-btn\"\n [class.active]=\"ViewMode === 'list'\"\n (click)=\"SetViewMode('list')\"\n title=\"List View\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n\n <!-- Selection Mode Toggle & Bulk Actions -->\n @if (AllowMultiSelect) {\n <!-- Enter Selection Mode Button (when not in selection mode) -->\n @if (!IsSelectionMode && FilteredDashboards.length > 0) {\n <button\n class=\"select-mode-btn\"\n (click)=\"EnterSelectionMode()\"\n title=\"Select multiple dashboards\">\n <i class=\"fa-solid fa-check-double\"></i>\n Select\n </button>\n }\n <!-- Selection Mode Toolbar (when in selection mode) -->\n @if (IsSelectionMode) {\n <div class=\"selection-toolbar\">\n <span class=\"selected-count\">{{ SelectedCount }} selected</span>\n <button class=\"action-btn\" (click)=\"SelectAll()\" title=\"Select all\">\n <i class=\"fa-solid fa-check-double\"></i>\n </button>\n <button class=\"action-btn\" (click)=\"OnMoveSelected()\" title=\"Move to folder\" [disabled]=\"SelectedCount === 0\">\n <i class=\"fa-solid fa-folder-open\"></i>\n </button>\n <button class=\"action-btn danger\" (click)=\"OnDeleteSelected()\" title=\"Delete selected\" [disabled]=\"!CanDeleteAnySelected\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n <button class=\"action-btn\" (click)=\"ExitSelectionMode()\" title=\"Exit selection mode\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n }\n\n <!-- New Dropdown Button -->\n @if (ShowCreateButton) {\n <div class=\"new-dropdown\">\n <button\n class=\"btn-primary\"\n (click)=\"ToggleNewMenu(); $event.stopPropagation()\">\n <i class=\"fa-solid fa-plus\"></i>\n New\n <i class=\"fa-solid fa-caret-down dropdown-caret\"></i>\n </button>\n @if (ShowNewMenu) {\n <div class=\"dropdown-menu\">\n <button class=\"dropdown-item\" (click)=\"OnCreateDashboard()\">\n <i class=\"fa-solid fa-chart-line\"></i>\n Dashboard\n </button>\n <button class=\"dropdown-item\" (click)=\"OpenCreateCategoryDialog()\">\n <i class=\"fa-solid fa-folder-plus\"></i>\n Category\n </button>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Click-away overlay for dropdown -->\n @if (ShowNewMenu) {\n <div class=\"dropdown-backdrop\" (click)=\"CloseNewMenu()\"></div>\n }\n\n <!-- Filters -->\n <div class=\"browser-filters\">\n <div class=\"search-box\">\n <i class=\"fa-solid fa-search\"></i>\n <input\n type=\"text\"\n [(ngModel)]=\"SearchText\"\n (input)=\"OnSearchChange()\"\n placeholder=\"Search dashboards...\">\n @if (SearchText) {\n <button\n class=\"clear-btn\"\n (click)=\"ClearSearch()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n </div>\n\n @if (SearchText) {\n <button\n class=\"clear-filters-btn\"\n (click)=\"ClearSearch()\">\n <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n Clear Search\n </button>\n }\n </div>\n\n <!-- Loading Overlay -->\n @if (IsLoading) {\n <div class=\"loading-overlay\">\n <mj-loading text=\"Loading dashboards...\"></mj-loading>\n </div>\n }\n\n <!-- Card View -->\n @if (ViewMode === 'cards' && (FilteredChildCategories.length > 0 || FilteredDashboards.length > 0)) {\n <div class=\"dashboard-grid\">\n <!-- Category Folders -->\n @for (category of FilteredChildCategories; track TrackByCategory($index, category)) {\n <div\n class=\"dashboard-card category-card\"\n [class.drop-target]=\"DragOverChildCategoryId === category.ID\"\n (click)=\"NavigateToCategory(category.ID)\"\n (dblclick)=\"$event.stopPropagation()\"\n (dragover)=\"OnDragOverChildCategory(category.ID, $event)\"\n (dragleave)=\"OnDragLeaveChildCategory()\"\n (drop)=\"OnDropOnChildCategory(category.ID, $event)\">\n <div class=\"card-header\">\n <div class=\"card-icon folder-icon\">\n <i class=\"fa-solid fa-folder\"></i>\n </div>\n <div class=\"card-actions\">\n <button\n class=\"action-btn danger\"\n title=\"Delete category\"\n (click)=\"OnDeleteCategory(category, $event)\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n </div>\n </div>\n <div class=\"card-content\">\n <h3 class=\"card-title\" [innerHTML]=\"HighlightMatch(category.Name)\"></h3>\n @if (category.Description) {\n <p class=\"card-description\" [innerHTML]=\"HighlightMatch(category.Description)\">\n </p>\n }\n <div class=\"card-meta\">\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-folder-tree\"></i>\n Category\n </span>\n </div>\n </div>\n </div>\n }\n <!-- Dashboard Cards -->\n @for (dashboard of FilteredDashboards; track TrackByDashboard($index, dashboard)) {\n <div\n class=\"dashboard-card\"\n [class.selected]=\"IsSelected(dashboard.ID)\"\n [class.dragging]=\"DraggingId === dashboard.ID\"\n [draggable]=\"AllowDragDrop\"\n (click)=\"OnDashboardClick(dashboard, $event)\"\n (dblclick)=\"OnDashboardDoubleClick(dashboard, $event)\"\n (dragstart)=\"OnDragStart(dashboard, $event)\"\n (dragend)=\"OnDragEnd()\">\n <!-- Selection checkbox in top-right corner -->\n @if (IsSelectionMode) {\n <div\n class=\"card-select-area\"\n (click)=\"ToggleSelection(dashboard.ID); $event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [checked]=\"IsSelected(dashboard.ID)\"\n (change)=\"$event.stopPropagation()\">\n </div>\n }\n <div class=\"card-header\">\n <div class=\"card-icon\">\n <i class=\"fa-solid fa-chart-line\"></i>\n </div>\n <div class=\"card-actions\">\n @if (CanEdit(dashboard.ID)) {\n <button\n class=\"action-btn\"\n title=\"Edit\"\n (click)=\"OnEditDashboard(dashboard, $event)\">\n <i class=\"fa-solid fa-edit\"></i>\n </button>\n }\n @if (CanDelete(dashboard.ID)) {\n <button\n class=\"action-btn danger\"\n title=\"Delete\"\n (click)=\"OnDeleteDashboard(dashboard, $event)\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n </div>\n </div>\n <div class=\"card-content\">\n <h3 class=\"card-title\">\n <span [innerHTML]=\"HighlightMatch(dashboard.Name)\"></span>\n @if (IsShared(dashboard.ID)) {\n <span class=\"shared-badge\" title=\"Shared with you\">\n <i class=\"fa-solid fa-share-nodes\"></i>\n </span>\n }\n </h3>\n @if (dashboard.Description) {\n <p class=\"card-description\" [innerHTML]=\"HighlightMatch(dashboard.Description)\">\n </p>\n }\n <div class=\"card-meta\">\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-clock\"></i>\n {{ FormatDate(dashboard.__mj_UpdatedAt) }}\n </span>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- List View -->\n @if (ViewMode === 'list' && (FilteredChildCategories.length > 0 || FilteredDashboards.length > 0)) {\n <div class=\"dashboard-list\">\n <div class=\"list-header\">\n @if (IsSelectionMode) {\n <div class=\"list-col checkbox-col\">\n <input\n type=\"checkbox\"\n [checked]=\"SelectedCount === FilteredDashboards.length && FilteredDashboards.length > 0\"\n [indeterminate]=\"SelectedCount > 0 && SelectedCount < FilteredDashboards.length\"\n (change)=\"SelectedCount === FilteredDashboards.length ? ClearSelection() : SelectAll()\">\n </div>\n }\n <div class=\"list-col name-col\">Name</div>\n <div class=\"list-col type-col\">Type</div>\n <div class=\"list-col date-col\">Modified</div>\n <div class=\"list-col actions-col\">Actions</div>\n </div>\n <!-- Category Rows -->\n @for (category of FilteredChildCategories; track TrackByCategory($index, category)) {\n <div\n class=\"list-row category-row\"\n [class.drop-target]=\"DragOverChildCategoryId === category.ID\"\n (click)=\"NavigateToCategory(category.ID)\"\n (dragover)=\"OnDragOverChildCategory(category.ID, $event)\"\n (dragleave)=\"OnDragLeaveChildCategory()\"\n (drop)=\"OnDropOnChildCategory(category.ID, $event)\">\n @if (IsSelectionMode) {\n <div class=\"list-col checkbox-col\">\n <!-- Empty placeholder for alignment -->\n </div>\n }\n <div class=\"list-col name-col\">\n <i class=\"fa-solid fa-folder row-icon folder-icon\"></i>\n <span class=\"dashboard-name\" [innerHTML]=\"HighlightMatch(category.Name)\"></span>\n </div>\n <div class=\"list-col type-col\">\n Category\n </div>\n <div class=\"list-col date-col\">\n <!-- No date for categories -->\n </div>\n <div class=\"list-col actions-col\" (click)=\"$event.stopPropagation()\">\n <button\n class=\"action-btn danger\"\n title=\"Delete category\"\n (click)=\"OnDeleteCategory(category, $event)\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n </div>\n </div>\n }\n <!-- Dashboard Rows -->\n @for (dashboard of FilteredDashboards; track TrackByDashboard($index, dashboard)) {\n <div\n class=\"list-row\"\n [class.selected]=\"IsSelected(dashboard.ID)\"\n [class.dragging]=\"DraggingId === dashboard.ID\"\n [draggable]=\"AllowDragDrop\"\n (click)=\"OnDashboardClick(dashboard, $event)\"\n (dblclick)=\"OnDashboardDoubleClick(dashboard, $event)\"\n (dragstart)=\"OnDragStart(dashboard, $event)\"\n (dragend)=\"OnDragEnd()\">\n @if (IsSelectionMode) {\n <div class=\"list-col checkbox-col\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [checked]=\"IsSelected(dashboard.ID)\"\n (change)=\"ToggleSelection(dashboard.ID)\">\n </div>\n }\n <div class=\"list-col name-col\">\n <i class=\"fa-solid fa-chart-line row-icon\"></i>\n <span class=\"dashboard-name\" [innerHTML]=\"HighlightMatch(dashboard.Name)\"></span>\n @if (IsShared(dashboard.ID)) {\n <span class=\"shared-badge\" title=\"Shared with you\">\n <i class=\"fa-solid fa-share-nodes\"></i>\n </span>\n }\n </div>\n <div class=\"list-col type-col\">\n Dashboard\n </div>\n <div class=\"list-col date-col\">\n {{ FormatDate(dashboard.__mj_UpdatedAt) }}\n </div>\n <div class=\"list-col actions-col\" (click)=\"$event.stopPropagation()\">\n @if (CanEdit(dashboard.ID)) {\n <button\n class=\"action-btn\"\n title=\"Edit\"\n (click)=\"OnEditDashboard(dashboard, $event)\">\n <i class=\"fa-solid fa-edit\"></i>\n </button>\n }\n @if (CanDelete(dashboard.ID)) {\n <button\n class=\"action-btn danger\"\n title=\"Delete\"\n (click)=\"OnDeleteDashboard(dashboard, $event)\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Empty State -->\n @if (FilteredDashboards.length === 0 && FilteredChildCategories.length === 0 && !IsLoading) {\n <div class=\"empty-state\">\n <div class=\"empty-state-content\">\n <!-- First-time user experience (no dashboards at all) -->\n @if (IsAtRoot && Dashboards.length === 0) {\n <div class=\"empty-illustration\">\n <div class=\"illustration-bg\">\n <i class=\"fa-solid fa-gauge-high main-icon\"></i>\n </div>\n <div class=\"illustration-accent accent-1\"><i class=\"fa-solid fa-chart-line\"></i></div>\n <div class=\"illustration-accent accent-2\"><i class=\"fa-solid fa-chart-bar\"></i></div>\n <div class=\"illustration-accent accent-3\"><i class=\"fa-solid fa-chart-pie\"></i></div>\n </div>\n <h2 class=\"empty-title\">Welcome to Dashboards</h2>\n <p class=\"empty-description\">\n Create custom dashboards to visualize your data, track key metrics, and monitor important information all in one place.\n </p>\n @if (ShowCreateButton) {\n <div class=\"empty-actions\">\n <button class=\"btn-primary large\" (click)=\"OnCreateDashboard()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create Your First Dashboard\n </button>\n </div>\n }\n <div class=\"empty-features\">\n <div class=\"feature-item\">\n <i class=\"fa-solid fa-table-cells\"></i>\n <span>Customizable layouts</span>\n </div>\n <div class=\"feature-item\">\n <i class=\"fa-solid fa-database\"></i>\n <span>Connect to your data</span>\n </div>\n <div class=\"feature-item\">\n <i class=\"fa-solid fa-share-nodes\"></i>\n <span>Share with your team</span>\n </div>\n </div>\n }\n <!-- Folder is empty -->\n @if (!IsAtRoot && !SearchText) {\n <div class=\"empty-icon folder-empty\">\n <i class=\"fa-solid fa-folder-open\"></i>\n </div>\n <h3 class=\"empty-title\">This folder is empty</h3>\n <p class=\"empty-description\">\n Add dashboards or create sub-folders to organize your content.\n </p>\n @if (ShowCreateButton) {\n <div class=\"empty-actions\">\n <button class=\"btn-primary\" (click)=\"OnCreateDashboard()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create Dashboard\n </button>\n </div>\n }\n }\n <!-- Root has dashboards but none uncategorized -->\n @if (IsAtRoot && Dashboards.length > 0 && !SearchText) {\n <div class=\"empty-icon\">\n <i class=\"fa-solid fa-folder-tree\"></i>\n </div>\n <h3 class=\"empty-title\">No uncategorized dashboards</h3>\n <p class=\"empty-description\">\n All your dashboards are organized into folders. Browse the folders above or create a new dashboard here.\n </p>\n @if (ShowCreateButton) {\n <div class=\"empty-actions\">\n <button class=\"btn-primary\" (click)=\"OnCreateDashboard()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create Dashboard\n </button>\n </div>\n }\n }\n <!-- Search returned no results -->\n @if (SearchText) {\n <div class=\"empty-icon search-empty\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n </div>\n <h3 class=\"empty-title\">No results found</h3>\n <p class=\"empty-description\">\n No dashboards or folders match \"<strong>{{ SearchText }}</strong>\". Try a different search term.\n </p>\n <div class=\"empty-actions\">\n <button class=\"btn-secondary\" (click)=\"ClearSearch()\">\n <i class=\"fa-solid fa-times\"></i>\n Clear Search\n </button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Category Drop Zones (for drag and drop) -->\n @if (DraggingId && Categories.length > 0) {\n <div class=\"category-drop-zones\">\n <div class=\"drop-zone-header\">Drop to move to category:</div>\n <div class=\"drop-zones\">\n <div\n class=\"drop-zone\"\n [class.active]=\"DropTargetCategoryId === null\"\n (dragover)=\"OnDragOverCategory(null, $event)\"\n (dragleave)=\"OnDragLeaveCategory()\"\n (drop)=\"OnDropOnCategory(null, $event)\">\n <i class=\"fa-solid fa-folder-open\"></i>\n Uncategorized\n </div>\n @for (cat of Categories; track TrackByCategory($index, cat)) {\n <div\n class=\"drop-zone\"\n [class.active]=\"DropTargetCategoryId === cat.ID\"\n (dragover)=\"OnDragOverCategory(cat.ID, $event)\"\n (dragleave)=\"OnDragLeaveCategory()\"\n (drop)=\"OnDropOnCategory(cat.ID, $event)\">\n <i class=\"fa-solid fa-folder\"></i>\n {{ cat.Name }}\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Delete Confirmation Dialog -->\n <mj-confirm-dialog\n [visible]=\"ShowDeleteConfirm\"\n type=\"danger\"\n title=\"Delete Dashboard{{ DashboardsPendingDelete.length > 1 ? 's' : '' }}\"\n [message]=\"DashboardsPendingDelete.length === 1\n ? 'Are you sure you want to delete \\'' + DashboardsPendingDelete[0].Name + '\\'? This action cannot be undone.'\n : 'Are you sure you want to delete ' + DashboardsPendingDelete.length + ' dashboards? This action cannot be undone.'\"\n confirmText=\"Delete\"\n cancelText=\"Cancel\"\n (confirmed)=\"ConfirmDelete()\"\n (cancelled)=\"CloseDeleteConfirm()\">\n </mj-confirm-dialog>\n\n <!-- Move to Folder Dialog -->\n @if (ShowMoveDialog) {\n <div class=\"move-dialog-overlay\" (click)=\"CloseMoveDialog()\">\n <div class=\"move-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"dialog-header\">\n <h3>Move to Category</h3>\n <button class=\"close-btn\" (click)=\"CloseMoveDialog()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <div class=\"dialog-content\">\n <p>Move {{ SelectedCount }} dashboard{{ SelectedCount > 1 ? 's' : '' }} to:</p>\n <div class=\"category-list\">\n <div\n class=\"category-option\"\n (click)=\"ConfirmMove(null)\">\n <i class=\"fa-solid fa-folder-open\"></i>\n Uncategorized\n </div>\n @for (cat of Categories; track TrackByCategory($index, cat)) {\n <div\n class=\"category-option\"\n (click)=\"ConfirmMove(cat.ID)\">\n <i class=\"fa-solid fa-folder\"></i>\n {{ cat.Name }}\n </div>\n }\n </div>\n </div>\n <div class=\"dialog-footer\">\n <button class=\"btn-secondary\" (click)=\"CloseMoveDialog()\">Cancel</button>\n </div>\n </div>\n </div>\n }\n\n <!-- Create Category Dialog -->\n @if (ShowCreateCategoryDialog) {\n <div class=\"create-category-dialog-overlay\" (click)=\"CloseCreateCategoryDialog()\">\n <div class=\"create-category-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"dialog-header\">\n <h3>\n <i class=\"fa-solid fa-folder-plus\"></i>\n Create Category\n </h3>\n <button class=\"close-btn\" (click)=\"CloseCreateCategoryDialog()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <div class=\"dialog-content\">\n <div class=\"form-field\">\n <label for=\"category-name\">Name *</label>\n <input\n type=\"text\"\n id=\"category-name\"\n [(ngModel)]=\"NewCategoryName\"\n placeholder=\"Enter category name\"\n (keyup.enter)=\"ConfirmCreateCategory()\">\n </div>\n <div class=\"form-field\">\n <label for=\"category-description\">Description</label>\n <textarea\n id=\"category-description\"\n [(ngModel)]=\"NewCategoryDescription\"\n placeholder=\"Optional description\"\n rows=\"3\"></textarea>\n </div>\n </div>\n <div class=\"dialog-footer\">\n <button\n class=\"btn-primary\"\n (click)=\"ConfirmCreateCategory()\"\n [disabled]=\"!NewCategoryName.trim()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create\n </button>\n <button class=\"btn-secondary\" (click)=\"CloseCreateCategoryDialog()\">Cancel</button>\n </div>\n </div>\n </div>\n }\n\n <!-- Delete Category Confirmation Dialog -->\n @if (ShowDeleteCategoryConfirm) {\n <div class=\"delete-category-dialog-overlay\" (click)=\"CloseDeleteCategoryConfirm()\">\n <div class=\"delete-category-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"dialog-header danger\">\n <h3>\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n Delete Category\n </h3>\n <button class=\"close-btn\" (click)=\"CloseDeleteCategoryConfirm()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n @if (CategoryPendingDelete) {\n <div class=\"dialog-content\">\n <div class=\"warning-message\">\n <p>\n You are about to delete the category <strong>\"{{ CategoryPendingDelete.Name }}\"</strong>.\n </p>\n @if (GetCategoryContentCount(CategoryPendingDelete); as counts) {\n @if (counts.dashboards > 0 || counts.categories > 0) {\n <p class=\"content-warning\">\n <i class=\"fa-solid fa-warning\"></i>\n This category contains:\n </p>\n }\n @if (counts.dashboards > 0 || counts.categories > 0) {\n <ul class=\"content-list\">\n @if (counts.dashboards > 0) {\n <li>\n <i class=\"fa-solid fa-chart-line\"></i>\n {{ counts.dashboards }} dashboard{{ counts.dashboards !== 1 ? 's' : '' }}\n </li>\n }\n @if (counts.categories > 0) {\n <li>\n <i class=\"fa-solid fa-folder\"></i>\n {{ counts.categories }} sub-categor{{ counts.categories !== 1 ? 'ies' : 'y' }}\n </li>\n }\n </ul>\n }\n }\n </div>\n <div class=\"confirmation-checkbox\">\n <label class=\"checkbox-label\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"DeleteCategoryIncludeContents\">\n <span class=\"checkbox-text\">\n I understand this will permanently delete this category and all its contents. This action cannot be undone.\n </span>\n </label>\n </div>\n </div>\n }\n <div class=\"dialog-footer\">\n <button\n class=\"btn-danger\"\n (click)=\"ConfirmDeleteCategory()\"\n [disabled]=\"!DeleteCategoryIncludeContents\">\n <i class=\"fa-solid fa-trash\"></i>\n Delete Category\n </button>\n <button class=\"btn-secondary\" (click)=\"CloseDeleteCategoryConfirm()\">Cancel</button>\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["/* Dashboard Browser Component Styles */\n\n.dashboard-browser {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: #f5f7fa;\n position: relative;\n}\n\n/* Browser Toolbar */\n.browser-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 24px 0 0;\n background: #fff;\n border-bottom: 1px solid #e0e0e0;\n gap: 16px;\n}\n\n.toolbar-actions {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.dashboard-count {\n color: #666;\n font-size: 13px;\n padding: 4px 10px;\n background: #f0f0f0;\n border-radius: 12px;\n}\n\n/* Legacy header styles (kept for compatibility) */\n.browser-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n background: #fff;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.header-left h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: #333;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.header-left h2 i {\n color: #5c6bc0;\n}\n\n.header-right {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n display: flex;\n background: #f0f0f0;\n border-radius: 6px;\n padding: 2px;\n}\n\n.toggle-btn {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: #666;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.toggle-btn:hover {\n color: #333;\n}\n\n.toggle-btn.active {\n background: #fff;\n color: #5c6bc0;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Selection Mode Button */\n.select-mode-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n background: #f0f0f0;\n border: none;\n border-radius: 6px;\n font-size: 13px;\n color: #666;\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.select-mode-btn:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.select-mode-btn i {\n font-size: 12px;\n}\n\n/* Selection Toolbar (replaces bulk-actions) */\n.selection-toolbar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 12px;\n background: #e3f2fd;\n border-radius: 6px;\n}\n\n.selection-toolbar .action-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.selection-toolbar .action-btn:disabled:hover {\n background: transparent;\n color: #666;\n}\n\n.selected-count {\n font-size: 13px;\n color: #1976d2;\n font-weight: 500;\n min-width: 70px;\n}\n\n/* Buttons */\n.btn-primary {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: #5c6bc0;\n color: #fff;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-primary:hover {\n background: #4a5ab9;\n}\n\n.btn-secondary {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: #f0f0f0;\n color: #333;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-secondary:hover {\n background: #e0e0e0;\n}\n\n.action-btn {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: #666;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.action-btn:hover {\n background: #e0e0e0;\n color: #333;\n}\n\n.action-btn.danger:hover {\n background: #ffebee;\n color: #d32f2f;\n}\n\n/* Filters */\n.browser-filters {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 24px;\n background: #fff;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.search-box {\n display: flex;\n align-items: center;\n flex: 1;\n max-width: 400px;\n background: #f5f5f5;\n border-radius: 6px;\n padding: 0 12px;\n}\n\n.search-box i {\n color: #999;\n font-size: 14px;\n}\n\n.search-box input {\n flex: 1;\n border: none;\n background: transparent;\n padding: 10px 12px;\n font-size: 14px;\n outline: none;\n}\n\n.search-box .clear-btn {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: #999;\n cursor: pointer;\n border-radius: 50%;\n}\n\n.search-box .clear-btn:hover {\n background: #e0e0e0;\n color: #666;\n}\n\n.category-filter select {\n padding: 10px 32px 10px 12px;\n border: 1px solid #e0e0e0;\n border-radius: 6px;\n font-size: 14px;\n background: #fff;\n cursor: pointer;\n outline: none;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 10px center;\n}\n\n.clear-filters-btn,\n.select-all-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border: none;\n background: transparent;\n color: #666;\n font-size: 13px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.clear-filters-btn:hover,\n.select-all-btn:hover {\n background: #f0f0f0;\n color: #333;\n}\n\n/* Loading Overlay */\n.loading-overlay {\n position: absolute;\n inset: 0;\n background: rgba(255, 255, 255, 0.9);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n}\n\n/* Card Grid */\n.dashboard-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n padding: 24px;\n overflow-y: auto;\n}\n\n.dashboard-card {\n background: #fff;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n cursor: pointer;\n transition: all 0.2s;\n border: 2px solid transparent;\n position: relative;\n}\n\n.dashboard-card:hover {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n transform: translateY(-2px);\n}\n\n.dashboard-card.selected {\n border-color: #5c6bc0;\n background: #f8f9ff;\n}\n\n.dashboard-card.dragging {\n opacity: 0.5;\n}\n\n.card-header {\n display: flex;\n align-items: center;\n padding: 16px;\n border-bottom: 1px solid #f0f0f0;\n}\n\n.card-icon {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #5c6bc0, #7986cb);\n border-radius: 8px;\n color: #fff;\n font-size: 16px;\n}\n\n/* Selection area in top-right corner of card */\n.card-select-area {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 2;\n padding: 10px;\n background: #e3f2fd;\n border-radius: 8px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s;\n}\n\n.card-select-area:hover {\n background: #bbdefb;\n}\n\n.dashboard-card.selected .card-select-area {\n background: #5c6bc0;\n}\n\n.card-select-area input {\n width: 18px;\n height: 18px;\n cursor: pointer;\n accent-color: #5c6bc0;\n}\n\n.card-actions {\n display: flex;\n gap: 4px;\n margin-left: auto;\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.dashboard-card:hover .card-actions {\n opacity: 1;\n}\n\n.card-content {\n padding: 16px;\n}\n\n.card-title {\n margin: 0 0 8px 0;\n font-size: 16px;\n font-weight: 600;\n color: #333;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Shared Badge */\n.shared-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #e3f2fd;\n color: #1976d2;\n font-size: 10px;\n flex-shrink: 0;\n}\n\n.card-description {\n margin: 0 0 12px 0;\n font-size: 13px;\n color: #666;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.card-meta {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: #999;\n}\n\n.meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n/* List View */\n.dashboard-list {\n flex: 1;\n overflow-y: auto;\n background: #fff;\n margin: 16px 24px;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.list-header {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: #f5f7fa;\n border-bottom: 1px solid #e0e0e0;\n font-size: 12px;\n font-weight: 600;\n color: #666;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.list-row {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n border-bottom: 1px solid #f0f0f0;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.list-row:hover {\n background: #f8f9ff;\n}\n\n.list-row.selected {\n background: #e8eaf6;\n}\n\n.list-row.dragging {\n opacity: 0.5;\n}\n\n.list-col {\n display: flex;\n align-items: center;\n}\n\n.checkbox-col {\n width: 40px;\n}\n\n.checkbox-col input {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n\n.name-col {\n flex: 1;\n min-width: 200px;\n gap: 10px;\n display: flex;\n align-items: center;\n}\n\n.name-col .shared-badge {\n margin-left: 4px;\n}\n\n.row-icon {\n color: #5c6bc0;\n font-size: 14px;\n}\n\n.dashboard-name {\n font-weight: 500;\n color: #333;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.category-col,\n.type-col {\n width: 120px;\n color: #666;\n font-size: 13px;\n}\n\n.date-col {\n width: 120px;\n color: #999;\n font-size: 13px;\n}\n\n.actions-col {\n width: 80px;\n justify-content: flex-end;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.list-row:hover .actions-col {\n opacity: 1;\n}\n\n/* Empty State */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n padding: 48px 24px;\n text-align: center;\n min-height: 400px;\n}\n\n.empty-state-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 480px;\n}\n\n/* Standard empty icon */\n.empty-icon {\n width: 100px;\n height: 100px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #f5f7fa, #e8eaf6);\n border-radius: 50%;\n margin-bottom: 24px;\n box-shadow: 0 4px 20px rgba(92, 107, 192, 0.1);\n}\n\n.empty-icon i {\n font-size: 40px;\n color: #9fa8da;\n}\n\n.empty-icon.folder-empty {\n background: linear-gradient(135deg, #fff3e0, #ffe0b2);\n}\n\n.empty-icon.folder-empty i {\n color: #ffb74d;\n}\n\n.empty-icon.search-empty {\n background: linear-gradient(135deg, #e3f2fd, #bbdefb);\n}\n\n.empty-icon.search-empty i {\n color: #64b5f6;\n}\n\n/* Welcome illustration for first-time users */\n.empty-illustration {\n position: relative;\n width: 160px;\n height: 160px;\n margin-bottom: 32px;\n}\n\n.illustration-bg {\n width: 120px;\n height: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: linear-gradient(135deg, #5c6bc0, #7986cb);\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 8px 32px rgba(92, 107, 192, 0.3);\n}\n\n.illustration-bg .main-icon {\n font-size: 48px;\n color: #fff;\n}\n\n.illustration-accent {\n position: absolute;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #fff;\n border-radius: 50%;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.illustration-accent i {\n font-size: 16px;\n}\n\n.illustration-accent.accent-1 {\n top: 0;\n right: 10px;\n}\n\n.illustration-accent.accent-1 i {\n color: #26a69a;\n}\n\n.illustration-accent.accent-2 {\n bottom: 10px;\n left: 0;\n}\n\n.illustration-accent.accent-2 i {\n color: #ff7043;\n}\n\n.illustration-accent.accent-3 {\n bottom: 0;\n right: 0;\n}\n\n.illustration-accent.accent-3 i {\n color: #ab47bc;\n}\n\n/* Empty state typography */\n.empty-title {\n margin: 0 0 12px 0;\n font-size: 24px;\n font-weight: 600;\n color: #333;\n}\n\n.empty-state-content h3.empty-title {\n font-size: 20px;\n}\n\n.empty-description {\n margin: 0 0 28px 0;\n color: #666;\n font-size: 15px;\n line-height: 1.6;\n max-width: 380px;\n}\n\n.empty-description strong {\n color: #333;\n}\n\n/* Empty state actions */\n.empty-actions {\n display: flex;\n gap: 12px;\n margin-bottom: 32px;\n}\n\n.btn-primary.large {\n padding: 14px 28px;\n font-size: 15px;\n border-radius: 8px;\n}\n\n/* Feature highlights for first-time users */\n.empty-features {\n display: flex;\n gap: 32px;\n padding-top: 24px;\n border-top: 1px solid #e0e0e0;\n}\n\n.feature-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n color: #666;\n font-size: 13px;\n}\n\n.feature-item i {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: #f5f7fa;\n border-radius: 8px;\n color: #5c6bc0;\n font-size: 16px;\n}\n\n/* Legacy support */\n.empty-state h3:not(.empty-title) {\n margin: 0 0 8px 0;\n font-size: 18px;\n color: #333;\n}\n\n.empty-state p:not(.empty-description) {\n margin: 0 0 24px 0;\n color: #666;\n font-size: 14px;\n max-width: 300px;\n}\n\n/* Category Drop Zones */\n.category-drop-zones {\n position: fixed;\n bottom: 24px;\n left: 50%;\n transform: translateX(-50%);\n background: #fff;\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n padding: 16px;\n z-index: 1000;\n}\n\n.drop-zone-header {\n font-size: 12px;\n color: #666;\n margin-bottom: 12px;\n text-align: center;\n}\n\n.drop-zones {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.drop-zone {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: #f5f5f5;\n border: 2px dashed #ccc;\n border-radius: 6px;\n font-size: 13px;\n color: #666;\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.drop-zone:hover,\n.drop-zone.active {\n background: #e3f2fd;\n border-color: #5c6bc0;\n color: #333;\n}\n\n/* Move Dialog */\n.move-dialog-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.move-dialog {\n background: #fff;\n border-radius: 12px;\n width: 400px;\n max-width: 90%;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.dialog-header h3 {\n margin: 0;\n font-size: 18px;\n color: #333;\n}\n\n.close-btn {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: #666;\n cursor: pointer;\n border-radius: 4px;\n}\n\n.close-btn:hover {\n background: #f0f0f0;\n}\n\n.dialog-content {\n padding: 20px;\n overflow-y: auto;\n}\n\n.dialog-content p {\n margin: 0 0 16px 0;\n color: #666;\n font-size: 14px;\n}\n\n.category-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.category-option {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.category-option:hover {\n background: #f5f5f5;\n}\n\n.category-option i {\n color: #5c6bc0;\n}\n\n.dialog-footer {\n display: flex;\n justify-content: flex-end;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n}\n\n/* New Dropdown */\n.new-dropdown {\n position: relative;\n}\n\n.dropdown-caret {\n font-size: 10px;\n margin-left: 4px;\n}\n\n.dropdown-menu {\n position: absolute;\n top: 100%;\n right: 0;\n margin-top: 4px;\n min-width: 160px;\n background: #fff;\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n overflow: hidden;\n}\n\n.dropdown-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: transparent;\n color: #333;\n font-size: 14px;\n cursor: pointer;\n text-align: left;\n transition: background 0.15s;\n}\n\n.dropdown-item:hover {\n background: #f5f5f5;\n}\n\n.dropdown-item i {\n color: #5c6bc0;\n width: 16px;\n text-align: center;\n}\n\n.dropdown-backdrop {\n position: fixed;\n inset: 0;\n z-index: 1000;\n}\n\n/* Create Category Dialog */\n.create-category-dialog-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1002;\n}\n\n.create-category-dialog {\n background: #fff;\n border-radius: 12px;\n width: 400px;\n max-width: 90%;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.create-category-dialog .dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.create-category-dialog .dialog-header h3 {\n margin: 0;\n font-size: 18px;\n color: #333;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.create-category-dialog .dialog-header h3 i {\n color: #5c6bc0;\n}\n\n.create-category-dialog .dialog-content {\n padding: 20px;\n}\n\n.form-field {\n margin-bottom: 16px;\n}\n\n.form-field:last-child {\n margin-bottom: 0;\n}\n\n.form-field label {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: #555;\n}\n\n.form-field input,\n.form-field textarea {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid #ddd;\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s, box-shadow 0.15s;\n box-sizing: border-box;\n}\n\n.form-field input:focus,\n.form-field textarea:focus {\n outline: none;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 3px rgba(92, 107, 192, 0.1);\n}\n\n.form-field textarea {\n resize: vertical;\n min-height: 80px;\n}\n\n.create-category-dialog .dialog-footer {\n display: flex;\n gap: 10px;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n}\n\n.create-category-dialog .dialog-footer .btn-primary {\n flex: 0 0 auto;\n}\n\n.create-category-dialog .dialog-footer .btn-secondary {\n flex: 0 0 auto;\n margin-left: auto;\n}\n\n/* Breadcrumb Navigation */\n.breadcrumb-nav {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 24px;\n background: #fff;\n border-bottom: 1px solid #e0e0e0;\n flex-wrap: wrap;\n}\n\n.breadcrumb-item {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n background: transparent;\n color: #5c6bc0;\n font-size: 13px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.15s;\n}\n\n.breadcrumb-item:hover {\n background: #f0f0f0;\n}\n\n.breadcrumb-item.current {\n color: #333;\n font-weight: 500;\n cursor: default;\n}\n\n.breadcrumb-item.current:hover {\n background: transparent;\n}\n\n.breadcrumb-item i {\n font-size: 12px;\n}\n\n.breadcrumb-item.root i {\n font-size: 14px;\n}\n\n.breadcrumb-separator {\n color: #999;\n font-size: 10px;\n}\n\n/* Category Cards */\n.category-card {\n cursor: pointer;\n}\n\n.category-card:hover {\n border-color: #5c6bc0;\n}\n\n.folder-icon {\n background: linear-gradient(135deg, #ffa726, #ffb74d) !important;\n}\n\n.category-row {\n background: #fafafa;\n}\n\n.category-row:hover {\n background: #fff3e0 !important;\n}\n\n.category-row .folder-icon {\n color: #ffa726;\n}\n\n/* Drop target highlighting for category cards/rows */\n.dashboard-card.category-card.drop-target,\n.list-row.category-row.drop-target {\n background: #e3f2fd;\n border-color: #5c6bc0;\n box-shadow: 0 0 0 2px rgba(92, 107, 192, 0.3);\n}\n\n/* Search text highlighting */\nmark {\n background: #fff59d;\n color: inherit;\n padding: 0 2px;\n border-radius: 2px;\n}\n\n/* Delete Category Dialog */\n.delete-category-dialog-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1002;\n}\n\n.delete-category-dialog {\n background: #fff;\n border-radius: 12px;\n width: 480px;\n max-width: 90%;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.delete-category-dialog .dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid #e0e0e0;\n}\n\n.delete-category-dialog .dialog-header.danger {\n background: #ffebee;\n border-bottom-color: #ffcdd2;\n}\n\n.delete-category-dialog .dialog-header.danger h3 {\n color: #c62828;\n}\n\n.delete-category-dialog .dialog-header.danger h3 i {\n color: #d32f2f;\n}\n\n.delete-category-dialog .dialog-header h3 {\n margin: 0;\n font-size: 18px;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.delete-category-dialog .dialog-content {\n padding: 20px;\n}\n\n.warning-message {\n margin-bottom: 20px;\n}\n\n.warning-message p {\n margin: 0 0 12px 0;\n color: #333;\n font-size: 14px;\n line-height: 1.5;\n}\n\n.warning-message .content-warning {\n color: #d32f2f;\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 16px;\n}\n\n.warning-message .content-list {\n margin: 8px 0 0 0;\n padding-left: 24px;\n color: #666;\n}\n\n.warning-message .content-list li {\n margin: 6px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.warning-message .content-list li i {\n color: #999;\n width: 16px;\n text-align: center;\n}\n\n.confirmation-checkbox {\n background: #fff3e0;\n border: 1px solid #ffcc80;\n border-radius: 8px;\n padding: 16px;\n}\n\n.checkbox-label {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n}\n\n.checkbox-label input {\n width: 18px;\n height: 18px;\n margin-top: 2px;\n cursor: pointer;\n accent-color: #d32f2f;\n}\n\n.checkbox-text {\n font-size: 13px;\n color: #666;\n line-height: 1.5;\n}\n\n.delete-category-dialog .dialog-footer {\n display: flex;\n gap: 10px;\n padding: 16px 20px;\n border-top: 1px solid #e0e0e0;\n}\n\n.btn-danger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: #d32f2f;\n color: #fff;\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-danger:hover {\n background: #c62828;\n}\n\n.btn-danger:disabled {\n background: #e0e0e0;\n color: #999;\n cursor: not-allowed;\n}\n\n.delete-category-dialog .dialog-footer .btn-secondary {\n margin-left: auto;\n}\n"] }]
|
|
1802
|
+
args: [{ standalone: false, selector: 'mj-dashboard-browser', changeDetection: ChangeDetectionStrategy.OnPush, template: "<!-- Dashboard Browser Component -->\n<div class=\"dashboard-browser\" [class.loading]=\"IsLoading\">\n <!-- Toolbar Row: Breadcrumb + Actions -->\n <div class=\"browser-toolbar\">\n <!-- Breadcrumb Navigation -->\n <mj-dashboard-breadcrumb\n [Categories]=\"Categories\"\n [CurrentCategoryId]=\"SelectedCategoryId\"\n [RootIcon]=\"IconClass\"\n [RootLabel]=\"Title\"\n [AllowDragDrop]=\"AllowDragDrop && (DraggingId !== null || IsSelectionMode)\"\n Size=\"large\"\n (Navigate)=\"NavigateToCategory($event.CategoryId)\"\n (DashboardDrop)=\"OnBreadcrumbDrop($event)\">\n </mj-dashboard-breadcrumb>\n\n <!-- Right-side Actions -->\n <div class=\"toolbar-actions\">\n <!-- Dashboard count -->\n <span class=\"dashboard-count\">{{ FilteredDashboards.length }} dashboards</span>\n\n <!-- View Toggle -->\n <div class=\"view-toggle\">\n <button\n class=\"toggle-btn\"\n [class.active]=\"ViewMode === 'cards'\"\n (click)=\"SetViewMode('cards')\"\n title=\"Card View\">\n <i class=\"fa-solid fa-grip\"></i>\n </button>\n <button\n class=\"toggle-btn\"\n [class.active]=\"ViewMode === 'list'\"\n (click)=\"SetViewMode('list')\"\n title=\"List View\">\n <i class=\"fa-solid fa-list\"></i>\n </button>\n </div>\n\n <!-- Selection Mode Toggle & Bulk Actions -->\n @if (AllowMultiSelect) {\n <!-- Enter Selection Mode Button (when not in selection mode) -->\n @if (!IsSelectionMode && FilteredDashboards.length > 0) {\n <button\n class=\"select-mode-btn\"\n (click)=\"EnterSelectionMode()\"\n title=\"Select multiple dashboards\">\n <i class=\"fa-solid fa-check-double\"></i>\n Select\n </button>\n }\n <!-- Selection Mode Toolbar (when in selection mode) -->\n @if (IsSelectionMode) {\n <div class=\"selection-toolbar\">\n <span class=\"selected-count\">{{ SelectedCount }} selected</span>\n <button class=\"action-btn\" (click)=\"SelectAll()\" title=\"Select all\">\n <i class=\"fa-solid fa-check-double\"></i>\n </button>\n <button class=\"action-btn\" (click)=\"OnMoveSelected()\" title=\"Move to folder\" [disabled]=\"SelectedCount === 0\">\n <i class=\"fa-solid fa-folder-open\"></i>\n </button>\n <button class=\"action-btn danger\" (click)=\"OnDeleteSelected()\" title=\"Delete selected\" [disabled]=\"!CanDeleteAnySelected\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n <button class=\"action-btn\" (click)=\"ExitSelectionMode()\" title=\"Exit selection mode\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n }\n }\n\n <!-- New Dropdown Button -->\n @if (ShowCreateButton) {\n <div class=\"new-dropdown\">\n <button\n class=\"btn-primary\"\n (click)=\"ToggleNewMenu(); $event.stopPropagation()\">\n <i class=\"fa-solid fa-plus\"></i>\n New\n <i class=\"fa-solid fa-caret-down dropdown-caret\"></i>\n </button>\n @if (ShowNewMenu) {\n <div class=\"dropdown-menu\">\n <button class=\"dropdown-item\" (click)=\"OnCreateDashboard()\">\n <i class=\"fa-solid fa-chart-line\"></i>\n Dashboard\n </button>\n <button class=\"dropdown-item\" (click)=\"OpenCreateCategoryDialog()\">\n <i class=\"fa-solid fa-folder-plus\"></i>\n Category\n </button>\n </div>\n }\n </div>\n }\n </div>\n </div>\n\n <!-- Click-away overlay for dropdown -->\n @if (ShowNewMenu) {\n <div class=\"dropdown-backdrop\" (click)=\"CloseNewMenu()\"></div>\n }\n\n <!-- Filters -->\n <div class=\"browser-filters\">\n <div class=\"search-box\">\n <i class=\"fa-solid fa-search\"></i>\n <input\n type=\"text\"\n [(ngModel)]=\"SearchText\"\n (input)=\"OnSearchChange()\"\n placeholder=\"Search dashboards...\">\n @if (SearchText) {\n <button\n class=\"clear-btn\"\n (click)=\"ClearSearch()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n }\n </div>\n\n @if (SearchText) {\n <button\n class=\"clear-filters-btn\"\n (click)=\"ClearSearch()\">\n <i class=\"fa-solid fa-filter-circle-xmark\"></i>\n Clear Search\n </button>\n }\n </div>\n\n <!-- Loading Overlay -->\n @if (IsLoading) {\n <div class=\"loading-overlay\">\n <mj-loading text=\"Loading dashboards...\"></mj-loading>\n </div>\n }\n\n <!-- Card View -->\n @if (ViewMode === 'cards' && (FilteredChildCategories.length > 0 || FilteredDashboards.length > 0)) {\n <div class=\"dashboard-grid\">\n <!-- Category Folders -->\n @for (category of FilteredChildCategories; track TrackByCategory($index, category)) {\n <div\n class=\"dashboard-card category-card\"\n [class.drop-target]=\"DragOverChildCategoryId === category.ID\"\n (click)=\"NavigateToCategory(category.ID)\"\n (dblclick)=\"$event.stopPropagation()\"\n (dragover)=\"OnDragOverChildCategory(category.ID, $event)\"\n (dragleave)=\"OnDragLeaveChildCategory()\"\n (drop)=\"OnDropOnChildCategory(category.ID, $event)\">\n <div class=\"card-header\">\n <div class=\"card-icon folder-icon\">\n <i class=\"fa-solid fa-folder\"></i>\n </div>\n <div class=\"card-actions\">\n <button\n class=\"action-btn danger\"\n title=\"Delete category\"\n (click)=\"OnDeleteCategory(category, $event)\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n </div>\n </div>\n <div class=\"card-content\">\n <h3 class=\"card-title\" [innerHTML]=\"HighlightMatch(category.Name)\"></h3>\n @if (category.Description) {\n <p class=\"card-description\" [innerHTML]=\"HighlightMatch(category.Description)\">\n </p>\n }\n <div class=\"card-meta\">\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-folder-tree\"></i>\n Category\n </span>\n </div>\n </div>\n </div>\n }\n <!-- Dashboard Cards -->\n @for (dashboard of FilteredDashboards; track TrackByDashboard($index, dashboard)) {\n <div\n class=\"dashboard-card\"\n [class.selected]=\"IsSelected(dashboard.ID)\"\n [class.dragging]=\"DraggingId === dashboard.ID\"\n [draggable]=\"AllowDragDrop\"\n (click)=\"OnDashboardClick(dashboard, $event)\"\n (dblclick)=\"OnDashboardDoubleClick(dashboard, $event)\"\n (dragstart)=\"OnDragStart(dashboard, $event)\"\n (dragend)=\"OnDragEnd()\">\n <!-- Selection checkbox in top-right corner -->\n @if (IsSelectionMode) {\n <div\n class=\"card-select-area\"\n (click)=\"ToggleSelection(dashboard.ID); $event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [checked]=\"IsSelected(dashboard.ID)\"\n (change)=\"$event.stopPropagation()\">\n </div>\n }\n <div class=\"card-header\">\n <div class=\"card-icon\">\n <i class=\"fa-solid fa-chart-line\"></i>\n </div>\n <div class=\"card-actions\">\n @if (CanEdit(dashboard.ID)) {\n <button\n class=\"action-btn\"\n title=\"Edit\"\n (click)=\"OnEditDashboard(dashboard, $event)\">\n <i class=\"fa-solid fa-edit\"></i>\n </button>\n }\n @if (CanDelete(dashboard.ID)) {\n <button\n class=\"action-btn danger\"\n title=\"Delete\"\n (click)=\"OnDeleteDashboard(dashboard, $event)\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n </div>\n </div>\n <div class=\"card-content\">\n <h3 class=\"card-title\">\n <span [innerHTML]=\"HighlightMatch(dashboard.Name)\"></span>\n @if (IsShared(dashboard.ID)) {\n <span class=\"shared-badge\" title=\"Shared with you\">\n <i class=\"fa-solid fa-share-nodes\"></i>\n </span>\n }\n </h3>\n @if (dashboard.Description) {\n <p class=\"card-description\" [innerHTML]=\"HighlightMatch(dashboard.Description)\">\n </p>\n }\n <div class=\"card-meta\">\n <span class=\"meta-item\">\n <i class=\"fa-solid fa-clock\"></i>\n {{ FormatDate(dashboard.__mj_UpdatedAt) }}\n </span>\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- List View -->\n @if (ViewMode === 'list' && (FilteredChildCategories.length > 0 || FilteredDashboards.length > 0)) {\n <div class=\"dashboard-list\">\n <div class=\"list-header\">\n @if (IsSelectionMode) {\n <div class=\"list-col checkbox-col\">\n <input\n type=\"checkbox\"\n [checked]=\"SelectedCount === FilteredDashboards.length && FilteredDashboards.length > 0\"\n [indeterminate]=\"SelectedCount > 0 && SelectedCount < FilteredDashboards.length\"\n (change)=\"SelectedCount === FilteredDashboards.length ? ClearSelection() : SelectAll()\">\n </div>\n }\n <div class=\"list-col name-col\">Name</div>\n <div class=\"list-col type-col\">Type</div>\n <div class=\"list-col date-col\">Modified</div>\n <div class=\"list-col actions-col\">Actions</div>\n </div>\n <!-- Category Rows -->\n @for (category of FilteredChildCategories; track TrackByCategory($index, category)) {\n <div\n class=\"list-row category-row\"\n [class.drop-target]=\"DragOverChildCategoryId === category.ID\"\n (click)=\"NavigateToCategory(category.ID)\"\n (dragover)=\"OnDragOverChildCategory(category.ID, $event)\"\n (dragleave)=\"OnDragLeaveChildCategory()\"\n (drop)=\"OnDropOnChildCategory(category.ID, $event)\">\n @if (IsSelectionMode) {\n <div class=\"list-col checkbox-col\">\n <!-- Empty placeholder for alignment -->\n </div>\n }\n <div class=\"list-col name-col\">\n <i class=\"fa-solid fa-folder row-icon folder-icon\"></i>\n <span class=\"dashboard-name\" [innerHTML]=\"HighlightMatch(category.Name)\"></span>\n </div>\n <div class=\"list-col type-col\">\n Category\n </div>\n <div class=\"list-col date-col\">\n <!-- No date for categories -->\n </div>\n <div class=\"list-col actions-col\" (click)=\"$event.stopPropagation()\">\n <button\n class=\"action-btn danger\"\n title=\"Delete category\"\n (click)=\"OnDeleteCategory(category, $event)\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n </div>\n </div>\n }\n <!-- Dashboard Rows -->\n @for (dashboard of FilteredDashboards; track TrackByDashboard($index, dashboard)) {\n <div\n class=\"list-row\"\n [class.selected]=\"IsSelected(dashboard.ID)\"\n [class.dragging]=\"DraggingId === dashboard.ID\"\n [draggable]=\"AllowDragDrop\"\n (click)=\"OnDashboardClick(dashboard, $event)\"\n (dblclick)=\"OnDashboardDoubleClick(dashboard, $event)\"\n (dragstart)=\"OnDragStart(dashboard, $event)\"\n (dragend)=\"OnDragEnd()\">\n @if (IsSelectionMode) {\n <div class=\"list-col checkbox-col\" (click)=\"$event.stopPropagation()\">\n <input\n type=\"checkbox\"\n [checked]=\"IsSelected(dashboard.ID)\"\n (change)=\"ToggleSelection(dashboard.ID)\">\n </div>\n }\n <div class=\"list-col name-col\">\n <i class=\"fa-solid fa-chart-line row-icon\"></i>\n <span class=\"dashboard-name\" [innerHTML]=\"HighlightMatch(dashboard.Name)\"></span>\n @if (IsShared(dashboard.ID)) {\n <span class=\"shared-badge\" title=\"Shared with you\">\n <i class=\"fa-solid fa-share-nodes\"></i>\n </span>\n }\n </div>\n <div class=\"list-col type-col\">\n Dashboard\n </div>\n <div class=\"list-col date-col\">\n {{ FormatDate(dashboard.__mj_UpdatedAt) }}\n </div>\n <div class=\"list-col actions-col\" (click)=\"$event.stopPropagation()\">\n @if (CanEdit(dashboard.ID)) {\n <button\n class=\"action-btn\"\n title=\"Edit\"\n (click)=\"OnEditDashboard(dashboard, $event)\">\n <i class=\"fa-solid fa-edit\"></i>\n </button>\n }\n @if (CanDelete(dashboard.ID)) {\n <button\n class=\"action-btn danger\"\n title=\"Delete\"\n (click)=\"OnDeleteDashboard(dashboard, $event)\">\n <i class=\"fa-solid fa-trash\"></i>\n </button>\n }\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Empty State -->\n @if (FilteredDashboards.length === 0 && FilteredChildCategories.length === 0 && !IsLoading) {\n <div class=\"empty-state\">\n <div class=\"empty-state-content\">\n <!-- First-time user experience (no dashboards at all) -->\n @if (IsAtRoot && Dashboards.length === 0) {\n <div class=\"empty-illustration\">\n <div class=\"illustration-bg\">\n <i class=\"fa-solid fa-gauge-high main-icon\"></i>\n </div>\n <div class=\"illustration-accent accent-1\"><i class=\"fa-solid fa-chart-line\"></i></div>\n <div class=\"illustration-accent accent-2\"><i class=\"fa-solid fa-chart-bar\"></i></div>\n <div class=\"illustration-accent accent-3\"><i class=\"fa-solid fa-chart-pie\"></i></div>\n </div>\n <h2 class=\"empty-title\">Welcome to Dashboards</h2>\n <p class=\"empty-description\">\n Create custom dashboards to visualize your data, track key metrics, and monitor important information all in one place.\n </p>\n @if (ShowCreateButton) {\n <div class=\"empty-actions\">\n <button class=\"btn-primary large\" (click)=\"OnCreateDashboard()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create Your First Dashboard\n </button>\n </div>\n }\n <div class=\"empty-features\">\n <div class=\"feature-item\">\n <i class=\"fa-solid fa-table-cells\"></i>\n <span>Customizable layouts</span>\n </div>\n <div class=\"feature-item\">\n <i class=\"fa-solid fa-database\"></i>\n <span>Connect to your data</span>\n </div>\n <div class=\"feature-item\">\n <i class=\"fa-solid fa-share-nodes\"></i>\n <span>Share with your team</span>\n </div>\n </div>\n }\n <!-- Folder is empty -->\n @if (!IsAtRoot && !SearchText) {\n <div class=\"empty-icon folder-empty\">\n <i class=\"fa-solid fa-folder-open\"></i>\n </div>\n <h3 class=\"empty-title\">This folder is empty</h3>\n <p class=\"empty-description\">\n Add dashboards or create sub-folders to organize your content.\n </p>\n @if (ShowCreateButton) {\n <div class=\"empty-actions\">\n <button class=\"btn-primary\" (click)=\"OnCreateDashboard()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create Dashboard\n </button>\n </div>\n }\n }\n <!-- Root has dashboards but none uncategorized -->\n @if (IsAtRoot && Dashboards.length > 0 && !SearchText) {\n <div class=\"empty-icon\">\n <i class=\"fa-solid fa-folder-tree\"></i>\n </div>\n <h3 class=\"empty-title\">No uncategorized dashboards</h3>\n <p class=\"empty-description\">\n All your dashboards are organized into folders. Browse the folders above or create a new dashboard here.\n </p>\n @if (ShowCreateButton) {\n <div class=\"empty-actions\">\n <button class=\"btn-primary\" (click)=\"OnCreateDashboard()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create Dashboard\n </button>\n </div>\n }\n }\n <!-- Search returned no results -->\n @if (SearchText) {\n <div class=\"empty-icon search-empty\">\n <i class=\"fa-solid fa-magnifying-glass\"></i>\n </div>\n <h3 class=\"empty-title\">No results found</h3>\n <p class=\"empty-description\">\n No dashboards or folders match \"<strong>{{ SearchText }}</strong>\". Try a different search term.\n </p>\n <div class=\"empty-actions\">\n <button class=\"btn-secondary\" (click)=\"ClearSearch()\">\n <i class=\"fa-solid fa-times\"></i>\n Clear Search\n </button>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Category Drop Zones (for drag and drop) -->\n @if (DraggingId && Categories.length > 0) {\n <div class=\"category-drop-zones\">\n <div class=\"drop-zone-header\">Drop to move to category:</div>\n <div class=\"drop-zones\">\n <div\n class=\"drop-zone\"\n [class.active]=\"DropTargetCategoryId === null\"\n (dragover)=\"OnDragOverCategory(null, $event)\"\n (dragleave)=\"OnDragLeaveCategory()\"\n (drop)=\"OnDropOnCategory(null, $event)\">\n <i class=\"fa-solid fa-folder-open\"></i>\n Uncategorized\n </div>\n @for (cat of Categories; track TrackByCategory($index, cat)) {\n <div\n class=\"drop-zone\"\n [class.active]=\"DropTargetCategoryId === cat.ID\"\n (dragover)=\"OnDragOverCategory(cat.ID, $event)\"\n (dragleave)=\"OnDragLeaveCategory()\"\n (drop)=\"OnDropOnCategory(cat.ID, $event)\">\n <i class=\"fa-solid fa-folder\"></i>\n {{ cat.Name }}\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Delete Confirmation Dialog -->\n <mj-confirm-dialog\n [visible]=\"ShowDeleteConfirm\"\n type=\"danger\"\n title=\"Delete Dashboard{{ DashboardsPendingDelete.length > 1 ? 's' : '' }}\"\n [message]=\"DashboardsPendingDelete.length === 1\n ? 'Are you sure you want to delete \\'' + DashboardsPendingDelete[0].Name + '\\'? This action cannot be undone.'\n : 'Are you sure you want to delete ' + DashboardsPendingDelete.length + ' dashboards? This action cannot be undone.'\"\n confirmText=\"Delete\"\n cancelText=\"Cancel\"\n (confirmed)=\"ConfirmDelete()\"\n (cancelled)=\"CloseDeleteConfirm()\">\n </mj-confirm-dialog>\n\n <!-- Move to Folder Dialog -->\n @if (ShowMoveDialog) {\n <div class=\"move-dialog-overlay\" (click)=\"CloseMoveDialog()\">\n <div class=\"move-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"dialog-header\">\n <h3>Move to Category</h3>\n <button class=\"close-btn\" (click)=\"CloseMoveDialog()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <div class=\"dialog-content\">\n <p>Move {{ SelectedCount }} dashboard{{ SelectedCount > 1 ? 's' : '' }} to:</p>\n <div class=\"category-list\">\n <div\n class=\"category-option\"\n (click)=\"ConfirmMove(null)\">\n <i class=\"fa-solid fa-folder-open\"></i>\n Uncategorized\n </div>\n @for (cat of Categories; track TrackByCategory($index, cat)) {\n <div\n class=\"category-option\"\n (click)=\"ConfirmMove(cat.ID)\">\n <i class=\"fa-solid fa-folder\"></i>\n {{ cat.Name }}\n </div>\n }\n </div>\n </div>\n <div class=\"dialog-footer\">\n <button class=\"btn-secondary\" (click)=\"CloseMoveDialog()\">Cancel</button>\n </div>\n </div>\n </div>\n }\n\n <!-- Create Category Dialog -->\n @if (ShowCreateCategoryDialog) {\n <div class=\"create-category-dialog-overlay\" (click)=\"CloseCreateCategoryDialog()\">\n <div class=\"create-category-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"dialog-header\">\n <h3>\n <i class=\"fa-solid fa-folder-plus\"></i>\n Create Category\n </h3>\n <button class=\"close-btn\" (click)=\"CloseCreateCategoryDialog()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n <div class=\"dialog-content\">\n <div class=\"form-field\">\n <label for=\"category-name\">Name *</label>\n <input\n type=\"text\"\n id=\"category-name\"\n [(ngModel)]=\"NewCategoryName\"\n placeholder=\"Enter category name\"\n (keyup.enter)=\"ConfirmCreateCategory()\">\n </div>\n <div class=\"form-field\">\n <label for=\"category-description\">Description</label>\n <textarea\n id=\"category-description\"\n [(ngModel)]=\"NewCategoryDescription\"\n placeholder=\"Optional description\"\n rows=\"3\"></textarea>\n </div>\n </div>\n <div class=\"dialog-footer\">\n <button\n class=\"btn-primary\"\n (click)=\"ConfirmCreateCategory()\"\n [disabled]=\"!NewCategoryName.trim()\">\n <i class=\"fa-solid fa-plus\"></i>\n Create\n </button>\n <button class=\"btn-secondary\" (click)=\"CloseCreateCategoryDialog()\">Cancel</button>\n </div>\n </div>\n </div>\n }\n\n <!-- Delete Category Confirmation Dialog -->\n @if (ShowDeleteCategoryConfirm) {\n <div class=\"delete-category-dialog-overlay\" (click)=\"CloseDeleteCategoryConfirm()\">\n <div class=\"delete-category-dialog\" (click)=\"$event.stopPropagation()\">\n <div class=\"dialog-header danger\">\n <h3>\n <i class=\"fa-solid fa-exclamation-triangle\"></i>\n Delete Category\n </h3>\n <button class=\"close-btn\" (click)=\"CloseDeleteCategoryConfirm()\">\n <i class=\"fa-solid fa-times\"></i>\n </button>\n </div>\n @if (CategoryPendingDelete) {\n <div class=\"dialog-content\">\n <div class=\"warning-message\">\n <p>\n You are about to delete the category <strong>\"{{ CategoryPendingDelete.Name }}\"</strong>.\n </p>\n @if (GetCategoryContentCount(CategoryPendingDelete); as counts) {\n @if (counts.dashboards > 0 || counts.categories > 0) {\n <p class=\"content-warning\">\n <i class=\"fa-solid fa-warning\"></i>\n This category contains:\n </p>\n }\n @if (counts.dashboards > 0 || counts.categories > 0) {\n <ul class=\"content-list\">\n @if (counts.dashboards > 0) {\n <li>\n <i class=\"fa-solid fa-chart-line\"></i>\n {{ counts.dashboards }} dashboard{{ counts.dashboards !== 1 ? 's' : '' }}\n </li>\n }\n @if (counts.categories > 0) {\n <li>\n <i class=\"fa-solid fa-folder\"></i>\n {{ counts.categories }} sub-categor{{ counts.categories !== 1 ? 'ies' : 'y' }}\n </li>\n }\n </ul>\n }\n }\n </div>\n <div class=\"confirmation-checkbox\">\n <label class=\"checkbox-label\">\n <input\n type=\"checkbox\"\n [(ngModel)]=\"DeleteCategoryIncludeContents\">\n <span class=\"checkbox-text\">\n I understand this will permanently delete this category and all its contents. This action cannot be undone.\n </span>\n </label>\n </div>\n </div>\n }\n <div class=\"dialog-footer\">\n <button\n class=\"btn-danger\"\n (click)=\"ConfirmDeleteCategory()\"\n [disabled]=\"!DeleteCategoryIncludeContents\">\n <i class=\"fa-solid fa-trash\"></i>\n Delete Category\n </button>\n <button class=\"btn-secondary\" (click)=\"CloseDeleteCategoryConfirm()\">Cancel</button>\n </div>\n </div>\n </div>\n }\n</div>\n", styles: ["/* Dashboard Browser Component Styles */\n\n.dashboard-browser {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var(--mj-bg-page);\n position: relative;\n}\n\n/* Browser Toolbar */\n.browser-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 0 24px 0 0;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n gap: 16px;\n}\n\n.toolbar-actions {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n.dashboard-count {\n color: var(--mj-text-secondary);\n font-size: 13px;\n padding: 4px 10px;\n background: var(--mj-bg-surface-sunken);\n border-radius: 12px;\n}\n\n/* Legacy header styles (kept for compatibility) */\n.browser-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 24px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.header-left {\n display: flex;\n align-items: center;\n gap: 16px;\n}\n\n.header-left h2 {\n margin: 0;\n font-size: 20px;\n font-weight: 600;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.header-left h2 i {\n color: var(--mj-brand-primary);\n}\n\n.header-right {\n display: flex;\n align-items: center;\n gap: 12px;\n}\n\n/* View Toggle */\n.view-toggle {\n display: flex;\n background: var(--mj-bg-surface-sunken);\n border-radius: 6px;\n padding: 2px;\n}\n\n.toggle-btn {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.toggle-btn:hover {\n color: var(--mj-text-primary);\n}\n\n.toggle-btn.active {\n background: var(--mj-bg-surface);\n color: var(--mj-brand-primary);\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);\n}\n\n/* Selection Mode Button */\n.select-mode-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n background: var(--mj-bg-surface-sunken);\n border: none;\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.select-mode-btn:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.select-mode-btn i {\n font-size: 12px;\n}\n\n/* Selection Toolbar (replaces bulk-actions) */\n.selection-toolbar {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 4px 12px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-radius: 6px;\n}\n\n.selection-toolbar .action-btn:disabled {\n opacity: 0.4;\n cursor: not-allowed;\n}\n\n.selection-toolbar .action-btn:disabled:hover {\n background: transparent;\n color: var(--mj-text-secondary);\n}\n\n.selected-count {\n font-size: 13px;\n color: var(--mj-brand-primary);\n font-weight: 500;\n min-width: 70px;\n}\n\n/* Buttons */\n.btn-primary {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: var(--mj-brand-primary);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-primary:hover {\n background: var(--mj-brand-primary-hover);\n}\n\n.btn-secondary {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-secondary:hover {\n background: var(--mj-border-default);\n}\n\n.action-btn {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.action-btn:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-primary);\n}\n\n.action-btn.danger:hover {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n color: var(--mj-status-error);\n}\n\n/* Filters */\n.browser-filters {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 24px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.search-box {\n display: flex;\n align-items: center;\n flex: 1;\n max-width: 400px;\n background: var(--mj-bg-surface-card);\n border-radius: 6px;\n padding: 0 12px;\n}\n\n.search-box i {\n color: var(--mj-text-disabled);\n font-size: 14px;\n}\n\n.search-box input {\n flex: 1;\n border: none;\n background: transparent;\n padding: 10px 12px;\n font-size: 14px;\n outline: none;\n}\n\n.search-box .clear-btn {\n width: 24px;\n height: 24px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--mj-text-disabled);\n cursor: pointer;\n border-radius: 50%;\n}\n\n.search-box .clear-btn:hover {\n background: var(--mj-border-default);\n color: var(--mj-text-secondary);\n}\n\n.category-filter select {\n padding: 10px 32px 10px 12px;\n border: 1px solid var(--mj-border-default);\n border-radius: 6px;\n font-size: 14px;\n background: var(--mj-bg-surface);\n cursor: pointer;\n outline: none;\n appearance: none;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: right 10px center;\n}\n\n.clear-filters-btn,\n.select-all-btn {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 8px 12px;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n font-size: 13px;\n cursor: pointer;\n border-radius: 4px;\n transition: all 0.15s;\n}\n\n.clear-filters-btn:hover,\n.select-all-btn:hover {\n background: var(--mj-bg-surface-sunken);\n color: var(--mj-text-primary);\n}\n\n/* Loading Overlay */\n.loading-overlay {\n position: absolute;\n inset: 0;\n background: color-mix(in srgb, var(--mj-bg-surface) 90%, transparent);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 100;\n}\n\n/* Card Grid */\n.dashboard-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));\n gap: 20px;\n padding: 24px;\n overflow-y: auto;\n}\n\n.dashboard-card {\n background: var(--mj-bg-surface);\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n cursor: pointer;\n transition: all 0.2s;\n border: 2px solid transparent;\n position: relative;\n}\n\n.dashboard-card:hover {\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);\n transform: translateY(-2px);\n}\n\n.dashboard-card.selected {\n border-color: var(--mj-brand-primary);\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.dashboard-card.dragging {\n opacity: 0.5;\n}\n\n.card-header {\n display: flex;\n align-items: center;\n padding: 16px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n}\n\n.card-icon {\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-brand-primary);\n border-radius: 8px;\n color: var(--mj-text-inverse);\n font-size: 16px;\n}\n\n/* Selection area in top-right corner of card */\n.card-select-area {\n position: absolute;\n top: 8px;\n right: 8px;\n z-index: 2;\n padding: 10px;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-radius: 8px;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background 0.15s;\n}\n\n.card-select-area:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 20%, var(--mj-bg-surface));\n}\n\n.dashboard-card.selected .card-select-area {\n background: var(--mj-brand-primary);\n}\n\n.card-select-area input {\n width: 18px;\n height: 18px;\n cursor: pointer;\n accent-color: var(--mj-brand-primary);\n}\n\n.card-actions {\n display: flex;\n gap: 4px;\n margin-left: auto;\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.dashboard-card:hover .card-actions {\n opacity: 1;\n}\n\n.card-content {\n padding: 16px;\n}\n\n.card-title {\n margin: 0 0 8px 0;\n font-size: 16px;\n font-weight: 600;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n/* Shared Badge */\n.shared-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n color: var(--mj-brand-primary);\n font-size: 10px;\n flex-shrink: 0;\n}\n\n.card-description {\n margin: 0 0 12px 0;\n font-size: 13px;\n color: var(--mj-text-secondary);\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n}\n\n.card-meta {\n display: flex;\n gap: 16px;\n font-size: 12px;\n color: var(--mj-text-disabled);\n}\n\n.meta-item {\n display: flex;\n align-items: center;\n gap: 6px;\n}\n\n/* List View */\n.dashboard-list {\n flex: 1;\n overflow-y: auto;\n background: var(--mj-bg-surface);\n margin: 16px 24px;\n border-radius: 8px;\n box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);\n}\n\n.list-header {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n background: var(--mj-bg-page);\n border-bottom: 1px solid var(--mj-border-default);\n font-size: 12px;\n font-weight: 600;\n color: var(--mj-text-secondary);\n text-transform: uppercase;\n letter-spacing: 0.5px;\n}\n\n.list-row {\n display: flex;\n align-items: center;\n padding: 12px 16px;\n border-bottom: 1px solid var(--mj-bg-surface-sunken);\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.list-row:hover {\n background: color-mix(in srgb, var(--mj-brand-primary) 5%, var(--mj-bg-surface));\n}\n\n.list-row.selected {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.list-row.dragging {\n opacity: 0.5;\n}\n\n.list-col {\n display: flex;\n align-items: center;\n}\n\n.checkbox-col {\n width: 40px;\n}\n\n.checkbox-col input {\n width: 16px;\n height: 16px;\n cursor: pointer;\n}\n\n.name-col {\n flex: 1;\n min-width: 200px;\n gap: 10px;\n display: flex;\n align-items: center;\n}\n\n.name-col .shared-badge {\n margin-left: 4px;\n}\n\n.row-icon {\n color: var(--mj-brand-primary);\n font-size: 14px;\n}\n\n.dashboard-name {\n font-weight: 500;\n color: var(--mj-text-primary);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.category-col,\n.type-col {\n width: 120px;\n color: var(--mj-text-secondary);\n font-size: 13px;\n}\n\n.date-col {\n width: 120px;\n color: var(--mj-text-disabled);\n font-size: 13px;\n}\n\n.actions-col {\n width: 80px;\n justify-content: flex-end;\n gap: 4px;\n opacity: 0;\n transition: opacity 0.15s;\n}\n\n.list-row:hover .actions-col {\n opacity: 1;\n}\n\n/* Empty State */\n.empty-state {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n flex: 1;\n padding: 48px 24px;\n text-align: center;\n min-height: 400px;\n}\n\n.empty-state-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n max-width: 480px;\n}\n\n/* Standard empty icon */\n.empty-icon {\n width: 100px;\n height: 100px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-radius: 50%;\n margin-bottom: 24px;\n box-shadow: 0 4px 20px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.empty-icon i {\n font-size: 40px;\n color: color-mix(in srgb, var(--mj-brand-primary) 50%, var(--mj-bg-surface));\n}\n\n.empty-icon.folder-empty {\n background: color-mix(in srgb, var(--mj-status-warning) 15%, var(--mj-bg-surface));\n}\n\n.empty-icon.folder-empty i {\n color: var(--mj-status-warning);\n}\n\n.empty-icon.search-empty {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n}\n\n.empty-icon.search-empty i {\n color: var(--mj-brand-primary);\n}\n\n/* Welcome illustration for first-time users */\n.empty-illustration {\n position: relative;\n width: 160px;\n height: 160px;\n margin-bottom: 32px;\n}\n\n.illustration-bg {\n width: 120px;\n height: 120px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-brand-primary);\n border-radius: 50%;\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 8px 32px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n.illustration-bg .main-icon {\n font-size: 48px;\n color: var(--mj-text-inverse);\n}\n\n.illustration-accent {\n position: absolute;\n width: 40px;\n height: 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-surface);\n border-radius: 50%;\n box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n}\n\n.illustration-accent i {\n font-size: 16px;\n}\n\n.illustration-accent.accent-1 {\n top: 0;\n right: 10px;\n}\n\n.illustration-accent.accent-1 i {\n color: var(--mj-status-success);\n}\n\n.illustration-accent.accent-2 {\n bottom: 10px;\n left: 0;\n}\n\n.illustration-accent.accent-2 i {\n color: var(--mj-status-error);\n}\n\n.illustration-accent.accent-3 {\n bottom: 0;\n right: 0;\n}\n\n.illustration-accent.accent-3 i {\n color: var(--mj-brand-primary);\n}\n\n/* Empty state typography */\n.empty-title {\n margin: 0 0 12px 0;\n font-size: 24px;\n font-weight: 600;\n color: var(--mj-text-primary);\n}\n\n.empty-state-content h3.empty-title {\n font-size: 20px;\n}\n\n.empty-description {\n margin: 0 0 28px 0;\n color: var(--mj-text-secondary);\n font-size: 15px;\n line-height: 1.6;\n max-width: 380px;\n}\n\n.empty-description strong {\n color: var(--mj-text-primary);\n}\n\n/* Empty state actions */\n.empty-actions {\n display: flex;\n gap: 12px;\n margin-bottom: 32px;\n}\n\n.btn-primary.large {\n padding: 14px 28px;\n font-size: 15px;\n border-radius: 8px;\n}\n\n/* Feature highlights for first-time users */\n.empty-features {\n display: flex;\n gap: 32px;\n padding-top: 24px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.feature-item {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n color: var(--mj-text-secondary);\n font-size: 13px;\n}\n\n.feature-item i {\n width: 36px;\n height: 36px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--mj-bg-page);\n border-radius: 8px;\n color: var(--mj-brand-primary);\n font-size: 16px;\n}\n\n/* Legacy support */\n.empty-state h3:not(.empty-title) {\n margin: 0 0 8px 0;\n font-size: 18px;\n color: var(--mj-text-primary);\n}\n\n.empty-state p:not(.empty-description) {\n margin: 0 0 24px 0;\n color: var(--mj-text-secondary);\n font-size: 14px;\n max-width: 300px;\n}\n\n/* Category Drop Zones */\n.category-drop-zones {\n position: fixed;\n bottom: 24px;\n left: 50%;\n transform: translateX(-50%);\n background: var(--mj-bg-surface);\n border-radius: 12px;\n box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);\n padding: 16px;\n z-index: 1000;\n}\n\n.drop-zone-header {\n font-size: 12px;\n color: var(--mj-text-secondary);\n margin-bottom: 12px;\n text-align: center;\n}\n\n.drop-zones {\n display: flex;\n gap: 8px;\n flex-wrap: wrap;\n justify-content: center;\n}\n\n.drop-zone {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: var(--mj-bg-surface-card);\n border: 2px dashed var(--mj-border-strong);\n border-radius: 6px;\n font-size: 13px;\n color: var(--mj-text-secondary);\n cursor: pointer;\n transition: all 0.15s;\n}\n\n.drop-zone:hover,\n.drop-zone.active {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n color: var(--mj-text-primary);\n}\n\n/* Move Dialog */\n.move-dialog-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1000;\n}\n\n.move-dialog {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n width: 400px;\n max-width: 90%;\n max-height: 80vh;\n display: flex;\n flex-direction: column;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.dialog-header h3 {\n margin: 0;\n font-size: 18px;\n color: var(--mj-text-primary);\n}\n\n.close-btn {\n width: 32px;\n height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n border: none;\n background: transparent;\n color: var(--mj-text-secondary);\n cursor: pointer;\n border-radius: 4px;\n}\n\n.close-btn:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.dialog-content {\n padding: 20px;\n overflow-y: auto;\n}\n\n.dialog-content p {\n margin: 0 0 16px 0;\n color: var(--mj-text-secondary);\n font-size: 14px;\n}\n\n.category-list {\n display: flex;\n flex-direction: column;\n gap: 4px;\n}\n\n.category-option {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 12px 16px;\n border-radius: 6px;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.category-option:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.category-option i {\n color: var(--mj-brand-primary);\n}\n\n.dialog-footer {\n display: flex;\n justify-content: flex-end;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n/* New Dropdown */\n.new-dropdown {\n position: relative;\n}\n\n.dropdown-caret {\n font-size: 10px;\n margin-left: 4px;\n}\n\n.dropdown-menu {\n position: absolute;\n top: 100%;\n right: 0;\n margin-top: 4px;\n min-width: 160px;\n background: var(--mj-bg-surface);\n border-radius: 8px;\n box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);\n z-index: 1001;\n overflow: hidden;\n}\n\n.dropdown-item {\n display: flex;\n align-items: center;\n gap: 10px;\n width: 100%;\n padding: 12px 16px;\n border: none;\n background: transparent;\n color: var(--mj-text-primary);\n font-size: 14px;\n cursor: pointer;\n text-align: left;\n transition: background 0.15s;\n}\n\n.dropdown-item:hover {\n background: var(--mj-bg-surface-card);\n}\n\n.dropdown-item i {\n color: var(--mj-brand-primary);\n width: 16px;\n text-align: center;\n}\n\n.dropdown-backdrop {\n position: fixed;\n inset: 0;\n z-index: 1000;\n}\n\n/* Create Category Dialog */\n.create-category-dialog-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1002;\n}\n\n.create-category-dialog {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n width: 400px;\n max-width: 90%;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.create-category-dialog .dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog .dialog-header h3 {\n margin: 0;\n font-size: 18px;\n color: var(--mj-text-primary);\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.create-category-dialog .dialog-header h3 i {\n color: var(--mj-brand-primary);\n}\n\n.create-category-dialog .dialog-content {\n padding: 20px;\n}\n\n.form-field {\n margin-bottom: 16px;\n}\n\n.form-field:last-child {\n margin-bottom: 0;\n}\n\n.form-field label {\n display: block;\n margin-bottom: 6px;\n font-size: 13px;\n font-weight: 500;\n color: var(--mj-text-secondary);\n}\n\n.form-field input,\n.form-field textarea {\n width: 100%;\n padding: 10px 12px;\n border: 1px solid var(--mj-border-strong);\n border-radius: 6px;\n font-size: 14px;\n transition: border-color 0.15s, box-shadow 0.15s;\n box-sizing: border-box;\n}\n\n.form-field input:focus,\n.form-field textarea:focus {\n outline: none;\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 3px color-mix(in srgb, var(--mj-brand-primary) 10%, transparent);\n}\n\n.form-field textarea {\n resize: vertical;\n min-height: 80px;\n}\n\n.create-category-dialog .dialog-footer {\n display: flex;\n gap: 10px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.create-category-dialog .dialog-footer .btn-primary {\n flex: 0 0 auto;\n}\n\n.create-category-dialog .dialog-footer .btn-secondary {\n flex: 0 0 auto;\n margin-left: auto;\n}\n\n/* Breadcrumb Navigation */\n.breadcrumb-nav {\n display: flex;\n align-items: center;\n gap: 4px;\n padding: 12px 24px;\n background: var(--mj-bg-surface);\n border-bottom: 1px solid var(--mj-border-default);\n flex-wrap: wrap;\n}\n\n.breadcrumb-item {\n display: flex;\n align-items: center;\n gap: 6px;\n padding: 6px 10px;\n border: none;\n background: transparent;\n color: var(--mj-brand-primary);\n font-size: 13px;\n cursor: pointer;\n border-radius: 4px;\n transition: background 0.15s;\n}\n\n.breadcrumb-item:hover {\n background: var(--mj-bg-surface-sunken);\n}\n\n.breadcrumb-item.current {\n color: var(--mj-text-primary);\n font-weight: 500;\n cursor: default;\n}\n\n.breadcrumb-item.current:hover {\n background: transparent;\n}\n\n.breadcrumb-item i {\n font-size: 12px;\n}\n\n.breadcrumb-item.root i {\n font-size: 14px;\n}\n\n.breadcrumb-separator {\n color: var(--mj-text-disabled);\n font-size: 10px;\n}\n\n/* Category Cards */\n.category-card {\n cursor: pointer;\n}\n\n.category-card:hover {\n border-color: var(--mj-brand-primary);\n}\n\n.folder-icon {\n background: var(--mj-status-warning) !important;\n}\n\n.category-row {\n background: var(--mj-bg-surface-card);\n}\n\n.category-row:hover {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface)) !important;\n}\n\n.category-row .folder-icon {\n color: var(--mj-status-warning);\n}\n\n/* Drop target highlighting for category cards/rows */\n.dashboard-card.category-card.drop-target,\n.list-row.category-row.drop-target {\n background: color-mix(in srgb, var(--mj-brand-primary) 10%, var(--mj-bg-surface));\n border-color: var(--mj-brand-primary);\n box-shadow: 0 0 0 2px color-mix(in srgb, var(--mj-brand-primary) 30%, transparent);\n}\n\n/* Search text highlighting */\nmark {\n background: var(--mj-status-warning);\n color: inherit;\n padding: 0 2px;\n border-radius: 2px;\n}\n\n/* Delete Category Dialog */\n.delete-category-dialog-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.5);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 1002;\n}\n\n.delete-category-dialog {\n background: var(--mj-bg-surface);\n border-radius: 12px;\n width: 480px;\n max-width: 90%;\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);\n}\n\n.delete-category-dialog .dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 16px 20px;\n border-bottom: 1px solid var(--mj-border-default);\n}\n\n.delete-category-dialog .dialog-header.danger {\n background: color-mix(in srgb, var(--mj-status-error) 10%, var(--mj-bg-surface));\n border-bottom-color: color-mix(in srgb, var(--mj-status-error) 20%, var(--mj-bg-surface));\n}\n\n.delete-category-dialog .dialog-header.danger h3 {\n color: var(--mj-status-error);\n}\n\n.delete-category-dialog .dialog-header.danger h3 i {\n color: var(--mj-status-error);\n}\n\n.delete-category-dialog .dialog-header h3 {\n margin: 0;\n font-size: 18px;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.delete-category-dialog .dialog-content {\n padding: 20px;\n}\n\n.warning-message {\n margin-bottom: 20px;\n}\n\n.warning-message p {\n margin: 0 0 12px 0;\n color: var(--mj-text-primary);\n font-size: 14px;\n line-height: 1.5;\n}\n\n.warning-message .content-warning {\n color: var(--mj-status-error);\n font-weight: 500;\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 16px;\n}\n\n.warning-message .content-list {\n margin: 8px 0 0 0;\n padding-left: 24px;\n color: var(--mj-text-secondary);\n}\n\n.warning-message .content-list li {\n margin: 6px 0;\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.warning-message .content-list li i {\n color: var(--mj-text-disabled);\n width: 16px;\n text-align: center;\n}\n\n.confirmation-checkbox {\n background: color-mix(in srgb, var(--mj-status-warning) 10%, var(--mj-bg-surface));\n border: 1px solid color-mix(in srgb, var(--mj-status-warning) 40%, var(--mj-bg-surface));\n border-radius: 8px;\n padding: 16px;\n}\n\n.checkbox-label {\n display: flex;\n align-items: flex-start;\n gap: 12px;\n cursor: pointer;\n}\n\n.checkbox-label input {\n width: 18px;\n height: 18px;\n margin-top: 2px;\n cursor: pointer;\n accent-color: var(--mj-status-error);\n}\n\n.checkbox-text {\n font-size: 13px;\n color: var(--mj-text-secondary);\n line-height: 1.5;\n}\n\n.delete-category-dialog .dialog-footer {\n display: flex;\n gap: 10px;\n padding: 16px 20px;\n border-top: 1px solid var(--mj-border-default);\n}\n\n.btn-danger {\n display: flex;\n align-items: center;\n gap: 8px;\n padding: 10px 16px;\n background: var(--mj-status-error);\n color: var(--mj-text-inverse);\n border: none;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.15s;\n}\n\n.btn-danger:hover {\n background: color-mix(in srgb, var(--mj-status-error) 85%, black);\n}\n\n.btn-danger:disabled {\n background: var(--mj-border-default);\n color: var(--mj-text-disabled);\n cursor: not-allowed;\n}\n\n.delete-category-dialog .dialog-footer .btn-secondary {\n margin-left: auto;\n}\n"] }]
|
|
1803
1803
|
}], () => [{ type: i0.ChangeDetectorRef }], { Dashboards: [{
|
|
1804
1804
|
type: Input
|
|
1805
1805
|
}], Categories: [{
|