npm - @acorex/modules - Versions diffs - 20.3.0-next.22 → 20.3.0-next.24 - Mend

@acorex/modules 20.3.0-next.22 → 20.3.0-next.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (178) hide show

package/fesm2022/acorex-modules-report-management.mjs CHANGED Viewed

@@ -21,9 +21,8 @@ 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 * as i6 from '@acorex/components/dropdown';
+import * as i5 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
-import * as i5 from '@acorex/components/dropdown-button';
 import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXUnsubscriber } from '@acorex/core/utils';
@@ -404,6 +403,13 @@ const AXM_REPORT_CATEGORY_PROVIDER = {
     multi: true,
 };
+const AXPReportManagementMenuKeys = {
+    Root: 'report-management:menu',
+    Reports: 'report-management:menu:reports',
+    Categories: 'report-management:menu:categories',
+    DataSets: 'report-management:menu:data-sets',
+};
 class AXMMenuProvider {
     constructor() {
         this.sessionService = inject(AXPSessionService);
@@ -412,6 +418,7 @@ class AXMMenuProvider {
         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,
@@ -1357,7 +1364,7 @@ function routesFacory() {
             children: [
                 {
                     path: '**',
-                    loadComponent: () => import('./acorex-modules-report-management-report-runner-root-page.component-COukv46B.mjs').then((c) => c.AXMReportRunnerRootPageComponent),
+                    loadComponent: () => import('./acorex-modules-report-management-report-runner-root-page.component-DgIAlRUA.mjs').then((c) => c.AXMReportRunnerRootPageComponent),
                     data: { reuse: true },
                 },
             ],
@@ -1547,7 +1554,7 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
         if (!report || !report.parameterGroups) {
             return { groups: [] };
         }
-        return {
+        const formDefinition = {
             groups: report.parameterGroups.map((group) => ({
                 name: group.name,
                 title: group.title,
@@ -1567,6 +1574,7 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
                 })),
             })),
         };
+        return formDefinition;
     }),
     //#endregion
     //#region ----   Layout Type Detection   ----
@@ -1790,6 +1798,13 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
                 error: null,
             });
         },
+        clearExecutionState() {
+            patchState(store, {
+                hasBeenExecuted: false,
+                allowFetchData: false,
+                shouldExecuteReport: false,
+            });
+        },
         reset() {
             patchState(store, {
                 reportDefinition: null,
@@ -2084,6 +2099,7 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
         //#endregion
         //#region ----   Computed Properties   ----
         this.showFiltersPanel = () => this.layoutService.isLarge();
+        this.showReportDisplay = () => this.layoutService.isLarge() || (this.layoutService.isSmall() && this.vm.hasBeenExecuted());
         this.baseRoutes = [this.sessionService.application?.name, 'report-management'];
         //#endregion
         //#region ----   Layout Configurations   ----
@@ -2138,10 +2154,39 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
             }, 500); // Small delay to ensure form is ready
         }
     }
+    /**
+     * Synchronizes filter context to URL query parameters
+     * @param filterContext The current filter context to sync
+     */
+    syncFiltersToUrl(filterContext) {
+        // Clean the filter context - remove null, undefined, and empty string values
+        const cleanedParams = {};
+        Object.keys(filterContext).forEach(key => {
+            const value = filterContext[key];
+            if (value !== null && value !== undefined && value !== '') {
+                cleanedParams[key] = value;
+            }
+        });
+        // Update URL without navigation (preserve reportId if exists)
+        const currentParams = this.route.snapshot.queryParams;
+        const reportId = currentParams['reportId'];
+        const queryParams = {
+            ...cleanedParams,
+            ...(reportId ? { reportId } : {})
+        };
+        // Update URL without reloading
+        this.router.navigate([], {
+            relativeTo: this.route,
+            queryParams: queryParams,
+            queryParamsHandling: 'merge',
+            replaceUrl: true // Don't add to browser history
+        });
+    }
     //#endregion
     //#region ----   Event Handlers   ----
     handleFiltersChange(event) {
         this.vm.updateFilterContext(event);
+        this.syncFiltersToUrl(event);
     }
     handleFiltersInitiated(event) {
         this.vm.updateFilterContext(event);
@@ -2157,13 +2202,20 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
         this.vm.refresh();
     }
     handleClearFilters() {
-        debugger;
         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
+        });
     }
     //#endregion
     //#region ----   Page Configuration Overrides   ----
