@acorex/modules 21.0.0-next.41 → 21.0.0-next.43

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

@@ -275,7 +275,7 @@ function routesFacory() {
             children: [
                 {
                     path: '**',
-                    loadComponent: () => import('./acorex-modules-report-management-report-runner-root-page.component-BjKrHoBg.mjs').then((c) => c.AXMReportRunnerRootPageComponent),
+                    loadComponent: () => import('./acorex-modules-report-management-report-runner-root-page.component-B-NoGoOJ.mjs').then((c) => c.AXMReportRunnerRootPageComponent),
                     data: { reuse: true },
                 },
             ],
@@ -1520,7 +1520,7 @@ class AXPReportChartViewComponent {
         return !!(this.chartOptions() && this.dataMapping());
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportChartViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportChartViewComponent, isStandalone: true, selector: "axp-report-chart-view", host: { classAttribute: "axp-report-chart-view ax-w-full ax-h-full ax-flex ax-flex-col" }, ngImport: i0, template: "<ng-container *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-gap-6 ax-p-8\">\n      <div class=\"ax-spinner ax-spin ax-w-10 ax-h-10\"></div>\n      <div class=\"__loading-text ax-text-sm ax-opacity-70\">\n        {{ t('@report-management:report-viewer.components.chart.messages.loading') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <axp-state-message\n      mode=\"error\"\n      icon=\"fa-light fa-exclamation-triangle\"\n      [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\"\n    >\n    </axp-state-message>\n  } @else if (isChartReady() && showNoDataState()) {\n    <!-- No Data State -->\n    <axp-state-message\n      icon=\"fa-light fa-chart-pie\"\n      [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-data.title'\"\n      [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-data.description'\"\n    >\n    </axp-state-message>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <section\n      class=\"__chart-container ax-overflow-auto md:ax-overflow-hidden ax-rounded-2xl ax-border ax-h-full ax-flex ax-flex-col\"\n    >\n      @if (chartLayout()?.header) {\n        <header\n          class=\"__chart-header ax-p-4 md:ax-p-6 ax-border-b ax-flex ax-flex-col sm:ax-flex-row ax-gap-2 sm:ax-items-center sm:ax-justify-between\"\n        >\n          <h3 class=\"__chart-title ax-text-base md:ax-text-lg ax-font-semibold ax-truncate\">\n            {{ chartLayout()?.header?.title }}\n          </h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date ax-text-xs md:ax-text-sm ax-opacity-70 ax-font-medium ax-flex-shrink-0\">\n              {{ '@general:common.date.today' | translate | async }}\n            </div>\n          }\n        </header>\n      }\n\n      <div class=\"__chart-body ax-flex-1 ax-p-3 md:ax-p-6\">\n        <div\n          class=\"__chart-wrapper ax-h-full ax-items-center ax-flex ax-flex-col ax-gap-4 lg:ax-gap-6\"\n          [class]=\"\n            legendOptions().mode === 'horizontal'\n              ? 'ax-flex-col ax-gap-4'\n              : 'ax-flex-col lg:ax-flex-row ax-gap-4 lg:ax-gap-6'\n          \"\n        >\n          @switch (chartType()) {\n            @case ('bar') {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-bar-chart #barChart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n              </div>\n              @if (hasBarChartData()) {\n                <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"barChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n            @case ('doughnut') {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-donut-chart #donutChart [data]=\"donutChartData()\" [options]=\"donutChartOptions()\"></ax-donut-chart>\n              </div>\n              @if (hasDonutChartData()) {\n                <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"donutChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n            @default {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-line-chart #lineChart [data]=\"lineChartData()\" [options]=\"lineChartOptions()\"></ax-line-chart>\n              </div>\n              @if (hasLineChartData()) {\n                <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"lineChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n          }\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <footer class=\"__chart-footer ax-p-4 md:ax-p-6 ax-border-t\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </footer>\n      }\n    </section>\n  } @else {\n    <!-- No Configuration State -->\n    <axp-state-message\n      icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n      [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\"\n    >\n    </axp-state-message>\n  }\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }, { kind: "component", type: AXDonutChartComponent, selector: "ax-donut-chart", inputs: ["data", "options"], outputs: ["segmentClick", "segmentHover"] }, { kind: "component", type: AXLineChartComponent, selector: "ax-line-chart", inputs: ["data", "options"], outputs: ["pointClick"] }, { kind: "component", type: AXChartLegendComponent, selector: "ax-chart-legend", inputs: ["chart", "options"], outputs: ["itemClick", "itemMouseEnter", "itemMouseLeave"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportChartViewComponent, isStandalone: true, selector: "axp-report-chart-view", host: { classAttribute: "axp-report-chart-view ax-w-full ax-h-full ax-flex ax-flex-col" }, ngImport: i0, template: "<ng-container *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-gap-6 ax-p-8\">\n      <div class=\"ax-spinner ax-spin ax-w-10 ax-h-10\"></div>\n      <div class=\"__loading-text ax-text-sm ax-opacity-70\">\n        {{ t('@report-management:report-viewer.components.chart.messages.loading') | async }}\n      </div>\n    </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <axp-state-message\n      mode=\"error\"\n      icon=\"fa-light fa-exclamation-triangle\"\n      [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\"\n    >\n    </axp-state-message>\n  } @else if (isChartReady() && showNoDataState()) {\n    <!-- No Data State -->\n    <axp-state-message\n      icon=\"fa-light fa-chart-pie\"\n      [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-data.title'\"\n      [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-data.description'\"\n    >\n    </axp-state-message>\n  } @else if (isChartReady()) {\n    <!-- Chart Content -->\n    <section\n      class=\"__chart-container ax-overflow-auto md:ax-overflow-hidden ax-rounded-2xl ax-border ax-h-full ax-flex ax-flex-col\"\n    >\n      @if (chartLayout()?.header) {\n        <header\n          class=\"__chart-header ax-p-4 md:ax-p-6 ax-border-b ax-flex ax-flex-col sm:ax-flex-row ax-gap-2 sm:ax-items-center sm:ax-justify-between\"\n        >\n          <h3 class=\"__chart-title ax-text-base md:ax-text-lg ax-font-semibold ax-truncate\">\n            {{ chartLayout()?.header?.title }}\n          </h3>\n          @if (chartLayout()?.header?.showDate) {\n            <div class=\"__chart-date ax-text-xs md:ax-text-sm ax-opacity-70 ax-font-medium ax-flex-shrink-0\">\n              {{ '@general:common.date.today' | translate | async }}\n            </div>\n          }\n        </header>\n      }\n\n      <div class=\"__chart-body ax-flex-1 ax-p-3 md:ax-p-6\">\n        <div\n          class=\"__chart-wrapper ax-h-full ax-items-center ax-flex ax-flex-col ax-gap-4 lg:ax-gap-6\"\n          [class]=\"\n            legendOptions().mode === 'horizontal'\n              ? 'ax-flex-col ax-gap-4'\n              : 'ax-flex-col lg:ax-flex-row ax-gap-4 lg:ax-gap-6'\n          \"\n        >\n          @switch (chartType()) {\n            @case ('bar') {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-bar-chart #barChart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n              </div>\n              @if (hasBarChartData()) {\n                <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"barChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n            @case ('doughnut') {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-donut-chart #donutChart [data]=\"donutChartData()\" [options]=\"donutChartOptions()\"></ax-donut-chart>\n              </div>\n              @if (hasDonutChartData()) {\n                <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"donutChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n            @default {\n              <div\n                class=\"__chart-content ax-flex-1 ax-h-full ax-min-h-[250px] md:ax-min-h-[300px] ax-flex ax-items-center ax-justify-center ax-w-full ax-overflow-hidden\"\n              >\n                <ax-line-chart #lineChart [data]=\"lineChartData()\" [options]=\"lineChartOptions()\"></ax-line-chart>\n              </div>\n              @if (hasLineChartData()) {\n                <div class=\"__chart-legend ax-w-fit ax-flex-shrink-0\">\n                  <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"lineChart\"></ax-chart-legend>\n                </div>\n              }\n            }\n          }\n        </div>\n      </div>\n\n      @if (chartLayout()?.footer) {\n        <footer class=\"__chart-footer ax-p-4 md:ax-p-6 ax-border-t\">\n          @if (chartLayout()?.footer?.customHtml) {\n            <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n          }\n        </footer>\n      }\n    </section>\n  } @else {\n    <!-- No Configuration State -->\n    <axp-state-message\n      icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n      [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\"\n    >\n    </axp-state-message>\n  }\n</ng-container>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }, { kind: "component", type: AXDonutChartComponent, selector: "ax-donut-chart", inputs: ["data", "options"], outputs: ["segmentClick", "segmentHover"] }, { kind: "component", type: AXLineChartComponent, selector: "ax-line-chart", inputs: ["data", "options"], outputs: ["pointClick"] }, { kind: "component", type: AXChartLegendComponent, selector: "ax-chart-legend", inputs: ["chart", "options"], outputs: ["itemClick", "itemMouseEnter", "itemMouseLeave"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportChartViewComponent, decorators: [{
             type: Component,
@@ -1792,7 +1792,7 @@ class AXPReportPdfViewComponent {
         this.isFullscreen.set(!isFullscreen);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportPdfViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportPdfViewComponent, isStandalone: true, selector: "axp-report-pdf-view", host: { classAttribute: "axp-report-pdf-view ax-w-full ax-h-full ax-flex ax-flex-col" }, ngImport: i0, template: "<ng-container *translate=\"let t\">\n    @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-gap-6 ax-p-8\">\n        <div class=\"ax-spinner ax-spin ax-w-10 ax-h-10\"></div>\n        <div class=\"__loading-text ax-text-sm ax-opacity-70\">\n            {{ t('@report-management:report-viewer.components.pdf.messages.loading') | async }}\n        </div>\n    </div>\n    } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <axp-state-message mode=\"error\" icon=\"fa-light fa-exclamation-triangle\"\n        [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n        [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\">\n    </axp-state-message>\n    } @else if (isPdfReady()) {\n    <!-- PDF Embed Only -->\n    <embed class=\"__pdf-embed ax-w-full ax-h-full\" [src]=\"pdfSource()\" type=\"application/pdf\" />\n    } @else {\n    <!-- No PDF Data State -->\n    <axp-state-message icon=\"fa-light fa-file-pdf\"\n        [title]=\"'@report-management:report-viewer.components.pdf.empty-states.no-data.title'\"\n        [description]=\"'@report-management:report-viewer.components.pdf.empty-states.no-data.description'\">\n    </axp-state-message>\n    }\n</ng-container>", styles: [".axp-report-pdf-view .__loading{min-height:400px}.axp-report-pdf-view .__pdf-container{background:var(--ax-color-background)}.axp-report-pdf-view .__pdf-container.__fullscreen{position:fixed;inset:0;z-index:9999;border-radius:0}.axp-report-pdf-view .__pdf-toolbar{background:var(--ax-color-surface)}.axp-report-pdf-view .__pdf-body{background:var(--ax-color-background-secondary)}.axp-report-pdf-view .__pdf-wrapper{min-height:400px}.axp-report-pdf-view .__pdf-embed{border:none;box-shadow:0 2px 8px #0000001a;transition:width .3s ease,height .3s ease}@media(max-width:640px){.axp-report-pdf-view .__zoom-controls{width:100%;justify-content:center;margin-left:0;margin-top:.5rem}}.axp-report-pdf-view .__zoom-level{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportPdfViewComponent, isStandalone: true, selector: "axp-report-pdf-view", host: { classAttribute: "axp-report-pdf-view ax-w-full ax-h-full ax-flex ax-flex-col" }, ngImport: i0, template: "<ng-container *translate=\"let t\">\n    @if (vm.status() === AXPPageStatus.Processing) {\n    <!-- Loading State -->\n    <div class=\"__loading ax-flex ax-flex-col ax-items-center ax-justify-center ax-h-full ax-gap-6 ax-p-8\">\n        <div class=\"ax-spinner ax-spin ax-w-10 ax-h-10\"></div>\n        <div class=\"__loading-text ax-text-sm ax-opacity-70\">\n            {{ t('@report-management:report-viewer.components.pdf.messages.loading') | async }}\n        </div>\n    </div>\n    } @else if (vm.status() === AXPPageStatus.Error) {\n    <!-- Error State -->\n    <axp-state-message mode=\"error\" icon=\"fa-light fa-exclamation-triangle\"\n        [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n        [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\">\n    </axp-state-message>\n    } @else if (isPdfReady()) {\n    <!-- PDF Embed Only -->\n    <embed class=\"__pdf-embed ax-w-full ax-h-full\" [src]=\"pdfSource()\" type=\"application/pdf\" />\n    } @else {\n    <!-- No PDF Data State -->\n    <axp-state-message icon=\"fa-light fa-file-pdf\"\n        [title]=\"'@report-management:report-viewer.components.pdf.empty-states.no-data.title'\"\n        [description]=\"'@report-management:report-viewer.components.pdf.empty-states.no-data.description'\">\n    </axp-state-message>\n    }\n</ng-container>", styles: [".axp-report-pdf-view .__loading{min-height:400px}.axp-report-pdf-view .__pdf-container{background:var(--ax-color-background)}.axp-report-pdf-view .__pdf-container.__fullscreen{position:fixed;inset:0;z-index:9999;border-radius:0}.axp-report-pdf-view .__pdf-toolbar{background:var(--ax-color-surface)}.axp-report-pdf-view .__pdf-body{background:var(--ax-color-background-secondary)}.axp-report-pdf-view .__pdf-wrapper{min-height:400px}.axp-report-pdf-view .__pdf-embed{border:none;box-shadow:0 2px 8px #0000001a;transition:width .3s ease,height .3s ease}@media(max-width:640px){.axp-report-pdf-view .__zoom-controls{width:100%;justify-content:center;margin-left:0;margin-top:.5rem}}.axp-report-pdf-view .__zoom-level{-webkit-user-select:none;user-select:none}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportPdfViewComponent, decorators: [{
             type: Component,
@@ -2695,9 +2695,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:report-viewer.components.filters.title') | async }}\n      </axp-layout-title>\n    </axp-layout-header>\n    <axp-layout-content>\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    </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            t('@report-management:report-viewer.components.filters.messages.warning.unapplied') | async\n            }}</span>\n        </div>\n      </div>\n      }\n      <ax-button class=\"ax-w-full\" [disabled]=\"!vm.canExecute()\"\n        [text]=\"t('@report-management:report-viewer.actions.execute.title') | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </axp-layout-footer>\n  </axp-layout-start-side>\n  }\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"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:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.unexpected'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.retry.title') | async\" (onClick)=\"vm.clearError()\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-refresh\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else if (!vm.reportDefinition()) {\n    <!-- No Report Selected State -->\n    <axp-state-message icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.title'\"\n      [description]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.description'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.browse-reports.title') | async\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Desktop: Report Display Area -->\n<ng-template #reportDisplay>\n  @if (showReportDisplay()) {\n  <!-- Desktop & Mobile: Report Display Area -->\n  @if (vm.isTableLayout()) {\n  <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n  <axp-report-chart-view> </axp-report-chart-view>\n  } @else if (vm.isPdfLayout()) {\n  <axp-report-pdf-view> </axp-report-pdf-view>\n  }\n  } @else {\n  <!-- Mobile: Show filters  -->\n  <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'fieldset'\">\n  </axp-layout-renderer>\n  }\n</ng-template>\n\n<!-- Mobile: Execute Button -->\n@if (deviceService.isSmall() && !vm.hasBeenExecuted()) {\n<axp-page-footer class=\"ax-p-2 ax-border-t\">\n  <ax-button class=\"ax-w-full\" [disabled]=\"!vm.canExecute()\"\n    [text]=\"'@report-management:report-viewer.actions.execute.title' | translate | async\" [color]=\"'primary'\"\n    (onClick)=\"execute({ name: 'execute-report' })\">\n    <ax-prefix>\n      <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n    </ax-prefix>\n  </ax-button>\n</axp-page-footer>\n}", styles: [".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:1rem}.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: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$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingDialogModule }, { kind: "component", type: 
+        ], 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      <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'card'\"\n        (contextChange)=\"handleFiltersChange($event)\" (contextInitiated)=\"handleFiltersInitiated($event)\">\n      </axp-layout-renderer>\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            t('@report-management:report-viewer.components.filters.messages.warning.unapplied') | async\n            }}</span>\n        </div>\n      </div>\n      }\n      <ax-button class=\"ax-w-full\" [disabled]=\"!vm.canExecute()\"\n        [text]=\"t('@report-management:report-viewer.actions.execute.title') | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </axp-layout-footer>\n  </axp-layout-start-side>\n  }\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"ax-overflow-auto\">\n    @if (vm.hasError()) {\n    <!-- Error State -->\n    <axp-state-message icon=\"fa-light fa-exclamation-triangle\"\n      [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.unexpected'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.retry.title') | async\" (onClick)=\"vm.clearError()\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-refresh\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else if (!vm.reportDefinition()) {\n    <!-- No Report Selected State -->\n    <axp-state-message icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.title'\"\n      [description]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.description'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.browse-reports.title') | async\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Desktop: Report Display Area -->\n<ng-template #reportDisplay>\n  @if (showReportDisplay()) {\n  <!-- Desktop & Mobile: Report Display Area -->\n  @if (vm.isTableLayout()) {\n  <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n  <axp-report-chart-view> </axp-report-chart-view>\n  } @else if (vm.isPdfLayout()) {\n  <axp-report-pdf-view> </axp-report-pdf-view>\n  }\n  } @else {\n  <!-- Mobile: Show filters  -->\n  <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'fieldset'\">\n  </axp-layout-renderer>\n  }\n</ng-template>\n\n<!-- Mobile: Execute Button -->\n@if (deviceService.isSmall() && !vm.hasBeenExecuted()) {\n<axp-page-footer class=\"ax-p-2 ax-border-t\">\n  <ax-button class=\"ax-w-full\" [disabled]=\"!vm.canExecute()\"\n    [text]=\"'@report-management:report-viewer.actions.execute.title' | translate | async\" [color]=\"'primary'\"\n    (onClick)=\"execute({ name: 'execute-report' })\">\n    <ax-prefix>\n      <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n    </ax-prefix>\n  </ax-button>\n</axp-page-footer>\n}", styles: [".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:1rem}.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: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$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i2$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i3.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingDialogModule }, { kind: "component", type: 
                 //
-                AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "component", type: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "    axp-page-content,     axp-page-footer-container,    axp-page-footer,    axp-page-header,    axp-page-header-container,    axp-page-toolbar,    axp-layout-content,     axp-layout-page-content,     axp-layout-sections,    axp-layout-body,    axp-layout-page-body,    axp-layout-prefix,    axp-layout-suffix,    axp-layout-title-bar,    axp-layout-title,     axp-layout-title-actions,     axp-layout-nav-button,     axp-layout-description,     axp-layout-breadcrumbs,    axp-layout-list-action,    " }, { kind: "component", type: AXPReportTableViewComponent, selector: "axp-report-table-view" }, { kind: "component", type: AXPThemeLayoutFooterComponent, selector: "axp-layout-footer, axp-layout-page-footer" }, { kind: "component", type: AXPReportChartViewComponent, selector: "axp-report-chart-view" }, { kind: "component", type: AXPReportPdfViewComponent, selector: "axp-report-pdf-view" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], 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: AXPReportPdfViewComponent, selector: "axp-report-pdf-view" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportViewerPageComponent, decorators: [{
             type: Component,
@@ -2727,7 +2727,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", 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:report-viewer.components.filters.title') | async }}\n      </axp-layout-title>\n    </axp-layout-header>\n    <axp-layout-content>\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    </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            t('@report-management:report-viewer.components.filters.messages.warning.unapplied') | async\n            }}</span>\n        </div>\n      </div>\n      }\n      <ax-button class=\"ax-w-full\" [disabled]=\"!vm.canExecute()\"\n        [text]=\"t('@report-management:report-viewer.actions.execute.title') | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </axp-layout-footer>\n  </axp-layout-start-side>\n  }\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"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:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.unexpected'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.retry.title') | async\" (onClick)=\"vm.clearError()\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-refresh\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else if (!vm.reportDefinition()) {\n    <!-- No Report Selected State -->\n    <axp-state-message icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.title'\"\n      [description]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.description'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.browse-reports.title') | async\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Desktop: Report Display Area -->\n<ng-template #reportDisplay>\n  @if (showReportDisplay()) {\n  <!-- Desktop & Mobile: Report Display Area -->\n  @if (vm.isTableLayout()) {\n  <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n  <axp-report-chart-view> </axp-report-chart-view>\n  } @else if (vm.isPdfLayout()) {\n  <axp-report-pdf-view> </axp-report-pdf-view>\n  }\n  } @else {\n  <!-- Mobile: Show filters  -->\n  <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'fieldset'\">\n  </axp-layout-renderer>\n  }\n</ng-template>\n\n<!-- Mobile: Execute Button -->\n@if (deviceService.isSmall() && !vm.hasBeenExecuted()) {\n<axp-page-footer class=\"ax-p-2 ax-border-t\">\n  <ax-button class=\"ax-w-full\" [disabled]=\"!vm.canExecute()\"\n    [text]=\"'@report-management:report-viewer.actions.execute.title' | translate | async\" [color]=\"'primary'\"\n    (onClick)=\"execute({ name: 'execute-report' })\">\n    <ax-prefix>\n      <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n    </ax-prefix>\n  </ax-button>\n</axp-page-footer>\n}", styles: [".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:1rem}.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: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"] }]
+                    ], 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      <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'card'\"\n        (contextChange)=\"handleFiltersChange($event)\" (contextInitiated)=\"handleFiltersInitiated($event)\">\n      </axp-layout-renderer>\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            t('@report-management:report-viewer.components.filters.messages.warning.unapplied') | async\n            }}</span>\n        </div>\n      </div>\n      }\n      <ax-button class=\"ax-w-full\" [disabled]=\"!vm.canExecute()\"\n        [text]=\"t('@report-management:report-viewer.actions.execute.title') | async\" [color]=\"'primary'\"\n        (onClick)=\"execute({ name: 'execute-report' })\">\n        <ax-prefix>\n          <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </axp-layout-footer>\n  </axp-layout-start-side>\n  }\n  <!-- Main Content: Report Display -->\n  <axp-page-content class=\"ax-overflow-auto\">\n    @if (vm.hasError()) {\n    <!-- Error State -->\n    <axp-state-message icon=\"fa-light fa-exclamation-triangle\"\n      [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n      [description]=\"vm.error() || '@report-management:report-viewer.messages.error.unexpected'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.retry.title') | async\" (onClick)=\"vm.clearError()\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-refresh\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else if (!vm.reportDefinition()) {\n    <!-- No Report Selected State -->\n    <axp-state-message icon=\"fa-light fa-chart-line\"\n      [title]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.title'\"\n      [description]=\"'@report-management:report-viewer.components.report-viewer.empty-states.no-report.description'\">\n      <div slot=\"actions\">\n        <ax-button look=\"outline\" color=\"primary\"\n          [text]=\"t('@report-management:report-viewer.actions.browse-reports.title') | async\">\n          <ax-prefix>\n            <ax-icon class=\"fa-light fa-folder-open\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </axp-state-message>\n    } @else {\n    <ng-container *ngTemplateOutlet=\"reportDisplay\"></ng-container>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<!-- Desktop: Report Display Area -->\n<ng-template #reportDisplay>\n  @if (showReportDisplay()) {\n  <!-- Desktop & Mobile: Report Display Area -->\n  @if (vm.isTableLayout()) {\n  <axp-report-table-view> </axp-report-table-view>\n  } @else if (vm.isChartLayout()) {\n  <axp-report-chart-view> </axp-report-chart-view>\n  } @else if (vm.isPdfLayout()) {\n  <axp-report-pdf-view> </axp-report-pdf-view>\n  }\n  } @else {\n  <!-- Mobile: Show filters  -->\n  <axp-layout-renderer #filtersForm [layout]=\"vm.formDefinition()\" [context]=\"vm.filterContext()\" [look]=\"'fieldset'\">\n  </axp-layout-renderer>\n  }\n</ng-template>\n\n<!-- Mobile: Execute Button -->\n@if (deviceService.isSmall() && !vm.hasBeenExecuted()) {\n<axp-page-footer class=\"ax-p-2 ax-border-t\">\n  <ax-button class=\"ax-w-full\" [disabled]=\"!vm.canExecute()\"\n    [text]=\"'@report-management:report-viewer.actions.execute.title' | translate | async\" [color]=\"'primary'\"\n    (onClick)=\"execute({ name: 'execute-report' })\">\n    <ax-prefix>\n      <ax-icon icon=\"fa-light fa-play\"></ax-icon>\n    </ax-prefix>\n  </ax-button>\n</axp-page-footer>\n}", styles: [".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:1rem}.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: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"] }]
         }], ctorParameters: () => [], propDecorators: { reportId: [{ type: i0.Input, args: [{ isSignal: true, alias: "reportId", required: false }] }], reportParameters: [{ type: i0.Input, args: [{ isSignal: true, alias: "reportParameters", required: false }] }], filtersForm: [{ type: i0.ViewChild, args: ['filtersForm', { isSignal: true }] }] } });
 
 var reportViewerPage_component = /*#__PURE__*/Object.freeze({
@@ -2837,7 +2837,7 @@ class AXPReportBarChartViewComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportBarChartViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportBarChartViewComponent, isStandalone: true, selector: "axp-report-bar-chart-view", ngImport: i0, template: "<div class=\"axp-report-chart-view\" *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n  <!-- Loading State -->\n  <div class=\"__loading\">\n    <div class=\"ax-spinner ax-spin ax-border-4 ax-border-gray-200 ax-border-t-primary ax-rounded-full ax-w-12 ax-h-12\">\n    </div>\n    <div class=\"__loading-text\">\n      {{ t('@report-management:report-viewer.components.chart.messages.loading') | async }}\n    </div>\n  </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n  <!-- Error State -->\n  <axp-state-message mode=\"error\" icon=\"fa-light fa-exclamation-triangle\"\n    [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n    [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\">\n  </axp-state-message>\n  } @else if (isChartReady()) {\n  <!-- Chart Content -->\n  <div class=\"__chart-container\">\n    @if (chartLayout()?.header) {\n    <div class=\"__chart-header\">\n      <h3 class=\"__chart-title\">{{ chartLayout()?.header?.title }}</h3>\n      @if (chartLayout()?.header?.showDate) {\n      <div class=\"__chart-date\">{{ '@general:common.date.today' | translate | async }}</div>\n      }\n    </div>\n    }\n\n    <div class=\"__chart-body\">\n      <!-- Chart component will be rendered here -->\n      <div class=\"__chart-placeholder\">\n        <div class=\"__placeholder-content\">\n          <div class=\"ax-flex ax-flex-wrap ax-items-center ax-justify-center ax-gap-10\"\n            [class]=\"legendOptions().mode === 'horizontal' ? 'ax-flex-col' : 'ax-flex-row'\">\n            <!-- Chart Area -->\n            <div class=\"ax-flex-0 ax-size-96\">\n              <ax-bar-chart #chart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n            </div>\n            <!-- Legend Area -->\n            @if (barChartData().length > 0) {\n            <div>\n              <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"chart\"></ax-chart-legend>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n\n    @if (chartLayout()?.footer) {\n    <div class=\"__chart-footer\">\n      @if (chartLayout()?.footer?.customHtml) {\n      <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n      }\n    </div>\n    }\n  </div>\n  } @else {\n  <!-- No Configuration State -->\n  <axp-state-message icon=\"fa-light fa-chart-column\"\n    [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n    [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\">\n  </axp-state-message>\n  }\n</div>", styles: [".axp-report-chart-view{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__loading{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.axp-report-chart-view .__loading .__loading-text{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__chart-container .__chart-header{border-bottom-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem}.axp-report-chart-view .__chart-container .__chart-header .__chart-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-header .__chart-date{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body{flex:1 1 0%;overflow:hidden}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;text-align:center}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{font-size:3.75rem;line-height:1;color:rgba(var(--ax-sys-color-primary-500),.2)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content{max-width:28rem}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-description{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body .__chart-content{height:100%;width:100%}.axp-report-chart-view .__chart-container .__chart-footer{border-top-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }, { kind: "component", type: AXChartLegendComponent, selector: "ax-chart-legend", inputs: ["chart", "options"], outputs: ["itemClick", "itemMouseEnter", "itemMouseLeave"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportBarChartViewComponent, isStandalone: true, selector: "axp-report-bar-chart-view", ngImport: i0, template: "<div class=\"axp-report-chart-view\" *translate=\"let t\">\n  @if (vm.status() === AXPPageStatus.Processing) {\n  <!-- Loading State -->\n  <div class=\"__loading\">\n    <div class=\"ax-spinner ax-spin ax-border-4 ax-border-gray-200 ax-border-t-primary ax-rounded-full ax-w-12 ax-h-12\">\n    </div>\n    <div class=\"__loading-text\">\n      {{ t('@report-management:report-viewer.components.chart.messages.loading') | async }}\n    </div>\n  </div>\n  } @else if (vm.status() === AXPPageStatus.Error) {\n  <!-- Error State -->\n  <axp-state-message mode=\"error\" icon=\"fa-light fa-exclamation-triangle\"\n    [title]=\"'@report-management:report-viewer.messages.error.fetch-title'\"\n    [description]=\"vm.error() || '@report-management:report-viewer.messages.error.fetch-description'\">\n  </axp-state-message>\n  } @else if (isChartReady()) {\n  <!-- Chart Content -->\n  <div class=\"__chart-container\">\n    @if (chartLayout()?.header) {\n    <div class=\"__chart-header\">\n      <h3 class=\"__chart-title\">{{ chartLayout()?.header?.title }}</h3>\n      @if (chartLayout()?.header?.showDate) {\n      <div class=\"__chart-date\">{{ '@general:common.date.today' | translate | async }}</div>\n      }\n    </div>\n    }\n\n    <div class=\"__chart-body\">\n      <!-- Chart component will be rendered here -->\n      <div class=\"__chart-placeholder\">\n        <div class=\"__placeholder-content\">\n          <div class=\"ax-flex ax-flex-wrap ax-items-center ax-justify-center ax-gap-10\"\n            [class]=\"legendOptions().mode === 'horizontal' ? 'ax-flex-col' : 'ax-flex-row'\">\n            <!-- Chart Area -->\n            <div class=\"ax-flex-0 ax-size-96\">\n              <ax-bar-chart #chart [data]=\"barChartData()\" [options]=\"barChartOptions()\"></ax-bar-chart>\n            </div>\n            <!-- Legend Area -->\n            @if (barChartData().length > 0) {\n            <div>\n              <ax-chart-legend [options]=\"legendOptions()\" [chart]=\"chart\"></ax-chart-legend>\n            </div>\n            }\n          </div>\n        </div>\n      </div>\n    </div>\n\n    @if (chartLayout()?.footer) {\n    <div class=\"__chart-footer\">\n      @if (chartLayout()?.footer?.customHtml) {\n      <div [innerHTML]=\"chartLayout()?.footer?.customHtml\"></div>\n      }\n    </div>\n    }\n  </div>\n  } @else {\n  <!-- No Configuration State -->\n  <axp-state-message icon=\"fa-light fa-chart-column\"\n    [title]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.title'\"\n    [description]=\"'@report-management:report-viewer.components.chart.empty-states.no-config.description'\">\n  </axp-state-message>\n  }\n</div>", styles: [".axp-report-chart-view{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__loading{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:2rem}.axp-report-chart-view .__loading .__loading-text{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container{display:flex;height:100%;width:100%;flex-direction:column}.axp-report-chart-view .__chart-container .__chart-header{border-bottom-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem}.axp-report-chart-view .__chart-container .__chart-header .__chart-title{margin:0;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-header .__chart-date{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body{flex:1 1 0%;overflow:hidden}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;gap:1.5rem;text-align:center}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-icon{font-size:3.75rem;line-height:1;color:rgba(var(--ax-sys-color-primary-500),.2)}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content{max-width:28rem}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-title{margin-bottom:.5rem;font-size:1.25rem;line-height:1.75rem;font-weight:600}.axp-report-chart-view .__chart-container .__chart-body .__chart-placeholder .__placeholder-content .__placeholder-description{margin-bottom:1rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}.axp-report-chart-view .__chart-container .__chart-body .__chart-content{height:100%;width:100%}.axp-report-chart-view .__chart-container .__chart-footer{border-top-width:1px;--tw-bg-opacity: 1;background-color:rgb(249 250 251 / var(--tw-bg-opacity, 1));padding:1rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(75 85 99 / var(--tw-text-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: AXBarChartComponent, selector: "ax-bar-chart", inputs: ["data", "options"], outputs: ["barClick"] }, { kind: "component", type: AXChartLegendComponent, selector: "ax-chart-legend", inputs: ["chart", "options"], outputs: ["itemClick", "itemMouseEnter", "itemMouseLeave"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportBarChartViewComponent, decorators: [{
             type: Component,