@acorex/modules 21.0.0-next.46 → 21.0.0-next.48

package/fesm2022/{acorex-modules-task-management-task-board.page-CkVHYIl5.mjs → acorex-modules-task-management-task-board.page-DUIHtqnr.mjs}

@@ -39,7 +39,7 @@ import * as i1$3 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, NavigationEnd, RouterModule } from '@angular/router';
 import { filter, startWith } from 'rxjs';
-import { A as AXM_TASK_BOARD_ALL_VIEW_MODE_IDS, a as AXMTaskBoardSettings, n as normalizeTaskBoardAssigneeIds, b as normalizeVisibleTaskBoardModesByParts, c as canViewAllTaskAssignees, d as AXPTaskBoardService, R as RootConfig } from './acorex-modules-task-management-acorex-modules-task-management-BIEMYKVF.mjs';
+import { A as AXM_TASK_BOARD_ALL_VIEW_MODE_IDS, a as AXMTaskBoardSettings, n as normalizeTaskBoardAssigneeIds, b as normalizeVisibleTaskBoardModesByParts, c as canViewAllTaskAssignees, d as AXPTaskBoardService, R as RootConfig } from './acorex-modules-task-management-acorex-modules-task-management-BL2IOcx3.mjs';
 import { AXFormatPipe } from '@acorex/core/format';
 import * as i1 from '@acorex/platform/layout/widget-core';
 import { AXPWidgetCoreModule, AXPWidgetsCatalog } from '@acorex/platform/layout/widget-core';
@@ -708,6 +708,20 @@ class AXMTaskBoardCalendarViewComponent {
             this.refreshNonce();
             this.schedulerComponent()?.refresh();
         }, ...(ngDevMode ? [{ debugName: "refreshNonceEffect" }] : /* istanbul ignore next */ []));
+        /** Re-renders scheduler when parent date, view, or range length changes. */
+        this.schedulerStateSyncEffect = effect(() => {
+            this.startingDate();
+            this.currentSchedulerView();
+            this.vm.daysCount();
+            this.vm.selectedTaskTypeNames();
+            this.vm.selectedAssigneeIds();
+            this.vm.selectedReporterIds();
+            this.vm.selectedPriorities();
+            this.refreshNonce();
+            queueMicrotask(() => {
+                this.schedulerComponent()?.refresh();
+            });
+        }, ...(ngDevMode ? [{ debugName: "schedulerStateSyncEffect" }] : /* istanbul ignore next */ []));
     }
     // async ngOnInit(): Promise<void> {
     //   const firstDayOfWeek = await this.settingsService.get(AXPRegionalSetting.FirstDayOfWeek) as unknown as number;