@@ -2217,6 +2269,12 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
         return reportDefinition?.description || null;
     }
     async getBackButton() {
+        // On mobile, if report has been executed (showing report), show "Filters" as back button
+        if (this.layoutService.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
@@ -2237,6 +2295,11 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
         };
     }
     async onBackButtonClick() {
+        // On mobile, if report has been executed (showing report), go back to filters
+        if (this.layoutService.isSmall() && this.vm.hasBeenExecuted()) {
+            this.vm.clearExecutionState();
+            return;
+        }
         const categoriesPath = this.vm.categoriesPath();
         if (!categoriesPath || categoriesPath.length <= 1) {
             // Navigate back to reports root
@@ -2251,38 +2314,6 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
             await this.router.navigate(urlParts);
         }
     }
-    async getPrimaryMenuItems() {
-        // No primary menu items since execute button is in footer
-        return [];
-    }
-    async getSecondaryMenuItems() {
-        return [];
-        // const reportDefinition = this.vm.reportDefinition();
-        // if (!reportDefinition) {
-        //   return [];
-        // }
-        // return [
-        //   {
-        //     title: await this.translateService.translateAsync('@report-management:features.report-viewer.actions.refresh'),
-        //     icon: 'fa-light fa-refresh',
-        //     color: 'secondary',
-        //     disabled: this.vm.isLoading() || this.vm.isExecuting(),
-        //     command: {
-        //       name: 'refresh-report',
-        //     },
-        //   },
-        //   {
-        //     title: await this.translateService.translateAsync(
-        //       '@report-management:features.report-viewer.actions.clear-filters',
-        //     ),
-        //     icon: 'fa-light fa-filter-slash',
-        //     color: 'warning',
-        //     command: {
-        //       name: 'clear-filters',
-        //     },
-        //   },
-        // ];
-    }
     async execute(command) {
         switch (command.name) {
             case 'execute-report':
@@ -2316,9 +2347,9 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
                 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:features.report-viewer.filters.title') | async }}\n      </axp-layout-title>\n    </axp-layout-header>\n    <axp-layout-content>\n      <div class=\"__filters-container\">\n        <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'group'\"\n          (contextChange)=\"handleFiltersChange($event)\" (contextInitiated)=\"handleFiltersInitiated($event)\">\n        </axp-layout-renderer>\n      </div>\n    </axp-layout-content>\n    <axp-layout-footer class=\"ax-p-4 ax-border-t\" *translate=\"let t\">\n      @if (vm.hasUnappliedFilters()) {\n      <div class=\"ax-w-full ax-warning-lightest ax-mb-2 ax-p-2 ax-rounded ax-border ax-border-warning-200\">\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-warning-800\">\n          <ax-icon class=\"fa-light fa-exclamation-triangle ax-text-sm\"></ax-icon>\n          <span class=\"ax-text-xs\">Filters have been changed but not applied. Click 'Execute Report' to apply\n            changes.</span>\n        </div>\n      </div>\n      }\n      <ax-dropdown-button class=\"ax-w-full\" [disabled]=\"!vm.canExecute()\"\n        [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\" [color]=\"'primary'\"\n        [mode]=\"'split'\" (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n        <ax-button-item-list>\n          <ax-button-item [text]=\"(t('@general:actions.reset.title') | async)!\"\n            (onClick)=\"execute({ name: 'reset-filters' })\">\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-filter-slash\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </axp-layout-footer>\n  </axp-layout-start-side>\n  }\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      @if (vm.hasMultipleLayouts()) {\n      <ax-button [text]=\"vm.currentLayout()?.title\">\n        <ax-icon icon=\"fa-light {{ vm.currentLayout()?.icon }}\"></ax-icon>\n        <ax-dropdown-panel>\n          @for (layout of vm.availableLayouts(); track layout.id) {\n          <ax-button-item-list>\n            <ax-button-item [text]=\"layout.title\" [selected]=\"vm.currentLayout()?.id === layout.id\"\n              (onClick)=\"vm.switchLayout(layout.id)\">\n              <ax-icon icon=\"fa-light {{ layout.icon }}\"></ax-icon>\n            </ax-button-item>\n          </ax-button-item-list>\n          }\n        </ax-dropdown-panel>\n      </ax-button>\n      }\n    </axp-layout-prefix>\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"ax-overflow-auto\">\n    @if (vm.hasError()) {\n    <!-- Error State -->\n    <axp-state-message icon=\"fa-light fa-exclamation-triangle\" look=\"error\"\n      [title]=\"'@report-management:features.report-viewer.error.title'\"\n      [description]=\"vm.error() || 'An unexpected error occurred'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.error.retry') | 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:features.report-viewer.no-report.title'\"\n      [description]=\"'@report-management:features.report-viewer.no-report.description'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | 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<!-- Report Display Area -->\n<ng-template #reportDisplay>\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  }\n</ng-template>", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.axp-report-viewer-page .__mobile-filters{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.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: "component", type: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { 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$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i5.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type:
+        ], 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:features.report-viewer.filters.title') | async }}\n        </axp-layout-title>\n      </axp-layout-header>\n      <axp-layout-content>\n        <div class=\"__filters-container\">\n          <axp-layout-renderer\n            #filtersForm\n            [layout]=\"vm.formDefinition()\"\n            [context]=\"vm.filterContext()\"\n            [look]=\"'group'\"\n            (contextChange)=\"handleFiltersChange($event)\"\n            (contextInitiated)=\"handleFiltersInitiated($event)\"\n          >\n          </axp-layout-renderer>\n        </div>\n      </axp-layout-content>\n      <axp-layout-footer class=\"ax-p-4 ax-border-t\" *translate=\"let t\">\n        @if (vm.hasUnappliedFilters()) {\n          <div class=\"ax-w-full ax-warning-lightest ax-mb-2 ax-p-2 ax-rounded ax-border ax-border-warning-200\">\n            <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-warning-800\">\n              <ax-icon class=\"fa-light fa-exclamation-triangle ax-text-sm\"></ax-icon>\n              <span class=\"ax-text-xs\"\n                >Filters have been changed but not applied. Click 'Execute Report' to apply changes.</span\n              >\n            </div>\n          </div>\n        }\n        <ax-button\n          class=\"ax-w-full\"\n          [disabled]=\"!vm.canExecute()\"\n          [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\"\n          [color]=\"'primary'\"\n          (onClick)=\"execute({ name: 'execute-report' })\"\n        >\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  <axp-page-toolbar>\n    <axp-layout-prefix>\n      @if (vm.hasMultipleLayouts() && showReportDisplay()) {\n        <ax-button [text]=\"vm.currentLayout()?.title\">\n          <ax-icon icon=\"fa-light {{ vm.currentLayout()?.icon }}\"></ax-icon>\n          <ax-dropdown-panel>\n            @for (layout of vm.availableLayouts(); track layout.id) {\n              <ax-button-item-list>\n                <ax-button-item\n                  [text]=\"layout.title\"\n                  [selected]=\"vm.currentLayout()?.id === layout.id\"\n                  (onClick)=\"vm.switchLayout(layout.id)\"\n                >\n                  <ax-icon icon=\"fa-light {{ layout.icon }}\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            }\n          </ax-dropdown-panel>\n        </ax-button>\n      }\n    </axp-layout-prefix>\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"ax-overflow-auto\">\n    @if (vm.hasError()) {\n      <!-- Error State -->\n      <axp-state-message\n        icon=\"fa-light fa-exclamation-triangle\"\n        look=\"error\"\n        [title]=\"'@report-management:features.report-viewer.error.title'\"\n        [description]=\"vm.error() || 'An unexpected error occurred'\"\n      >\n        <div slot=\"actions\">\n          <ax-button\n            look=\"outline\"\n            color=\"primary\"\n            [text]=\"t('@report-management:features.report-viewer.error.retry') | async\"\n            (onClick)=\"vm.clearError()\"\n          >\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\n        icon=\"fa-light fa-chart-line\"\n        [title]=\"'@report-management:features.report-viewer.no-report.title'\"\n        [description]=\"'@report-management:features.report-viewer.no-report.description'\"\n      >\n        <div slot=\"actions\">\n          <ax-button\n            look=\"outline\"\n            color=\"primary\"\n            [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | async\"\n          >\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    }\n  } @else {\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 (layoutService.isSmall() && !vm.hasBeenExecuted()) {\n  <axp-page-footer class=\"ax-p-2 ax-border-t\">\n    <ax-button\n      class=\"ax-w-full\"\n      [disabled]=\"!vm.canExecute()\"\n      [text]=\"'@report-management:features.report-viewer.actions.execute' | translate | async\"\n      [color]=\"'primary'\"\n      (onClick)=\"execute({ name: 'execute-report' })\"\n    >\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n  </axp-page-footer>\n}\n", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.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 1 0%}.axp-report-viewer-page .__mobile-filters .__mobile-filters-footer{position:-webkit-sticky;position:sticky;bottom:0;border-top-width:1px;padding-top:.5rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$2.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: "component", type: i2$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i2$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], outputs: ["onItemClick"] }, { 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$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXBadgeModule }, { 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: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                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: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1$2.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPReportViewerPageComponent, decorators: [{
             type: Component,
