@acorex/modules 20.3.0-next.4 → 20.3.0-next.5

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

@@ -39,6 +39,7 @@ import { AXDonutChartComponent } from '@acorex/charts/donut-chart';
 import { AXLineChartComponent } from '@acorex/charts/line-chart';
 import * as i1$3 from '@acorex/components/data-table';
 import { AXDataTableModule } from '@acorex/components/data-table';
+import { AXBadgeModule } from '@acorex/components/badge';
 
 const config = {
     i18n: 'report-management',
@@ -1493,6 +1494,9 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
     filterContext: {},
     categoriesPath: [],
     allowFetchData: false,
+    shouldExecuteReport: false,
+    lastAppliedFilterContext: null, // Track last applied filters
+    hasBeenExecuted: false, // Track if report has been executed at least once
     status: AXPPageStatus.Idle,
     error: null,
 })), withComputed((store) => ({
@@ -1558,7 +1562,14 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
                     path: param.path,
                     title: param.title,
                     description: param.description,
-                    widget: param.widget
+                    widget: {
+                        ...param.widget,
+                        options: {
+                            ...param.widget.options,
+                            clearButton: true,
+                            hasClearButton: true
+                        }
+                    }
                 }))
             }))
         };
@@ -1568,6 +1579,34 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
     isTableLayout: computed(() => store.currentLayout()?.layout?.type === 'table'),
     isChartLayout: computed(() => store.currentLayout()?.layout?.type === 'chart'),
     //#endregion
+    //#region ----   Filter States   ----
+    hasUnappliedFilters: computed(() => {
+        const currentContext = store.filterContext();
+        const lastApplied = store.lastAppliedFilterContext();
+        const hasBeenExecuted = store.hasBeenExecuted();
+        // If report has never been executed, don't show unapplied filters warning
+        if (!hasBeenExecuted) {
+            return false;
+        }
+        // If no filters have been applied yet, return true
+        if (lastApplied === null) {
+            return true;
+        }
+        // Check if current filters are different from last applied filters
+        const currentKeys = Object.keys(currentContext);
+        const lastKeys = Object.keys(lastApplied);
+        if (currentKeys.length !== lastKeys.length) {
+            return true;
+        }
+        // Check if any values are different
+        for (const key of currentKeys) {
+            if (currentContext[key] !== lastApplied[key]) {
+                return true;
+            }
+        }
+        return false;
+    }),
+    //#endregion
     //#region ----   Action States   ----
     canExecute: computed(() => store.reportDefinition() !== null &&
         store.currentLayout() !== null &&
@@ -1594,10 +1633,11 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
         }
         patchState(store, {
             status: AXPPageStatus.Submitting,
-            error: null
-        });
-        patchState(store, {
-            allowFetchData: true
+            error: null,
+            allowFetchData: true,
+            shouldExecuteReport: true,
+            lastAppliedFilterContext: { ...store.filterContext() }, // Mark current filters as applied
+            hasBeenExecuted: true // Mark that report has been executed at least once
         });
         patchState(store, {
             status: AXPPageStatus.Submitted,
@@ -1671,6 +1711,7 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
                         categoriesPath: categoriesPath || [],
                         filterContext: {}, // Reset context when loading new report
                         allowFetchData: false,
+                        hasBeenExecuted: false, // Reset execution state for new report
                     });
                 }
             }