@@ -863,12 +877,16 @@ class AXMTaskBoardCalendarViewComponent {
         const task = this.selectedTask();
         if (!task || !action.command)
             return;
+        const providerName = task.provider;
+        if (!providerName)
+            return;
         try {
-            const providerName = task.provider;
-            if (!providerName)
+            const result = await this.taskBoardService.executeCommand(action.command, providerName);
+            if (result?.success === false || result === null) {
                 return;
-            await this.taskBoardService.executeCommand(action.command, providerName);
+            }
             this.closePopover();
+            this.taskBoardService.requestRefresh(providerName);
         }
         catch (error) {
             console.error('Failed to execute action:', error);
@@ -899,64 +917,46 @@ class AXMTaskBoardCalendarViewComponent {
     }
     async loadCustomComponent(task) {
         if (!task.provider) {
-            console.log('[TaskPopover] No provider on task:', task);
             this.customComponentType.set(null);
             return;
         }
         const provider = this.taskBoardService.getProvider(task.provider);
         if (!provider) {
-            console.log('[TaskPopover] Provider not found:', task.provider);
             this.customComponentType.set(null);
             return;
         }
         const componentGetter = provider.getComponent?.();
         if (!componentGetter) {
-            console.log('[TaskPopover] No component getter on provider:', task.provider);
             this.customComponentType.set(null);
             return;
         }
-        console.log('[TaskPopover] Component getter found:', componentGetter, 'Type:', typeof componentGetter);
         try {
             let componentType;
-            // Check if it's a lazy loading function or direct component type
-            // A lazy loader is a function that returns a Promise
-            // A component type is a class constructor (also a function, but used differently)
             if (typeof componentGetter === 'function') {
-                // Try calling it to see if it returns a Promise (lazy loader)
                 const testCall = componentGetter;
                 let result;
                 try {
                     result = testCall();
                 }
-                catch (e) {
-                    // If calling throws (e.g., class constructor without 'new'), use it directly
-                    console.log('[TaskPopover] Component getter is a class constructor, using directly');
+                catch {
                     componentType = componentGetter;
                     this.customComponentType.set(componentType);
                     return;
                 }
                 if (result instanceof Promise) {
-                    // It's a lazy loading function
-                    console.log('[TaskPopover] Component getter is a lazy loader');
                     componentType = await result;
                 }
                 else if (result) {
-                    // It returned a component type directly
-                    console.log('[TaskPopover] Component getter returned component type directly');
                     componentType = result;
                 }
                 else {
-                    // Result is undefined, use the original as component type
-                    console.log('[TaskPopover] Component getter returned undefined, using original as component type');
                     componentType = componentGetter;
                 }
             }
             else {
-                console.log('[TaskPopover] Component getter is not a function');
                 this.customComponentType.set(null);
                 return;
             }
-            console.log('[TaskPopover] Component type loaded successfully:', componentType?.name);
             this.customComponentType.set(componentType);
         }
         catch (error) {
@@ -1377,11 +1377,18 @@ class AXMTaskBoardKanbanViewComponent {
     onSortChanged(event) {
         const tasks = this.tasks().map((item) => {
             const task = event.allItems.find((t) => t.id === item.id);
-            if (task) {
-                const status = this.statuses().find((s) => s.key === task.statusKey);
-                return { ...item, index: task.index, status: { id: status.key, title: status.title } };
+            if (!task) {
+                return item;
+            }
+            const status = this.statuses().find((s) => String(s.key) === String(task.statusKey));
+            if (!status) {
+                return { ...item, index: task.index ?? item.index };
             }
-            return item;
+            return {
+                ...item,
+                index: task.index ?? item.index,
+                status: { id: status.key, title: status.title },
+            };
         });
         this.taskBoardService
             .updateTasks(tasks)
@@ -1390,6 +1397,10 @@ class AXMTaskBoardKanbanViewComponent {
         })
             .catch((error) => {
             console.error('[KanbanSort] Failed to update tasks:', error);
+            const provider = tasks[0]?.provider;
+            if (provider) {
+                this.taskBoardService.requestRefresh(provider);
+            }
         });
     }
     async handleItemClick(event) {
@@ -1695,6 +1706,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
 function statusGroupTrackKey(nonce, group) {
     return `${nonce}:${String(group.statusInfo.key)}`;
 }
+function taskMatchesStatus(task, status) {
+    return String(task.status.id) === String(status.key);
+}
 class AXMTaskBoardStatusGroupedGridViewComponent {
     #dataChanged;
     #providerChanged;
@@ -1707,6 +1721,7 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
         this.dataSource = input.required(...(ngDevMode ? [{ debugName: "dataSource" }] : /* istanbul ignore next */ []));
         this.refreshNonce = input(0, ...(ngDevMode ? [{ debugName: "refreshNonce" }] : /* istanbul ignore next */ []));
         this.onActionClick = output();
+        this.onTaskClick = output();
         this.groupedTasks = signal([], ...(ngDevMode ? [{ debugName: "groupedTasks" }] : /* istanbul ignore next */ []));
         this.allFetchedTasks = signal([], ...(ngDevMode ? [{ debugName: "allFetchedTasks" }] : /* istanbul ignore next */ []));
         this.columns = signal([], ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
@@ -1714,10 +1729,9 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
         this.grids = viewChildren('grid', ...(ngDevMode ? [{ debugName: "grids" }] : /* istanbul ignore next */ []));
         /** Used by the template so status tables remount when the board refreshes (same as flat grid). */
         this.trackStatusGroup = (_index, group) => statusGroupTrackKey(this.refreshNonce(), group);
-        this.#dataChanged = effect(async () => {
+        this.groupedViewRemountKeys = computed(() => [this.refreshNonce()], ...(ngDevMode ? [{ debugName: "groupedViewRemountKeys" }] : /* istanbul ignore next */ []));
+        this.#dataChanged = effect(() => {
             // Track filter-related signals that affect the data source
-            // When these change, the parent's filter() computed signal changes,
-            // which means the data source function will return different results
             this.vm.selectedTaskTypeNames();
             this.vm.selectedAssigneeIds();
             this.vm.selectedReporterIds();
@@ -1726,36 +1740,34 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
             this.vm.daysCount();
             this.vm.currentViewMode();
             this.refreshNonce();
-            const parentDataSource = this.dataSource();
             const allStatuses = this.statuses();
+            const parentDataSource = this.dataSource();
             if (!parentDataSource || allStatuses.length === 0) {
                 this.groupedTasks.set([]);
                 this.allFetchedTasks.set([]);
                 return;
             }
-            const result = await parentDataSource();
-            this.allFetchedTasks.set(result.items);
-            const allTasks = result.items;
-            const statusGroups = allStatuses.map((status) => {
-                const tasksForStatus = allTasks.filter((task) => task.status.id === status.key);
-                return {
-                    statusInfo: status,
-                    tasks: this.createTaskDataSourceForGroup(tasksForStatus),
-                };
-            });
-            this.groupedTasks.set(statusGroups);
-            untracked(() => {
-                // Use afterRender to ensure data tables are rendered before refreshing
-                setTimeout(() => {
-                    // Refresh data sources
-                    this.groupedTasks()?.forEach((group) => {
-                        group.tasks.refresh();
-                    });
-                    // Refresh data table components
-                    this.grids().forEach((grid) => {
-                        grid.refresh({ reset: true });
-                    });
-                }, 0);
+            void parentDataSource().then((result) => {
+                this.allFetchedTasks.set(result.items);
+                const allTasks = result.items;
+                const statusGroups = allStatuses.map((status) => {
+                    const tasksForStatus = allTasks.filter((task) => taskMatchesStatus(task, status));
+                    return {
+                        statusInfo: status,
+                        tasks: this.createTaskDataSourceForGroup(tasksForStatus),
+                    };
+                });
+                this.groupedTasks.set(statusGroups);
+                untracked(() => {
+                    setTimeout(() => {
+                        this.groupedTasks()?.forEach((group) => {
+                            group.tasks.refresh();
+                        });
+                        this.grids().forEach((grid) => {
+                            grid.refresh({ reset: true });
+                        });
+                    }, 0);
+                });
             });
         }, ...(ngDevMode ? [{ debugName: "#dataChanged" }] : /* istanbul ignore next */ []));
         this.#providerChanged = effect(async () => {
@@ -1817,6 +1829,7 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
                     startDate: this.calendarService.format(task.startDate, 'DD/MM/YYYY HH:mm', {
                         locale: this.localeService.activeProfile().calendar.system,
                     }),
+                    _originalTask: task,
                 }));
                 return {
                     items: items.slice(e.skip, e.skip + e.take),
@@ -1836,13 +1849,23 @@ class AXMTaskBoardStatusGroupedGridViewComponent {
             return;
         this.onActionClick.emit({ nativeEvent: e.nativeEvent, task });
     }
+    handleRowClick(event) {
+        if (!event.data) {
+            return;
+        }
+        const mappedItem = event.data;
+        const originalTask = mappedItem._originalTask ?? this.allFetchedTasks().find((task) => task.id === mappedItem.id);
+        if (originalTask) {
+            this.onTaskClick.emit(originalTask);
+        }
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMTaskBoardStatusGroupedGridViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXMTaskBoardStatusGroupedGridViewComponent, isStandalone: true, selector: "axm-task-board-status-grouped-grid-view", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, refreshNonce: { classPropertyName: "refreshNonce", publicName: "refreshNonce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onActionClick: "onActionClick" }, viewQueries: [{ propertyName: "grids", predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (group of groupedTasks(); track trackStatusGroup($index, group)) {\n  <h1 class=\"ax-text-xl ax-font-bold\">{{ group.statusInfo.title }}</h1>\n  <ax-data-table\n    #grid\n    class=\"ax-h-[300px]\"\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"group.tasks\"\n    [loading]=\"{ enabled: true, animation: true }\"\n  >\n    <ax-text-column\n      dataField=\"title\"\n      [caption]=\"('@task-management:task-board.grid-headers.title' | translate | async)!\"\n      [width]=\"'350px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"description\"\n      [caption]=\"('@task-management:task-board.grid-headers.description' | translate | async)!\"\n      [width]=\"'500px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"startDate\"\n      [caption]=\"('@task-management:task-board.grid-headers.start-date' | translate | async)!\"\n      [width]=\"'150px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"endDate\"\n      [caption]=\"('@task-management:task-board.grid-headers.due-date' | translate | async)!\"\n      [width]=\"'150px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"priority\"\n      [caption]=\"('@task-management:task-board.grid-headers.priority' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"reporter\"\n      [caption]=\"('@task-management:task-board.grid-headers.reporter' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"assignee\"\n      [caption]=\"('@task-management:task-board.grid-headers.assignee' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'75px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"[\n        {\n          name: 'view',\n          text: ('@task-management:task-board.grid-headers.action-view' | translate | async) ?? 'View',\n          icon: 'ax-icon ax-icon-more-horizontal',\n        },\n      ]\"\n    ></ax-command-column>\n  </ax-data-table>\n}\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "title", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$2.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "component", type: i1$2.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: 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: AXMTaskBoardStatusGroupedGridViewComponent, isStandalone: true, selector: "axm-task-board-status-grouped-grid-view", inputs: { provider: { classPropertyName: "provider", publicName: "provider", isSignal: true, isRequired: false, transformFunction: null }, dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, refreshNonce: { classPropertyName: "refreshNonce", publicName: "refreshNonce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onActionClick: "onActionClick", onTaskClick: "onTaskClick" }, viewQueries: [{ propertyName: "grids", predicate: ["grid"], descendants: true, isSignal: true }], ngImport: i0, template: "@for (remountKey of groupedViewRemountKeys(); track remountKey) {\n  @for (group of groupedTasks(); track trackStatusGroup($index, group)) {\n  <h1 class=\"ax-text-xl ax-font-bold\">{{ group.statusInfo.title }}</h1>\n  <ax-data-table\n    #grid\n    class=\"ax-h-[300px]\"\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"group.tasks\"\n    [loading]=\"{ enabled: true, animation: true }\"\n    (onRowClick)=\"handleRowClick($event)\"\n  >\n    <ax-text-column\n      dataField=\"title\"\n      [caption]=\"('@task-management:task-board.grid-headers.title' | translate | async)!\"\n      [width]=\"'350px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"description\"\n      [caption]=\"('@task-management:task-board.grid-headers.description' | translate | async)!\"\n      [width]=\"'500px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"startDate\"\n      [caption]=\"('@task-management:task-board.grid-headers.start-date' | translate | async)!\"\n      [width]=\"'150px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"endDate\"\n      [caption]=\"('@task-management:task-board.grid-headers.due-date' | translate | async)!\"\n      [width]=\"'150px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"priority\"\n      [caption]=\"('@task-management:task-board.grid-headers.priority' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"reporter\"\n      [caption]=\"('@task-management:task-board.grid-headers.reporter' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"assignee\"\n      [caption]=\"('@task-management:task-board.grid-headers.assignee' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'75px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"[\n        {\n          name: 'view',\n          text: ('@task-management:task-board.grid-headers.action-view' | translate | async) ?? 'View',\n          icon: 'ax-icon ax-icon-more-horizontal',\n        },\n      ]\"\n    ></ax-command-column>\n  </ax-data-table>\n  }\n}\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"], dependencies: [{ kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i1$2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "title", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i1$2.AXDataTableTextColumnComponent, selector: "ax-text-column", inputs: ["width", "caption", "allowSorting", "allowResizing", "fixed", "customExpandIcon", "customCollapseIcon", "dataField", "expandHandler", "wrapText", "cellTemplate", "footerTemplate", "headerTemplate", "format", "formatOptions"] }, { kind: "component", type: i1$2.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMTaskBoardStatusGroupedGridViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-task-board-status-grouped-grid-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDataTableModule, AXTranslatorPipe, AsyncPipe, AXPWidgetCoreModule], template: "@for (group of groupedTasks(); track trackStatusGroup($index, group)) {\n  <h1 class=\"ax-text-xl ax-font-bold\">{{ group.statusInfo.title }}</h1>\n  <ax-data-table\n    #grid\n    class=\"ax-h-[300px]\"\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"group.tasks\"\n    [loading]=\"{ enabled: true, animation: true }\"\n  >\n    <ax-text-column\n      dataField=\"title\"\n      [caption]=\"('@task-management:task-board.grid-headers.title' | translate | async)!\"\n      [width]=\"'350px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"description\"\n      [caption]=\"('@task-management:task-board.grid-headers.description' | translate | async)!\"\n      [width]=\"'500px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"startDate\"\n      [caption]=\"('@task-management:task-board.grid-headers.start-date' | translate | async)!\"\n      [width]=\"'150px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"endDate\"\n      [caption]=\"('@task-management:task-board.grid-headers.due-date' | translate | async)!\"\n      [width]=\"'150px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"priority\"\n      [caption]=\"('@task-management:task-board.grid-headers.priority' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"reporter\"\n      [caption]=\"('@task-management:task-board.grid-headers.reporter' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"assignee\"\n      [caption]=\"('@task-management:task-board.grid-headers.assignee' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'75px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"[\n        {\n          name: 'view',\n          text: ('@task-management:task-board.grid-headers.action-view' | translate | async) ?? 'View',\n          icon: 'ax-icon ax-icon-more-horizontal',\n        },\n      ]\"\n    ></ax-command-column>\n  </ax-data-table>\n}\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], refreshNonce: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshNonce", required: false }] }], onActionClick: [{ type: i0.Output, args: ["onActionClick"] }], grids: [{ type: i0.ViewChildren, args: ['grid', { isSignal: true }] }] } });
+            args: [{ selector: 'axm-task-board-status-grouped-grid-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXDataTableModule, AXTranslatorPipe, AsyncPipe, AXPWidgetCoreModule], template: "@for (remountKey of groupedViewRemountKeys(); track remountKey) {\n  @for (group of groupedTasks(); track trackStatusGroup($index, group)) {\n  <h1 class=\"ax-text-xl ax-font-bold\">{{ group.statusInfo.title }}</h1>\n  <ax-data-table\n    #grid\n    class=\"ax-h-[300px]\"\n    [fetchDataMode]=\"'manual'\"\n    [dataSource]=\"group.tasks\"\n    [loading]=\"{ enabled: true, animation: true }\"\n    (onRowClick)=\"handleRowClick($event)\"\n  >\n    <ax-text-column\n      dataField=\"title\"\n      [caption]=\"('@task-management:task-board.grid-headers.title' | translate | async)!\"\n      [width]=\"'350px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"description\"\n      [caption]=\"('@task-management:task-board.grid-headers.description' | translate | async)!\"\n      [width]=\"'500px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"startDate\"\n      [caption]=\"('@task-management:task-board.grid-headers.start-date' | translate | async)!\"\n      [width]=\"'150px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"endDate\"\n      [caption]=\"('@task-management:task-board.grid-headers.due-date' | translate | async)!\"\n      [width]=\"'150px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"priority\"\n      [caption]=\"('@task-management:task-board.grid-headers.priority' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"reporter\"\n      [caption]=\"('@task-management:task-board.grid-headers.reporter' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n    <ax-text-column\n      dataField=\"assignee\"\n      [caption]=\"('@task-management:task-board.grid-headers.assignee' | translate | async)!\"\n      [width]=\"'125px'\"\n    ></ax-text-column>\n\n    <ax-command-column\n      fixed=\"end\"\n      [width]=\"'75px'\"\n      (onItemClick)=\"onActionClickHandler($event)\"\n      [items]=\"[\n        {\n          name: 'view',\n          text: ('@task-management:task-board.grid-headers.action-view' | translate | async) ?? 'View',\n          icon: 'ax-icon ax-icon-more-horizontal',\n        },\n      ]\"\n    ></ax-command-column>\n  </ax-data-table>\n  }\n}\n", styles: ["ax-kanban{--ax-comp-kanban-status-min-width: 25rem;height:100%;line-height:1.5}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { provider: [{ type: i0.Input, args: [{ isSignal: true, alias: "provider", required: false }] }], dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], refreshNonce: [{ type: i0.Input, args: [{ isSignal: true, alias: "refreshNonce", required: false }] }], onActionClick: [{ type: i0.Output, args: ["onActionClick"] }], onTaskClick: [{ type: i0.Output, args: ["onTaskClick"] }], grids: [{ type: i0.ViewChildren, args: ['grid', { isSignal: true }] }] } });
 
 class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
     constructor() {
@@ -1869,8 +1892,8 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.calendarEventTypeAccordionCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "calendarEventTypeAccordionCollapsed" }] : /* istanbul ignore next */ []));
         this.sidebarCollapsed = signal(false, ...(ngDevMode ? [{ debugName: "sidebarCollapsed" }] : /* istanbul ignore next */ []));
         this.currentTask = signal(null, ...(ngDevMode ? [{ debugName: "currentTask" }] : /* istanbul ignore next */ []));
-        this.currentViewMode = signal('calendar', ...(ngDevMode ? [{ debugName: "currentViewMode" }] : /* istanbul ignore next */ []));
         this.schedulerComponent = signal(null, ...(ngDevMode ? [{ debugName: "schedulerComponent" }] : /* istanbul ignore next */ []));
+        this.kanbanLoadVersion = 0;
         this.dayDataCache = signal(new Map(), ...(ngDevMode ? [{ debugName: "dayDataCache" }] : /* istanbul ignore next */ []));
         /** View switcher entries filtered by user visibility settings parts. */
         this.menuItems = computed(() => {
@@ -2001,16 +2024,61 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
             });
         };
         this.resolvedTasks = signal([], ...(ngDevMode ? [{ debugName: "resolvedTasks" }] : /* istanbul ignore next */ []));