@@ -2348,7 +2379,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
                             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:features.report-viewer.filters.title') | async }}\n      </axp-layout-title>\n    </axp-layout-header>\n    <axp-layout-content>\n      <div class=\"__filters-container\">\n        <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'group'\"\n          (contextChange)=\"handleFiltersChange($event)\" (contextInitiated)=\"handleFiltersInitiated($event)\">\n        </axp-layout-renderer>\n      </div>\n    </axp-layout-content>\n    <axp-layout-footer class=\"ax-p-4 ax-border-t\" *translate=\"let t\">\n      @if (vm.hasUnappliedFilters()) {\n      <div class=\"ax-w-full ax-warning-lightest ax-mb-2 ax-p-2 ax-rounded ax-border ax-border-warning-200\">\n        <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-warning-800\">\n          <ax-icon class=\"fa-light fa-exclamation-triangle ax-text-sm\"></ax-icon>\n          <span class=\"ax-text-xs\">Filters have been changed but not applied. Click 'Execute Report' to apply\n            changes.</span>\n        </div>\n      </div>\n      }\n      <ax-dropdown-button class=\"ax-w-full\" [disabled]=\"!vm.canExecute()\"\n        [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\" [color]=\"'primary'\"\n        [mode]=\"'split'\" (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n        <ax-button-item-list>\n          <ax-button-item [text]=\"(t('@general:actions.reset.title') | async)!\"\n            (onClick)=\"execute({ name: 'reset-filters' })\">\n            <ax-prefix>\n              <ax-icon icon=\"fa-light fa-filter-slash\"></ax-icon>\n            </ax-prefix>\n          </ax-button-item>\n        </ax-button-item-list>\n      </ax-dropdown-button>\n    </axp-layout-footer>\n  </axp-layout-start-side>\n  }\n\n  <axp-page-toolbar>\n    <axp-layout-prefix>\n      @if (vm.hasMultipleLayouts()) {\n      <ax-button [text]=\"vm.currentLayout()?.title\">\n        <ax-icon icon=\"fa-light {{ vm.currentLayout()?.icon }}\"></ax-icon>\n        <ax-dropdown-panel>\n          @for (layout of vm.availableLayouts(); track layout.id) {\n          <ax-button-item-list>\n            <ax-button-item [text]=\"layout.title\" [selected]=\"vm.currentLayout()?.id === layout.id\"\n              (onClick)=\"vm.switchLayout(layout.id)\">\n              <ax-icon icon=\"fa-light {{ layout.icon }}\"></ax-icon>\n            </ax-button-item>\n          </ax-button-item-list>\n          }\n        </ax-dropdown-panel>\n      </ax-button>\n      }\n    </axp-layout-prefix>\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"ax-overflow-auto\">\n    @if (vm.hasError()) {\n    <!-- Error State -->\n    <axp-state-message icon=\"fa-light fa-exclamation-triangle\" look=\"error\"\n      [title]=\"'@report-management:features.report-viewer.error.title'\"\n      [description]=\"vm.error() || 'An unexpected error occurred'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.error.retry') | 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:features.report-viewer.no-report.title'\"\n      [description]=\"'@report-management:features.report-viewer.no-report.description'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | 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<!-- Report Display Area -->\n<ng-template #reportDisplay>\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  }\n</ng-template>", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.axp-report-viewer-page .__mobile-filters{flex-shrink:0;border-bottom-width:1px;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-border-lightest-surface),var(--tw-border-opacity, 1));padding:1rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}\n"] }]
