@acorex-platform/module-report-management-client 0.0.38 → 0.0.48

package/fesm2022/acorex-platform-module-report-management-client-report-viewer-page.component-YUdzA4B9.mjs

@@ -0,0 +1,934 @@
+import { runtimeQueryPayloadData, resolveMultiLanguageString } from '@acorex-platform/framework-shared/core';
+import { AXBadgeModule } from '@acorex/components/badge';
+import * as i1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i4 from '@acorex/components/check-box';
+import { AXCheckBoxModule } from '@acorex/components/check-box';
+import * as i2$2 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 * as i4$1 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXPDeviceService } from '@acorex-platform/framework-client/core';
+import { AXPLayoutRendererComponent } from '@acorex-platform/framework-client/layout/builder';
+import { AXPThemeLayoutStartSideComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutFooterComponent, AXPStateMessageComponent } from '@acorex-platform/framework-client/layout/components';
+import { AXPEntityService } from '@acorex-platform/framework-client/layout/entity';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex-platform/framework-client/layout/views';
+import { AXPLayoutThemeService } from '@acorex-platform/framework-client/themes/shared';
+import { RootConfig, AXPReportManagementFeatureKeys } from '@acorex-platform/module-report-management-client/contracts';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, DestroyRef, input, viewChild, effect, untracked, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i2$1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, NavigationStart } from '@angular/router';
+import { combineLatest } from 'rxjs';
+import { filter } from 'rxjs/operators';
+import { A as AXPReportViewerViewModel, r as reportLayoutPageIcon, i as isDistinctLayoutTitle, a as reportLayoutTitleKey, b as reportLayoutGlyph, c as AXPReportTableViewComponent, d as AXPReportChartViewComponent, e as AXPReportPdfViewComponent } from './acorex-platform-module-report-management-client-report-layout-switcher.util-BGhHRYfe.mjs';
+import { A as AXPReportViewerService, r as resolveReportFilterDefaultValue, q as queryResultToPdfSource } from './acorex-platform-module-report-management-client-acorex-platform-module-report-management-client-D5dCG62j.mjs';
+
+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);
+        this.entityService = inject(AXPEntityService);
+        //#endregion
+        //#region ----   Inputs   ----
+        this.reportId = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "reportId" }] : /* istanbul ignore next */ []));
+        this.reportParameters = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "reportParameters" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   ViewChildren   ----
+        this.filtersForm = viewChild('filtersForm', /* @ts-ignore */
+        ...(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();
+                }
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "watchNavigationLoading" }] : /* istanbul ignore next */ []));
+        this.syncFrozenRunUrl = effect(() => {
+            const runId = this.vm.runId();
+            const frozen = this.vm.isFrozen();
+            const queued = this.vm.isBackgroundQueued();
+            if (queued) {
+                untracked(() => {
+                    const currentRunId = this.route.snapshot.queryParamMap.get('runId')?.trim();
+                    if (!currentRunId) {
+                        return;
+                    }
+                    void this.router.navigate([], {
+                        relativeTo: this.route,
+                        queryParams: { runId: null },
+                        queryParamsHandling: 'merge',
+                        replaceUrl: true,
+                    });
+                });
+                return;
+            }
+            if (!frozen || !runId) {
+                return;
+            }
+            untracked(() => {
+                const currentRunId = this.route.snapshot.queryParamMap.get('runId')?.trim();
+                if (currentRunId === runId) {
+                    return;
+                }
+                void this.router.navigate([], {
+                    relativeTo: this.route,
+                    queryParams: { runId },
+                    queryParamsHandling: 'merge',
+                    replaceUrl: true,
+                });
+                this.recompute();
+            });
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "syncFrozenRunUrl" }] : /* istanbul ignore next */ []));
+        //#endregion
+        this.loadingDialogRef = null;
+        this.isDialogOpening = false;
+        this.lastReportRouteKey = null;
+        //#region ----   Computed Properties   ----
+        this.showFiltersPanel = () => this.deviceService.isLarge();
+        this.showReportDisplay = () => (!this.vm.isBackgroundReportMode() || this.vm.isFrozen()) &&
+            (this.deviceService.isLarge() || (this.deviceService.isSmall() && this.vm.hasBeenExecuted()));
+        //#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.layoutPageIcon = reportLayoutPageIcon;
+        this.destroyRef.onDestroy(() => {
+            this.closeContentLoading();
+            void this.vm.releaseInlineNotificationWatch();
+        });
+    }
+    reportsListPath() {
+        return this.entityService
+            .withEntity(RootConfig.module.name, RootConfig.entities.report.name)
+            .createPath();
+    }
+    isReportViewerUrl(url) {
+        return url.includes(`/${RootConfig.module.route}/viewer`);
+    }
+    //#endregion
+    //#region ----   Lifecycle   ----
+    async ngOnInit() {
+        await super.ngOnInit();
+        this.unsubscriber
+            .takeUntilDestroy(this.router.events.pipe(filter((event) => event instanceof NavigationStart)))
+            .subscribe((event) => {
+            const navigation = event;
+            if (this.isReportViewerUrl(this.router.url) && !this.isReportViewerUrl(navigation.url)) {
+                void this.vm.releaseInlineNotificationWatch();
+            }
+        });
+        // Reload when reportId or runId changes. Ignore other query params (live filters).
+        this.unsubscriber
+            .takeUntilDestroy(combineLatest([this.route.paramMap, this.route.queryParamMap]))
+            .subscribe(async ([params, queryParams]) => {
+            const reportId = params.get('reportId') || queryParams.get('reportId') || this.reportId();
+            if (!reportId) {
+                return;
+            }
+            const runId = queryParams.get('runId')?.trim() || '';
+            const routeKey = `${reportId}::${runId}`;
+            if (routeKey === this.lastReportRouteKey) {
+                return;
+            }
+            this.lastReportRouteKey = routeKey;
+            await this.loadReportAndRefresh(reportId);
+        });
+    }
+    /**
+     * Effect to handle data fetching when chart configuration changes
+     */
+    //#endregion
+    //#region ----   Helper Methods   ----
+    async loadReportAndRefresh(reportId) {
+        const runId = this.route.snapshot.queryParamMap.get('runId')?.trim();
+        if (runId) {
+            await this.vm.loadReport(reportId);
+            await this.vm.loadFrozenRun(runId);
+            this.recompute();
+            return;
+        }
+        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'];
+        delete initialParams['runId'];
+        // Parse filter context values coming from URL (they are strings)
+        const parsedInitialParams = this.parseFilterContextFromUrl(initialParams);
+        // Merge with component input parameters (`today` / `{ from, to }` → filter shape)
+        const rawParams = { ...parsedInitialParams, ...this.reportParameters() };
+        const allParams = Object.fromEntries(Object.entries(rawParams).map(([key, value]) => [key, resolveReportFilterDefaultValue(value)]));
+        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 !== 'runId' &&
+                !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 !== 'runId' &&
+                !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 / runId if exists
+        if (reportId) {
+            queryParams['reportId'] = String(reportId);
+        }
+        else {
+            delete queryParams['reportId'];
+        }
+        const runId = currentParams['runId'];
+        if (runId) {
+            queryParams['runId'] = String(runId);
+        }
+        else {
+            delete queryParams['runId'];
+        }
+        // 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 !== 'runId' &&
+                !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() {
+        if (this.vm.isFrozen() && !this.vm.isBackgroundReportMode()) {
+            return;
+        }
+        const isValid = await this.filtersForm()?.validate();
+        if (!isValid?.result) {
+            return;
+        }
+        await this.vm.executeReport();
+        this.recompute();
+    }
+    async handleGenerateInBackground() {
+        if (this.vm.isFrozen() && !this.vm.isBackgroundReportMode()) {
+            return;
+        }
+        const isValid = await this.filtersForm()?.validate();
+        if (!isValid?.result) {
+            return;
+        }
+        await this.vm.generateInBackground();
+        this.recompute();
+    }
+    canGenerateInBackground() {
+        return (this.sessionService.isFeatureEnabled(AXPReportManagementFeatureKeys.BackgroundReports) &&
+            !this.vm.isFrozen() &&
+            (this.vm.generationMode() === 'choose' || this.vm.generationMode() === 'background'));
+    }
+    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'];
+        const runId = currentParams['runId'];
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: {
+                ...(reportId ? { reportId } : {}),
+                ...(runId ? { runId } : {}),
+            },
+            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 pdfData = queryResultToPdfSource(await this.vm.fetchData());
+        if (pdfData) {
+            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 pdfData = queryResultToPdfSource(await this.vm.fetchData());
+        if (pdfData) {
+            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();
+        const reportData = runtimeQueryPayloadData(result);
+        if (reportData == null) {
+            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,
+            layoutDefinition: layout || undefined,
+        });
+    }
+    getLayoutSelectionLabel(layout) {
+        const locale = this.translateService.getActiveLang() || 'en-US';
+        const reportTitle = this.vm.reportDefinition()?.title;
+        if (isDistinctLayoutTitle(layout.title, reportTitle, locale)) {
+            return layout.title ?? reportLayoutTitleKey(layout);
+        }
+        return reportLayoutTitleKey(layout);
+    }
+    handleBackgroundLayoutToggle(layoutId, selected) {
+        this.vm.setBackgroundLayoutSelected(layoutId, selected);
+    }
+    //#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',
+                    options: {
+                        path: this.reportsListPath(),
+                    },
+                },
+            },
+        ];
+        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() {
+        if ((this.vm.isBackgroundReportMode() && !this.vm.isFrozen()) ||
+            !this.vm.hasMultipleLayouts() ||
+            !this.showReportDisplay()) {
+            return null;
+        }
+        const currentLayout = this.vm.currentLayout();
+        if (!currentLayout) {
+            return null;
+        }
+        return reportLayoutPageIcon(currentLayout.icon, {
+            type: currentLayout.layout.type,
+        });
+    }
+    async getTitleActions() {
+        if ((this.vm.isBackgroundReportMode() && !this.vm.isFrozen()) ||
+            !this.vm.hasMultipleLayouts() ||
+            !this.showReportDisplay()) {
+            return [];
+        }
+        const currentLayoutId = this.vm.currentLayout()?.id;
+        const reportTitle = this.vm.reportDefinition()?.title;
+        const locale = this.translateService.getActiveLang() || 'en-US';
+        const items = [];
+        for (const layout of this.vm.availableLayouts()) {
+            items.push({
+                title: await this.resolveLayoutSwitcherTitle(layout, reportTitle, locale),
+                icon: reportLayoutGlyph(layout.icon, layout),
+                command: {
+                    name: 'switch-layout',
+                    metadata: { isLayout: true, layoutId: layout.id, isSelected: layout.id === currentLayoutId },
+                },
+            });
+        }
+        return items.sort((a, b) => resolveMultiLanguageString(a.title, locale).localeCompare(resolveMultiLanguageString(b.title, locale), undefined, { sensitivity: 'base' }));
+    }
+    async resolveLayoutSwitcherTitle(layout, reportTitle, locale) {
+        if (isDistinctLayoutTitle(layout.title, reportTitle, locale)) {
+            if (typeof layout.title === 'string' && layout.title.startsWith('@')) {
+                return await this.translateService.translateAsync(layout.title);
+            }
+            if (typeof layout.title === 'object') {
+                return this.translateService.resolve(layout.title) || layout.title;
+            }
+            return layout.title;
+        }
+        return await this.translateService.translateAsync(reportLayoutTitleKey(layout));
+    }
+    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'),
+            };
+        }
+        return {
+            title: await this.translateService.translateAsync('@report-management:module.menus.root.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;
+        }
+        await this.router.navigateByUrl(this.reportsListPath());
+    }
+    async getPrimaryMenuItems() {
+        if (this.vm.isBackgroundReportMode() && !this.vm.isFrozen()) {
+            return [];
+        }
+        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() {
+        if (this.vm.isBackgroundReportMode() && !this.vm.isFrozen()) {
+            return [];
+        }
+        const currentLayout = this.vm.currentLayout();
+        if (!currentLayout) {
+            return [];
+        }
+        const secondaryActions = this.reportViewerService.getSecondaryActions(currentLayout);
+        const items = secondaryActions.map(({ priority, ...action }) => action);
+        if (this.canGenerateInBackground() && this.vm.generationMode() === 'choose') {
+            items.unshift({
+                title: '@report-management:report-generation.actions.generate-in-background',
+                icon: 'fa-light fa-clock',
+                command: { name: 'generate-in-background' },
+            });
+        }
+        return items;
+    }
+    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 'generate-in-background':
+                await this.handleGenerateInBackground();
+                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;
+            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: "22.0.8", ngImport: i0, type: AXPReportViewerPageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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      <!-- ----- Background report layout multi-select ----- -->\n      @if (vm.isBackgroundReportMode() && !vm.isBackgroundQueued() && vm.availableLayouts().length > 0) {\n        <div class=\"mt-4 pt-4 border-t\">\n          <div class=\"mb-2\">\n            <span class=\"text-sm font-medium\">\n              {{ t('@report-management:report-generation.components.background-layouts.title') | async }}\n            </span>\n          </div>\n          <p class=\"text-xs opacity-70 mb-3\">\n            {{ t('@report-management:report-generation.components.background-layouts.description') | async }}\n          </p>\n          <div class=\"flex flex-col gap-2\">\n            @for (layout of vm.availableLayouts(); track layout.id) {\n              <label class=\"flex items-center gap-2 p-2 rounded border cursor-pointer hover:bg-neutral-50\">\n                <ax-check-box\n                  [ngModel]=\"vm.isBackgroundLayoutSelected(layout.id)\"\n                  (ngModelChange)=\"handleBackgroundLayoutToggle(layout.id, $event)\"\n                ></ax-check-box>\n                <ax-icon [icon]=\"layoutPageIcon(layout.icon, layout)\"></ax-icon>\n                <span class=\"text-sm\">{{ getLayoutSelectionLabel(layout) | translate | async }}</span>\n              </label>\n            }\n          </div>\n        </div>\n      }\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      @if (vm.isBackgroundReportMode() && !vm.hasSelectedBackgroundLayouts() && !vm.isBackgroundQueued()) {\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-generation.errors.no-layouts-selected') | async\n              }}</span>\n          </div>\n        </div>\n      }\n      <ax-button class=\"w-full\" [disabled]=\"vm.isBackgroundReportMode() ? vm.isBackgroundGenerateDisabled() : (!vm.canExecute() || vm.areParametersReadonly())\"\n        [text]=\"(vm.isBackgroundReportMode()\n          ? t('@report-management:report-generation.actions.generate-in-background')\n          : t('@report-management:report-viewer.actions.execute.title')) | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon [icon]=\"vm.isBackgroundReportMode() ? 'fa-light fa-clock' : 'fa-light fa-play'\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n      <!-- ----- Secondary background generate for choose mode ----- -->\n      @if (canGenerateInBackground() && vm.generationMode() === 'choose') {\n        <ax-button class=\"w-full mt-2\" [disabled]=\"vm.areParametersReadonly()\"\n          [text]=\"t('@report-management:report-generation.actions.generate-in-background') | async\" [color]=\"'default'\"\n          (onClick)=\"execute({ name: 'generate-in-background' })\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-clock\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      }\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.isFrozen()) {\n      <!-- ----- Frozen run banner ----- -->\n      <div class=\"warning-lightest-surface mb-3 p-3 rounded border border-warning-200 text-warning-800 text-sm\">\n        {{ t('@report-management:report-generation.banners.frozen') | async }}\n      </div>\n    }\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    <!-- ----- Background report message state (no live layout preview) ----- -->\n    } @else if (vm.isBackgroundReportMode() && !vm.isFrozen()) {\n      <!-- ----- Mobile filters and layout selection for background reports ----- -->\n      @if (deviceService.isSmall() && !vm.isBackgroundQueued()) {\n        <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'fieldset'\"\n          (contextChange)=\"handleFiltersChange($event)\" (contextInitiated)=\"handleFiltersInitiated($event)\">\n        </axp-layout-renderer>\n        @if (vm.availableLayouts().length > 0) {\n          <div class=\"mt-4 pt-4 border-t\">\n            <div class=\"flex items-center justify-between gap-2 mb-2\">\n              <span class=\"text-sm font-medium\">\n                {{ t('@report-management:report-generation.components.background-layouts.title') | async }}\n              </span>\n            </div>\n            <p class=\"text-xs opacity-70 mb-3\">\n              {{ t('@report-management:report-generation.components.background-layouts.description') | async }}\n            </p>\n            <div class=\"flex flex-col gap-2\">\n              @for (layout of vm.availableLayouts(); track layout.id) {\n                <label class=\"flex items-center gap-2 p-2 rounded border cursor-pointer\">\n                  <ax-check-box\n                    [ngModel]=\"vm.isBackgroundLayoutSelected(layout.id)\"\n                    (ngModelChange)=\"handleBackgroundLayoutToggle(layout.id, $event)\"\n                  ></ax-check-box>\n                  <ax-icon [icon]=\"layoutPageIcon(layout.icon, layout)\"></ax-icon>\n                  <span class=\"text-sm\">{{ getLayoutSelectionLabel(layout) | translate | async }}</span>\n                </label>\n              }\n            </div>\n          </div>\n        }\n      }\n      @if (vm.isBackgroundQueued()) {\n        <axp-state-message icon=\"fa-light fa-clock\"\n          [title]=\"'@report-management:report-generation.empty-states.background.queued-title'\"\n          [description]=\"'@report-management:report-generation.empty-states.background.queued-description'\">\n        </axp-state-message>\n      } @else {\n        <axp-state-message icon=\"fa-light fa-clock\"\n          [title]=\"'@report-management:report-generation.empty-states.background.title'\"\n          [description]=\"'@report-management:report-generation.empty-states.background.description'\">\n        </axp-state-message>\n      }\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.isBackgroundReportMode() && !vm.hasBeenExecuted()) || (vm.isBackgroundReportMode() && !vm.isBackgroundQueued()))) {\n<axp-page-footer class=\"p-2 border-t\">\n  <ax-button class=\"w-full\" [disabled]=\"vm.isBackgroundReportMode() ? vm.isBackgroundGenerateDisabled() : (!vm.canExecute() || vm.areParametersReadonly())\"\n    [text]=\"(vm.isBackgroundReportMode()\n      ? '@report-management:report-generation.actions.generate-in-background'\n      : '@report-management:report-viewer.actions.execute.title') | translate | async\" [color]=\"'primary'\"\n    (onClick)=\"execute({ name: 'execute-report' })\">\n    <ax-prefix>\n      <ax-icon [icon]=\"vm.isBackgroundReportMode() ? 'fa-light fa-clock' : 'fa-light fa-play'\"></ax-icon>\n    </ax-prefix>\n  </ax-button>\n</axp-page-footer>\n}\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.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$2.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: i4$1.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: i2.AsyncPipe, name: "async" }, { kind: "pipe", type: i4$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPReportViewerPageComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-report-viewer-page', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        AXButtonModule,
+                        AXCheckBoxModule,
+                        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      <!-- ----- Background report layout multi-select ----- -->\n      @if (vm.isBackgroundReportMode() && !vm.isBackgroundQueued() && vm.availableLayouts().length > 0) {\n        <div class=\"mt-4 pt-4 border-t\">\n          <div class=\"mb-2\">\n            <span class=\"text-sm font-medium\">\n              {{ t('@report-management:report-generation.components.background-layouts.title') | async }}\n            </span>\n          </div>\n          <p class=\"text-xs opacity-70 mb-3\">\n            {{ t('@report-management:report-generation.components.background-layouts.description') | async }}\n          </p>\n          <div class=\"flex flex-col gap-2\">\n            @for (layout of vm.availableLayouts(); track layout.id) {\n              <label class=\"flex items-center gap-2 p-2 rounded border cursor-pointer hover:bg-neutral-50\">\n                <ax-check-box\n                  [ngModel]=\"vm.isBackgroundLayoutSelected(layout.id)\"\n                  (ngModelChange)=\"handleBackgroundLayoutToggle(layout.id, $event)\"\n                ></ax-check-box>\n                <ax-icon [icon]=\"layoutPageIcon(layout.icon, layout)\"></ax-icon>\n                <span class=\"text-sm\">{{ getLayoutSelectionLabel(layout) | translate | async }}</span>\n              </label>\n            }\n          </div>\n        </div>\n      }\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      @if (vm.isBackgroundReportMode() && !vm.hasSelectedBackgroundLayouts() && !vm.isBackgroundQueued()) {\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-generation.errors.no-layouts-selected') | async\n              }}</span>\n          </div>\n        </div>\n      }\n      <ax-button class=\"w-full\" [disabled]=\"vm.isBackgroundReportMode() ? vm.isBackgroundGenerateDisabled() : (!vm.canExecute() || vm.areParametersReadonly())\"\n        [text]=\"(vm.isBackgroundReportMode()\n          ? t('@report-management:report-generation.actions.generate-in-background')\n          : t('@report-management:report-viewer.actions.execute.title')) | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon [icon]=\"vm.isBackgroundReportMode() ? 'fa-light fa-clock' : 'fa-light fa-play'\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n      <!-- ----- Secondary background generate for choose mode ----- -->\n      @if (canGenerateInBackground() && vm.generationMode() === 'choose') {\n        <ax-button class=\"w-full mt-2\" [disabled]=\"vm.areParametersReadonly()\"\n          [text]=\"t('@report-management:report-generation.actions.generate-in-background') | async\" [color]=\"'default'\"\n          (onClick)=\"execute({ name: 'generate-in-background' })\">\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-clock\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      }\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.isFrozen()) {\n      <!-- ----- Frozen run banner ----- -->\n      <div class=\"warning-lightest-surface mb-3 p-3 rounded border border-warning-200 text-warning-800 text-sm\">\n        {{ t('@report-management:report-generation.banners.frozen') | async }}\n      </div>\n    }\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    <!-- ----- Background report message state (no live layout preview) ----- -->\n    } @else if (vm.isBackgroundReportMode() && !vm.isFrozen()) {\n      <!-- ----- Mobile filters and layout selection for background reports ----- -->\n      @if (deviceService.isSmall() && !vm.isBackgroundQueued()) {\n        <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'fieldset'\"\n          (contextChange)=\"handleFiltersChange($event)\" (contextInitiated)=\"handleFiltersInitiated($event)\">\n        </axp-layout-renderer>\n        @if (vm.availableLayouts().length > 0) {\n          <div class=\"mt-4 pt-4 border-t\">\n            <div class=\"flex items-center justify-between gap-2 mb-2\">\n              <span class=\"text-sm font-medium\">\n                {{ t('@report-management:report-generation.components.background-layouts.title') | async }}\n              </span>\n            </div>\n            <p class=\"text-xs opacity-70 mb-3\">\n              {{ t('@report-management:report-generation.components.background-layouts.description') | async }}\n            </p>\n            <div class=\"flex flex-col gap-2\">\n              @for (layout of vm.availableLayouts(); track layout.id) {\n                <label class=\"flex items-center gap-2 p-2 rounded border cursor-pointer\">\n                  <ax-check-box\n                    [ngModel]=\"vm.isBackgroundLayoutSelected(layout.id)\"\n                    (ngModelChange)=\"handleBackgroundLayoutToggle(layout.id, $event)\"\n                  ></ax-check-box>\n                  <ax-icon [icon]=\"layoutPageIcon(layout.icon, layout)\"></ax-icon>\n                  <span class=\"text-sm\">{{ getLayoutSelectionLabel(layout) | translate | async }}</span>\n                </label>\n              }\n            </div>\n          </div>\n        }\n      }\n      @if (vm.isBackgroundQueued()) {\n        <axp-state-message icon=\"fa-light fa-clock\"\n          [title]=\"'@report-management:report-generation.empty-states.background.queued-title'\"\n          [description]=\"'@report-management:report-generation.empty-states.background.queued-description'\">\n        </axp-state-message>\n      } @else {\n        <axp-state-message icon=\"fa-light fa-clock\"\n          [title]=\"'@report-management:report-generation.empty-states.background.title'\"\n          [description]=\"'@report-management:report-generation.empty-states.background.description'\">\n        </axp-state-message>\n      }\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.isBackgroundReportMode() && !vm.hasBeenExecuted()) || (vm.isBackgroundReportMode() && !vm.isBackgroundQueued()))) {\n<axp-page-footer class=\"p-2 border-t\">\n  <ax-button class=\"w-full\" [disabled]=\"vm.isBackgroundReportMode() ? vm.isBackgroundGenerateDisabled() : (!vm.canExecute() || vm.areParametersReadonly())\"\n    [text]=\"(vm.isBackgroundReportMode()\n      ? '@report-management:report-generation.actions.generate-in-background'\n      : '@report-management:report-viewer.actions.execute.title') | translate | async\" [color]=\"'primary'\"\n    (onClick)=\"execute({ name: 'execute-report' })\">\n    <ax-prefix>\n      <ax-icon [icon]=\"vm.isBackgroundReportMode() ? 'fa-light fa-clock' : 'fa-light fa-play'\"></ax-icon>\n    </ax-prefix>\n  </ax-button>\n</axp-page-footer>\n}\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.3 | 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 }] }] } });
+
+export { AXPReportViewerPageComponent };
+//# sourceMappingURL=acorex-platform-module-report-management-client-report-viewer-page.component-YUdzA4B9.mjs.map