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

package/fesm2022/acorex-platform-module-report-management-client-report-runner-root-page.component-DgvoIHsK.mjs

@@ -0,0 +1,504 @@
+import { AXBadgeModule } from '@acorex/components/badge';
+import { AXBreadcrumbsModule } from '@acorex/components/breadcrumbs';
+import { AXButtonModule } from '@acorex/components/button';
+import * as i3 from '@acorex/components/decorators';
+import { AXDecoratorModule } from '@acorex/components/decorators';
+import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
+import { AXLoadingModule } from '@acorex/components/loading';
+import { AXSearchBoxModule } from '@acorex/components/search-box';
+import { AXTabsModule } from '@acorex/components/tabs';
+import * as i1$1 from '@acorex/core/translation';
+import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
+import { AXUnsubscriber } from '@acorex/core/utils';
+import { AXPThemeLayoutBlockComponent, AXPThemeLayoutToolbarComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutStartSideComponent, AXPStateMessageComponent } from '@acorex-platform/framework-client/layout/components';
+import { AXPPageLayoutBaseComponent, AXPPageLayoutComponent, AXPPageLayoutBase } from '@acorex-platform/framework-client/layout/views';
+import { AXPLayoutThemeService } from '@acorex-platform/framework-client/themes/shared';
+import { AXPCommandService } from '@acorex-platform/framework-client/runtime';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, output, ViewEncapsulation, ChangeDetectionStrategy, Component, computed } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
+import { merge, filter, startWith, firstValueFrom } from 'rxjs';
+import { AXPReportViewerService } from './acorex-platform-module-report-management-client.mjs';
+import { AXTreeViewComponent } from '@acorex/components/tree-view';
+import { AXPPageStatus } from '@acorex-platform/framework-shared/widget-core';
+import { AXLocaleService } from '@acorex/core/locale';
+import { AXPDeviceService } from '@acorex-platform/framework-client/core';
+import { signalStore, withState, withComputed, withMethods, patchState, withHooks } from '@ngrx/signals';
+import { isNil, isEmpty } from 'lodash';
+import { RootConfig } from '@acorex-platform/module-report-management-client/contracts';
+
+//#region ----   Imports   ----
+//#endregion
+class AXPReportCategoriesTreeComponent {
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.reportDefinitionService = inject(AXPReportViewerService);
+        this.multiLanguageResolver = inject(AXTranslationService);
+        //#endregion
+        //#region ----   Output Events   ----
+        /**
+         * Emitted when a category node is clicked
+         */
+        this.categoryClick = output();
+        /**
+         * Emitted when a report node is clicked
+         */
+        this.reportClick = output();
+        //#endregion
+        //#region ----   Data Loading Methods   ----
+        /**
+         * Provide lazy loading tree data with optimized queries
+         *
+         * Optimizations:
+         * 1. Uses childrenCount to determine expandability (no extra query)
+         * 2. Uses itemsCount to skip report queries when count = 0
+         * 3. Returns cached data on subsequent calls (via service layer)
+         * 4. Single API call per category includes all metadata
+         *
+         * Performance: Most navigation is instant (cached), only first visit queries API
+         */
+        this.provideLazyTreeView = async (selectedItemId) => {
+            if (selectedItemId) {
+                // ✅ Load child categories (includes childrenCount & itemsCount metadata)
+                const categories = await this.reportDefinitionService.getCategories(selectedItemId);
+                const categoryItems = categories.map((item) => ({
+                    id: item.id,
+                    title: this.multiLanguageResolver.resolve(item.title),
+                    childrenCount: item.childrenCount > 0 || (item.itemsCount ?? 0) > 0 ? 1 : 0,
+                    item: item,
+                    type: 'category',
+                    expanded: false,
+                }));
+                // ✅ Load report definitions for this category
+                // Optimization: Service checks itemsCount before querying (skip if 0)
+                const definitions = await this.reportDefinitionService.getReportsByCategoryId(selectedItemId);
+                const definitionItems = definitions.map((item) => ({
+                    id: item.id,
+                    title: item.title,
+                    childrenCount: 0,
+                    item: item,
+                    type: 'definition',
+                    expanded: false,
+                }));
+                // ✅ Return categories first, then reports (sorted)
+                return [...categoryItems, ...definitionItems];
+            }
+            else {
+                // ✅ Root level - load root categories only
+                const categories = await this.reportDefinitionService.getCategories();
+                return categories.map((item) => ({
+                    id: item.id,
+                    title: this.multiLanguageResolver.resolve(item.title),
+                    childrenCount: item.childrenCount > 0 || (item.itemsCount ?? 0) > 0 ? 1 : 0,
+                    item: item,
+                    type: 'category',
+                    expanded: false,
+                }));
+            }
+        };
+    }
+    //#endregion
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle tree node click events
+     *
+     * Emits appropriate event based on node type:
+     * - category → categoryClick
+     * - definition → reportClick
+     */
+    handleNodeClick(event) {
+        const node = event.node;
+        if (node.type === 'category') {
+            this.categoryClick.emit(node.item);
+        }
+        else if (node.type === 'definition') {
+            this.reportClick.emit(node.item);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportCategoriesTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPReportCategoriesTreeComponent, isStandalone: true, selector: "axp-report-categories-tree", outputs: { categoryClick: "categoryClick", reportClick: "reportClick" }, host: { classAttribute: "axp-report-categories-tree" }, ngImport: i0, template: "<ax-tree-view\n  [selectMode]=\"'none'\"\n  [dragBehavior]=\"'none'\"\n  [showIcons]=\"false\"\n  [showChildrenBadge]=\"false\"\n  [nodeTemplate]=\"itemTemplate\"\n  [titleField]=\"'title'\"\n  [idField]=\"'id'\"\n  [expandedField]=\"'expanded'\"\n  [datasource]=\"provideLazyTreeView\"\n  (onNodeClick)=\"handleNodeClick($event)\"\n>\n</ax-tree-view>\n\n<ng-template #itemTemplate let-node=\"node\">\n  @let item = node;\n  @if (item.type === 'category') {\n    <ax-icon class=\"fas text-warning fa-folder\"></ax-icon>\n  } @else {\n    <ax-icon class=\"fas text-accent1 fa-file-chart-column\"></ax-icon>\n  }\n  {{ item.title }}\n</ng-template>\n", styles: [".axp-report-categories-tree{height:100%;width:100%}.axp-report-categories-tree .__tree-view .__item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-report-categories-tree .__tree-view .__item .__icon{flex-shrink:0}.axp-report-categories-tree .__tree-view .__item .__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-report-categories-tree .__tree-view .__item:hover{background-color:var(--color-gray-50, oklch(98.5% .002 247.839))}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPReportCategoriesTreeComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-report-categories-tree', standalone: true, imports: [AXDecoratorModule, AXTreeViewComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-report-categories-tree' }, template: "<ax-tree-view\n  [selectMode]=\"'none'\"\n  [dragBehavior]=\"'none'\"\n  [showIcons]=\"false\"\n  [showChildrenBadge]=\"false\"\n  [nodeTemplate]=\"itemTemplate\"\n  [titleField]=\"'title'\"\n  [idField]=\"'id'\"\n  [expandedField]=\"'expanded'\"\n  [datasource]=\"provideLazyTreeView\"\n  (onNodeClick)=\"handleNodeClick($event)\"\n>\n</ax-tree-view>\n\n<ng-template #itemTemplate let-node=\"node\">\n  @let item = node;\n  @if (item.type === 'category') {\n    <ax-icon class=\"fas text-warning fa-folder\"></ax-icon>\n  } @else {\n    <ax-icon class=\"fas text-accent1 fa-file-chart-column\"></ax-icon>\n  }\n  {{ item.title }}\n</ng-template>\n", styles: [".axp-report-categories-tree{height:100%;width:100%}.axp-report-categories-tree .__tree-view .__item{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-report-categories-tree .__tree-view .__item .__icon{flex-shrink:0}.axp-report-categories-tree .__tree-view .__item .__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-report-categories-tree .__tree-view .__item:hover{background-color:var(--color-gray-50, oklch(98.5% .002 247.839))}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { categoryClick: [{ type: i0.Output, args: ["categoryClick"] }], reportClick: [{ type: i0.Output, args: ["reportClick"] }] } });
+
+const AXPReportRunnerRootViewModel = signalStore(withState(() => ({
+    activeCategory: undefined,
+    categories: [],
+    reports: [],
+    activeCategoriesPath: [],
+    //
+    searchExpression: null,
+    //
+    status: AXPPageStatus.Processing,
+})), withComputed((store, deviceService = inject(AXPDeviceService)) => ({
+    searchResults: computed(() => []),
+    hasActiveCategory: computed(() => store.activeCategory() != null),
+    showSideMenu: computed(() => deviceService.isLarge()),
+    isSearching: computed(() => store.searchExpression() != null),
+    isBusy: computed(() => store.status() == AXPPageStatus.Processing),
+    isLoaded: computed(() => store.activeCategory() != null),
+    title: computed(() => store.activeCategory()?.title ?? `@${RootConfig.config.i18n}:report-runner.terms.page-title`),
+    description: computed(() => store.activeCategory()?.description ??
+        `@${RootConfig.config.i18n}:report-runner.components.report-runner.description`),
+})), withMethods((store, reportDefinitionService = inject(AXPReportViewerService)) => ({
+    /**
+     * Load root categories
+     *
+     * Optimization: Service caches result, subsequent calls are instant
+     */
+    async loadRootCategories() {
+        patchState(store, {
+            activeCategory: undefined,
+            reports: [],
+            activeCategoriesPath: [],
+            status: AXPPageStatus.Processing,
+        });
+        const categories = await reportDefinitionService.getCategories();
+        patchState(store, {
+            categories,
+            status: AXPPageStatus.Idle,
+        });
+    },
+    /**
+     * Get categories by parentId (cached by service)
+     */
+    async getCategories(parentId) {
+        patchState(store, { status: AXPPageStatus.Processing });
+        const result = await reportDefinitionService.getCategories(parentId);
+        patchState(store, { status: AXPPageStatus.Idle });
+        return result;
+    },
+    /**
+     * Get reports for a category
+     *
+     * Optimization: Service checks itemsCount before querying
+     * - If itemsCount = 0, returns empty array (no API call)
+     * - If cached, returns instantly
+     */
+    async getReports(categoryId) {
+        patchState(store, { status: AXPPageStatus.Processing });
+        const result = await reportDefinitionService.getReportsByCategoryId(categoryId);
+        patchState(store, { status: AXPPageStatus.Idle });
+        return result;
+    },
+    /**
+     * Set active category and load its data
+     *
+     * Optimization: All 3 queries benefit from caching
+     * - Categories: Cached from previous navigation
+     * - Reports: Skipped if itemsCount = 0
+     * - Path: Built from cached categories
+     */
+    async setActiveCategory(category) {
+        patchState(store, {
+            status: AXPPageStatus.Processing,
+            activeCategory: category,
+        });
+        // ✅ Parallel loading for better performance
+        const [categories, reports, activeCategoriesPath] = await Promise.all([
+            reportDefinitionService.getCategories(category.id),
+            reportDefinitionService.getReportsByCategoryId(category.id),
+            reportDefinitionService.getCategoriesPathById(category.id),
+        ]);
+        patchState(store, {
+            categories,
+            reports,
+            activeCategoriesPath,
+            status: AXPPageStatus.Idle,
+        });
+    },
+    /**
+     * Set active category by ID
+     *
+     * Optimization: getCategoryById uses O(1) cache lookup
+     */
+    async setActiveCategoryById(id) {
+        patchState(store, { status: AXPPageStatus.Processing });
+        const category = await reportDefinitionService.getCategoryById(id);
+        if (category) {
+            patchState(store, { activeCategory: category });
+            // ✅ Parallel loading
+            const [categories, reports, activeCategoriesPath] = await Promise.all([
+                reportDefinitionService.getCategories(category.id),
+                reportDefinitionService.getReportsByCategoryId(category.id),
+                reportDefinitionService.getCategoriesPathById(category.id),
+            ]);
+            patchState(store, {
+                categories,
+                reports,
+                activeCategoriesPath,
+            });
+        }
+        patchState(store, { status: AXPPageStatus.Idle });
+    },
+    /**
+     * Search for reports (to be implemented)
+     */
+    async search(expression) {
+        if (!isNil(expression) && !isEmpty(expression)) {
+            patchState(store, { searchExpression: expression });
+        }
+        else {
+            patchState(store, { searchExpression: null });
+        }
+    },
+    /**
+     * Clear search
+     */
+    clearSearch() {
+        patchState(store, { searchExpression: null });
+    },
+})), withHooks((store, translationService = inject(AXTranslationService), localeService = inject(AXLocaleService)) => ({
+    async onInit() {
+        merge(translationService.langChanges$, localeService.profileChanged$).subscribe(async () => { });
+        //
+        await store.loadRootCategories();
+    },
+    onDestroy() { },
+})));
+
+class AXMReportRunnerRootPageComponent extends AXPPageLayoutBaseComponent {
+    constructor() {
+        super(...arguments);
+        this.vm = inject(AXPReportRunnerRootViewModel);
+        this.layoutService = inject(AXPLayoutThemeService);
+        this.activatedRoute = inject(ActivatedRoute);
+        this.unsubscribe = inject(AXUnsubscriber);
+        this.reportDefinitionService = inject(AXPReportViewerService);
+        this.commandService = inject(AXPCommandService);
+        this.multiLanguageResolver = inject(AXTranslationService);
+        this.baseRoutes = [this.sessionService.application?.name, 'report-management', 'reports'];
+    }
+    async ngOnInit() {
+        await super.ngOnInit();
+        //
+        this.router.events
+            .pipe(this.unsubscribe.takeUntilDestroy, filter((event) => event instanceof NavigationEnd), startWith(null))
+            .subscribe(async () => {
+            await this.loadFromRoute();
+        });
+    }
+    async loadFromRoute() {
+        const snapshot = this.activatedRoute.snapshot;
+        const segments = await firstValueFrom(this.activatedRoute.url);
+        let categoryId = segments[segments.length - 1]?.path ?? null;
+        if (categoryId) {
+            await this.vm.setActiveCategoryById(categoryId);
+        }
+        else {
+            await this.vm.loadRootCategories();
+            return;
+        }
+        //
+        let reportId = snapshot.queryParamMap.get('report') ?? null;
+        if (reportId) {
+            // Navigate directly to viewer instead of showing parameters
+            await this.navigateToViewer(reportId);
+        }
+    }
+    //#region ----   Event Handlers   ----
+    /**
+     * Handle category selection from tree
+     */
+    async onCategoryClick(category) {
+        await this.navigateToCategory(category);
+    }
+    /**
+     * Handle report selection from tree
+     */
+    async onReportClick(report) {
+        await this.navigateToReport(report);
+    }
+    /**
+     * Navigate directly to report viewer with the selected report
+     */
+    async navigateToViewer(reportId) {
+        const baseViewerRoute = [this.sessionService.application?.name, 'report-management', 'viewer'];
+        await this.router.navigate(baseViewerRoute, {
+            queryParams: { reportId },
+        });
+    }
+    //#endregion
+    async navigateToCategory(category) {
+        // Find the path to this category
+        const path = await this.reportDefinitionService.getCategoriesPathById(category.id);
+        // Find the index of the target category in the path
+        let urlParts = [...this.baseRoutes];
+        for (const cat of path) {
+            urlParts.push(cat.id);
+        }
+        await this.router.navigate(urlParts);
+    }
+    async navigateToReport(report) {
+        // Navigate directly to viewer instead of showing parameters in runner
+        await this.navigateToViewer(report.id);
+    }
+    //#region ----   Page Configuration Overrides   ----
+    async getPageBreadcrumbs() {
+        const path = this.vm.activeCategoriesPath();
+        const report = {
+            name: 'reports',
+            title: await this.translateService.translateAsync('@report-management:module.menus.root.title'),
+            command: {
+                name: 'navigate-to-reports-root',
+            },
+        };
+        if (!path || path.length === 0) {
+            return [report];
+        }
+        const breadcrumbs = [report];
+        let urlParts = [...this.baseRoutes];
+        for (const cat of path) {
+            urlParts = [...urlParts, cat.id];
+            breadcrumbs.push({
+                name: cat.id,
+                title: this.multiLanguageResolver.resolve(cat.title),
+                command: {
+                    name: 'navigate-to-category',
+                    options: {
+                        category: cat,
+                    },
+                },
+            });
+        }
+        return breadcrumbs;
+    }
+    async getSecondaryMenuItems() {
+        return [];
+    }
+    async getPageTitle() {
+        return this.multiLanguageResolver.resolve(this.vm.title() ?? '');
+    }
+    async getPageDescription() {
+        const d = this.multiLanguageResolver.resolve(this.vm.description() ?? '');
+        return d || null;
+    }
+    async getBackButton() {
+        const categoriesPath = this.vm.activeCategoriesPath();
+        if (!categoriesPath || categoriesPath.length === 0) {
+            // At root level, no back button
+            return null;
+        }
+        if (categoriesPath.length === 1) {
+            // At first level category, back to reports root
+            return {
+                title: await this.translateService.translateAsync('@report-management:module.menus.root.title'),
+            };
+        }
+        // At deeper level, back to parent category
+        const parentCategory = categoriesPath[categoriesPath.length - 2];
+        return {
+            title: this.multiLanguageResolver.resolve(parentCategory.title),
+        };
+    }
+    async onBackButtonClick() {
+        const categoriesPath = this.vm.activeCategoriesPath();
+        if (!categoriesPath || categoriesPath.length <= 1) {
+            // Navigate back to reports root
+            await this.router.navigate([...this.baseRoutes]);
+        }
+        else {
+            // Navigate to parent category
+            const parentCategoriesPath = categoriesPath.slice(0, -1);
+            let urlParts = [...this.baseRoutes];
+            for (const cat of parentCategoriesPath) {
+                urlParts.push(cat.id);
+            }
+            await this.router.navigate(urlParts);
+        }
+    }
+    async execute(command) {
+        switch (command.name) {
+            case 'navigate-to-category':
+                await this.navigateToCategory(command.options?.['category']);
+                break;
+            case 'navigate-to-reports-root':
+                await this.router.navigate([...this.baseRoutes]);
+                break;
+            case 'create-report':
+                await this.commandService.execute('Entity:Create', {
+                    __context__: {
+                        entity: 'ReportManagement.Report',
+                        data: { categoryId: this.vm.activeCategory()?.id ?? null },
+                        entityInfo: {
+                            name: 'Report',
+                            module: 'ReportManagement',
+                            title: '',
+                            parentKey: '',
+                        },
+                        options: {},
+                    },
+                });
+                break;
+        }
+    }
+    async getPrimaryMenuItems() {
+        return [
+        // {
+        //     title: '@general:actions.create.title',
+        //     icon: 'fa-light fa-plus',
+        //     color: 'primary',
+        //     command: {
+        //         name: 'create-report',
+        //     },
+        // },
+        ];
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMReportRunnerRootPageComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMReportRunnerRootPageComponent, isStandalone: true, selector: "ng-component", host: { classAttribute: "axp-report-runner-root-page" }, providers: [
+            AXUnsubscriber,
+            AXPReportRunnerRootViewModel,
+            {
+                provide: AXPPageLayoutBase,
+                useExisting: AXMReportRunnerRootPageComponent,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.showSideMenu()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{ t('@report-management:report-runner.terms.menu-title') | async }}</axp-layout-title>\n        <axp-layout-toolbar>\n          <!-- <ax-search-box\n            [delayTime]=\"300\"\n            [ngModel]=\"vm.searchExpression()\"\n            (onValueChanged)=\"vm.search($event.value)\"\n            [placeholder]=\"t('@report-management:report-runner.terms.search-placeholder') | async\"\n          >\n            <ax-clear-button></ax-clear-button>\n          </ax-search-box> -->\n        </axp-layout-toolbar>\n      </axp-layout-header>\n      <axp-layout-content>\n        <axp-report-categories-tree (categoryClick)=\"onCategoryClick($event)\" (reportClick)=\"onReportClick($event)\" />\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n\n  <axp-page-content>\n    <!-- Desktop and Mobile: Always show desktop template -->\n    <ng-container *ngTemplateOutlet=\"desktop\"> </ng-container>\n  </axp-page-content>\n\n  <!-- Desktop: Grid-based browser for main content -->\n  <ng-template #desktop>\n    <div class=\"__reports-browser\">\n      @if (vm.categories().length > 0) {\n        <div class=\"__section\">\n          <h3 class=\"__section-title\">{{ t('@report-management:reports.terms.categories') | async }}</h3>\n          <div class=\"__items-grid\">\n            @for (category of vm.categories(); track category.id) {\n              <div class=\"__item __category\" (click)=\"navigateToCategory(category)\">\n                <div class=\"__item-icon\">\n                  <ax-icon class=\"fa-solid fa-folder\"></ax-icon>\n                </div>\n                <div class=\"__item-content\">\n                  <div class=\"__item-title\">{{ category.title }}</div>\n                  @if (category.description) {\n                    <div class=\"__item-description\">{{ category.description }}</div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (vm.reports().length > 0) {\n        <div class=\"__section\">\n          <h3 class=\"__section-title\">{{ t('@report-management:reports.terms.reports') | async }}</h3>\n          <div class=\"__items-grid\">\n            @for (report of vm.reports(); track report.id) {\n              <div class=\"__item __report\" (click)=\"navigateToReport(report)\">\n                <div class=\"__item-icon\">\n                  <ax-icon class=\"fa-solid fa-file-chart-column\"></ax-icon>\n                </div>\n                <div class=\"__item-content\">\n                  <div class=\"__item-title\">{{ report.title }}</div>\n                  @if (report.description) {\n                    <div class=\"__item-description\">{{ report.description }}</div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (vm.categories().length === 0 && vm.reports().length === 0) {\n        <axp-state-message\n          icon=\"fa-light fa-folder-open\"\n          [title]=\"'@report-management:report-runner.components.report-runner.empty-states.no-items-found.title'\"\n          [description]=\"'@report-management:report-runner.components.report-runner.empty-states.no-items-found.description'\"\n        >\n        </axp-state-message>\n      }\n    </div>\n  </ng-template>\n</axp-page-layout>\n", styles: ["@layer properties;.axp-report-runner-root-page axp-layout-start-side{height:100%;width:calc(var(--spacing, .25rem) * 80);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}@media(width>=1920px){.axp-report-runner-root-page axp-layout-start-side{width:calc(var(--spacing, .25rem) * 96)}}.axp-report-runner-root-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding-inline:calc(var(--spacing, .25rem) * 4)}.axp-report-runner-root-page .__reports-browser{padding:calc(var(--spacing, .25rem) * 3)}:where(.axp-report-runner-root-page .__reports-browser>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 8) * calc(1 - var(--tw-space-y-reverse)))}@media(width>=64rem){.axp-report-runner-root-page .__reports-browser{padding:calc(var(--spacing, .25rem) * 6)}}:where(.axp-report-runner-root-page .__reports-browser .__section>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}.axp-report-runner-root-page .__reports-browser .__section .__section-title{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-report-runner-root-page .__reports-browser .__section .__section-title ax-icon{color:rgba(var(--ax-sys-color-primary-surface))}.axp-report-runner-root-page .__reports-browser .__section .__items-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4)}@media(width>=2560px){.axp-report-runner-root-page .__reports-browser .__section .__items-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(width>=48rem){.axp-report-runner-root-page .__reports-browser .__section .__items-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width>=80rem){.axp-report-runner-root-page .__reports-browser .__section .__items-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(width>=96rem){.axp-report-runner-root-page .__reports-browser .__section .__items-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item{cursor:pointer;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 4);transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 3)}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item .__item-icon{display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;align-items:center;justify-content:center;border-radius:.25rem;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)))}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item .__item-content{min-width:0;flex:1}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item .__item-content .__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item .__item-content .__item-description{margin-top:var(--spacing, .25rem);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:75%}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__category .__item-icon{background-color:rgba(var(--ax-sys-color-warning-surface))}@supports (color: color-mix(in lab,red,red)){.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__category .__item-icon{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-warning-surface)) 10%,transparent)}}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__category .__item-icon ax-icon{color:rgba(var(--ax-sys-color-warning-surface))}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__category:hover{border-color:rgba(var(--ax-sys-color-warning-surface));background-color:rgba(var(--ax-sys-color-warning-surface))}@supports (color: color-mix(in lab,red,red)){.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__category:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-warning-surface)) 5%,transparent)}}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__report .__item-icon{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__report .__item-icon{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__report .__item-icon ax-icon{color:rgba(var(--ax-sys-color-primary-surface))}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__report:hover{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__report:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-space-y-reverse: 0;--tw-font-weight: initial;--tw-duration: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
+                //
+                AXSearchBoxModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i3.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i1$1.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: 
+                //
+                AXPPageLayoutComponent, selector: "axp-page-layout" }, { 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: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: 
+                //
+                AXPReportCategoriesTreeComponent, selector: "axp-report-categories-tree", outputs: ["categoryClick", "reportClick"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMReportRunnerRootPageComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        RouterModule,
+                        //
+                        AXSearchBoxModule,
+                        AXDecoratorModule,
+                        AXBreadcrumbsModule,
+                        AXTranslationModule,
+                        AXButtonModule,
+                        AXTabsModule,
+                        AXBadgeModule,
+                        AXLoadingModule,
+                        AXDropdownButtonModule,
+                        //
+                        AXPPageLayoutComponent,
+                        AXPThemeLayoutBlockComponent,
+                        AXPThemeLayoutToolbarComponent,
+                        AXPThemeLayoutHeaderComponent,
+                        AXPThemeLayoutStartSideComponent,
+                        //
+                        AXPReportCategoriesTreeComponent,
+                        AXPStateMessageComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
+                        AXUnsubscriber,
+                        AXPReportRunnerRootViewModel,
+                        {
+                            provide: AXPPageLayoutBase,
+                            useExisting: AXMReportRunnerRootPageComponent,
+                        },
+                    ], host: { class: 'axp-report-runner-root-page' }, template: "<axp-page-layout *translate=\"let t\">\n  @if (vm.showSideMenu()) {\n    <axp-layout-start-side>\n      <axp-layout-header>\n        <axp-layout-title>{{ t('@report-management:report-runner.terms.menu-title') | async }}</axp-layout-title>\n        <axp-layout-toolbar>\n          <!-- <ax-search-box\n            [delayTime]=\"300\"\n            [ngModel]=\"vm.searchExpression()\"\n            (onValueChanged)=\"vm.search($event.value)\"\n            [placeholder]=\"t('@report-management:report-runner.terms.search-placeholder') | async\"\n          >\n            <ax-clear-button></ax-clear-button>\n          </ax-search-box> -->\n        </axp-layout-toolbar>\n      </axp-layout-header>\n      <axp-layout-content>\n        <axp-report-categories-tree (categoryClick)=\"onCategoryClick($event)\" (reportClick)=\"onReportClick($event)\" />\n      </axp-layout-content>\n    </axp-layout-start-side>\n  }\n\n  <axp-page-content>\n    <!-- Desktop and Mobile: Always show desktop template -->\n    <ng-container *ngTemplateOutlet=\"desktop\"> </ng-container>\n  </axp-page-content>\n\n  <!-- Desktop: Grid-based browser for main content -->\n  <ng-template #desktop>\n    <div class=\"__reports-browser\">\n      @if (vm.categories().length > 0) {\n        <div class=\"__section\">\n          <h3 class=\"__section-title\">{{ t('@report-management:reports.terms.categories') | async }}</h3>\n          <div class=\"__items-grid\">\n            @for (category of vm.categories(); track category.id) {\n              <div class=\"__item __category\" (click)=\"navigateToCategory(category)\">\n                <div class=\"__item-icon\">\n                  <ax-icon class=\"fa-solid fa-folder\"></ax-icon>\n                </div>\n                <div class=\"__item-content\">\n                  <div class=\"__item-title\">{{ category.title }}</div>\n                  @if (category.description) {\n                    <div class=\"__item-description\">{{ category.description }}</div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (vm.reports().length > 0) {\n        <div class=\"__section\">\n          <h3 class=\"__section-title\">{{ t('@report-management:reports.terms.reports') | async }}</h3>\n          <div class=\"__items-grid\">\n            @for (report of vm.reports(); track report.id) {\n              <div class=\"__item __report\" (click)=\"navigateToReport(report)\">\n                <div class=\"__item-icon\">\n                  <ax-icon class=\"fa-solid fa-file-chart-column\"></ax-icon>\n                </div>\n                <div class=\"__item-content\">\n                  <div class=\"__item-title\">{{ report.title }}</div>\n                  @if (report.description) {\n                    <div class=\"__item-description\">{{ report.description }}</div>\n                  }\n                </div>\n              </div>\n            }\n          </div>\n        </div>\n      }\n\n      @if (vm.categories().length === 0 && vm.reports().length === 0) {\n        <axp-state-message\n          icon=\"fa-light fa-folder-open\"\n          [title]=\"'@report-management:report-runner.components.report-runner.empty-states.no-items-found.title'\"\n          [description]=\"'@report-management:report-runner.components.report-runner.empty-states.no-items-found.description'\"\n        >\n        </axp-state-message>\n      }\n    </div>\n  </ng-template>\n</axp-page-layout>\n", styles: ["@layer properties;.axp-report-runner-root-page axp-layout-start-side{height:100%;width:calc(var(--spacing, .25rem) * 80);border-inline-end-style:var(--tw-border-style);border-inline-end-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}@media(width>=1920px){.axp-report-runner-root-page axp-layout-start-side{width:calc(var(--spacing, .25rem) * 96)}}.axp-report-runner-root-page axp-layout-start-side axp-layout-content{overflow-x:auto;padding-inline:calc(var(--spacing, .25rem) * 4)}.axp-report-runner-root-page .__reports-browser{padding:calc(var(--spacing, .25rem) * 3)}:where(.axp-report-runner-root-page .__reports-browser>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 8) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 8) * calc(1 - var(--tw-space-y-reverse)))}@media(width>=64rem){.axp-report-runner-root-page .__reports-browser{padding:calc(var(--spacing, .25rem) * 6)}}:where(.axp-report-runner-root-page .__reports-browser .__section>:not(:last-child)){--tw-space-y-reverse: 0;margin-block-start:calc(calc(var(--spacing, .25rem) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing, .25rem) * 4) * calc(1 - var(--tw-space-y-reverse)))}.axp-report-runner-root-page .__reports-browser .__section .__section-title{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-report-runner-root-page .__reports-browser .__section .__section-title ax-icon{color:rgba(var(--ax-sys-color-primary-surface))}.axp-report-runner-root-page .__reports-browser .__section .__items-grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4)}@media(width>=2560px){.axp-report-runner-root-page .__reports-browser .__section .__items-grid{grid-template-columns:repeat(5,minmax(0,1fr))}}@media(width>=48rem){.axp-report-runner-root-page .__reports-browser .__section .__items-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width>=80rem){.axp-report-runner-root-page .__reports-browser .__section .__items-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(width>=96rem){.axp-report-runner-root-page .__reports-browser .__section .__items-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item{cursor:pointer;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 4);transition-property:all;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .2s;transition-duration:.2s;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);display:flex;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 3)}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item .__item-icon{display:flex;height:calc(var(--spacing, .25rem) * 10);width:calc(var(--spacing, .25rem) * 10);flex-shrink:0;align-items:center;justify-content:center;border-radius:.25rem;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)))}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item .__item-content{min-width:0;flex:1}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item .__item-content .__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item .__item-content .__item-description{margin-top:var(--spacing, .25rem);overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));opacity:75%}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__category .__item-icon{background-color:rgba(var(--ax-sys-color-warning-surface))}@supports (color: color-mix(in lab,red,red)){.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__category .__item-icon{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-warning-surface)) 10%,transparent)}}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__category .__item-icon ax-icon{color:rgba(var(--ax-sys-color-warning-surface))}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__category:hover{border-color:rgba(var(--ax-sys-color-warning-surface));background-color:rgba(var(--ax-sys-color-warning-surface))}@supports (color: color-mix(in lab,red,red)){.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__category:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-warning-surface)) 5%,transparent)}}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__report .__item-icon{background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__report .__item-icon{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__report .__item-icon ax-icon{color:rgba(var(--ax-sys-color-primary-surface))}.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__report:hover{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface))}@supports (color: color-mix(in lab,red,red)){.axp-report-runner-root-page .__reports-browser .__section .__items-grid .__item.__report:hover{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 5%,transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-space-y-reverse{syntax: \"*\"; inherits: false; initial-value: 0;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-duration{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-space-y-reverse: 0;--tw-font-weight: initial;--tw-duration: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
+        }] });
+
+export { AXMReportRunnerRootPageComponent };
+//# sourceMappingURL=acorex-platform-module-report-management-client-report-runner-root-page.component-DgvoIHsK.mjs.map