+                    ], 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:features.report-viewer.filters.title') | async }}\n        </axp-layout-title>\n      </axp-layout-header>\n      <axp-layout-content>\n        <div class=\"__filters-container\">\n          <axp-layout-renderer\n            #filtersForm\n            [layout]=\"vm.formDefinition()\"\n            [context]=\"vm.filterContext()\"\n            [look]=\"'group'\"\n            (contextChange)=\"handleFiltersChange($event)\"\n            (contextInitiated)=\"handleFiltersInitiated($event)\"\n          >\n          </axp-layout-renderer>\n        </div>\n      </axp-layout-content>\n      <axp-layout-footer class=\"ax-p-4 ax-border-t\" *translate=\"let t\">\n        @if (vm.hasUnappliedFilters()) {\n          <div class=\"ax-w-full ax-warning-lightest ax-mb-2 ax-p-2 ax-rounded ax-border ax-border-warning-200\">\n            <div class=\"ax-flex ax-items-center ax-gap-2 ax-text-warning-800\">\n              <ax-icon class=\"fa-light fa-exclamation-triangle ax-text-sm\"></ax-icon>\n              <span class=\"ax-text-xs\"\n                >Filters have been changed but not applied. Click 'Execute Report' to apply changes.</span\n              >\n            </div>\n          </div>\n        }\n        <ax-button\n          class=\"ax-w-full\"\n          [disabled]=\"!vm.canExecute()\"\n          [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\"\n          [color]=\"'primary'\"\n          (onClick)=\"execute({ name: 'execute-report' })\"\n        >\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  <axp-page-toolbar>\n    <axp-layout-prefix>\n      @if (vm.hasMultipleLayouts() && showReportDisplay()) {\n        <ax-button [text]=\"vm.currentLayout()?.title\">\n          <ax-icon icon=\"fa-light {{ vm.currentLayout()?.icon }}\"></ax-icon>\n          <ax-dropdown-panel>\n            @for (layout of vm.availableLayouts(); track layout.id) {\n              <ax-button-item-list>\n                <ax-button-item\n                  [text]=\"layout.title\"\n                  [selected]=\"vm.currentLayout()?.id === layout.id\"\n                  (onClick)=\"vm.switchLayout(layout.id)\"\n                >\n                  <ax-icon icon=\"fa-light {{ layout.icon }}\"></ax-icon>\n                </ax-button-item>\n              </ax-button-item-list>\n            }\n          </ax-dropdown-panel>\n        </ax-button>\n      }\n    </axp-layout-prefix>\n    <axp-layout-suffix> </axp-layout-suffix>\n  </axp-page-toolbar>\n\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"ax-overflow-auto\">\n    @if (vm.hasError()) {\n      <!-- Error State -->\n      <axp-state-message\n        icon=\"fa-light fa-exclamation-triangle\"\n        look=\"error\"\n        [title]=\"'@report-management:features.report-viewer.error.title'\"\n        [description]=\"vm.error() || 'An unexpected error occurred'\"\n      >\n        <div slot=\"actions\">\n          <ax-button\n            look=\"outline\"\n            color=\"primary\"\n            [text]=\"t('@report-management:features.report-viewer.error.retry') | async\"\n            (onClick)=\"vm.clearError()\"\n          >\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\n        icon=\"fa-light fa-chart-line\"\n        [title]=\"'@report-management:features.report-viewer.no-report.title'\"\n        [description]=\"'@report-management:features.report-viewer.no-report.description'\"\n      >\n        <div slot=\"actions\">\n          <ax-button\n            look=\"outline\"\n            color=\"primary\"\n            [text]=\"t('@report-management:features.report-viewer.no-report.browse-reports') | async\"\n          >\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    }\n  } @else {\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 (layoutService.isSmall() && !vm.hasBeenExecuted()) {\n  <axp-page-footer class=\"ax-p-2 ax-border-t\">\n    <ax-button\n      class=\"ax-w-full\"\n      [disabled]=\"!vm.canExecute()\"\n      [text]=\"'@report-management:features.report-viewer.actions.execute' | translate | async\"\n      [color]=\"'primary'\"\n      (onClick)=\"execute({ name: 'execute-report' })\"\n    >\n      <ax-prefix>\n        <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n  </axp-page-footer>\n}\n", styles: [".axp-report-viewer-page{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-viewer-page axp-layout-start-side{height:100%;width:20rem;border-inline-end-width:1px;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}@media (min-width: 1920px){.axp-report-viewer-page axp-layout-start-side{width:24rem}}.axp-report-viewer-page axp-layout-start-side>axp-layout-header{height:73px;border-bottom-width:1px}.axp-report-viewer-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding:.5rem}.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 1 0%}.axp-report-viewer-page .__mobile-filters .__mobile-filters-footer{position:-webkit-sticky;position:sticky;bottom:0;border-top-width:1px;padding-top:.5rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-report-viewer-page axp-page-content{display:flex;height:100%;flex-direction:column}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}\n"] }]
         }] });
 var reportViewerPage_component = /*#__PURE__*/Object.freeze({