-        this.eff = effect(async () => {
-            const viewMode = this.vm.currentViewMode();
+        /** Loads kanban tasks when filters or date range change; ignores stale async results. */
+        this.kanbanDataEffect = effect(() => {
+            if (this.vm.currentViewMode() !== 'kanban') {
+                return;
+            }
+            this.vm.selectedTaskTypeNames();
+            this.vm.selectedAssigneeIds();
+            this.vm.selectedReporterIds();
+            this.vm.selectedPriorities();
+            this.vm.currentDate();
+            this.vm.daysCount();
+            this.refreshNonce();
             const filter = this.filter();
-            if (viewMode === 'kanban') {
-                await this.taskResolveHandler(filter);
+            const version = ++this.kanbanLoadVersion;
+            void this.taskBoardService.getTasks(filter).then((result) => {
+                if (version !== this.kanbanLoadVersion) {
+                    return;
+                }
+                this.validateSelectedTask(result.items);
+                this.resolvedTasks.set(result.items);
+            });
+        }, ...(ngDevMode ? [{ debugName: "kanbanDataEffect" }] : /* istanbul ignore next */ []));
+        /** Keeps scheduler in sync when toolbar date/view changes outside the scheduler UI. */
+        this.schedulerNavigationEffect = effect(() => {
+            const viewMode = this.vm.currentViewMode();
+            const calendarViews = [
+                'day',
+                'week',
+                'month',
+                'agenda',
+                'timeline-day',
+                'timeline-weekly',
+                'timeline-month',
+                'timeline-year',
+            ];
+            if (!calendarViews.includes(viewMode)) {
+                return;
             }
-        }, ...(ngDevMode ? [{ debugName: "eff" }] : /* istanbul ignore next */ []));
+            this.vm.currentDate();
+            this.vm.currentViewMode();
+            this.vm.daysCount();
+            this.refreshNonce();
+            queueMicrotask(() => {
+                this.schedulerComponent()?.refresh();
+            });
+        }, ...(ngDevMode ? [{ debugName: "schedulerNavigationEffect" }] : /* istanbul ignore next */ []));
         this.refreshEffect = effect(() => {
             this.vm.selectedTaskTypeNames();
-            this.getResources();
+            this.vm.selectedAssigneeIds();
+            this.vm.selectedReporterIds();
+            this.vm.selectedPriorities();
+            this.vm.currentDate();
+            this.vm.daysCount();
+            this.refreshNonce();
+            void this.getResources();
             this.schedulerComponent()?.refresh();
         }, ...(ngDevMode ? [{ debugName: "refreshEffect" }] : /* istanbul ignore next */ []));
         this.calendarEventTypeRefreshEffect = effect(() => {
@@ -2342,6 +2410,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.popover()?.close();
         this.calendar()?.render();
         this.sidebarCalendar()?.render();
+        this.schedulerComponent()?.refresh();
     }
     handleCalendarSlotClick(event) {
         if (event.component.activeView !== event.component.depth)
@@ -2417,6 +2486,7 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
         this.popover()?.close();
         this.calendar()?.render();
         this.sidebarCalendar()?.render();
+        this.schedulerComponent()?.refresh();
     }
     handleTaskTypeSelectionChange(selectedValues) {
         // Convert single value to array if needed (for radio mode)
@@ -2509,11 +2579,11 @@ class AXMTaskBoardPage extends AXPPageLayoutBaseComponent {
                 provide: AXPPageLayoutBase,
                 useExisting: AXMTaskBoardPage,
             },
-        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "sidebarCalendar", first: true, predicate: ["sidebarCalendar"], descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: ["rootContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-layout-start-side\n    class=\"ax-border-e ax-lightest-surface ax-h-full ax-min-w-0\"\n    [style.width]=\"sidebarCollapsed() ? 'auto' : null\"\n  >\n    <axp-layout-header\n      class=\"ax-flex !ax-flex-row ax-items-center ax-gap-2\"\n      [class.ax-justify-center]=\"sidebarCollapsed()\"\n      [class.ax-border-b]=\"!sidebarCollapsed()\"\n    >\n      @if (!sidebarCollapsed()) {\n      <ng-container *ngTemplateOutlet=\"viewSelectorTemplate; context: { location: 'sidebar' }\"></ng-container>\n      }\n      <ax-button look=\"blank\" color=\"neutral\" (onClick)=\"toggleSidebar()\" [iconOnly]=\"true\">\n        <ax-icon [icon]=\"sidebarCollapsed() ? 'fa-light fa-chevrons-right' : 'fa-light fa-chevrons-left'\"></ax-icon>\n      </ax-button>\n    </axp-layout-header>\n\n    @if (!sidebarCollapsed()) {\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-overflow-y-auto\">\n      <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-6\">\n        <div class=\"ax-flex ax-flex-col ax-gap-3\">\n          <ax-calendar\n            #sidebarCalendar\n            [type]=\"calendarType()\"\n            [depth]=\"calendarDepth()\"\n            [cellClass]=\"getCellClass\"\n            [ngModel]=\"currentDateForCalendar()\"\n            [dayCellTemplate]=\"dayCellTemplate\"\n            [monthCellTemplate]=\"monthCellTemplate\"\n            class=\"ax-single-range-calendar ax-border ax-rounded-lg\"\n            (onSlotClick)=\"handleCalendarSlotClick($event)\"\n          >\n          </ax-calendar>\n        </div>\n\n        <div axAccordionGroup [accordion]=\"false\">\n          <div\n            class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\"\n            axAccordionItem\n            #calendarFilterTypeAccordion=\"axAccordionItem\"\n          >\n            <div\n              class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader\n            >\n              <h3 class=\"ax-text-sm ax-font-semibold\">\n                {{ ('@task-management:task-board.filter.title-plural' | translate | async)! }}\n              </h3>\n              <ax-icon\n                [icon]=\"calendarFilterTypeAccordion?.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"\n                class=\"ax-transition-transform\"\n              ></ax-icon>\n            </div>\n            <div axAccordionItemContent>\n              <axm-task-board-filters #filtersComponent [isQueryParam]=\"isQueryParam()\"></axm-task-board-filters>\n            </div>\n          </div>\n          @if (!isNonCalendarView()) {\n          <div\n            class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\"\n            axAccordionItem\n            #calendarEventTypeAccordion=\"axAccordionItem\"\n          >\n            <div\n              class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader\n            >\n              <h3 class=\"ax-text-sm ax-font-semibold\">\n                {{ ('@task-management:task-board.filter.calendars' | translate | async)! }}\n              </h3>\n              <ax-icon\n                [icon]=\"calendarEventTypeAccordion?.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"\n                class=\"ax-transition-transform\"\n              ></ax-icon>\n            </div>\n            @if (calendarEventTypeItems().length > 0) {\n            <div axAccordionItemContent>\n              <div class=\"ax-pt-2\">\n                <ax-selection-list\n                  [items]=\"calendarEventTypeItems()\"\n                  [ngModel]=\"selectedCalendarEventTypeValues()\"\n                  (onValueChanged)=\"handleCalendarEventTypeSelectionChange($event.value)\"\n                  direction=\"vertical\"\n                  [multiple]=\"true\"\n                  [showControl]=\"true\"\n                  valueField=\"id\"\n                  textField=\"text\"\n                >\n                  <ng-template #itemTemplate let-item>\n                    <div class=\"ax-flex ax-items-center\">\n                      @if (item.icon) {\n                      <i [class]=\"item.icon\"></i>\n                      }\n                      <span [class]=\"item.icon ? 'ax-ml-2' : ''\">{{ item.text }}</span>\n                    </div>\n                  </ng-template>\n                </ax-selection-list>\n              </div>\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </axp-layout-content>\n    }\n  </axp-layout-start-side>\n  <axp-page-toolbar>\n    <axp-layout-prefix class=\"sm:ax-flex-row ax-flex-col ax-items-start\">\n      <div class=\"ax-scheduler-header ax-w-max ax-sm sm:ax-md\">\n        <ax-button look=\"blank\" (onClick)=\"changeDate(false)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-left arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" [text]=\"timeText()\" #date></ax-button>\n        <ax-button look=\"blank\" (onClick)=\"changeDate(true)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-right arrow-icon\"></ax-icon>\n        </ax-button>\n        <!-- <ax-popover [target]=\"date\" [placement]=\"'bottom'\" #popover [adaptivityEnabled]=\"true\">\n          <div class=\"ax-overlay-pane\">\n            <ax-calendar\n              #calendar\n              [type]=\"calendarType()\"\n              [depth]=\"calendarDepth()\"\n              [cellClass]=\"getCellClass\"\n              [ngModel]=\"vm.currentDate()\"\n              class=\"ax-single-range-calendar\"\n              (onSlotClick)=\"handleCalendarSlotClick($event)\"\n            >\n              <ax-footer>\n                <ax-button\n                  look=\"link\"\n                  color=\"primary\"\n                  [text]=\"todayButtonText()\"\n                  (onClick)=\"handleTodayClick()\"\n                ></ax-button>\n              </ax-footer>\n            </ax-calendar>\n          </div>\n        </ax-popover> -->\n      </div>\n    </axp-layout-prefix>\n\n    <axp-layout-suffix>\n      @if (deviceService.isSmall()) {\n      <ax-button id=\"axp-toolbar-btn-filters\" (onClick)=\"toggleStartSide()\" [iconOnly]=\"true\" [color]=\"'default'\">\n        <i class=\"fa-light fa-bars\"></i>\n      </ax-button>\n      }\n      <!-- @if (!deviceService.isSmall()) {\n      <ng-container *ngTemplateOutlet=\"viewSelectorTemplate; context: { location: 'toolbar' }\"></ng-container>\n      } -->\n\n      <!-- @if(deviceService.isLarge()) {\n      <ax-button (onClick)=\"vm.toggleDetailPanel()\">\n        <ax-icon icon=\"{{ vm.isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      } -->\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-flex ax-flex-row ax-gap-2\">\n    @if (isReady()) { @switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      class=\"axp-kanban-container ax-h-full ax-w-full ax-min-w-0\"\n      [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-kanban-view>\n    } @case('grid') {\n    <axm-task-board-grid-view\n      class=\"ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-grid-view>\n    } @case('status-grouped-grid') {\n    <axm-task-board-status-grouped-grid-view\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-status-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full ax-min-w-0\"\n      [resources]=\"resources()\"\n      [startingDate]=\"vm.currentDate()\"\n      [dataSource]=\"schedulerDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      [selectedView]=\"vm.currentViewMode()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      (onTaskRightClick)=\"handleContextMenu($event)\"\n      (component)=\"schedulerComponentChanged($event)\"\n      (onMonthSlotDblClicked)=\"handleMonthSlotDblClicked($event)\"\n    ></axm-task-board-calendar-view>\n    } }\n    <ax-context-menu\n      #rootContextMenu\n      [closeOn]=\"'leave'\"\n      [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    >\n    </ax-context-menu>\n    @if (vm.isDetailPanelOpen() && deviceService.isLarge()) {\n    <axm-task-board-detail-panel></axm-task-board-detail-panel>\n    } } @else {\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-w-full ax-h-full\">\n      <ax-loading></ax-loading>\n    </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #viewSelectorTemplate let-location=\"location\">\n  @if (location === 'sidebar') {\n  <ax-button\n    class=\"ax-grow\"\n    [text]=\"('@task-management:task-board.view.' + selectedViewMode().text | translate | async)!\"\n  >\n    <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n    <ax-dropdown-panel #sidebarDropdownPanel>\n      <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n        @for (category of menuItems(); track category.key) {\n        <ng-container>\n          @if (category.children && category.children.length > 0) {\n          <ax-menu-item>\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n            @for (child of category.children; track child.key) {\n            <ax-menu-item (onClick)=\"handleViewChange(child.key, sidebarDropdownPanel)\">\n              <ax-prefix>\n                <ax-icon [icon]=\"child.icon\"></ax-icon>\n              </ax-prefix>\n              <ax-text>{{ ('@task-management:task-board.view.' + child.text | translate | async)! }}</ax-text>\n            </ax-menu-item>\n            }\n          </ax-menu-item>\n          } @else {\n          <ax-menu-item (onClick)=\"handleViewChange(category.key, sidebarDropdownPanel)\">\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n          </ax-menu-item>\n          }\n        </ng-container>\n        }\n      </ax-menu>\n    </ax-dropdown-panel>\n    <ax-suffix>\n      <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n    </ax-suffix>\n  </ax-button>\n  } @else {\n  <ax-button [text]=\"('@task-management:task-board.view.' + selectedViewMode().text | translate | async)!\">\n    <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n    <ax-dropdown-panel #toolbarDropdownPanel>\n      <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n        @for (category of menuItems(); track category.key) {\n        <ng-container>\n          @if (category.children && category.children.length > 0) {\n          <ax-menu-item>\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n            @for (child of category.children; track child.key) {\n            <ax-menu-item (onClick)=\"handleViewChange(child.key, toolbarDropdownPanel)\">\n              <ax-prefix>\n                <ax-icon [icon]=\"child.icon\"></ax-icon>\n              </ax-prefix>\n              <ax-text>{{ ('@task-management:task-board.view.' + child.text | translate | async)! }}</ax-text>\n            </ax-menu-item>\n            }\n          </ax-menu-item>\n          } @else {\n          <ax-menu-item (onClick)=\"handleViewChange(category.key, toolbarDropdownPanel)\">\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n          </ax-menu-item>\n          }\n        </ng-container>\n        }\n      </ax-menu>\n    </ax-dropdown-panel>\n    <ax-suffix>\n      <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n    </ax-suffix>\n  </ax-button>\n  }\n</ng-template>\n\n<ng-template #dayCellTemplate let-slot>\n  <div\n    class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-w-full ax-gap-1\"\n    [style.padding-bottom]=\"'0.25rem'\"\n  >\n    <span class=\"ax-flex-1 ax-text-center\">{{ slot.slot.text ?? slot.slot.date?.day ?? '' }}</span>\n    @if (slot.slot.date && getDayDataCount(slot.slot.date) > 0) {\n    <ax-badge color=\"warning\"></ax-badge>\n    }\n  </div>\n</ng-template>\n\n<ng-template #monthCellTemplate let-slot>\n  <div\n    class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-w-full ax-gap-1\"\n    [style.padding-bottom]=\"'0.25rem'\"\n  >\n    <span class=\"ax-flex-1 ax-text-center\">{{ slot.slot.text ?? '' }}</span>\n    @if (slot.slot.date && getMonthDataCount(slot.slot.date) > 0) {\n    <ax-badge color=\"warning\"></ax-badge>\n    }\n  </div>\n</ng-template>\n", styles: ["html[dir=rtl] axp-page-layout axp-page-toolbar axp-layout-prefix .ax-scheduler-header .arrow-icon:before{-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scaleX(-1)}.ax-single-range-calendar .ax-range-start,.ax-single-range-calendar .ax-range-end{color:rgba(var(--ax-sys-color-on-primary-surface))!important;background-color:rgba(var(--ax-sys-color-primary-surface),.85)!important}.ax-single-range-calendar .ax-range-start:hover,.ax-single-range-calendar .ax-range-end:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}.ax-single-range-calendar .ax-range-start.ax-state-holiday,.ax-single-range-calendar .ax-range-end.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.85)!important}.ax-single-range-calendar .ax-range-between{color:rgba(var(--ax-sys-color-on-primary-surface))!important;background-color:rgba(var(--ax-sys-color-primary-surface),.65)}.ax-single-range-calendar .ax-range-between.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.65)}.ax-single-range-calendar ax-footer{display:flex;justify-content:center;border-color:rgba(var(--ax-comp-calendar-view-header-border-color));border-top-width:var(--ax-comp-calendar-view-header-border-width, 1px)}axp-page-content:not(:has(axm-task-board-status-grouped-grid-view,axm-task-board-time-grouped-grid-view)){overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
+        ], viewQueries: [{ propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "calendar", first: true, predicate: ["calendar"], descendants: true, isSignal: true }, { propertyName: "sidebarCalendar", first: true, predicate: ["sidebarCalendar"], descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: ["rootContextMenu"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<axp-page-layout *translate=\"let t\">\n  <axp-layout-start-side\n    class=\"ax-border-e ax-lightest-surface ax-h-full ax-min-w-0\"\n    [style.width]=\"sidebarCollapsed() ? 'auto' : null\"\n  >\n    <axp-layout-header\n      class=\"ax-flex !ax-flex-row ax-items-center ax-gap-2\"\n      [class.ax-justify-center]=\"sidebarCollapsed()\"\n      [class.ax-border-b]=\"!sidebarCollapsed()\"\n    >\n      @if (!sidebarCollapsed()) {\n      <ng-container *ngTemplateOutlet=\"viewSelectorTemplate; context: { location: 'sidebar' }\"></ng-container>\n      }\n      <ax-button look=\"blank\" color=\"neutral\" (onClick)=\"toggleSidebar()\" [iconOnly]=\"true\">\n        <ax-icon [icon]=\"sidebarCollapsed() ? 'fa-light fa-chevrons-right' : 'fa-light fa-chevrons-left'\"></ax-icon>\n      </ax-button>\n    </axp-layout-header>\n\n    @if (!sidebarCollapsed()) {\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-overflow-y-auto\">\n      <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-6\">\n        <div class=\"ax-flex ax-flex-col ax-gap-3\">\n          <ax-calendar\n            #sidebarCalendar\n            [type]=\"calendarType()\"\n            [depth]=\"calendarDepth()\"\n            [cellClass]=\"getCellClass\"\n            [ngModel]=\"currentDateForCalendar()\"\n            [dayCellTemplate]=\"dayCellTemplate\"\n            [monthCellTemplate]=\"monthCellTemplate\"\n            class=\"ax-single-range-calendar ax-border ax-rounded-lg\"\n            (onSlotClick)=\"handleCalendarSlotClick($event)\"\n          >\n          </ax-calendar>\n        </div>\n\n        <div axAccordionGroup [accordion]=\"false\">\n          <div\n            class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\"\n            axAccordionItem\n            #calendarFilterTypeAccordion=\"axAccordionItem\"\n          >\n            <div\n              class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader\n            >\n              <h3 class=\"ax-text-sm ax-font-semibold\">\n                {{ ('@task-management:task-board.filter.title-plural' | translate | async)! }}\n              </h3>\n              <ax-icon\n                [icon]=\"calendarFilterTypeAccordion?.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"\n                class=\"ax-transition-transform\"\n              ></ax-icon>\n            </div>\n            <div axAccordionItemContent>\n              <axm-task-board-filters #filtersComponent [isQueryParam]=\"isQueryParam()\"></axm-task-board-filters>\n            </div>\n          </div>\n          @if (!isNonCalendarView()) {\n          <div\n            class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\"\n            axAccordionItem\n            #calendarEventTypeAccordion=\"axAccordionItem\"\n          >\n            <div\n              class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader\n            >\n              <h3 class=\"ax-text-sm ax-font-semibold\">\n                {{ ('@task-management:task-board.filter.calendars' | translate | async)! }}\n              </h3>\n              <ax-icon\n                [icon]=\"calendarEventTypeAccordion?.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"\n                class=\"ax-transition-transform\"\n              ></ax-icon>\n            </div>\n            @if (calendarEventTypeItems().length > 0) {\n            <div axAccordionItemContent>\n              <div class=\"ax-pt-2\">\n                <ax-selection-list\n                  [items]=\"calendarEventTypeItems()\"\n                  [ngModel]=\"selectedCalendarEventTypeValues()\"\n                  (onValueChanged)=\"handleCalendarEventTypeSelectionChange($event.value)\"\n                  direction=\"vertical\"\n                  [multiple]=\"true\"\n                  [showControl]=\"true\"\n                  valueField=\"id\"\n                  textField=\"text\"\n                >\n                  <ng-template #itemTemplate let-item>\n                    <div class=\"ax-flex ax-items-center\">\n                      @if (item.icon) {\n                      <i [class]=\"item.icon\"></i>\n                      }\n                      <span [class]=\"item.icon ? 'ax-ml-2' : ''\">{{ item.text }}</span>\n                    </div>\n                  </ng-template>\n                </ax-selection-list>\n              </div>\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </axp-layout-content>\n    }\n  </axp-layout-start-side>\n  <axp-page-toolbar>\n    <axp-layout-prefix class=\"sm:ax-flex-row ax-flex-col ax-items-start\">\n      <div class=\"ax-scheduler-header ax-w-max ax-sm sm:ax-md\">\n        <ax-button look=\"blank\" (onClick)=\"changeDate(false)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-left arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" [text]=\"timeText()\" #date></ax-button>\n        <ax-button look=\"blank\" (onClick)=\"changeDate(true)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-right arrow-icon\"></ax-icon>\n        </ax-button>\n        <!-- <ax-popover [target]=\"date\" [placement]=\"'bottom'\" #popover [adaptivityEnabled]=\"true\">\n          <div class=\"ax-overlay-pane\">\n            <ax-calendar\n              #calendar\n              [type]=\"calendarType()\"\n              [depth]=\"calendarDepth()\"\n              [cellClass]=\"getCellClass\"\n              [ngModel]=\"vm.currentDate()\"\n              class=\"ax-single-range-calendar\"\n              (onSlotClick)=\"handleCalendarSlotClick($event)\"\n            >\n              <ax-footer>\n                <ax-button\n                  look=\"link\"\n                  color=\"primary\"\n                  [text]=\"todayButtonText()\"\n                  (onClick)=\"handleTodayClick()\"\n                ></ax-button>\n              </ax-footer>\n            </ax-calendar>\n          </div>\n        </ax-popover> -->\n      </div>\n    </axp-layout-prefix>\n\n    <axp-layout-suffix>\n      @if (deviceService.isSmall()) {\n      <ax-button id=\"axp-toolbar-btn-filters\" (onClick)=\"toggleStartSide()\" [iconOnly]=\"true\" [color]=\"'default'\">\n        <i class=\"fa-light fa-bars\"></i>\n      </ax-button>\n      }\n      <!-- @if (!deviceService.isSmall()) {\n      <ng-container *ngTemplateOutlet=\"viewSelectorTemplate; context: { location: 'toolbar' }\"></ng-container>\n      } -->\n\n      <!-- @if(deviceService.isLarge()) {\n      <ax-button (onClick)=\"vm.toggleDetailPanel()\">\n        <ax-icon icon=\"{{ vm.isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      } -->\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-flex ax-flex-row ax-gap-2\">\n    @if (isReady()) { @switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      class=\"axp-kanban-container ax-h-full ax-w-full ax-min-w-0\"\n      [(tasks)]=\"resolvedTasks\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-kanban-view>\n    } @case('grid') {\n    <axm-task-board-grid-view\n      class=\"ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-grid-view>\n    } @case('status-grouped-grid') {\n    <axm-task-board-status-grouped-grid-view\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-status-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full ax-min-w-0\"\n      [resources]=\"resources()\"\n      [startingDate]=\"vm.currentDate()\"\n      [dataSource]=\"schedulerDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      [selectedView]=\"vm.currentViewMode()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      (onTaskRightClick)=\"handleContextMenu($event)\"\n      (component)=\"schedulerComponentChanged($event)\"\n      (onMonthSlotDblClicked)=\"handleMonthSlotDblClicked($event)\"\n    ></axm-task-board-calendar-view>\n    } }\n    <ax-context-menu\n      #rootContextMenu\n      [closeOn]=\"'leave'\"\n      [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    >\n    </ax-context-menu>\n    @if (vm.isDetailPanelOpen() && deviceService.isLarge()) {\n    <axm-task-board-detail-panel></axm-task-board-detail-panel>\n    } } @else {\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-w-full ax-h-full\">\n      <ax-loading></ax-loading>\n    </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #viewSelectorTemplate let-location=\"location\">\n  @if (location === 'sidebar') {\n  <ax-button\n    class=\"ax-grow\"\n    [text]=\"('@task-management:task-board.view.' + selectedViewMode().text | translate | async)!\"\n  >\n    <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n    <ax-dropdown-panel #sidebarDropdownPanel>\n      <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n        @for (category of menuItems(); track category.key) {\n        <ng-container>\n          @if (category.children && category.children.length > 0) {\n          <ax-menu-item>\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n            @for (child of category.children; track child.key) {\n            <ax-menu-item (onClick)=\"handleViewChange(child.key, sidebarDropdownPanel)\">\n              <ax-prefix>\n                <ax-icon [icon]=\"child.icon\"></ax-icon>\n              </ax-prefix>\n              <ax-text>{{ ('@task-management:task-board.view.' + child.text | translate | async)! }}</ax-text>\n            </ax-menu-item>\n            }\n          </ax-menu-item>\n          } @else {\n          <ax-menu-item (onClick)=\"handleViewChange(category.key, sidebarDropdownPanel)\">\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n          </ax-menu-item>\n          }\n        </ng-container>\n        }\n      </ax-menu>\n    </ax-dropdown-panel>\n    <ax-suffix>\n      <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n    </ax-suffix>\n  </ax-button>\n  } @else {\n  <ax-button [text]=\"('@task-management:task-board.view.' + selectedViewMode().text | translate | async)!\">\n    <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n    <ax-dropdown-panel #toolbarDropdownPanel>\n      <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n        @for (category of menuItems(); track category.key) {\n        <ng-container>\n          @if (category.children && category.children.length > 0) {\n          <ax-menu-item>\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n            @for (child of category.children; track child.key) {\n            <ax-menu-item (onClick)=\"handleViewChange(child.key, toolbarDropdownPanel)\">\n              <ax-prefix>\n                <ax-icon [icon]=\"child.icon\"></ax-icon>\n              </ax-prefix>\n              <ax-text>{{ ('@task-management:task-board.view.' + child.text | translate | async)! }}</ax-text>\n            </ax-menu-item>\n            }\n          </ax-menu-item>\n          } @else {\n          <ax-menu-item (onClick)=\"handleViewChange(category.key, toolbarDropdownPanel)\">\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n          </ax-menu-item>\n          }\n        </ng-container>\n        }\n      </ax-menu>\n    </ax-dropdown-panel>\n    <ax-suffix>\n      <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n    </ax-suffix>\n  </ax-button>\n  }\n</ng-template>\n\n<ng-template #dayCellTemplate let-slot>\n  <div\n    class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-w-full ax-gap-1\"\n    [style.padding-bottom]=\"'0.25rem'\"\n  >\n    <span class=\"ax-flex-1 ax-text-center\">{{ slot.slot.text ?? slot.slot.date?.day ?? '' }}</span>\n    @if (slot.slot.date && getDayDataCount(slot.slot.date) > 0) {\n    <ax-badge color=\"warning\"></ax-badge>\n    }\n  </div>\n</ng-template>\n\n<ng-template #monthCellTemplate let-slot>\n  <div\n    class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-w-full ax-gap-1\"\n    [style.padding-bottom]=\"'0.25rem'\"\n  >\n    <span class=\"ax-flex-1 ax-text-center\">{{ slot.slot.text ?? '' }}</span>\n    @if (slot.slot.date && getMonthDataCount(slot.slot.date) > 0) {\n    <ax-badge color=\"warning\"></ax-badge>\n    }\n  </div>\n</ng-template>\n", styles: ["html[dir=rtl] axp-page-layout axp-page-toolbar axp-layout-prefix .ax-scheduler-header .arrow-icon:before{-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scaleX(-1)}.ax-single-range-calendar .ax-range-start,.ax-single-range-calendar .ax-range-end{color:rgba(var(--ax-sys-color-on-primary-surface))!important;background-color:rgba(var(--ax-sys-color-primary-surface),.85)!important}.ax-single-range-calendar .ax-range-start:hover,.ax-single-range-calendar .ax-range-end:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}.ax-single-range-calendar .ax-range-start.ax-state-holiday,.ax-single-range-calendar .ax-range-end.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.85)!important}.ax-single-range-calendar .ax-range-between{color:rgba(var(--ax-sys-color-on-primary-surface))!important;background-color:rgba(var(--ax-sys-color-primary-surface),.65)}.ax-single-range-calendar .ax-range-between.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.65)}.ax-single-range-calendar ax-footer{display:flex;justify-content:center;border-color:rgba(var(--ax-comp-calendar-view-header-border-color));border-top-width:var(--ax-comp-calendar-view-header-border-width, 1px)}axp-page-content:not(:has(axm-task-board-status-grouped-grid-view,axm-task-board-time-grouped-grid-view)){overflow-y:hidden}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "ngmodule", type: 
                 //
                 AXMenuModule }, { kind: "component", type: i3$1.AXMenuItemComponent, selector: "ax-menu-item", inputs: ["name", "data", "disabled", "color"], outputs: ["onClick"] }, { kind: "component", type: i3$1.AXMenuComponent, selector: "ax-menu", inputs: ["orientation", "openOn", "closeOn", "items", "hasArrow"], outputs: ["onItemClick"] }, { kind: "component", type: i3$1.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: AXDropdownButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i6.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i5.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i5.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: "component", type: i7.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXBreadcrumbsModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i8.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "ngmodule", type: AXAccordionCdkModule }, { kind: "directive", type: i9.AXAccordionGroupDirective, selector: "[axAccordionGroup]", inputs: ["accordion", "activeIndex", "collapsedOnItemClick"], exportAs: ["axAccordionGroup"] }, { kind: "directive", type: i9.AXAccordionItemContentDirective, selector: "[axAccordionItemContent]", inputs: ["transition"], exportAs: ["axAccordionItemContent"] }, { kind: "directive", type: i9.AXAccordionItemHeaderDirective, selector: "[axAccordionItemHeader]", exportAs: ["axAccordionItemHeader"] }, { kind: "directive", type: i9.AXAccordionItemDirective, selector: "[axAccordionItem]", inputs: ["isCollapsed"], outputs: ["isCollapsedChange", "onClick"], exportAs: ["axAccordionItem"] }, { 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: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXMTaskBoardCalendarViewComponent, selector: "axm-task-board-calendar-view", inputs: ["resources", "refreshNonce", "startingDate", "selectedView", "dataSource"], outputs: ["onTaskClick", "onTaskChanged", "onMonthSlotDblClicked", "onActionClick", "component", "onTaskRightClick", "onRangeChanged"] }, { kind: "component", type: AXMTaskBoardKanbanViewComponent, selector: "axm-task-board-kanban-view", inputs: ["tasks"], outputs: ["tasksChange", "onTaskClick", "onTaskChanged", "component", "onActionClick"] }, { kind: "component", type: AXMTaskBoardGridViewComponent, selector: "axm-task-board-grid-view", inputs: ["dataSource", "refreshNonce"], outputs: ["onTaskClick", "onActionClick"] }, { kind: "component", type: AXMTaskBoardStatusGroupedGridViewComponent, selector: "axm-task-board-status-grouped-grid-view", inputs: ["provider", "dataSource", "refreshNonce"], outputs: ["onActionClick"] }, { kind: "component", type: AXMTaskBoardDetailPanel, selector: "axm-task-board-detail-panel" }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "component", type: AXMTaskBoardFiltersComponent, selector: "axm-task-board-filters", inputs: ["isQueryParam"], outputs: ["applyClicked"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i10.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+                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: AXPPageLayoutComponent, selector: "axp-page-layout" }, { kind: "component", type: AXMTaskBoardCalendarViewComponent, selector: "axm-task-board-calendar-view", inputs: ["resources", "refreshNonce", "startingDate", "selectedView", "dataSource"], outputs: ["onTaskClick", "onTaskChanged", "onMonthSlotDblClicked", "onActionClick", "component", "onTaskRightClick", "onRangeChanged"] }, { kind: "component", type: AXMTaskBoardKanbanViewComponent, selector: "axm-task-board-kanban-view", inputs: ["tasks"], outputs: ["tasksChange", "onTaskClick", "onTaskChanged", "component", "onActionClick"] }, { kind: "component", type: AXMTaskBoardGridViewComponent, selector: "axm-task-board-grid-view", inputs: ["dataSource", "refreshNonce"], outputs: ["onTaskClick", "onActionClick"] }, { kind: "component", type: AXMTaskBoardStatusGroupedGridViewComponent, selector: "axm-task-board-status-grouped-grid-view", inputs: ["provider", "dataSource", "refreshNonce"], outputs: ["onActionClick", "onTaskClick"] }, { kind: "component", type: AXMTaskBoardDetailPanel, selector: "axm-task-board-detail-panel" }, { kind: "component", type: AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: AXCalendarComponent, selector: "ax-calendar", inputs: ["rtl", "readonly", "value", "name", "disabled", "depth", "activeView", "minValue", "maxValue", "disabledDates", "holidayDates", "type", "dayCellTemplate", "monthCellTemplate", "yearCellTemplate", "cellClass", "showNavigation", "count", "id", "weekend", "weekdays"], outputs: ["onOptionChanged", "valueChange", "onValueChanged", "minValueChange", "maxValueChange", "onBlur", "onFocus", "depthChange", "typeChange", "activeViewChange", "disabledDatesChange", "holidayDatesChange", "onNavigate", "onSlotClick", "countChange"] }, { kind: "component", type: AXMTaskBoardFiltersComponent, selector: "axm-task-board-filters", inputs: ["isQueryParam"], outputs: ["applyClicked"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "component", type: i10.AXSelectionListComponent, selector: "ax-selection-list", inputs: ["id", "name", "disabled", "readonly", "tabIndex", "size", "value", "valueField", "textField", "disabledField", "readonlyField", "multiple", "direction", "customTemplate", "showControl", "items", "look"], outputs: ["onValueChanged", "onBlur", "onFocus"] }, { kind: "component", type: AXPThemeLayoutStartSideComponent, selector: "axp-layout-page-start-side, axp-layout-start-side" }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXMTaskBoardPage, decorators: [{
             type: Component,
@@ -2555,8 +2625,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                             provide: AXPPageLayoutBase,
                             useExisting: AXMTaskBoardPage,
                         },
-                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-layout-start-side\n    class=\"ax-border-e ax-lightest-surface ax-h-full ax-min-w-0\"\n    [style.width]=\"sidebarCollapsed() ? 'auto' : null\"\n  >\n    <axp-layout-header\n      class=\"ax-flex !ax-flex-row ax-items-center ax-gap-2\"\n      [class.ax-justify-center]=\"sidebarCollapsed()\"\n      [class.ax-border-b]=\"!sidebarCollapsed()\"\n    >\n      @if (!sidebarCollapsed()) {\n      <ng-container *ngTemplateOutlet=\"viewSelectorTemplate; context: { location: 'sidebar' }\"></ng-container>\n      }\n      <ax-button look=\"blank\" color=\"neutral\" (onClick)=\"toggleSidebar()\" [iconOnly]=\"true\">\n        <ax-icon [icon]=\"sidebarCollapsed() ? 'fa-light fa-chevrons-right' : 'fa-light fa-chevrons-left'\"></ax-icon>\n      </ax-button>\n    </axp-layout-header>\n\n    @if (!sidebarCollapsed()) {\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-overflow-y-auto\">\n      <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-6\">\n        <div class=\"ax-flex ax-flex-col ax-gap-3\">\n          <ax-calendar\n            #sidebarCalendar\n            [type]=\"calendarType()\"\n            [depth]=\"calendarDepth()\"\n            [cellClass]=\"getCellClass\"\n            [ngModel]=\"currentDateForCalendar()\"\n            [dayCellTemplate]=\"dayCellTemplate\"\n            [monthCellTemplate]=\"monthCellTemplate\"\n            class=\"ax-single-range-calendar ax-border ax-rounded-lg\"\n            (onSlotClick)=\"handleCalendarSlotClick($event)\"\n          >\n          </ax-calendar>\n        </div>\n\n        <div axAccordionGroup [accordion]=\"false\">\n          <div\n            class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\"\n            axAccordionItem\n            #calendarFilterTypeAccordion=\"axAccordionItem\"\n          >\n            <div\n              class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader\n            >\n              <h3 class=\"ax-text-sm ax-font-semibold\">\n                {{ ('@task-management:task-board.filter.title-plural' | translate | async)! }}\n              </h3>\n              <ax-icon\n                [icon]=\"calendarFilterTypeAccordion?.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"\n                class=\"ax-transition-transform\"\n              ></ax-icon>\n            </div>\n            <div axAccordionItemContent>\n              <axm-task-board-filters #filtersComponent [isQueryParam]=\"isQueryParam()\"></axm-task-board-filters>\n            </div>\n          </div>\n          @if (!isNonCalendarView()) {\n          <div\n            class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\"\n            axAccordionItem\n            #calendarEventTypeAccordion=\"axAccordionItem\"\n          >\n            <div\n              class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader\n            >\n              <h3 class=\"ax-text-sm ax-font-semibold\">\n                {{ ('@task-management:task-board.filter.calendars' | translate | async)! }}\n              </h3>\n              <ax-icon\n                [icon]=\"calendarEventTypeAccordion?.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"\n                class=\"ax-transition-transform\"\n              ></ax-icon>\n            </div>\n            @if (calendarEventTypeItems().length > 0) {\n            <div axAccordionItemContent>\n              <div class=\"ax-pt-2\">\n                <ax-selection-list\n                  [items]=\"calendarEventTypeItems()\"\n                  [ngModel]=\"selectedCalendarEventTypeValues()\"\n                  (onValueChanged)=\"handleCalendarEventTypeSelectionChange($event.value)\"\n                  direction=\"vertical\"\n                  [multiple]=\"true\"\n                  [showControl]=\"true\"\n                  valueField=\"id\"\n                  textField=\"text\"\n                >\n                  <ng-template #itemTemplate let-item>\n                    <div class=\"ax-flex ax-items-center\">\n                      @if (item.icon) {\n                      <i [class]=\"item.icon\"></i>\n                      }\n                      <span [class]=\"item.icon ? 'ax-ml-2' : ''\">{{ item.text }}</span>\n                    </div>\n                  </ng-template>\n                </ax-selection-list>\n              </div>\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </axp-layout-content>\n    }\n  </axp-layout-start-side>\n  <axp-page-toolbar>\n    <axp-layout-prefix class=\"sm:ax-flex-row ax-flex-col ax-items-start\">\n      <div class=\"ax-scheduler-header ax-w-max ax-sm sm:ax-md\">\n        <ax-button look=\"blank\" (onClick)=\"changeDate(false)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-left arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" [text]=\"timeText()\" #date></ax-button>\n        <ax-button look=\"blank\" (onClick)=\"changeDate(true)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-right arrow-icon\"></ax-icon>\n        </ax-button>\n        <!-- <ax-popover [target]=\"date\" [placement]=\"'bottom'\" #popover [adaptivityEnabled]=\"true\">\n          <div class=\"ax-overlay-pane\">\n            <ax-calendar\n              #calendar\n              [type]=\"calendarType()\"\n              [depth]=\"calendarDepth()\"\n              [cellClass]=\"getCellClass\"\n              [ngModel]=\"vm.currentDate()\"\n              class=\"ax-single-range-calendar\"\n              (onSlotClick)=\"handleCalendarSlotClick($event)\"\n            >\n              <ax-footer>\n                <ax-button\n                  look=\"link\"\n                  color=\"primary\"\n                  [text]=\"todayButtonText()\"\n                  (onClick)=\"handleTodayClick()\"\n                ></ax-button>\n              </ax-footer>\n            </ax-calendar>\n          </div>\n        </ax-popover> -->\n      </div>\n    </axp-layout-prefix>\n\n    <axp-layout-suffix>\n      @if (deviceService.isSmall()) {\n      <ax-button id=\"axp-toolbar-btn-filters\" (onClick)=\"toggleStartSide()\" [iconOnly]=\"true\" [color]=\"'default'\">\n        <i class=\"fa-light fa-bars\"></i>\n      </ax-button>\n      }\n      <!-- @if (!deviceService.isSmall()) {\n      <ng-container *ngTemplateOutlet=\"viewSelectorTemplate; context: { location: 'toolbar' }\"></ng-container>\n      } -->\n\n      <!-- @if(deviceService.isLarge()) {\n      <ax-button (onClick)=\"vm.toggleDetailPanel()\">\n        <ax-icon icon=\"{{ vm.isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      } -->\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-flex ax-flex-row ax-gap-2\">\n    @if (isReady()) { @switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      class=\"axp-kanban-container ax-h-full ax-w-full ax-min-w-0\"\n      [tasks]=\"resolvedTasks()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-kanban-view>\n    } @case('grid') {\n    <axm-task-board-grid-view\n      class=\"ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-grid-view>\n    } @case('status-grouped-grid') {\n    <axm-task-board-status-grouped-grid-view\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-status-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full ax-min-w-0\"\n      [resources]=\"resources()\"\n      [startingDate]=\"vm.currentDate()\"\n      [dataSource]=\"schedulerDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      [selectedView]=\"vm.currentViewMode()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      (onTaskRightClick)=\"handleContextMenu($event)\"\n      (component)=\"schedulerComponentChanged($event)\"\n      (onMonthSlotDblClicked)=\"handleMonthSlotDblClicked($event)\"\n    ></axm-task-board-calendar-view>\n    } }\n    <ax-context-menu\n      #rootContextMenu\n      [closeOn]=\"'leave'\"\n      [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    >\n    </ax-context-menu>\n    @if (vm.isDetailPanelOpen() && deviceService.isLarge()) {\n    <axm-task-board-detail-panel></axm-task-board-detail-panel>\n    } } @else {\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-w-full ax-h-full\">\n      <ax-loading></ax-loading>\n    </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #viewSelectorTemplate let-location=\"location\">\n  @if (location === 'sidebar') {\n  <ax-button\n    class=\"ax-grow\"\n    [text]=\"('@task-management:task-board.view.' + selectedViewMode().text | translate | async)!\"\n  >\n    <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n    <ax-dropdown-panel #sidebarDropdownPanel>\n      <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n        @for (category of menuItems(); track category.key) {\n        <ng-container>\n          @if (category.children && category.children.length > 0) {\n          <ax-menu-item>\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n            @for (child of category.children; track child.key) {\n            <ax-menu-item (onClick)=\"handleViewChange(child.key, sidebarDropdownPanel)\">\n              <ax-prefix>\n                <ax-icon [icon]=\"child.icon\"></ax-icon>\n              </ax-prefix>\n              <ax-text>{{ ('@task-management:task-board.view.' + child.text | translate | async)! }}</ax-text>\n            </ax-menu-item>\n            }\n          </ax-menu-item>\n          } @else {\n          <ax-menu-item (onClick)=\"handleViewChange(category.key, sidebarDropdownPanel)\">\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n          </ax-menu-item>\n          }\n        </ng-container>\n        }\n      </ax-menu>\n    </ax-dropdown-panel>\n    <ax-suffix>\n      <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n    </ax-suffix>\n  </ax-button>\n  } @else {\n  <ax-button [text]=\"('@task-management:task-board.view.' + selectedViewMode().text | translate | async)!\">\n    <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n    <ax-dropdown-panel #toolbarDropdownPanel>\n      <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n        @for (category of menuItems(); track category.key) {\n        <ng-container>\n          @if (category.children && category.children.length > 0) {\n          <ax-menu-item>\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n            @for (child of category.children; track child.key) {\n            <ax-menu-item (onClick)=\"handleViewChange(child.key, toolbarDropdownPanel)\">\n              <ax-prefix>\n                <ax-icon [icon]=\"child.icon\"></ax-icon>\n              </ax-prefix>\n              <ax-text>{{ ('@task-management:task-board.view.' + child.text | translate | async)! }}</ax-text>\n            </ax-menu-item>\n            }\n          </ax-menu-item>\n          } @else {\n          <ax-menu-item (onClick)=\"handleViewChange(category.key, toolbarDropdownPanel)\">\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n          </ax-menu-item>\n          }\n        </ng-container>\n        }\n      </ax-menu>\n    </ax-dropdown-panel>\n    <ax-suffix>\n      <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n    </ax-suffix>\n  </ax-button>\n  }\n</ng-template>\n\n<ng-template #dayCellTemplate let-slot>\n  <div\n    class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-w-full ax-gap-1\"\n    [style.padding-bottom]=\"'0.25rem'\"\n  >\n    <span class=\"ax-flex-1 ax-text-center\">{{ slot.slot.text ?? slot.slot.date?.day ?? '' }}</span>\n    @if (slot.slot.date && getDayDataCount(slot.slot.date) > 0) {\n    <ax-badge color=\"warning\"></ax-badge>\n    }\n  </div>\n</ng-template>\n\n<ng-template #monthCellTemplate let-slot>\n  <div\n    class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-w-full ax-gap-1\"\n    [style.padding-bottom]=\"'0.25rem'\"\n  >\n    <span class=\"ax-flex-1 ax-text-center\">{{ slot.slot.text ?? '' }}</span>\n    @if (slot.slot.date && getMonthDataCount(slot.slot.date) > 0) {\n    <ax-badge color=\"warning\"></ax-badge>\n    }\n  </div>\n</ng-template>\n", styles: ["html[dir=rtl] axp-page-layout axp-page-toolbar axp-layout-prefix .ax-scheduler-header .arrow-icon:before{-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scaleX(-1)}.ax-single-range-calendar .ax-range-start,.ax-single-range-calendar .ax-range-end{color:rgba(var(--ax-sys-color-on-primary-surface))!important;background-color:rgba(var(--ax-sys-color-primary-surface),.85)!important}.ax-single-range-calendar .ax-range-start:hover,.ax-single-range-calendar .ax-range-end:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}.ax-single-range-calendar .ax-range-start.ax-state-holiday,.ax-single-range-calendar .ax-range-end.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.85)!important}.ax-single-range-calendar .ax-range-between{color:rgba(var(--ax-sys-color-on-primary-surface))!important;background-color:rgba(var(--ax-sys-color-primary-surface),.65)}.ax-single-range-calendar .ax-range-between.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.65)}.ax-single-range-calendar ax-footer{display:flex;justify-content:center;border-color:rgba(var(--ax-comp-calendar-view-header-border-color));border-top-width:var(--ax-comp-calendar-view-header-border-width, 1px)}axp-page-content:not(:has(axm-task-board-status-grouped-grid-view,axm-task-board-time-grouped-grid-view)){overflow-y:hidden}\n"] }]
+                    ], template: "<axp-page-layout *translate=\"let t\">\n  <axp-layout-start-side\n    class=\"ax-border-e ax-lightest-surface ax-h-full ax-min-w-0\"\n    [style.width]=\"sidebarCollapsed() ? 'auto' : null\"\n  >\n    <axp-layout-header\n      class=\"ax-flex !ax-flex-row ax-items-center ax-gap-2\"\n      [class.ax-justify-center]=\"sidebarCollapsed()\"\n      [class.ax-border-b]=\"!sidebarCollapsed()\"\n    >\n      @if (!sidebarCollapsed()) {\n      <ng-container *ngTemplateOutlet=\"viewSelectorTemplate; context: { location: 'sidebar' }\"></ng-container>\n      }\n      <ax-button look=\"blank\" color=\"neutral\" (onClick)=\"toggleSidebar()\" [iconOnly]=\"true\">\n        <ax-icon [icon]=\"sidebarCollapsed() ? 'fa-light fa-chevrons-right' : 'fa-light fa-chevrons-left'\"></ax-icon>\n      </ax-button>\n    </axp-layout-header>\n\n    @if (!sidebarCollapsed()) {\n    <axp-layout-content class=\"ax-flex ax-flex-col ax-min-h-0 ax-overflow-y-auto\">\n      <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-6\">\n        <div class=\"ax-flex ax-flex-col ax-gap-3\">\n          <ax-calendar\n            #sidebarCalendar\n            [type]=\"calendarType()\"\n            [depth]=\"calendarDepth()\"\n            [cellClass]=\"getCellClass\"\n            [ngModel]=\"currentDateForCalendar()\"\n            [dayCellTemplate]=\"dayCellTemplate\"\n            [monthCellTemplate]=\"monthCellTemplate\"\n            class=\"ax-single-range-calendar ax-border ax-rounded-lg\"\n            (onSlotClick)=\"handleCalendarSlotClick($event)\"\n          >\n          </ax-calendar>\n        </div>\n\n        <div axAccordionGroup [accordion]=\"false\">\n          <div\n            class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\"\n            axAccordionItem\n            #calendarFilterTypeAccordion=\"axAccordionItem\"\n          >\n            <div\n              class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader\n            >\n              <h3 class=\"ax-text-sm ax-font-semibold\">\n                {{ ('@task-management:task-board.filter.title-plural' | translate | async)! }}\n              </h3>\n              <ax-icon\n                [icon]=\"calendarFilterTypeAccordion?.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"\n                class=\"ax-transition-transform\"\n              ></ax-icon>\n            </div>\n            <div axAccordionItemContent>\n              <axm-task-board-filters #filtersComponent [isQueryParam]=\"isQueryParam()\"></axm-task-board-filters>\n            </div>\n          </div>\n          @if (!isNonCalendarView()) {\n          <div\n            class=\"ax-mb-2 ax-w-full ax-border ax-p-2 ax-rounded-lg\"\n            axAccordionItem\n            #calendarEventTypeAccordion=\"axAccordionItem\"\n          >\n            <div\n              class=\"ax-flex ax-items-center ax-justify-between ax-gap-2 ax-select-none ax-cursor-pointer\"\n              axAccordionItemHeader\n            >\n              <h3 class=\"ax-text-sm ax-font-semibold\">\n                {{ ('@task-management:task-board.filter.calendars' | translate | async)! }}\n              </h3>\n              <ax-icon\n                [icon]=\"calendarEventTypeAccordion?.isCollapsed() ? 'fa-light fa-chevron-down' : 'fa-light fa-chevron-up'\"\n                class=\"ax-transition-transform\"\n              ></ax-icon>\n            </div>\n            @if (calendarEventTypeItems().length > 0) {\n            <div axAccordionItemContent>\n              <div class=\"ax-pt-2\">\n                <ax-selection-list\n                  [items]=\"calendarEventTypeItems()\"\n                  [ngModel]=\"selectedCalendarEventTypeValues()\"\n                  (onValueChanged)=\"handleCalendarEventTypeSelectionChange($event.value)\"\n                  direction=\"vertical\"\n                  [multiple]=\"true\"\n                  [showControl]=\"true\"\n                  valueField=\"id\"\n                  textField=\"text\"\n                >\n                  <ng-template #itemTemplate let-item>\n                    <div class=\"ax-flex ax-items-center\">\n                      @if (item.icon) {\n                      <i [class]=\"item.icon\"></i>\n                      }\n                      <span [class]=\"item.icon ? 'ax-ml-2' : ''\">{{ item.text }}</span>\n                    </div>\n                  </ng-template>\n                </ax-selection-list>\n              </div>\n            </div>\n            }\n          </div>\n          }\n        </div>\n      </div>\n    </axp-layout-content>\n    }\n  </axp-layout-start-side>\n  <axp-page-toolbar>\n    <axp-layout-prefix class=\"sm:ax-flex-row ax-flex-col ax-items-start\">\n      <div class=\"ax-scheduler-header ax-w-max ax-sm sm:ax-md\">\n        <ax-button look=\"blank\" (onClick)=\"changeDate(false)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-left arrow-icon\"></ax-icon>\n        </ax-button>\n        <ax-button look=\"blank\" [text]=\"timeText()\" #date></ax-button>\n        <ax-button look=\"blank\" (onClick)=\"changeDate(true)\">\n          <ax-icon class=\"ax-icon ax-text-xl ax-icon-chevron-right arrow-icon\"></ax-icon>\n        </ax-button>\n        <!-- <ax-popover [target]=\"date\" [placement]=\"'bottom'\" #popover [adaptivityEnabled]=\"true\">\n          <div class=\"ax-overlay-pane\">\n            <ax-calendar\n              #calendar\n              [type]=\"calendarType()\"\n              [depth]=\"calendarDepth()\"\n              [cellClass]=\"getCellClass\"\n              [ngModel]=\"vm.currentDate()\"\n              class=\"ax-single-range-calendar\"\n              (onSlotClick)=\"handleCalendarSlotClick($event)\"\n            >\n              <ax-footer>\n                <ax-button\n                  look=\"link\"\n                  color=\"primary\"\n                  [text]=\"todayButtonText()\"\n                  (onClick)=\"handleTodayClick()\"\n                ></ax-button>\n              </ax-footer>\n            </ax-calendar>\n          </div>\n        </ax-popover> -->\n      </div>\n    </axp-layout-prefix>\n\n    <axp-layout-suffix>\n      @if (deviceService.isSmall()) {\n      <ax-button id=\"axp-toolbar-btn-filters\" (onClick)=\"toggleStartSide()\" [iconOnly]=\"true\" [color]=\"'default'\">\n        <i class=\"fa-light fa-bars\"></i>\n      </ax-button>\n      }\n      <!-- @if (!deviceService.isSmall()) {\n      <ng-container *ngTemplateOutlet=\"viewSelectorTemplate; context: { location: 'toolbar' }\"></ng-container>\n      } -->\n\n      <!-- @if(deviceService.isLarge()) {\n      <ax-button (onClick)=\"vm.toggleDetailPanel()\">\n        <ax-icon icon=\"{{ vm.isDetailPanelOpen() ? 'fa-solid fa-square-info' : 'fa-light fa-square-info' }}\"></ax-icon>\n      </ax-button>\n      } -->\n    </axp-layout-suffix>\n  </axp-page-toolbar>\n  <axp-page-content class=\"ax-flex ax-flex-row ax-gap-2\">\n    @if (isReady()) { @switch(vm.currentViewMode()) { @case('kanban') {\n    <axm-task-board-kanban-view\n      class=\"axp-kanban-container ax-h-full ax-w-full ax-min-w-0\"\n      [(tasks)]=\"resolvedTasks\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-kanban-view>\n    } @case('grid') {\n    <axm-task-board-grid-view\n      class=\"ax-h-full ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-grid-view>\n    } @case('status-grouped-grid') {\n    <axm-task-board-status-grouped-grid-view\n      class=\"ax-flex ax-flex-col ax-gap-2 ax-w-full ax-min-w-0\"\n      [dataSource]=\"gridDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      (onActionClick)=\"handleContextMenu($event)\"\n    ></axm-task-board-status-grouped-grid-view>\n    } @default {\n    <axm-task-board-calendar-view\n      class=\"axp-scheduler-container ax-h-full ax-w-full ax-min-w-0\"\n      [resources]=\"resources()\"\n      [startingDate]=\"vm.currentDate()\"\n      [dataSource]=\"schedulerDataSource\"\n      [refreshNonce]=\"refreshNonce()\"\n      (onTaskClick)=\"vm.selectTask($event)\"\n      [selectedView]=\"vm.currentViewMode()\"\n      (onActionClick)=\"handleContextMenu($event)\"\n      (onTaskRightClick)=\"handleContextMenu($event)\"\n      (component)=\"schedulerComponentChanged($event)\"\n      (onMonthSlotDblClicked)=\"handleMonthSlotDblClicked($event)\"\n    ></axm-task-board-calendar-view>\n    } }\n    <ax-context-menu\n      #rootContextMenu\n      [closeOn]=\"'leave'\"\n      [orientation]=\"'vertical'\"\n      (onOpening)=\"handleContextMenuOnOpening($event)\"\n      (onItemClick)=\"handleContextMenuItemClick($event)\"\n    >\n    </ax-context-menu>\n    @if (vm.isDetailPanelOpen() && deviceService.isLarge()) {\n    <axm-task-board-detail-panel></axm-task-board-detail-panel>\n    } } @else {\n    <div class=\"ax-flex ax-items-center ax-justify-center ax-w-full ax-h-full\">\n      <ax-loading></ax-loading>\n    </div>\n    }\n  </axp-page-content>\n</axp-page-layout>\n\n<ng-template #viewSelectorTemplate let-location=\"location\">\n  @if (location === 'sidebar') {\n  <ax-button\n    class=\"ax-grow\"\n    [text]=\"('@task-management:task-board.view.' + selectedViewMode().text | translate | async)!\"\n  >\n    <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n    <ax-dropdown-panel #sidebarDropdownPanel>\n      <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n        @for (category of menuItems(); track category.key) {\n        <ng-container>\n          @if (category.children && category.children.length > 0) {\n          <ax-menu-item>\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n            @for (child of category.children; track child.key) {\n            <ax-menu-item (onClick)=\"handleViewChange(child.key, sidebarDropdownPanel)\">\n              <ax-prefix>\n                <ax-icon [icon]=\"child.icon\"></ax-icon>\n              </ax-prefix>\n              <ax-text>{{ ('@task-management:task-board.view.' + child.text | translate | async)! }}</ax-text>\n            </ax-menu-item>\n            }\n          </ax-menu-item>\n          } @else {\n          <ax-menu-item (onClick)=\"handleViewChange(category.key, sidebarDropdownPanel)\">\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n          </ax-menu-item>\n          }\n        </ng-container>\n        }\n      </ax-menu>\n    </ax-dropdown-panel>\n    <ax-suffix>\n      <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n    </ax-suffix>\n  </ax-button>\n  } @else {\n  <ax-button [text]=\"('@task-management:task-board.view.' + selectedViewMode().text | translate | async)!\">\n    <ax-prefix><ax-icon [icon]=\"selectedViewMode().icon\"></ax-icon></ax-prefix>\n    <ax-dropdown-panel #toolbarDropdownPanel>\n      <ax-menu [orientation]=\"'vertical'\" class=\"ax-menu-container\">\n        @for (category of menuItems(); track category.key) {\n        <ng-container>\n          @if (category.children && category.children.length > 0) {\n          <ax-menu-item>\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n            @for (child of category.children; track child.key) {\n            <ax-menu-item (onClick)=\"handleViewChange(child.key, toolbarDropdownPanel)\">\n              <ax-prefix>\n                <ax-icon [icon]=\"child.icon\"></ax-icon>\n              </ax-prefix>\n              <ax-text>{{ ('@task-management:task-board.view.' + child.text | translate | async)! }}</ax-text>\n            </ax-menu-item>\n            }\n          </ax-menu-item>\n          } @else {\n          <ax-menu-item (onClick)=\"handleViewChange(category.key, toolbarDropdownPanel)\">\n            <ax-prefix>\n              <ax-icon [icon]=\"category.icon\"></ax-icon>\n            </ax-prefix>\n            <ax-text>{{ ('@task-management:task-board.' + category.text | translate | async)! }}</ax-text>\n          </ax-menu-item>\n          }\n        </ng-container>\n        }\n      </ax-menu>\n    </ax-dropdown-panel>\n    <ax-suffix>\n      <ax-icon icon=\"fa-light fa-caret-down\"></ax-icon>\n    </ax-suffix>\n  </ax-button>\n  }\n</ng-template>\n\n<ng-template #dayCellTemplate let-slot>\n  <div\n    class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-w-full ax-gap-1\"\n    [style.padding-bottom]=\"'0.25rem'\"\n  >\n    <span class=\"ax-flex-1 ax-text-center\">{{ slot.slot.text ?? slot.slot.date?.day ?? '' }}</span>\n    @if (slot.slot.date && getDayDataCount(slot.slot.date) > 0) {\n    <ax-badge color=\"warning\"></ax-badge>\n    }\n  </div>\n</ng-template>\n\n<ng-template #monthCellTemplate let-slot>\n  <div\n    class=\"ax-flex ax-flex-col ax-items-center ax-justify-between ax-w-full ax-gap-1\"\n    [style.padding-bottom]=\"'0.25rem'\"\n  >\n    <span class=\"ax-flex-1 ax-text-center\">{{ slot.slot.text ?? '' }}</span>\n    @if (slot.slot.date && getMonthDataCount(slot.slot.date) > 0) {\n    <ax-badge color=\"warning\"></ax-badge>\n    }\n  </div>\n</ng-template>\n", styles: ["html[dir=rtl] axp-page-layout axp-page-toolbar axp-layout-prefix .ax-scheduler-header .arrow-icon:before{-moz-transform:scale(-1,1);-webkit-transform:scale(-1,1);-o-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scaleX(-1)}.ax-single-range-calendar .ax-range-start,.ax-single-range-calendar .ax-range-end{color:rgba(var(--ax-sys-color-on-primary-surface))!important;background-color:rgba(var(--ax-sys-color-primary-surface),.85)!important}.ax-single-range-calendar .ax-range-start:hover,.ax-single-range-calendar .ax-range-end:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}.ax-single-range-calendar .ax-range-start.ax-state-holiday,.ax-single-range-calendar .ax-range-end.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.85)!important}.ax-single-range-calendar .ax-range-between{color:rgba(var(--ax-sys-color-on-primary-surface))!important;background-color:rgba(var(--ax-sys-color-primary-surface),.65)}.ax-single-range-calendar .ax-range-between.ax-state-holiday{background-color:rgba(var(--ax-sys-color-danger-surface),.65)}.ax-single-range-calendar ax-footer{display:flex;justify-content:center;border-color:rgba(var(--ax-comp-calendar-view-header-border-color));border-top-width:var(--ax-comp-calendar-view-header-border-width, 1px)}axp-page-content:not(:has(axm-task-board-status-grouped-grid-view,axm-task-board-time-grouped-grid-view)){overflow-y:hidden}\n"] }]
         }], propDecorators: { popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }], calendar: [{ type: i0.ViewChild, args: ['calendar', { isSignal: true }] }], sidebarCalendar: [{ type: i0.ViewChild, args: ['sidebarCalendar', { isSignal: true }] }], contextMenu: [{ type: i0.ViewChild, args: ['rootContextMenu', { isSignal: true }] }] } });
 
 export { AXMTaskBoardPage };
-//# sourceMappingURL=acorex-modules-task-management-task-board.page-CkVHYIl5.mjs.map
+//# sourceMappingURL=acorex-modules-task-management-task-board.page-DUIHtqnr.mjs.map