@c8y/ngx-components 1023.14.176 → 1023.14.178

package/fesm2022/c8y-ngx-components-context-dashboard.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, inject, InjectionToken, EventEmitter, Output, Input, TemplateRef, ViewChild, Optional, Inject, HostListener, input, HostBinding, NgModule } from '@angular/core';
+import { Injectable, Component, inject, InjectionToken, EventEmitter, Output, Input, TemplateRef, ViewChild, Injector, signal, afterNextRender, Optional, Inject, HostListener, input, HostBinding, NgModule } from '@angular/core';
 import * as i2 from '@c8y/ngx-components';
 import { IconDirective, C8yTranslatePipe, Permissions, ContextRouteService, Status, NavigatorNode, NEW_DASHBOARD_ROUTER_STATE_PROP, getActivatedRoute, ViewContext, TabsOutletComponent, memoize, hookGeneric, ExtensionPointForPlugins, fromTriggerOnce, getInjectedHooks, stateToFactory, ListGroupModule, C8yComponentOutlet, AlertService, C8yTranslateDirective, DynamicComponentModule, DynamicComponentComponent, sortByPriority, isPromise, CoreModule, WIDGET_CONFIGURATION_GRID_SIZE, HighlightComponent, EmptyStateComponent, FormGroupComponent, RequiredInputPlaceholderDirective, ProductExperienceDirective, ResizableGridComponent, DashboardChildChange, CopyDashboardDisabledReason, TitleComponent, ActionBarItemComponent, HelpComponent, WidgetsDashboardComponent, DatePipe, hookRoute, hookTab, PreviewService, hookNavigator } from '@c8y/ngx-components';
 import * as i1 from '@angular/router';
@@ -272,6 +272,24 @@ const PRODUCT_EXPERIENCE = {
         }
     }
 };
+const FOUNDATION_CLASSES = [
+    'c8y-dark-theme',
+    'c8y-light-theme',
+    'panel-content-branded'
+];
+const THEME_FOUNDATION_MAP = {
+    'dashboard-theme-dark': 'c8y-dark-theme',
+    'dashboard-theme-white': 'c8y-light-theme',
+    'dashboard-theme-branded': 'panel-content-branded'
+};
+const WIDGET_FOUNDATION_MAP = {
+    'panel-content-dark': 'c8y-dark-theme',
+    'panel-content-white': 'c8y-light-theme'
+};
+const DASHBOARD_FOUNDATION_MAP = {
+    'dashboard-theme-dark': 'c8y-dark-theme',
+    'dashboard-theme-white': 'c8y-light-theme'
+};
 const REPORT_DEFAULT_NAVIGATION_NODE_PRIORITY = 30;
 const DASHBOARD_DETAILS_OUTLET = 'dashboard-details';
 const DASHBOARD_DETAILS_TABS_OUTLET_NAME = 'dashboardTabs';
@@ -380,7 +398,7 @@ class ContextDashboardService {
                 this.tabs.refresh();
             });
         }
-        catch (ex) {
+        catch {
             // intended empty
         }
     }
@@ -400,17 +418,17 @@ class ContextDashboardService {
         }
         return dashboard;
     }
