@acorex-platform/module-report-management-client 0.0.15

package/fesm2022/acorex-platform-module-report-management-client.mjs

@@ -0,0 +1,3586 @@
+import { AXP_MODULE_MANIFEST_PROVIDER, AXP_FEATURE_DEFINITION_PROVIDER, AXPExpressionEvaluatorService, applySystemActionDefault, AXPDeviceService } from '@acorex-platform/framework-client/core';
+import { AXP_ENTITY_DEFINITION_LOADER, provideEntity, AXPEntityService } from '@acorex-platform/framework-client/layout/entity';
+import { RootConfig, AXMPermissionsKeys, AXPReportManagementMenuKeys, AXPReportManagementFeatureKeys } from '@acorex-platform/module-report-management-client/contracts';
+export * from '@acorex-platform/module-report-management-client/contracts';
+import { AXPDomainModule } from '@acorex-platform/framework-client/domain';
+import { AXPRootLayoutComponent } from '@acorex-platform/framework-client/themes/default';
+import * as i0 from '@angular/core';
+import { Injectable, inject, NgModule, computed, effect, signal, ChangeDetectionStrategy, Component, ViewEncapsulation, viewChild, untracked, DestroyRef, input } from '@angular/core';
+import { ROUTES, ActivatedRoute } from '@angular/router';
+import { AXP_PROTECTED_ROUTE_GUARDS, AXP_MENU_PROVIDER, AXPSettingsService, AXPCommonSettings } from '@acorex-platform/framework-client/common';
+import { AXPSessionService, AXP_PERMISSION_DEFINITION_PROVIDER } from '@acorex-platform/framework-client/auth';
+import { AXPRuntimeModule, provideCommandSetups, AXPCommandService } from '@acorex-platform/framework-client/runtime';
+import * as i1 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXPopupService } from '@acorex/components/popup';
+import { get, isString } from 'lodash-es';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i2$1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXLoadingDialogService, AXLoadingDialogModule } from '@acorex/components/loading-dialog';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXPLayoutRendererComponent } from '@acorex-platform/framework-client/layout/builder';
+import { AXPStateMessageComponent, AXPTextCommandColumnComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutFooterComponent } from '@acorex-platform/framework-client/layout/components';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex-platform/framework-client/layout/views';
+import { AXPLayoutThemeService } from '@acorex-platform/framework-client/themes/shared';
+import * as i1$1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { AXPPageStatus } from '@acorex-platform/framework-shared/widget-core';
+import { AXLocaleService } from '@acorex/core/locale';
+import * as i2 from '@acorex-platform/framework-client/layout/widget-core';
+import { AXPWidgetRegistryService, AXPWidgetCoreModule } from '@acorex-platform/framework-client/layout/widget-core';
+import { Subscription } from 'rxjs';
+import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
+import { AXPPlatformScope, AXPWidgetsList, getSystemActions } from '@acorex-platform/framework-shared/core';
+import { set } from 'lodash';
+import { AXBarChartComponent } from '@acorex/charts/bar-chart';
+import { AXChartLegendComponent } from '@acorex/charts/chart-legend';
+import { AXDonutChartComponent } from '@acorex/charts/donut-chart';
+import { AXLineChartComponent } from '@acorex/charts/line-chart';
+import { DomSanitizer } from '@angular/platform-browser';
+import * as i1$2 from '@acorex/components/data-table';
+import { AXDataTableModule } from '@acorex/components/data-table';
+import { moveItemInArray } from '@angular/cdk/drag-drop';
+import { AXDataSource } from '@acorex/cdk/common';
+
+//#region ----   Imports   ----
+//#endregion
+//#region ----   Manifest Definition   ----
+/**
+ * Report Management Module Manifest.
+ * Defines module metadata, features, and provider references.
+ */
+const ReportManagementManifest = {
+    name: RootConfig.module.name,
+    version: '1.0.0',
+    title: RootConfig.module.title,
+    icon: RootConfig.module.icon,
+    i18n: RootConfig.config.i18n,
+    required: true,
+    // Module dependencies (optional)
+};
+//#endregion
+
+class AXMPermissionDefinitionProvider {
+    constructor(injector) {
+        this.injector = injector;
+        this.translateService = this.injector.get(AXTranslationService);
+    }
+    async define(context) {
+        const keys = AXMPermissionsKeys.ReportManagement;
+        const trans = async (key) => await this.translateService.translateAsync(key);
+        context
+            .addGroup(RootConfig.module.name, await trans('@report-management:module.menus.root.title'))
+            // Reports Management
+            .addPermission(keys.Report.Management, await trans('@report-management:reports.permissions.reports.title'))
+            .addChild(keys.Report.View, await trans('@report-management:reports.permissions.reports.actions.view.title'))
+            .addChild(keys.Report.Create, await trans('@report-management:reports.permissions.reports.actions.create.title'))
+            .addChild(keys.Report.Update, await trans('@report-management:reports.permissions.reports.actions.update.title'))
+            .addChild(keys.Report.Delete, await trans('@report-management:reports.permissions.reports.actions.delete.title'))
+            .endPermission()
+            // Categories Management
+            .addPermission(keys.Category.Management, await trans('@report-management:reports.permissions.categories.title'))
+            .addChild(keys.Category.View, await trans('@report-management:reports.permissions.categories.actions.view.title'))
+            .addChild(keys.Category.Create, await trans('@report-management:reports.permissions.categories.actions.create.title'))
+            .addChild(keys.Category.Update, await trans('@report-management:reports.permissions.categories.actions.update.title'))
+            .addChild(keys.Category.Delete, await trans('@report-management:reports.permissions.categories.actions.delete.title'))
+            .endPermission()
+            .endGroup();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMPermissionDefinitionProvider, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMPermissionDefinitionProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMPermissionDefinitionProvider, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.Injector }] });
+
+class AXMMenuProvider {
+    constructor() {
+        this.sessionService = inject(AXPSessionService);
+    }
+    async provide(context) {
+        const module = RootConfig.module;
+        context.addItems([
+            {
+                name: AXPReportManagementMenuKeys.Reports,
+                text: RootConfig.entities.report.titlePlural,
+                path: `${this.sessionService.application?.name}/${module.route}/reports`,
+                icon: RootConfig.entities.report.icon,
+                priority: 8300,
+                policy: {
+                    features: [module.name],
+                    permissions: [AXMPermissionsKeys.ReportManagement.Report.View],
+                },
+            },
+        ]);
+    }
+}
+
+class AXMEntityProvider {
+    async get(moduleName, entityName) {
+        // Simulate report entity definition
+        if (moduleName == RootConfig.module.name && entityName == RootConfig.entities.report.name) {
+            return {
+                name: "Report",
+                module: "ReportManagement",
+                title: "Report Management",
+                formats: {
+                    individual: "Report Management",
+                    plural: "Report Management",
+                },
+                properties: [],
+            };
+        }
+        return null;
+    }
+    async list() {
+        const m = RootConfig.module.name;
+        return Promise.resolve(Object.values(RootConfig.entities).map((e) => ({ name: e.name, module: m })));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMEntityProvider, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMEntityProvider }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMEntityProvider, decorators: [{
+            type: Injectable
+        }] });
+
+//#region ----   Imports   ----
+//#endregion
+//#region ----   Feature Definition Provider   ----
+/**
+ * Report Management Feature Definition Provider.
+ * Provides feature definitions for the Report Management module.
+ */
+class AXPReportManagementFeatureDefinitionProvider {
+    async provide(context) {
+        // Report Builder feature
+        context.addFeature(AXPReportManagementFeatureKeys.ReportBuilder, {
+            title: '@report-management:features.report-builder.title',
+            description: '@report-management:features.report-builder.description',
+            defaultValue: true,
+            type: 'boolean',
+        });
+        // Saved Reports feature
+        context.addFeature(AXPReportManagementFeatureKeys.SavedReports, {
+            title: '@report-management:features.saved-reports.title',
+            description: '@report-management:features.saved-reports.description',
+            defaultValue: true,
+            type: 'boolean',
+        });
+        // Scheduled Reports feature
+        context.addFeature(AXPReportManagementFeatureKeys.ScheduledReports, {
+            title: '@report-management:features.scheduled-reports.title',
+            description: '@report-management:features.scheduled-reports.description',
+            defaultValue: true,
+            type: 'boolean',
+        });
+        // Background Reports feature
+        context.addFeature(AXPReportManagementFeatureKeys.BackgroundReports, {
+            title: '@report-management:features.background-reports.title',
+            description: '@report-management:features.background-reports.description',
+            defaultValue: true,
+            type: 'boolean',
+        });
+    }
+}
+//#endregion
+
+function routesFacory() {
+    let routes = [
+        {
+            path: `:app/${RootConfig.module.route}/viewer`,
+            canActivate: [...AXP_PROTECTED_ROUTE_GUARDS],
+            data: { tab: true, rootLayout: true },
+            loadComponent: () => {
+                return AXPRootLayoutComponent;
+            },
+            children: [
+                {
+                    path: ':reportId',
+                    loadComponent: () => Promise.resolve().then(function () { return reportViewerPage_component; }).then((c) => c.AXPReportViewerPageComponent),
+                    data: { reuse: true },
+                },
+                {
+                    path: '',
+                    loadComponent: () => Promise.resolve().then(function () { return reportViewerPage_component; }).then((c) => c.AXPReportViewerPageComponent),
+                    data: { reuse: true },
+                },
+            ],
+        },
+        {
+            path: `:app/${RootConfig.module.route}/reports`,
+            canActivate: [...AXP_PROTECTED_ROUTE_GUARDS],
+            data: { tab: true, rootLayout: true },
+            loadComponent: () => {
+                return AXPRootLayoutComponent;
+            },
+            children: [
+                {
+                    path: '**',
+                    loadComponent: () => import('./acorex-platform-module-report-management-client-report-runner-root-page.component-DgvoIHsK.mjs').then((c) => c.AXMReportRunnerRootPageComponent),
+                    data: { reuse: true },
+                },
+            ],
+        },
+    ];
+    return routes;
+}
+class AXMReportManagementModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMReportManagementModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.9", ngImport: i0, type: AXMReportManagementModule, imports: [AXPDomainModule,
+            AXPRuntimeModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMReportManagementModule, providers: [
+            {
+                provide: ROUTES,
+                multi: true,
+                useFactory: routesFacory,
+            },
+            provideEntity([RootConfig.entities.report.fullName, RootConfig.entities.category.fullName]),
+            // Module Manifest Provider
+            {
+                provide: AXP_MODULE_MANIFEST_PROVIDER,
+                useValue: ReportManagementManifest,
+                multi: true,
+            },
+            // Provider references (now using tokens)
+            {
+                provide: AXP_PERMISSION_DEFINITION_PROVIDER,
+                useClass: AXMPermissionDefinitionProvider,
+                multi: true,
+            },
+            {
+                provide: AXP_MENU_PROVIDER,
+                useClass: AXMMenuProvider,
+                multi: true,
+            },
+            {
+                provide: AXP_ENTITY_DEFINITION_LOADER,
+                useClass: AXMEntityProvider,
+                multi: true,
+            },
+            {
+                provide: AXP_FEATURE_DEFINITION_PROVIDER,
+                useClass: AXPReportManagementFeatureDefinitionProvider,
+                multi: true,
+            },
+            provideCommandSetups([
+                {
+                    key: 'ReportManagement.Report:DrillToReport',
+                    command: () => Promise.resolve().then(function () { return drillToReport_command; }).then((c) => c.AXPDrillToReportCommand),
+                },
+            ]),
+        ], imports: [AXPDomainModule,
+            AXPRuntimeModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMReportManagementModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        AXPDomainModule,
+                        AXPRuntimeModule,
+                        // Entity Modules
+                    ],
+                    exports: [],
+                    declarations: [],
+                    providers: [
+                        {
+                            provide: ROUTES,
+                            multi: true,
+                            useFactory: routesFacory,
+                        },
+                        provideEntity([RootConfig.entities.report.fullName, RootConfig.entities.category.fullName]),
+                        // Module Manifest Provider
+                        {
+                            provide: AXP_MODULE_MANIFEST_PROVIDER,
+                            useValue: ReportManagementManifest,
+                            multi: true,
+                        },
+                        // Provider references (now using tokens)
+                        {
+                            provide: AXP_PERMISSION_DEFINITION_PROVIDER,
+                            useClass: AXMPermissionDefinitionProvider,
+                            multi: true,
+                        },
+                        {
+                            provide: AXP_MENU_PROVIDER,
+                            useClass: AXMMenuProvider,
+                            multi: true,
+                        },
+                        {
+                            provide: AXP_ENTITY_DEFINITION_LOADER,
+                            useClass: AXMEntityProvider,
+                            multi: true,
+                        },
+                        {
+                            provide: AXP_FEATURE_DEFINITION_PROVIDER,
+                            useClass: AXPReportManagementFeatureDefinitionProvider,
+                            multi: true,
+                        },
+                        provideCommandSetups([
+                            {
+                                key: 'ReportManagement.Report:DrillToReport',
+                                command: () => Promise.resolve().then(function () { return drillToReport_command; }).then((c) => c.AXPDrillToReportCommand),
+                            },
+                        ]),
+                    ],
+                }]
+        }] });
+
+//#endregion
+class AXPDrillToReportCommand {
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.popupService = inject(AXPopupService);
+        this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
+        this.translate = inject(AXTranslationService);
+    }
+    //#endregion
+    //#region ----   Command Implementation   ----
+    async execute(input) {
+        const rowData = this.resolveRowData(input);
+        const options = await this.resolveOptions(input, rowData);
+        if (!options.reportId) {
+            return {
+                success: false,
+                message: {
+                    text: await this.translate.translateAsync('@report-management:report-viewer.messages.error.invalid-drill-target'),
+                },
+            };
+        }
+        const popupTitle = await this.resolvePopupTitle(options.title, rowData);
+        const comp = (await import('./acorex-platform-module-report-management-client-report-drill-popup.component-CvfwhlEp.mjs')).AXPReportDrillPopupComponent;
+        this.popupService.open(comp, {
+            title: popupTitle,
+            size: 'lg',
+            data: {
+                reportId: options.reportId,
+                layoutId: options.layoutId,
+                parameters: options.parameters ?? {},
+                hideColumnFields: options.hideColumnFields ?? [],
+            },
+        });
+        return { success: true };
+    }
+    //#endregion
+    //#region ----   Helpers   ----
+    resolveRowData(input) {
+        const ctx = input.__context__;
+        if (ctx?.data && typeof ctx.data === 'object') {
+            return ctx.data;
+        }
+        if (input['data'] && typeof input['data'] === 'object') {
+            return input['data'];
+        }
+        return input;
+    }
+    async resolveOptions(input, rowData) {
+        const ctx = input.__context__;
+        const typedInput = input;
+        const rawOptions = {
+            reportId: typedInput.reportId,
+            layoutId: typedInput.layoutId,
+            title: typedInput.title,
+            parameters: typedInput.parameters,
+            hideColumnFields: typedInput.hideColumnFields,
+            ...(typedInput.options ?? {}),
+            ...(ctx?.options ?? {}),
+        };
+        const scope = {
+            context: {
+                eval: (path) => get(rowData, path),
+            },
+        };
+        return (await this.expressionEvaluator.evaluate(rawOptions, scope));
+    }
+    async resolvePopupTitle(title, rowData) {
+        if (!isString(title) || !title.trim()) {
+            return await this.translate.translateAsync('@report-management:report-viewer.components.report-drill-popup.title');
+        }
+        const scope = {
+            context: {
+                eval: (path) => get(rowData, path),
+            },
+        };
+        const evaluated = await this.expressionEvaluator.evaluate(title, scope);
+        return isString(evaluated) ? evaluated : title;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDrillToReportCommand, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDrillToReportCommand, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDrillToReportCommand, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+var drillToReport_command = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPDrillToReportCommand: AXPDrillToReportCommand
+});
+
+//#endregion
+
+//#region ----   Imports   ----
+//#endregion
+/**
+ * Report Viewer Service
+ *
+ * Handles report definition retrieval, caching, and layout actions.
+ *
+ * Performance optimizations:
+ * 1. Uses childrenCount to determine if category has children (no query needed)
+ * 2. Uses itemsCount to determine if category has reports (no query needed)
+ * 3. Aggressive caching prevents duplicate API calls
+ * 4. Single pending request per resource prevents race conditions
+ * 5. Lazy loading - only loads data when needed
+ */
+class AXPReportViewerService {
+    constructor() {
+        //#region ----   Dependencies   ----
+        this.entityService = inject(AXPEntityService);
+        this.reportCategoryService = this.entityService.withEntity(RootConfig.module.name, RootConfig.entities.report.name + "Category").data();
+        this.reportDefinitionService = this.entityService.withEntity(RootConfig.module.name, RootConfig.entities.report.name).data();
+        //#endregion
+        //#region ----   Cache Storage   ----
+        /** Cache for categories by id - O(1) lookup */
+        this.categoriesById = new Map();
+        /** Cache for categories by parentId - O(1) lookup */
+        this.categoriesByParentId = new Map();
+        /** Cache for report definitions by categoryId - O(1) lookup */
+        this.definitionsByCategory = new Map();
+        /** Cache for individual report definitions by id - O(1) lookup */
+        this.definitionsById = new Map();
+        /** Pending API requests to prevent duplicate calls */
+        this.pendingCategoriesRequests = new Map();
+        this.pendingDefinitionsRequests = new Map();
+        this.pendingReportRequests = new Map();
+    }
+    //#endregion
+    //#region ----   Public API: Categories   ----
+    /**
+     * Get categories by parentId with aggressive caching
+     *
+     * Optimization: Returns cached result immediately if available,
+     * preventing unnecessary API calls during navigation
+     *
+     * @param parentId - Parent category ID (undefined = root categories)
+     * @returns Array of categories with count metadata (childrenCount, itemsCount)
+     */
+    async getCategories(parentId) {
+        // ✅ Fast path: Return cached result
+        if (this.categoriesByParentId.has(parentId)) {
+            return this.categoriesByParentId.get(parentId);
+        }
+        // ✅ Prevent duplicate requests: Return pending promise
+        if (this.pendingCategoriesRequests.has(parentId)) {
+            return this.pendingCategoriesRequests.get(parentId);
+        }
+        // ✅ Create single request and cache it
+        const requestPromise = this.loadCategories(parentId);
+        this.pendingCategoriesRequests.set(parentId, requestPromise);
+        return requestPromise;
+    }
+    /**
+     * Get single category by ID with O(1) lookup
+     *
+     * Optimization: Uses Map for instant retrieval, falls back to
+     * searching cache, then providers if not found
+     */
+    async getCategoryById(categoryId) {
+        // ✅ Fast path: O(1) lookup in cache
+        if (this.categoriesById.has(categoryId)) {
+            return this.categoriesById.get(categoryId);
+        }
+        // ✅ Search in cached parent-child lists
+        for (const categories of this.categoriesByParentId.values()) {
+            const found = categories.find(cat => cat.id === categoryId);
+            if (found) {
+                this.categoriesById.set(categoryId, found);
+                return found;
+            }
+        }
+        // ✅ Load root categories if not loaded
+        if (!this.categoriesByParentId.has(undefined)) {
+            await this.getCategories();
+            if (this.categoriesById.has(categoryId)) {
+                return this.categoriesById.get(categoryId);
+            }
+        }
+        // ✅ Breadth-first search through hierarchy
+        return this.searchCategoryInHierarchy(categoryId);
+    }
+    /**
+     * Get category path from root to specified category
+     *
+     * Optimization: Builds path using cached categories only
+     */
+    async getCategoriesPathById(categoryId) {
+        const path = [];
+        let currentCategoryId = categoryId;
+        while (currentCategoryId) {
+            const category = await this.getCategoryById(currentCategoryId);
+            if (!category) {
+                throw new Error(`Category '${currentCategoryId}' not found`);
+            }
+            path.unshift(category);
+            currentCategoryId = category.parentId;
+        }
+        return path;
+    }
+    //#endregion
+    //#region ----   Public API: Report Definitions   ----
+    /**
+     * Get report definitions for a category with smart caching
+     *
+     * Optimization: Checks itemsCount before querying
+     * - If itemsCount = 0, returns empty array (no API call)
+     * - If itemsCount > 0, loads and caches reports
+     * - Returns cached result on subsequent calls
+     *
+     * @param categoryId - Category ID to get reports from
+     * @returns Array of report definitions
+     */
+    async getReportsByCategoryId(categoryId) {
+        // ✅ Fast path: Return cached result
+        if (this.definitionsByCategory.has(categoryId)) {
+            return this.definitionsByCategory.get(categoryId);
+        }
+        // ✅ Smart optimization: Check itemsCount before querying
+        const category = await this.getCategoryById(categoryId);
+        if (category && category.itemsCount !== undefined && category.itemsCount === 0) {
+            // Category has no reports - cache empty array and skip API call
+            const emptyArray = [];
+            this.definitionsByCategory.set(categoryId, emptyArray);
+            return emptyArray;
+        }
+        // ✅ Prevent duplicate requests
+        if (this.pendingDefinitionsRequests.has(categoryId)) {
+            return this.pendingDefinitionsRequests.get(categoryId);
+        }
+        // ✅ Load from entity service
+        const requestPromise = this.loadReports(categoryId);
+        this.pendingDefinitionsRequests.set(categoryId, requestPromise);
+        return requestPromise;
+    }
+    /**
+     * Get single report definition by ID with O(1) lookup
+     *
+     * Optimization: Uses Map for instant retrieval
+     */
+    async getReportById(id) {
+        // ✅ Fast path: O(1) lookup in cache
+        if (this.definitionsById.has(id)) {
+            return this.definitionsById.get(id);
+        }
+        // ✅ Prevent duplicate requests
+        if (this.pendingReportRequests.has(id)) {
+            return this.pendingReportRequests.get(id);
+        }
+        // ✅ Load from entity service
+        const requestPromise = this.loadReport(id);
+        this.pendingReportRequests.set(id, requestPromise);
+        return requestPromise;
+    }
+    /**
+     * Get category ID containing a specific report
+     *
+     * Optimization: Searches cache first, loads on-demand if needed
+     */
+    async getCategoryIdByReportId(reportId) {
+        // ✅ Search in cached reports
+        for (const [categoryId, reports] of this.definitionsByCategory.entries()) {
+            if (reports.some(report => report.id === reportId)) {
+                return categoryId;
+            }
+        }
+        // ✅ Try loading the report to find its category
+        const report = await this.getReportById(reportId);
+        if (report && report.categoryIds && report.categoryIds.length > 0) {
+            return report.categoryIds[0]; // Return first category
+        }
+        return undefined;
+    }
+    /**
+     * Get category path for a report
+     */
+    async getCategoriesPathByReportId(reportId) {
+        const categoryId = await this.getCategoryIdByReportId(reportId);
+        if (!categoryId) {
+            throw new Error(`Report '${reportId}' not found in any category`);
+        }
+        return this.getCategoriesPathById(categoryId);
+    }
+    //#endregion
+    //#region ----   Public API: Layout Actions   ----
+    /**
+     * Get general actions list for a layout type
+     * Override in connectivity layer (mock/API) to provide general actions
+     * Base implementation returns empty array
+     *
+     * @param layoutType - The layout type
+     * @returns Array of general actions for the layout type
+     */
+    getGeneralActionsList(layoutType) {
+        return [];
+    }
+    /**
+     * Get merged actions for a layout definition
+     * Combines general actions (from getGeneralActionsList) with layout-specific actions
+     * Layout-specific actions take precedence (by name) over general actions
+     *
+     * @param layoutDefinition - The layout definition
+     * @returns Merged array of actions (general + custom)
+     */
+    getMergedActions(layoutDefinition) {
+        const generalActions = this.getGeneralActionsList(layoutDefinition.layout.type);
+        const customActions = layoutDefinition.actions || [];
+        // Create a map of custom actions by name for quick lookup
+        const customActionsMap = new Map();
+        customActions.forEach(action => {
+            if (action.name) {
+                customActionsMap.set(action.name, action);
+            }
+        });
+        // Merge: Start with general actions, replace with custom if name matches
+        const merged = [];
+        const usedNames = new Set();
+        // Add general actions (unless overridden by custom)
+        generalActions.forEach(action => {
+            if (action.name && customActionsMap.has(action.name)) {
+                // Custom action overrides general action
+                merged.push(customActionsMap.get(action.name));
+                usedNames.add(action.name);
+            }
+            else {
+                merged.push(action);
+                if (action.name) {
+                    usedNames.add(action.name);
+                }
+            }
+        });
+        // Add custom actions that weren't already added (new actions)
+        customActions.forEach(action => {
+            if (action.name && !usedNames.has(action.name)) {
+                merged.push(action);
+                usedNames.add(action.name);
+            }
+            else if (!action.name) {
+                // Actions without names are always added
+                merged.push(action);
+            }
+        });
+        return merged;
+    }
+    /**
+     * Get primary actions for a layout definition
+     */
+    getPrimaryActions(layoutDefinition) {
+        return this.getMergedActions(layoutDefinition).filter(action => action.priority === 'primary');
+    }
+    /**
+     * Get secondary actions for a layout definition
+     */
+    getSecondaryActions(layoutDefinition) {
+        return this.getMergedActions(layoutDefinition).filter(action => action.priority === 'secondary');
+    }
+    //#endregion
+    //#region ----   Private: Data Loading   ----
+    /**
+     * Load categories from entity service and cache results
+     * Can be overridden in extended services (e.g., API layer)
+     */
+    async loadCategories(parentId) {
+        try {
+            const list = [];
+            if (parentId) {
+                const result = await this.reportCategoryService.query({
+                    skip: 0,
+                    take: 1000,
+                    filter: {
+                        logic: 'and',
+                        filters: [{
+                                field: 'parentId',
+                                operator: {
+                                    type: 'equal',
+                                },
+                                value: parentId,
+                            }]
+                    }
+                });
+                list.push(...result.items);
+            }
+            else {
+                const result = await this.reportCategoryService.query();
+                list.push(...result.items);
+            }
+            // ✅ Cache results for fast subsequent access
+            this.categoriesByParentId.set(parentId, list);
+            list.forEach(cat => this.categoriesById.set(cat.id, cat));
+            return list;
+        }
+        finally {
+            this.pendingCategoriesRequests.delete(parentId);
+        }
+    }
+    /**
+     * Load report definitions from entity service and cache results
+     * Can be overridden in extended services (e.g., API layer)
+     */
+    async loadReports(categoryId) {
+        try {
+            const list = [];
+            // Use 'contains' operator to filter by categoryIds array field
+            const result = await this.reportDefinitionService.query({
+                skip: 0,
+                take: 1000,
+                filter: {
+                    logic: 'and',
+                    filters: [{
+                            field: 'categoryIds',
+                            operator: {
+                                type: 'contains',
+                            },
+                            value: categoryId,
+                        }]
+                }
+            });
+            list.push(...result.items);
+            // ✅ Cache results for fast subsequent access
+            this.definitionsByCategory.set(categoryId, list);
+            list.forEach(def => this.definitionsById.set(def.id, def));
+            return list;
+        }
+        finally {
+            this.pendingDefinitionsRequests.delete(categoryId);
+        }
+    }
+    /**
+     * Load single report from entity service and cache result
+     * Can be overridden in extended services (e.g., API layer)
+     */
+    async loadReport(id) {
+        try {
+            const result = await this.reportDefinitionService.byKey(id);
+            if (result) {
+                this.definitionsById.set(id, result);
+                return result;
+            }
+            // Fallback: Search in cached reports
+            for (const reports of this.definitionsByCategory.values()) {
+                const found = reports.find(report => report.id === id);
+                if (found) {
+                    this.definitionsById.set(id, found);
+                    return found;
+                }
+            }
+            return undefined;
+        }
+        finally {
+            this.pendingReportRequests.delete(id);
+        }
+    }
+    /**
+     * Breadth-first search through category hierarchy
+     */
+    async searchCategoryInHierarchy(categoryId) {
+        const searchQueue = [undefined];
+        const searched = new Set();
+        while (searchQueue.length > 0) {
+            const parentId = searchQueue.shift();
+            if (searched.has(parentId))
+                continue;
+            searched.add(parentId);
+            const categories = await this.getCategories(parentId);
+            const found = categories.find(cat => cat.id === categoryId);
+            if (found) {
+                return found;
+            }
+            // ✅ Optimization: Only search children if childrenCount > 0
+            for (const category of categories) {
+                if (category.childrenCount > 0 && !searched.has(category.id)) {
+                    searchQueue.push(category.id);
+                }
+            }
+        }
+        return undefined;
+    }
+    //#endregion
+    //#region ----   Cache Management   ----
+    /**
+     * Check if category has children (uses cached count)
+     */
+    categoryHasChildren(categoryId) {
+        const category = this.categoriesById.get(categoryId);
+        return category ? category.childrenCount > 0 : false;
+    }
+    /**
+     * Check if category has reports (uses cached count)
+     */
+    categoryHasReports(categoryId) {
+        const category = this.categoriesById.get(categoryId);
+        return category ? (category.itemsCount ?? 0) > 0 : false;
+    }
+    /**
+     * Protected: Check if categories are cached for a parentId
+     * Used by extended services (e.g., mock) to determine if logging is needed
+     */
+    isCategoriesCached(parentId) {
+        return this.categoriesByParentId.has(parentId) || this.pendingCategoriesRequests.has(parentId);
+    }
+    /**
+     * Protected: Check if a category is cached by ID
+     * Used by extended services (e.g., mock) to determine if logging is needed
+     */
+    isCategoryCached(categoryId) {
+        if (this.categoriesById.has(categoryId)) {
+            return true;
+        }
+        // Check if it might be in a cached parent list
+        for (const categories of this.categoriesByParentId.values()) {
+            if (categories.some(cat => cat.id === categoryId)) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Protected: Check if reports are cached for a categoryId
+     * Used by extended services (e.g., mock) to determine if logging is needed
+     */
+    isReportsCached(categoryId) {
+        return this.definitionsByCategory.has(categoryId) || this.pendingDefinitionsRequests.has(categoryId);
+    }
+    /**
+     * Protected: Check if a report is cached by ID
+     * Used by extended services (e.g., mock) to determine if logging is needed
+     */
+    isReportCached(reportId) {
+        return this.definitionsById.has(reportId) || this.pendingReportRequests.has(reportId);
+    }
+    /**
+     * Clear all caches
+     */
+    clearAllCache() {
+        this.categoriesById.clear();
+        this.categoriesByParentId.clear();
+        this.definitionsByCategory.clear();
+        this.definitionsById.clear();
+        this.pendingCategoriesRequests.clear();
+        this.pendingDefinitionsRequests.clear();
+        this.pendingReportRequests.clear();
+    }
+    /**
+     * Clear categories cache only
+     */
+    clearCategoriesCache() {
+        this.categoriesById.clear();
+        this.categoriesByParentId.clear();
+        this.pendingCategoriesRequests.clear();
+    }
+    /**
+     * Clear reports cache only
+     */
+    clearReportsCache() {
+        this.definitionsByCategory.clear();
+        this.definitionsById.clear();
+        this.pendingDefinitionsRequests.clear();
+        this.pendingReportRequests.clear();
+    }
+    //#endregion
+    //#endregion
+    //#region ----   Report Execution (Override in Connectivity Layer)   ----
+    /**
+     * Execute report with given context
+     * Override in connectivity layer (mock/API) to implement report execution
+     *
+     * @param context - Layout execution context with reportId, layoutId, dataSource, and filters
+     * @returns Report execution result with layout and data
+     */
+    async executeReport(context) {
+        throw new Error('executeReport must be implemented in connectivity layer (mock/API)');
+    }
+    //#endregion
+    //#region ----   Action Handlers (Override in Connectivity Layer)   ----
+    /**
+     * Execute action by command name
+     * Override in connectivity layer (mock/API) to implement action execution
+     *
+     * @param commandName - Command name (e.g., 'download-report', 'print-report', 'export-report')
+     * @param options - Command options (e.g., { format: 'excel', pdfData: {...}, reportData: {...} })
+     */
+    async executeAction(commandName, options) {
+        console.log(`Execute action: ${commandName} - should be implemented in connectivity layer`, options);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportViewerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportViewerService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
+
+function AXPieChartReportMapper(data) {
+    return Object.entries(data).map(([key, value]) => ({
+        id: key,
+        label: key,
+        value: value,
+    }));
+}
+function AXBarChartReportMapper(data) {
+    return Object.entries(data).map(([key, value]) => ({
+        id: key,
+        label: key,
+        value: value,
+    }));
+}
+function AXLineChartReportMapper(data) {
+    const entries = Object.entries(data);
+    if (entries.length === 0) {
+        return [];
+    }
+    const dataPoints = entries.map(([key, value]) => ({
+        x: key,
+        y: value,
+    }));
+    return [
+        {
+            id: 'series-1',
+            label: 'Data Series',
+            tooltipLabel: 'Countries Info',
+            lineColor: '#d81159',
+            fillColor: '#d8115920',
+            data: dataPoints,
+        },
+    ];
+}
+//#region ----   Helpers   ----
+/**
+ * Determines whether a filter value should be treated as empty.
+ * This handles deep objects, arrays, and primitives so that
+ * values like { from: null, to: null } are considered empty.
+ */
+function isEmptyFilterValue(value) {
+    if (value === null || value === undefined || value === '') {
+        return true;
+    }
+    if (Array.isArray(value)) {
+        return value.length === 0 || value.every((item) => isEmptyFilterValue(item));
+    }
+    if (typeof value === 'object') {
+        const entries = Object.entries(value);
+        if (entries.length === 0) {
+            return true;
+        }
+        // Consider object empty if all nested values are empty
+        return entries.every(([, v]) => isEmptyFilterValue(v));
+    }
+    return false;
+}
+//#endregion
+/**
+ * Converts AXPContextData (filter context) to AXPFilterClause format
+ *
+ * Input format:
+ * {
+ *   "fieldName": {
+ *     "operation": { "type": "between" },
+ *     "value": { "from": "...", "to": "..." }
+ *   }
+ * }
+ *
+ * Output format:
+ * {
+ *   logic: 'and',
+ *   filters: [
+ *     {
+ *       field: 'fieldName',
+ *       operator: { type: 'between' },
+ *       value: { from: "...", to: "..." }
+ *     }
+ *   ]
+ * }
+ */
+function convertContextDataToFilterClause(context) {
+    const filters = [];
+    // Iterate through all keys in context
+    for (const [fieldName, fieldData] of Object.entries(context)) {
+        if (fieldName.endsWith('EditorObj') || fieldName.startsWith('__')) {
+            continue;
+        }
+        // Drill-down and URL shortcuts may pass plain parameter values (e.g. { brand: 'id' })
+        if (fieldData === null || fieldData === undefined || typeof fieldData !== 'object' || Array.isArray(fieldData)) {
+            if (!isEmptyFilterValue(fieldData)) {
+                filters.push({
+                    field: fieldName,
+                    operator: {
+                        type: Array.isArray(fieldData) ? 'in' : 'equal',
+                    },
+                    value: fieldData,
+                });
+            }
+            continue;
+        }
+        // Skip structured filter objects without operation metadata
+        if (!('operation' in fieldData)) {
+            continue;
+        }
+        const operation = fieldData.operation;
+        const value = fieldData.value;
+        // Skip if operation type is missing
+        if (!operation || !operation.type) {
+            continue;
+        }
+        // Skip if value is effectively empty (null/undefined/empty string,
+        // empty object/array, or deep object where all nested values are empty)
+        if (isEmptyFilterValue(value)) {
+            continue;
+        }
+        // Create filter clause
+        const filter = {
+            field: fieldName,
+            operator: {
+                type: operation.type,
+            },
+            value: value,
+        };
+        filters.push(filter);
+    }
+    // Return filter clause with AND logic
+    if (filters.length === 0) {
+        return {
+            logic: 'and',
+            filters: [],
+        };
+    }
+    return {
+        logic: 'and',
+        filters: filters,
+    };
+}
+
+//#region ----   Report Viewer User Settings Service   ----
+class AXPReportViewerUserSettingsService {
+    constructor() {
+        this.settingsService = inject(AXPSettingsService);
+    }
+    getSettingKey(reportId) {
+        return `ReportManagement:Report:${reportId}`;
+    }
+    async load(reportId) {
+        const stored = await this.settingsService.get(this.getSettingKey(reportId));
+        return stored ?? null;
+    }
+    getTableLayoutState(settings, layoutId) {
+        return settings?.layouts?.[layoutId]?.table;
+    }
+    async saveActiveLayoutId(reportId, layoutId) {
+        await this.patch(reportId, (prev) => ({
+            ...prev,
+            activeLayoutId: layoutId,
+        }));
+    }
+    async saveTableColumnOrder(reportId, layoutId, columns) {
+        await this.patchTable(reportId, layoutId, (table) => ({
+            ...table,
+            columns,
+        }));
+    }
+    async saveTableColumnWidth(reportId, layoutId, field, width, baseColumns) {
+        const columns = baseColumns.map((col) => col.field === field ? { ...col, width } : col);
+        await this.saveTableColumnOrder(reportId, layoutId, columns);
+    }
+    async saveTableSorts(reportId, layoutId, sorts) {
+        await this.patchTable(reportId, layoutId, (table) => ({
+            ...table,
+            sorts,
+        }));
+    }
+    async saveTablePageSize(reportId, layoutId, pageSize) {
+        await this.patchTable(reportId, layoutId, (table) => ({
+            ...table,
+            pageSize,
+        }));
+    }
+    async patch(reportId, updateFn) {
+        await this.settingsService.scope(AXPPlatformScope.User).update(this.getSettingKey(reportId), (prev) => {
+            const base = (prev && typeof prev === 'object' ? prev : {});
+            return updateFn(base);
+        });
+    }
+    async patchTable(reportId, layoutId, updateFn) {
+        await this.patch(reportId, (prev) => {
+            const next = { ...prev };
+            const currentTable = prev.layouts?.[layoutId]?.table ?? {};
+            const updatedTable = updateFn(currentTable);
+            set(next, `layouts.${layoutId}.table`, updatedTable);
+            return next;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportViewerUserSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportViewerUserSettingsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportViewerUserSettingsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+//#region ----   Constants   ----
+const DRILL_TO_REPORT_COMMAND = 'ReportManagement.Report:DrillToReport';
+//#endregion
+//#region ----   Row Action Builder   ----
+/**
+ * Builds table row actions from declarative group-by drill-down definitions.
+ * Skips row commands when linked display columns are used.
+ */
+function buildDrillRowActionsFromGroupBy(definitions, currentReportId) {
+    if (!definitions?.length || !currentReportId || hasGroupByDrillLinks(definitions)) {
+        return [];
+    }
+    const hasExplicitDefault = definitions.some((definition) => definition.default);
+    return definitions.map((definition, index) => {
+        const isDefault = definition.default ?? (!hasExplicitDefault && index === 0);
+        return {
+            title: definition.title ?? 'View',
+            command: {
+                name: DRILL_TO_REPORT_COMMAND,
+                options: buildDrillCommandOptions(definition, currentReportId),
+            },
+            type: 'view',
+            priority: definition.priority ?? 'primary',
+            default: isDefault,
+            iconOnly: false,
+        };
+    });
+}
+//#endregion
+//#region ----   Drill Link Columns   ----
+/**
+ * Whether group-by definitions use linked display columns instead of row command actions.
+ */
+function hasGroupByDrillLinks(definitions) {
+    return definitions?.some((definition) => isGroupByDrillLinkDefinition(definition)) ?? false;
+}
+function isGroupByDrillLinkDefinition(definition) {
+    return Boolean(definition.displayField) && definition.linkDisplay !== false;
+}
+function findGroupByDefinitionForDisplayField(definitions, field) {
+    return definitions?.find((definition) => definition.displayField === field && isGroupByDrillLinkDefinition(definition));
+}
+function buildGroupByDrillCommandOptions(definition, currentReportId) {
+    return buildDrillCommandOptions(definition, currentReportId);
+}
+function resolveGroupByDrillLinkFields(definitions) {
+    if (!definitions?.length) {
+        return [];
+    }
+    return definitions
+        .filter((definition) => isGroupByDrillLinkDefinition(definition))
+        .map((definition) => definition.displayField)
+        .filter(Boolean);
+}
+//#endregion
+//#region ----   Helpers   ----
+function buildDrillCommandOptions(definition, currentReportId) {
+    const drillDown = definition.drillDown;
+    const reportId = drillDown.reportId ?? currentReportId;
+    return {
+        reportId,
+        layoutId: drillDown.layoutId,
+        title: resolveDrillTitle(definition, drillDown.title),
+        parameters: mapDrillParameters(drillDown.parameters),
+        hideColumnFields: resolveDrillHideColumnFields(definition),
+    };
+}
+function resolveDrillHideColumnFields(definition) {
+    const fields = new Set(definition.fields);
+    if (definition.displayField) {
+        fields.add(definition.displayField);
+    }
+    return [...fields];
+}
+function resolveDrillTitle(definition, explicitTitle) {
+    if (explicitTitle) {
+        return explicitTitle;
+    }
+    if (definition.displayField) {
+        return `{{ context.eval('${definition.displayField}') }}`;
+    }
+    return undefined;
+}
+function mapDrillParameters(parameters) {
+    if (!parameters) {
+        return undefined;
+    }
+    return Object.fromEntries(Object.entries(parameters).map(([parameterKey, rowField]) => [
+        parameterKey,
+        toRowExpression(rowField),
+    ]));
+}
+function toRowExpression(value) {
+    const trimmed = value.trim();
+    if (trimmed.includes('{{') || trimmed.includes('context.eval')) {
+        return value;
+    }
+    return `{{ context.eval('${value}') }}`;
+}
+//#endregion
+
+/** Infers a column display widget when the report definition omits `widget.type`. */
+const NUMERIC_COLUMN_FIELD_PATTERN = /(?:count|total|average|avg|min|max|price|value|amount|quantity|number|year|month|quarter|experience|rate|percent|score|age|duration|hours?|days?)$/i;
+function buildReportTableColumns(definitionColumns, savedColumns) {
+    const base = definitionColumns
+        ?.filter((col) => col.visible !== false)
+        .map((col) => mapDefinitionColumn(col)) ?? [];
+    if (!savedColumns?.length) {
+        return base;
+    }
+    const widthMap = new Map(savedColumns.map((col) => [col.field, col.width]));
+    const orderIndex = new Map(savedColumns.map((col, index) => [col.field, index]));
+    return [...base]
+        .map((col) => {
+        const savedWidth = widthMap.get(col.field);
+        const resolvedWidth = typeof savedWidth === 'number' ? savedWidth : parseColumnResizeWidth(savedWidth) ?? col.width;
+        return {
+            ...col,
+            width: resolvedWidth,
+        };
+    })
+        .sort((a, b) => {
+        const aIndex = orderIndex.get(a.field) ?? Number.MAX_SAFE_INTEGER;
+        const bIndex = orderIndex.get(b.field) ?? Number.MAX_SAFE_INTEGER;
+        return aIndex - bIndex;
+    });
+}
+function toColumnUserState(columns) {
+    return columns.map((col) => ({
+        field: col.field,
+        width: typeof col.width === 'number' ? col.width : parseColumnResizeWidth(col.width) ?? undefined,
+    }));
+}
+function inferReportColumnWidgetType(field) {
+    return NUMERIC_COLUMN_FIELD_PATTERN.test(field)
+        ? AXPWidgetsList.Editors.NumberBox
+        : AXPWidgetsList.Editors.TextBox;
+}
+function resolveColumnWidget(col) {
+    const path = col.widget?.path ?? col.field;
+    if (col.widget?.type) {
+        return { ...col.widget, path };
+    }
+    return {
+        type: inferReportColumnWidgetType(col.field),
+        path,
+    };
+}
+function mapDefinitionColumn(col) {
+    return {
+        field: col.field,
+        title: col.title || col.field,
+        width: col.width || 'auto',
+        visible: col.visible !== false,
+        align: col.align || 'left',
+        sortable: col.sortable === true,
+        pin: col.pin,
+        widget: resolveColumnWidget(col),
+    };
+}
+function parseColumnResizeWidth(value) {
+    if (typeof value === 'number' && Number.isFinite(value)) {
+        return value;
+    }
+    if (typeof value === 'string') {
+        const parsed = Number.parseInt(value, 10);
+        return Number.isFinite(parsed) ? parsed : null;
+    }
+    return null;
+}
+function resolveColumnFieldFromDataField(dataField) {
+    if (dataField.startsWith('col-')) {
+        return dataField.slice(4);
+    }
+    if (dataField.includes('-')) {
+        return dataField.split('-').slice(1).join('-');
+    }
+    return dataField;
+}
+function applyGroupByDrillLinksToColumns(columns, groupByDefinitions) {
+    if (!groupByDefinitions?.length) {
+        return columns;
+    }
+    const linkFields = new Set(groupByDefinitions
+        .filter((definition) => isGroupByDrillLinkDefinition(definition))
+        .map((definition) => definition.displayField)
+        .filter(Boolean));
+    if (linkFields.size === 0) {
+        return columns;
+    }
+    return columns.map((column) => {
+        if (!linkFields.has(column.field)) {
+            return column;
+        }
+        return {
+            ...column,
+            isGroupByDrillLink: true,
+            drillDisplayField: column.field,
+        };
+    });
+}
+//#endregion
+
+const AXPReportViewerViewModel = signalStore(withState(() => ({
+    reportDefinition: null,
+    currentLayout: null,
+    filterContext: {},
+    categoriesPath: [],
+    allowFetchData: false,
+    shouldExecuteReport: false,
+    executionRequestId: 0,
+    lastAppliedFilterContext: null, // Track last applied filters
+    hasBeenExecuted: false, // Track if report has been executed at least once
+    status: AXPPageStatus.Idle,
+    error: null,
+    showRowIndexColumn: false,
+    reportUserSettings: null,
+})), withComputed((store, widgetRegistryService = inject(AXPWidgetRegistryService)) => ({
+    //#region ----   Layout Management   ----
+    availableLayouts: computed(() => {
+        const report = store.reportDefinition();
+        if (!report?.layouts)
+            return [];
+        return report.layouts.map((layout) => ({
+            id: layout.id,
+            title: layout.title,
+            icon: layout.icon,
+            type: layout.layout.type,
+        }));
+    }),
+    defaultLayout: computed(() => {
+        const report = store.reportDefinition();
+        if (!report?.layouts?.length)
+            return null;
+        // Find layout marked as default, or use first layout
+        return report.layouts.find((l) => l.isDefault) || report.layouts[0];
+    }),
+    activeLayoutId: computed(() => store.currentLayout()?.id || null),
+    layoutType: computed(() => store.currentLayout()?.layout?.type || null),
+    //#endregion
+    //#region ----   Layout-Specific Configurations   ----
+    tableLayoutConfig: computed(() => {
+        const layout = store.currentLayout();
+        return layout?.layout?.type === 'table' ? layout.layout : null;
+    }),
+    chartLayoutConfig: computed(() => {
+        const layout = store.currentLayout();
+        return layout?.layout?.type === 'chart' ? layout.layout : null;
+    }),
+    pdfLayoutConfig: computed(() => {
+        const layout = store.currentLayout();
+        return layout?.layout?.type === 'pdf' ? layout.layout : null;
+    }),
+    //#endregion
+    //#region ----   State Indicators   ----
+    isLoading: computed(() => store.status() === AXPPageStatus.Processing),
+    isExecuting: computed(() => store.status() === AXPPageStatus.Submitting),
+    hasError: computed(() => store.error() !== null),
+    canExecute: computed(() => {
+        // Always allow execution if there's an error (to enable retry)
+        if (store.error() !== null) {
+            return true;
+        }
+        // Allow execution if there are unapplied filters
+        const currentContext = store.filterContext();
+        const lastApplied = store.lastAppliedFilterContext();
+        const hasBeenExecuted = store.hasBeenExecuted();
+        if (hasBeenExecuted && JSON.stringify(currentContext) !== JSON.stringify(lastApplied)) {
+            return true;
+        }
+        // Allow execution if report hasn't been executed yet
+        if (!hasBeenExecuted) {
+            return true;
+        }
+        // Otherwise, don't allow execution
+        return false;
+    }),
+    hasMultipleLayouts: computed(() => {
+        const report = store.reportDefinition();
+        return (report?.layouts?.length ?? 0) > 1;
+    }),
+    title: computed(() => store.reportDefinition()?.title ?? '@report-management:report-viewer.components.report-viewer.title'),
+    description: computed(() => store.reportDefinition()?.description ?? null),
+    //#endregion
+    //#region ----   Form Configuration   ----
+    formDefinition: computed(() => {
+        const report = store.reportDefinition();
+        if (!report || !report.parameterGroups) {
+            return { groups: [] };
+        }
+        const formDefinition = {
+            groups: report.parameterGroups.map((group) => ({
+                name: group.name,
+                title: group.title,
+                description: group.description,
+                parameters: group.parameters.map((param) => {
+                    const editorType = param.widget.type ?? '';
+                    const widget = widgetRegistryService.getOptional(editorType);
+                    const filterType = widget?.defaultFilterWidgetName ?? editorType;
+                    // date-time / text filter aliases do not mount reliably in report filter forms;
+                    // keep the editor widget and enable filterMode instead.
+                    const useEditorFilter = editorType === 'date-time-editor' ||
+                        filterType === 'datetime-filter' ||
+                        editorType === 'text-editor' ||
+                        filterType === 'string-filter';
+                    const widgetType = useEditorFilter ? editorType || filterType : filterType;
+                    return {
+                        path: param.path,
+                        title: param.title,
+                        description: param.description,
+                        badge: `{{ filter.getTitle(context.eval("${param.path}.operation.type")) }}`,
+                        widget: {
+                            path: param.path,
+                            type: widgetType,
+                            options: {
+                                ...param.widget.options,
+                                clearButton: true,
+                                hasClearButton: true,
+                                ...(useEditorFilter ? { filterMode: true } : {}),
+                            },
+                            triggers: param.widget.triggers,
+                        }
+                    };
+                }),
+            })),
+        };
+        return formDefinition;
+    }),
+    //#endregion
+    //#region ----   Layout Type Detection   ----
+    isTableLayout: computed(() => store.currentLayout()?.layout?.type === 'table'),
+    isChartLayout: computed(() => store.currentLayout()?.layout?.type === 'chart'),
+    isPdfLayout: computed(() => store.currentLayout()?.layout?.type === 'pdf'),
+    //#endregion
+    //#region ----   Filter States   ----
+    hasUnappliedFilters: computed(() => {
+        const currentContext = store.filterContext();
+        const lastApplied = store.lastAppliedFilterContext();
+        const hasBeenExecuted = store.hasBeenExecuted();
+        // If report has never been executed, don't show unapplied filters warning
+        if (!hasBeenExecuted) {
+            return false;
+        }
+        // If no filters have been applied yet, return true
+        if (lastApplied === null) {
+            return true;
+        }
+        // Check if current filters are different from last applied filters
+        const currentKeys = Object.keys(currentContext);
+        const lastKeys = Object.keys(lastApplied);
+        if (currentKeys.length !== lastKeys.length) {
+            return true;
+        }
+        // Check if any values are different
+        for (const key of currentKeys) {
+            if (currentContext[key] !== lastApplied[key]) {
+                return true;
+            }
+        }
+        return false;
+    }),
+    //#endregion
+    //#region ----   Action States   ----
+    canSwitchLayout: computed(() => (store.reportDefinition()?.layouts?.length ?? 0) > 1 && store.status() !== AXPPageStatus.Submitting),
+    canSelectRows: computed(() => {
+        const layout = store.currentLayout();
+        return (layout?.layout?.type === 'table' &&
+            layout.layout.options?.selectable?.mode &&
+            layout.layout.options?.selectable?.mode !== 'none');
+    }),
+    tableLayoutUserSettings: computed(() => {
+        const settings = store.reportUserSettings();
+        const layoutId = store.currentLayout()?.id;
+        if (!settings || !layoutId) {
+            return null;
+        }
+        return settings.layouts?.[layoutId]?.table ?? null;
+    }),
+    reportId: computed(() => store.reportDefinition()?.id ?? null),
+    //#endregion
+})), withMethods((store, reportDefinitionService = inject(AXPReportViewerService), reportUserSettingsService = inject(AXPReportViewerUserSettingsService)) => {
+    let activeFetchCount = 0;
+    const executeReport = async () => {
+        try {
+            if (store.status() === AXPPageStatus.Processing ||
+                store.status() === AXPPageStatus.Submitting) {
+                return;
+            }
+            const report = store.reportDefinition();
+            const layout = store.currentLayout();
+            if (!report || !layout) {
+                patchState(store, {
+                    error: '@report-management:report-viewer.messages.error.report-or-layout-not-found',
+                });
+                return;
+            }
+            patchState(store, {
+                status: AXPPageStatus.Submitting,
+                error: null,
+                allowFetchData: true,
+                shouldExecuteReport: true,
+                executionRequestId: store.executionRequestId() + 1,
+                lastAppliedFilterContext: { ...store.filterContext() }, // Mark current filters as applied
+                hasBeenExecuted: true, // Mark that report has been executed at least once
+            });
+            patchState(store, {
+                status: AXPPageStatus.Submitted,
+                error: null,
+            });
+        }
+        catch (error) {
+            patchState(store, {
+                status: AXPPageStatus.Error,
+                error: error instanceof Error ? error.message : '@report-management:report-viewer.messages.error.unexpected-execution',
+            });
+        }
+    };
+    const fetchData = async (query) => {
+        const report = store.reportDefinition();
+        const layout = store.currentLayout();
+        if (!report || !layout) {
+            return null;
+        }
+        if (activeFetchCount > 0) {
+            return null;
+        }
+        activeFetchCount++;
+        patchState(store, {
+            status: AXPPageStatus.Processing,
+            error: null,
+        });
+        try {
+            const dataSource = layout.dataSource || {
+                type: 'query',
+                name: 'getEmployeeList',
+            };
+            const filterClause = convertContextDataToFilterClause(store.filterContext());
+            const runtimeSort = query?.sort?.length
+                ? query.sort.map((s) => ({
+                    name: s.field,
+                    dir: s.dir,
+                }))
+                : undefined;
+            const context = {
+                reportId: report.id,
+                layoutId: layout.id,
+                dataSource: dataSource,
+                filters: filterClause,
+                skip: query?.skip,
+                take: query?.take,
+                sort: runtimeSort,
+            };
+            const executionResult = await reportDefinitionService.executeReport(context);
+            return executionResult;
+        }
+        catch (error) {
+            patchState(store, {
+                error: '@report-management:report-viewer.messages.error.failed-to-execute',
+            });
+            console.error('Error executing report:', error);
+            return null;
+        }
+        finally {
+            activeFetchCount--;
+            patchState(store, {
+                status: AXPPageStatus.Idle,
+            });
+        }
+    };
+    return {
+        //#region ----   Report Loading   ----
+        async loadReport(reportId) {
+            patchState(store, {
+                status: AXPPageStatus.Processing,
+                error: null,
+            });
+            try {
+                const report = await reportDefinitionService.getReportById(reportId);
+                if (report) {
+                    // Configure parameter widgets with proper paths
+                    report.parameterGroups.forEach((group) => {
+                        group.parameters.forEach((param) => {
+                            param.widget.path = param.path;
+                        });
+                    });
+                    // Load categories path for breadcrumbs
+                    const categoriesPath = await reportDefinitionService.getCategoriesPathByReportId(reportId);
+                    const userSettings = await reportUserSettingsService.load(reportId);
+                    const defaultLayout = report.layouts.find((l) => l.isDefault) || report.layouts[0];
+                    const savedLayout = userSettings?.activeLayoutId
+                        ? report.layouts.find((l) => l.id === userSettings.activeLayoutId)
+                        : undefined;
+                    patchState(store, {
+                        reportDefinition: report,
+                        currentLayout: savedLayout ?? defaultLayout,
+                        categoriesPath: categoriesPath || [],
+                        filterContext: {},
+                        allowFetchData: false,
+                        hasBeenExecuted: false,
+                        executionRequestId: 0,
+                        reportUserSettings: userSettings,
+                    });
+                }
+            }
+            catch (error) {
+                patchState(store, {
+                    error: '@report-management:report-viewer.messages.error.failed-to-load',
+                });
+                console.error('Error loading report:', error);
+            }
+            finally {
+                patchState(store, {
+                    status: AXPPageStatus.Idle,
+                });
+            }
+        },
+        //#endregion
+        //#region ----   Layout Management   ----
+        switchLayout(layoutId) {
+            const report = store.reportDefinition();
+            if (!report)
+                return;
+            const layout = report.layouts.find((l) => l.id === layoutId);
+            if (layout) {
+                patchState(store, {
+                    currentLayout: layout,
+                    reportUserSettings: {
+                        ...(store.reportUserSettings() ?? {}),
+                        activeLayoutId: layoutId,
+                    },
+                });
+                void reportUserSettingsService.saveActiveLayoutId(report.id, layoutId);
+            }
+        },
+        async saveTableColumnOrder(columns) {
+            const reportId = store.reportDefinition()?.id;
+            const layoutId = store.currentLayout()?.id;
+            if (!reportId || !layoutId) {
+                return;
+            }
+            await reportUserSettingsService.saveTableColumnOrder(reportId, layoutId, toColumnUserState(columns));
+            patchState(store, {
+                reportUserSettings: mergeTableColumnsIntoSettings(store.reportUserSettings(), layoutId, toColumnUserState(columns)),
+            });
+        },
+        async saveTableColumnWidth(field, width, columns) {
+            const reportId = store.reportDefinition()?.id;
+            const layoutId = store.currentLayout()?.id;
+            if (!reportId || !layoutId) {
+                return;
+            }
+            const columnState = toColumnUserState(columns);
+            await reportUserSettingsService.saveTableColumnWidth(reportId, layoutId, field, width, columnState);
+            patchState(store, {
+                reportUserSettings: mergeTableColumnsIntoSettings(store.reportUserSettings(), layoutId, columnState),
+            });
+        },
+        async saveTableSorts(sorts) {
+            const reportId = store.reportDefinition()?.id;
+            const layoutId = store.currentLayout()?.id;
+            if (!reportId || !layoutId) {
+                return;
+            }
+            await reportUserSettingsService.saveTableSorts(reportId, layoutId, sorts);
+            patchState(store, {
+                reportUserSettings: mergeTableSortsIntoSettings(store.reportUserSettings(), layoutId, sorts),
+            });
+        },
+        async saveTablePageSize(pageSize) {
+            const reportId = store.reportDefinition()?.id;
+            const layoutId = store.currentLayout()?.id;
+            if (!reportId || !layoutId) {
+                return;
+            }
+            await reportUserSettingsService.saveTablePageSize(reportId, layoutId, pageSize);
+            patchState(store, {
+                reportUserSettings: mergeTablePageSizeIntoSettings(store.reportUserSettings(), layoutId, pageSize),
+            });
+        },
+        //#endregion
+        //#region ----   Data Execution   ----
+        executeReport,
+        fetchData,
+        //#endregion
+        //#region ----   Drill View   ----
+        /**
+         * Applies the same layout in drill-down mode: hides group-by columns, keeps summary and data source.
+         */
+        applyDrillView(options) {
+            const layout = store.currentLayout();
+            if (!layout || layout.layout.type !== 'table') {
+                return;
+            }
+            const tableLayout = layout.layout;
+            const hiddenFields = new Set(options.hideColumnFields);
+            const nextTableLayout = {
+                ...tableLayout,
+                columns: tableLayout.columns.map((column) => hiddenFields.has(column.field) ? { ...column, visible: false } : column),
+                groupBy: undefined,
+                actions: [],
+            };
+            patchState(store, {
+                currentLayout: {
+                    ...layout,
+                    layout: nextTableLayout,
+                },
+            });
+        },
+        //#endregion
+        //#region ----   Filter Management   ----
+        updateFilterContext(context) {
+            patchState(store, {
+                filterContext: { ...store.filterContext(), ...context },
+                shouldExecuteReport: false, // Reset execution flag when filters change
+            });
+        },
+        clearFilters() {
+            patchState(store, {
+                allowFetchData: false,
+                shouldExecuteReport: false,
+                filterContext: {},
+                lastAppliedFilterContext: null, // Reset applied filters when clearing
+                hasBeenExecuted: false, // Reset execution state when clearing filters
+            });
+        },
+        resetFilters() {
+            patchState(store, {
+                allowFetchData: false,
+            });
+        },
+        //#endregion
+        //#region ----   Export Management   ----
+        async exportReport(format) {
+            const layout = store.currentLayout();
+            if (!layout?.export) {
+                console.warn('@report-management:report-viewer.messages.warnings.export-not-configured');
+                return;
+            }
+            try {
+                // Export logic would go here
+                // This would typically call a different command for export
+                console.log(`Exporting report in ${format} format`);
+            }
+            catch (error) {
+                console.error('Error exporting report:', error);
+            }
+        },
+        //#endregion
+        //#region ----   Utility Methods   ----
+        refresh() {
+            return executeReport();
+        },
+        clearError() {
+            patchState(store, {
+                error: null,
+            });
+        },
+        clearExecutionState() {
+            patchState(store, {
+                hasBeenExecuted: false,
+                allowFetchData: false,
+                shouldExecuteReport: false,
+                executionRequestId: 0,
+            });
+        },
+        cancel() {
+            patchState(store, {
+                status: AXPPageStatus.Idle,
+                hasBeenExecuted: false,
+                error: null,
+            });
+            //TODO: Cancel the report execution
+        },
+        reset() {
+            patchState(store, {
+                reportDefinition: null,
+                currentLayout: null,
+                filterContext: {},
+                allowFetchData: false,
+                shouldExecuteReport: false,
+                executionRequestId: 0,
+                lastAppliedFilterContext: null,
+                hasBeenExecuted: false,
+                categoriesPath: [],
+                status: AXPPageStatus.Idle,
+                error: null,
+                reportUserSettings: null,
+            });
+        },
+        //#endregion
+    };
+}), withHooks((store, translationService = inject(AXTranslationService), localeService = inject(AXLocaleService), settingsService = inject(AXPSettingsService)) => {
+    const settingSubs = new Subscription();
+    const syncShowRowIndexColumn = async () => {
+        try {
+            const value = await settingsService.get(AXPCommonSettings.ShowRowIndexColumn);
+            patchState(store, { showRowIndexColumn: value ?? false });
+        }
+        catch {
+            patchState(store, { showRowIndexColumn: false });
+        }
+    };
+    return {
+        async onInit() {
+            translationService.langChanges$.subscribe(() => {
+                // Handle language change if needed
+            });
+            localeService.profileChanged$.subscribe(() => {
+                // Handle locale change if needed
+            });
+            void syncShowRowIndexColumn();
+            settingSubs.add(settingsService.onLoaded.subscribe(() => void syncShowRowIndexColumn()));
+            settingSubs.add(settingsService.onChanged.subscribe(() => void syncShowRowIndexColumn()));
+        },
+        onDestroy() {
+            settingSubs.unsubscribe();
+        },
+    };
+}));
+//#region ----   Settings Merge Helpers   ----
+function mergeTableColumnsIntoSettings(settings, layoutId, columns) {
+    const base = settings ?? {};
+    return {
+        ...base,
+        layouts: {
+            ...base.layouts,
+            [layoutId]: {
+                ...base.layouts?.[layoutId],
+                table: {
+                    ...base.layouts?.[layoutId]?.table,
+                    columns,
+                },
+            },
+        },
+    };
+}
+function mergeTableSortsIntoSettings(settings, layoutId, sorts) {
+    const base = settings ?? {};
+    return {
+        ...base,
+        layouts: {
+            ...base.layouts,
+            [layoutId]: {
+                ...base.layouts?.[layoutId],
+                table: {
+                    ...base.layouts?.[layoutId]?.table,
+                    sorts,
+                },
+            },
+        },
+    };
+}
+function mergeTablePageSizeIntoSettings(settings, layoutId, pageSize) {
+    const base = settings ?? {};
+    return {
+        ...base,
+        layouts: {
+            ...base.layouts,
+            [layoutId]: {
+                ...base.layouts?.[layoutId],
+                table: {
+                    ...base.layouts?.[layoutId]?.table,
+                    pageSize,
+                },
+            },
+        },
+    };
+}
+//#endregion
+
+class AXPReportChartViewComponent {
+    constructor() {
+        //#region ----   Dependencies   ----
+        this.vm = inject(AXPReportViewerViewModel);
+        this.AXPPageStatus = AXPPageStatus;
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Current chart layout configuration
+         */
+        this.chartLayout = computed(() => {
+            const layout = this.vm.currentLayout();
+            return layout?.layout.type === 'chart' ? layout.layout : null;
+        }, ...(ngDevMode ? [{ debugName: "chartLayout" }] : /* istanbul ignore next */ []));
+        /**
+         * Chart configuration options
+         */
+        this.chartOptions = computed(() => {
+            const chartLayout = this.chartLayout();
+            return chartLayout?.options || null;
+        }, ...(ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * Chart type for rendering
+         */
+        this.chartType = computed(() => {
+            const options = this.chartOptions();
+            return options?.chartType || 'bar';
+        }, ...(ngDevMode ? [{ debugName: "chartType" }] : /* istanbul ignore next */ []));
+        /**
+         * Data mapping configuration
+         */
+        this.dataMapping = computed(() => {
+            const options = this.chartOptions();
+            return options?.dataMapping || null;
+        }, ...(ngDevMode ? [{ debugName: "dataMapping" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   Effects   ----
+        /**
+         * Effect to fetch chart data when conditions are met
+         */
+        this.#fetchData = effect(() => {
+            if (this.vm.allowFetchData() && this.vm.shouldExecuteReport() && this.chartOptions()) {
+                this.vm.fetchData().then((data) => {
+                    const raw = ((data?.data).data ?? {});
+                    switch (this.chartType()) {
+                        case 'bar': {
+                            const v = AXBarChartReportMapper(raw);
+                            this.barChartData.set(v);
+                            break;
+                        }
+                        case 'doughnut': {
+                            const v = AXPieChartReportMapper(raw);
+                            this.donutChartData.set(v);
+                            break;
+                        }
+                        case 'line':
+                        default: {
+                            const v = AXLineChartReportMapper(raw);
+                            this.lineChartData.set(v);
+                            break;
+                        }
+                    }
+                });
+            }
+        }, ...(ngDevMode ? [{ debugName: "#fetchData" }] : /* istanbul ignore next */ []));
+        this.legendOptions = signal({
+            mode: 'vertical',
+        }, ...(ngDevMode ? [{ debugName: "legendOptions" }] : /* istanbul ignore next */ []));
+        this.barChartData = signal([], ...(ngDevMode ? [{ debugName: "barChartData" }] : /* istanbul ignore next */ []));
+        this.barChartOptions = signal({}, ...(ngDevMode ? [{ debugName: "barChartOptions" }] : /* istanbul ignore next */ []));
+        this.donutChartData = signal([], ...(ngDevMode ? [{ debugName: "donutChartData" }] : /* istanbul ignore next */ []));
+        this.donutChartOptions = computed(() => {
+            return {
+                totalLabel: 'Total',
+                showTooltip: true,
+                showDataLabels: this.donutChartData().length <= 10,
+            };
+        }, ...(ngDevMode ? [{ debugName: "donutChartOptions" }] : /* istanbul ignore next */ []));
+        this.lineChartData = signal([], ...(ngDevMode ? [{ debugName: "lineChartData" }] : /* istanbul ignore next */ []));
+        this.lineChartOptions = signal({}, ...(ngDevMode ? [{ debugName: "lineChartOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * Check if bar chart data has items
+         */
+        this.hasBarChartData = computed(() => {
+            const data = this.barChartData();
+            return Array.isArray(data) && data.length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasBarChartData" }] : /* istanbul ignore next */ []));
+        /**
+         * Check if donut chart data has items
+         */
+        this.hasDonutChartData = computed(() => {
+            const data = this.donutChartData();
+            return Array.isArray(data) && data.length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasDonutChartData" }] : /* istanbul ignore next */ []));
+        /**
+         * Check if line chart data has items
+         */
+        this.hasLineChartData = computed(() => {
+            const data = this.lineChartData();
+            return Array.isArray(data) && data.length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasLineChartData" }] : /* istanbul ignore next */ []));
+        /**
+         * Check if chart has any data (for any chart type)
+         */
+        this.hasChartData = computed(() => {
+            return this.hasBarChartData() || this.hasDonutChartData() || this.hasLineChartData();
+        }, ...(ngDevMode ? [{ debugName: "hasChartData" }] : /* istanbul ignore next */ []));
+        /**
+         * Check if report has been executed and has no data
+         */
+        this.showNoDataState = computed(() => {
+            return this.vm.hasBeenExecuted() && !this.hasChartData();
+        }, ...(ngDevMode ? [{ debugName: "showNoDataState" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Effect to fetch chart data when conditions are met
+     */
+    #fetchData;
+    //#endregion
+    //#region ----   Helper Methods   ----
+    /**
+     * Check if chart is ready to render
+     */
+    isChartReady() {
+        return !!(this.chartOptions() && this.dataMapping());
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportChartViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportChartViewComponent, isStandalone: true, selector: "axp-report-chart-view", host: { classAttribute: "axp-report-chart-view w-full h-full flex flex-col" }, ngImport: i0, template: "<ng-container *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading flex flex-col items-center justify-center h-full gap-6 p-8\">\n      <div class=\"spinner spin w-10 h-10\"></div>\n      <div class=\"__loading-text text-sm opacity-70\">\n        {{ t('@report-management:report-viewer.components.chart.messages.loading') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <axp-state-message\n      mode=\"error\"\n      icon=\"fa-light fa-exclamation-triangle\"\n      [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\"\n    >\n    </axp-state-message>\n  } @else if (isChartReady() && showNoDataState()) {\n    <!-- No Data State -->\n    <axp-state-message\n      icon=\"fa-light fa-chart-pie\"\n      [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-data.title'\"\n      [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-data.description'\"\n    >\n    </axp-state-message>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <section\n      class=\"__chart-container overflow-auto md:overflow-hidden rounded-2xl border h-full flex flex-col\"\n    >\n      @if (chartLayout()?.header) {\n        <header\n          class=\"__chart-header p-4 md:p-6 border-b flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between\"\n        >\n          <h3 class=\"__chart-title text-base md:text-lg font-semibold truncate\">\n            {{ chartLayout()?.header?.title }}\n          </h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date text-xs md:text-sm opacity-70 font-medium flex-shrink-0\">\n              {{ '@general:common.date.today' | translate | async }}\n            </div>\n          }\n        </header>\n      }\n\n      <div class=\"__chart-body flex-1 p-3 md:p-6\">\n        <div\n          class=\"__chart-wrapper h-full items-center flex flex-col gap-4 lg:gap-6\"\n          [class]=\"\n            legendOptions().mode === 'horizontal'\n              ? 'flex-col gap-4'\n              : 'flex-col lg:flex-row gap-4 lg:gap-6'\n          \"\n        >\n          @switch (chartType()) {\n            @case ('bar') {\n              <div\n                class=\"__chart-content flex-1 h-full min-h-[250px] md:min-h-[300px] flex items-center justify-center w-full overflow-hidden\"\n              >\n                <ax-bar-chart #barChart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n              </div>\n              @if (hasBarChartData()) {\n                <div class=\"__chart-legend w-fit flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"barChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n            @case ('doughnut') {\n              <div\n                class=\"__chart-content flex-1 h-full min-h-[250px] md:min-h-[300px] flex items-center justify-center w-full overflow-hidden\"\n              >\n                <ax-donut-chart #donutChart [data]=\"donutChartData()\" [options]=\"donutChartOptions()\"></ax-donut-chart>\n              </div>\n              @if (hasDonutChartData()) {\n                <div class=\"__chart-legend w-fit flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"donutChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n            @default {\n              <div\n                class=\"__chart-content flex-1 h-full min-h-[250px] md:min-h-[300px] flex items-center justify-center w-full overflow-hidden\"\n              >\n                <ax-line-chart #lineChart [data]=\"lineChartData()\" [options]=\"lineChartOptions()\"></ax-line-chart>\n              </div>\n              @if (hasLineChartData()) {\n                <div class=\"__chart-legend w-fit flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"lineChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n          }\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <footer class=\"__chart-footer p-4 md:p-6 border-t\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </footer>\n      }\n    </section>\n  } @else {\n    <!-- No Configuration State -->\n    <axp-state-message\n      icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n      [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\"\n    >\n    </axp-state-message>\n  }\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }, { kind: "component", type: AXDonutChartComponent, selector: "ax-donut-chart", inputs: ["data", "options"], outputs: ["segmentClick", "segmentHover"] }, { kind: "component", type: AXLineChartComponent, selector: "ax-line-chart", inputs: ["data", "options"], outputs: ["pointClick"] }, { kind: "component", type: AXChartLegendComponent, selector: "ax-chart-legend", inputs: ["chart", "options"], outputs: ["itemClick", "itemMouseEnter", "itemMouseLeave"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportChartViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-report-chart-view', imports: [
+                        CommonModule,
+                        AXTranslationModule,
+                        AXPWidgetCoreModule,
+                        AXBarChartComponent,
+                        AXDonutChartComponent,
+                        AXLineChartComponent,
+                        AXChartLegendComponent,
+                        AXPStateMessageComponent,
+                    ], host: {
+                        class: 'axp-report-chart-view w-full h-full flex flex-col',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-container *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading flex flex-col items-center justify-center h-full gap-6 p-8\">\n      <div class=\"spinner spin w-10 h-10\"></div>\n      <div class=\"__loading-text text-sm opacity-70\">\n        {{ t('@report-management:report-viewer.components.chart.messages.loading') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <axp-state-message\n      mode=\"error\"\n      icon=\"fa-light fa-exclamation-triangle\"\n      [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\"\n    >\n    </axp-state-message>\n  } @else if (isChartReady() && showNoDataState()) {\n    <!-- No Data State -->\n    <axp-state-message\n      icon=\"fa-light fa-chart-pie\"\n      [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-data.title'\"\n      [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-data.description'\"\n    >\n    </axp-state-message>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <section\n      class=\"__chart-container overflow-auto md:overflow-hidden rounded-2xl border h-full flex flex-col\"\n    >\n      @if (chartLayout()?.header) {\n        <header\n          class=\"__chart-header p-4 md:p-6 border-b flex flex-col sm:flex-row gap-2 sm:items-center sm:justify-between\"\n        >\n          <h3 class=\"__chart-title text-base md:text-lg font-semibold truncate\">\n            {{ chartLayout()?.header?.title }}\n          </h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date text-xs md:text-sm opacity-70 font-medium flex-shrink-0\">\n              {{ '@general:common.date.today' | translate | async }}\n            </div>\n          }\n        </header>\n      }\n\n      <div class=\"__chart-body flex-1 p-3 md:p-6\">\n        <div\n          class=\"__chart-wrapper h-full items-center flex flex-col gap-4 lg:gap-6\"\n          [class]=\"\n            legendOptions().mode === 'horizontal'\n              ? 'flex-col gap-4'\n              : 'flex-col lg:flex-row gap-4 lg:gap-6'\n          \"\n        >\n          @switch (chartType()) {\n            @case ('bar') {\n              <div\n                class=\"__chart-content flex-1 h-full min-h-[250px] md:min-h-[300px] flex items-center justify-center w-full overflow-hidden\"\n              >\n                <ax-bar-chart #barChart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n              </div>\n              @if (hasBarChartData()) {\n                <div class=\"__chart-legend w-fit flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"barChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n            @case ('doughnut') {\n              <div\n                class=\"__chart-content flex-1 h-full min-h-[250px] md:min-h-[300px] flex items-center justify-center w-full overflow-hidden\"\n              >\n                <ax-donut-chart #donutChart [data]=\"donutChartData()\" [options]=\"donutChartOptions()\"></ax-donut-chart>\n              </div>\n              @if (hasDonutChartData()) {\n                <div class=\"__chart-legend w-fit flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"donutChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n            @default {\n              <div\n                class=\"__chart-content flex-1 h-full min-h-[250px] md:min-h-[300px] flex items-center justify-center w-full overflow-hidden\"\n              >\n                <ax-line-chart #lineChart [data]=\"lineChartData()\" [options]=\"lineChartOptions()\"></ax-line-chart>\n              </div>\n              @if (hasLineChartData()) {\n                <div class=\"__chart-legend w-fit flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"lineChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n          }\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <footer class=\"__chart-footer p-4 md:p-6 border-t\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </footer>\n      }\n    </section>\n  } @else {\n    <!-- No Configuration State -->\n    <axp-state-message\n      icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n      [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\"\n    >\n    </axp-state-message>\n  }\n</ng-container>\n" }]
+        }] });
+
+class AXPReportPdfViewComponent {
+    constructor() {
+        //#region ----   Dependencies   ----
+        this.vm = inject(AXPReportViewerViewModel);
+        this.AXPPageStatus = AXPPageStatus;
+        this.sanitizer = inject(DomSanitizer);
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Current PDF layout configuration
+         */
+        this.pdfLayout = computed(() => {
+            const layout = this.vm.currentLayout();
+            return layout?.layout.type === 'pdf' ? layout.layout : null;
+        }, ...(ngDevMode ? [{ debugName: "pdfLayout" }] : /* istanbul ignore next */ []));
+        /**
+         * PDF layout options
+         */
+        this.pdfOptions = computed(() => {
+            const pdfLayout = this.pdfLayout();
+            return pdfLayout?.options || {};
+        }, ...(ngDevMode ? [{ debugName: "pdfOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * PDF source URL (sanitized for embed)
+         */
+        this.pdfSource = computed(() => {
+            const pdfData = this.pdfData();
+            if (!pdfData) {
+                return null;
+            }
+            // Handle URL
+            if (pdfData.url) {
+                return this.sanitizer.bypassSecurityTrustResourceUrl(pdfData.url);
+            }
+            // Handle base64
+            if (pdfData.base64) {
+                const base64Data = pdfData.base64.startsWith('data:')
+                    ? pdfData.base64
+                    : `data:application/pdf;base64,${pdfData.base64}`;
+                return this.sanitizer.bypassSecurityTrustResourceUrl(base64Data);
+            }
+            // Handle blob
+            if (pdfData.blob) {
+                const blobUrl = URL.createObjectURL(pdfData.blob);
+                return this.sanitizer.bypassSecurityTrustResourceUrl(blobUrl);
+            }
+            return null;
+        }, ...(ngDevMode ? [{ debugName: "pdfSource" }] : /* istanbul ignore next */ []));
+        /**
+         * PDF filename for download
+         */
+        this.pdfFilename = computed(() => {
+            const pdfData = this.pdfData();
+            return pdfData?.filename || 'report.pdf';
+        }, ...(ngDevMode ? [{ debugName: "pdfFilename" }] : /* istanbul ignore next */ []));
+        /**
+         * PDF embed height
+         */
+        this.embedHeight = computed(() => {
+            const options = this.pdfOptions();
+            return options.height || '100%';
+        }, ...(ngDevMode ? [{ debugName: "embedHeight" }] : /* istanbul ignore next */ []));
+        /**
+         * Check if PDF is ready to render
+         */
+        this.isPdfReady = computed(() => {
+            return !!this.pdfSource();
+        }, ...(ngDevMode ? [{ debugName: "isPdfReady" }] : /* istanbul ignore next */ []));
+        /**
+         * Check if download button should be shown
+         */
+        this.showDownloadButton = computed(() => {
+            const options = this.pdfOptions();
+            return options.showDownloadButton !== false; // Default to true
+        }, ...(ngDevMode ? [{ debugName: "showDownloadButton" }] : /* istanbul ignore next */ []));
+        /**
+         * Check if print button should be shown
+         */
+        this.showPrintButton = computed(() => {
+            const options = this.pdfOptions();
+            return options.showPrintButton !== false; // Default to true
+        }, ...(ngDevMode ? [{ debugName: "showPrintButton" }] : /* istanbul ignore next */ []));
+        /**
+         * Check if zoom controls should be shown
+         */
+        this.showZoomControls = computed(() => {
+            const options = this.pdfOptions();
+            return options.showZoomControls !== false; // Default to true
+        }, ...(ngDevMode ? [{ debugName: "showZoomControls" }] : /* istanbul ignore next */ []));
+        /**
+         * Check if fullscreen button should be shown
+         */
+        this.showFullscreenButton = computed(() => {
+            const options = this.pdfOptions();
+            return options.showFullscreenButton !== false; // Default to true
+        }, ...(ngDevMode ? [{ debugName: "showFullscreenButton" }] : /* istanbul ignore next */ []));
+        /**
+         * Current zoom level
+         */
+        this.currentZoom = signal(100, ...(ngDevMode ? [{ debugName: "currentZoom" }] : /* istanbul ignore next */ []));
+        /**
+         * PDF data from execution result
+         */
+        this.pdfData = signal(null, ...(ngDevMode ? [{ debugName: "pdfData" }] : /* istanbul ignore next */ []));
+        /**
+         * Fullscreen state
+         */
+        this.isFullscreen = signal(false, ...(ngDevMode ? [{ debugName: "isFullscreen" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   Effects   ----
+        /**
+         * Effect to fetch PDF data when conditions are met
+         */
+        this.#fetchData = effect(() => {
+            if (this.vm.allowFetchData() && this.vm.shouldExecuteReport() && this.pdfLayout()) {
+                this.vm.fetchData().then((data) => {
+                    if (data?.data && data.data.type === 'pdf') {
+                        const pdfResult = data.data;
+                        this.pdfData.set(pdfResult);
+                        // Set initial zoom from options
+                        const options = this.pdfOptions();
+                        if (options.defaultZoom) {
+                            this.currentZoom.set(options.defaultZoom);
+                        }
+                    }
+                    else {
+                        this.pdfData.set(null);
+                    }
+                });
+            }
+        }, ...(ngDevMode ? [{ debugName: "#fetchData" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Effect to fetch PDF data when conditions are met
+     */
+    #fetchData;
+    //#endregion
+    //#region ----   Methods   ----
+    /**
+     * Handle download PDF
+     */
+    downloadPdf() {
+        const pdfData = this.pdfData();
+        if (!pdfData) {
+            return;
+        }
+        let url;
+        let filename = this.pdfFilename();
+        let shouldRevokeUrl = false;
+        if (pdfData.url) {
+            // For URL, create a temporary link
+            url = pdfData.url;
+        }
+        else if (pdfData.base64) {
+            // Convert base64 to blob and create URL
+            const base64Data = pdfData.base64.startsWith('data:')
+                ? pdfData.base64.split(',')[1]
+                : pdfData.base64;
+            const byteCharacters = atob(base64Data);
+            const byteNumbers = new Array(byteCharacters.length);
+            for (let i = 0; i < byteCharacters.length; i++) {
+                byteNumbers[i] = byteCharacters.charCodeAt(i);
+            }
+            const byteArray = new Uint8Array(byteNumbers);
+            const blob = new Blob([byteArray], { type: 'application/pdf' });
+            url = URL.createObjectURL(blob);
+            shouldRevokeUrl = true;
+        }
+        else if (pdfData.blob) {
+            url = URL.createObjectURL(pdfData.blob);
+            shouldRevokeUrl = true;
+        }
+        else {
+            return;
+        }
+        // Create download link
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        // Clean up blob URL if created
+        if (shouldRevokeUrl) {
+            setTimeout(() => URL.revokeObjectURL(url), 100);
+        }
+    }
+    /**
+     * Handle print PDF
+     */
+    printPdf() {
+        const pdfData = this.pdfData();
+        if (!pdfData) {
+            return;
+        }
+        let url;
+        if (pdfData.url) {
+            url = pdfData.url;
+        }
+        else if (pdfData.base64) {
+            const base64Data = pdfData.base64.startsWith('data:')
+                ? pdfData.base64
+                : `data:application/pdf;base64,${pdfData.base64}`;
+            url = base64Data;
+        }
+        else if (pdfData.blob) {
+            url = URL.createObjectURL(pdfData.blob);
+        }
+        else {
+            return;
+        }
+        // Open PDF in new window for printing
+        const printWindow = window.open(url, '_blank');
+        if (printWindow) {
+            printWindow.onload = () => {
+                printWindow.print();
+            };
+        }
+    }
+    /**
+     * Handle zoom in
+     */
+    zoomIn() {
+        const current = this.currentZoom();
+        if (current < 500) {
+            this.currentZoom.set(Math.min(current + 25, 500));
+        }
+    }
+    /**
+     * Handle zoom out
+     */
+    zoomOut() {
+        const current = this.currentZoom();
+        if (current > 25) {
+            this.currentZoom.set(Math.max(current - 25, 25));
+        }
+    }
+    /**
+     * Handle zoom reset
+     */
+    zoomReset() {
+        const options = this.pdfOptions();
+        this.currentZoom.set(options.defaultZoom || 100);
+    }
+    /**
+     * Handle fullscreen toggle
+     */
+    toggleFullscreen() {
+        const isFullscreen = this.isFullscreen();
+        this.isFullscreen.set(!isFullscreen);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportPdfViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportPdfViewComponent, isStandalone: true, selector: "axp-report-pdf-view", host: { classAttribute: "axp-report-pdf-view w-full h-full flex flex-col" }, ngImport: i0, template: "<ng-container *translate=\"let t\">\n    @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading flex flex-col items-center justify-center h-full gap-6 p-8\">\n        <div class=\"spinner spin w-10 h-10\"></div>\n        <div class=\"__loading-text text-sm opacity-70\">\n            {{ t('@report-management:report-viewer.components.pdf.messages.loading') | async }}\n        </div>\n    </div>\n    } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <axp-state-message mode=\"error\" icon=\"fa-light fa-exclamation-triangle\"\n        [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n        [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\">\n    </axp-state-message>\n    } @else if (isPdfReady()) {\n    <!-- PDF Embed Only -->\n    <embed class=\"__pdf-embed w-full h-full\" [src]=\"pdfSource()\" type=\"application/pdf\" />\n    } @else {\n    <!-- No PDF Data State -->\n    <axp-state-message icon=\"fa-light fa-file-pdf\"\n        [title]=\"'@report-management:report-viewer.components.pdf.empty-states.no-data.title'\"\n        [description]=\"'@report-management:report-viewer.components.pdf.empty-states.no-data.description'\">\n    </axp-state-message>\n    }\n</ng-container>", styles: [".axp-report-pdf-view .__loading{min-height:400px}.axp-report-pdf-view .__pdf-container{background:var(--ax-color-background)}.axp-report-pdf-view .__pdf-container.__fullscreen{position:fixed;inset:0;z-index:9999;border-radius:0}.axp-report-pdf-view .__pdf-toolbar{background:var(--ax-color-surface)}.axp-report-pdf-view .__pdf-body{background:var(--ax-color-background-secondary)}.axp-report-pdf-view .__pdf-wrapper{min-height:400px}.axp-report-pdf-view .__pdf-embed{border:none;box-shadow:0 2px 8px #0000001a;transition:width .3s ease,height .3s ease}@media(max-width:640px){.axp-report-pdf-view .__zoom-controls{width:100%;justify-content:center;margin-left:0;margin-top:.5rem}}.axp-report-pdf-view .__zoom-level{-webkit-user-select:none;user-select:none}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportPdfViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-report-pdf-view', imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPWidgetCoreModule,
+                        AXPStateMessageComponent,
+                    ], host: {
+                        class: 'axp-report-pdf-view w-full h-full flex flex-col',
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-container *translate=\"let t\">\n    @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading flex flex-col items-center justify-center h-full gap-6 p-8\">\n        <div class=\"spinner spin w-10 h-10\"></div>\n        <div class=\"__loading-text text-sm opacity-70\">\n            {{ t('@report-management:report-viewer.components.pdf.messages.loading') | async }}\n        </div>\n    </div>\n    } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <axp-state-message mode=\"error\" icon=\"fa-light fa-exclamation-triangle\"\n        [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n        [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\">\n    </axp-state-message>\n    } @else if (isPdfReady()) {\n    <!-- PDF Embed Only -->\n    <embed class=\"__pdf-embed w-full h-full\" [src]=\"pdfSource()\" type=\"application/pdf\" />\n    } @else {\n    <!-- No PDF Data State -->\n    <axp-state-message icon=\"fa-light fa-file-pdf\"\n        [title]=\"'@report-management:report-viewer.components.pdf.empty-states.no-data.title'\"\n        [description]=\"'@report-management:report-viewer.components.pdf.empty-states.no-data.description'\">\n    </axp-state-message>\n    }\n</ng-container>", styles: [".axp-report-pdf-view .__loading{min-height:400px}.axp-report-pdf-view .__pdf-container{background:var(--ax-color-background)}.axp-report-pdf-view .__pdf-container.__fullscreen{position:fixed;inset:0;z-index:9999;border-radius:0}.axp-report-pdf-view .__pdf-toolbar{background:var(--ax-color-surface)}.axp-report-pdf-view .__pdf-body{background:var(--ax-color-background-secondary)}.axp-report-pdf-view .__pdf-wrapper{min-height:400px}.axp-report-pdf-view .__pdf-embed{border:none;box-shadow:0 2px 8px #0000001a;transition:width .3s ease,height .3s ease}@media(max-width:640px){.axp-report-pdf-view .__zoom-controls{width:100%;justify-content:center;margin-left:0;margin-top:.5rem}}.axp-report-pdf-view .__zoom-level{-webkit-user-select:none;user-select:none}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+class AXPReportTableViewComponent {
+    constructor() {
+        //#region ----   Dependencies   ----
+        this.vm = inject(AXPReportViewerViewModel);
+        this.commandService = inject(AXPCommandService);
+        this.expressionEvaluator = inject(AXPExpressionEvaluatorService);
+        this.grid = viewChild('grid', ...(ngDevMode ? [{ debugName: "grid" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   State   ----
+        this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
+        this.sortedFields = signal([], ...(ngDevMode ? [{ debugName: "sortedFields" }] : /* istanbul ignore next */ []));
+        this.tableSummary = signal(null, ...(ngDevMode ? [{ debugName: "tableSummary" }] : /* istanbul ignore next */ []));
+        this.handledExecutionRequestId = 0;
+        this.lastDataSourcePreferencesKey = null;
+        //#endregion
+        //#region ----   Effects   ----
+        this.#resetExecutionHandler = effect(() => {
+            const reportId = this.vm.reportId();
+            untracked(() => {
+                this.handledExecutionRequestId = 0;
+                this.lastDataSourcePreferencesKey = null;
+                void reportId;
+            });
+        }, ...(ngDevMode ? [{ debugName: "#resetExecutionHandler" }] : /* istanbul ignore next */ []));
+        this.#syncTableColumns = effect(() => {
+            const layoutDef = this.vm.currentLayout();
+            const tableLayout = layoutDef?.layout;
+            if (!tableLayout || tableLayout.type !== 'table') {
+                this.columns.set([]);
+                return;
+            }
+            const savedTable = this.vm.tableLayoutUserSettings();
+            const builtColumns = buildReportTableColumns(tableLayout.columns, savedTable?.columns);
+            this.columns.set(applyGroupByDrillLinksToColumns(builtColumns, tableLayout.groupBy));
+        }, ...(ngDevMode ? [{ debugName: "#syncTableColumns" }] : /* istanbul ignore next */ []));
+        this.#syncDataSourcePreferences = effect(() => {
+            const layoutDef = this.vm.currentLayout();
+            if (!layoutDef) {
+                return;
+            }
+            const tableLayout = layoutDef.layout;
+            if (!tableLayout || tableLayout.type !== 'table') {
+                return;
+            }
+            const savedTable = this.vm.tableLayoutUserSettings();
+            const queryDataSource = layoutDef.dataSource;
+            const defaultSort = tableLayout.options?.sorting?.length
+                ? tableLayout.options.sorting
+                : (queryDataSource?.sortFields ?? []);
+            const effectiveSort = savedTable?.sorts?.length ? savedTable.sorts : defaultSort;
+            const pageSize = savedTable?.pageSize ?? 10;
+            const preferencesKey = `${layoutDef.id}:${pageSize}:${JSON.stringify(effectiveSort)}`;
+            if (this.lastDataSourcePreferencesKey === preferencesKey) {
+                return;
+            }
+            untracked(() => {
+                this.lastDataSourcePreferencesKey = preferencesKey;
+                this.sortedFields.set(effectiveSort);
+                this.applySortToDataSource(effectiveSort);
+                this.dataSource.setPageSize(pageSize);
+            });
+        }, ...(ngDevMode ? [{ debugName: "#syncDataSourcePreferences" }] : /* istanbul ignore next */ []));
+        /**
+         * Refresh grid once per execute-report request.
+         */
+        this.#fetchData = effect(() => {
+            const requestId = this.vm.executionRequestId();
+            if (requestId <= this.handledExecutionRequestId || !this.vm.allowFetchData()) {
+                return;
+            }
+            const grid = this.grid();
+            if (!grid) {
+                return;
+            }
+            untracked(() => {
+                this.handledExecutionRequestId = requestId;
+                grid.refresh();
+            });
+        }, ...(ngDevMode ? [{ debugName: "#fetchData" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   Computed Properties   ----
+        this.layout = computed(() => {
+            return this.vm.currentLayout()?.layout;
+        }, ...(ngDevMode ? [{ debugName: "layout" }] : /* istanbul ignore next */ []));
+        this.dataSource = new AXDataSource({
+            load: async (e) => {
+                if (!this.vm.allowFetchData()) {
+                    this.tableSummary.set(null);
+                    return { items: [], total: 0 };
+                }
+                const result = await this.vm.fetchData(e);
+                if (!result?.data || result.data.type !== 'table') {
+                    console.error('invalid table result');
+                    this.tableSummary.set(null);
+                    return { items: [], total: 0 };
+                }
+                this.tableSummary.set(result.data.summary ?? null);
+                const items = result.data.items ?? [];
+                const total = result.data.total || 0;
+                return { items, total };
+            },
+            pageSize: 10,
+            key: 'id',
+        });
+        this.visibleColumns = computed(() => this.columns().filter((c) => c.visible), ...(ngDevMode ? [{ debugName: "visibleColumns" }] : /* istanbul ignore next */ []));
+        this.paginationEnabled = computed(() => {
+            return this.layout().options?.pagination !== false;
+        }, ...(ngDevMode ? [{ debugName: "paginationEnabled" }] : /* istanbul ignore next */ []));
+        this.hasReportFooterSummary = computed(() => {
+            return ((this.layout().summary?.some((s) => s.displayIn === 'reportFooter') ?? false) &&
+                this.tableSummary() !== null);
+        }, ...(ngDevMode ? [{ debugName: "hasReportFooterSummary" }] : /* istanbul ignore next */ []));
+        this.rowActions = computed(() => {
+            const tableLayout = this.layout();
+            const generated = buildDrillRowActionsFromGroupBy(tableLayout.groupBy, this.vm.reportDefinition()?.id);
+            const manual = tableLayout.actions ?? [];
+            return [...generated, ...manual];
+        }, ...(ngDevMode ? [{ debugName: "rowActions" }] : /* istanbul ignore next */ []));
+        this.primaryRowAction = computed(() => {
+            return (this.rowActions().filter((a) => a.priority === 'primary')?.map((a) => this.convertToRowCommandItem(a)) ??
+                []);
+        }, ...(ngDevMode ? [{ debugName: "primaryRowAction" }] : /* istanbul ignore next */ []));
+        this.hasPrimaryRowAction = computed(() => {
+            return this.primaryRowAction().length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasPrimaryRowAction" }] : /* istanbul ignore next */ []));
+        this.secondaryRowAction = computed(() => {
+            return (this.rowActions()
+                .filter((a) => a.priority === 'secondary')
+                ?.map((a) => this.convertToRowCommandItem(a)) ?? []);
+        }, ...(ngDevMode ? [{ debugName: "secondaryRowAction" }] : /* istanbul ignore next */ []));
+        this.hasSecondaryRowAction = computed(() => {
+            return this.secondaryRowAction().length > 0;
+        }, ...(ngDevMode ? [{ debugName: "hasSecondaryRowAction" }] : /* istanbul ignore next */ []));
+        this.defaultGroupByDrillDefinition = computed(() => {
+            const groupBy = this.layout().groupBy;
+            if (!hasGroupByDrillLinks(groupBy)) {
+                return null;
+            }
+            return groupBy?.find((definition) => definition.default) ?? groupBy?.[0] ?? null;
+        }, ...(ngDevMode ? [{ debugName: "defaultGroupByDrillDefinition" }] : /* istanbul ignore next */ []));
+        this.defaultRowAction = computed(() => {
+            const defaultAction = this.rowActions().find((a) => a.default);
+            if (!defaultAction) {
+                return null;
+            }
+            return this.convertToRowCommandItem(defaultAction);
+        }, ...(ngDevMode ? [{ debugName: "defaultRowAction" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    #resetExecutionHandler;
+    #syncTableColumns;
+    #syncDataSourcePreferences;
+    /**
+     * Refresh grid once per execute-report request.
+     */
+    #fetchData;
+    //#endregion
+    //#region ----   Event Handlers   ----
+    handleRowClick(event) {
+        void this.handleRowAction(event.name, event.data);
+    }
+    handleDbRowClick(event) {
+        const defaultGroupByDrill = this.defaultGroupByDrillDefinition();
+        if (defaultGroupByDrill?.displayField) {
+            void this.handleGroupByDrill(defaultGroupByDrill.displayField, event.data);
+            return;
+        }
+        if (this.defaultRowAction()) {
+            void this.handleRowAction(this.defaultRowAction().name, event.data);
+        }
+    }
+    async handleGroupByDrill(displayField, data) {
+        const definition = findGroupByDefinitionForDisplayField(this.layout().groupBy, displayField);
+        if (!definition) {
+            return;
+        }
+        const reportId = this.vm.reportDefinition()?.id;
+        if (!reportId) {
+            return;
+        }
+        const commandOptions = buildGroupByDrillCommandOptions(definition, reportId);
+        const evaluatedOptions = await this.evaluateActionOptions(commandOptions, data);
+        await this.commandService.execute('ReportManagement.Report:DrillToReport', {
+            __context__: {
+                data: data,
+                options: evaluatedOptions,
+            },
+            options: evaluatedOptions,
+        });
+    }
+    async handleRowAction(name, data) {
+        const action = this.rowActions().find((item) => item.command?.name === name);
+        const commandName = action?.command?.name ?? name;
+        const evaluatedOptions = await this.evaluateActionOptions(action?.command?.options, data);
+        await this.commandService.execute(commandName, {
+            __context__: {
+                data: data,
+                options: evaluatedOptions,
+            },
+            options: evaluatedOptions,
+        });
+    }
+    async evaluateActionOptions(options, data) {
+        if (!options) {
+            return {};
+        }
+        const scope = {
+            context: {
+                eval: (path) => get(data, path),
+            },
+        };
+        return (await this.expressionEvaluator.evaluate(options, scope));
+    }
+    handleColumnSort(columnField) {
+        const column = this.layout().columns?.find((c) => c.field === columnField);
+        if (!column?.sortable) {
+            return;
+        }
+        const activeSorts = [...this.sortedFields()];
+        const index = activeSorts.findIndex((s) => s.name === columnField);
+        const currentDir = index >= 0 ? activeSorts[index].dir : undefined;
+        const newDir = currentDir === 'asc' ? 'desc' : currentDir === 'desc' ? undefined : 'asc';
+        const nextSorts = newDir ? [{ name: columnField, dir: newDir }] : [];
+        this.sortedFields.set(nextSorts);
+        this.applySortToDataSource(nextSorts);
+        void this.vm.saveTableSorts(nextSorts);
+        this.grid()?.refresh();
+    }
+    onColumnSizeChanged(event) {
+        if (!event.isUserInteraction || event.type !== 'end' || !event.data) {
+            return;
+        }
+        const dataField = String(event.data.dataField ?? '');
+        const field = resolveColumnFieldFromDataField(dataField);
+        const width = parseColumnResizeWidth(event.data.width);
+        if (!field || width == null) {
+            return;
+        }
+        const nextColumns = this.columns().map((col) => col.field === field ? { ...col, width } : col);
+        this.columns.set(nextColumns);
+        void this.vm.saveTableColumnWidth(field, width, nextColumns);
+    }
+    onColumnsOrderChanged(event) {
+        if (!event.isUserInteraction || !event.data?.event) {
+            return;
+        }
+        const dragEvent = event.data.event;
+        const offset = this.leadingColumnCount();
+        const previousIndex = dragEvent.previousIndex - offset;
+        const currentIndex = dragEvent.currentIndex - offset;
+        if (previousIndex < 0 || currentIndex < 0) {
+            return;
+        }
+        const nextColumns = [...this.columns()];
+        const source = nextColumns[previousIndex];
+        if (!source || source.pin) {
+            return;
+        }
+        if (nextColumns[currentIndex]?.pin) {
+            return;
+        }
+        moveItemInArray(nextColumns, previousIndex, currentIndex);
+        this.columns.set(nextColumns);
+        void this.vm.saveTableColumnOrder(nextColumns);
+    }
+    onPageChanged(event) {
+        if (event.isUserInteraction) {
+            void this.vm.saveTablePageSize(event.take);
+        }
+    }
+    //#endregion
+    //#region ----   Sort Helpers   ----
+    resolveColumnSortDirection(columnField) {
+        const dir = this.sortedFields().find((s) => s.name === columnField)?.dir;
+        return dir === 'asc' || dir === 'desc' ? dir : undefined;
+    }
+    //#endregion
+    //#region ----   Summary Helpers   ----
+    getSummaryDisplayValue(field) {
+        const summary = this.tableSummary();
+        if (!summary || !(field in summary)) {
+            return null;
+        }
+        const value = summary[field];
+        if (value == null) {
+            return null;
+        }
+        return String(value);
+    }
+    isFirstVisibleColumn(field) {
+        return this.visibleColumns()[0]?.field === field;
+    }
+    //#endregion
+    //#region ----   Helpers   ----
+    leadingColumnCount() {
+        let count = 0;
+        if (this.vm.showRowIndexColumn()) {
+            count++;
+        }
+        if (this.vm.canSelectRows()) {
+            count++;
+        }
+        return count;
+    }
+    applySortToDataSource(sorts) {
+        const sortOptions = sorts.map((s) => ({ field: s.name, dir: s.dir }));
+        this.dataSource.sort(...sortOptions);
+    }
+    convertToRowCommandItem(action) {
+        const systemAction = getSystemActions(action.type);
+        if (!systemAction) {
+            return {
+                icon: action.icon ?? 'fa-light fa-eye',
+                iconOnly: action.iconOnly ?? true,
+                text: action.title,
+                name: action.command?.name,
+                divided: action.break,
+                color: action.color,
+            };
+        }
+        const defaultAction = applySystemActionDefault(action, systemAction.key);
+        return {
+            icon: defaultAction.icon ?? 'fa-light fa-eye',
+            iconOnly: action.iconOnly ?? true,
+            text: defaultAction.title,
+            name: action.command?.name,
+            divided: defaultAction.break ?? action.break,
+            color: defaultAction.color,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportTableViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportTableViewComponent, isStandalone: true, selector: "axp-report-table-view", host: { classAttribute: "axp-report-table-view flex flex-col flex-1 min-h-0 h-full w-full" }, viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-data-table\n  #grid\n  [dataSource]=\"dataSource\"\n  [paging]=\"paginationEnabled()\"\n  [showFooter]=\"hasReportFooterSummary()\"\n  [allowReordering]=\"true\"\n  (onRowDbClick)=\"handleDbRowClick($event)\"\n  (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n  (onColumnsOrderChanged)=\"onColumnsOrderChanged($event)\"\n  (onPageChanged)=\"onPageChanged($event)\"\n  class=\"flex-1 min-h-0 h-full\"\n>\n  @if (vm.showRowIndexColumn()) {\n    <ax-index-column\n      [caption]=\"('@general:terms.common.row-number' | translate | async)!\"\n      fixed=\"start\"\n      [width]=\"'80px'\"\n      [padZero]=\"false\"\n    ></ax-index-column>\n  }\n  @if (vm.canSelectRows()) {\n    <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n  }\n  @for (column of columns(); track column.field) {\n    @if (column.visible) {\n      <ng-template #footerCell>\n        <div\n          class=\"w-full truncate\"\n          [class.text-start]=\"column.align === 'left'\"\n          [class.text-center]=\"column.align === 'center'\"\n          [class.text-end]=\"column.align === 'right'\"\n        >\n          @if (isFirstVisibleColumn(column.field) && hasReportFooterSummary()) {\n            <span class=\"font-medium\">\n              {{ '@report-management:report-viewer.components.table.footer-total' | translate | async }}\n            </span>\n          } @else if (getSummaryDisplayValue(column.field); as summaryValue) {\n            <span>{{ summaryValue }}</span>\n          }\n        </div>\n      </ng-template>\n      @if (column.isGroupByDrillLink && column.drillDisplayField) {\n        <axp-text-command-column\n          [customWidth]=\"column.width == 'auto' ? 'auto' : column.width + 'px'\"\n          [caption]=\"(column.title | translate | async)!\"\n          [textField]=\"column.drillDisplayField\"\n          [columnFixed]=\"column.pin\"\n          [sortEnabled]=\"column.sortable\"\n          [headerSortDirection]=\"resolveColumnSortDirection(column.field)\"\n          [footerTemplate]=\"footerCell\"\n          (sortToggle)=\"handleColumnSort(column.field)\"\n          (commandClick)=\"handleGroupByDrill(column.drillDisplayField, $event.data)\"\n        ></axp-text-command-column>\n      } @else {\n        <axp-widget-column-renderer\n          [customWidth]=\"column.width == 'auto' ? 'auto' : column.width + 'px'\"\n          [caption]=\"(column.title | translate | async)!\"\n          [node]=\"column.widget!\"\n          [sortEnabled]=\"column.sortable\"\n          [headerSortDirection]=\"resolveColumnSortDirection(column.field)\"\n          [columnFixed]=\"column.pin\"\n          [footerTemplate]=\"footerCell\"\n          (sortToggle)=\"handleColumnSort(column.field)\"\n        ></axp-widget-column-renderer>\n      }\n    }\n  }\n  @if (hasPrimaryRowAction()) {\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"primaryRowAction().length * 70 + 'px'\"\n      [items]=\"primaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-command-column>\n  }\n  @if (hasSecondaryRowAction()) {\n    <ax-dropdown-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      [items]=\"secondaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-dropdown-command-column>\n  }\n</ax-data-table>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$2.AXRowIndexColumnComponent, selector: "ax-index-column", inputs: ["width", "caption", "fixed", "footerTemplate", "padZero"] }, { kind: "component", type: i1$2.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i1$2.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i1$2.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i2.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "component", type: AXPTextCommandColumnComponent, selector: "axp-text-command-column", inputs: ["caption", "textField", "customWidth", "columnFixed", "footerTemplate", "sortEnabled", "headerSortDirection", "headerSortPriority", "disabled", "emptyDisplay"], outputs: ["commandClick", "sortToggle"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportTableViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-report-table-view', imports: [
+                        CommonModule,
+                        AXDataTableModule,
+                        AXLoadingModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPWidgetCoreModule,
+                        AXPTextCommandColumnComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'axp-report-table-view flex flex-col flex-1 min-h-0 h-full w-full',
+                    }, template: "<ax-data-table\n  #grid\n  [dataSource]=\"dataSource\"\n  [paging]=\"paginationEnabled()\"\n  [showFooter]=\"hasReportFooterSummary()\"\n  [allowReordering]=\"true\"\n  (onRowDbClick)=\"handleDbRowClick($event)\"\n  (onColumnSizeChanged)=\"onColumnSizeChanged($event)\"\n  (onColumnsOrderChanged)=\"onColumnsOrderChanged($event)\"\n  (onPageChanged)=\"onPageChanged($event)\"\n  class=\"flex-1 min-h-0 h-full\"\n>\n  @if (vm.showRowIndexColumn()) {\n    <ax-index-column\n      [caption]=\"('@general:terms.common.row-number' | translate | async)!\"\n      fixed=\"start\"\n      [width]=\"'80px'\"\n      [padZero]=\"false\"\n    ></ax-index-column>\n  }\n  @if (vm.canSelectRows()) {\n    <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n  }\n  @for (column of columns(); track column.field) {\n    @if (column.visible) {\n      <ng-template #footerCell>\n        <div\n          class=\"w-full truncate\"\n          [class.text-start]=\"column.align === 'left'\"\n          [class.text-center]=\"column.align === 'center'\"\n          [class.text-end]=\"column.align === 'right'\"\n        >\n          @if (isFirstVisibleColumn(column.field) && hasReportFooterSummary()) {\n            <span class=\"font-medium\">\n              {{ '@report-management:report-viewer.components.table.footer-total' | translate | async }}\n            </span>\n          } @else if (getSummaryDisplayValue(column.field); as summaryValue) {\n            <span>{{ summaryValue }}</span>\n          }\n        </div>\n      </ng-template>\n      @if (column.isGroupByDrillLink && column.drillDisplayField) {\n        <axp-text-command-column\n          [customWidth]=\"column.width == 'auto' ? 'auto' : column.width + 'px'\"\n          [caption]=\"(column.title | translate | async)!\"\n          [textField]=\"column.drillDisplayField\"\n          [columnFixed]=\"column.pin\"\n          [sortEnabled]=\"column.sortable\"\n          [headerSortDirection]=\"resolveColumnSortDirection(column.field)\"\n          [footerTemplate]=\"footerCell\"\n          (sortToggle)=\"handleColumnSort(column.field)\"\n          (commandClick)=\"handleGroupByDrill(column.drillDisplayField, $event.data)\"\n        ></axp-text-command-column>\n      } @else {\n        <axp-widget-column-renderer\n          [customWidth]=\"column.width == 'auto' ? 'auto' : column.width + 'px'\"\n          [caption]=\"(column.title | translate | async)!\"\n          [node]=\"column.widget!\"\n          [sortEnabled]=\"column.sortable\"\n          [headerSortDirection]=\"resolveColumnSortDirection(column.field)\"\n          [columnFixed]=\"column.pin\"\n          [footerTemplate]=\"footerCell\"\n          (sortToggle)=\"handleColumnSort(column.field)\"\n        ></axp-widget-column-renderer>\n      }\n    }\n  }\n  @if (hasPrimaryRowAction()) {\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"primaryRowAction().length * 70 + 'px'\"\n      [items]=\"primaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-command-column>\n  }\n  @if (hasSecondaryRowAction()) {\n    <ax-dropdown-command-column\n      fixed=\"end\"\n      [width]=\"'60px'\"\n      [items]=\"secondaryRowAction()\"\n      (onItemClick)=\"handleRowClick($event)\"\n    ></ax-dropdown-command-column>\n  }\n</ax-data-table>\n" }]
+        }], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
+
+class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
+    constructor() {
+        super();
+        //#region ----   Dependencies   ----
+        this.layoutService = inject(AXPLayoutThemeService);
+        this.deviceService = inject(AXPDeviceService);
+        this.route = inject(ActivatedRoute);
+        this.unsubscriber = inject(AXUnsubscriber);
+        this.loadingDialog = inject(AXLoadingDialogService);
+        this.destroyRef = inject(DestroyRef);
+        this.reportViewerService = inject(AXPReportViewerService);
+        //#endregion
+        //#region ----   Inputs   ----
+        this.reportId = input(...(ngDevMode ? [undefined, { debugName: "reportId" }] : /* istanbul ignore next */ []));
+        this.reportParameters = input({}, ...(ngDevMode ? [{ debugName: "reportParameters" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   ViewChildren   ----
+        this.filtersForm = viewChild('filtersForm', ...(ngDevMode ? [{ debugName: "filtersForm" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   ViewModel   ----
+        this.vm = inject(AXPReportViewerViewModel);
+        //#endregion
+        //#region ----   Effects   ----
+        this.watchNavigationLoading = effect(() => {
+            const isBusy = this.vm.isLoading() || this.vm.isExecuting();
+            untracked(() => {
+                this.layoutService.setNavigationLoading(isBusy);
+                //
+                if (isBusy) {
+                    void this.openContentLoading();
+                }
+                else {
+                    this.closeContentLoading();
+                }
+            });
+        }, ...(ngDevMode ? [{ debugName: "watchNavigationLoading" }] : /* istanbul ignore next */ []));
+        //#endregion
+        this.loadingDialogRef = null;
+        this.isDialogOpening = false;
+        //#region ----   Computed Properties   ----
+        this.showFiltersPanel = () => this.deviceService.isLarge();
+        this.showReportDisplay = () => this.deviceService.isLarge() || (this.deviceService.isSmall() && this.vm.hasBeenExecuted());
+        this.baseRoutes = [this.sessionService.application?.name, 'report-management'];
+        //#endregion
+        //#region ----   Layout Configurations   ----
+        this.defaultLayout = () => ({
+            positions: {
+                sm: { colSpan: 12 },
+                md: { colSpan: 6 },
+                lg: { colSpan: 12 },
+            },
+        });
+        this.compactLayout = () => ({
+            positions: {
+                sm: { colSpan: 12 },
+                md: { colSpan: 4 },
+                lg: { colSpan: 3 },
+            },
+        });
+        this.destroyRef.onDestroy(() => this.closeContentLoading());
+    }
+    //#endregion
+    //#region ----   Lifecycle   ----
+    async ngOnInit() {
+        await super.ngOnInit();
+        // Subscribe to route parameter changes for dynamic report loading
+        this.unsubscriber.takeUntilDestroy(this.route.paramMap).subscribe(async (params) => {
+            const reportId = params.get('reportId') || this.route.snapshot.queryParamMap.get('reportId') || this.reportId();
+            if (reportId) {
+                await this.loadReportAndRefresh(reportId);
+            }
+        });
+    }
+    /**
+     * Effect to handle data fetching when chart configuration changes
+     */
+    //#endregion
+    //#region ----   Helper Methods   ----
+    async loadReportAndRefresh(reportId) {
+        await this.vm.loadReport(reportId);
+        // Force refresh of page layout (breadcrumbs, title, etc.) after report loads
+        this.recompute();
+        // Handle initial parameters from query string
+        const queryParams = this.route.snapshot.queryParams;
+        const initialParams = { ...queryParams };
+        delete initialParams['reportId']; // Remove reportId from parameters
+        // Parse filter context values coming from URL (they are strings)
+        const parsedInitialParams = this.parseFilterContextFromUrl(initialParams);
+        // Merge with component input parameters
+        const allParams = { ...parsedInitialParams, ...this.reportParameters() };
+        if (Object.keys(allParams).length > 0) {
+            console.log('Applying initial parameters:', allParams);
+            this.vm.updateFilterContext(allParams);
+            // Auto-execute if parameters are provided
+            setTimeout(async () => {
+                await this.vm.executeReport();
+            }, 500); // Small delay to ensure form is ready
+        }
+    }
+    async openContentLoading() {
+        if (this.loadingDialogRef || this.isDialogOpening) {
+            return;
+        }
+        this.isDialogOpening = true;
+        try {
+            const [title, description, cancelText] = await Promise.all([
+                this.translateService.translateAsync('@report-management:report-viewer.messages.loading.in-progress-title'),
+                this.translateService.translateAsync('@report-management:report-viewer.messages.loading.in-progress-description'),
+                this.translateService.translateAsync('@report-management:report-viewer.messages.loading.cancel-button'),
+            ]);
+            this.loadingDialogRef = this.loadingDialog.show({
+                title,
+                mode: 'indeterminate',
+                progressColor: 'primary',
+                text: description,
+                buttons: [
+                    {
+                        text: cancelText,
+                        color: 'danger',
+                        onClick: () => {
+                            this.closeContentLoading();
+                            this.vm.cancel();
+                        },
+                    },
+                ],
+            });
+        }
+        finally {
+            this.isDialogOpening = false;
+        }
+    }
+    closeContentLoading() {
+        if (!this.loadingDialogRef) {
+            return;
+        }
+        this.loadingDialogRef.close();
+        this.loadingDialogRef = null;
+    }
+    /**
+     * Synchronizes filter context to URL query parameters using dot notation
+     * @param filterContext The current filter context to sync
+     */
+    syncFiltersToUrl(filterContext) {
+        // Get current query params
+        const currentParams = this.route.snapshot.queryParams;
+        const reportId = currentParams['reportId'];
+        // Get all filter keys from current params (excluding reportId and internal fields)
+        const currentFilterKeys = new Set();
+        Object.keys(currentParams).forEach((key) => {
+            if (key !== 'reportId' &&
+                !key.endsWith('EditorObj') &&
+                !key.startsWith('__') &&
+                !key.endsWith('EditorValue') &&
+                !key.includes('.displayText')) {
+                // Extract root key (before first dot) for filter identification
+                const rootKey = key.includes('.') ? key.split('.')[0] : key;
+                currentFilterKeys.add(rootKey);
+            }
+        });
+        // Build new query params - start with current params and remove filter-related ones
+        const queryParams = { ...currentParams };
+        // Remove all filter-related params first (we'll add them back if they have values)
+        Object.keys(queryParams).forEach((key) => {
+            if (key !== 'reportId' &&
+                !key.endsWith('EditorObj') &&
+                !key.startsWith('__') &&
+                !key.endsWith('EditorValue') &&
+                !key.includes('.displayText')) {
+                delete queryParams[key];
+            }
+        });
+        const processedFilterKeys = new Set();
+        // Add filter params that have values
+        Object.keys(filterContext).forEach((key) => {
+            // Skip internal editor fields (EditorObj, __EditorValue)
+            if (key.endsWith('EditorObj') || key.startsWith('__') || key.endsWith('EditorValue')) {
+                return;
+            }
+            processedFilterKeys.add(key);
+            const value = filterContext[key];
+            // Check if value is empty (null, undefined, empty string, or empty array)
+            const isEmpty = this.isFilterValueEmpty(value);
+            if (!isEmpty) {
+                const flattened = this.flattenToDotNotation(key, value);
+                Object.assign(queryParams, flattened);
+            }
+            // If empty, we don't add it to queryParams, so it will be removed from URL
+        });
+        // Remove filter keys that are no longer in filterContext
+        currentFilterKeys.forEach((filterKey) => {
+            if (!processedFilterKeys.has(filterKey)) {
+                // This filter was removed - ensure all related params are removed
+                Object.keys(currentParams).forEach((paramKey) => {
+                    if (paramKey === filterKey || paramKey.startsWith(`${filterKey}.`)) {
+                        delete queryParams[paramKey];
+                    }
+                });
+            }
+        });
+        // Preserve reportId if exists
+        if (reportId) {
+            queryParams['reportId'] = String(reportId);
+        }
+        else {
+            delete queryParams['reportId'];
+        }
+        // Update URL without reloading
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: queryParams,
+            replaceUrl: true, // Don't add to browser history
+        });
+    }
+    /**
+     * Checks if a filter value is considered empty
+     */
+    isFilterValueEmpty(value) {
+        if (value === null || value === undefined || value === '') {
+            return true;
+        }
+        // Check if it's a filter object with empty value
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            const filterObj = value;
+            const filterValue = filterObj.value;
+            if (filterValue === null || filterValue === undefined || filterValue === '') {
+                return true;
+            }
+            if (Array.isArray(filterValue) && filterValue.length === 0) {
+                return true;
+            }
+            // Check nested object values
+            if (typeof filterValue === 'object' && !Array.isArray(filterValue)) {
+                const hasAnyValue = Object.values(filterValue).some((v) => v !== null && v !== undefined && v !== '');
+                return !hasAnyValue;
+            }
+        }
+        // Check if it's an empty array
+        if (Array.isArray(value) && value.length === 0) {
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Flattens filter context to dot notation query parameters
+     * Only includes operation.type and value - skips displayText and other fields
+     * Example: { operation: { type: 'in' }, value: ['POST', 'GET'] }
+     *          -> { 'fieldName.operation.type': 'in', 'fieldName.value': 'POST,GET' }
+     */
+    flattenToDotNotation(prefix, value) {
+        const result = {};
+        if (value == null) {
+            return result;
+        }
+        // Handle filter context object - only extract operation.type and value
+        if (typeof value === 'object' && !Array.isArray(value)) {
+            const filterObj = value;
+            // Extract operation.type if exists
+            if (filterObj.operation?.type) {
+                result[`${prefix}.operation.type`] = String(filterObj.operation.type);
+            }
+            // Extract value - handle arrays and primitives
+            if (filterObj.value !== undefined && filterObj.value !== null && filterObj.value !== '') {
+                if (Array.isArray(filterObj.value)) {
+                    if (filterObj.value.length > 0) {
+                        result[`${prefix}.value`] = filterObj.value.map((v) => String(v)).join(',');
+                    }
+                }
+                else if (typeof filterObj.value === 'object') {
+                    // If value is an object, flatten it recursively
+                    const flattenedValue = this.flattenValueObject(filterObj.value);
+                    Object.assign(result, flattenedValue);
+                }
+                else {
+                    result[`${prefix}.value`] = String(filterObj.value);
+                }
+            }
+            return result;
+        }
+        // Handle primitives directly
+        if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') {
+            result[prefix] = String(value);
+            return result;
+        }
+        // Handle arrays - join with comma
+        if (Array.isArray(value)) {
+            if (value.length > 0) {
+                result[prefix] = value.map(v => String(v)).join(',');
+            }
+            return result;
+        }
+        // Fallback: convert to string
+        result[prefix] = String(value);
+        return result;
+    }
+    /**
+     * Flattens a value object (for nested objects in value field)
+     */
+    flattenValueObject(obj, prefix = '') {
+        const result = {};
+        if (obj == null || typeof obj !== 'object') {
+            return result;
+        }
+        for (const [key, val] of Object.entries(obj)) {
+            const newPrefix = prefix ? `${prefix}.${key}` : key;
+            if (val == null) {
+                continue;
+            }
+            if (typeof val === 'string' || typeof val === 'number' || typeof val === 'boolean') {
+                result[newPrefix] = String(val);
+            }
+            else if (Array.isArray(val)) {
+                if (val.length > 0) {
+                    result[newPrefix] = val.map((v) => String(v)).join(',');
+                }
+            }
+            else if (typeof val === 'object') {
+                const flattened = this.flattenValueObject(val, newPrefix);
+                Object.assign(result, flattened);
+            }
+        }
+        return result;
+    }
+    /**
+     * Reconstructs filter context from dot notation query parameters
+     * Only parses operation.type and value - ignores other fields
+     * Example: { 'fieldName.operation.type': 'in', 'fieldName.value': 'POST,GET' }
+     *          -> { fieldName: { operation: { type: 'in' }, value: ['POST', 'GET'] } }
+     */
+    parseFilterContextFromUrl(params) {
+        const result = {};
+        // Filter out reportId and internal editor fields
+        const filteredParams = {};
+        for (const [key, value] of Object.entries(params)) {
+            // Skip reportId and internal editor fields (EditorObj, __EditorValue, displayText)
+            if (key !== 'reportId' &&
+                !key.endsWith('EditorObj') &&
+                !key.startsWith('__') &&
+                !key.endsWith('EditorValue') &&
+                !key.includes('.displayText')) {
+                filteredParams[key] = value;
+            }
+        }
+        // Group by root key (before first dot)
+        for (const [key, value] of Object.entries(filteredParams)) {
+            if (!key.includes('.')) {
+                // Simple key without dot notation - skip (we only want operation.type and value)
+                continue;
+            }
+            // Split by dot and reconstruct nested structure
+            const parts = key.split('.');
+            const rootKey = parts[0];
+            const path = parts.slice(1);
+            // Only process operation.type and value paths
+            if (path.length === 2 && path[0] === 'operation' && path[1] === 'type') {
+                // operation.type
+                if (!result[rootKey]) {
+                    result[rootKey] = { operation: {} };
+                }
+                if (!result[rootKey].operation) {
+                    result[rootKey].operation = {};
+                }
+                result[rootKey].operation.type = String(value);
+            }
+            else if (path.length === 1 && path[0] === 'value') {
+                // value
+                if (!result[rootKey]) {
+                    result[rootKey] = {};
+                }
+                result[rootKey].value = this.parseValue(String(value));
+            }
+            else if (path.length > 1 && path[0] === 'value') {
+                // nested value object (e.g., value.from, value.to for between)
+                if (!result[rootKey]) {
+                    result[rootKey] = {};
+                }
+                if (!result[rootKey].value) {
+                    result[rootKey].value = {};
+                }
+                const valuePath = path.slice(1);
+                this.setNestedValue(result[rootKey].value, valuePath, this.parseValue(String(value)));
+            }
+        }
+        // Post-process: Convert values to arrays if operation.type is 'in' or 'notIn'
+        // Also reconstruct EditorObj for lookup widgets (from value only, no displayText)
+        for (const [key, value] of Object.entries(result)) {
+            if (value && typeof value === 'object' && value.operation?.type) {
+                const operationType = value.operation.type;
+                // If operation is 'in' or 'notIn', ensure value is an array
+                if ((operationType === 'in' || operationType === 'notIn') && typeof value.value === 'string') {
+                    // Convert comma-separated string to array
+                    value.value = value.value.split(',').map((v) => v.trim()).filter((v) => v !== '');
+                }
+                // Reconstruct EditorObj for lookup widgets from value only
+                // This is needed because lookup widget expects EditorObj to exist
+                if (value.value !== undefined && value.value !== null && value.value !== '') {
+                    const editorObjKey = `${key}EditorObj`;
+                    const valueField = 'id'; // Default value field for lookup
+                    const textField = 'title'; // Default text field for lookup
+                    if (operationType === 'in' || operationType === 'notIn') {
+                        // Multiple selection: create array of objects with value as both id and title
+                        const values = Array.isArray(value.value) ? value.value : [value.value];
+                        result[editorObjKey] = values.map((val) => ({
+                            [valueField]: val,
+                            [textField]: val // Use value as title since we don't have displayText
+                        }));
+                    }
+                    else {
+                        // Single selection: create single object
+                        result[editorObjKey] = {
+                            [valueField]: value.value,
+                            [textField]: value.value // Use value as title since we don't have displayText
+                        };
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    /**
+     * Sets a value in a nested object using a path array
+     */
+    setNestedValue(obj, path, value) {
+        let current = obj;
+        for (let i = 0; i < path.length - 1; i++) {
+            const key = path[i];
+            if (!current[key] || typeof current[key] !== 'object') {
+                current[key] = {};
+            }
+            current = current[key];
+        }
+        const lastKey = path[path.length - 1];
+        current[lastKey] = value;
+    }
+    /**
+     * Parses a string value, handling arrays (comma-separated) and primitives
+     */
+    parseValue(value) {
+        if (value === '') {
+            return value;
+        }
+        // Check if it's a comma-separated array
+        if (value.includes(',')) {
+            return value.split(',').map(v => this.parsePrimitive(v.trim()));
+        }
+        return this.parsePrimitive(value);
+    }
+    /**
+     * Parses a primitive value
+     * For query params, we keep everything as string to match user requirement
+     * Arrays are handled separately in parseValue
+     */
+    parsePrimitive(value) {
+        return value;
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    handleFiltersChange(event) {
+        this.vm.updateFilterContext(event);
+        this.syncFiltersToUrl(event);
+    }
+    handleFiltersInitiated(event) {
+        this.vm.updateFilterContext(event);
+    }
+    async handleExecuteReport() {
+        const isValid = await this.filtersForm()?.validate();
+        if (!isValid?.result) {
+            return;
+        }
+        await this.vm.executeReport();
+    }
+    handleRefresh() {
+        this.vm.refresh();
+    }
+    handleClearFilters() {
+        this.vm.clearFilters();
+        // Reset form if available
+        const form = this.filtersForm();
+        if (form) {
+            form.reset();
+        }
+        // Clear URL query parameters (preserve reportId if exists)
+        const currentParams = this.route.snapshot.queryParams;
+        const reportId = currentParams['reportId'];
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: reportId ? { reportId } : {},
+            replaceUrl: true,
+        });
+    }
+    /**
+     * Handle download report action
+     * Gets PDF data from viewmodel and calls service executeAction method
+     */
+    async handleDownloadReport() {
+        if (!this.vm.isPdfLayout()) {
+            const warning = await this.translateService.translateAsync('@report-management:report-viewer.messages.warnings.download-pdf-only');
+            console.warn(warning);
+            return;
+        }
+        // Fetch PDF data if not already available
+        const result = await this.vm.fetchData();
+        if (result?.data && result.data.type === 'pdf') {
+            const pdfData = result.data;
+            await this.reportViewerService.executeAction('download-report', { pdfData });
+        }
+        else {
+            const warning = await this.translateService.translateAsync('@report-management:report-viewer.messages.warnings.no-pdf-download');
+            console.warn(warning);
+        }
+    }
+    /**
+     * Handle print report action
+     * Gets PDF data from viewmodel and calls service executeAction method
+     */
+    async handlePrintReport() {
+        if (!this.vm.isPdfLayout()) {
+            const warning = await this.translateService.translateAsync('@report-management:report-viewer.messages.warnings.print-pdf-only');
+            console.warn(warning);
+            return;
+        }
+        // Fetch PDF data if not already available
+        const result = await this.vm.fetchData();
+        if (result?.data && result.data.type === 'pdf') {
+            const pdfData = result.data;
+            await this.reportViewerService.executeAction('print-report', { pdfData });
+        }
+        else {
+            const warning = await this.translateService.translateAsync('@report-management:report-viewer.messages.warnings.no-pdf-print');
+            console.warn(warning);
+        }
+    }
+    /**
+     * Handle export report action
+     * Gets report data from viewmodel and calls service executeAction method
+     * @param format - Export format (excel, csv, pdf, image)
+     */
+    async handleExportReport(format) {
+        if (!format) {
+            const warning = await this.translateService.translateAsync('@report-management:report-viewer.messages.warnings.export-format-required');
+            console.warn(warning);
+            return;
+        }
+        // Fetch report data
+        const result = await this.vm.fetchData();
+        if (!result?.data) {
+            const warning = await this.translateService.translateAsync('@report-management:report-viewer.messages.warnings.no-report-data-export');
+            console.warn(warning);
+            return;
+        }
+        const layout = this.vm.currentLayout();
+        await this.reportViewerService.executeAction('export-report', {
+            format,
+            reportData: result.data,
+            layoutDefinition: layout || undefined,
+        });
+    }
+    //#endregion
+    //#region ----   Page Configuration Overrides   ----
+    async getPageBreadcrumbs() {
+        const breadcrumbs = [
+            {
+                name: 'reports',
+                title: await this.translateService.translateAsync('@report-management:module.menus.root.title'),
+                command: {
+                    name: 'navigate-to-reports',
+                },
+            },
+        ];
+        // Add categories path
+        const categoriesPath = this.vm.categoriesPath();
+        if (categoriesPath && categoriesPath.length > 0) {
+            let urlParts = [...this.baseRoutes, 'reports'];
+            for (const category of categoriesPath) {
+                urlParts.push(category.id);
+                breadcrumbs.push({
+                    name: category.id,
+                    title: category.title,
+                    command: {
+                        name: 'navigate-to-category',
+                        options: {
+                            path: [...urlParts],
+                        },
+                    },
+                });
+            }
+        }
+        // Add report title as final breadcrumb
+        const reportDefinition = this.vm.reportDefinition();
+        if (reportDefinition) {
+            breadcrumbs.push({
+                name: 'report-viewer',
+                title: reportDefinition.title,
+            });
+        }
+        return breadcrumbs;
+    }
+    async getPageTitle() {
+        const reportDefinition = this.vm.reportDefinition();
+        if (reportDefinition) {
+            return reportDefinition.title;
+        }
+        return await this.translateService.translateAsync('@report-management:report-viewer.components.report-viewer.title');
+    }
+    async getPageDescription() {
+        const reportDefinition = this.vm.reportDefinition();
+        return reportDefinition?.description || null;
+    }
+    getPageIcon() {
+        // Show current layout icon before the title when there are multiple layouts
+        if (!this.vm.hasMultipleLayouts() || !this.showReportDisplay()) {
+            return null;
+        }
+        const currentLayout = this.vm.currentLayout();
+        if (currentLayout?.icon) {
+            return `fa-light ${currentLayout.icon}`;
+        }
+        return null;
+    }
+    getTitleActions() {
+        // Only show layout switcher if there are multiple layouts and report display is visible
+        if (!this.vm.hasMultipleLayouts() || !this.showReportDisplay()) {
+            return [];
+        }
+        const currentLayoutId = this.vm.currentLayout()?.id;
+        return this.vm
+            .availableLayouts()
+            .map((layout) => ({
+            title: layout.title,
+            // Always show layout icon in prefix
+            icon: layout.icon ? `fa-light ${layout.icon}` : undefined,
+            command: {
+                name: 'switch-layout',
+                metadata: { isLayout: true, layoutId: layout.id, isSelected: layout.id === currentLayoutId },
+            },
+        }))
+            .sort((a, b) => (a.title ?? '').localeCompare(b.title ?? '', undefined, { sensitivity: 'base' }));
+    }
+    async getBackButton() {
+        // On mobile, if report has been executed (showing report), show "Filters" as back button
+        if (this.deviceService.isSmall() && this.vm.hasBeenExecuted()) {
+            return {
+                title: await this.translateService.translateAsync('@general:terms.interface.filter.title'),
+            };
+        }
+        const categoriesPath = this.vm.categoriesPath();
+        if (!categoriesPath || categoriesPath.length === 0) {
+            // If no categories path, go back to reports root
+            return {
+                title: await this.translateService.translateAsync('@report-management:report-runner.terms.menu-title'),
+            };
+        }
+        if (categoriesPath.length === 1) {
+            // If only one category, go back to reports root
+            return {
+                title: await this.translateService.translateAsync('@report-management:report-runner.terms.menu-title'),
+            };
+        }
+        // Go back to parent category
+        const parentCategory = categoriesPath[categoriesPath.length - 1];
+        return {
+            title: parentCategory.title,
+        };
+    }
+    async onBackButtonClick() {
+        // On mobile, if report has been executed (showing report), go back to filters
+        if (this.deviceService.isSmall() && this.vm.hasBeenExecuted()) {
+            this.vm.clearExecutionState();
+            return;
+        }
+        const categoriesPath = this.vm.categoriesPath();
+        if (!categoriesPath || categoriesPath.length <= 1) {
+            // Navigate back to reports root
+            await this.router.navigate([...this.baseRoutes, 'reports']);
+        }
+        else {
+            // Navigate to parent category
+            let urlParts = [...this.baseRoutes, 'reports'];
+            for (const cat of categoriesPath) {
+                urlParts.push(cat.id);
+            }
+            await this.router.navigate(urlParts);
+        }
+    }
+    async getPrimaryMenuItems() {
+        const currentLayout = this.vm.currentLayout();
+        if (!currentLayout) {
+            return [];
+        }
+        // Get primary actions from service (includes general actions + layout-specific actions)
+        const primaryActions = this.reportViewerService.getPrimaryActions(currentLayout);
+        // Convert AXPReportLayoutAction[] to AXPActionMenuItem[] (remove priority property)
+        return primaryActions.map(({ priority, ...action }) => action);
+    }
+    async getSecondaryMenuItems() {
+        const currentLayout = this.vm.currentLayout();
+        if (!currentLayout) {
+            return [];
+        }
+        // Get secondary actions from service (includes general actions + layout-specific actions)
+        const secondaryActions = this.reportViewerService.getSecondaryActions(currentLayout);
+        // Convert AXPReportLayoutAction[] to AXPActionMenuItem[] (remove priority property)
+        return secondaryActions.map(({ priority, ...action }) => action);
+    }
+    async execute(command) {
+        // Handle layout switching from title actions
+        if (command.metadata?.['isLayout']) {
+            const layoutId = command.metadata?.['layoutId'];
+            if (layoutId) {
+                this.vm.switchLayout(layoutId);
+                this.recompute();
+            }
+            return;
+        }
+        switch (command.name) {
+            case 'execute-report':
+                await this.handleExecuteReport();
+                break;
+            case 'refresh-report':
+                this.handleRefresh();
+                break;
+            case 'reset-filters':
+                this.handleClearFilters();
+                break;
+            case 'download-report':
+                this.handleDownloadReport();
+                break;
+            case 'print-report':
+                this.handlePrintReport();
+                break;
+            case 'export-report':
+                await this.handleExportReport(command.options?.['format']);
+                break;
+            case 'navigate-to-reports':
+                await this.router.navigate([...this.baseRoutes, 'reports']);
+                break;
+            case 'navigate-to-category':
+                const path = command.options?.['path'];
+                if (path) {
+                    await this.router.navigate(path);
+                }
+                break;
+            default:
+                const warning = await this.translateService.translateAsync('@report-management:report-viewer.messages.warnings.unknown-command', {
+                    params: { commandName: command.name },
+                });
+                console.warn(warning);
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportViewerPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportViewerPageComponent, isStandalone: true, selector: "axp-report-viewer-page", inputs: { reportId: { classPropertyName: "reportId", publicName: "reportId", isSignal: true, isRequired: false, transformFunction: null }, reportParameters: { classPropertyName: "reportParameters", publicName: "reportParameters", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axp-report-viewer-page" }, providers: [
+            AXUnsubscriber,
+            AXPReportViewerViewModel,
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: AXPReportViewerPageComponent,
+            },
+        ], viewQueries: [{ propertyName: "filtersForm", first: true, predicate: ["filtersForm"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Left Panel: Filters (Always visible for desktop) -->\n  @if (showFiltersPanel()) {\n  <axp-layout-start-side>\n    <axp-layout-header>\n      <axp-layout-title>\n        {{ t('@report-management:report-viewer.components.filters.title') | async }}\n      </axp-layout-title>\n    </axp-layout-header>\n    <axp-layout-content>\n      @if (vm.reportDefinition()) {\n      <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'card'\"\n        (contextChange)=\"handleFiltersChange($event)\" (contextInitiated)=\"handleFiltersInitiated($event)\">\n      </axp-layout-renderer>\n      }\n    </axp-layout-content>\n    <axp-layout-footer class=\"p-4 border-t\" *translate=\"let t\">\n      @if (vm.hasUnappliedFilters()) {\n      <div class=\"w-full warning-lightest-surface mb-2 p-2 rounded border border-warning-200\">\n        <div class=\"flex items-center gap-2 text-warning-800\">\n          <ax-icon class=\"fa-light fa-exclamation-triangle text-sm\"></ax-icon>\n          <span class=\"text-xs\">{{\n            t('@report-management:report-viewer.components.filters.messages.warning.unapplied') | async\n            }}</span>\n        </div>\n      </div>\n      }\n      <ax-button class=\"w-full\" [disabled]=\"!vm.canExecute()\"\n        [text]=\"t('@report-management:report-viewer.actions.execute.title') | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </axp-layout-footer>\n  </axp-layout-start-side>\n  }\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"overflow-auto\">\n    @if (vm.hasError()) {\n    <!-- Error State -->\n    <axp-state-message icon=\"fa-light fa-exclamation-triangle\"\n      [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.unexpected'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.retry.title') | async\" (onClick)=\"vm.clearError()\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-refresh\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else if (!vm.reportDefinition()) {\n    <!-- No Report Selected State -->\n    <axp-state-message icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.title'\"\n      [description]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.description'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.browse-reports.title') | async\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Desktop: Report Display Area -->\n<ng-template #reportDisplay>\n  @if (showReportDisplay()) {\n  <!-- Desktop & Mobile: Report Display Area -->\n  @if (vm.isTableLayout()) {\n  <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n  <axp-report-chart-view> </axp-report-chart-view>\n  } @else if (vm.isPdfLayout()) {\n  <axp-report-pdf-view> </axp-report-pdf-view>\n  }\n  } @else if (vm.reportDefinition()) {\n  <!-- Mobile: Show filters  -->\n  <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'fieldset'\">\n  </axp-layout-renderer>\n  }\n</ng-template>\n\n<!-- Mobile: Execute Button -->\n@if (deviceService.isSmall() && !vm.hasBeenExecuted()) {\n<axp-page-footer class=\"p-2 border-t\">\n  <ax-button class=\"w-full\" [disabled]=\"!vm.canExecute()\"\n    [text]=\"'@report-management:report-viewer.actions.execute.title' | translate | async\" [color]=\"'primary'\"\n    (onClick)=\"execute({ name: 'execute-report' })\">\n    <ax-prefix>\n      <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n    </ax-prefix>\n  </ax-button>\n</axp-page-footer>\n}", styles: ["@layer properties;.axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:calc(var(--spacing, .25rem) * 80);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@media(width>=1920px){.axp-report-viewer-page axp-layout-start-side{width:calc(var(--spacing, .25rem) * 96)}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:calc(var(--spacing, .25rem) * 4)}.axp-report-viewer-page .__mobile-filters{display:flex;height:100%;flex-direction:column;overflow-y:auto}.axp-report-viewer-page .__mobile-filters .__mobile-filters-content{flex:1}.axp-report-viewer-page .__mobile-filters .__mobile-filters-footer{position:sticky;bottom:0;border-top-style:var(--tw-border-style);border-top-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-top:calc(var(--spacing, .25rem) * 2)}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page axp-report-table-view{flex:1;overflow:hidden}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingDialogModule }, { kind: "component", type: 
+                //
+                AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPReportTableViewComponent, selector: "axp-report-table-view" }, { kind: "component", type: AXPThemeLayoutFooterComponent, selector: "axp-layout-footer, axp-layout-page-footer" }, { kind: "component", type: AXPReportChartViewComponent, selector: "axp-report-chart-view" }, { kind: "component", type: AXPReportPdfViewComponent, selector: "axp-report-pdf-view" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportViewerPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-report-viewer-page', standalone: true, imports: [
+                        CommonModule,
+                        AXButtonModule,
+                        AXDecoratorModule,
+                        AXLoadingModule,
+                        AXTranslationModule,
+                        AXBadgeModule,
+                        AXLoadingDialogModule,
+                        //
+                        AXPLayoutRendererComponent,
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutStartSideComponent,
+                        AXPThemeLayoutHeaderComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXPReportTableViewComponent,
+                        AXPThemeLayoutFooterComponent,
+                        AXPReportChartViewComponent,
+                        AXPReportPdfViewComponent,
+                        AXPStateMessageComponent,
+                    ], providers: [
+                        AXUnsubscriber,
+                        AXPReportViewerViewModel,
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXPReportViewerPageComponent,
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-report-viewer-page' }, template: "<axp-page-layout *translate=\"let t\">\n  <!-- Left Panel: Filters (Always visible for desktop) -->\n  @if (showFiltersPanel()) {\n  <axp-layout-start-side>\n    <axp-layout-header>\n      <axp-layout-title>\n        {{ t('@report-management:report-viewer.components.filters.title') | async }}\n      </axp-layout-title>\n    </axp-layout-header>\n    <axp-layout-content>\n      @if (vm.reportDefinition()) {\n      <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'card'\"\n        (contextChange)=\"handleFiltersChange($event)\" (contextInitiated)=\"handleFiltersInitiated($event)\">\n      </axp-layout-renderer>\n      }\n    </axp-layout-content>\n    <axp-layout-footer class=\"p-4 border-t\" *translate=\"let t\">\n      @if (vm.hasUnappliedFilters()) {\n      <div class=\"w-full warning-lightest-surface mb-2 p-2 rounded border border-warning-200\">\n        <div class=\"flex items-center gap-2 text-warning-800\">\n          <ax-icon class=\"fa-light fa-exclamation-triangle text-sm\"></ax-icon>\n          <span class=\"text-xs\">{{\n            t('@report-management:report-viewer.components.filters.messages.warning.unapplied') | async\n            }}</span>\n        </div>\n      </div>\n      }\n      <ax-button class=\"w-full\" [disabled]=\"!vm.canExecute()\"\n        [text]=\"t('@report-management:report-viewer.actions.execute.title') | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </axp-layout-footer>\n  </axp-layout-start-side>\n  }\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"overflow-auto\">\n    @if (vm.hasError()) {\n    <!-- Error State -->\n    <axp-state-message icon=\"fa-light fa-exclamation-triangle\"\n      [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.unexpected'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.retry.title') | async\" (onClick)=\"vm.clearError()\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-refresh\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else if (!vm.reportDefinition()) {\n    <!-- No Report Selected State -->\n    <axp-state-message icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.title'\"\n      [description]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.description'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.browse-reports.title') | async\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Desktop: Report Display Area -->\n<ng-template #reportDisplay>\n  @if (showReportDisplay()) {\n  <!-- Desktop & Mobile: Report Display Area -->\n  @if (vm.isTableLayout()) {\n  <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n  <axp-report-chart-view> </axp-report-chart-view>\n  } @else if (vm.isPdfLayout()) {\n  <axp-report-pdf-view> </axp-report-pdf-view>\n  }\n  } @else if (vm.reportDefinition()) {\n  <!-- Mobile: Show filters  -->\n  <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'fieldset'\">\n  </axp-layout-renderer>\n  }\n</ng-template>\n\n<!-- Mobile: Execute Button -->\n@if (deviceService.isSmall() && !vm.hasBeenExecuted()) {\n<axp-page-footer class=\"p-2 border-t\">\n  <ax-button class=\"w-full\" [disabled]=\"!vm.canExecute()\"\n    [text]=\"'@report-management:report-viewer.actions.execute.title' | translate | async\" [color]=\"'primary'\"\n    (onClick)=\"execute({ name: 'execute-report' })\">\n    <ax-prefix>\n      <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n    </ax-prefix>\n  </ax-button>\n</axp-page-footer>\n}", styles: ["@layer properties;.axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:calc(var(--spacing, .25rem) * 80);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px}@media(width>=1920px){.axp-report-viewer-page axp-layout-start-side{width:calc(var(--spacing, .25rem) * 96)}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:calc(var(--spacing, .25rem) * 4)}.axp-report-viewer-page .__mobile-filters{display:flex;height:100%;flex-direction:column;overflow-y:auto}.axp-report-viewer-page .__mobile-filters .__mobile-filters-content{flex:1}.axp-report-viewer-page .__mobile-filters .__mobile-filters-footer{position:sticky;bottom:0;border-top-style:var(--tw-border-style);border-top-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-top:calc(var(--spacing, .25rem) * 2)}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page axp-report-table-view{flex:1;overflow:hidden}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { reportId: [{ type: i0.Input, args: [{ isSignal: true, alias: "reportId", required: false }] }], reportParameters: [{ type: i0.Input, args: [{ isSignal: true, alias: "reportParameters", required: false }] }], filtersForm: [{ type: i0.ViewChild, args: ['filtersForm', { isSignal: true }] }] } });
+
+var reportViewerPage_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AXPReportViewerPageComponent: AXPReportViewerPageComponent
+});
+
+class AXPReportBarChartViewComponent {
+    constructor() {
+        //#region ----   Dependencies   ----
+        this.vm = inject(AXPReportViewerViewModel);
+        this.AXPPageStatus = AXPPageStatus;
+        //#endregion
+        //#region ----   Computed Properties   ----
+        /**
+         * Current chart layout configuration
+         */
+        this.chartLayout = computed(() => {
+            const layout = this.vm.currentLayout();
+            return layout?.layout.type === 'chart' ? layout.layout : null;
+        }, ...(ngDevMode ? [{ debugName: "chartLayout" }] : /* istanbul ignore next */ []));
+        /**
+         * Chart configuration options
+         */
+        this.chartOptions = computed(() => {
+            const chartLayout = this.chartLayout();
+            return chartLayout?.options || null;
+        }, ...(ngDevMode ? [{ debugName: "chartOptions" }] : /* istanbul ignore next */ []));
+        /**
+         * Chart type for rendering
+         */
+        this.chartType = computed(() => {
+            const options = this.chartOptions();
+            return options?.chartType || 'bar';
+        }, ...(ngDevMode ? [{ debugName: "chartType" }] : /* istanbul ignore next */ []));
+        /**
+         * Data mapping configuration
+         */
+        this.dataMapping = computed(() => {
+            const options = this.chartOptions();
+            return options?.dataMapping || null;
+        }, ...(ngDevMode ? [{ debugName: "dataMapping" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   Effects   ----
+        /**
+         * Effect to handle data fetching when chart configuration changes
+         */
+        this.#fetchData = effect(() => {
+            if (this.vm.allowFetchData() && this.vm.shouldExecuteReport() && this.chartOptions()) {
+                // TODO: Implement chart data fetching
+                console.log('Chart data fetch triggered', {
+                    chartType: this.chartType(),
+                    dataMapping: this.dataMapping(),
+                });
+                this.vm.fetchData().then((data) => {
+                    const barChartData = AXBarChartReportMapper((data?.data).data ?? {});
+                    this.barChartData.set(barChartData);
+                    console.log('barChartData', barChartData);
+                });
+            }
+        }, ...(ngDevMode ? [{ debugName: "#fetchData" }] : /* istanbul ignore next */ []));
+        this.barChartData = signal([], ...(ngDevMode ? [{ debugName: "barChartData" }] : /* istanbul ignore next */ []));
+        this.barChartOptions = signal({}, ...(ngDevMode ? [{ debugName: "barChartOptions" }] : /* istanbul ignore next */ []));
+        this.legendOptions = signal({
+            mode: 'horizontal',
+        }, ...(ngDevMode ? [{ debugName: "legendOptions" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Effect to handle data fetching when chart configuration changes
+     */
+    #fetchData;
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle chart click events
+     */
+    handleChartClick(event) {
+        // TODO: Implement chart click handling
+        console.log('Chart clicked:', event);
+    }
+    /**
+     * Handle chart data point selection
+     */
+    handleDataPointSelect(event) {
+        // TODO: Implement data point selection
+        console.log('Data point selected:', event);
+    }
+    //#endregion
+    //#region ----   Helper Methods   ----
+    /**
+     * Check if chart is ready to render
+     */
+    isChartReady() {
+        return !!(this.chartOptions() && this.dataMapping());
+    }
+    /**
+     * Get chart configuration for rendering
+     */
+    getChartConfig() {
+        // TODO: Transform AXPReportChartOptions to chart library format
+        return {
+            type: this.chartType(),
+            options: this.chartOptions(),
+            dataMapping: this.dataMapping(),
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportBarChartViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportBarChartViewComponent, isStandalone: true, selector: "axp-report-bar-chart-view", ngImport: i0, template: "<div class=\"axp-report-chart-view\" *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n  <!-- Loading State -->\n  <div class=\"__loading\">\n    <div class=\"spinner spin border-4 border-gray-200 border-t-primary rounded-full w-12 h-12\">\n    </div>\n    <div class=\"__loading-text\">\n      {{ t('@report-management:report-viewer.components.chart.messages.loading') | async }}\n    </div>\n  </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n  <!-- Error State -->\n  <axp-state-message mode=\"error\" icon=\"fa-light fa-exclamation-triangle\"\n    [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n    [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\">\n  </axp-state-message>\n  } @else if (isChartReady()) {\n  <!-- Chart Content -->\n  <div class=\"__chart-container\">\n    @if (chartLayout()?.header) {\n    <div class=\"__chart-header\">\n      <h3 class=\"__chart-title\">{{ chartLayout()?.header?.title }}</h3>\n      @if (chartLayout()?.header?.showDate) {\n      <div class=\"__chart-date\">{{ '@general:common.date.today' | translate | async }}</div>\n      }\n    </div>\n    }\n\n    <div class=\"__chart-body\">\n      <!-- Chart component will be rendered here -->\n      <div class=\"__chart-placeholder\">\n        <div class=\"__placeholder-content\">\n          <div class=\"flex flex-wrap items-center justify-center gap-10\"\n            [class]=\"legendOptions().mode === 'horizontal' ? 'flex-col' : 'flex-row'\">\n            <!-- Chart Area -->\n            <div class=\"flex-0 size-96\">\n              <ax-bar-chart #chart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n            </div>\n            <!-- Legend Area -->\n            @if (barChartData().length > 0) {\n            <div>\n              <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"chart\"></ax-chart-legend>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n\n    @if (chartLayout()?.footer) {\n    <div class=\"__chart-footer\">\n      @if (chartLayout()?.footer?.customHtml) {\n      <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n      }\n    </div>\n    }\n  </div>\n  } @else {\n  <!-- No Configuration State -->\n  <axp-state-message icon=\"fa-light fa-chart-column\"\n    [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n    [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\">\n  </axp-state-message>\n  }\n</div>", styles: ["@layer properties;.axp-report-chart-view{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__loading{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 8)}.axp-report-chart-view .__loading .__loading-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-600, oklch(44.6% .03 256.802))}.axp-report-chart-view .__chart-container{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__chart-container .__chart-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-gray-50, oklch(98.5% .002 247.839));padding:calc(var(--spacing, .25rem) * 4)}.axp-report-chart-view .__chart-container .__chart-header .__chart-title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-report-chart-view .__chart-container .__chart-header .__chart-date{margin-top:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-600, oklch(44.6% .03 256.802))}.axp-report-chart-view .__chart-container .__chart-body{flex:1;overflow:hidden}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{font-size:var(--text-6xl, 3.75rem);line-height:var(--tw-leading, var(--text-6xl--line-height, 1));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)}}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content{max-width:var(--container-md, 28rem)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-description{margin-bottom:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-600, oklch(44.6% .03 256.802))}.axp-report-chart-view .__chart-container .__chart-body .__chart-content{height:100%;width:100%}.axp-report-chart-view .__chart-container .__chart-footer{border-top-style:var(--tw-border-style);border-top-width:1px;background-color:var(--color-gray-50, oklch(98.5% .002 247.839));padding:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-600, oklch(44.6% .03 256.802))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }, { kind: "component", type: AXChartLegendComponent, selector: "ax-chart-legend", inputs: ["chart", "options"], outputs: ["itemClick", "itemMouseEnter", "itemMouseLeave"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportBarChartViewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-report-bar-chart-view', standalone: true, imports: [
+                        CommonModule,
+                        AXDecoratorModule,
+                        AXTranslationModule,
+                        AXPStateMessageComponent,
+                        AXPWidgetCoreModule,
+                        AXBarChartComponent,
+                        AXChartLegendComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"axp-report-chart-view\" *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n  <!-- Loading State -->\n  <div class=\"__loading\">\n    <div class=\"spinner spin border-4 border-gray-200 border-t-primary rounded-full w-12 h-12\">\n    </div>\n    <div class=\"__loading-text\">\n      {{ t('@report-management:report-viewer.components.chart.messages.loading') | async }}\n    </div>\n  </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n  <!-- Error State -->\n  <axp-state-message mode=\"error\" icon=\"fa-light fa-exclamation-triangle\"\n    [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n    [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\">\n  </axp-state-message>\n  } @else if (isChartReady()) {\n  <!-- Chart Content -->\n  <div class=\"__chart-container\">\n    @if (chartLayout()?.header) {\n    <div class=\"__chart-header\">\n      <h3 class=\"__chart-title\">{{ chartLayout()?.header?.title }}</h3>\n      @if (chartLayout()?.header?.showDate) {\n      <div class=\"__chart-date\">{{ '@general:common.date.today' | translate | async }}</div>\n      }\n    </div>\n    }\n\n    <div class=\"__chart-body\">\n      <!-- Chart component will be rendered here -->\n      <div class=\"__chart-placeholder\">\n        <div class=\"__placeholder-content\">\n          <div class=\"flex flex-wrap items-center justify-center gap-10\"\n            [class]=\"legendOptions().mode === 'horizontal' ? 'flex-col' : 'flex-row'\">\n            <!-- Chart Area -->\n            <div class=\"flex-0 size-96\">\n              <ax-bar-chart #chart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n            </div>\n            <!-- Legend Area -->\n            @if (barChartData().length > 0) {\n            <div>\n              <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"chart\"></ax-chart-legend>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n\n    @if (chartLayout()?.footer) {\n    <div class=\"__chart-footer\">\n      @if (chartLayout()?.footer?.customHtml) {\n      <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n      }\n    </div>\n    }\n  </div>\n  } @else {\n  <!-- No Configuration State -->\n  <axp-state-message icon=\"fa-light fa-chart-column\"\n    [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n    [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\">\n  </axp-state-message>\n  }\n</div>", styles: ["@layer properties;.axp-report-chart-view{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__loading{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 4);padding:calc(var(--spacing, .25rem) * 8)}.axp-report-chart-view .__loading .__loading-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-600, oklch(44.6% .03 256.802))}.axp-report-chart-view .__chart-container{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__chart-container .__chart-header{border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-gray-50, oklch(98.5% .002 247.839));padding:calc(var(--spacing, .25rem) * 4)}.axp-report-chart-view .__chart-container .__chart-header .__chart-title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-report-chart-view .__chart-container .__chart-header .__chart-date{margin-top:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-600, oklch(44.6% .03 256.802))}.axp-report-chart-view .__chart-container .__chart-body{flex:1;overflow:hidden}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{font-size:var(--text-6xl, 3.75rem);line-height:var(--tw-leading, var(--text-6xl--line-height, 1));color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 20%,transparent)}}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content{max-width:var(--container-md, 28rem)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xl, 1.25rem);line-height:var(--tw-leading, var(--text-xl--line-height, calc(1.75 / 1.25)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-description{margin-bottom:calc(var(--spacing, .25rem) * 4);color:var(--color-gray-600, oklch(44.6% .03 256.802))}.axp-report-chart-view .__chart-container .__chart-body .__chart-content{height:100%;width:100%}.axp-report-chart-view .__chart-container .__chart-footer{border-top-style:var(--tw-border-style);border-top-width:1px;background-color:var(--color-gray-50, oklch(98.5% .002 247.839));padding:calc(var(--spacing, .25rem) * 4);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-gray-600, oklch(44.6% .03 256.802))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AXBarChartReportMapper, AXLineChartReportMapper, AXMPermissionDefinitionProvider, AXMReportManagementModule, AXPDrillToReportCommand, AXPReportBarChartViewComponent, AXPReportTableViewComponent, AXPReportViewerPageComponent, AXPReportViewerService, AXPReportViewerViewModel, AXPieChartReportMapper, convertContextDataToFilterClause };
+//# sourceMappingURL=acorex-platform-module-report-management-client.mjs.map