@@ -1708,12 +1749,16 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
         updateFilterContext(context) {
             patchState(store, {
                 filterContext: { ...store.filterContext(), ...context },
+                shouldExecuteReport: false, // Reset execution flag when filters change
             });
         },
         clearFilters() {
             patchState(store, {
                 allowFetchData: false,
+                shouldExecuteReport: false,
                 filterContext: {},
+                lastAppliedFilterContext: null, // Reset applied filters when clearing
+                hasBeenExecuted: false, // Reset execution state when clearing filters
             });
         },
         resetFilters() {
@@ -1754,6 +1799,9 @@ const AXPReportViewerViewModel = signalStore(withState(() => ({
                 currentLayout: null,
                 filterContext: {},
                 allowFetchData: false,
+                shouldExecuteReport: false,
+                lastAppliedFilterContext: null,
+                hasBeenExecuted: false,
                 categoriesPath: [],
                 status: AXPPageStatus.Idle,
                 error: null,
@@ -1817,7 +1865,7 @@ class AXPReportChartViewComponent {
          * Effect to fetch chart data when conditions are met
          */
         this.#fetchData = effect(() => {
-            if (this.vm.allowFetchData() && this.chartOptions()) {
+            if (this.vm.allowFetchData() && this.vm.shouldExecuteReport() && this.chartOptions()) {
                 this.vm.fetchData().then((data) => {
                     const raw = ((data?.data).data ?? {});
                     switch (this.chartType()) {
@@ -1897,15 +1945,20 @@ class AXPReportTableViewComponent {
         this.commandService = inject(AXPCommandService);
         this.grid = viewChild('grid', ...(ngDevMode ? [{ debugName: "grid" }] : []));
         //#endregion
-        //#region ----   Computed Properties   ---- 
-        this.layout = computed(() => {
-            return this.vm.currentLayout()?.layout;
-        }, ...(ngDevMode ? [{ debugName: "layout" }] : []));
+        //#region ----   Effects   ----
+        /**
+         * Effect to handle data fetching when report is executed
+         */
         this.#fetchData = effect(() => {
-            if (this.grid() && this.vm.allowFetchData()) {
+            if (this.grid() && this.vm.allowFetchData() && this.vm.shouldExecuteReport()) {
                 this.grid()?.refresh();
             }
         }, ...(ngDevMode ? [{ debugName: "#fetchData" }] : []));
+        //#endregion
+        //#region ----   Computed Properties   ----
+        this.layout = computed(() => {
+            return this.vm.currentLayout()?.layout;
+        }, ...(ngDevMode ? [{ debugName: "layout" }] : []));
         this.dataSource = new AXDataSource({
             load: async (e) => {
                 if (!this.vm.allowFetchData()) {
@@ -1970,6 +2023,11 @@ class AXPReportTableViewComponent {
     handleRowAction(name, data) {
         this.commandService.execute(name, data);
     }
+    //#endregion
+    //#region ----   Effects   ----
+    /**
+     * Effect to handle data fetching when report is executed
+     */
     #fetchData;
     //#endregion
     //#region ----   Helpers   ----
@@ -1979,7 +2037,7 @@ class AXPReportTableViewComponent {
             return {
                 icon: action.icon ?? 'fa-light fa-eye',
                 text: action.title,
-                name: action.name,
+                name: action.command?.name ?? action.name,
                 divided: action.break,
                 color: action.color,
             };
@@ -1988,7 +2046,7 @@ class AXPReportTableViewComponent {
         return {
             icon: defaultAction.icon ?? 'fa-light fa-eye',
             text: defaultAction.title,
-            name: defaultAction.name,
+            name: defaultAction.name ?? defaultAction.command?.name,
             divided: defaultAction.break,
             color: defaultAction.color,
         };
@@ -2100,6 +2158,7 @@ class AXPReportViewerPageComponent extends AXPPageLayoutBaseComponent {
         await this.vm.executeReport();
     }
     handleRefresh() {
+        debugger;
         this.vm.refresh();
     }
     handleClearFilters() {
@@ -2258,7 +2317,7 @@ 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-dynamic-form\n            #filtersForm\n            [formDefinition]=\"vm.formDefinition()\"\n            [context]=\"vm.filterContext()\"\n            [layoutConfig]=\"defaultLayout()\"\n            [layoutLook]=\"'compact'\"\n            (contextChange)=\"handleFiltersChange($event)\"\n            (contextInitiated)=\"handleFiltersInitiated($event)\"\n          >\n          </axp-dynamic-form>\n        </div>\n      </axp-layout-content>\n      <axp-layout-footer class=\"ax-p-4 ax-border-t\">\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          class=\"ax-w-full\"\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 class=\"fa-light fa-play\"></ax-icon>\n          </ax-prefix>\n        </ax-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\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.reportDefinition()) {\n      <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\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>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-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    </div>\n  </div>\n</ng-template>\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 axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.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 .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.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: "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-dynamic-form #filtersForm [formDefinition]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\"\n          [layoutConfig]=\"defaultLayout()\" [layoutLook]=\"'compact'\" (contextChange)=\"handleFiltersChange($event)\"\n          (contextInitiated)=\"handleFiltersInitiated($event)\">\n        </axp-dynamic-form>\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-button [class.ax-sm]=\"layoutService.isSmall()\" class=\"ax-w-full\"\n        [disabled]=\"vm.hasUnappliedFilters() === false && vm.hasBeenExecuted()\"\n        [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon class=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n      </ax-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.reportDefinition()) {\n    <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\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>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-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    </div>\n  </div>\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 axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.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 .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}.axp-report-viewer-page .ax-filter{filter:grayscale(100%) blur(1px)}.axp-report-viewer-page .ax-grayscale{filter:grayscale(100%)}.axp-report-viewer-page .ax-blur-sm{filter:blur(1px)}.axp-report-viewer-page .ax-pointer-events-none{pointer-events:none}\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: 
                 //
                 AXPDynamicFormComponent, selector: "axp-dynamic-form", inputs: ["formDefinition", "context", "layoutLook", "layoutDirection", "layoutConfig"], 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: "pipe", type: i1$2.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
@@ -2272,6 +2331,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", ngImpor
                         AXTranslationModule,
                         AXDropdownButtonModule,
                         AXDropdownModule,
+                        AXBadgeModule,
                         //
                         AXPDynamicFormComponent,
                         AXPPageLayoutComponent,
@@ -2288,7 +2348,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.8", 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-dynamic-form\n            #filtersForm\n            [formDefinition]=\"vm.formDefinition()\"\n            [context]=\"vm.filterContext()\"\n            [layoutConfig]=\"defaultLayout()\"\n            [layoutLook]=\"'compact'\"\n            (contextChange)=\"handleFiltersChange($event)\"\n            (contextInitiated)=\"handleFiltersInitiated($event)\"\n          >\n          </axp-dynamic-form>\n        </div>\n      </axp-layout-content>\n      <axp-layout-footer class=\"ax-p-4 ax-border-t\">\n        <ax-button\n          [class.ax-sm]=\"layoutService.isSmall()\"\n          class=\"ax-w-full\"\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 class=\"fa-light fa-play\"></ax-icon>\n          </ax-prefix>\n        </ax-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\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.reportDefinition()) {\n      <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\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>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-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    </div>\n  </div>\n</ng-template>\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 axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.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 .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.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-dynamic-form #filtersForm [formDefinition]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\"\n          [layoutConfig]=\"defaultLayout()\" [layoutLook]=\"'compact'\" (contextChange)=\"handleFiltersChange($event)\"\n          (contextInitiated)=\"handleFiltersInitiated($event)\">\n        </axp-dynamic-form>\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-button [class.ax-sm]=\"layoutService.isSmall()\" class=\"ax-w-full\"\n        [disabled]=\"vm.hasUnappliedFilters() === false && vm.hasBeenExecuted()\"\n        [text]=\"t('@report-management:features.report-viewer.actions.execute') | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon class=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n      </ax-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.reportDefinition()) {\n    <ng-container *ngTemplateOutlet=\"noReport\"></ng-container>\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>\n\n<!-- No Report Selected State -->\n<ng-template #noReport>\n  <div class=\"__no-report\" *translate=\"let t\">\n    <div class=\"__no-report-icon\">\n      <ax-icon class=\"fa-light fa-chart-line\"></ax-icon>\n    </div>\n    <div class=\"__no-report-content\">\n      <h3 class=\"__no-report-title\">\n        {{ t('@report-management:features.report-viewer.no-report.title') | async }}\n      </h3>\n      <p class=\"__no-report-description\">\n        {{ t('@report-management:features.report-viewer.no-report.description') | async }}\n      </p>\n      <div class=\"__no-report-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    </div>\n  </div>\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 axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections{gap:0px!important}.axp-report-viewer-page axp-layout-start-side axp-layout-content .__filters-container axp-layout-sections axp-layout-section{border-style:none!important;padding:0!important;--tw-shadow: 0 0 #0000 !important;--tw-shadow-colored: 0 0 #0000 !important;box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow)!important}.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 .__no-report{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:2rem;text-align:center}.axp-report-viewer-page .__no-report .__no-report-icon{margin-bottom:1rem;font-size:3.75rem;line-height:1;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1));opacity:.5}.axp-report-viewer-page .__no-report .__no-report-content{max-width:28rem}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-description{margin-bottom:1.5rem;font-size:.875rem;line-height:1.25rem;opacity:.75}.axp-report-viewer-page .__no-report .__no-report-content .__no-report-actions{display:flex;justify-content:center}.axp-report-viewer-page axp-report-table-view{flex:1 1 0%;overflow:hidden}.axp-report-viewer-page .ax-filter{filter:grayscale(100%) blur(1px)}.axp-report-viewer-page .ax-grayscale{filter:grayscale(100%)}.axp-report-viewer-page .ax-blur-sm{filter:blur(1px)}.axp-report-viewer-page .ax-pointer-events-none{pointer-events:none}\n"] }]
         }] });
 
 var reportViewerPage_component = /*#__PURE__*/Object.freeze({
@@ -2337,7 +2397,7 @@ class AXPReportBarChartViewComponent {
          * Effect to handle data fetching when chart configuration changes
          */
         this.#fetchData = effect(() => {
-            if (this.vm.allowFetchData() && this.chartOptions()) {
+            if (this.vm.allowFetchData() && this.vm.shouldExecuteReport() && this.chartOptions()) {
                 // TODO: Implement chart data fetching
                 console.log('Chart data fetch triggered', {
                     chartType: this.chartType(),