-    activateDashboards(route, types) {
+    activateDashboards(route, types, options) {
         const { dashboardId } = route.params;
         if (dashboardId) {
-            return this.getDashboard$(dashboardId, types, route.parent.data.contextData).pipe(tap(dashboard => {
+            return this.getDashboard$(dashboardId, types, route.parent.data.contextData, options).pipe(tap(dashboard => {
                 route.data = { dashboard };
             }), map(() => true), catchError(() => {
                 return of(false);
             }));
         }
         const { contextData: mo } = this.contextRouteService.getContextData(route);
-        this.dashboardTabs$ = this.getTabs$(mo, types, route?.parent?.data);
+        this.dashboardTabs$ = this.getTabs$(mo, types, route?.parent?.data, options);
         return this.dashboardTabs$;
     }
     getDashboard(name, defaultWidgets) {
@@ -537,10 +555,10 @@ class ContextDashboardService {
             return widget;
         }), 'id');
     }
-    getDashboard$(dashboardIdOrName, dashboardType, mo) {
+    getDashboard$(dashboardIdOrName, dashboardType, mo, options) {
         const cache = this.cache.get(dashboardIdOrName);
         const dashboards = mo
-            ? this.getContextDashboards(mo, dashboardType)
+            ? this.getContextDashboards(mo, dashboardType, options)
             : this.getNamedDashboard(dashboardIdOrName);
         const cacheRefresh = this.getContextDashboards$(dashboards).pipe(tap(dashboard => this.cacheDashboard(dashboard)), filter(dashboard => dashboard.id === dashboardIdOrName ||
             has(dashboard, `${this.FRAGMENT_NAME}${this.INDEX_SPLIT}${ContextDashboardType.Named}${this.INDEX_SPLIT}${dashboardIdOrName}`)));
@@ -657,7 +675,7 @@ class ContextDashboardService {
             return null;
         }
     }
-    async getContextDashboards(mo, dashboardType) {
+    async getContextDashboards(mo, dashboardType, options) {
         const filterCriteria = dashboardType.map(t => ({
             // it's necessary to wrap fragment in quotes because dashboard type can contain spaces
             __has: `'${this.createDashboardFragment(mo, t)}'`
@@ -675,9 +693,11 @@ class ContextDashboardService {
             ? [...filterCriteria, typeFilterCriteria]
             : filterCriteria;
         const query = this.queriesUtil.buildQuery({ __filter: { __or: finalFilterCriteria } });
+        const strictAppFilter = !!options?.strictAppFilter;
         const now = Date.now();
         const cacheHasValidResponse = this.contextDashboardsCache &&
             this.contextDashboardsCache.query === query &&
+            this.contextDashboardsCache.strictAppFilter === strictAppFilter &&
             now - this.contextDashboardsCache.timestamp < this.CACHE_TIMEOUT;
         if (cacheHasValidResponse) {
             return this.contextDashboardsCache.result;
@@ -687,7 +707,8 @@ class ContextDashboardService {
         }
         this.contextDashboardsCache = {
             query,
-            result: this.listAndFilterByApplication(query),
+            strictAppFilter,
+            result: this.listAndFilterByApplication(query, strictAppFilter),
             timestamp: now
         };
         return this.contextDashboardsCache.result;
@@ -887,8 +908,8 @@ class ContextDashboardService {
     replaceContextInIdsObj(ids, newContext, oldContext) {
         return Object.fromEntries(Object.entries(ids).map(([key, id]) => [key, id === oldContext.id ? newContext.id : id]));
     }
-    getTabs$(mo, dashboardType, context) {
-        const dashboards = this.getContextDashboards(mo, dashboardType);
+    getTabs$(mo, dashboardType, context, options) {
+        const dashboards = this.getContextDashboards(mo, dashboardType, options);
         return this.getContextDashboards$(dashboards).pipe(mergeMap(dashboard => this.verifyDashboardAvailability$(dashboard)), 
         // Due to MTM-62321 named context dashboards included fragments for device and groups.
         // therefore some device-info dashboards (from DM app) might occur in cockpit on device level.
@@ -1011,10 +1032,15 @@ class ContextDashboardService {
      * For dashboard views within applications, filter dashboards by application association.
      * Do it on the client side as the inventory query doesn't perform well on not indexed fragments.
      */
-    async listAndFilterByApplication(query) {
+    async listAndFilterByApplication(query, strictAppFilter = false) {
         const dashboards = await this.inventory.list({ query, pageSize: this.DEFAULT_PAGESIZE });
+        const appKey = this.appStateService?.currentApplication?.value?.key;
         dashboards.data = dashboards.data.filter(dashboard => {
-            return (Array.from(dashboard[this.APPLIED_TO_FRAGMENT] || []).includes(this.appStateService?.currentApplication?.value?.key) || !dashboard[this.APPLIED_TO_FRAGMENT]);
+            const appliedTo = Array.from(dashboard[this.APPLIED_TO_FRAGMENT] || []);
+            if (strictAppFilter) {
+                return !!appKey && appliedTo.includes(appKey);
+            }
+            return appliedTo.includes(appKey) || !dashboard[this.APPLIED_TO_FRAGMENT];
         });
         return dashboards;
     }
@@ -2388,20 +2414,43 @@ class WidgetPreviewComponent {
     constructor() {
         this.widgetConfigService = inject(WidgetConfigService);
         this.widgetConfig = inject(WidgetConfigComponent);
-        this.previewClasses = {
+        this.injector = inject(Injector);
+        // charts don't observe CSS vars — force destroy/recreate when theme changes
+        this.showContent = signal(true, ...(ngDevMode ? [{ debugName: "showContent" }] : []));
+        this.previousClassKey = '';
+        this._previewClasses = {
             'dashboard-theme-light': true,
             'panel-title-regular': true
         };
     }
+    set previewClasses(value) {
+        this._previewClasses = value;
+        const classKey = this.activeClassKey(value);
+        if (this.previousClassKey && classKey !== this.previousClassKey) {
+            this.showContent.set(false);
+            afterNextRender(() => this.showContent.set(true), { injector: this.injector });
+        }
+        this.previousClassKey = classKey;
+    }
+    get previewClasses() {
+        return this._previewClasses;
+    }
     get translateWidgetTitle() {
         return this.widgetConfig?.mo.c8y_Dashboard.translateWidgetTitle ?? false;
     }
+    activeClassKey(classes) {
+        return Object.entries(classes ?? {})
+            .filter(([, v]) => v)
+            .map(([k]) => k)
+            .sort()
+            .join(' ');
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WidgetPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: WidgetPreviewComponent, isStandalone: true, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      <c8y-dashboard-child-title>\n        <span>\n          {{\n            (widgetConfigService.selected$ | async)?.data?.title\n              | translate: { noTranslateRemoveContext: !translateWidgetTitle }\n          }}\n        </span>\n      </c8y-dashboard-child-title>\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {\n        <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n          <c8y-ui-empty-state\n            [icon]=\"'visibility-off'\"\n            [title]=\"'No preview available.' | translate\"\n            [subtitle]=\"'This widget does not provide any preview.' | translate\"\n            [horizontal]=\"false\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'configPreview') {\n        <c8y-dynamic-component\n          [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n          [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n        ></c8y-dynamic-component>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'templatePreview') {\n        <ng-template [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"></ng-template>\n      }\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "component", type: i2.DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: i2.DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: i2.DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: WidgetPreviewComponent, isStandalone: true, selector: "c8y-widget-preview", inputs: { previewClasses: "previewClasses" }, ngImport: i0, template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16 flex-grow d-flex d-col min-height-0\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot flex-grow min-height-0\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    @if (showContent()) {\n      <c8y-dashboard-child\n        [isFrozen]=\"true\"\n        [width]=\"1\"\n        [height]=\"6\"\n      >\n        @let widgetTitle =\n          (widgetConfigService.selected$ | async)?.data?.title\n            | translate: { noTranslateRemoveContext: !translateWidgetTitle };\n        <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n          <span>\n            {{ widgetTitle }}\n          </span>\n        </c8y-dashboard-child-title>\n\n        @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {\n          <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n            <c8y-ui-empty-state\n              [icon]=\"'visibility-off'\"\n              [title]=\"'No preview available.' | translate\"\n              [subtitle]=\"'This widget does not provide any preview.' | translate\"\n              [horizontal]=\"false\"\n            ></c8y-ui-empty-state>\n          </div>\n        }\n\n        @if ((widgetConfigService.previewViewState$ | async) === 'configPreview') {\n          <c8y-dynamic-component\n            [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n            [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n          ></c8y-dynamic-component>\n        }\n\n        @if ((widgetConfigService.previewViewState$ | async) === 'templatePreview') {\n          <ng-template [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"></ng-template>\n        }\n      </c8y-dashboard-child>\n    }\n  </c8y-dashboard>\n</fieldset>\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: CoreModule }, { kind: "component", type: i2.EmptyStateComponent, selector: "c8y-ui-empty-state", inputs: ["icon", "title", "subtitle", "horizontal"] }, { kind: "component", type: i2.DynamicComponentComponent, selector: "c8y-dynamic-component", inputs: ["componentId", "config", "mode", "notFoundError", "executeResolvers"], outputs: ["updateWidgetClasses"] }, { kind: "component", type: i2.DashboardComponent, selector: "c8y-dashboard", inputs: ["columns", "gap", "rows"], outputs: ["dashboardChange"] }, { kind: "component", type: i2.DashboardChildComponent, selector: "c8y-dashboard-child", inputs: ["x", "y", "width", "height", "data", "margin", "useIntersection", "isFrozen", "canToggleFullscreen", "editMode", "class"], outputs: ["changeStart", "changeEnd", "toggleFullscreen"] }, { kind: "component", type: i2.DashboardChildTitleComponent, selector: "c8y-dashboard-child-title" }, { kind: "pipe", type: C8yTranslatePipe, name: "translate" }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: WidgetPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'c8y-widget-preview', standalone: true, imports: [NgClass, C8yTranslatePipe, CommonModule, CoreModule], template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    <c8y-dashboard-child\n      [isFrozen]=\"true\"\n      [width]=\"1\"\n      [height]=\"6\"\n    >\n      <c8y-dashboard-child-title>\n        <span>\n          {{\n            (widgetConfigService.selected$ | async)?.data?.title\n              | translate: { noTranslateRemoveContext: !translateWidgetTitle }\n          }}\n        </span>\n      </c8y-dashboard-child-title>\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {\n        <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n          <c8y-ui-empty-state\n            [icon]=\"'visibility-off'\"\n            [title]=\"'No preview available.' | translate\"\n            [subtitle]=\"'This widget does not provide any preview.' | translate\"\n            [horizontal]=\"false\"\n          ></c8y-ui-empty-state>\n        </div>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'configPreview') {\n        <c8y-dynamic-component\n          [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n          [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n        ></c8y-dynamic-component>\n      }\n\n      @if ((widgetConfigService.previewViewState$ | async) === 'templatePreview') {\n        <ng-template [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"></ng-template>\n      }\n    </c8y-dashboard-child>\n  </c8y-dashboard>\n</fieldset>\n" }]
+            args: [{ selector: 'c8y-widget-preview', standalone: true, imports: [NgClass, C8yTranslatePipe, CommonModule, CoreModule], template: "<fieldset class=\"c8y-fieldset p-l-24 p-r-24 p-t-16 p-b-16 flex-grow d-flex d-col min-height-0\">\n  <legend>{{ 'Preview' | translate }}</legend>\n  <c8y-dashboard\n    class=\"dashboard-preview-slot flex-grow min-height-0\"\n    [columns]=\"1\"\n    [ngClass]=\"previewClasses\"\n  >\n    @if (showContent()) {\n      <c8y-dashboard-child\n        [isFrozen]=\"true\"\n        [width]=\"1\"\n        [height]=\"6\"\n      >\n        @let widgetTitle =\n          (widgetConfigService.selected$ | async)?.data?.title\n            | translate: { noTranslateRemoveContext: !translateWidgetTitle };\n        <c8y-dashboard-child-title [attr.title]=\"widgetTitle\">\n          <span>\n            {{ widgetTitle }}\n          </span>\n        </c8y-dashboard-child-title>\n\n        @if ((widgetConfigService.previewViewState$ | async) === 'noPreview') {\n          <div class=\"fit-h d-flex d-col j-c-center a-i-center\">\n            <c8y-ui-empty-state\n              [icon]=\"'visibility-off'\"\n              [title]=\"'No preview available.' | translate\"\n              [subtitle]=\"'This widget does not provide any preview.' | translate\"\n              [horizontal]=\"false\"\n            ></c8y-ui-empty-state>\n          </div>\n        }\n\n        @if ((widgetConfigService.previewViewState$ | async) === 'configPreview') {\n          <c8y-dynamic-component\n            [componentId]=\"(widgetConfigService.selected$ | async)?.id\"\n            [config]=\"(widgetConfigService.currentConfig$ | async)?.config\"\n          ></c8y-dynamic-component>\n        }\n\n        @if ((widgetConfigService.previewViewState$ | async) === 'templatePreview') {\n          <ng-template [ngTemplateOutlet]=\"widgetConfigService.preview$ | async\"></ng-template>\n        }\n      </c8y-dashboard-child>\n    }\n  </c8y-dashboard>\n</fieldset>\n" }]
         }], propDecorators: { previewClasses: [{
                 type: Input
             }] } });
@@ -2641,7 +2690,37 @@ class WidgetConfigComponent {
             cssClasses[this.styling.contentClass] = true;
         }
         if (isPreview) {
-            cssClasses[`dashboard-theme-${this.defaultStyling.contentClass.split('-').pop()}`] = true;
+            // When the widget has its own explicit theme (dark/white/branded), the preview
+            // should use the widget's theme — not the dashboard's. In the actual dashboard,
+            // dark/white widgets only get their own theme tokens, not the dashboard's branded
+            // overrides. "Match dashboard" (panel-content-light) and non-theme content classes
+            // (e.g. transparent) inherit the dashboard theme.
+            const widgetSuffix = this.styling.contentClass.split('-').pop();
+            const explicitWidgetThemes = new Set(['dark', 'white', 'branded']);
+            const themeSuffix = explicitWidgetThemes.has(widgetSuffix)
+                ? widgetSuffix
+                : this.defaultStyling.contentClass.split('-').pop();
+            cssClasses[`dashboard-theme-${themeSuffix}`] = true;
+        }
+        // Add foundation theme class so branding overrides cascade into the preview.
+        // Widget-level content class takes priority over dashboard-level theme.
+        let foundationClass = null;
+        for (const [cls, fc] of Object.entries(WIDGET_FOUNDATION_MAP)) {
+            if (cssClasses[cls]) {
+                foundationClass = fc;
+                break;
+            }
+        }
+        if (!foundationClass) {
+            for (const [cls, fc] of Object.entries(DASHBOARD_FOUNDATION_MAP)) {
+                if (cssClasses[cls]) {
+                    foundationClass = fc;
+                    break;
+                }
+            }
+        }
+        if (foundationClass) {
+            cssClasses[foundationClass] = true;
         }
         return cssClasses;
     }
@@ -2792,6 +2871,7 @@ class ContextDashboardComponent {
   other instances.`);
         this.hasPermissionToEditDashboard = false;
         this.destroy$ = new Subject();
+        this.actionBarFoundationClass = null;
     }
     ngOnInit() {
         if (!this.name) {
@@ -2831,6 +2911,7 @@ class ContextDashboardComponent {
         if (this.dataSub) {
             this.dataSub.unsubscribe();
         }
+        this.removeActionBarFoundationClass();
         this.contextDashboardStateService.setSelectedDashboard(null);
     }
     /**
@@ -3024,7 +3105,7 @@ class ContextDashboardComponent {
                 ]);
             }
         }
-        catch (ex) {
+        catch {
             // intended empty
         }
     }
@@ -3108,7 +3189,9 @@ class ContextDashboardComponent {
      */
     addDashboardClassToBody() {
         this.class.split(' ').forEach(cssClass => {
-            this.renderer.addClass(document.body, cssClass);
+            if (!FOUNDATION_CLASSES.includes(cssClass)) {
+                this.renderer.addClass(document.body, cssClass);
+            }
         });
     }
     /**
@@ -3117,7 +3200,9 @@ class ContextDashboardComponent {
      */
     removeDashboardClassFromBody() {
         this.class.split(' ').forEach(cssClass => {
-            this.renderer.removeClass(document.body, cssClass);
+            if (!FOUNDATION_CLASSES.includes(cssClass)) {
+                this.renderer.removeClass(document.body, cssClass);
+            }
         });
     }
     async onLoad(trackExperience) {
@@ -3136,6 +3221,8 @@ class ContextDashboardComponent {
             dashboard: true,
             ...this.dashboard?.classes
         };
+        this.addFoundationClasses(dashboardClasses);
+        this.updateActionBarTheme(dashboardClasses);
         this.isCopyDisabled = this.dashboard
             ? this.getDashboardCopyPermissionState()
             : { state: false, reason: null };
@@ -3164,6 +3251,8 @@ class ContextDashboardComponent {
                 dashboard: true,
                 ...layoutChanges.classes
             };
+            this.addFoundationClasses(dashboardClasses);
+            this.updateActionBarTheme(dashboardClasses);
             this.class = Object.keys(dashboardClasses).join(' ');
         }
         else if (this.dashboard) {
@@ -3267,6 +3356,45 @@ class ContextDashboardComponent {
         }
         return { state: true };
     }
+    /**
+     * Adds a CSS foundation theme class (c8y-dark-theme / c8y-light-theme)
+     * to dashboard classes based on the selected dashboard theme.
+     * This enables branding overrides to cascade via the standard theme selectors.
+     */
+    addFoundationClasses(dashboardClasses) {
+        for (const [themeClass, foundationClass] of Object.entries(THEME_FOUNDATION_MAP)) {
+            if (dashboardClasses[themeClass]) {
+                dashboardClasses[foundationClass] = true;
+            }
+        }
+    }
+    /**
+     * Adds/removes the foundation theme class on the action bar element,
+     * which lives outside the dashboard container and cannot inherit tokens from it.
+     */
+    updateActionBarTheme(dashboardClasses) {
+        const actionBar = document.querySelector('.c8y-ui-action-bar');
+        if (!actionBar) {
+            return;
+        }
+        this.removeActionBarFoundationClass();
+        for (const [themeClass, foundationClass] of Object.entries(THEME_FOUNDATION_MAP)) {
+            if (dashboardClasses[themeClass]) {
+                this.renderer.addClass(actionBar, foundationClass);
+                this.actionBarFoundationClass = foundationClass;
+                break;
+            }
+        }
+    }
+    removeActionBarFoundationClass() {
+        if (this.actionBarFoundationClass) {
+            const actionBar = document.querySelector('.c8y-ui-action-bar');
+            if (actionBar) {
+                this.renderer.removeClass(actionBar, this.actionBarFoundationClass);
+            }
+            this.actionBarFoundationClass = null;
+        }
+    }
     setNewState(state, descriptionProp, widgetsChanged) {
         const description = this.getDescriptionForNewState(descriptionProp, widgetsChanged);
         this.editModeService.newState({ ...state, changeHistory: description });
@@ -4213,7 +4341,9 @@ const canActivateDeviceInfo = (route, _) => {
     return previewFeatureService.getState$('ui.dm-dashboard-manager').pipe(switchMap$1(isPreviewEnabled => {
         return isPreviewEnabled
             ? contextDashboardService
-                .activateDashboards(route, [ContextDashboardType.Device, ContextDashboardType.Type])
+                .activateDashboards(route, [ContextDashboardType.Device, ContextDashboardType.Type], {
+                strictAppFilter: true
+            })
                 .pipe(map$1(tabs => !(Array.isArray(tabs) && tabs.length > 0)))
             : of(true);
     }), take(1));
@@ -4390,5 +4520,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { ALL_GLOBAL_ROLES_SELECTED, AddDashboardComponent, AddDashboardFactory, AppearanceSettingsComponent, CONTEXT_DASHBOARD_CONFIG, ContextDashboardComponent, ContextDashboardModule, ContextDashboardService, ContextDashboardType, DASHBOARD_CHILDREN_STATE_NAME, DASHBOARD_DETAILS_OUTLET, DASHBOARD_DETAILS_TABS_OUTLET_NAME, DASHBOARD_SETTINGS_CHANGES, DASHBOARD_THEME_CLASSES, DashboardActionBarFactory, DashboardDetailComponent, DashboardDetailService, DashboardDetailsTabId, DeviceInfoDashboardComponent, DeviceInfoDashboardModule, DeviceManagementHomeDashboardComponent, DeviceManagementHomeDashboardModule, GlobalContextSectionComponent, HOOK_WIDGET_CONFIG, NewDashboardGuard, PRODUCT_EXPERIENCE, PasteDashboardActionComponent, REPORT_DEFAULT_NAVIGATION_NODE_PRIORITY, STYLING_CLASS_PREFIXES, TypeDashboardInfoComponent, WIDGET_CONTENT_CLASSES, WIDGET_HEADER_CLASSES, WidgetAssetSelectorComponent, WidgetConfigAppearanceComponent, WidgetConfigComponent, WidgetConfigFeedbackComponent, WidgetConfigGeneralComponent, WidgetConfigSectionComponent, WidgetConfigSectionService, WidgetConfigService, WidgetPreviewComponent, WidgetPreviewWrapperComponent, WidgetService, hookWidgetConfig, newDashboardTab };
+export { ALL_GLOBAL_ROLES_SELECTED, AddDashboardComponent, AddDashboardFactory, AppearanceSettingsComponent, CONTEXT_DASHBOARD_CONFIG, ContextDashboardComponent, ContextDashboardModule, ContextDashboardService, ContextDashboardType, DASHBOARD_CHILDREN_STATE_NAME, DASHBOARD_DETAILS_OUTLET, DASHBOARD_DETAILS_TABS_OUTLET_NAME, DASHBOARD_FOUNDATION_MAP, DASHBOARD_SETTINGS_CHANGES, DASHBOARD_THEME_CLASSES, DashboardActionBarFactory, DashboardDetailComponent, DashboardDetailService, DashboardDetailsTabId, DeviceInfoDashboardComponent, DeviceInfoDashboardModule, DeviceManagementHomeDashboardComponent, DeviceManagementHomeDashboardModule, FOUNDATION_CLASSES, GlobalContextSectionComponent, HOOK_WIDGET_CONFIG, NewDashboardGuard, PRODUCT_EXPERIENCE, PasteDashboardActionComponent, REPORT_DEFAULT_NAVIGATION_NODE_PRIORITY, STYLING_CLASS_PREFIXES, THEME_FOUNDATION_MAP, TypeDashboardInfoComponent, WIDGET_CONTENT_CLASSES, WIDGET_FOUNDATION_MAP, WIDGET_HEADER_CLASSES, WidgetAssetSelectorComponent, WidgetConfigAppearanceComponent, WidgetConfigComponent, WidgetConfigFeedbackComponent, WidgetConfigGeneralComponent, WidgetConfigSectionComponent, WidgetConfigSectionService, WidgetConfigService, WidgetPreviewComponent, WidgetPreviewWrapperComponent, WidgetService, hookWidgetConfig, newDashboardTab };
 //# sourceMappingURL=c8y-ngx-components-context-dashboard.mjs.map